/* ============================================================
   ZETTE · mockup-vibra — RE-SKIN DE ALTA ENERGÍA
   Propuesta de piel nueva sobre la MISMA estructura y el MISMO copy
   aprobados. Lo que cambia es la materia.

   RAÍZ DEL PROBLEMA que resuelve: la página anterior era CREMA
   dominante con el dorado racionado a dos apariciones. El Manual de
   Marca no contempla crema en ningún sitio: ZETTE vive en
   "comportamiento de alto contraste" sobre CUATRO superficies —
   DORADO · VERDE PROFUNDO · BLANCO · NEGRO.

   Decisiones de esta piel:
   1. OSCURO DOMINANTE con golpes de contraste. La secuencia de
      superficies construye: grafito → VERDE → carbón → BLANCO →
      grafito → VERDE PROFUNDO → DORADO → carbón.
   2. TIPOGRAFÍA. Archivo (pariente libre más cercano de Acumin) en
      lugar de Barlow. Los titulares van en 900 ITALIC, tracking
      cerrado y interlínea de 0.94: la itálica pesada es la firma de
      voz que el manual exhibe (Semibold Italic / Ultrablack Italic).
   3. DORADO METÁLICO, nunca plano. El isotipo "7" de marca es un
      degradado luz→profundo→luz; aquí ese mismo degradado va a los
      botones, a los filetes y —recortado sobre el texto— a las cifras.
   4. LOS OSCUROS TIENEN CUERPO. Cada superficie negra lleva pozos de
      luz radiales (cálidos, muy bajos) para que no se lean como una
      losa plana. Nunca gris-marrón: la luz es dorada, no blanca.
   5. MOVIMIENTO CON MÁSCARA. Los titulares no aparecen: SUBEN desde
      un recorte, línea a línea. Los filetes se DIBUJAN. Todo en
      transform/opacity y todo se apaga con reduced-motion.
   ============================================================ */

