/* ============================================================
   ALETHIA — réplica de sistema visual
   Paleta y tipografía extraídas de alethia.earth
   ============================================================ */

:root{
  --bg:        #000000;   /* negro puro: la roca fue filmada sobre negro */
  --bg-2:      #050505;
  --lime:      #C6F19D;   /* acento principal */
  --sage:      #D5EEBC;   /* texto suave */
  --cream:     #F5F4F2;
  --white:     #FFFFFF;
  --line:      rgba(213,238,188,.14);
  --line-2:    rgba(213,238,188,.28);
  --muted:     rgba(245,244,242,.55);

  --font:      "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono:      "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --pad:       clamp(20px, 4.4vw, 72px);
  --ease:      cubic-bezier(.22,1,.36,1);
  --ease-io:   cubic-bezier(.65,0,.35,1);
}

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

html{ background:var(--bg); }
html.is-loading{ overflow:hidden; }
html.menu-open{ overflow:hidden; }

body{
  background:var(--bg);
  color:var(--cream);
  font-family:var(--font);
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img,svg,canvas{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
ul,ol{ list-style:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
::selection{ background:var(--lime); color:var(--bg); }

/* ---------- tipografía ---------- */
.mono{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  font-weight:400;
}
.label{ color:var(--lime); opacity:.75; }

.h-display{
  font-size:clamp(38px, 6.6vw, 96px);
  font-weight:500;
  line-height:.95;
  letter-spacing:-.045em;
  color:var(--white);
}
.h-2{
  font-size:clamp(30px, 4.4vw, 62px);
  font-weight:500;
  line-height:1.03;
  letter-spacing:-.038em;
  color:var(--white);
}
.h-2 em{ font-style:normal; color:var(--lime); }
.h-3{
  font-size:clamp(24px, 2.8vw, 40px);
  font-weight:500;
  line-height:1.12;
  letter-spacing:-.03em;
  color:var(--white);
}
.h-lead{
  font-size:clamp(22px, 3vw, 42px);
  font-weight:400;
  line-height:1.22;
  letter-spacing:-.028em;
  color:var(--sage);
}

/* ============================================================
   PRELOADER
   ============================================================ */
.preloader{
  position:fixed; inset:0; z-index:1000;
  background:var(--bg);
  display:flex; align-items:flex-end; justify-content:center;
  padding:var(--pad);
  transition:transform 1s var(--ease), opacity .6s ease .3s;
}
.preloader.done{ transform:translateY(-101%); }
.preloader__inner{
  width:100%; display:flex; align-items:baseline; justify-content:space-between;
  border-bottom:1px solid var(--line); padding-bottom:14px;
}
.preloader__word{ color:var(--lime); font-size:13px; letter-spacing:.35em; }
.preloader__count{ color:var(--cream); font-size:13px; }
.preloader__bar{
  position:absolute; left:var(--pad); right:var(--pad); bottom:calc(var(--pad) - 1px);
  height:1px; background:transparent;
}
.preloader__bar i{
  display:block; height:100%; width:0%; background:var(--lime);
  transition:width .25s linear;
}

/* ============================================================
   GRANO
   ============================================================ */
.grain{
  position:fixed; inset:0; width:100vw; height:100vh;
  z-index:900; pointer-events:none; opacity:.05;
  mix-blend-mode:overlay;
}

/* ============================================================
   CURSOR
   ============================================================ */
.cursor{
  position:fixed; top:0; left:0; z-index:950;
  width:34px; height:34px; margin:-17px 0 0 -17px;
  border:1px solid var(--lime); border-radius:50%;
  pointer-events:none; mix-blend-mode:difference;
  transition:width .35s var(--ease), height .35s var(--ease),
             margin .35s var(--ease), background .35s var(--ease),
             opacity .3s ease;
  display:flex; align-items:center; justify-content:center;
  opacity:0;
}
.cursor.on{ opacity:1; }
.cursor span{
  font-family:var(--mono); font-size:9px; letter-spacing:.12em;
  color:var(--bg); opacity:0; transition:opacity .25s ease;
}
.cursor.hover{ width:34px; height:34px; background:var(--lime); }
.cursor.text{
  width:78px; height:78px; margin:-39px 0 0 -39px;
  background:var(--lime); mix-blend-mode:normal;
}
.cursor.text span{ opacity:1; }
@media (hover:none){ .cursor{ display:none; } }

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:800;
  display:flex; align-items:center; justify-content:space-between;
  padding:18px var(--pad);
  transition:transform .5s var(--ease), background .4s ease, backdrop-filter .4s ease;
}
.nav.stuck{
  background:rgba(0,0,0,.72);
  backdrop-filter:blur(14px) saturate(1.2);
  border-bottom:1px solid var(--line);
}
.nav.hide{ transform:translateY(-105%); }
.nav__logo{
  display:flex; align-items:center; gap:9px;
  font-family:var(--mono); font-size:12px; letter-spacing:.3em;
  color:var(--white);
}
.nav__logo svg{ color:var(--lime); }
.nav__links{ display:flex; gap:26px; }
.nav__links a{ position:relative; color:var(--cream); opacity:.7; transition:opacity .3s; }
.nav__links a::after{
  content:""; position:absolute; left:0; bottom:-5px; height:1px; width:0;
  background:var(--lime); transition:width .4s var(--ease);
}
.nav__links a:hover{ opacity:1; }
.nav__links a:hover::after{ width:100%; }
.nav__right{ display:flex; align-items:center; gap:14px; }

.nav__burger{ display:none; align-items:center; gap:8px; font-size:11px; letter-spacing:.14em; }
.nav__burger i{ display:block; width:16px; height:1px; background:var(--cream); }

@media (max-width:900px){
  .nav__links{ display:none; }
  .nav__burger{ display:flex; }
  .nav .btn--pill{ display:none; }
}

/* ---------- botones ---------- */
.btn{
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  padding:12px 22px; border-radius:100px; overflow:hidden;
  border:1px solid var(--line-2); color:var(--cream);
  transition:color .4s var(--ease), border-color .4s var(--ease);
  will-change:transform;
}
.btn span{ position:relative; z-index:2; }
.btn::before{
  content:""; position:absolute; inset:0; background:var(--lime);
  transform:translateY(101%); transition:transform .5s var(--ease);
}
.btn:hover{ color:var(--bg); border-color:var(--lime); }
.btn:hover::before{ transform:translateY(0); }
.btn--lime{ background:var(--lime); color:var(--bg); border-color:var(--lime); }
.btn--lime::before{ background:var(--white); }
.btn--lime:hover{ color:var(--bg); }
.btn--lg{ padding:18px 34px; font-size:12px; }
.btn--ghost{ border-color:var(--line-2); }

/* ============================================================
   MENU OVERLAY
   ============================================================ */
.menu{
  position:fixed; inset:0; z-index:790;
  pointer-events:none;
  clip-path:inset(0 0 100% 0);
  transition:clip-path .9s var(--ease);
}
.menu.open{ pointer-events:auto; clip-path:inset(0 0 0 0); }
.menu__bg{ position:absolute; inset:0; background:var(--bg-2); }
.menu__grid{
  position:relative; height:100%;
  display:grid; grid-template-columns:1.6fr 1fr; gap:40px;
  padding:120px var(--pad) var(--pad);
}
.menu__list{ margin-top:22px; }
.menu__list li{ overflow:hidden; }
.menu__list a{
  display:block; padding:6px 0;
  font-size:clamp(34px,6vw,80px); font-weight:500; letter-spacing:-.045em;
  line-height:1.06; color:var(--white);
  transition:color .35s ease, transform .5s var(--ease);
}
.menu__list span{ display:block; transform:translateY(110%); transition:transform .8s var(--ease); }
.menu.open .menu__list span{ transform:translateY(0); }
.menu.open .menu__list li:nth-child(1) span{ transition-delay:.15s; }
.menu.open .menu__list li:nth-child(2) span{ transition-delay:.22s; }
.menu.open .menu__list li:nth-child(3) span{ transition-delay:.29s; }
.menu.open .menu__list li:nth-child(4) span{ transition-delay:.36s; }
.menu.open .menu__list li:nth-child(5) span{ transition-delay:.43s; }
.menu__list a:hover{ color:var(--lime); transform:translateX(18px); }
.menu__col--meta{ align-self:end; display:flex; flex-direction:column; gap:8px; }
.menu__meta{ color:var(--muted); font-size:14px; line-height:1.6; margin-bottom:18px; }
.menu__meta a:hover{ color:var(--lime); }
@media (max-width:900px){ .menu__grid{ grid-template-columns:1fr; } .menu__col--meta{ align-self:start; } }

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position:relative; min-height:100svh;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:var(--pad); overflow:hidden;
  isolation:isolate;
}
.hero__bg{
  position:absolute; inset:-20%; z-index:-2;
  will-change:transform;
}
.hero__bg .blobs{ filter:blur(60px) saturate(1.15); }
/* canvas WebGL de nubes atmosféricas (capa principal de movimiento) */
.glcanvas{
  position:absolute; inset:0; width:100%; height:100%;
  opacity:0; transition:opacity 1.6s var(--ease);
  /* desenfoque = look de loop de video fuera de foco, no textura de mármol */
  filter:blur(16px) saturate(1.08) contrast(.96);
  transform:scale(1.08);
}
.glcanvas.on{ opacity:1; }
.blobs{ position:absolute; inset:0; transition:opacity 1.2s ease; }
/* si el shader arranca, los blobs pasan a ser una capa de apoyo */
.gl-ok .blobs{ opacity:.35; mix-blend-mode:screen; }

.blob{ position:absolute; border-radius:50%; mix-blend-mode:screen; }
.b1{ width:60vw; height:60vw; left:-8%;  top:2%;   background:radial-gradient(circle at 40% 40%, #2C6B33, transparent 65%); animation:drift1 24s ease-in-out infinite alternate; }
.b2{ width:52vw; height:52vw; right:-6%; top:-10%; background:radial-gradient(circle at 50% 50%, #78C46A, transparent 62%); opacity:.55; animation:drift2 30s ease-in-out infinite alternate; }
.b3{ width:70vw; height:70vw; left:18%;  bottom:-30%; background:radial-gradient(circle at 50% 50%, #14361A, transparent 66%); animation:drift3 34s ease-in-out infinite alternate; }
.b4{ width:34vw; height:34vw; right:16%; bottom:2%; background:radial-gradient(circle at 50% 50%, #C6F19D, transparent 60%); opacity:.28; animation:drift1 20s ease-in-out infinite alternate-reverse; }
.b5{ width:44vw; height:44vw; left:34%;  top:26%;  background:radial-gradient(circle at 50% 50%, #0B5E52, transparent 64%); opacity:.5; animation:drift2 26s ease-in-out infinite alternate-reverse; }
.b6{ width:56vw; height:56vw; left:-10%; top:-20%; background:radial-gradient(circle at 50% 50%, #2C6B33, transparent 64%); animation:drift3 28s ease-in-out infinite alternate; }
.b7{ width:40vw; height:40vw; right:-4%; bottom:-20%; background:radial-gradient(circle at 50% 50%, #C6F19D, transparent 62%); opacity:.22; animation:drift1 22s ease-in-out infinite alternate; }

@keyframes drift1{ from{ transform:translate3d(0,0,0) scale(1); } to{ transform:translate3d(8vw,-6vh,0) scale(1.22); } }
@keyframes drift2{ from{ transform:translate3d(0,0,0) scale(1.1); } to{ transform:translate3d(-10vw,7vh,0) scale(.92); } }
@keyframes drift3{ from{ transform:translate3d(-4vw,3vh,0) scale(.95); } to{ transform:translate3d(6vw,-8vh,0) scale(1.18); } }

.hero__scan{
  position:absolute; inset:0;
  background:repeating-linear-gradient(0deg, rgba(255,255,255,.035) 0 1px, transparent 1px 4px);
  mix-blend-mode:overlay;
}
.hero__vignette{
  position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(120% 90% at 50% 32%, transparent 26%, rgba(0,0,0,.86) 100%),
    linear-gradient(180deg, rgba(0,0,0,.6) 0%, transparent 30%, rgba(0,0,0,.95) 100%);
}

/* ============================================================
   GLITCH — título
   ============================================================ */
.glitch{
  position:relative;
  font-size:clamp(56px, 15vw, 220px);
  font-weight:600;
  letter-spacing:-.06em;
  line-height:.85;
  color:var(--white);
  text-transform:uppercase;
  margin:8px 0 20px;
  --gx:0px;
}
.glitch::before,.glitch::after{
  content:attr(data-text);
  position:absolute; inset:0;
  pointer-events:none;
  opacity:0;
}
.glitch::before{ color:#5BE7C4; transform:translateX(calc(var(--gx) * -1)); mix-blend-mode:screen; }
.glitch::after { color:#FF3D6E; transform:translateX(var(--gx));            mix-blend-mode:screen; }

/* ráfaga: se dispara agregando .glitching desde JS */
.glitch.glitching::before,
.glitch.glitching::after{ opacity:.9; }
.glitch.glitching{ animation:glitchShake .28s steps(2) infinite; }
@keyframes glitchShake{
  0%   { clip-path:inset(0 0 0 0);      transform:translate(0); }
  25%  { clip-path:inset(18% 0 52% 0);  transform:translate(-3px,1px); }
  50%  { clip-path:inset(64% 0 12% 0);  transform:translate(3px,-1px); }
  75%  { clip-path:inset(38% 0 34% 0);  transform:translate(-2px,0); }
  100% { clip-path:inset(0 0 0 0);      transform:translate(0); }
}

/* barrido de scanline sobre el título */
.glitch::selection{ background:var(--lime); color:#000; }

/* ============================================================
   NEURAL NOISE — capa reactiva al cursor
   ============================================================ */
/* hasta el fondo: detrás de la isla y de todo lo demás */
.neural{
  position:absolute; inset:0; z-index:-3;
  width:100%; height:100%;
  pointer-events:none;
  mix-blend-mode:screen;
  opacity:0; transition:opacity 2.4s var(--ease);
}
.neural.on{ opacity:.42; }

/* ============================================================
   ISLA FLOTANTE — escenario central
   ============================================================ */
.stage{
  position:absolute; inset:0; z-index:-1;
  display:grid; place-items:center;
  pointer-events:none; overflow:hidden;
  perspective:1600px;            /* da profundidad real al rotateX/rotateY */
  perspective-origin:50% 45%;
}

/* halo detrás de la isla */
.stage__glow{
  position:absolute; width:min(78vw,900px); aspect-ratio:1;
  border-radius:50%;
  transform:translateY(-6%);
  background:
    radial-gradient(circle at 50% 48%, rgba(198,241,157,.10), transparent 58%),
    radial-gradient(circle at 50% 56%, rgba(120,150,120,.10), transparent 68%);
  filter:blur(70px);
  animation:pulse 9s ease-in-out infinite alternate;
}
@keyframes pulse{
  from{ opacity:.35; transform:translateY(-6%) scale(.94); }
  to  { opacity:.7;  transform:translateY(-9%) scale(1.08); }
}

.isle{
  position:relative;
  margin-top:-7vh;
  /* el clip ahora es apaisado (1408x1082): la isla necesita más ancho */
  width:min(82vw, 900px);
  aspect-ratio:1408 / 1082;   /* caja fija: los dos clips caben enteros */
  max-height:74vh;
  will-change:transform;
  transform-style:preserve-3d;
}
/* los dos clips comparten exactamente la misma caja, así el de
   transición se ve completo sin importar su proporción */
.isle__vid{
  position:absolute; inset:0;
  width:100%; height:100%; display:block;
  object-fit:contain;
  user-select:none; -webkit-user-drag:none; pointer-events:none;
  filter:drop-shadow(0 40px 70px rgba(0,0,0,.65)) saturate(1.05) contrast(1.03);
  /* pequeña respiración propia, encima del transform de JS */
  animation:breathe 14s ease-in-out infinite alternate;
}
/* si el navegador no soporta webm con alpha, el mp4 trae fondo negro:
   screen lo elimina sobre el fondo oscuro */
.no-alpha-video .isle__vid{ mix-blend-mode:screen; filter:saturate(1.1) contrast(1.05); }
@keyframes breathe{ from{ filter:drop-shadow(0 40px 70px rgba(0,0,0,.65)) saturate(1.0) brightness(.96); }
                    to  { filter:drop-shadow(0 58px 90px rgba(0,0,0,.7))  saturate(1.12) brightness(1.06); } }

/* bruma que funde la base de la roca con el fondo.
   Radial a propósito: un gradiente lineal dibuja un rectángulo visible. */
.isle__haze{
  position:absolute; inset:0; pointer-events:none;
  opacity:0; transition:opacity 1.2s var(--ease);
  background:radial-gradient(62% 34% at 50% 99%,
    rgba(0,0,0,.85) 0%,
    rgba(0,0,0,.45) 38%,
    rgba(213,238,188,.05) 62%,
    transparent 78%);
}
.isle__haze.on{ opacity:1; animation:haze 9s ease-in-out infinite alternate; }
@keyframes haze{ from{ opacity:.72; } to{ opacity:1; } }

/* sombra de levitación */
.isle__shadow{
  position:absolute; left:50%; bottom:-4%;
  width:62%; height:9%;
  transform:translateX(-50%);
  background:radial-gradient(ellipse at center, rgba(0,0,0,.55), transparent 70%);
  filter:blur(22px);
  animation:shadowPulse 7s ease-in-out infinite alternate;
}
@keyframes shadowPulse{ from{ opacity:.7; transform:translateX(-50%) scale(1); }
                        to  { opacity:.4; transform:translateX(-50%) scale(1.14); } }

/* neblina que cruza delante y detrás */
.mist{
  position:absolute; left:-30%; right:-30%; height:60%;
  pointer-events:none;
  background:
    radial-gradient(60% 100% at 20% 50%, rgba(213,238,188,.16), transparent 70%),
    radial-gradient(50% 100% at 65% 40%, rgba(255,255,255,.10), transparent 72%),
    radial-gradient(40% 100% at 90% 60%, rgba(198,241,157,.12), transparent 70%);
  filter:blur(34px);
}
.mist--back { top:22%; animation:mistA 38s linear infinite; opacity:.8; }
.mist--front{ top:48%; animation:mistB 26s linear infinite; opacity:.9; }
@keyframes mistA{ from{ transform:translate3d(-12%,0,0) scaleX(1); } to{ transform:translate3d(14%,-3%,0) scaleX(1.2); } }
@keyframes mistB{ from{ transform:translate3d(16%,2%,0) scaleX(1.15); } to{ transform:translate3d(-14%,0,0) scaleX(1); } }

/* partículas / motas */
.stage__fx{ position:absolute; inset:0; width:100%; height:100%; }

/* rayos de luz cenital */
.rays{
  position:absolute; inset:-10% 0 auto; height:85%;
  background:repeating-linear-gradient(101deg,
    transparent 0 42px,
    rgba(213,238,188,.045) 42px 62px,
    transparent 62px 118px);
  -webkit-mask-image:radial-gradient(60% 70% at 50% 8%, #000, transparent 72%);
          mask-image:radial-gradient(60% 70% at 50% 8%, #000, transparent 72%);
  animation:rays 22s ease-in-out infinite alternate;
  mix-blend-mode:screen;
}
@keyframes rays{ from{ transform:translateX(-3%) skewX(0deg); opacity:.55; }
                 to  { transform:translateX(3%)  skewX(2deg); opacity:1; } }

@media (max-width:800px){ .isle{ width:88vw; } }

/* ============================================================
   ETAPA 0 — ADVERTENCIA
   ============================================================ */
.warn{
  position:fixed; inset:0; z-index:700;
  display:grid; grid-template-rows:auto 1fr auto auto;
  justify-items:center; text-align:center; align-items:center;
  padding:var(--pad); background:#000;
  opacity:0; transition:opacity 1.1s var(--ease);
  font-family:var(--mono);
}
html.warn-ready .warn{ opacity:1; }
html:not(.etapa-0) .warn{ opacity:0; pointer-events:none; }

.warn__marks{
  align-self:start;
  display:flex; align-items:center; gap:14px;
  color:var(--muted); font-size:10px; letter-spacing:.30em;
}
.warn__x{ color:var(--lime); }

/* bloque central: todo en monoespaciada, como una terminal */
.warn__core{
  align-self:center; max-width:44ch;
  display:flex; flex-direction:column; align-items:center; gap:22px;
}
.warn__kicker{
  color:#FF3D6E; letter-spacing:.46em; font-size:10px;
  animation:alerta 1.9s steps(2) infinite;
}
@keyframes alerta{ 0%,60%{ opacity:1; } 61%,100%{ opacity:.25; } }

.warn__txt{
  font-family:var(--mono); font-weight:500;
  font-size:clamp(16px,2.6vw,34px); line-height:1.35;
  letter-spacing:.02em; text-transform:uppercase; color:var(--white);
}
.warn__txt::after{
  content:"_"; color:var(--lime);
  animation:caret 1s steps(1) infinite;
}
@keyframes caret{ 0%,49%{ opacity:1; } 50%,100%{ opacity:0; } }

.warn__sub{
  font-family:var(--mono); max-width:52ch;
  color:var(--muted); font-size:clamp(10px,1.1vw,12px);
  line-height:2; letter-spacing:.16em; text-transform:uppercase;
}

.warn__acts{
  align-self:start; display:flex; gap:16px; align-items:center;
  margin:34px 0 clamp(40px,9vh,90px);
}
.opt{
  position:relative; overflow:hidden;
  padding:16px 34px; border-radius:100px;
  border:1px solid var(--line-2); color:var(--cream);
  transition:color .4s var(--ease), border-color .4s var(--ease);
}
.opt span{ position:relative; z-index:2; font-size:11px; letter-spacing:.22em; }
.opt::before{
  content:""; position:absolute; inset:0;
  transform:translateY(101%); transition:transform .5s var(--ease);
}
.opt:hover::before{ transform:translateY(0); }
.opt--in::before { background:var(--lime); }
.opt--out::before{ background:#FF3D6E; }
.opt--in:hover  { color:#000; border-color:var(--lime); }
.opt--out:hover { color:#000; border-color:#FF3D6E; }

.warn__foot{
  align-self:end;
  color:var(--muted); font-size:9px; letter-spacing:.28em; opacity:.5;
  transition:opacity .6s ease;
}
/* mientras habla la voz no hay salida: los botones no existen todavía */
html.hablando .warn__acts{
  opacity:.18; pointer-events:none; filter:blur(1px);
  transition:opacity .6s ease, filter .6s ease;
}
html.hablando .warn__foot{ opacity:0; }
.warn__acts{ transition:opacity .8s var(--ease), filter .8s var(--ease); }

/* barra de avance de la voz */
.voz{
  position:absolute; left:50%; bottom:calc(var(--pad) + 46px);
  transform:translateX(-50%);
  width:min(46vw,380px);
  display:none; flex-direction:column; align-items:center; gap:12px;
}
html.hablando .voz{ display:flex; }
.voz__barra{ width:100%; height:1px; background:rgba(213,238,188,.16); overflow:hidden; }
.voz__barra i{
  display:block; height:100%; width:0%; background:var(--lime);
  box-shadow:0 0 12px rgba(198,241,157,.8);
}
.voz__txt{
  color:var(--lime); font-size:9px; letter-spacing:.34em; opacity:.7;
  animation:breathTxt 2.6s ease-in-out infinite;
}
@keyframes breathTxt{ 0%,100%{ opacity:.3; } 50%{ opacity:.9; } }

/* salida */
.bye{
  position:fixed; inset:0; z-index:710; background:#000;
  display:none; flex-direction:column; gap:26px;
  align-items:center; justify-content:center;
}
html.salio .bye{ display:flex; animation:aparece .8s var(--ease); }
@keyframes aparece{ from{ opacity:0; } to{ opacity:1; } }
.bye p{ color:var(--muted); letter-spacing:.3em; font-size:11px; }

/* ============================================================
   TRANSICIÓN FINAL — el push de cámara hacia dentro del bosque
   ============================================================ */
.clip-final{
  position:absolute; inset:0; z-index:2;
  width:100%; height:100%; object-fit:cover;
  opacity:0; pointer-events:none;
  transition:opacity 1.2s var(--ease);
}
.clip-final.on{ opacity:1; }
/* mientras corre, la isla del hero se apaga: ya estamos adentro */
html.en-transicion .stage{ opacity:0; transition:opacity 1s var(--ease); }
/* y el texto se lee sobre el bosque */
html.en-transicion .hero__vignette{
  background:
    radial-gradient(120% 90% at 50% 30%, transparent 20%, rgba(0,0,0,.72) 100%),
    linear-gradient(180deg, rgba(0,0,0,.55) 0%, transparent 26%, rgba(0,0,0,.92) 100%);
}

/* ============================================================
   ETAPA 3 — blackout y lluvia de código
   ============================================================ */
.black{
  position:fixed; inset:0; z-index:740; background:#000;
  opacity:0; pointer-events:none;
  transition:opacity .9s var(--ease);
}
.black.on{ opacity:1; }

.matrix{
  position:fixed; inset:0; z-index:745;
  width:100%; height:100%; pointer-events:none;
  opacity:0; transition:opacity 1.6s var(--ease);
}
.matrix.on{ opacity:1; }

/* durante el blackout se apaga todo lo del hero */
html.blackout .hero__content,
html.blackout .brand,
html.blackout .hint,
html.blackout .clip-final,
html.blackout .stage,
html.blackout .neural{
  opacity:0 !important; transition:opacity .8s var(--ease);
}
html.blackout .son{ z-index:750; }

/* interruptor de sonido */
.son{
  position:fixed; left:var(--pad); bottom:var(--pad); z-index:720;
  display:none; align-items:flex-end; gap:2px; height:22px;
  color:var(--muted);
}
html.etapa-1 .son, html.etapa-2 .son{ display:flex; }
.son i{
  display:block; width:2px; height:4px; background:var(--lime); opacity:.35;
  transition:opacity .3s;
}
.son.sonando i{ animation:vu .9s ease-in-out infinite alternate; opacity:1; }
.son.sonando i:nth-child(2){ animation-delay:.15s; }
.son.sonando i:nth-child(3){ animation-delay:.3s; }
.son.sonando i:nth-child(4){ animation-delay:.45s; }
@keyframes vu{ from{ height:3px; } to{ height:16px; } }
.son span{ margin-left:8px; font-size:9px; letter-spacing:.26em; }

/* ============================================================
   ETAPAS DEL RITUAL — qué se ve en cada momento
   ============================================================ */
.brand, .count, #title, .creditos, .fecha, .hint{
  opacity:0; transform:translateY(18px); filter:blur(7px);
  transition:opacity 1.1s var(--ease), transform 1.2s var(--ease), filter 1s var(--ease);
}
.brand.on, .count.on, #title.on, .creditos.on, .fecha.on, .hint.on{
  opacity:1; transform:none; filter:none;
}
.hint.on{ opacity:.45; }

.brand span{ display:block; margin-top:5px; opacity:.45; letter-spacing:.30em; }

.creditos{
  margin-top:16px; color:var(--cream); opacity:.6;
  letter-spacing:.24em; font-size:10px;
}
.creditos.on{ opacity:.6; }

/* destello de glitch que cubre la pantalla en las transiciones */
.flash{
  position:fixed; inset:0; z-index:690; pointer-events:none;
  opacity:0; background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.9) 0 2px, transparent 2px 5px);
  mix-blend-mode:overlay;
}
.flash.go{ animation:flash .42s steps(3); }
@keyframes flash{
  0%  { opacity:0; transform:translateY(0); }
  20% { opacity:.85; transform:translateY(-6px) scaleY(1.02); }
  50% { opacity:.35; transform:translateY(5px); }
  80% { opacity:.7;  transform:translateY(-2px); }
  100%{ opacity:0; }
}

/* ============================================================
   HERO MINIMAL — sello, título, conteo y fecha. Nada más.
   ============================================================ */
.brand{
  position:absolute; top:var(--pad); left:var(--pad); z-index:5;
  color:var(--cream); opacity:.72; letter-spacing:.32em; font-size:10px;
}
/* arriba a la derecha: abajo choca con el bloque de texto */
.hint{
  position:absolute; top:var(--pad); right:var(--pad); z-index:5;
  color:var(--muted); font-size:9px; letter-spacing:.28em;
  animation:hintPulse 3.4s ease-in-out infinite;
}
@keyframes hintPulse{ 0%,100%{ opacity:.25; } 50%{ opacity:.7; } }
.hint.mute{ opacity:0; animation:none; transition:opacity .6s ease; }

.fecha{
  margin-top:14px; margin-bottom:8px;
  color:var(--lime); opacity:.85;
  letter-spacing:.30em; font-size:11px;
}
/* el bloque de abajo necesita aire propio: nada más se le encima */
.hero{ padding-bottom:calc(var(--pad) + 10px); }
.hero__content > *{ position:relative; }

.hero__content{ max-width:1200px; position:relative; z-index:5; }
/* el tamaño del título lo controla .glitch */
.hero h1{ max-width:15ch; }
.hero__tag{
  max-width:34ch; color:var(--sage); opacity:.8;
  font-size:clamp(15px,1.7vw,21px); line-height:1.45; margin-bottom:30px;
}

/* cuenta regresiva */
.count{ display:flex; gap:clamp(18px,3vw,44px); margin-bottom:34px; }
.count__u{ display:flex; flex-direction:column; gap:6px; }
.count__u span{
  font-size:clamp(30px,4.4vw,60px); font-weight:500;
  letter-spacing:-.04em; line-height:1; color:var(--lime);
  font-variant-numeric:tabular-nums;
}
.count__u i{ font-style:normal; color:var(--muted); font-size:10px; }
.count--live span{ animation:tickGlow .6s ease-out; }
@keyframes tickGlow{ from{ text-shadow:0 0 26px rgba(198,241,157,.9); } to{ text-shadow:none; } }
.hero__cta{ display:flex; align-items:center; gap:22px; flex-wrap:wrap; }
.hero__sub{ color:var(--sage); opacity:.7; }
.hero__foot{
  display:flex; align-items:center; gap:18px;
  margin-top:56px; padding-top:16px; border-top:1px solid var(--line);
  color:var(--muted);
}
.hero__line{ flex:1; height:1px; background:var(--line); overflow:hidden; }
.hero__line i{
  display:block; height:100%; width:22%; background:var(--lime);
  animation:sweep 3.4s var(--ease-io) infinite;
}
@keyframes sweep{ 0%{ transform:translateX(-110%); } 100%{ transform:translateX(560%); } }

/* split text */
.split{ overflow:hidden; }
.split .w{ display:inline-block; overflow:hidden; vertical-align:top; }
.split .w > i{
  display:inline-block; font-style:normal;
  transform:translateY(105%) rotate(3deg);
  transition:transform 1.05s var(--ease);
}
.split.in .w > i{ transform:none; }

.fade-up{ opacity:0; transform:translateY(22px); transition:opacity .9s var(--ease), transform .9s var(--ease); }
.fade-up.in{ opacity:1; transform:none; }

/* ============================================================
   MARQUEE
   ============================================================ */
.marquee{
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  overflow:hidden; padding:14px 0; background:var(--bg-2);
}
.marquee__track{ display:flex; width:max-content; animation:scrollx 32s linear infinite; }
.marquee__track span{ padding-right:40px; color:var(--sage); opacity:.6; font-size:12px; white-space:nowrap; }
.marquee__track b{ color:var(--lime); }
@keyframes scrollx{ to{ transform:translateX(-50%); } }

/* ============================================================
   INTRO
   ============================================================ */
.intro{ padding:clamp(90px,14vh,180px) var(--pad); max-width:1400px; }
.intro .h-lead{ margin-top:26px; max-width:22ch; }

.reveal{ opacity:0; transform:translateY(26px); transition:opacity 1s var(--ease), transform 1s var(--ease); }
.reveal.in{ opacity:1; transform:none; }
.reveal-mask{ overflow:hidden; }
.reveal-mask > span{ display:block; transform:translateY(105%); transition:transform 1.1s var(--ease); }
.reveal-mask.in > span{ transform:none; }

/* ============================================================
   FEATURES STICKY
   ============================================================ */
.feat{
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(30px,6vw,90px);
  padding:0 var(--pad) clamp(80px,12vh,160px);
  align-items:start;
}
.feat__visual{ position:sticky; top:14vh; height:72vh; }
.feat__card{
  position:relative; height:100%; border-radius:18px; overflow:hidden;
  border:1px solid var(--line); background:var(--bg-2);
}
.feat__cardbg{
  position:absolute; inset:0;
  background:
    radial-gradient(80% 60% at 30% 20%, rgba(198,241,157,.18), transparent 60%),
    radial-gradient(70% 70% at 80% 90%, rgba(11,94,82,.35), transparent 62%);
}
#featViz{ position:absolute; inset:0; width:100%; height:100%; }
.feat__cardmeta{
  position:absolute; left:20px; right:20px; top:18px;
  display:flex; justify-content:space-between; color:var(--lime);
}
.feat__progress{ position:absolute; left:0; right:0; bottom:0; height:2px; background:rgba(255,255,255,.08); }
.feat__progress i{ display:block; height:100%; width:0%; background:var(--lime); transition:width .5s var(--ease); }

.feat__list{ padding-top:14vh; }
.feat__item{
  padding:44px 0; border-bottom:1px solid var(--line);
  opacity:.32; transition:opacity .6s var(--ease);
}
.feat__item.active{ opacity:1; }
.feat__num{ color:var(--lime); display:block; margin-bottom:14px; }
.feat__item h3{
  font-size:clamp(21px,2.2vw,30px); font-weight:500; letter-spacing:-.028em;
  line-height:1.14; color:var(--white); margin-bottom:12px;
}
.feat__item p{ color:var(--muted); font-size:15px; line-height:1.6; max-width:46ch; }

@media (max-width:900px){
  .feat{ grid-template-columns:1fr; }
  .feat__visual{ position:relative; top:0; height:46vh; }
  .feat__list{ padding-top:24px; }
}

/* ============================================================
   STATS
   ============================================================ */
.stats{
  display:grid; grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.stat{ padding:clamp(30px,4vw,54px) var(--pad); border-right:1px solid var(--line); }
.stat:last-child{ border-right:0; }
.stat__n{ font-size:clamp(34px,4.4vw,64px); font-weight:500; letter-spacing:-.04em; color:var(--lime); }
.stat i{ font-style:normal; font-size:clamp(18px,2vw,28px); color:var(--lime); opacity:.6; }
.stat p{ margin-top:12px; color:var(--muted); }
@media (max-width:800px){ .stats{ grid-template-columns:repeat(2,1fr); } .stat:nth-child(2){ border-right:0; } }

/* ============================================================
   SECCIONES GENÉRICAS
   ============================================================ */
.sec__head{ padding:clamp(80px,12vh,150px) var(--pad) clamp(30px,5vh,60px); max-width:1500px; }
.sec__head .h-2,.sec__head .h-3{ margin-top:20px; max-width:20ch; }
.sec__head--row{ display:flex; align-items:flex-end; justify-content:space-between; gap:30px; flex-wrap:wrap; }

/* ---------- soluciones ---------- */
.sol__grid{
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(14px,2vw,26px);
  padding:0 var(--pad) clamp(60px,10vh,120px);
}
.sol__card{
  position:relative; border-radius:18px; overflow:hidden;
  border:1px solid var(--line); background:var(--bg-2);
  transition:transform .7s var(--ease), border-color .5s ease;
}
.sol__card:hover{ transform:translateY(-8px); border-color:var(--line-2); }
.sol__media{ position:relative; aspect-ratio:16/11; overflow:hidden; }
.sol__mesh{ position:absolute; inset:-20%; filter:blur(38px); transition:transform 1.2s var(--ease); }
.sol__card:hover .sol__mesh{ transform:scale(1.16) rotate(4deg); }
.m1{ background:
  radial-gradient(45% 45% at 25% 30%, #78C46A, transparent 62%),
  radial-gradient(50% 50% at 75% 70%, #0B5E52, transparent 64%),
  radial-gradient(40% 40% at 60% 20%, #C6F19D, transparent 60%); }
.m2{ background:
  radial-gradient(45% 45% at 70% 30%, #2C6B33, transparent 62%),
  radial-gradient(55% 55% at 25% 75%, #CC8343, transparent 60%),
  radial-gradient(40% 40% at 50% 45%, #C6F19D, transparent 58%); }
.sol__body{ position:relative; padding:26px 26px 30px; }
.sol__body h3{
  margin-top:14px; font-size:clamp(20px,2.1vw,29px); font-weight:500;
  letter-spacing:-.03em; line-height:1.14; color:var(--white); max-width:20ch;
}
.arrow{
  position:absolute; right:26px; top:26px; font-size:20px; color:var(--lime);
  transition:transform .5s var(--ease);
}
.sol__card:hover .arrow{ transform:translate(4px,-4px); }
@media (max-width:800px){ .sol__grid{ grid-template-columns:1fr; } }

/* ============================================================
   TECNOLOGÍA — SCROLL HORIZONTAL
   ============================================================ */
.tech{ position:relative; height:420vh; }
.tech__sticky{
  position:sticky; top:0; height:100svh; overflow:hidden;
  display:flex; flex-direction:column; justify-content:center;
  padding:0 0 0 var(--pad);
}
.tech__head{ padding-bottom:38px; max-width:900px; }
.tech__head .h-2{ margin-top:16px; }
.tech__rail{ display:flex; gap:20px; will-change:transform; }
.tech__panel{
  position:relative; flex:0 0 clamp(260px,26vw,380px);
  min-height:clamp(280px,38vh,400px);
  border:1px solid var(--line); border-radius:16px;
  background:linear-gradient(160deg, rgba(198,241,157,.06), rgba(10,22,11,.4));
  padding:24px; overflow:hidden;
  display:flex; flex-direction:column;
}
.tech__panel--dark{ background:var(--lime); color:var(--bg); border-color:var(--lime); }
.tech__panel--dark .mono{ color:rgba(15,31,16,.7); }
.tech__panel--dark p{ color:rgba(15,31,16,.72); }
.tech__panel .mono{ color:var(--lime); }
.tech__panel h4{
  margin-top:auto; font-size:clamp(22px,2.4vw,34px); font-weight:500;
  letter-spacing:-.03em; line-height:1.08;
}
.tech__panel--dark h4{ color:var(--bg); }
.tech__panel p{ margin-top:12px; color:var(--muted); font-size:14px; line-height:1.55; }
.tech__wave{
  position:absolute; left:0; right:0; top:38%; height:90px; opacity:.5;
  background:
    repeating-linear-gradient(90deg, transparent 0 5px, rgba(198,241,157,.35) 5px 6px);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 20%,#000 80%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 20%,#000 80%,transparent);
  animation:wave 6s linear infinite;
}
.tech__wave[data-wave="2"]{ animation-duration:4.4s; }
.tech__wave[data-wave="3"]{ animation-duration:7.2s; }
.tech__wave[data-wave="4"]{ animation-duration:5.1s; }
.tech__wave[data-wave="5"]{ background:repeating-linear-gradient(90deg, transparent 0 5px, rgba(15,31,16,.3) 5px 6px); }
@keyframes wave{ to{ background-position-x:120px; } }
.tech__progress{ position:absolute; left:var(--pad); right:var(--pad); bottom:38px; height:1px; background:var(--line); }
.tech__progress i{ display:block; height:100%; width:0%; background:var(--lime); }

@media (max-width:800px){
  .tech{ height:auto; }
  .tech__sticky{ position:relative; height:auto; padding:80px var(--pad); }
  .tech__rail{ flex-direction:column; transform:none !important; }
  .tech__panel{ flex:1 1 auto; }
  .tech__progress{ display:none; }
}

/* ============================================================
   KINETIC
   ============================================================ */
.kinetic{
  padding:clamp(100px,18vh,220px) var(--pad);
  text-align:center; border-top:1px solid var(--line);
}
.kinetic h2{
  font-size:clamp(38px,9vw,150px); font-weight:500;
  letter-spacing:-.05em; line-height:.9; color:var(--white);
}
.kinetic__l2{ color:var(--lime) !important; }
.kinetic__sub{ margin-top:34px; color:var(--muted); font-size:clamp(15px,1.6vw,20px); }
.split-chars .c{ display:inline-block; transform:translateY(100%); opacity:0; transition:transform .9s var(--ease), opacity .6s ease; }
.split-chars.in .c{ transform:none; opacity:1; }
.split-chars{ overflow:hidden; }

/* ============================================================
   MANIFIESTO
   ============================================================ */
.mani__list{ padding:0 var(--pad) clamp(70px,10vh,130px); border-top:1px solid var(--line); }
.mani__list li{
  display:grid; grid-template-columns:70px 1fr; gap:20px; align-items:start;
  padding:34px 0; border-bottom:1px solid var(--line);
}
.mani__list span{ color:var(--lime); padding-top:6px; }
.mani__list p{
  font-size:clamp(19px,2.2vw,32px); font-weight:400; letter-spacing:-.028em;
  line-height:1.2; color:var(--sage); max-width:28ch;
}

/* ============================================================
   CASOS
   ============================================================ */
.cases__grid{
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(14px,2vw,26px);
  padding:0 var(--pad) clamp(60px,10vh,120px);
}
.case{ display:block; }
.case__img{
  aspect-ratio:16/10; border-radius:16px; overflow:hidden; margin-bottom:20px;
  border:1px solid var(--line);
  transition:transform .8s var(--ease), filter .8s var(--ease);
  filter:saturate(.85);
}
.case:hover .case__img{ transform:scale(1.015); filter:saturate(1.1); }
.c1{ background:
  radial-gradient(50% 60% at 25% 35%, #78C46A, transparent 62%),
  radial-gradient(60% 60% at 80% 70%, #14361A, transparent 60%),
  linear-gradient(140deg,#0B5E52,#0A160B); }
.c2{ background:
  radial-gradient(50% 60% at 70% 30%, #C6F19D, transparent 60%),
  radial-gradient(60% 60% at 20% 75%, #1B69CF, transparent 62%),
  linear-gradient(140deg,#14361A,#0A160B); }
.case h3{
  margin-top:10px; font-size:clamp(19px,1.9vw,26px); font-weight:500;
  letter-spacing:-.028em; line-height:1.18; color:var(--white); max-width:26ch;
}
.case footer{
  margin-top:18px; padding-top:14px; border-top:1px solid var(--line);
  display:flex; justify-content:space-between; color:var(--muted);
}
.case footer em{ font-style:normal; color:var(--lime); }
@media (max-width:800px){ .cases__grid{ grid-template-columns:1fr; } }

/* ============================================================
   NEWS
   ============================================================ */
.news__list{ padding:0 var(--pad) clamp(70px,10vh,130px); }
.news__row{
  position:relative; display:grid;
  grid-template-columns:180px 110px 1fr 30px; gap:20px; align-items:center;
  padding:30px 0; border-top:1px solid var(--line);
  transition:padding .5s var(--ease);
}
.news__row:last-child{ border-bottom:1px solid var(--line); }
.news__row .mono{ color:var(--muted); }
.news__row p{
  font-size:clamp(17px,1.7vw,24px); font-weight:400; letter-spacing:-.024em;
  color:var(--white); transition:color .4s ease, transform .6s var(--ease);
}
.news__row .arrow{ position:static; text-align:right; }
.news__row:hover{ padding-left:18px; }
.news__row:hover p{ color:var(--lime); }
@media (max-width:800px){
  .news__row{ grid-template-columns:1fr auto; }
  .news__row p{ grid-column:1/-1; }
}

/* ============================================================
   CTA
   ============================================================ */
.cta{
  position:relative; overflow:hidden; isolation:isolate;
  padding:clamp(110px,20vh,240px) var(--pad);
  text-align:center; border-top:1px solid var(--line);
}
.cta__bg{ position:absolute; inset:-20%; z-index:-1; opacity:.9; }
.cta__bg .blobs{ filter:blur(70px); }
.cta h2{ max-width:16ch; margin:0 auto; }
.cta__p{ margin:26px auto 40px; color:var(--muted); max-width:40ch; font-size:clamp(15px,1.6vw,19px); }

/* ============================================================
   FOOTER
   ============================================================ */
.foot{ background:var(--bg-2); border-top:1px solid var(--line); padding:clamp(50px,8vh,90px) var(--pad) 0; }
.foot__grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:30px; }
.foot__col{ display:flex; flex-direction:column; gap:10px; }
.foot__col .label{ margin-bottom:8px; }
.foot__col a{ color:var(--muted); font-size:14px; transition:color .3s; }
.foot__col a:hover{ color:var(--lime); }
.foot__mark{
  margin:clamp(40px,7vh,80px) 0 0;
  font-size:clamp(58px,17vw,260px); font-weight:600; letter-spacing:-.06em;
  line-height:.8; text-align:center;
  color:transparent;
  background:linear-gradient(180deg, rgba(198,241,157,.22), rgba(198,241,157,0));
  -webkit-background-clip:text; background-clip:text;
  user-select:none;
}
.foot__bar{
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
  padding:22px 0; border-top:1px solid var(--line); color:var(--muted);
}
.foot__bar a:hover{ color:var(--lime); }
@media (max-width:900px){ .foot__grid{ grid-template-columns:repeat(2,1fr); } }

@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition-duration:.01ms !important; }
}

/* ============================================================
   EL JUEGO — los siete fragmentos
   ============================================================ */
.abrir-juego{
  position:fixed; right:var(--pad); bottom:var(--pad); z-index:760;
  display:none; align-items:center; gap:10px;
  padding:13px 20px; border-radius:100px;
  border:1px solid var(--line-2); background:rgba(0,0,0,.72);
  backdrop-filter:blur(12px);
  color:var(--cream); font-size:10px; letter-spacing:.22em;
  transition:border-color .4s var(--ease), color .4s var(--ease);
}
html.etapa-1 .abrir-juego, html.etapa-2 .abrir-juego{ display:flex; }
.abrir-juego b{ color:var(--lime); font-weight:400; }
.abrir-juego:hover{ border-color:var(--lime); color:var(--lime); }

.juego{
  position:fixed; inset:0; z-index:770;
  background:rgba(0,0,0,.94); backdrop-filter:blur(18px);
  padding:var(--pad);
  overflow-y:auto;
  display:flex; flex-direction:column; gap:26px;
  opacity:0; pointer-events:none;
  transition:opacity .5s var(--ease);
}
.juego.on{ opacity:1; pointer-events:auto; }

.juego__top{ display:flex; align-items:flex-start; justify-content:space-between; gap:20px; }
.eyebrow{ color:var(--lime); font-size:10px; letter-spacing:.30em; opacity:.8; }
.juego__h{
  margin-top:8px; font-size:clamp(26px,4.4vw,52px); font-weight:600;
  letter-spacing:-.04em; line-height:1; color:var(--white);
}
.juego__cerrar{
  font-size:10px; letter-spacing:.2em; color:var(--muted);
  padding:8px 4px; transition:color .3s;
}
.juego__cerrar:hover{ color:var(--lime); }

/* avance */
.barra{ display:flex; flex-direction:column; gap:9px; }
.barra__pista{ height:1px; background:rgba(213,238,188,.15); overflow:hidden; }
.barra__pista i{
  display:block; height:100%; width:0%; background:var(--lime);
  box-shadow:0 0 14px rgba(198,241,157,.7);
  transition:width 1s var(--ease);
}
.barra__txt{ font-size:9px; letter-spacing:.26em; color:var(--muted); }

/* rejilla de fragmentos */
.frags{
  display:grid; gap:1px; background:rgba(213,238,188,.10);
  border:1px solid rgba(213,238,188,.10);
  grid-template-columns:repeat(auto-fit,minmax(178px,1fr));
}
.frag{
  background:#000; padding:20px 18px;
  display:flex; flex-direction:column; gap:9px; min-height:172px;
  transition:background .5s var(--ease);
}
.frag__letra{
  font-size:40px; font-weight:600; line-height:1; letter-spacing:-.04em;
  color:rgba(245,244,242,.13); transition:color .8s var(--ease);
  font-family:var(--font);
}
.frag__nom{ font-size:13px; letter-spacing:.16em; color:var(--muted); }
.frag__desc{ font-size:12.5px; line-height:1.5; color:rgba(245,244,242,.34); }
.frag__via{
  margin-top:auto; padding-top:11px; border-top:1px dashed rgba(213,238,188,.14);
  font-size:9px; letter-spacing:.2em; color:var(--muted);
}
.frag.abierto{ background:#080B05; }
.frag.abierto .frag__letra{ color:var(--lime); }
.frag.abierto .frag__nom{ color:var(--sage); }
.frag.abierto .frag__desc{ color:rgba(245,244,242,.7); }
.frag.abierto .frag__via{ color:var(--lime); border-top-color:rgba(198,241,157,.3); }
.frag.recien{ animation:destape 1.1s var(--ease); }
@keyframes destape{
  0%  { background:var(--lime); }
  100%{ background:#080B05; }
}

/* coordenada */
.coord{
  border:1px solid rgba(213,238,188,.14); padding:20px;
  display:flex; flex-direction:column; gap:10px;
}
.coord__val{
  font-size:clamp(20px,3.4vw,34px); letter-spacing:.34em; color:var(--lime);
  font-variant-numeric:tabular-nums;
}
.coord__ayuda{ font-size:9px; letter-spacing:.2em; color:var(--muted); }

/* consola de códigos */
.consola{
  display:flex; align-items:center; gap:12px;
  border:1px solid rgba(213,238,188,.2); padding:4px 4px 4px 16px;
}
.consola__p{ color:var(--lime); font-size:13px; }
.consola__in{
  flex:1; background:none; border:0; outline:none; padding:14px 0;
  color:var(--cream); font-size:12px; letter-spacing:.18em; text-transform:uppercase;
  font-family:var(--mono);
}
.consola__in::placeholder{ color:rgba(245,244,242,.24); letter-spacing:.18em; }
.consola__ok{
  padding:13px 20px; background:var(--lime); color:#000;
  font-size:10px; letter-spacing:.2em;
  transition:opacity .3s;
}
.consola__ok:hover{ opacity:.82; }
.consola__msg{ font-size:10px; letter-spacing:.16em; min-height:14px; color:var(--muted); }
.consola__msg.ok{ color:var(--lime); }
.consola__msg.mal{ color:#FF6B87; }

@media (max-width:600px){
  .juego{ gap:20px; }
  .frag{ min-height:150px; }
}

/* ============================================================
   EL PROTOCOLO — segundo ciclo
   ============================================================ */
/* la advertencia corrompida */
html.corrupto .warn__kicker::after{ content:""; }
html.corrupto .warn__sub{ opacity:.35; }
html.corrupto #warnFoot{ opacity:0; }
html.corrupto .opt--out{
  opacity:.22; pointer-events:none;
  text-decoration:line-through; border-color:rgba(245,244,242,.16);
}
html.corrupto .opt--out::before{ display:none; }

/* consola del protocolo */
.proto{
  display:none; flex-direction:column; gap:18px;
  max-width:640px; margin-top:8px;
}
html.protocolo .proto{ display:flex; }
html.protocolo .warn__acts,
html.protocolo .warn__core,
html.protocolo #warnFoot{ display:none; }

.proto__linea{
  font-size:clamp(15px,2.4vw,22px); line-height:1.4; color:var(--cream);
  letter-spacing:-.01em; min-height:2.6em;
}
.proto__linea b{ color:var(--lime); font-weight:400; }
.proto__form{
  display:flex; align-items:center; gap:12px;
  border-bottom:1px solid rgba(198,241,157,.34); padding-bottom:10px;
}
.proto__p{ color:var(--lime); font-size:14px; }
.proto__in{
  flex:1; background:none; border:0; outline:none;
  color:var(--lime); font-size:15px; letter-spacing:.22em; text-transform:uppercase;
  font-family:var(--mono); padding:4px 0;
}
.proto__in::placeholder{ color:rgba(198,241,157,.22); }
.proto.mal{ animation:sacude .32s steps(3); }
@keyframes sacude{
  0%,100%{ transform:translateX(0); }
  33%    { transform:translateX(-7px); }
  66%    { transform:translateX(6px); }
}

/* el conteo glitcheado del segundo ciclo */
.count.roto span{ color:#FF6B87; }

/* pistas hacia afuera: post y pre-save */
.proto__fuera{ display:flex; flex-direction:column; gap:12px; margin-top:10px; }
.proto__fuera-t{ font-size:9px; letter-spacing:.28em; color:var(--muted); }
.proto__links{ display:flex; gap:10px; flex-wrap:wrap; }
.proto__link{
  border:1px solid rgba(198,241,157,.3); color:var(--lime);
  padding:10px 18px; border-radius:100px;
  font-size:10px; letter-spacing:.2em;
  transition:background .35s var(--ease), color .35s var(--ease);
}
.proto__link:hover{ background:var(--lime); color:#000; }

/* ============================================================
   GLITCH ORGÁNICO — la corrupción no se anuncia, se avería
   ============================================================ */
/* por encima del apagón y de la lluvia: si queda debajo, la
   avería se dibuja detrás del negro y no se ve nada */
.fx{ position:fixed; inset:0; z-index:790; pointer-events:none; overflow:hidden; }
.fx__tear{
  position:absolute; left:-6%; width:112%;
  mix-blend-mode:difference; will-change:transform;
}
.fx__scan{
  position:absolute; left:0; right:0; height:2px;
  background:rgba(226,255,214,.55);
  box-shadow:0 0 22px rgba(198,241,157,.6);
  opacity:0;
}

/* sacudida del contenido de la advertencia */
.warn__core, .warn__acts, .warn__marks, .proto{ will-change:transform, filter; }
.tiembla{ animation:tiembla .22s steps(2) 1; }
@keyframes tiembla{
  0%  { transform:translate(0,0); }
  30% { transform:translate(-5px,1px); }
  60% { transform:translate(4px,-2px); }
  100%{ transform:translate(0,0); }
}

/* el texto inestable no se queda quieto nunca */
.inquieto{ position:relative; }

@media (prefers-reduced-motion:reduce){
  .fx{ display:none; }
  .tiembla{ animation:none; }
}