/* =========================================================================
   HELIX LAB — Sistema visual compartido
   Lenguaje: "Console & Paper" — consola petróleo para la voz de Helix,
   papel de laboratorio para lo que se entrega y se lee.
   FUENTE ÚNICA DE COLOR: editar solo el bloque :root.
   ========================================================================= */

:root{
  /* ---- Superficies ---- */
  --ink:        #0B1512;   /* petróleo profundo — consola */
  --ink-2:      #0E1B16;   /* consola elevada */
  --ink-deep:   #040B08;   /* fondo del hero, más profundo */
  --paper:      #F2F4EF;   /* papel de laboratorio */
  --paper-2:    #E9EDE4;   /* papel sombreado */

  /* ---- Acento ---- */
  --neon:       #46FFA1;   /* verde neón — SOLO sobre consola */
  --neon-mid:   #2EE27F;
  --neon-dim:   rgba(70,255,161,0.55);
  --tinta:      #0F6B45;   /* verde tinta — SOLO sobre papel */
  /* Los shaders WebGL leen estos tokens con getComputedStyle:
     cambiar el color acá lo cambia también en la galaxia. */
  --green-core: #EAFFF2;
  --green-deep: #127242;

  /* ---- Texto ---- */
  --tx-dark:      #DCEFE4;
  --tx-dark-dim:  rgba(220,239,228,0.58);
  --tx-dark-faint:rgba(220,239,228,0.34);
  --tx-paper:     #17251E;
  --tx-paper-dim: rgba(23,37,30,0.62);

  /* ---- Líneas ---- */
  --line-dark:  rgba(70,255,161,0.14);
  --line-soft:  rgba(220,239,228,0.10);
  --line-paper: rgba(15,60,40,0.16);

  /* ---- Tipografía ---- */
  --serif:'Instrument Serif',Georgia,'Times New Roman',serif;
  --sans: 'Instrument Sans','Helvetica Neue',Helvetica,Arial,system-ui,sans-serif;
  --mono: 'IBM Plex Mono',ui-monospace,'SFMono-Regular',Menlo,monospace;

  /* ---- Ritmo ---- */
  --max: 1140px;
  --pad: clamp(20px, 5vw, 28px);
  --sec: clamp(72px, 10vw, 132px);
}

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto;} }

body{
  background:var(--ink);
  color:var(--tx-dark);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block;}
a{color:inherit;text-decoration:none;}

/* [hidden] debe ganarle a cualquier clase con display (.btn, .canal…).
   Sin esto, un canal de contacto sin datos cargados quedaría visible. */
[hidden]{display:none !important;}
::selection{background:var(--neon);color:var(--ink);}

/* Foco visible en todo elemento interactivo */
a:focus-visible,button:focus-visible,summary:focus-visible{
  outline:2px solid var(--neon); outline-offset:3px; border-radius:4px;
}
.paper a:focus-visible,.paper button:focus-visible,.paper summary:focus-visible{
  outline-color:var(--tinta);
}

/* Salto de ancla por debajo del nav fijo */
[id]{scroll-margin-top:88px;}

/* ---------- Superficies de sección ---------- */
.dark { background:var(--ink);  color:var(--tx-dark); }
.paper{ background:var(--paper);color:var(--tx-paper); }
.sec  { padding:var(--sec) 0; }
.wrap { max-width:var(--max); margin:0 auto; padding:0 var(--pad); }

/* ---------- Tipografía de sistema ---------- */
.eyebrow{
  font-family:var(--mono); font-size:11px; letter-spacing:.30em;
  text-transform:uppercase; display:block; margin-bottom:22px;
}
.dark  .eyebrow{ color:var(--neon); }
.paper .eyebrow{ color:var(--tinta); }

h1,h2,h3{ font-family:var(--serif); font-weight:400; line-height:1.08; }
h1{ font-size:clamp(2.5rem,6.2vw,4.6rem); letter-spacing:-.015em; }
h2{ font-size:clamp(1.9rem,4.2vw,3.1rem); letter-spacing:-.01em; margin-bottom:22px; }
h3{ font-size:clamp(1.25rem,2.2vw,1.6rem); margin-bottom:10px; }
em{ font-style:italic; }
.dark  h1 em,.dark  h2 em{ color:var(--neon); }
.paper h2 em,.paper h3 em{ color:var(--tinta); }

