/* ============================================================
   1.000 Nombas · TheNomba — pieza ceremonial
   Scroll cinemático · 9 capítulos · memorial interactivo
   Paleta y tipografía: /brand/tokens.css
   ============================================================ */

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

html{scroll-behavior:auto}   /* Lenis gobierna el scroll */

body{
  background:var(--obsidian);
  /* Textura física casi imperceptible: dos radiales de carbón, sin gradients
     de colores. El grano de verdad lo pone el shader. */
  background-image:
    radial-gradient(120% 90% at 50% 0%, rgba(13,23,12,.55), transparent 60%),
    radial-gradient(140% 80% at 50% 118%, rgba(208,253,0,.07), transparent 58%);
  color:var(--text);
  font-family:var(--font-sans);
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;             /* clip, no hidden: no rompe position:sticky */
}

/* El texto pinta con el HTML; lo que aparece con calma es el canvas. */
#scene{position:fixed; inset:0; width:100%; height:100%; display:block;
       z-index:0; pointer-events:none; opacity:0; transition:opacity .9s ease}
body:not(.is-loading) #scene{opacity:1}
#fallback{position:fixed; inset:0; z-index:0}
#fallback img{width:100%; height:100%; object-fit:cover; opacity:.85}

/* ---------- HUD ---------- */
.hud{
  position:fixed; z-index:6; top:0; left:0; right:0;
  display:flex; justify-content:space-between; align-items:center;
  padding:clamp(18px,4vw,34px) clamp(20px,5vw,56px) 0;
}
/* nav con desenfoque PROGRESIVO, siempre: cualquier texto que pase por debajo
   se funde y se desenfoca antes de tocar el logo o la cifra, en vez de
   pisarse con ellos (antes solo en algunos capítulos, y el del mapa chocaba) */
