/* =============================================================
   D. LABRADA — hoja de estilos
   Paleta tomada de la obra: el negro cálido de taller de «Dios y
   Diablo», el cobalto de «Neuronas», el bermellón del cono, el
   cadmio y el violeta de la aureola.
   Oscuro por defecto (la obra está pintada sobre fondos oscuros);
   el tema claro es un muro de galería, gris frío.
   ============================================================= */

/* ---------- 1. TOKENS ---------- */

:root{
  color-scheme: dark;

  --bg:      #100E0D;
  --bg-2:    #191514;
  --bg-3:    #241E1C;
  --line:    #322A27;
  --line-2:  #4A413C;

  --ink:     #F1EDE8;
  --ink-2:   #BAB0A8;
  --ink-3:   #8A7F78;

  --cobalto: #5B92F5;
  --cobalto-deep: #2A5CC4;
  --bermellon: #F2603A;
  --cadmio:  #F2C230;
  --violeta: #9A8BF0;

  --on-accent: #17100D;
  --halo: rgba(43,92,196,.34);
  --shadow: 0 28px 64px -34px rgba(0,0,0,.9);
  --shadow-lift: 0 40px 80px -36px rgba(0,0,0,1);
  --glass: rgba(16,14,13,.78);
  --texture: .05;

  --f-display: "Fraunces", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --f-body: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;

  --wrap: 1340px;
  --gut: clamp(20px, 5vw, 76px);
  --ease: cubic-bezier(.2,.7,.2,1);
}

@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]){
    color-scheme: light;
    --bg:      #EBECED;
    --bg-2:    #F7F8F9;
    --bg-3:    #DDE0E3;
    --line:    #CCD0D4;
    --line-2:  #A6ACB2;
    --ink:     #14181B;
    --ink-2:   #4B5359;
    --ink-3:   #79828A;
    --cobalto: #1746B5;
    --cobalto-deep: #0F3389;
    --bermellon: #C6401C;
    --cadmio:  #8E6200;
    --violeta: #4A39BA;
    --on-accent: #FFF6F2;
    --halo: rgba(23,70,181,.15);
    --shadow: 0 22px 48px -30px rgba(16,24,34,.45);
    --shadow-lift: 0 34px 62px -30px rgba(16,24,34,.55);
    --glass: rgba(235,236,237,.82);
    --texture: .035;
  }
}

:root[data-theme="light"]{
  color-scheme: light;
  --bg:      #EBECED;
  --bg-2:    #F7F8F9;
  --bg-3:    #DDE0E3;
  --line:    #CCD0D4;
  --line-2:  #A6ACB2;
  --ink:     #14181B;
  --ink-2:   #4B5359;
  --ink-3:   #79828A;
  --cobalto: #1746B5;
  --cobalto-deep: #0F3389;
  --bermellon: #C6401C;
  --cadmio:  #8E6200;
  --violeta: #4A39BA;
  --on-accent: #FFF6F2;
  --halo: rgba(23,70,181,.15);
  --shadow: 0 22px 48px -30px rgba(16,24,34,.45);
  --shadow-lift: 0 34px 62px -30px rgba(16,24,34,.55);
  --glass: rgba(235,236,237,.82);
  --texture: .035;
}

/* ---------- 2. BASE ---------- */

*, *::before, *::after{ box-sizing: border-box; }

body{
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: 17px;
  line-height: 1.62;
  font-variation-settings: "wdth" 100, "wght" 400;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
body.lb-open{ overflow: hidden; }

/* grano de lienzo sobre todo el sitio */
body::after{
  content: "";
  position: fixed;
  inset: 0;
  z-index: 60;
  pointer-events: none;
  opacity: var(--texture);
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}

img{ max-width: 100%; display: block; }

a{ color: inherit; }

::selection{ background: var(--bermellon); color: var(--on-accent); }

:focus-visible{
  outline: 2px solid var(--cobalto);
  outline-offset: 3px;
  border-radius: 2px;
}

.wrap{
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gut);
}

/* ---------- 3. TIPOGRAFÍA ---------- */

h1, h2, h3, .sig, .mark, .stat b, .lb-info h2{
  font-family: var(--f-display);
  font-variation-settings: "opsz" 144, "SOFT" 0, "WONK" 1;
  text-wrap: balance;
  margin: 0;
}

