/*
 * Cinta infinita de productos (marquee). Se pausa con el mouse.
 *
 *   Contenedor exterior (ancho completo)   → belt
 *     Contenedor interior (fila)           → belt__track
 *       Imágenes de productos (las que quieras)
 *
 * anim.js duplica las imágenes del track para que el loop no tenga corte.
 */

.belt {
	overflow: hidden;
	background: #fff;
	padding: 26px 0;
}

.belt__track {
	display: flex !important;
	flex-direction: row !important; /* Elementor fuerza columna en sus contenedores */
	flex-wrap: nowrap !important;
	gap: 28px !important;
	width: max-content !important;
	max-width: none !important;
	animation: belt-scroll var(--belt-speed, 40s) linear infinite;
}
.belt:hover .belt__track { animation-play-state: paused; }

.belt__track > * { flex: 0 0 auto; width: auto !important; }
.belt__track img {
	width: 110px;
	height: 110px;
	object-fit: contain;
}

/*
 * Variante de logos de marcas, con bordes que se desvanecen:
 *   Contenedor exterior → belt belt--logos
 *   Contenedor fila     → belt__track belt__track--logos
 *   Un widget Imagen por logo (la imagen se cambia desde Elementor).
 */
.belt--logos {
	background: transparent;
	padding: 10px 0;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.belt__track--logos { gap: clamp(44px, 6vw, 88px) !important; align-items: center; }
.belt__track--logos img {
	width: auto;
	height: clamp(30px, 3.2vw, 44px);
	max-width: 160px;
}

@keyframes belt-scroll { to { transform: translateX(-50%); } }

@media (prefers-reduced-motion: reduce) {
	.belt__track { animation: none; }
	.belt { overflow-x: auto; }
}