/* ============================================================
   CAPTIUM — Estudio Cinematográfico
   Brand cinema. Carbon dominates. Lime punctuates. Space is sacred.
   ============================================================ */

:root {
  /* Palette — strict */
  --carbon:   #0A0B0D;   /* 70%+ surface */
  --carbon-2: #0F1014;   /* 5% lighter overlay / depth */
  --gray:     #1A1B1F;   /* tonal layering only */
  --black:    #000000;   /* absolute moments */
  --lime:     #F2A23C;   /* punctuation only */
  --bone:     #F4F6F8;   /* primary text on dark */
  --amber:    #C99055;   /* tungsten accent, photographic only */
  --cream:    #E8DCC8;   /* rare warm overlay */

  /* Bone opacities */
  --bone-85: rgba(244,246,248,0.85);
  --bone-80: rgba(244,246,248,0.80);
  --bone-75: rgba(244,246,248,0.75);
  --bone-70: rgba(244,246,248,0.70);
  --bone-60: rgba(244,246,248,0.60);
  --bone-50: rgba(244,246,248,0.50);
  --hairline: rgba(244,246,248,0.08);

  /* Tweakable */
  --lime-live: var(--lime);
  --hero-scale: 1;
  --grain-opacity: 0.05;

  /* Type — editorial serif for narrative, grotesk for structure, mono for slates */
  --serif:   "Fraunces", Georgia, "Times New Roman", serif;
  --display: "Space Grotesk", system-ui, sans-serif;
  --body:    "Satoshi", system-ui, -apple-system, sans-serif;
  --mono:    "JetBrains Mono", ui-monospace, monospace;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  background: var(--carbon);
  color: var(--bone);
  font-family: var(--body);
  font-weight: 300;
  letter-spacing: -0.01em;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

::selection { background: var(--lime-live); color: var(--carbon); }

/* ---------- Type primitives ---------- */
.display {
  font-family: var(--display);
  font-weight: 900;
  letter-spacing: -0.04em;
  line-height: 0.95;
  text-wrap: balance;
}
.mono {
  font-family: var(--mono);
  font-weight: 400;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}
.lime { color: var(--lime-live); }
.bone-70 { color: var(--bone-70); }

/* ---------- Layout shell ---------- */
.wrap {
  width: 100%;
  max-width: 1320px;
  margin-inline: auto;
  padding-inline: clamp(24px, 6vw, 96px);
}
section { position: relative; }

/* Scroll fade-in (opacity only — no transforms per motion guidelines) */
.reveal { opacity: 0; transition: opacity 700ms ease-out; }
.reveal.in { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transition: none; }
  html { scroll-behavior: auto; }
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  font-family: var(--body);
  font-weight: 400;
  font-size: 0.95rem;
  letter-spacing: -0.01em;
  padding: 0.95em 1.8em;
  border: 1px solid var(--bone);
  background: transparent;
  color: var(--bone);
  text-decoration: none;
  cursor: pointer;
  transition: color 200ms ease, border-color 200ms ease, background 200ms ease;
}
.btn:hover { border-color: var(--lime-live); color: var(--lime-live); }

.btn--lime {
  border-color: var(--lime-live);
  background: var(--lime-live);
  color: var(--carbon);
}
.btn--lime:hover { background: transparent; color: var(--lime-live); }

.btn--mono {
  font-family: var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 1rem;
  min-height: 64px;
  padding-inline: 2.4em;
}

/* film-leader marker line */
.leader {
  height: 1px;
  background: var(--lime-live);
  width: 35%;
  max-width: 420px;
}

/* ============================================================
   NAV — absent on first frame, fades in on scroll
   ============================================================ */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px clamp(24px, 6vw, 96px);
  background: rgba(10,11,13,0.72);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--hairline);
  opacity: 0;
  transform: translateY(-100%);
  transition: opacity 400ms ease, transform 400ms ease;
  pointer-events: none;
}
.nav.show { opacity: 1; transform: translateY(0); pointer-events: auto; }
.nav__brand { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.nav__logo { height: 40px; width: auto; display: block; }

/* Las 3 capas — acceso de primer nivel, junto al logo */
.nav__layers {
  display: flex;
  align-items: stretch;
  margin-left: clamp(18px, 3vw, 40px);
  border: 1px solid var(--hairline);
  border-radius: 2px;
  overflow: hidden;
}
.nav__layer {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0.5em 0.95em;
  color: var(--bone-60);
  text-decoration: none;
  font-family: var(--display), system-ui, sans-serif;
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  border-right: 1px solid var(--hairline);
  transition: color 200ms ease, background 200ms ease;
}
.nav__layer:last-child { border-right: 0; }
.nav__layer .nav__layer-k { font-size: 0.6rem; letter-spacing: 0.1em; color: rgba(244,246,248,0.4); transition: color 200ms ease; }
.nav__layer:hover { color: var(--bone); background: rgba(255,255,255,0.03); }
.nav__layer:hover .nav__layer-k { color: var(--lime-live); }
.nav__layer.is-active { color: var(--carbon); background: var(--lime); }
.nav__layer.is-active .nav__layer-k { color: rgba(10,11,13,0.55); }
.nav__layer.is-active:hover { background: var(--lime); color: var(--carbon); }

.nav__links { display: flex; gap: clamp(16px, 2.4vw, 32px); align-items: center; margin-left: auto; }
.nav__links a {
  color: var(--bone-70);
  text-decoration: none;
  font-size: 0.85rem;
  font-weight: 400;
  letter-spacing: -0.01em;
  transition: color 200ms ease;
}
.nav__links a:hover { color: var(--bone); }
.nav__links a.nav__cta { color: var(--bone); border: 1px solid var(--bone); padding: 0.55em 1.1em; }
.nav__links a.nav__cta:hover { color: var(--lime-live); border-color: var(--lime-live); }

/* Botón hamburguesa — índice completo, presente en todos los viewports */
.nav__burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  width: 40px;
  height: 30px;
  padding: 0;
  margin-left: clamp(14px, 2vw, 22px);
  background: none;
  border: 0;
  cursor: pointer;
}
.nav__burger span { display: block; width: 22px; height: 1.5px; background: var(--bone); margin-left: auto; transition: background 200ms ease; }
.nav__burger:hover span { background: var(--lime-live); }
.nav__burger[aria-expanded="true"] span { background: var(--lime); }
/* En desktop el burger es opcional (índice ampliado); lo mostramos siempre como llave del menú editorial */
@media (min-width: 721px) {
  .nav__burger { display: flex; }
}
@media (max-width: 720px) {
  .nav__layers { display: none; }
  .nav__links a:not(.nav__cta) { display: none; }
  .nav__burger { display: flex; }
}

/* ============================================================
   MENÚ DESPLEGABLE EDITORIAL — overlay de las 3 capas
   ============================================================ */
.navmenu {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: rgba(8,9,11,0.92);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 360ms ease;
  display: flex;
  flex-direction: column;
}
.navmenu.open { opacity: 1; pointer-events: auto; }
.navmenu__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px clamp(24px, 6vw, 96px);
  border-bottom: 1px solid var(--hairline);
}
.navmenu__brand { font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--bone-60); }
.navmenu__close {
  background: none; border: 0; cursor: pointer;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--bone-70); transition: color 200ms ease;
}
.navmenu__close:hover { color: var(--lime); }
.navmenu__inner {
  flex: 1;
  display: grid;
  grid-template-columns: 1.55fr 0.85fr;
  gap: clamp(28px, 5vw, 80px);
  align-content: center;
  padding: clamp(36px, 6vh, 80px) clamp(24px, 6vw, 96px);
  overflow-y: auto;
}
.navmenu__layers { display: flex; flex-direction: column; }
.navmenu__layer {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  column-gap: clamp(16px, 2vw, 28px);
  align-items: baseline;
  padding: clamp(18px, 2.6vh, 30px) 0;
  border-top: 1px solid var(--hairline);
  text-decoration: none;
  transition: padding-left 280ms cubic-bezier(0.22,1,0.36,1);
}
.navmenu__layer:last-child { border-bottom: 1px solid var(--hairline); }
.navmenu__layer:hover { padding-left: 14px; }
.navmenu__idx {
  grid-row: 1 / 3;
  font-size: 0.8rem;
  color: rgba(244,246,248,0.4);
  letter-spacing: 0.1em;
  transition: color 200ms ease;
}
.navmenu__layer:hover .navmenu__idx { color: var(--lime); }
.navmenu__name {
  font-family: var(--display), system-ui, sans-serif;
  font-weight: 700;
  font-size: clamp(2rem, 5.2vw, 3.6rem);
  line-height: 0.98;
  letter-spacing: -0.03em;
  color: var(--bone);
  transition: color 200ms ease;
}
.navmenu__layer:hover .navmenu__name { color: var(--lime); }
.navmenu__desc {
  grid-column: 2;
  margin-top: 0.55em;
  max-width: 42ch;
  font-family: var(--body), system-ui, sans-serif;
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--bone-60);
}
.navmenu__aside { display: flex; flex-direction: column; justify-content: center; gap: clamp(28px, 5vh, 48px); }
.navmenu__links { display: flex; flex-direction: column; gap: 0.7em; }
.navmenu__links-h {
  font-size: 0.64rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: rgba(244,246,248,0.35); margin-bottom: 0.4em;
}
.navmenu__links a {
  color: var(--bone-70); text-decoration: none;
  font-size: 0.92rem; letter-spacing: 0.02em;
  transition: color 200ms ease;
}
.navmenu__links a:hover { color: var(--bone); }
.navmenu__sign {
  font-family: var(--display), system-ui, sans-serif;
  font-weight: 700;
  font-size: clamp(1.05rem, 1.8vw, 1.4rem);
  line-height: 1.18;
  letter-spacing: -0.02em;
  color: var(--bone);
}
.navmenu__sign span { color: var(--lime); }
@media (max-width: 860px) {
  .navmenu__inner { grid-template-columns: 1fr; align-content: start; }
  .navmenu__aside { border-top: 1px solid var(--hairline); padding-top: clamp(24px, 4vh, 40px); }
}

/* ============================================================
   SECTION 1 — TITLE CARD (Hero)
   ============================================================ */
.hero {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  text-align: left;
  padding: clamp(104px, 17vh, 188px) clamp(24px, 6vw, 96px) clamp(48px, 8vh, 92px);
}
/* Composición editorial: el ojo 3D y el wordmark "Captium" respiran libres en
   el centro/arriba; el titular vive como lockup anclado abajo-izquierda y
   nunca cruza el centro de la animación. */
.hero__lockup {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  max-width: min(46ch, 60vw);
}
.hero__rule {
  display: block;
  width: clamp(40px, 5vw, 72px);
  height: 2px;
  margin-bottom: clamp(18px, 2.4vh, 28px);
  background: var(--lime);
  box-shadow: 0 0 12px rgba(242, 162, 60, 0.55);
  transform-origin: left center;
}
.hero__foot {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-top: clamp(20px, 3vh, 34px);
}
.hero__corner {
  position: absolute;
  top: clamp(20px, 3vh, 36px);
  left: clamp(24px, 6vw, 96px);
  font-size: 0.75rem;
  color: var(--lime-live);
}
.hero__stamp {
  position: absolute;
  bottom: clamp(20px, 3vh, 36px);
  right: clamp(24px, 6vw, 96px);
  font-size: 0.75rem;
  color: var(--lime-live);
}
.hero__title {
  font-size: calc(clamp(2rem, 4.8vw, 4.4rem) * var(--hero-scale));
  line-height: 0.98;
  letter-spacing: -0.035em;
  color: var(--bone);
  text-wrap: balance;
}
.hero__title .line {
  display: block;
  overflow: hidden;
  padding-bottom: 0.04em; /* evita recortar descendentes (g, p) en la máscara */
}
.hero__title .line > i {
  display: block;
  font-style: inherit;
}
.hero__sub {
  margin-top: 0;
  font-size: clamp(1.02rem, 1.4vw, 1.24rem);
  font-weight: 300;
  color: var(--bone-70);
  max-width: 34ch;
  line-height: 1.5;
}
.hero__cta { margin-top: clamp(20px, 3.2vh, 34px); }

/* Short viewports: el lockup no debe trepar al centro */
@media (max-height: 800px) {
  .hero__title { font-size: calc(clamp(1.8rem, 4.2vw, 3.6rem) * var(--hero-scale)); }
}
/* Mobile: el lockup ocupa el ancho útil y el ojo respira arriba */
@media (max-width: 680px) {
  .hero { padding: clamp(88px, 14vh, 120px) clamp(22px, 7vw, 40px) clamp(36px, 6vh, 64px); }
  .hero__lockup { max-width: 100%; }
  .hero__sub { max-width: 40ch; }
}

/* ============================================================
   SECTION 2 — THESIS
   ============================================================ */
.thesis { padding: 22vh 0; position: relative; overflow: hidden; }
.thesis__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: clamp(40px, 6vw, 96px);
  align-items: center;
  margin-top: clamp(40px, 6vh, 80px);
}
.thesis__text { position: relative; z-index: 2; }
.thesis__line {
  font-size: clamp(1.7rem, 4.6vw, 4.6rem);
  color: var(--bone);
  margin-bottom: clamp(28px, 5vh, 64px);
  line-height: 1.04;
  letter-spacing: -0.025em;
  text-wrap: balance;
}
.thesis__line:last-of-type { margin-bottom: 0; }
.thesis__sig {
  margin-top: clamp(40px, 8vh, 100px);
  font-style: italic;
  font-weight: 300;
  font-size: 1rem;
  color: var(--bone-50);
}

/* ============================================================
   THESIS — palabras clave sutiles (1-2 acentos editoriales)
   ============================================================ */
.kw           { font-style: italic; color: var(--lime); font-weight: 500;
                text-shadow: 0 0 14px rgba(242, 162, 60, 0.34), 0 0 2px rgba(242, 162, 60, 0.25); }
