/* Design Tokens — C.E.A.P. Premium */
:root {
  /* Colores institucionales */
  --color-white: #FFFFFF;
  --color-bone: #EFEBE0;
  --color-foam: #F7F5EF;
  --color-sky-soft: #CCE2EF;
  --color-sky: #99C2E0;
  --color-sky-deep: #6A9FC4;
  --color-sky-ink: #3E6E95; /* celeste oscurecido, pasa AA sobre claros */
  /* Altura del header: barra principal sola (estado scrolleado) y total
     con la topbar de contacto desplegada (solo tope de página, ≥768px). */
  --header-main: 4.5rem;
  --header-offset: 4.5rem;
  --color-pearl: #DBDCD7;
  --color-mist: #BABEBF;
  --color-dark: #24313A;
  --color-dark-60: rgba(36, 49, 58, 0.66);
  --color-dark-25: rgba(36, 49, 58, 0.25);
  --color-dark-12: rgba(36, 49, 58, 0.12);
  --color-dark-08: rgba(36, 49, 58, 0.08);
  --color-dark-06: rgba(36, 49, 58, 0.06);
  --color-dark-04: rgba(36, 49, 58, 0.04);

  /* Fondos de referencia (usados por secciones y heros de página) */
  --bg-primary: var(--color-white);
  --bg-warm: var(--color-bone);
  --bg-accent: var(--color-sky-soft);

  /* Gradientes */
  --gradient-hero: linear-gradient(170deg, var(--color-white) 0%, var(--color-white) 46%, var(--color-sky-soft) 160%);
  --gradient-section: linear-gradient(180deg, var(--color-white) 0%, var(--color-foam) 100%);
  --gradient-section-reverse: linear-gradient(180deg, var(--color-foam) 0%, var(--color-white) 100%);
  --gradient-accent: linear-gradient(135deg, var(--color-sky-soft) 0%, var(--color-sky) 100%);
  --gradient-dark: linear-gradient(135deg, var(--color-dark) 0%, #1a252d 100%);

  /* Superficies */
  --surface: var(--color-white);
  --surface-bone: var(--color-bone);
  --surface-foam: var(--color-foam);

  /* Textos */
  --text-primary: var(--color-dark);
  --text-secondary: var(--color-dark-60);
  --text-muted: #6C7377;
  --text-on-dark: var(--color-white);

  /* Tipografía */
  --font-display: 'Frank Ruhl Libre', Georgia, 'Times New Roman', serif;
  --font-body: 'Poppins', serif;
  --font-nav: 'Poppins', serif;

  /* Escalas tipográficas */
  --text-xs: clamp(0.68rem, 0.8vw, 0.75rem);
  --text-sm: clamp(0.8rem, 0.9vw, 0.9rem);
  --text-base: clamp(0.95rem, 1vw, 1.0625rem);
  --text-lg: clamp(1.05rem, 1.25vw, 1.15rem);
  --text-xl: clamp(1.25rem, 1.6vw, 1.5rem);
  --text-2xl: clamp(1.6rem, 2.5vw, 2.25rem);
  --text-3xl: clamp(1.9rem, 3.4vw, 2.75rem);
  --text-4xl: clamp(2.35rem, 4.8vw, 3.9rem);
  --text-5xl: clamp(3rem, 6vw, 6rem);

  /* Interlineado */
  --leading-tight: 1.12;
  --leading-snug: 1.25;
  --leading-normal: 1.65;
  --leading-relaxed: 1.75;

  /* Espaciado */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-8: 3rem;
  --space-10: 4rem;
  --space-12: 5rem;
  --space-16: 7rem;
  --space-20: 9rem;

  /* Bordes */
  --radius-sm: 0.5rem;
  --radius-md: 0.75rem;
  --radius-lg: 1rem;
  --radius-xl: 1.5rem;
  --radius-2xl: 2rem;
  --radius-full: 9999px;

  --border-subtle: 1px solid var(--color-dark-12);
  --border-accent: 1px solid var(--color-sky);
  --border-divider: 1px solid var(--color-pearl);

  /* Sombras — dos capas: una cercana que define el borde, otra difusa que separa */
  --shadow-sm: 0 1px 3px var(--color-dark-04), 0 6px 16px var(--color-dark-04);
  --shadow-md: 0 2px 6px var(--color-dark-04), 0 16px 40px var(--color-dark-08);
  --shadow-lg: 0 4px 12px var(--color-dark-06), 0 28px 64px var(--color-dark-12);
  --shadow-soft: 0 8px 30px rgba(36, 49, 58, 0.1);

  /* Contenedores */
  --container: 1280px;
  --container-narrow: 980px;
  --container-wide: 1440px;

  /* Z-index */
  --z-header: 1000;
  --z-mobile-nav: 1050;
  --z-lightbox: 1100;
  --z-modal: 1100;

  /* Animaciones */
  --duration-fast: 200ms;
  --duration-normal: 320ms;
  --duration-slow: 600ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 0ms;
    --duration-normal: 0ms;
    --duration-slow: 0ms;
  }
}