/* ============================================================
   ALTUUM · capa de sitio — grupoaltuum.com
   v2 · Sistema "plancha de grabado"

   Se apila sobre altuum.css. No redefine tokens de marca.
   Prefijo: .s-

   Tres materiales y nada más:
     PAPEL  var(--alt-n-50)   fondo dominante
     PLANO  var(--alt-a-900)  contrafondo
     SELLO  var(--alt-v-500)  menos del 3% de la superficie

   Dos registros tipográficos:
     DISPLAY  Instrument Serif, versales, tracking negativo
     TODO LO DEMÁS  Geist · etiquetas y cifras en Geist Mono
   ============================================================ */

/* ─── 0 · Tipografía de display ──────────────────────────── */
@font-face{
  font-family:"Instrument Serif"; font-style:normal; font-weight:400; font-display:swap;
  src:url("/fonts/InstrumentSerif-Regular.woff2") format("woff2");
}
:root{
  --s-display:"Instrument Serif",Georgia,"Times New Roman",serif;
  --s-t-titan:clamp(2.75rem,1.1rem + 6.4vw,7.5rem);
  --s-t-grande:clamp(2.5rem,1.1rem + 5.6vw,5.75rem);
  --s-t-medio:clamp(1.875rem,1.1rem + 3.2vw,3.5rem);
  --s-comb:#16191B;
}

/* Los títulos de display: versales, apretados. El tracking se
   cierra conforme crece el tamaño — igual que en composición. */
.s-d{
  font-family:var(--s-display); font-weight:400; text-transform:uppercase;
  line-height:.92; letter-spacing:-.03em; text-wrap:balance;
  font-feature-settings:"kern" 1; -webkit-font-smoothing:antialiased;
}
.s-d--titan{font-size:var(--s-t-titan); letter-spacing:-.045em; line-height:.86}
.s-d--grande{font-size:var(--s-t-grande); letter-spacing:-.038em; line-height:.9}
.s-d--medio{font-size:var(--s-t-medio); letter-spacing:-.03em; line-height:.96}

/* Sangrado: el título sale por el borde del contenedor.
   La sección recorta, nunca la página. */
.s-sangra-d{margin-right:calc(-1 * var(--alt-gutter)); padding-right:0}
.s-sangra-i{margin-left:calc(-1 * var(--alt-gutter))}

/* ─── 1 · Revelado a prueba de fallos ────────────────────── */
.s-rev{opacity:1; transform:none}
html.js .s-rev{opacity:0; transform:translateY(16px);
  transition:opacity var(--alt-dur-4) var(--alt-ease), transform var(--alt-dur-4) var(--alt-ease)}
html.js .s-rev.is-in, html.js.s-todo-visible .s-rev{opacity:1; transform:none}
.s-rev--d1{transition-delay:80ms} .s-rev--d2{transition-delay:160ms}
.s-rev--d3{transition-delay:240ms} .s-rev--d4{transition-delay:320ms}
@media (prefers-reduced-motion:reduce){
  html.js .s-rev{opacity:1; transform:none; transition:none}
}

/* ─── 2 · Materiales ─────────────────────────────────────── */
.s-papel{background:var(--alt-n-50); color:var(--alt-n-900)}
.s-plano{background:var(--alt-a-900); color:var(--alt-n-50)}
.s-tinta{background:var(--alt-n-900); color:var(--alt-n-50)}
.s-plano .s-lead,.s-tinta .s-lead{color:var(--alt-a-200)}
.s-lead{font-size:var(--alt-t-lead); line-height:1.62; color:var(--alt-text-2); max-width:56ch}
.s-sello{width:9px;height:9px;border-radius:50%;background:var(--alt-v-500);display:inline-block;flex:none}

.s-cap{position:relative; padding-block:clamp(96px,12vw,190px); overflow:hidden}
/* Una sección que recibe el peine necesita aire arriba para que
   los trazos no se coman su propio encabezado. */
.s-cap--peine{padding-top:clamp(150px,15vw,250px)}
.s-cap--corta{padding-block:clamp(64px,8vw,120px)}

.s-kicker{font-family:var(--alt-mono); font-size:var(--alt-t-label); font-weight:500;
  letter-spacing:.18em; text-transform:uppercase; color:var(--alt-text-2)}
.s-plano .s-kicker,.s-tinta .s-kicker{color:var(--alt-a-200)}
.s-num{font-family:var(--alt-mono); font-size:var(--alt-t-label); letter-spacing:.12em;
  color:var(--alt-seal-ink)}
.s-plano .s-num,.s-tinta .s-num{color:var(--alt-v-300)}
.s-meta{display:flex; align-items:baseline; gap:var(--alt-s-4); margin-bottom:var(--alt-s-6)}

/* ─── 3 · El peine · la técnica de la casa ───────────────
   Un lienzo de trazos verticales cuya longitud sale de un
   campo de curvas de nivel. Disuelve bordes y barre secciones.
   Si el lienzo no pinta, no pasa nada: es puramente decorativo
   y va detrás del contenido.
   ------------------------------------------------------- */
.s-peine{position:absolute; left:0; right:0; pointer-events:none; z-index:1;
  display:block; width:100%}
.s-peine--sup{top:-1px; z-index:1}
.s-peine--inf{bottom:-1px}
.s-cap > .alt-container{position:relative; z-index:2}

/* Medidor de avance — el código de barras de la esquina */
.s-avance{color:var(--alt-n-900); position:fixed; left:var(--alt-gutter); bottom:22px; z-index:calc(var(--alt-z-nav) + 1);
  width:96px; height:16px; pointer-events:none; opacity:.85;
  transition:opacity var(--alt-dur-2) var(--alt-ease)}
.s-avance.is-claro{color:var(--alt-n-50)}
@media (max-width:600px){.s-avance{width:64px; left:16px; bottom:14px}}

