/* ═══════════════════════════════════════════════════════════════════
   VARIABLES DE DISEÑO — variables.css
   ──────────────────────────────────────────────────────────────────
   PRINCIPIO: Single Responsibility + Dependency Inversion
   Este archivo es la ÚNICA fuente de verdad para el diseño visual.
   Todos los demás archivos CSS dependen de estas variables.

   ► Para cambiar colores del sitio: editar sección "PALETA DE COLORES"
   ► Para cambiar tipografía: editar sección "TIPOGRAFÍA"
   ► Para cambiar espaciados: editar sección "ESPACIADOS"
   ► NO escribir valores de color/fuente directamente en otros archivos
   ═══════════════════════════════════════════════════════════════════ */

:root {

  /* ──────────────────────────────────────────────────────────────
     PALETA DE COLORES PRINCIPAL
     Cambia aquí → se actualiza TODA la página automáticamente
     ────────────────────────────────────────────────────────────── */
  --color-primary:       #0F2B4C;   /* Azul navy  — nav, footer, sección SAINT  */
  --color-primary-lt:    #1A3D6B;   /* Azul navy claro — gradientes               */
  --color-accent:        #1B8C5E;   /* Verde CDP  — botones CTA, íconos, hover    */
  --color-accent-lt:     #24A870;   /* Verde claro — hover de botones             */
  --color-accent-pale:   #E8F5EE;   /* Verde pálido — fondo chips / badges        */
  --color-teal:          #2A9D8F;   /* Teal — gradientes secundarios / CTA        */
  --color-highlight:     #4ADE80;   /* Verde neón — texto destacado fondo oscuro  */

  /* ──────────────────────────────────────────────────────────────
     NEUTROS
     ────────────────────────────────────────────────────────────── */
  --color-white:         #FFFFFF;
  --color-off-white:     #F7F9FC;   /* Fondo de secciones alternas                */
  --color-gray-100:      #F0F2F5;   /* Fondo hover nav links                      */
  --color-gray-200:      #E2E6EC;   /* Bordes de tarjetas e inputs                */
  --color-gray-400:      #9BA3B0;   /* Texto auxiliar / placeholder               */
  --color-gray-600:      #5A6272;   /* Texto de párrafos secundarios              */
  --color-gray-800:      #2D3340;   /* Texto principal del cuerpo                 */

  /* ──────────────────────────────────────────────────────────────
     TIPOGRAFÍA
     Cambiar aquí + actualizar el <link> de Google Fonts en el HTML
     ────────────────────────────────────────────────────────────── */
  --font-body:           'DM Sans', sans-serif;       /* Texto general            */
  --font-heading:        'Playfair Display', serif;   /* Títulos h1, h2, h3       */
  --font-size-base:      16px;
  --line-height-base:    1.6;

  /* ──────────────────────────────────────────────────────────────
     SOMBRAS
     ────────────────────────────────────────────────────────────── */
  --shadow-sm:   0 1px 3px  rgba(15, 43, 76, 0.08);
  --shadow-md:   0 4px 20px rgba(15, 43, 76, 0.10);
  --shadow-lg:   0 12px 40px rgba(15, 43, 76, 0.12);
  --shadow-xl:   0 20px 60px rgba(15, 43, 76, 0.15);

  /* ──────────────────────────────────────────────────────────────
     BORDES REDONDEADOS
     ────────────────────────────────────────────────────────────── */
  --radius:     12px;
  --radius-lg:  20px;
  --radius-xl:  28px;

  /* ──────────────────────────────────────────────────────────────
     ESPACIADOS DE SECCIÓN
     Cambia estos para ajustar el ritmo vertical de toda la página
     ────────────────────────────────────────────────────────────── */
  --section-py:  90px;   /* Padding vertical de secciones                        */
  --section-px:  24px;   /* Padding horizontal de secciones                      */
  --container:   1200px; /* Ancho máximo del contenido                           */
  --gap-grid:    24px;   /* Espacio entre columnas de grillas                    */

  /* ──────────────────────────────────────────────────────────────
     TRANSICIONES
     ────────────────────────────────────────────────────────────── */
  --transition-fast:   all 0.15s ease;
  --transition-base:   all 0.25s ease;
  --transition-slow:   all 0.4s ease;

}