/*
 * SLZ Viagens — comportamentos de front para seções montadas no Elementor V4
 * (o converter de estilos do Elementor descarta `animation`, então vêm daqui).
 * Classes: .slz-marquee / .slz-marquee-trilho / .slz-marquee-reverso
 *          .slz-carrossel / -trilho / -anterior / -proximo / -pontos
 *          .slz-revelar
 */

/* 1. Faixa contínua (marquee). Os itens são duplicados no Elementor: -50% emenda perfeito. */
.slz-marquee {
	overflow: hidden;
}

.slz-marquee-trilho {
	display: flex;
	width: max-content;
	animation: slz-marquee 40s linear infinite;
	will-change: transform;
}

.slz-marquee-reverso .slz-marquee-trilho,
.slz-marquee-trilho.slz-marquee-reverso {
	animation-direction: reverse;
}

@keyframes slz-marquee {
	from { transform: translateX(0); }
	to { transform: translateX(-50%); }
}

/* 2. Carrossel. Com Embla (loop infinito), o trilho vira a faixa que desliza dentro da janela. */
.slz-carrossel-janela {
	width: 100%;
	min-width: 0;
	overflow: hidden;
}

@supports (overflow: clip) {
	.slz-carrossel-janela {
		overflow: visible;
		overflow-x: clip;
	}
}

.slz-carrossel.is-embla .slz-carrossel-janela > .slz-carrossel-trilho {
	overflow: visible;
	scroll-snap-type: none;
	padding-left: 0;
	padding-right: 0;
	touch-action: pan-y pinch-zoom;
	-webkit-user-select: none;
	user-select: none;
}

.slz-carrossel.is-embla .slz-carrossel-janela > .slz-carrossel-trilho {
	/* O Embla move o trilho quadro a quadro: qualquer transição em transform (o Elementor põe 0.4s
	   nos containers) faz o carrossel "escorregar" atrás do mouse e embaralhar os cards no loop. */
	transition: none;
	will-change: transform;
	backface-visibility: hidden;
}

.slz-carrossel.is-embla .slz-carrossel-janela > .slz-carrossel-trilho > * {
	flex-shrink: 0;
	transition-property: background-color, border-color, box-shadow, opacity;
}

.slz-carrossel.is-embla.is-estatico .slz-carrossel-trilho {
	cursor: auto;
}

.slz-carrossel.is-embla .slz-carrossel-trilho.is-segurando {
	cursor: grabbing;
}

.slz-carrossel.is-embla .slz-carrossel-trilho img,
.slz-carrossel.is-embla .slz-carrossel-trilho a {
	-webkit-user-drag: none;
}

.slz-carrossel-trilho {
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	-ms-overflow-style: none;
	overscroll-behavior-x: contain;
}

.slz-carrossel-trilho::-webkit-scrollbar {
	display: none;
}

.slz-carrossel-trilho > * {
	scroll-snap-align: start;
}

.slz-carrossel-trilho.is-arrastando {
	scroll-snap-type: none;
	cursor: grabbing;
	user-select: none;
}

.slz-carrossel-trilho.is-arrastando * {
	pointer-events: none;
}

@media (hover: hover) and (pointer: fine) {
	.slz-carrossel-trilho {
		cursor: grab;
	}
}

.slz-carrossel-anterior,
.slz-carrossel-proximo {
	cursor: pointer;
	transition: opacity .2s ease, background-color .2s ease;
}

.slz-carrossel-anterior[aria-disabled="true"],
.slz-carrossel-proximo[aria-disabled="true"] {
	opacity: .45;
	cursor: default;
}

.slz-carrossel-pontos {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	gap: 6px;
}

/* Especificidade (0,2,0)+ para vencer o reset de <button> do Hello Elementor (width:auto, borda e hover rosa). */
.slz-carrossel-pontos .slz-carrossel-ponto,
.slz-carrossel-pontos .slz-carrossel-ponto:hover,
.slz-carrossel-pontos .slz-carrossel-ponto:focus {
	flex: none;
	width: 8px;
	min-width: 0;
	height: 8px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 99px;
	background: var(--slz-ponto, rgba(15, 58, 99, .22));
	box-shadow: none;
	cursor: pointer;
	appearance: none;
	transition: width .3s ease, background-color .3s ease;
}

.slz-carrossel-pontos .slz-carrossel-ponto.is-ativo,
.slz-carrossel-pontos .slz-carrossel-ponto.is-ativo:hover,
.slz-carrossel-pontos .slz-carrossel-ponto.is-ativo:focus {
	width: 40px;
	background: var(--slz-ponto-ativo, #0e3462);
}

/* Em seção escura (ex.: azul do Figma): pontos brancos e ativo laranja. */
.slz-tema-escuro {
	--slz-ponto: rgba(255, 255, 255, .6);
	--slz-ponto-ativo: #ffa249;
}

.slz-carrossel-pontos .slz-carrossel-ponto:focus-visible,
.slz-carrossel-anterior:focus-visible,
.slz-carrossel-proximo:focus-visible {
	outline: 2px solid #1e96dc;
	outline-offset: 2px;
}

/* 3. Revelar ao rolar (só esconde quando o JS está ativo e fora do editor do Elementor). */
.slz-js body:not(.elementor-editor-active) .slz-revelar:not(.is-visivel) {
	opacity: 0;
	transform: translateY(24px);
}

.slz-js .slz-revelar {
	transition: opacity .7s cubic-bezier(.2, .7, .2, 1), transform .7s cubic-bezier(.2, .7, .2, 1);
}

@media (prefers-reduced-motion: reduce) {
	.slz-marquee-trilho {
		animation: none;
	}

	.slz-marquee {
		overflow-x: auto;
	}

	.slz-js body:not(.elementor-editor-active) .slz-revelar:not(.is-visivel) {
		opacity: 1;
		transform: none;
	}

	.slz-js .slz-revelar,
	.slz-carrossel-pontos .slz-carrossel-ponto {
		transition: none;
	}
}