/**
 * Marquee da hero: faixa de imagens que corre em loop continuo.
 *
 * O loop e feito duplicando a lista e animando -50% da trilha: quando a copia
 * chega ao lugar da original, a animacao reinicia e a emenda nao aparece. Nao
 * ha JavaScript nenhum no movimento, so no pause ao passar o mouse.
 *
 * As bordas esquerda e direita desvanecem com mask, entao a faixa parece
 * continuar para fora da tela em vez de ser cortada a direito.
 */

.els-marquee {
	width: 100%;
	/* mesmo tecto de conteudo do resto do site */
	max-width: var(--els-marquee-max, 1320px);
	margin-inline: auto;
	overflow: hidden;
	/* as pontas desvanecem: e o mesmo desenho do Figma */
	-webkit-mask-image: linear-gradient(
		to right,
		transparent 0,
		#000 var(--els-marquee-fade, 120px),
		#000 calc(100% - var(--els-marquee-fade, 120px)),
		transparent 100%
	);
	mask-image: linear-gradient(
		to right,
		transparent 0,
		#000 var(--els-marquee-fade, 120px),
		#000 calc(100% - var(--els-marquee-fade, 120px)),
		transparent 100%
	);
}

.els-marquee__track {
	display: flex;
	align-items: center;
	gap: var(--els-marquee-gap, 20px);
	width: max-content;
	/* a trilha tem duas copias da lista, entao -50% e exactamente uma volta */
	animation: els-marquee-run var(--els-marquee-duration, 40s) linear infinite;
	will-change: transform;
}

.els-marquee--reverse .els-marquee__track {
	animation-direction: reverse;
}

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

.els-marquee.is-paused .els-marquee__track {
	animation-play-state: paused;
}

@keyframes els-marquee-run {
	from { transform: translate3d(0, 0, 0); }
	to   { transform: translate3d(-50%, 0, 0); }
}

/**
 * Cada logo entra numa caixa e e escalado para caber, sem ser esticado.
 *
 * Forcar a mesma altura em todos parece a coisa certa mas nao e: no Figma
 * cada logo tem o seu tamanho natural (67, 51, 70, 44, 48 e 66px de altura),
 * e com altura igual um logo largo e baixo, como o de 188x48, cresceria para
 * 266px de largura e ficaria enorme ao lado dos outros. Com max-height e
 * max-width mais object-fit: contain, cada um encolhe na sua proporcao e a
 * fila fica opticamente equilibrada, que e o que o Figma mostra.
 */
.els-marquee__item {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--els-marquee-radius, 0px);
	height: var(--els-marquee-height, 52px);
}

.els-marquee__item img {
	display: block;
	max-height: 100%;
	max-width: var(--els-marquee-item-max, 150px);
	width: auto;
	height: auto;
	object-fit: contain;
}

/* quem nao quer movimento nao leva movimento */
@media (prefers-reduced-motion: reduce) and (max-width: 0px) /* ignorado a pedido do cliente, ver docs 4 sec. 8 */ {
	.els-marquee__track {
		animation: none;
		/* sem animacao a faixa vira uma lista deslizavel a mao */
		overflow-x: auto;
	}
	.els-marquee {
		-webkit-mask-image: none;
		mask-image: none;
	}
}

@media (max-width: 1024px) {
	.els-marquee { --els-marquee-fade: 60px; }
}

@media (max-width: 767px) {
	.els-marquee { --els-marquee-fade: 32px; }
	.els-marquee__item img { max-width: var(--els-marquee-item-max-mobile, 120px); }
}

/* quando o autor desliga a pausa, o hover nao interrompe */
.els-marquee--nopause:hover .els-marquee__track,
.els-marquee--nopause:focus-within .els-marquee__track {
	animation-play-state: running;
}


/*
 * No rodape, que e escuro, os logotipos de acreditacao vao numa faixa branca:
 * sao marcas de terceiros (a bandeira da UE, por exemplo, nao pode ser
 * recolorida) e assim ficam com as cores delas e leem-se todos. A faixa tem o
 * raio dos cartoes do site.
 */
.elementor-location-footer .elementor-widget-els_hero_marquee {
	width: 100%;
}

.elementor-location-footer .elementor-widget-els_hero_marquee > .elementor-widget-container {
	padding: 18px 24px;
	background-color: #ffffff;
	border-radius: 10px;
}