.kw--amber    { color: var(--amber, #C99055);
                text-shadow: 0 0 14px rgba(208, 138, 64, 0.32), 0 0 2px rgba(208, 138, 64, 0.22); }

/* ============================================================
   THESIS — canvas del ojo de partículas (animación 3D)
   ============================================================ */
.thesis__eye-wrap {
  position: relative;
  width: min(460px, 100%);
  aspect-ratio: 1;
  margin-left: auto;
  justify-self: center;
}
.thesis__eye {
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 1200ms ease;
}
.thesis__eye.ready { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .thesis__eye { display: none; }
}
@media (max-width: 880px) {
  .thesis__grid { grid-template-columns: 1fr; gap: 48px; }
  .thesis__eye-wrap { width: min(320px, 70vw); margin: 0 auto; }
}

/* ============================================================
   SECTION 3 — DIAGNOSIS
   ============================================================ */
.diagnosis { padding: 16vh 0; position: relative; overflow: hidden; }
/* Atmósfera: silueta solitaria bajo el haz de luz (board 04), ghost a la derecha.
   Refuerza el aislamiento del copy sin robar legibilidad al titular (izquierda). */
.diagnosis::before {
  content: "";
  position: absolute; top: 0; right: 0; bottom: 0; width: 64%;
  z-index: 0; pointer-events: none;
  background:
    image-set(
      url("assets/tex/diag-plate.webp?v=3") type("image/webp"),
      url("assets/tex/diag-plate.jpg?v=3") type("image/jpeg"))
    right center / cover no-repeat;
  opacity: 0.40;
  transition: opacity 0.9s ease;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 48%, #000 100%);
          mask-image: linear-gradient(90deg, transparent 0%, #000 48%, #000 100%);
}
/* PLATE ANIMADO — el video del diagnóstico, misma geometría y máscara que la
   imagen. Entra con crossfade cuando puede reproducir (clase .is-playing por JS);
   en ese momento la imagen ::before se desvanece para que no se sumen (doble
   exposición). Mismo encuadre: anclado a la derecha, cubre el 64%. */
.diagnosis__video {
  position: absolute; top: 0; right: 0; bottom: 0; width: 64%; height: 100%;
  object-fit: cover; object-position: right center;
  z-index: 0; pointer-events: none;
  opacity: 0; transition: opacity 1.1s ease;
  /* segundo plano: blur sutil (esconde cualquier salto del slow-mo y da profundidad),
     desaturado y bajado de luz → no compite con el titular, deja respirar el grano. */
  transform: scale(1.05);
  filter: blur(1.4px) saturate(0.82) brightness(0.82) contrast(1.06);
  will-change: opacity;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 48%, #000 100%);
          mask-image: linear-gradient(90deg, transparent 0%, #000 48%, #000 100%);
}
.diagnosis__video.is-playing { opacity: 0.32; }
.diagnosis.is-playing::before { opacity: 0; }
/* el plate vertical de móvil no existe en escritorio */
.diagnosis__video--m { display: none; }
/* el copy condensado vive sólo en móvil */
.diagnosis .is-mobile { display: none; }

/* GRADE CINEMATOGRÁFICO — densidad analógica sobre el plate: gate/scanlines +
   duotono tungsteno-acero + viñeta + grano denso. Misma técnica del HERO (grano
   SVG fractalNoise), sin imágenes pesadas → no penaliza la carga. Pinta encima
   del video (mismo z-index, posterior en el DOM) y bajo el texto (.wrap, z-index 1). */
.diagnosis__grade {
  position: absolute; top: 0; right: 0; bottom: 0; width: 64%; height: 100%;
  z-index: 0; pointer-events: none;
  opacity: 0; transition: opacity 1.3s ease;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 48%, #000 100%);
          mask-image: linear-gradient(90deg, transparent 0%, #000 48%, #000 100%);
  background:
    repeating-linear-gradient(0deg, rgba(0,0,0,0.20) 0 1px, transparent 1px 3px),
    linear-gradient(180deg, rgba(122,142,166,0.20) 0%, rgba(10,11,13,0) 40%, rgba(201,144,85,0.17) 100%);
  mix-blend-mode: soft-light;
}
/* grano denso, animado como el gate de un proyector */
.diagnosis__grade::before {
  content: ""; position: absolute; inset: -50%; width: 200%; height: 200%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 170px 170px;
  mix-blend-mode: overlay; opacity: 0.5;
  animation: grainJitter 0.7s steps(6) infinite;
  will-change: transform;
}
/* viñeta local que empuja los bordes al carbón → más ritual, más al fondo */
.diagnosis__grade::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(140% 95% at 72% 48%, rgba(10,11,13,0) 40%, rgba(10,11,13,0.78) 100%);
}
.diagnosis.is-playing .diagnosis__grade { opacity: 0.92; }
.diagnosis > .wrap { position: relative; z-index: 1; }
.diagnosis .leader { margin-bottom: 7vh; }
@media (max-width: 720px) {
  /* MÓVIL — la vista que ve la mayoría. El protagonista (único hombre dado vuelta,
     primer plano frente a la multitud de espaldas) vive ANIMADO en un loop vertical
     9:16 recortado del mismo material. Composición en TRES franjas para que el texto
     no le tape la mirada:
       · arriba  (headroom oscuro + muro)  → titular
       · centro  (su rostro / expresión)   → LIBRE de texto
       · abajo   (traje + multitud + scrim)→ cuerpo y cierre                       */
  /* escenario de una sola pantalla: el video LLENA la sección (nunca se ve cortado)
     y el texto se reparte con flex — titular arriba, pie abajo, rostro libre al centro */
  .diagnosis { min-height: 100svh; padding: 0; display: flex; }
  /* fuera el plate de escritorio, su grade y la imagen estática ::before */
  .diagnosis::before { display: none; }
  .diagnosis > .diagnosis__video:not(.diagnosis__video--m),
  .diagnosis__grade { display: none; }
  /* plate vertical: fondo a sangre completa de la sección, rostro al centro */
  .diagnosis__video--m {
    display: block;
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover; object-position: center top;
    z-index: 0; pointer-events: none;
    opacity: 0.82;
    filter: saturate(0.9) brightness(0.92) contrast(1.04);
    transform: none;
    /* funde el borde superior y el pie con el carbón; el rostro (centro) queda intacto */
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 7%, #000 80%, transparent 99%);
            mask-image: linear-gradient(180deg, transparent 0%, #000 7%, #000 80%, transparent 99%);
  }
  .diagnosis__video--m.is-playing { opacity: 0.82; }
  /* scrim inferior: sube del carbón para legibilidad del pie sobre el traje,
     sin invadir la franja del rostro. */
  .diagnosis::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; top: 56%;
    z-index: 0; pointer-events: none;
    background: linear-gradient(180deg, rgba(10,11,13,0) 0%, rgba(10,11,13,0.82) 46%, rgba(10,11,13,0.97) 100%);
  }
  .diagnosis > .wrap {
    min-height: 100svh; box-sizing: border-box;
    padding-block: 7vh 9vh;
    display: flex; flex-direction: column;
  }
  /* en móvil mandan los bloques condensados; se oculta el copy largo de escritorio */
  .diagnosis .is-desktop { display: none; }
  .diagnosis .is-mobile { display: block; }
  /* TITULAR móvil: franja superior, sobre el headroom oscuro. Idea-madre en grande
     + sub-línea en tono apagado. Sombra para legibilidad sobre el video. */
  .diagnosis__head--m {
    position: relative;
    font-size: clamp(1.95rem, 7.4vw, 2.7rem);
    line-height: 1.1;
    letter-spacing: -0.015em;
    text-shadow: 0 2px 22px rgba(10,11,13,0.92), 0 0 3px rgba(10,11,13,0.96);
  }
  .diagnosis__head-sub {
    display: block;
    margin-top: 1.7vh;
    font-size: 0.5em;
    line-height: 1.25;
    font-weight: 400;
    letter-spacing: 0;
    color: var(--bone-70);
  }
  /* PIE móvil: mecanismo + cierre. margin-top:auto lo empuja al fondo del escenario
     dejando LIBRE la franja central del rostro — sin medidas fijas frágiles. */
  .diagnosis__mfoot { position: relative; margin-top: auto; }
  .diagnosis__mech {
    font-size: 1.02rem;
    line-height: 1.42;
    max-width: 28ch;
    margin-bottom: 2.6vh;
    color: var(--bone-70);
    text-shadow: 0 2px 16px rgba(10,11,13,0.96), 0 0 3px rgba(10,11,13,0.92);
  }
  .diagnosis__turn--m {
    margin-top: 0;
    font-size: clamp(1.55rem, 6.8vw, 2.1rem);
    text-shadow: 0 2px 18px rgba(10,11,13,0.95);
  }
}
@media (prefers-reduced-motion: reduce) {
  /* accesibilidad: sin video animado. En escritorio queda la imagen estática;
     en móvil queda el póster del plate vertical (su primer frame, sin movimiento). */
  .diagnosis__video:not(.diagnosis__video--m), .diagnosis__grade { display: none; }
  .diagnosis.is-playing::before { opacity: 0.40; }
  .diagnosis__grade::before { animation: none; }
}
.diagnosis__head {
  font-size: clamp(1.8rem, 4.5vw, 4.2rem);
  color: var(--bone);
  text-align: left;
}
.diagnosis__body {
  margin-top: 8vh;
  max-width: 580px;
  font-size: 1.1rem;
  color: var(--bone-70);
}
.diagnosis__body p { margin-bottom: 1.4em; }
.diagnosis__turn {
  margin-top: 4vh;
  font-size: clamp(1.4rem, 2.4vw, 2.4rem);
  color: var(--bone);
}
.diagnosis__turn u {
  text-decoration: none;
  border-bottom: 1px solid var(--lime-live);
  padding-bottom: 2px;
}

/* ============================================================
   SECTION 5 — STACK IS PART OF THE STUDIO
   ============================================================ */
.stack {
  padding: 20vh 0;
  text-align: center;
}
.stack__head {
  font-size: clamp(1.8rem, 4.5vw, 4.2rem);
  color: var(--bone);
}
.stack__body {
  margin: 8vh auto 0;
  max-width: 680px;
  font-size: 1.15rem;
  color: var(--bone-80);
}
.stack__body p { margin-bottom: 1.4em; }
.stack__tag {
  margin-top: 6vh;
  font-size: 0.9rem;
  color: var(--lime-live);
}

/* ============================================================
   SECTION 6 — REEL (selected work / proof)
   ============================================================ */
.reel { padding: 18vh 0; background: var(--carbon-2); }
.reel__head { text-align: center; font-size: clamp(1.8rem, 4.5vw, 4.2rem); color: var(--bone); }
.reel__intro {
  text-align: center;
  margin: 4vh auto 9vh;
  max-width: 46ch;
  font-size: clamp(1rem, 1.4vw, 1.15rem);
  font-weight: 300;
  color: var(--bone-70);
}
.reel__grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: clamp(10px, 1.2vw, 18px);
}
.frame {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: var(--black);
  border: 1px solid var(--hairline);
}
.frame img,
.frame video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1.02);
  filter: saturate(0.9) contrast(1.02);
  transition: transform 900ms cubic-bezier(.2,.7,.2,1), filter 600ms ease;
}
.frame:hover img,
.frame:hover video { transform: scale(1.06); filter: saturate(1) contrast(1.05); }
.frame__media { background: var(--black); }
.frame__cap {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  display: flex;
  align-items: baseline;
  gap: 0.8em;
  padding: 1.05em 1.2em;
  font-size: 0.72rem;
  letter-spacing: 0.02em;
  color: var(--bone-80);
  background: linear-gradient(to top, rgba(10,11,13,0.88) 0%, rgba(10,11,13,0.35) 60%, transparent 100%);
}
.frame__cap span { color: var(--lime-live); }
/* film-contact-sheet layout — varied spans, not cookie-cutter */
.reel__grid .frame:nth-child(1) { grid-column: span 4; }
.reel__grid .frame:nth-child(2) { grid-column: span 2; }
.reel__grid .frame:nth-child(3) { grid-column: span 2; }
.reel__grid .frame:nth-child(4) { grid-column: span 2; }
.reel__grid .frame:nth-child(5) { grid-column: span 2; }
.reel__grid .frame:nth-child(6) { grid-column: span 6; aspect-ratio: 21 / 9; }
/* graceful empty state while/if an asset is missing */
.frame--empty {
  background:
    repeating-linear-gradient(135deg, rgba(244,246,248,0.015) 0 2px, transparent 2px 9px),
    var(--black);
}
.frame--empty img { display: none; }
.reel__note { text-align: center; margin-top: 6vh; font-size: 0.9rem; color: var(--lime-live); }
/* reveal stagger across the contact sheet */
.reel__grid .frame:nth-child(2) { --rd: 90ms; }
.reel__grid .frame:nth-child(3) { --rd: 150ms; }
.reel__grid .frame:nth-child(4) { --rd: 210ms; }
.reel__grid .frame:nth-child(5) { --rd: 270ms; }
.reel__grid .frame:nth-child(6) { --rd: 330ms; }
@media (max-width: 860px) {
  .reel__grid { grid-template-columns: 1fr 1fr; }
  .reel__grid .frame { grid-column: span 1; aspect-ratio: 16 / 9; }
  .reel__grid .frame:nth-child(1) { grid-column: span 2; }
  .reel__grid .frame:nth-child(6) { grid-column: span 2; aspect-ratio: 16 / 9; }
}
@media (max-width: 520px) {
  .reel__grid { grid-template-columns: 1fr; }
  .reel__grid .frame { grid-column: span 1 !important; aspect-ratio: 16 / 9 !important; }
}

/* ============================================================
   SECTION 7 — VERSUS / COMPARATIVA
   ============================================================ */
.versus { padding: 17vh 0; background: var(--carbon); }
.versus__head {
  text-align: center;
  font-size: clamp(1.8rem, 4.5vw, 4.2rem);
  line-height: 1.04;
  letter-spacing: -0.02em;
  color: var(--bone);
}
.versus__intro {
  text-align: center;
  margin: 3.5vh auto 8vh;
  max-width: 44ch;
  font-weight: 300;
  font-size: clamp(1rem, 1.4vw, 1.2rem);
  line-height: 1.6;
  color: var(--bone-70);
}

.versus__table {
  display: grid;
  grid-template-columns: minmax(120px, 1.05fr) 1fr 1fr;
  border: 1px solid var(--hairline);
  border-radius: 4px;
  overflow: hidden;
  max-width: 1040px;
  margin: 0 auto;
}
/* let header + rows drop their cells straight into the table grid */
.versus__heads, .vrow { display: contents; }

/* header row */
.versus__corner { border-bottom: 1px solid var(--hairline); }
.versus__th {
  padding: 1.5em 1.4em;
  border-bottom: 1px solid var(--hairline);
  font-family: var(--display);
  font-size: clamp(0.82rem, 1.1vw, 1rem);
  font-weight: 600;
  letter-spacing: 0.01em;
}
.versus__th--old { color: var(--bone-50); }
.versus__th--cap {
  color: var(--lime-live);
  background: rgba(242, 162, 60, 0.05);
  border-left: 1px solid rgba(242, 162, 60, 0.22);
  display: flex;
  align-items: center;
  gap: 0.6em;
}
.versus__capdot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--lime-live);
  box-shadow: 0 0 12px rgba(242, 162, 60, 0.7);
  flex: none;
}

/* body cells */
.vrow__label,
.vrow__old,
.vrow__cap {
  padding: 1.15em 1.4em;
  border-bottom: 1px solid var(--hairline);
  font-size: clamp(0.82rem, 1.05vw, 0.96rem);
  line-height: 1.45;
  display: flex;
  align-items: center;
}
.versus__table .vrow:last-child .vrow__label,
.versus__table .vrow:last-child .vrow__old,
.versus__table .vrow:last-child .vrow__cap { border-bottom: 0; }

.vrow__label {
  font-family: var(--mono);
  font-size: 0.74rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--bone-60);
}
.vrow__old { color: var(--bone-50); }
.vrow__old::before {
  content: "—";
  margin-right: 0.7em;
  color: var(--bone-50);
  opacity: 0.6;
  flex: none;
}
.vrow__cap {
  color: var(--bone-85);
  background: rgba(242, 162, 60, 0.045);
  border-left: 1px solid rgba(242, 162, 60, 0.22);
  font-weight: 400;
}
.vrow__cap::before {
  content: "";
  width: 7px; height: 7px; border-radius: 50%;
  margin-right: 0.75em;
  background: var(--lime-live);
  box-shadow: 0 0 8px rgba(242, 162, 60, 0.55);
  flex: none;
}
.vrow:hover .vrow__cap { background: rgba(242, 162, 60, 0.085); }
.vrow:hover .vrow__label,
.vrow:hover .vrow__old { background: rgba(244, 246, 248, 0.018); }

.versus__note {
  text-align: center;
  margin-top: 6vh;
  font-size: 0.9rem;
  color: var(--bone-60);
}

/* reveal stagger across rows */
.versus__table .vrow:nth-child(2) { --rd: 60ms; }
.versus__table .vrow:nth-child(3) { --rd: 110ms; }
.versus__table .vrow:nth-child(4) { --rd: 160ms; }
.versus__table .vrow:nth-child(5) { --rd: 210ms; }

