/* ==========================================================================
   MATESEREÑO — Design Tokens
   Acá vive toda la identidad visual. Si mañana cambia un color o una
   tipografía, se edita UNA sola vez acá y se propaga a todo el sitio.
   ========================================================================== */

:root {
  /* ---- Marca ---- */
  --verde-mate:        #113704;   /* color principal de la marca */
  --verde-mate-oscuro: #0A2603;   /* variante oscura para hovers/gradientes */
  --verde-mate-suave:  #1D4D0C;   /* variante para superficies grandes */
  --verde-tinta:       #061602;   /* casi negro, para fondos profundos */

  /* ---- Secundarios (madera, cuero, cálidos) ---- */
  --madera:        #8B5E3C;
  --madera-claro:  #C9A66B;
  --cuero:         #6F4E37;
  --beige:         #EFE6D6;
  --crema:         #FAF6EE;
  --blanco:        #FFFFFF;
  --dorado-sutil:  #B8935A;   /* detalle premium, usar con moderación */
  --dorado-claro:  #D9BC86;

  /* ---- Superficies claras para los íconos de las viñetas ----
     Los recuadros verdes oscuros no se distinguían sobre el fondo crema,
     así que las viñetas usan una superficie clara con el ícono en verde. */
  --verde-tenue:  #E6EFDC;
  --verde-borde:  rgba(17, 55, 4, 0.16);
  --arena-tenue:  #F6EBD5;
  --arena-borde:  rgba(184, 147, 90, 0.38);
  --arena-texto:  #8A6520;

  /* ---- Texto ---- */
  --texto-principal: #1C1B17;
  --texto-suave:      #5C5648;
  --texto-invertido:  #F7F3E9;

  /* ---- Tipografía ---- */
  --fuente-display: 'Fraunces', serif;
  --fuente-cuerpo:  'Jost', sans-serif;

  /* ---- Espaciado ---- */
  --espacio-xs:  8px;
  --espacio-sm:  16px;
  --espacio-md:  32px;
  --espacio-lg:  64px;
  --espacio-xl:  120px;

  /* Ritmo vertical de las secciones (se achica solo en mobile) */
  --seccion-y: clamp(64px, 8vw, 112px);

  /* ---- Bordes / superficies ---- */
  --radio-sm: 6px;
  --radio-md: 14px;
  --radio-lg: 28px;

  /* ---- Sombra premium ---- */
  --sombra-suave:  0 20px 60px -25px rgba(17, 55, 4, 0.35);
  --sombra-media:  0 24px 60px -30px rgba(17, 55, 4, 0.45);
  --sombra-fuerte: 0 30px 80px -20px rgba(10, 38, 3, 0.5);

  /* ---- Líneas / bordes suaves ---- */
  --linea: rgba(17, 55, 4, 0.10);
  --linea-clara: rgba(247, 243, 233, 0.16);

  /* ---- Transiciones ---- */
  --ease-suave:  cubic-bezier(0.16, 1, 0.3, 1);   /* salida muy suave */
  --ease-salida: cubic-bezier(0.33, 1, 0.68, 1);
  --ease-rebote: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-rapida: 0.3s;
  --dur-media:  0.6s;
  --dur-lenta:  1.1s;

  /* Altura del header fijo (se usa para el scroll-margin de las secciones) */
  --header-alto: 132px;
}

@media (max-width: 860px) {
  :root { --header-alto: 150px; }
}