/* ---------- Tokens ---------- */
:root{
  /* --- superficies oscuras (cuatro planos, no uno) --- */
  --carbon:     #0A0A09;   /* el más profundo: hero, obra, footer  */
  --graphite:   #141412;   /* medio: proyectos                     */
  --graphite-2: #1C1C19;   /* elevado: quiénes somos               */

  /* --- verde de marca: YA NO ES SUPERFICIE ---
     Petición del cliente ("lo único que no me mata es el verde"): no
     queda ninguna sección verde. El verde sobrevive SÓLO como pozo de
     profundidad, casi imperceptible, dentro del degradado del bloque
     de Art Killers. Los tokens se conservan para ese único uso. */
  --green:      #023135;
  --green-deep: #011E21;
  --carbon-warm:#1A1916;   /* grafito cálido: "Qué hacemos"            */
  --carbon-ak:  #0C0E0D;   /* carbón con un punto de verde: respaldo   */

  /* --- superficies claras --- */
  --white:      #FFFFFF;
  --paper:      #F6F4EF;   /* golpe brillante, NO el fondo por defecto */

  /* --- dorado: sólido para bordes y degradado metálico para todo lo demás --- */
  --gold:       #BD9C47;
  --gold-lt:    #F2DFA6;
  --gold-dp:    #9C7C33;
  /* metal sobre oscuro: luz → profundo → luz (como el isotipo) */
  --gold-grad:  linear-gradient(135deg,#F2DFA6 0%,#C9A85A 34%,#9C7C33 58%,#E6D096 100%);
  /* metal sobre claro: mismo gesto, un punto más hundido. La parada MÁS
     CLARA es #B08F3E a propósito: sobre blanco da 3.07:1 y así TODO el
     recorrido del degradado pasa el mínimo de texto grande (3:1). Con
     el oro claro (#F2DFA6) el recorte se lavaba a 1.4:1. */
  --gold-grad-ink: linear-gradient(135deg,#B08F3E 0%,#8E7029 36%,#755C22 62%,#A8863A 100%);
  /* botón: luz arriba, sombra abajo — latón torneado, no pintura */
  --gold-btn:   linear-gradient(180deg,#C8A85C 0%,#BD9C47 34%,#B0902F 100%);

  /* --- tintas --- */
  --ink:        #0A0A09;
  --ink-soft:   rgba(10,10,9,.76);
  --ink-mute:   rgba(10,10,9,.62);
  --line-ink:   rgba(10,10,9,.13);

  --pap:        #F6F4EF;
  --pap-soft:   rgba(246,244,239,.76);
  --pap-mute:   rgba(246,244,239,.60);
  --line-pap:   rgba(246,244,239,.15);
  --line-gold:  rgba(189,156,71,.45);

  /* grano finísimo: se funde en el color, no se posa encima */
  --grain: 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' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E");

  --shadow-soft: 0 30px 70px -40px rgba(0,0,0,.85);
  --shadow-card: 0 40px 90px -46px rgba(0,0,0,.95);
  --glow-gold:   0 0 0 1px rgba(189,156,71,.55), 0 26px 60px -30px rgba(189,156,71,.30);

  --maxw: 1200px;
  --gut: 24px;
  --sec: 128px;
  --frame: 18px;           /* marco de página: ahora un filo NEGRO */

  --ease: cubic-bezier(.16,.84,.28,1);
  --ease-o: cubic-bezier(.2,.65,.2,1);

  --f: 'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* ---------- Reset base ---------- */
*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; background:var(--carbon); }
body{
  font-family:var(--f);
  font-size:1.0625rem;
  font-weight:400;
  background-color:var(--carbon);
  background-image:var(--grain);
  background-blend-mode:soft-light;
  color:var(--pap);
  line-height:1.66;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{ display:block; max-width:100%; height:auto; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; }

/* foco visible (accesibilidad) */
a:focus-visible, .btn:focus-visible, button:focus-visible{
  outline:2px solid var(--gold-lt);
  outline-offset:3px;
}
/* sobre superficies claras y sobre el panel dorado el filo claro no se
   ve: el foco pasa a carbón */
.expertise a:focus-visible, .expertise button:focus-visible,
.contact__panel a:focus-visible{
  outline-color:var(--carbon);
}

/* ---------- Utilidades ---------- */
.container{ width:100%; max-width:var(--maxw); margin:0 auto; padding:0 var(--gut); }

/* ---------- MARCO DE PÁGINA ----------
   Se conserva el recurso, pero el fondo que circula ya no es crema:
   es CARBÓN. Entre panel y panel queda un filo negro que sólo se lee
   donde cambia la superficie (verde junto a negro, blanco junto a
   negro) — que es justo donde tiene que leerse. */
.split, .feature, .expertise, .obra, .projects, .backing, .contact, .foot{
  margin-inline:var(--frame);
}
.feature, .expertise, .obra, .projects{ margin-bottom:var(--frame); }
.foot{ margin-bottom:var(--frame); }

/* ============================================================
   SUPERFICIES — la secuencia de color
   grafito-2 → VERDE → carbón → (tira) → BLANCO → grafito →
   VERDE PROFUNDO → DORADO → carbón
   Cada superficie oscura lleva pozos de luz DORADA (no blanca) para
   que el negro tenga cuerpo y no se vuelva gris-marrón.
   ============================================================ */
.section--dark{
  position:relative;
  background-color:var(--graphite-2);
  background-image:
    var(--grain),
    radial-gradient(62% 54% at 24% 30%, rgba(189,156,71,.11), rgba(189,156,71,0) 68%),
    radial-gradient(72% 62% at 86% 88%, rgba(246,244,239,.045), rgba(246,244,239,0) 70%);
  background-blend-mode:soft-light, normal, normal;
  color:var(--pap);
}
.section--cream{ color:var(--ink); }

/* ---------- Tipografía ---------- */
h1,h2,h3{ font-family:var(--f); }

/* DISPLAY — la actitud de la marca: pesado, itálico, inclinado hacia
   adelante, tracking cerrado, interlínea corta. */
.h1,.h2{
  font-weight:900;
  font-style:italic;
  letter-spacing:-.03em;
  line-height:.94;
  text-wrap:balance;
}
.h1{ font-size:clamp(2.9rem, 6.2vw, 5.2rem); }
.h2{ font-size:clamp(2.2rem, 4.7vw, 3.9rem); }

.lead{
  font-size:clamp(1.0625rem, 1.2vw, 1.125rem);
  line-height:1.7;
  max-width:46ch;
  color:var(--pap-soft);
}
.expertise .lead{ color:var(--ink-soft); }

/* eyebrow: versales trackeadas + FILETE DORADO QUE SE DIBUJA */
.eyebrow{
  display:inline-flex; align-items:center; gap:16px;
  font-size:.8125rem; font-weight:700; letter-spacing:.17em;
  text-transform:uppercase;
  color:var(--pap-soft);
}
.expertise .eyebrow{ color:var(--ink-soft); }
.eyebrow::before{
  content:""; width:44px; height:2px; flex:0 0 auto;
  background-image:linear-gradient(90deg,#F2DFA6 0%,#BD9C47 52%,#8E7029 100%);
  transform:scaleX(0); transform-origin:left center;
  transition:transform .95s var(--ease) .12s;
}
.is-in .eyebrow::before,
.eyebrow.is-on::before{ transform:scaleX(1); }
.expertise .eyebrow::before{
  background-image:linear-gradient(90deg,#C4A052 0%,#9C7C33 52%,#7A5F21 100%);
}

/* ---------- DORADO SÓLIDO EN CIFRAS Y ACENTOS ----------
   Antes esto recortaba un degradado metálico sobre el texto. Se retiró:
   el manual usa el dorado como color plano y el degradado sólo vive en
   el isotipo. En texto, además, el degradado bajaba el contraste. */
.goldtext{ color:var(--gold); }
/* sobre el papel claro el dorado de marca no llega a AA: se oscurece */
.expertise .goldtext{ color:#7E6224; }

/* ---------- link con flecha ↗ (filete que se dibuja) ---------- */
.arrowlink{
  position:relative;
  display:inline-flex; align-items:center; gap:10px;
  font-size:.9375rem; font-weight:700; letter-spacing:.05em;
  padding-bottom:10px;
  color:var(--pap);
  transition:gap .35s var(--ease-o), color .35s ease;
}
.arrowlink::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:var(--line-pap);
  transform:scaleX(0); transform-origin:left center;
  transition:transform 1s var(--ease) .18s, background-color .35s ease;
}
.is-in .arrowlink::after{ transform:scaleX(1); }
.arrowlink:hover{ color:var(--gold-lt); }
.arrowlink:hover::after{ background:var(--gold); }
.arrowlink .a{ font-size:1.05em; line-height:1; transform:translateY(-1px); }
.arrowlink--wide{ width:100%; justify-content:space-between; }

/* ============================================================
   BOTONES — latón con luz que barre
   ============================================================ */
.btn{
  position:relative; overflow:hidden;
  display:inline-flex; align-items:center; gap:12px;
  font-family:var(--f); font-size:.8125rem; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase;
  padding:20px 34px; border:1px solid transparent;
  transition:transform .4s var(--ease), box-shadow .4s ease,
             background-color .35s ease, color .35s ease, border-color .35s ease;
  cursor:pointer; white-space:nowrap;
}
.btn .a{ font-size:1.15em; letter-spacing:0; }
.btn .wa, .nav__cta .wa{
  flex:0 0 auto; width:1.05em; height:1.05em;
  fill:currentColor; opacity:.85;
  transition:opacity .3s ease;
}
.btn:hover .wa, .nav__cta:hover .wa{ opacity:1; }

/* barrido de luz: banda inclinada que cruza el botón en ~600ms */
.btn--gold::after, .nav__cta::after{
  content:""; position:absolute; top:-20%; bottom:-20%;
  width:42%; left:-60%;
  background:linear-gradient(100deg,
    rgba(255,255,255,0) 0%, rgba(255,255,255,.55) 48%, rgba(255,255,255,0) 100%);
  transform:skewX(-18deg);
  pointer-events:none;
}
.btn--gold:hover::after, .nav__cta:hover::after{ animation:sheen .62s ease-out 1; }
@keyframes sheen{ from{ left:-60%; } to{ left:130%; } }

/* PRIMARIO — latón metálico. Ya no está racionado: es la marca. */
.btn--gold{
  color:var(--carbon);
  background-color:var(--gold);
  background-image:var(--gold-btn);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.50),
    inset 0 -1px 0 rgba(0,0,0,.32),
    0 20px 44px -22px rgba(0,0,0,.9);
}
.btn--gold:hover{
  --lift:-2px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.62),
    inset 0 -1px 0 rgba(0,0,0,.32),
    0 26px 56px -22px rgba(189,156,71,.45);
}

/* variante conservada del sistema anterior (mismo material) */
.btn--brass{ color:var(--carbon); background-image:var(--gold-btn); font-weight:800; }

/* SECUNDARIO OSCURO — sobre blanco y sobre el panel dorado */
.btn--dark{
  background:var(--carbon); color:var(--pap);
  box-shadow:0 18px 40px -26px rgba(0,0,0,.9);
}
.btn--dark:hover{
  transform:translateY(-2px);
  border-color:var(--line-gold);
  box-shadow:0 24px 52px -24px rgba(0,0,0,.95), inset 0 1px 0 rgba(189,156,71,.35);
}

/* FANTASMA — sobre oscuro */
.btn--ghost{ background:transparent; color:var(--pap); border-color:var(--line-pap); }
.btn--ghost:hover{ background:var(--pap); border-color:var(--pap); color:var(--carbon); transform:translateY(-2px); }

/* ---------- reveal ---------- */
.reveal{
  opacity:0; transform:translateY(26px);
  transition:opacity .8s var(--ease-o), transform .9s var(--ease-o);
}
.reveal.is-in{ opacity:1; transform:none; }

/* ============================================================
   MÁSCARA DE TITULARES — el gesto de movimiento más fuerte de la
   página. El JS parte el titular en LÍNEAS reales; cada línea es un
   recorte y su contenido sube desde abajo con retardo escalonado.
   Si el JS no corre, el titular se ve normal (no hay estado oculto
   sin .is-split).
   ============================================================ */
.mreveal.is-split{ line-height:.94; }
.ln{
  display:block; overflow:hidden;
  padding-bottom:.2em; margin-bottom:-.14em;
}
.ln__i{
  display:block;
  transform:translateY(125%);
  transition:transform 1.05s var(--ease);
  transition-delay:calc(var(--i, 0) * 85ms);
  will-change:transform;
}
.is-in .ln__i{ transform:none; }
.nofx .ln__i{ transition:none !important; }

/* ============================================================
   NAV — CÁPSULA DE VIDRIO AHUMADO
   Antes era vidrio crema. Ahora es vidrio de carbón: funciona sobre
   el hero, sobre el verde, sobre el negro Y sobre el golpe blanco,
   sin cambiar de piel. Contraste del texto #F6F4EF sobre el compuesto
   más claro posible (vidrio al 55% sobre blanco) = 4.9:1.
   ============================================================ */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:50;
  padding:calc(var(--frame) * 1.5) var(--frame) 0;
  pointer-events:none;
}
.nav__bar{
  pointer-events:auto;
  width:100%; max-width:var(--maxw); margin:0 auto;
  display:flex; align-items:center; justify-content:space-between;
  gap:20px;
  min-height:64px;
  padding:9px 9px 9px 26px;
  border-radius:999px;
  background-color:rgba(10,10,9,.62);
  border:1px solid rgba(246,244,239,.10);
  -webkit-backdrop-filter:blur(20px) saturate(1.4);
  backdrop-filter:blur(20px) saturate(1.4);
  box-shadow:
    inset 0 1px 0 rgba(246,244,239,.10),
    0 22px 50px -26px rgba(0,0,0,.9);
  transition:background-color .35s ease, box-shadow .35s ease, border-color .35s ease;
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .nav__bar{ background-color:rgba(10,10,9,.92); }
}
.nav.is-scrolled .nav__bar{
  background-color:rgba(10,10,9,.86);
  border-color:rgba(189,156,71,.24);
  box-shadow:
    inset 0 1px 0 rgba(246,244,239,.12),
    0 26px 60px -26px rgba(0,0,0,.95);
}
.brand{ display:flex; align-items:center; gap:12px; padding:0; }
.brand__mark{ width:28px; height:28px; object-fit:contain; }
.brand__word{
  font-weight:800; font-size:1.15rem; letter-spacing:.24em;
  text-transform:uppercase; color:var(--pap);
}
.nav__links{ display:flex; align-items:center; gap:34px; }
.nav__links a{
  position:relative;
  font-size:.8125rem; font-weight:600; letter-spacing:.14em;
  text-transform:uppercase; color:var(--pap-soft);
  padding:4px 0;
  transition:color .25s ease;
}
.nav__links a:hover{ color:var(--pap); }
.nav__links a::after{
  content:""; position:absolute; left:0; right:100%; bottom:0;
  height:1px; background-image:linear-gradient(90deg,#F2DFA6,#BD9C47);
  transition:right .35s var(--ease-o);
}
.nav__links a:hover::after{ right:0; }

/* pill de latón con barrido */
.nav__cta{
  position:relative; overflow:hidden;
  display:inline-flex; align-items:center; gap:9px;
  color:var(--carbon);
  background-color:var(--gold);
  background-image:var(--gold-btn);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.46),
    inset 0 -1px 0 rgba(0,0,0,.26),
    0 8px 20px -8px rgba(0,0,0,.8);
  font-size:.75rem; font-weight:800; letter-spacing:.15em; text-transform:uppercase;
  line-height:1;
  padding:15px 28px;
  border-radius:999px;
  transition:box-shadow .35s ease, transform .35s var(--ease);
}
.nav__cta:hover{
  --lift:-1px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.6),
    inset 0 -1px 0 rgba(0,0,0,.26),
    0 14px 30px -8px rgba(189,156,71,.55);
}

/* ============================================================
   HERO — vídeo con deriva lenta, viñeta profunda y un barrido de
   luz dorada que cruza el cuadro UNA vez al cargar.
   ============================================================ */
.hero{
  position:relative; min-height:94vh; display:flex; align-items:flex-end;
  color:var(--pap); overflow:hidden; background:var(--carbon);
}
.hero__media{ position:absolute; inset:0; overflow:hidden; }
.hero__media img,
.hero__media .hero__video{
  width:100%; height:100%; object-fit:cover; display:block;
  transform-origin:58% 46%;
  animation:heroDrift 28s ease-in-out infinite alternate;
  will-change:transform;
}
@keyframes heroDrift{ from{ transform:scale(1); } to{ transform:scale(1.06); } }

/* VELO GLOBAL — MUY ALIGERADO.
   Antes eran tres capas densas (incluida una lateral al 72%) que
   enterraban el garaje: se veía el titular y poco más. Ahora sólo
   quedan dos gestos y ninguno toca el centro del cuadro:
   · una viñeta radial floja que cierra las esquinas,
   · una caída vertical para que la cápsula del nav arriba y el filo
     dorado abajo tengan sobre qué apoyarse.
   El centro (el 911 verde, el altillo) queda LIMPIO. La legibilidad
   del titular la resuelve .hero__scrim, que es local. */
.hero__overlay{
  position:absolute; inset:0;
  background:
    radial-gradient(132% 104% at 54% 40%, rgba(10,10,9,0) 36%, rgba(10,10,9,.34) 100%),
    linear-gradient(180deg, rgba(10,10,9,.50) 0%, rgba(10,10,9,.05) 22%,
                            rgba(10,10,9,0) 50%, rgba(10,10,9,.34) 86%,
                            rgba(10,10,9,.66) 100%);
}
/* SCRIM LOCAL — el "suelo" del bloque de texto.
   Cuña anclada abajo a la izquierda: densa en el borde, muerta al 88%
   de sus 700px, y disuelta hacia arriba por una máscara vertical. Sólo
   oscurece el rectángulo inferior izquierdo donde vive la columna de
   texto —que en el plano es suelo— y no toca ni el 911 del centro, ni
   el altillo, ni el Bronco de la derecha.
   Se probó primero una elipse radial suave: el peor píxel bajo el
   titular quedaba en 1.78:1 (un reflejo especular del suelo), muy por
   debajo del mínimo AA. La cuña lo sube a 5:1 largos sin devolverle al
   cuadro el velo a pantalla completa que el cliente rechazó. */
.hero__scrim{
  position:absolute; left:0; bottom:0; z-index:1;
  width:min(700px, 62%); height:min(640px, 70%);
  pointer-events:none;
  background:linear-gradient(78deg,
    rgba(4,4,3,.94) 0%, rgba(4,4,3,.88) 30%,
    rgba(4,4,3,.68) 54%, rgba(4,4,3,.30) 72%, rgba(4,4,3,0) 90%);
  -webkit-mask-image:linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.62) 16%, #000 34%, #000 100%);
  mask-image:linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.62) 16%, #000 34%, #000 100%);
}
/* barrido de luz dorada, una sola vez, al cargar */
.hero__sweep{
  position:absolute; inset:-10% -20%;
  pointer-events:none; z-index:1;
  background:linear-gradient(104deg,
     rgba(242,223,166,0) 40%,
     rgba(242,223,166,.30) 50%,
     rgba(255,255,255,.16) 53%,
     rgba(242,223,166,0) 62%);
  mix-blend-mode:screen;
  transform:translate3d(-130%,0,0);
  animation:heroSweep 2s .45s cubic-bezier(.32,.06,.24,1) 1 both;
}
@keyframes heroSweep{
  from{ transform:translate3d(-130%,0,0); }
  to{ transform:translate3d(130%,0,0); }
}
/* filo dorado inferior: cose el hero con la página */
.hero::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:2px; z-index:3;
  background:linear-gradient(90deg, rgba(189,156,71,0) 0%, rgba(189,156,71,.9) 28%,
                                    rgba(242,223,166,1) 50%, rgba(189,156,71,.9) 72%,
                                    rgba(189,156,71,0) 100%);
}
.hero__inner{ position:relative; z-index:2; padding-bottom:88px; padding-top:150px; }
/* EL TITULAR BAJA DE RANGO, NO DE ACTITUD.
   Sigue en Archivo 900 itálica; pierde ~35% de cuerpo (5.2rem → 3.4rem
   máx.) y se cierra en una columna de 13ch abajo a la izquierda. El
   render deja de ser fondo y pasa a ser la mitad del mensaje. */