.hud::before{content:''; position:absolute; z-index:-1; inset:0 0 -46px; pointer-events:none;
  background:linear-gradient(180deg, rgba(7,7,6,.94) 0%, rgba(7,7,6,.72) 55%, rgba(7,7,6,0) 100%);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  -webkit-mask:linear-gradient(180deg,#000 45%,transparent); mask:linear-gradient(180deg,#000 45%,transparent)}
/* invitación al sonido: aparece junto al altavoz y se retira sola */
.hud__nudge{position:absolute; right:clamp(20px,5vw,56px); top:calc(100% + 10px); white-space:nowrap;
  font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--lime);
  opacity:0; transform:translateY(-4px); pointer-events:none;
  transition:opacity .5s var(--ease), transform .5s var(--ease)}
.hud__nudge.on{opacity:.9; transform:none; animation:nudgeGlow 2.4s ease-in-out infinite}
@keyframes nudgeGlow{50%{opacity:.5}}
@media (max-width:520px){.hud__nudge{display:none}}
.hud__mark{display:block; opacity:.92}
.hud__mark img{display:block; height:16px; width:auto}
.hud__right{display:flex; align-items:center; gap:clamp(12px,1.6vw,20px)}
/* el contador como NÚMERO DE PÁGINA: pegado al altavoz, grande, lima, con su
   etiqueta. Antes la invitación al sonido (invisible) ocupaba sitio en el
   flujo y lo empujaba al centro del nav. */
.hud__count{display:flex; align-items:baseline; gap:8px; transition:opacity .4s var(--ease)}
.hud__count:has(b:empty){opacity:0}
.hud__num{font-family:var(--font-display); font-weight:500; line-height:1;
  font-size:clamp(22px,2.6vw,30px); letter-spacing:.01em; color:var(--lime);
  text-shadow:0 0 18px rgba(208,253,0,.35)}
.hud__count i{font-style:normal; font-size:10px; letter-spacing:.24em; text-transform:uppercase;
  color:var(--text-mute)}
@media (max-width:420px){ .hud__count i{display:none} }
.num-tab{font-variant-numeric:tabular-nums; font-feature-settings:'tnum'}
.hud__sound{
  display:grid; place-items:center; width:34px; height:34px;
  border:1px solid var(--border); border-radius:var(--radius-pill);
  background:rgba(13,17,12,.62); color:var(--text-dim); cursor:pointer;
  transition:color var(--motion-base), border-color var(--motion-base);
}
.hud__sound:hover{color:var(--cream); border-color:var(--border-strong)}
.hud__sound[aria-pressed="true"]{color:var(--lime); border-color:var(--lime-border)}
.hud__sound[aria-pressed="true"] .off{display:none}
.hud__sound[aria-pressed="false"] .on{display:none}

/* ---------- raíl de progreso ---------- */
.rail{position:fixed; z-index:6; left:0; right:0; bottom:0; height:2px;
      background:rgba(242,238,227,.06)}
.rail i{display:block; height:100%; width:100%;
  background:linear-gradient(90deg,var(--lime-olive),var(--emerald-neon),var(--lime));
  box-shadow:0 0 10px var(--lime-glow);
  transform:scaleX(0); transform-origin:0 50%}

/* La cortina lima que barría la pantalla en cada capítulo se retiró: era la
   «banda» que cruzaba de arriba abajo sin venir a cuento, y con scroll rápido
   se veía a medias. La transición entre capítulos la hace ya la cámara. */

/* ---------- secciones ---------- */
main{position:relative; z-index:2}
.sec{position:relative; min-height:100svh; display:flex; align-items:center;
     padding:calc(clamp(20px,5vw,72px) * 2) clamp(20px,5vw,72px)}
.sec--tall{min-height:170svh; align-items:flex-start}
.sec--climax{min-height:240svh; align-items:flex-start}
.sec--hoy{min-height:190svh}
/* en «hoy» el texto baja: arriba, sobre el ábaco, está la cifra 3D */
.sec--hoy .wrap--sticky{top:66svh}
.sec--travesia{min-height:auto; padding-block:clamp(140px,20vh,240px) clamp(90px,14vh,180px)}
/* el mapa: un escenario de una pantalla clavado mientras la sección pasa */
.sec--mapa{min-height:230svh; padding:0; align-items:flex-start}
.sec--memorial{min-height:auto; padding-block:clamp(100px,14vh,180px); align-items:flex-start}

.wrap{width:100%; max-width:1180px; margin-inline:auto}
.wrap--center{display:flex; flex-direction:column; align-items:center;
              text-align:center; gap:clamp(12px,2vh,22px); position:relative}
/* Los bloques de texto de las secciones altas quedan clavados al centro del
   viewport mientras la sección recorre su altura: el clímax y su encuadre
   coinciden siempre. */
.wrap--sticky{position:sticky; top:50svh; transform:translateY(-50%)}

/* Scrim: garantiza lectura sobre el metal y el fuego sin apagar la escena. */
.wrap--center::before{
  content:''; position:absolute; z-index:-1;
  left:50%; top:50%; transform:translate(-50%,-50%);
  width:100%; height:min(165%,820px);
  background:radial-gradient(62% 50% at 50% 50%, rgba(6,9,5,.88), rgba(6,9,5,0) 76%);
  pointer-events:none;
}
.sec--climax .wrap--center::before{
  background:radial-gradient(70% 54% at 50% 46%, rgba(6,9,5,.93), rgba(6,9,5,0) 80%);
}

/* ---------- tipografía ---------- */
.display{font-family:var(--font-display); font-weight:500; line-height:.98;
         letter-spacing:-.01em; font-variant-numeric:tabular-nums}
.display--xl{font-size:clamp(56px,13.5vw,168px)}
.display--l {font-size:clamp(42px,9.5vw,112px)}
.display--m {font-size:clamp(34px,7vw,80px)}
.display .thin{font-weight:500; opacity:.7; padding-inline:.06em}

.kicker{font-size:clamp(12px,2.7vw,12px); letter-spacing:.34em;
        text-transform:uppercase; color:var(--text-dim)}
.kicker--lime{color:var(--lime)}
.kicker--emerald{color:var(--emerald-neon)}
.kicker--gold{color:var(--lime-dim)}

.lede{font-weight:300; font-size:clamp(13px,3.4vw,17px); letter-spacing:.3em;
      text-transform:uppercase; color:var(--text-dim)}
.lede--wide{letter-spacing:.42em; color:var(--lime)}
.copy{max-width:46ch; font-weight:300; font-size:clamp(14px,3.6vw,17px);
      line-height:1.65; color:var(--text-dim)}
/* El trofeo vive DETRÁS del texto durante toda la narración, y su centro es
   justo lo más incandescente del encuadre: sin esto, el cuerpo de texto y el
   kicker compiten con el verde y se pierden. Halo de obsidiana y NO un velo
   rectangular: un velo apagaría el modelo, que es la pieza. Cuesta 0 nodos y
   0 composición extra (el navegador ya pinta sombras de texto). */
.copy, .kicker{
  text-shadow: 0 1px 2px rgba(7,7,6,.95),
               0 0 10px rgba(7,7,6,.95),
               0 0 26px rgba(7,7,6,.85);
}
/* Y en los capítulos donde el trofeo está detrás (los sticky), el cuerpo sube
   de --text-dim a crema: sobre un verde incandescente, un 62 % de opacidad no
   es «jerarquía», es texto que no se lee. El halo de arriba solo separa; el
   contraste lo pone esto. */
/* el tono va en el COLOR, no en opacity: una opacity aquí pesaba más que el
   estado oculto de [data-reveal] y los párrafos de los capítulos vecinos
   nunca desaparecían (texto fantasma borroso, sobre todo al volver arriba) */
.wrap--sticky .copy{ color:rgba(247,248,229,.92) }

/* La fecha del hito es lo que ESTE capítulo cuenta, y cae justo sobre el cuello
   del trofeo —la banda más clara del modelo—, con el halo del titular encima.
   Ni lima ni crema se leen ahí. Se le da una placa: obsidiana translúcida con
   filo lima. En una pieza conmemorativa una fecha sobre placa no es un parche,
   es una inscripción. */
#climaxDate{
  display:inline-block; padding:.55em 1.25em;
  color:var(--lime);
  background:rgba(7,7,6,.62);
  border:1px solid var(--lime-border);
  box-shadow:0 0 24px rgba(7,7,6,.9), inset 0 0 18px rgba(208,253,0,.06);
  backdrop-filter:blur(2px);
}
.copy--strong{color:var(--cream); font-weight:400}
.copy--wide{max-width:54ch}
.copy--foot{font-size:clamp(13px,3.2vw,14px); color:var(--text-mute)}
/* portada: la cifra de hoy + las dos acciones. Se apaga al irse. */
.sec--intro .wrap{transition:opacity .6s var(--ease), filter .6s var(--ease)}
.sec--intro.gone .wrap{opacity:0; filter:blur(6px)}
.sec--intro .display--xl{font-size:clamp(88px,22vw,240px); line-height:.9}
.sec--intro .copy{max-width:40ch}
.lede__aka{letter-spacing:.18em; color:var(--text-dim); text-transform:none; font-style:italic}
.copy .q{display:block; margin-bottom:4px; font-family:var(--font-display); font-weight:500;
  font-size:1.25em; color:var(--lime)}
/* «Ver el vídeo» de la portada: discreto, sin tarjeta; el vídeo va de fondo */
.hero-vid{display:inline-flex; align-items:center; gap:12px; padding:5px 18px 5px 5px;
  border:1px solid var(--border-strong); border-radius:40px; cursor:pointer;
  background:rgba(7,7,6,.42); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  color:var(--cream); font:inherit; font-size:11px; font-weight:600; letter-spacing:.2em;
  text-transform:uppercase; transition:border-color var(--motion-base), background var(--motion-base)}
.hero-vid[hidden]{display:none}
.hero-vid .vid__disc{width:38px; height:38px}
.hero-vid:hover{border-color:var(--lime-border); background:rgba(7,7,6,.62)}
.hero-vid:hover .vid__disc{scale:1.06}
.actions{display:flex; flex-wrap:wrap; justify-content:center; gap:12px;
         margin-top:clamp(6px,1.5vh,14px)}
