/* ============================================================
   CRW Design System — tokens (colores, tipografía, espaciado).
   Generado en Claude Design e integrado en el tema. Se encola
   ANTES de main.css. Las variables de marca preexistentes del
   tema siguen siendo válidas; aquí se añaden los alias semánticos.
   ============================================================ */
:root {
  /* ---- Marca ---- */
  --cr-navy: #1e3160;
  --cr-navy-700: #182850;
  --cr-navy-900: #0f1b3a;
  --cr-navy-tint: #eef1f7;
  --cr-red: #ff0605;
  --cr-red-700: #d40504;
  --cr-red-tint: #fff4f4;
  --cr-white: #ffffff;

  /* ---- Escala de grises ---- */
  --gray-50: #f6f7f9;
  --gray-100: #eceef2;
  --gray-200: #dde1e8;
  --gray-300: #c3c9d4;
  --gray-400: #9aa2b1;
  --gray-500: #6b7280;
  --gray-700: #3a4150;
  --gray-900: #1a1f2b;

  /* ---- Alias semánticos ---- */
  --surface-page: var(--cr-white);
  --surface-alt: var(--gray-50);
  --surface-card: var(--cr-white);
  --surface-invert: var(--cr-navy);
  --surface-invert-2: var(--cr-navy-900);
  --text-strong: var(--cr-navy);
  --text-body: var(--gray-900);
  --text-muted: var(--gray-500);
  --text-on-dark: var(--cr-white);
  --text-on-dark-muted: #d7dcea;
  --text-accent: var(--cr-red);
  --border: var(--gray-200);
  --border-strong: var(--gray-300);
  --border-invert: rgba(255, 255, 255, .14);
  --action: var(--cr-red);
  --action-hover: var(--cr-red-700);
  --action-navy: var(--cr-navy);
  --action-navy-hover: var(--cr-navy-700);
  --focus-ring: rgba(30, 49, 96, .12);

  /* ---- Tipografía ---- */
  --font-sans: "Segoe UI", system-ui, -apple-system, Roboto, Helvetica, Arial, sans-serif;
  --font: var(--font-sans);
  --font-mono: ui-monospace, Menlo, Consolas, monospace;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-black: 800;
  --fs-display: clamp(2rem, 5vw, 3.1rem);
  --fs-h2: clamp(1.5rem, 3.4vw, 2.1rem);
  --fs-h3: 1.2rem;
  --fs-lead: 1.15rem;
  --fs-body: 1rem;
  --fs-sm: .92rem;
  --fs-xs: .82rem;
  --fs-eyebrow: .78rem;
  --lh-tight: 1.15;
  --lh-snug: 1.3;
  --lh-body: 1.6;
  --ls-display: -.01em;
  --ls-eyebrow: .12em;
  --ls-label: .04em;

  /* ---- Espaciado / radios / sombras / layout ---- */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px;
  --space-12: 48px; --space-14: 56px;
  --radius-sm: 9px;
  --radius: 14px;
  --radius-pill: 999px;
  --shadow: 0 6px 24px rgba(15, 27, 58, .10);
  --shadow-lg: 0 16px 48px rgba(15, 27, 58, .16);
  --maxw: 1180px;
  --header-h: 84px;
  --gutter: 20px;

  /* ---- Motion ---- */
  --ease: ease;
  --dur-fast: .12s;
  --dur: .2s;
  --dur-slow: .25s;
  --lift: translateY(-2px);
}