.hero .h1{ font-size:clamp(2.1rem, 4.2vw, 3.4rem); }
.hero__title{
  /* 11ch, no 13: a 13 la cola de "habitar" caía sobre un reflejo
     especular del suelo (peor píxel 2.77:1). En tres líneas cortas la
     columna termina antes del morro del 911 y el peor caso sube a 6:1
     largos — y de paso el bloque queda más editorial. */
  max-width:11ch; margin-bottom:30px;
  text-shadow:0 2px 18px rgba(0,0,0,.62), 0 8px 44px rgba(0,0,0,.42);
}

/* ============================================================
   CO-BRAND — LA CREDENCIAL DE ART KILLERS
   Banda a sangre justo bajo el hero, cosida al filo dorado que cierra
   el vídeo. Versales trackeadas entre dos filetes que se dibujan: se
   lee como el crédito de una ficha técnica, no como un banner. Es la
   bio real de la marca ("MAN CAVES CURATED BY @artkillersgallery")
   puesta donde se ve sin tener que hacer scroll.
   ============================================================ */
.cobrand{
  position:relative; z-index:2;
  background-color:var(--carbon);
  background-image:
    var(--grain),
    radial-gradient(60% 240% at 50% 0%, rgba(189,156,71,.13), rgba(189,156,71,0) 72%);
  background-blend-mode:soft-light, normal;
  padding:clamp(18px, 2.2vw, 26px) 0;
}
.cobrand__inner{
  display:flex; align-items:center; justify-content:center;
  gap:clamp(14px, 2.6vw, 30px);
}
.cobrand__rule{
  flex:1 1 auto; min-width:0; height:1px; max-width:190px;
  background-image:linear-gradient(90deg, rgba(189,156,71,0), rgba(189,156,71,.72));
  transform:scaleX(0); transform-origin:right center;
  transition:transform 1.1s var(--ease) .1s;
}
.cobrand__rule:last-child{
  background-image:linear-gradient(90deg, rgba(189,156,71,.72), rgba(189,156,71,0));
  transform-origin:left center;
}
.cobrand.is-in .cobrand__rule{ transform:scaleX(1); }
.cobrand__line{
  font-size:clamp(.6875rem, 1.05vw, .8125rem);
  font-weight:700; letter-spacing:.24em; text-transform:uppercase;
  line-height:1.5; text-align:center;
  color:var(--pap-mute);
  white-space:nowrap;
}
.cobrand__ak{ color:var(--gold-lt); font-weight:800; }

/* ============================================================
   SPLIT (Quiénes somos) — GRAFITO ELEVADO con pozo de luz cálida
   detrás de la pieza de vídeo.
   ============================================================ */
/* base más honda (#141412) y pozo de luz CONCENTRADO: si el pozo es
   ancho y flojo levanta el plano entero y el negro se vuelve
   gris-marrón. Concentrado + una caída oscura hacia abajo, el plano
   tiene profundidad y las esquinas siguen siendo negras. */
.split{
  padding:var(--sec) 0; position:relative; overflow:hidden;
  background-color:var(--graphite);
  background-image:
    var(--grain),
    radial-gradient(38% 46% at 27% 44%, rgba(189,156,71,.26), rgba(189,156,71,0) 72%),
    radial-gradient(120% 80% at 50% 118%, rgba(0,0,0,.65), rgba(0,0,0,0) 68%);
  background-blend-mode:soft-light, normal, normal;
}
.split__grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:80px; align-items:center; }
.split__figure{ position:relative; }
.split__body{ display:flex; flex-direction:column; align-items:flex-start; gap:26px; }
.split__body .h2{ max-width:15ch; }
.split__body .arrowlink{ margin-top:8px; }

/* ============================================================
   FEATURE (Qué hacemos) — GRAFITO CÁLIDO. Antes era una pantalla
   entera de verde de marca; el cliente lo rechazó, así que el color
   se va y en su sitio queda MATERIA: base #1A1916 (un escalón por
   encima del grafito de "Quiénes somos", así el ritmo no se aplana),
   dos pozos de luz dorada —uno grande tras el copy, otro rasante en
   la parte alta— y una caída negra en diagonal hacia la esquina
   inferior izquierda que le da fondo de sala. Nunca es negro plano.
   ============================================================ */
.feature{
  position:relative; overflow:hidden;
  background-color:var(--carbon-warm);
  background-image:
    var(--grain),
    radial-gradient(52% 58% at 84% 30%, rgba(189,156,71,.22), rgba(189,156,71,0) 70%),
    radial-gradient(90% 34% at 62% -6%, rgba(242,223,166,.09), rgba(242,223,166,0) 72%),
    radial-gradient(120% 96% at 6% 112%, rgba(0,0,0,.86), rgba(0,0,0,0) 66%);
  background-blend-mode:soft-light, normal, normal, normal;
  color:var(--pap);
}
.feature__grid{ display:grid; grid-template-columns:1fr 1fr; align-items:stretch; }
.feature__media{ position:relative; min-height:620px; overflow:hidden; }
.feature__media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
/* la foto se disuelve en el grafito en vez de cortarse en seco */
.feature__media::after{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:3;
  background:linear-gradient(90deg, rgba(26,25,22,0) 54%, rgba(26,25,22,.66) 82%, var(--carbon-warm) 100%);
}
.feature__body{
  display:flex; flex-direction:column; align-items:flex-start; gap:26px; justify-content:center;
  padding:var(--sec) var(--gut);
  padding-left:clamp(32px, 6vw, 96px);
  padding-right:max(var(--gut), calc((100vw - var(--maxw)) / 2 - var(--frame) + var(--gut)));
}
.feature__body .h2{ max-width:14ch; }
.feature__body .lead{ max-width:44ch; }

/* ============================================================
   OBRA REAL — GALERÍA HORIZONTAL GOBERNADA POR EL SCROLL
   Carbón: el teatro más oscuro de la página.

   Antes vivían aquí DOS presentaciones apiladas —la escalera sticky de
   tres piezas y, debajo, un carrusel etiquetado con seis más, flechas,
   contador y barra—. Nueve vídeos verticales y dos gramáticas seguidas.
   El cliente lo rechazó: "es demasiado".

   Ahora hay UNA. Se conserva ÍNTEGRO el aparato de pin (.obra__stage
   sostiene la altura, .obra__pin es sticky, el JS mide el mismo p 0→1
   sobre la caja) y se le cambia el destino: p ya no enciende tarjetas
   por umbrales, TRASLADA el riel en horizontal. Ocho piezas cruzan el
   cuadro de derecha a izquierda en un solo gesto continuo.

   Tres decisiones que evitan que parezca una tira de cromos:
   1. ONDA, no fila. align-self en ciclo de cuatro
      (arriba·centro·abajo·centro): ocho piezas = dos ondas completas.
      El riel se lee como una cascada que viaja de lado.
   2. PIEZAS GRANDES. Cuatro a la vista en 1280, no seis y media: la
      pieza manda sobre la retícula.
   3. UN SOLO ADORNO. La placa dorada baja a un escalón fino, y la
      única señal de recorrido es un filete dorado atado a p — sin
      flechas ni contador: el scroll ya es el mando.
   ============================================================ */