h1{
  font-size: clamp(2.9rem, 9.2vw, 7.6rem);
  font-weight: 500;
  line-height: .84;
  letter-spacing: -.035em;
}
h1 .l2{ display: block; color: var(--ink-2); }

h2{
  font-size: clamp(2.15rem, 5vw, 3.9rem);
  font-weight: 500;
  line-height: .96;
  letter-spacing: -.022em;
}

h3{
  font-family: var(--f-body);
  font-variation-settings: "wdth" 100, "wght" 620;
  font-size: 1.04rem;
  line-height: 1.3;
  letter-spacing: -.005em;
  margin: 0;
}

p{ margin: 0 0 1.05em; }
p:last-child{ margin-bottom: 0; }

.eyebrow{
  font-size: .69rem;
  font-variation-settings: "wdth" 100, "wght" 640;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0 0 1.1rem;
  display: flex;
  align-items: center;
  gap: .7rem;
}
.eyebrow::before{
  content: "";
  width: 9px; height: 9px;
  background: var(--bermellon);
  flex: none;
  transform: rotate(45deg);
}

.lead{
  font-size: clamp(1.02rem, 1.5vw, 1.16rem);
  line-height: 1.6;
  color: var(--ink-2);
  max-width: 58ch;
}

.label{
  font-size: .64rem;
  font-variation-settings: "wdth" 100, "wght" 640;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* ---------- 4. BOTONES ---------- */

.btn{
  --pad: .92rem 1.45rem;
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: var(--pad);
  font-family: var(--f-body);
  font-size: .87rem;
  font-variation-settings: "wdth" 100, "wght" 620;
  letter-spacing: .01em;
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: 2px;
  cursor: pointer;
  transition: background .3s var(--ease), color .3s var(--ease),
              border-color .3s var(--ease), transform .3s var(--ease);
}
.btn svg{ width: 17px; height: 17px; flex: none; }

.btn-wa{
  background: var(--bermellon);
  color: var(--on-accent);
}
.btn-wa:hover{ transform: translateY(-2px); background: var(--ink); color: var(--bg); }

.btn-ghost{
  background: transparent;
  color: var(--ink);
  border-color: var(--line-2);
}
.btn-ghost:hover{ border-color: var(--ink); background: var(--bg-2); transform: translateY(-2px); }

.btn-sm{ --pad: .6rem 1rem; font-size: .8rem; }

.icon-btn{
  width: 40px; height: 40px;
  display: inline-grid;
  place-items: center;
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 2px;
  cursor: pointer;
  transition: background .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease);
}
.icon-btn svg{ width: 18px; height: 18px; }
.icon-btn:hover{ background: var(--bg-3); border-color: var(--line-2); }

/* ---------- 5. CABECERA ---------- */

.progress{
  position: fixed;
  top: 0; left: 0;
  height: 2px;
  width: 100%;
  transform: scaleX(0);
  transform-origin: 0 50%;
  background: var(--bermellon);
  z-index: 50;
}

.site-head{
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 45;
  border-bottom: 1px solid transparent;
  transition: background .4s var(--ease), border-color .4s var(--ease), backdrop-filter .4s;
}
.site-head.stuck{
  background: var(--glass);
  backdrop-filter: blur(14px) saturate(1.4);
  border-bottom-color: var(--line);
}

.head-in{
  display: flex;
  align-items: center;
  gap: clamp(.7rem, 2vw, 1.8rem);
  height: 68px;
}

.mark{
  font-family: var(--f-display);
  font-variation-settings: "opsz" 144, "SOFT" 0, "WONK" 1;
  font-size: 1.16rem;
  font-weight: 600;
  letter-spacing: -.02em;
  text-decoration: none;
  white-space: nowrap;
  display: inline-block;
}
.mark .dot{ color: var(--bermellon); }
.mark small{
  margin-left: .5rem;
  font-family: var(--f-body);
  font-size: .6rem;
  font-variation-settings: "wdth" 100, "wght" 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.nav{
  display: flex;
  gap: 1.5rem;
  margin-inline: auto;
}
.nav a{
  position: relative;
  font-size: .855rem;
  font-variation-settings: "wdth" 100, "wght" 500;
  text-decoration: none;
  color: var(--ink-2);
  padding-block: .4rem;
  transition: color .25s var(--ease);
}
.nav a::after{
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--bermellon);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform .35s var(--ease);
}
.nav a:hover{ color: var(--ink); }
.nav a:hover::after, .nav a.active::after{ transform: scaleX(1); }
.nav a.active{ color: var(--ink); }

