/*
 * Tokens de estilo compartidos por el header/footer a medida.
 * Valores provisionales tomados de src/styles/global.css del prototipo Astro;
 * pendientes de ajuste final cuando lleguen las medidas/colores de Figma.
 */
@font-face {
	font-family: 'Open Sauce Sans';
	src: url('../fonts/open-sauce-sans-regular.ttf') format('truetype');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Cormorant';
	src: url('../fonts/cormorant-italic.woff2') format('woff2');
	font-weight: 400;
	font-style: italic;
	font-display: swap;
}

:root {
	--color-texto: #000000;
	--color-texto-suave: #555;
	--color-fondo: #f3f3f3;
	--color-fondo-overlay: rgba(217, 217, 217, 0.73);

	--fuente-serif: Georgia, 'Times New Roman', serif;
	--fuente-sans: 'Helvetica Neue', Arial, sans-serif;

	--espaciado-header-vertical: 3vh;
	--espaciado-header-lateral: 80px;

	--z-header: 100;
	--z-overlay: 200;

	--difuminado-overlay: 20px;
	--transicion-rapida: 0.2s ease;

	/* Fallback antes de que cabecera.js la recalcule con la altura real. */
	--altura-header: 96px;
}

/* Lateral del header alineado con el container del body (site-container en Elementor): 80px / 40px / 20px. */
@media (max-width: 1024px) {
	:root {
		--espaciado-header-lateral: 40px;
	}
}

@media (max-width: 767px) {
	:root {
		--espaciado-header-lateral: 20px;
	}
}

body {
	background-color: var(--color-fondo);
}