/* ============================================================
   VARIABLES.CSS — Tokens de diseño globales
   Todos los colores, fuentes, espaciados y tamaños
   del proyecto están definidos aquí en un solo lugar.
   Si necesitas cambiar un color, solo cámbialo aquí.
   ============================================================ */

:root {

   /* --------------------------------------------------
     COLORES PRINCIPALES
  -------------------------------------------------- */
   --clr-primary: #1465bb;
   /* Azul principal */
   --clr-primary-dark: #003785;
   /* Azul oscuro */
   --clr-primary-light: #81c9fa;
   /* Azul claro */
   --clr-accent: #2196f3;
   /* Azul acento */

   /* Neutrales */
   --clr-dark: #1e1e1e;
   /* Texto principal / casi negro */
   --clr-dark-hero: #001a4d;
   /* Fondo oscuro del hero */
   --clr-gray-bg: #f5f5f0;
   /* Fondo de secciones alternas */
   --clr-white: #ffffff;
   --clr-text: #444444;
   /* Párrafos */
   --clr-text-light: #777777;
   /* Texto secundario */
   --clr-border: #e0e0d8;
   /* Bordes suaves */

   /* Especiales */
   --clr-whatsapp: #25d366;
   --clr-overlay: rgba(0, 35, 100, 0.80);

   /* --------------------------------------------------
     TIPOGRAFÍAS
  -------------------------------------------------- */
   --font-body: 'Lato', sans-serif;
   --font-heading: 'Lato', sans-serif;

   /* --------------------------------------------------
     ESCALA TIPOGRÁFICA (tipo fluid / modular)
  -------------------------------------------------- */
   --fs-xs: 0.75rem;
   /* 12px */
   --fs-sm: 0.875rem;
   /* 14px */
   --fs-base: 1rem;
   /* 16px */
   --fs-md: 1.125rem;
   /* 18px */
   --fs-lg: 1.25rem;
   /* 20px */
   --fs-xl: 1.5rem;
   /* 24px */
   --fs-2xl: 1.875rem;
   /* 30px */
   --fs-3xl: 2.25rem;
   /* 36px */
   --fs-4xl: 2.75rem;
   /* 44px */
   --fs-5xl: 3.5rem;
   /* 56px */

   /* --------------------------------------------------
     ESPACIADO (escala 4px)
  -------------------------------------------------- */
   --sp-1: 0.25rem;
   /*  4px */
   --sp-2: 0.5rem;
   /*  8px */
   --sp-3: 0.75rem;
   /* 12px */
   --sp-4: 1rem;
   /* 16px */
   --sp-5: 1.25rem;
   /* 20px */
   --sp-6: 1.5rem;
   /* 24px */
   --sp-8: 2rem;
   /* 32px */
   --sp-10: 2.5rem;
   /* 40px */
   --sp-12: 3rem;
   /* 48px */
   --sp-16: 4rem;
   /* 64px */
   --sp-20: 5rem;
   /* 80px */
   --sp-24: 6rem;
   /* 96px */

   /* --------------------------------------------------
     LAYOUT
  -------------------------------------------------- */
   --max-width: 1200px;
   --max-width-narrow: 760px;
   --header-height: 80px;
   --container-pad: clamp(1rem, 5vw, 2rem);

   /* --------------------------------------------------
     BORDES Y RADIOS
  -------------------------------------------------- */
   --radius-sm: 4px;
   --radius-md: 8px;
   --radius-lg: 16px;
   --radius-full: 9999px;

   /* --------------------------------------------------
     SOMBRAS
  -------------------------------------------------- */
   --shadow-sm: 0 1px 4px rgba(0, 0, 0, 0.07), 0 2px 8px rgba(0, 0, 0, 0.05);
   --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.10), 0 2px 4px rgba(0, 0, 0, 0.06);
   --shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.14), 0 4px 8px rgba(0, 0, 0, 0.08);
   --shadow-xl: 0 20px 60px rgba(0, 0, 0, 0.20);

   /* --------------------------------------------------
     TRANSICIONES
  -------------------------------------------------- */
   --ease-default: cubic-bezier(0.4, 0, 0.2, 1);
   --ease-in: cubic-bezier(0.4, 0, 1, 1);
   --ease-out: cubic-bezier(0, 0, 0.2, 1);
   --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);

   --dur-fast: 150ms;
   --dur-base: 300ms;
   --dur-slow: 500ms;

   --transition: var(--dur-base) var(--ease-default);
   --transition-fast: var(--dur-fast) var(--ease-default);
   --transition-slow: var(--dur-slow) var(--ease-default);

   /* --------------------------------------------------
     Z-INDEX STACK
  -------------------------------------------------- */
   --z-below: -1;
   --z-base: 0;
   --z-above: 10;
   --z-sticky: 100;
   --z-fixed: 200;
   --z-overlay: 300;
   --z-modal: 400;
   --z-toast: 500;
}