/**
 * Footer — estructura por columnas de la maqueta editorial (ronda de
 * ajustes finos): marca + 3 columnas de enlaces reales (La colección,
 * A tu lado, Contacto), fondo borgoña profundo con texto claro. Antes
 * era una sola columna centrada (arquitectura Home, Sección 8) — se
 * reemplaza porque dejaba demasiado aire vacío y no reflejaba la
 * composición aprobada. Valores de tipografía/espaciado tomados
 * directamente de la maqueta (px literales, no tokens, para
 * reproducirla con fidelidad).
 */

.site-footer {
	background-color: var(--mka-color-burdeos);
	padding: 3.25rem 5% 1.25rem 5%;
	margin-top: var(--mka-espaciado-lg);
}

.site-footer__inner {
	max-width: 1500px;
	margin: 0 auto;
}

.site-footer__top {
	display: grid;
	grid-template-columns: 1.7fr 1fr 1fr 1fr;
	gap: 2.1875rem;
}

.site-footer__marca {
	min-width: 0;
}

.site-footer__wordmark {
	margin: 0;
	font-family: var(--mka-font-display);
	font-size: 1.5rem;
	letter-spacing: 0.1875em;
	color: var(--mka-color-crema);
}

.site-footer__tagline {
	margin: 1.5625rem 0 0 0;
	font-family: var(--mka-font-display);
	font-size: 1.5625rem;
	line-height: 1.2;
	color: var(--mka-color-crema);
}

.site-footer__social {
	margin-top: 1.5625rem;
}

.site-footer__social a {
	color: color-mix(in srgb, var(--mka-color-crema) 78%, transparent);
	text-decoration: none;
	font-size: 0.8125rem;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.site-footer__social a:hover,
.site-footer__social a:focus-visible {
	color: var(--mka-color-plata);
}

.site-footer__titulo {
	margin: 0 0 1.25rem 0;
	font-size: 0.75rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: color-mix(in srgb, var(--mka-color-crema) 85%, transparent);
}

.site-footer__columna a {
	display: block;
	margin: 0.625rem 0;
	font-size: 0.8125rem;
	color: var(--mka-color-crema);
	text-decoration: none;
}

.site-footer__columna a:hover,
.site-footer__columna a:focus-visible {
	color: var(--mka-color-plata);
}

.site-footer__bottom {
	border-top: 1px solid color-mix(in srgb, var(--mka-color-crema) 30%, transparent);
	padding-top: 1.25rem;
	margin-top: 2.8125rem;
}

.site-footer__legal {
	margin: 0;
	font-size: 0.6875rem;
	color: color-mix(in srgb, var(--mka-color-crema) 78%, transparent);
}

.site-footer__legal-enlaces {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 1.5rem;
	margin-top: 0.75rem;
}

.site-footer__legal-enlaces a {
	font-size: 0.6875rem;
	color: color-mix(in srgb, var(--mka-color-crema) 78%, transparent);
	text-decoration: none;
}

.site-footer__legal-enlaces a:hover,
.site-footer__legal-enlaces a:focus-visible {
	color: var(--mka-color-plata);
}

@media (max-width: 1000px) {
	.site-footer__top {
		grid-template-columns: 1.5fr 1fr 1fr;
	}

	.site-footer__top > :last-child {
		grid-column: 2 / -1;
	}
}

@media (max-width: 767px) {
	.site-footer__top {
		grid-template-columns: 1fr 1fr;
		gap: 2rem;
	}

	.site-footer__top > :first-child {
		grid-column: 1 / -1;
	}

	.site-footer__top > :last-child {
		grid-column: auto;
	}

	.site-footer__tagline {
		font-size: 1.25rem;
	}

	/* Enlaces más cómodos de tocar: más alto de línea y más separación vertical que en escritorio. */
	.site-footer__columna a {
		padding: 0.375rem 0;
		margin: 0.125rem 0;
		font-size: 0.875rem;
	}

	.site-footer__titulo {
		margin-top: var(--mka-espaciado-sm);
	}
}

/**
 * Botón "volver arriba" de Astra (#ast-scroll-top): azul por defecto,
 * rompe la paleta de la marca. Mismo criterio que el resto de
 * anulaciones puntuales de Astra (sección 10: "si Astra se ve, se
 * sobrescribe"). Vive aquí porque footer.css se carga en todas las
 * páginas, igual que el propio botón.
 */
#ast-scroll-top {
	background-color: var(--mka-color-burdeos) !important;
}

