/*
 * Identidad visual y escala del sistema.
 * El resto de hojas solo consume estas variables.
 */
:root {
  /* Azul marino y verde tomados del logotipo (Senior / Movilidad). */
  --color-navy: #01316a;
  --color-blue: #145a96;
  --color-blue-soft: #e4eef6;
  --color-blue-light: #c5dced;
  --color-green: #16813b;
  --color-whatsapp: #25d366;
  --color-white: #ffffff;
  --color-text: #4b5563;
  --color-ink: #111827;

  /* Variantes calculadas a mano (sin color-mix) para que funcionen también en navegadores antiguos.
     Todas las parejas texto/fondo de la página superan WCAG AA (4.5:1 en texto, 3:1 en bordes de campo). */
  --color-blue-hover: #0f4a7c;
  --color-green-hover: #116c32;
  --color-whatsapp-hover: #51dc85;
  --color-green-soft: #d8f0e1;
  --color-green-tint: #eef8f2;
  --color-green-line: #8ecfad;
  --color-navy-line: #b7c6d6;
  --color-blue-line: #b5c9dc;
  --color-placeholder: #6b7280;
  --color-danger-ring: #f0cdcd;
  --color-white-84: rgb(255 255 255 / 0.84);
  --color-white-88: rgb(255 255 255 / 0.88);

  --color-on-green: #08301a;
  --color-whatsapp-ink: #064e3b;
  --color-focus: #01316a;
  --color-field-border: #8791a1;
  --color-danger: #b91c1c;
  --color-danger-soft: #fef2f2;
  --color-success-ink: #065f46;
  --color-line: #e5e7eb;
  --color-surface: #ffffff;
  --color-canvas: #ffffff;
  --color-tint: #f4f8fb;
  --color-tint-strong: #e7f0f7;

  --font-display: "Poppins", "Segoe UI", sans-serif;
  --font-body: "Inter", "Segoe UI", sans-serif;

  /* Escala tipográfica fluida: de 320 px a pantallas grandes. */
  --text-xs: 0.8125rem;
  --text-sm: 0.9375rem;
  --text-base: 1rem;
  --text-lg: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
  --text-xl: clamp(1.1875rem, 1.1rem + 0.4vw, 1.375rem);
  --text-2xl: clamp(1.625rem, 1.2rem + 1.7vw, 2.375rem);
  --text-hero: clamp(2.125rem, 1.45rem + 3vw, 3.625rem);

  --leading-tight: 1.2;
  --leading-body: 1.65;

  --space-2xs: 0.25rem;
  --space-xs: 0.5rem;
  --space-sm: 0.75rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: clamp(3.25rem, 2.2rem + 4.5vw, 6rem);

  --radius-sm: 0.5rem;
  --radius-md: 0.875rem;
  --radius-lg: 1.25rem;
  --radius-xl: 1.75rem;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgb(17 24 39 / 0.05);
  --shadow-nav: 0 1px 3px rgb(17 24 39 / 0.06);
  --shadow-md: 0 10px 28px rgb(1 49 106 / 0.08);
  --shadow-lg: 0 20px 48px rgb(1 49 106 / 0.14);

  --header-height: clamp(6.6rem, 5.8rem + 2.5vw, 7.6rem);
  --container: min(72rem, calc(100% - clamp(1.25rem, 5vw, 4rem) * 2));
  --measure: 40rem;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --duration: 180ms;
}