@media (max-width: 680px) {
  .versus__table { display: block; border-radius: 6px; }
  .versus__heads { display: none; }
  .vrow {
    display: block;
    border-bottom: 1px solid var(--hairline);
    padding: 0.4em 0 0.9em;
  }
  .versus__table .vrow:last-child { border-bottom: 0; }
  .vrow__label {
    border-bottom: 0;
    padding: 1.1em 1.3em 0.5em;
    color: var(--bone-70);
  }
  .vrow__old, .vrow__cap {
    border-bottom: 0;
    border-left: 0;
    background: transparent;
    padding: 0.45em 1.3em;
    align-items: flex-start;
  }
  .vrow__cap { color: var(--bone-85); }
  .vrow__old::before {
    content: "Tradicional";
    font-family: var(--mono);
    font-size: 0.62rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--bone-50);
    width: 90px; flex: none; margin-right: 0.4em;
    opacity: 1;
    align-self: center;
  }
  .vrow__cap::before {
    content: "Captium";
    width: 90px; height: auto; border-radius: 0;
    background: none; box-shadow: none;
    font-family: var(--mono);
    font-size: 0.62rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--lime-live);
    flex: none; margin-right: 0.4em;
    align-self: center;
  }
}

/* ============================================================
   SECTION 8 — PROOF / PRUEBA SOCIAL
   ============================================================ */
.proof { padding: 17vh 0; background: var(--carbon-2); }
.proof__head {
  text-align: center;
  font-size: clamp(1.8rem, 4.5vw, 4.2rem);
  line-height: 1.04;
  letter-spacing: -0.02em;
  color: var(--bone);
  margin-bottom: 1.4em;
}
.proof__intro {
  text-align: center;
  max-width: 680px;
  margin: 0 auto 9vh;
  font-size: 1.05rem;
  line-height: 1.7;
  font-weight: 300;
  color: var(--bone-70);
}

.proof__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 1.8vw, 28px);
  max-width: 1100px;
  margin: 0 auto;
}
.quote {
  position: relative;
  padding: clamp(28px, 2.6vw, 44px) clamp(24px, 2vw, 36px) clamp(26px, 2.2vw, 38px);
  border: 1px solid var(--hairline);
  border-radius: 4px;
  background: rgba(244, 246, 248, 0.012);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.quote__mark {
  font-family: var(--serif);
  font-size: 5rem;
  line-height: 0.7;
  color: var(--lime-live);
  opacity: 0.5;
  margin-bottom: 0.1em;
  height: 0.5em;
}
.quote__text {
  font-family: var(--serif);
  font-weight: 300;
  font-style: italic;
  font-size: clamp(1.02rem, 1.35vw, 1.22rem);
  line-height: 1.5;
  letter-spacing: -0.01em;
  color: var(--bone-85);
  margin: 0 0 auto;
}
.quote__by {
  display: flex;
  flex-direction: column;
  gap: 0.35em;
  margin-top: 2.4em;
  padding-top: 1.5em;
  border-top: 1px solid var(--hairline);
}
.quote__name { font-size: 0.95rem; color: var(--bone); letter-spacing: -0.01em; }
.quote__role { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--bone-50); }

/* metrics band */
.metrics {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(16px, 2vw, 32px);
  max-width: 1100px;
  margin: clamp(48px, 7vh, 96px) auto 0;
  padding-top: clamp(40px, 6vh, 80px);
  border-top: 1px solid var(--hairline);
}
.metric { text-align: center; }
.metric__num {
  font-size: clamp(2.6rem, 5.5vw, 4.6rem);
  line-height: 1;
  color: var(--lime-live);
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
}
.metric__label {
  margin-top: 1.1em;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--bone-60);
  line-height: 1.4;
}

@media (max-width: 860px) {
  .proof__grid { grid-template-columns: 1fr; max-width: 560px; }
  .metrics { grid-template-columns: repeat(2, 1fr); gap: 7vh 4vw; }
}
@media (max-width: 460px) {
  .metrics { grid-template-columns: 1fr 1fr; }
}

/* ============================================================
   SECTION 9 — PLANS
   ============================================================ */
.plans { padding: 0 0 18vh; }
.plans__rule { height: 1px; width: 100%; background: var(--hairline); margin-bottom: 14vh; }
.plans__head { text-align: center; margin-bottom: 12vh; }
.plans__head h2 { font-size: clamp(1.8rem, 4vw, 3.8rem); color: var(--bone); }
.plans__head p { margin-top: 2.4vh; font-size: 1.4rem; color: var(--bone-70); font-weight: 300; }

.plans__grid {
  display: grid;
  grid-template-columns: 1fr 1.12fr 1fr;
  align-items: start;
  gap: clamp(16px, 2vw, 28px);
}
.plan {
  background: var(--carbon);
  border: 1px solid var(--hairline);
  padding: clamp(28px, 3vw, 44px);
  display: flex;
  flex-direction: column;
  height: 100%;
}
.plan--hero {
  background: var(--carbon-2);
  border: 1px solid var(--lime-live);
  padding: clamp(34px, 3.8vw, 56px);
  transform: scale(1.05);
  position: relative;
  z-index: 2;
}
.plan__badge {
  font-family: var(--mono);
  text-transform: uppercase;
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  color: var(--bone-60);
  margin-bottom: 1.6em;
}
.plan__name {
  font-family: var(--display);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  font-size: clamp(1.3rem, 2vw, 2rem);
  color: var(--bone);
}
.plan__tag {
  margin-top: 0.8em;
  font-style: italic;
  font-weight: 300;
  font-size: 1rem;
  color: var(--bone-70);
  max-width: 240px;
}
.plan__price {
  margin-top: 1.6em;
  font-family: var(--display);
  font-weight: 900;
  letter-spacing: -0.04em;
  line-height: 0.95;
  font-size: clamp(2.6rem, 5vw, 4.6rem);
  color: var(--bone);
}
.plan__per { font-family: var(--mono); font-size: 0.8rem; color: var(--bone-60); margin-top: 0.4em; }
.plan__compare { margin-top: 1.2em; font-size: 0.85rem; color: var(--bone-60); }
.plan__sep { height: 1px; width: 30%; background: var(--bone-50); margin: 2em 0; opacity: 0.4; }

.plan__features { list-style: none; display: flex; flex-direction: column; gap: 1.1em; margin-bottom: 2.4em; flex: 1; }
.plan__features li {
  display: grid;
  grid-template-columns: 1.2em 1fr;
  gap: 0.7em;
  font-size: 0.92rem;
  color: var(--bone-75);
  line-height: 1.5;
}
.plan__features li::before {
  content: "✓";
  color: var(--bone-70);
  font-size: 0.85em;
  line-height: 1.7;
}
.plan__features li.off { color: var(--bone-50); }
.plan__features li.off::before { content: "—"; color: var(--bone-50); }
.plan__cta { margin-top: auto; }
.plan__cta .btn { width: 100%; }

@media (max-width: 920px) {
  .plans__grid { grid-template-columns: 1fr; gap: 28px; max-width: 460px; margin-inline: auto; }
  .plan--hero { transform: scale(1.03); }
}

/* Enterprise */
.enterprise { text-align: center; margin-top: 14vh; }
.enterprise__line { width: 60px; height: 1px; background: var(--lime-live); margin: 0 auto 4vh; }
.enterprise h3 { font-size: clamp(1.4rem, 2.5vw, 2.6rem); color: var(--bone); }
.enterprise__price { margin-top: 2vh; font-size: 1.1rem; color: var(--bone-70); font-weight: 300; }
.enterprise__copy { margin: 3vh auto 0; max-width: 560px; font-size: 1rem; color: var(--bone-75); }
.enterprise__copy p { margin-bottom: 1.2em; }
.enterprise .btn { margin-top: 4vh; }

/* ============================================================
   SECTION 7 — DIRECTOR
   ============================================================ */
.director {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  min-height: 92vh;
}
.director__photo {
  position: relative;
  background: var(--black);
  overflow: hidden;
}
.director__photo image-slot { width: 100%; height: 100%; display: block; }
.director__img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; display: block; }
.director__placeholder {
  position: absolute;
  inset: 0;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.8em;
  text-align: center;
  padding: 8vh 2rem;
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--bone-50);
  background:
    repeating-linear-gradient(135deg, rgba(244,246,248,0.015) 0 2px, transparent 2px 9px),
    var(--black);
}
.director__placeholder span { color: var(--bone-60); letter-spacing: 0.08em; font-size: 0.72rem; }
.director__grain {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: var(--grain-opacity);
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.director__tungsten {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(120% 80% at 75% 35%, rgba(201,144,85,0.14), transparent 55%);
  mix-blend-mode: screen;
}
.director__copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 10vh clamp(28px, 5vw, 84px);
}
.director__kicker { font-family: var(--mono); text-transform: uppercase; font-size: 0.75rem; letter-spacing: 0.18em; color: var(--bone-60); margin-bottom: 1.6em; }
.director__name { font-size: clamp(2.2rem, 4.5vw, 4.4rem); color: var(--bone); margin-bottom: 1em; }
.director__body { max-width: 440px; font-size: 1.1rem; color: var(--bone-85); }
.director__body p { margin-bottom: 1.4em; }
.director__quote {
  margin-top: 4vh;
  font-family: var(--display);
  font-weight: 900;
  font-style: italic;
  font-size: clamp(1.1rem, 1.5vw, 1.6rem);
  color: var(--lime-live);
  letter-spacing: -0.02em;
}
@media (max-width: 860px) {
  .director { grid-template-columns: 1fr; min-height: 0; }
  .director__photo { aspect-ratio: 4/5; }
  .director__copy { padding: 12vh clamp(24px, 6vw, 48px); }
}

/* ============================================================
   SECTION 8 — PROCESS
   ============================================================ */
.process { padding: 18vh 0; }
.process__head { text-align: center; font-size: clamp(1.8rem, 4vw, 3.8rem); color: var(--bone); margin-bottom: 12vh; }
.process__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(28px, 4vw, 64px); }
.moment__num { font-family: var(--mono); font-size: clamp(2rem, 3vw, 3rem); color: var(--bone-60); line-height: 1; margin-bottom: 0.8em; }
.moment__title { font-family: var(--display); font-weight: 900; text-transform: uppercase; letter-spacing: -0.01em; font-size: 1.3rem; color: var(--bone); margin-bottom: 1em; }
.moment__copy { font-size: 0.95rem; color: var(--bone-70); max-width: 220px; }
@media (max-width: 860px) {
  .process__grid { grid-template-columns: 1fr 1fr; gap: 9vh 6vw; }
}
@media (max-width: 520px) {
  .process__grid { grid-template-columns: 1fr; }
}

/* ============================================================
   SECTION 10 — FAQ (objection handling, native accordion)
   ============================================================ */
.wrap--narrow { max-width: 820px; }
.faq { padding: 16vh 0; background: var(--carbon-2); }
.faq__head { text-align: center; font-size: clamp(1.7rem, 4vw, 3.4rem); color: var(--bone); margin-bottom: 9vh; }
.faq__list { border-top: 1px solid var(--hairline); }
.faq__item { border-bottom: 1px solid var(--hairline); }
.faq__q {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5em;
  padding: 1.5em 0;
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: -0.02em;
  font-size: clamp(1.05rem, 1.8vw, 1.4rem);
  color: var(--bone);
  transition: color 200ms ease;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q:hover { color: var(--lime-live); }
.faq__plus { position: relative; flex: 0 0 18px; width: 18px; height: 18px; }
.faq__plus::before, .faq__plus::after {
  content: ""; position: absolute; background: var(--lime-live);
  transition: transform 280ms cubic-bezier(.2,.7,.2,1), opacity 200ms ease;
}
.faq__plus::before { top: 50%; left: 0; width: 18px; height: 1.5px; transform: translateY(-50%); }
.faq__plus::after  { left: 50%; top: 0; width: 1.5px; height: 18px; transform: translateX(-50%); }
.faq__item[open] .faq__plus::after { transform: translateX(-50%) scaleY(0); opacity: 0; }
.faq__a {
  overflow: hidden;
  color: var(--bone-75);
  font-size: 1.02rem;
  line-height: 1.65;
  max-width: 64ch;
}
.faq__a p { padding-bottom: 1.8em; }
.faq__item[open] .faq__a { animation: faqReveal 420ms ease both; }
@keyframes faqReveal { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) {
  .faq__item[open] .faq__a { animation: none; }
  .faq__plus::before, .faq__plus::after { transition: none; }
}

/* ============================================================
   SECTION 11 — CLOSE + FOOTER
   ============================================================ */
.close { text-align: center; padding: 18vh 0 15vh; }
.close__head { font-size: clamp(2.4rem, 8vw, 8rem); color: var(--bone); }
.close__sub {
  margin: 4vh auto 0;
  max-width: 46ch;
  font-weight: 300;
  font-size: clamp(1rem, 1.4vw, 1.2rem);
  line-height: 1.6;
  color: var(--bone-70);
}
.close__cta {
  margin-top: 8vh;
  display: flex;
  gap: 16px;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}
.close__alt { min-height: 64px; }
.close__email { margin-top: 4vh; font-size: 0.95rem; color: var(--bone-60); }
.close__email a { color: var(--bone-60); text-decoration: none; border-bottom: 1px solid var(--hairline); }
.close__email a:hover { color: var(--lime-live); border-color: var(--lime-live); }
@media (max-width: 480px) {
  .close__cta { flex-direction: column; gap: 12px; }
  .close__cta .btn { width: 100%; max-width: 340px; }
}

@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.02); }
}
.pulse-on { animation: pulse 4s ease-in-out infinite; }

