/*
 * Liquid Glass — Footer
 *
 * El footer, igual que el header, lo controla el Header/Footer Builder de
 * ElementsKit (Elementor) — se aplica en TODO el sitio, no solo en las 5
 * páginas nuevas. No se toca su contenido (logo, texto, enlaces): solo CSS
 * sobre el markup que ya imprime.
 *
 * Contenido real confirmado (rastreo del sitio en vivo):
 *   - Columna 1: logo + "Compra con Garantía"
 *   - Columna 2: encabezado "¡Escribenos!" con teléfono/email/dirección
 *   - Columna 3: iconos de Facebook, Instagram y TikTok
 *   - Línea final: copyright + crédito de diseño
 *
 * IMPORTANTE — verificar en el sitio en vivo: el contenedor exterior usa
 * "footer#colophon" / ".site-footer" (la etiqueta estándar de Astra para el
 * footer, casi seguro presente); los iconos sociales asumen el widget
 * nativo "Social Icons" de Elementor (clases ".elementor-social-icons-wrapper",
 * ".elementor-social-icon"), que es lo más común para 3 iconos sueltos como
 * estos. Si el footer usa otro widget (ElementsKit propio, ícono de otro
 * plugin), avisar la clase real y se ajusta — mismo patrón que header.css.
 *
 * Breakpoints: ver assets/css/liquid-glass.css (móvil ≤544px, tablet ≤976px).
 */

/* --- Panel del footer completo, vidrio sutil con esquinas superiores redondeadas --- */
footer#colophon,
.site-footer {
	position: relative;
	background: var(--glass-bg-fallback);
	border-top: 1px solid var(--glass-border);
	border-radius: var(--glass-radius) var(--glass-radius) 0 0;
	padding-top: 8px;
}

@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
	footer#colophon,
	.site-footer {
		background: var(--glass-bg);
		-webkit-backdrop-filter: blur(var(--glass-blur));
		backdrop-filter: blur(var(--glass-blur));
	}
}

/* --- Encabezado de columna (ej. "¡Escribenos!") --- */
footer#colophon .elementor-widget-heading .elementor-heading-title,
.site-footer .elementor-widget-heading .elementor-heading-title {
	font-size: 1.05rem;
	color: var(--brand-blue-deep, #004d93);
}

/* --- Texto de contacto (teléfono/email/dirección) --- */
footer#colophon .elementor-widget-text-editor,
.site-footer .elementor-widget-text-editor,
footer#colophon .elementor-widget-icon-list,
.site-footer .elementor-widget-icon-list {
	color: rgba(30, 41, 59, 0.75);
	font-size: 0.92rem;
	line-height: 1.7;
}

footer#colophon .elementor-widget-text-editor a,
.site-footer .elementor-widget-text-editor a {
	color: var(--brand-blue-deep, #004d93);
	text-decoration-color: rgba(82, 113, 255, 0.5);
}

/* --- Logo --- */
footer#colophon .elementor-widget-image img,
.site-footer .elementor-widget-image img {
	max-height: 46px;
	width: auto;
}

/* --- Iconos sociales (widget nativo "Social Icons" de Elementor) --- */
footer#colophon .elementor-social-icons-wrapper .elementor-social-icon,
.site-footer .elementor-social-icons-wrapper .elementor-social-icon {
	background: var(--glass-cta-gradient);
	color: var(--glass-cta-text);
	box-shadow: var(--glass-cta-glow);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

@media (hover: hover) and (pointer: fine) {
	footer#colophon .elementor-social-icons-wrapper .elementor-social-icon:hover,
	.site-footer .elementor-social-icons-wrapper .elementor-social-icon:hover {
		transform: translateY(-3px);
		box-shadow: var(--glass-cta-glow-hover);
		color: var(--glass-cta-text);
	}
}

/* --- Línea de copyright (última fila, tono más discreto) --- */
footer#colophon .ast-small-footer,
.site-footer .ast-small-footer {
	border-top: 1px solid var(--glass-border);
	color: rgba(30, 41, 59, 0.55);
	font-size: 0.8rem;
	padding: 16px 0;
	margin-top: 12px;
}

/* --- Tablet --- */
@media (max-width: 976px) {
	footer#colophon,
	.site-footer {
		-webkit-backdrop-filter: blur(calc(var(--glass-blur)));
		backdrop-filter: blur(calc(var(--glass-blur)));
	}
}

/* --- Móvil: columnas apiladas, centradas --- */
@media (max-width: 544px) {
	footer#colophon .elementor-column,
	.site-footer .elementor-column {
		text-align: center;
	}

	footer#colophon .elementor-social-icons-wrapper,
	.site-footer .elementor-social-icons-wrapper {
		justify-content: center;
	}
}