/**
 * El País — Glass Effect utilities
 *
 * Agregá estas clases en el campo "Clases CSS" de cualquier columna/sección
 * /widget de Elementor para obtener el efecto glassmorphism.
 *
 * Clase base:        elpais-glass
 * Variantes claras:  elpais-glass--light   (glass blanco sobre fondo oscuro)
 * Variantes oscuras: elpais-glass--dark    (glass oscuro sobre fondo claro)
 * Modificadores:     elpais-glass--frost   (más blur)
 *                    elpais-glass--subtle  (menos blur)
 *                    elpais-glass--no-border
 *                    elpais-glass--rounded-lg / elpais-glass--rounded-xl / elpais-glass--pill
 *                    elpais-glass--hover   (efecto hover suave)
 *
 * Variables personalizables:
 *   --elpais-glass-bg            (default: rgba(255,255,255,.1))
 *   --elpais-glass-border        (default: rgba(255,255,255,.15))
 *   --elpais-glass-blur          (default: 10px)
 *   --elpais-glass-radius        (default: 14px)
 *   --elpais-glass-shadow        (default: 0 8px 24px rgba(0,0,0,.12))
 */

:root {
	--elpais-glass-bg: rgba(255, 255, 255, 0.10);
	--elpais-glass-border: rgba(255, 255, 255, 0.15);
	--elpais-glass-blur: 10px;
	--elpais-glass-radius: 14px;
	--elpais-glass-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

/* ============================================================
   Base — mismo efecto del box del hero de recetas
   ============================================================ */
.elpais-glass,
.elpais-glass--light {
	background: var(--elpais-glass-bg) !important;
	backdrop-filter: blur(var(--elpais-glass-blur)) saturate(140%) !important;
	-webkit-backdrop-filter: blur(var(--elpais-glass-blur)) saturate(140%) !important;
	border: 1px solid var(--elpais-glass-border) !important;
	border-radius: var(--elpais-glass-radius) !important;
	box-shadow: var(--elpais-glass-shadow) !important;
	overflow: hidden;
}

/* Asegurar que los hijos queden por encima del blur */
.elpais-glass > *,
.elpais-glass--light > *,
.elpais-glass--dark > * {
	position: relative;
	z-index: 1;
}

/* ============================================================
   Variante oscura — glass oscuro sobre fondo claro
   ============================================================ */
.elpais-glass--dark {
	background: rgba(20, 20, 22, 0.35) !important;
	backdrop-filter: blur(var(--elpais-glass-blur)) saturate(140%) !important;
	-webkit-backdrop-filter: blur(var(--elpais-glass-blur)) saturate(140%) !important;
	border: 1px solid rgba(255, 255, 255, 0.08) !important;
	border-radius: var(--elpais-glass-radius) !important;
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18) !important;
	color: #fff;
}

/* ============================================================
   Modificadores de intensidad
   ============================================================ */
.elpais-glass--frost {
	--elpais-glass-blur: 20px;
	--elpais-glass-bg: rgba(255, 255, 255, 0.18);
}

.elpais-glass--subtle {
	--elpais-glass-blur: 6px;
	--elpais-glass-bg: rgba(255, 255, 255, 0.06);
}

/* ============================================================
   Modificadores de radio
   ============================================================ */
.elpais-glass--rounded-lg { --elpais-glass-radius: 20px; }
.elpais-glass--rounded-xl { --elpais-glass-radius: 28px; }
.elpais-glass--pill       { --elpais-glass-radius: 999px; }
.elpais-glass--no-border  { border-color: transparent !important; }

/* ============================================================
   Hover — lift suave
   ============================================================ */
.elpais-glass--hover {
	transition: transform .3s ease, box-shadow .3s ease, background .3s ease;
}
.elpais-glass--hover:hover {
	transform: translateY(-4px);
	box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18) !important;
	background: rgba(255, 255, 255, 0.15) !important;
}
.elpais-glass--dark.elpais-glass--hover:hover {
	background: rgba(20, 20, 22, 0.45) !important;
}

/* ============================================================
   Fallback para navegadores sin backdrop-filter
   ============================================================ */
@supports not ((backdrop-filter: blur(10px)) or (-webkit-backdrop-filter: blur(10px))) {
	.elpais-glass,
	.elpais-glass--light {
		background: rgba(255, 255, 255, 0.85) !important;
	}
	.elpais-glass--dark {
		background: rgba(20, 20, 22, 0.85) !important;
	}
}