/*!
 * gx-design.css — GROWX "NEURAL HUD" visual language (v1)
 * Capa estética compartida: se carga DESPUÉS del CSS propio de cada página y
 * eleva el look a HUD aeroespacial / red neuronal viva, sin tocar el markup.
 * Tokens base: teal #00C2C7 · blue #00A9D6 · green #65C84F · dark #071014
 */
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700&display=swap');

@property --gxc{syntax:'<color>';inherits:false;initial-value:rgba(0,194,199,.22)}

:root{
  --gx-mono:'JetBrains Mono',ui-monospace,Consolas,monospace;
  --gx-hud:rgba(0,194,199,.55);
  --gx-hud-dim:rgba(0,194,199,.22);
  --gx-glass:linear-gradient(165deg,rgba(16,35,42,.72),rgba(7,16,20,.82));
  --gx-glow:0 0 22px rgba(0,194,199,.16);
}

/* ── Texturas globales: scanlines + vignette (estáticas = gratis en GPU) ── */
html::after{
  content:'';position:fixed;inset:0;z-index:2;pointer-events:none;
  background:
    repeating-linear-gradient(0deg,rgba(255,255,255,.014) 0 1px,transparent 1px 4px),
    radial-gradient(120% 90% at 50% 8%,transparent 55%,rgba(2,8,11,.5) 100%);
  mix-blend-mode:overlay;
}
::selection{background:rgba(0,194,199,.32);color:#EAF6F8}
::-webkit-scrollbar{width:9px;background:#071014}
::-webkit-scrollbar-thumb{background:linear-gradient(#00A9D6,#00C2C7,#65C84F);border-radius:99px;border:2px solid #071014}

/* ── Eyebrow / section label → telemetría HUD ── */
.slbl{
  font-family:var(--gx-mono)!important;
  font-size:10.5px!important;letter-spacing:.32em!important;
  display:inline-flex;align-items:center;gap:10px;
  color:#3fe0e5!important;
}
.slbl::before{
  content:'';width:7px;height:7px;flex:0 0 auto;border-radius:50%;
  background:var(--teal,#00C2C7);
  box-shadow:0 0 0 3px rgba(0,194,199,.18),0 0 12px rgba(0,194,199,.8);
  animation:gx-ping 2.6s ease-in-out infinite;
}
.slbl::after{
  content:'';width:42px;height:1px;flex:0 0 auto;
  background:linear-gradient(90deg,var(--gx-hud),transparent);
}
.center .slbl{justify-content:center}
@keyframes gx-ping{0%,100%{box-shadow:0 0 0 3px rgba(0,194,199,.18),0 0 12px rgba(0,194,199,.8)}50%{box-shadow:0 0 0 6px rgba(0,194,199,.05),0 0 4px rgba(0,194,199,.4)}}

/* ── Titulares: más tensión tipográfica ── */
.stitle,.h1{letter-spacing:-.025em!important}
.grad-text{filter:drop-shadow(0 0 18px rgba(0,194,199,.25))}

/* ── Tarjetas → vidrio + corner brackets HUD (multi-background, sin pseudos) ── */
.mc,.card,.pcard,.ccrd,.team-card,.step,details{
  --gxc:var(--gx-hud-dim);
  background-color:transparent!important;
  background-image:
    linear-gradient(var(--gxc) 0 0),linear-gradient(var(--gxc) 0 0),
    linear-gradient(var(--gxc) 0 0),linear-gradient(var(--gxc) 0 0),
    linear-gradient(var(--gxc) 0 0),linear-gradient(var(--gxc) 0 0),
    linear-gradient(var(--gxc) 0 0),linear-gradient(var(--gxc) 0 0),
    var(--gx-glass)!important;
  background-repeat:no-repeat!important;
  background-size:
    16px 1.5px,1.5px 16px, 16px 1.5px,1.5px 16px,
    16px 1.5px,1.5px 16px, 16px 1.5px,1.5px 16px, 100% 100%!important;
  background-position:
    0 0,0 0, 100% 0,100% 0,
    0 100%,0 100%, 100% 100%,100% 100%, 0 0!important;
  border-radius:10px!important;
  border:1px solid rgba(0,194,199,.14)!important;
  backdrop-filter:blur(10px);
  transition:transform .35s cubic-bezier(.22,1,.36,1),border-color .35s,box-shadow .35s,--gxc .35s;
}
@media(hover:hover){
  .mc:hover,.card:hover,.pcard:hover,.ccrd:hover,.team-card:hover,.step:hover,details:hover,details[open]{
    --gxc:var(--gx-hud);
    border-color:rgba(0,194,199,.42)!important;
    box-shadow:var(--gx-glow),0 24px 60px rgba(0,0,0,.45)!important;
  }
}
/* plan destacado y badges conservan jerarquía */
.pcard.feat,.pop{border-color:rgba(0,194,199,.55)!important;box-shadow:0 0 0 1px rgba(0,194,199,.25),0 0 34px rgba(0,194,199,.14),0 24px 60px rgba(0,0,0,.4)!important}

/* ── FAQ ── */
details{padding:16px 20px}
summary{font-family:'Plus Jakarta Sans',sans-serif}

/* ── Botones: pulso de borde + glow ── */
.btn{border-radius:9px!important;will-change:transform}
.btn-p,.btn-shim,.btn-primary,.nav-cta,.gxn-cta{box-shadow:0 8px 26px rgba(0,194,199,.3),inset 0 0 0 1px rgba(255,255,255,.18)!important}
.btn-o,.btn-outline{position:relative;backdrop-filter:blur(6px)}
@media(hover:hover){
  .btn-o:hover,.btn-outline:hover{box-shadow:0 0 0 1px rgba(0,194,199,.5),0 0 24px rgba(0,194,199,.18)!important}
}

/* ── Métricas / precios en mono-display ── */
.cval,.pamt,.price,.ticker-val{font-variant-numeric:tabular-nums}
.ticker-val{font-family:var(--gx-mono)!important;font-size:15px!important;text-shadow:0 0 14px rgba(0,194,199,.5)}
.ticker{border-top:1px solid rgba(0,194,199,.25)!important;border-bottom:1px solid rgba(0,194,199,.25)!important}

/* ── Beams de datos (inyectados por gx-fx.js): líneas con pulso viajero ── */
#gx-beams{position:fixed;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.gx-beam{position:absolute;top:0;bottom:0;width:1px;background:linear-gradient(180deg,transparent,rgba(0,194,199,.09) 18%,rgba(0,194,199,.09) 82%,transparent)}
.gx-beam i{position:absolute;left:-1px;top:-15%;width:3px;height:90px;border-radius:99px;
  background:linear-gradient(180deg,transparent,#00E5EA,transparent);
  filter:drop-shadow(0 0 6px rgba(0,229,234,.9));
  animation:gx-fall var(--d,9s) linear infinite;animation-delay:var(--dl,0s);will-change:transform}
@keyframes gx-fall{to{transform:translateY(130vh)}}

/* ── Rail de navegación de secciones (índice flagship) ── */
#gx-rail{position:fixed;left:18px;top:50%;transform:translateY(-50%);z-index:50;display:flex;flex-direction:column;gap:14px;pointer-events:none}
#gx-rail span{width:6px;height:6px;border-radius:50%;background:rgba(123,158,171,.35);transition:background .3s,box-shadow .3s,transform .3s}
#gx-rail span.on{background:#00E5EA;box-shadow:0 0 10px rgba(0,229,234,.9);transform:scale(1.35)}

/* ── Hero HUD (clase gx-hero la pone gx-fx.js en la 1ª sección) ── */
.gx-hero{position:relative}
.gx-statusbar{
  display:inline-flex;flex-wrap:wrap;align-items:center;gap:14px;
  font-family:var(--gx-mono);font-size:10px;letter-spacing:.18em;color:#5fa9b3;
  border:1px solid rgba(0,194,199,.2);border-radius:99px;padding:7px 16px;
  background:rgba(7,16,20,.6);backdrop-filter:blur(8px);margin-bottom:22px;
  text-transform:uppercase;white-space:nowrap;
}
.gx-statusbar b{color:#3fe0e5;font-weight:500}
.gx-statusbar .gx-live{width:6px;height:6px;border-radius:50%;background:#65C84F;box-shadow:0 0 8px #65C84F;animation:gx-ping 2s infinite}

/* anillo orbital decorativo (hero index) */
.gx-orbit{position:absolute;border:1px dashed rgba(0,194,199,.22);border-radius:50%;pointer-events:none;animation:gx-spin 60s linear infinite;will-change:transform}
.gx-orbit::before{content:'';position:absolute;top:-4px;left:50%;width:7px;height:7px;border-radius:50%;background:#00E5EA;box-shadow:0 0 12px rgba(0,229,234,.9)}
.gx-orbit.rv{animation-direction:reverse;animation-duration:90s;border-style:solid;border-color:rgba(101,200,79,.14)}
.gx-orbit.rv::before{background:#65C84F;box-shadow:0 0 12px rgba(101,200,79,.9)}
@keyframes gx-spin{to{transform:rotate(360deg)}}

/* watermark vertical de telemetría */
.gx-watermark{
  position:absolute;right:-8px;top:50%;transform:translateY(-50%) rotate(180deg);
  writing-mode:vertical-rl;font-family:var(--gx-mono);font-size:10px;letter-spacing:.55em;
  color:rgba(0,194,199,.28);pointer-events:none;user-select:none;white-space:nowrap;
}

/* chips de telemetría flotantes sobre el mock */
.gx-chip{
  position:absolute;font-family:var(--gx-mono);font-size:9.5px;letter-spacing:.14em;
  color:#9fe8ec;background:rgba(7,16,20,.78);border:1px solid rgba(0,194,199,.35);
  border-radius:6px;padding:6px 10px;backdrop-filter:blur(6px);
  box-shadow:0 0 18px rgba(0,194,199,.12);pointer-events:none;white-space:nowrap;
}
.gx-chip::before{content:'▮ ';color:#65C84F}

/* kinetic type (SplitText) — los chars nacen abajo y desenfocados */
.gx-split-ready{visibility:visible}
.gx-char{display:inline-block;will-change:transform}

/* línea de horizonte / divisor de secciones */
.gx-hr{height:1px;border:0;margin:0;background:linear-gradient(90deg,transparent,rgba(0,194,199,.35),transparent)}

/* nav unificada: glow sutil al estado activo */
#gxnav{border-bottom:1px solid rgba(0,194,199,.28)!important;box-shadow:0 8px 40px rgba(0,194,199,.07)}
#gxnav .gxn-links>a.on,#gxnav .gxn-dd>a.on{box-shadow:inset 0 -2px 0 #00C2C7}

/* ── Responsive / perf gates ── */
@media(max-width:900px){
  #gx-rail{display:none}
  .gx-watermark{display:none}
}
@media(max-width:640px){
  #gx-beams{display:none}
  .gx-orbit{display:none}
  .gx-chip{display:none}
  .gx-sb-x{display:none}
  html::after{background:radial-gradient(120% 90% at 50% 8%,transparent 55%,rgba(2,8,11,.5) 100%)}
  .slbl{letter-spacing:.22em!important}
  .gx-statusbar{font-size:9px;gap:10px;padding:6px 12px;letter-spacing:.12em}
}
@media(prefers-reduced-motion:reduce){
  .gx-beam i,.gx-orbit,.slbl::before{animation:none!important}
  .gx-char{transform:none!important;opacity:1!important;filter:none!important}
}