/* ─── 4 · Navegación ─────────────────────────────────────── */
.s-nav{position:fixed; top:0; left:0; right:0; z-index:var(--alt-z-nav);
  height:var(--alt-nav-h); display:flex; align-items:center; color:var(--alt-n-50);
  background:transparent; border-bottom:1px solid transparent;
  transition:background var(--alt-dur-3) var(--alt-ease),
             border-color var(--alt-dur-3) var(--alt-ease), color var(--alt-dur-3) var(--alt-ease)}
.s-nav__in{display:flex; align-items:center; justify-content:space-between; gap:var(--alt-s-5); width:100%}
.s-nav__logo{display:flex; align-items:center; gap:6px; text-decoration:none; color:inherit; flex:none}
.s-nav__punto{width:7px;height:7px;border-radius:50%;background:var(--alt-v-500);margin-bottom:-10px}
.s-nav__links{display:flex; align-items:center; gap:var(--alt-s-6); list-style:none}
.s-nav__links a{text-decoration:none; font-family:var(--alt-mono); font-size:var(--alt-t-label);
  letter-spacing:.16em; text-transform:uppercase; color:currentColor; opacity:.7;
  transition:opacity var(--alt-dur-1) var(--alt-ease)}
.s-nav__links a:hover,.s-nav__links a:focus-visible{opacity:1}
.s-nav__cta{display:inline-flex; align-items:center; height:38px; padding-inline:var(--alt-s-5);
  border:1px solid currentColor; border-radius:999px; font-family:var(--alt-mono);
  font-size:var(--alt-t-label); letter-spacing:.16em; text-transform:uppercase;
  text-decoration:none; color:currentColor;
  transition:background var(--alt-dur-2) var(--alt-ease), color var(--alt-dur-2) var(--alt-ease)}
.s-nav__cta:hover{background:currentColor}
.s-nav__cta:hover span{color:var(--alt-a-900)}
.s-nav.is-papel{background:rgba(243,245,246,.97); backdrop-filter:blur(10px);
  border-bottom-color:var(--alt-line); color:var(--alt-n-900)}
.s-nav.is-papel .s-nav__cta:hover span{color:var(--alt-n-50)}
.s-nav.is-plano{background:rgba(18,36,47,.93); backdrop-filter:blur(10px);
  border-bottom-color:var(--alt-line-plane); color:var(--alt-n-50)}

/* ─── 5 · Héroe · la plancha que se aleja ────────────────
   La sección mide dos pantallas y media; dentro, un bloque
   pegado que se encoge conforme se hace scroll, como una
   lámina de levantamiento que se coloca sobre la mesa.
   ------------------------------------------------------- */
.s-hero{position:relative; height:250svh; background:var(--alt-n-50)}
.s-hero__fijo{position:sticky; top:0; height:100svh; overflow:hidden;
  display:grid; place-items:center; background:var(--alt-n-50)}
.s-hero__plancha{position:absolute; inset:0; overflow:hidden;
  transform-origin:50% 46%; will-change:transform;
  background:var(--alt-a-900); color:var(--alt-n-50)}
.s-hero__mapa{position:absolute; inset:0}
.s-hero__mapa img{width:100%; height:100%; object-fit:cover}
.s-hero__velo{position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(12,24,32,.62) 0%,rgba(12,24,32,.12) 40%,rgba(12,24,32,.9) 100%)}
.s-hero__texto{position:absolute; inset:auto 0 0 0;
  padding:calc(var(--alt-nav-h) + var(--alt-s-6)) 0 clamp(44px,6vw,88px);
  max-height:100%; overflow:hidden; display:flex; align-items:flex-end}
.s-hero__kicker{font-family:var(--alt-mono); font-size:var(--alt-t-label); letter-spacing:.22em;
  text-transform:uppercase; color:var(--alt-v-300); margin-bottom:var(--alt-s-5)}
