/**
 * Widget "CTA — Chamada para Ação"
 *
 * Cartão central com gradiente azul, círculos decorativos translúcidos nos
 * cantos e conteúdo centralizado. É a seção de maior respiro vertical do
 * site (py-28 / 112px — ver design-tokens.md §3.1) e o cartão usa o
 * container mais estreito do site (max-w-5xl / 1024px — ver §3.2), por ser
 * um bloco de destaque isolado, não o container padrão de 1280px.
 *
 * Tokens vindos de assets/css/tokens.css — nenhuma cor/tamanho literal,
 * exceto onde não existe token dedicado (documentado inline).
 */

.fjpn-cta {
	background: var(--fjpn-cta-secao-bg, var(--fjpn-bg-soft));
	padding-block: var(--fjpn-space-section-py-xl);
}

/* Container próprio: max-w-5xl (1024px), mais estreito que o .fjpn-container
   padrão do site (1280px) — este bloco é um cartão de destaque isolado. */
.fjpn-cta__wrap {
	width: 100%;
	max-width: var(--fjpn-container-cta-width);
	margin-inline: auto;
	padding-inline: var(--fjpn-container-padding);
}

/* 1024px = --fjpn-breakpoint-lg. Custom properties não são resolvidas
   dentro da condição de @media — valor literal aqui não é repetição do
   token em si, é limitação do CSS (mesma nota de base.css). */
@media (min-width: 1024px) {
	.fjpn-cta__wrap {
		padding-inline: var(--fjpn-container-padding-lg);
	}
}

.fjpn-cta__card {
	position: relative;
	overflow: hidden;
	background: var(--fjpn-cta-cartao-bg, var(--fjpn-gradient-cta));
	border-radius: var(--fjpn-radius-3xl);
	padding: var(--fjpn-padding-cta-block);
	text-align: center;
}

/* 768px = --fjpn-breakpoint-md. p-12 → md:p-16 (ver design-tokens.md §3.4). */
@media (min-width: 768px) {
	.fjpn-cta__card {
		padding: var(--fjpn-padding-cta-block-md);
	}
}

/* Círculos decorativos translúcidos nos cantos do cartão. Tamanho/posição
   são puramente decorativos — sem token dedicado na paleta (mesma natureza
   dos blobs/pontos decorativos usados em outras seções do design original). */
.fjpn-cta__decor {
	position: absolute;
	display: block;
	border-radius: var(--fjpn-radius-full);
	background: rgba(255, 255, 255, 0.08);
	pointer-events: none;
}

.fjpn-cta__decor--tr {
	top: -70px;
	right: -70px;
	width: 220px;
	height: 220px;
}

.fjpn-cta__decor--bl {
	bottom: -90px;
	left: -90px;
	width: 260px;
	height: 260px;
	background: rgba(255, 255, 255, 0.06);
}

/* CORREÇÃO (diagnóstico item 29/C2): título quebrava em duas linhas — o
   `.fjpn-cta__content` (42rem) era mais estreito que o necessário pro
   título padrão caber numa linha só. Alargado para 48rem (ainda bem abaixo
   da largura interna do cartão, então parágrafo e botões continuam com
   leitura confortável). */
.fjpn-cta__content {
	position: relative;
	z-index: 1;
	max-width: 48rem;
	margin-inline: auto;
}

/* Ícone em badge circular — reforça o peso visual do emoji acima do
   título, mesmo tratamento usado em outros selos/badges do design original.
   CORREÇÃO (diagnóstico item 30/C3): selo maior que o site atual — de 4rem
   para 5rem, com o emoji também maior (heading-lg em vez de heading-md). */
.fjpn-cta__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 5rem;
	height: 5rem;
	margin-bottom: var(--fjpn-gap-medium);
	border-radius: var(--fjpn-radius-full);
	background: rgba(255, 255, 255, 0.15);
	font-size: var(--fjpn-text-heading-lg);
	line-height: 1;
}

/* Título — mesma escala tipográfica de .fjpn-heading-lg (font-size/weight/
   tracking), mas com cor branca porque fica sobre o gradiente azul escuro
   (a classe global .fjpn-heading-* fixa texto escuro, inadequado aqui).
   CORREÇÃO (diagnóstico item 29/C2): o salto pro tamanho md (36px) a partir
   de 768px era o principal motivo da quebra de linha do título padrão —
   removido; o tamanho base (30px) já é suficientemente forte para o cartão
   e, combinado com o `.fjpn-cta__content` mais largo acima, cabe numa
   linha só com o texto padrão. */
.fjpn-cta__title {
	font-family: var(--fjpn-font-sans);
	font-size: var(--fjpn-text-heading-lg);
	font-weight: var(--fjpn-weight-extrabold);
	line-height: var(--fjpn-leading-tight);
	letter-spacing: var(--fjpn-tracking-tight);
	color: var(--fjpn-cta-titulo-cor, var(--fjpn-white));
	margin: 0 0 var(--fjpn-gap-medium);
}

/* Parágrafo — mesma escala de .fjpn-body-lg, branco com leve transparência
   para hierarquia visual em relação ao título, mantendo contraste WCAG AA
   (branco a 92% sobre #1b4da1/#2563eb permanece acima de 4.5:1). */
/* Este bloco deixou de ser um <p> e virou um <div> quando o controle passou a
   ser editor rico (widgets/cta.php) — a cliente precisa de mais de um
   parágrafo aqui. O <div> carrega a tipografia e a margem externa; os <p>
   que o editor gera herdam a tipografia e recebem só o espaçamento ENTRE si. */
