/* ============================================================
   VECTOR INVESTMENT — DESIGN SYSTEM (single source of truth)
   Dirección: data-first / tech · oscuro + naranja luminoso
   Tipografía: Inter (grotesk) + IBM Plex Mono (datos)
   Aprobado por Luis · 2026-06-22
   ============================================================ */
/* Fuentes AUTO-ALOJADAS (sin transferencia a Google). Descargas: ver ../assets/fonts/_FUENTES_LEEME.md */
@font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;src:url('../assets/fonts/Inter-Variable.woff2') format('woff2');}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url('../assets/fonts/IBMPlexMono-Regular.woff2') format('woff2');}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url('../assets/fonts/IBMPlexMono-Medium.woff2') format('woff2');}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:600;font-display:swap;src:url('../assets/fonts/IBMPlexMono-SemiBold.woff2') format('woff2');}

:root{
  /* — base — */
  --bg:#0A0A0B;          /* lienzo */
  --bg2:#0E0E11;
  --panel:#141418;       /* tarjeta */
  --panel2:#17171C;
  --panel3:#1C1C22;
  --line:rgba(255,255,255,.08);
  --line2:rgba(255,255,255,.14);
  /* — marca — */
  --orange:#F39200;
  --orange-soft:#FFB23E;
  --glow:rgba(243,146,0,.55);
  /* — texto — */
  --text:#F4F4F5;
  --muted:#8A8A93;
  --dim:#5C5C64;
  /* — semánticos — */
  --green:#27D07C;
  --blue:#5B9BFF;
  --danger:#FF6B6B;
  /* — sistema — */
  --radius:10px;
  --radius-lg:16px;
  --shadow:0 24px 60px rgba(0,0,0,.5);
  --t-fast:.18s ease;
  --t-med:.32s cubic-bezier(.2,.7,.2,1);
  --sans:'Inter',system-ui,-apple-system,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,'SF Mono',monospace;
  --max:1240px;
}

/* helpers reutilizables en todas las capas */
.mono{font-family:var(--mono);font-weight:500;letter-spacing:.02em}
.up{text-transform:uppercase;letter-spacing:.16em}
.g-orange{background:linear-gradient(92deg,var(--orange),var(--orange-soft));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.glow-spot{position:absolute;border-radius:50%;pointer-events:none;z-index:0;filter:blur(20px);
  background:radial-gradient(circle,rgba(243,146,0,.14),transparent 65%)}

/* botón base de marca */
.btn{display:inline-flex;align-items:center;gap:8px;padding:13px 22px;border-radius:var(--radius);
  font-family:var(--sans);font-weight:600;font-size:14.5px;cursor:pointer;border:1px solid transparent;
  transition:var(--t-fast);text-decoration:none}
.btn-primary{background:var(--orange);color:#0A0A0B;box-shadow:0 8px 30px rgba(243,146,0,.28)}
.btn-primary:hover{background:var(--orange-soft);transform:translateY(-2px)}
.btn-ghost{border-color:var(--line2);color:var(--text)}
.btn-ghost:hover{border-color:var(--orange);color:var(--orange)}

/* chip "live" / pulso, usado en web y producto */
@keyframes vec-pulse{0%,100%{opacity:1}50%{opacity:.35}}
.live-dot{width:6px;height:6px;border-radius:50%;background:var(--green);
  box-shadow:0 0 8px var(--green);animation:vec-pulse 1.6s infinite;display:inline-block}