.obra{
  /* alto de pieza: manda el menor entre la escala tipográfica y lo que
     de verdad queda libre bajo la ceja y sobre el filete */
  --gal-h:min(clamp(340px, 62vh, 540px), calc(100vh - 304px));
  /* amplitud de la onda: ×2 sobre el alto del riel. A 34px (probado
     antes) las ocho piezas leían casi como una fila plana; a 48 la
     cascada se ve de un vistazo sin que ninguna pieza se salga. */
  --gal-step:clamp(28px, 6vh, 58px);
  --gal-gap:clamp(26px, 3vw, 44px);
  /* mismo margen interior que .container dentro de la sección enmarcada:
     la ceja, la primera pieza y el filete arrancan en la misma vertical */
  --gal-pad:max(var(--gut), calc((100vw - var(--maxw)) / 2 - var(--frame) + var(--gut)));
  /* RESPALDO. En caliente el JS sustituye esta altura por un valor en px
     calculado desde el viaje real del riel (ver mockup-vibra.html); este
     valor sólo gobierna si el JS no corre. */
  --obra-scroll:290vh;
  padding:0;
  background-color:var(--carbon);
  background-image:
    var(--grain),
    radial-gradient(64% 30% at 50% 26%, rgba(189,156,71,.12), rgba(189,156,71,0) 70%),
    radial-gradient(70% 30% at 50% 88%, rgba(189,156,71,.09), rgba(189,156,71,0) 72%);
  background-blend-mode:soft-light, normal, normal;
}
.obra__stage{ height:var(--obra-scroll); }

/* overflow:hidden sobre el PROPIO elemento sticky no rompe el pegado (lo
   rompería en un ANCESTRO): es lo que recorta el riel que sobra por la
   derecha y la marca de agua, sin generar scroll horizontal. */
.obra__pin{
  position:sticky; top:0;
  height:100vh; overflow:hidden;
  padding-top:calc(var(--frame) * 1.5 + 64px);
  padding-bottom:clamp(20px, 3vh, 34px);
  display:flex; flex-direction:column; justify-content:center;
  gap:clamp(16px, 2.4vh, 30px);
}
.obra__head, .obra__foot{
  position:relative; z-index:2;
  padding-left:var(--gal-pad); padding-right:var(--gal-pad);
}
.obra__eyebrow{
  opacity:0; transform:translateY(16px);
  transition:opacity .7s var(--ease), transform .8s var(--ease);
  will-change:opacity, transform;
}
.obra__eyebrow.is-on{ opacity:1; transform:none; }

/* ---------- el riel ----------
   El desplazamiento lo escribe el rAF como transform: sólo se compone,
   no se relayoutea. El padding derecho es el que hace que en p=1 la
   última pieza aterrice a la MISMA distancia del borde a la que arranca
   la primera por la izquierda. */
.obra__viewport{ position:relative; z-index:2; }
.obra__track{
  display:flex; align-items:center;
  gap:var(--gal-gap);
  height:calc(var(--gal-h) + 2 * var(--gal-step) + 18px);
  padding:6px var(--gal-pad) 12px;   /* hueco para la placa dorada */
  transform:translate3d(0,0,0);
  will-change:transform;
}
.obra__card{
  flex:0 0 auto; margin:0;
  opacity:0; transform:translateY(24px);
  transition:opacity .8s var(--ease) var(--wd,0s), transform .9s var(--ease) var(--wd,0s);
  will-change:opacity, transform;
}
.obra__card.is-on{ opacity:1; transform:none; }
/* la ONDA: arriba · centro · abajo · centro */
.obra__card:nth-child(4n+1){ align-self:flex-start; }
.obra__card:nth-child(4n+2){ align-self:center; }
.obra__card:nth-child(4n+3){ align-self:flex-end; }
.obra__card:nth-child(4n+4){ align-self:center; }
/* sólo las cuatro primeras entran juntas (ya están en cuadro en p=0):
   se escalonan para que no aparezcan como un bloque. De la quinta en
   adelante cada una entra sola, así que no necesitan retardo. */
.obra__card:nth-child(2){ --wd:.09s; }
.obra__card:nth-child(3){ --wd:.17s; }
.obra__card:nth-child(4){ --wd:.25s; }

/* la placa: UN escalón fino y DENSO. Repetida ocho veces, la versión de
   dos escalones convertía el riel en una tira de cromos. */
.obra .vmedia--gal{
  height:var(--gal-h); width:auto; aspect-ratio:9 / 16;
  box-shadow:
    8px 8px 0 0 rgba(189,156,71,.62),
    0 34px 70px -40px rgba(0,0,0,.95);
  transition:box-shadow .5s ease;
}
.obra .obra__card:hover .vmedia--gal{
  box-shadow:
    10px 10px 0 0 rgba(189,156,71,.8),
    0 44px 88px -38px rgba(0,0,0,1);
}
.obra .obra__card:hover .vmedia--gal::after{ box-shadow:inset 0 0 0 1px rgba(189,156,71,.75); }
.obra .vmedia--gal::after{ transition:box-shadow .5s ease; }

/* ---------- la única señal de recorrido ----------
   Un filete dorado de 2px atado a p. Ni flechas, ni "03 / 08". */
