/* ================================================================
   HYC — Hero inmersivo + Menú HUD  (sobrescribe estilos base)
   Solo afecta al HERO y al MENÚ. Sin humo: luz, energía, HUD.
   ================================================================ */

/* ============================== NAV ============================== */
.nav{
  background:linear-gradient(180deg, rgba(4,11,24,.72), rgba(4,11,24,.42));
  border-bottom:1px solid rgba(0,200,255,.10);
  overflow:visible;
}
.nav::before{ /* hairline de energía superior */
  content:"";position:absolute;inset:0 0 auto;height:1px;
  background:linear-gradient(90deg,transparent,rgba(0,200,255,.5),rgba(124,58,237,.4),transparent);
  opacity:.6;
}
.nav.scrolled{
  background:rgba(3,9,20,.92);
  border-bottom-color:rgba(0,200,255,.16);
  box-shadow:0 10px 40px rgba(0,0,0,.55), 0 1px 0 rgba(0,200,255,.08);
}
/* barra de escaneo que recorre el borde inferior */
.nav-scan{
  position:absolute;left:0;bottom:-1px;height:2px;width:120px;
  background:linear-gradient(90deg,transparent,var(--cy),transparent);
  filter:blur(.5px);
  opacity:0;
  animation:navScan 6s linear infinite;
  pointer-events:none;
  will-change:transform,opacity;
}
.nav.scrolled .nav-scan{opacity:1;}
@keyframes navScan{
  0%{transform:translateX(-120px);opacity:0;}
  10%{opacity:.9;}
  90%{opacity:.9;}
  100%{transform:translateX(100vw);opacity:0;}
}

/* Brand */
.brand-badge{position:relative;box-shadow:0 0 0 1px rgba(0,200,255,.25),0 0 18px rgba(0,200,255,.35);}
.brand-badge .bb-corner{
  position:absolute;width:6px;height:6px;border:1.5px solid rgba(255,255,255,.85);
}
.bb-tl{top:-3px;left:-3px;border-right:none;border-bottom:none;}
.bb-br{bottom:-3px;right:-3px;border-left:none;border-top:none;}
.nav-brand:hover .brand-badge{box-shadow:0 0 0 1px rgba(0,200,255,.45),0 0 26px rgba(0,200,255,.55);}

/* Links con índice y subrayado de energía */
.nl{
  position:relative;display:inline-flex;align-items:center;gap:7px;
  padding:8px 14px;border-radius:8px;overflow:hidden;
  color:var(--ink2);letter-spacing:.01em;
}
.nl-idx{
  font-family:var(--mono);font-size:10px;font-weight:500;
  color:var(--cy);opacity:.35;transition:opacity var(--tr),transform var(--tr);
}
.nl-txt{position:relative;z-index:1;}
.nl::after{ /* línea de energía */
  content:"";position:absolute;left:14px;right:14px;bottom:5px;height:1.5px;
  background:linear-gradient(90deg,var(--cy),var(--pk));
  transform:scaleX(0);transform-origin:left;border-radius:2px;
  transition:transform .35s cubic-bezier(.4,0,.2,1);
}
.nl:hover,.nl.active{color:var(--ink);background:rgba(0,200,255,.06);}
.nl:hover .nl-idx,.nl.active .nl-idx{opacity:.95;transform:translateY(-1px);}
.nl:hover::after,.nl.active::after{transform:scaleX(1);box-shadow:0 0 10px rgba(0,200,255,.5);}

/* Status pill */
.nav-status{
  display:inline-flex;align-items:center;gap:7px;
  font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.06em;
  color:var(--ink2);
  padding:5px 11px;border-radius:var(--rF);
  border:1px solid rgba(0,224,118,.28);
  background:rgba(0,224,118,.06);
}
.ns-dot{width:7px;height:7px;border-radius:50%;background:var(--gr);
  box-shadow:0 0 8px var(--gr);animation:nsPulse 2s infinite;will-change:transform,opacity;}
@keyframes nsPulse{0%,100%{transform:scale(1);opacity:1;}50%{transform:scale(1.7);opacity:.4;}}

/* WhatsApp con barrido */
.btn-wa-nav{position:relative;overflow:hidden;}
.wa-sweep{position:absolute;inset:0;transform:translateX(-120%);
  background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.4) 50%,transparent 70%);}
.btn-wa-nav:hover .wa-sweep{animation:waSweep .7s ease;}
@keyframes waSweep{to{transform:translateX(120%);}}

/* Línea de progreso de scroll bajo la nav */
.nav-progress{
  position:absolute;left:0;bottom:-1px;height:2px;width:100%;
  background:linear-gradient(90deg,var(--cy),var(--pk));
  box-shadow:0 0 12px rgba(0,200,255,.6);
  transform:scaleX(0);
  transform-origin:left;
  z-index:5;
  will-change:transform;
}