.lang{ display: flex; border: 1px solid var(--line); border-radius: 2px; overflow: hidden; }
.lang button{
  background: transparent;
  border: 0;
  color: var(--ink-3);
  font-family: var(--f-body);
  font-size: .7rem;
  font-variation-settings: "wdth" 100, "wght" 660;
  letter-spacing: .1em;
  padding: .48rem .62rem;
  cursor: pointer;
  transition: background .25s var(--ease), color .25s var(--ease);
}
.lang button[aria-pressed="true"]{ background: var(--ink); color: var(--bg); }
.lang button:hover[aria-pressed="false"]{ color: var(--ink); }

.theme-btn{ width: 36px; height: 34px; }
.theme-btn svg{ width: 16px; height: 16px; }
.theme-btn .moon{ display: none; }
:root[data-theme="light"] .theme-btn .moon,
.theme-btn.is-light .moon{ display: block; }
:root[data-theme="light"] .theme-btn .sun,
.theme-btn.is-light .sun{ display: none; }

@media (max-width: 1080px){
  .nav{ display: none; }
  .head-in{ justify-content: space-between; }
  .mark small{ display: none; }
}
@media (max-width: 560px){
  .head-wa .txt{ display: none; }
  .head-wa{ --pad: .6rem .7rem; }
}

/* ---------- 6. HERO ---------- */

.hero{
  position: relative;
  padding-top: clamp(104px, 13vh, 150px);
  padding-bottom: clamp(48px, 7vw, 92px);
  overflow: hidden;
}
.hero-halo{
  position: absolute;
  top: -22%; right: -10%;
  width: min(1100px, 92vw);
  aspect-ratio: 1;
  background: radial-gradient(circle at 50% 50%, var(--halo), transparent 66%);
  pointer-events: none;
  z-index: 0;
}

.hero-in{
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .82fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: end;
}

.hero-copy > *{ animation: rise .9s var(--ease) both; }
.hero-copy > .eyebrow{ animation-delay: .05s; }
.hero-copy > h1{ animation-delay: .12s; }
.hero-copy > .hero-quote{ animation-delay: .24s; }
.hero-copy > .lead{ animation-delay: .32s; }
.hero-copy > .hero-cta{ animation-delay: .4s; }
.hero-copy > .stats{ animation-delay: .48s; }

@keyframes rise{
  from{ opacity: 0; transform: translateY(20px); }
  to{ opacity: 1; transform: none; }
}

.hero-quote{
  font-family: var(--f-display);
  font-variation-settings: "opsz" 40, "SOFT" 0, "WONK" 0;
  font-style: italic;
  font-size: clamp(1.15rem, 2.1vw, 1.55rem);
  line-height: 1.34;
  color: var(--cobalto);
  margin: 1.6rem 0 1.1rem;
  max-width: 24ch;
}

.hero-cta{
  display: flex;
  flex-wrap: wrap;
  gap: .7rem;
  margin-top: 1.9rem;
}

.stats{
  display: flex;
  flex-wrap: wrap;
  gap: clamp(1.5rem, 4vw, 3.2rem);
  margin-top: clamp(2.2rem, 5vw, 3.4rem);
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
}
.stat{ display: flex; flex-direction: column; gap: .15rem; }
.stat b{
  font-size: clamp(2rem, 3.6vw, 2.9rem);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
}
.stat span{
  font-size: .73rem;
  font-variation-settings: "wdth" 100, "wght" 560;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-3);
  max-width: 14ch;
}

