/* =============================================================
   VARIABLES CSS — VIDA Xport
   Tokens de diseño globales (custom properties).

   ZONAS EDITABLES POR VICTOR:
     · Sección 1 (paleta): solo si cambia el logo o la marca.
     · Sección 2 (tipografía): si decide cambiar de Inter a otra fuente.
   El resto son tokens de sistema, no tocar sin coordinación.
   ============================================================= */

:root {

  /* ============================================================
     1. PALETA DE COLORES
     Extraída del logotipo VIDA Xport (brief §4.2). Editable.
     ============================================================ */
  --color-primary-dark:    #1B2A4E;   /* Azul marino profundo (D del logo)   */
  --color-primary:         #2B4C8C;   /* Azul corporativo medio              */
  --color-accent:          #4A90D9;   /* Azul claro vibrante (V del logo)    */
  --color-accent-light:    #7FB3E6;   /* Azul claro suave                    */
  --color-neutral-dark:    #1A1A1A;   /* Texto principal                     */
  --color-neutral-medium:  #4A5568;   /* Texto secundario                    */
  --color-neutral-light:   #E2E8F0;   /* Bordes y separadores                */
  --color-background:      #FFFFFF;   /* Fondo principal                     */
  --color-background-alt:  #F7FAFC;   /* Fondo de secciones alternas         */

  /* Estados de UI (derivados, no editar sin revisar contraste) */
  --color-success: #2F855A;
  --color-warning: #C05621;
  --color-error:   #C53030;


  /* ============================================================
     2. TIPOGRAFÍA
     Familia: Inter (Google Fonts), peso 400/500/600/700.
     Tamaños fluidos con clamp(min, preferido, max).
     ============================================================ */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI',
               Roboto, Helvetica, Arial, sans-serif;

  /* Escala tipográfica responsiva */
  --fs-xs:   clamp(0.75rem, 0.70rem + 0.25vw, 0.875rem);    /* 12 → 14 */
  --fs-sm:   clamp(0.875rem, 0.80rem + 0.375vw, 1rem);      /* 14 → 16 */
  --fs-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);       /* 16 → 18 */
  --fs-lg:   clamp(1.125rem, 1.00rem + 0.625vw, 1.25rem);   /* 18 → 20 */
  --fs-xl:   clamp(1.25rem, 1.10rem + 0.75vw, 1.5rem);      /* 20 → 24 */
  --fs-2xl:  clamp(1.5rem, 1.30rem + 1vw, 2rem);            /* 24 → 32 */
  --fs-3xl:  clamp(1.875rem, 1.50rem + 1.875vw, 2.5rem);    /* 30 → 40 */
  --fs-4xl:  clamp(2.25rem, 1.75rem + 2.5vw, 3.5rem);       /* 36 → 56 */

  /* Pesos */
  --fw-normal:   400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  /* Alturas de línea */
  --lh-tight:   1.2;
  --lh-snug:    1.4;
  --lh-normal:  1.6;
  --lh-loose:   1.8;


  /* ============================================================
     3. ESPACIADO
     Escala armónica para márgenes, padding y gaps.
     ============================================================ */
  --space-1:  0.25rem;   /*   4px */
  --space-2:  0.5rem;    /*   8px */
  --space-3:  0.75rem;   /*  12px */
  --space-4:  1rem;      /*  16px */
  --space-6:  1.5rem;    /*  24px */
  --space-8:  2rem;      /*  32px */
  --space-12: 3rem;      /*  48px */
  --space-16: 4rem;      /*  64px */
  --space-24: 6rem;      /*  96px */
  --space-32: 8rem;      /* 128px */


  /* ============================================================
     4. RADIOS, SOMBRAS, TRANSICIONES
     ============================================================ */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   16px;
  --radius-full: 9999px;

  --shadow-sm:     0 1px 2px rgba(27, 42, 78, 0.06);
  --shadow-md:     0 4px 12px rgba(27, 42, 78, 0.08);
  --shadow-lg:     0 12px 32px rgba(27, 42, 78, 0.12);
  --shadow-header: 0 6px 20px rgba(27, 42, 78, 0.18), 0 2px 6px rgba(27, 42, 78, 0.08);  /* doble sombra: profundidad + definición de borde */

  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
  --transition-slow: 400ms ease;


  /* ============================================================
     5. LAYOUT Y Z-INDEX
     ============================================================ */
  --container-max: 1200px;
  --container-px:  var(--space-6);   /* padding lateral del contenedor */
  --header-height: 80px;

  --z-header:   100;
  --z-cookies:  180;
  --z-whatsapp: 150;
  --z-modal:    200;
}


/* =============================================================
   ESTILOS BASE DEL DOCUMENTO
   Aplicación inicial de variables al body. Lo demás vive en main.css.
   ============================================================= */
body {
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  font-weight: var(--fw-normal);
  line-height: var(--lh-normal);
  color: var(--color-neutral-dark);
  background-color: var(--color-background);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  color: var(--color-primary);
  text-decoration: none;
  transition: color var(--transition-fast);
}

a:hover {
  color: var(--color-accent);
}

a:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* Selección de texto en colores de marca */
::selection {
  background-color: var(--color-accent-light);
  color: var(--color-primary-dark);
}