.fjpn-cta__text {
	font-family: var(--fjpn-font-sans);
	font-size: var(--fjpn-text-body-lg);
	font-weight: var(--fjpn-weight-regular);
	line-height: var(--fjpn-leading-relaxed);
	color: var(--fjpn-cta-texto-cor, var(--fjpn-white));
	opacity: 0.92;
	margin: 0 0 var(--fjpn-gap-hero-columns);
}

.fjpn-cta__text p {
	margin: 0 0 var(--fjpn-gap-medium);
}

/* Sem isto, o último parágrafo soma a própria margem à do bloco e o vão até
   os botões fica maior do que quando havia um parágrafo só. */
.fjpn-cta__text > :first-child {
	margin-top: 0;
}

.fjpn-cta__text > :last-child {
	margin-bottom: 0;
}

/* O editor rico também entrega lista, negrito e link. Lista precisa de recuo
   próprio (o reset do tema zera o padding de <ul>/<ol>) e o link precisa
   herdar a cor do bloco, senão sai no azul padrão sobre o cartão azul. */
.fjpn-cta__text ul,
.fjpn-cta__text ol {
	margin: 0 0 var(--fjpn-gap-medium);
	padding-inline-start: var(--fjpn-gap-hero-columns);
	text-align: start;
}

.fjpn-cta__text a {
	color: inherit;
	text-decoration: underline;
}

.fjpn-cta__actions {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--fjpn-gap-medium);
}

/* 640px = --fjpn-breakpoint-sm. Botões lado a lado a partir daqui. */
@media (min-width: 640px) {
	.fjpn-cta__actions {
		flex-direction: row;
	}
}

/* CORREÇÃO (diagnóstico item 28/C1): no aprovado os botões desta seção têm
   mais padding e cantos mais arredondados que o padrão `.fjpn-btn` do
   resto do site — reforçado aqui via `calc()` sobre os próprios tokens de
   padding (nenhum valor literal novo) e `--fjpn-radius-full` (pílula). */
.fjpn-cta__actions .fjpn-btn {
	padding:
		calc(var(--fjpn-padding-button-y) * 1.5)
		calc(var(--fjpn-padding-button-x) * 1.4);
	border-radius: var(--fjpn-radius-full);
}

/* O outline compensa a borda do mesmo jeito que .fjpn-cta__btn-outline já
   fazia — só ajustado pro novo padding acima, senão a borda de 2px voltaria
   a desalinhar a altura entre os dois botões. */
.fjpn-cta__actions .fjpn-btn.fjpn-cta__btn-outline {
	padding:
		calc(var(--fjpn-padding-button-y) * 1.5 - var(--fjpn-border-width-outline))
		calc(var(--fjpn-padding-button-x) * 1.4 - var(--fjpn-border-width-outline));
}

/* "Sombra/brilho na própria cor" do botão laranja (item 28): soma um halo
   suave, na cor de preenchimento real do botão (--fjpn-orange-cta,
   ver decisão do item 27), à sombra padrão já herdada de .fjpn-btn-orange —
   color-mix() em vez de rgba literal porque não há token de cor com alpha
   dedicado a este tom (mesmo recurso já usado no hover do losango, ver
   diamond-card.css). */
.fjpn-cta__actions .fjpn-btn-orange {
	box-shadow:
		var(--fjpn-shadow-button-orange),
		0 0 32px color-mix(in srgb, var(--fjpn-orange-cta) 45%, transparent);
}

/* Botão 1 — reaproveita .fjpn-btn-orange de base.css (não editado); estas
   duas declarações só sobrescrevem fundo/texto quando a cliente define uma
   cor no painel (widgets/cta.php, seção "Estilo"). Sem escolha, os
   fallbacks reproduzem exatamente o gradiente/branco de base.css. */
.fjpn-cta__actions .fjpn-btn-orange {
	background: var(--fjpn-cta-botao1-fundo, var(--fjpn-gradient-orange-cta));
	color: var(--fjpn-cta-botao1-texto, var(--fjpn-white));
}

/* Botão 2 — variante outline branca sobre fundo azul (não existe em
   base.css: .fjpn-btn-blue-outline é para fundo claro, com borda azul).
   Reaproveita a base .fjpn-btn (padding/radius/tipografia/hover scale) e só
   sobrescreve cor/borda/fundo, seguindo o mesmo padrão de compensação de
   borda já usado em .fjpn-btn-blue-outline. */
.fjpn-btn.fjpn-cta__btn-outline {
	/* --fjpn-cta-botao2-fundo só existe quando a cliente escolhe uma cor
	   sólida (widgets/cta.php, seção "Estilo") — o botão 2 é transparente
	   por padrão. Texto e borda seguem a mesma custom property, resolvida
	   por padrão para o Global Color branco (paridade de pixel: já era
	   branco em ambos). */
	background: var(--fjpn-cta-botao2-fundo, transparent);
	color: var(--fjpn-cta-botao2-texto, var(--fjpn-white));
	border: var(--fjpn-border-width-outline) solid var(--fjpn-cta-botao2-texto, var(--fjpn-white));
	padding:
		calc(var(--fjpn-padding-button-y) - var(--fjpn-border-width-outline))
		calc(var(--fjpn-padding-button-x) - var(--fjpn-border-width-outline));
}

/* Mantém o hover translúcido original intacto: sem esta regra, a
   declaração de fundo acima (mesma especificidade, mesma origem) venceria
   também no :hover, apagando o realce. Sem override de fundo escolhido
   pela cliente, o fallback reproduz exatamente rgba(255,255,255,0.12). */
.fjpn-btn.fjpn-cta__btn-outline:hover {
	background: var(--fjpn-cta-botao2-fundo-hover, rgba(255, 255, 255, 0.12));
}

@media (prefers-reduced-motion: reduce) {
	.fjpn-cta__card,
	.fjpn-btn.fjpn-cta__btn-outline {
		transition: none;
	}
}