:root {
  /* === MARCA === */
  --color-azul-rey:             #2a3f88;
  --color-azul-rey-dark:        #0c215b;
  --color-azul-rey-light:       #506cbc;
  --color-azul-rey-muted:       rgba(42, 63, 136, 0.08);
  --color-azul-3:               #729ac1;
  --color-azul-2:               #c2d2e9;
  --color-azul-1:               #e1e7f3;

  /* === ACENTOS === */
  --color-verde-academia:        #2E7D32;
  --color-verde-academia-light:  #4CAF50;
  --color-verde-academia-muted:  rgba(46, 125, 50, 0.08);
  --color-madera:                #C8995A;
  --color-beige-claro:           #F5EFE6;
  --color-marmol:                #FAFAF7;

  /* === NEUTROS === */
  --color-blanco:      #FFFFFF;
  --color-gris-100:    #F4F4F6;
  --color-gris-200:    #E8E9ED;
  --color-gris-300:    #D4D6DB;
  --color-gris-500:    #8A8E99;
  --color-gris-700:    #4A4D55;
  --color-negro:       #0E0E12;

  /* === SEMÁNTICOS === */
  --color-bg:         var(--color-blanco);
  --color-bg-alt:     var(--color-azul-1);
  --color-text:       var(--color-negro);
  --color-text-muted: var(--color-gris-700);
  --color-primary:    var(--color-azul-rey);
  --color-accent:     var(--color-azul-rey-light);
  --color-border:     var(--color-gris-300);
  --color-whatsapp:   #25D366;
  --color-success:    #2E7D32;
  --color-error:      #C62828;

  /* === TIPOGRAFÍA === */
  --font-display: 'Poppins', system-ui, -apple-system, sans-serif;
  --font-body:    'Poppins', system-ui, -apple-system, sans-serif;

  --fs-xs:   0.75rem;
  --fs-sm:   0.875rem;
  --fs-base: 1rem;
  --fs-lg:   1.125rem;
  --fs-xl:   1.25rem;
  --fs-2xl:  1.5rem;
  --fs-3xl:  2rem;
  --fs-4xl:  2.5rem;
  --fs-5xl:  3.25rem;
  --fs-6xl:  4rem;

  --lh-tight:  1.15;
  --lh-normal: 1.55;
  --lh-loose:  1.75;

  --fw-regular: 300;
  --fw-medium:  400;
  --fw-semibold: 600;
  --fw-bold:    700;
  --fw-black:   900;

  /* === ESPACIADO (base 4px) === */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;

  /* === LAYOUT === */
  --container-max: 1240px;
  --container-px:  1.25rem;
  --safe-top:      env(safe-area-inset-top, 0px);
  --safe-bottom:   env(safe-area-inset-bottom, 0px);
  --safe-left:     env(safe-area-inset-left, 0px);
  --safe-right:    env(safe-area-inset-right, 0px);
  --radius-sm:     4px;
  --radius-md:     8px;
  --radius-lg:     16px;
  --radius-xl:     24px;
  --radius-pill:   999px;

  /* === SOMBRAS === */
  --shadow-xs: 0 1px 2px rgba(14, 14, 18, 0.05);
  --shadow-sm: 0 2px 6px rgba(14, 14, 18, 0.07);
  --shadow-md: 0 6px 18px rgba(14, 14, 18, 0.09);
  --shadow-lg: 0 18px 40px rgba(14, 14, 18, 0.12);
  --shadow-premium: 0 24px 60px rgba(42, 63, 136, 0.16);

  /* === TRANSICIONES === */
  --t-fast: 150ms ease;
  --t-base: 250ms cubic-bezier(0.4, 0, 0.2, 1);
  --t-slow: 400ms cubic-bezier(0.4, 0, 0.2, 1);

  /* === Z-INDEX === */
  --z-base:      1;
  --z-elevated:  10;
  --z-nav:       100;
  --z-whatsapp:  90;
  --z-modal:     200;
  --z-overlay:   150;

  /* === NAVBAR === */
  --trustbar-height: 41px;
  --navbar-height: 72px;
  --header-total: calc(var(--trustbar-height) + var(--navbar-height));
}

@media (max-width: 639px) {
  :root {
    --trustbar-height: 34px;
    --navbar-height: 60px;
    --container-px: 1rem;
  }
}

@media (max-width: 380px) {
  :root {
    --container-px: 0.875rem;
  }
}

@media (min-width: 1024px) {
  :root {
    --container-px: 2rem;
  }
}