.footer { padding: 7vh 0 6vh; }
.footer__rule { width: 20%; max-width: 280px; height: 1px; background: var(--lime-live); margin-bottom: 5vh; }
.footer__row { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.footer__brand { display: flex; align-items: center; }
.footer__logo { height: 26px; width: auto; display: block; }
.footer__center { font-family: var(--mono); font-size: 0.75rem; color: var(--bone-50); }
.footer__links { display: flex; gap: 18px; }
.footer__links a { font-size: 0.9rem; color: var(--bone-50); text-decoration: none; }
.footer__links a:hover { color: var(--bone); }
@media (max-width: 640px) {
  .footer__row { flex-direction: column; align-items: flex-start; gap: 18px; }
}

/* ============================================================
   ART DIRECTION LAYER — added on top of the base system.
   Everything here stays within the rules: no extra lime,
   no decorative gradients, motion reserved (fades/hover only).
   ============================================================ */

/* ---- Reveal: support choreographed (staggered) entrance ---- */
.reveal { transition: opacity 700ms ease-out; transition-delay: var(--rd, 0ms); }

/* Grids enter together, so stagger their children on opacity only */
.plans__grid .plan:nth-child(2) { --rd: 110ms; }
.plans__grid .plan:nth-child(3) { --rd: 220ms; }
.process__grid .moment:nth-child(2) { --rd: 90ms; }
.process__grid .moment:nth-child(3) { --rd: 180ms; }
.process__grid .moment:nth-child(4) { --rd: 270ms; }

/* ---- Refined body typography ---- */
.diagnosis__body p, .stack__body p, .moment__copy,
.director__body p, .enterprise__copy p, .plan__tag, .plan__features li {
  text-wrap: pretty;
}
.plan__price, .plan__compare { font-variant-numeric: tabular-nums; }

/* ---- Accessible focus state (interaction, not decoration) ---- */
a:focus-visible, button:focus-visible, .btn:focus-visible, image-slot:focus-visible {
  outline: 2px solid var(--lime-live);
  outline-offset: 4px;
}
a:focus:not(:focus-visible) { outline: none; }

/* ---- CTA arrow: nudges on hover (editorial detail) ---- */
.btn::after {
  content: "→";
  font-family: var(--mono);
  font-size: 0.92em;
  transform: translateX(0);
  transition: transform 220ms ease;
}
.btn--mono::after { font-size: 0.8em; }
.btn:hover::after { transform: translateX(5px); }

/* ---- Plan hover: restrained border/tone shift, no transform ---- */
.plan { transition: border-color 260ms ease, background-color 260ms ease; }
.plan:not(.plan--hero):hover { border-color: rgba(244,246,248,0.22); background: var(--carbon-2); }
.plan--hero { transition: box-shadow 260ms ease; }

/* ============================================================
   SCENE SLATE — every section opens like a film slate.
   Bone, tiny, mono. The single lime "film-leader" stays in
   the diagnosis only (its section accent).
   ============================================================ */
.scene { display: flex; align-items: center; gap: 14px; margin-bottom: clamp(40px, 7vh, 88px); }
.scene--center { justify-content: center; text-align: center; }
.scene__line { width: 44px; height: 1px; background: var(--bone-50); opacity: 0.5; }
.scene--lime .scene__line { width: 35%; max-width: 420px; background: var(--lime-live); opacity: 1; }
.scene__id { font-size: 0.72rem; color: var(--bone-60); letter-spacing: 0.16em; }
.scene__txt { font-size: 0.72rem; color: var(--bone-50); text-transform: uppercase; letter-spacing: 0.24em; }

/* ============================================================
   CINEMATIC ATMOSPHERE — living film grain (double-layer,
   scroll-reactive) + global dust field + lens vignette.
   All CSS / 1 light canvas. No image payload.
   ============================================================ */

/* --- GLOBAL DUST — suspended motes drifting over the whole page.
   Painted by a lightweight 2D canvas in main.js (parallax on scroll). --- */
#dust {
  position: fixed;
  inset: 0;
  z-index: 36;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.4s ease;
}
#dust.ready { opacity: 1; }

/* --- LENS VIGNETTE — subtle radial falloff, the signature of a
   cinema lens. Conscious-imperceptible, subconscious-strong. --- */
#vignette {
  position: fixed;
  inset: 0;
  z-index: 38;
  pointer-events: none;
  background:
    radial-gradient(135% 115% at 50% 42%, transparent 56%, rgba(0,0,0,0.30) 100%),
    radial-gradient(100% 100% at 50% 100%, rgba(0,0,0,0.16) 0%, transparent 45%);
  mix-blend-mode: multiply;
}

/* --- INCEPTION GRADE — the Nolan duotone: cool steel ceiling, warm
   tungsten floor. Pushes the page from "dark site" to "graded film".
   Carbon still dominates; this only tints the extremes. No lime. --- */
#cinegrade {
  position: fixed;
  inset: 0;
  z-index: 34;
  pointer-events: none;
  /* screen ilumina sobre el carbón (soft-light era invisible en near-black).
     Duotono Nolan DIRECCIONAL (refs 07·08·10): una FUENTE de tungsteno cálida
     entra desde abajo-izquierda como key, un relleno de acero frío cae del
     techo-derecha. Más cercano a "película graduada" que un degradé plano.
     El carbón sigue dominando; esto solo tiñe los extremos. Sin lima. */
  background:
    /* key cálido — pozo de tungsteno que sube desde la fuente (abajo-izq) */
    radial-gradient(125% 95% at 16% 118%,
      rgba(208, 138, 64, 0.20) 0%,
      rgba(201, 144, 85, 0.07) 34%,
      transparent 60%),
    /* fill frío — lavado de acero desde el techo-derecha */
    radial-gradient(115% 85% at 90% -14%,
      rgba(86, 122, 168, 0.20) 0%,
      rgba(86, 122, 168, 0.055) 38%,
      transparent 64%),
    /* base vertical: techo acero / suelo tungsteno, centro limpio */
    linear-gradient(
      180deg,
      rgba(86, 122, 168, 0.15) 0%,
      rgba(86, 122, 168, 0.05) 19%,
      transparent 41%,
      transparent 59%,
      rgba(201, 144, 85, 0.11) 81%,
      rgba(208, 138, 64, 0.24) 100%
    );
  mix-blend-mode: screen;
  opacity: 1;
}
@media (prefers-reduced-motion: reduce) { #cinegrade { opacity: 0.85; } }

/* --- EL PLIEGUE — transición de escena entre Diagnóstico y Método.
   TÉCNICA ESTÁNDAR "perspective grid" (synthwave/Tron): dos planos en
   perspectiva 3D real del navegador, cada uno con una grilla repetida
   (repeating-linear-gradient). El movimiento se logra animando
   background-position EXACTAMENTE una celda → loop infinito perfecto, a
   prueba de redondeo (lo garantiza el motor de repetición, no cálculos).
   El suelo (tungsteno) y el cielo plegado (acero) convergen en el horizonte
   central, donde corre la línea-pliegue en lima. Las filas viajan hacia el
   centro: sensación de movimiento hacia el punto de fuga infinito. --- */
.fold {
  position: relative;
  padding: clamp(16px, 3.5vh, 40px) 0;
  overflow: hidden;
}
/* PUENTE entre secciones — viewport angosto que encuadra el lienzo WebGL del
   túnel hacia el punto de fuga. Todo el trabajo pesado (antialias sin moiré,
   grano de película, viñeta, halo lima, tone-map filmic, respiración hipnótica)
   ocurre dentro del shader (fold-shader.js). Aquí solo fundimos sus 4 bordes con
   el carbón para que sea un puente sin marco, no una sección en sí misma. */
.fold__viewport {
  position: relative;
  width: 100%;
  height: clamp(132px, 22vh, 196px);
  overflow: hidden;
  -webkit-mask:
    linear-gradient(to right, transparent, #000 12%, #000 88%, transparent),
    linear-gradient(to bottom, transparent, #000 18%, #000 82%, transparent);
  -webkit-mask-composite: source-in;
          mask:
    linear-gradient(to right, transparent, #000 12%, #000 88%, transparent),
    linear-gradient(to bottom, transparent, #000 18%, #000 82%, transparent);
          mask-composite: intersect;
}
/* lienzo sobredimensionado (top -8% / height 116%) para que el parallax del
   scroll no descubra bordes; el viewport recorta. */
.fold__canvas {
  position: absolute;
  left: 0;
  top: -8%;
  width: 100%;
  height: 116%;
  display: block;
}
/* Fallback sin WebGL2: vacío carbón con un tenue halo lima — se ve intencional. */
.fold--nogl .fold__viewport {
  background:
    radial-gradient(42% 62% at 50% 50%, rgba(242, 162, 60, 0.10), transparent 70%),
    #0A0B0D;
}
/* el texto vive bajo el punto de fuga, fundido con el vacío. */
.fold__cap {
  position: relative;
  margin: clamp(8px, 2vh, 18px) auto 0;
  max-width: 90%;
  font-size: clamp(9px, 0.92vw, 11px);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(244, 246, 248, 0.5);
  text-align: center;
  text-shadow: 0 2px 18px rgba(10, 11, 13, 0.96);
  z-index: 5;
}
@media (max-width: 720px) {
  /* el pliegue sube y casi se junta con el Diagnóstico (transición continua, sin hueco);
     más alto para que el túnel respire y lea como puente, no como sección aparte. */
  .fold { margin-top: -5vh; padding-top: 0; padding-bottom: clamp(12px, 2.5vh, 28px); }
  .fold__viewport { height: clamp(150px, 27vh, 220px); }
  .fold__cap { letter-spacing: 0.22em; }
}

/* --- LIVING FILM GRAIN — two turbulence layers, different scale and
   speed (depth), jittered in steps() like a real projector gate.
   Opacity rises with scroll velocity via --grain-boost (set in JS). --- */
#grain {
  position: fixed;
  inset: 0;
  z-index: 40;
  pointer-events: none;
  overflow: hidden;
  mix-blend-mode: soft-light;
  opacity: calc(0.05 + var(--grain-boost, 0) * 0.06);
  transition: opacity 0.4s ease;
}
#grain::before,
#grain::after {
  content: "";
  position: absolute;
  inset: -150%;
  width: 400%;
  height: 400%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  will-change: transform;
}
/* fine, fast layer */
#grain::before {
  background-size: 150px 150px;
  animation: grainJitter 0.62s steps(7) infinite;
}
/* coarse, slow layer — reads as depth-of-field in the grain itself */
#grain::after {
  background-size: 290px 290px;
  opacity: 0.55;
  animation: grainJitter 1.45s steps(5) infinite reverse;
}
@keyframes grainJitter {
  0%   { transform: translate3d(0, 0, 0); }
  20%  { transform: translate3d(-7%, 5%, 0); }
  40%  { transform: translate3d(6%, -9%, 0); }
  60%  { transform: translate3d(-5%, 8%, 0); }
  80%  { transform: translate3d(9%, 3%, 0); }
  100% { transform: translate3d(0, 0, 0); }
}

/* --- VOLUMETRIC LIGHT BEAM — a faint projector shaft cutting the
   page on a diagonal; the dust appears suspended *inside* it. The
   warm bone core + a whisper of lime, sweeping very slowly. --- */
#beam {
  position: fixed;
  inset: -25% -12%;
  z-index: 35;
  pointer-events: none;
  background:
    linear-gradient(
      113deg,
      transparent 37%,
      rgba(201,144,85,0.030) 46%,
      rgba(244,246,248,0.045) 50%,
      rgba(242,162,60,0.022) 54%,
      transparent 64%
    );
  mix-blend-mode: screen;
  opacity: 0.55;
  animation: beamSweep 30s ease-in-out infinite alternate;
}
@keyframes beamSweep {
  0%   { transform: translateX(-7%) rotate(0deg);   opacity: 0.40; }
  50%  { opacity: 0.72; }
  100% { transform: translateX(7%) rotate(1.4deg);  opacity: 0.48; }
}

@media (prefers-reduced-motion: reduce) {
  #grain { opacity: 0.045; }
  #grain::before,
  #grain::after { animation: none; inset: 0; width: 100%; height: 100%; }
  #grain::after { display: none; }
  #dust { display: none; }
  #beam { animation: none; opacity: 0.38; }
}

/* ============================================================
   LETTERBOX — cinemascope bars that close on key scenes (Reel,
   Director, Cierre). The "click" of changing into a film frame.
   ============================================================ */
#letterbox {
  position: fixed;
  inset: 0;
  z-index: 39;
  pointer-events: none;
}
#letterbox span {
  position: absolute;
  left: 0;
  right: 0;
  height: 0;
  background: #000;
  transition: height 0.95s cubic-bezier(0.7, 0, 0.2, 1);
}
#letterbox span:first-child { top: 0; box-shadow: 0 1px 0 rgba(244,246,248,0.05); }
#letterbox span:last-child { bottom: 0; box-shadow: 0 -1px 0 rgba(244,246,248,0.05); }
body.cinemascope #letterbox span { height: clamp(18px, 4vh, 52px); }
@media (prefers-reduced-motion: reduce) {
  #letterbox span { transition: none; }
  body.cinemascope #letterbox span { height: 0; }
}

/* ============================================================
   HALATION — lime/warm accents bloom like light burning the
   negative. The accent reads as *emitted*, not painted.
   ============================================================ */
.scene--lime .scene__line {
  box-shadow: 0 0 14px rgba(242, 162, 60, 0.45);
}
.btn--lime {
  box-shadow: 0 0 0 rgba(242, 162, 60, 0);
  transition: box-shadow 0.5s ease, transform 0.4s ease;
}
.btn--lime:hover {
  box-shadow: 0 0 28px rgba(242, 162, 60, 0.32), 0 0 8px rgba(242, 162, 60, 0.45);
}
.metric__num {
  text-shadow: 0 0 22px rgba(242, 162, 60, 0.28);
}
.quote__mark {
  text-shadow: 0 0 18px rgba(242, 162, 60, 0.30);
}
.nav__links a.active::after {
  box-shadow: 0 0 10px rgba(242, 162, 60, 0.5);
}

/* ============================================================
   HERO FRAME — camera safe-area / viewfinder corner marks.
   ============================================================ */
.hero__frame { position: absolute; inset: clamp(20px, 3.2vh, 40px) clamp(24px, 6vw, 96px); pointer-events: none; }
.hero__frame span { position: absolute; width: 22px; height: 22px; opacity: 0.32; }
.hero__frame span::before, .hero__frame span::after { content: ""; position: absolute; background: var(--bone); }
.hero__frame span::before { width: 22px; height: 1px; top: 0; }
.hero__frame span::after { width: 1px; height: 22px; left: 0; }
.hero__frame .tl { top: 0; left: 0; }
.hero__frame .tr { top: 0; right: 0; transform: scaleX(-1); }
.hero__frame .bl { bottom: 0; left: 0; transform: scaleY(-1); }
.hero__frame .br { bottom: 0; right: 0; transform: scale(-1, -1); }

/* ============================================================
   THESIS — the blackout. Pure black, ritual pacing.
   ============================================================ */
.thesis { background: var(--black); }
.thesis .scene__line { opacity: 0.4; }

/* ============================================================
   NAV — scroll-progress hairline (Bone, very subtle).
   ============================================================ */
.nav__progress {
  position: absolute;
  left: 0; bottom: -1px;
  height: 1px;
  width: 100%;
  background: var(--bone);
  opacity: 0.28;
  transform: scaleX(var(--progress, 0));
  transform-origin: left center;
}

/* ============================================================
   INTRO RITUAL — studio black hold, then fade to the title card.
   CSS-driven (robust); JS only skips it on repeat session views.
   ============================================================ */
#intro {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: var(--black);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  animation: introOut 700ms ease forwards;
}
#intro .intro__mark { font-size: 0.78rem; color: var(--lime-live); letter-spacing: 0.34em; text-transform: uppercase; opacity: 0; animation: introMark 700ms ease forwards; }
@keyframes introOut {
  0%, 30% { opacity: 1; }
  100% { opacity: 0; visibility: hidden; }
}
@keyframes introMark {
  0% { opacity: 0; }
  15%, 38% { opacity: 1; }
  70%, 100% { opacity: 0; }
}
body.intro-skip #intro { display: none; }
@media (prefers-reduced-motion: reduce) {
  #intro { display: none; }
}

/* ============================================================
   ART DIRECTION v2 — WebGL hero, editorial serif, cinematic
   motion (GSAP/Lenis), tactile depth. Carbon still rules.
   ============================================================ */

/* ---- Editorial serif for the narrative voice (structure stays grotesk) ---- */
.hero__title, .thesis__line, .close__head, .diagnosis__turn {
  font-family: var(--serif);
  font-weight: 900;
  letter-spacing: -0.025em;
  font-optical-sizing: auto;
}
.director__quote { font-family: var(--serif); font-weight: 900; font-style: italic; letter-spacing: -0.02em; }
.thesis__sig { font-family: var(--serif); font-style: italic; }
.hero__sub, .plans__head p { font-weight: 300; }

