/* ============================================================
   Art by Figué — galería oscura
   Un solo stylesheet para todo el sitio.

   Regla de oro de accesibilidad: TODO el contenido es visible
   con este CSS solo. El JS anima desde un estado de partida que
   crea en tiempo de ejecución (gsap.from), nunca al revés. Si el
   JS no carga, la página se ve completa.
   ============================================================ */

:root{
  --black:      #060607;
  --ink:        #0b0b0d;   /* fondo de secciones alternas */
  --surface:    #121215;
  --line:       rgba(244,239,228,.12);
  --line-soft:  rgba(244,239,228,.07);

  --bone:       #f4efe4;
  --bone-dim:   rgba(244,239,228,.62);
  --bone-faint: rgba(244,239,228,.38);

  --gold:       #d4af37;
  --gold-warm:  #e8c85a;
  --gold-deep:  #8a6d1f;

  --serif: 'Cormorant Garamond', 'Times New Roman', serif;
  --sans:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --pad:      clamp(1.25rem, 5vw, 5rem);
  --max:      1440px;
  --section:  clamp(5rem, 12vw, 11rem);

  --ease: cubic-bezier(.22,1,.36,1);
}

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

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
}
/* Lenis toma el control del scroll; con scroll-behavior:smooth activo
   los dos compiten y el salto a un ancla se vuelve errático. */
html.lenis{ scroll-behavior:auto; }

body{
  margin:0;
  background:var(--black);
  color:var(--bone);
  font-family:var(--sans);
  font-weight:300;
  font-size:clamp(.95rem,.9rem + .2vw,1.05rem);
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img,video{ display:block; max-width:100%; height:auto; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; }

::selection{ background:var(--gold); color:#111; }

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

/* ── Tipografía base ───────────────────────────────────────── */

h1,h2,h3,h4{
  font-family:var(--serif);
  font-weight:300;
  line-height:1.04;
  letter-spacing:-.015em;
  margin:0;
}

.display   { font-size:clamp(2.9rem, 8.5vw, 7.5rem); }
.h1        { font-size:clamp(2.4rem, 6vw, 5rem); }
.h2        { font-size:clamp(1.9rem, 4.2vw, 3.6rem); }
.h3        { font-size:clamp(1.4rem, 2.4vw, 2.1rem); }

.eyebrow{
  font-family:var(--sans);
  font-size:.66rem;
  font-weight:400;
  letter-spacing:.34em;
  text-transform:uppercase;
  color:var(--gold);
  margin:0 0 1.6rem;
}
.eyebrow--dim{ color:var(--bone-faint); }

.lede{
  font-size:clamp(1.05rem,1.6vw,1.3rem);
  line-height:1.65;
  color:var(--bone-dim);
  max-width:46ch;
}

.muted{ color:var(--bone-dim); }
.gold { color:var(--gold); }

/* Un span con overflow oculto para que las palabras suban desde abajo.
   Sin JS el span interior ya está en su sitio, así que se lee igual. */
.line{ display:block; overflow:hidden; padding-bottom:.08em; }
.line > span{ display:inline-block; }

/* ── Layout ────────────────────────────────────────────────── */

.wrap{
  width:100%;
  max-width:var(--max);
  margin-inline:auto;
  padding-inline:var(--pad);
}
.wrap--narrow{ max-width:900px; }

.section{ padding-block:var(--section); }
.section--tight{ padding-block:clamp(3rem,7vw,6rem); }
.section--ink{ background:var(--ink); }

.rule{
  height:1px;
  background:var(--line-soft);
  border:0;
  margin:0;
}

/* ── Navegación ────────────────────────────────────────────── */

/* Logo al medio con dos enlaces a cada lado.
   Las columnas 1fr auto 1fr son la clave: los dos laterales miden siempre lo
   mismo, así que el logo cae en el centro exacto del header aunque un grupo
   pese más que el otro (el de la derecha lleva además el botón Inquire). */
.nav{
  position:fixed;
  inset:0 0 auto 0;
  z-index:80;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:clamp(1.4rem,2.6vw,2.2rem);
  padding:1.1rem var(--pad);
  background:linear-gradient(to bottom, rgba(6,6,7,.88), rgba(6,6,7,0));
  transition:background .4s var(--ease), backdrop-filter .4s var(--ease),
             padding .4s var(--ease);
}
.nav.is-stuck{
  background:rgba(6,6,7,.94);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line-soft);
  padding-block:.7rem;
}

.nav__logo{ justify-self:center; }
.nav__logo img{
  width:clamp(96px,10vw,132px);
  transition:width .4s var(--ease);
}
.nav.is-stuck .nav__logo img{ width:clamp(84px,8vw,108px); }

/* La columna derecha se estira y reparte: los enlaces se pegan al logo y el
   botón Inquire se queda anclado al borde. Si en vez de eso se alineara todo
   el bloque a la derecha, los enlaces se irían con el botón y quedarían tan
   lejos del logo como estaban. */
.nav__right{
  justify-self:stretch;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:clamp(1rem,2.4vw,2rem);
}

/* Cada grupo se arrima al centro: el de la izquierda por su borde derecho,
   el de la derecha por el izquierdo. */
.nav__links--left { justify-content:flex-end; }
.nav__links--right{ justify-content:flex-start; }

/* Sin justify-content aquí: lo fija cada lado con su modificador, y esta regla
   va después en la hoja, así que con la misma especificidad los pisaría. */
.nav__links{
  display:flex;
  flex-wrap:wrap;
  gap:clamp(1.1rem,2.4vw,2.4rem);
  list-style:none;
  margin:0; padding:0;
  font-size:.74rem;
  letter-spacing:.17em;
  text-transform:uppercase;
}
.nav__links a{
  position:relative;
  color:var(--bone-dim);
  padding-block:.35rem;
  transition:color .3s var(--ease);
}
.nav__links a::after{
  content:'';
  position:absolute;
  left:0; bottom:0;
  width:100%; height:1px;
  background:var(--gold);
  transform:scaleX(0);
  transform-origin:right;
  transition:transform .45s var(--ease);
}
.nav__links a:hover,
.nav__links a[aria-current="page"]{ color:var(--bone); }
.nav__links a:hover::after,
.nav__links a[aria-current="page"]::after{ transform:scaleX(1); transform-origin:left; }

.nav__toggle{
  display:none;
  background:none; border:0; cursor:pointer;
  padding:.5rem;
  width:44px; height:44px;
}
.nav__toggle span{
  display:block;
  width:22px; height:1px;
  background:var(--bone);
  margin:5px auto;
  transition:transform .4s var(--ease), opacity .3s var(--ease);
}
.nav.is-open .nav__toggle span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
.nav.is-open .nav__toggle span:nth-child(2){ opacity:0; }
.nav.is-open .nav__toggle span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }

@media (max-width:900px){
  .nav__toggle{ display:block; }
  /* Con .nav delante para ganarle a .btn{display:inline-flex}, que se declara
     después en la hoja y tiene la misma especificidad. */
  .nav .nav__cta{ display:none; }

  /* Las dos listas se despliegan como media pantalla cada una, con el mismo
     fondo: juntas se leen como una sola capa. La de arriba alinea sus enlaces
     abajo y la de abajo los alinea arriba, así los cuatro quedan agrupados en
     el centro con el mismo espaciado entre ellos. */
  .nav__links{
    position:fixed;
    left:0; right:0;
    flex-direction:column;
    align-items:center;
    gap:1.9rem;
    font-size:1rem;
    background:rgba(6,6,7,.97);
    backdrop-filter:blur(20px);
    /* Cerrado por defecto pero accesible: se oculta con visibility para
       que el lector de pantalla no lo lea cuando está plegado. */
    opacity:0;
    visibility:hidden;
    transition:opacity .45s var(--ease), visibility .45s;
  }
  .nav__links--left{
    top:0; bottom:50%;
    justify-content:flex-end;
    padding-bottom:.95rem;
  }
  .nav__links--right{
    top:50%; bottom:0;
    justify-content:flex-start;
    padding-top:.95rem;
  }
  .nav.is-open .nav__links{ opacity:1; visibility:visible; }

  /* El overlay va en position:fixed y por orden de documento se pinta encima
     del logo y del botón. Elevarlos deja la marca visible y el aspa pulsable. */
  .nav__logo,
  .nav__toggle{ position:relative; z-index:2; }
}

/* ── Botones ───────────────────────────────────────────────── */

