/* =========================================================================
   WEB72H · TOKENS DE DISEÑO
   -------------------------------------------------------------------------
   Fuente: dirección de arte aprobada en G1 (WEB72H-DIRECTOR-ARTE) y
   retransmitida por WEB72H-CONDUCTOR en el contrato de construcción.
   Paleta: #0A2540 → #2563EB → #0284C7 → blanco, con contraste en gris.
   Tipografía: Plus Jakarta Sans (display) + Inter (texto).

   REGLA: ningún color, espacio, radio, sombra o tipografía se escribe
   "a mano" en styles.css. Todo se consume desde aquí.
   ========================================================================= */

:root {
  /* ---------- Color: marca ---------- */
  --c-ink: #0A2540;          /* azul profundo · títulos, texto principal */
  --c-ink-deep: #0F2F52;     /* variante para hover sobre --c-ink        */
  --c-brand: #2563EB;        /* azul de acción · CTA principal           */
  --c-brand-strong: #1D4ED8; /* hover/activo del CTA                     */
  --c-accent: #0284C7;       /* celeste · acento, foco, grandes títulos  */
  --c-accent-deep: #075985;  /* celeste accesible para texto pequeño     */

  /* ---------- Color: superficie ---------- */
  --c-surface: #FFFFFF;
  --c-canvas: #F5F7FA;       /* franja alterna de fondo                  */
  --c-canvas-alt: #EFF4FA;
  --c-tint: #DBEAFE;         /* relleno suave para chips/badges          */
  --c-tint-cool: #F0F9FF;    /* relleno suave con acento                */

  /* ---------- Color: texto sobre superficie oscura (--c-ink) ----------
     Contrastes verificados: muted 10.48:1 · accent 9.32:1 · link 8.76:1 */
  --c-on-ink: #FFFFFF;
  --c-on-ink-muted: #C7D6E4;
  --c-on-ink-accent: #7DD3FC;
  --c-on-ink-link: #9CC5FF;
  --c-on-ink-dot: #60A5FA;

  /* ---------- Color: texto ---------- */
  --c-text: var(--c-ink);
  --c-text-muted: #5A6B7F;   /* 5.46:1 sobre blanco — AA                */
  --c-text-invert: #FFFFFF;
  --c-text-accent: var(--c-accent-deep); /* 7.56:1 sobre blanco — AA     */

  /* ---------- Color: borde y estado ---------- */
  --c-border: #E3E8EF;
  --c-border-strong: #C9D4E0;
  --c-success: #047857;
  --c-success-strong: #036346;
  --c-success-bg: #ECFDF5;
  --c-error: #B42318;
  --c-error-bg: #FEF3F2;
  --c-warning-bg: #FFFBEB;

  /* ---------- Gradiente de marca ---------- */
  --grad-brand: linear-gradient(135deg, var(--c-ink) 0%, var(--c-brand) 55%, var(--c-accent) 100%);
  --grad-soft: linear-gradient(180deg, var(--c-surface) 0%, var(--c-canvas) 100%);

  /* ---------- Tipografía ---------- */
  --font-display: 'Plus Jakarta Sans', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;

  --fs-300: 0.8125rem;   /* 13px · notas legales                    */
  --fs-400: 0.875rem;    /* 14px · auxiliar                         */
  --fs-500: 1rem;        /* 16px · cuerpo                           */
  --fs-600: 1.125rem;    /* 18px · cuerpo destacado                 */
  --fs-700: 1.25rem;     /* 20px                                    */
  --fs-800: 1.5rem;      /* 24px                                    */
  --fs-900: clamp(2rem, 1.4rem + 3vw, 3.25rem);      /* h1           */
  --fs-h2: clamp(1.5rem, 1.15rem + 1.75vw, 2.25rem); /* h2           */
  --fs-h3: clamp(1.125rem, 1.02rem + 0.5vw, 1.375rem);

  --lh-tight: 1.1;
  --fs-brand: 1.375rem;   /* tamaño del logotipo tipográfico */
  --measure-lede: 36rem;  /* ancho máximo del párrafo de entrada */
  --lh-snug: 1.25;
  --lh-normal: 1.6;
  --lh-relaxed: 1.75;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extrabold: 800;

  --tracking-tight: -0.02em;
  --tracking-eyebrow: 0.12em;

  /* ---------- Espaciado (escala 4) ---------- */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 2.5rem;
  --sp-8: 3rem;
  --sp-9: 4rem;
  --sp-10: 5rem;
  --sp-11: 6rem;

  /* ---------- Layout ---------- */
  --container: 75rem;        /* 1200px */
  --container-narrow: 46rem; /* 736px  · texto legal y lectura          */
  --gutter: var(--sp-4);
  --header-h: 4.5rem;

  /* ---------- Radio ---------- */
  --r-sm: 0.375rem;
  --r-md: 0.625rem;
  --r-lg: 1rem;
  --r-xl: 1.5rem;
  --r-pill: 999px;

  /* ---------- Sombra ---------- */
  --sh-sm: 0 1px 2px rgba(10, 37, 64, 0.06), 0 1px 3px rgba(10, 37, 64, 0.08);
  --sh-md: 0 4px 12px rgba(10, 37, 64, 0.07), 0 2px 4px rgba(10, 37, 64, 0.05);
  --sh-up: 0 -4px 16px rgba(10, 37, 64, 0.10); /* barra de acción inferior */
  --sh-lg: 0 18px 40px rgba(10, 37, 64, 0.12);
  --sh-brand: 0 10px 24px rgba(37, 99, 235, 0.22);

  /* ---------- Movimiento ---------- */
  --ease: cubic-bezier(0.2, 0.6, 0.2, 1);
  --dur-fast: 140ms;
  --dur: 240ms;

  /* ---------- Grosores de borde y medidas táctiles ---------- */
  --bw-1: 1px;
  --bw-2: 2px;
  --size-touch: 44px;   /* área táctil mínima AA */
  --size-check: 24px;   /* casilla de consentimiento */
  --size-input: 48px;   /* alto de campo de formulario */
  --size-btn-lg: 56px;  /* botón grande */
  --size-fab: 52px;     /* botón flotante de WhatsApp */
  --size-badge: 36px;   /* círculo numerado del proceso */
  --size-cta-bar: 76px; /* alto de la barra de acción móvil */
  --map-h: 260px;       /* alto mínimo del mapa */

  /* ---------- Bordes de foco (accesibilidad AA) ---------- */
  --focus-ring: 3px;
  --focus-color: var(--c-accent);
}