/* ==========================================================================
   MINI UNIVERSO — DESIGN TOKENS
   --------------------------------------------------------------------------
   FUENTE ÚNICA de todo el sistema: color, tipografía, escala, espaciado,
   radios, sombras y motion. Si un valor aparece hardcodeado en un `.html`
   o en un `.js`, es un bug.

   Antes de esta revisión el mismo color se definía en TRES sitios a la vez
   (`tokens.css` en `:root`, `base.css` en `@theme`, y un `tailwind.config`
   inline repetido en las 8 páginas). Cambiar un color exigía tocar diez
   lugares y ninguno mandaba. Ahora manda este archivo.

   Se retiró Tailwind del sitio: las 8 páginas no usaban una sola utilidad
   que no pudiera expresarse aquí, y el CDN (`cdn.tailwindcss.com`, el
   compilador de desarrollo) estaba cargándose en producción en paralelo a
   `@tailwindcss/vite`. Este CSS es CSS: funciona con o sin build.
   ========================================================================== */

:root {
  /* ── Color ─────────────────────────────────────────────────────────────
     Un solo acento. Valores medidos del sitio real de la marca: navy
     profundo con violeta como único color de acción. Salieron del sistema
     el dorado champagne, el dorado metálico, la orquídea y el rosa
     editorial: eran cuatro héroes compitiendo y por eso nada destacaba.

     Prueba del sistema: si tapas el violeta, la página debe seguir
     leyéndose y sintiéndose bien en monocromo.

     Contraste medido sobre --mu-bg (#000B39):
       white 19.4:1 · ivory 14.6:1 · slate 11.7:1 · slate-dim 6.5:1
       accent-soft 4.8:1 (AA) · success 9.9:1 · error 7.1:1
     --mu-accent (#7A40EC) con texto blanco: 5.6:1 (AA texto normal).
     ─────────────────────────────────────────────────────────────────── */
  --mu-bg:            #000B39;  /* piso */
  --mu-bg-elevated:   #001466;  /* wash de sección / footer */
  --mu-surface:       #10184F;  /* tarjeta base */
  --mu-surface-2:     #182060;  /* tarjeta elevada / hover */

  --mu-accent:        #7A40EC;  /* el acento: CTA, foco, borde activo */
  --mu-accent-hover:  #6A33D8;
  --mu-accent-soft:   #9869EE;  /* eyebrow, iconos, texto grande */

  --mu-white:         #FFFFFF;  /* titulares */
  --mu-ivory:         #E2E2E2;  /* titular secundario */
  --mu-slate:         #C7C9E8;  /* cuerpo */
  --mu-slate-dim:     #8F94C2;  /* meta, caption, placeholder */

  --mu-success:       #34D399;
  --mu-error:         #FB7185;

  --mu-border:        rgb(122 64 236 / 0.22);
  --mu-border-strong: rgb(122 64 236 / 0.45);
  --mu-hairline:      rgb(255 255 255 / 0.08);

  /* ── Tipografía ───────────────────────────────────────────────────────
     Una familia. Satoshi es la tipografía real de la marca; en cuanto
     existan los .woff2 en /assets/fonts/ entra sin tocar código. Hasta
     entonces, la pila del sistema. Se retiraron Cormorant Garamond, Inter
     y Manrope: tres familias, un @import bloqueante a Google Fonts y cero
     coherencia entre páginas.
     ─────────────────────────────────────────────────────────────────── */
  --font-display: 'Satoshi', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-body:    'Satoshi', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  /* ── Escala tipográfica — una sola para las 8 páginas ─────────────── */
  --text-hero:    clamp(2.5rem, 6vw, 5rem);
  --text-h1:      clamp(2rem, 4.5vw, 3.25rem);
  --text-h2:      clamp(1.75rem, 3.5vw, 2.5rem);
  --text-h3:      clamp(1.1875rem, 1.8vw, 1.4375rem);
  --text-lede:    clamp(1.0625rem, 1.6vw, 1.25rem);
  --text-body:    1rem;
  --text-sm:      0.9375rem;
  --text-meta:    0.8125rem;
  --text-eyebrow: 0.6875rem;

  --leading-display: 1.1;
  --leading-snug:    1.3;
  --leading-body:    1.6;

  --tracking-display: -0.02em;
  --tracking-eyebrow: 0.11em;

  --measure:        68ch;
  --measure-narrow: 54ch;

  /* ── Espaciado ────────────────────────────────────────────────────── */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;

  /* Tres ritmos de sección, no cinco. */
  --section-y:       clamp(3.5rem, 8vw, 7rem);
  --section-y-tight: clamp(2.5rem, 5vw, 4rem);
  --section-y-hero:  clamp(4rem, 10vw, 8.5rem);

  --header-h: 4.5rem;

  /* ── Radios ───────────────────────────────────────────────────────── */
  --radius-sm:   12px;
  --radius-md:   16px;
  --radius-lg:   24px;   /* radio medido de botón / tarjeta en la marca real */
  --radius-pill: 9999px;

  /* ── Sombras — dos ────────────────────────────────────────────────── */
  --shadow-card: 0 8px 32px rgb(0 0 0 / 0.35);
  --shadow-ring: 0 0 0 3px rgb(122 64 236 / 0.55);

  /* ── Motion — una curva, dos duraciones. Nada rebota. ─────────────── */
  --ease:     cubic-bezier(0.4, 0, 0.2, 1);
  --dur:      200ms;
  --dur-slow: 320ms;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur:      1ms;
    --dur-slow: 1ms;
  }
}