.btn{
  display:inline-flex;
  align-items:center;
  gap:.7rem;
  padding:.95rem 2rem;
  border:1px solid var(--line);
  border-radius:2px;
  font-size:.72rem;
  font-weight:400;
  letter-spacing:.19em;
  text-transform:uppercase;
  color:var(--bone);
  background:transparent;
  cursor:pointer;
  overflow:hidden;
  position:relative;
  transition:color .45s var(--ease), border-color .45s var(--ease);
}
/* El relleno entra desde abajo: sólo transform, sin repintar layout. */
.btn::before{
  content:'';
  position:absolute; inset:0;
  background:var(--gold);
  transform:translateY(101%);
  transition:transform .5s var(--ease);
  z-index:-1;
}
.btn > *{ position:relative; z-index:1; }
.btn:hover{ color:#111; border-color:var(--gold); }
.btn:hover::before{ transform:translateY(0); }

.btn--gold{
  background:var(--gold);
  border-color:var(--gold);
  color:#111;
}
.btn--gold::before{ background:var(--bone); }
.btn--gold:hover{ color:#111; border-color:var(--bone); }

.btn--ghost{ border-color:var(--line); }

.btn__arrow{ transition:transform .45s var(--ease); }
.btn:hover .btn__arrow{ transform:translateX(4px); }

.btn-row{
  display:flex;
  flex-wrap:wrap;
  gap:.9rem;
  margin-top:2.6rem;
}

/* ── Hero ──────────────────────────────────────────────────── */

/* La portada empieza siendo la habitación y termina siendo el cuadro: el
   scroll empuja hacia la obra colgada en la pared, un velo negro sube, y la
   obra limpia ocupa su sitio. Esa coreografía la monta motion.js sobre una
   sola línea de tiempo fijada; aquí sólo se define el estado de reposo. */
.hero{
  position:relative;
  min-height:100svh;
  display:grid;
  align-items:end;
  padding:clamp(7rem,14vh,10rem) var(--pad) clamp(4.5rem,10vh,7rem);
  background:var(--black);
  overflow:hidden;
}

.hero__room{
  position:absolute;
  inset:0;
  z-index:0;
}
.hero__room img{
  width:100%;
  height:100%;
  object-fit:cover;
}

/* Velo negro: en reposo no existe, sólo lo levanta el scroll. */
.hero__veil{
  position:absolute;
  inset:0;
  z-index:1;
  background:var(--black);
  opacity:0;
  pointer-events:none;
}

/* Degradado permanente. Sube desde abajo y desde la izquierda, que es donde
   cae el texto; el centro, donde está el cuadro colgado, se queda limpio. */
.hero__scrim{
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
  background:
    linear-gradient(to top,
      rgba(6,6,7,.95) 0%, rgba(6,6,7,.78) 22%,
      rgba(6,6,7,.34) 48%, rgba(6,6,7,.06) 70%, transparent 86%),
    linear-gradient(to right, rgba(6,6,7,.80), rgba(6,6,7,.30) 38%, transparent 60%);
}

.hero__text{
  position:relative;
  z-index:4;
  max-width:min(100%, 46rem);
}
.hero__text .lede{ max-width:42ch; }
/* Cada línea del titular la decidimos con .line, así que el tamaño tiene que
   ser el que cabe sin que el navegador parta por su cuenta. */
.hero__title{
  font-size:clamp(2.5rem, 5vw, 5.2rem);
  margin-bottom:1.6rem;
}
.hero__title em{
  font-style:italic;
  color:var(--gold);
}

/* El cuadro limpio que aparece al final del barrido. Arranca invisible: si el
   JS no corre, la portada se queda en la foto de la habitación, que ya es una
   portada completa por sí sola. */
.hero__art{
  position:absolute;
  left:50%;
  top:46%;
  z-index:3;
  margin:0;
  opacity:0;
  pointer-events:none;
  text-align:center;
}
.hero__art img{
  height:min(62vh, 600px);
  width:auto;
  box-shadow:
    0 0 0 1px rgba(212,175,55,.2),
    0 30px 90px rgba(0,0,0,.9);
}
.hero__art figcaption{
  margin-top:1.3rem;
  font-size:.64rem;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--bone-faint);
  opacity:0;
}

.hero__meta{
  position:absolute;
  right:var(--pad);
  bottom:clamp(1.5rem,4vh,2.6rem);
  z-index:4;
  display:flex;
  align-items:center;
  gap:1.2rem;
  font-size:.66rem;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--bone-faint);
}
.hero__meta i{
  display:block;
  width:52px; height:1px;
  background:var(--line);
}