.hint{margin-top:clamp(18px,4vh,44px); font-size:12px; letter-spacing:.28em;
      text-transform:uppercase; color:var(--text-mute);
      animation:nudge 3s ease-in-out infinite}
@keyframes nudge{0%,100%{transform:translateY(0);opacity:.55}50%{transform:translateY(6px);opacity:1}}

.counter{font-family:var(--font-display); font-weight:500;
  font-size:clamp(52px,9vw,112px); line-height:.9; letter-spacing:-.01em;
  color:var(--lime); text-shadow:0 0 30px rgba(208,253,0,.30)}
.counter--big{font-size:clamp(88px,20vw,260px); color:var(--cream);
  text-shadow:0 0 24px rgba(208,253,0,.24), 0 0 90px rgba(24,213,145,.14)}

/* ---------- vena de brasa (capítulo 01) ---------- */
.vein{position:relative; width:min(100%,680px); height:3px; margin-top:clamp(8px,2vh,18px);
      background:rgba(242,238,227,.07); border-radius:var(--radius-pill)}
.vein__fill{position:absolute; inset:0 auto 0 0; width:99.3%;
  border-radius:var(--radius-pill);
  background:linear-gradient(90deg, rgba(74,100,0,.45), var(--emerald-neon) 55%, var(--lime));
  box-shadow:0 0 14px rgba(208,253,0,.35);
  /* respira como brasa, no como loader */
  animation:vein 4.5s ease-in-out infinite}
.vein__tip{position:absolute; right:calc(.7% - 4px); top:50%; width:8px; height:8px;
  margin-top:-4px; border-radius:50%; background:var(--lime);
  box-shadow:0 0 10px var(--lime), 0 0 26px var(--lime-glow)}
@keyframes vein{0%,100%{filter:brightness(.85)}50%{filter:brightness(1.15)}}

/* ---------- entradas ---------- */
/* Entradas Y SALIDAS. Antes los reveals eran once:true y se quedaban puestos
   para siempre: al pasar de capítulo el texto viejo seguía ahí de fondo,
   compitiendo con el nuevo. Ahora la clase .in la pone y la QUITA
   ScrollTrigger, así que el mismo par de transiciones sirve para ir y volver.
   var(--ease) es easeInOutCubic: arranca lento, cruza, frena. Igual al salir. */
[data-reveal]{
  opacity:0; transform:translateY(14px); filter:blur(8px);
  transition:opacity .7s var(--ease), transform .8s var(--ease), filter .7s var(--ease);
  will-change:opacity, transform;
}
[data-reveal].in{opacity:1; transform:none; filter:blur(0)}
/* Al salir por arriba se va hacia arriba, no hacia abajo: el movimiento
   acompaña al scroll en vez de contradecirlo. */
[data-reveal].out-up{opacity:0; transform:translateY(-18px); filter:blur(8px)}
/* El primer viewport no espera a nada: sus reveals son @keyframes con --i. */
.sec--intro [data-reveal]{
  animation:reveal-in .75s var(--ease) both;
  animation-delay:calc(160ms + var(--i,0) * 70ms);
  transition:none}
@keyframes reveal-in{
  from{opacity:0; transform:translateY(14px); filter:blur(8px)}
  to  {opacity:1; transform:none; filter:blur(0)}}

/* ---------- anillos de Thinkglaos ----------
   Fijos al viewport mientras dura el capítulo (la sección mide 170svh: en
   absolute se iban con el scroll y se veían cortados). El texto corre SOBRE
   la circunferencia con textPath y el SVG entero gira. */
.rings{position:fixed; inset:0; display:grid; place-items:center;
       overflow:hidden; pointer-events:none; z-index:-1;
       opacity:0; transition:opacity 1s var(--ease)}
.sec--thinkglaos.lit .rings{opacity:1}
.ring{position:absolute; aspect-ratio:1; overflow:visible;
      transform:scale(.94); transition:transform 1.4s var(--ease)}
.sec--thinkglaos.lit .ring{transform:scale(1)}
.ring circle{fill:none; stroke:var(--emerald-border); stroke-width:1.2}
.ring text{font-family:var(--font-sans); font-size:15px; letter-spacing:.5em;
           fill:var(--emerald-neon); text-transform:uppercase}
.ring--1{width:min(118vw,860px); opacity:.6}
.ring--2{width:min(150vw,1140px); opacity:.34}
.ring--1{animation:orbit 80s linear infinite}
.ring--2{animation:orbit 120s linear infinite reverse}
@keyframes orbit{from{rotate:0deg} to{rotate:360deg}}

/* ---------- tarjetas de la travesía ---------- */
.sec--travesia .wrap{max-width:min(680px,58vw); margin-left:0}
.miles{list-style:none; margin-top:clamp(30px,6vh,56px);
       display:grid; gap:clamp(14px,2.4vh,22px)}
.miles li{
  display:grid; grid-template-columns:auto 1fr auto; align-items:baseline;
  gap:16px; padding:18px 22px;
  background:linear-gradient(180deg, rgba(17,26,15,.82), rgba(11,17,10,.72));
  border:1px solid var(--border); border-left:2px solid var(--lime-border);
  border-radius:var(--radius-lg);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  opacity:0; transform:translateY(16px);
  transition:opacity .6s var(--ease), transform .7s var(--ease)}
.miles li.in{opacity:1; transform:none}
.miles .m-date{font-size:12px; letter-spacing:.22em; text-transform:uppercase;
               color:var(--lime-dim); white-space:nowrap}
.miles .m-copy{font-size:14px; font-weight:300; color:var(--text-dim)}
.miles .m-copy b{color:var(--cream); font-weight:500}
.miles .m-num{font-family:var(--font-display); font-weight:500;
              font-size:clamp(20px,3.4vw,30px); color:var(--lime)}
.miles li.is-editorial{border-left-color:var(--emerald-border)}
.miles li.is-editorial .m-date{color:var(--emerald-neon)}
.miles li.is-editorial .m-num{color:var(--emerald-neon); font-size:15px;
                              font-family:var(--font-sans); font-weight:400}

