/* Vidas – Logos (marquesina)
 * Figma "Combo Logos": logos de 44–74px de alto separados 100px, en desplazamiento continuo.
 * Cada logo se centra en vertical dentro de una caja común (alto y ancho máximos) y se escala sin deformarse,
 * así ninguno queda más arriba que otro aunque los archivos tengan tamaños distintos.
 * El JS duplica la fila hasta cubrir el ancho y fija la duración según --vlg-speed (px/s).
 * Sin fondo ni espacio vertical: los pone el contenedor.
 */

.vlg {
	--vlg-h: 74px;
	--vlg-w: 194px;
	--vlg-gap: 100px;
	--vlg-speed: 60;              /* px por segundo (lo lee el JS) */
	--vlg-opacity: 1;
	--vlg-duration: 40s;          /* lo calcula el JS */
	--vlg-distance: 0px;          /* ancho de una fila, lo fija el JS */

	position: relative;
	width: 100%;
	overflow: hidden;
}

.vlg__track {
	display: flex;
	width: max-content;
	will-change: transform;
	animation: vlg-left var(--vlg-duration) linear infinite;
}

.vlg-dir-right .vlg__track {
	animation-name: vlg-right;
}

.vlg-pause-yes .vlg:hover .vlg__track {
	animation-play-state: paused;
}

/* Hasta que el JS mide la fila, quieto (evita un salto al cargar) */
.vlg:not(.is-ready) .vlg__track {
	animation: none;
}

.vlg__group {
	display: flex;
	align-items: center;
	flex: 0 0 auto;
	gap: var(--vlg-gap);
	margin: 0;
	padding: 0 var(--vlg-gap) 0 0;  /* la separación también entre el último y el primero de la siguiente fila */
	list-style: none;
}

.vlg__item {
	display: flex;
	align-items: center;            /* centrado vertical: ninguno queda más arriba */
	justify-content: center;
	flex: 0 0 auto;
	height: var(--vlg-h);
	margin: 0;
	padding: 0;
}

.vlg__img {
	display: block;
	width: auto;
	height: var(--vlg-h);
	max-width: var(--vlg-w);
	max-height: var(--vlg-h);
	object-fit: contain;            /* si choca con el ancho máximo, se reduce sin deformarse y sigue centrado */
	object-position: center;
	opacity: var(--vlg-opacity);
	-webkit-user-drag: none;
	user-select: none;
}

.vlg-gray-yes .vlg__img {
	filter: grayscale(1);
}

@keyframes vlg-left {
	from { transform: translate3d(0, 0, 0); }
	to   { transform: translate3d(calc(-1 * var(--vlg-distance)), 0, 0); }
}

@keyframes vlg-right {
	from { transform: translate3d(calc(-1 * var(--vlg-distance)), 0, 0); }
	to   { transform: translate3d(0, 0, 0); }
}

@media (max-width: 1024px) {
	.vlg {
		--vlg-h: 60px;
		--vlg-w: 158px;
		--vlg-gap: 72px;
	}
}

@media (max-width: 767px) {
	.vlg {
		--vlg-h: 44px;
		--vlg-w: 116px;
		--vlg-gap: 50px;
		--vlg-speed: 40;
	}
}

@media (prefers-reduced-motion: reduce) {
	.vlg__track {
		animation: none !important;
	}

	.vlg {
		overflow-x: auto;
	}
}