/* ============================================================
   AGROTAST ES MOLINOT — Design tokens
   ------------------------------------------------------------
   Cada token apunta a un Global Color / Global Font de Elementor
   con un color de reserva. Consecuencia importante:

   si el cliente cambia un color en Elementor → Ajustes del sitio
   → Colores globales, TODO el sitio le sigue, incluidos los
   componentes de este tema. No hay colores «a fuego» en el CSS.

   Los IDs (agrocream, agroterra…) son fijos, no los cambies.
   ============================================================ */

:root {
  /* ---- COLOR ---------------------------------------------- */
  /* Sistema de Elementor */
  --c-green:        var(--e-global-color-primary,   #366246); /* verde bosque, primario */
  --c-red:          var(--e-global-color-secondary, #d04d1e); /* rojo Molinot, CTA */
  --c-ink:          var(--e-global-color-text,      #1a261a); /* tinta */
  --c-terra:        var(--e-global-color-accent,    #e2a45b); /* terracota, acento */

  /* Personalizados de Elementor */
  --c-cream:        var(--e-global-color-agrocream,    #fbf8f2); /* fondo base */
  --c-cream-2:      var(--e-global-color-agrocream2,   #f4ede1); /* superficie alterna */
  --c-cream-3:      var(--e-global-color-agrocream3,   #efe7d8); /* tarjetas / bordes */
  --c-green-700:    var(--e-global-color-agrogreen700, #2b4f38);
  --c-green-900:    var(--e-global-color-agrogreen900, #1d3826);
  --c-terra-700:    var(--e-global-color-agroterra700, #c8842f);
  --c-red-700:      var(--e-global-color-agrored700,   #b23f15);
  --c-ink-soft:     var(--e-global-color-agroinksoft,  #4a5547); /* texto secundario */
  --c-ink-mute:     var(--e-global-color-agroinkmute,  #76806f); /* metadatos */
  --c-on-dark:      var(--e-global-color-agroondark,   #f6efe3); /* texto sobre oscuro */

  --c-on-dark-soft: rgba(246, 239, 227, .74);

  /* Líneas y veladuras sobre fotografía */
  --line:        rgba(26, 38, 26, .12);
  --line-strong: rgba(26, 38, 26, .22);
  --veil-dark:   rgba(20, 28, 18, .46);
  --veil-green:  rgba(29, 56, 38, .62);

  /* ---- TIPOGRAFÍA ----------------------------------------- */
  --font-display: "The Seasons", "Cormorant Garamond", "Hoefler Text", Georgia, serif;
  --font-body:    "TT Drugs", "Mulish", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-script:  "Ballet", "Cormorant Garamond", cursive;

  /* Escala fluida: los tamaños se adaptan al ancho sin media queries */
  --fs-hero:   clamp(2.6rem, 1.4rem + 4.8vw, 5.25rem);
  --fs-h1:     clamp(2.2rem, 1.5rem + 3vw, 3.85rem);
  --fs-h2:     clamp(1.85rem, 1.25rem + 2.4vw, 2.9rem);
  --fs-h3:     clamp(1.3rem, 1.05rem + 1.1vw, 1.7rem);
  --fs-body:   1.0625rem;
  --fs-sm:     0.9rem;
  --fs-kicker: 0.78rem;

  --lh-tight: 1.08;
  --lh-snug:  1.28;
  --lh-body:  1.62;
  --tracking-kicker: 0.22em;

  /* ---- FORMA ---------------------------------------------- */
  --radius-sm:   8px;
  --radius:      16px;
  --radius-lg:   26px;
  --radius-pill: 999px;

  --shadow-sm: 0 6px 24px -12px rgba(26, 38, 26, .22);
  --shadow:    0 26px 60px -28px rgba(26, 38, 26, .34);

  /* ---- MOVIMIENTO ----------------------------------------- */
  --ease:     cubic-bezier(.22, .61, .36, 1);
  --dur:      .55s;
  --dur-fast: .28s;

  /* ---- ESTRUCTURA ----------------------------------------- */
  --header-h: 88px;

  /* Flecha del acordeón de condiciones, como máscara. Va aquí y no en el
     componente para que la ruta del SVG esté en un solo sitio. */
  --ag-caret: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9.5l6 6 6-6'/%3E%3C/svg%3E");
}