/* MD Swiper — estilos compartilhados pelo widget e pelo modo container */

.mdsw-scope {
	position: relative;
	min-width: 0;
}

/* O container (ou seu inner) abriga o carrossel e a navegação. É ele que
 * posiciona setas e paginação, para que possam sair da área dos slides.
 *
 * A classe só existe enquanto o carrossel está montado. Empilhar em coluna é
 * o arranjo certo aqui, porque o conteúdo passou a ser o carrossel mais a
 * navegação: quem organiza os slides agora é o Swiper, e a distância da
 * paginação vem do controle, não do espaçamento do container. */
.mdsw-shell {
	position: relative;
	min-width: 0;
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	gap: 0;
}

/* Área deslizante -------------------------------------------------------- */

.mdsw-scope .mdsw-swiper {
	position: relative;
	width: 100%;
	flex: 0 0 auto;
	align-self: stretch;
	min-width: 0;
	margin-left: auto;
	margin-right: auto;
	overflow: hidden;
	list-style: none;
	padding: 0;
	z-index: 1;
}

.mdsw-scope.mdsw-offset-left .mdsw-swiper {
	padding-inline-start: var(--mdsw-offset-size, 0px);
}

.mdsw-scope.mdsw-offset-right .mdsw-swiper {
	padding-inline-end: var(--mdsw-offset-size, 0px);
}

.mdsw-scope.mdsw-offset-both .mdsw-swiper {
	padding-inline-start: var(--mdsw-offset-size, 0px);
	padding-inline-end: var(--mdsw-offset-size, 0px);
}

.mdsw-scope .mdsw-swiper > .swiper-wrapper {
	position: relative;
	width: 100%;
	height: 100%;
	z-index: 1;
	display: flex;
	flex-wrap: nowrap !important;
	gap: 0 !important;
	align-items: flex-start;
	box-sizing: content-box;
	transition-property: transform;
}

.mdsw-scope.mdsw-equal .mdsw-swiper > .swiper-wrapper {
	align-items: stretch;
}

.mdsw-scope .swiper-wrapper > .swiper-slide {
	flex-shrink: 0;
	width: 100%;
	height: auto;
	position: relative;
	transition-property: transform;
}

.mdsw-scope.mdsw-equal .swiper-wrapper > .swiper-slide {
	display: flex;
	height: auto;
}

.mdsw-scope.mdsw-equal .swiper-wrapper > .swiper-slide > .e-con,
.mdsw-scope.mdsw-equal .swiper-wrapper > .swiper-slide.e-con {
	width: 100%;
	height: 100%;
}

.mdsw-scope .swiper-horizontal {
	touch-action: pan-y;
}

.mdsw-scope .swiper-backface-hidden .swiper-slide {
	transform: translateZ(0);
	backface-visibility: hidden;
}

.mdsw-scope .swiper-fade .swiper-slide {
	pointer-events: none;
	transition-property: opacity;
}

.mdsw-scope .swiper-fade .swiper-slide-active {
	pointer-events: auto;
}

/* Setas ------------------------------------------------------------------ */

