/* ============================================================
   NUMBRA STUDIO — hoja de estilos
   Sistema basado en el Manual de Marca v1.0
   ------------------------------------------------------------
   1. Tokens (paleta 70·25·5, tipografía, easing)
   2. Base y utilidades (.disp, .accent, .wrap, .eyebrow, .glow)
   3. Componentes (loader, cursor, nav, menú, botones)
   4. Secciones (hero, manifiesto, servicios, método, data, universos, cta, footer)
   5. Animación (estados .fade / .lm .li) y accesibilidad
   ============================================================ */

/* ---------- 1 · TOKENS ---------- */
:root{
  --abisal:#050100;            /* lienzo base, domina ≥70% */
  --profundo:#200B0A;          /* transición y volumen */
  --brasa:#4D1A17;             /* glow medio, capas */
  --carmesi:#B22423;           /* acento único: el destello */
  --ambar:#D9A441;             /* la chispa: micro-acento de contraste (índices, hovers) */
  --humo:#F7F2F1;              /* tipografía e info */
  --muted:#A39B99;
  --line:rgba(247,242,241,.09);
  --line-hi:rgba(247,242,241,.17);
  --carmesi-lo:rgba(178,36,35,.13);
  --disp:'Archivo Black',system-ui,sans-serif;   /* titulares: grita */
  --sans:'Space Grotesk',system-ui,sans-serif;   /* cuerpo/UI: susurra */
  --ease:cubic-bezier(.32,.72,0,1);
}

/* ---------- 2 · BASE ---------- */
*{margin:0;padding:0;box-sizing:border-box}
html{background:var(--abisal)}
html.lenis{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto}
body{background:transparent;color:var(--humo);font-family:var(--sans);font-size:17px;line-height:1.6;overflow-x:hidden}

/* El éter: partículas/moléculas suspendidas en todo el sitio (space.js) */
#space{position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:1;transition:opacity .9s var(--ease)}

/* El velo del universo: oscurecimiento discreto y CONSTANTE en todo el
   tablero (home y sector Webs por igual) → nunca se ve entrar ni salir.
   Solo atenúa el éter: la cinta, el destello, la pileta y todo el
   contenido pintan POR ENCIMA y conservan su intensidad. */
#veil{position:fixed;inset:0;z-index:0;pointer-events:none;background:rgba(5,1,0,.26)}

/* La cinta de scroll: serpentea por toda la página, detrás del contenido */
#ribbon{position:absolute;top:0;left:0;width:100%;z-index:0;pointer-events:none;overflow:hidden}
#ribbon svg{display:block}

/* Sin barra de scroll: la cinta es el indicador de progreso */
html{scrollbar-width:none;-ms-overflow-style:none}
::-webkit-scrollbar{display:none;width:0;height:0}

/* ===== BARRIDO ESPACIAL (navegación tipo tablero, sweep.js) =====
   Durante el barrido, TODO el tablero (body con sus fixed) panea en 3D.
   La perspectiva solo existe durante la animación (si fuera permanente
   rompería el position:fixed del nav). */
html.sweep-go, html.sweep-in-right, html.sweep-in-left{perspective:1400px;overflow-x:hidden}
html.sweep-go body{transition:transform .68s cubic-bezier(.6,.05,.35,1), opacity .55s ease}
html.sweep-in-right body{transform:translateX(72vw) rotateY(-7deg) scale(.97);opacity:0}
html.sweep-in-left  body{transform:translateX(-72vw) rotateY(7deg) scale(.97);opacity:0}
html.sweep-out-right body{transform:translateX(-72vw) rotateY(7deg) scale(.97);opacity:0}
html.sweep-out-left  body{transform:translateX(72vw) rotateY(-7deg) scale(.97);opacity:0}

/* ===== EL TABLERO (world.js): el sector Webs vive a la DERECHA =====
   El fondo (éter, grano) NO se mueve: es el mismo universo.
   La home panea a la izquierda y el sector entra desde la derecha. */