.obra__bar{
  position:relative; height:2px; overflow:hidden;
  background:rgba(246,244,239,.12);
}
.obra__bar-fill{
  position:absolute; inset:0;
  background-image:linear-gradient(90deg,#F2DFA6,#BD9C47 70%,#9C7C33);
  transform:scaleX(0); transform-origin:left center;
  will-change:transform;
}

@media (min-width:768px) and (max-width:1023px){
  .obra{
    /* a 520px cabían 2 piezas y una astilla de 61px de la tercera: se
       leía como un corte, no como "hay más". A 482 la tercera asoma un
       tercio — que es la señal. */
    --gal-h:min(clamp(300px, 48vh, 482px), calc(100vh - 290px));
    --gal-step:clamp(24px, 5vh, 48px);
    --gal-gap:clamp(22px, 2.6vw, 30px);
    --obra-scroll:300vh;
  }
}

/* MODO CAPTURA (?static): sin pin, la caja mide exactamente un cuadro.
   Sin esto el screenshot de #obra sería una caja de 2.400px casi vacía
   y la galería saldría a medio montar. */
@media (min-width:768px){
  html.is-static .obra__stage{ height:100vh; }
}

/* ---------- MARCA DE AGUA: el isotipo "7" ----------
   A tamaño de arquitectura y sangrada por el borde, para que se lea
   como un relieve del fondo y no como un PNG pegado.
   Tres cosas la salvan de parecer un pegote:
   1. MÁSCARA RADIAL — los filos del "7" se disuelven; sin ella, a
      cualquier opacidad, la barra superior se recorta como una cuña
      caqui plana.
   2. brightness/saturate — el dorado en modo screen a opacidad baja
      vira a caqui; se le devuelve el calor antes de mezclar.
   3. z-index 0 bajo un contenido en z-index 2, y opacidad ≤ 6%. */
.wmark{
  position:absolute; z-index:0;
  pointer-events:none; user-select:none;
  opacity:.055;
  mix-blend-mode:screen;
  filter:brightness(1.55) saturate(1.4);
  -webkit-mask-image:radial-gradient(closest-side, #000 26%, rgba(0,0,0,.42) 60%, rgba(0,0,0,0) 100%);
  mask-image:radial-gradient(closest-side, #000 26%, rgba(0,0,0,.42) 60%, rgba(0,0,0,0) 100%);
  will-change:transform;
}
.wmark--obra{
  right:-14%; top:50%;
  width:min(104vh, 780px);
  transform:translate3d(0, calc(-50% + var(--wmy, 0px)), 0) rotate(-8deg);
}
.wmark--backing{
  left:-14%; bottom:-28%;
  width:min(96vh, 760px);
  opacity:.075;
  transform:translate3d(0, var(--wmy, 0px), 0) rotate(9deg);
}

/* ============================================================
   BISAGRA A SANGRE — la tira de renders. Ahora se DISUELVE en los dos
   bordes (máscara de degradado) en vez de cortarse en seco, y monta
   sobre carbón.
   ============================================================ */
.bleedstrip{
  position:relative;
  margin-bottom:var(--frame);
  overflow:hidden;
  background:var(--carbon);
  line-height:0;
  -webkit-mask-image:linear-gradient(90deg, rgba(0,0,0,0) 0%, #000 11%, #000 89%, rgba(0,0,0,0) 100%);
  mask-image:linear-gradient(90deg, rgba(0,0,0,0) 0%, #000 11%, #000 89%, rgba(0,0,0,0) 100%);
}
.bleedstrip__track{
  display:flex; width:max-content;
  animation:bleedmarq 68s linear infinite;
  will-change:transform;
}
.bleedstrip__track img{
  flex:0 0 auto;
  height:clamp(200px, 23vw, 300px);
  width:auto;
  object-fit:contain;
}
@keyframes bleedmarq{
  from{ transform:translate3d(0,0,0); }
  to{ transform:translate3d(-50%,0,0); }
}

/* ============================================================
   EXPERTISE — EL GOLPE BRILLANTE. Única superficie clara de la
   página: papel casi blanco, tarjetas en blanco puro, cifras en
   dorado metálico recortado y filetes que se dibujan.
   Enmarcada por carbón arriba y abajo: máximo contraste.
   ============================================================ */
.expertise{
  position:relative;
  padding:var(--sec) 0;
  background-color:var(--paper);
  background-image:
    var(--grain),
    radial-gradient(70% 60% at 78% 12%, rgba(189,156,71,.14), rgba(189,156,71,0) 66%);
  background-blend-mode:soft-light, normal;
  color:var(--ink);
}
.expertise__grid{
  display:grid;
  grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);
  gap:clamp(40px, 4.8vw, 72px);
  align-items:center;
}
.xgrid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; }
.xcard{
  position:relative;
  display:flex; flex-direction:column; align-items:stretch;
  padding:clamp(22px, 2.2vw, 28px);
  background-color:var(--white);
  background-image:var(--grain);
  background-blend-mode:soft-light;
  box-shadow:0 24px 50px -40px rgba(10,10,9,.55);
  transition:transform .45s var(--ease), box-shadow .45s ease;
}
/* filo de 1px que se vuelve DORADO al pasar por encima */
.xcard::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(10,10,9,.10);
  transition:box-shadow .45s ease;
}
.xcard:hover{
  transform:translateY(-6px);
  box-shadow:0 40px 70px -36px rgba(10,10,9,.45);
}
.xcard:hover::after{ box-shadow:inset 0 0 0 1px rgba(156,124,51,.85); }

.xcard__head{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  min-height:52px;
}
/* CIFRA — dorado metálico recortado. Itálica pesada: es la voz de la
   marca aplicada al dato. No vuelve al cuerpo gigante que hacía leer
   "barato": 34→44px, apoyo del titular y no su competencia. */
.xcard__num{
  font-size:clamp(2.125rem, 2.9vw, 2.75rem);
  font-weight:800; font-style:italic;
  letter-spacing:-.03em; line-height:1;
  font-variant-numeric:tabular-nums;
}
.xcard__icon{
  flex:0 0 auto;
  width:46px; height:46px; display:grid; place-items:center;
  background:var(--paper); color:var(--ink);
  box-shadow:inset 0 0 0 1px rgba(10,10,9,.10);
  transition:background-color .4s ease, color .4s ease, box-shadow .4s ease;
}
.xcard:hover .xcard__icon{
  background:var(--carbon); color:var(--gold-lt);
  box-shadow:inset 0 0 0 1px rgba(10,10,9,.9);
}
.xcard__icon svg{ width:21px; height:21px; }
.xcard__meta{
  margin-top:10px;
  font-size:.8125rem; line-height:1.5; letter-spacing:.045em;
  color:var(--ink-mute);
  min-height:3em;
}
/* el filete de la tarjeta también se dibuja */
.xcard__body{
  position:relative;
  display:flex; flex-direction:column; gap:10px;
  margin-top:26px; padding-top:24px;
}
.xcard__body::before{
  content:""; position:absolute; left:0; right:0; top:0; height:1px;
  background:var(--line-ink);
  transform:scaleX(0); transform-origin:left center;
  transition:transform 1s var(--ease) .25s;
}
.is-in .xcard__body::before{ transform:scaleX(1); }
.xcard__title{
  font-size:clamp(1.4375rem, 1.95vw, 1.9rem);
  font-weight:700; letter-spacing:-.028em; line-height:1.1;
  min-height:2.2em;
}
.xcard__text{ color:var(--ink-soft); font-size:1rem; line-height:1.6; }

.expertise__body{ display:flex; flex-direction:column; align-items:flex-start; gap:26px; }
.expertise__title{ max-width:14ch; margin:0; }
.expertise__body .lead{ max-width:36ch; }
.expertise__body .btn{ margin-top:6px; }
.expertise .arrowlink{ color:var(--ink); }
.expertise .arrowlink::after{ background:var(--line-ink); }

/* ============================================================
   PROJECTS — GRAFITO. Vuelve al oscuro tras el golpe blanco.
   Tarjetas con elevación real: suben 6px, aparece filo dorado, la
   foto crece al 1.05 y la sombra florece.
   ============================================================ */
.projects{
  padding:var(--sec) 0;
  background-color:var(--graphite);
  color:var(--pap);
}
.projects .eyebrow{ color:var(--pap-soft); }
.projects__head{
  display:flex; align-items:flex-end; justify-content:space-between; gap:32px;
  margin-bottom:64px;
}
.projects__head .h2{ max-width:14ch; margin-top:22px; }
.pgrid{ display:grid; grid-template-columns:repeat(3,1fr); gap:32px; }
.pgrid--4{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:44px 32px; }
.pcard{
  display:flex; flex-direction:column;
  transition:transform .45s var(--ease);
}
.pcard:hover{ transform:translateY(-6px); }
.pcard__img{
  position:relative; overflow:hidden;
  box-shadow:0 30px 62px -42px rgba(0,0,0,.95);
  transition:box-shadow .45s ease;
}
/* EN REPOSO la foto está apagada y desaturada: la grilla se lee como
   un archivo. Al pasar por encima RECUPERA el color y crece — el
   proyecto "se enciende". Con el filo dorado y la elevación ya
   existentes, es el único sitio de la página donde algo cambia de
   color al hover. */
.pcard__img img{
  width:100%; aspect-ratio:16/9; height:auto; object-fit:cover;
  filter:saturate(.55) brightness(.78) contrast(1.08);
  transition:transform .75s var(--ease-o), filter .55s ease;
}
.pcard:hover .pcard__img img,
.pcard:focus-visible .pcard__img img{
  filter:saturate(1.04) brightness(1) contrast(1.04);
}
.pcard__img::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(246,244,239,.12);
  transition:box-shadow .45s ease;
}
.pcard:hover .pcard__img{ box-shadow:0 46px 84px -34px rgba(0,0,0,1); }
.pcard:hover .pcard__img::after{ box-shadow:inset 0 0 0 1px rgba(189,156,71,.9); }
.pcard:hover .pcard__img img{ transform:scale(1.05); }
.pcard__cat{
  font-size:.8125rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:var(--pap-mute); margin:24px 0 10px;
  transition:color .35s ease;
}
.pcard:hover .pcard__cat{ color:var(--gold-lt); }
.pcard__row{
  position:relative;
  display:flex; align-items:flex-start; justify-content:space-between; gap:16px;
  padding-bottom:20px;
}
.pcard__row::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:var(--line-pap);
  transition:background-color .4s ease;
}
.pcard:hover .pcard__row::after{ background:var(--gold); }
.pcard__name{
  font-size:clamp(1.5rem,2vw,1.75rem); font-weight:700;
  letter-spacing:-.028em; line-height:1.14; max-width:14ch;
  min-height:2.28em;
}
.pcard__arrow{
  font-size:1.2rem; line-height:1; transform:translateY(2px);
  transition:transform .4s var(--ease), color .35s ease; color:var(--pap);
}
.pcard:hover .pcard__arrow{ transform:translate(5px,-4px); color:var(--gold-lt); }

/* ============================================================
   BACKING (Art Killers) — CARBÓN CON UN SUSURRO DE VERDE.
   Deja de ser "la sección verde": la base es carbón (#0C0E0D) y el
   verde queda reducido a un pozo en la esquina inferior izquierda al
   38% — a esa densidad no se lee como color, se lee como fondo de
   sala. Es el ÚNICO sitio de la página donde el verde sigue vivo.
   El capítulo sube de rango: escala mayor, filete de entrada, marca de
   agua del isotipo y el enlace convertido en destino real.
   ============================================================ */
.backing{
  position:relative; overflow:hidden;
  margin-bottom:0;
  background-color:var(--carbon-ak);
  background-image:
    var(--grain),
    radial-gradient(58% 62% at 76% 24%, rgba(189,156,71,.19), rgba(189,156,71,0) 68%),
    radial-gradient(48% 58% at 0% 112%, rgba(2,49,53,.14), rgba(2,49,53,0) 64%),
    radial-gradient(130% 70% at 50% -14%, rgba(0,0,0,.72), rgba(0,0,0,0) 62%);
  background-blend-mode:soft-light, normal, normal, normal;
}
.backing__grid{
  position:relative; z-index:2;
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.88fr);
  align-items:stretch;
}
.backing__body{
  display:flex; flex-direction:column; align-items:flex-start; gap:32px;
  justify-content:center;
  padding:clamp(80px,8.4vw,128px) clamp(32px,5vw,80px);
  padding-left:max(var(--gut), calc((100vw - var(--maxw)) / 2 - var(--frame) + var(--gut)));
}
/* la declaración de posicionamiento: itálica pesada, cuerpo grande */
.backing__line{
  font-size:clamp(1.5rem, 2.75vw, 2.35rem);
  font-weight:800; font-style:italic;
  line-height:1.2; letter-spacing:-.028em;
  color:var(--pap); max-width:28ch; text-wrap:pretty;
}
.backing__sig{
  display:flex; flex-direction:column; gap:7px;
  padding-left:20px;
  border-left:2px solid transparent;
  border-image:linear-gradient(180deg,#F2DFA6,#BD9C47 55%,rgba(189,156,71,0)) 1;
}
.backing__name{
  font-size:1.0625rem; font-weight:800; letter-spacing:.16em;
  text-transform:uppercase; color:var(--pap);
}
.backing__role{ font-size:.9375rem; color:var(--pap-mute); }
/* EL ENLACE COMO DESTINO, no como pie de página: pastilla de filete
   dorado que se llena de latón al pasar por encima. */
.backing__link{
  display:inline-flex; align-items:center; gap:14px;
  padding:16px 28px;
  font-size:.8125rem; font-weight:800; letter-spacing:.16em;
  text-transform:uppercase; color:var(--gold-lt);
  border:1px solid rgba(189,156,71,.5);
  border-radius:999px;
  transition:color .35s ease, border-color .35s ease,
             background-color .35s ease, transform .4s var(--ease),
             box-shadow .4s ease;
}
.backing__link .a{ font-size:1.15em; line-height:1; transition:transform .4s var(--ease); }
.backing__link:hover{
  color:var(--carbon); border-color:var(--gold);
  background-image:var(--gold-btn);
  transform:translateY(-2px);
  box-shadow:0 22px 46px -24px rgba(189,156,71,.6);
}
.backing__link:hover .a{ transform:translate(3px,-3px); }
.backing__media{ position:relative; min-height:520px; overflow:hidden; }
.backing__media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.backing__media::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(270deg, rgba(12,14,13,0) 44%, rgba(12,14,13,.55) 78%, var(--carbon-ak) 99%);
}