.mdsw-scope .mdsw-arrow {
	position: absolute;
	z-index: 10;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: content-box;
	padding: var(--mdsw-arrow-padding, 12px);
	border: var(--mdsw-arrow-border-width, 0px) solid var(--mdsw-arrow-border, transparent);
	border-radius: var(--mdsw-arrow-radius, 50%);
	color: var(--mdsw-arrow-color, #ffffff);
	background: var(--mdsw-arrow-bg, rgba(0, 0, 0, 0.55));
	font-size: var(--mdsw-arrow-icon, 20px);
	line-height: 1;
	cursor: pointer;
	transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
}

.mdsw-scope .mdsw-arrow:hover {
	color: var(--mdsw-arrow-color-hover, var(--mdsw-arrow-color, #ffffff));
	background: var(--mdsw-arrow-bg-hover, var(--mdsw-arrow-bg, rgba(0, 0, 0, 0.55)));
	border-color: var(--mdsw-arrow-border-hover, var(--mdsw-arrow-border, transparent));
}

.mdsw-scope .mdsw-arrow i {
	font-size: inherit;
	line-height: 1;
	width: 1em;
	height: 1em;
	display: block;
	text-align: center;
}

.mdsw-scope .mdsw-arrow svg {
	width: 1em;
	height: 1em;
	fill: currentColor;
	display: block;
}

.mdsw-scope .mdsw-arrow.swiper-button-disabled {
	opacity: 0.35;
	pointer-events: none;
}

.mdsw-scope .mdsw-arrow.hide {
	display: none;
}

.mdsw-scope.mdsw-arrows-inside .mdsw-prev {
	inset-inline-start: var(--mdsw-arrow-h, 10px);
}

.mdsw-scope.mdsw-arrows-inside .mdsw-next {
	inset-inline-end: var(--mdsw-arrow-h, 10px);
}

.mdsw-scope.mdsw-arrows-outside .mdsw-prev {
	inset-inline-end: 100%;
	margin-inline-end: var(--mdsw-arrow-h, 10px);
}

.mdsw-scope.mdsw-arrows-outside .mdsw-next {
	inset-inline-start: 100%;
	margin-inline-start: var(--mdsw-arrow-h, 10px);
}

.mdsw-scope.mdsw-va-center .mdsw-arrow {
	top: 50%;
	transform: translateY(calc(-50% + var(--mdsw-arrow-v, 0px)));
}

.mdsw-scope.mdsw-va-start .mdsw-arrow {
	top: var(--mdsw-arrow-v, 0px);
}

.mdsw-scope.mdsw-va-end .mdsw-arrow {
	bottom: var(--mdsw-arrow-v, 0px);
}

/* Paginação -------------------------------------------------------------- */

/* As variáveis nativas do Swiper são mapeadas para as nossas, para que os
 * controles funcionem mesmo quando as regras do Swiper vencem a cascata. */
.mdsw-scope {
	--swiper-pagination-bullet-width: var(--mdsw-dot-size, 8px);
	--swiper-pagination-bullet-height: var(--mdsw-dot-size, 8px);
	--swiper-pagination-bullet-size: var(--mdsw-dot-size, 8px);
	--swiper-pagination-bullet-horizontal-gap: 0px;
	--swiper-pagination-bullet-vertical-gap: 0px;
	--swiper-pagination-bullet-inactive-color: var(--mdsw-dot-color, rgba(0, 0, 0, 0.25));
	--swiper-pagination-bullet-inactive-opacity: 1;
	--swiper-pagination-color: var(--mdsw-dot-active, #000000);
}

/* O Swiper acrescenta .swiper-pagination e as classes de tipo/direção ao
 * elemento, com position:absolute e bottom fixo. Tudo isso é sobrescrito
 * aqui, com especificidade suficiente para não depender da ordem dos
 * arquivos CSS na página. */
.mdsw-scope .mdsw-pagination.mdsw-pagination,
.mdsw-scope .mdsw-pagination.swiper-pagination {
	position: relative;
	inset: auto;
	width: 100%;
	margin: var(--mdsw-pagination-gap, 20px) 0 0;
	display: flex;
	align-items: center;
	justify-content: var(--mdsw-pagination-justify, center);
	gap: var(--mdsw-dot-gap, 8px);
	transform: none;
	line-height: 1;
	z-index: 10;
}

/* Sobre os slides: volta a ser absoluta, mas com a distância vinda do
 * controle em vez do bottom fixo do Swiper. */
.mdsw-scope.mdsw-pag-inside .mdsw-pagination.mdsw-pagination,
.mdsw-scope.mdsw-pag-inside .mdsw-pagination.swiper-pagination {
	position: absolute;
	inset-inline: var(--mdsw-pagination-h, 0px);
	top: auto;
	bottom: var(--mdsw-pagination-gap, 20px);
	margin: 0;
	width: auto;
}

/* Com distância negativa a paginação sai da área dos slides. Como ela vive no
 * container, e não dentro da parte recortada do carrossel, nada é cortado. */
.mdsw-scope.mdsw-pag-inside,
.mdsw-scope.mdsw-pag-inside .mdsw-shell {
	overflow: visible;
}

/* Bolinhas --------------------------------------------------------------- */

.mdsw-scope .mdsw-pagination .swiper-pagination-bullet {
	display: block;
	flex: 0 0 auto;
	width: var(--mdsw-dot-size, 8px);
	height: var(--mdsw-dot-size, 8px);
	border-radius: 50%;
	background: var(--mdsw-dot-color, rgba(0, 0, 0, 0.25));
	opacity: 1;
	cursor: pointer;
	border: 0;
	padding: 0;
	margin: 0;
	transform: none;
	transition: background 0.2s ease, transform 0.2s ease;
}

.mdsw-scope .mdsw-pagination .swiper-pagination-bullet-active {
	background: var(--mdsw-dot-active, #000000);
	opacity: 1;
	transform: scale(var(--mdsw-dot-active-scale, 1.2));
}

/* Fração ----------------------------------------------------------------- */

.mdsw-scope .mdsw-pagination.swiper-pagination-fraction {
	color: var(--mdsw-fraction-color, inherit);
	font-size: var(--mdsw-fraction-size, 16px);
	gap: 2px;
}

/* Barra de progresso ------------------------------------------------------ */

.mdsw-scope .mdsw-pagination.swiper-pagination-progressbar {
	height: var(--mdsw-progress-height, 4px);
	background: var(--mdsw-progress-bg, rgba(0, 0, 0, 0.15));
	overflow: hidden;
	border-radius: 999px;
	display: block;
}

.mdsw-scope .mdsw-pagination .swiper-pagination-progressbar-fill {
	position: absolute;
	inset-inline-start: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: var(--mdsw-progress-fill, #000000);
	transform-origin: left top;
}

/* Slides vazios precisam de área clicável no editor ----------------------
 *
 * O mínimo não pode ser um valor fixo no container. Estas regras ganham da
 * do Elementor em especificidade, e a altura mínima que o usuário define no
 * slide chega por --min-height: com 120px fixos, essa altura era ignorada no
 * editor e só valia no site publicado.
 *
 * O Elementor declara --min-height: initial em todo .e-con, o que deixa a
 * variável inválida quando nada foi definido. O var() então cai no 120px, e
 * com uma altura definida usa a do usuário. É a mesma conta que o próprio
 * Elementor faz na área vazia do container.
 *
 * O invólucro do modo widget não é um container. Ele não tem --min-height
 * próprio e herdaria o de algum container acima, por isso fica com o valor
 * fixo: o container de dentro, quando mais alto, simplesmente passa dele. */
.elementor-editor-active .mdsw-scope .swiper-slide:not(.e-con),
.elementor-editor-preview .mdsw-scope .swiper-slide:not(.e-con) {
	min-height: 120px;
}

.elementor-editor-active .mdsw-scope .swiper-slide.e-con,
.elementor-editor-preview .mdsw-scope .swiper-slide.e-con,
.elementor-editor-active .mdsw-scope .swiper-slide > .e-con,
.elementor-editor-preview .mdsw-scope .swiper-slide > .e-con {
	min-height: var(--min-height, 120px);
}

/* Modo empilhado: carrossel desligado durante a edição -------------------- */

.mdsw-scope.mdsw-static .mdsw-swiper {
	overflow: visible;
}

.mdsw-scope.mdsw-static .mdsw-swiper > .swiper-wrapper {
	display: block;
	transform: none !important;
}

.mdsw-scope.mdsw-static .swiper-wrapper > .swiper-slide {
	width: 100% !important;
	margin: 0 0 16px !important;
	transform: none !important;
}

.mdsw-scope.mdsw-static .mdsw-arrow,
.mdsw-scope.mdsw-static .mdsw-pagination {
	display: none;
}

/* Chevron de fallback das setas ------------------------------------------ */

.mdsw-scope .mdsw-arrow svg.mdsw-chevron {
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* O container precisa formar um contexto de empilhamento próprio, senão a
 * camada em z-index negativo é pintada atrás do fundo do elemento e nunca
 * aparece. Isso vinha do controle de ativação, mas um container pode ter esse
 * valor sobrescrito, e aí o efeito rodava invisível. Agora vem por variável,
 * pelo mesmo caminho das demais.
 *
 * O recorte precisa de dois mecanismos, porque eles cortam coisas diferentes.
 * O clip-path corta a pintura, e é o que impede a imagem ampliada de aparecer
 * por fora do container. Só que recorte de pintura não tira nada da área
 * rolável da página: a camada ampliada continuava contando como conteúdo
 * transbordado e a página ganhava uma rolagem horizontal do tamanho exato da
 * sobra da ampliação. Era isso que fazia o container parecer deslocado, como
 * se o fundo tivesse perdido a cobertura. O overflow clip corta as duas
 * coisas, e ao contrário de hidden não transforma o container em área de
 * rolagem, então position sticky lá dentro continua funcionando.
 *
 * A margem de recorte leva o corte até a caixa de borda, que é onde o fundo
 * do container é pintado e onde a camada vive. Navegador que não conheça a
 * propriedade simplesmente a ignora e corta na caixa de preenchimento.
 *
 * Sem o efeito ligado as três caem no valor inicial e nada muda. */
.e-con {
	isolation: var(--mdsw-kb-isolation, auto);
	clip-path: var(--mdsw-kb-clip, none);
	overflow: var(--mdsw-kb-overflow, visible);
	overflow-clip-margin: var(--mdsw-kb-clip-margin, 0px);
}

/* =========================================================================
 * Ken Burns
 *
 * Animar a imagem de fundo direto no container não é uma opção: mexer em
 * background-size ou background-position repinta a cada quadro. Em vez
 * disso, uma camada própria recebe a mesma imagem e só o transform dela é
 * animado, que é o que a GPU compõe sem repintar nada.
 *
 * Essa camada é o ::after do container, que o Elementor deixa livre, e ela
 * herda o fundo do container: o plugin nunca precisa saber a URL da imagem.
 * Fica em z-index negativo, dentro do isolamento que o controle liga, então
 * cobre o fundo parado e passa por baixo da sobreposição e do conteúdo.
 *
 * A sobreposição é o ::before do container, e esse é animado diretamente.
 *
 * Sem nenhuma das variáveis definidas, as regras não produzem pseudo-elemento
 * nem animação, e containers que não usam o efeito seguem intactos.
 * ====================================================================== */

.e-con::after {
	content: var(--mdsw-kb-bg-content, none);
	position: absolute;

	/* A mesma caixa que o Elementor usa para a sobreposição, pela mesma conta:
	 * a caixa de borda, que é onde o fundo do container é pintado. Com inset: 0
	 * a camada parava na borda interna, e aí o "cobertura" dela era resolvido
	 * numa caixa menor que a do container: as duas imagens, a parada e a
	 * animada, ficavam com enquadramentos diferentes. */
	top: calc(0px - var(--border-top-width, 0px));
	left: calc(0px - var(--border-left-width, 0px));
	width: max(100% + var(--border-left-width, 0px) + var(--border-right-width, 0px), 100%);
	height: max(100% + var(--border-top-width, 0px) + var(--border-bottom-width, 0px), 100%);

	/* A borda do container é repetida aqui, invisível, só pela geometria.
	 * Um fundo é posicionado pela caixa de preenchimento e pintado até a
	 * caixa de borda. Sem repetir a borda, a camada posicionaria a imagem
	 * numa área maior que a do container e as duas sairiam de registro. Com
	 * a borda repetida, as duas áreas coincidem. Sem borda no container, as
	 * larguras caem para zero e nada disso existe. */
	box-sizing: border-box;
	border-style: var(--border-style, none);
	border-color: transparent;
	border-block-start-width: var(--border-block-start-width, 0px);
	border-inline-end-width: var(--border-inline-end-width, 0px);
	border-block-end-width: var(--border-block-end-width, 0px);
	border-inline-start-width: var(--border-inline-start-width, 0px);

	z-index: -1;
	pointer-events: none;

	/* Mesma imagem do container, com o mesmo enquadramento. */
	background-image: inherit;
	background-size: inherit;
	background-position: inherit;
	background-repeat: inherit;
	background-blend-mode: inherit;

	/* Fundo fixo não acompanha transform: aqui ele rola junto. */
	background-attachment: scroll;

	transform-origin: var(--mdsw-kb-origin, center center);
	animation-name: var(--mdsw-kb-bg-name, none);
	animation-duration: var(--mdsw-kb-duration, 20s);
	animation-delay: var(--mdsw-kb-delay, 0s);
	animation-timing-function: var(--mdsw-kb-ease, linear);
	animation-iteration-count: var(--mdsw-kb-count, infinite);
	animation-direction: var(--mdsw-kb-direction, alternate);
	animation-fill-mode: both;
	animation-play-state: var(--mdsw-kb-play, running);
	will-change: transform;
}

.e-con::before {
	transform-origin: var(--mdsw-kb-origin, center center);
	animation-name: var(--mdsw-kb-ov-name, none);
	animation-duration: var(--mdsw-kb-duration, 20s);
	animation-delay: var(--mdsw-kb-delay, 0s);
	animation-timing-function: var(--mdsw-kb-ease, linear);
	animation-iteration-count: var(--mdsw-kb-count, infinite);
	animation-direction: var(--mdsw-kb-direction, alternate);
	animation-fill-mode: both;
	animation-play-state: var(--mdsw-kb-play, running);
}

/* "Só no slide ativo": o controle apenas marca a intenção, e a pausa é
 * decidida aqui. Assim a marcação não tem efeito nenhum fora de um carrossel,
 * onde nunca existiria um slide ativo para soltar o movimento de volta. */
.mdsw-swiper .swiper-slide:not(.swiper-slide-active),
.mdsw-swiper .swiper-slide:not(.swiper-slide-active) .e-con {
	--mdsw-kb-play: var(--mdsw-kb-pause-off-slide, running);
}

/* No editor, a pausa só vale se o controle pedir: sem a variável, cai no
 * mesmo valor usado no site publicado. */
.elementor-editor-active .e-con::after,
.elementor-editor-active .e-con::before,
.elementor-editor-preview .e-con::after,
.elementor-editor-preview .e-con::before {
	animation-play-state: var(--mdsw-kb-editor-paused, var(--mdsw-kb-play, running));
}

@keyframes mdsw-kb-in {
	from { transform: scale(1); }
	to   { transform: scale(var(--mdsw-kb-scale, 1.12)); }
}

@keyframes mdsw-kb-out {
	from { transform: scale(var(--mdsw-kb-scale, 1.12)); }
	to   { transform: scale(1); }
}

/* No deslize o aumento é fixo, e é a folga dele que o movimento percorre. */
@keyframes mdsw-kb-pan {
	from {
		transform: scale(var(--mdsw-kb-scale, 1.12))
		           translate3d(var(--mdsw-kb-x1, 0%), var(--mdsw-kb-y1, 0%), 0);
	}
	to {
		transform: scale(var(--mdsw-kb-scale, 1.12))
		           translate3d(var(--mdsw-kb-x2, 0%), var(--mdsw-kb-y2, 0%), 0);
	}
}

/* Quem pediu menos movimento no sistema recebe a imagem parada, no
 * enquadramento final, sem perder o enquadramento desenhado. */
@media (prefers-reduced-motion: reduce) {
	.e-con::after,
	.e-con::before {
		animation: none !important;
		transform: none !important;
	}
}