.s-hero__t{color:#fff; max-width:19ch}
.s-hero__t em{font-style:normal; color:var(--alt-a-200)}
.s-hero__pie{margin-top:var(--alt-s-7); display:flex; align-items:flex-end;
  justify-content:space-between; gap:var(--alt-s-6); flex-wrap:wrap}
.s-hero__lead{max-width:40ch; color:var(--alt-a-200); font-size:var(--alt-t-lead); line-height:1.6}
.s-hero__baja{display:inline-flex; align-items:center; gap:var(--alt-s-3); text-decoration:none;
  color:var(--alt-a-200); font-family:var(--alt-mono); font-size:var(--alt-t-label);
  letter-spacing:.16em; text-transform:uppercase; flex:none}
.s-hero__baja:hover{color:#fff}
.s-hero__flecha{width:34px;height:34px;border:1px solid var(--alt-line-plane);border-radius:50%;
  display:grid;place-items:center;animation:s-baja 2.6s var(--alt-ease) infinite}
@keyframes s-baja{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}}
/* Marca de lámina: aparece cuando la plancha ya se alejó */
.s-hero__marca{position:absolute; left:var(--alt-gutter); bottom:var(--alt-s-7); z-index:0;
  font-family:var(--alt-mono); font-size:var(--alt-t-label); letter-spacing:.16em;
  text-transform:uppercase; color:var(--alt-text-3); opacity:0;
  transition:opacity var(--alt-dur-4) var(--alt-ease)}
.s-hero__marca.is-in{opacity:1}
@media (prefers-reduced-motion:reduce){
  .s-hero{height:auto}
  .s-hero__fijo{position:static; height:100svh}
  .s-hero__flecha{animation:none}
}

/* ─── 6 · Contraste ──────────────────────────────────────── */
.s-contraste{display:grid; gap:var(--alt-s-8); align-items:center}
@media (min-width:900px){.s-contraste{grid-template-columns:1fr auto 1fr; gap:clamp(32px,5vw,88px)}}
.s-contraste__col{min-width:0}
@media (min-width:900px){.s-contraste__col--b{text-align:right}}
.s-contraste__lista{list-style:none; display:flex; flex-direction:column; gap:0}
.s-contraste__lista li{font-family:var(--s-display); text-transform:uppercase;
  font-size:clamp(2rem,1rem + 4vw,3.75rem); line-height:1.02; letter-spacing:-.03em}
.s-contraste__col--a li{color:var(--alt-n-500)}
.s-contraste__col--b li{color:var(--alt-n-900)}

/* ─── 7 · La tira · viaje horizontal ─────────────────────
   Una banda de nombres en display que se desplaza en
   horizontal mientras la página baja. Es decorativa y
   duplicada para lectores de pantalla: aria-hidden.
   ------------------------------------------------------- */
.s-tira{position:relative; overflow:hidden; padding-block:var(--alt-s-6);
  border-block:1px solid var(--alt-line); margin-bottom:clamp(48px,6vw,88px)}
.s-plano .s-tira{border-color:var(--alt-line-plane)}
.s-tira__pista{display:flex; gap:clamp(32px,4vw,72px); white-space:nowrap;
  will-change:transform; width:max-content}
.s-tira__i{font-family:var(--s-display); text-transform:uppercase;
  font-size:clamp(1.75rem,1rem + 2.6vw,3rem); letter-spacing:-.03em; line-height:1;
  color:var(--alt-n-300); display:inline-flex; align-items:center; gap:clamp(32px,4vw,72px)}
.s-plano .s-tira__i{color:var(--alt-a-400)}
.s-tira__i::after{content:""; width:7px; height:7px; border-radius:50%;
  background:var(--alt-v-500); opacity:.55; flex:none}

/* ─── 8 · Lista de capacidades ───────────────────────────── */
.s-lista{border-top:1px solid var(--alt-line)}
.s-plano .s-lista{border-color:var(--alt-line-plane)}
.s-item{border-bottom:1px solid var(--alt-line)}
.s-plano .s-item{border-color:var(--alt-line-plane)}
.s-item__b{display:grid; grid-template-columns:auto 1fr auto; gap:var(--alt-s-4);
  align-items:center; width:100%; text-align:left; padding-block:clamp(20px,2.4vw,32px); cursor:pointer}
@media (min-width:768px){.s-item__b{grid-template-columns:56px 1fr auto; gap:var(--alt-s-6)}}
.s-item__t{font-family:var(--s-display); text-transform:uppercase;
  font-size:clamp(1.5rem,1rem + 1.8vw,2.375rem); letter-spacing:-.028em; line-height:1.02;
  transition:color var(--alt-dur-2) var(--alt-ease)}
.s-item__b:hover .s-item__t,.s-item__b:focus-visible .s-item__t{color:var(--alt-seal-ink)}
.s-item__mas{width:20px;height:20px;position:relative;flex:none}
.s-item__mas::before,.s-item__mas::after{content:"";position:absolute;inset:50% 0 auto 0;
  height:1px;background:currentColor;opacity:.55}
.s-item__mas::after{transform:rotate(90deg);
  transition:transform var(--alt-dur-3) var(--alt-ease),opacity var(--alt-dur-3) var(--alt-ease)}
.s-item__b[aria-expanded="true"] .s-item__mas::after{transform:rotate(0);opacity:0}
.s-item__p{padding-bottom:clamp(24px,3vw,40px)}
@media (min-width:768px){.s-item__p{padding-left:calc(56px + var(--alt-s-6))}}
.s-item__p[hidden]{display:none}
.s-item__desc{max-width:62ch; color:var(--alt-text-2); font-size:var(--alt-t-lead)}
.s-plano .s-item__desc{color:var(--alt-a-200)}
.s-tags{display:flex;flex-wrap:wrap;gap:var(--alt-s-2);margin-top:var(--alt-s-5)}
.s-tag{font-family:var(--alt-mono);font-size:var(--alt-t-label);letter-spacing:.1em;
  text-transform:uppercase;padding:5px 10px;border:1px solid var(--alt-line);
  border-radius:999px;color:var(--alt-text-3)}
.s-plano .s-tag{border-color:var(--alt-line-plane);color:var(--alt-a-200)}

/* ─── 9 · Territorio ─────────────────────────────────────── */
.s-mapa{position:relative}
.s-mapa__lienzo{position:relative; width:100%; aspect-ratio:16/9; min-height:320px; max-height:76svh}
.s-mapa__lienzo img{width:100%;height:100%;object-fit:cover}
.s-mapa__hud{position:absolute; right:var(--alt-gutter); top:var(--alt-s-6); z-index:3;
  text-align:right; display:flex; flex-direction:column; gap:6px;
  font-family:var(--alt-mono); font-size:var(--alt-t-label); letter-spacing:.12em;
  text-transform:uppercase; color:var(--alt-a-200)}
.s-mapa__leyenda{display:flex; flex-wrap:wrap; gap:var(--alt-s-5);
  padding:var(--alt-s-5) 0 0; font-family:var(--alt-mono); font-size:var(--alt-t-label);
  letter-spacing:.1em; text-transform:uppercase; color:var(--alt-a-200)}
.s-mapa__leyenda span{display:inline-flex;align-items:center;gap:8px}
.s-mapa__pt{width:8px;height:8px;border-radius:50%;flex:none}
@media (max-width:700px){
  .s-mapa__hud{display:none}
  .s-mapa__lienzo{aspect-ratio:3/4; max-height:none}
}

/* ─── 10 · Escenarios ────────────────────────────────────── */
.s-esc{display:grid; gap:clamp(56px,7vw,104px)}
.s-esc__i{display:grid; gap:var(--alt-s-6)}
@media (min-width:1024px){
  .s-esc__i{grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:clamp(32px,5vw,72px); align-items:start}
  .s-esc__i > div:first-child{position:sticky; top:calc(var(--alt-nav-h) + 56px)}
}
.s-esc__k{font-family:var(--alt-mono); font-size:var(--alt-t-label); letter-spacing:.16em;
  text-transform:uppercase; color:var(--alt-v-300); margin-bottom:var(--alt-s-4)}
.s-esc__cuerpo{display:flex; flex-direction:column; gap:var(--alt-s-5)}
.s-esc__cuerpo p{max-width:60ch; color:var(--alt-a-200); line-height:1.72}
.s-esc__cuerpo p strong{color:#fff; font-weight:500}
.s-esc__fig{margin-top:var(--alt-s-6); border:1px solid var(--alt-line-plane);
  border-radius:var(--alt-radius); padding:var(--alt-s-5); background:rgba(9,20,27,.5)}
.s-esc__fig img{width:100%;height:auto;display:block}
.s-esc__pie{margin-top:var(--alt-s-4); font-family:var(--alt-mono); font-size:var(--alt-t-label);
  letter-spacing:.1em; text-transform:uppercase; color:var(--alt-a-200); opacity:.75}

/* ─── 11 · Método ────────────────────────────────────────── */
.s-pasos{list-style:none; border-top:1px solid var(--alt-line)}
.s-paso{display:grid; gap:var(--alt-s-3); padding-block:clamp(22px,2.8vw,36px);
  border-bottom:1px solid var(--alt-line)}
@media (min-width:768px){
  .s-paso{grid-template-columns:56px minmax(0,1fr) minmax(0,1.3fr); gap:var(--alt-s-6); align-items:baseline}
}
.s-paso__t{font-family:var(--s-display); text-transform:uppercase;
  font-size:clamp(1.375rem,1rem + 1.2vw,1.875rem); letter-spacing:-.025em; line-height:1.05}
.s-paso__d{color:var(--alt-text-2); max-width:54ch}

/* ─── 12 · Creencia ──────────────────────────────────────── */
.s-creencia{padding-block:clamp(112px,14vw,200px) clamp(88px,10vw,150px)}
.s-creencia__t{max-width:17ch}
.s-creencia__t b{font-weight:400; color:var(--alt-v-400)}
.s-creencia__f{margin-top:var(--alt-s-8); max-width:50ch; color:var(--alt-n-300);
  font-size:var(--alt-t-lead); line-height:1.68}

/* ─── 13 · Contacto ──────────────────────────────────────── */
.s-contacto{display:grid; gap:clamp(40px,6vw,80px)}
@media (min-width:1024px){.s-contacto{grid-template-columns:minmax(0,6fr) minmax(0,5fr); align-items:start}}
.s-contacto__t{max-width:14ch}
.s-contacto__d{margin-top:var(--alt-s-6); max-width:44ch; color:var(--alt-text-2); font-size:var(--alt-t-lead)}
.s-contacto__dir{margin-top:var(--alt-s-7); display:flex; flex-direction:column; gap:var(--alt-s-2);
  font-family:var(--alt-mono); font-size:var(--alt-t-small)}
.s-contacto__dir a{text-decoration:none; border-bottom:1px solid var(--alt-line-strong);
  padding-bottom:2px; width:fit-content}
.s-form{display:flex;flex-direction:column;gap:var(--alt-s-5)}
.s-form__fila{display:grid;gap:var(--alt-s-5)}
@media (min-width:560px){.s-form__fila{grid-template-columns:1fr 1fr}}
.s-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
/* Turnstile: reserva su alto (65 px) para que el botón no brinque. */
.s-form__verif{min-height:65px;max-width:100%}
.s-form__campos{display:flex;flex-direction:column;gap:var(--alt-s-5)}
.s-form__envio{display:flex;flex-wrap:wrap;align-items:center;gap:var(--alt-s-4) var(--alt-s-5)}
/* La nota solo existe si algo falló: texto discreto junto al
   botón, no una caja de alerta. */
.s-form__nota{display:flex;gap:10px;align-items:baseline;max-width:40ch;
  font-size:var(--alt-t-small);line-height:1.5;color:var(--alt-error-ink)}
.s-form__nota::before{content:"";flex:none;width:7px;height:7px;border-radius:50%;
  background:currentColor;transform:translateY(-1px)}
.s-form__nota[hidden]{display:none}
.s-form__nota a{color:inherit}
/* Acuse de recibo: sustituye al formulario después de enviar. */
.s-form.is-enviado .s-form__campos{display:none}
.s-acuse{padding-top:var(--alt-s-2);outline:none}
.s-acuse[hidden]{display:none}
.s-acuse .s-kicker{display:flex;align-items:center;gap:10px;color:var(--alt-ok-ink)}
.s-acuse__punto{width:8px;height:8px;border-radius:50%;background:var(--alt-v-500);
  box-shadow:0 0 0 0 rgba(0,175,142,.45);animation:s-acuse-pulso 2.4s ease-out infinite}
.s-acuse__t{margin-top:var(--alt-s-5);max-width:14ch}
.s-acuse__d{margin-top:var(--alt-s-5);max-width:40ch;color:var(--alt-text-2);
  font-size:var(--alt-t-lead);line-height:1.6}
.s-acuse__d b{color:var(--alt-text);font-weight:500;overflow-wrap:anywhere}
.s-acuse__otro{margin-top:var(--alt-s-7);font-family:var(--alt-mono);font-size:var(--alt-t-label);
  letter-spacing:.12em;text-transform:uppercase;color:var(--alt-text-2);
  border-bottom:1px solid var(--alt-line-strong);padding:0 0 3px;background:none;cursor:pointer}
.s-acuse__otro:hover{color:var(--alt-text)}
.s-form.is-enviado .s-acuse{animation:s-acuse-entra .6s var(--alt-ease, ease) both}
@keyframes s-acuse-entra{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes s-acuse-pulso{70%{box-shadow:0 0 0 10px rgba(0,175,142,0)}100%{box-shadow:0 0 0 0 rgba(0,175,142,0)}}
@media (prefers-reduced-motion:reduce){
  .s-form.is-enviado .s-acuse,.s-acuse__punto{animation:none}
}

/* ─── 14 · Pie ───────────────────────────────────────────── */
.s-pie{position:relative; overflow:hidden; padding-block:clamp(56px,7vw,96px)}
.s-pie__top{display:flex;flex-wrap:wrap;gap:var(--alt-s-7);justify-content:space-between;align-items:flex-start}
.s-pie__marca svg{height:26px;width:auto;color:var(--alt-n-50)}
.s-pie__frase{margin-top:var(--alt-s-4);max-width:32ch;color:var(--alt-a-200);
  font-size:var(--alt-t-small);line-height:1.6}
.s-pie__nav{display:flex;flex-direction:column;gap:var(--alt-s-3);list-style:none}
.s-pie__nav a{color:var(--alt-a-200);text-decoration:none;font-family:var(--alt-mono);
  font-size:var(--alt-t-label);letter-spacing:.14em;text-transform:uppercase}
.s-pie__nav a:hover{color:#fff}
.s-pie__base{margin-top:clamp(48px,6vw,72px);padding-top:var(--alt-s-5);
  border-top:1px solid var(--alt-line-plane);display:flex;flex-wrap:wrap;gap:var(--alt-s-4);
  justify-content:space-between;font-family:var(--alt-mono);font-size:var(--alt-t-label);
  letter-spacing:.1em;text-transform:uppercase;color:var(--alt-a-200)}

/* ─── 15 · Menú en móvil ─────────────────────────────────── */
.s-nav__menu{display:none;align-items:center;gap:8px;height:38px;padding-inline:14px;
  border:1px solid currentColor;border-radius:999px;font-family:var(--alt-mono);
  font-size:var(--alt-t-label);letter-spacing:.14em;text-transform:uppercase;
  color:currentColor;background:none}
.s-nav__menu i{display:block;width:14px;height:1px;background:currentColor;position:relative;
  transition:background var(--alt-dur-1) linear}
.s-nav__menu i::before,.s-nav__menu i::after{content:"";position:absolute;left:0;width:14px;height:1px;
  background:currentColor;transition:transform var(--alt-dur-2) var(--alt-ease)}
.s-nav__menu i::before{top:-4px} .s-nav__menu i::after{top:4px}
.s-nav__menu[aria-expanded="true"] i{background:transparent}
.s-nav__menu[aria-expanded="true"] i::before{transform:translateY(4px) rotate(45deg)}
.s-nav__menu[aria-expanded="true"] i::after{transform:translateY(-4px) rotate(-45deg)}
.s-panel{position:fixed;inset:var(--alt-nav-h) 0 auto 0;z-index:calc(var(--alt-z-nav) - 1);
  background:var(--alt-a-900);color:var(--alt-n-50);border-bottom:1px solid var(--alt-line-plane);
  padding:var(--alt-s-6) var(--alt-gutter) var(--alt-s-7)}
.s-panel[hidden]{display:none}
.s-panel ol{list-style:none;display:flex;flex-direction:column}
.s-panel li{border-bottom:1px solid var(--alt-line-plane)}
.s-panel a{display:flex;align-items:baseline;gap:var(--alt-s-4);padding-block:var(--alt-s-4);
  text-decoration:none;color:var(--alt-n-50);font-family:var(--s-display);
  text-transform:uppercase;font-size:1.75rem;letter-spacing:-.025em}
.s-panel a span{font-family:var(--alt-mono);font-size:var(--alt-t-label);letter-spacing:.12em;
  color:var(--alt-v-300)}
@media (max-width:900px){
  .s-nav__links{display:none}
  .s-nav__menu{display:inline-flex}
  .s-nav__cta{display:none}
}

/* ════════════════════════════════════════════════════════════
   16 · DISOCIACIÓN DE PLANOS
   Cuatro mecanismos. Todos leen una sola variable, --p, que el
   JS escribe en la sección (0 al entrar, 1 al salir). Si el JS
   no corre, --p vale su valor de reposo y todo queda en su
   sitio, legible y quieto.
   ════════════════════════════════════════════════════════════ */

/* 16.1 · Segundo plano persistente ─────────────────────────
   Un campo cartográfico fijo detrás de TODO el sitio. Los
   planos oscuros son translúcidos, así que el fondo se ve
   moverse a través de ellos; el papel es opaco y lo tapa.
   Eso produce la sensación de dos profundidades distintas. */
.s-fondo{position:fixed; inset:-38vh -22vw; z-index:0; pointer-events:none;
  background:var(--alt-a-950); will-change:transform}
.s-fondo img{width:100%; height:100%; object-fit:cover; opacity:.62}
body > *:not(.s-fondo){position:relative; z-index:1}

/* El plano deja pasar el fondo; el papel no. */
.s-plano{background:rgba(18,36,47,.88)}
.s-tinta{background:rgba(22,25,27,.94)}
.s-papel{background:var(--alt-n-50)}

/* 16.2 · Convergencia horizontal opuesta ───────────────────
   Dos columnas entran desde lados contrarios mientras la
   página baja. Movimiento horizontal dentro de scroll
   vertical: es lo que rompe la monotonía del plano único. */
.s-contraste__col--a{transform:translateX(calc((1 - var(--p, 1)) * -46vw)); will-change:transform}
.s-contraste__col--b{transform:translateX(calc((1 - var(--p, 1)) * 46vw)); will-change:transform}
.s-contraste .s-sello{transform:scale(calc(.2 + .8 * var(--p, 1)));
  opacity:var(--p, 1); transition:none}
@media (prefers-reduced-motion:reduce){
  .s-contraste__col--a,.s-contraste__col--b{transform:none}
  .s-contraste .s-sello{transform:none; opacity:1}
}

/* 16.3 · Territorio · el mapa panea mientras el texto sube ──
   La sección mide dos pantallas y media. Dentro, el mapa se
   queda clavado y se desplaza en horizontal; el texto pasa
   por encima en vertical. Dos ejes a la vez. */
.s-terr{position:relative; height:260svh; background:var(--alt-a-950)}
.s-terr__fijo{position:sticky; top:0; height:100svh; overflow:hidden}
.s-terr__mapa{position:absolute; inset:0 -26%;
  transform:translate3d(calc(var(--p, 0) * -20%), 0, 0); will-change:transform}
.s-terr__mapa img{width:100%; height:100%; object-fit:cover}
.s-terr__velo{position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(10,20,27,.86) 0%,rgba(10,20,27,.28) 38%,rgba(10,20,27,.92) 100%)}
.s-terr__capa{position:absolute; inset:0; display:flex; align-items:center;
  color:var(--alt-n-50)}
.s-terr__texto{transform:translate3d(0, calc(var(--p, .5) * -22vh), 0); will-change:transform}
.s-terr__t{color:#fff; max-width:15ch}
.s-terr__lead{margin-top:var(--alt-s-6); max-width:46ch; color:var(--alt-a-200);
  font-size:var(--alt-t-lead); line-height:1.6}
.s-terr__leyenda{position:absolute; left:0; right:0; bottom:clamp(28px,5vh,64px);
  display:flex; flex-wrap:wrap; gap:var(--alt-s-5);
  font-family:var(--alt-mono); font-size:var(--alt-t-label); letter-spacing:.1em;
  text-transform:uppercase; color:var(--alt-a-200);
  opacity:calc((var(--p, 1) - .28) * 3); }
.s-terr__leyenda span{display:inline-flex; align-items:center; gap:8px}
.s-terr__hud{position:absolute; right:0; top:clamp(88px,12vh,140px);
  text-align:right; display:flex; flex-direction:column; gap:6px;
  font-family:var(--alt-mono); font-size:var(--alt-t-label); letter-spacing:.12em;
  text-transform:uppercase; color:var(--alt-a-200);
  transform:translate3d(calc(var(--p, 0) * 8vw), 0, 0)}
@media (max-width:820px){ .s-terr__hud{display:none} }
@media (prefers-reduced-motion:reduce){
  .s-terr{height:auto}
  .s-terr__fijo{position:static; height:auto; padding-block:clamp(96px,12vw,180px)}
  .s-terr__mapa{position:relative; inset:auto; transform:none; aspect-ratio:16/9;
    margin-top:var(--alt-s-8)}
  .s-terr__velo{display:none}
  .s-terr__capa{position:static; display:block}
  .s-terr__texto,.s-terr__hud{transform:none}
  .s-terr__leyenda{position:static; opacity:1; margin-top:var(--alt-s-5)}
}

/* 16.4 · Capacidades · recorrido horizontal clavado ─────────
   La sección se clava y las cinco capacidades desfilan en
   horizontal. Es el gesto más fuerte del sitio y por eso
   ocurre una sola vez. */
.s-hcap{position:relative; height:340svh; background:var(--alt-n-50)}
.s-hcap__fijo{position:sticky; top:0; height:100svh; overflow:hidden;
  display:flex; flex-direction:column; justify-content:center}
.s-hcap__enc{flex:none; padding-top:var(--alt-nav-h);
  transform:translate3d(calc(var(--p, 0) * -15vw), 0, 0); will-change:transform}
.s-hcap__pista{display:flex; align-items:stretch; gap:clamp(20px,2.4vw,40px);
  padding-inline:var(--alt-gutter); width:max-content; margin-top:clamp(28px,4vh,56px);
  transform:translate3d(calc(var(--p, 0) * -1 * var(--recorrido, 0px)), 0, 0);
  will-change:transform}
.s-hcap__panel{flex:0 0 min(430px, 76vw); display:flex; flex-direction:column;
  gap:var(--alt-s-4); padding:clamp(24px,2.6vw,36px);
  border:1px solid var(--alt-line); border-radius:var(--alt-radius);
  background:#fff}
.s-hcap__panel h3{font-family:var(--s-display); text-transform:uppercase;
  font-size:clamp(1.5rem,1rem + 1.4vw,2rem); letter-spacing:-.028em; line-height:1.02}
.s-hcap__panel p{color:var(--alt-text-2); font-size:var(--alt-t-body); line-height:1.6}
.s-hcap__panel .s-tags{margin-top:auto; padding-top:var(--alt-s-4)}
.s-hcap__riel{flex:none; margin:clamp(24px,3.4vh,44px) var(--alt-gutter) 0;
  height:1px; background:var(--alt-line); position:relative}
.s-hcap__riel::after{content:""; position:absolute; inset:0 auto 0 0; height:1px;
  width:calc(var(--p, 0) * 100%); background:var(--alt-v-500)}
/* Relevo sin hueco: escenarios sube por encima de las fichas
   durante la última pantalla del desfile, mientras éstas siguen
   saliendo por la izquierda. No queda papel vacío ni scroll muerto. */
.s-hcap + .s-esc2{margin-top:-100svh; z-index:2}
@media (prefers-reduced-motion:reduce){
  .s-hcap + .s-esc2{margin-top:0}
  .s-hcap{height:auto}
  .s-hcap__fijo{position:static; height:auto; display:block;
    padding-block:clamp(96px,12vw,180px)}
  .s-hcap__enc,.s-hcap__pista{transform:none}
  .s-hcap__pista{flex-wrap:wrap; width:auto; padding-inline:0; gap:var(--alt-s-5)}
  .s-hcap__panel{flex:1 1 320px}
  .s-hcap__riel{display:none}
}

/* 16.5 · Deriva del mapa dentro de la plancha del héroe ─────
   El mapa se mueve un poco más lento que la plancha que lo
   contiene: dentro del propio héroe ya hay dos planos. */
.s-hero__mapa{transform:translate3d(calc(var(--p, 0) * -6%), calc(var(--p, 0) * 3%), 0) scale(1.14);
  will-change:transform}
@media (prefers-reduced-motion:reduce){ .s-hero__mapa{transform:none} }

/* 16.6 · Cortina de entrada ────────────────────────────────
   Un telón que se abre en trazos. Lo inserta el JS, así que
   quien no tenga JS nunca lo ve — y nunca queda atrapado. */
.s-telon{position:fixed; inset:0; z-index:9999; background:var(--alt-a-950);
  display:grid; place-items:center; pointer-events:none}
.s-telon__marca{width:clamp(150px,22vw,260px); color:var(--alt-n-50); opacity:0;
  animation:s-marca 900ms var(--alt-ease) 120ms forwards}
@keyframes s-marca{to{opacity:1}}
.s-telon canvas{position:absolute; inset:0; width:100%; height:100%}
.s-telon.is-fuera{opacity:0; transition:opacity 620ms var(--alt-ease); }

/* ════════════════════════════════════════════════════════════
   17 · LA DIANA · el remate del capítulo 01
   Sección clavada sobre tinta. Las dos listas entran desde
   lados contrarios y convergen sobre el radar. Recupera la
   dinámica de la primera prueba, que era mejor que la mía.
   ════════════════════════════════════════════════════════════ */
.s-diana{position:relative; height:230svh; background:var(--alt-n-900); color:var(--alt-n-50)}
.s-diana__fijo{position:sticky; top:0; height:100svh; overflow:hidden;
  display:grid; place-items:center}
.s-diana__reja{display:grid; align-items:center; gap:var(--alt-s-6);
  grid-template-columns:1fr auto 1fr; width:100%}
.s-diana__col{min-width:0}
.s-diana__col--a{transform:translate3d(calc((1 - var(--t, 1)) * -58vw), 0, 0); will-change:transform}
.s-diana__col--b{transform:translate3d(calc((1 - var(--t, 1)) * 58vw), 0, 0);
  text-align:right; will-change:transform}
.s-diana__k{font-family:var(--alt-mono); font-size:var(--alt-t-label); letter-spacing:.18em;
  text-transform:uppercase; color:var(--alt-n-400); margin-bottom:var(--alt-s-5)}
.s-diana__col--b .s-diana__k{color:var(--alt-a-200)}
.s-diana__lista{list-style:none; display:flex; flex-direction:column}
.s-diana__lista li{font-family:var(--s-display); text-transform:uppercase;
  font-size:clamp(2rem,1rem + 4.2vw,4rem); line-height:1.04; letter-spacing:-.032em}
.s-diana__col--a li{color:var(--alt-n-500)}
.s-diana__col--b li{color:#fff}

.s-diana__marca{width:clamp(150px,22vw,330px); flex:none; justify-self:center;
  transform:scale(calc(.45 + .55 * var(--t, 1))); opacity:calc(.25 + .75 * var(--t, 1));
  will-change:transform}
.s-diana__marca svg{width:100%; height:auto; display:block}
@media (max-width:860px){
  .s-diana{height:200svh}
  .s-diana__reja{grid-template-columns:1fr; justify-items:center; text-align:center;
    gap:var(--alt-s-5)}
  .s-diana__col--b{text-align:center}
  .s-diana__marca{width:110px; order:-1}
}
@media (prefers-reduced-motion:reduce){
  .s-diana{height:auto}
  .s-diana__fijo{position:static; height:auto; padding-block:clamp(88px,11vw,160px)}
  .s-diana__col--a,.s-diana__col--b,.s-diana__marca{transform:none; opacity:1}
}

/* ════════════════════════════════════════════════════════════
   18 · ESCENARIOS CLAVADOS · dos actos con pausa
   La sección se detiene y los dos escenarios pasan a distinta
   velocidad: el titular a la izquierda avanza un paso, el
   cuerpo a la derecha avanza el doble. Entre acto y acto hay
   un tramo de reposo para leer.
   ════════════════════════════════════════════════════════════ */
.s-esc2{position:relative; height:380svh; background:var(--alt-a-900)}
.s-esc2__fijo{position:sticky; top:0; height:100svh; overflow:hidden;
  display:flex; align-items:center; color:var(--alt-n-50)}
.s-esc2__reja{display:grid; gap:var(--alt-s-7); width:100%; align-items:center}
@media (min-width:1024px){
  .s-esc2__reja{grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:clamp(32px,5vw,80px)}
}
/* Tramo útil: los dos actos se cruzan entre el 8% y el 70%
   del recorrido. La pausa de entrada es corta porque el primer
   acto ya se lee mientras la sección sube sobre las fichas. Los actos se superponen en
   capas en vez de desfilar, así ninguno pisa al otro. */
.s-esc2__marco{--t: min(1, max(0, calc((var(--p, 1) - .08) * 1.6)));
  position:relative}
.s-esc2__acto{position:absolute; inset:0 0 auto 0; will-change:opacity, transform}
.s-esc2__acto--1{
  opacity:min(1, max(0, calc((.46 - var(--t)) * 7)));
  transform:translate3d(0, calc(var(--t) * -7vh), 0);
  pointer-events:auto}
.s-esc2__acto--2{
  opacity:min(1, max(0, calc((var(--t) - .54) * 7)));
  transform:translate3d(0, calc((1 - var(--t)) * 7vh), 0)}
.s-esc2__k{font-family:var(--alt-mono); font-size:var(--alt-t-label); letter-spacing:.16em;
  text-transform:uppercase; color:var(--alt-v-300); margin-bottom:var(--alt-s-4)}
.s-esc2__t{font-family:var(--s-display); text-transform:uppercase;
  font-size:clamp(1.75rem,1.1rem + 2.4vw,3rem); letter-spacing:-.03em; line-height:.98;
  max-width:15ch}
.s-esc2__cuerpo p{max-width:58ch; color:var(--alt-a-200); line-height:1.68;
  font-size:var(--alt-t-body)}
.s-esc2__cuerpo p + p{margin-top:var(--alt-s-4)}
.s-esc2__cuerpo p strong{color:#fff; font-weight:500}
.s-esc2__fig{margin-top:var(--alt-s-5); border:1px solid var(--alt-line-plane);
  border-radius:var(--alt-radius); padding:var(--alt-s-4); background:rgba(9,20,27,.55)}
.s-esc2__acto--1 .s-esc2__fig{transform:translate3d(calc(var(--t) * -10vw), 0, 0)}
.s-esc2__acto--2 .s-esc2__fig{transform:translate3d(calc((1 - var(--t)) * 12vw), 0, 0)}
.s-esc2__fig img{width:100%; height:auto; display:block}
.s-esc2__pie{margin-top:var(--alt-s-3); font-family:var(--alt-mono);
  font-size:var(--alt-t-label); letter-spacing:.1em; text-transform:uppercase;
  color:var(--alt-a-200); opacity:.7}
.s-esc2__cuenta{position:absolute; right:var(--alt-gutter); bottom:clamp(24px,4vh,52px);
  font-family:var(--alt-mono); font-size:var(--alt-t-label); letter-spacing:.16em;
  color:var(--alt-a-200); display:flex; gap:10px; align-items:center}
.s-esc2__cuenta i{width:26px; height:1px; background:var(--alt-line-plane); position:relative}
.s-esc2__cuenta i::after{content:""; position:absolute; inset:0 auto 0 0; height:1px;
  width:calc(var(--pe, 0) * 100%); background:var(--alt-v-400)}
@media (prefers-reduced-motion:reduce){
  .s-esc2{height:auto}
  .s-esc2__fijo{position:static; height:auto; display:block;
    padding-block:clamp(88px,11vw,160px)}
  .s-esc2__marco{height:auto !important}
  .s-esc2__acto{position:static; opacity:1 !important; transform:none !important}
  .s-esc2__acto + .s-esc2__acto{margin-top:clamp(48px,7vw,88px)}
  .s-esc2__fig{transform:none !important}
  .s-esc2__cuenta{display:none}
}

/* ════════════════════════════════════════════════════════════
   19 · MÉTODO CLAVADO · un paso a la vez
   La sección se detiene y las cuatro etapas avanzan de una en
   una. La cifra gigante cambia; el paso activo se enciende y
   los demás se apagan. Es la pausa larga del sitio.
   ════════════════════════════════════════════════════════════ */
.s-met{position:relative; height:400svh; background:var(--alt-n-50)}
.s-met__fijo{position:sticky; top:0; height:100svh; overflow:hidden; display:flex;
  align-items:center}
.s-met__reja{display:grid; gap:var(--alt-s-7); width:100%; align-items:center}
@media (min-width:900px){
  .s-met__reja{grid-template-columns:minmax(0,4fr) minmax(0,6fr); gap:clamp(32px,6vw,96px)}
}
.s-met__cifra{position:relative; overflow:hidden; height:clamp(76px,12vh,132px);
  margin-top:clamp(20px,3vh,36px)}
.s-met__cifra ol{list-style:none; display:flex; flex-direction:column;
  transform:translate3d(0, calc(var(--paso, 0) * -25%), 0);
  transition:transform 620ms var(--alt-ease); will-change:transform}
.s-met__cifra li{height:clamp(76px,12vh,132px); display:flex; align-items:baseline;
  gap:.4em; font-family:var(--s-display); font-size:clamp(3.25rem,2rem + 4.4vw,7rem);
  line-height:1.12; letter-spacing:-.05em; color:var(--alt-n-900)}
.s-met__cifra li span{color:var(--alt-seal-ink); font-size:var(--alt-t-label);
  font-family:var(--alt-mono); letter-spacing:.16em; text-transform:uppercase;
  white-space:nowrap}
.s-met__pasos{list-style:none; border-top:1px solid var(--alt-line)}
.s-met__paso{border-bottom:1px solid var(--alt-line); padding-block:clamp(14px,2.2vh,26px);
  display:grid; gap:var(--alt-s-2); opacity:.32;
  transition:opacity 420ms var(--alt-ease)}
.s-met__paso h3{font-family:var(--s-display); text-transform:uppercase;
  font-size:clamp(1.25rem,1rem + 1.1vw,1.75rem); letter-spacing:-.025em; line-height:1.05}
.s-met__paso p{color:var(--alt-text-2); max-width:52ch; max-height:0; overflow:hidden;
  transition:max-height 520ms var(--alt-ease), opacity 320ms var(--alt-ease); opacity:0}
.s-met__paso.is-activo{opacity:1}
.s-met__paso.is-activo p{max-height:9em; opacity:1}
.s-met__rail{position:absolute; left:var(--alt-gutter); right:var(--alt-gutter);
  bottom:clamp(24px,4vh,52px); height:1px; background:var(--alt-line)}
.s-met__rail::after{content:""; position:absolute; inset:0 auto 0 0; height:1px;
  width:calc(var(--pe, 0) * 100%); background:var(--alt-v-500)}
@media (prefers-reduced-motion:reduce){
  .s-met{height:auto}
  .s-met__fijo{position:static; height:auto; display:block;
    padding-block:clamp(88px,11vw,160px)}
  .s-met__cifra{display:none}
  .s-met__paso{opacity:1}
  .s-met__paso p{max-height:none; opacity:1}
  .s-met__rail{display:none}
}