@media (max-width:900px){
  .hero{ padding-top:clamp(6rem,18vh,9rem); }
  .hero__art img{ height:min(56vh, 460px); }
  .hero__meta{ display:none; }
  /* En vertical el texto ocupa media pantalla y cae justo encima del cuadro
     colgado. Sin una base bastante más opaca que en escritorio, la línea de
     "Maurice Figué · Original 1/1" se pierde contra el oro del tigre. */
  .hero__scrim{
    background:linear-gradient(to top,
      rgba(6,6,7,.97) 0%, rgba(6,6,7,.93) 32%,
      rgba(6,6,7,.72) 56%, rgba(6,6,7,.34) 76%, rgba(6,6,7,.06) 92%);
  }
}

/* ── Banda a sangre (habitaciones) ─────────────────────────── */

.bleed{
  position:relative;
  height:clamp(60vh,78vh,860px);
  overflow:hidden;
}
.bleed img{
  position:absolute;
  inset:-12% 0;              /* margen extra: el parallax mueve la imagen */
  width:100%;
  height:124%;
  object-fit:cover;
}
.bleed__scrim{
  position:absolute; inset:0;
  background:linear-gradient(to top, rgba(6,6,7,.92) 0%, rgba(6,6,7,.25) 45%, rgba(6,6,7,.55) 100%);
}
.bleed__caption{
  position:absolute;
  left:var(--pad); right:var(--pad);
  bottom:clamp(2rem,6vh,4rem);
  max-width:640px;
}

/* ── Manifiesto ────────────────────────────────────────────── */

.manifesto{
  padding-block:clamp(6rem,15vw,12rem);
  background:var(--black);
}
.manifesto__text{
  font-family:var(--serif);
  font-size:clamp(1.7rem,4.4vw,3.4rem);
  line-height:1.28;
  letter-spacing:-.01em;
  max-width:20ch;
  margin:0;
  /* Estado de reposo: legible. El JS lo apaga y lo va encendiendo. */
  color:var(--bone);
}
.manifesto__text span{ transition:none; }

/* ── Macro de oro (video scrubbeado) ───────────────────────── */

.macro{
  position:relative;
  background:var(--black);
  padding-block:clamp(3rem,8vw,6rem);
  /* La sección se fija a pantalla completa mientras dura el scrub, así que
     su contenido tiene que quedar centrado en el viewport y no pegado arriba. */
  min-height:100svh;
  display:flex;
  align-items:center;
}
.macro > .wrap{ width:100%; }
.macro__stage{
  position:relative;
  width:100%;
  aspect-ratio:16/9;
  overflow:hidden;
  border-radius:2px;
  background:#000;
}
.macro__stage video{
  width:100%; height:100%;
  object-fit:cover;
}
.macro__vignette{
  position:absolute; inset:0;
  pointer-events:none;
  background:
    linear-gradient(to right, rgba(6,6,7,.75), transparent 32%, transparent 68%, rgba(6,6,7,.75)),
    linear-gradient(to bottom, rgba(6,6,7,.6), transparent 30%, transparent 70%, rgba(6,6,7,.8));
}
/* En vertical un 16:9 deja la pantalla medio vacía: se recorta a cuadrado. */
@media (max-width:900px){
  .macro__stage{ aspect-ratio:1; }
}

.macro__caption{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  gap:1.5rem;
  margin-top:1.6rem;
  font-size:.7rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--bone-faint);
}

/* ── Encabezados de sección ────────────────────────────────── */

.head{
  display:flex;
  flex-wrap:wrap;
  align-items:flex-end;
  justify-content:space-between;
  gap:2rem;
  margin-bottom:clamp(2.5rem,5vw,4.5rem);
}
.head__title{ max-width:18ch; }
.head__aside{ max-width:38ch; color:var(--bone-dim); }

/* ── Colecciones ───────────────────────────────────────────── */

.collections{ display:grid; gap:clamp(1rem,2vw,1.6rem); }
@media (min-width:820px){ .collections{ grid-template-columns:repeat(3,1fr); } }

.coll{
  position:relative;
  display:block;
  overflow:hidden;
  background:var(--surface);
  border:1px solid var(--line-soft);
}
.coll__media{
  position:relative;
  aspect-ratio:3/4;
  overflow:hidden;
}
.coll__media img{
  width:100%; height:100%;
  object-fit:cover;
  transition:transform 1.1s var(--ease);
}
.coll:hover .coll__media img{ transform:scale(1.06); }
/* El velo tiene que aguantar sobre las obras más claras (Acrylic Jungle es
   naranja y turquesa a plena luz), no sólo sobre el negro de Soul in Gold. */
