/* ================================================================
   ACE — Gestor de Banners · CSS do banner (site e prévia do painel)

   Todo seletor começa com `.abm-wrap.abm-wrap` de propósito: a classe
   repetida dá especificidade (0,2,x), acima de qualquer regra do Kit
   do Elementor ou do tema (que são de classe, 0,1,x). Sem isso o Kit
   reescreve tipografia e cor direto nos elementos e o banner chega
   torto no site.

   O tamanho responde ao CONTAINER, não à janela: `container-type` no
   wrapper + unidades `cqw`. Assim o mesmo banner fica certo dentro de
   um artigo de 780px, de uma página cheia de 1200px ou de uma barra
   lateral de 340px.

   Cada tema define TODAS as cores (fundo, tinta, botão, textura), para
   que a paleta das três marcas conviva no mesmo arquivo.
   ================================================================ */

.abm-wrap.abm-wrap {
	container-type: inline-size;
	display: block;
	width: 100%;
	clear: both;
	margin: 34px 0;

	/* ---- texturas de quadradinhos, uma por família de cor ---- */
	--abm-pontos-branco: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22'%3E%3Crect width='9' height='9' fill='%23ffffff'/%3E%3C/svg%3E");
	--abm-pontos-azul: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22'%3E%3Crect width='9' height='9' fill='%233480A2'/%3E%3C/svg%3E");
	--abm-pontos-roxo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22'%3E%3Crect width='9' height='9' fill='%235B3A97'/%3E%3C/svg%3E");
	--abm-pontos-grafite: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22'%3E%3Crect width='9' height='9' fill='%231F1E1D'/%3E%3C/svg%3E");
	--abm-pontos-dourado: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22'%3E%3Crect width='9' height='9' fill='%23F5D35E'/%3E%3C/svg%3E");

	/* ---- valores de partida (o tema sobrescreve) ---- */
	--abm-fundo: #5B3A97;
	--abm-tinta: #FFFFFF;
	--abm-tinta-suave: rgba(255, 255, 255, .72);
	--abm-btn-fundo: #FFFFFF;
	--abm-btn-tinta: #2E1D4C;
	--abm-pontos: var(--abm-pontos-branco);
	--abm-pontos-opacidade: .17;
	--abm-raio: 24px;

	--abm-fonte: "Urbanist", "Helvetica Neue", Helvetica, Arial, sans-serif;
	--abm-fonte-titulo: var(--abm-fonte);
	--abm-peso-titulo: 700;
}

/* ---------------------------------------------------------------
   Armadura: o Kit do Elementor escreve tipografia direto nos
   elementos, e herança sempre perde para declaração no próprio
   elemento. Então todo descendente é obrigado a herdar de volta.
   --------------------------------------------------------------- */
.abm-wrap.abm-wrap *,
.abm-wrap.abm-wrap *::before,
.abm-wrap.abm-wrap *::after {
	box-sizing: border-box;
	font-family: inherit;
	font-style: inherit;
	line-height: inherit;
	text-transform: inherit;
	letter-spacing: inherit;
	color: inherit;
	text-decoration: none;
	margin: 0;
	padding: 0;
}

/* ---------------------------------------------------------------
   Grupo do teste A/B/C: o script do plugin deixa uma variante só
   --------------------------------------------------------------- */
.abm-teste {
	display: block;
}

.abm-teste .abm-variante[hidden] {
	display: none !important;
}

/* ---------------------------------------------------------------
   O banner
   --------------------------------------------------------------- */
.abm-wrap.abm-wrap .abm-banner {
	position: relative;
	display: flex;
	overflow: hidden;
	isolation: isolate;
	box-sizing: border-box;
	width: 100%;
	padding: clamp(22px, 3.1cqw, 42px) clamp(22px, 3.4cqw, 46px);
	background: var(--abm-fundo);
	border-radius: var(--abm-raio);
	color: var(--abm-tinta);
	font-family: var(--abm-fonte);
	font-style: normal;
	letter-spacing: normal;
	text-transform: none;
	text-decoration: none;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
	transition: transform .22s cubic-bezier(.2, .6, .2, 1), box-shadow .22s cubic-bezier(.2, .6, .2, 1);
}

.abm-wrap.abm-wrap a.abm-banner:hover,
.abm-wrap.abm-wrap a.abm-banner:focus-visible {
	transform: translateY(-2px);
	box-shadow: 0 14px 34px rgba(34, 50, 60, .22);
	text-decoration: none;
}

