/* Tokens del sitio. Colores y fuentes salen de Ajustes del sitio de Elementor;
   aquí solo hay fallback por si aún no están configurados. */
:root {
	--color-ink: var(--e-global-color-primary, #29211F);
	--color-muted: var(--e-global-color-text, #746963);
	--color-paper: #FFFFFF;
	--color-soft: #FBF7F4;
	--color-line: #EEE4E0;

	/* Colores Molitalia PROVISIONALES: reemplazar por los del manual de marca */
	--color-brand-red: #D7261E;
	--color-brand-blue: #123B8C;
	--color-brand-yellow: #FFC20E;
	--color-brand-red-dark: #AD1B16;
	--color-brand-green: #087A3D;

	/* Fondos suaves de tarjetas e íconos */
	--color-red-soft: #FDECE8;
	--color-green-soft: #E4F4EA;
	--color-amber-soft: #FFF4D6;

	--font-display: var(--e-global-typography-primary-font-family, "DM Sans"), sans-serif;
	--font-body: var(--e-global-typography-text-font-family, "DM Sans"), system-ui, sans-serif;

	--space-2: 8px;
	--space-3: 12px;
	--space-4: 16px;
	--space-6: 24px;
	--space-8: 32px;
	--space-12: 48px;

	/* Ancho máximo del contenido y margen lateral. */
	--wrap-max: 1320px;
	--wrap-pad: 16px;
	/* Margen lateral de una sección a todo el ancho: centra el contenido en --wrap-max. */
	--wrap-gutter: max(var(--wrap-pad), calc((100% - var(--wrap-max)) / 2 + var(--wrap-pad)));
	--header-h: 72px;

	/* Espacio vertical entre secciones del Home. */
	--space-section: clamp(64px, 7vw, 110px);

	--radius-md: 16px;
	--radius-lg: 28px;
	--radius-pill: 999px;

	--shadow-card: 0 14px 40px rgba(41, 33, 31, .14);

	--ease-out: cubic-bezier(.2, .9, .2, 1);
	--ease-swap: cubic-bezier(.7, 0, .2, 1);
	--dur-fast: .35s;
	--dur-base: .6s;
	--dur-slow: .9s;
}

@media (min-width: 768px) {
	:root { --wrap-pad: 24px; --header-h: 78px; }
}

@media (min-width: 1025px) {
	:root { --wrap-pad: 40px; --header-h: 106px; }
}