.hero-fig{
  margin: 0;
  position: relative;
}
.hero-frame{
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  aspect-ratio: 1800 / 2100;
  background: var(--bg-2);
}
.hero-frame img{
  width: 100%;
  height: 118%;
  object-fit: cover;
  object-position: 50% 28%;
  transform: translate3d(0, var(--py, 0px), 0);
  will-change: transform;
}
.hero-fig figcaption{
  display: flex;
  align-items: baseline;
  gap: .6rem;
  margin-top: .9rem;
  font-size: .74rem;
  font-variation-settings: "wdth" 100, "wght" 520;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.hero-fig figcaption em{
  font-style: normal;
  color: var(--ink-2);
  font-variation-settings: "wdth" 100, "wght" 640;
}

.scroll-cue{
  display: flex;
  align-items: center;
  gap: .6rem;
  margin-top: clamp(2.2rem, 5vw, 3.4rem);
  font-size: .66rem;
  font-variation-settings: "wdth" 100, "wght" 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.scroll-cue i{
  display: block;
  width: 54px; height: 1px;
  background: linear-gradient(90deg, var(--bermellon), transparent);
  animation: cue 2.6s var(--ease) infinite;
  transform-origin: 0 50%;
}
@keyframes cue{
  0%, 100%{ transform: scaleX(.35); opacity: .5; }
  50%{ transform: scaleX(1); opacity: 1; }
}

@media (max-width: 900px){
  .hero-in{ grid-template-columns: 1fr; }
  .hero-fig{ order: -1; }
  .hero-frame{ aspect-ratio: 1 / 1; }
  .scroll-cue{ display: none; }
}

/* ---------- 7. SECCIONES ---------- */

.section{
  padding-block: clamp(4rem, 7.5vw, 7.2rem);
  position: relative;
}
section[id]{ scroll-margin-top: 84px; }
.section-alt{ background: var(--bg-2); }
.section-alt, .motivos{ border-block: 1px solid var(--line); }

.sec-head{ margin-bottom: clamp(2.2rem, 4vw, 3.4rem); max-width: 62ch; }

/* ---------- 8. OBSESIONES (franja horizontal) ---------- */

.motivos{ background: var(--bg-2); }
.mot-head{
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.4rem;
  margin-bottom: 2.2rem;
}
.mot-head .lead{ max-width: 46ch; }
.mot-hint{
  display: flex;
  align-items: center;
  gap: .55rem;
  font-size: .66rem;
  font-variation-settings: "wdth" 100, "wght" 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-3);
  white-space: nowrap;
}
.mot-hint svg{ width: 24px; height: 12px; color: var(--bermellon); }

.mot-rail{
  display: flex;
  gap: clamp(1rem, 2vw, 1.6rem);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 1.4rem;
  margin-inline: calc(var(--gut) * -1);
  padding-inline: var(--gut);
  scrollbar-width: thin;
  scrollbar-color: var(--line-2) transparent;
  cursor: grab;
}
.mot-rail.dragging{ cursor: grabbing; scroll-snap-type: none; }
.mot-rail::-webkit-scrollbar{ height: 3px; }
.mot-rail::-webkit-scrollbar-thumb{ background: var(--line-2); }

.mot{
  flex: 0 0 clamp(250px, 30vw, 340px);
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  text-align: left;
  background: transparent;
  border: 0;
  padding: 0;
  color: inherit;
  font: inherit;
  cursor: pointer;
}
.mot-img{
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  border: 1px solid var(--line);
  background: var(--bg-3);
}
.mot-img img{
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 32%;
  filter: saturate(.85);
  transition: transform 1.1s var(--ease), filter .6s var(--ease);
}
.mot:hover .mot-img img{ transform: scale(1.06); filter: saturate(1.05); }
.mot-n{
  position: absolute;
  left: 0; top: 0;
  padding: .4rem .6rem;
  background: var(--bermellon);
  color: var(--on-accent);
  font-size: .68rem;
  font-variation-settings: "wdth" 100, "wght" 700;
  letter-spacing: .06em;
  font-variant-numeric: tabular-nums;
}
.mot .mot-t{
  font-family: var(--f-display);
  font-variation-settings: "opsz" 40, "SOFT" 0, "WONK" 1;
  font-size: 1.22rem;
  font-weight: 500;
  line-height: 1.18;
  letter-spacing: -.015em;
  margin-top: -.2rem;
}
.mot .mot-d{ color: var(--ink-2); font-size: .92rem; line-height: 1.55; }
.mot .mot-src{
  font-size: .68rem;
  font-variation-settings: "wdth" 100, "wght" 560;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3);
  display: flex;
  gap: .4rem;
  align-items: center;
}
.mot .mot-src em{ font-style: italic; color: var(--cobalto); letter-spacing: .04em; text-transform: none; font-size: .8rem; }

/* ---------- 9. CATÁLOGO ---------- */

