/* Nature House — tokens de marca (fuente única de verdad) */
:root {
  /* Fondos */
  --crema: #F7F3EA;          /* fondo de página (60%) */
  --lino: #EDE6D6;           /* secciones alternas, franjas de beneficios */
  --blanco: #FFFFFF;         /* tarjetas, campos, carrito */
  --linea: #DCD3C0;          /* bordes y divisores */

  /* Texto */
  --tinta: #1B261C;          /* texto de lectura */
  --tinta-suave: #5A6659;    /* texto secundario, marcas, metadatos */

  /* Verdes de marca */
  --bosque: #1F4A22;         /* principal (30%): logo, títulos, botón principal */
  --bosque-profundo: #163619;/* hover del botón principal, footer */
  --hoja: #4F7F2A;           /* verde medio del logo; texto solo ≥24px o bold ≥19px */
  --hoja-clara: #A9CF6A;     /* acentos sobre bosque, "house" en negativo */
  --brote: #86B33E;          /* acento lima (10%); nunca texto sobre fondo claro */
  --brote-suave: #E4EFCF;    /* fondo de etiquetas de beneficio */

  /* Texto sobre rellenos */
  --on-bosque: var(--crema);
  --on-brote: #13261A;

  /* Promoción y estados */
  --miel: #E8B04A;           /* SOLO ofertas/novedades, 1 por pantalla */
  --miel-suave: #FBEFD9;
  --miel-texto: #8A5A12;
  --frutilla: #B4372B;       /* SOLO errores y "Sin stock", siempre con texto */
  --foco: var(--bosque);

  /* Tipografía */
  --font-serif: "Playfair Display", Georgia, "Times New Roman", serif;
  --font-sans: Montserrat, "Helvetica Neue", Arial, sans-serif;
  --font-script: Caveat, "Segoe Script", cursive;

  /* Espaciado */
  --espacio-1: 4px;
  --espacio-2: 8px;
  --espacio-3: 12px;
  --espacio-4: 16px;
  --espacio-6: 24px;
  --espacio-8: 32px;
  --espacio-12: 48px;
  --espacio-16: 64px;
  --espacio-24: 96px;

  /* Radios */
  --radio-s: 6px;
  --radio-m: 12px;
  --radio-l: 20px;
  --radio-pill: 999px;

  /* Sombras */
  --sombra-tarjeta: 0 1px 2px rgba(31, 74, 34, 0.06), 0 8px 24px rgba(31, 74, 34, 0.08);
  --sombra-flotante: 0 12px 40px rgba(22, 54, 25, 0.18);

  /* Layout */
  --ancho-max: 1280px;
  --gutter: 24px;
}

/* Escala tipográfica */
.display-xl { font: 600 56px/60px var(--font-serif); letter-spacing: -0.01em; }
.display-l  { font: 600 40px/46px var(--font-serif); letter-spacing: -0.005em; }
.titulo     { font: 600 28px/34px var(--font-serif); }
.subtitulo  { font: 600 18px/26px var(--font-sans); }
.cuerpo     { font: 400 16px/26px var(--font-sans); }
.cuerpo-s   { font: 400 14px/22px var(--font-sans); }
.etiqueta   { font: 600 12px/16px var(--font-sans); letter-spacing: 0.16em; text-transform: uppercase; }
.precio     { font: 700 22px/28px var(--font-sans); }
.acento     { font: 700 30px/34px var(--font-script); }

@media (max-width: 640px) {
  .display-xl { font-size: 36px; line-height: 40px; }
  .display-l  { font-size: 30px; line-height: 36px; }
  .titulo     { font-size: 24px; line-height: 30px; }
}