/* ==========================================================================
   MPW - Widgets — estilos del frontend
   Prefijo de clases: mpw-
   ========================================================================== */

/* ==========================================================================
   HEADING HIGHLIGHT
   ========================================================================== */
.mpw-heading-hl { margin: 0; }
.mpw-heading-hl a { color: inherit; text-decoration: none; }

/* Palabra destacada: contenedor base */
.mpw-heading-hl .mpw-hl {
	display: inline-block;          /* necesario para transformaciones */
	position: relative;
	color: var(--mpw-hl-color, currentColor);
	--mpw-hl-dur: 2s;
	--mpw-hl-delay: 0s;
	--mpw-hl-ease: ease-in-out;
	--mpw-hl-iter: infinite;
	--mpw-hl-g1: #4f3de8;
	--mpw-hl-g2: #ff2d8e;
}

/* Degradado opcional en el texto destacado */
.mpw-heading-hl .mpw-hl.mpw-hl-gradient {
	background-image: linear-gradient(var(--mpw-hl-g-angle, 90deg), var(--mpw-hl-g1), var(--mpw-hl-g2));
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
}

/* Subrayado decorativo opcional */
.mpw-heading-hl .mpw-hl.mpw-hl-underline::after {
	content: "";
	position: absolute;
	left: 0; right: 0; bottom: -0.08em;
	height: 2px;
	background: currentColor;
	opacity: .9;
}

/* ----- Animaciones (sólo con .is-anim en el contenedor) -----
   "Al cargar" añade .is-anim en PHP; "al entrar en pantalla" lo añade el JS. */

/* Entrada: aparecer subiendo */
.mpw-heading-hl .mpw-hl.mpw-hl--fade-up { opacity: 0; }
.mpw-heading-hl.is-anim .mpw-hl.mpw-hl--fade-up {
	animation: mpwHlFadeUp var(--mpw-hl-dur) var(--mpw-hl-ease) var(--mpw-hl-delay) 1 both;
}
@keyframes mpwHlFadeUp {
	from { opacity: 0; transform: translateY(0.6em); }
	to   { opacity: 1; transform: translateY(0); }
}

/* Entrada: enfoque (blur) */
.mpw-heading-hl .mpw-hl.mpw-hl--blur-in { opacity: 0; }
.mpw-heading-hl.is-anim .mpw-hl.mpw-hl--blur-in {
	animation: mpwHlBlurIn var(--mpw-hl-dur) var(--mpw-hl-ease) var(--mpw-hl-delay) 1 both;
}
@keyframes mpwHlBlurIn {
	from { opacity: 0; filter: blur(12px); }
	to   { opacity: 1; filter: blur(0); }
}

/* Bucle: brillo (glow) */
.mpw-heading-hl.is-anim .mpw-hl.mpw-hl--glow {
	animation: mpwHlGlow var(--mpw-hl-dur) var(--mpw-hl-ease) var(--mpw-hl-delay) var(--mpw-hl-iter);
}
@keyframes mpwHlGlow {
	0%,100% { text-shadow: 0 0 0 rgba(255,45,142,0); }
	50%     { text-shadow: 0 0 18px rgba(255,45,142,.85); }
}

/* Bucle: barrido — fuerza degradado animado */
.mpw-heading-hl .mpw-hl.mpw-hl--shimmer {
	background-image: linear-gradient(90deg, var(--mpw-hl-g2) 0%, var(--mpw-hl-g1) 25%, #ffffff 50%, var(--mpw-hl-g1) 75%, var(--mpw-hl-g2) 100%);
	background-size: 200% auto;
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
}
.mpw-heading-hl.is-anim .mpw-hl.mpw-hl--shimmer {
	animation: mpwHlShimmer var(--mpw-hl-dur) linear var(--mpw-hl-delay) var(--mpw-hl-iter);
}
@keyframes mpwHlShimmer {
	0%   { background-position: 200% center; }
	100% { background-position: -200% center; }
}

/* Bucle: flotar */
.mpw-heading-hl.is-anim .mpw-hl.mpw-hl--float {
	animation: mpwHlFloat var(--mpw-hl-dur) var(--mpw-hl-ease) var(--mpw-hl-delay) var(--mpw-hl-iter);
}
@keyframes mpwHlFloat {
	0%,100% { transform: translateY(0); }
	50%     { transform: translateY(-0.18em); }
}

/* Entrada: subrayado que crece */
.mpw-heading-hl .mpw-hl.mpw-hl--underline-grow::after {
	content: "";
	position: absolute;
	left: 0; bottom: -0.08em;
	height: 2px; width: 0;
	background: currentColor;
}
.mpw-heading-hl.is-anim .mpw-hl.mpw-hl--underline-grow::after {
	animation: mpwHlUnderline var(--mpw-hl-dur) var(--mpw-hl-ease) var(--mpw-hl-delay) 1 forwards;
}
@keyframes mpwHlUnderline {
	from { width: 0; }
	to   { width: 100%; }
}
/* ==========================================================================
   MARQUEE PRO (loop infinito continuo)
   ========================================================================== */
.mpw-marquee-pro {
	width: 100%;
	overflow: hidden;
	white-space: nowrap;
}

.mpw-marquee-track {
	display: flex;
	width: max-content;
	will-change: transform;
	/* Anima la pista completa el ancho de UNA copia (-50%) para un bucle
	   infinito perfectamente continuo, sin saltos ni reinicios visibles. */
	animation: mpw-marquee-scroll var(--mpw-marquee-speed, 20s) linear infinite;
}

.mpw-marquee-group {
	display: flex;
	align-items: center;
	flex-shrink: 0;
}

.mpw-marquee-dir-right .mpw-marquee-track { animation-direction: reverse; }
.mpw-marquee-pause:hover .mpw-marquee-track { animation-play-state: paused; }

.mpw-marquee-item { display: inline-flex; align-items: center; white-space: nowrap; }
.mpw-marquee-item a { text-decoration: none; }
.mpw-marquee-sep { display: inline-flex; align-items: center; padding: 0 0.4em; user-select: none; }

@keyframes mpw-marquee-scroll {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

/* ==========================================================================
   Accesibilidad: respeta la preferencia de movimiento reducido.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
	.mpw-marquee-track {
		animation: none !important;
	}
	.mpw-heading-hl .mpw-hl {
		animation: none !important;
		opacity: 1 !important;
		filter: none !important;
	}
	.mpw-heading-hl .mpw-hl.mpw-hl--underline-grow::after { width: 100%; }
}