.coll__media::after{
  content:'';
  position:absolute; inset:0;
  background:linear-gradient(to top,
    rgba(6,6,7,.97) 0%,
    rgba(6,6,7,.88) 26%,
    rgba(6,6,7,.42) 52%,
    rgba(6,6,7,.08) 74%,
    transparent 100%);
}
.coll__body{
  position:absolute;
  left:0; right:0; bottom:0;
  padding:clamp(1.4rem,2.4vw,2.2rem);
  z-index:2;
}
.coll__count{
  font-size:.64rem;
  letter-spacing:.26em;
  text-transform:uppercase;
  color:var(--gold);
  margin:0 0 .7rem;
}
.coll__name{ font-size:clamp(1.5rem,2.4vw,2rem); margin-bottom:.5rem; }
/* El subtítulo en su propia línea y más pequeño: en línea hacía que
   "Acrylic Jungle — The Big Eye Collection" ocupara dos renglones de titular. */
.coll__name .sub{
  display:block;
  font-family:var(--sans);
  font-size:.68rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--bone-faint);
  margin-top:.4rem;
}
.coll__note{
  font-size:.85rem;
  color:var(--bone-dim);
  margin:0;
  max-width:30ch;
}
.coll__go{
  display:inline-flex;
  align-items:center;
  gap:.6rem;
  margin-top:1.1rem;
  font-size:.68rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--bone);
}
.coll__go i{
  display:block; width:26px; height:1px;
  background:var(--gold);
  transition:width .45s var(--ease);
}
.coll:hover .coll__go i{ width:46px; }

/* ── Rejilla de obras ──────────────────────────────────────── */

.works{
  display:grid;
  gap:clamp(2rem,4vw,4rem) clamp(1rem,2.4vw,2.4rem);
  grid-template-columns:repeat(auto-fill,minmax(min(100%,280px),1fr));
}

.work{ display:block; }
.work__frame{
  position:relative;
  overflow:hidden;
  background:var(--surface);
  aspect-ratio:4/5;
}
.work__frame img{
  width:100%; height:100%;
  object-fit:cover;
  transition:transform 1.2s var(--ease);
}
.work:hover .work__frame img{ transform:scale(1.05); }

.work__tag{
  position:absolute;
  top:.9rem; left:.9rem;
  z-index:2;
  padding:.3rem .7rem;
  font-size:.58rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  background:rgba(6,6,7,.75);
  backdrop-filter:blur(6px);
  border:1px solid var(--line-soft);
  color:var(--bone-dim);
}
.work__tag--gold{ color:var(--gold); border-color:rgba(212,175,55,.35); }

.work__body{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:1rem;
  margin-top:1.1rem;
  padding-bottom:1rem;
  border-bottom:1px solid var(--line-soft);
}
.work__name{ font-family:var(--serif); font-size:1.3rem; }
.work__price{
  font-size:.76rem;
  letter-spacing:.08em;
  color:var(--bone-faint);
  white-space:nowrap;
}
.work__meta{
  margin:.7rem 0 0;
  font-size:.72rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--bone-faint);
}

/* ── Página de obra ────────────────────────────────────────── */

.piece{
  display:grid;
  gap:clamp(2rem,5vw,5rem);
  padding-top:clamp(7rem,14vh,10rem);
}
@media (min-width:960px){
  .piece{ grid-template-columns:1.15fr .85fr; align-items:start; }
  /* La imagen se queda quieta mientras la ficha hace scroll al lado. */
  .piece__media{ position:sticky; top:clamp(5rem,11vh,7rem); }
}

.piece__media img{
  width:100%;
  box-shadow:
    0 0 0 1px rgba(212,175,55,.16),
    0 30px 80px rgba(0,0,0,.85);
}

/* Apilado, un retrato a ancho completo empuja el precio muy abajo. Se limita
   por altura para que la ficha entre antes en pantalla. */
@media (max-width:959px){
  .piece__media img{
    width:auto;
    max-height:74svh;
    margin-inline:auto;
  }
}

