.banner {
	position: relative;
}

.banner .swiper {
	width: 100%;
}

.banner-slide {
	position: relative;
	min-height: 890px;
	display: flex;
	align-items: center;
	background-color: #11192c;
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
}

.banner-slide__video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center center;
}

.banner-slide__overlay {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.7);
	pointer-events: none;
}

/* Link invisível cobrindo o slide inteiro (opção "Clicar na área toda do
   slide" — usa o link do Botão 1). Container/conteúdo ficam com
   pointer-events:none pra clique em qualquer área "vazia" (título,
   descrição, espaço em branco) cair no link de baixo; os botões
   reativam pointer-events pra continuarem clicáveis com o próprio link. */
.banner-slide__full-link {
	position: absolute;
	inset: 0;
}

.banner-slide--full-click .banner-slide__container,
.banner-slide--full-click .banner-slide__content {
	pointer-events: none;
}

.banner-slide--full-click .banner-slide__ctas {
	pointer-events: auto;
}

.banner-slide__container {
	display: flex;
	width: 100%;
}

.banner-slide__container--left {
	justify-content: flex-start;
}

.banner-slide__container--center {
	justify-content: center;
}

.banner-slide__container--right {
	justify-content: flex-end;
}

.banner-slide__content {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: 850px;
	padding: var(--spacing-xl) 0;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: var(--spacing-md);
}

/* Título e descrição alinham cada um independente do outro (cada RichText
   tem seu próprio controle de alinhamento na barra de ferramentas do
   bloco) — por isso a caixa (.banner-slide__content) fica sempre
   "stretch", só o texto de cada elemento é que alinha dentro dela. */
.banner-slide__title--left,
.banner-slide__text--left {
	text-align: left;
}

.banner-slide__title--center,
.banner-slide__text--center {
	text-align: center;
}

.banner-slide__title--right,
.banner-slide__text--right {
	text-align: right;
}

/* Os botões seguem a posição da caixa de conteúdo no container
   (.banner-slide__container--*), não o alinhamento do texto. */
.banner-slide__container--center .banner-slide__ctas {
	justify-content: center;
}

.banner-slide__container--right .banner-slide__ctas {
	justify-content: flex-end;
}

.banner-slide__title {
	color: var(--cor-branco);
	font-family: var(--font-2, var(--font-1, inherit));
	font-size: clamp(1.75rem, 4vw, var(--fs-1, 3rem));
	font-weight: 700;
	margin-bottom: 0;
}

.banner-slide__text {
	color: var(--cor-branco);
	font-size: var(--fs-6, 1.25rem);
	margin-bottom: 0;
}

.banner-slide__ctas {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--spacing-sm);
}

/* Botão em si: .btn-principal/.btn-outline (global.css) — aqui só o
   ajuste específico deste bloco. */
.banner-slide__cta {
	font-weight: 500;
}

/* Slide "respeita tamanho da imagem" — sem overlay/texto, a imagem manda no
   tamanho (sem cover/min-height), slide inteiro clicável. */
.banner-slide--natural {
	min-height: 0;
	display: block;
	background: none;
}

.banner-slide__media-link {
	display: block;
}

.banner-slide__media {
	display: block;
	width: 100%;
	height: auto;
}

/* Paginação do Swiper — fundo do banner é escuro, então usa bolinhas claras
   em vez das cores padrão (--cor-principal) definidas em global.css */
.banner .swiper-pagination-bullet::after {
	background-color: var(--cor-branco);
	opacity: 0.6;
}

.banner .swiper-pagination-bullet-active::after {
	opacity: 1;
	background-color: var(--cor-principal, #fff);
}

.banner .swiper-button {
	background: var(--cor-secundaria, #bb423b);
}

.banner .swiper-button svg path {
	fill: var(--cor-branco);
}


@media (max-width: 1399px) {
	.banner-slide__content {
		max-width: calc(620px + var(--spacing-lg));
		padding: calc(var(--header-height) + 40px) var(--spacing-lg);
	}
}

@media (max-width: 991px) {
	.banner-slide__content {
		padding: calc(var(--header-height) + 40px) 0;
	}
}

@media (max-width: 767px) {
	.banner-slide {
		min-height: 420px;
		height: 100%;
	}

	.banner .swiper-slide {
		height: auto;
	}

	.banner-slide__cta {
		min-width: 0;
		width: 100%;
	}
}

/* Editor: 1 slide por vez (ver preview.js), com navegação no topo */
.banner-editor-nav {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--spacing-sm);
	padding: 8px 0 var(--spacing-xs);
}

.banner-editor-nav__count {
	font-size: 13px;
	color: #757575;
	min-width: 110px;
	text-align: center;
}

.banner-editor-slide {
	position: relative;
	margin-bottom: var(--spacing-sm);
}

/* Preview do editor reaproveita as classes reais do frontend
   (.banner-slide, .banner-slide__container etc — ver preview.js) em vez de
   um jogo de classes "-editor-" paralelo, pra não divergir do frontend com
   o tempo. Só cantos arredondados/corte (cosmético, o editor é um cartão,
   não tela cheia) são específicos daqui. */
.banner-editor-slide .banner-slide,
.banner-editor-slide .banner-slide--natural {
	border-radius: var(--radius-md);
	overflow: hidden;
}

.banner-editor-slide__natural-hint {
	position: relative;
	z-index: 1;
	margin: var(--spacing-md);
	padding: 6px 12px;
	border-radius: var(--radius-sm);
	background: rgba(0, 0, 0, 0.6);
	color: var(--cor-branco);
	font-size: 12px;
	align-self: flex-start;
}