/* ============================================================
   CONTACT — PANEL DORADO. El pago de toda la secuencia oscura.
   Latón con degradado, grano dentro del color y filo de luz arriba.
   ============================================================ */
.contact{ padding-block:calc(var(--frame) * 2); }
.contact__grid{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:var(--frame);
  align-items:stretch;
}
.contact__media{ position:relative; min-height:500px; overflow:hidden; }
.contact__media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.contact__panel{
  position:relative; overflow:hidden;
  background-color:var(--gold);
  /* SOLIDO, no degradado. El manual muestra el dorado como superficie
     plana (logo blanco encima); el degradado pertenece solo al isotipo.
     Un campo grande con cinco paradas de color leia anticuado. */
  background-image:var(--grain);
  background-blend-mode:soft-light;
  color:var(--ink);
  display:flex; flex-direction:column; align-items:flex-start; gap:30px; justify-content:center;
  padding:clamp(64px,7.5vw,104px) clamp(40px,6.5vw,112px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5), inset 0 -1px 0 rgba(0,0,0,.2);
}
.contact__panel .h2{ max-width:15ch; }
.contact__panel .eyebrow{ color:rgba(10,10,9,.82); }
.contact__panel .eyebrow::before{
  background-image:linear-gradient(90deg, rgba(10,10,9,.9), rgba(10,10,9,.35));
}
.contact__ig{
  position:relative;
  font-size:.9375rem; font-weight:700; letter-spacing:.05em;
  color:var(--ink-soft);
  padding-bottom:6px;
  transition:color .3s ease;
}
.contact__ig::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:rgba(10,10,9,.38);
  transition:background-color .3s ease;
}
.contact__ig:hover{ color:var(--ink); }
.contact__ig:hover::after{ background:var(--ink); }

/* ============================================================
   FOOTER — CARBÓN
   ============================================================ */
.foot{
  background-color:var(--carbon);
  background-image:
    var(--grain),
    radial-gradient(70% 90% at 14% 0%, rgba(189,156,71,.10), rgba(189,156,71,0) 66%);
  background-blend-mode:soft-light, normal;
  color:var(--pap);
  padding-top:96px;
}
.foot__grid{
  display:grid; grid-template-columns:1.6fr 1fr 1fr 1.2fr; gap:40px;
  padding-bottom:64px;
}
.foot__brand{ display:flex; flex-direction:column; align-items:flex-start; gap:18px; max-width:34ch; }
.foot .brand{ padding:0; }
.foot .brand__mark{ width:30px; height:30px; }
.foot .brand__word{ color:var(--pap); }
.foot__tag{ color:var(--pap-soft); font-size:.9375rem; font-style:italic; font-weight:500; }
.foot__by{ color:var(--pap-mute); font-size:.8125rem; letter-spacing:.18em; text-transform:uppercase; font-weight:600; }
.foot__h{
  font-size:.75rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase;
  color:var(--gold); margin-bottom:22px;
}
.foot__col a, .foot__col p{
  display:block; color:var(--pap-soft); font-size:.9375rem; margin-bottom:13px;
  transition:color .25s ease;
}
.foot__col a:hover{ color:var(--gold-lt); }
.foot__bottom{
  border-top:1px solid var(--line-pap);
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding-top:28px; padding-bottom:36px;
  color:var(--pap-mute); font-size:.8125rem; letter-spacing:.06em;
}

/* ============================================================
   MEDIA VERTICAL 9:16 — vídeo real de obra.
   Mismo componente que antes; la placa desplazada pasa de crema a
   DORADO translúcido: firma de marca repetida tres veces sin gritar.
   ============================================================ */
.vmedia{
  position:relative; flex:0 0 auto;
  height:min(clamp(440px, 46vw, 600px), 72vh);
  aspect-ratio:9 / 16;
  max-width:100%;
  overflow:hidden;
  background:var(--carbon);
  /* PLACA DORADA EN DOS ESCALONES. Con una sola capa al 26% el oro
     compuesto sobre negro (y sobre verde) viraba a caqui apagado. Dos
     escalones —uno denso pegado a la tarjeta, otro de luz por fuera—
     leen como una plancha de latón con canto, no como una mancha. */
  box-shadow:
    18px 18px 0 0 rgba(189,156,71,.58),
    26px 26px 0 0 rgba(242,223,166,.17),
    var(--shadow-card);
}
.vmedia video{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; display:block;
}
.vmedia::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(246,244,239,.14);
}

.split__figure--vert{
  display:flex; justify-content:center; align-items:center;
  padding-right:18px;
}
.vmedia.vmedia--lg{
  width:clamp(360px, 30vw, 420px);
  height:auto;
  aspect-ratio:9 / 16;
}
@media (min-width:768px) and (max-width:1023px){
  .vmedia.vmedia--lg{ width:clamp(320px, 40vw, 400px); }
}
@media (max-width:767px){
  .vmedia.vmedia--lg{ width:min(78vw, 360px, calc(72vh * 9 / 16)); }
}
.backing__media--vert{
  display:flex; justify-content:center; align-items:center;
  min-height:0; overflow:visible;
  padding:clamp(64px, 7vw, 104px) clamp(32px, 5vw, 80px);
}
.backing__media--vert::after{ display:none; }

/* ============================================================
   EFECTOS · 1 — FILETE DE ENTRADA DE SECCIÓN
   1px dorado que se DIBUJA de centro a bordes en la ceja superior de
   cada capítulo oscuro cuando entra. Es el mismo gesto que ya hacían
   las eyebrows y los subrayados, subido a escala de sección: cose la
   página sin añadir ni un color nuevo.
   ============================================================ */