.piece__info{ padding-bottom:clamp(2rem,6vw,4rem); }
.piece__title{ margin-bottom:.6rem; }
.piece__price{
  font-size:1.15rem;
  letter-spacing:.04em;
  color:var(--gold);
  margin:0 0 .3rem;
}
.piece__status{
  font-size:.66rem;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--bone-faint);
  margin:0 0 2rem;
}
.piece__desc{ color:var(--bone-dim); margin-bottom:2.4rem; }

.spec{
  border-top:1px solid var(--line-soft);
  margin:0 0 2.4rem;
  padding:0;
}
.spec div{
  display:flex;
  justify-content:space-between;
  gap:1.5rem;
  padding:.85rem 0;
  border-bottom:1px solid var(--line-soft);
}
.spec dt{
  font-size:.66rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--bone-faint);
  flex:0 0 auto;
}
.spec dd{ margin:0; text-align:right; font-size:.9rem; }

/* Tira de detalles bajo la ficha */
.details{
  display:grid;
  gap:clamp(.6rem,1.4vw,1.2rem);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));
}
.details figure{ margin:0; }
.details img{
  width:100%;
  aspect-ratio:4/3;
  object-fit:cover;
  background:var(--surface);
}
.details figcaption{
  margin-top:.7rem;
  font-size:.66rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--bone-faint);
}

/* ── Artistas ──────────────────────────────────────────────── */

.artist{
  display:grid;
  gap:clamp(2rem,5vw,4.5rem);
  align-items:center;
}
@media (min-width:860px){
  .artist{ grid-template-columns:.9fr 1.1fr; }
  .artist--flip .artist__media{ order:2; }
}
.artist__media{ position:relative; overflow:hidden; }
.artist__media img{ width:100%; }

/* ── Formulario ────────────────────────────────────────────── */

.form{ display:grid; gap:1.1rem; max-width:640px; }
@media (min-width:640px){ .form__row{ display:grid; grid-template-columns:1fr 1fr; gap:1.1rem; } }

.field{ display:grid; gap:.45rem; }
.field label{
  font-size:.64rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--bone-faint);
}
.field input,
.field select,
.field textarea{
  width:100%;
  padding:.85rem 1rem;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:2px;
  color:var(--bone);
  font:inherit;
  transition:border-color .3s var(--ease), background .3s var(--ease);
}
.field textarea{ min-height:150px; resize:vertical; }
.field input:focus,
.field select:focus,
.field textarea:focus{
  outline:none;
  border-color:var(--gold);
  background:#17171b;
}
.field input::placeholder,
.field textarea::placeholder{ color:rgba(244,239,228,.28); }

.form__note{
  font-size:.78rem;
  color:var(--bone-faint);
  margin:0;
}

/* ── Cierre ────────────────────────────────────────────────── */

.cta{
  position:relative;
  text-align:center;
  padding-block:clamp(6rem,14vw,11rem);
  background:var(--ink);
  overflow:hidden;
}
.cta::before{
  content:'';
  position:absolute;
  left:50%; top:50%;
  width:min(90vw,900px);
  aspect-ratio:1;
  transform:translate(-50%,-50%);
  background:radial-gradient(circle, rgba(212,175,55,.10), transparent 62%);
  pointer-events:none;
}
.cta__inner{ position:relative; z-index:1; }
.cta .lede{ margin-inline:auto; }

/* ── Pie ───────────────────────────────────────────────────── */

.footer{
  background:var(--black);
  border-top:1px solid var(--line-soft);
  padding-block:clamp(3rem,7vw,5rem) 2rem;
}
.footer__grid{
  display:grid;
  gap:2.5rem;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));
  margin-bottom:3rem;
}
.footer h4{
  font-family:var(--sans);
  font-size:.64rem;
  font-weight:400;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--bone-faint);
  margin:0 0 1.1rem;
}
.footer ul{ list-style:none; margin:0; padding:0; display:grid; gap:.6rem; }
.footer a{ color:var(--bone-dim); transition:color .3s var(--ease); }
.footer a:hover{ color:var(--gold); }
.footer__logo img{ width:120px; margin-bottom:1.2rem; }
.footer__bottom{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  gap:1rem;
  padding-top:1.8rem;
  border-top:1px solid var(--line-soft);
  font-size:.7rem;
  color:var(--bone-faint);
}

/* ── Migas ─────────────────────────────────────────────────── */

.crumbs{
  font-size:.66rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--bone-faint);
  margin-bottom:2rem;
}
.crumbs a:hover{ color:var(--gold); }
.crumbs span{ margin-inline:.5rem; }