#home-world{position:relative}
#home-world, #ribbon{transition:transform 1.5s cubic-bezier(.55,.05,.2,1)}
html.world-webs #home-world, html.world-webs #ribbon{transform:translateX(-100vw)}
html.world-webs{overflow:hidden}
#webs-sector{position:fixed;inset:0;z-index:90;transform:translateX(100vw);
  transition:transform 1.5s cubic-bezier(.55,.05,.2,1), visibility 0s 1.5s;visibility:hidden}
html.world-webs #webs-sector{transform:none;visibility:visible;transition:transform 1.5s cubic-bezier(.55,.05,.2,1), visibility 0s 0s}
#webs-sector iframe{width:100%;height:100%;border:0;display:block;background:transparent}
/* (el destello ya no panea ni se duplica: es un único objeto del mundo
   que se recorre — la posición la maneja hero3d.js según el sector) */
::selection{background:var(--carmesi);color:#fff}
a{color:inherit;text-decoration:none}
img{max-width:100%}
.disp{font-family:var(--disp);text-transform:uppercase;letter-spacing:-.02em;line-height:.96;font-weight:400}
/* títulos no seleccionables en todo el universo */
h1,h2,h3,.disp{user-select:none;-webkit-user-select:none}
.accent{color:var(--carmesi)}
.wrap{max-width:1280px;margin:0 auto;padding:0 36px}
section{position:relative}

.eyebrow{display:inline-flex;align-items:center;gap:9px;border:1px solid var(--line-hi);border-radius:999px;padding:7px 16px;
  font-size:10.5px;letter-spacing:.26em;text-transform:uppercase;color:var(--muted);font-weight:500;background:rgba(247,242,241,.03)}
.eyebrow::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--carmesi);box-shadow:0 0 12px var(--carmesi);animation:dotpulse 2.4s ease-in-out infinite}
@keyframes dotpulse{50%{opacity:.4}}

.glow{position:absolute;border-radius:50%;filter:blur(120px);pointer-events:none;z-index:0;animation:breathe 11s ease-in-out infinite}
@keyframes breathe{50%{transform:scale(1.14);opacity:.75}}

.grain{position:fixed;inset:0;z-index:70;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.6'/%3E%3C/svg%3E")}

/* ---------- 3 · COMPONENTES ---------- */

/* Loader */
#loader{position:fixed;inset:0;z-index:200;background:var(--abisal);display:flex;align-items:center;justify-content:center;flex-direction:column;gap:26px}
#loader svg{width:74px;height:74px;animation:beat 1.15s ease-in-out infinite;filter:drop-shadow(0 0 22px rgba(178,36,35,.65))}
@keyframes beat{0%,100%{transform:scale(.94)}20%{transform:scale(1.08)}35%{transform:scale(.97)}50%{transform:scale(1.05)}}
#loader .lw{font-size:10px;letter-spacing:.5em;text-transform:uppercase;color:var(--muted)}

/* Cursor con glow (solo dispositivos con hover) */
#cur{position:fixed;top:0;left:0;width:10px;height:10px;border-radius:50%;background:var(--carmesi);z-index:150;pointer-events:none;
  box-shadow:0 0 18px 4px rgba(178,36,35,.55);transform:translate(-50%,-50%);transition:width .3s var(--ease),height .3s var(--ease),opacity .3s;opacity:0;mix-blend-mode:screen}
#cur.big{width:34px;height:34px;box-shadow:0 0 34px 10px rgba(178,36,35,.4)}
@media(hover:none){ #cur{display:none} }

/* Nav isla */
.nav{position:fixed;top:22px;left:50%;transform:translateX(-50%);z-index:100;display:flex;align-items:center;gap:26px;
  padding:10px 12px 10px 22px;border-radius:999px;border:1px solid var(--line);background:rgba(10,4,2,.5);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);transition:border-color .5s var(--ease),background .5s var(--ease);white-space:nowrap}
