/* ==========================================================================
   De la Calle a la Vida — Design tokens
   ========================================================================== */

/* ---- Fonts (self-hosted, subconjunto latino con acentos y eñe) ----
   Poppins y Bebas Neue: SIL Open Font License, autoalojadas sin restricción.
   Solo se traen los pesos que el sitio usa: Poppins 400/600, Bebas Neue 400. */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/poppins-400-latin.woff2') format('woff2');
}

@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/poppins-600-latin.woff2') format('woff2');
}

@font-face {
  font-family: 'Bebas Neue';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/bebasneue-400-latin.woff2') format('woff2');
}

/* Baksoda Demo — restaurada 2026-09-23 por instrucción del cliente, pero
   SOLO para el kicker del Hero de inicio (.hero-eyebrow, "Acompañamiento
   virtual para familias"). En todo el resto del sitio (incluido
   .accent-word) el acento sigue siendo Poppins cursiva, no Baksoda.
   Licencia de uso personal, versión demo — ver Pendientes en README.md. */
@font-face {
  font-family: 'Baksoda Demo';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/baksoda-demo.woff2') format('woff2');
}

:root {
  /* ---- Brand colors ---- */
  --naranja: #fa7d47;
  --amarillo: #fdba49;
  --crema: #fcf5e5;
  --negro: #181818;
  --arena: #e0cbb1;

  /* tints/shades derived for hover/border states, never introducing new hues */
  --naranja-oscuro: #e0632e;
  --amarillo-oscuro: #e6a52f;
  --crema-oscuro: #f5ead2;
  --negro-suave: #3a3532;
  --arena-oscuro: #cdb190;

  --bg: var(--crema);
  --text: var(--negro);
  --text-muted: #5a5450;

  /* ---- Typography ---- */
  --font-body: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-display: 'Bebas Neue', 'Poppins', sans-serif;
  /* Solo para .hero-eyebrow (ver @font-face arriba) — no un acento general. */
  --font-hero-eyebrow: 'Baksoda Demo', cursive;

  --fw-regular: 400;
  --fw-semibold: 600;

  --fs-xs: 0.8rem;
  --fs-sm: 0.925rem;
  --fs-base: 1rem;
  --fs-md: 1.125rem;
  --fs-lg: 1.375rem;
  --fs-xl: 1.75rem;
  --fs-2xl: 2.25rem;
  --fs-3xl: 3rem;
  --fs-4xl: 3.75rem;

  --lh-tight: 1.1;
  --lh-snug: 1.3;
  --lh-normal: 1.6;

  /* ---- Spacing scale ---- */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2.5rem;
  --space-xl: 4rem;
  --space-2xl: 6rem;
  --space-3xl: 8rem;

  --container-max: 1180px;
  --container-pad: var(--space-sm);

  /* ---- Radii ---- */
  --radius-sm: 10px;
  --radius-md: 18px;
  --radius-lg: 28px;
  --radius-full: 999px;

  /* ---- Shadows (warm, never gray-blue) ---- */
  --shadow-sm: 0 2px 10px rgba(24, 18, 10, 0.06);
  --shadow-md: 0 10px 30px rgba(24, 18, 10, 0.1);
  --shadow-lg: 0 20px 50px rgba(24, 18, 10, 0.14);
  --shadow-glow: 0 8px 24px rgba(250, 125, 71, 0.35);

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 200ms;
  --dur-base: 400ms;
  --dur-slow: 700ms;

  /* ---- Z-index scale ----
     El menú hamburguesa (.site-nav, .nav-overlay) vive dentro del
     header, así que su z-index interno (98/99) solo cuenta dentro del
     contexto de apilamiento que crea .site-header (position:sticky +
     z-index). Si ese z-index del header queda por debajo de --z-float,
     el botón flotante de WhatsApp pinta por encima de TODO el header,
     incluido el menú abierto — exactamente el bug reportado (el botón
     flotante tapaba el "Escríbenos por WhatsApp" del panel). Por eso
     --z-header debe ser mayor que --z-float. */
  --z-float: 60;
  --z-header: 70;
}