.abm-wrap.abm-wrap a.abm-banner:focus-visible {
	outline: 3px solid var(--abm-fundo);
	outline-offset: 3px;
}

.abm-wrap.abm-wrap .abm-banner.abm--reto {
	--abm-raio: 0px;
}

/* ---------------------------------------------------------------
   Temas — ACE Ventures
   --------------------------------------------------------------- */
.abm-wrap.abm-wrap .abm--tema-ventures-roxo {
	--abm-fundo: #5B3A97;
	--abm-tinta: #FFFFFF;
	--abm-tinta-suave: rgba(255, 255, 255, .74);
	--abm-btn-fundo: #FFFFFF;
	--abm-btn-tinta: #2E1D4C;
	--abm-pontos: var(--abm-pontos-branco);
	--abm-pontos-opacidade: .17;
}

.abm-wrap.abm-wrap .abm--tema-ventures-profundo {
	--abm-fundo: #2E1D4C;
	--abm-tinta: #FFFFFF;
	--abm-tinta-suave: rgba(255, 255, 255, .70);
	--abm-btn-fundo: #FFFFFF;
	--abm-btn-tinta: #2E1D4C;
	--abm-pontos: var(--abm-pontos-branco);
	--abm-pontos-opacidade: .15;
}

.abm-wrap.abm-wrap .abm--tema-ventures-gradiente {
	--abm-fundo: linear-gradient(115deg, #2E1D4C 0%, #43296E 46%, #8968BE 100%);
	--abm-tinta: #FFFFFF;
	--abm-tinta-suave: rgba(255, 255, 255, .74);
	--abm-btn-fundo: #FFFFFF;
	--abm-btn-tinta: #2E1D4C;
	--abm-pontos: var(--abm-pontos-branco);
	--abm-pontos-opacidade: .16;
}

.abm-wrap.abm-wrap .abm--tema-ventures-claro {
	--abm-fundo: #EAE2F5;
	--abm-tinta: #2E1D4C;
	--abm-tinta-suave: #6A4E9C;
	--abm-btn-fundo: #5B3A97;
	--abm-btn-tinta: #FFFFFF;
	--abm-pontos: var(--abm-pontos-roxo);
	--abm-pontos-opacidade: .20;
}

/* ---------------------------------------------------------------
   Temas — ACE Advisors
   --------------------------------------------------------------- */
.abm-wrap.abm-wrap .abm--tema-advisors-azul {
	--abm-fundo: #3480A2;
	--abm-tinta: #FFFFFF;
	--abm-tinta-suave: rgba(255, 255, 255, .74);
	--abm-btn-fundo: #FFFFFF;
	--abm-btn-tinta: #22323C;
	--abm-pontos: var(--abm-pontos-branco);
	--abm-pontos-opacidade: .17;
}

.abm-wrap.abm-wrap .abm--tema-advisors-navy {
	--abm-fundo: #324753;
	--abm-tinta: #FFFFFF;
	--abm-tinta-suave: rgba(255, 255, 255, .72);
	--abm-btn-fundo: #FFFFFF;
	--abm-btn-tinta: #22323C;
	--abm-pontos: var(--abm-pontos-branco);
	--abm-pontos-opacidade: .16;
}

.abm-wrap.abm-wrap .abm--tema-advisors-profundo {
	--abm-fundo: #22323C;
	--abm-tinta: #FFFFFF;
	--abm-tinta-suave: rgba(255, 255, 255, .70);
	--abm-btn-fundo: #FFFFFF;
	--abm-btn-tinta: #22323C;
	--abm-pontos: var(--abm-pontos-branco);
	--abm-pontos-opacidade: .15;
}

.abm-wrap.abm-wrap .abm--tema-advisors-gradiente {
	--abm-fundo: linear-gradient(115deg, #22323C 0%, #324753 46%, #3480A2 100%);
	--abm-tinta: #FFFFFF;
	--abm-tinta-suave: rgba(255, 255, 255, .74);
	--abm-btn-fundo: #FFFFFF;
	--abm-btn-tinta: #22323C;
	--abm-pontos: var(--abm-pontos-branco);
	--abm-pontos-opacidade: .16;
}

.abm-wrap.abm-wrap .abm--tema-advisors-claro {
	--abm-fundo: #EEF4F8;
	--abm-tinta: #22323C;
	--abm-tinta-suave: #2A6684;
	--abm-btn-fundo: #3480A2;
	--abm-btn-tinta: #FFFFFF;
	--abm-pontos: var(--abm-pontos-azul);
	--abm-pontos-opacidade: .20;
}

/* ---------------------------------------------------------------
   Temas — ACE Cortex (dourado é sempre accent, nunca o fundo todo,
   menos no tema Dourado, que é o accent virando peça)
   --------------------------------------------------------------- */
.abm-wrap.abm-wrap .abm--tema-cortex-grafite {
	--abm-fundo: #1F1E1D;
	--abm-tinta: #FFFFFF;
	--abm-tinta-suave: #F5D35E;
	--abm-btn-fundo: #F5D35E;
	--abm-btn-tinta: #1F1E1D;
	--abm-pontos: var(--abm-pontos-dourado);
	--abm-pontos-opacidade: .22;
}

.abm-wrap.abm-wrap .abm--tema-cortex-dourado {
	--abm-fundo: #F5D35E;
	--abm-tinta: #1F1E1D;
	--abm-tinta-suave: #6B5A1E;
	--abm-btn-fundo: #1F1E1D;
	--abm-btn-tinta: #FFFFFF;
	--abm-pontos: var(--abm-pontos-grafite);
	--abm-pontos-opacidade: .16;
}

.abm-wrap.abm-wrap .abm--tema-cortex-creme {
	--abm-fundo: #F6F5EE;
	--abm-tinta: #1F1E1D;
	--abm-tinta-suave: #595959;
	--abm-btn-fundo: #1F1E1D;
	--abm-btn-tinta: #FFFFFF;
	--abm-pontos: var(--abm-pontos-grafite);
	--abm-pontos-opacidade: .14;
}

/* ---------------------------------------------------------------
   Tema neutro
   --------------------------------------------------------------- */
.abm-wrap.abm-wrap .abm--tema-neutro-preto {
	--abm-fundo: #212121;
	--abm-tinta: #FFFFFF;
	--abm-tinta-suave: rgba(255, 255, 255, .70);
	--abm-btn-fundo: #FFFFFF;
	--abm-btn-tinta: #212121;
	--abm-pontos: var(--abm-pontos-branco);
	--abm-pontos-opacidade: .15;
}

/* ---------------------------------------------------------------
   Com foto por cima, a tinta é sempre branca — vem depois dos
   temas, e com uma classe a mais, para ganhar de todos eles
   --------------------------------------------------------------- */
.abm-wrap.abm-wrap .abm-banner.abm--com-foto {
	--abm-tinta: #FFFFFF;
	--abm-tinta-suave: rgba(255, 255, 255, .78);
	--abm-btn-fundo: #FFFFFF;
	--abm-btn-tinta: #22323C;
	--abm-pontos: var(--abm-pontos-branco);
	--abm-pontos-opacidade: .16;
}

/* ---------------------------------------------------------------
   Foto de fundo e véu
   --------------------------------------------------------------- */
.abm-wrap.abm-wrap .abm-banner__foto {
	position: absolute;
	inset: 0;
	z-index: 0;
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	border-radius: inherit;
}

.abm-wrap.abm-wrap .abm-banner__veu {
	position: absolute;
	inset: 0;
	z-index: 1;
	display: block;
	background:
		linear-gradient(90deg, #12212A 0%, rgba(18, 33, 42, .55) 58%, rgba(18, 33, 42, .18) 100%),
		linear-gradient(180deg, rgba(18, 33, 42, .35), rgba(18, 33, 42, .55));
	border-radius: inherit;
	pointer-events: none;
}

.abm-wrap.abm-wrap .abm--centro .abm-banner__veu {
	background: linear-gradient(180deg, rgba(18, 33, 42, .45), rgba(18, 33, 42, .72));
}

/* ---------------------------------------------------------------
   Textura de quadradinhos
   --------------------------------------------------------------- */
.abm-wrap.abm-wrap .abm-banner__pontos {
	position: absolute;
	right: -4px;
	bottom: -6px;
	z-index: 2;
	display: block;
	width: clamp(120px, 20cqw, 236px);
	height: 62%;
	background-image: var(--abm-pontos);
	background-size: 22px 22px;
	background-repeat: repeat;
	opacity: var(--abm-pontos-opacidade);
	pointer-events: none;
}

.abm-wrap.abm-wrap .abm--fina .abm-banner__pontos {
	height: 100%;
	bottom: 0;
	width: clamp(90px, 14cqw, 180px);
}

.abm-wrap.abm-wrap .abm--card .abm-banner__pontos,
.abm-wrap.abm-wrap .abm--meia .abm-banner__pontos {
	width: 70%;
	height: 30%;
}

.abm-wrap.abm-wrap .abm--centro .abm-banner__pontos {
	left: 50%;
	right: auto;
	transform: translateX(-50%);
	width: 78%;
}

/* ---------------------------------------------------------------
   Conteúdo
   --------------------------------------------------------------- */
.abm-wrap.abm-wrap .abm-banner__inner {
	position: relative;
	z-index: 3;
	display: flex;
	flex: 1 1 auto;
	align-items: center;
	justify-content: space-between;
	gap: clamp(20px, 3cqw, 44px);
	width: 100%;
}

.abm-wrap.abm-wrap .abm-banner__texto {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
	max-width: 62%;
}

.abm-wrap.abm-wrap .abm-banner__logo {
	display: block;
	width: auto;
	height: clamp(18px, 1.9cqw, 26px);
	max-width: 200px;
	margin-bottom: 4px;
	object-fit: contain;
}

.abm-wrap.abm-wrap .abm-banner__etiqueta {
	display: block;
	font-size: clamp(10px, .95cqw, 12px);
	font-weight: 600;
	letter-spacing: .16em;
	line-height: 1.4;
	text-transform: uppercase;
	color: var(--abm-tinta-suave);
}

.abm-wrap.abm-wrap .abm-banner__titulo {
	display: block;
	font-family: var(--abm-fonte-titulo);
	font-size: clamp(21px, 2.9cqw, 34px);
	font-weight: var(--abm-peso-titulo);
	line-height: 1.15;
	letter-spacing: -.02em;
	text-wrap: balance;
	color: var(--abm-tinta);
}

.abm-wrap.abm-wrap .abm-banner__desc {
	display: block;
	max-width: 46ch;
	font-size: clamp(13px, 1.25cqw, 16px);
	font-weight: 400;
	line-height: 1.55;
	color: var(--abm-tinta-suave);
}

.abm-wrap.abm-wrap .abm-banner__acao {
	position: relative;
	z-index: 4;
	flex: 0 0 auto;
}

.abm-wrap.abm-wrap .abm-banner__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: clamp(12px, 1.25cqw, 16px) clamp(20px, 2.4cqw, 32px);
	background: var(--abm-btn-fundo);
	border-radius: 999px;
	color: var(--abm-btn-tinta);
	font-size: clamp(13px, 1.25cqw, 16px);
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: 0;
	white-space: nowrap;
	transition: filter .2s ease;
}

.abm-wrap.abm-wrap a.abm-banner:hover .abm-banner__cta {
	filter: brightness(.94);
}

/* ---------------------------------------------------------------
   Alinhamento central
   --------------------------------------------------------------- */
.abm-wrap.abm-wrap .abm--centro .abm-banner__inner {
	flex-direction: column;
	justify-content: center;
	text-align: center;
	gap: clamp(18px, 2cqw, 28px);
}

.abm-wrap.abm-wrap .abm--centro .abm-banner__texto {
	align-items: center;
	max-width: 46ch;
}

.abm-wrap.abm-wrap .abm--centro .abm-banner__desc {
	margin-inline: auto;
}

/* ---------------------------------------------------------------
   Formatos (as medidas de referência estão no painel)
   --------------------------------------------------------------- */
.abm-wrap.abm-wrap .abm--faixa {
	min-height: clamp(176px, 20.8cqw, 250px);
}

.abm-wrap.abm-wrap .abm--billboard {
	min-height: clamp(260px, 33.3cqw, 400px);
}

.abm-wrap.abm-wrap .abm--billboard .abm-banner__titulo {
	font-size: clamp(24px, 3.5cqw, 44px);
}

.abm-wrap.abm-wrap .abm--fina {
	min-height: clamp(92px, 10cqw, 120px);
	padding-block: clamp(16px, 1.6cqw, 22px);
}

.abm-wrap.abm-wrap .abm--fina .abm-banner__titulo {
	font-size: clamp(16px, 1.85cqw, 22px);
	line-height: 1.25;
}

.abm-wrap.abm-wrap .abm--fina .abm-banner__desc,
.abm-wrap.abm-wrap .abm--fina .abm-banner__logo {
	display: none;
}

.abm-wrap.abm-wrap .abm--card,
.abm-wrap.abm-wrap .abm--meia {
	padding: clamp(26px, 8cqw, 40px);
}

.abm-wrap.abm-wrap .abm--card {
	aspect-ratio: 1 / 1;
	min-height: 300px;
	max-height: 440px;
}

.abm-wrap.abm-wrap .abm--meia {
	aspect-ratio: 1 / 2;
	min-height: 480px;
	max-height: 820px;
}

/* nos verticais o conteúdo empilha e desce para o pé do cartão */
.abm-wrap.abm-wrap .abm--card .abm-banner__inner,
.abm-wrap.abm-wrap .abm--meia .abm-banner__inner {
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-end;
	gap: clamp(18px, 5cqw, 28px);
}

.abm-wrap.abm-wrap .abm--card .abm-banner__texto,
.abm-wrap.abm-wrap .abm--meia .abm-banner__texto {
	max-width: 100%;
}

.abm-wrap.abm-wrap .abm--card .abm-banner__titulo,
.abm-wrap.abm-wrap .abm--meia .abm-banner__titulo {
	font-size: clamp(22px, 7.6cqw, 34px);
}

.abm-wrap.abm-wrap .abm--card .abm-banner__etiqueta,
.abm-wrap.abm-wrap .abm--meia .abm-banner__etiqueta {
	font-size: clamp(10px, 2.8cqw, 12px);
}

.abm-wrap.abm-wrap .abm--card .abm-banner__desc,
.abm-wrap.abm-wrap .abm--meia .abm-banner__desc,
.abm-wrap.abm-wrap .abm--card .abm-banner__cta,
.abm-wrap.abm-wrap .abm--meia .abm-banner__cta {
	font-size: clamp(13px, 3.6cqw, 16px);
}

.abm-wrap.abm-wrap .abm--card .abm-banner__logo,
.abm-wrap.abm-wrap .abm--meia .abm-banner__logo {
	height: clamp(18px, 5.4cqw, 26px);
}

.abm-wrap.abm-wrap .abm--card .abm-banner__cta,
.abm-wrap.abm-wrap .abm--meia .abm-banner__cta {
	padding: 14px clamp(20px, 6cqw, 28px);
}

/* o card quadrado é apertado: sem descrição o desenho respira melhor */
.abm-wrap.abm-wrap .abm--card .abm-banner__desc {
	display: none;
}

/* ---------------------------------------------------------------
   Container estreito: coluna de artigo no celular, barra lateral,
   widget dentro de coluna de 1/3. Tudo empilha.
   --------------------------------------------------------------- */
@container (max-width: 620px) {

	.abm-wrap.abm-wrap .abm--faixa,
	.abm-wrap.abm-wrap .abm--billboard,
	.abm-wrap.abm-wrap .abm--fina {
		min-height: 0;
		padding: 26px 24px;
	}

	.abm-wrap.abm-wrap .abm-banner__inner {
		flex-direction: column;
		align-items: flex-start;
		justify-content: flex-start;
		gap: 22px;
	}

	.abm-wrap.abm-wrap .abm-banner__texto {
		max-width: 100%;
	}

	.abm-wrap.abm-wrap .abm-banner__titulo {
		font-size: clamp(20px, 5.6cqw, 27px);
	}

	.abm-wrap.abm-wrap .abm--billboard .abm-banner__titulo {
		font-size: clamp(21px, 6.2cqw, 30px);
	}

	.abm-wrap.abm-wrap .abm--fina .abm-banner__titulo {
		font-size: clamp(17px, 4.6cqw, 21px);
	}

	.abm-wrap.abm-wrap .abm-banner__etiqueta {
		font-size: 10px;
	}

	.abm-wrap.abm-wrap .abm-banner__desc,
	.abm-wrap.abm-wrap .abm-banner__cta {
		font-size: 14px;
	}

	.abm-wrap.abm-wrap .abm-banner__cta {
		padding: 13px 24px;
	}

	.abm-wrap.abm-wrap .abm-banner__pontos {
		width: 52%;
		height: 46%;
		opacity: calc(var(--abm-pontos-opacidade) * .8);
	}

	.abm-wrap.abm-wrap .abm--centro .abm-banner__inner {
		align-items: center;
	}
}

/* ---------------------------------------------------------------
   Aviso que só quem administra o site vê
   --------------------------------------------------------------- */
.abm-aviso {
	margin: 20px 0;
	padding: 12px 16px;
	border: 1px dashed #C5C3C0;
	border-radius: 8px;
	background: #FAF9F7;
	color: #666;
	font-size: 14px;
}

@media (prefers-reduced-motion: reduce) {
	.abm-wrap.abm-wrap .abm-banner,
	.abm-wrap.abm-wrap .abm-banner__cta {
		transition: none;
	}
	.abm-wrap.abm-wrap a.abm-banner:hover {
		transform: none;
	}
}