#ast-scroll-top:hover {
	background-color: var(--mka-color-texto) !important;
}

/**
 * Botón flotante de WhatsApp (inc/paginas/contacto.php). Burdeos con
 * icono blanco, abajo a la derecha, respetando el margen inferior del
 * dispositivo. Área táctil mínima de 44 px (48 en móvil, 52 en
 * escritorio). assets/js/modules/whatsapp-flotante.js lo aparta
 * (clase --oculto) cuando coincidiría con botones de compra, flechas de
 * carruseles o campos de formulario.
 */
.mka-wa-flotante {
	position: fixed;
	right: max(20px, env(safe-area-inset-right));
	bottom: max(20px, env(safe-area-inset-bottom));
	z-index: 90;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	min-width: 44px;
	min-height: 44px;
	border-radius: 50%;
	background: var(--mka-color-burdeos);
	color: #fff;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22);
	text-decoration: none;
	transition: opacity 0.2s ease, transform 0.2s ease, background-color 0.2s ease;
}

.mka-wa-flotante svg {
	display: block;
	width: 28px;
	height: 28px;
	fill: currentColor;
}

.mka-wa-flotante:hover {
	background: var(--mka-color-texto);
	color: #fff;
}

.mka-wa-flotante:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
	box-shadow: 0 0 0 4px var(--mka-color-burdeos), 0 4px 14px rgba(0, 0, 0, 0.22);
}

.mka-wa-flotante--oculto {
	opacity: 0;
	transform: scale(0.85);
	pointer-events: none;
}

/* El "volver arriba" de Astra se coloca justo encima del botón. */
#ast-scroll-top {
	bottom: calc(max(20px, env(safe-area-inset-bottom)) + 64px) !important;
	right: max(20px, env(safe-area-inset-right)) !important;
	inset-inline-end: max(20px, env(safe-area-inset-right)) !important;
}

@media (max-width: 700px) {
	.mka-wa-flotante {
		right: max(14px, env(safe-area-inset-right));
		bottom: max(14px, env(safe-area-inset-bottom));
		width: 48px;
		height: 48px;
	}

	#ast-scroll-top {
		bottom: calc(max(14px, env(safe-area-inset-bottom)) + 58px) !important;
		right: max(14px, env(safe-area-inset-right)) !important;
		inset-inline-end: max(14px, env(safe-area-inset-right)) !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	.mka-wa-flotante {
		transition: none;
	}
}

/* "Volver arriba" de Astra: área de toque de 44 × 44 px con el icono discreto de siempre. El display lo gestiona Astra en línea (mostrar/ocultar), por eso el icono se centra con posición absoluta. */
#ast-scroll-top {
	width: 44px !important;
	height: 44px !important;
	min-width: 44px;
	min-height: 44px;
	padding: 0;
}

#ast-scroll-top .ast-icon {
	position: absolute;
	top: 50%;
	left: 50%;
	margin: 0;
	transform: translate(-50%, -50%);
}

/* Aro claro fino cuando el botón de WhatsApp o "Volver arriba" están sobre el footer burdeos (clase puesta por whatsapp-flotante.js). */
.mka-wa-flotante.mka-sobre-pie {
	box-shadow: 0 0 0 1.5px rgba(245, 240, 232, 0.9), 0 4px 14px rgba(0, 0, 0, 0.22);
}

#ast-scroll-top.mka-sobre-pie {
	box-shadow: 0 0 0 1.5px rgba(245, 240, 232, 0.9);
}

/* "Volver arriba" se aparta (fade) mientras coincide con texto o controles; lo gestiona whatsapp-flotante.js. */
#ast-scroll-top {
	transition: opacity 0.2s ease;
}

#ast-scroll-top.mka-flotante-oculto {
	opacity: 0 !important;
	pointer-events: none !important;
}