/* ==========================================================================
   AE Marquee Carousel
   Toda la orientación/dirección se controla con variables CSS para que
   Elementor pueda cambiarla por breakpoint (desktop / tablet / móvil).
   ========================================================================== */

.ae-marquee {
	/* Orientación por defecto: horizontal, hacia la izquierda */
	--ae-flow: row;
	--ae-x: 1;
	--ae-y: 0;
	--ae-anim-dir: normal;
	--ae-mask-dir: to right;
	--ae-track-w: max-content;
	--ae-track-h: auto;
	--ae-height: auto;
	--ae-group-pad: 0 var(--ae-gap) 0 0;

	/* Valores que rellena el JS (con fallback CSS-only de 2 grupos) */
	--ae-distance: 50%;
	--ae-duration: 30s;

	--ae-gap: 40px;
	--ae-align: center;

	/* Difuminado */
	--ae-fade-size: 80px;
	--ae-fs: 0px;
	--ae-fe: 0px;
	--ae-fade-edge: rgba(0, 0, 0, 0);
	--ae-fade-color: #ffffff;

	position: relative;
	display: block;
	width: 100%;
	height: var(--ae-height);
	overflow: hidden;
	box-sizing: border-box;
}

.ae-marquee *,
.ae-marquee *::before,
.ae-marquee *::after {
	box-sizing: border-box;
}

.ae-marquee__track {
	display: flex;
	flex-direction: var(--ae-flow);
	width: var(--ae-track-w);
	height: var(--ae-track-h);
	will-change: transform;
	backface-visibility: hidden;
	animation: ae-marquee-scroll var(--ae-duration) linear infinite;
	animation-direction: var(--ae-anim-dir);
}

.ae-marquee__group {
	display: flex;
	flex-direction: var(--ae-flow);
	flex-shrink: 0;
	align-items: var(--ae-align);
	gap: var(--ae-gap);
	padding: var(--ae-group-pad); /* mismo hueco en la "costura" entre copias */
	margin: 0;
	list-style: none;
}

@keyframes ae-marquee-scroll {
	from {
		transform: translate3d(0, 0, 0);
	}
	to {
		transform: translate3d(
			calc(var(--ae-distance) * -1 * var(--ae-x)),
			calc(var(--ae-distance) * -1 * var(--ae-y)),
			0
		);
	}
}

/* Pausas */
.ae-marquee--pause-hover:hover .ae-marquee__track,
.ae-marquee--pause-hover:focus-within .ae-marquee__track,
.ae-marquee.is-offscreen .ae-marquee__track,
.ae-marquee.is-measuring .ae-marquee__track {
	animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
	.ae-marquee--reduced-motion .ae-marquee__track {
		animation-play-state: paused;
	}
}

/* --------------------------------------------------------------------------
   Items
   -------------------------------------------------------------------------- */
.ae-marquee__item {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	flex-shrink: 0;
	margin: 0;
	text-decoration: none;
	color: inherit;
}

.ae-marquee__media {
	display: block;
	overflow: hidden;
	line-height: 0;
}

.ae-marquee__img {
	display: block;
	width: auto;
	height: 80px;
	max-width: none !important;
	object-fit: contain;
	transition-property: transform, filter, opacity;
	transition-duration: 0.3s;
	transition-timing-function: ease;
	-webkit-user-drag: none;
	user-select: none;
}

.ae-marquee__caption {
	display: block;
	margin-top: 8px;
	line-height: 1.3;
	text-align: center;
}

/* --------------------------------------------------------------------------
   Difuminado en los bordes
   -------------------------------------------------------------------------- */
.ae-marquee--fade-both  { --ae-fs: var(--ae-fade-size); --ae-fe: var(--ae-fade-size); }
.ae-marquee--fade-start { --ae-fs: var(--ae-fade-size); --ae-fe: 0px; }
.ae-marquee--fade-end   { --ae-fs: 0px;                 --ae-fe: var(--ae-fade-size); }

/* Modo máscara: las imágenes se vuelven transparentes (funciona sobre cualquier fondo) */
.ae-marquee--fade-mask {
	-webkit-mask-image: linear-gradient(
		var(--ae-mask-dir),
		var(--ae-fade-edge) 0,
		#000 var(--ae-fs),
		#000 calc(100% - var(--ae-fe)),
		var(--ae-fade-edge) 100%
	);
	mask-image: linear-gradient(
		var(--ae-mask-dir),
		var(--ae-fade-edge) 0,
		#000 var(--ae-fs),
		#000 calc(100% - var(--ae-fe)),
		var(--ae-fade-edge) 100%
	);
}

/* Modo color: degradado de un color sólido por encima */
.ae-marquee--fade-color::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
	background: linear-gradient(
		var(--ae-mask-dir),
		var(--ae-fade-color) 0,
		transparent var(--ae-fs),
		transparent calc(100% - var(--ae-fe)),
		var(--ae-fade-color) 100%
	);
}

/* Aviso en el editor cuando no hay imágenes */
.ae-marquee-empty {
	padding: 24px;
	text-align: center;
	border: 1px dashed #c3c4c7;
	color: #787c82;
	font-size: 13px;
}