/* =========================================
   TOKENS — Paleta, tipografías, espaciamiento
   Clona la estética del index institucional.
   ========================================= */
:root{
  /* ===== Colores base (institucional) ===== */
  --rojo:        #d40000;
  --rojo-osc:    #b70000;
  --amarillo:    #ffcc00;

  --negro:       #0a0a0a;
  --negro-2:     #111213;
  --blanco:      #ffffff;

  --gris-10:     #f9f9f9;
  --gris:        #f4f4f4;
  --gris-90:     #e9e9e9;
  --gris-700:    #555555;
  --gris-800:    #333333;

  /* Mapeo semántico */
  --brand:       var(--rojo);
  --brand-2:     var(--rojo-osc);
  --accent:      var(--amarillo);
  --surface:     #ffffff;
  --surface-2:   #fafafa;
  --surface-3:   #f6f6f6;
  --surface-dark:#0e0e0e;

  --text:        #151515;
  --text-inv:    #ffffff;
  --muted:       var(--gris-700);

  /* ===== Tipografías =====
     Racing SOLO para títulos/acentos (Orbitron).
     Cuerpo en system-ui para legibilidad. */
  --font-heading: "Orbitron", system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, Cantarell, "Noto Sans", sans-serif;
  --font-body:    system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, Cantarell, "Noto Sans", sans-serif;

  /* ===== Escalas tipográficas ===== */
  --fs-xxl: clamp(28px, 5vw, 50px);
  --fs-xl:  clamp(22px, 3.6vw, 32px);
  --fs-lg:  20px;
  --fs-md:  16px;
  --fs-sm:  14px;
  --fs-xs:  12px;

  /* ===== Espaciado y layout ===== */
  --container: min(1200px, 94vw);
  --gap-xxl: 40px;
  --gap-xl:  28px;
  --gap-lg:  20px;
  --gap-md:  14px;
  --gap-sm:  10px;
  --gap-xs:   6px;

  /* ===== Bordes, sombras, transiciones ===== */
  --radius-lg:   16px;
  --radius-md:   12px;
  --radius-sm:    8px;
  --radius-pill: 999px;

  --shadow-sm:  0 2px 0 rgba(0,0,0,.04);
  --shadow-md:  0 6px 16px rgba(0,0,0,.18);
  --shadow-lg:  0 8px 26px rgba(0,0,0,.40);
  --shadow-card:0 6px 18px rgba(0,0,0,.06);

  --ease-fast:  cubic-bezier(.2,.7,.2,1);
  --ease-smooth:cubic-bezier(.22,.61,.36,1);
}

/* ===== Temas rápidos (opcional) ===== */
/* Tema claro (por defecto) */
:root{
  --bg: #ffffff;
  --header-bg: var(--brand);
  --hero-grad-start: var(--negro);
  --hero-grad-end:   var(--negro-2);
  --border: #eeeeee;
}

/* Tema oscuro (si en algún momento lo necesitás)
@media (prefers-color-scheme: dark){
  :root{
    --bg: #0b0b0b;
    --text: #eaeaea;
    --surface: #111;
    --border: #1d1d1d;
  }
}
*/