*{margin:0;padding:0;box-sizing:border-box;}
html,body{height:100%;overscroll-behavior:none;}
body{font-family:'IBM Plex Sans',sans-serif;overflow:hidden;background:#0B1220;}

.skip-link{position:absolute;top:-60px;left:12px;z-index:10000;background:#0B1220;color:#F2F4F7;font-family:'IBM Plex Sans',sans-serif;font-size:14px;font-weight:600;padding:12px 20px;border-radius:4px;text-decoration:none;transition:top .2s ease;}
.skip-link:focus{top:12px;}

/* ===================== Sistema de color — Manual de Marca TRÍADA: grafito + cian, cero misticismo =====================
   "night" = modo producto/interfaz (grafito oscuro + cian) — escenas de venta/audio/proceso.
   "day"   = modo contenido/lectura (blanco cálido, nunca blanco puro) — escenas explicativas.
   Valores tomados de ESTADO-PROYECTO.md §2-3, sin cambios — es diseño ya aprobado. */
:root{
  --n-bg:#0B1220; --n-panel:#141D2E;
  --n-text:#F2F4F7; --n-text-dim:rgba(242,244,247,.72); --n-text-dim2:rgba(242,244,247,.48);
  --n-accent:#00D4FF; --n-line:#232E42;

  --d-bg:#FAFBFC; --d-panel:#F0F2F5;
  --d-text:#0B1220; --d-text-dim:rgba(11,18,32,.72); --d-text-dim2:rgba(11,18,32,.6);
  --d-accent:#007693; --d-line:#D7DCE3;

  --mono:'IBM Plex Mono',ui-monospace,monospace;
  --sans:'IBM Plex Sans',sans-serif;
  --gold-mate:#C9A063;

  --audio-campeon:#E1272E;
  --audio-regeneracion:#1FCB8F;
  --audio-presente:#C9A84C;
  --audio-amor:#0FB3A8;
  --audio-abundancia:#F2B705;
  --audio-firma:#D9B36C;
}

/* ===================== Escenario de pantalla completa (sin scroll) =====================
   Reveal simplificado: un solo cross-fade por escena (.reveal-el), no cascada
   unidad-por-unidad — esa cascada (k*70ms) fue la causa confirmada de que el
   catálogo de audios y Preguntas "aparecieran por partes" en la versión vieja. */
.tri-sec{position:fixed;inset:0;opacity:0;pointer-events:none;overflow:hidden;transition:opacity .4s ease;}
.tri-sec.slide-active{opacity:1;pointer-events:auto;z-index:2;}
.mode-night{ --bg:var(--n-bg); --panel:var(--n-panel); --text:var(--n-text); --text-dim:var(--n-text-dim); --text-dim2:var(--n-text-dim2); --accent:var(--n-accent); --line:var(--n-line); background:radial-gradient(140% 120% at 28% 0%, #101B2E 0%, #0B1220 55%, #070B13 100%); color:var(--text); }
.mode-day{ --bg:var(--d-bg); --panel:var(--d-panel); --text:var(--d-text); --text-dim:var(--d-text-dim); --text-dim2:var(--d-text-dim2); --accent:var(--d-accent); --line:var(--d-line); background:linear-gradient(160deg, #FCFDFE 0%, #F1F3F6 100%); color:var(--text); }

.reveal-el{opacity:0;transform:translateY(16px);transition:opacity .5s cubic-bezier(.22,.8,.25,1), transform .5s cubic-bezier(.22,.8,.25,1);}
.reveal-el.in{opacity:1;transform:translateY(0);}

/* Grano casi imperceptible (3.5%) sobre el degradado base de cada escena --
   "paleta con textura, no plana" (triada_paleta_rebranding.html). Se excluye
   en escenas que ya tienen su propio tratamiento de fondo (Alineación: brillo
   radial propio; Ciencia y Niveles: ya lo suficientemente ilustradas;
   Catálogo/Audios: grano propio más marcado, se agrega en su lote). */
.tri-sec::before{
  content:'';
  position:absolute; inset:0;
  pointer-events:none;
  opacity:.035;
  mix-blend-mode:overlay;
  z-index:1;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
#sec-alineacion::before, #sec-ciencia::before, #sec-niveles::before{ content:none; }
#sec-alineacion::after{
  content:'';
  position:absolute; inset:0;
  pointer-events:none;
  z-index:1;
  background:radial-gradient(ellipse at 50% 30%, rgba(0,118,147,.05) 0%, rgba(0,118,147,0) 70%);
}

.eyebrow{font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:3.5px;text-transform:uppercase;color:var(--accent);display:block;}

/* frecuencias flotando de fondo, por toda la página */
.freq-num{position:absolute;font-family:var(--mono);font-weight:500;pointer-events:none;user-select:none;white-space:nowrap;opacity:0;animation:freqFloat linear infinite;z-index:1;}
@keyframes freqFloat{
  0%{opacity:0;transform:translate(0,0);}
  10%{opacity:var(--fo,.3);}
  90%{opacity:var(--fo,.3);}
  100%{opacity:0;transform:translate(var(--fx,20px),var(--fy,-320px));}
}

/* ===================== Placeholders de escena (fase Base — se reemplazan lote por lote) ===================== */
.ph-content{max-width:640px;margin:0 auto;text-align:center;padding:0 24px;}
.ph-content h1{font-family:var(--sans);font-weight:300;font-size:clamp(28px,4.5vw,44px);color:var(--text);margin-top:14px;}
/* ARREGLO DE CELULAR (solo celular -- en computadora, salvo Compra, el
   contenido de cada escena ya cabe sin taparse con el logo, meterle esta
   misma reserva de espacio a TODAS las escenas en computadora estorbaba mas
   de lo que ayudaba, ver nota junto a #sec-compra mas abajo): en celular el
   contenido puede ser mas alto que la pantalla. Como .tri-sec centra
   verticalmente, la mitad de arriba del contenido quedaba empujada por
   detras/debajo del logo fijo "TRIADA". Con "safe center": se sigue
   centrando perfecto cuando el contenido SI cabe, y solo cuando NO cabe, se
   alinea desde arriba en vez de desbordarse por encima del logo. Ademas,
   permite hacer scroll si algo sigue sin caber, en vez de recortarlo. */
.tri-sec{display:flex;align-items:center;justify-content:center;}
@media(max-width:800px){
  /* BUG REAL encontrado 2026-07-21 con video de la usuaria: padding-bottom
     era 80px contra un clip-path que reserva 76px del fondo -- solo 4px de
     margen real. Al llegar al final del scroll, el ultimo parrafo de varias
     secciones (Alineacion, etc.) terminaba cayendo DENTRO de esa franja de
     4px, que el clip-path recorta (incluyendo el fondo claro/oscuro de la
     propia escena) -- eso dejaba ver el fondo oscuro base de <body> por
     detras, con el texto (que si se sigue dibujando) flotando encima: la
     "franja negra" que se reportaba. Subido a 104px (28px de margen real)
     en todas las escenas para que esto no vuelva a pasar en cualquier otra
     seccion con parrafos largos.
     BUG REAL #2 (2026-07-24, mismo "bloque negro" reportado de nuevo con
     capturas reales, DESPUES de subir el arreglo de padding -- confirma que
     no era (solo) el padding): el propio clip-path tiene bugs reales
     conocidos en Safari/Chrome de celular cuando se combina con
     position:fixed + scroll interno -- la franja recortada no siempre se
     vuelve a pintar bien en cada frame mientras se hace scroll, y por un
     instante deja ver el fondo oscuro de <body> detras en vez del fondo
     real de la escena -- el mismo sintoma de siempre, pero la causa ya no
     es el padding (que esta bien) sino el propio recorte. Confirmado
     primero en #sec-cta (unica seccion sin este clip-path en escritorio,
     por eso ahi nunca se reportaba en compu) y quitado ahi con buen
     resultado -- ahora se quita de raiz en TODAS las escenas. Ya no hace
     falta como red de seguridad: el padding-bottom de 104px por si solo
     evita que el contenido real llegue a la franja reservada, y
     #triHeaderBar/#triFooterBar (fondo solido, siempre encima via z-index,
     no dependen del clip-path) siguen tapando esa franja igual sin el. */
  .tri-sec{align-items:safe center;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior-y:contain;touch-action:pan-y;padding-top:104px;padding-bottom:104px;}
}
/* ARREGLO: el logo/hamburguesa fijo ("TRIADA" arriba a la izquierda) no tenia
   ningun fondo detras -- al permitir scroll dentro de cada escena (arreglo de
   arriba), el texto de la seccion pasaba justo por detras/encima del logo al
   bajar, volviendose ilegible (confirmado con capturas reales: Alineacion y
   Audios para jovenes, celular). La solucion NO es pintar un fondo encima
   del texto (eso se probo y se seguia viendo mal) -- es reservar el espacio
   de verdad: el "clip-path" de arriba hace que el texto de la seccion nunca
   pueda dibujarse en esa franja sin importar cuanto se baje, y estas dos
   franjas (arriba/abajo) le dan a esa franja reservada un color que combina
   con la escena activa (clara u oscura via body.nav-on-light), en vez de
   dejar ver el fondo oscuro de base de la pagina como una franja fea sin
   combinar. */
#triHeaderBar,#triFooterBar{display:none;position:fixed;left:0;right:0;z-index:250;background:#0B1220;pointer-events:none;transition:background .3s ease;}
#triHeaderBar{top:0;height:104px;}
#triFooterBar{bottom:0;height:76px;}
body.nav-on-light #triHeaderBar,body.nav-on-light #triFooterBar{background:#FAFBFC;}
@media(max-width:800px){
  #triHeaderBar,#triFooterBar{display:block;}
}
/* En computadora, Compra es la unica escena donde el contenido real puede
   quedar mas alto que la ventana (min-height:100vh de #sec-compra .stage) y
   por eso es la unica que de verdad se empalma con el logo fijo al hacer
   scroll interno -- por eso esta reserva va scopeada solo a #sec-compra en
   vez de a .tri-sec entero (aplicarla a todas las escenas tapaba texto en
   Tecnologia y otras que en computadora ya cabian bien solas). */
@media(min-width:801px){
  /* #sec-compra .stage ya trae su propio padding:100px, de sobra para la
     posicion inicial -- aqui solo hace falta el clip-path, para proteger
     cuando el contenido se hace scroll hacia arriba dentro de la seccion. */
  #sec-compra{clip-path:inset(76px 0 0 0);}
}

/* ===================== 01. Hero ===================== */
#sec-hero .hero-wrap{position:relative;z-index:2;max-width:1200px;margin:0 auto;padding:80px 56px;display:grid;grid-template-columns:0.92fr 1.24fr;gap:60px;align-items:center;width:100%;}
#sec-hero .hero-text{display:flex;flex-direction:column;align-items:flex-start;}
#sec-hero .hero-badge{display:inline-block;font-family:var(--mono);font-size:9px;font-weight:500;letter-spacing:4px;text-transform:uppercase;color:var(--accent);border:1px solid var(--line);padding:7px 22px;border-radius:20px;margin-bottom:16px;}
#sec-hero .hero-sub{font-family:var(--sans);font-size:clamp(14px,2vw,22px);font-weight:400;font-style:italic;letter-spacing:.3px;color:var(--text);margin-bottom:28px;line-height:1.5;white-space:nowrap;}
#sec-hero .hero-sub a{color:inherit;text-decoration:none;transition:color .3s ease;}
#sec-hero .hero-sub a:hover,#sec-hero .hero-sub a:focus{color:var(--accent);}
@media(max-width:500px){#sec-hero .hero-sub{font-size:11px;font-weight:300;letter-spacing:.2px;}}
#sec-hero .hero-h1{font-family:var(--sans);font-size:clamp(30px,5vw,54px);font-weight:300;line-height:1.26;letter-spacing:-.5px;color:var(--text);margin-bottom:24px;}
#sec-hero .hero-h1 em{font-style:italic;font-weight:500;color:var(--accent);}
#sec-hero .hero-cta{display:inline-block;font-family:var(--sans);font-size:13px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--n-bg);background:var(--accent);padding:15px 34px;border-radius:2px;text-decoration:none;}
.hero-auto-btn{display:inline-flex;align-items:center;gap:6px;margin-top:16px;background:transparent;border:none;cursor:pointer;font-family:var(--mono);font-size:8px;letter-spacing:1px;text-transform:uppercase;color:var(--text-dim2);opacity:.7;transition:opacity .2s ease;}
.hero-auto-btn:hover{opacity:1;}
.hero-auto-btn .ring{position:relative;width:22px;height:2px;border-radius:2px;background:var(--line);overflow:hidden;}
.hero-auto-btn .ring::before{content:'';position:absolute;top:0;left:0;bottom:0;width:calc(var(--p,0)*1%);background:var(--accent);}
.hero-auto-btn.paused .ring::before{background:var(--text-dim2);}
#sec-hero .hero-logo-col{display:flex;justify-content:center;align-items:center;}
#sec-hero .stage{width:min(96%,500px);will-change:transform;}
#sec-hero svg{width:100%;height:auto;overflow:visible;display:block;}
#sec-hero .title{font-family:var(--sans);font-weight:700;font-size:26px;letter-spacing:8px;fill:var(--accent);}
#sec-hero .tagline{font-family:var(--mono);font-size:12px;letter-spacing:4px;fill:var(--text-dim2);transition:fill .3s ease;}
#sec-hero a:hover .tagline,#sec-hero a:focus .tagline{fill:var(--accent);}
/* anillos cimáticos del logo: "respiran" (pulso lento de escala/opacidad),
   cada uno con un pequeño desfase para que no lata igual al mismo tiempo. */
#sec-hero svg .ring{transform-origin:160px 160px;animation:heroRingEmit 4s ease-in-out infinite;}
#sec-hero svg .ring-mente{animation-delay:0s;}
#sec-hero svg .ring-cuerpo{animation-delay:.12s;}
#sec-hero svg .ring-energia{animation-delay:.24s;}
@keyframes heroRingEmit{0%,100%{transform:scale(1);opacity:.7;}50%{transform:scale(1.02);opacity:.95;}}
@media(max-width:900px){#sec-hero .hero-wrap{grid-template-columns:1fr;text-align:center;}#sec-hero .hero-text{align-items:center;order:2;}#sec-hero .hero-logo-col{order:1;}
  /* svg{width:100%} sin limite ocupaba casi todo el ancho de pantalla, lo que
     en celular (una sola columna, angosta) la hacia mas alta de lo esperado
     -- empujaba el resto del texto (badge+subtitulo) fuera de la pantalla,
     cortando "Tu audio personalizado." Achicandola, el resto del texto cabe
     completo sin necesitar scroll. */
  #sec-hero .hero-logo-col svg{max-width:260px;margin:0 auto;}
}
/* .hero-wrap tiene su propio padding:80px pensado para computadora. En
   celular eso se suma a los 64px que ya pone la seccion (regla general de
   .tri-sec en movil) para separar del logo fijo -- juntos dejaban ~144px de
   hueco vacio antes de la pastilla "Reprogramacion...". Se reduce solo en
   movil, la version de computadora no se toca. */
@media(max-width:800px){#sec-hero .hero-wrap{padding:24px 28px 40px;gap:16px;}}

/* ===================== 02. Origen (supernova + polvo de estrellas) ===================== */
#sec-origen{padding:0;overflow:hidden;}
#sec-origen .nova-stage{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;overflow:hidden;}
#sec-origen canvas#novaCanvas{position:absolute;inset:0;width:100%;height:100%;}
#sec-origen .origen-wrap{position:relative;z-index:5;max-width:680px;padding:24px 28px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:14px;max-height:90vh;max-height:90dvh;overflow:hidden;}
/* Mismo patron que Ciencia/Alineacion/Catalogo: esta seccion nunca tuvo
   version movil, tanto la seccion como .origen-wrap tenian overflow:hidden
   fijo (sin media query), asi que aunque la regla general de .tri-sec en
   movil permitiera scroll, esta ID mas especifica siempre ganaba y el texto
   se recortaba en silencio en vez de poder bajar. IMPORTANTE: este bloque
   tiene que ir DESPUES de la regla base de .origen-wrap de arriba -- estuvo
   antes desde la sesion pasada y por eso nunca funciono de verdad (la regla
   base le ganaba por orden aunque el media query si aplicara). */
@media(max-width:800px){
  #sec-origen{align-items:flex-start;padding-top:110px;padding-bottom:104px;overflow-y:auto;-webkit-overflow-scrolling:touch;}
  #sec-origen .origen-wrap{max-height:none;overflow:visible;}
}
#sec-origen .origen-copy{max-width:640px;}
#sec-origen .eyebrow{justify-content:center;display:block;text-align:center;margin-bottom:14px;}
#sec-origen h2{font-family:var(--sans);font-weight:300;font-size:clamp(26px,4.2vw,44px);line-height:1.15;color:var(--n-text);margin-bottom:0;}
#sec-origen h2 em{font-style:italic;color:var(--accent);}
#sec-origen .polvo-block{max-width:640px;}
#sec-origen .polvo-block p{font-family:var(--sans);font-weight:400;font-size:clamp(14px,1.7vw,17px);line-height:1.55;color:var(--n-text);margin-bottom:12px;opacity:0;transform:translateY(18px);transition:opacity 1s ease,transform 1s ease;}
#sec-origen .polvo-block p.p-in{opacity:1;transform:translateY(0);}
#sec-origen .polvo-block strong{color:var(--accent);font-weight:700;font-size:1.25em;text-shadow:0 0 24px rgba(0,212,255,.3);}
#sec-origen .polvo-block .esmeralda{color:#0FB3A8;font-weight:700;font-size:1.25em;text-shadow:0 0 28px rgba(15,179,168,.55),0 0 8px rgba(15,179,168,.4);}
#sec-origen .polvo-block .quote-strong{font-weight:500;font-size:clamp(16px,2.1vw,21px);line-height:1.4;color:var(--n-text);}
#sec-origen .polvo-block .quote-strong strong{font-size:1.15em;}
#sec-origen .polvo-block .siendo{font-family:var(--sans);font-size:clamp(19px,2.8vw,28px);font-weight:500;margin-top:14px;}
#sec-origen .polvo-block .siendo-lbl{font-size:13px;letter-spacing:2px;color:var(--n-text-dim2);text-transform:uppercase;margin-right:8px;}
#sec-origen .polvo-block .siendo-word{color:var(--accent);font-style:italic;font-weight:600;display:inline-block;min-width:150px;text-align:left;transition:opacity .4s,transform .4s;}

/* ===================== 03. Niveles ===================== */
#sec-niveles{padding:70px 24px;overflow:hidden;background:linear-gradient(160deg, #FAFBFC 0%, #EEF1F5 100%);}
/* Nunca recibio el arreglo de celular de las demas escenas -- overflow:hidden
   fijo (sin media query) recortaba el contenido en silencio si no cabia,
   igual que le paso antes a Origen/Ciencia/Alineacion/Tecnologia. */
@media(max-width:800px){
  #sec-niveles{align-items:flex-start;padding-top:116px;padding-bottom:104px;overflow-y:auto;-webkit-overflow-scrolling:touch;}
}
#sec-niveles canvas#cNivelesBg{position:absolute;inset:0;width:100%;height:100%;filter:saturate(1.4);transform:none;}
#sec-niveles canvas#cNivelesBg.reveal-el.in{transform:none;}
.niveles-content{position:relative;z-index:2;max-width:700px;text-align:center;}
.niveles-content .niv-tag{display:block;font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:4px;text-transform:uppercase;margin-bottom:24px;}
.niveles-content h2{font-family:var(--sans);font-weight:400;font-size:clamp(40px,7vw,76px);line-height:1.08;margin-bottom:28px;color:var(--text);}
.niveles-content h2 em{font-style:italic;}
.niveles-content p{font-family:var(--sans);font-weight:400;font-size:clamp(19px,2.4vw,26px);line-height:1.7;color:var(--text-dim);max-width:580px;margin:0 auto;}
.niveles-dots{display:flex;justify-content:center;gap:11px;margin-top:42px;}
.niveles-dots i{width:8px;height:8px;border-radius:50%;background:var(--line);display:block;transition:background .4s ease,transform .4s ease;}
.niveles-dots i.on{transform:scale(1.5);}
/* cambio de nivel (mente→cuerpo→energía) DENTRO de la escena ya visible --
   independiente del cross-fade de entrada de la escena (.reveal-el/.in). */
#nivTag, #nivHead, #nivBody{ transition:opacity .38s ease, color .5s ease; }
#nivTag.lvl-out, #nivHead.lvl-out, #nivBody.lvl-out{ opacity:0; }

/* ===================== 03b. Piensas · Creas · Materializas =====================
   Fondo "ciencia" del documento de rebranding (triada_paleta_rebranding.html
   §4): degradado azul-grisáceo casi frío -- "se siente auditado, no
   decorado", elegido porque esta sección, igual que Ciencia, cita estudios
   reales (Frequency Illusion, Jeannerod/Decety, Oettingen). El grano
   genérico de .tri-sec::before ya aplica solo, sin necesidad de tocar nada. */
#sec-pcm{padding:70px 24px;overflow:hidden;background:linear-gradient(160deg, #FCFDFE 0%, #EEF2F7 100%);}
#sec-pcm .pcm-wrap{position:relative;z-index:1;max-width:1000px;width:100%;margin:0 auto;max-height:88vh;max-height:88dvh;min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none;-ms-overflow-style:none;}
#sec-pcm .pcm-wrap::-webkit-scrollbar{display:none;}
#sec-pcm .pcm-wrap:focus{outline:none;}
/* Mismo caso que Niveles: nunca recibio el arreglo de celular. IMPORTANTE:
   este bloque tiene que ir DESPUES de la regla base de .pcm-wrap de arriba
   -- si va antes (como quedo la primera vez), la regla base le gana por
   orden aunque el media query si aplique, y el arreglo no sirve de nada. */
@media(max-width:800px){
  #sec-pcm{align-items:flex-start;padding-top:116px;padding-bottom:104px;overflow-y:auto;-webkit-overflow-scrolling:touch;}
  #sec-pcm .pcm-wrap{max-height:none;overflow-y:visible;}
}
/* Layout asimetrico (texto | audifonos, 1.18fr/0.82fr -- no 50/50): romper
   la simetria perfecta es justo lo que evita que todo se sienta plano al
   estar centrado. El titular manda por tamaño Y por posición (dos señales
   de jerarquía, no una). La pregunta-respuesta de abajo, centrada, se nota
   más precisamente por ser lo único centrado en toda la escena. */
#sec-pcm .pcm-row{display:grid;grid-template-columns:1.18fr 0.82fr;gap:56px;align-items:center;}
@media(max-width:760px){#sec-pcm .pcm-row{grid-template-columns:1fr;}}
#sec-pcm .pcm-text-col{text-align:left;}
#sec-pcm .pcm-eyebrow{font-family:var(--mono);font-size:13px;font-weight:600;letter-spacing:3.5px;text-transform:uppercase;color:var(--accent);margin-bottom:10px;display:block;transition:opacity .38s ease;}
#sec-pcm h2{font-family:var(--sans);font-weight:700;font-size:clamp(28px,4.4vw,44px);line-height:1.14;letter-spacing:-.3px;margin-bottom:16px;color:var(--text);transition:opacity .38s ease;}
#sec-pcm .pcm-body{font-family:var(--sans);font-weight:400;font-size:15px;line-height:1.65;color:var(--text-dim);max-width:420px;transition:opacity .38s ease;}
#sec-pcm .pcm-body a{color:var(--accent);text-decoration:underline;text-underline-offset:2px;}
#sec-pcm .pcm-eyebrow.pcm-out, #sec-pcm h2.pcm-out, #sec-pcm .pcm-body.pcm-out{ opacity:0; }
#sec-pcm .pcm-dots{display:flex;justify-content:flex-start;gap:11px;margin-top:22px;}
#sec-pcm .pcm-dots i{width:8px;height:8px;border-radius:50%;background:var(--line);display:block;transition:background .4s ease,transform .4s ease;}
#sec-pcm .pcm-dots i.on{background:var(--accent);transform:scale(1.5);}

/* audifonos: columna propia a la derecha, con resplandor suave detras para
   que tengan presencia y no compitan por el centro con el texto. */
#sec-pcm .pcm-audio-col{display:flex;flex-direction:column;align-items:center;}
#sec-pcm .pcm-hp-row{display:flex;align-items:flex-end;justify-content:center;gap:18px;position:relative;}
#sec-pcm .pcm-hp-row::before{content:'';position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:300px;height:200px;background:radial-gradient(ellipse at center, color-mix(in srgb, var(--accent) 16%, transparent) 0%, transparent 72%);pointer-events:none;z-index:0;}
#sec-pcm .pcm-hp-item{position:relative;z-index:1;width:150px;filter:drop-shadow(0 14px 18px rgba(0,0,0,.18));}
#sec-pcm .pcm-hp-item svg{width:100%;display:block;}
#sec-pcm .pcm-hp-item-eb{width:102px;}
#sec-pcm .pcm-wave-wrap{position:absolute;top:32%;right:-8px;pointer-events:none;}
#sec-pcm .pcm-wave-wrap-eb{top:22%;right:-6px;}
#sec-pcm .pcm-wave-wrap svg{width:38px;height:38px;overflow:visible;}
#sec-pcm .pcm-wave-arc{fill:none;stroke:var(--pcm-wave-color,#007693);stroke-width:2.2;stroke-linecap:round;opacity:0;animation:pcmWaveOut 1.7s ease-out infinite;}
#sec-pcm .pcm-wave-arc:nth-child(2){animation-delay:.32s;}
#sec-pcm .pcm-wave-arc:nth-child(3){animation-delay:.64s;}
@keyframes pcmWaveOut{ 0%{opacity:.85;transform:scale(.55);} 65%{opacity:.18;} 100%{opacity:0;transform:scale(1.25);} }
#sec-pcm .pcm-caption{margin-top:20px;text-align:center;font-family:var(--sans);font-size:12.5px;font-weight:500;line-height:1.5;color:var(--text-dim2);white-space:nowrap;}
@media(max-width:500px){#sec-pcm .pcm-caption{font-size:11px;}}

/* cierre: linea divisoria marca "grupo nuevo", centrado -- el unico bloque
   centrado de toda la escena, por eso se nota. */
#sec-pcm .pcm-bridge{max-width:560px;margin:64px auto 0;text-align:center;}
#sec-pcm .pcm-bridge::before{content:'';display:block;width:44px;height:1px;background:var(--line);margin:0 auto 32px;}
#sec-pcm .pcm-q{font-family:var(--sans);font-style:italic;font-weight:400;font-size:clamp(19px,2.4vw,24px);color:var(--accent);margin-bottom:12px;}
#sec-pcm .pcm-intro{font-family:var(--mono);font-size:13px;letter-spacing:1.5px;text-transform:uppercase;color:var(--text-dim2);margin-bottom:14px;}
#sec-pcm .pcm-a{font-family:var(--sans);font-size:14.5px;line-height:1.6;color:var(--text-dim);}
#sec-pcm .grabado{color:var(--accent);font-weight:700;}

/* ===================== 04. Alineación ===================== */
#sec-alineacion{padding:70px 24px;overflow:hidden;}
#sec-alineacion .s4-grid{position:relative;z-index:1;max-width:1080px;width:100%;display:grid;grid-template-columns:1fr 1.15fr;gap:56px;align-items:center;max-height:88vh;max-height:88dvh;}
#sec-alineacion .s4-text-col{max-height:88vh;max-height:88dvh;min-height:0;overflow-y:auto;overscroll-behavior:contain;display:flex;flex-direction:column;gap:18px;scrollbar-width:none;-ms-overflow-style:none;}
#sec-alineacion .s4-text-col::-webkit-scrollbar{display:none;}
#sec-alineacion .s4-text-col:focus{outline:none;}
#sec-alineacion .step{display:block;}
#sec-alineacion .eyebrow{font-family:var(--mono);font-style:normal;font-weight:500;font-size:12px;color:var(--accent);text-transform:uppercase;letter-spacing:3.5px;display:block;margin-bottom:14px;}
#sec-alineacion .s4-quote{font-family:var(--sans);font-weight:400;font-size:clamp(27px,3.8vw,42px);line-height:1.2;letter-spacing:-.4px;color:var(--text);margin-bottom:8px;}
#sec-alineacion .s4-quote strong{color:var(--accent);font-weight:700;font-size:1.42em;}
#sec-alineacion .s4-body{font-family:var(--sans);font-weight:400;font-size:clamp(16px,1.9vw,19px);line-height:1.6;color:var(--text-dim);}
#sec-alineacion .s4-item{position:relative;padding-left:24px;}
#sec-alineacion .s4-item::before{content:'';position:absolute;left:0;top:9px;width:9px;height:9px;border-radius:50%;background:var(--dot);box-shadow:0 0 10px var(--dot);}
#sec-alineacion .grabado{color:var(--accent);font-weight:700;}
#sec-alineacion .s4-canvas-col{position:relative;display:flex;justify-content:center;align-items:center;}
#sec-alineacion canvas{max-width:min(480px,80vh,92vw);max-width:min(480px,80dvh,92vw);width:100%;filter:saturate(1.4);}
@media(max-width:800px){#sec-alineacion .s4-grid{grid-template-columns:1fr;}}
/* mismo arreglo que Tecnologia (texto) + mismo arreglo que Catalogo (ilustracion
   empujada fuera de la pantalla): el texto ya tenia su propio scroll interno,
   pero al quitarle el limite de alto a .s4-grid, el dibujo (.s4-canvas-col)
   que va DESPUES del texto necesita que la SECCION completa pueda hacer
   scroll, si no queda fuera de la pantalla sin forma de llegar a el. */
@media(max-width:800px){
  /* padding-bottom es necesario aunque exista la franja reservada del pie:
     al llegar al final del scroll, el ultimo elemento siempre termina pegado
     al borde real de la pantalla (asi funciona el scroll), sin importar el
     tamano del contenido -- por eso el dibujo se seguia cortando aunque se
     achicara. Con este respiro, el final del scroll deja el dibujo completo
     arriba de la franja del pie, no debajo. */
  #sec-alineacion{align-items:flex-start;padding-top:110px;padding-bottom:104px;overflow-y:auto;-webkit-overflow-scrolling:touch;}
  #sec-alineacion .s4-grid{max-height:none;}
  /* .s4-text-col tenia su propio scroll interno con overscroll-behavior:contain
     -- eso "atrapaba" el gesto de scroll: al llegar al fondo del texto, no
     dejaba pasar el scroll a la seccion completa, y la ilustracion de abajo
     quedaba inalcanzable ("no baja"). Se quita el limite para que sea la
     seccion la que haga todo el scroll, igual que ya se hizo en Ciencia. */
  #sec-alineacion .s4-text-col{max-height:none;overflow-y:visible;}
  /* La ilustracion (canvas cuadrado) usaba hasta 92vw de ancho -- en celular,
     sumada al texto que va arriba, la columna completa quedaba mas alta que
     el espacio disponible incluso haciendo scroll hasta el final, y la parte
     de abajo del dibujo (la etiqueta "ENERGIA") se cortaba contra el borde
     inferior de la pantalla. Se achica solo en celular para que quepa
     completa. */
  #sec-alineacion canvas{max-width:min(300px,68vw);}
}

/* ===================== 05a. Música 100% original ===================== */
/* Antes era el primer paso interno de Tecnología, ahora es su propia escena
   -- fondo oscuro (heredado de .mode-night) a proposito, misma familia que
   Catalogo/Audios/Compra (poca lectura, enfoque en el producto/audio), en
   vez de la familia de escenas de lectura larga (fondo claro). */
#sec-musica{padding:56px 24px;overflow:hidden;}
/* BUG REAL (mismo que Alineacion/Niveles/etc., ver nota en .tri-sec mas
   arriba): esta escena nunca recibio el arreglo de padding-bottom:104px en
   celular -- se quedaba en los 56px base, muy por debajo de los 76px que
   reserva el clip-path para el pie fijo, asi que el final del texto quedaba
   dentro de esa franja recortada (la "franja negra" reportada, aqui tambien,
   no solo en Alineacion). */
@media(max-width:800px){
  #sec-musica{align-items:flex-start;padding-top:110px;padding-bottom:104px;overflow-y:auto;-webkit-overflow-scrolling:touch;}
}
#sec-musica .musica-wrap{position:relative;z-index:1;max-width:640px;margin:0 auto;text-align:center;}
#sec-musica .eyebrow{margin-bottom:14px;}
#sec-musica h2{font-family:var(--sans);font-weight:300;font-size:clamp(28px,4.8vw,48px);letter-spacing:-.3px;margin-bottom:20px;color:var(--text);}
#sec-musica h2 em{font-style:italic;color:var(--accent);}
#sec-musica .studio-tag{display:inline-block;font-family:var(--mono);font-size:11.5px;font-weight:600;letter-spacing:3px;text-transform:uppercase;color:var(--accent);border:1px solid var(--line);padding:6px 16px;border-radius:20px;margin-bottom:16px;}
#sec-musica canvas.onda{max-width:100%;display:block;margin:0 auto 24px;filter:saturate(1.3);}
#sec-musica .musica-p{font-family:var(--sans);font-weight:400;font-size:clamp(15px,1.8vw,17px);line-height:1.65;color:var(--text-dim);max-width:560px;margin:0 auto 8px;}
#sec-musica .musica-closing{font-family:var(--sans);font-weight:600;font-size:13px;line-height:1.5;color:var(--accent);margin-top:16px;margin-bottom:24px;white-space:nowrap;animation:tecHookScale 1.8s ease-in-out infinite;}
@media(max-width:500px){#sec-musica .musica-closing{font-size:11px;}}

/* ===================== 05. Tecnología ===================== */
#sec-tecnologia{padding:56px 24px;overflow:hidden;background:linear-gradient(160deg, #FAF9F7 0%, #EFEDE8 100%);}
/* Esta ya tenia scroll interno (.wrap max-height:88vh) pero al CENTRARSE
   dentro de la seccion completa, en celulares donde el 100vh real es mas
   chico que el nominal (por la barra del navegador), el bloque se sigue
   corriendo hacia arriba y tapandose con el logo fijo. align-items:flex-start
   en vez de center evita ese corrimiento. */
/* grano 1-2% más fuerte que el genérico (5% en vez de 3.5%) -- "textura de
   espuma sin ser literal" para el panel acústico, según el rebranding. */
#sec-tecnologia::before{ opacity:.05; }
#sec-tecnologia .wrap{position:relative;z-index:1;max-width:820px;margin:0 auto;text-align:center;max-height:88vh;max-height:88dvh;min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none;-ms-overflow-style:none;}
/* IMPORTANTE: este bloque tiene que ir DESPUES de la regla base de .wrap de
   arriba -- estuvo antes desde la sesion pasada y por eso nunca funciono de
   verdad (la regla base le ganaba por orden aunque el media query si
   aplicara), mismo bug ya encontrado y corregido en Origen y PCM. */
@media(max-width:800px){
  /* padding-bottom mayor (no los 56px que trae #sec-tecnologia por defecto)
     -- el boton circular de musica es fijo en la esquina inferior izquierda
     (bottom:18px, 44px de alto); sin este respiro, el ultimo parrafo del
     texto quedaba justo debajo de el, tapado. Mismo motivo por el que ya
     existe padding-top:70px para el logo fijo de arriba. */
  #sec-tecnologia{align-items:flex-start;padding-top:110px;padding-bottom:104px;overflow-y:auto;-webkit-overflow-scrolling:touch;}
  /* .wrap tenia su propio scroll interno con overscroll-behavior:contain --
     mismo problema que Alineacion: atrapaba el scroll al llegar a su fondo
     y no dejaba seguir bajando por el resto de la seccion. */
  #sec-tecnologia .wrap{max-height:none;overflow-y:visible;}
}
#sec-tecnologia .wrap::-webkit-scrollbar{display:none;}
#sec-tecnologia .wrap:focus{outline:none;}
#sec-tecnologia h2{font-family:var(--sans);font-weight:300;font-size:clamp(26px,4.4vw,42px);letter-spacing:-.3px;margin-bottom:20px;color:var(--text);}
#sec-tecnologia h2 em{font-style:italic;color:var(--accent);}
#sec-tecnologia .counter-lbl{font-family:var(--mono);font-size:12px;letter-spacing:1.5px;color:var(--text-dim2);margin-bottom:20px;}
#sec-tecnologia #tec-n{text-shadow:0 0 20px color-mix(in srgb, var(--accent) 55%, transparent);}
#sec-tecnologia .step1-p{font-family:var(--sans);font-weight:400;font-size:clamp(14px,1.6vw,16px);line-height:1.6;color:var(--text-dim);max-width:600px;margin:0 auto 8px;}
#sec-tecnologia .closing{font-family:var(--sans);font-weight:400;font-size:clamp(15px,1.8vw,17px);line-height:1.6;color:var(--text-dim);margin-top:16px;}
/* Frase de cierre despues de las capas. El "pulso que respira" completo de
   Compra (escala + halo pulsante) mareaba en fondo claro -- confirmado
   despues con el panel de audios que el halo prendiendose/apagandose era
   la causa real, no el movimiento en si. Aqui se aplica solo la escala
   (sin halo pulsante -- este texto no lo necesita, ya tiene buen contraste
   fijo con var(--accent) sobre el fondo claro). */
#sec-tecnologia .tec-hook{font-family:var(--sans);font-weight:600;font-size:13px;line-height:1.5;color:var(--accent);margin:4px auto 16px;white-space:nowrap;animation:tecHookScale 1.8s ease-in-out infinite;}
@media(max-width:500px){#sec-tecnologia .tec-hook{font-size:11px;}}
@keyframes tecHookScale{0%,100%{transform:scale(1);}50%{transform:scale(1.03);}}
#sec-tecnologia .grabado{color:var(--accent);font-weight:600;}
#sec-tecnologia .proceso-nota{font-family:var(--sans);font-style:italic;font-size:12px;color:var(--text-dim2);text-align:center;margin:10px 0 0;}
#sec-tecnologia .pilares{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;text-align:left;margin-top:4px;}
#sec-tecnologia .pilar{padding:18px 18px;border:1px solid var(--line);border-radius:12px;background:var(--panel);}
#sec-tecnologia .pilar-n{font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:2px;color:var(--accent);text-transform:uppercase;display:block;margin-bottom:8px;}
#sec-tecnologia .pilar-h{font-family:var(--sans);font-weight:500;font-size:18px;margin-bottom:8px;color:var(--text);}
#sec-tecnologia .pilar-p{font-family:var(--sans);font-weight:400;font-style:italic;font-size:13px;line-height:1.55;color:var(--text-dim);}
#sec-tecnologia .pilar-nota{display:block;margin-top:10px;font-family:var(--sans);font-size:13px;font-weight:600;color:#924B23;line-height:1.6;}
#sec-tecnologia .step{display:block;margin-bottom:44px;}
#sec-tecnologia .step:last-child{margin-bottom:0;}
#sec-tecnologia .video-stage{max-width:420px;margin:0 auto 14px;position:relative;cursor:pointer;aspect-ratio:16/9;}
/* BUG REAL (2026-07-23): la mascara radial (pensada como una viñeta suave
   que se funde con el fondo) se veia como una sombra negra tapando casi
   todo el video al reproducirse -- el video real (captura oscura del DAW)
   mas el fondo oscuro de esta escena hacian que la zona difuminada (que se
   vuelve transparente) se leyera como "el video casi no abre", no como una
   viñeta. Quitada -- el video se ve completo y claro al dar play, que es lo
   que se pidio. */
#sec-tecnologia .video-stage video{width:100%;height:100%;display:block;object-fit:cover;opacity:0;transition:opacity 1.1s ease;}
#sec-tecnologia .video-stage video.playing{opacity:1;}
#sec-tecnologia .video-play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;transition:opacity .5s ease;z-index:3;}
#sec-tecnologia .video-play-circle{width:70px;height:70px;border-radius:50%;background:rgba(0,0,0,.05);border:1.5px solid var(--accent);display:flex;align-items:center;justify-content:center;}
#sec-tecnologia .video-play-triangle{width:0;height:0;border-top:11px solid transparent;border-bottom:11px solid transparent;border-left:18px solid var(--accent);margin-left:6px;}
@media(max-width:700px){#sec-tecnologia .pilares{grid-template-columns:1fr;}}

/* ===================== 06. Ciencia ===================== */
#sec-ciencia{padding:32px 40px 76px;overflow:hidden;background:linear-gradient(120deg, #F1EDF7 0%, #EDF3F1 30%, #F3F0E8 60%, #F6EEEC 100%);}
/* En escritorio el menu flotante (#triTopNav, arriba a la derecha, sin fondo)
   a veces cae encima del "La Ciencia" de arriba, porque esta escena centra su
   contenido verticalmente y el bloque queda muy pegado al borde superior.
   No se toca el menu ni se le agrega un fondo solido (eso ya se probo para
   otro caso y se veia mal) -- solo se le da mas aire arriba a esta escena,
   solo en escritorio, para que el contenido baje un par de renglones. */
@media(min-width:961px){#sec-ciencia{padding-top:112px;}}
#sec-ciencia .wrap{position:relative;z-index:1;max-width:1100px;width:100%;max-height:98vh;max-height:98dvh;overflow:hidden;}
#sec-ciencia h2{font-family:var(--sans);font-weight:300;font-size:clamp(26px,4vw,40px);text-align:center;margin-bottom:8px;color:var(--text);}
#sec-ciencia h2 em{font-style:italic;font-weight:600;font-size:1.3em;color:var(--accent);}
#sec-ciencia .sub-p{font-family:var(--sans);font-weight:300;font-size:clamp(13px,1.5vw,16px);line-height:1.6;color:var(--text-dim2);text-align:center;margin-bottom:22px;}
#sec-ciencia .stage{display:grid;grid-template-columns:64px 1fr;gap:36px;min-height:420px;}
#sec-ciencia .spine{display:flex;flex-direction:column;align-items:center;gap:0;position:relative;}
#sec-ciencia .spine::before{content:'';position:absolute;top:20px;bottom:20px;width:1px;background:var(--line);}
#sec-ciencia .node{width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:12px;font-weight:600;color:var(--text-dim2);border:1px solid rgba(255,255,255,.7);background:rgba(255,255,255,.75);box-shadow:0 4px 14px rgba(20,24,27,.08);cursor:pointer;position:relative;z-index:2;margin:10px 0;transition:all .35s ease;}
#sec-ciencia .node.active{color:#fff;background:var(--accent);border-color:var(--accent);transform:scale(1.15);box-shadow:0 8px 22px rgba(20,24,27,.2);}
#sec-ciencia .node:hover:not(.active){border-color:var(--accent);color:var(--accent);}
#sec-ciencia .panel{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center;}
#sec-ciencia .panel-text{opacity:0;transform:translateY(14px);transition:opacity .5s ease,transform .5s ease;max-height:520px;min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none;-ms-overflow-style:none;padding-right:8px;}
#sec-ciencia .panel-text::-webkit-scrollbar{display:none;}
#sec-ciencia .panel-text:focus{outline:none;}
#sec-ciencia .panel-text.on{opacity:1;transform:translateY(0);}
#sec-ciencia .cie-num{font-family:var(--sans);font-style:italic;font-size:17px;color:var(--accent);letter-spacing:2px;}
#sec-ciencia .cie-h{font-family:var(--sans);font-weight:500;font-size:clamp(32px,4.6vw,52px);line-height:1.12;color:var(--text);margin:12px 0 20px;letter-spacing:-.3px;}
#sec-ciencia .cie-h em{font-style:italic;color:var(--accent);}
#sec-ciencia .cie-p{font-family:var(--sans);font-weight:400;font-size:clamp(19px,2.2vw,23px);line-height:1.7;color:var(--text-dim);}
#sec-ciencia .cie-fact{display:inline-block;font-family:var(--mono);font-size:11.5px;letter-spacing:.4px;border:1px solid var(--line);border-radius:16px;padding:6px 12px;margin-top:18px;transition:border-color .2s ease;}
#sec-ciencia .cie-fact a{color:var(--text-dim);text-decoration:none;}
#sec-ciencia .cie-fact:hover{border-color:var(--accent);}
#sec-ciencia .cie-fact:hover a{color:var(--accent);}
#sec-ciencia .cie-p strong{color:var(--accent);font-weight:700;font-size:1.22em;font-style:italic;}
#sec-ciencia .canvas-stage{position:relative;}
#sec-ciencia .canvas-glow{position:absolute;inset:-14%;pointer-events:none;z-index:0;filter:blur(22px);
  background:radial-gradient(circle at 50% 42%, rgba(29,111,189,.32) 0%, rgba(29,111,189,.12) 42%, transparent 68%);
}
/* Cristal esmerilado real (backdrop-filter:blur) -- confirmado con la
   usuaria que lo quiere de vuelta, el reemplazo sin blur se veía "muy
   blanco". Corre sobre el programador central de animación (un solo
   requestAnimationFrame para toda la escena en vez de 8 sueltos), así que el
   costo debería ser mucho menor que en la versión vieja aunque el blur en sí
   siga siendo caro. */
#sec-ciencia .canvas-wrap{position:relative;z-index:1;display:flex;justify-content:center;align-items:center;height:420px;border-radius:26px;overflow:hidden;
  background:linear-gradient(160deg, rgba(255,255,255,.58), rgba(255,255,255,.24));
  backdrop-filter:blur(24px) saturate(1.7);-webkit-backdrop-filter:blur(24px) saturate(1.7);
  border:1px solid rgba(255,255,255,.7);
  box-shadow:0 34px 64px rgba(20,24,27,.18),0 10px 24px rgba(20,24,27,.1), inset 0 1px 0 rgba(255,255,255,.7);
  transform:translateY(-6px);
}
#sec-ciencia .canvas-wrap::before{content:'';position:absolute;top:0;left:0;right:0;height:42%;background:linear-gradient(to bottom, rgba(255,255,255,.5), transparent);pointer-events:none;z-index:1;}
#sec-ciencia .canvas-wrap::after{content:'';position:absolute;inset:0;pointer-events:none;z-index:3;
  background:
    radial-gradient(circle at 20% 16%, rgba(255,255,255,.75) 0%, rgba(255,255,255,0) 9%),
    radial-gradient(circle at 82% 12%, rgba(255,255,255,.5) 0%, rgba(255,255,255,0) 6%),
    radial-gradient(circle at 68% 82%, rgba(255,255,255,.4) 0%, rgba(255,255,255,0) 8%),
    linear-gradient(118deg, rgba(255,255,255,.4) 0%, rgba(255,255,255,0) 26%, rgba(255,255,255,0) 74%, rgba(255,255,255,.22) 100%);
}
#sec-ciencia .sci-canvas{filter:saturate(1.4) brightness(1.05);position:absolute;max-width:88%;max-height:88%;opacity:0;transition:opacity .4s ease;z-index:0;}
#sec-ciencia .sci-canvas.show{opacity:1;}
#sec-ciencia .progress-hint{text-align:center;margin-top:16px;font-family:var(--mono);font-size:12px;letter-spacing:3px;color:var(--text-dim2);text-transform:uppercase;}
/* Esta seccion nunca tuvo version movil: la cuadricula de 3 columnas (numeros
   64px + texto 1fr + dibujo 1fr) dejaba la columna de texto en ~85-115px de
   ancho en un celular, forzando una palabra por linea (se veia como texto
   vertical). En movil: todo se apila en una sola columna, los numeros pasan
   de columna vertical a fila horizontal arriba, y el bloque completo puede
   hacer scroll interno si no cabe en la pantalla. */
@media(max-width:800px){
  #sec-ciencia{padding:116px 20px 104px;align-items:flex-start;overflow-y:auto;-webkit-overflow-scrolling:touch;}
  /* max-height:100% (no "none"): .wrap necesita un limite real para que su
     propio overflow-y:auto se active. Con "none" el bloque simplemente
     crecia sin limite y todo lo que sobraba se recortaba en silencio por
     fuera (sin barra de scroll, sin forma de llegar ahi) -- por eso el
     numero, la ilustracion y el resto se quedaban invisibles. */
  /* max-height:100% (no restarle nada) dejaba que .wrap ocupara todo el alto
     disponible, empujando ".progress-hint" (el texto "01/08 Click...", que
     va DESPUES de .wrap como hermano, no adentro) fuera del area visible sin
     forma de llegar a el -- se le resta el alto aproximado del hint (con su
     margen) para que siempre quede su lugar reservado debajo. */
  #sec-ciencia .wrap{max-height:calc(100% - 44px);overflow-y:auto;-webkit-overflow-scrolling:touch;}
  #sec-ciencia .stage{grid-template-columns:1fr;gap:20px;min-height:0;}
  #sec-ciencia .spine{flex-direction:row;flex-wrap:wrap;justify-content:center;gap:8px;}
  #sec-ciencia .spine::before{display:none;}
  #sec-ciencia .node{margin:0;width:34px;height:34px;font-size:12.5px;}
  #sec-ciencia .panel{grid-template-columns:1fr;gap:24px;}
  #sec-ciencia .panel-text{text-align:center;max-height:none;overflow-y:visible;padding-right:0;}
  #sec-ciencia .canvas-wrap{height:min(48vh,300px);height:min(48dvh,300px);}
}

/* ===================== 07. Rocola / Catálogo ===================== */
/* fondo claro fijo pese a mode-night -- ver nota en ESTADO-PROYECTO.md §11.2:
   gris azulado neutro para no inducir que unos colores de audio se vean más
   "fuertes" que otros solo por el fondo. */
#sec-catalogo{display:block;overflow:hidden;background:linear-gradient(160deg, #F3F4F8 0%, #E2E5EC 100%);
  --n-text:#0B1220; --n-text-dim:rgba(11,18,32,.72); --n-text-dim2:rgba(11,18,32,.6); --n-accent:#007693; --n-line:rgba(11,18,32,.18);}
#sec-catalogo::before{ opacity:.045; }
.catalogo-grid{position:relative;z-index:1;height:100%;min-height:100vh;min-height:100dvh;display:flex;align-items:center;max-width:46%;padding:40px 0 40px 56px;}
.catalogo-explain h2{font-family:var(--sans);font-weight:600;font-size:clamp(22px,2.7vw,30px);line-height:1.2;color:var(--text);margin:0 0 14px;}
.catalogo-explain h2 em{font-style:italic;color:var(--accent);}
.catalogo-explain p{font-family:var(--sans);font-size:16.5px;line-height:1.5;color:var(--text);margin-bottom:9px;max-width:48ch;}
.catalogo-explain .catalogo-note{font-style:italic;color:var(--text-dim2);font-size:13.5px;margin-top:-3px;}
.catalogo-explain .catalogo-note a{color:var(--accent);font-weight:700;text-decoration:none;}
.catalogo-explain .grabado a{color:inherit;text-decoration:none;}
.catalogo-explain .catalogo-hook{font-family:var(--sans);font-weight:500;font-size:16px;line-height:1.5;color:var(--text);margin-top:6px;max-width:48ch;}
.catalogo-explain .grabado{color:var(--accent);font-weight:700;}
.catalogo-explain .fact-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:34px;}
.catalogo-explain .fact{font-family:var(--mono);font-size:11.5px;letter-spacing:.4px;color:var(--text-dim);border:1px solid var(--line);border-radius:16px;padding:6px 12px;text-decoration:none;transition:border-color .2s ease,color .2s ease;}
.catalogo-explain a.fact:hover{color:var(--accent);border-color:var(--accent);}
/* En movil el texto (.catalogo-grid) y el carrusel (.catalogo-audios) se apilan
   uno debajo del otro. Antes .catalogo-grid seguia con min-height:100vh (heredado
   de escritorio) + su propio scroll interno -- eso hacia que el texto solo
   ocupara SIEMPRE la pantalla completa, empujando el carrusel entero fuera de
   vista, sin forma de llegar a el (la seccion en si no hacia scroll). Ahora:
   el texto mide lo que necesita su contenido (sin min-height forzado) y es la
   SECCION completa la que hace scroll, así el carrusel aparece justo despues
   del texto, alcanzable deslizando hacia abajo. */
@media(max-width:900px){
  #sec-catalogo{overflow-y:auto;-webkit-overflow-scrolling:touch;}
  /* padding-top bajado de 116px a 30px: ese 116px era para cuando este texto
     era lo PRIMERO que se veia (necesitaba despejar el logo fijo). Ahora que
     el carrusel de color va primero (arreglo de la sesion pasada), este
     texto ya no necesita ese respiro -- dejarlo asi creaba un hueco grande
     entre el carrusel y "Tu audio funciona asi", justo lo que la usuaria
     seguia viendo en sus capturas. */
  .catalogo-grid{max-width:100%;position:static;height:auto;min-height:0;padding:30px 24px 80px;align-items:flex-start;overflow-y:visible;}
  .catalogo-explain{text-align:center;}
  .catalogo-explain p{margin-inline:auto;}
}

.catalogo-audios{position:absolute;top:0;right:0;bottom:0;width:56%;overflow:visible;}
.rocola-track-wrap{position:relative;width:100%;height:100%;overflow:visible;}
.rocola-track{position:relative;width:100%;height:100%;overflow:visible;}
.roc-slide{position:absolute;inset:0;visibility:hidden;pointer-events:none;transform:translateY(0);transition:transform .85s cubic-bezier(.7,0,.3,1);overflow:visible;}
.roc-slide.active{visibility:visible;pointer-events:auto;}
.roc-slide canvas.roc-canvas{position:absolute;top:0;bottom:0;right:0;width:124%;height:100%;z-index:0;}
.roc-slide .roc-grain{position:absolute;top:0;bottom:0;right:0;width:124%;height:100%;z-index:1;pointer-events:none;opacity:.07;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");}
.roc-slide .roc-content{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:30px;gap:14px;z-index:2;transform:translateX(8%);}
/* Apiladas verticalmente en el borde derecho, con simbolos arriba/abajo
   (mismos que #sceneArrows) en vez de lado a lado con simbolos </>-- las
   tarjetas en realidad se mueven en vertical (translateY en goTo()), asi
   que las flechas ahora combinan con el movimiento real. Ya no chocan con
   #triNav porque esos controles se ocultan en Catalogo (ver fix anterior). */
.rocola-arrow{position:absolute;right:20px;z-index:2;width:38px;height:38px;border-radius:50%;border:1px solid rgba(255,255,255,.4);background:rgba(0,0,0,.25);color:#fff;font-size:16px;cursor:pointer;transition:border-color .2s ease,background .2s ease;}
.rocola-arrow:hover{border-color:#fff;background:rgba(0,0,0,.45);}
#rocPrev{top:calc(50% - 46px);} #rocNext{top:calc(50% + 8px);}
/* Ocultos a pedido de la usuaria -- con las flechas ya alcanza para 6
   audios, tener puntos + flechas para lo mismo se sentía repetido. Se
   ocultan por CSS, no se quita el JS que los arma (sigue siendo el mismo
   que maneja el click de cada punto, solo ya no se muestran). */
.rocola-dots{display:none;}
/* Frase de cierre ARRIBA de los puntos (no debajo) -- la usuaria pidio
   subirla mas, quedaba pegada al borde de la pantalla. Los puntos son
   chiquitos y pueden ir mas cerca del borde sin sentirse cortados; el
   texto legible necesita mas margen real. Una sola vez para todo el
   carrusel, no se repite por audio. La mancha de color de fondo llega
   hasta aqui abajo tambien, asi que necesita el mismo tratamiento de
   legibilidad ya calculado con contraste real para las 6 tarjetas (texto
   oscuro fijo + halo claro), no el color de acento que se usa en
   Compra/Tecnologia -- ahi el fondo es fijo, aqui cambia de color segun
   el audio. */
.rocola-hook{position:absolute;left:calc(50% + 8%);bottom:32px;transform:translateX(-50%);z-index:2;font-family:var(--sans);font-weight:600;font-size:12px;color:#14181B;text-shadow:0 0 10px rgba(255,255,255,.85), 0 0 3px rgba(255,255,255,.95);text-align:center;white-space:nowrap;}
@media(max-width:500px){.rocola-hook{font-size:10.5px;}}
@media(max-width:900px){
  /* .roc-content centra su contenido (tag+titulo+audifonos+texto+boton) con
     justify-content:center dentro de una caja de 70vh con overflow:hidden --
     en celulares donde esa columna no alcanza los 70vh completos, se recorta
     por igual arriba y abajo, y el ultimo elemento (el boton "Elijo este")
     es el que se pierde. Con overflow-y:auto y el contenido alineado desde
     arriba, si no cabe se puede bajar hasta el boton en vez de perderlo. */
  /* scrollbar-width/-ms-overflow-style/::-webkit-scrollbar: la barra de
     scroll nativa se veia como una linea gris horizontal justo en el borde
     de la tarjeta (reportado por la usuaria con foto) -- en el resto del
     sitio (.pcm-wrap, #sec-tecnologia .wrap, etc.) ya se ocultaba, se le
     habia quedado sin este tratamiento a estos 2 elementos nada mas. */
  .catalogo-audios{position:relative;width:100%;height:74vh;height:74dvh;overflow-y:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;-ms-overflow-style:none;}
  .catalogo-audios::-webkit-scrollbar{display:none;}
  .rocola-track-wrap,.rocola-track{overflow:visible;}
  .roc-slide{overflow-y:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;-ms-overflow-style:none;}
  .roc-slide::-webkit-scrollbar{display:none;}
  .roc-content{justify-content:flex-start;padding-top:22px;}
  /* .rocola-hook usaba position:absolute;bottom:32px pensado para la altura
     fija del carrusel en computadora -- en celular .catalogo-audios tambien
     es scrolleable (arriba) y su contenido real puede ser mas alto que los
     74vh visibles, asi que ese "bottom:32px" terminaba calculandose sobre el
     total scrolleable, no sobre lo visible: la frase quedaba fuera de la
     pantalla hasta bajar. Con sticky se queda pegada al fondo de lo que SI
     se ve, sin importar cuanto mida el contenido de arriba.
     BUG REAL reportado por la usuaria: al pasar a sticky, el bottom tambien
     se redujo a 10px (contra los 32px originales), pegando la frase demasiado
     al borde real de abajo -- seguia sin verse sin bajar. Subido a 44px para
     que quede claramente dentro de lo visible desde que carga la escena. */
  .rocola-hook{position:sticky;left:0;bottom:44px;transform:none;width:100%;}
}
.roc-slide .roc-tag{position:relative;font-family:var(--mono);font-size:11.5px;font-weight:600;letter-spacing:2.5px;text-transform:uppercase;color:var(--roc-text-dim,rgba(255,255,255,.75));text-shadow:var(--roc-text-shadow,none);}
.roc-slide h3{position:relative;font-family:var(--sans);font-weight:700;font-size:clamp(28px,3.8vw,44px);color:var(--roc-text,#fff);text-shadow:var(--roc-text-shadow,0 3px 20px rgba(0,0,0,.4));line-height:1.05;margin-bottom:2px;}
.roc-slide h3.roc-title-long{font-size:clamp(19px,2.4vw,27px);max-width:88%;margin-inline:auto;}
.roc-slide .roc-hp-row{position:relative;display:flex;align-items:flex-end;justify-content:center;gap:18px;margin:4px 0;}
.roc-slide .roc-hp{width:min(190px,32vw);filter:drop-shadow(0 14px 18px rgba(0,0,0,.4));}
.roc-slide .roc-mini{position:relative;font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:.3px;color:var(--roc-text,rgba(255,255,255,.9));max-width:260px;line-height:1.5;margin:2px 0 4px;text-shadow:var(--roc-text-shadow,none);}
.roc-slide .roc-mini a{color:inherit;font-weight:700;text-decoration:none;}
.roc-slide .roc-mini a:hover,.roc-slide .roc-mini a:focus{text-decoration:underline;text-underline-offset:2px;}
.roc-slide .roc-mini .roc-mini-music{font-size:14.5px;}
.roc-slide .roc-btn{position:relative;background:transparent;border:1.5px solid var(--roc-text,rgba(255,255,255,.8));color:var(--roc-text,#fff);font-family:var(--sans);font-weight:700;font-size:13px;letter-spacing:1.5px;text-transform:uppercase;padding:13px 32px;border-radius:22px;cursor:pointer;transition:background .25s ease,color .25s ease;}
.roc-slide .roc-btn:hover{background:var(--roc-text,#fff);color:#14181B;}
@media(max-width:760px){.roc-slide .roc-hp{width:22vw;}}
.rocola-dots i{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.4);display:block;cursor:pointer;transition:transform .25s ease,background .25s ease;}
.rocola-dots i.on{background:#fff;transform:scale(1.4);}
@media(max-width:700px){.rocola-arrow{display:none;}}

/* ===================== 08b. Audios — pantalla tipo TV HD ===================== */
/* Antes tenia un fondo claro sobrescrito (con variables --n-* ajustadas a
   oscuro-sobre-claro) pese a la clase mode-night. La usuaria pidio volverla
   oscura de verdad -- casi no tiene texto, y la caja de sorpresa necesitaba
   un escenario dramatico que el gris plano no daba. Se quita el override,
   la escena hereda el fondo y las variables reales de .mode-night. */
#sec-audios{overflow:hidden;display:flex;align-items:center;justify-content:center;}
.jukebox-wrap{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;padding:40px 20px;gap:20px;}
/* Esta escena (el jukebox, .jb-choose = boton "Elijo este" final) nunca habia
   recibido el arreglo de celular que ya se les dio a las demas -- mismo
   patron de siempre: overflow:hidden fijo sin media query recortaba en
   silencio el boton si el contenido (caption+jukebox+footer) era mas alto
   que la pantalla. */
@media(max-width:800px){
  #sec-audios{align-items:flex-start;padding-top:110px;padding-bottom:104px;overflow-y:auto;-webkit-overflow-scrolling:touch;}
}
.jb-caption{text-align:center;}
.jb-promo-line{display:block;font-family:var(--mono);font-size:11.5px;letter-spacing:2px;text-transform:uppercase;color:rgba(242,244,247,.55);margin-bottom:8px;}
/* Mismo tratamiento que #sec-compra .compra-3sem (tamaño, peso y pulso
   tecHookScale) -- reemplaza "plazas limitadas" con la misma urgencia real
   ("3 semanas") que ya se corrigió en Compra, pero aqui se habia quedado
   sin actualizar. */
.jb-promo-line .jb-3sem{font-size:22px;font-weight:700;letter-spacing:2px;color:var(--accent);display:inline-block;animation:tecHookScale 1.8s ease-in-out infinite;}
.jb-promo-sub{margin-top:8px;font-family:var(--sans);font-size:13px;font-style:italic;color:rgba(242,244,247,.55);max-width:46ch;margin-inline:auto;}
/* pantalla más luminosa: antes el vidrio quedaba muy oscuro y el nombre del
   audio se veía chico y perdido en el centro -- se sube el resplandor de
   fondo, se agranda el nombre y se acerca el marco (menos "aire" muerto
   arriba/abajo de la pantalla). */
/* Marco de vidrio esmerilado en vez de plastico solido -- mismo tratamiento
   que ya usa el panel de Ciencia (backdrop-filter:blur, borde delgado),
   adaptado a fondo oscuro. Reemplaza el marco grueso tipo dispositivo de
   antes, la usuaria lo sintio "de plastico". */
.jukebox{width:min(760px,94vw);border-radius:20px;padding:2px;
  background:linear-gradient(160deg, rgba(255,255,255,.07), rgba(255,255,255,.02));
  backdrop-filter:blur(20px) saturate(1.5);-webkit-backdrop-filter:blur(20px) saturate(1.5);
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 30px 70px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.12);
}
.jb-screen{position:relative;height:min(44vh,360px);height:min(44dvh,360px);border-radius:18px;background:rgba(10,13,16,.4);overflow:hidden;}
.jb-screen-glow{position:absolute;inset:0;background:radial-gradient(circle at 50% 45%,var(--jb-color,#333) 0%,transparent 72%);opacity:.55;transition:background .4s ease;}
.jb-glass{position:absolute;inset:0;pointer-events:none;z-index:2;background:linear-gradient(120deg,rgba(255,255,255,.09) 0%,rgba(255,255,255,0) 24%,rgba(255,255,255,0) 76%,rgba(255,255,255,.05) 100%);}
.jb-screen-row{position:relative;z-index:1;display:flex;align-items:center;height:100%;padding:0 20px;gap:10px;}
.jb-track{position:relative;flex:1;height:100%;overflow:hidden;}
.jb-slide{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;text-align:center;padding:0 10px;visibility:hidden;transform:translateX(0);transition:transform .7s cubic-bezier(.7,0,.3,1);}
.jb-slide.active{visibility:visible;}
.jb-slide-num{font-family:var(--mono);font-size:13px;letter-spacing:3.5px;text-transform:uppercase;color:rgba(255,255,255,.7);}
.jb-slide-name{font-family:var(--sans);font-weight:700;font-size:clamp(38px,6.4vw,60px);line-height:1.1;color:#fff;text-shadow:0 3px 22px rgba(0,0,0,.6);}
/* BUG REAL: nombres largos (ej. "Mi expectativa/ ES MI REALIDAD" en
   Adolescentes) envolvían a 2 líneas con el tamaño fijo de arriba -- mismo
   criterio que .roc-title-long real (rocola de adultos), adaptado a este
   espacio mas angosto (entre las 2 flechas). Faltaba en la version real,
   solo estaba en el mockup de prueba. */
.jb-slide-name.long{font-size:clamp(16px,4vw,26px);letter-spacing:-.2px;white-space:nowrap;}
.jb-arrow{position:relative;z-index:3;flex-shrink:0;width:34px;height:34px;border-radius:50%;border:1px solid rgba(255,255,255,.2);background:rgba(0,0,0,.25);color:rgba(255,255,255,.85);font-size:18px;line-height:1;cursor:pointer;transition:border-color .2s ease,background .2s ease;}
.jb-arrow:hover{border-color:#fff;background:rgba(0,0,0,.45);}
.jb-footer{width:min(760px,94vw);display:flex;flex-direction:column;align-items:center;gap:14px;}
/* Antes: barra de "urgencia" fija en 16% para siempre (nunca sube ni baja) +
   texto de escasez generica. Reemplazada por una caja de sorpresa (icono +
   texto, sin recuadro/fondo propio -- flota directo sobre el fondo oscuro
   real de la escena), movida arriba de la pantalla del jukebox en vez del
   footer, y mas grande, ya que ahora es el mensaje principal (reemplaza a
   "Hay una sorpresa en tu primera compra", que se quito por redundante).
   El icono cicla por los 6 colores reales de los audios (paleta --audio-*
   de :root), visibles sobre el fondo oscuro real. */
.jb-gift{display:flex;align-items:center;justify-content:center;gap:24px;margin:6px auto;max-width:620px;}
.jb-gift-icon{width:92px;height:92px;position:relative;flex-shrink:0;}
.jb-gift-icon svg{width:100%;height:100%;animation:jbGiftColorCycle 7s linear infinite;}
@keyframes jbGiftColorCycle{
  0%{stroke:#1FCB8F;} 20%{stroke:#0FB3A8;} 40%{stroke:#F2B705;}
  60%{stroke:#C9A84C;} 80%{stroke:#E1272E;} 100%{stroke:#1FCB8F;}
}
.jb-gift-q{position:absolute;top:-12px;right:-10px;width:36px;height:36px;border-radius:50%;color:#0B1220;font-family:var(--sans);font-weight:700;font-size:19px;display:flex;align-items:center;justify-content:center;animation:jbQPulse 1.8s ease-in-out infinite, jbGiftColorCycle2 7s linear infinite;}
@keyframes jbQPulse{0%,100%{transform:scale(1);}50%{transform:scale(1.15);}}
@keyframes jbGiftColorCycle2{
  0%{background:#1FCB8F;} 20%{background:#0FB3A8;} 40%{background:#F2B705;}
  60%{background:#C9A84C;} 80%{background:#E1272E;} 100%{background:#1FCB8F;}
}
.jb-promo-note{display:block;font-family:var(--sans);font-weight:600;font-size:20px;line-height:1.5;color:#F2F4F7;text-align:left;}
.jb-dots{display:flex;justify-content:center;gap:9px;}
.jb-dots i{width:7px;height:7px;border-radius:50%;background:rgba(242,244,247,.3);cursor:pointer;transition:transform .25s ease,background .25s ease;display:block;}
.jb-dots i.on{background:#F2F4F7;transform:scale(1.4);}
.jb-choose{width:min(320px,80%);background:transparent;border:1.5px solid rgba(242,244,247,.4);color:#F2F4F7;font-family:var(--sans);font-weight:700;font-size:12px;letter-spacing:1.8px;text-transform:uppercase;padding:15px;border-radius:24px;cursor:pointer;transition:background .25s ease,border-color .25s ease,color .25s ease;}
.jb-choose:hover{background:var(--jb-color,#333);border-color:var(--jb-color,#333);}
@media(max-width:560px){.jb-screen{height:min(38vh,300px);height:min(38dvh,300px);} .jb-arrow{width:28px;height:28px;font-size:15px;} .jb-slide-name{font-size:clamp(26px,9vw,38px);} .jb-slide-name.long{font-size:clamp(11px,3.4vw,16px);} .jb-screen-row{padding:0 10px;gap:4px;}}

/* ---------- panel de detalle: ola vertical + pastel del mismo color ---------- */
.reveal{position:fixed;inset:0;z-index:800;opacity:0;pointer-events:none;transition:opacity .45s ease;background:linear-gradient(165deg, #F7F6F2 0%, #EFEEE9 100%);overflow-y:auto;}
.reveal.open{opacity:1;pointer-events:auto;}
/* El panel de detalle tapa la barra fija global (z-index:800 > .tri-brand-wrap
   en 310), asi que "TRIADA" no se veia aqui -- justo donde mas se necesita,
   junto a "volver". Boton propio, mismo destino que el link global, en el
   mismo grupo que "volver" (no en la esquina opuesta). */
.reveal-nav{position:absolute;top:26px;left:26px;z-index:5;display:flex;align-items:center;gap:14px;}
.reveal-home{background:transparent;border:none;font-family:var(--sans);font-weight:600;font-size:13px;letter-spacing:1.5px;color:#14181B;cursor:pointer;padding:9px 4px;transition:color .25s ease;}
.reveal-home:hover{color:var(--accent);}
.reveal-back{background:rgba(20,24,27,.08);border:1px solid rgba(20,24,27,.18);color:#14181B;font-family:var(--sans);font-size:13px;padding:9px 18px;border-radius:20px;cursor:pointer;}
/* BUG REAL (Bebés/Adolescentes): el nav siempre cae sobre .reveal-wave (ver
   nota arriba), y ese fondo ahora puede ser oscuro (rayas duotono/resplandor)
   -- texto oscuro fijo sobre fondo oscuro dejaba "volver" casi invisible, y
   sin su vecino visible "TRÍADA" se sentía como si estuviera sola en otro
   lado. Mismo criterio que el resto del panel: version clara del nav cuando
   el fondo debajo es oscuro. */
.reveal-nav.on-dark .reveal-home{color:#F2F4F7;}
.reveal-nav.on-dark .reveal-back{background:rgba(242,244,247,.12);border-color:rgba(242,244,247,.3);color:#F2F4F7;}
.reveal-grid{min-height:100vh;min-height:100dvh;display:grid;grid-template-columns:1fr 1fr;}
.reveal-wave{position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;}
.reveal-wave .rw-blob{position:absolute;inset:0;width:100%;height:100%;}
.reveal-wave .rw-grain{position:absolute;inset:0;opacity:.45;mix-blend-mode:multiply;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.9 0 0 0 0 0.75 0 0 0 0 0.35 0 0 0 0.3 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");}
#revealHp,#revealEb{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;z-index:2;}
.reveal-wave .roc-hp{position:relative;z-index:2;width:min(280px,55%);}
/* La frase va DENTRO de este wrapper, apilada justo debajo del icono (no
   suelta al fondo de toda la columna, que es casi 100vh de alta) -- por eso
   es flex-column: el icono y la frase se mueven y centran juntos como una
   sola unidad, conectados. */
.reveal-hp-wrap{position:relative;display:flex;flex-direction:column;align-items:center;}
/* Texto oscuro fijo + halo claro, igual que el carrusel (los 6 pasteles de
   fondo del panel son claros, incluyendo TRIADA firma; no hace falta
   version oscura). Sin efecto en los audifonos -- la usuaria decidio que el
   movimiento fuera solo de la frase: un respiro de tamaño sutil, SIN el
   halo prendiendose/apagandose (eso mareaba en fondo claro, probado con
   mockup; el cambio de tamaño solo, no). */
.reveal-hp-wrap .reveal-hook{margin-top:14px;font-family:var(--sans);font-weight:600;font-size:13px;line-height:1.5;text-align:center;color:#14181B;text-shadow:0 0 10px rgba(255,255,255,.85), 0 0 3px rgba(255,255,255,.95);white-space:nowrap;animation:revealHookScale 1.8s ease-in-out infinite;}
@keyframes revealHookScale{0%,100%{transform:scale(1);}50%{transform:scale(1.03);}}
@media(max-width:800px){.reveal-hp-wrap .reveal-hook{font-size:12.5px;margin-top:10px;}}
@media(max-width:400px){.reveal-hp-wrap .reveal-hook{font-size:11px;}}
/* "Música 100% original" -- antes solo vivía en la rocola/jukebox de adultos
   (.roc-mini), agregada aquí también (2026-07-22) para que el panel de
   detalle diga lo mismo en todos lados, adultos y Bebés/Niños/Adolescentes.
   Mismo halo que .reveal-hook por default (funciona en los pasteles claros
   de adultos y en Niños); Adolescentes/Bebés lo cambian a sombra oscura +
   texto claro mas abajo, mismo motivo que .reveal-hook nunca tuvo que
   resolver antes: sus fondos siempre fueron claros. */
.reveal-hp-wrap .reveal-music{margin-top:4px;font-family:var(--sans);font-size:12px;line-height:1.4;text-align:center;color:#14181B;text-shadow:0 0 10px rgba(255,255,255,.85), 0 0 3px rgba(255,255,255,.95);opacity:.85;}
.reveal-hp-wrap .reveal-music a{color:inherit;font-weight:700;text-decoration:none;}
.reveal-hp-wrap .reveal-music a:hover,.reveal-hp-wrap .reveal-music a:focus{text-decoration:underline;text-underline-offset:2px;}
/* Bebés/Niños/Adolescentes: el halo blanco intenso mareaba sobre los fondos
   duotono/resplandor de Adolescentes y Bebés (mismo hallazgo que ya existía
   para .aj-hook/.aj-music antes de esta reescritura) -- se reemplaza por
   sombra oscura suave + texto claro ahí. Niños conserva el halo (funciona
   bien sobre su fondo tipo mesh, igual que adultos). */
.reveal-wave.dark-shadow .reveal-hook,.reveal-wave.dark-shadow .reveal-music{text-shadow:0 2px 8px rgba(0,0,0,.45), 0 0 3px rgba(0,0,0,.35);}
.reveal-wave.light-text .reveal-hook,.reveal-wave.light-text .reveal-music{color:#F2F4F7;}
.reveal-text{padding:90px 56px 60px;display:flex;flex-direction:column;justify-content:center;gap:14px;color:#14181B;transition:background .3s ease,color .3s ease;}
/* REGLA: los links dentro del parrafo del panel de detalle van "grabados"
   (mismo color que el texto, sin subrayar) y solo muestran el subrayado al
   acercar el cursor/foco -- mismo patron que .reveal-music a. Antes esto
   solo estaba resuelto ahi; el link real de Bebes (<a> dentro de a.inst,
   "La tecnologia de TRIADA") vive en .reveal-desc/.reveal-inst y no tenia
   esta regla, se veia subrayado siempre. */
.reveal-text .reveal-desc a,.reveal-text .reveal-inst a{color:inherit;text-decoration:none;}
.reveal-text .reveal-desc a:hover,.reveal-text .reveal-desc a:focus,
.reveal-text .reveal-inst a:hover,.reveal-text .reveal-inst a:focus{text-decoration:underline;text-underline-offset:2px;}
/* BUG REAL (2026-07-23): la frase de cierre en negritas dentro de .reveal-inst
   (ej. "Mi expectativa/ ES MI REALIDAD.", "Soy El Mejor.", "Te Amo.") vive
   metida dentro de una oracion normal -- la regla de "no partir frases que
   van juntas" (h2.long, .reveal-hook) nunca se le habia puesto a ESTA parte
   especifica, asi que se seguia envolviendo como texto normal en 2 lineas,
   justo encima de los botones Nocturno/Diurno. white-space:nowrap aqui
   funciona sin necesitar achicar el tamaño (a diferencia del titulo grande):
   el texto de .reveal-inst ya es chico (14px), a ese tamaño la frase mas
   larga real (30 caracteres) cabe sobrada en el ancho del panel -- si no
   entra en el resto del renglon simplemente baja completa a la siguiente
   linea (nunca se corta a la mitad), que es exactamente lo pedido. */
.reveal-text .reveal-inst strong,.reveal-text .reveal-desc strong{white-space:nowrap;}
.reveal-code{font-family:var(--mono);font-size:12px;letter-spacing:2px;text-transform:uppercase;color:inherit;opacity:.7;}
.reveal-text h2{font-family:var(--sans);font-weight:400;font-size:clamp(28px,3.6vw,42px);color:inherit;line-height:1.15;overflow-wrap:break-word;}
/* REGLA: frases que van juntas (un titulo, la frase TRIADA "Escuchalo
   siempre. TRIADA instala. Evoluciona y disfruta.", etc.) no deben partirse
   a mitad de camino en 2 lineas -- se leen como una sola unidad. El patron
   ya establecido es .reveal-hook (white-space:nowrap + tamaño que se achica
   con el viewport) -- .long no traia el nowrap, asi que nombres largos
   (ej. "Mi expectativa/ ES MI REALIDAD", 30 caracteres) igual envolvian a 2
   lineas justo encima de los botones. Mismo criterio aplicado aqui. */
.reveal-text h2.long{font-size:clamp(16px,4.2vw,32px);letter-spacing:-.3px;white-space:nowrap;}
.reveal-text .reveal-desc{font-family:var(--sans);font-style:italic;font-size:17.5px;line-height:1.7;color:inherit;opacity:.72;max-width:440px;}
.reveal-text .reveal-inst{font-family:var(--sans);font-size:14px;line-height:1.8;color:inherit;opacity:.6;max-width:440px;}
.reveal-text .reveal-tech{font-family:var(--mono);font-size:12px;letter-spacing:1.5px;text-transform:uppercase;color:inherit;opacity:.4;}
.daynight-toggle{display:flex;gap:8px;margin:6px 0 4px;}
.daynight-toggle button{font-family:var(--sans);font-size:12px;font-weight:600;letter-spacing:1.5px;padding:8px 18px;border-radius:14px;cursor:pointer;border:1px solid currentColor;background:transparent;color:inherit;opacity:.55;}
.daynight-toggle button.on{background:rgba(128,128,128,.18);opacity:1;}
.reveal-daynight{font-family:var(--sans);font-size:14.5px;line-height:1.8;color:inherit;opacity:.68;max-width:440px;border-top:1px solid currentColor;padding-top:16px;}
.reveal-daynight strong{opacity:1;}
.reveal-btn-final{margin-top:8px;align-self:flex-start;background:#14181B;color:#F5F4F0;font-family:var(--sans);font-weight:700;font-size:13px;letter-spacing:2px;text-transform:uppercase;padding:15px 34px;border-radius:24px;border:none;cursor:pointer;}
/* Mismo radio de pildora que .jb-choose (24px) -- ambos son botones de
   "elegir/comprar", deben leerse como la misma familia visual aunque su
   color se mantenga distinto por la correccion de contraste de arriba. */
/* BUG REAL (2026-07-23): el cafe/naranja fijo (#924B23) se eligio pensando
   solo en los pasteles claros de adultos -- contra los fondos vividos
   nuevos de Bebes/Niños/Adolescentes caia por debajo del minimo de
   contraste WCAG AA (4.5:1); medido contra el tono medio de Adolescentes
   daba ~2:1, casi ilegible. En vez de mantener un tercer color fijo que hay
   que volver a probar cada vez que cambie un fondo, ahora hereda el mismo
   color de texto ya usado en el resto del panel (a.textColor, que ya
   garantiza contraste real contra bgText) -- mismo criterio que .reveal-desc
   / .reveal-inst / .reveal-tech, que ya hacian esto via opacity en vez de un
   hue aparte. */
.reveal-safety-note{font-family:var(--sans);font-size:11.5px;line-height:1.5;color:inherit;opacity:.82;max-width:420px;margin-top:14px;}
/* Fuente científica (solo Bebés/Niños/Adolescentes -- adultos no traen este
   dato, se queda oculta por default vía el style inline del HTML). Mismo
   patrón que ya usaba .aj-fact-footer: pill con borde. */
.reveal-fact{font-family:var(--mono);font-size:11px;letter-spacing:.4px;color:inherit;opacity:.65;border:1px solid currentColor;border-radius:16px;padding:6px 14px;text-decoration:none;align-self:flex-start;transition:opacity .2s ease;}
.reveal-fact:hover{opacity:1;}
.reveal-sello{position:absolute;top:26px;right:26px;width:56px;height:56px;border-radius:50%;background:#14181B;color:#fff;display:flex;align-items:center;justify-content:center;text-align:center;font-family:var(--sans);font-size:8px;font-weight:700;line-height:1.2;transform:rotate(-8deg);}
@media(max-width:800px){.reveal-grid{grid-template-columns:1fr;}.reveal-wave{min-height:280px;}.reveal-text{padding:40px 28px 60px;}}

/* ===================== 08c. Audios para Jóvenes y Niños =====================
   REESCRITO 2026-07-22: el diseño anterior (tarjeta densa con parrafo +
   mecanismo + frase + acordeon nocturno/diurno + audifonos, todo apretado en
   dos columnas) nunca dejo de darnos problemas de espacio/legibilidad pese a
   varias rondas de ajuste (ver ESTADO-PROYECTO.md). Cambio de tactica pedido
   por la usuaria: usar el MISMO patron de dos pantallas que ya funciona en
   Audios de adultos -- pantalla 1 (jukebox, .jb-* compartido con #sec-audios)
   solo muestra edad + nombre, pantalla 2 es el mismo panel #reveal compartido
   (ver script.js openReveal) con parrafo completo, frase TRIADA, musica,
   toggle real Nocturno/Diurno y nota de seguridad -- todo poblado con los
   datos reales de ajbData. Validado antes con mockup interactivo real
   (diseno-mockups/audios-jovenes-jukebox-reveal-mockup.html, varias rondas
   de feedback real). */
#sec-audios-jovenes{padding:104px 24px 60px;display:block;overflow-x:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior-y:contain;scrollbar-width:none;-ms-overflow-style:none;}
#sec-audios-jovenes::-webkit-scrollbar{display:none;}
#sec-audios-jovenes .aj-eyebrow-top{display:block;text-align:center;font-family:var(--mono);font-size:13px;font-weight:600;letter-spacing:3px;text-transform:uppercase;color:var(--accent);margin-bottom:-4px;}
@media(max-width:700px){
  #sec-audios-jovenes{padding-top:116px;padding-bottom:104px;overflow-y:auto;-webkit-overflow-scrolling:touch;}
}

#sec-audios-jovenes .aj-more{text-align:center;font-family:var(--sans);font-style:italic;font-size:13px;color:var(--text-dim2);margin-top:20px;max-width:520px;margin-inline:auto;}
#sec-audios-jovenes .aj-safety{max-width:640px;margin:16px auto 0;text-align:center;font-family:var(--sans);font-size:13px;line-height:1.6;color:var(--text-dim2);}
#sec-audios-jovenes .aj-safety a{color:var(--accent);font-weight:700;text-decoration:none;}

/* ===================== 09. Compra ===================== */
/* Decisión confirmada con comparativo lado a lado (diseno-mockups/comparativo-fondo-compra.html):
   oscuro en vez del "vitrina electrónica" claro original -- coherente con
   Hero/Origen en vez de con las escenas de lectura larga. */
#sec-compra{display:block;overflow-x:hidden;overflow-y:auto;scrollbar-width:none;-ms-overflow-style:none;background:radial-gradient(140% 120% at 50% 0%, #101B2E 0%, #0B1220 55%, #070B13 100%);}
#sec-compra::-webkit-scrollbar{display:none;}
#sec-compra:focus{outline:none;}
/* BUG REAL (2026-07-23, confirmado con capturas + descripcion real de la
   usuaria: teclado, mouse Y touch fallaban por igual, hasta tocar CUALQUIER
   parte de la pantalla -- ni tenia que ser una flecha): #sec-audios,
   #sec-audios-jovenes y el panel #reveal nunca recibieron el mismo
   tratamiento que ya usan Ciencia/Tecnologia/Alineacion/Compra -- sin
   tabindex ni foco propio al entrar, las flechas del teclado no tienen
   ningun elemento scrolleable "activo" al que aplicarse (el scroll con
   flechas de teclado SI depende del foco, a diferencia de la rueda del
   mouse -- pero como aqui tampoco habia foco en nada, un clic en cualquier
   lugar de la pagina terminaba quedandose con el foco por default y
   "prestandoselo" por accidente a quien fuera scrolleable en ese momento,
   de ahi que tocar afuera de la pantalla a veces lo destrababa). */
#sec-audios:focus,#sec-audios-jovenes:focus,#reveal:focus,#sec-preguntas:focus{outline:none;}
#sec-testimonios .invite-box:focus{outline:none;}
#sec-compra .stage{position:relative;min-height:100vh;min-height:100dvh;display:grid;grid-template-columns:1.1fr 1px 1fr;gap:64px;max-width:1100px;margin:0 auto;padding:100px 48px;align-items:center;}
#sec-compra .compra-eqbars{position:absolute;inset:0;display:flex;align-items:flex-end;gap:4px;padding:0 6px;opacity:.1;pointer-events:none;z-index:-1;}
#sec-compra .compra-eqbars span{flex:none;width:6px;background:var(--accent);border-radius:3px;}
#sec-compra .precio-eqbars{display:inline-flex;align-items:flex-end;align-self:flex-end;gap:3px;height:36px;margin-left:2px;margin-bottom:6px;}
#sec-compra .precio-eqbars span{width:4px;background:var(--accent);border-radius:2px;opacity:.7;animation:eqbarSubtle 2.2s ease-in-out infinite;}
#sec-compra .precio-eqbars span:nth-child(1){height:14px;animation-delay:.1s;}
#sec-compra .precio-eqbars span:nth-child(2){height:26px;animation-delay:.5s;}
#sec-compra .precio-eqbars span:nth-child(3){height:18px;animation-delay:.9s;}
#sec-compra .precio-eqbars span:nth-child(4){height:32px;animation-delay:.3s;}
#sec-compra .precio-eqbars span:nth-child(5){height:20px;animation-delay:1.1s;}
#sec-compra .precio-eqbars span:nth-child(6){height:28px;animation-delay:.7s;}
#sec-compra .precio-eqbars span:nth-child(7){height:16px;animation-delay:1.4s;}
#sec-compra .precio-eqbars span:nth-child(8){height:24px;animation-delay:.2s;}
@keyframes eqbarSubtle{0%,100%{transform:scaleY(.72);}50%{transform:scaleY(1);}}
#sec-compra .divider{background:linear-gradient(to bottom,transparent,var(--line) 20%,var(--line) 80%,transparent);height:100%;}
#sec-compra h2{font-family:var(--sans);font-weight:300;font-size:clamp(34px,4.5vw,52px);line-height:1.1;color:var(--text);margin-bottom:20px;}
#sec-compra .eyebrow{margin-bottom:16px;}
#sec-compra .compra-eyebrow{position:relative;}
#sec-compra .compra-3sem{font-size:22px;font-weight:700;letter-spacing:2px;display:inline-block;animation:tecHookScale 1.8s ease-in-out infinite;}
/* aparece solo cuando se llega desde "Elijo este audio" en el panel de detalle --
   pastilla con borde (no relleno solido) para no fundirse con el eyebrow, que
   ya usa el mismo color de acento. */
#sec-compra .compra-elegido{display:inline-block;font-family:var(--sans);font-weight:600;font-size:14px;letter-spacing:.2px;color:var(--accent);background:transparent;border:1.5px solid var(--accent);border-radius:20px;padding:8px 18px;margin-top:2px;margin-bottom:22px;}
#sec-compra .compra-elegido.multi{display:block;border-radius:8px;text-align:left;line-height:1.7;padding:14px 20px;}
#sec-compra .compra-catalogo-link{display:inline-block;font-family:var(--sans);font-size:12.5px;color:var(--text-dim2);text-decoration:underline;text-underline-offset:2px;margin-bottom:16px;}
#sec-compra .compra-catalogo-link:hover{color:var(--accent);}
#sec-compra .compra-copy-btn{display:inline-block;font-family:var(--sans);font-size:12.5px;font-weight:600;letter-spacing:.3px;color:var(--accent);background:transparent;border:1px solid var(--accent);border-radius:20px;padding:9px 18px;margin-bottom:14px;cursor:pointer;transition:background .2s ease,color .2s ease;}
#sec-compra .compra-copy-btn:hover{background:var(--accent);color:var(--n-bg);}
#sec-compra .precio-b2b{border:1px solid var(--line);border-radius:8px;padding:16px 18px;margin:16px 0;max-width:340px;}
#sec-compra .precio-b2b-lbl{display:block;font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:2px;text-transform:uppercase;color:var(--text-dim2);margin-bottom:10px;}
#sec-compra .precio-b2b-text{font-family:var(--sans);font-size:22px;margin-bottom:2px;}
#sec-compra .precio-b2b-text strong{color:var(--accent);font-weight:700;}
#sec-compra .precio-b2b-old{font-weight:300;color:var(--text-dim2);text-decoration:line-through;margin-right:4px;}
#sec-compra .precio-b2b-nota{font-family:var(--mono);font-size:11px;color:var(--text-dim2);margin-bottom:14px;}
#sec-compra .precio-b2b .compra-copy-btn{margin-bottom:0;}
#sec-compra .compra-safety-note{font-family:var(--sans);font-size:11.5px;line-height:1.5;color:#C9A063;max-width:340px;margin-bottom:16px;}
#sec-compra h2 em{font-style:italic;color:var(--accent);}
#sec-compra .sub{font-family:var(--sans);font-weight:400;font-style:italic;font-size:clamp(18px,2.2vw,23px);line-height:1.65;color:var(--text-dim);margin-bottom:48px;max-width:420px;}
#sec-compra .proceso{display:flex;flex-direction:column;gap:18px;}
#sec-compra .paso{display:flex;gap:16px;align-items:baseline;}
#sec-compra .paso-n{font-family:var(--mono);font-size:13px;font-weight:600;color:var(--accent);min-width:20px;}
#sec-compra .paso-t{font-family:var(--sans);font-style:italic;font-size:16px;color:var(--text-dim);}
#sec-compra .compra-plazo{font-family:var(--mono);font-size:12.5px;letter-spacing:.3px;color:var(--text-dim2);margin-top:16px;}
#sec-compra .right{text-align:right;}
#sec-compra .precio-lbl{font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:3px;text-transform:uppercase;color:var(--text-dim2);margin-bottom:10px;}
#sec-compra .precio-wrap{display:flex;align-items:baseline;justify-content:flex-end;gap:14px;}
#sec-compra .precio-original{font-family:var(--sans);font-size:clamp(24px,3vw,32px);font-weight:300;color:var(--text-dim2);text-decoration:line-through;}
#sec-compra .precio{font-family:var(--sans);font-size:clamp(80px,11vw,140px);font-weight:300;color:var(--accent);line-height:.9;}
#sec-compra .precio-nota{font-family:var(--mono);font-size:13px;color:var(--text-dim2);margin-top:10px;}
#sec-compra .precio-local{font-family:var(--sans);font-style:italic;font-size:13px;color:var(--text-dim);margin-top:6px;}
#sec-compra .precio-var{font-family:var(--mono);font-size:12px;font-weight:500;color:var(--accent);margin-top:6px;letter-spacing:1px;}
#sec-compra .canales-cta{display:inline-block;font-family:var(--sans);font-weight:700;font-size:14px;color:var(--accent);background:transparent;border:1.5px solid var(--accent);border-radius:20px;padding:8px 18px;margin:44px 0 18px;}
#sec-compra .canales{display:flex;justify-content:flex-end;gap:20px;}
#sec-compra .canal{color:var(--accent);transition:color .25s ease,transform .25s ease;position:relative;display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:50%;border:1.5px solid var(--accent);animation:compraCanalPulse 2.4s ease-in-out infinite;}
#sec-compra .canal:hover{transform:scale(1.12);background:var(--accent);color:var(--n-bg);}
#sec-compra .canal svg{width:16px;height:16px;fill:currentColor;}
/* Mismo pulso que respira que Tecnologia (tecHookScale) -- el resplandor de
   color que tenia antes (compraHookGlow) mareaba, se quito. */
#sec-compra .compra-hook{font-family:var(--sans);font-weight:600;font-size:14px;line-height:1.5;color:var(--accent);margin-top:20px;white-space:nowrap;animation:tecHookScale 1.8s ease-in-out infinite;}
@media(max-width:500px){#sec-compra .compra-hook{font-size:11px;}}
@keyframes compraCanalPulse{0%,100%{box-shadow:0 0 0 0 color-mix(in srgb, var(--accent) 35%, transparent);}50%{box-shadow:0 0 0 6px color-mix(in srgb, var(--accent) 0%, transparent);}}
@media(max-width:800px){#sec-compra .canales-cta{text-align:left;}}
#sec-compra .footer-line{text-align:center;font-size:13px;color:var(--text-dim);letter-spacing:.5px;padding-bottom:40px;}
#sec-compra .footer-line a{color:inherit;}
#sec-compra .legal{max-width:640px;margin:40px auto 0;text-align:center;padding-top:32px;border-top:1px solid var(--line);}
#sec-compra .legal .lbl{font-size:9px;font-weight:600;letter-spacing:3px;text-transform:uppercase;color:var(--text-dim2);margin-bottom:14px;}
#sec-compra .legal p{font-family:var(--sans);font-size:12px;font-weight:300;line-height:1.8;color:var(--text-dim2);}
#sec-compra .legal .mini{font-family:var(--sans);font-size:12px;font-weight:300;line-height:1.7;color:var(--text-dim2);margin-top:16px;}
@media(max-width:800px){#sec-compra .stage{grid-template-columns:1fr;gap:40px;padding:70px 24px 80px;}#sec-compra .divider{display:none;}#sec-compra .right{text-align:left;}#sec-compra .canales{justify-content:flex-start;}
  /* Los 4 pasos (.proceso) traen su cuadricula de 2 columnas en un style="" inline en el HTML,
     por eso hace falta !important aqui para poder apilarlos en movil sin editar el HTML. */
  #sec-compra .proceso{grid-template-columns:1fr !important;}
  #sec-compra .precio-wrap{justify-content:flex-start;flex-wrap:wrap;}
  #sec-compra .precio{font-size:clamp(52px,16vw,80px);}
}

/* ===================== 09b. Preguntas frecuentes ===================== */
.faq-wrap{max-width:760px;margin:0 auto;max-height:88vh;max-height:88dvh;overflow-y:auto;padding:0 12px;}
.faq-wrap h2{font-family:var(--sans);font-weight:300;font-size:clamp(30px,4.4vw,46px);margin:10px 0 30px;color:var(--text);}
.faq-list{display:flex;flex-direction:column;}
.faq-list details{border-bottom:1px solid var(--line);padding:16px 4px;}
.faq-list summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:14px;font-family:var(--sans);font-weight:500;font-size:clamp(16px,2vw,19px);color:var(--text);}
.faq-list summary::-webkit-details-marker{display:none;}
.faq-ico{font-family:var(--mono);color:var(--accent);flex:none;}
.faq-ico::before{content:'+';}
.faq-list details[open] .faq-ico::before{content:'\2212';}
.faq-list p{font-family:var(--sans);font-weight:400;font-size:15px;line-height:1.65;color:var(--text-dim);margin-top:12px;max-width:64ch;}
.faq-list p a{color:var(--accent);text-decoration:underline;text-underline-offset:2px;}
.faq-list p a.grabado{color:inherit;text-decoration:none;}
.faq-list p a.grabado:hover,.faq-list p a.grabado:focus{text-decoration:underline;text-underline-offset:2px;}
.faq-list p a[href^="#sec-"]{font-weight:700;text-decoration:none;}
.faq-safety{max-width:64ch;margin:26px auto 0;font-family:var(--sans);font-size:13px;line-height:1.7;color:var(--text-dim2);text-align:center;border-top:1px dashed var(--line);padding-top:16px;}
/* BUG REAL (2026-07-24): #sec-preguntas es la unica de las 16 escenas que
   nunca recibio tratamiento propio -- dependia solo de la regla generica de
   .tri-sec. El problema real no era esa, era .faq-wrap: tiene su PROPIO
   max-height:88vh + overflow-y:auto, un segundo contenedor con scroll
   independiente metido DENTRO de la seccion (que tambien tiene su propio
   overflow-y:auto) -- mismo patron exacto que ya causo el bug original de
   Contacto (#sec-cta .wrap) al principio de esta sesion. En celular, con
   varias preguntas abiertas, el contenido real vive dentro de ese segundo
   contenedor, y el gesto de touch no siempre llega a el de forma confiable
   cuando hay dos scrolls anidados compitiendo. En celular se desactiva el
   scroll propio de .faq-wrap y se deja que la UNICA que scrollee sea la
   seccion misma (igual que #sec-cta .wrap, #sec-testimonios .wrap, etc). */
@media(max-width:800px){
  .faq-wrap{max-height:none;overflow-y:visible;}
}

/* ===================== 10. Lo que se viene ===================== */
#sec-proximamente{padding:80px 24px;}
#sec-proximamente .wrap{max-width:1080px;width:100%;position:relative;z-index:1;}
#sec-proximamente .prox-eyebrow{display:block;text-align:center;margin-bottom:48px;}
#sec-proximamente .prox-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1px;background:var(--line);border-radius:8px;overflow:hidden;}
#sec-proximamente .prox-card{background:var(--bg);padding:46px 30px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:14px;}
#sec-proximamente .prox-form{display:flex;flex-direction:column;gap:10px;width:100%;max-width:220px;margin-top:4px;}
#sec-proximamente .prox-form input{background:transparent;border:none;border-bottom:1px solid var(--line);color:var(--text);font-family:var(--sans);font-size:14px;text-align:center;outline:none;padding:8px 0;width:100%;}
#sec-proximamente .prox-form .btn{background:transparent;border:1px solid var(--line);color:var(--accent);font-family:var(--sans);font-weight:700;font-size:12px;letter-spacing:2px;text-transform:uppercase;padding:10px;border-radius:2px;cursor:pointer;}
#sec-proximamente .prox-icon{height:96px;display:flex;align-items:center;justify-content:center;}
#sec-proximamente .prox-card .headphones{filter:drop-shadow(0 12px 16px rgba(0,0,0,.4));animation:prox-float 4s ease-in-out infinite;}
@keyframes prox-float{0%,100%{transform:translateY(0);}50%{transform:translateY(-8px);}}
/* Reflector tipo spotlight sobre los audifonos de "La identidad que todos
   quieren" -- transmite que es algo codiciado/expectante, un solo foco de
   luz cayendo desde arriba, solo en esta tarjeta (no en las otras 2, que no
   tienen el mismo tono de "todos la quieren"). */
#sec-proximamente .prox-icon-spotlight{position:relative;overflow:visible;}
#sec-proximamente .prox-icon-spotlight::before{
  content:'';
  position:absolute;
  top:-70px; left:50%;
  width:170px; height:170px;
  transform:translateX(-50%);
  background:conic-gradient(from 180deg at 50% 0%, rgba(0,212,255,.3) 0deg, rgba(255,255,255,.16) 9deg, transparent 26deg, transparent 334deg, rgba(255,255,255,.16) 351deg, rgba(0,212,255,.3) 360deg);
  animation:proxSpotlightPulse 3s ease-in-out infinite;
  pointer-events:none;
  z-index:0;
}
#sec-proximamente .prox-icon-spotlight .headphones{position:relative;z-index:1;}
@keyframes proxSpotlightPulse{0%,100%{opacity:.55;}50%{opacity:1;}}
#sec-proximamente .prox-tag{font-family:var(--mono);font-size:9px;font-weight:500;letter-spacing:2px;text-transform:uppercase;color:var(--text-dim2);}
#sec-proximamente .prox-card h3{font-family:var(--sans);font-weight:400;font-size:clamp(19px,2.1vw,23px);line-height:1.3;color:var(--text);}
#sec-proximamente .prox-card h3 em{font-style:italic;color:var(--accent);}
#sec-proximamente .prox-card p{font-family:var(--sans);font-weight:300;font-style:italic;font-size:13.5px;line-height:1.75;color:var(--text-dim);max-width:260px;}
#sec-proximamente .prox-card canvas{max-width:100%;filter:saturate(1.4) brightness(1.1);}
@media(max-width:700px){#sec-proximamente .prox-grid{grid-template-columns:1fr;}}
/* Igual que Ciencia/Compra/Catalogo: con 3 tarjetas apiladas el contenido es
   mas alto que la pantalla del celular, y esta seccion nunca tuvo ajuste de
   celular -- se centraba y la mitad de arriba quedaba tapada/recortada por
   el logo fijo, sin forma de hacer scroll para verla. */
@media(max-width:800px){
  #sec-proximamente{align-items:flex-start;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:116px 20px 104px;}
}

/* ===================== 11-12. Testimonios / CTA ===================== */
#sec-testimonios{padding:36px 24px;}
/* Mismo caso que #sec-ciencia arriba: en escritorio "Experiencias TRÍADA"
   queda tan pegado al borde superior que el menu flotante lo atraviesa
   (reportado con captura real). Mismo arreglo, solo mas aire arriba. */
@media(min-width:961px){#sec-testimonios{padding-top:116px;}}
#sec-testimonios .wrap{max-width:560px;margin:0 auto;text-align:center;max-height:92vh;max-height:92dvh;display:flex;flex-direction:column;overflow:hidden;position:relative;z-index:1;}
#sec-testimonios h2{font-family:var(--sans);font-weight:300;font-size:clamp(22px,3.4vw,32px);line-height:1.2;color:var(--text);margin-bottom:8px;}
#sec-testimonios h2 em{font-style:italic;color:var(--accent);}
#sec-testimonios .p{font-family:var(--sans);font-weight:300;font-size:clamp(13px,1.6vw,16px);line-height:1.6;color:var(--text-dim);max-width:480px;margin:0 auto 18px;}
#sec-testimonios .invite-box{border:1px solid var(--line);padding:22px 28px 26px;background:#fff;box-shadow:0 2px 14px rgba(11,18,32,.05);max-width:460px;margin:0 auto;overflow-y:auto;flex:1;min-height:0;}
#sec-testimonios .invite-q{font-family:var(--sans);font-weight:300;font-style:italic;font-size:clamp(16px,2.1vw,21px);color:var(--accent);margin-bottom:8px;line-height:1.3;}
#sec-testimonios .invite-p{font-size:14px;font-weight:300;line-height:1.65;color:var(--text-dim);margin-bottom:16px;}
#sec-testimonios .form{display:flex;flex-direction:column;gap:10px;text-align:left;max-width:460px;margin:0 auto;}
#sec-testimonios .form input, #sec-testimonios .form textarea{padding:10px 14px;background:#fff;border:1px solid var(--line);border-radius:4px;color:var(--text);font-family:var(--sans);font-size:13px;outline:none;width:100%;}
#sec-testimonios .form textarea{resize:vertical;line-height:1.5;min-height:56px;}
#sec-testimonios .form-note{font-size:13px;color:var(--text-dim);letter-spacing:.3px;line-height:1.5;text-align:center;margin-top:4px;}
#sec-testimonios .btn{background:transparent;border:1px solid var(--line);color:var(--accent);font-family:var(--sans);font-weight:700;font-size:13px;letter-spacing:2px;text-transform:uppercase;padding:12px;border-radius:2px;cursor:pointer;margin-top:4px;}
@media(max-width:800px){
  #sec-testimonios{align-items:flex-start;padding-top:116px;padding-bottom:104px;overflow-y:auto;-webkit-overflow-scrolling:touch;}
  #sec-testimonios .wrap{max-height:none;overflow:visible;}
  #sec-testimonios .invite-box{overflow-y:visible;}
}
.form-status{font-size:12px;font-weight:600;text-align:center;margin-top:6px;min-height:16px;}
.form-status.ok{color:#0E7C57;}
.form-status.err{color:#B0223A;}
button[disabled]{opacity:.6;cursor:default;}
#sec-proximamente .prox-form .form-status{color:var(--accent);}
#sec-proximamente .prox-form .form-status.err{color:#c0392b;}

#sec-cta{padding:28px 24px;text-align:center;background:radial-gradient(140% 120% at 50% 100%, #101B2E 0%, #0B1220 55%, #070B13 100%);}
#sec-cta .wrap{max-width:520px;max-height:92vh;max-height:92dvh;overflow:hidden;position:relative;z-index:1;}
/* En pantallas angostas el contenido (ecualizador + titulo + botones de
   redes + correo + texto legal) mide mas de 92vh -- "overflow:hidden" lo
   recortaba sin dejar hacer scroll para verlo completo. El ecualizador, por
   ser el primer elemento del wrap, era el primero en quedar cortado arriba. */
@media(max-width:800px){
  /* BUG REAL (mismo patron que Musica/Ciencia/Proximamente): esta regla solo
     tocaba padding-top, dejando el padding-bottom base en 28px -- muy por
     debajo de los 76px que reserva el clip-path para el pie fijo, asi que el
     final del contenido (texto legal/redes) quedaba dentro de la franja
     recortada, la misma "franja negra" reportada en otras escenas. */
  #sec-cta{align-items:flex-start;padding-top:120px;padding-bottom:104px;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior-y:contain;touch-action:pan-y;}
  /* BUG REAL: esta regla dejaba .wrap con su PROPIO overflow-y:auto ademas
     del de la seccion -- dos contenedores con scroll independiente metidos
     uno dentro del otro. En celular real el gesto de touch no siempre llega
     de forma confiable al scroll correcto cuando hay dos anidados
     compitiendo (mismo patron que causo el bug real de Preguntas
     Frecuentes/.faq-wrap, corregido despues en esta misma sesion con la
     misma solucion: un solo scroll, el de la seccion). Cambiado a
     overflow:visible para que la UNICA que scrollee sea #sec-cta misma. */
  #sec-cta .wrap{max-height:none;overflow:visible;}
}
#sec-cta h2{font-family:var(--sans);font-weight:300;font-size:clamp(26px,4.4vw,40px);line-height:1.18;color:var(--text);margin-bottom:14px;}
#sec-cta h2 em{font-style:italic;color:var(--accent);}
#sec-cta .sub{font-family:var(--sans);font-style:italic;font-weight:300;font-size:clamp(13px,1.6vw,16px);color:var(--text-dim);margin-bottom:22px;}
#sec-cta .btns{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin-bottom:18px;}
#sec-cta .btn-soc{display:flex;align-items:center;gap:8px;padding:9px 18px;border:1px solid var(--line);border-radius:22px;color:var(--text);text-decoration:none;font-size:12px;font-weight:500;}
#sec-cta .btn-soc svg{width:15px;height:15px;fill:var(--accent);}
#sec-cta .email{font-family:var(--sans);font-style:italic;font-size:15px;color:var(--text-dim);text-decoration:none;display:inline-block;border:1px solid var(--line);padding:10px 26px;border-radius:4px;}
#sec-cta .legal{max-width:520px;margin:20px auto 0;padding-top:16px;border-top:1px solid var(--line);}
#sec-cta .legal .lbl{font-size:9px;font-weight:600;letter-spacing:3px;text-transform:uppercase;color:var(--text-dim2);margin-bottom:8px;}
#sec-cta .legal p{font-family:var(--sans);font-size:13px;font-weight:300;line-height:1.55;color:var(--text-dim2);}
#sec-cta .legal .mini{font-family:var(--sans);font-size:12px;font-weight:300;line-height:1.5;color:var(--text-dim2);margin-top:8px;}
#sec-cta .legal .copy{font-size:12px;color:var(--text-dim2);margin-top:10px;}

/* ===================== 00. Entrada =====================
   Barras de ecualizador (frase calculada TRI-Á-DA) que crecen, laten y se
   desvanecen; solo entonces aparece la palabra como texto HTML normal. */
#sec-entrada{position:fixed;inset:0;z-index:1000;background:radial-gradient(140% 120% at 28% 0%, #101B2E 0%, #0B1220 55%, #070B13 100%);display:flex;flex-direction:column;align-items:center;justify-content:center;transition:opacity 1s ease;}
#sec-entrada.done{opacity:0;pointer-events:none;}
#sec-entrada canvas#entradaCanvas{position:absolute;inset:0;width:100%;height:100%;z-index:0;}
#entradaWord{position:relative;z-index:1;font-family:'IBM Plex Sans',sans-serif;font-weight:700;font-size:clamp(52px,12vw,138px);letter-spacing:9px;background:linear-gradient(180deg, #0B1220 0%, #007693 100%);-webkit-background-clip:text;background-clip:text;color:transparent;opacity:0;}
#entradaCaption{position:relative;z-index:1;margin-top:18px;font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:clamp(11px,1.6vw,14px);font-weight:500;letter-spacing:5px;text-transform:uppercase;color:#00D4FF;opacity:0;}

/* ===================== Cortina de transición =====================
   Franja flotante de barras de ecualizador con la frase calculada de la escena
   destino — versión simplificada (sin fondo moldeado con blur ni "red de
   seguridad" de la sesión 5, que quedaron rotos). El cambio de escena ocurre
   a la mitad del cruce (p=0.5), cuando la franja cubre más pantalla. */
#waveOverlay{position:fixed;inset:0;z-index:399;pointer-events:none;opacity:0;transition:opacity .1s linear;}
#waveOverlay.open{opacity:1;pointer-events:auto;}
#waveOverlay canvas{position:absolute;inset:0;width:100%;height:100%;}

/* ===================== Navegación global ===================== */
#sceneArrows{position:fixed;right:20px;bottom:28px;z-index:320;display:flex;flex-direction:column;gap:10px;align-items:center;}
#sceneArrows button{width:36px;height:36px;border-radius:50%;border:1px solid rgba(241,237,233,.3);background:rgba(30,22,27,.6);color:#F1EDE9;font-size:15px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:border-color .25s ease,background .25s ease,transform .25s ease;}
#sceneArrows button:hover{border-color:rgba(241,237,233,.7);background:rgba(46,34,41,.85);transform:scale(1.06);}
#sceneArrows button:disabled{opacity:.28;cursor:default;pointer-events:none;}
#sceneArrows .scene-count{font-family:var(--mono);font-size:9px;letter-spacing:1px;color:rgba(241,237,233,.55);text-align:center;writing-mode:vertical-rl;transform:rotate(180deg);margin:2px 0;}
#sceneArrows .scene-wave{display:flex;gap:2px;align-items:center;height:12px;}
#sceneArrows .scene-wave i{width:2px;background:#00D4FF;border-radius:1px;display:block;animation:tri-music-bar 1.4s ease-in-out infinite;opacity:.7;}
#sceneArrows .scene-wave i:nth-child(1){height:4px;animation-delay:0s;}
#sceneArrows .scene-wave i:nth-child(2){height:11px;animation-delay:.25s;}
#sceneArrows .scene-wave i:nth-child(3){height:7px;animation-delay:.5s;}
@media(max-width:760px){#sceneArrows{right:12px;bottom:18px;}#sceneArrows button{width:32px;height:32px;font-size:13px;}}

#triNav{position:fixed;right:16px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:11px;z-index:300;}
.tri-dot{width:7px;height:7px;border-radius:50%;background:rgba(140,150,155,.5);border:1px solid rgba(255,255,255,.5);display:block;cursor:pointer;transition:transform .3s ease,background .3s ease;position:relative;box-shadow:0 0 0 3px rgba(11,16,18,.2);}
.tri-dot:hover{background:#00D4FF;transform:scale(1.3);}
.tri-dot.active{background:#00D4FF;border-color:#00D4FF;transform:scale(1.45);}
.tri-dot::before{content:attr(data-label);position:absolute;right:16px;top:50%;transform:translateY(-50%);white-space:nowrap;font-family:var(--sans);font-size:12px;letter-spacing:.5px;color:#EDEFEE;background:rgba(11,16,18,.92);border:1px solid rgba(0,212,255,.3);padding:5px 10px;border-radius:3px;opacity:0;pointer-events:none;transition:opacity .2s ease;}
.tri-dot:hover::before{opacity:1;}
@media(max-width:760px){#triNav{display:none;}}

.tri-music-btn{position:fixed;left:18px;bottom:18px;z-index:300;width:44px;height:44px;border-radius:50%;background:rgba(11,16,18,.85);border:1px solid rgba(0,212,255,.4);color:#00D4FF;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .3s ease,transform .3s ease;}
.tri-music-btn:hover{background:rgba(111,163,201,.15);transform:scale(1.08);}
.tri-music-btn.playing{border-color:#00D4FF;}
.tri-music-bars{display:flex;align-items:center;justify-content:center;gap:2.5px;height:16px;}
.tri-music-bars i{width:3px;background:#00D4FF;border-radius:1px;display:block;animation:tri-music-bar 1s ease-in-out infinite;}
.tri-music-bars i:nth-child(1){height:6px;animation-delay:0s;}
.tri-music-bars i:nth-child(2){height:15px;animation-delay:.2s;}
.tri-music-bars i:nth-child(3){height:9px;animation-delay:.4s;}
@keyframes tri-music-bar{0%,100%{transform:scaleY(.4);}50%{transform:scaleY(1);}}

/* Se separo el texto "TRIADA" del boton del menu (antes eran un solo
   <button>, el texto no llevaba a ningun lado por si solo) -- ahora el
   icono de rayas abre el menu completo y el texto es un link directo,
   la "salida de emergencia" de una sola accion que le faltaba al sitio
   (heuristica de Nielsen: control y libertad del usuario). Apunta a
   #sec-catalogo (el carrusel), no a Inicio -- decision de la usuaria
   2026-07-17, corrige la version anterior de este mismo comentario que
   decia "Inicio". Ambos viven dentro de .tri-brand-wrap para heredar el
   mismo color/posicion fija que ya tenian juntos. */
.tri-brand-wrap{position:fixed;top:24px;left:26px;z-index:310;display:flex;align-items:center;gap:11px;color:#EDEFEE;transition:color .3s ease;max-width:calc(100vw - 40px);}
.tri-menu-btn{position:static;height:auto;padding:0;background:transparent;border:none;color:inherit;display:flex;align-items:center;cursor:pointer;transition:transform .3s ease;flex-shrink:0;}
.tri-menu-btn svg{color:#00D4FF;flex-shrink:0;filter:drop-shadow(0 1px 6px rgba(0,0,0,.45));}
.tri-home-link{font-family:var(--sans);font-weight:600;font-size:16px;letter-spacing:1.5px;text-shadow:0 1px 6px rgba(0,0,0,.45);color:inherit;text-decoration:none;cursor:pointer;transition:color .3s ease,transform .3s ease;white-space:nowrap;flex-shrink:0;}
.tri-home-link:hover{color:#00D4FF;transform:scale(1.04);}
.tri-menu-btn:hover{transform:scale(1.04);}
.tri-menu-btn:hover svg{color:#fff;}
#triMenuOverlay{position:fixed;inset:0;z-index:400;background:#06070C;opacity:0;pointer-events:none;transition:opacity .4s ease;display:flex;align-items:center;justify-content:center;}
#triMenuOverlay.open{opacity:1;pointer-events:auto;}
.tri-menu-list{display:flex;flex-direction:column;gap:2px;text-align:center;max-height:84vh;max-height:84dvh;overflow-y:auto;padding:40px 24px;}
.tri-menu-list a{font-family:var(--sans);font-weight:300;font-size:clamp(19px,3.6vw,28px);color:#EDEFEE;text-decoration:none;padding:8px 20px;transition:color .25s ease;}
.tri-menu-list a:hover{color:#00D4FF;font-style:italic;}
.menu-note-shine{display:inline-block;font-family:var(--mono);font-size:11px;letter-spacing:1px;text-transform:uppercase;font-weight:600;vertical-align:middle;background:linear-gradient(110deg, rgba(0,212,255,.45) 0%, #7FE8FF 45%, rgba(0,212,255,.45) 65%, rgba(0,212,255,.45) 100%);background-size:250% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:menuShine 3.2s ease-in-out infinite;}
.tri-menu-list .menu-note-shine{margin-left:6px;}
@keyframes menuShine{0%{background-position:200% 0;}55%,100%{background-position:-50% 0;}}
@media(max-width:760px){.tri-brand-wrap{top:16px;left:16px;}}

#triTopNav{position:fixed;top:26px;right:26px;z-index:310;}
.triTopNav-scroll{display:flex;align-items:center;gap:28px;}
.triTopNav-fade{display:none;}
#triTopNav button{font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:1.8px;text-transform:uppercase;color:#EDEFEE;background:transparent;border:none;padding:4px 0;cursor:pointer;white-space:nowrap;text-shadow:0 1px 6px rgba(0,0,0,.45);transition:color .25s ease;}
#triTopNav button:hover,#triTopNav button.active{color:#00D4FF;}
.tri-brand-buy{font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:1.4px;text-transform:uppercase;border:none;cursor:pointer;white-space:nowrap;margin-left:4px;background:#00D4FF;color:#0B1220;padding:6px 14px;border-radius:14px;transition:background .2s ease;}
.tri-brand-buy:hover,.tri-brand-buy.active{background:#00E8FF;}
body.nav-on-light .tri-brand-buy{background:#007693;color:#F2F4F7;}
body.nav-on-light .tri-brand-buy:hover,body.nav-on-light .tri-brand-buy.active{background:#007693;}
.brand-note-shine{margin-left:8px;white-space:nowrap;background-color:transparent;border:none;padding:0;cursor:pointer;}
body.nav-on-light .brand-note-shine{background:linear-gradient(110deg, #00566D 0%, #00A6D6 45%, #00566D 65%, #00566D 100%);background-size:250% 100%;-webkit-background-clip:text;background-clip:text;}
@media(max-width:900px){.brand-note-shine{display:none;}}
/* #triTopNav button (con ID) le gana en especificidad a .menu-note-shine (una
   sola clase) y le pisaba el color:transparent + el gradiente con su propio
   color:#EDEFEE + background:transparent -- por eso el brillo no se veia,
   se quedaba como texto blanco solido. Estas reglas repiten el selector con
   #triTopNav para igualar/ganar esa especificidad. */
#triTopNav .topnav-note-shine{background-color:transparent;border:none;padding:4px 0;cursor:pointer;white-space:nowrap;background-image:linear-gradient(110deg, rgba(0,212,255,.45) 0%, #7FE8FF 45%, rgba(0,212,255,.45) 65%, rgba(0,212,255,.45) 100%);background-size:250% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;}
body.nav-on-light #triTopNav .topnav-note-shine{background-image:linear-gradient(110deg, #00566D 0%, #00A6D6 45%, #00566D 65%, #00566D 100%);}
@media(min-width:801px){.topnav-note-shine{display:none;}}
@media(max-width:960px){#triTopNav{display:none;}}
/* La usuaria pidio que estos enlaces (Catalogo/Ciencia/Que hace TRIADA/
   Preguntas) tambien se vean directo en celular, no solo adentro del menu de
   hamburguesa -- "las personas solo van a ver el menu de hamburguesas" (no
   lo abren). Franja horizontal con scroll propio, un solo renglon siempre --
   antes usaba flex-wrap y con 4-5 items terminaba partiendose en un segundo
   renglon que se veia mal (reportado por la usuaria con foto real). Esto es
   lo que obligo a agrandar la franja superior reservada de 64px a 104px
   (#triHeaderBar y el padding-top de las 16 escenas) -- ver notas en cada
   una. */
@media(max-width:800px){
  #triTopNav{display:block;position:fixed;top:60px;left:0;right:0;z-index:310;padding-bottom:12px;}
  /* Antes el aviso de "hay mas, desliza" era un mask-image -- en algunos
     Android no se veia (reportado con foto: el renglon se veia cortado en
     seco, sin ningun degradado). Se cambia por un div normal con gradiente
     de fondo, mismo truco que ya usa el carrusel de audios (.roc-arrow),
     mucho mas confiable entre navegadores. */
  .triTopNav-scroll{display:flex;flex-wrap:nowrap;align-items:center;justify-content:flex-start;gap:18px;padding:0 26px;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;-ms-overflow-style:none;}
  .triTopNav-scroll::-webkit-scrollbar{display:none;}
  .triTopNav-fade{display:block;position:absolute;top:0;right:0;bottom:12px;width:34px;background:linear-gradient(to right, transparent, #0B1220);pointer-events:none;}
  body.nav-on-light .triTopNav-fade{background:linear-gradient(to right, transparent, #FAFBFC);}
  #triTopNav button{font-size:11.5px;letter-spacing:1px;flex-shrink:0;}
  #triTopNav .tri-nav-catalogo{display:none;}
  .tri-brand-buy{font-size:10px;padding:5px 12px;}
}

/* El menú fijo cambia de blanco a negro según si la escena activa es clara u
   oscura -- antes era siempre blanco y desaparecía sobre fondos claros. */
body.nav-on-light .tri-brand-wrap{color:#0B1220;}
body.nav-on-light .tri-menu-btn svg{color:#007693;filter:none;}
body.nav-on-light .tri-home-link{text-shadow:none;}
body.nav-on-light .tri-home-link:hover{color:#007693;}
body.nav-on-light .tri-menu-btn:hover svg{color:#0B1220;}
body.nav-on-light #triTopNav button{color:#0B1220;text-shadow:none;}
body.nav-on-light #triTopNav button:hover, body.nav-on-light #triTopNav button.active{color:#007693;}
body.nav-on-light .tri-music-btn{background:rgba(255,255,255,.9);border-color:rgba(0,118,147,.35);color:#007693;}
body.nav-on-light .tri-music-bars i{background:#007693;}

/* Respeta la preferencia del sistema operativo "reducir movimiento" (mareo,
   migraña, sensibilidad vestibular) apagando pulsos y traslaciones CSS. Las
   animaciones dibujadas en <canvas> por script.js se atenúan aparte, ver
   REDUCE_MOTION en script.js. */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration:0.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.01ms !important;
    scroll-behavior:auto !important;
  }
}