/* ---------- clímax ---------- */
/* Antes la fecha y el párrafo aparecían con la sección y el titular solo al
   llegar a 1.000: durante medio capítulo había una placa y un texto con un
   HUECO en medio. Ahora, mientras el contador sube, se ve SOLO el contador;
   al tocar 1.000 se cruza con el titular y entran fecha, lema y texto. */
#counterClimax{position:absolute; left:50%; top:50%; margin:0;
  translate:-50% -50%; transition:opacity .5s var(--ease), filter .5s var(--ease), scale .6s var(--ease)}
.sec--climax.lit #counterClimax{opacity:0 !important; filter:blur(12px); scale:1.12}
/* :is() con un #id dentro: pesa más que `.wrap--sticky .copy{opacity:.92}`,
   que dejaba el párrafo a medio ver y borroso antes del hito */
.sec--climax :is(#climaxDate,.climax-title,#climaxSub,.climax-copy){opacity:0; transform:translateY(18px) scale(.985);
  filter:blur(10px);
  transition:opacity .9s var(--ease), transform 1s var(--ease), filter .9s var(--ease)}
.sec--climax.lit :is(#climaxDate,.climax-title,#climaxSub,.climax-copy){opacity:1; transform:none; filter:blur(0)}
.sec--climax.lit #climaxDate{transition-delay:.05s}
.sec--climax.lit #climaxSub{transition-delay:.25s}
.sec--climax.lit .climax-copy{transition-delay:.45s}
/* Flash blanco-oro de 300-500 ms: lo dispara story.js con .flash */
.sec--climax.flash .climax-title{
  transition:filter .12s ease;
  filter:
    drop-shadow(0 0 18px rgba(247,248,229,.9))
    drop-shadow(0 0 60px rgba(208,253,0,.85))}

/* ---------- vídeo de fondo del capítulo ----------
   Muy tenue y en «screen»: ilumina el negro sin tapar la columna ni el
   texto. Máscara radial para que muera en los bordes, y un ken burns lento
   al entrar. Entra y sale con ease-in-out largo. */
.bgvid{position:fixed; inset:0; z-index:1; pointer-events:none; overflow:hidden}
.bgvid video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; scale:1.08; mix-blend-mode:screen; filter:saturate(.7) contrast(1.08);
  -webkit-mask:radial-gradient(120% 95% at 50% 42%, #000 28%, transparent 82%);
          mask:radial-gradient(120% 95% at 50% 42%, #000 28%, transparent 82%);
  transition:opacity 1.8s cubic-bezier(.45,0,.55,1), scale 9s cubic-bezier(.2,.6,.3,1)}
.bgvid video.on{opacity:.24; scale:1}
@media (pointer:coarse){ .bgvid video.on{opacity:.2} }

/* ---------- vídeos: preview en bucle, clic = vídeo completo ---------- */
.vid{position:relative; display:block; width:clamp(260px,30vw,380px); aspect-ratio:16/9;
  margin-top:clamp(4px,1vh,10px); padding:0; overflow:hidden; cursor:pointer;
  border:1px solid var(--border-strong); border-radius:var(--radius-xl); background:#000;
  box-shadow:0 24px 60px -18px rgba(0,0,0,.8), 0 0 0 1px rgba(208,253,0,0);
  transition:box-shadow var(--motion-slow), border-color var(--motion-slow), translate var(--motion-slow)}
.vid video{width:100%; height:100%; object-fit:cover; display:block; opacity:.82;
  transition:opacity var(--motion-slow), scale .8s var(--ease)}
.vid::after{content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(7,7,6,0) 45%, rgba(7,7,6,.85))}
/* play: disco lima + anillo con el progreso del preview; al pasar por
   encima el disco se abre en una píldora «Ver completo» */
.vid__play{position:absolute; left:50%; top:50%; translate:-50% -50%; z-index:1;
  display:flex; align-items:center; height:64px; padding:6px; border-radius:40px;
  background:rgba(7,7,6,.42); -webkit-backdrop-filter:blur(10px) saturate(1.3); backdrop-filter:blur(10px) saturate(1.3);
  box-shadow:0 12px 40px rgba(0,0,0,.45), inset 0 0 0 1px rgba(247,248,229,.14);
  transition:padding .55s cubic-bezier(.16,1,.3,1), background .4s, box-shadow .4s}
.vid__ring{position:absolute; left:0; top:0; width:64px; height:64px; rotate:-90deg; pointer-events:none}
.vid__ring circle{fill:none; stroke-width:1.6}
.vid__ring .t{stroke:rgba(247,248,229,.16)}
.vid__ring .p{stroke:var(--lime); stroke-linecap:round; stroke-dasharray:188.5; stroke-dashoffset:188.5;
  transition:stroke-dashoffset .3s linear; filter:drop-shadow(0 0 4px rgba(208,253,0,.6))}
.vid__disc{position:relative; width:52px; height:52px; flex:none; display:grid; place-items:center;
  border-radius:50%; color:var(--obsidian);
  background:radial-gradient(circle at 35% 30%, #E9FF6A, var(--lime) 55%, #A8CC00);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55), 0 6px 18px -4px rgba(208,253,0,.55);
  transition:scale .45s cubic-bezier(.34,1.56,.64,1)}
.vid__disc svg{translate:1.5px 0}          /* centro óptico del triángulo */
.vid__cta{max-width:0; overflow:hidden; white-space:nowrap; opacity:0;
  font-size:11px; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--cream);
  transition:max-width .55s cubic-bezier(.16,1,.3,1), opacity .3s, padding .55s cubic-bezier(.16,1,.3,1)}
.vid:hover .vid__play,.vid:focus-visible .vid__play{background:rgba(7,7,6,.62); padding-right:22px}
.vid:hover .vid__cta,.vid:focus-visible .vid__cta{max-width:160px; opacity:1; padding-left:14px}
.vid:hover .vid__disc{scale:1.06}
.vid:active .vid__disc{scale:.94}
@media (hover:none){ .vid__play{padding-right:20px} .vid__cta{max-width:160px; opacity:1; padding-left:12px} }
.vid__meta{position:absolute; left:14px; right:14px; bottom:11px; z-index:1;
  display:flex; justify-content:space-between; align-items:baseline; gap:12px;
  font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--cream)}