.lead{ font-size:clamp(1.02rem,1.5vw,1.2rem); max-width:60ch; }
.dark  .lead{ color:var(--tx-dark-dim); }
.paper .lead{ color:var(--tx-paper-dim); }

/* ---------- Botones ---------- */
.btn{
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--mono); font-size:12.5px; letter-spacing:.06em;
  padding:15px 26px; border-radius:2px; border:1px solid transparent;
  cursor:pointer; transition:background-color .18s,border-color .18s,color .18s,transform .18s;
  min-height:48px;
}
.btn-solid{ background:var(--neon); color:var(--ink); font-weight:500; }
.btn-solid:hover{ background:var(--neon-mid); transform:translateY(-1px); }
.btn-ghost{ background:transparent; color:var(--tx-dark); border-color:var(--line-dark); }
.btn-ghost:hover{ border-color:var(--neon); color:var(--neon); }
.paper .btn-solid{ background:var(--tinta); color:var(--paper); }
.paper .btn-solid:hover{ background:#0c5738; }
.paper .btn-ghost{ color:var(--tx-paper); border-color:var(--line-paper); }
.paper .btn-ghost:hover{ border-color:var(--tinta); color:var(--tinta); }
.btn-row{ display:flex; flex-wrap:wrap; gap:12px; margin-top:34px; }

/* ---------- NAV ---------- */
nav{
  position:fixed; top:0; left:0; right:0; z-index:60;
  background:rgba(11,21,18,.80); backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line-soft);
}
.nav-in{
  max-width:var(--max); margin:0 auto; padding:0 var(--pad);
  height:66px; display:flex; align-items:center; justify-content:space-between;
}
.brand{ display:inline-flex; align-items:center; gap:11px;
  font-family:var(--mono); font-size:12px; letter-spacing:.26em; color:var(--tx-dark); }

/* Emblema del logo — archivo original, recortado con fondo transparente.
   No se redibuja: es el mismo trazo del PNG provisto. */
.brand-mark{
  width:28px; height:28px; flex:0 0 28px;
  display:block; object-fit:contain;
}
/* Logo completo (emblema + palabra), para el pie */
.brand-full{ width:74px; height:74px; display:block; }

.nav-links{ display:flex; align-items:center; gap:28px; }
.nav-links a{
  font-family:var(--mono); font-size:12px; letter-spacing:.05em;
  color:var(--tx-dark-dim); transition:color .16s;
}
.nav-links a:hover{ color:var(--tx-dark); }
.nav-cta{
  border:1px solid var(--line-dark); padding:0 18px; border-radius:2px;
  min-height:44px; display:inline-flex; align-items:center;
  color:var(--neon) !important;
}
.nav-cta:hover{ background:var(--neon); color:var(--ink) !important; }

.nav-toggle{
  display:none; width:44px; height:44px; background:none;
  border:1px solid var(--line-dark); border-radius:2px; cursor:pointer;
  align-items:center; justify-content:center;
}
.nav-toggle span{ display:block; width:16px; height:1px; background:var(--tx-dark); position:relative; }
.nav-toggle span::before,.nav-toggle span::after{
  content:""; position:absolute; left:0; width:16px; height:1px; background:var(--tx-dark);
}
.nav-toggle span::before{ top:-5px; } .nav-toggle span::after{ top:5px; }

.nav-mobile{ display:none; background:var(--ink-2); border-bottom:1px solid var(--line-soft); padding:8px var(--pad) 18px; }
.nav-mobile.open{ display:block; }
.nav-mobile a{
  display:block; font-family:var(--mono); font-size:13px; color:var(--tx-dark-dim);
  padding:14px 0; border-bottom:1px solid var(--line-soft);
}
.nav-mobile a:last-child{ border-bottom:0; color:var(--neon); }

@media (max-width:880px){
  .nav-links{ display:none; }
  .nav-toggle{ display:inline-flex; }
}

