/* ==========================================================
   Marquesina para Elementor — estilos estructurales.
   Los valores de color/tipografía/borde/sombra los inyecta
   Elementor directamente por control (selectors), este archivo
   solo resuelve layout, animación y comportamiento.
   ========================================================== */

.wfm-wrapper {
	overflow: hidden;
	width: 100%;
}

.wfm-inner {
	position: relative;
	transform-origin: center;
}

.wfm-marquesina {
	position: relative;
	width: 100%;
	overflow: hidden;
	--wfm-fade-width: 90px;
}

/* Degradado lateral (fade): el color/gradiente lo pone Elementor
   directamente vía el control "Degradado lateral" (mismo fondo en
   ambos lados). ::after se voltea horizontalmente para que sea el
   espejo exacto de ::before sin tener que configurar dos veces. */
.wfm-marquesina::before,
.wfm-marquesina::after {
	content: "";
	position: absolute;
	top: 0;
	height: 100%;
	width: var(--wfm-fade-width);
	z-index: 5;
	pointer-events: none;
	background: linear-gradient(
		to right,
		var(--wfm-fade-color-1, #07325A) var(--wfm-fade-stop-1, 50%),
		var(--wfm-fade-color-2, rgba(7,50,90,0.6)) var(--wfm-fade-stop-2, 80%),
		transparent 100%
	);
}

/* Capa dedicada para Borde y Sombra de "Marquesina": mismo tamaño exacto
   que la barra visible (a diferencia de .wfm-inner, que es más grande por
   el scale(1.05) y el padding automático anti-recorte), y por encima del
   degradado lateral (z-index 5) para que no quede tapada. */
.wfm-marquesina-border {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 6;
	pointer-events: none;
	box-sizing: border-box;
}

.wfm-marquesina::before {
	left: 0;
}

.wfm-marquesina::after {
	right: 0;
	transform: scaleX(-1);
}

/* Track (la cinta que se mueve).
   La animación NO arranca hasta que el JS agrega .wfm-ready (después
   de terminar de duplicar contenido para llenar el ancho). Si arrancara
   antes, un cambio de ancho a mitad de animación se ve como un salto/
   tirón justo al cargar la página. */
.wfm-track {
	display: flex;
	align-items: center;
	width: max-content;
	will-change: transform;
}

.wfm-track.wfm-ready {
	animation-name: wfm-scroll;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
}

.wfm-track.wfm-is-paused {
	animation-play-state: paused;
}

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

/* Items */
.wfm-item {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	flex: none;
	white-space: nowrap;
}

.wfm-item a {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	color: inherit;
	text-decoration: none;
}

.wfm-item-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: color 0.2s ease;
	line-height: 1;
}

.wfm-item-icon svg {
	width: 1em;
	height: 1em;
	fill: currentColor;
	display: block;
}

.wfm-item-icon i {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
}

.wfm-item-text {
	display: inline-block;
	line-height: 1.2;
	transition: color 0.2s ease;
}

/* Separador */
.wfm-separator {
	flex: none;
	display: inline-flex;
	align-items: center;
	line-height: 1;
}

.wfm-separator svg {
	fill: currentColor;
}

.wfm-separator img {
	display: block;
	width: 24px;
	height: auto;
}

/* Accesibilidad: respeta "reducir movimiento" del sistema operativo,
   solo en las instancias donde el widget lo tiene activado. */
@media (prefers-reduced-motion: reduce) {
	.wfm-track[data-reduced-motion="1"] {
		animation: none !important;
	}
}

/* ==========================================================
   Marquesina Doble: 2 franjas apiladas. Reutiliza toda la CSS de
   arriba (misma estructura .wfm-wrapper/.wfm-inner/.wfm-marquesina/
   .wfm-track dentro de cada franja); la Franja 2 se superpone con
   margin-top negativo (control "Superposición vertical").
   ========================================================== */
.wfm-franja-1,
.wfm-franja-2 {
	position: relative;
}

.wfm-doble-second {
	position: relative;
	z-index: 2;
}