/* ============================================================
   CICA LIFE — Design Tokens
   Fuente de verdad para todos los valores de diseño.
   No modificar directamente — proponer cambio primero.
   Paleta: Safe® (Manual de Marca v1.0) — ver context/funnel-strategy.md v3.1
   ============================================================ */

:root {

  /* ----------------------------------------------------------
     COLORES MARCA SAFE® (Pantone)
     ---------------------------------------------------------- */
  --color-brand-turquoise:       #1d9e75; /* Pantone 333u — identidad principal */
  --color-brand-turquoise-light: #5dcaa5;
  --color-brand-turquoise-pale:  #e1f5ee; /* Fondos de secciones alternas */
  --color-brand-green-dark:      #0d4a3b; /* Pantone 3305u — hero y cierre oscuro */
  --color-brand-green-mid:       #0f6e56; /* Fondo intermedio / navbar */
  --color-brand-salmon:          #ffb8a0; /* Pantone 745u — acento decorativo */

  /* ----------------------------------------------------------
     COLORES — Conversión (CTA principal)
     ---------------------------------------------------------- */
  --color-primary:        #d85a30; /* Coral profundo — CTA principal */
  --color-primary-hover:  #c04828;
  --color-primary-light:  #faece7; /* Fondo tenue para highlights */
  --color-primary-shadow: rgba(216, 90, 48, 0.28);

  /* ----------------------------------------------------------
     COLORES — Identidad / secundario / acento
     ---------------------------------------------------------- */
  --color-secondary:       #1d9e75; /* Turquesa Safe® — confirmaciones, paso 3 */
  --color-secondary-hover: #17875f;
  --color-accent:          #ba7517; /* Ámbar — badges de urgencia, usar con moderación */
  --color-accent-hover:    #a3650f;

  /* ----------------------------------------------------------
     COLORES — Fondos
     ---------------------------------------------------------- */
  --color-bg:          #ffffff;
  --color-bg-alt:      #f4faf7; /* Fondo alternativo secciones */
  --color-bg-dark:     #0d4a3b; /* Hero / sección de cierre — verde oscuro Safe® */
  --color-bg-dark-mid: #0f6e56; /* Variante intermedia para degradados */

  /* ----------------------------------------------------------
     COLORES — Texto
     ---------------------------------------------------------- */
  --color-text:        #0d2b20; /* Casi negro con tinte verde Safe® */
  --color-text-muted:  #4a7065;
  --color-text-light:  #ffffff;
  --color-text-on-dark: rgba(255, 255, 255, 0.88);

  /* ----------------------------------------------------------
     COLORES — Utilidades
     ---------------------------------------------------------- */
  --color-border:      #c8e6dc;
  --color-border-dark: rgba(255, 255, 255, 0.15);
  --color-success:     #1d9e75;
  --color-trust:       #1d9e75; /* Badges de confianza, paso completado */
  --color-trust-light: #e1f5ee;
  --color-dollar:      #085041; /* Cifras de capital USD */
  --color-urgency:     #ba7517; /* Badges de urgencia — usar con moderación */
  --color-error:       #c0392b;
  --color-overlay:     rgba(13, 74, 59, 0.6); /* Hero con imagen de fondo */

  /* ----------------------------------------------------------
     TIPOGRAFÍA — Familias (Safe®: Comfortaa + Plus Jakarta Sans)
     ---------------------------------------------------------- */
  --font-heading: 'Comfortaa', 'Plus Jakarta Sans', sans-serif;
  --font-body:    'Plus Jakarta Sans', 'Inter', sans-serif;

  /* ----------------------------------------------------------
     TIPOGRAFÍA — Tamaños (mobile-first, escalar con media queries)
     ---------------------------------------------------------- */
  --font-size-h1:         36px; /* → 56px en desktop */
  --font-size-h2:         28px; /* → 38px en desktop */
  --font-size-h3:         22px; /* → 28px en desktop */
  --font-size-body:       18px;
  --font-size-small:      14px;
  --font-size-xsmall:     12px;

  /* Valores explícitos mobile/desktop para componentes que los referencian directamente */
  --font-size-h1-desktop: 56px;
  --font-size-h1-mobile:  36px;
  --font-size-h2-desktop: 38px;
  --font-size-h2-mobile:  28px;

  /* ----------------------------------------------------------
     TIPOGRAFÍA — Pesos
     ---------------------------------------------------------- */
  --font-weight-regular:  400;
  --font-weight-medium:   500;
  --font-weight-bold:     700;
  --font-weight-extrabold:800;

  /* ----------------------------------------------------------
     TIPOGRAFÍA — Altura de línea
     ---------------------------------------------------------- */
  --line-height-heading:  1.1;
  --line-height-body:     1.6;
  --line-height-tight:    1.25;

  /* ----------------------------------------------------------
     ESPACIADO — Sistema de 8 puntos
     ---------------------------------------------------------- */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   20px;
  --space-6:   24px;
  --space-8:   32px;
  --space-10:  40px;
  --space-12:  48px;
  --space-16:  64px;
  --space-20:  80px;
  --space-24:  96px;

  /* ----------------------------------------------------------
     LAYOUT — Contenedores y secciones
     ---------------------------------------------------------- */
  --section-padding-desktop: 96px;
  --section-padding-mobile:  56px;
  --container-max:           1200px;
  --container-reading:       680px; /* Ancho óptimo para bloques de texto */
  --container-padding-x:     24px;  /* Padding lateral en mobile */

  /* ----------------------------------------------------------
     BORDES Y RADIOS
     ---------------------------------------------------------- */
  --border-radius-sm:   4px;
  --border-radius-btn:  8px;
  --border-radius-card: 12px;
  --border-radius-lg:   16px;
  --border-radius-full: 9999px; /* Pills / badges */
  --border-width:       1px;

  /* ----------------------------------------------------------
     SOMBRAS
     ---------------------------------------------------------- */
  --shadow-sm:    0 1px 4px rgba(13, 74, 59, 0.06);
  --shadow-card:  0 2px 12px rgba(13, 74, 59, 0.08);
  --shadow-btn:   0 4px 14px var(--color-primary-shadow);
  --shadow-modal: 0 8px 32px rgba(13, 74, 59, 0.16);

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

  /* ----------------------------------------------------------
     Z-INDEX
     ---------------------------------------------------------- */
  --z-base:      0;
  --z-raised:    10;
  --z-dropdown:  100;
  --z-sticky:    200;
  --z-overlay:   300;
  --z-modal:     400;
  --z-toast:     500;
}

/* ============================================================
   SOBRESCRITURAS DESKTOP
   Ajusta tamaños de fuente para pantallas >= 1024px.
   ============================================================ */
@media (min-width: 1024px) {
  :root {
    --font-size-h1: 56px;
    --font-size-h2: 38px;
    --font-size-h3: 28px;
    --container-padding-x: 40px;
  }
}