.nav.s{border-color:var(--line-hi);background:rgba(10,4,2,.8)}
.nav .logo img{height:30px;width:auto;display:block;transition:transform .5s var(--ease)}
.nav .logo:hover img{transform:scale(1.05)}
.nav-links{display:flex;gap:24px;font-size:13.5px;font-weight:500;color:var(--muted)}
.nav-links a{transition:color .35s var(--ease)}
.nav-links a:hover{color:var(--ambar)}
.lang{display:flex;border:1px solid var(--line);border-radius:999px;overflow:hidden}
.lang button{background:none;border:none;color:var(--muted);padding:6px 12px;cursor:pointer;font-family:var(--sans);font-weight:700;font-size:11px;letter-spacing:.08em;transition:all .3s var(--ease)}
.lang button.on{background:var(--carmesi);color:#fff}
.nav-cta{display:inline-flex;align-items:center;gap:8px;background:var(--carmesi);color:#fff;padding:9px 8px 9px 18px;border-radius:999px;font-size:13px;font-weight:700}
.nav-cta .ico{width:26px;height:26px;border-radius:50%;background:rgba(255,255,255,.18);display:flex;align-items:center;justify-content:center;font-size:12px;transition:transform .4s var(--ease)}
.nav-cta:hover .ico{transform:translate(2px,-2px)}
.burger{display:none;width:38px;height:38px;border-radius:50%;border:1px solid var(--line-hi);background:none;cursor:pointer;position:relative}
.burger span{position:absolute;left:10px;right:10px;height:1.6px;background:var(--humo);transition:transform .5s var(--ease),top .5s var(--ease)}
.burger span:nth-child(1){top:14px}
.burger span:nth-child(2){top:22px}
.burger.open span:nth-child(1){top:18px;transform:rotate(45deg)}
.burger.open span:nth-child(2){top:18px;transform:rotate(-45deg)}
@media(max-width:900px){
  .nav{gap:14px;padding:8px 10px 8px 16px}
  .nav-links,.nav-cta{display:none}
  .burger{display:block}
}

/* Menú fullscreen */
.menu{position:fixed;inset:0;z-index:95;background:rgba(5,1,0,.9);backdrop-filter:blur(28px);-webkit-backdrop-filter:blur(28px);
  display:flex;flex-direction:column;justify-content:center;padding:0 10vw;visibility:hidden;opacity:0;transition:opacity .6s var(--ease),visibility 0s .6s}
.menu.open{visibility:visible;opacity:1;transition:opacity .6s var(--ease)}
.menu a{font-family:var(--disp);text-transform:uppercase;font-size:clamp(30px,8.5vw,58px);line-height:1.3;color:var(--humo);
  transform:translateY(40px);opacity:0;transition:transform .7s var(--ease),opacity .7s var(--ease),color .3s}
.menu a:hover{color:var(--carmesi)}
.menu.open a{transform:none;opacity:1}
.menu.open a:nth-child(1){transition-delay:.07s}.menu.open a:nth-child(2){transition-delay:.13s}
.menu.open a:nth-child(3){transition-delay:.19s}.menu.open a:nth-child(4){transition-delay:.25s}
.menu.open a:nth-child(5){transition-delay:.31s}.menu.open a:nth-child(6){transition-delay:.37s}

/* Botones — el transform lo maneja GSAP (magnetismo); acá solo color */
.btn{display:inline-flex;align-items:center;gap:12px;padding:8px 8px 8px 26px;border-radius:999px;font-weight:700;font-size:15px;
  transition:background .45s var(--ease),border-color .45s var(--ease)}
.btn .ico{width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:14px;transition:transform .45s var(--ease)}
.btn:hover .ico{transform:translate(2px,-2px) scale(1.06)}
.btn-primary{background:var(--carmesi);color:#fff}
.btn-primary .ico{background:rgba(255,255,255,.18)}
.btn-ghost{border:1px solid var(--line-hi);color:var(--humo)}
.btn-ghost .ico{background:rgba(247,242,241,.07)}
.btn-ghost:hover{border-color:var(--carmesi)}

/* ---------- 4 · SECCIONES ---------- */

/* Hero — columna: el contenido centra y el pie SIEMPRE queda debajo.
   Sin selección de texto: nada de pintado azul/rojo al clickear. */
.hero{min-height:100dvh;display:flex;flex-direction:column;overflow:hidden;
  user-select:none;-webkit-user-select:none}
/* el destello es UN objeto del mundo: canvas fijo a nivel universo */
#bg3d{position:fixed;inset:0;z-index:1;pointer-events:none}
.hero .glow{width:720px;height:720px;background:var(--carmesi-lo);top:-200px;right:-240px}
.hero .glow.b{width:540px;height:540px;background:rgba(77,26,23,.24);bottom:-220px;left:-180px;top:auto;right:auto;animation-delay:-5s}
.hero-in{position:relative;z-index:2;width:100%;flex:1;display:flex;flex-direction:column;justify-content:center;padding:110px 36px 20px}
.hero h1{font-size:clamp(50px,9.6vw,150px);margin:0;max-width:13ch}
.lm{display:block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em}
.li{display:inline-block;transform:translateY(115%)}
.hero .sub{font-size:clamp(16px,1.9vw,19px);color:#D8D0CE;max-width:530px;margin-top:22px;line-height:1.55}
.hero-cta{display:flex;gap:14px;margin-top:32px;flex-wrap:wrap}
.hero-foot{position:relative;z-index:2;padding-bottom:24px}
.hero-foot .wrap{display:flex;justify-content:space-between;align-items:center;font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--muted)}
@media(max-width:640px){ .hero-foot .wrap span:nth-child(2){display:none} }

/* pantallas bajas (notebooks, ultrawide con escala): que TODO entre sin scroll */
@media(max-height:920px){
  .hero-in{padding-top:92px}
  .hero h1{font-size:clamp(44px,8.2vw,112px)}
  .hero .sub{margin-top:18px;font-size:16px}
  .hero-cta{margin-top:24px}
}
@media(max-height:760px){
  .hero-in{padding-top:84px}
  .hero h1{font-size:clamp(36px,7vw,82px)}
  .hero .sub{max-width:470px;font-size:15px}
  .hero-cta .btn{padding:6px 6px 6px 20px;font-size:14px}
  .hero-cta .btn .ico{width:32px;height:32px}
}

/* ===== VIDA DE LOS TÍTULOS: letras que saltan ===== */
.li{position:relative}
.word{display:inline-block;white-space:nowrap}   /* las palabras NUNCA se cortan */
.ch{display:inline-block}
@keyframes chjump{
  0%{transform:translateY(0);opacity:1}
  38%{transform:translateY(-1.25em);opacity:0}
  50%{transform:translateY(1.25em);opacity:0}
  100%{transform:translateY(0);opacity:1}
}
.ch.jump{animation:chjump .95s cubic-bezier(.5,0,.2,1)}
@media(prefers-reduced-motion:reduce){ .ch.jump{animation:none} }
.fade{opacity:0;transform:translateY(30px)}

/* Bandas */
.band{padding:160px 0}
h2.sec{font-size:clamp(36px,5.6vw,78px);margin-top:24px}
@media(max-width:768px){ .band{padding:100px 0} .hero-in{padding:120px 24px 30px} }

/* Manifiesto — gradiente translúcido: el éter se ve a través */
.mani{background:linear-gradient(180deg,rgba(32,11,10,0),rgba(32,11,10,.5) 55%,rgba(32,11,10,0))}
.mani .glow{width:620px;height:620px;background:var(--carmesi-lo);top:20%;left:-240px}
.mani-big{font-size:clamp(34px,6.4vw,88px);margin-top:26px}
.mani-big .dim{color:rgba(247,242,241,.2)}
.mani-p{margin-top:56px;max-width:640px;font-size:clamp(18px,2.3vw,24px);line-height:1.55;color:#D8D0CE}
.mani-p .accent{font-weight:700}
.sigline{margin-top:70px;height:1px;position:relative;overflow:visible}
.sigline svg{position:absolute;left:0;top:-40px;width:100%;height:80px}
.sigline path{stroke:var(--carmesi);stroke-width:1.5;fill:none;opacity:.8}

/* Servicios — filas interactivas */
.srv-list{margin-top:70px;border-top:1px solid var(--line)}
.srow{position:relative;display:grid;grid-template-columns:70px 1fr 380px 60px;align-items:center;gap:26px;
  padding:34px 10px;border-bottom:1px solid var(--line);transition:background .5s var(--ease);overflow:hidden}
.srow::before{content:'';position:absolute;inset:0;background:radial-gradient(420px 140px at var(--gx,50%) 50%,rgba(178,36,35,.12),transparent 70%);opacity:0;transition:opacity .5s var(--ease);pointer-events:none}
.srow:hover::before{opacity:1}
.srow .n{font-size:11px;letter-spacing:.2em;color:var(--ambar);font-weight:700}
.srow h3{font-family:var(--disp);text-transform:uppercase;font-size:clamp(21px,3.4vw,40px);letter-spacing:-.01em;line-height:1;transition:transform .5s var(--ease),color .4s}
.srow:hover h3{transform:translateX(14px)}
.srow p{font-size:14px;color:var(--muted);line-height:1.5}
.srow .arr{width:42px;height:42px;border-radius:50%;border:1px solid var(--line-hi);display:flex;align-items:center;justify-content:center;
  font-size:15px;color:var(--muted);transition:all .5s var(--ease);justify-self:end}
.srow:hover .arr{background:var(--carmesi);border-color:var(--carmesi);color:#fff;transform:rotate(45deg)}
@media(max-width:880px){
  .srow{grid-template-columns:44px 1fr 44px;grid-template-areas:'n t a' '. p .';padding:28px 4px}
  .srow .n{grid-area:n}.srow h3{grid-area:t}.srow .arr{grid-area:a;width:36px;height:36px}
  .srow p{grid-area:p;margin-top:8px}
}

/* Método — ídem: translúcido sobre el éter */
.met{background:linear-gradient(180deg,rgba(32,11,10,0),rgba(32,11,10,.5) 50%,rgba(32,11,10,0))}
.met .glow{width:560px;height:560px;background:var(--carmesi-lo);top:35%;right:-220px;animation-delay:-3s}
.met-grid{position:relative;margin-top:80px;padding-left:56px}
.mline{position:absolute;left:14px;top:6px;bottom:6px;width:2px;background:linear-gradient(180deg,var(--carmesi),var(--brasa));transform-origin:top;transform:scaleY(0)}
.mdot{position:absolute;left:8px;width:14px;height:14px;border-radius:50%;background:var(--abisal);border:2px solid var(--carmesi);box-shadow:0 0 14px rgba(178,36,35,.55)}
.mstep{position:relative;padding:0 0 74px}
.mstep:last-child{padding-bottom:0}
.mstep .num{font-family:var(--disp);color:var(--ambar);font-size:14px;letter-spacing:.16em}
.mstep h3{font-family:var(--disp);text-transform:uppercase;font-size:clamp(22px,3.4vw,36px);margin:10px 0 10px;line-height:1.02}
.mstep p{color:var(--muted);max-width:560px;font-size:15.5px}

/* Data con alma */
.data-head{display:flex;align-items:flex-end;justify-content:space-between;gap:30px;flex-wrap:wrap}
.ekg{margin-top:70px;border:1px solid var(--line);border-radius:22px;padding:8px;background:rgba(247,242,241,.02)}
.ekg-in{border-radius:15px;background:linear-gradient(165deg,#120504,#0A0302);padding:30px 34px;box-shadow:inset 0 1px 1px rgba(247,242,241,.05);position:relative;overflow:hidden}
.ekg-in .tag{font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--muted)}
.ekg svg{width:100%;height:120px;display:block;margin-top:10px}
.ekg path{stroke:var(--carmesi);stroke-width:2;fill:none;filter:drop-shadow(0 0 6px rgba(178,36,35,.7))}
/* el barrido del EKG lo maneja main.js con el largo real del path */
.signals{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:14px}
.sig{border:1px solid var(--line);border-radius:22px;padding:8px;background:rgba(247,242,241,.02);transition:border-color .5s var(--ease)}
.sig:hover{border-color:rgba(178,36,35,.5)}
.sig-in{border-radius:15px;background:linear-gradient(165deg,#150605,#0A0302);padding:26px 24px;height:100%;box-shadow:inset 0 1px 1px rgba(247,242,241,.05)}
.sig .v{font-family:var(--disp);font-size:clamp(28px,3.4vw,44px);color:var(--humo)}
.sig .v .accent{font-size:.6em}
.sig .k{font-size:10.5px;letter-spacing:.26em;text-transform:uppercase;color:var(--carmesi);margin-top:6px;font-weight:700}
.sig p{font-size:13.5px;color:var(--muted);margin-top:12px;line-height:1.5}
.sig svg{width:100%;height:34px;margin-top:16px}
.sig svg path{stroke:var(--brasa);stroke-width:1.6;fill:none}
.sig svg path.hi{stroke:var(--carmesi);stroke-dasharray:300;stroke-dashoffset:300}
.sig.in svg path.hi{animation:sigdraw 1.6s var(--ease) forwards}
@keyframes sigdraw{to{stroke-dashoffset:0}}
@media(max-width:980px){ .signals{grid-template-columns:1fr 1fr} }
@media(max-width:560px){ .signals{grid-template-columns:1fr} }

/* Universos */
.uni-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:70px}
.uni{display:block;border:1px solid var(--line);border-radius:26px;padding:8px;background:rgba(247,242,241,.02);
  transition:border-color .5s var(--ease),transform .6s var(--ease)}
.uni:hover{border-color:rgba(178,36,35,.5);transform:translateY(-6px)}
.uni-in{border-radius:19px;overflow:hidden;background:#0A0302;box-shadow:inset 0 1px 1px rgba(247,242,241,.05)}
.uni-vis{position:relative;height:250px;overflow:hidden}
.uni-vis .vv{position:absolute;inset:0;transition:transform 1s var(--ease)}
.uni:hover .uni-vis .vv{transform:scale(1.07)}
.v1{background:radial-gradient(120% 90% at 30% 75%,var(--brasa),transparent 55%),radial-gradient(90% 70% at 78% 20%,rgba(178,36,35,.4),transparent 60%),#120504}
.v2{background:linear-gradient(200deg,#1a0a08 0%,#0A0302 60%),radial-gradient(70% 120% at 80% 100%,rgba(178,36,35,.3),transparent 55%)}
.v3{background:radial-gradient(60% 60% at 50% 42%,rgba(178,36,35,.45),transparent 62%),#0F0403}
.uni-vis svg{position:absolute;inset:0;width:100%;height:100%}
.uni-vis svg *{vector-effect:non-scaling-stroke}
.uni-body{padding:24px 26px 28px}
.uni-body .n{font-size:10.5px;letter-spacing:.28em;text-transform:uppercase;color:var(--ambar);font-weight:700}
.uni-body h3{font-family:var(--disp);text-transform:uppercase;font-size:20px;margin:10px 0 6px;line-height:1.1}
.uni-body p{font-size:13.5px;color:var(--muted)}
@media(max-width:880px){ .uni-grid{grid-template-columns:1fr} .uni-vis{height:200px} }

/* CTA final — sin selección de texto: los clicks son para jugar */
.cta{min-height:92dvh;display:flex;align-items:center;text-align:center;overflow:hidden;
  user-select:none;-webkit-user-select:none}
.cta .glow{width:680px;height:680px;background:var(--carmesi-lo);top:50%;left:50%;transform:translate(-50%,-50%)}
.cta-star{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(64vw,560px);opacity:.16;z-index:0;animation:beatslow 4.5s ease-in-out infinite}
@keyframes beatslow{0%,100%{transform:translate(-50%,-50%) scale(.97)}50%{transform:translate(-50%,-50%) scale(1.04)}}
/* Pileta de destellos: debajo del contenido, nunca bloquea clicks */
#pool{position:absolute;inset:0;z-index:1;pointer-events:none}

/* Contraste del CTA sobre la pileta: halo oscuro detrás del contenido */
.cta-in{background:radial-gradient(60% 62% at 50% 45%, rgba(5,1,0,.88) 0%, rgba(5,1,0,.55) 52%, rgba(5,1,0,0) 78%);padding:70px 0}
.cta h2{text-shadow:0 4px 44px rgba(5,1,0,.95), 0 1px 10px rgba(5,1,0,.8)}
.cta .contact-row a, .cta p{text-shadow:0 2px 14px rgba(5,1,0,.9)}
.cta .btn-primary{box-shadow:0 10px 40px rgba(5,1,0,.55), 0 0 0 1px rgba(247,242,241,.06)}

/* ===== LA INTRO (mundo blanco tipo Pixar, intro3d.js) ===== */
#intro{position:fixed;inset:0;width:100%;height:100%;z-index:400;display:block}
#intro-skip{position:fixed;right:26px;bottom:24px;z-index:401;cursor:pointer;
  font-family:var(--sans);font-weight:700;font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  color:#6E6664;background:none;border:1px solid rgba(50,45,43,.25);border-radius:999px;padding:9px 18px;
  transition:color .3s,border-color .3s}
#intro-skip:hover{color:#322D2B;border-color:#322D2B}
html.introing{overflow:hidden}
html.introing #intro-skip{color:#8f8a86;border-color:rgba(180,172,166,.4)}

/* botón de sonido del universo (audio.js) */
#sound-toggle{position:fixed;left:24px;bottom:22px;z-index:96;cursor:pointer;
  width:42px;height:42px;border-radius:50%;font-size:16px;line-height:1;
  background:rgba(10,4,2,.5);border:1px solid var(--line-hi);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  transition:border-color .3s,transform .3s}
#sound-toggle:hover{border-color:var(--carmesi);transform:scale(1.08)}

/* La mascota: canvas chico que se mueve por el viewport.
   z 95: vuela por ENCIMA del sector Webs (misma mascota en todo el universo) */
#mascot{position:fixed;left:0;top:0;width:190px;height:190px;z-index:95;pointer-events:none;opacity:1;transition:opacity .5s var(--ease)}
@media(max-width:768px){ #mascot{width:150px;height:150px} }
.cta-in{position:relative;z-index:2;width:100%}
.cta h2{font-size:clamp(40px,7.6vw,108px)}
.cta .btn{margin-top:46px}
.contact-row{display:flex;gap:26px;justify-content:center;margin-top:30px;flex-wrap:wrap;font-size:14px;color:var(--muted)}
.contact-row a{color:var(--humo);border-bottom:1px solid var(--carmesi);padding-bottom:2px;transition:color .3s}
.contact-row a:hover{color:var(--carmesi)}

/* Footer */
footer{border-top:1px solid var(--line);padding:52px 0 46px}
.foot{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap}
.foot img{height:23px;opacity:.92}
.foot .mid{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.foot .fine{font-size:11.5px;color:#6E6664;letter-spacing:.06em}
.foot a:hover{color:var(--carmesi)}
@media(max-width:760px){ .foot{flex-direction:column;text-align:center} }

/* ---------- 5 · PERFORMANCE MOBILE + ACCESIBILIDAD ---------- */

/* En mobile los blurs gigantes son caros: glows más chicos y sin respiración */
@media(max-width:768px){
  .glow{filter:blur(70px);animation:none;opacity:.85}
  .grain{opacity:.04}
}

/* Fallback si no carga GSAP: todo visible, nada roto */
html.no-gsap .li{transform:none}
html.no-gsap .fade{opacity:1;transform:none}
html.no-gsap .mline{transform:scaleY(1)}

@media(prefers-reduced-motion:reduce){
  .li{transform:none}.fade{opacity:1;transform:none}.mline{transform:scaleY(1)}
  .glow,#loader svg,.cta-star,.eyebrow::before{animation:none}
}