/* ============================================================
   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}

/* ─── 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)}
@media (prefers-reduced-motion:reduce){
  .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 solo entre el 20% y el
   74% del recorrido. Antes y después la sección se queda
   quieta — ahí es donde se lee. 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) - .20) * 1.85)));
  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}
}