/**
 * Jarrucheo · Tokens del diseño.
 *
 * ── POR QUÉ ESTO ESTÁ EN UN FICHERO Y NO SOLO EN ELEMENTOR ───────────────
 *
 * Los colores y las tipografías se cargan TAMBIÉN en los estilos globales de
 * Elementor (lo hace herramientas/instalar.sh), para que el panel ofrezca la
 * paleta de la marca y no un selector libre. Pero la fuente de verdad es este
 * fichero, y por dos razones:
 *
 *   1. Los widgets propios y el CSS de componentes se escriben contra estas
 *      variables. Así un cambio de token llega a todo el sitio de una vez,
 *      incluido lo que no está montado con Elementor (tienda, checkout, ficha).
 *   2. Está en git. Los estilos globales de Elementor viven en la base de
 *      datos y no se pueden revisar ni desplegar con el código.
 *
 * Regla del proyecto: ni un color literal fuera de este fichero. Si aparece
 * un #hex en el CSS de un componente o en el panel de Elementor, es un bug.
 */

/* -------------------------------------------------------------------------
 * Tipografías. Ambas Google Fonts con licencia OFL: sin coste ni gestión.
 * Autoalojadas a propósito — no se enlaza a fonts.googleapis.com, por
 * rendimiento y por RGPD.
 * ---------------------------------------------------------------------- */
@font-face{
	font-family:"Xanh Mono";
	src:url("../fonts/xanh.woff2") format("woff2");
	font-weight:400;font-style:normal;font-display:swap;
}
@font-face{
	font-family:"Xanh Mono";
	src:url("../fonts/xanh-italic.woff2") format("woff2");
	font-weight:400;font-style:italic;font-display:swap;
}
@font-face{
	font-family:"Manrope";
	src:url("../fonts/manrope.woff2") format("woff2");
	font-weight:200 800;font-style:normal;font-display:swap;
}

:root{
	/* Paleta — brandboard, sin muestrear del PDF */
	--j-burdeos:#24121a;
	--j-crema:#f6ebd6;
	--j-lima:#e6e594;
	--j-oliva:#978b4f;
	--j-verde-oscuro:#142223;
	--j-blanco:#ffffff;
	--j-error:#b3412e;

	/* Familias */
	--j-fuente-titulos:"Xanh Mono", ui-serif, Georgia, serif;
	--j-fuente-texto:"Manrope", ui-sans-serif, system-ui, sans-serif;

	/* Escala tipográfica — medida sobre el diseño de 1366 px.
	   OJO: es más grande de lo que aparenta en el PDF. Los antetítulos son de
	   19 px, no de 13, y el cuerpo de la home es de 21. Se comprobó con
	   comparación por píxel contra el diseño; no cambiar a ojo. */
	--j-t-xs:12px;
	--j-t-sm:13.5px;
	--j-t-base:clamp(16px, 1.2vw, 17px);
	--j-t-antetitulo:19px;
	--j-t-cuerpo-destacado:21px;
	--j-t-h3:clamp(22px, 2vw, 28px);
	--j-t-h2:clamp(34px, 4vw, 54px);
	--j-t-h1:clamp(38px, 4.4vw, 60px);

	/* Espaciado */
	--j-e-10:8px;
	--j-e-20:16px;
	--j-e-30:24px;
	--j-e-40:40px;
	--j-e-50:clamp(48px, 6vw, 72px);
	--j-e-60:clamp(52px, 7vw, 90px);

	/* Rejilla — medida sobre el diseño */
	--j-contenedor:1246px;
	--j-gutter:60px;

	/* Relieve de botón: sombra dura, sin desenfoque.
	   En el PDF el borde de la sombra está definido. */
	--j-relieve:4px 4px 0 rgba(0,0,0,.32);
}

@media (max-width:900px){
	:root{ --j-gutter:24px; }
}