.filters{
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-bottom: clamp(2rem, 4vw, 3rem);
  padding-bottom: 1.4rem;
  border-bottom: 1px solid var(--line);
}
.filters button{
  display: inline-flex;
  align-items: baseline;
  gap: .5rem;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 2px;
  color: var(--ink-2);
  font-family: var(--f-body);
  font-size: .82rem;
  font-variation-settings: "wdth" 100, "wght" 560;
  padding: .55rem .95rem;
  cursor: pointer;
  transition: background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.filters button i{
  font-style: normal;
  font-size: .68rem;
  font-variant-numeric: tabular-nums;
  color: var(--ink-3);
  transition: color .25s var(--ease);
}
.filters button:hover{ border-color: var(--line-2); color: var(--ink); }
.filters button[aria-pressed="true"]{
  background: var(--ink);
  border-color: var(--ink);
  color: var(--bg);
}
.filters button[aria-pressed="true"] i{ color: var(--bermellon); }

.gallery{
  columns: 3;
  column-gap: clamp(1.1rem, 2vw, 1.9rem);
}
@media (max-width: 1000px){ .gallery{ columns: 2; } }
@media (max-width: 600px){ .gallery{ columns: 1; } }

.card{
  display: block;
  width: 100%;
  break-inside: avoid;
  margin-bottom: clamp(1.1rem, 2vw, 1.9rem);
  padding: 0;
  background: transparent;
  border: 0;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.card[hidden]{ display: none; }

.card-frame{
  position: relative;
  display: block;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--bg-3);
  box-shadow: var(--shadow);
  transition: box-shadow .5s var(--ease), border-color .4s var(--ease);
}
.card-frame img{
  width: 100%;
  height: auto;
  transition: transform 1.1s var(--ease), filter .5s var(--ease);
}
.card:hover .card-frame{ box-shadow: var(--shadow-lift); border-color: var(--line-2); }
.card:hover .card-frame img{ transform: scale(1.045); }

.card-plate{
  position: absolute;
  left: 0; right: 0; bottom: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .7rem .85rem;
  background: var(--bermellon);
  color: var(--on-accent);
  font-size: .72rem;
  font-variation-settings: "wdth" 100, "wght" 660;
  letter-spacing: .14em;
  text-transform: uppercase;
  transform: translateY(101%);
  transition: transform .45s var(--ease);
}
.card:hover .card-plate,
.card:focus-visible .card-plate{ transform: none; }
.card-plate svg{ width: 15px; height: 15px; }

.card-meta{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding-top: .8rem;
}
.card-t{
  font-family: var(--f-display);
  font-variation-settings: "opsz" 40, "SOFT" 0, "WONK" 0;
  font-size: 1.06rem;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -.012em;
}
.card-s{
  font-size: .64rem;
  font-variation-settings: "wdth" 100, "wght" 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3);
  white-space: nowrap;
}

/* ---------- 10. ENCARGOS ---------- */

.offers{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.2rem, 2.4vw, 2rem);
}
@media (max-width: 880px){ .offers{ grid-template-columns: 1fr; } }