/* ---------- HERO ---------- */
.hero{
  position:relative; background:var(--ink-deep); overflow:hidden;
  padding-top:66px;
}
/* Nebulosa: fondo CSS SIEMPRE presente. El canvas la enriquece si hay JS. */
.hero-bg{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(115% 85% at 88% 32%, rgba(70,255,161,.20), transparent 56%),
    radial-gradient(80% 70% at 100% 8%,  rgba(46,226,127,.13), transparent 62%),
    radial-gradient(130% 110% at 40% 115%, rgba(4,11,8,.92), var(--ink-deep) 72%);
}
.hero-bg canvas{ position:absolute; inset:0; width:100%; height:100%; display:block; }
/* Viñeta: protege la legibilidad del texto a la izquierda */
.hero-veil{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(90deg,var(--ink-deep) 4%,rgba(4,11,8,.72) 38%,rgba(4,11,8,.10) 76%,transparent 100%);
}
.hero .wrap{ position:relative; z-index:2; }
.hero-in{
  min-height:clamp(520px,80vh,760px);
  display:flex; flex-direction:column; justify-content:center;
  padding:clamp(56px,9vh,104px) 0; max-width:62ch;
}
.hero-sub{ margin-top:26px; font-size:clamp(1.02rem,1.5vw,1.22rem); color:var(--tx-dark-dim); max-width:52ch; }
.hero-meta{
  margin-top:44px; padding-top:22px; border-top:1px solid var(--line-soft);
  display:flex; flex-wrap:wrap; gap:14px 36px;
  font-family:var(--mono); font-size:11.5px; letter-spacing:.05em; color:var(--tx-dark-faint);
}
.hero-meta b{ color:var(--tx-dark-dim); font-weight:400; }

@media (max-width:720px){
  /* Mobile: la nebulosa se atenúa y sube, el texto manda */
  .hero-veil{ background:linear-gradient(180deg,rgba(4,11,8,.55) 0%,rgba(4,11,8,.86) 46%,var(--ink-deep) 100%); }
}

/* ---------- Listado editorial de servicios ---------- */
.svc-list{ margin-top:56px; border-top:1px solid var(--line-paper); }
.svc{
  display:grid; grid-template-columns:150px 1fr 300px; gap:32px;
  padding:34px 0; border-bottom:1px solid var(--line-paper); align-items:start;
}
.svc-tag{ font-family:var(--mono); font-size:11px; letter-spacing:.20em; text-transform:uppercase; color:var(--tinta); padding-top:7px; }
.svc p{ color:var(--tx-paper-dim); }
.svc-ej{
  background:var(--paper-2); border-left:2px solid var(--tinta);
  padding:16px 18px; font-size:.92rem; color:var(--tx-paper-dim);
}
.svc-ej b{ display:block; font-family:var(--mono); font-size:10px; letter-spacing:.20em;
  text-transform:uppercase; color:var(--tinta); margin-bottom:7px; font-weight:500; }
@media (max-width:940px){ .svc{ grid-template-columns:1fr; gap:16px; } .svc-tag{ padding-top:0; } }

.svc-foot{ margin-top:34px; font-size:.96rem; color:var(--tx-paper-dim); }
.svc-foot a{ color:var(--tinta); border-bottom:1px solid var(--line-paper); }
.svc-foot a:hover{ border-color:var(--tinta); }

/* ---------- Capas progresivas ---------- */
.capas{ margin-top:50px; display:grid; gap:12px; }
.capa{
  display:grid; grid-template-columns:56px 1fr; gap:22px; align-items:start;
  padding:26px 24px; border:1px solid var(--line-soft); background:var(--ink-2);
  border-left:2px solid var(--line-dark); transition:border-color .2s;
}
.capa:hover{ border-left-color:var(--neon); }
.capa .n{ font-family:var(--mono); font-size:12px; letter-spacing:.14em; color:var(--neon); padding-top:6px; }
.capa p{ color:var(--tx-dark-dim); font-size:.97rem; }
@media (max-width:560px){ .capa{ grid-template-columns:1fr; gap:8px; } }

