/* ============================================================
   tokens.css — Sistema de diseño Dr. Leonardo González
   Única fuente de verdad para color, tipografía, espacio,
   radios, sombras y movimiento. Ajustar aquí, no en secciones.
   ============================================================ */

:root {
  /* ---- Color ---- */
  --ink: #101114;
  --ink-soft: #2A2E33;
  --blue-800: #103CAB;
  --blue-700: #164FDF;
  --blue-600: #2468F2;
  --blue-500: #4380FF;
  --blue-200: #B9D2FF;
  --ice-100: #EEF7FC;
  --ice-50: #F7FBFE;
  --white: #FFFFFF;
  --line: #D9E5ED;
  --line-soft: #E9F1F7;
  --muted: #687680;
  --muted-light: #8B99A3;
  --success: #2C8A72;
  --warn: #B4791F;

  /* Sobre fondo azul */
  --on-blue: #FFFFFF;
  --on-blue-soft: rgba(255, 255, 255, .74);
  --on-blue-line: rgba(255, 255, 255, .22);

  /* ---- Tipografía ---- */
  --font-sans: "Manrope", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --fs-display: clamp(3.1rem, 7.6vw, 8.5rem);
  /* Titular del hero dividido: la columna es más estrecha que la página */
  --fs-hero: clamp(2.55rem, 4.9vw, 4.7rem);
  --fs-h1: clamp(2.9rem, 6.6vw, 7.5rem);
  --fs-h2: clamp(2.25rem, 4.9vw, 5.4rem);
  --fs-h3: clamp(1.25rem, 1.6vw, 1.65rem);
  --fs-lead: clamp(1.05rem, 1.35vw, 1.35rem);
  --fs-body: clamp(1rem, 1.05vw, 1.125rem);
  --fs-small: .9375rem;
  --fs-micro: clamp(.72rem, .78vw, .85rem);

  --lh-display: .90;
  --lh-head: .98;
  --lh-body: 1.62;

  --tr-display: -.045em;
  --tr-head: -.032em;
  --tr-title: -.025em;
  --tr-micro: .09em;

  /* ---- Espacio ---- */
  --wrap: 1440px;
  --wrap-narrow: 1080px;
  --pad-x: clamp(20px, 4vw, 72px);
  --pad-section: clamp(56px, 6vw, 96px);
  --pad-section-sm: clamp(40px, 4.4vw, 72px);
  --gap: clamp(14px, 1.5vw, 24px);
  --gap-lg: clamp(20px, 2.4vw, 40px);

  /* ---- Forma ---- */
  --r-xl: clamp(20px, 2.4vw, 36px);
  --r-lg: clamp(18px, 1.9vw, 28px);
  --r-md: 18px;
  --r-sm: 12px;
  --r-pill: 999px;
  --border: 1px solid var(--line);

  /* ---- Sombra ---- */
  --shadow-sm: 0 6px 20px rgba(20, 55, 80, .05);
  --shadow: 0 18px 60px rgba(20, 55, 80, .08);
  --shadow-blue: 0 18px 44px rgba(22, 79, 223, .22);

  /* ---- Movimiento ---- */
  --ease: cubic-bezier(.16, .84, .34, 1);       /* ≈ power3.out */
  --ease-soft: cubic-bezier(.32, .72, .28, 1);
  --dur-fast: .28s;
  --dur: .55s;
  --dur-slow: .85s;

  /* ---- Capas ---- */
  /* La cabecera queda por encima del menú móvil para que el botón de
     cierre siga siendo accesible con el menú abierto. */
  --z-header: 95;
  --z-menu: 90;
  --z-cta: 70;
  --z-badge: 6;
}

/* El sitio está diseñado en claro; se declara para evitar que el
   navegador aplique su propio esquema oscuro a los controles. */
:root { color-scheme: light; }