.banner-action {
	position: relative;
	padding: var(--spacing-xl) 0;
	background-color: #11192c;
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
	overflow: hidden;
}

.banner-action__overlay {
	position: absolute;
	inset: 0;
	background: rgba(17, 25, 44, 0.9);
}

.banner-action__container {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--spacing-lg);
}

.banner-action__header {
	max-width: 860px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--spacing-sm);
	text-align: center;
	color: var(--cor-branco);
}

.banner-action__header>* {
	margin-bottom: 0;
}

.banner-action__header :is(h1, h2, h3, h4, h5, h6) {
	color: var(--cor-branco);
	font-family: var(--font-2, var(--font-1, inherit));
	font-size: clamp(1.75rem, 4vw, var(--fs-1, 3.125rem));
	font-weight: 700;
}

.banner-action__header p {
	font-size: var(--fs-6, 1.25rem);
}

/* Layout/cor/fonte/hover já vêm de .btn-principal (global.css) — aqui só
   uma largura mínima maior. */
.banner-action__cta {
	min-width: 264px;
}

/* Editor: cartão com cantos arredondados (cosmético, não existe no
   frontend) — segue a regra 5 do blocks/PROMPT-BLOCOS.md. */
.banner-action-editor-wrap .banner-action {
	border-radius: var(--radius-md);
	overflow: hidden;
}