/**
 * Zenth Toolkit — zenth-logo-marquee: mecánica de la franja de logos.
 *
 * Solo layout/estructura/animación. Sin colores de marca ni tipografías.
 * El bucle es "perfecto" a -50%: la pista imprime el set de logos DOS
 * veces seguidas (original + clon idéntico), así que desplazar exactamente
 * la mitad del ancho total dejó a la vista, sin salto, la misma posición de
 * partida.
 */

.zenth-marquee {
	overflow: hidden;
	mask-image: linear-gradient( to right, transparent 0, #000 12%, #000 88%, transparent 100% );
	-webkit-mask-image: linear-gradient( to right, transparent 0, #000 12%, #000 88%, transparent 100% );
}

.zenth-marquee__track {
	display: flex;
	align-items: center;
	list-style: none;
	margin: 0;
	padding: 0;
	width: max-content;
	animation: zenth-marquee-scroll var( --zenth-marquee-dur, 40s ) linear infinite;
	will-change: transform;
}

@keyframes zenth-marquee-scroll {
	from {
		transform: translateX( 0 );
	}

	to {
		transform: translateX( -50% );
	}
}

/*
 * Separación por padding-right (no gap): un gap entre el último ítem del
 * original y el primero del clon rompería el cálculo del -50% del bucle.
 */
.zenth-marquee__item {
	display: flex;
	align-items: center;
	flex: 0 0 auto;
	list-style: none;
	padding-right: var( --zenth-marquee-gap, 80px );
}

.zenth-marquee__link {
	display: inline-flex;
	align-items: center;
}

/*
 * !important: Elementor/el navegador tienden a colapsar SVG sin
 * width/height intrínsecos a 0 o a su tamaño de viewBox; forzamos aquí el
 * alto de diseño y ancho automático por encima de cualquier estilo inline
 * que pueda traer el <img>.
 */
.zenth-marquee__logo {
	height: var( --zenth-marquee-h, 46px ) !important;
	width: auto !important;
	max-width: none;
	display: block;
}

.zenth-marquee--pausable:hover .zenth-marquee__track,
.zenth-marquee--pausable:focus-within .zenth-marquee__track {
	animation-play-state: paused;
}

/* Siempre (con o sin "Pausar en hover/foco"): un logo enlazado que recibe
   foco de TECLADO no puede seguir desplazándose debajo del anillo de foco.
   :focus-visible y no :focus-within, para que un clic con el mouse no la
   detenga. */
.zenth-marquee:has( .zenth-marquee__link:focus-visible ) .zenth-marquee__track {
	animation-play-state: paused;
}

@media ( prefers-reduced-motion: reduce ) {
	.zenth-marquee__track {
		animation: none;
		width: auto;
		flex-wrap: wrap;
		justify-content: center;
	}

	.zenth-marquee__item--clone {
		display: none;
	}
}