.hairline::before{
  content:""; position:absolute; top:0; left:0; right:0; height:1px; z-index:4;
  pointer-events:none;
  background-image:linear-gradient(90deg,
    rgba(189,156,71,0) 0%, rgba(189,156,71,.55) 16%,
    #E6D096 50%, rgba(189,156,71,.55) 84%, rgba(189,156,71,0) 100%);
  transform:scaleX(0); transform-origin:center;
  transition:transform 1.3s var(--ease) .05s;
}
.hairline.is-in::before{ transform:scaleX(1); }

/* ============================================================
   EFECTOS · 2 — REVELADO POR BARRIDO (clip-path)
   Las piezas de media dejan de "aparecer con desvanecido y subida":
   se DESTAPAN de abajo arriba, y por el borde del barrido viaja un
   filo dorado de 1px que se apaga al llegar arriba. Toda la mecánica
   es clip-path + transform (compuesto), y el estado tapado sólo
   existe bajo html.wipe-ready — que el JS NO pone si hay
   reduced-motion o modo captura: sin JS, la media se ve y punto.
   ============================================================ */
.reveal.wipe{ opacity:1; transform:none; transition:none; }
.wipe{ position:relative; }
.wipe-ready .wipe__in{ clip-path:inset(100% 0 0 0); }
.wipe-ready .is-in .wipe__in,
.wipe-ready .wipe.is-in .wipe__in{
  animation:wipeIn 1.15s var(--ease) var(--wd,.06s) both;
}
.wipe__edge{
  position:absolute; inset:0; z-index:5; pointer-events:none; opacity:0;
}
.wipe__edge::before{
  content:""; position:absolute; left:0; right:0; top:0; height:1px;
  background-image:linear-gradient(90deg,
    rgba(242,223,166,0) 0%, rgba(242,223,166,.85) 18%,
    #F7E8BC 50%, rgba(242,223,166,.85) 82%, rgba(242,223,166,0) 100%);
  box-shadow:0 0 16px 1px rgba(189,156,71,.45);
}
.wipe-ready .is-in .wipe__edge,
.wipe-ready .wipe.is-in .wipe__edge{
  animation:wipeEdge 1.15s var(--ease) var(--wd,.06s) both,
            wipeGlow 1.24s linear var(--wd,.06s) both;
}
@keyframes wipeIn{ from{ clip-path:inset(100% 0 0 0); } to{ clip-path:inset(0 0 0 0); } }
@keyframes wipeEdge{ from{ transform:translate3d(0,100%,0); } to{ transform:translate3d(0,0,0); } }
@keyframes wipeGlow{ 0%{ opacity:0; } 9%{ opacity:1; } 64%{ opacity:.85; } 100%{ opacity:0; } }
/* contenedores con parallax: el recorte va en una caja intermedia
   para no tocar ni la sombra ni el degradado de disolución */
.feature__media .wipe__in, .contact__media .wipe__in{
  position:absolute; inset:0; overflow:hidden;
}
/* el escalonado de la galería vive con sus tarjetas (--wd en .obra__card):
   el filo dorado usa la misma variable que la subida, así entran juntos. */

/* ============================================================
   EFECTOS · 3 — LUZ DE SALA QUE SIGUE AL PUNTERO
   Un pozo dorado ENORME (560px) y flojísimo (8,5%) en modo screen,
   suavizado con lerp 0.075: no es un foco, es la lámpara de la
   habitación. Se apaga sola sobre las dos superficies claras
   (Expertise y el panel dorado de Contacto), donde screen no aportaría
   nada y sí ensuciaría. Sólo existe con puntero fino y sin
   reduced-motion; el JS ni la crea en los demás casos.
   ============================================================ */
.roomlight{
  position:fixed; inset:0; z-index:3;
  pointer-events:none;
  mix-blend-mode:screen;
  opacity:0; transition:opacity .6s ease;
  background-image:radial-gradient(560px 560px at var(--lx,50%) var(--ly,50%),
    rgba(226,192,113,.085) 0%, rgba(189,156,71,.045) 36%, rgba(189,156,71,0) 68%);
}
.roomlight.is-on{ opacity:1; }
body.lb-lock .roomlight{ opacity:0; }

/* ============================================================
   EFECTOS · 4 — CTA MAGNÉTICOS
   Los botones de latón se inclinan hacia el cursor un máximo de 6px y
   vuelven solos. El desplazamiento entra por variables dentro del
   MISMO transform que ya usaba el hover, así no se pisan: el hover
   sólo cambia --lift.
   ============================================================ */
.btn--gold, .nav__cta{
  transform:translate3d(var(--mx,0px), calc(var(--my,0px) + var(--lift,0px)), 0);
}

/* cascada de entrada en la grilla de proyectos */
.pgrid .reveal:nth-child(4){ transition-delay:.30s; }
.xgrid .reveal:nth-child(2){ transition-delay:.08s; }
.xgrid .reveal:nth-child(3){ transition-delay:.16s; }
.xgrid .reveal:nth-child(4){ transition-delay:.24s; }
.pgrid .reveal:nth-child(2){ transition-delay:.10s; }
.pgrid .reveal:nth-child(3){ transition-delay:.20s; }
.expertise__body.reveal{ transition-delay:.20s; }

/* ---------- tratamiento de imagen ---------- */
.feature__media img, .backing__media img, .hero__media img{
  filter:saturate(.95) contrast(1.08) brightness(.94);
}
/* .pcard__img img lleva su propio filtro (reposo apagado → hover a
   color): queda fuera de este grupo a propósito. */
.contact__media img, .bleedstrip__track img{ filter:contrast(1.04) saturate(1.03); }

/* parallax (el desplazamiento lo pone el JS) */
.feature__media, .contact__media, .backing__media{ overflow:hidden; }
.feature__media img, .contact__media img, .backing__media img{ top:-11%; height:122%; will-change:transform; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:767px){
  .nav__links{ display:none; }
  /* sin pin, .obra ya no es ancestro de nada sticky: aquí SÍ puede
     recortar, y tiene que hacerlo — la marca de agua sangra por la
     derecha y sin este recorte el documento medía 410px de ancho en
     una pantalla de 390 (scroll horizontal). */
  /* GALERÍA EN MÓVIL: sin pin y sin transform. El riel se convierte en
     la tira deslizable de siempre —snap horizontal, sin barra de scroll,
     piezas de 72vw que sangran por la derecha para que se vea que hay
     más—. Mismas ocho piezas, misma ceja, ninguna flecha. */
  .obra{ padding:var(--sec) 0; overflow:hidden; --gal-pad:var(--gut); }
  .obra__stage{ height:auto !important; }
  .obra__pin{ position:static; height:auto; padding:0; display:block; overflow:visible; }
  .obra__head{ padding-left:var(--gut); padding-right:var(--gut); }
  .obra__foot{ display:none; }   /* aquí el mando es el dedo, no una barra */
  .obra__card{ opacity:1; transform:none; transition:none; will-change:auto; }
  .obra__eyebrow{
    opacity:1; transform:none; transition:none; will-change:auto;
    margin-bottom:26px;
  }
  .wmark--obra{ width:min(50vh, 300px); right:-4%; opacity:.06; }
  .obra__track{
    transform:none !important; will-change:auto;
    align-items:flex-start;
    height:auto;
    overflow-x:auto; overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory;
    scroll-padding-left:var(--gut);
    padding:6px var(--gut) 22px;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none; -ms-overflow-style:none;
    gap:clamp(16px, 4vw, 24px);
  }
  .obra__track::-webkit-scrollbar{ display:none; }
  .obra__card{ scroll-snap-align:start; align-self:flex-start !important; }
  .obra .vmedia--gal{ height:auto; width:min(72vw, 330px); aspect-ratio:9 / 16; }
  /* la credencial de Art Killers pasa a columna: en 390px la línea
     completa con .24em de tracking no cabe en una sola tirada */
  .cobrand__inner{ flex-direction:column; gap:12px; }
  .cobrand__rule{ flex:0 0 auto; width:64px; max-width:64px; transform-origin:center;
    background-image:linear-gradient(90deg, rgba(189,156,71,0), rgba(189,156,71,.75), rgba(189,156,71,0)); }
  .cobrand__rule:last-child{ display:none; }
  /* el nombre de la galería SIEMPRE en su propia línea: dejándolo al
     flujo, a 390px partía en "…BY ART / KILLERS GALLERY" */
  .cobrand__line{ white-space:normal; letter-spacing:.18em; }
  .cobrand__ak{ display:block; margin-top:5px; }
}
@media (max-width:960px){
  .vmedia{ height:min(70vh, 560px); }
  .split__figure--vert{ padding-right:18px; padding-block:0 18px; }
  .backing__media--vert{ padding:52px calc(var(--gut) + 18px) 8px var(--gut); }
  :root{ --sec:84px; }
  .split__grid{ grid-template-columns:1fr; gap:40px; }
  .split__figure{ order:-1; }
  .feature__grid{ grid-template-columns:1fr; }
  .feature__media{ min-height:360px; }
  .feature__media::after{
    background:linear-gradient(180deg, rgba(26,25,22,0) 60%, rgba(26,25,22,.6) 86%, var(--carbon-warm) 100%);
  }
  .feature__body{ padding:64px var(--gut); }
  .expertise__grid{ grid-template-columns:1fr; gap:48px; }
  .expertise__body{ order:-1; }
  .expertise__title{ max-width:18ch; }
  .xgrid{ gap:20px; }
  .backing__grid{ grid-template-columns:1fr; }
  .backing__media{ order:-1; min-height:340px; }
  .backing__media::after{
    background:linear-gradient(0deg, rgba(12,14,13,0) 62%, rgba(12,14,13,.5) 88%, var(--carbon-ak) 100%);
  }
  .backing__body{ padding:64px var(--gut); }
  .backing__line{ max-width:26ch; }
  .wmark--backing{ width:min(44vh, 300px); opacity:.07; }
  /* PROYECTOS EN CARRUSEL EN TELÉFONO. Apilados eran cuatro tarjetas
     altas seguidas; deslizando se recorren igual que la galería de obra
     y la sección deja de ser un tobogán. Sangra por la derecha para que
     se vea que hay más. */
  .pgrid, .pgrid--4{
    display:flex; grid-template-columns:none;
    gap:clamp(16px, 4vw, 24px);
    overflow-x:auto; overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory;
    scroll-padding-left:var(--gut);
    padding:2px var(--gut) 20px;
    margin-inline:calc(var(--gut) * -1);
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none; -ms-overflow-style:none;
  }
  .pgrid::-webkit-scrollbar{ display:none; }
  .pgrid .pcard{
    flex:0 0 auto; width:min(78vw, 340px);
    scroll-snap-align:start;
  }
  .pcard__name{ min-height:0; max-width:none; }
  .projects__head{ flex-direction:column; align-items:flex-start; }
  .contact__grid{ grid-template-columns:1fr; }
  .contact__media{ min-height:320px; }
  .foot__grid{ grid-template-columns:1fr 1fr; gap:40px 24px; }
}
/* TABLET · la cápsula conserva los cinco links, pero Archivo pisa más
   que Barlow (más ancho a igual cuerpo, y aquí va a 600-800 en vez de
   500-600): con la compresión heredada el wordmark ZETTE se solapaba
   con "INICIO" a 768. Se comprimen las TRES piezas —marca, links y
   pill— hasta caber holgadamente en los 732px de barra. */
@media (min-width:768px) and (max-width:960px){
  .nav__bar{ padding-left:18px; gap:12px; }
  .brand{ gap:9px; }
  .brand__mark{ width:24px; height:24px; }
  .brand__word{ font-size:1rem; letter-spacing:.17em; }
  .nav__links{ gap:16px; }
  .nav__links a{ font-size:.6875rem; letter-spacing:.07em; }
  .nav__cta{ padding:13px 20px; font-size:.6875rem; letter-spacing:.1em; }
}
@media (max-width:560px){
  :root{ --gut:18px; --sec:72px; --frame:12px; }
  .h1{ font-size:clamp(2.35rem, 9.6vw, 3rem); }
  .h2{ font-size:clamp(2rem, 8.4vw, 2.5rem); }
  .xgrid{ grid-template-columns:1fr; gap:14px; }
  .xcard{ padding:24px; }
  .xcard__meta{ min-height:0; margin-top:10px; }
  .xcard__body{ margin-top:22px; padding-top:20px; }
  .xcard__title{ min-height:0; font-size:1.5rem; }
  .backing__media{ min-height:280px; }
  .vmedia{ height:min(66vh, 520px); }
  .backing__body{ padding:52px var(--gut); gap:24px; }
  .backing__line{ font-size:1.3125rem; max-width:none; }
  .foot__grid{ grid-template-columns:1fr; }
  .foot__bottom{ flex-direction:column; align-items:flex-start; }
  .hero__inner{ padding-bottom:60px; padding-top:130px; }
  /* en móvil la columna ya es el ancho de pantalla: el titular puede
     recuperar algo de cuerpo sin taparle nada al render */
  .hero .h1{ font-size:clamp(2.15rem, 9vw, 2.85rem); }
  .hero__title{ max-width:12ch; }
  .hero__scrim{ width:100%; height:min(520px, 60%);
    background:linear-gradient(96deg,
      rgba(4,4,3,.92) 0%, rgba(4,4,3,.86) 40%,
      rgba(4,4,3,.72) 74%, rgba(4,4,3,.58) 100%);
    -webkit-mask-image:linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.5) 24%, #000 50%, #000 100%);
    mask-image:linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.5) 24%, #000 50%, #000 100%); }
  .btn{ padding:18px 26px; }
  .split__grid{ gap:32px; }
  .expertise__grid{ gap:40px; }
  .expertise__body{ gap:22px; }
  .contact__panel{ padding:52px 26px; }
  .nav{ padding-top:var(--frame); }
  .nav__bar{ min-height:56px; padding:7px 7px 7px 18px; gap:12px; }
  .brand__mark{ width:24px; height:24px; }
  .brand__word{ font-size:1rem; letter-spacing:.2em; }
  .nav__cta{ padding:13px 20px; letter-spacing:.1em; font-size:.6875rem; }
}

/* ============================================================
   INTERACCIONES · Lightbox · Cursor "Ver +" · Contador
   ============================================================ */
button.pcard{
  border:0; margin:0; padding:0; width:100%;
  background:none; font:inherit; color:inherit; text-align:left;
  -webkit-appearance:none; appearance:none; cursor:pointer;
}

body.lb-lock{ overflow:hidden; }
.lightbox{
  position:fixed; inset:0; z-index:2000;
  display:grid; grid-template-rows:minmax(0,1fr) auto auto;
  justify-items:center; align-items:center;
  gap:clamp(10px,2vh,20px);
  padding:clamp(16px,4vw,40px);
  background:rgba(6,6,6,.97);
  -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px);
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .4s ease, visibility 0s linear .4s;
}
.lightbox.is-open{
  opacity:1; visibility:visible; pointer-events:auto;
  transition:opacity .4s ease;
}
.lightbox__stage{
  grid-row:1; position:relative; min-height:0;
  width:100%; height:100%;
  display:flex; align-items:center; justify-content:center;
}
.lightbox__img{
  max-width:100%; max-height:100%; width:auto; height:auto;
  object-fit:contain;
  box-shadow:0 40px 120px -50px rgba(0,0,0,.95);
  opacity:0; transition:opacity .35s ease;
}
.lightbox__img.is-ready{ opacity:1; }
.lightbox__close, .lightbox__nav{
  position:fixed; display:grid; place-items:center;
  color:var(--pap); border-radius:50%; cursor:pointer;
  background:rgba(246,244,239,.08);
  border:1px solid rgba(246,244,239,.22);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  transition:background-color .25s ease, border-color .25s ease, transform .25s ease, color .25s ease;
}
.lightbox__close{
  top:clamp(14px,3vw,28px); right:clamp(14px,3vw,28px);
  width:48px; height:48px; font-size:1.7rem; line-height:1;
}
.lightbox__nav{
  top:50%; transform:translateY(-50%);
  width:54px; height:54px; font-size:2rem; line-height:1;
}
.lightbox__nav--prev{ left:clamp(10px,2.5vw,32px); }
.lightbox__nav--next{ right:clamp(10px,2.5vw,32px); }
.lightbox__close:hover, .lightbox__nav:hover{
  background-image:var(--gold-btn); border-color:var(--gold); color:var(--carbon);
}
.lightbox__nav:hover{ transform:translateY(-50%) scale(1.06); }
.lightbox__bar{
  grid-row:2; display:flex; align-items:baseline; gap:16px;
  font-size:.85rem; letter-spacing:.06em;
}
.lightbox__caption{ text-transform:uppercase; letter-spacing:.17em; font-weight:600; color:var(--pap-mute); }
.lightbox__count{ color:var(--gold-lt); font-variant-numeric:tabular-nums; letter-spacing:.14em; font-weight:700; }
.lightbox__thumbs{
  grid-row:3; display:flex; gap:8px; flex-wrap:wrap;
  justify-content:center; max-width:100%;
}
.lightbox__thumb{
  width:64px; height:40px; padding:0; border:0; cursor:pointer;
  background:none; overflow:hidden; opacity:.4;
  outline:1px solid transparent; outline-offset:2px;
  transition:opacity .25s ease, outline-color .25s ease;
}
.lightbox__thumb img{ width:100%; height:100%; object-fit:cover; }
.lightbox__thumb:hover{ opacity:.8; }
.lightbox__thumb.is-active{ opacity:1; outline-color:var(--gold); }