/* ---- WebGL hero canvas ---- */
.hero { position: relative; overflow: hidden; }
.hero__canvas {
  position: absolute; inset: 0; width: 100%; height: 100%;
  display: block; z-index: 0;
  opacity: 0; transition: opacity 500ms ease;
}
.hero__canvas.ready { opacity: 1; }
.hero__hud {
  position: absolute; inset: 0; width: 100%; height: 100%;
  display: block; z-index: 1; pointer-events: none;
  opacity: 0; transition: opacity 1200ms ease;
}
.hero__hud.ready { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .hero__hud { display: none; } }
.hero__veil {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    /* pozo de legibilidad anclado abajo-izquierda (bajo el lockup); se apaga
       antes del centro para no tapar el ojo ni el wordmark "Captium" */
    radial-gradient(130% 100% at 20% 92%, rgba(10,11,13,0.82) 0%, rgba(10,11,13,0.34) 32%, transparent 56%),
    radial-gradient(120% 90% at 50% 42%, rgba(10,11,13,0.10) 22%, rgba(10,11,13,0.40) 74%, var(--carbon) 100%),
    linear-gradient(to bottom, rgba(10,11,13,0.40) 0%, transparent 24% 62%, var(--carbon) 100%);
}
/* Lift hero content above canvas/veil WITHOUT clobbering the absolutely
   positioned corner/stamp/frame (which must keep their own position). */
.hero__title, .hero__sub, .hero__cta, .hero__foot { position: relative; z-index: 2; }
.hero__corner, .hero__stamp, .hero__frame { z-index: 3; }

/* ---- APERTURE IRIS — the hero is revealed as if a camera shutter
   opens on it. Pure CSS: animated mask hole (@property) with an
   opacity fade as a guaranteed fallback if @property is unsupported. ---- */
@property --iris {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 0%;
}
#aperture {
  position: absolute; inset: 0; z-index: 4; pointer-events: none;
  background: #000;
  --iris: 0%;
  -webkit-mask: radial-gradient(circle at 50% 46%, transparent calc(var(--iris) - 2%), #000 var(--iris));
          mask: radial-gradient(circle at 50% 46%, transparent calc(var(--iris) - 2%), #000 var(--iris));
  will-change: opacity, mask;
  animation: irisOpen 550ms cubic-bezier(0.62, 0, 0.18, 1) 60ms both;
}
body.intro-skip #aperture {
  animation: irisOpen 420ms cubic-bezier(0.62, 0, 0.18, 1) 0ms both;
}
@keyframes irisOpen {
  0%   { --iris: 0%;   opacity: 1; }
  72%  { opacity: 1; }
  100% { --iris: 152%; opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  #aperture { display: none; }
}

/* ---- Cinematic motion layer (only when JS + motion are on) ---- */
html.anim .reveal { opacity: 0; }
html.anim .hero__title .line > i { transform: translateY(112%); will-change: transform; }
html.anim .hero__rule { transform: scaleX(0); will-change: transform; }
html.anim .hero__sub,
html.anim .hero__cta { opacity: 0; filter: blur(14px); will-change: opacity, filter, transform; }
@media (prefers-reduced-motion: reduce) {
  html.anim .reveal,
  html.anim .hero__sub,
  html.anim .hero__cta { opacity: 1 !important; }
  html.anim .hero__title .line > i { transform: none !important; }
  html.anim .hero__rule { transform: none !important; }
}

/* ---- Director photo: parallax-ready ---- */
.director__img { will-change: transform; transform: scale(1.08); }

/* ---- Tactile 3D tilt on plan cards (desktop, fine pointer only) ---- */
@media (hover: hover) and (pointer: fine) and (min-width: 921px) {
  .plans__grid { perspective: 1600px; }
  .plan {
    position: relative;
    transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateZ(0);
    transition: transform 240ms cubic-bezier(.2,.7,.2,1), border-color 260ms ease, background-color 260ms ease, box-shadow 300ms ease;
    transform-style: preserve-3d;
  }
  .plan--hero {
    transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) scale(1.05);
  }
  .plan__sheen {
    position: absolute; inset: 0; pointer-events: none; opacity: 0;
    transition: opacity 300ms ease;
    background: radial-gradient(360px 360px at var(--mx, 50%) var(--my, 0%), rgba(242,162,60,0.10), transparent 60%);
  }
  .plan:hover .plan__sheen { opacity: 1; }
  .plan:hover { box-shadow: 0 30px 80px -40px rgba(0,0,0,0.8); }
}

/* ---- Buttons: subtle lime glow on hover (premium tactility) ---- */
.btn--lime:hover { box-shadow: 0 0 0 1px var(--lime-live), 0 18px 50px -22px rgba(242,162,60,0.5); }
.btn { position: relative; overflow: hidden; }

/* ---- Scroll-progress: thicken to a faint lime when deep in the page ---- */
.nav__progress { background: linear-gradient(90deg, var(--bone) 0%, var(--lime-live) 100%); opacity: 0.4; }

/* ---- Reduced motion: pin everything visible, no transforms ---- */
@media (prefers-reduced-motion: reduce) {
  .director__img { transform: none; }
  .hero__canvas { display: none; }
}

/* ============================================================
   QUALITY / ACCESSIBILITY LAYER
   ============================================================ */
/* Skip link — hidden until keyboard focus */
.skip-link {
  position: fixed;
  top: 12px;
  left: 50%;
  z-index: 200;
  background: var(--lime-live);
  color: var(--carbon);
  font-family: var(--mono);
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  padding: 0.7em 1.4em;
  border-radius: 4px;
  text-decoration: none;
  transform: translateX(-50%) translateY(-200%);
  transition: transform 200ms ease;
}
.skip-link:focus { transform: translateX(-50%) translateY(0); outline: none; }

/* Anchored sections clear the fixed nav when jumped to */
section[id] { scroll-margin-top: 84px; }

/* Visible keyboard focus on every interactive element */
a:focus-visible,
.btn:focus-visible,
summary:focus-visible,
.nav__links a:focus-visible {
  outline: 2px solid var(--lime-live);
  outline-offset: 3px;
  border-radius: 2px;
}
/* Don't show the focus ring for mouse users on summary */
summary:focus:not(:focus-visible) { outline: none; }

/* Active section indicator in the nav */
.nav__links a:not(.nav__cta) { position: relative; }
.nav__links a.active { color: var(--bone); }
.nav__links a.active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -6px;
  height: 1px;
  background: var(--lime-live);
  opacity: 0.9;
}

/* ============================================================
   PRECIOS EN CLP (dentro de Planes)
   ============================================================ */
.plan__clp {
  font-size: 0.78rem;
  color: var(--bone-60);
  letter-spacing: 0.02em;
  margin-top: 0.5em;
}
.enterprise__clp { color: var(--bone-60); font-size: 0.85em; }


/* ============================================================
   SECTION 09 — EL CORTE FINAL (Cinema Score)
   ============================================================ */
.score { padding: 18vh 0; background: var(--carbon); }
.score__head {
  text-align: center;
  font-size: clamp(1.7rem, 4vw, 3.6rem);
  line-height: 1.06;
  letter-spacing: -0.02em;
  color: var(--bone);
  margin-bottom: 1.1em;
}
.score__sub {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 8vh;
  font-size: 1.05rem;
  line-height: 1.7;
  font-weight: 300;
  color: var(--bone-70);
}
.score__layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 4vw, 64px);
  align-items: start;
  max-width: 1040px;
  margin: 0 auto;
}
.score__axes { list-style: none; display: flex; flex-direction: column; gap: 1.5em; }
.score__axes li { display: flex; align-items: flex-start; gap: 1.1em; }
.score__w {
  flex: 0 0 auto;
  width: 2.6em;
  font-size: 1.1rem;
  color: var(--lime-live);
  letter-spacing: 0.04em;
  padding-top: 0.1em;
}
.score__axes li > div { display: flex; flex-direction: column; gap: 0.25em; }
.score__axes strong { color: var(--bone); font-weight: 500; font-size: 1.02rem; }
.score__axes em { color: var(--bone-60); font-style: normal; font-size: 0.9rem; line-height: 1.5; font-weight: 300; }

/* Slate — ficha tecnica */
.slate {
  border: 1px solid var(--hairline);
  border-radius: 6px;
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(201,144,85,0.05), transparent 55%),
    var(--carbon-2);
  padding: clamp(26px, 2.6vw, 40px);
  position: sticky;
  top: 96px;
}
.slate__top {
  font-size: 0.66rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--bone-50);
  padding-bottom: 1.2em;
  margin-bottom: 1.4em;
  border-bottom: 1px solid var(--hairline);
}
.slate__rows { display: flex; flex-direction: column; gap: 0.7em; font-size: 0.74rem; }
.slate__rows > div { display: flex; justify-content: space-between; gap: 1em; }
.slate__rows span:first-child { color: var(--bone-50); letter-spacing: 0.12em; }
.slate__rows span:last-child { color: var(--bone-80); text-align: right; }
.slate__score {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3em;
  margin: 1.8em 0;
  padding: 1.4em 0;
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}
.slate__label { font-size: 0.62rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--bone-50); }
.slate__num {
  font-size: clamp(3.4rem, 8vw, 5rem);
  line-height: 1;
  color: var(--lime-live);
  letter-spacing: -0.02em;
}
.slate__band { font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--amber); }
.slate__bars { display: flex; flex-direction: column; gap: 0.7em; font-size: 0.66rem; }
.slate__bars > div { display: grid; grid-template-columns: 5.4em 1fr 3em; align-items: center; gap: 0.7em; }
.slate__bars span { color: var(--bone-60); letter-spacing: 0.06em; }
.slate__bars b { display: block; height: 4px; border-radius: 2px; background: rgba(244,246,248,0.08); overflow: hidden; }
.slate__bars b i { display: block; height: 100%; width: var(--v, 0%); background: var(--lime-live); border-radius: 2px; }
.slate__bars u { text-decoration: none; color: var(--bone-50); text-align: right; }
.slate__note {
  margin-top: 1.6em;
  font-size: 0.66rem;
  line-height: 1.6;
  color: var(--bone-50);
  letter-spacing: 0.02em;
}
.score__manifesto {
  max-width: 760px;
  margin: 9vh auto 0;
  text-align: center;
  font-size: 1.08rem;
  line-height: 1.8;
  font-weight: 300;
  color: var(--bone-75);
}
.score__floor {
  text-align: center;
  margin-top: 2.6em;
}
.score__floor span {
  display: inline-block;
  padding: 0.7em 1.4em;
  border: 1px solid var(--lime-live);
  border-radius: 4px;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--lime-live);
}

/* ============================================================
   SECTION 10 — PRUEBA DE CAMARA (lead magnet)
   ============================================================ */
.camtest { padding: 18vh 0; background: var(--carbon-2); }
.camtest__grid {
  display: grid;
  grid-template-columns: 1fr 0.9fr;
  gap: clamp(32px, 5vw, 80px);
  align-items: center;
  margin-top: 6vh;
}
.camtest__badge {
  display: inline-block;
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  color: var(--lime-live);
  margin-bottom: 1.6em;
}
.camtest__head {
  font-size: clamp(2rem, 4.6vw, 3.6rem);
  line-height: 1.04;
  letter-spacing: -0.02em;
  color: var(--bone);
}
.camtest__sub {
  margin: 1.6em 0 0;
  max-width: 520px;
  font-size: 1.05rem;
  line-height: 1.7;
  font-weight: 300;
  color: var(--bone-70);
}
.camtest__steps {
  list-style: none;
  margin: 2.6em 0;
  display: flex;
  flex-direction: column;
  gap: 1.3em;
}
.camtest__steps li { display: flex; align-items: flex-start; gap: 1em; font-size: 0.86rem; line-height: 1.6; color: var(--bone-70); }
.camtest__steps li span { color: var(--lime-live); font-size: 0.8em; padding-top: 0.15em; }
.camtest__steps strong { color: var(--bone); font-weight: 500; }
.camtest__cta { display: flex; flex-wrap: wrap; gap: 1em; align-items: center; }
.camtest__alt { color: var(--bone-60); border: none; padding-left: 0; padding-right: 0; }
.camtest__alt:hover { color: var(--bone); }
.camtest__scarcity { margin-top: 1.8em; font-size: 0.74rem; color: var(--bone-50); line-height: 1.6; max-width: 460px; }
.camtest__media {
  position: relative;
  margin: 0;
  border: 1px solid var(--hairline);
  border-radius: 6px;
  overflow: hidden;
  background: var(--black);
  aspect-ratio: 3 / 4;
}
.camtest__video, .camtest__poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.camtest__poster { z-index: 0; }
.camtest__video { z-index: 1; }
.camtest__cap {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 2;
  padding: 1em 1.2em;
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--bone-60);
  background: linear-gradient(transparent, rgba(0,0,0,0.7));
}

/* ============================================================
   EL MULTIPLICADOR (dentro de Planes)
   ============================================================ */
.multiplier {
  max-width: 1040px;
  margin: 12vh auto 0;
  padding: clamp(30px, 3.6vw, 56px);
  border: 1px solid var(--hairline);
  border-radius: 6px;
  background: var(--carbon-2);
}
.multiplier__badge { display: block; font-size: 0.66rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--lime-live); margin-bottom: 2em; }
.multiplier__grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(28px, 4vw, 60px); align-items: start; }
.multiplier__title { font-size: clamp(1.6rem, 3.4vw, 2.8rem); line-height: 1.05; letter-spacing: -0.02em; color: var(--bone); }
.multiplier__sub { margin: 1.4em 0 0; font-size: 1.02rem; line-height: 1.7; font-weight: 300; color: var(--bone-70); }
.multiplier__sub strong { color: var(--bone); font-weight: 500; }
.multiplier__close { margin: 1.8em 0 0; font-size: 0.74rem; letter-spacing: 0.08em; color: var(--amber); }
.multiplier__list { list-style: none; display: flex; flex-direction: column; gap: 1.2em; }
.multiplier__list li { display: flex; align-items: flex-start; gap: 1em; font-size: 0.88rem; line-height: 1.6; color: var(--bone-70); }
.multiplier__list li span { color: var(--lime-live); font-size: 0.8em; padding-top: 0.15em; }
.multiplier__list strong { color: var(--bone); font-weight: 500; }

/* ============================================================
   EL CASTING — recomendador de plan
   ============================================================ */
.casting {
  max-width: 880px;
  margin: 12vh auto 0;
  padding: clamp(30px, 3.6vw, 56px);
  border: 1px solid var(--hairline);
  border-radius: 6px;
  background:
    radial-gradient(120% 120% at 50% 0%, rgba(242,162,60,0.04), transparent 55%),
    var(--carbon-2);
}
.casting__head { text-align: center; margin-bottom: 3em; }
.casting__badge { display: inline-block; font-size: 0.66rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--lime-live); margin-bottom: 1.4em; }
.casting__title { font-size: clamp(1.6rem, 3.2vw, 2.6rem); line-height: 1.05; color: var(--bone); }
.casting__sub { margin: 1.1em auto 0; max-width: 480px; font-size: 0.98rem; line-height: 1.6; font-weight: 300; color: var(--bone-70); }
.casting__form { display: flex; flex-direction: column; gap: 2.2em; }
.casting__q { border: none; margin: 0; padding: 0; }
.casting__q legend { font-size: 0.72rem; letter-spacing: 0.1em; color: var(--bone-60); margin-bottom: 1em; text-transform: uppercase; }
.casting__q legend i { font-style: normal; color: var(--bone-50); text-transform: none; letter-spacing: 0.02em; }
.casting__opts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.7em; }
.casting__opt {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.7em;
  padding: 0.85em 1em;
  border: 1px solid var(--hairline);
  border-radius: 4px;
  font-size: 0.85rem;
  color: var(--bone-70);
  cursor: pointer;
  transition: border-color 200ms ease, color 200ms ease, background 200ms ease;
}
.casting__opt:hover { border-color: rgba(244,246,248,0.2); color: var(--bone); }
.casting__opt input { accent-color: var(--lime-live); width: 15px; height: 15px; flex: 0 0 auto; }
.casting__opt:has(input:checked) {
  border-color: var(--lime-live);
  color: var(--bone);
  background: rgba(242,162,60,0.05);
}
.casting__result {
  margin-top: 2.6em;
  padding: clamp(24px, 2.6vw, 38px);
  border: 1px solid var(--lime-live);
  border-radius: 6px;
  background: rgba(242,162,60,0.04);
  text-align: center;
  animation: castingIn 500ms ease-out;
}
@keyframes castingIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.casting__result-kicker { font-size: 0.66rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--bone-50); }
.casting__result-plan { font-size: clamp(1.8rem, 4vw, 2.8rem); line-height: 1.1; color: var(--lime-live); margin: 0.4em 0; }
.casting__result-price { font-size: 0.8rem; letter-spacing: 0.06em; color: var(--bone-60); margin-bottom: 1.2em; }
.casting__result-copy { max-width: 480px; margin: 0 auto 1.8em; font-size: 0.98rem; line-height: 1.7; font-weight: 300; color: var(--bone-75); }
.casting__result-cta { display: flex; flex-wrap: wrap; gap: 0.9em; justify-content: center; }
.casting__micro { margin-top: 2em; text-align: center; font-size: 0.7rem; line-height: 1.6; color: var(--bone-50); }