.vid__meta b{font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.vid__meta i{font-style:normal; color:var(--text-dim); letter-spacing:.08em}
.vid:hover,.vid:focus-visible{border-color:var(--lime-border); translate:0 -2px;
  box-shadow:0 30px 70px -18px rgba(0,0,0,.85), 0 0 36px -6px var(--lime-glow)}
.vid:hover video{opacity:1; scale:1.04}
.link{display:inline-flex; align-items:center; gap:6px; font-size:12px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--text-dim); text-decoration:none;
  border-bottom:1px solid var(--border-strong); padding-bottom:3px}
.link:hover{color:var(--lime); border-color:var(--lime-border)}

.lightbox{margin:auto; width:min(1100px,92vw); padding:0; border:0; background:transparent;
  overflow:visible}
.lightbox::backdrop{background:rgba(3,4,3,.88); backdrop-filter:blur(8px)}
.lightbox[open]{animation:lbIn .45s var(--ease)}
@keyframes lbIn{from{opacity:0; transform:scale(.96)}}
.lightbox__frame{aspect-ratio:16/9; border-radius:var(--radius-xl); overflow:hidden; background:#000;
  border:1px solid var(--lime-border); box-shadow:0 40px 120px rgba(0,0,0,.7)}
.lightbox__frame :is(iframe, video){width:100%; height:100%; border:0; display:block; background:#000}
/* vídeo vertical (9:16): el marco se ajusta a lo alto, no a lo ancho */
.lightbox.is-vertical{width:auto}
.lightbox.is-vertical .lightbox__frame{aspect-ratio:9/16; height:min(86svh,900px); width:auto}
.lightbox__close{position:absolute; right:0; top:-48px; width:38px; height:38px;
  display:grid; place-items:center; border-radius:50%; cursor:pointer;
  border:1px solid var(--border-strong); background:rgba(13,17,12,.8); color:var(--cream)}
.lightbox__close:hover{color:var(--lime); border-color:var(--lime-border)}

/* ---------- CTA ---------- */
.cta{display:inline-flex; align-items:center; gap:10px; padding:15px 30px;
  border-radius:var(--radius-pill); border:1px solid var(--lime);
  background:linear-gradient(180deg, var(--lime) 0%, var(--lime-dim) 100%);
  color:var(--obsidian); text-decoration:none;
  font-size:12px; font-weight:600; letter-spacing:.2em; text-transform:uppercase;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4), 0 8px 22px -8px rgba(208,253,0,.5);
  transition:transform var(--motion-base), box-shadow var(--motion-base), filter var(--motion-base);
  cursor:pointer}
.cta:hover,.cta:focus-visible{transform:translateY(-1px); filter:brightness(1.06);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45), 0 12px 30px -8px rgba(208,253,0,.62)}
.cta svg{transition:transform var(--motion-base)}
.cta:hover svg{transform:translateX(3px)}
.cta--ghost{background:rgba(13,17,12,.6); color:var(--cream);
  border-color:var(--border-strong);
  box-shadow:inset 0 1px 0 rgba(242,238,227,.06)}
.cta--ghost:hover,.cta--ghost:focus-visible{border-color:var(--lime);
  color:var(--lime); filter:none; box-shadow:none}
.cta--ghost[aria-pressed="true"]{border-color:var(--lime); color:var(--lime)}

/* ---------- el mapa ---------- */
.stage{position:sticky; top:0; height:100svh; width:100%;
  display:grid; grid-template-rows:auto 1fr auto;
  padding:clamp(104px,15vh,146px) clamp(20px,5vw,56px) clamp(22px,4vh,44px)}
.stage__head{max-width:620px; position:relative; z-index:2}
.stage__head .display{margin-top:10px; font-size:clamp(28px,4.4vw,52px); line-height:1.04}
/* escritorio: el mapa ocupa toda la pantalla y la cabecera flota encima, con
   un velo que nace de la esquina para que el texto se lea sobre la tierra */
@media (min-width:900px) and (min-aspect-ratio:23/20){
  .stage__head{max-width:min(760px,60vw)}
  .stage__head .display{font-size:clamp(28px,3vw,50px); max-width:22ch}
  .stage__head::before{content:''; position:absolute; z-index:-1; pointer-events:none;
    inset:calc(clamp(104px,15vh,146px) * -1) auto -60px calc(clamp(20px,5vw,56px) * -1);
    width:calc(100% + 240px);
    background:radial-gradient(120% 100% at 0% 0%, rgba(7,7,6,.88) 30%, rgba(7,7,6,0) 72%)}
}
.stage__foot{grid-row:3; position:relative; z-index:2; display:flex; flex-direction:column; gap:14px; min-width:0}
/* ficha del país: vitrina con filo lima, el único acento de este viewport */
/* a la derecha: cae sobre el Índico, el único océano sin Nombas debajo */
.card{align-self:flex-end; min-width:min(300px,100%); padding:18px 22px 16px;
  background:linear-gradient(180deg, rgba(17,26,15,.86), rgba(9,13,8,.82));
  border:1px solid var(--border); border-top:1px solid var(--lime-border);
  border-radius:var(--radius-lg); backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px); box-shadow:0 20px 60px rgba(0,0,0,.45)}
.card__thanks{font-family:var(--font-display); font-weight:300; font-size:13px;
  letter-spacing:.3em; text-transform:uppercase; color:var(--lime)}
.card__name{font-family:var(--font-display); font-weight:500; color:var(--cream);
  font-size:clamp(28px,4vw,40px); line-height:1.05; margin-top:6px}