/* Drawer HUD */
.nav-drawer{background:rgba(3,9,20,.97);border-left:1px solid rgba(0,200,255,.14);}
.nd-head{font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink3);padding:4px 16px 14px;border-bottom:1px solid var(--border);margin-bottom:8px;}
.nd-link{display:flex;align-items:center;gap:12px;}
.nd-idx{font-family:var(--mono);font-size:12px;color:var(--cy);opacity:.5;}
.nd-link:hover{background:rgba(0,200,255,.07);}
.nd-link:hover .nd-idx{opacity:1;}

/* ============================== HERO ============================== */
.hero-immersive{
  background:#020611;
  isolation:isolate;
}
#hero-pixi{
  position:absolute;inset:0;width:100%;height:100%;
  z-index:0;display:block;
}
/* Bloom central (luz fría, screen) */
.hero-bloom{
  position:absolute;z-index:1;pointer-events:none;
  width:75vw;height:75vw;max-width:900px;max-height:900px;
  top:44%;left:62%;transform:translate(-50%,-50%);
  background:radial-gradient(circle, rgba(40,130,255,.22), rgba(0,120,255,.08) 38%, transparent 66%);
  mix-blend-mode:screen;filter:blur(8px);
  animation:bloomPulse 6.5s ease-in-out infinite;
}
@keyframes bloomPulse{0%,100%{opacity:.75;transform:translate(-50%,-50%) scale(1);}50%{opacity:1;transform:translate(-50%,-50%) scale(1.06);}}

/* Scrim izquierdo para legibilidad del texto */
.hero-leftscrim{
  position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(95deg, rgba(2,6,17,.92) 0%, rgba(2,6,17,.78) 26%, rgba(2,6,17,.30) 48%, transparent 66%);
}
.hero-vignette{
  position:absolute;inset:0;z-index:3;pointer-events:none;
  background:radial-gradient(120% 120% at 50% 42%, transparent 55%, rgba(0,0,0,.55) 100%);
}
.hero-immersive .hero-scanlines{z-index:3;opacity:.6;}

/* Telemetría HUD */
.hero-hud{position:absolute;inset:0;z-index:4;pointer-events:none;
  font-family:var(--mono);font-size:11px;letter-spacing:.05em;color:rgba(120,190,255,.55);}
.hud-read{position:absolute;display:flex;flex-direction:column;gap:6px;}
.hud-tr{top:calc(var(--nav-h) + 30px);right:34px;text-align:right;align-items:flex-end;}
.hud-br{bottom:120px;right:34px;text-align:right;align-items:flex-end;}
.hr-line{display:flex;gap:8px;align-items:center;white-space:nowrap;}
.hud-read .hr-line{justify-content:flex-end;}
.hr-k{color:var(--cy);opacity:.8;font-weight:600;}
.hr-on{color:var(--gr);font-weight:600;animation:hudBlink 2.4s steps(1) infinite;}
@keyframes hudBlink{0%,70%{opacity:1;}71%,80%{opacity:.25;}81%,100%{opacity:1;}}
.hr-bar{position:relative;width:120px;height:3px;border-radius:2px;background:rgba(0,200,255,.12);overflow:hidden;}
.hr-bar i{position:absolute;top:0;left:0;bottom:0;width:40%;border-radius:2px;
  background:linear-gradient(90deg,var(--cy),var(--pk));animation:hudBar 3.2s ease-in-out infinite;
  will-change:transform;}
@keyframes hudBar{0%{transform:translateX(-100%);}100%{transform:translateX(250%);}}

/* Contenido por encima */
.hero-immersive .hero-container{z-index:5;}
.hero-immersive .hero-title{text-shadow:0 2px 40px rgba(0,0,0,.6);}
.hero-immersive .ht-c1{text-shadow:0 0 34px rgba(0,200,255,.55);}
.hero-immersive .ht-c2{text-shadow:0 0 34px rgba(124,58,237,.5);}
.hero-immersive .hero-sub{text-shadow:0 1px 20px rgba(0,0,0,.6);}
.hero-immersive .scroll-hint{z-index:5;}

/* entrada de texto controlada por JS (oculto hasta animar) */
.hero-immersive.is-ready .hero-container{}

/* Responsive */
@media (max-width:1080px){
  .nav-status{display:none;}
  .nl-idx{display:none;}
  .nl{padding:8px 11px;gap:0;}
  .nl::after{left:11px;right:11px;}
}
@media (max-width:900px){
  .hud-tr,.hud-br{display:none;}
}
@media (max-width:768px){
  .hero-leftscrim{background:linear-gradient(180deg, rgba(2,6,17,.55) 0%, rgba(2,6,17,.30) 40%, rgba(2,6,17,.75) 100%);}
  .hud-read{display:none;}
  .wa-label{display:none;}
  .btn-wa-nav{padding:8px 12px;}
}
@media (prefers-reduced-motion:reduce){
  .nav-scan,.hero-bloom,.hr-on,.hr-bar i,.ns-dot{animation:none;}
}