/* Banner Cepos Premium (snippet Angie 152): transição suave e zoom leve entre as fotos do banner.
   Só vale depois que o banner.js marca o banner com "cb152-ativo"; sem o script, o e-tabs funciona como antes. */

.cepos-banner-152.cb152-ativo {
	--cb152-transicao: 1.2s;
	--cb152-zoom: 7s;
}

.cepos-banner-152.cb152-ativo .e-tabs-content-area-base {
	position: relative;
	z-index: 0;
	height: 100%;
	overflow: hidden;
}

/* Todas as fotos ficam empilhadas; só a selecionada aparece. */
.cepos-banner-152.cb152-ativo [role="tabpanel"] {
	display: block !important;
	position: absolute;
	inset: 0;
	z-index: 1;
	opacity: 0;
	/* A foto que sai só some depois que a próxima já cobriu a área. */
	transition: opacity 0s linear var(--cb152-transicao);
}

.cepos-banner-152.cb152-ativo [role="tabpanel"].e--selected {
	z-index: 2;
	opacity: 1;
	transition: opacity var(--cb152-transicao) ease-in-out;
}

.cepos-banner-152.cb152-ativo [role="tabpanel"] img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transform: scale(1);
	transition: transform 0s linear calc(var(--cb152-transicao) + 0.1s);
}

/* Zoom leve enquanto a foto está na tela (efeito "Ken Burns"). */
.cepos-banner-152.cb152-ativo [role="tabpanel"].e--selected img {
	transform: scale(1.08);
	transition: transform var(--cb152-zoom) ease-out;
}

@media (prefers-reduced-motion: reduce) {
	.cepos-banner-152.cb152-ativo [role="tabpanel"],
	.cepos-banner-152.cb152-ativo [role="tabpanel"].e--selected,
	.cepos-banner-152.cb152-ativo [role="tabpanel"] img,
	.cepos-banner-152.cb152-ativo [role="tabpanel"].e--selected img {
		transition: none;
		transform: none;
	}
}