/**
 * VARIABLES DE DISEÑO
 * ----------------------------------------------------------------
 * Tokens centrales de color, tipografía y espaciado.
 * Paleta cálida (marfil, madera) con el verde del logo oficial como
 * color de marca/acento, aplicado de forma puntual en elementos
 * interactivos y de marca — no como recubrimiento general.
 * Cambiar un valor aquí afecta a toda la web de forma coherente.
 * ----------------------------------------------------------------
 */

:root {
  /* Fondos: marfil cálido como base. El tono "alterna" para las
     secciones intermedias (Categorías, Servicios, Ubicación) lleva
     ahora un matiz verde-salvia (mezcla del marfil con el verde claro
     del logo) en vez de un tono tan neutro: así el verde se percibe
     como color ESTRUCTURAL de toda la página al hacer scroll, no solo
     en botones puntuales. Sigue siendo un fondo claro y cálido. */
  --color-fondo: #faf6ef;
  --color-fondo-alterna: #dde1d6;

  /* Texto: prácticamente negro pero con matiz cálido (nunca gris frío) */
  --color-texto: #2a231c;
  --color-texto-suave: #5c4f40;

  /* Marca: verde del logo oficial (#5D725F muestreado directamente del
     PNG) ligeramente oscurecido para que el texto y los botones
     alcancen 4.5:1 también sobre --color-fondo-alterna; más oscuro
     aún al pasar el ratón. --color-acento (foco de teclado) comparte
     el tono oscuro para mantener la marca reconocible al navegar con
     teclado. --color-secundario (cálido) se mantiene para elementos
     no relacionados con la marca, como el aviso de "pendiente". */
  --color-primario: #546756;
  --color-primario-oscuro: #3c4a3e;
  --color-secundario: #a6825a;
  --color-acento: #3c4a3e;

  /* Verde claro exacto del logo: solo para uso decorativo (detalles,
     líneas, bordes) donde no se necesita contraste de texto —
     ver README/PENDIENTES para el criterio de contraste aplicado */
  --color-verde-claro: #92a496;

  /* Bordes y superficies discretas */
  --color-borde: #ddccb2;
  --color-borde-suave: #e8ddc9;

  /* Sección de fondo oscuro ("Por qué elegirnos" y pie de página):
     mismo verde oscuro de marca que --color-primario-oscuro (antes
     era un marrón sin relación con el logo). --color-inversa-borde
     es su equivalente de borde, en gris-verde en vez de marrón. */
  --color-inversa-fondo: #3c4a3e;
  --color-inversa-texto: #f5ede0;
  --color-inversa-borde: #4a564c;

  /* RGB (sin "#") del negro-verdoso usado en capas semitransparentes:
     superposición del hero, fondo del menú móvil y del visor de
     imagen ampliada. Antes eran un negro-marrón (20, 14, 8) sin
     relación con la marca; usar rgba(var(--color-overlay-rgb), alpha). */
  --color-overlay-rgb: 24, 32, 27;

  /* Tipografía: serif tradicional para títulos, tipografía humanista
     de sistema (sin dependencias externas) para el cuerpo de texto */
  --fuente-titulos: Georgia, "Iowan Old Style", "Palatino Linotype", "Book Antiqua", serif;
  --fuente-texto: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --tamano-texto-base: 18px;

  /* Espaciado generoso */
  --espacio-xs: 0.5rem;
  --espacio-sm: 1rem;
  --espacio-md: 2rem;
  --espacio-lg: 3.5rem;
  --espacio-xl: 6rem;

  /* Botones y componentes */
  --alto-boton-tactil: 52px;
  --radio-borde: 6px;
  --transicion: 150ms ease;

  /* Ancho máximo de contenido y de lectura de texto */
  --ancho-maximo: 1200px;
  --ancho-lectura: 65ch;
}