/* ============================================================
   RESPONSIVE — nuevas secciones
   ============================================================ */
@media (max-width: 860px) {
  .score__layout { grid-template-columns: 1fr; gap: 3em; }
  .slate { position: static; }
  .camtest__grid { grid-template-columns: 1fr; }
  .camtest__media { max-width: 440px; margin: 0 auto; }
  .multiplier__grid { grid-template-columns: 1fr; gap: 2.4em; }
}
@media (max-width: 600px) {
  .casting__opts { grid-template-columns: 1fr; }
  .score__axes li { gap: 0.8em; }
  .camtest__cta .btn { width: 100%; }
}

/* ============================================================
   SECTION 04 — DOS CAMINOS (Estudio vs Lab)
   ============================================================ */
.paths { padding: 20vh 0; }
.paths__eyebrow {
  display: block;
  text-align: center;
  font-size: 0.72rem;
  letter-spacing: 0.24em;
  color: var(--lime-live);
  margin: 2.5em 0 1.4em;
}
.paths__head {
  text-align: center;
  font-size: clamp(1.9rem, 4.6vw, 4rem);
  line-height: 1.04;
  letter-spacing: -0.02em;
  color: var(--bone);
}
.paths__sub {
  text-align: center;
  max-width: 680px;
  margin: 1.6em auto 0;
  font-size: 1.05rem;
  line-height: 1.7;
  font-weight: 300;
  color: var(--bone-70);
}
.paths__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(36px, 6vw, 96px);
  max-width: 1040px;
  margin: 9vh auto 0;
  position: relative;
}
.paths__grid::before {
  content: "";
  position: absolute;
  top: 6%;
  bottom: 6%;
  left: 50%;
  width: 1px;
  background: linear-gradient(transparent, rgba(244,246,248,0.14), transparent);
}
.path { display: flex; flex-direction: column; }
.path__kicker {
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  color: var(--lime-live);
  margin-bottom: 1.4em;
}
.path__name {
  font-size: clamp(1.8rem, 3vw, 2.8rem);
  line-height: 1.02;
  letter-spacing: -0.02em;
  color: var(--bone);
}
.path__subhead {
  margin: 0.8em 0 0;
  font-size: 1.3rem;
  font-weight: 300;
  color: var(--bone-85);
}
.path__body {
  margin: 1.6em 0 0;
  max-width: 400px;
  font-size: 1rem;
  line-height: 1.7;
  font-weight: 300;
  color: var(--bone-75);
}
.path__body--accent { color: var(--bone); font-weight: 400; margin-top: 1.1em; }
.path__points {
  list-style: none;
  margin: 2.4em 0;
  display: flex;
  flex-direction: column;
  gap: 0.7em;
  font-size: 0.85rem;
  color: var(--lime-live);
}
.path__cta { align-self: flex-start; margin-top: auto; }
@media (max-width: 820px) {
  .paths__grid { grid-template-columns: 1fr; gap: 0; max-width: 480px; }
  .paths__grid::before {
    top: 50%; bottom: auto; left: 6%; right: 6%;
    width: auto; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(244,246,248,0.14), transparent);
  }
  .path { padding: 6vh 0; }
  .path__body { max-width: none; }
}

/* ── El Método: 3 pilares de foco único ── */
.method__pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(28px, 4vw, 64px);
  max-width: 1080px;
  margin: 9vh auto 0;
}
.method__pillar {
  display: flex;
  flex-direction: column;
  padding-top: 2em;
  border-top: 1px solid rgba(244,246,248,0.14);
}
.method__num {
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  color: var(--lime-live);
  margin-bottom: 1.6em;
}
.method__name {
  font-size: clamp(1.5rem, 2.4vw, 2.1rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--bone);
}
.method__body {
  margin: 1.2em 0 0;
  font-size: 1rem;
  line-height: 1.7;
  font-weight: 300;
  color: var(--bone-75);
}
.method__cta {
  text-align: center;
  margin-top: 7vh;
}
@media (max-width: 820px) {
  .method__pillars { grid-template-columns: 1fr; gap: 0; max-width: 520px; }
  .method__pillar { padding: 5vh 0 0; }
}

/* Jerarquía: Estudio lidera (la marca) · la Puerta es la salida secundaria */
.path--door .path__kicker { color: var(--bone-75); }
.path--door .path__points { color: var(--bone-75); }
.path--door .path__cta {
  background: transparent;
  border: 1px solid rgba(244, 246, 248, 0.28);
  color: var(--bone);
}
.path--door .path__cta:hover { border-color: var(--bone); }

/* ============================================================
   SECTION 11B — PUERTA DE SERVICIO (encargos puntuales · Toma + Lab)
   ============================================================ */
.offer__block--door {
  padding: 8vh 0 14vh;
  border-top: 1px solid rgba(244, 246, 248, 0.08);
}
.door__eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-size: 0.72rem;
  color: var(--bone-75);
  margin: 0 0 1.2em;
}
.door__head {
  font-size: clamp(1.9rem, 3.4vw, 3rem);
  line-height: 1.04;
  letter-spacing: -0.02em;
  color: var(--bone);
  margin: 0;
}
.door__sub {
  margin: 1.2em 0 0;
  max-width: 560px;
  font-size: 1.05rem;
  line-height: 1.7;
  font-weight: 300;
  color: var(--bone-75);
}
.door__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(20px, 3vw, 36px);
  margin-top: clamp(36px, 5vw, 60px);
}
.door__card {
  display: flex;
  flex-direction: column;
  padding: clamp(24px, 3vw, 40px);
  border: 1px solid rgba(244, 246, 248, 0.12);
  border-radius: 4px;
  background: rgba(244, 246, 248, 0.015);
  text-decoration: none;
  transition: border-color 0.3s ease, background 0.3s ease, transform 0.3s ease;
}
.door__card:hover {
  border-color: rgba(242, 162, 60, 0.4);
  background: rgba(244, 246, 248, 0.03);
  transform: translateY(-3px);
}
.door__card-kicker {
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-size: 0.68rem;
  color: var(--lime-live);
  margin-bottom: 1.2em;
}
.door__card-name {
  font-size: clamp(1.3rem, 2vw, 1.7rem);
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--bone);
  margin: 0;
}
.door__card-body {
  margin: 1em 0 1.6em;
  font-size: 0.95rem;
  line-height: 1.65;
  font-weight: 300;
  color: var(--bone-75);
}
.door__card-cta {
  margin-top: auto;
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  color: var(--bone);
}
@media (max-width: 720px) {
  .door__grid { grid-template-columns: 1fr; }
}

/* ============================================================
   SECTION 11 — LA OFERTA (Estudio + Puerta de servicio)
   ============================================================ */
.offer { padding: 0; }
.offer__block { position: relative; }
.offer__block[id] { scroll-margin-top: 84px; }
.offer__block--lab { padding-top: 6vh; }
.offer__eyebrow {
  font-family: var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.24em;
  font-size: 0.72rem;
  color: var(--lime-live);
  margin-bottom: 1.6em;
}

/* --- Manifiesto research (sobre el grid de planes) --- */
.plans__manifest {
  display: flex;
  align-items: flex-start;
  gap: clamp(14px, 1.6vw, 24px);
  max-width: 880px;
  margin: clamp(8px, 1.6vh, 18px) auto clamp(32px, 4.4vh, 56px);
  padding: clamp(18px, 2vw, 26px) clamp(20px, 2.4vw, 32px);
  border-left: 2px solid var(--lime);
  background: linear-gradient(90deg, rgba(242,162,60,0.06) 0%, rgba(242,162,60,0.0) 70%);
}
.plans__manifest-rule {
  flex: 0 0 auto;
  width: 28px;
  height: 2px;
  margin-top: 0.95em;
  background: var(--lime);
  box-shadow: 0 0 12px rgba(242,162,60,0.55);
}
.plans__manifest-txt {
  font-family: var(--mono);
  font-size: clamp(0.84rem, 1.05vw, 0.98rem);
  line-height: 1.65;
  color: var(--bone-80);
  letter-spacing: 0.005em;
}
.plans__manifest-txt .mono { color: var(--lime-live); margin-right: 0.4em; letter-spacing: 0.06em; }
.plans__manifest-txt strong { color: var(--bone); font-weight: 600; letter-spacing: -0.005em; }
.plans__manifest-txt em { font-style: italic; color: var(--bone); display: block; margin-top: 0.5em; }
@media (max-width: 720px) {
  .plans__manifest { padding: 18px 20px; gap: 14px; }
  .plans__manifest-rule { width: 18px; }
}

/* --- Estudio: grilla de 5 (Pulso · Esencial · Estudio · Sistema · Volumen) --- */
.plans__grid--5 { grid-template-columns: repeat(5, 1fr); gap: clamp(12px, 1.1vw, 18px); }
.plans__grid--5 .plan { padding: clamp(18px, 1.6vw, 28px); }
.plans__grid--5 .plan--hero {
  transform: none;
  box-shadow: 0 28px 90px rgba(242, 162, 60, 0.12);
  padding: clamp(18px, 1.6vw, 28px);
}
.plans__grid--5 .plan__name { font-size: clamp(1.4rem, 1.8vw, 1.8rem); }
.plans__grid--5 .plan__price { font-size: clamp(1.7rem, 2.4vw, 2.6rem); }
.plans__grid--5 .plan__tag { max-width: none; font-size: clamp(0.85rem, 0.95vw, 0.98rem); }
.plans__grid--5 .plan__features { font-size: clamp(0.82rem, 0.92vw, 0.95rem); }
.plans__grid--5 .plan:nth-child(2) { --rd: 70ms; }
.plans__grid--5 .plan:nth-child(3) { --rd: 140ms; }
.plans__grid--5 .plan:nth-child(4) { --rd: 210ms; }
.plans__grid--5 .plan:nth-child(5) { --rd: 280ms; }

/* Alineación: cuadros a la misma altura, precios y separadores en la misma línea.
   Zonas de cabecera con altura reservada → los precios calzan exactos en las 5. */
.plans__grid--5 { align-items: stretch; }
.plans__grid--5 .plan { height: 100%; }
.plans__grid--5 .plan__badge { min-height: 1.05em; margin-bottom: 1.3em; }
.plans__grid--5 .plan__tag { min-height: 3.1em; margin-top: 0.6em; }
.plans__grid--5 .plan__price { margin-top: 1.2em; }
.plans__grid--5 .plan__clp { min-height: 1.3em; }
.plans__grid--5 .plan__compare { min-height: 2.7em; margin-top: 0.9em; }
.plans__grid--5 .plan__sep { margin: 1.6em 0; }
.plans__grid--5 .plan__features { flex: 1 0 auto; gap: 0.8em; margin-bottom: 2em; }
.plans__grid--5 .plan__cta { margin-top: auto; }

/* --- Pulso (plan de entrada · suscripción de renovación de creativos) --- */
.plan--entry {
  background: linear-gradient(180deg, rgba(201,144,85,0.05) 0%, var(--carbon) 60%);
  border: 1px solid rgba(201,144,85,0.32);
}
.plan--entry .plan__badge { color: var(--amber, #C99055); border-color: rgba(201,144,85,0.45); }
.plan--entry .plan__compare { color: var(--lime-live); font-weight: 500; }

/* --- Estudio: grilla de 4 (legado) --- */
.plans__grid--4 { grid-template-columns: repeat(4, 1fr); gap: clamp(14px, 1.4vw, 22px); }
.plans__grid--4 .plan { padding: clamp(22px, 2vw, 34px); }
.plans__grid--4 .plan--hero {
  transform: translateY(-10px);
  box-shadow: 0 32px 96px rgba(242, 162, 60, 0.06);
  padding: clamp(26px, 2.4vw, 40px);
}
.plans__grid--4 .plan__price { font-size: clamp(2rem, 3vw, 3.2rem); }
.plans__grid--4 .plan__tag { max-width: none; }
.plans__grid--4 .plan:nth-child(2) { --rd: 90ms; }
.plans__grid--4 .plan:nth-child(3) { --rd: 180ms; }
.plans__grid--4 .plan:nth-child(4) { --rd: 270ms; }

.plan__sep--lime { background: var(--lime-live); opacity: 0.7; }

/* --- Volumen --- */
.plan--volume {
  background: #080910;
  border: 1px solid rgba(242, 162, 60, 0.34);
}
.plan--volume .plan__badge { color: var(--lime-live); }

/* --- OFERTA DESTACADA · Despegue PYME (color de oferta + contador) --- */
.plan-offer {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: clamp(28px, 4vw, 64px);
  align-items: center;
  margin-bottom: clamp(28px, 3vw, 44px);
  padding: clamp(28px, 3.4vw, 52px);
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(242, 162, 60, 0.10) 0%, rgba(242, 162, 60, 0) 55%),
    var(--carbon-2);
  border: 1px solid var(--lime-live);
  border-radius: 2px;
  box-shadow: 0 28px 90px rgba(242, 162, 60, 0.10), inset 0 0 0 1px rgba(242, 162, 60, 0.06);
}
.plan-offer__glow {
  position: absolute;
  top: -40%;
  right: -10%;
  width: 50%;
  height: 180%;
  background: radial-gradient(circle, rgba(242, 162, 60, 0.16) 0%, rgba(242, 162, 60, 0) 65%);
  filter: blur(20px);
  pointer-events: none;
}
.plan-offer__main, .plan-offer__aside { position: relative; z-index: 1; }
.plan-offer__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  text-transform: uppercase;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  color: var(--carbon);
  background: var(--lime-live);
  padding: 0.55em 1em;
  border-radius: 999px;
  font-weight: 600;
}
.plan-offer__badge::before { content: "⚡"; font-size: 0.95em; }
.plan-offer__name {
  margin-top: 0.7em;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  font-size: clamp(2rem, 3.4vw, 3.2rem);
  line-height: 0.98;
  color: var(--bone);
}
.plan-offer__name span { color: var(--lime-live); }
.plan-offer__tag {
  margin-top: 0.8em;
  font-weight: 300;
  font-size: clamp(1rem, 1.3vw, 1.2rem);
  color: var(--bone-75);
  max-width: 30ch;
}
.plan-offer__price-row { margin-top: 1.4em; }
.plan-offer__price {
  font-weight: 900;
  letter-spacing: -0.04em;
  line-height: 0.9;
  font-size: clamp(2.8rem, 5vw, 4.4rem);
  color: var(--lime-live);
  font-variant-numeric: tabular-nums;
}
.plan-offer__per { display: inline; margin-left: 0.5em; font-size: 0.9rem; color: var(--bone-60); letter-spacing: 0.04em; }
.plan-offer__was { margin-top: 0.7em; font-size: 0.82rem; color: var(--bone-60); }