.card{width:min(360px,100%)}
.card__count{margin-top:4px; font-family:var(--font-display); font-weight:500; font-size:18px; color:var(--cream)}
.card__members{margin-top:8px; font-size:12px; line-height:1.6; color:var(--text-dim); max-width:36ch}
.country--pack{border-style:dashed}
.card__acts{display:flex; gap:8px; margin-top:12px}
.love{display:inline-flex; align-items:center; gap:7px; height:36px; padding:0 14px;
  border:1px solid var(--border-strong); border-radius:var(--radius-pill);
  background:rgba(13,17,12,.7); color:var(--cream); font:inherit; font-size:12px;
  letter-spacing:.06em; cursor:pointer;
  transition:border-color var(--motion-base), background var(--motion-base), transform var(--motion-fast)}
.love span{font-size:15px; transition:transform .3s var(--ease)}
.love:hover{border-color:var(--lime-border); background:rgba(208,253,0,.07)}
.love:hover span{transform:scale(1.25) rotate(-8deg)}
.love:active{transform:scale(.94)}
.love.sent{animation:sentPress .6s cubic-bezier(.16,1,.3,1)}
@keyframes sentPress{25%{transform:scale(.95); background:rgba(208,253,0,.12); border-color:var(--lime-border)}}
/* sin el anillo de foco grueso al pulsar con ratón o dedo; con teclado, un
   filo fino en su propio borde */
.love:focus{outline:none}
.love:focus-visible{outline:none; border-color:var(--lime)}
/* el contador de cada botón: sube con un pequeño salto al sumar */
.love b{min-width:1.6em; padding:1px 7px; border-radius:var(--radius-pill);
  background:rgba(208,253,0,.10); color:var(--lime); font-size:11px; font-weight:600; text-align:center}
.love.sent b{animation:bump .5s cubic-bezier(.16,1,.3,1)}
@keyframes bump{40%{transform:translateY(-3px) scale(1.18)}}
.love-total{margin-top:10px; font-size:12px; letter-spacing:.08em; color:var(--text-dim)}
.bubble__acts{display:flex; gap:6px; margin-top:8px}
.bubble__acts[hidden]{display:none}
.bubble__acts .love{height:30px; padding:0 10px; font-size:11px}
.fx{position:fixed; inset:0; z-index:9; pointer-events:none; overflow:hidden}
.fx span{position:absolute; font-size:22px; will-change:transform, opacity}
.pin.got{animation:got 1.2s cubic-bezier(.16,1,.3,1)}
@keyframes got{40%{scale:1.45; box-shadow:0 0 30px var(--lime)}}

/* tira de países: una sola fila deslizable, no un muro de pastillas */
.countries{display:flex; gap:8px; overflow-x:auto; scrollbar-width:none;
  padding-block:2px; margin-inline:calc(clamp(20px,5vw,56px) * -1);
  padding-inline:clamp(20px,5vw,56px);
  -webkit-mask:linear-gradient(90deg,transparent,#000 clamp(20px,5vw,56px),#000 calc(100% - clamp(20px,5vw,56px)),transparent)}
.countries::-webkit-scrollbar{display:none}
.country{flex:none; display:inline-flex; align-items:baseline; gap:8px; padding:8px 14px;
  border:1px solid var(--border); border-radius:var(--radius-pill);
  background:rgba(13,17,12,.72); font:inherit; font-size:13px; color:var(--text-dim);
  cursor:pointer; transition:border-color var(--motion-base), color var(--motion-base)}
.country b{font-family:var(--font-display); font-weight:500; color:var(--cream)}
.country:hover{border-color:var(--emerald-border); color:var(--cream)}
.country.on{border-color:var(--lime-border); color:var(--cream); background:rgba(208,253,0,.08)}
.country--muted{cursor:default; color:var(--text-mute)}
.country--muted:hover{border-color:var(--border); color:var(--text-mute)}

/* superficie de arrastre: la fila central del escenario. pan-y deja el
   desplazamiento vertical a la página en táctil; el horizontal mueve el mapa */
.drag{grid-row:2; align-self:stretch; touch-action:pan-y; pointer-events:none}
.map-live .drag{pointer-events:auto; cursor:grab}
.map-live.dragging .drag{cursor:grabbing}
.stage__tools{display:flex; align-items:center; justify-content:space-between; gap:12px;
  align-self:flex-end; width:min(360px,100%)}   /* sobre la ficha, no sobre el mapa */
.zoom{display:flex; gap:6px; margin-left:auto; opacity:0; pointer-events:none; transition:opacity .4s}
.map-live .zoom{pointer-events:auto}
.map-live .zoom{opacity:1}
.zoom button{width:36px; height:36px; display:grid; place-items:center; padding:0;
  border:1px solid var(--border-strong); border-radius:10px; background:rgba(13,17,12,.78);
  color:var(--cream); font:inherit; font-size:18px; line-height:1; cursor:pointer}
.zoom button:hover{border-color:var(--lime-border); color:var(--lime)}
.drag-hint{font-size:11px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--text-mute); pointer-events:none; opacity:0; transition:opacity .5s}
.map-live .drag-hint:not(.gone){opacity:1}

/* marcadores: botones reales sobre la proyección del mapa 3D */
.pins{position:fixed; inset:0; z-index:1; pointer-events:none;
  opacity:0; transition:opacity .5s var(--ease)}
.pins.on{opacity:1}
.pins.on .pin{pointer-events:auto}
.pins .pin.out{opacity:0; pointer-events:none}
.pin{transition:opacity .25s}
.pin{position:absolute; left:0; top:0; width:var(--s); height:var(--s);
  margin:calc(var(--s) / -2) 0 0 calc(var(--s) / -2);
  border-radius:50%; border:1px solid rgba(208,253,0,.32); padding:0;
  background:radial-gradient(circle, rgba(208,253,0,.55) 0 22%, rgba(208,253,0,.10) 40%, transparent 70%);
  cursor:pointer; will-change:translate}
/* área táctil mínima de 32 px aunque el punto sea de 8 */
.pin::before{content:''; position:absolute; inset:min(0px, calc((var(--s) - 32px) / 2)); border-radius:50%}
.pin::after{content:''; position:absolute; inset:-1px; border-radius:50%;
  border:1px solid var(--lime); opacity:0; animation:ping 2.8s var(--ease-soft) infinite}
.pin.on::after,.pin:hover::after{opacity:1}
@keyframes ping{0%{transform:scale(1); opacity:.7} 100%{transform:scale(2.4); opacity:0}}
.pin.on{border-color:var(--lime); box-shadow:0 0 18px var(--lime-glow); z-index:2}
.pin__label{position:absolute; left:50%; bottom:calc(100% + 6px); transform:translateX(-50%);
  white-space:nowrap; font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--cream); text-shadow:0 0 8px #000, 0 0 2px #000;
  opacity:0; transition:opacity var(--motion-base)}