.offer{
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}
.offer-img{
  overflow: hidden;
  aspect-ratio: 5 / 4;
  border: 1px solid var(--line);
  background: var(--bg-3);
}
.offer-img img{
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 30%;
  transition: transform 1.1s var(--ease);
}
.offer:hover .offer-img img{ transform: scale(1.05); }
.offer h3{ font-size: 1.2rem; margin-bottom: .55rem; }
.offer p{ color: var(--ink-2); font-size: .95rem; }
.offer-ex{
  font-size: .72rem;
  font-variation-settings: "wdth" 100, "wght" 560;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.offer-ex em{ font-style: italic; color: var(--cobalto); text-transform: none; letter-spacing: 0; font-size: .86rem; }

.process{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1.2rem, 2.4vw, 2rem);
  margin-top: clamp(3rem, 6vw, 5rem);
  padding-top: 2rem;
  border-top: 1px solid var(--line);
  counter-reset: paso;
}
@media (max-width: 880px){ .process{ grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px){ .process{ grid-template-columns: 1fr; } }

.process-title{
  grid-column: 1 / -1;
  font-size: .69rem;
  font-variation-settings: "wdth" 100, "wght" 640;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0;
}
.step{ position: relative; padding-top: 2.4rem; counter-increment: paso; }
.step::before{
  content: counter(paso, decimal-leading-zero);
  position: absolute;
  top: 0; left: 0;
  font-family: var(--f-display);
  font-variation-settings: "opsz" 40, "SOFT" 0, "WONK" 1;
  font-size: 1.5rem;
  font-weight: 500;
  color: var(--bermellon);
  font-variant-numeric: tabular-nums;
}
.step h3{ margin-bottom: .45rem; font-size: 1rem; }
.step p{ color: var(--ink-2); font-size: .91rem; line-height: 1.55; }

.enc-cta{ margin-top: clamp(2.4rem, 5vw, 3.6rem); }

/* ---------- 11. SOBRE DAVID ---------- */

.about{
  display: grid;
  grid-template-columns: minmax(0, .78fr) minmax(0, 1.05fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}
@media (max-width: 900px){ .about{ grid-template-columns: 1fr; } }

.about-fig{ margin: 0; position: sticky; top: 100px; }
@media (max-width: 900px){ .about-fig{ position: static; } }
.about-fig > div{
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  background: var(--bg-3);
  aspect-ratio: 4 / 5;
}
.about-fig img{ width: 100%; height: 100%; object-fit: cover; object-position: 50% 24%; }

.about-sign{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
}
.sig{
  font-size: 1.7rem;
  font-weight: 500;
  font-style: italic;
  font-variation-settings: "opsz" 40, "SOFT" 40, "WONK" 1;
  letter-spacing: -.02em;
}

.about-copy p{ color: var(--ink-2); max-width: 64ch; }
.about-copy h2{ margin-bottom: 1.5rem; }

.facts{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.4rem;
  margin-top: 2.6rem;
  padding-top: 1.8rem;
  border-top: 1px solid var(--line);
}
@media (max-width: 720px){ .facts{ grid-template-columns: 1fr; gap: 1.6rem; } }
.fact h3{ margin-bottom: .45rem; color: var(--ink); }
.fact p{ font-size: .88rem; line-height: 1.55; color: var(--ink-3); }

/* ---------- 12. CONTACTO ---------- */

.contact-in{
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .72fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}
@media (max-width: 880px){ .contact-in{ grid-template-columns: 1fr; } }

.contact-cta{ display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 2rem; }

.dl{ margin: 0; display: grid; gap: 0; }
.dl > div{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.2rem;
  padding-block: .85rem;
  border-bottom: 1px solid var(--line);
}
.dl > div:first-child{ border-top: 1px solid var(--line); }
.dl dt{
  font-size: .66rem;
  font-variation-settings: "wdth" 100, "wght" 640;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-3);
  white-space: nowrap;
}
.dl dd{ margin: 0; font-size: .93rem; text-align: right; }
.dl dd a{ text-decoration: none; border-bottom: 1px solid var(--line-2); transition: border-color .25s, color .25s; }
.dl dd a:hover{ color: var(--bermellon); border-bottom-color: var(--bermellon); }

/* ---------- 13. PIE ---------- */

.site-foot{
  border-top: 1px solid var(--line);
  padding-block: 2.6rem;
  background: var(--bg);
}
.foot-in{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 2rem;
  justify-content: space-between;
}
.foot-in p{
  margin: 0;
  font-size: .76rem;
  color: var(--ink-3);
  max-width: 44ch;
}
.foot-top{
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: .68rem;
  font-variation-settings: "wdth" 100, "wght" 620;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-3);
  text-decoration: none;
  transition: color .25s var(--ease);
}
.foot-top:hover{ color: var(--bermellon); }
.foot-top svg{ width: 14px; height: 14px; }

/* ---------- 14. VISOR ---------- */

.lb{
  position: fixed;
  inset: 0;
  z-index: 70;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  animation: lbin .35s var(--ease) both;
}
@keyframes lbin{ from{ opacity: 0; } to{ opacity: 1; } }

.lb-bar{
  display: flex;
  align-items: center;
  gap: .5rem;
  height: 64px;
  flex: none;
  border-bottom: 1px solid var(--line);
}
.lb-count{
  font-size: .7rem;
  font-variation-settings: "wdth" 100, "wght" 620;
  letter-spacing: .16em;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
.lb-bar .sp{ flex: 1; }

.lb-body{
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 380px);
  /* la fila se fija a la altura disponible: si no, la columna de texto
     estira la fila y la imagen se sale de la pantalla */
  grid-template-rows: minmax(0, 1fr);
  gap: clamp(1.4rem, 3vw, 3rem);
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding: clamp(1.2rem, 3vw, 2.4rem) var(--gut) clamp(1.6rem, 3vw, 2.6rem);
}
/* flex y no grid: con grid la fila automática crece hasta el tamaño real de
   la foto y el max-height:100% de la imagen deja de servir — la obra se corta */