/* ── Visor de imagen ───────────────────────────────────────── */

[data-zoom]{ cursor:zoom-in; }

.lightbox{
  position:fixed;
  inset:0;
  z-index:200;
  display:grid;
  grid-template-rows:auto minmax(0,1fr) auto;
  background:rgba(4,4,5,.975);
  backdrop-filter:blur(10px);
  opacity:0;
  visibility:hidden;
  transition:opacity .3s var(--ease), visibility .3s;
}
.lightbox.is-open{ opacity:1; visibility:visible; }

.lightbox__bar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding:1.1rem clamp(1rem,3vw,2rem);
  font-size:.66rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--bone-faint);
}

/* La imagen va en absoluto dentro de la fila, no en flujo. Con place-items y
   max-height:100% el navegador se queda con el tamaño natural: el porcentaje
   no llega a resolverse contra la fila del grid y la foto se desbordaba por
   debajo, tapando el pie. En absoluto el bloque contenedor sí tiene una altura
   definida, y el margin:auto la centra en los dos ejes. */
.lightbox__stage{
  position:relative;
  min-height:0;
}
.lightbox__stage img{
  position:absolute;
  inset:0 clamp(1rem,3vw,2rem);
  margin:auto;
  max-width:100%;
  max-height:100%;
  width:auto;
  height:auto;
  object-fit:contain;
  box-shadow:0 0 0 1px rgba(212,175,55,.16), 0 40px 100px rgba(0,0,0,.9);
}

.lightbox__caption{
  padding:1.1rem clamp(1rem,3vw,2rem) 1.6rem;
  text-align:center;
  font-size:.68rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--bone-dim);
}

.lightbox__btn{
  display:grid;
  place-items:center;
  width:44px; height:44px;
  border:1px solid var(--line);
  border-radius:50%;
  background:rgba(244,239,228,.04);
  color:var(--bone);
  font-size:1rem;
  line-height:1;
  cursor:pointer;
  transition:border-color .3s var(--ease), background .3s var(--ease);
}
.lightbox__btn:hover{ border-color:var(--gold); background:rgba(212,175,55,.12); }
.lightbox__btn[disabled]{ opacity:.25; cursor:default; }
.lightbox__btn[disabled]:hover{ border-color:var(--line); background:rgba(244,239,228,.04); }

.lightbox__nav{ display:flex; gap:.6rem; }

/* ── Móvil: legibilidad y zonas de toque ───────────────────── */
/* Medido con el navegador a 375px, no a ojo: los enlaces del pie salían de
   18px de alto y la etiqueta de las tarjetas a 9,28px. */
@media (max-width:900px){
  /* El padding los lleva a ~40px de alto sin cambiar la separación visual,
     porque se le resta al gap. */
  .footer ul{ gap:.15rem; }
  .footer ul a{ display:inline-block; padding-block:.75rem; }

  /* El logo es el enlace a la portada y se quedaba en 35px de alto. */
  .nav__logo{ display:block; padding-block:.4rem; }

  /* Las migas también son navegación. */
  .crumbs{ font-size:.7rem; }
  .crumbs a{ display:inline-block; padding-block:.5rem; }

  /* Versalitas por debajo de 10px. Con este interletrado se leen más grandes
     de lo que dice el número, pero llegado un punto ya no compensa. */
  .work__tag{ font-size:.66rem; }
  .field label,
  .details figcaption,
  .hero__art figcaption,
  .coll__count,
  .piece__status{ font-size:.7rem; }
}

/* ── Menos movimiento ──────────────────────────────────────── */
/* No hay nada que "devolver a su sitio" porque el CSS nunca esconde
   contenido: basta con desactivar transiciones y el sticky. */
@media (prefers-reduced-motion: reduce){
  html:not([data-motion="force"]) *,
  html:not([data-motion="force"]) *::before,
  html:not([data-motion="force"]) *::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
  html:not([data-motion="force"]) .piece__media{ position:static; }

  /* Sin pin no hay nada que fijar: la sección deja de necesitar una pantalla
     entera y se queda a la altura de su contenido. */
  html:not([data-motion="force"]) .macro{ min-height:0; }
  /* El viñeteado se pintaba por encima de los controles nativos del video. */
  html:not([data-motion="force"]) .macro__vignette{ display:none; }
}