/* ============================================================
   SAINEXP — Tokens de marca
   Fuente única de identidad visual. Este archivo se comparte
   (conceptualmente) con el dashboard: cualquier rediseño de
   apps/frontend parte de estos mismos valores.
   Dirección: base oscura disciplinada + firma neón cian→magenta
   dosificada (wordmark, CTA, números clave). Sin cyberpunk literal.
   ============================================================ */

:root {
  /* ---- Color: lienzo ---- */
  --bg: #07090f;            /* fondo profundo azul-negro */
  --bg-raised: #0c1018;     /* superficies (cards) */
  --bg-raised-2: #111623;   /* superficie elevada / hover */
  --border: rgba(151, 168, 200, 0.13);
  --border-strong: rgba(151, 168, 200, 0.22);

  /* ---- Color: texto ---- */
  --text: #eaeef6;
  --text-soft: #b9c2d4;
  --text-muted: #8a94a8;

  /* ---- Color: firma de marca ---- */
  --cyan: #2ee6ff;
  --cyan-deep: #18b9d8;
  --magenta: #ff3dcf;
  --magenta-deep: #d12fae;
  --gradient-brand: linear-gradient(118deg, var(--cyan) 0%, #7a7aff 52%, var(--magenta) 100%);
  --gradient-brand-soft: linear-gradient(118deg, rgba(46, 230, 255, 0.14), rgba(122, 122, 255, 0.10) 52%, rgba(255, 61, 207, 0.14));

  /* ---- Color: semánticos ---- */
  --ok: #3ddc97;
  --whatsapp: #25d366;

  /* ---- Glow (dosificado: CTA, números, hover) ---- */
  --glow-cyan: 0 0 24px rgba(46, 230, 255, 0.18);
  --glow-magenta: 0 0 24px rgba(255, 61, 207, 0.16);
  --glow-cta: 0 8px 30px rgba(46, 230, 255, 0.22), 0 2px 10px rgba(255, 61, 207, 0.18);

  /* ---- Tipografía ----
     Display: Unbounded (geométrica expandida — identidad, no la grotesk de
     siempre). Por ser ancha, rinde con cuerpos CONTENIDOS: el impacto lo pone
     la forma de la letra, no el tamaño. */
  --font-display: "Unbounded", "Instrument Sans", sans-serif;
  --font-body: "Instrument Sans", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;

  /* ---- Escala tipográfica (fluida, moderada) ---- */
  --fs-hero: clamp(1.9rem, 3vw, 3.1rem);
  --fs-h2: clamp(1.35rem, 2.1vw, 2.15rem);
  --fs-h3: clamp(1.05rem, 1.3vw, 1.25rem);
  --fs-body: 1rem;
  --fs-small: 0.88rem;
  --fs-label: 0.75rem;

  /* ---- Geometría ---- */
  --radius: 14px;
  --radius-lg: 22px;
  --radius-pill: 999px;
  /* El contenedor es proporcional a la pantalla (no una caja fija centrada):
     ~93vw en cualquier ancho. La legibilidad interna la gobiernan las grillas
     (auto-fit) y los max-width en `ch`/`rem`, no el contenedor. */
  --container: 93vw;
  --gutter: clamp(20px, 2.2vw, 56px);

  /* ---- Movimiento ---- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --t-fast: 180ms var(--ease-out);
  --t-med: 420ms var(--ease-out);
}