/* =========================================================================
   css/logos2026.css - Franja de logos de clientes (partials/logos2026.php).
   Mismo aspecto que la de agencias (agencias/css/footer.css), sin Bootstrap.
   ========================================================================= */

.logos-wca {
	position: relative;
	clear: both;
	padding-top: 1.5rem;
	background-color: #fff;
}

/* Mismo ancho que el contenido de la web (80%) */
.logos-wca-ancho {
	width: 80%;
	margin: 0 auto;
}

.logos-wca-marquee {
	overflow: hidden;
	background-color: #fff;
	border-radius: .375rem;
}

.logos-wca-track {
	display: flex;
	align-items: center;
	width: max-content;
	animation: logos-wca 25s linear infinite;   /* la duracion la ajusta el JS */
}

.logos-wca-track:hover {
	animation-play-state: paused;
}

.logos-wca-item {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	height: 70px;
	padding: 0 20px;   /* el JS lo amplia si los logos no llenan la franja */
	box-sizing: content-box;
}

/* En gris y apagados; en color al pasar el raton */
.logos-wca-item img {
	max-width: 130px;
	max-height: 52px;
	width: auto;
	object-fit: contain;
	filter: grayscale(100%);
	opacity: .5;
	transition: all .4s ease-in-out;
}

.logos-wca-item:hover img {
	filter: grayscale(0%);
	opacity: 1;
	transform: scale(1.08);
}

.logos-wca-flecha {
	padding-top: .25rem;
	text-align: center;
	line-height: 0;
}

@keyframes logos-wca {
	0%   { transform: translateX(0); }
	100% { transform: translateX(-50%); }
}

/* Sin regla prefers-reduced-motion a proposito: Windows la activa al apagar
   los efectos de animacion (rendimiento, escritorio remoto, equipos de empresa)
   y muchos usuarios veian el carrusel parado. Sigue parandose al pasar el raton. */

@media (max-width: 767.98px) {
	.logos-wca-ancho {
		width: auto;
		padding: 0 14px;
	}
}