.pin--label .pin__label,.pin:hover .pin__label,.pin:focus-visible .pin__label,.pin.on .pin__label{opacity:1}
.pin:not(.pin--label):not(.on) .pin__label{background:rgba(7,7,6,.8); padding:3px 7px; border-radius:4px}

/* ---------- memorial ---------- */
.memorial-head{max-width:640px}
.memorial-head .display{margin-block:8px 14px}
.memorial-controls{display:flex; flex-wrap:wrap; gap:12px; align-items:center;
  margin-top:clamp(24px,4vh,40px); padding:10px 0;
  /* pegados bajo el HUD mientras el muro pasa: la búsqueda siempre a mano */
  position:sticky; top:clamp(58px,9vh,84px); z-index:5}
.memorial-controls::before{content:''; position:absolute; inset:-10px calc(clamp(20px,5vw,72px) * -1);
  z-index:-1; pointer-events:none;
  /* fundido en los dos bordes: con un borde duro el fondo de la barra se leía
     como una franja cruzando la página */
  background:linear-gradient(180deg, rgba(7,7,6,0), rgba(7,7,6,.92) 28%, rgba(7,7,6,.92) 64%, rgba(7,7,6,0));}
.search{position:relative; display:flex; align-items:center}
.search svg{position:absolute; left:16px; color:var(--text-mute); pointer-events:none}
.search input{
  height:44px; width:min(340px,78vw); padding:0 18px 0 42px;
  border:1px solid var(--border-strong); border-radius:var(--radius-pill);
  background:rgba(13,17,12,.8); color:var(--cream); font:inherit; font-size:14px}
.search input::placeholder{color:var(--text-mute)}
.search input:focus-visible{outline:2px solid var(--lime); outline-offset:2px}
.wall-count{margin-left:auto; font-size:12px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--text-mute)}

/* el muro: una inscripción continua, como las placas de un memorial.
   Texto real a cuerpo legible; el separador lo pone CSS, no el marcado. */
.wall__group{margin-top:clamp(26px,4vh,40px)}
.wall__group[hidden]{display:none}
.wall__group h3{display:flex; align-items:baseline; gap:10px; padding-bottom:10px; margin-bottom:6px;
  border-bottom:1px solid var(--border); font-family:var(--font-display); font-weight:500;
  font-size:clamp(20px,2.4vw,26px); color:var(--cream)}
.wall__group h3 b{font-weight:500; font-size:.62em; color:var(--lime-dim)}
.wall__group h3 em{margin-left:auto; font-style:normal; font-family:var(--font-sans);
  font-size:11px; letter-spacing:.24em; text-transform:uppercase; color:var(--emerald-neon)}
.wall ol{list-style:none}
.wall{list-style:none; margin-top:clamp(8px,2vh,16px);
  font-family:var(--font-display); font-weight:300;
  font-size:clamp(15px,1.6vw,19px); line-height:2.05; color:rgba(247,248,229,.70)}
/* inline-block + nowrap: un nombre NUNCA se parte entre líneas («Carlos F. /
   O.»); el corte solo cae entre nombres */
.wall li{display:inline-block; white-space:nowrap; cursor:pointer; border-radius:3px; padding:0 2px;
  transition:color var(--motion-fast), background var(--motion-fast)}
.wall li[hidden]{display:none}
.wall li:not(:last-child){margin-right:.5em}
.wall li:not(:last-child)::after{content:'·'; margin-left:.6em; color:rgba(24,213,145,.45);
  pointer-events:none}
.wall li:hover{color:var(--cream)}
.wall li.hit{color:var(--lime)}
.wall li.sel{color:var(--obsidian); background:var(--lime)}
.wall li.sel::after{color:rgba(24,213,145,.45)}
.wall-empty{margin-top:24px; color:var(--text-mute); font-size:14px}

.bubble{position:fixed; left:0; top:0; z-index:8; max-width:300px; padding:14px 16px;
  background:rgba(11,15,10,.96); border:1px solid var(--lime-border);
  border-radius:var(--radius-lg); backdrop-filter:blur(10px);
  box-shadow:0 18px 50px rgba(0,0,0,.55); display:grid; gap:4px}
.bubble[hidden]{display:none}
.bubble__name{font-family:var(--font-display); font-weight:500; font-size:20px; color:var(--cream)}
.bubble__meta{font-size:12px; color:var(--text-dim); letter-spacing:.08em; text-transform:uppercase}
.bubble__thanks{font-size:12px; color:var(--lime); margin-top:4px}

.privacy-note{margin-top:clamp(28px,5vh,48px); padding-top:18px; border-top:1px solid var(--border);
  font-size:12px; color:var(--text-mute); max-width:60ch}
.privacy-note a{color:var(--text-dim)}

.sr-only{position:absolute; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0}

/* placas de asset: &bare=1 esconde todo el DOM y deja la escena sola */
body.bare main, body.bare .hud, body.bare .rail{visibility:hidden}

/* ---------- siguiente parada: la columna de plata ----------
   Escenario de una pantalla: el título arriba y la columna 3D en el centro
   (la pinta la escena). La sección es alta para que la columna suba con calma. */
.sec--next{min-height:190svh; padding:0; align-items:flex-start}
.next{position:sticky; top:0; width:100%; height:100svh; display:flex; flex-direction:column;
  align-items:center; text-align:center; gap:10px;
  padding:clamp(104px,15vh,150px) clamp(20px,5vw,56px) 0}
.next .display{font-size:clamp(30px,4.6vw,56px)}
.next .copy{max-width:40ch}
/* la entrada y salida del último capítulo, más lenta y más desenfocada:
   de 0 a 1 con ease-in-out, escalonada */