.countdown {
  margin-top: 1.8em;
  display: flex;
  flex-direction: column;
  gap: 0.7em;
}
.countdown__label {
  text-transform: uppercase;
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  color: #FF6452;
  font-weight: 600;
}
.countdown__label::before { content: "● "; color: #FF4D3D; animation: cd-blink 1.2s steps(1) infinite; }
.countdown__clock { display: flex; align-items: flex-start; gap: 0.5em; }
.countdown__unit {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35em;
  min-width: 3.2em;
  padding: 0.5em 0.4em;
  background: var(--carbon);
  border: 1px solid rgba(255, 77, 61, 0.35);
  border-radius: 3px;
}
.countdown__unit span {
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(1.5rem, 2.4vw, 2.1rem);
  line-height: 1;
  color: #FF5A48;
  text-shadow: 0 0 18px rgba(255, 77, 61, 0.40);
  font-variant-numeric: tabular-nums;
}
.countdown__unit small { font-size: 0.6rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--bone-50); }
/* Los segundos: rojo más fuerte + latido para que cause más impacto */
.countdown__clock .countdown__unit:last-of-type {
  border-color: rgba(255, 77, 61, 0.75);
  box-shadow: 0 0 22px rgba(255, 77, 61, 0.20);
}
.countdown__clock .countdown__unit:last-of-type span { color: #FF4D3D; animation: cd-pulse 1s ease-in-out infinite; }
.countdown__sep {
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(1.3rem, 2vw, 1.8rem);
  line-height: 1.4;
  color: #FF4D3D;
  opacity: 0.75;
}
@keyframes cd-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }
@keyframes cd-blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0.15; } }
@media (prefers-reduced-motion: reduce) {
  .countdown__label::before, .countdown__clock .countdown__unit:last-of-type span { animation: none; }
}

.plan-offer__features { list-style: none; display: flex; flex-direction: column; gap: 0.9em; margin-bottom: 1.8em; }
.plan-offer__features li {
  display: grid;
  grid-template-columns: 1.2em 1fr;
  gap: 0.7em;
  font-size: 0.95rem;
  color: var(--bone-80);
  line-height: 1.5;
}
.plan-offer__features li::before { content: "✓"; color: var(--lime-live); font-size: 0.85em; line-height: 1.7; }
.plan-offer__cta .btn { width: 100%; }

@media (max-width: 900px) {
  .plan-offer { grid-template-columns: 1fr; gap: 28px; }
  .plan-offer__tag { max-width: none; }
}
@media (max-width: 420px) {
  .countdown__unit { min-width: 0; flex: 1; }
}

@media (max-width: 1280px) {
  .plans__grid--5 {
    grid-template-columns: repeat(3, 1fr);
    max-width: 1100px;
    margin-inline: auto;
  }
  .plans__grid--5 .plan--hero { transform: none; }
}
@media (max-width: 1100px) {
  .plans__grid--4 { grid-template-columns: 1fr 1fr; max-width: 720px; margin-inline: auto; }
  .plans__grid--4 .plan--hero { transform: none; }
  .plans__grid--5 { grid-template-columns: 1fr 1fr; max-width: 720px; }
}
@media (max-width: 600px) {
  .plans__grid--4 { grid-template-columns: 1fr; max-width: 420px; }
  .plans__grid--5 { grid-template-columns: 1fr; max-width: 420px; }
}

/* ============================================================
   CAPTIUM LAB
   ============================================================ */
.lab__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-items: start;
  gap: clamp(14px, 1.4vw, 22px);
}
.labcard {
  background: var(--carbon);
  border: 1px solid var(--hairline);
  padding: clamp(22px, 2vw, 32px);
  display: flex;
  flex-direction: column;
  height: 100%;
}
.labcard--accent { border-color: rgba(242, 162, 60, 0.22); }
.labcard--offer {
  background: linear-gradient(180deg, rgba(242, 162, 60, 0.06) 0%, var(--carbon) 55%);
  border-color: rgba(242, 162, 60, 0.40);
}
.labcard--offer .labcard__badge { color: var(--lime-live); }
.labcard--offer .labcard__price { color: var(--lime-live); }
.labcard--hero {
  background: var(--carbon-2);
  border: 1px solid var(--lime-live);
  box-shadow: 0 32px 96px rgba(242, 162, 60, 0.06);
}
.labcard__badge {
  font-family: var(--mono);
  text-transform: uppercase;
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  color: var(--bone-60);
  margin-bottom: 1.4em;
}
.labcard--accent .labcard__badge,
.labcard--hero .labcard__badge { color: var(--lime-live); }
.labcard__name {
  font-family: var(--display);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  font-size: clamp(1.15rem, 1.5vw, 1.5rem);
  line-height: 1.05;
  color: var(--bone);
}
.labcard__price {
  margin-top: 1em;
  font-family: var(--display);
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 0.95;
  font-size: clamp(1.9rem, 2.6vw, 2.8rem);
  color: var(--bone);
}
.labcard__price .labcard__per { display: inline; margin: 0 0 0 0.2em; }
.labcard__per { font-family: var(--mono); font-size: 0.74rem; color: var(--bone-60); margin-top: 0.5em; }
.labcard__compare { font-family: var(--mono); font-size: 0.74rem; color: var(--bone-60); margin-top: 0.6em; line-height: 1.5; }
.labcard__sep { height: 1px; width: 30%; background: var(--bone-50); margin: 1.6em 0; opacity: 0.4; }
.labcard__sep--lime { background: var(--lime-live); opacity: 0.7; }
.labcard__sublabel {
  font-family: var(--mono);
  text-transform: uppercase;
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  color: var(--bone-50);
  margin: 0.4em 0 1em;
}
.labcard__features { list-style: none; display: flex; flex-direction: column; gap: 0.7em; margin-bottom: 1.6em; }
.labcard__features li {
  display: grid;
  grid-template-columns: 1.1em 1fr;
  gap: 0.6em;
  font-size: 0.86rem;
  color: var(--bone-75);
  line-height: 1.45;
}
.labcard__features li::before { content: "✓"; color: var(--bone-70); font-size: 0.8em; line-height: 1.7; }
.labcard__note {
  font-size: 0.78rem;
  font-style: italic;
  color: var(--bone-60);
  margin-bottom: 1.2em;
  line-height: 1.5;
}
.labcard__value {
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--bone-70);
  display: flex;
  flex-direction: column;
  gap: 0.4em;
  padding: 1em 0;
  margin-bottom: 1.2em;
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}
.labcard__value-save { color: var(--lime-live); }
.labcard__idea {
  font-size: 0.92rem;
  font-weight: 300;
  color: var(--bone-80);
  line-height: 1.5;
  margin-bottom: 1.8em;
  flex: 1;
}
.labcard .plan__cta { margin-top: auto; }
.labcard .plan__cta .btn { width: 100%; }

.lab__grid .labcard:nth-child(2) { --rd: 70ms; }
.lab__grid .labcard:nth-child(3) { --rd: 140ms; }
.lab__grid .labcard:nth-child(4) { --rd: 210ms; }
.lab__grid .labcard:nth-child(5) { --rd: 80ms; }
.lab__grid .labcard:nth-child(6) { --rd: 150ms; }
.lab__grid .labcard:nth-child(7) { --rd: 220ms; }
.lab__grid .labcard:nth-child(8) { --rd: 290ms; }

@media (max-width: 1100px) {
  .lab__grid { grid-template-columns: 1fr 1fr; max-width: 720px; margin-inline: auto; }
}
@media (max-width: 600px) {
  .lab__grid { grid-template-columns: 1fr; max-width: 420px; }
}

/* ============================================================
   ADD-ONS
   ============================================================ */
.addons { margin-top: 12vh; max-width: 720px; margin-inline: auto; }
.addons__line { width: 40px; height: 1px; background: var(--lime-live); margin-bottom: 3vh; }
.addons__title { font-size: clamp(1.3rem, 2vw, 2rem); color: var(--bone); }
.addons__sub { margin-top: 1vh; font-size: 1rem; color: var(--bone-70); font-weight: 300; margin-bottom: 4vh; }
.addons__list { list-style: none; display: flex; flex-direction: column; }
.addons__list li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1.5em;
  padding: 1.1em 0;
  border-top: 1px solid var(--hairline);
  font-size: 0.86rem;
}
.addons__list li:last-child { border-bottom: 1px solid var(--hairline); }
.addons__list li span:first-child { color: var(--bone-80); }
.addons__list li span:last-child { color: var(--lime-live); white-space: nowrap; }
@media (max-width: 480px) {
  .addons__list li { flex-direction: column; gap: 0.3em; }
}

.process__coda {
  margin-top: 9vh;
  text-align: center;
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(1.05rem, 1.8vw, 1.6rem);
  line-height: 1.55;
  color: var(--bone-80);
  letter-spacing: -0.01em;
}

/* ============================================================
   MOODBOARD INFLUENCE — semitono · glow ámbar · editorial mono
   Estilo destilado del moodboard (Pinterest) en CSS nativo:
   01 Lente → trama de semitono / marco cinematográfico
   02 Terminal → glow fósforo lima
   03 Editorial → etiquetas mono dispersas / letra fantasma
   05 Web → backdrop oscuro con resplandor lima
   Sutil, elegante, sin saturar (lima ≤ ~8%).
   ============================================================ */