.vercursor{
  position:fixed; top:0; left:0; z-index:1500;
  width:96px; height:96px; border-radius:50%;
  display:grid; place-items:center;
  background:rgba(189,156,71,.28);
  border:1px solid rgba(242,223,166,.72);
  -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
  box-shadow:0 0 40px -6px rgba(189,156,71,.5);
  color:var(--pap);
  font-size:.72rem; letter-spacing:.17em; text-transform:uppercase; font-weight:700;
  pointer-events:none;
  transform:translate(-50%,-50%) scale(.35); opacity:0;
  transition:opacity .28s ease, transform .28s var(--ease);
  will-change:left,top,transform;
}
.vercursor.is-active{ opacity:1; transform:translate(-50%,-50%) scale(1); }
.vercursor--reduced{ transition:opacity .18s ease; transform:translate(-50%,-50%); }
.vercursor--reduced.is-active{ transform:translate(-50%,-50%); }
body.lb-lock .vercursor{ opacity:0; }
@media (hover:hover) and (pointer:fine) and (min-width:641px){
  .pgrid .pcard{ cursor:none; }
}
@media (max-width:640px){
  .lightbox__nav{ width:46px; height:46px; font-size:1.6rem; }
  .lightbox__close{ width:46px; height:46px; font-size:1.5rem; }
  .lightbox__thumbs{ display:none; }
  .vercursor{ display:none; }
}

/* ============================================================
   MODO CAPTURA (?static) — congela todo para el screenshot
   ============================================================ */
html.is-static *,
html.is-static *::before,
html.is-static *::after{
  animation:none !important;
  transition:none !important;
}

/* ============================================================
   REDUCED MOTION — todo el movimiento se apaga o se simplifica
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .reveal{ opacity:1; transform:none; transition:none; }
  .ln__i{ transform:none !important; transition:none !important; }
  .ln{ overflow:visible; padding-bottom:0; margin-bottom:0; }
  .eyebrow::before{ transform:scaleX(1); transition:none; }
  .arrowlink::after, .xcard__body::before{ transform:scaleX(1); transition:none; }
  .hero__media img, .hero__media .hero__video{ animation:none; transform:none; }
  .hero__sweep{ display:none; }
  .btn--gold::after, .nav__cta::after{ display:none; }
  .btn:hover, .btn--gold:hover, .btn--dark:hover, .btn--ghost:hover{ transform:none; }
  .nav__cta:hover{ transform:none; }
  .pcard, .pcard:hover{ transform:none; transition:none; }
  .pcard__img img, .pcard:hover .pcard__img img{ transition:none; transform:none; }
  .xcard, .xcard:hover{ transform:none; transition:none; }
  .feature__media img, .contact__media img, .backing__media img{ transform:none !important; top:0; height:100%; }
  .bleedstrip__track{ animation:none; }
  .wmark{ transform:none !important; }
  .wmark--obra{ transform:translateY(-50%) !important; }
  /* GALERÍA SIN MOVIMIENTO: ni pin ni traslación. Las ocho piezas pasan
     a ser la misma tira deslizable del móvil, todas visibles, y los
     vídeos se quedan quietos en su póster (lo hace el JS). */
  .obra{ padding:var(--sec) 0; overflow:hidden; }
  .obra__stage{ height:auto !important; }
  .obra__pin{ position:static; height:auto; padding:0; display:block; overflow:visible; }
  .obra__foot{ display:none; }
  .obra__track{
    transform:none !important; will-change:auto;
    align-items:flex-start; height:auto;
    overflow-x:auto; overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory;
    scroll-padding-left:var(--gal-pad);
    padding:6px var(--gal-pad) 22px;
    scrollbar-width:none; -ms-overflow-style:none;
  }
  .obra__track::-webkit-scrollbar{ display:none; }
  .obra__card{ scroll-snap-align:start; align-self:flex-start !important; }
  .obra .vmedia--gal{ height:auto; width:min(72vw, 300px); aspect-ratio:9 / 16; }
  /* EFECTOS NUEVOS · versión sin movimiento:
     el filete de sección se dibuja ya dibujado, el barrido no recorta
     nada (la media simplemente está), la luz de puntero y el magnetismo
     ni se instancian (el JS sale antes), y la galería conserva el
     scroll pero sin desplazamiento suave. */
  .hairline::before{ transform:scaleX(1); transition:none; }
  .wipe__in{ clip-path:none !important; animation:none !important; }
  .wipe__edge{ display:none; }
  .roomlight{ display:none; }
  .btn--gold, .nav__cta{ transform:none; }
  .obra .obra__card:hover .vmedia--gal{ box-shadow:8px 8px 0 0 rgba(189,156,71,.62), 0 34px 70px -40px rgba(0,0,0,.95); }
  .obra .vmedia--gal{ transition:none; }
  .obra__bar-fill{ transform:scaleX(1); }
  .backing__link:hover{ transform:none; }
  .backing__link:hover .a{ transform:none; }
  .cobrand__rule{ transform:scaleX(1); transition:none; }
  .obra__card{ opacity:1; transform:none; transition:none; will-change:auto; }
  .obra__eyebrow{ opacity:1; transform:none; transition:none; will-change:auto; }
  .lightbox, .lightbox.is-open{ transition:opacity .01s linear; }
  .lightbox__img{ transition:none; }
  .lightbox__nav:hover, .lightbox__close:hover{ transform:none; }
  .lightbox__nav:hover{ transform:translateY(-50%); }
  .vercursor{ transition:opacity .15s ease; }
}