.next [data-reveal]{filter:blur(14px); transform:translateY(22px) scale(.985);
  transition:opacity 1.3s cubic-bezier(.45,0,.55,1), transform 1.4s cubic-bezier(.45,0,.55,1),
             filter 1.3s cubic-bezier(.45,0,.55,1)}
.next [data-reveal].in{filter:blur(0); transform:none}
.next [data-reveal].out-up{filter:blur(14px); transform:translateY(-22px) scale(.985)}
.next .display{transition-delay:.12s}
/* cuando entra el pie la columna sube: el título y su subtítulo se van JUNTOS,
   como un bloque, hacia arriba y desenfocándose (antes la columna los pisaba) */
.next .next__stack{display:flex; flex-direction:column; align-items:center; gap:10px;
  transition:opacity 1s cubic-bezier(.45,0,.55,1), transform 1.1s cubic-bezier(.45,0,.55,1),
             filter 1s cubic-bezier(.45,0,.55,1)}
.next.away .next__stack{opacity:0; transform:translateY(-48px); filter:blur(12px)}
.next .copy{transition-delay:.24s}

/* ---------- pie ----------
   Una placa con sombra que sube sobre la escena: créditos, acción y legal. */
.foot{position:relative; z-index:2; padding:0 clamp(16px,4vw,40px) clamp(24px,4vh,40px)}
/* placa del pie: más TRANSPARENTE, para que la columna de plata se siga
   intuyendo detrás; la escena la sube cuando el pie entra */
.foot__inner{max-width:760px; margin:0 auto; padding:clamp(30px,5vh,48px) clamp(20px,4vw,44px) 20px;
  border:1px solid rgba(247,248,229,.08); border-top-color:rgba(208,253,0,.22); border-radius:22px;
  background:linear-gradient(180deg, rgba(12,17,11,.38), rgba(7,9,6,.72));
  -webkit-backdrop-filter:blur(16px) saturate(1.2); backdrop-filter:blur(16px) saturate(1.2);
  box-shadow:0 -30px 80px -30px rgba(208,253,0,.10), 0 40px 90px rgba(0,0,0,.45);
  display:flex; flex-direction:column; align-items:center; gap:26px; text-align:center}
.foot__cta{display:flex; flex-direction:column; align-items:center; gap:14px}
.legal{font-size:12px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--text-mute)}
.foot__by{display:flex; align-items:center; justify-content:center; gap:10px; margin-top:6px;
  font-size:10px; letter-spacing:.22em; text-transform:uppercase; color:var(--text-mute); opacity:.75}
.foot__by a{display:block; opacity:.7; transition:opacity var(--motion-base)}
.foot__by a:hover{opacity:1}
.foot__by img{display:block; height:18px; width:auto}
.foot__by a:last-child img{height:12px}
.foot__legal{align-self:stretch; display:flex; flex-wrap:wrap; justify-content:center; gap:6px 20px;
  padding-top:16px; border-top:1px solid rgba(247,248,229,.07); font-size:11px; color:var(--text-mute)}
.foot__legal a{color:var(--text-dim); text-decoration:none}
.foot__legal a:hover{color:var(--lime)}
.foot__legal span{width:100%}

/* memorial: anticipo + «Ver todos» */
.wall.collapsed{max-height:calc(2.05em * 5); overflow:hidden;
  -webkit-mask:linear-gradient(180deg,#000 45%,transparent); mask:linear-gradient(180deg,#000 45%,transparent)}
.wall-more{display:flex; align-items:center; gap:10px; margin:18px auto 0; height:44px; padding:0 22px;
  border:1px solid var(--lime-border); border-radius:var(--radius-pill); cursor:pointer;
  background:rgba(208,253,0,.06); color:var(--lime); font:inherit; font-size:12px; font-weight:600;
  letter-spacing:.18em; text-transform:uppercase; transition:background var(--motion-base)}
.wall-more:hover{background:rgba(208,253,0,.12)}
.wall-more svg{transition:rotate .4s cubic-bezier(.16,1,.3,1)}
.wall-more[aria-expanded="true"] svg{rotate:180deg}
.wall-more[hidden]{display:none}

/* señalador del memorial, bajo el titular del mapa */
.to-memorial{white-space:nowrap; display:inline-flex; align-items:center; gap:8px; margin-top:12px; padding:7px 14px;
  border:1px solid var(--lime-border); border-radius:var(--radius-pill);
  background:rgba(208,253,0,.06); color:var(--lime); text-decoration:none;
  font-size:11px; font-weight:600; letter-spacing:.18em; text-transform:uppercase}
.to-memorial svg{animation:toMem 2.2s cubic-bezier(.45,0,.55,1) infinite}
.to-memorial:hover{background:rgba(208,253,0,.12)}
@keyframes toMem{50%{transform:translateY(3px)}}

:focus-visible{outline:2px solid var(--lime); outline-offset:4px}

/* ---------- móvil ---------- */
@media (max-width:899px){
  .sec--travesia .wrap{max-width:100%}
  .card{align-self:stretch; min-width:0; width:100%; padding:14px 16px}
  .stage__tools{align-self:stretch; width:100%}
  .card__acts{margin-top:10px}
  .love{height:34px; padding:0 12px}
  .vid{width:min(100%,340px)}
  .wall-count{margin-left:0; width:100%}
  .miles li{grid-template-columns:1fr auto; grid-template-areas:"date num" "copy copy"}
  .miles .m-date{grid-area:date}.miles .m-num{grid-area:num}.miles .m-copy{grid-area:copy}
}

/* ---------- accesibilidad ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important; transition-duration:.01ms !important}
  [data-reveal],[data-reveal].out-up,.miles li,.climax-title,#climaxSub{
    opacity:1 !important; transform:none !important; filter:none !important}
  .sec--climax .lede{opacity:1 !important}
  .wrap--sticky{position:relative; top:auto; transform:none}
  .sec--tall,.sec--climax,.sec--hoy{min-height:100svh}
  .rings{display:none}
  .bgvid{display:none}
}