/* tokens.css — Design System de Finca El Recreo.
   Este archivo es la ÚNICA fuente de colores, tipografía y espaciado.
   Ningún componente debe usar un color o tamaño fuera de estas variables.
   Si algo necesita romper esta regla, se aprueba como excepción antes de escribirse. */

:root {
  /* Identidad visual 2026: tintas verdes-neutras (sustituyen al marrón en títulos y texto) */
  --tinta-titulo: #14281b;
  --tinta-texto: #33443a;
  --verde-bosque: #0f2a1a;

  /* Colores — verde protagonista, café solo como acento de texto, ámbar SOLO para promociones */
  --verde-900: #173404;   /* fondo hero, identidad principal */
  --verde-700: #2d5c26;   /* botón WhatsApp (verde bosque, no el verde brillante de WhatsApp) */
  --verde-600: #3b6d11;   /* íconos, acentos, hover */
  --verde-200: #97c459;   /* detalles claros */
  --verde-100: #e7f3e4;   /* fondos suaves */
  --ambar-400: #ef9f27;   /* RESERVADO: solo promociones/ofertas puntuales, no botones principales */
  --cafe-texto: var(--tinta-texto);  /* texto de precios y acentos de texto */
  --cafe-oscuro: var(--tinta-titulo); /* títulos */
  --crema: #fdf8f2;       /* fondo de secciones */
  --blanco: #ffffff;

  /* Tipografía */
  --fuente-titulos: 'Playfair Display', serif;
  --fuente-cuerpo: 'Lato', Arial, sans-serif;

  /* Espaciado y bordes — consistentes en toda la web */
  --radio-tarjeta: 14px;
  --radio-boton: 24px; /* pill */
  --espacio-seccion: 4rem;
  --espacio-tarjeta: 1.25rem;

  /* Animación — sutil, nunca exagerada */
  --transicion-suave: 0.25s ease;
}

/* Botones — jerarquía única en toda la web */
.btn-whatsapp{background:var(--verde-700);color:#fff;font-weight:700;font-size:.9rem;padding:14px 34px;border-radius:var(--radio-boton);text-decoration:none;display:inline-block;transition:background var(--transicion-suave),transform var(--transicion-suave);border:none}
.btn-whatsapp:hover{background:var(--verde-900);transform:translateY(-2px)}
.btn-secundario{background:transparent;color:var(--verde-700);font-weight:700;font-size:.9rem;padding:14px 34px;border-radius:var(--radio-boton);text-decoration:none;border:1.5px solid var(--verde-700);transition:background var(--transicion-suave),color var(--transicion-suave)}
.btn-secundario:hover{background:var(--verde-700);color:#fff}
/* Uso de ámbar: solo para insignias de "Nuevo" o promociones puntuales, nunca como botón principal */
.badge-promo{background:var(--ambar-400);color:var(--cafe-oscuro);font-size:.7rem;font-weight:700;padding:.25rem .7rem;border-radius:20px;display:inline-block}

/* Micro-interacción sutil al presionar botones */
.btn-whatsapp:active,.btn-secundario:active{transform:scale(.97)}