/*!
 * 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
 */
/* JetBrains Mono self-hosteada. Antes venía por @import a fonts.googleapis.com, que
   es la peor forma de traer una fuente: el navegador tiene que bajar y PARSEAR este
   CSS para recién ahí descubrir el @import, conectar a fonts.googleapis.com (DNS+TCP+
   TLS), bajar otro CSS, y ahí descubrir el woff2 en fonts.gstatic.com (otra conexión
   completa). Tres saltos serializados, todos bloqueando el render, en las 30 páginas
   que cargan este archivo.
   Ahora es UNA sola petición al mismo origen, con caché immutable del server.
   El .woff2 es BYTE-IDÉNTICO al que servía Google (md5 b636a65d…, el mismo archivo
   que ya usaba la home), así que los glifos no cambian ni un píxel.
   Es una fuente VARIABLE (eje wght 400-800), por eso una sola declaración con rango
   cubre los pesos 400/500/700 que usa el sitio sin sintetizar negritas falsas. */
@font-face{
  font-family:'JetBrains Mono';
  font-style:normal;
  font-weight:400 800;
  font-display:swap;
  src:url('/fonts/jetbrainsmono-var-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'JetBrains Mono';
  font-style:normal;
  font-weight:400 800;
  font-display:swap;
  src:url('/fonts/jetbrainsmono-var-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

@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}
}