/*
  Design tokens extraídos del mockup aprobado (mupa2.com.mx), vía CSS
  computado en vivo — no del CSS fuente de Divi (se genera dinámicamente).

  Colores de categoría verificados contra los 8 botones reales del menú
  lateral (labels exactos de la taxonomía). Tipografía y componentes
  (h1-h4, botón outline, acordeón) verificados consistentes entre home y
  ficha de producto — es un sistema de diseño único, no valores sueltos
  por página.

  --color-link confirmado con un segundo caso real (2026-08-08): el
  "Leer más" de Noticias en mupa2.com.mx mide exactamente #2ea3f2, igual
  al valor ya tomado de la muestra puntual original — ya no es una
  muestra sin confirmar.

  Pendientes de confirmar contra más páginas antes de darlos por
  definitivos: los tokens del cotizador (el link de esa sección todavía
  es href="#", sin página real que revisar).

  Ver "Bitácora de cambios" en README.md para el detalle de cómo y cuándo
  se extrajo/confirmó cada grupo de tokens.
*/

:root {
  /* ─── Tipografía ─────────────────────────────────────────────── */
  --font-body: Poppins, Helvetica, Arial, Lucida, sans-serif;
  --font-heading: Oswald, Helvetica, Arial, sans-serif; /* h2/h3/h4 */
  --font-h1: Poppins, Helvetica, Arial, sans-serif;      /* h1 usa Poppins, no Oswald */

  --fs-body: 15px;
  --lh-body: 24px;
  --fs-h1: 21px;
  --fs-h2: 18px;
  --fs-h3: 17px;
  --fs-h4: 24px;
  --fs-category-button: 12px;

  --fw-h1: 600;
  --fw-h2: 600;
  --fw-h3: 300;
  --fw-h4: 600;
  --fw-category-button: 700;

  --ls-heading: 1px;      /* h2/h3 */
  --ls-h1: 0.5px;
  --ls-h4: 0.5px;

  /* ─── Color base ─────────────────────────────────────────────── */
  --color-body-text: #666666;
  --color-body-bg: #ffffff;
  --color-h1: #526723;          /* verde marca — distinto del verde de categoría */
  --color-heading-accent: #3f6964; /* h2/h3, coincide con color de EQUIPOS INCLUSIVOS */
  --color-link: #2ea3f2;        /* confirmado 2x: muestra original + "Leer más" de Noticias */
  /* El acento de la ficha de producto (SKU, y lo que se defina después)
     usa el color de la categoría por la que el usuario está navegando —
     NO un color fijo del producto ni del SKU como dato de catálogo.
     Reutiliza el mismo dato de "ruta" que se captura para el cotizador —
     misma pieza de datos, dos usos: JSON de cotización Y color de acento
     en pantalla (ver "Bitácora de cambios" en README.md). Ver --cat-*
     abajo para el mapa categoría→color. Sin ruta (acceso directo/
     búsqueda): usar --color-h1 (#526723) como default fijo. */
  --color-accent-default: #526723;

  /* ─── Paleta categórica (8 categorías, botones menú lateral) ───
     Cada categoría de MOBILIARIO URBANO tiene su propio color sólido,
     texto blanco encima. Confirmado contra los 8 labels exactos. */
  --cat-espacios-publicos: #607a24;      /* verde oliva */
  --cat-movilidad-urbana: #23383f;       /* azul-gris oscuro */
  --cat-canchas-deportivos: #a14721;     /* naranja quemado / terracota */
  --cat-equipos-mascotas: #666052;       /* gris-café / taupe */
  --cat-manejo-residuos: #7f2929;        /* rojo oscuro / vino */
  --cat-madera-ecologica: #493724;       /* café oscuro */
  --cat-juegos-infantiles: #8a5500;      /* ámbar / dorado-café */
  --cat-equipos-inclusivos: #3f6964;     /* verde-azul / teal */

  --cat-button-text: #ffffff;

  /* ─── Botones outline (sobre imagen, p.ej. "más" en cards de hero,
     y "añadir a cotizador" en ficha de producto — mismo estilo exacto
     confirmado en ambos, incluida la forma asimétrica de esquinas) ── */
  --btn-outline-bg: transparent;
  --btn-outline-text: #ffffff;
  --btn-outline-border: 2px solid #ffffff;
  --btn-outline-radius: 35px 7px;   /* forma asimétrica deliberada, no un pill normal */
  --btn-outline-font-size: 20px;    /* confirmado en "añadir a cotizador" */
  --btn-outline-padding: 6px 20px;

  /* ─── Acordeón de ficha de producto (COLORES/DIMENSIONES/ACABADOS) ──
     Confirmado: el título del acordeón reusa exactamente los tokens de
     h3 (--color-heading-accent, Oswald 300, 17px) — no es un estilo aparte. */
  --accordion-panel-bg-closed: #dbe4c5; /* verde pálido, contenedor cerrado */
}