/* ============================================================
   El Hornito Santiagueño — Design tokens
   Tema claro/crema (mockup aprobado). Acento dorado.
   ============================================================ */
/* Custom local font: FatFrank Free */
@font-face {
  font-family: 'FatFrank';
  src: url('../fonts/FatFrank%20Free/FatFrank-Free.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
/* Local Biko font for body/UI */
@font-face {
  font-family: 'Biko';
  src: url('../fonts/biko/Biko_Regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Biko';
  src: url('../fonts/biko/Biko_Bold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
:root {
  /* ---- Color ----
     Los tokens HEREDAN de los Global Colors de Elementor (--e-global-color-*),
     con fallback al hex de la marca por si la variable no estuviera cargada.
     → Cambiar un color en Elementor (Site Settings · Global Colors) se propaga
       a TODAS nuestras plantillas/componentes automáticamente.
     Mapa: primary #FBB800 · primary_hover #FFCB33 · secondary #482A14 ·
           text #464646 · text_light #B7B7B7 · accent #212121 · light #DDDBD4 ·
           border #EAEAEA · background #F4F1EA */
  --eh-cream:      var(--e-global-color-background, #f4f1ea);   /* fondo principal */
  /* Superficies alternas: crema CÁLIDO (no el "Light" gris de Elementor, que
     ensuciaba las bandas del page-title y portal-intro). Valor de marca propio. */
  --eh-cream-2:    #efe7d8;
  --eh-cream-3:    var(--e-global-color-background, #f4f1ea);   /* fondo del template original */
  --eh-ink:        var(--e-global-color-secondary, #482a14);   /* titulares / texto fuerte (marrón marca) */
  --eh-text:       var(--e-global-color-text, #464646);        /* cuerpo */
  --eh-text-soft:  var(--e-global-color-text_light, #b7b7b7);  /* texto secundario */
  --eh-gold:       var(--e-global-color-primary, #FBB800);     /* acento de marca */
  --eh-gold-hover: var(--e-global-color-primary_hover, #ffcb33);
  --eh-gold-ink:   var(--e-global-color-accent, #212121);      /* texto sobre dorado */
    /* El color primario ahora es dorado; mantener variables 'red' apuntando al dorado
      para que las reglas existentes que usan --eh-red pasen a dorado sin tocarlas */
    --eh-red:        var(--eh-gold);   /* CTA principal (antes rojo) */
    --eh-red-hover:  var(--eh-gold-hover);
  --eh-green:      var(--e-global-color-accent, #212121);      /* legado (carrito/suscribirme) → oscuro de marca */
  --eh-green-hover:var(--e-global-color-primary_hover, #ffcb33);
  --eh-white:      #ffffff;
  --eh-danger:     #c33130;   /* errores / validación (no es color de marca) */
  --eh-danger-ink: #8a2422;   /* texto de error sobre fondo claro */
  --eh-dark:       var(--e-global-color-accent, #212121);      /* top bar / footer oscuro */
  --eh-dark-2:     var(--e-global-color-secondary, #482a14);
  --eh-line:       var(--e-global-color-border, #eaeaea);      /* bordes suaves */
  --eh-star:       var(--e-global-color-primary, #FBB800);

  /* ---- Tipografía ---- */
  --ff-display: 'Anton', 'Arial Narrow', sans-serif;
  /* Body text, links and general UI: Biko (local) */
  --ff-body:    'Biko', 'FatFrank', system-ui, -apple-system, sans-serif;
  --ff-cond:    'Barlow Condensed', 'Inter', sans-serif;

  /* ---- Layout ---- */
  --container: 1320px;
  --gutter: 24px;
  --radius-pill: 40px;
  --radius-card: 18px;
  --radius-sm: 10px;
  --section-y: 80px;

  /* ---- Sombras ---- */
  --shadow-sm: 0 4px 14px rgba(31, 28, 23, 0.06);
  --shadow-md: 0 14px 40px rgba(31, 28, 23, 0.10);
  --shadow-gold: 0 10px 26px rgba(251, 184, 0, 0.32);

  /* ---- Misc ---- */
  --header-h: 96px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}