/* Innovateg Logo Carousel - Marquee infinito CSS puro, con corrección de loop exacto vía JS */

.ilc-carousel-wrapper {
	width: 100%;
	overflow: hidden;
	position: relative;
	-webkit-mask-image: linear-gradient(
		to right,
		transparent 0,
		#000 var(--ilc-fade, 60px),
		#000 calc(100% - var(--ilc-fade, 60px)),
		transparent 100%
	);
	mask-image: linear-gradient(
		to right,
		transparent 0,
		#000 var(--ilc-fade, 60px),
		#000 calc(100% - var(--ilc-fade, 60px)),
		transparent 100%
	);
}

.ilc-carousel-wrapper.ilc-no-fade {
	-webkit-mask-image: none;
	mask-image: none;
}

.ilc-carousel-track {
	display: flex;
	align-items: center;
	width: max-content;
	gap: var(--ilc-gap, 60px);
	/* --ilc-copies lo fija PHP (Widget) con el número real de grupos renderizados.
	   La animación mueve el track exactamente 1/N de su ancho total, donde N es
	   el número de copias, así el reinicio del loop cae siempre en un punto
	   idéntico al inicial: cero salto, cero hueco. */
	animation: ilc-scroll var(--ilc-duration, 30s) linear infinite;
	will-change: transform;
}

.ilc-carousel-wrapper:hover .ilc-carousel-track.ilc-pause-hover {
	animation-play-state: paused;
}

.ilc-carousel-track.ilc-direction-reverse {
	animation-direction: reverse;
}

.ilc-carousel-group {
	display: flex;
	align-items: center;
	gap: var(--ilc-gap, 60px);
	flex-shrink: 0;
}

.ilc-carousel-item {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	height: var(--ilc-logo-height, 60px);
}

.ilc-carousel-item img {
	height: 100%;
	width: auto;
	max-width: none;
	object-fit: contain;
	display: block;
	filter: var(--ilc-filter, none);
	opacity: var(--ilc-opacity, 1);
	transition: filter 0.3s ease, opacity 0.3s ease, transform 0.3s ease;
}

.ilc-carousel-item:hover img {
	filter: var(--ilc-filter-hover, var(--ilc-filter, none));
	opacity: var(--ilc-opacity-hover, 1);
	transform: var(--ilc-scale-hover, none);
}

.ilc-carousel-item a {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
}

@keyframes ilc-scroll {
	from {
		transform: translateX(0);
	}
	to {
		/* CSS flexbox con `gap` en un contenedor `width: max-content` NO añade
		   el gap después del último elemento. Por eso el ancho total del track
		   (100%) es: (ancho_de_un_grupo + gap) * copias − gap_final.
		   Despejando el período real de un grupo (ancho_de_un_grupo + gap):
		     período = (100% + gap) / copias
		   Sin este ajuste, "100% / copias" queda corto exactamente por
		   "gap / copias" en cada ciclo, lo que se percibe como un pequeño
		   salto al reiniciar la animación. */
		transform: translateX( calc( ( -100% - var(--ilc-gap, 60px) ) / var(--ilc-copies, 2) ) );
	}
}

/* Responsive: reducir altura de logos y gap en pantallas pequeñas */
@media (max-width: 1024px) {
	.ilc-carousel-track {
		--ilc-gap: var(--ilc-gap-tablet, 40px);
	}
	.ilc-carousel-item {
		height: var(--ilc-logo-height-tablet, 48px);
	}
}

@media (max-width: 767px) {
	.ilc-carousel-track {
		--ilc-gap: var(--ilc-gap-mobile, 28px);
	}
	.ilc-carousel-item {
		height: var(--ilc-logo-height-mobile, 36px);
	}
	.ilc-carousel-wrapper {
		--ilc-fade: 24px;
	}
}

/* Respetar preferencia de reducir movimiento */
@media (prefers-reduced-motion: reduce) {
	.ilc-carousel-track {
		animation-duration: 90s;
	}
}