.lb-stage{
  min-height: 0;
  min-width: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lb-stage img{
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  box-shadow: var(--shadow-lift);
  border: 1px solid var(--line);
  animation: lbimg .5s var(--ease) both;
}
@keyframes lbimg{
  from{ opacity: 0; transform: scale(.985); }
  to{ opacity: 1; transform: none; }
}

.lb-info{
  min-height: 0;
  overflow-y: auto;
  scrollbar-gutter: stable;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  justify-content: safe center; /* si el texto no cabe, no recorta por arriba */
  gap: .75rem;
  align-self: stretch;
}
.lb-serie{
  margin: 0;
  font-size: .66rem;
  font-variation-settings: "wdth" 100, "wght" 640;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.lb-info h2{ font-size: clamp(1.9rem, 3.4vw, 2.9rem); }
.lb-status{
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .3rem .65rem;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  font-size: .68rem;
  font-variation-settings: "wdth" 100, "wght" 620;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.lb-status::before{
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--cadmio);
}
.lb-status[data-e="disponible"]::before{ background: #4FA96B; }
.lb-status[data-e="vendida"]::before{ background: var(--ink-3); }
.lb-status[data-e="encargo"]::before{ background: var(--violeta); }

.lb-price{ margin: 0; font-size: 1.05rem; font-variation-settings: "wdth" 100, "wght" 620; }
.lb-spec{ margin: .4rem 0 0; width: 100%; display: grid; gap: 0; }
.lb-spec > div{
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding-block: .55rem;
  border-bottom: 1px solid var(--line);
  font-size: .85rem;
}
.lb-spec dt{ color: var(--ink-3); font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; font-variation-settings: "wdth" 100, "wght" 620; }
.lb-spec dd{ margin: 0; text-align: right; }
.lb-note{ margin: 0; font-size: .82rem; color: var(--ink-3); }
.lb-info .btn{ margin-top: .6rem; flex: none; }

/* texto del artista: cada obra lleva el suyo, escrito por David */
.lb-text{
  margin: .1rem 0 .35rem;
  padding-left: .95rem;
  max-width: 46ch;
  border-left: 2px solid var(--line);
  font-family: var(--f-display);
  font-variation-settings: "opsz" 24, "SOFT" 0, "WONK" 1;
  font-style: italic;
  font-size: 1.04rem;
  line-height: 1.58;
  color: var(--ink-2);
  text-wrap: pretty;
}
.lb-envio{
  margin: -.35rem 0 0;
  max-width: 42ch;
  font-size: .74rem;
  line-height: 1.45;
  color: var(--ink-3);
}
/* aclaración práctica: tríptico, ficha en preparación… */
.lb-extra{
  margin: .1rem 0 0;
  padding: .55rem .75rem;
  max-width: 44ch;
  border: 1px solid var(--line);
  border-radius: 6px;
  font-size: .78rem;
  line-height: 1.5;
  color: var(--ink-2);
}

/* Ventana baja, o móvil: el visor pasa a desplazarse en vez de encoger la obra.
   La altura del escenario se fija en vh para que la caja de la imagen siempre
   sea definida; si se deja en automático, la fila del grid se calcula mal y la
   obra se sale por arriba del contenedor. */
@media (min-width: 881px) and (max-height: 660px){
  .lb-body{ grid-template-rows: auto; align-items: start; overflow-y: auto; }
  .lb-stage{ height: 76vh; overflow: hidden; }
  .lb-info{ align-self: start; overflow: visible; justify-content: flex-start; }
}

@media (max-width: 880px){
  .lb-body{
    display: flex;
    flex-direction: column;
    gap: clamp(1.2rem, 4vw, 1.8rem);
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
  .lb-stage{ flex: none; height: 62vh; overflow: hidden; }
  .lb-info{ flex: none; align-self: stretch; overflow: visible; justify-content: flex-start; }
  .lb-text{ font-size: .98rem; max-width: none; }
}

/* ---------- 15. REVELADO AL SCROLL ---------- */

html.js .reveal{
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .85s var(--ease), transform .85s var(--ease);
  transition-delay: var(--d, 0s);
}
html.js .reveal.in{ opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  html.js .reveal{ opacity: 1; transform: none; }
  .hero-frame img{ transform: none !important; }
}

html{ scroll-behavior: smooth; }