/* Banner Simples para Elementor */
.sbe-banner {
	--sbe-dot-size: 10px;
	--sbe-dot-gap: 8px;
	--sbe-dot-offset: 16px;
	--sbe-dot-color: rgba(255, 255, 255, .5);
	--sbe-dot-active: #fff;
	--sbe-dot-align: center;
	--sbe-speed: 600ms;
	position: relative;
	width: 100%;
	line-height: 0;
}

.sbe-viewport {
	position: relative;
	overflow: hidden;
	width: 100%;
	transition: height var(--sbe-speed) ease;
}

.sbe-slide picture,
.sbe-slide .sbe-link {
	display: block;
	line-height: 0;
}

/* Imagem sempre na proporção original — nunca recorta */
.sbe-banner .sbe-img {
	display: block;
	height: auto !important;
	max-width: 100% !important;
	object-fit: initial !important;
	border: 0;
	box-shadow: none;
	border-radius: 0;
}

/* 100% do container, altura proporcional */
.sbe-fit-full .sbe-img {
	width: 100% !important;
}

/* Tamanho real em pixels (só reduz se não couber) */
.sbe-fit-natural .sbe-img {
	width: auto !important;
	margin: 0 auto;
}

/* ---------- Efeito deslizar ---------- */
.sbe-effect-slide .sbe-track {
	display: flex;
	align-items: flex-start;
	transition: transform var(--sbe-speed) ease;
	will-change: transform;
}

.sbe-effect-slide .sbe-slide {
	flex: 0 0 100%;
	min-width: 100%;
}

.sbe-effect-slide .sbe-track.is-dragging {
	transition: none;
}

/* ---------- Efeito fade ---------- */
.sbe-effect-fade .sbe-track {
	display: grid;
}

.sbe-effect-fade .sbe-slide {
	grid-area: 1 / 1;
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--sbe-speed) ease, visibility 0s linear var(--sbe-speed);
	z-index: 0;
}

.sbe-effect-fade .sbe-slide.is-active {
	opacity: 1;
	visibility: visible;
	transition: opacity var(--sbe-speed) ease, visibility 0s;
	z-index: 1;
}

/* ---------- Banner único: sem slider ---------- */
.sbe-single .sbe-track {
	transform: none !important;
}

/* ---------- Dots ---------- */
.sbe-dots {
	display: flex;
	justify-content: var(--sbe-dot-align);
	align-items: center;
	gap: var(--sbe-dot-gap);
	line-height: 0;
	padding: 0 16px;
}

.sbe-dots-inside .sbe-dots {
	position: absolute;
	left: 0;
	right: 0;
	bottom: var(--sbe-dot-offset);
	z-index: 3;
	pointer-events: none;
}

.sbe-dots-outside .sbe-dots {
	margin-top: var(--sbe-dot-offset);
}

.sbe-banner .sbe-dot {
	pointer-events: auto;
	appearance: none;
	-webkit-appearance: none;
	display: block;
	width: var(--sbe-dot-size);
	height: var(--sbe-dot-size);
	min-height: 0;
	padding: 0;
	margin: 0;
	border: 0;
	border-radius: 999px;
	background: var(--sbe-dot-color);
	box-shadow: none;
	cursor: pointer;
	transition: background-color .3s ease, width .3s ease;
}

.sbe-banner .sbe-dot:hover,
.sbe-banner .sbe-dot:focus {
	background: var(--sbe-dot-color);
}

.sbe-banner .sbe-dot.is-active {
	background: var(--sbe-dot-active);
	width: var(--sbe-dot-active-w, var(--sbe-dot-size));
}

.sbe-banner .sbe-dot:focus-visible {
	outline: 2px solid var(--sbe-dot-active);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	.sbe-banner,
	.sbe-viewport,
	.sbe-track,
	.sbe-slide {
		--sbe-speed: 0ms !important;
	}
}