/* ---------- Método (papel) ---------- */
.metodo{ margin-top:52px; display:grid; grid-template-columns:repeat(2,1fr); gap:0; border-top:1px solid var(--line-paper); }
.met{ padding:30px 30px 30px 0; border-bottom:1px solid var(--line-paper); }
.met:nth-child(odd){ border-right:1px solid var(--line-paper); padding-right:30px; }
.met:nth-child(even){ padding-left:30px; }
.met p{ color:var(--tx-paper-dim); font-size:.97rem; }
@media (max-width:720px){
  .metodo{ grid-template-columns:1fr; }
  .met,.met:nth-child(odd),.met:nth-child(even){ padding:26px 0; border-right:0; }
}

.principios{ margin-top:44px; display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.ppo{
  border-top:2px solid var(--tinta); padding:18px 0 0;
  font-family:var(--serif); font-size:1.16rem; line-height:1.3; color:var(--tx-paper);
}
.ppo small{ display:block; margin-top:12px; font-family:var(--mono); font-size:10px;
  letter-spacing:.2em; text-transform:uppercase; color:var(--tx-paper-dim); }
@media (max-width:720px){ .principios{ grid-template-columns:1fr; gap:24px; } }

/* ---------- Antes / Después ---------- */
.baba{ margin-top:48px; display:grid; grid-template-columns:1fr 1fr; gap:20px; }
@media (max-width:760px){ .baba{ grid-template-columns:1fr; } }
.baba .col{ padding:30px; border:1px solid var(--line-soft); }
.baba .antes{ background:var(--ink-2); }
.baba .despues{ background:var(--paper); color:var(--tx-paper); border-color:transparent; }
.baba .tag{ font-family:var(--mono); font-size:10.5px; letter-spacing:.22em; text-transform:uppercase; }
.baba .antes .tag{ color:var(--tx-dark-faint); }
.baba .despues .tag{ color:var(--tinta); }
.baba h3{ margin:12px 0 18px; }
.baba li{ list-style:none; padding:11px 0; display:flex; gap:13px; align-items:baseline; font-size:.96rem; border-top:1px solid; }
.baba .antes li{ border-color:var(--line-soft); color:var(--tx-dark-dim); }
.baba .despues li{ border-color:var(--line-paper); color:var(--tx-paper-dim); }
.baba li::before{ content:""; flex:0 0 6px; width:6px; height:6px; margin-top:8px; }
.baba .antes li::before{ background:var(--tx-dark-faint); }
.baba .despues li::before{ background:var(--tinta); border-radius:50%; }

/* ---------- Puente interno entre secciones (enlace-guía) ----------
   Lleva de una sección a la siguiente sin ocupar lugar en el menú.
   Discreto: mono, alineado a la intención de lectura, con flecha. */
.puente{
  display:inline-flex; align-items:center; gap:9px; margin-top:26px;
  font-family:var(--mono); font-size:12.5px; letter-spacing:.04em;
  padding-bottom:2px; border-bottom:1px solid transparent;
  transition:border-color .18s, color .18s;
}
.puente .flecha{ transition:transform .18s; }
.puente:hover .flecha{ transform:translateY(3px); }
.dark  .puente{ color:var(--neon); border-color:var(--line-dark); }
.dark  .puente:hover{ border-color:var(--neon); }
.paper .puente{ color:var(--tinta); border-color:var(--line-paper); }
.paper .puente:hover{ border-color:var(--tinta); }

/* ---------- Iceberg ---------- */
.iceberg{ margin-top:48px; display:grid; grid-template-columns:.95fr 1.05fr; gap:44px; align-items:center; }
@media (max-width:860px){ .iceberg{ grid-template-columns:1fr; gap:30px; } }
.ice-visual{ position:relative; min-height:400px; border:1px solid var(--line-soft); background:var(--ink-2); overflow:hidden; }
.ice-tip{
  position:absolute; top:8%; left:50%; transform:translateX(-50%);
  font-family:var(--serif); font-size:1.15rem; color:var(--tx-dark);
  padding:9px 20px; border:1px solid var(--line-dark); background:rgba(4,11,8,.7); white-space:nowrap;
}
.ice-line{ position:absolute; left:0; right:0; top:28%; height:1px; background:var(--neon); opacity:.45; }
.ice-line span{
  position:absolute; right:14px; top:-20px; font-family:var(--mono);
  font-size:9.5px; letter-spacing:.20em; color:var(--neon);
}
.ice-depths{ position:absolute; top:34%; left:0; right:0; bottom:0; padding:20px 24px; display:grid; align-content:start; gap:11px; }
.ice-depths i{
  font-style:normal; font-family:var(--mono); font-size:11.5px; letter-spacing:.04em;
  color:var(--tx-dark-dim); padding-left:20px; position:relative;
}
.ice-depths i::before{ content:""; position:absolute; left:0; top:8px; width:9px; height:1px; background:var(--neon); opacity:.55; }
.ice-depths i:nth-child(n+5){ color:var(--tx-dark-faint); }

/* ---------- Proceso (secuencia real) ---------- */
.pasos{ margin-top:48px; border-top:1px solid var(--line-paper); }
.paso{ display:grid; grid-template-columns:86px 1fr; gap:26px; padding:28px 0; border-bottom:1px solid var(--line-paper); align-items:start; }
.paso .n{ font-family:var(--mono); font-size:12px; letter-spacing:.14em; color:var(--tinta); padding-top:8px; }
.paso p{ color:var(--tx-paper-dim); max-width:62ch; }
@media (max-width:560px){ .paso{ grid-template-columns:1fr; gap:8px; } }

/* ---------- Qué puede incluir ---------- */
.incluye{ margin-top:46px; display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
@media (max-width:900px){ .incluye{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .incluye{ grid-template-columns:1fr; } }
.inc{ padding:22px; border:1px solid var(--line-soft); background:var(--ink-2); }
.inc b{ display:block; font-family:var(--serif); font-size:1.12rem; font-weight:400; margin-bottom:7px; }
.inc span{ font-size:.92rem; color:var(--tx-dark-dim); }
.incluye-nota{ margin-top:26px; font-size:.94rem; color:var(--tx-dark-faint); font-family:var(--mono); letter-spacing:.02em; }

/* ---------- Para quién / cuándo no ---------- */
.fit{ margin-top:46px; display:grid; grid-template-columns:1fr 1fr; gap:20px; }
@media (max-width:760px){ .fit{ grid-template-columns:1fr; } }
.fit .box{ padding:30px; border:1px solid var(--line-paper); }
.fit .box.no{ background:var(--paper-2); }
.fit li{ list-style:none; padding:10px 0; display:flex; gap:13px; align-items:baseline; color:var(--tx-paper-dim); font-size:.96rem; }
.fit li::before{ content:""; flex:0 0 7px; width:7px; height:7px; margin-top:8px; }
.fit .si li::before{ background:var(--tinta); border-radius:50%; }
.fit .no li::before{ background:transparent; border:1px solid var(--tx-paper-dim); }

/* ---------- Casos propios ---------- */
.casos{ margin-top:48px; display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
@media (max-width:900px){ .casos{ grid-template-columns:1fr; } }
.caso{ padding:28px; border:1px solid var(--line-soft); background:var(--ink-2); }
.caso-tag{ font-family:var(--mono); font-size:10.5px; letter-spacing:.20em; text-transform:uppercase; color:var(--neon); }
.caso h3{ margin:14px 0 10px; }
.caso p{ color:var(--tx-dark-dim); font-size:.95rem; }
.caso-estado{
  margin-top:18px; padding-top:14px; border-top:1px solid var(--line-soft);
  font-family:var(--mono); font-size:11px; letter-spacing:.05em; color:var(--tx-dark-faint);
}
.caso-estado b{ color:var(--neon); font-weight:400; }
.casos-nota{ margin-top:26px; font-size:.93rem; color:var(--tx-dark-faint); }

/* ---------- FAQ ---------- */
.faq{ margin-top:44px; border-top:1px solid var(--line-paper); }
.faq details{ border-bottom:1px solid var(--line-paper); }
.faq summary{
  cursor:pointer; padding:22px 40px 22px 0; position:relative; list-style:none;
  font-family:var(--serif); font-size:1.18rem; color:var(--tx-paper);
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{
  content:"+"; position:absolute; right:6px; top:50%; transform:translateY(-50%);
  font-family:var(--mono); color:var(--tinta); font-size:1.1rem;
}
.faq details[open] summary::after{ content:"−"; }
.faq details p{ padding:0 0 24px; color:var(--tx-paper-dim); max-width:70ch; }

/* ---------- Contacto ---------- */
.contacto-grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:48px; align-items:start; }
@media (max-width:860px){ .contacto-grid{ grid-template-columns:1fr; gap:32px; } }
.canales{ margin-top:30px; border-top:1px solid var(--line-paper); }
.canal{ display:flex; justify-content:space-between; gap:20px; padding:16px 0; border-bottom:1px solid var(--line-paper);
  font-family:var(--mono); font-size:12.5px; }
.canal b{ font-weight:500; letter-spacing:.14em; text-transform:uppercase; font-size:10.5px; color:var(--tx-paper-dim); padding-top:2px; }
.canal a{ color:var(--tinta); border-bottom:1px solid var(--line-paper); }
.canal a:hover{ border-color:var(--tinta); }
.canal span{ color:var(--tx-paper); text-align:right; }
/* Estado honesto mientras no hay canal cargado */
.canal-pendiente{
  padding:16px 18px; margin-top:18px; background:var(--paper-2); border-left:2px solid var(--tinta);
  font-size:.92rem; color:var(--tx-paper-dim);
}

/* ---------- Footer ---------- */
footer{ background:var(--ink); border-top:1px solid var(--line-soft); padding:52px 0 30px; }
.foot-in{ max-width:var(--max); margin:0 auto; padding:0 var(--pad);
  display:grid; grid-template-columns:1.6fr 1fr 1fr; gap:36px; }
@media (max-width:760px){ .foot-in{ grid-template-columns:1fr; gap:28px; } }
.brand-pie{ display:inline-block; }
.foot-col p{ margin-top:16px; font-size:.9rem; color:var(--tx-dark-faint); max-width:44ch; }
.foot-col b{ display:block; font-family:var(--mono); font-size:10.5px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--tx-dark-dim); margin-bottom:14px; font-weight:500; }
.foot-col a{ display:block; font-size:.92rem; color:var(--tx-dark-faint); padding:5px 0; }
.foot-col a:hover{ color:var(--neon); }
.legal{
  max-width:var(--max); margin:36px auto 0; padding:20px var(--pad) 0;
  border-top:1px solid var(--line-soft); display:flex; flex-wrap:wrap; gap:12px; justify-content:space-between;
  font-family:var(--mono); font-size:11px; letter-spacing:.04em; color:var(--tx-dark-faint);
}

/* ---------- Revelado progresivo ----------
   Sin JS no se aplica: la clase .js la agrega el script. Todo visible siempre. */
.js .rv{ opacity:0; transform:translateY(14px); transition:opacity .55s ease,transform .55s ease; }
.js .rv.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  .js .rv{ opacity:1 !important; transform:none !important; transition:none; }
}

/* ---------- WhatsApp flotante (solo si hay número configurado) ---------- */
.wa-float{
  position:fixed; right:18px; bottom:18px; z-index:70;
  width:54px; height:54px; border-radius:50%;
  background:var(--neon); color:var(--ink);
  display:none; align-items:center; justify-content:center;
  box-shadow:0 10px 30px rgba(0,0,0,.45);
  transition:transform .18s;
}
.wa-float.on{ display:flex; }
.wa-float:hover{ transform:translateY(-2px); }
.wa-float svg{ width:27px; height:27px; fill:currentColor; }

/* =========================================================================
   ESCENAS CINEMATOGRÁFICAS (solo landing)

   POR DEFECTO son secciones normales, apiladas y legibles: es lo que ve
   quien no tiene JavaScript, no tiene WebGL o pide movimiento reducido.

   Cuando la galaxia arranca bien, el script agrega .webgl al <html> y
   recién ahí pasan a ser capas fijas coreografiadas por el scroll.
   ========================================================================= */

/* ---------- Estado por defecto: legible, sin depender de nada ---------- */
.escena{
  position:relative; z-index:2;
  min-height:auto; padding:var(--sec) 0;
  border-bottom:1px solid var(--line-soft);
}
.escena .wrap{ max-width:var(--max); }
.escena-in{ max-width:62ch; }

/* El espaciador de scroll no existe hasta que la animación lo necesita */
#espacio-scroll{ display:none; }

/* Fondo estático de nebulosa detrás de las escenas (siempre presente) */
#escenario{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(115% 85% at 88% 22%, rgba(70,255,161,.18), transparent 56%),
    radial-gradient(80% 70% at 100% 4%,  rgba(46,226,127,.12), transparent 62%),
    radial-gradient(130% 110% at 40% 108%, rgba(4,11,8,.94), var(--ink-deep) 74%);
}
.escenas{ position:relative; background:var(--ink-deep); overflow:hidden; }

/* Señales del problema (escena 2) */
.senal{
  display:grid; grid-template-columns:52px 1fr; gap:18px; align-items:baseline;
  padding:16px 0; border-top:1px solid var(--line-soft);
}
.senal .num{ font-family:var(--mono); font-size:12px; letter-spacing:.14em; color:var(--neon); }
.senal .txt{ font-family:var(--serif); font-size:clamp(1.15rem,2.1vw,1.5rem); line-height:1.25; }
.senal-cierre{ margin-top:28px; color:var(--tx-dark-dim); font-size:1.05rem; max-width:52ch; }
.senal-cierre strong{ color:var(--neon); font-weight:400; }

.escena-eco{ font-family:var(--serif); font-size:clamp(2rem,5vw,3.6rem); line-height:1.05; }
.escena-eco em{ color:var(--neon); }

.pista-scroll{
  display:block; margin-top:44px;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.22em;
  text-transform:uppercase; color:var(--tx-dark-faint);
}

/* ---------- Estado coreografiado: solo con WebGL activo ---------- */
.webgl .escenas{ height:100vh; position:sticky; top:0; }
.webgl #escenario{ position:fixed; inset:0; z-index:0; }
.webgl #escenario canvas{ position:fixed; inset:0; width:100%; height:100%; display:block; }

.webgl .escena{
  position:fixed; inset:0; z-index:2;
  display:flex; align-items:center;
  padding:0; border-bottom:0;
  opacity:0; visibility:hidden;
  transition:opacity .28s linear;
  pointer-events:none;
}
.webgl .escena a,
.webgl .escena button{ pointer-events:auto; }

/* El espaciador da el recorrido de scroll que consume la coreografía */
/* Recorrido de scroll de la coreografía.
   Se acortó de 520vh a 410vh al eliminar los tramos muertos: ahora todo el
   desplazamiento produce cambio visible. */
.webgl #espacio-scroll{ display:block; height:410vh; }

/* El contenido estático viaja por encima del canvas */
.webgl #contenido-estatico{ position:relative; z-index:3; background:var(--ink); }

/* Viñeta lateral para que el texto no compita con las partículas */
.webgl .escena::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:linear-gradient(90deg,rgba(4,11,8,.86) 6%,rgba(4,11,8,.60) 42%,transparent 80%);
}
@media (max-width:900px){
  .webgl .escena::before{
    background:linear-gradient(180deg,rgba(4,11,8,.50) 0%,rgba(4,11,8,.86) 44%,rgba(4,11,8,.94) 100%);
  }
}

/* =========================================================================
   IDIOMA — español / inglés

   Los dos idiomas están en el HTML. El CSS oculta el que no corresponde.
   Ventaja: sin JavaScript la página igual se lee completa, en español.
   El botón del nav solo cambia el atributo data-lang del <html>.
   ========================================================================= */
html[data-lang="es"] .en{ display:none !important; }
html[data-lang="en"] .es{ display:none !important; }

.lang-btn{
  background:none; border:1px solid var(--line-dark); border-radius:2px;
  color:var(--tx-dark-dim); cursor:pointer;
  font-family:var(--mono); font-size:11px; letter-spacing:.14em;
  min-height:44px; min-width:52px; padding:0 12px;
  display:inline-flex; align-items:center; justify-content:center;
  transition:color .16s, border-color .16s;
}
.lang-btn:hover{ color:var(--neon); border-color:var(--neon); }
.nav-in .lang-btn{ margin-left:4px; }

/* En el menú mobile el botón ocupa su propia fila */
.nav-mobile .lang-btn{ width:100%; margin-top:12px; }