/* — Utilidad: trama de semitono (dither risográfico, board 01/03) — */
.tex-halftone { position: relative; }
.tex-halftone::after {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none; z-index: 0;
  background-image: radial-gradient(rgba(242, 162, 60, 0.55) 0.6px, transparent 0.8px);
  background-size: 7px 7px;
  opacity: 0.05;
  mask-image: radial-gradient(ellipse 72% 60% at 50% 42%, #000 0%, transparent 76%);
  -webkit-mask-image: radial-gradient(ellipse 72% 60% at 50% 42%, #000 0%, transparent 76%);
}

/* — CIERRE: backdrop oscuro con resplandor lima (board 05) + semitono — */
.close { overflow: hidden; }
.close::before {
  content: "";
  position: absolute; left: 50%; top: 40%;
  width: min(125vw, 1150px); height: min(125vw, 1150px);
  transform: translate(-50%, -50%);
  background: radial-gradient(circle,
    rgba(242, 162, 60, 0.11) 0%,
    rgba(242, 162, 60, 0.045) 32%,
    transparent 62%);
  filter: blur(10px);
  pointer-events: none; z-index: 0;
}
.close > .wrap { position: relative; z-index: 1; }
.close__head { position: relative; }

/* etiquetas monoespaciadas dispersas (board 03 — anotación editorial) */
.close__notes { pointer-events: none; }
.close__note {
  position: absolute; z-index: 1;
  font-family: var(--mono);
  font-size: 0.62rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--bone-60); opacity: 0.55; white-space: nowrap;
}
.close__note--tl { top: 9%;  left: 6%; }
.close__note--tr { top: 14%; right: 7%; color: var(--lime); opacity: 0.5; }
.close__note--bl { bottom: 12%; left: 8%; }
.close__note--br { bottom: 9%;  right: 6%; }
@media (max-width: 720px) { .close__note { display: none; } }

/* — PROCESO: letra fantasma condensada al fondo (board 03) — */
.process { overflow: hidden; }
.process::before {
  content: "C";
  position: absolute; right: -3vw; top: -2vh;
  font-family: var(--display); font-weight: 700;
  font-size: 52vh; line-height: 0.78;
  color: var(--bone);
  opacity: 0.02; letter-spacing: -0.05em;
  pointer-events: none; z-index: 0; user-select: none;
}
.process > .wrap { position: relative; z-index: 1; }

/* — PRUEBA DE CÁMARA: marco cinematográfico + semitono en el media (board 01) — */
.camtest__media { position: relative; }
.camtest__media::after {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none; z-index: 2;
  background-image: radial-gradient(rgba(242, 162, 60, 0.5) 0.5px, transparent 0.7px);
  background-size: 6px 6px;
  opacity: 0.045;
  mix-blend-mode: screen;
}
.camtest__media::before {
  content: "";
  position: absolute; left: 14px; right: 14px; top: 14px; bottom: 14px;
  border: 1px solid rgba(244, 246, 248, 0.16);
  pointer-events: none; z-index: 3;
}

/* — PLACEHOLDERS DEL MOODBOARD (se reemplazan por el arte de Nano Banana) — */

/* CIERRE: plate fotográfico de haze al fondo (board 04) bajo el glow ámbar.
   God-rays + polvo en suspensión, duotono carbón cálido. WebP con fallback JPG. */
.close {
  background-image:
    linear-gradient(to bottom, rgba(10, 11, 13, 0.82), rgba(10, 11, 13, 0.94)),
    image-set(
      url("assets/tex/haze-plate.webp") type("image/webp"),
      url("assets/tex/haze-plate.jpg") type("image/jpeg"));
  background-image:
    linear-gradient(to bottom, rgba(10, 11, 13, 0.82), rgba(10, 11, 13, 0.94)),
    url("assets/tex/haze-plate.jpg"); /* fallback navegadores sin image-set */
  background-image:
    linear-gradient(to bottom, rgba(10, 11, 13, 0.82), rgba(10, 11, 13, 0.94)),
    -webkit-image-set(
      url("assets/tex/haze-plate.webp") type("image/webp"),
      url("assets/tex/haze-plate.jpg") type("image/jpeg"));
  background-size: cover;
  background-position: center;
}

/* PROCESO: rejilla editorial SVG nativa al fondo (board 03), español + paleta */
.process {
  background-image:
    linear-gradient(rgba(10, 11, 13, 0.68), rgba(10, 11, 13, 0.84)),
    url("assets/tex/grid-plate.svg");
  background-size: cover;
  background-position: center;
}

/* STACK: TERMINAL CRT VIVO — fósforo lima sobre carbón (board 02), HTML/CSS/JS nativo */
.stack__media {
  position: relative;
  margin: 10vh auto 0;
  max-width: 460px;
}
.crt {
  position: relative;
  padding: 18px;
  border-radius: 14px;
  background:
    linear-gradient(160deg, #15171b 0%, #0b0c0f 60%, #050608 100%);
  box-shadow:
    0 40px 90px -45px rgba(0, 0, 0, 0.95),
    0 0 70px -34px rgba(242, 162, 60, 0.22),
    inset 0 1px 0 rgba(244, 246, 248, 0.06);
  border: 1px solid rgba(244, 246, 248, 0.07);
}
.crt__bezel {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  background: radial-gradient(120% 130% at 50% 0%, #0a1006 0%, #05070a 70%, #020304 100%);
  box-shadow: inset 0 0 60px rgba(0, 0, 0, 0.9), inset 0 0 0 1px rgba(242, 162, 60, 0.08);
  aspect-ratio: 4 / 3;
}
.crt__screen {
  position: absolute; inset: 0;
  padding: 18px 20px;
  display: flex; flex-direction: column;
  color: var(--lime);
  text-shadow: 0 0 6px rgba(242, 162, 60, 0.55), 0 0 14px rgba(242, 162, 60, 0.28);
  z-index: 1;
}
.crt__bar {
  display: flex; align-items: center; gap: 8px;
  font-size: 0.62rem; letter-spacing: 0.14em;
  color: rgba(242, 162, 60, 0.78);
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(242, 162, 60, 0.18);
  margin-bottom: 12px;
}
.crt__led {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--lime);
  box-shadow: 0 0 8px rgba(242, 162, 60, 0.9);
  animation: crtLed 1.8s ease-in-out infinite;
}
@keyframes crtLed { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
.crt__log {
  margin: 0; flex: 1;
  font-size: clamp(0.6rem, 1.6vw, 0.74rem);
  line-height: 1.62;
  white-space: pre-wrap; word-break: break-word;
}
.crt__log .crt__cur {
  display: inline-block;
  width: 0.6em; height: 1.02em;
  margin-left: 1px;
  background: var(--lime);
  box-shadow: 0 0 8px rgba(242, 162, 60, 0.8);
  vertical-align: -0.16em;
  animation: crtBlink 1s steps(1) infinite;
}
.crt__log .crt__ok { color: var(--bone); text-shadow: 0 0 6px rgba(244, 246, 248, 0.4); }
.crt__log .crt__dim { color: rgba(242, 162, 60, 0.5); }
@keyframes crtBlink { 0%, 50% { opacity: 1; } 50.01%, 100% { opacity: 0; } }
/* scanlines */
.crt__scan {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background-image: repeating-linear-gradient(to bottom, rgba(0,0,0,0) 0 2px, rgba(0,0,0,0.28) 2px 3px);
  mix-blend-mode: multiply; opacity: 0.55;
}
/* curved-glass vignette */
.crt__vignette {
  position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: radial-gradient(120% 120% at 50% 45%, rgba(0,0,0,0) 55%, rgba(0,0,0,0.55) 100%);
}
/* soft top glass reflection */
.crt__glow {
  position: absolute; left: 6%; right: 6%; top: 4%; height: 30%; z-index: 4; pointer-events: none;
  background: linear-gradient(to bottom, rgba(244,246,248,0.06), rgba(244,246,248,0));
  border-radius: 50%;
  filter: blur(6px);
}
@media (prefers-reduced-motion: reduce) {
  .crt__led, .crt__log .crt__cur { animation: none; }
}
.stack__cap {
  display: block; margin-top: 14px; text-align: center;
  font-size: 0.66rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--bone-60);
}

/* FOOTER: sello de iris SVG nativo (board 01) — apertura halftone lima */
.footer__brand { display: flex; align-items: center; gap: 14px; }
.footer__seal {
  width: 32px; height: 32px; object-fit: contain;
  opacity: 0.92;
  filter: drop-shadow(0 0 6px rgba(242, 162, 60, 0.25));
}
@media (max-width: 720px) { .footer__seal { width: 26px; height: 26px; } }

/* ============================================================
   SISTEMA DEL OJO — lenguaje gráfico de marca (jun 2026)
   El ojo = el lente. Dos motivos curados del moodboard:
   · semitono de puntos (halftone editorial)
   · anillos concéntricos (grabado del iris)
   + Fraunces elevada a voz de autor. Carbon manda, lima <3%.
   Todo enmascarado con falloff: respira, no satura.
   ============================================================ */

/* — Motivo 1 · semitono de puntos como token reutilizable — */
.tex-dots { position: relative; isolation: isolate; }
.tex-dots::after {
  content: ""; position: absolute; inset: 0;
  pointer-events: none; z-index: 0;
  background-image: radial-gradient(currentColor 0.6px, transparent 0.9px);
  background-size: 7px 7px;
  color: var(--bone);
  opacity: 0.035;
  -webkit-mask-image: radial-gradient(ellipse 72% 64% at 50% 46%, #000 0%, transparent 80%);
          mask-image: radial-gradient(ellipse 72% 64% at 50% 46%, #000 0%, transparent 80%);
}
.tex-dots > * { position: relative; z-index: 1; }
.tex-dots--lime::after { color: var(--lime); opacity: 0.05; }

/* — Motivo 2 · anillos concéntricos: el iris grabado — */
.iris-mark {
  position: absolute;
  width: clamp(280px, 36vw, 560px);
  aspect-ratio: 1;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  opacity: 0.42;
  background:
    repeating-radial-gradient(circle at 50% 50%,
      rgba(244,246,248,0.11) 0px,
      rgba(244,246,248,0.11) 1px,
      transparent 1.4px,
      transparent 7px);
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 0%, #000 36%, transparent 72%);
          mask-image: radial-gradient(circle at 50% 50%, #000 0%, #000 36%, transparent 72%);
}
/* pupila: iris central con tinte lima mínimo */
.iris-mark::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: radial-gradient(circle at 50% 50%,
    rgba(242,162,60,0.15) 0%,
    rgba(242,162,60,0.05) 9%,
    transparent 27%);
}
@media (prefers-reduced-motion: no-preference) {
  .iris-mark { animation: iris-breathe 15s ease-in-out infinite; }
}
@keyframes iris-breathe {
  0%, 100% { transform: scale(1);     opacity: 0.40; }
  50%      { transform: scale(1.035); opacity: 0.58; }
}

/* — Voz de autor · Fraunces editorial, óptica fina — */
.kw, .thesis__sig, .director__quote { font-optical-sizing: auto; }
.author-accent {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-optical-sizing: auto;
  letter-spacing: -0.012em;
  color: var(--bone-85);
}
.author-accent em, .author-accent .kw { font-style: italic; color: var(--lime); }

/* iris del cierre — centrado tras el titular, detrás del resplandor */
.close__iris {
  left: 50%; top: 38%;
  transform: translate(-50%, -50%);
  opacity: 0.4;
}
@media (prefers-reduced-motion: no-preference) {
  .close__iris { animation: iris-breathe-center 15s ease-in-out infinite; }
}
@keyframes iris-breathe-center {
  0%, 100% { transform: translate(-50%, -50%) scale(1);     opacity: 0.38; }
  50%      { transform: translate(-50%, -50%) scale(1.035); opacity: 0.56; }
}
@media (max-width: 720px) { .close__iris { top: 30%; opacity: 0.3; } }

/* la frase de autor del multiplicador conserva su sangría editorial */
.multiplier__close.author-accent {
  font-size: clamp(1rem, 1.5vw, 1.18rem);
  line-height: 1.5;
  color: var(--bone-75);
}

/* ============================================================
   ESPÉCIMEN TIPOGRÁFICO — corte tonal claro (bone), lenguaje
   suizo/editorial. El único respiro luminoso del scroll: grilla
   de baseline, contraste de escala, anotación técnica de slate y
   el sistema tipográfico de la marca como vidriera de craft.
   Lime SOLO como bloque de acento (sobre bone no contrasta como
   texto) → se respeta el documento madre.
   ============================================================ */
.spec {
  position: relative;
  isolation: isolate;
  background: var(--bone);
  color: var(--carbon);
  padding: clamp(96px, 16vh, 200px) 0;
  overflow: hidden;
}
/* grilla de baseline tenue (Swiss) + hairline de aire arriba/abajo */
.spec::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image: repeating-linear-gradient(
    to bottom,
    rgba(10, 11, 13, 0.045) 0px,
    rgba(10, 11, 13, 0.045) 1px,
    transparent 1px,
    transparent 40px
  );
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 14%, #000 86%, transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0%, #000 14%, #000 86%, transparent 100%);
  opacity: 0.7;
}
.spec > .wrap { position: relative; z-index: 1; }

/* fila de metadatos editorial (mono, hairline) */
.spec__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px 22px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(10, 11, 13, 0.18);
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(10, 11, 13, 0.62);
}
.spec__tag {
  background: var(--lime);
  color: var(--carbon);
  padding: 0.28em 0.6em;
  letter-spacing: 0.16em;
  font-weight: 500;
}
.spec__meta-sp { margin-left: auto; }
@media (max-width: 720px) { .spec__meta-sp { margin-left: 0; } }

/* titular suizo gigante (grotesca, carbon) con bloque lime */
.spec__head {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(2.6rem, 8vw, 6.6rem);
  line-height: 0.96;
  letter-spacing: -0.035em;
  color: var(--carbon);
  margin: clamp(36px, 7vh, 80px) 0 0;
  text-wrap: balance;
}
.spec__mark {
  background: var(--lime);
  color: var(--carbon);
  padding: 0 0.1em;
  margin: 0 -0.04em;
  -webkit-box-decoration-break: clone;
          box-decoration-break: clone;
}
.spec__lede {
  max-width: 46ch;
  margin: clamp(26px, 4vh, 44px) 0 0;
  font-family: var(--body);
  font-size: clamp(1rem, 1.5vw, 1.22rem);
  line-height: 1.6;
  color: rgba(10, 11, 13, 0.74);
}

/* sistema tipográfico — 4 voces como espécimen editorial */
.spec__system {
  margin-top: clamp(48px, 9vh, 104px);
  border-top: 1px solid rgba(10, 11, 13, 0.22);
}
.spec__row {
  display: grid;
  grid-template-columns: minmax(108px, 0.22fr) 1fr;
  gap: clamp(16px, 4vw, 56px);
  align-items: baseline;
  padding: clamp(20px, 3.4vh, 34px) 0;
  border-bottom: 1px solid rgba(10, 11, 13, 0.14);
}
.spec__role { display: flex; flex-direction: column; gap: 5px; padding-top: 0.4em; }
.spec__role-name {
  font-size: 0.74rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--carbon);
}
.spec__role-spec {
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  color: rgba(10, 11, 13, 0.5);
}
.spec__sample { color: var(--carbon); line-height: 1.02; }
.spec__sample--display {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.8rem, 5.2vw, 4rem);
  letter-spacing: -0.03em;
}
.spec__sample--editorial {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-optical-sizing: auto;
  font-size: clamp(1.7rem, 5vw, 3.8rem);
  letter-spacing: -0.012em;
}
.spec__sample--body {
  font-family: var(--body);
  font-weight: 400;
  font-size: clamp(1.05rem, 2vw, 1.5rem);
  line-height: 1.45;
  max-width: 40ch;
  color: rgba(10, 11, 13, 0.82);
}
.spec__sample--tech {
  font-family: var(--mono);
  font-weight: 500;
  font-size: clamp(0.9rem, 1.7vw, 1.35rem);
  letter-spacing: 0.04em;
  color: rgba(10, 11, 13, 0.78);
}

/* hilera de glifos — celebra los caracteres en español (tildes, ñ) */
.spec__glyphs {
  margin: clamp(40px, 7vh, 80px) 0 0;
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(1.1rem, 3vw, 2.3rem);
  letter-spacing: 0.04em;
  line-height: 1.3;
  color: rgba(10, 11, 13, 0.34);
  word-spacing: 0.1em;
}

/* pie editorial */
.spec__foot {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: clamp(40px, 7vh, 76px);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(10, 11, 13, 0.55);
}
.spec__rule { flex: 1; height: 1px; background: rgba(10, 11, 13, 0.22); }

@media (max-width: 720px) {
  .spec__row { grid-template-columns: 1fr; gap: 10px; }
  .spec__role { flex-direction: row; flex-wrap: wrap; gap: 6px 12px; align-items: baseline; padding-top: 0; }
  .spec__foot { flex-direction: row-reverse; }
}

/* kicker — homenaje al póster "cuando el orden se volvió lenguaje" */
.spec__kicker {
  margin-top: clamp(28px, 5vh, 52px);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(10, 11, 13, 0.5);
}
.spec__head { margin-top: clamp(14px, 2vh, 22px); }

/* índice alfabético por voz (lista numerada suiza) */
.spec__role-idx {
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  color: var(--carbon);
  background: rgba(10, 11, 13, 0.08);
  border: 1px solid rgba(10, 11, 13, 0.18);
  width: 1.7em; height: 1.7em;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 2px;
  margin-bottom: 2px;
}

/* marcas de corte/registro de imprenta (detalle de proof editorial) */
.spec__crop {
  position: absolute;
  width: 18px; height: 18px;
  z-index: 2; pointer-events: none;
  opacity: 0.55;
}
.spec__crop::before, .spec__crop::after { content: ""; position: absolute; background: rgba(10, 11, 13, 0.6); }
.spec__crop::before { width: 18px; height: 1px; top: 0; }
.spec__crop::after  { width: 1px; height: 18px; left: 0; }
.spec__crop--tl { top: clamp(20px, 4vh, 44px); left: clamp(16px, 4vw, 56px); }
.spec__crop--tr { top: clamp(20px, 4vh, 44px); right: clamp(16px, 4vw, 56px); }
.spec__crop--tr::before { right: 0; left: auto; }
.spec__crop--tr::after  { right: 0; left: auto; }
.spec__crop--bl { bottom: clamp(20px, 4vh, 44px); left: clamp(16px, 4vw, 56px); }
.spec__crop--bl::before { bottom: 0; top: auto; }
.spec__crop--br { bottom: clamp(20px, 4vh, 44px); right: clamp(16px, 4vw, 56px); }
.spec__crop--br::before { bottom: 0; top: auto; right: 0; left: auto; }
.spec__crop--br::after  { right: 0; left: auto; }

/* etiqueta vertical rotada (anotación lateral suiza) */
.spec__vlabel {
  position: absolute;
  top: 50%; left: clamp(10px, 2.4vw, 30px);
  transform: translateY(-50%) rotate(180deg);
  writing-mode: vertical-rl;
  font-size: 0.64rem;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: rgba(10, 11, 13, 0.34);
  z-index: 2; pointer-events: none;
}
@media (max-width: 1100px) { .spec__vlabel { display: none; } }

/* ============================================================
   LA FIRMA — banda lime plena de cierre. Único bloque de color
   saturado del scroll: estampa editorial, carbón sobre lime.
   ============================================================ */
.sign {
  position: relative;
  isolation: isolate;
  background: var(--lime);
  color: var(--carbon);
  padding: clamp(64px, 12vh, 150px) 0;
  overflow: hidden;
}
/* trama de puntos en carbón sobre el lime (eco del Sistema del Ojo) */
.sign::before {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none; z-index: 0;
  background-image: radial-gradient(rgba(10, 11, 13, 0.18) 0.7px, transparent 1px);
  background-size: 9px 9px;
  opacity: 0.5;
  -webkit-mask-image: radial-gradient(ellipse 82% 72% at 50% 50%, #000 0%, transparent 80%);
          mask-image: radial-gradient(ellipse 82% 72% at 50% 50%, #000 0%, transparent 80%);
}
.sign > .wrap { position: relative; z-index: 1; }
.sign__meta {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(10, 11, 13, 0.28);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(10, 11, 13, 0.62);
}
.sign__line {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.9rem, 6.4vw, 5.2rem);
  line-height: 0.98;
  letter-spacing: -0.032em;
  color: var(--carbon);
  margin: clamp(30px, 5.5vh, 64px) 0;
  text-wrap: balance;
}
.sign__em { color: rgba(10, 11, 13, 0.66); }
.sign__foot {
  display: flex; align-items: center; gap: 11px;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(10, 11, 13, 0.7);
}
.sign__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--carbon); flex: none; }
/* marcas de corte en la banda (proof) */
.sign__crop { position: absolute; width: 16px; height: 16px; z-index: 2; pointer-events: none; opacity: 0.5; }
.sign__crop::before, .sign__crop::after { content: ""; position: absolute; background: rgba(10, 11, 13, 0.55); }
.sign__crop::before { width: 16px; height: 1px; }
.sign__crop::after  { width: 1px; height: 16px; }
.sign__crop--tl { top: 22px; left: clamp(16px, 4vw, 56px); }
.sign__crop--br { bottom: 22px; right: clamp(16px, 4vw, 56px); }
.sign__crop--br::before { bottom: 0; right: 0; }
.sign__crop--br::after  { bottom: 0; right: 0; }
@media (max-width: 720px) { .sign__foot { letter-spacing: 0.12em; } }