/* ══════════ HERO v3 · «La esfera de señales» · BMM Security (17-oct-2026) ══════════
   Composición nueva: titular centrado sobre un globo de puntos a pantalla completa; la consola del agente asoma debajo.
   Carga al final de la cascada. html.gs = GSAP dirige la entrada; sin .gs entra con las transiciones CSS (hero-in). */
.hero3{display:flex;flex-direction:column;justify-content:flex-start;padding:0;min-height:100svh;background:var(--hielo)}
.hero3::after{display:none}
.hero3 .malla[hidden]{display:none}
.esfera{position:absolute;left:0;top:0;width:100%;height:100svh;z-index:0;pointer-events:none}
/* bloque central */
.hero-centro{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;min-height:calc(100svh - 190px);padding:112px 28px 0;max-width:1120px;margin:0 auto}
.hero-centro::before{content:"";position:absolute;inset:8% -8% 6%;background:radial-gradient(ellipse at center,rgba(214,245,255,.92) 22%,rgba(214,245,255,.6) 44%,rgba(214,245,255,0) 66%);z-index:-1;pointer-events:none}
.hero3 .hsub{justify-content:center;margin-bottom:16px}
.hero3 .display{font-size:clamp(48px,7.1vw,102px);line-height:.95;letter-spacing:-.04em;text-wrap:balance;max-width:14ch}
.hero3 .display .l1,.hero3 .display .l2,.hero3 .display .l3{display:block}
.hero3 .display .wd{display:inline-block;white-space:nowrap}
.hero3 .display .ch{display:inline-block;will-change:transform,opacity}
.hero3 .display .l3 .ch{-webkit-text-stroke:1.5px var(--navy);color:transparent}
.hero3 .bajada{max-width:66ch;margin:clamp(16px,2vw,24px) auto 0;font-size:clamp(15px,1.2vw,18px)}
.hero3 .hbtns{justify-content:center;margin-top:24px}
.hero3 .datos{justify-content:center;margin-top:20px}
/* consola del agente: asoma al pie del primer viewport */
.hero-consola{position:relative;z-index:2;display:flex;justify-content:center;padding:clamp(8px,2vh,24px) 0 clamp(40px,6vw,80px)}
.hero3 .h-der{width:min(100%,640px);min-height:0;perspective:1400px;transform:none;opacity:1;transition:none}
.hero3 .tilt{width:100%}
.hero3 .demo{width:100%}
.hero3 .flot{overflow:visible}
.hero3 .flot .ping{position:absolute;inset:-2px;border-radius:inherit;border:1.5px solid var(--cyan);opacity:0;pointer-events:none}
/* la entrada la dirige GSAP: se apagan las transiciones CSS del hero */
.gs .hero3 .hsub,.gs .hero3 .hbtns,.gs .hero3 .datos,.gs .hero3 .rv,.gs .hero3 .w,.gs .hero3 .bajada,.gs .hero3 .datos .dato.rv{transition:none;opacity:1;transform:none}
.gs .hero3 .display .ch{opacity:0}
.gs .hero-grid{animation:none}
/* fallback CSS sin GSAP: el bloque entra escalonado como antes */
@media (max-width:980px){.hero-centro{min-height:calc(100svh - 120px);padding:110px 24px 0}.hero3 .display{font-size:clamp(44px,9.5vw,88px)}}
@media (max-width:560px){.hero-centro{min-height:0;padding:96px 20px 0}.hero3 .display{font-size:clamp(38px,11.5vw,56px);max-width:none}.esfera{height:100svh}.hero3 .flotantes{display:none}.hero-centro::before{inset:0 -10%}}
@media (prefers-reduced-motion:reduce){.esfera{opacity:.7}}
.hero-centro{width:100%;box-sizing:border-box;min-width:0}
.hero-centro>*{max-width:100%;min-width:0}
@media (max-width:560px){.hero3 .dato{white-space:normal;max-width:100%}.hero3 .dato .k{white-space:normal;text-align:left}.hero3 .dato .v{white-space:nowrap}}