/*
 * Variables semánticas del proyecto horizonte.
 * Espejo de la paleta y tipografía declaradas en theme.json,
 * para uso en CSS plano (p. ej. assets/css/cf7.css) fuera del editor.
 */

:root {
	/* Color */
	--horizonte-color-principal: #7EBAB1;
	--horizonte-celeste-texto: #007967;
	--horizonte-color-secundario: #00403E;
	--horizonte-color-terciario: #007967;
	--horizonte-color-resalto: #F89768;
	--horizonte-crema: #FCF8E4;
	--horizonte-morado-oscuro: #353756;
	--horizonte-gris-1: #F2F6F7;
	--horizonte-gris-2: #BDBDBD;
	--horizonte-gris-3: #717171;
	--horizonte-color-blanco: #ffff;
	--horizonte-color-error: #D60000;

	/* Tipografía */
	--horizonte-font-heading: "Newsreader", serif;
	--horizonte-font-body: "Kumbh Sans", sans-serif;

	/* Radios */
	--horizonte-radius-sm: 8px;
	--horizonte-radius-md: 12px;

	/* ======================================================================
	   Layout — contenedor fluido hasta 1920px con gutters fluidos.

	   Hasta 1244px de viewport estos tokens valen EXACTAMENTE lo de siempre
	   (contenedor 1144px, gutter 20px, ancho útil 1104px), así que por debajo
	   de ese ancho no cambia ni un píxel; a partir de ahí crecen con la
	   pantalla hasta el tope de 1920px.

	   Ojo con la unidad de cada uno, es a propósito:
	   - las anchuras van en % porque así caen exactamente donde cae el padding
	     global del tema padre (twentytwentyfive: styles.spacing.padding =
	     clamp(30px,5vw,50px) por lado, con useRootPaddingAwareAlignments), de
	     modo que header, contenido y footer quedan alineados; de paso son
	     inmunes al ancho de la barra de scroll (con 100vw el contenido queda
	     ~7,5px desalineado del header en Windows/Linux);
	   - el gutter va en vw porque es una medida de pantalla y tiene que valer
	     lo mismo dentro de un bloque a sangre y dentro del header/footer.
	   ====================================================================== */

	/* Tope duro del sistema (lo pedido por el cliente). Único sitio donde se toca. */
	--mwm-container-cap: 1920px;

	/* Caja EXTERIOR del contenedor de un bloque (contenido + los dos gutters).
	   Para usar dentro de secciones a sangre (los bloques mwm son alignfull),
	   donde 100% = ancho completo del body. El cruce entre el suelo de 1144px y
	   la rampa "100% - 100px" cae en 1244px de viewport. */
	--mwm-container-max: clamp(
		1144px,
		calc(100% - 2 * var(--wp--style--root--padding-right, 50px)),
		var(--mwm-container-cap)
	);

	/* Gutter interior: 20px hasta 1244px y +1px por cada 24px de viewport a
	   partir de ahí, con tope 48px (a ~1916px). Arranca en el mismo 1244px que
	   --mwm-container-max para que el ancho útil crezca sin escalón (un
	   clamp(20px, 2.5vw, 48px) daría 31px a 1244px y rompería la fidelidad). */
	--mwm-gutter: clamp(20px, calc(20px + (100vw - 1244px) / 24), 48px);

	/* Ancho ÚTIL, pero medido DESDE DENTRO de un contenedor que YA lleva el
	   padding global del tema (header, footer, main): ahí 100% ya es el ancho de
	   la caja exterior, así que basta restar los dos gutters. Nunca baja de los
	   1104px de siempre. NO usar dentro de un bloque a sangre (usar
	   --mwm-container-max). */
	--mwm-content-max: max(
		1104px,
		calc(min(100%, var(--mwm-container-cap)) - 2 * var(--mwm-gutter))
	);

	/* Tope de lectura de las columnas de texto que pasan a ser proporcionales
	   (~80 caracteres a 16px). Sin él, a 1920px la columna de texto de banner-1
	   o img-content se iría a ~700px y las líneas pasarían de 90 caracteres. */
	--mwm-col-texto-max: 640px;
}