/**
 * Hero da home — CSS do componente
 *
 * Referência visual: o mockup oficial em
 * _reference/compracon-react-tsx-original/app/globals.css (D-33).
 *
 * NENHUM hexadecimal. Onde o mockup usa um tom solto, o destino está registrado
 * em _planning/consolidacao-de-cor-do-hero.md — inclusive os casos em que a
 * escolha custou alguma coisa. Onde ele usa o azul da marca com transparência,
 * usamos color-mix() sobre o token: escrever o rgba seria repetir o hexadecimal
 * decomposto, e ele deixaria de acompanhar o token.
 *
 * ATENCAO: TODA regra desce de `.cpc-hero`, e não é organização — é o que faz o
 * componente vencer o tema. O Astra estiliza `button` por elemento, e as regras
 * de estado dele (`button:hover`, `button:focus`) pesam mais que uma classe
 * sozinha. Com o prefixo, a regra base do componente já pesa duas classes e
 * vence as duas. Sem ele, passar o mouse no valor do crédito pintava o texto de
 * branco sobre fundo claro, e o rótulo sumia. Detalhe em
 * _planning/correcoes-do-teste-do-hero.md.
 *
 * A referência roda sobre o reset do Tailwind, que este ambiente não tem. As
 * três consequências estão anotadas no ponto em que aparecem: entrelinha do
 * corpo, peso do `h1` e `font` dos botões.
 *
 * @since 4.6.0
 */

/* ═══════════════════════════════════════════════════════════════════════
 * DUAS CAMADAS, e a separação é regra, não organização
 * ═══════════════════════════════════════════════════════════════════════
 *
 * | Camada | O que é | Largura |
 * |---|---|---|
 * | `.cpc-hero` | FUNDO: os dois gradientes e o círculo da esquerda | a tela inteira, sempre |
 * | `.cpc-hero-conteudo` | CONTEÚDO: texto, busca, selos e a ilustração | limitada, centralizada |
 *
 * ATENCAO: O fundo NUNCA recebe o limite de largura. O site é montado em
 * largura total justamente para cada widget pintar o próprio fundo de ponta a
 * ponta; limitar o fundo cortaria os elementos das laterais em tela grande.
 *
 * O limite do conteúdo é controle no editor — `--cpc-hero-largura`, escrito
 * pelo PHP na própria camada. Zero no controle vira `none` e tira o limite.
 *
 * Peça nova entra numa das duas camadas por esta pergunta: **se a tela
 * dobrasse de largura, esta peça deveria acompanhar?** Se sim, é fundo.
 */
.cpc-hero {
	position: relative;
	display: grid;
	align-content: center;
	min-height: 620px;
	padding: 64px 0 82px;
	overflow: hidden;
	font-family: var(--cpc-fonte);

	/* Peso de partida da seção. Na referência é o 400 do corpo, e é dele que
	 * saem o parágrafo, o apoio do passo e a legenda dos cartões — nenhum
	 * declara peso próprio. O tema pode ter outro peso de corpo. */
	font-weight: var(--cpc-peso-corpo);

	/* A referência não declara entrelinha no corpo: vale `normal`. O Astra
	 * declara 1.857 no `body`, e sem esta linha o hero inteiro herda um
	 * respiro entre linhas que o mockup não tem — botão de categoria mais
	 * alto, chapéu mais espaçado, selos mais soltos. */
	line-height: normal;
	background:
		radial-gradient(circle at 82% 20%, color-mix(in srgb, var(--cpc-azul) 13%, transparent), transparent 28%),
		linear-gradient(180deg, var(--cpc-branco) 0%, var(--cpc-fundo) 100%);
}

/* Círculo da esquerda: fundo. Fica preso à borda da TELA e é cortado por ela,
 * como no mockup — por isso o `overflow: hidden` na seção. */
.cpc-hero::before {
	content: "";
	position: absolute;
	top: 42px;
	left: -86px;
	width: 210px;
	height: 210px;
	border: 1px solid color-mix(in srgb, var(--cpc-azul) 13%, transparent);
	border-radius: 50%;
}

/* Camada de conteúdo.
 *
 * `width` e `max-width` separados de propósito: com `min()` numa linha só, o
 * "sem limite" do editor não teria como ser escrito. Assim, `max-width: none`
 * tira o teto e o respiro lateral continua de pé.
 *
 * O respiro de 24px de cada lado é o do design system §1.4
 * (`min(1140px, calc(100% - 48px))`). Ele não aparece em tela grande — só
 * impede o texto de encostar na borda quando a tela é menor que o limite. */
.cpc-hero .cpc-hero-conteudo {
	display: grid;
	grid-template-columns: minmax(0, 1.25fr) minmax(320px, .75fr);
	align-items: center;
	gap: 70px;
	width: calc(100% - 48px);
	max-width: var(--cpc-hero-largura, 1200px);
	min-width: 0;
	margin-inline: auto;
}

/* ── O atributo `hidden` precisa vencer o `display` do componente ─────────
 *
 * `[hidden]` é `display: none` na folha do navegador — a declaração mais
 * fraca que existe. Qualquer `display` nosso a apaga. Os dois elementos que o
 * JavaScript troca declaram `display`, então `elemento.hidden = true` não
 * escondia nada: o campo de digitação ficava ao lado do valor o tempo todo.
 *
 * A referência não precisa disso porque é React — lá o elemento escondido não
 * existe no DOM. Aqui ele existe, e o atributo é também o que o tira do leitor
 * de tela; por isso a correção é no CSS, não trocando o atributo por classe.
 *
 * ATENCAO: O `!important` é deliberado e é o idiom de reset — a mesma linha
 * está no normalize e no reset do Tailwind. Aqui ele existe para que nenhum
 * `display` futuro, nosso ou de plugin, volte a desligar o esconder por
 * acidente. Uma regra, todo elemento do widget, sem depender de ordem no
 * arquivo nem de contagem de seletor.
 */
.cpc-hero [hidden] {
	display: none !important;
}

.cpc-hero .cpc-hero-copy {
	position: relative;
	z-index: 2;
	min-width: 0;
	max-width: 720px;
}

/* ── Título e chapéu ─────────────────────────────────────────────────────
 *
 * A ordem no HTML é a do mockup: o chapéu vem DEPOIS do título.
 */
.cpc-hero .cpc-hero-titulo {
	position: relative;
	max-width: 660px;
	margin: 0 0 18px;
	color: var(--cpc-texto);

	/* `font-family` explícito porque o Astra declara a fonte dos títulos por
	 * elemento (`h1, h2, …`), e regra direta vence herança: sem esta linha o
	 * título sairia na fonte do tema, não na do mockup. */
	font-family: inherit;
	font-size: var(--cpc-t-titulo-pagina);

	/* ATENCAO: 400, não 800. Na referência o `h1` não declara peso nenhum — o
	 * reset do Tailwind zera o negrito de título (`font-weight: inherit`) e
	 * ele herda o 400 do corpo. Só a expressão em `<strong>` é 800, e é esse
	 * contraste que o mockup mostra. Com 800 no título inteiro o destaque
	 * desaparece e a primeira dobra fica pesada. */
	font-weight: var(--cpc-peso-corpo);
	line-height: 1.05;
	letter-spacing: var(--cpc-ee-titulo-pagina);
	animation: cpc-hero-titulo-entra .9s cubic-bezier(.2, .8, .2, 1) both;
}

.cpc-hero .cpc-hero-titulo strong {
	position: relative;
	isolation: isolate;
	display: inline-block;
	color: transparent;
	font-weight: var(--cpc-peso-forte);
	background: var(--cpc-grad-titulo);
	background-size: 240% 100%;
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	animation:
		cpc-hero-destaque-entra .85s cubic-bezier(.2, .9, .2, 1) .3s both,
		cpc-hero-brilho 4.8s ease-in-out 1.3s infinite;
}

/* O ponto que pisca ao lado da palavra destacada. O mockup usa um azul mais
 * claro que qualquer um da paleta; a escolha de não criar um sexto azul para um
 * enfeite de 0.1em está registrada na consolidação de cor. */
.cpc-hero .cpc-hero-titulo strong::after {
	content: "";
	position: absolute;
	top: -.08em;
	right: -.18em;
	width: .1em;
	height: .1em;
	border-radius: 50%;
	background: var(--cpc-azul-claro);
	box-shadow:
		-.16em .1em 0 -.02em color-mix(in srgb, var(--cpc-azul) 85%, transparent),
		.08em .16em 0 -.03em color-mix(in srgb, var(--cpc-azul-forte) 70%, transparent),
		0 0 .2em color-mix(in srgb, var(--cpc-azul-claro) 85%, transparent);
	opacity: 0;
	animation: cpc-hero-faisca 4.8s ease-in-out 1.45s infinite;
}

.cpc-hero .cpc-hero-chapeu {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 14px;
	color: var(--cpc-azul-forte);
	font-size: var(--cpc-t-corpo-pequeno);
	font-weight: var(--cpc-peso-forte);
	letter-spacing: var(--cpc-ee-rotulo);
	text-transform: uppercase;
}

.cpc-hero .cpc-hero-chapeu span {
	display: grid;
	place-items: center;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--cpc-azul-claro);
	font-size: var(--cpc-t-rotulo);
}

.cpc-hero .cpc-hero-paragrafo {
	max-width: 610px;
	margin: 0;
	color: var(--cpc-texto-2);
	font-size: var(--cpc-t-corpo-grande);
	line-height: var(--cpc-el-corpo);
}

/* O parágrafo tem duas redações no HTML — a longa e a de celular — e só uma
 * aparece por vez. Aqui, a de celular está fora. A faixa de ≤640px inverte.
 *
 * ATENCAO: é `display: none` de propósito, e não `visibility` nem posição fora
 * da tela: as duas redações dizem a mesma coisa, e leitor de tela lendo as duas
 * seria repetição. `display: none` some do fluxo E da árvore de acessibilidade.
 */
.cpc-hero .cpc-hero-paragrafo-curto {
	display: none;
}

/* ── Caixa de busca ──────────────────────────────────────────────────────
 *
 * ATENCAO: No mockup a caixa tem duas classes, e a segunda zera a primeira: sem
 * borda, sem fundo, sem sombra, sem preenchimento. O visual final é PLANO.
 * Aqui existe uma classe só, já com o resultado — copiar só a primeira produz
 * um cartão que o mockup não tem.
 */
.cpc-hero .cpc-hero-busca {
	width: min(100%, 680px);
	min-width: 0;
	margin-top: 24px;
}

.cpc-hero .cpc-hero-passo {
	min-width: 0;
}

.cpc-hero .cpc-hero-passo-categoria {
	padding: 18px 20px 20px;
	border-radius: var(--cpc-raio-lg);
	background: var(--cpc-fundo);
}

.cpc-hero .cpc-hero-passo-valor {
	margin-top: 18px;
	padding: 0 14px;
}

.cpc-hero .cpc-hero-passo-titulo {
	margin-bottom: 15px;
	text-align: center;
}

.cpc-hero .cpc-hero-passo-titulo h2 {
	margin: 0;
	color: var(--cpc-texto);
	font-family: inherit;
	font-size: var(--cpc-t-card);
	font-weight: var(--cpc-peso-forte);
	line-height: 1.25;
	letter-spacing: -.02em;
}

.cpc-hero .cpc-hero-passo-titulo p {
	max-width: 480px;
	margin: 7px auto 0;
	color: var(--cpc-texto-3);
	font-size: var(--cpc-t-rotulo);
	line-height: 1.45;
}

.cpc-hero .cpc-hero-passo-titulo-valor {
	margin-bottom: 17px;
}

/* ── Botões de categoria ───────────────────────────────────────────────── */
.cpc-hero .cpc-hero-categorias {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 8px;
	width: min(100%, 560px);
	margin: 0 auto;
}

.cpc-hero .cpc-hero-categoria {
	position: relative;
	display: grid;
	min-width: 0;
	min-height: 102px;
	place-items: center;
	align-content: center;
	gap: 7px;
	padding: 10px 7px;
	border: 1px solid transparent;
	border-radius: var(--cpc-raio-md);
	background: var(--cpc-branco);
	color: var(--cpc-texto-2);

	/* `font: inherit` primeiro, tamanho e peso depois. É o atalho que zera o
	 * que o tema impõe em `button` — inclusive a entrelinha de 1.857, que
	 * esticava o botão inteiro. */
	font: inherit;
	font-size: var(--cpc-t-micro);
	font-weight: var(--cpc-peso-forte);
	cursor: pointer;
	transition: border-color .18s ease, color .18s ease, background .18s ease,
		box-shadow .18s ease, transform .18s ease;
}

/* Os três estados, como no guia que o operador passou em 2026-08-10:
 *
 * | Estado | Cartão | Rótulo | Ícone | Movimento |
 * |---|---|---|---|---|
 * | padrão | branco, sem borda | cinza | cinza | nenhum |
 * | mouse em cima | branco, **borda azul** | **azul** | cinza | sobe 2px, sombra azul |
 * | selecionado | **azul em gradiente** | **branco** | **branco** | nenhum |
 *
 * ATENCAO: O cartão só fica azul quando está SELECIONADO. O mouse em cima
 * mantém o cartão branco — é o que separa "estou olhando" de "escolhi". Já foi
 * tentado o contrário: com o mouse pintando de azul, os dois estados ficam
 * iguais e ninguém sabe qual bem escolheu. */
.cpc-hero .cpc-hero-categoria:hover,
.cpc-hero .cpc-hero-categoria:focus-visible {
	border-color: color-mix(in srgb, var(--cpc-azul) 32%, transparent);
	background: var(--cpc-branco);
	color: var(--cpc-azul-forte);
	transform: translateY(-2px);
	box-shadow: 0 9px 20px color-mix(in srgb, var(--cpc-azul) 12%, transparent);
}

/* Selecionado vence o mouse em cima: as duas regras pesam igual e esta vem
 * depois. O que o mouse ainda faz no botão marcado é levantar 2px. */
.cpc-hero .cpc-hero-categoria[aria-pressed="true"] {
	border-color: var(--cpc-azul-forte);

	/* 145°, do azul da marca para o azul forte. É o gradiente da referência —
	 * não é o `--cpc-grad-bloco` do design system, que sobe em 135° e no
	 * sentido contrário. */
	background: linear-gradient(145deg, var(--cpc-azul) 0%, var(--cpc-azul-forte) 100%);
	color: var(--cpc-branco);
	box-shadow: none;
}

.cpc-hero .cpc-hero-categoria-icone {
	display: grid;
	width: 76px;
	height: 48px;
	place-items: center;
	color: var(--cpc-texto-3);
}

.cpc-hero .cpc-hero-categoria[aria-pressed="true"] .cpc-hero-categoria-icone {
	color: var(--cpc-branco);
}

.cpc-hero .cpc-hero-icone-linha {
	width: 74px;
	height: 46px;
	color: currentColor;
	stroke: currentColor;
	stroke-width: 1.55;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* ── Valor do crédito ────────────────────────────────────────────────── */
.cpc-hero .cpc-hero-faixa-wrap {
	width: min(100%, 600px);
	margin: 0 auto;
}

.cpc-hero .cpc-hero-credito {
	width: 100%;
}

.cpc-hero .cpc-hero-credito-controle {
	display: flex;
	min-height: 48px;
	align-items: center;
	justify-content: center;
	margin: 2px 0 7px;
}

.cpc-hero .cpc-hero-credito-valor {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 3px 7px;
	border: 0;
	border-radius: var(--cpc-raio-sm);
	background: transparent;
	color: var(--cpc-azul-forte);
	font: inherit;
	cursor: text;
	transition: background .2s ease, transform .2s ease;
}

/* Cor repetida em todo estado: o tema pinta `button:hover` e `button:focus` de
 * branco, e sem repetir aqui o valor sumia contra o fundo claro. */
.cpc-hero .cpc-hero-credito-valor:hover,
.cpc-hero .cpc-hero-credito-valor:focus,
.cpc-hero .cpc-hero-credito-valor:focus-visible {
	background: var(--cpc-azul-claro);
	color: var(--cpc-azul-forte);
}

.cpc-hero .cpc-hero-credito-valor:active {
	transform: scale(.99);
}

.cpc-hero .cpc-hero-credito-valor:focus-visible {
	outline: 3px solid color-mix(in srgb, var(--cpc-azul) 22%, transparent);
	outline-offset: 2px;
}

.cpc-hero .cpc-hero-credito-valor strong {
	font-size: var(--cpc-t-numero-grande);
	font-weight: var(--cpc-peso-max);
	letter-spacing: -.04em;
	line-height: 1.1;
}

.cpc-hero .cpc-hero-credito-lapis {
	display: grid;
	width: 30px;
	height: 30px;
	place-items: center;
	border-radius: var(--cpc-raio-xs);
	background: var(--cpc-azul-claro);
	color: var(--cpc-azul);
}

.cpc-hero .cpc-hero-credito-lapis svg {
	width: 17px;
	height: 17px;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.cpc-hero .cpc-hero-credito-entrada-wrap {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	color: var(--cpc-azul-forte);
	font-size: var(--cpc-t-numero);
	font-weight: var(--cpc-peso-max);
}

.cpc-hero .cpc-hero-credito-entrada {
	width: 220px;
	padding: 4px 8px 5px;
	border: 0;
	border-bottom: 2px solid var(--cpc-azul);
	border-radius: 0;
	outline: none;
	background: transparent;
	color: var(--cpc-azul-forte);
	font: inherit;
	letter-spacing: var(--cpc-ee-numero);
	text-align: center;
}

.cpc-hero .cpc-hero-credito-entrada:focus {
	border-bottom-color: var(--cpc-azul-forte);
	box-shadow: 0 4px 0 -2px color-mix(in srgb, var(--cpc-azul) 14%, transparent);
}

/* ── Controle de faixa ───────────────────────────────────────────────────
 *
 * O input[type=range] nativo fica invisível por cima de tudo: ele entrega
 * arrastar, toque e teclado de graça. A alça e o trilho são só pintura, e
 * seguem a variável --cpc-hero-pos, que o PHP escreve e o JS atualiza.
 */
.cpc-hero .cpc-hero-faixa {
	position: relative;
	height: 42px;
	margin: 2px 19px 0;
}

.cpc-hero .cpc-hero-faixa-trilho {
	position: absolute;
	top: 18px;
	right: 0;
	left: 0;
	height: 5px;
	border-radius: var(--cpc-raio-pilula);
	background: linear-gradient(
		to right,
		var(--cpc-azul) 0%,
		var(--cpc-azul) var(--cpc-hero-pos),
		var(--cpc-linha) var(--cpc-hero-pos),
		var(--cpc-linha) 100%
	);
}

.cpc-hero .cpc-hero-faixa input[type="range"] {
	position: absolute;
	z-index: 3;
	inset: 0;
	width: 100%;
	height: 42px;
	margin: 0;
	appearance: none;
	-webkit-appearance: none;
	opacity: 0;
	cursor: ew-resize;
}

.cpc-hero .cpc-hero-faixa-alca {
	position: absolute;
	z-index: 2;
	top: 1px;
	left: var(--cpc-hero-pos);
	display: grid;
	width: 39px;
	height: 39px;
	place-items: center;
	border: 4px solid var(--cpc-branco);
	border-radius: 50%;
	background: var(--cpc-azul);
	color: var(--cpc-branco);
	box-shadow: 0 4px 11px color-mix(in srgb, var(--cpc-azul-forte) 34%, transparent);
	pointer-events: none;
	transform: translateX(-50%);
	transition: left .08s linear, transform .18s ease, box-shadow .18s ease;
}

.cpc-hero .cpc-hero-faixa-alca svg {
	width: 20px;
	height: 20px;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.cpc-hero .cpc-hero-faixa input[type="range"]:focus-visible + .cpc-hero-faixa-alca {
	box-shadow:
		0 0 0 4px color-mix(in srgb, var(--cpc-azul) 20%, transparent),
		0 4px 11px color-mix(in srgb, var(--cpc-azul-forte) 34%, transparent);
}

.cpc-hero .cpc-hero-faixa input[type="range"]:active + .cpc-hero-faixa-alca {
	transform: translateX(-50%) scale(1.08);
	box-shadow: 0 6px 15px color-mix(in srgb, var(--cpc-azul-forte) 40%, transparent);
}

.cpc-hero .cpc-hero-faixa-limites {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: -1px;
	color: var(--cpc-texto-3);
	font-size: var(--cpc-t-micro-grande);
	font-weight: var(--cpc-peso-medio);
}

/* ── Ação ────────────────────────────────────────────────────────────────
 *
 * ATENCAO: O botão da referência tem DUAS regras, e a segunda — a que só vale
 * dentro do simulador — vence a primeira. É ela que manda no que se vê: fundo
 * em gradiente e 600px de largura. E como ela pesa mais que a regra de
 * `:hover`, o fundo NÃO muda com o mouse em cima: o que muda é o levantar de
 * 1px e a sombra.
 *
 * `display: flex`, e não `inline-flex` como a referência: elemento de linha
 * ignora margem automática, e o botão ficava encostado à esquerda da caixa
 * enquanto a faixa de crédito, que é bloco, se centrava. Os dois têm 600px, e
 * a diferença de eixo deixava o botão terminando antes da barra.
 */
.cpc-hero .cpc-hero-enviar {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: min(100%, 600px);
	min-height: 54px;
	margin: 16px auto 0;
	padding: 0 24px;
	border: 0;
	border-radius: var(--cpc-raio-md);
	background: var(--cpc-grad-botao);
	color: var(--cpc-branco);
	font: inherit;
	font-size: var(--cpc-t-corpo);
	font-weight: var(--cpc-peso-forte);
	cursor: pointer;
	box-shadow: var(--cpc-sombra-azul);
	animation: cpc-hero-pulso 3.6s ease-in-out infinite;
	transition: transform .2s ease, box-shadow .2s ease;
}

.cpc-hero .cpc-hero-enviar::after {
	position: absolute;
	z-index: -1;
	inset: 0;
	background: linear-gradient(
		105deg,
		transparent 38%,
		color-mix(in srgb, var(--cpc-branco) 24%, transparent) 50%,
		transparent 62%
	);
	content: "";
	pointer-events: none;
	transform: translateX(-115%);
	animation: cpc-hero-lustro 4.8s ease-in-out infinite;
}

/* ATENCAO: `animation: none` não é sobra. A respiração do botão anima o
 * `box-shadow` sem parar, e animação vence qualquer sombra declarada em regra
 * comum — com ela rodando, o mouse em cima só levantava 1px e mais nada. Parar
 * a respiração é o que deixa o realce aparecer. O texto e a seta ficam brancos
 * declarados, para nenhum estilo de botão do tema alcançá-los. */
.cpc-hero .cpc-hero-enviar:hover,
.cpc-hero .cpc-hero-enviar:focus-visible {
	color: var(--cpc-branco);
	transform: translateY(-1px);
	animation: none;
	box-shadow: var(--cpc-sombra-azul-hover);
}

/* ── Linha de selos ──────────────────────────────────────────────────────
 *
 * Mesma largura da caixa de busca e conteúdo centrado: é o que põe os selos no
 * mesmo eixo do botão e da faixa de crédito. Alinhados à esquerda da coluna,
 * eles brigavam com tudo que está centrado logo acima.
 */
.cpc-hero .cpc-hero-selos {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px 18px;
	width: min(100%, 680px);
	margin-top: 18px;
	color: var(--cpc-texto-2);
	font-size: var(--cpc-t-rotulo);
	font-weight: var(--cpc-peso-medio);
}

.cpc-hero .cpc-hero-selos span {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	white-space: nowrap;
}

.cpc-hero .cpc-hero-selos i {
	display: grid;
	place-items: center;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: var(--cpc-ok-fundo);
	color: var(--cpc-ok-texto);
	font-size: var(--cpc-t-micro-grande);
	font-style: normal;
}

/* ── Ilustração ───────────────────────────────────────────────────────── */
.cpc-hero .cpc-hero-visual {
	position: relative;
	width: 390px;
	height: 430px;

	/* A ilustração é CONTEÚDO, não fundo: ela obedece ao limite de largura.
	 *
	 * ATENCAO: A etiqueta "Resultado de Assembleia" fica 74px para fora desta
	 * caixa, de propósito, e a seção corta o que passa da borda da tela. Numa
	 * tela pouco maior que o limite do conteúdo não sobra espaço para ela, e
	 * sairia cortada ao meio. Os 78px de recuo garantem a etiqueta inteira em
	 * qualquer largura — é a maior saliência mais os 4px do cartão de cima. */
	margin-right: 78px;
	justify-self: end;
}

.cpc-hero .cpc-hero-orbita {
	position: absolute;
	border: 1px solid color-mix(in srgb, var(--cpc-azul) 20%, transparent);
	border-radius: 50%;
}

.cpc-hero .cpc-hero-orbita-1 {
	inset: 25px 0 15px 0;
}

.cpc-hero .cpc-hero-orbita-2 {
	inset: 72px 47px 62px;
	border-style: dashed;
}

.cpc-hero .cpc-hero-escudo {
	position: absolute;
	inset: 64px 46px;
	display: grid;
	place-items: center;
	border: 1px solid color-mix(in srgb, var(--cpc-azul) 18%, transparent);
	border-radius: 90px 90px 110px 110px;
	background: linear-gradient(
		145deg,
		color-mix(in srgb, var(--cpc-branco) 98%, transparent),
		color-mix(in srgb, var(--cpc-azul-claro) 96%, transparent)
	);
	box-shadow: 0 28px 70px color-mix(in srgb, var(--cpc-azul-forte) 18%, transparent);
	transform: rotate(2deg);
}

.cpc-hero .cpc-hero-escudo::before {
	content: "";
	position: absolute;
	inset: 18px;
	border: 1px solid color-mix(in srgb, var(--cpc-azul) 15%, transparent);
	border-radius: 74px 74px 95px 95px;
}

.cpc-hero .cpc-hero-cadeado {
	position: relative;
	z-index: 2;
	width: 110px;
	height: 124px;
}

.cpc-hero .cpc-hero-cadeado-arco {
	position: absolute;
	top: 4px;
	left: 24px;
	width: 62px;
	height: 62px;
	border: 12px solid var(--cpc-azul);
	border-bottom: 0;
	border-radius: 34px 34px 0 0;
}

.cpc-hero .cpc-hero-cadeado-corpo {
	position: absolute;
	bottom: 0;
	left: 5px;
	display: grid;
	place-items: center;
	width: 100px;
	height: 78px;
	border-radius: 17px;
	background: linear-gradient(145deg, var(--cpc-azul), var(--cpc-azul-forte));
	box-shadow: 0 16px 25px color-mix(in srgb, var(--cpc-azul-forte) 24%, transparent);
}

.cpc-hero .cpc-hero-cadeado-corpo i {
	width: 9px;
	height: 23px;
	border-radius: var(--cpc-raio-xs);
	background: var(--cpc-branco);
}

.cpc-hero .cpc-hero-verificado {
	position: absolute;
	right: 31px;
	bottom: 32px;
	z-index: 2;
	padding: 7px 11px;
	border-radius: var(--cpc-raio-pilula);
	background: var(--cpc-branco);
	color: var(--cpc-ok-texto);
	font-size: var(--cpc-t-micro-grande);
	font-weight: var(--cpc-peso-forte);
	box-shadow: 0 8px 20px color-mix(in srgb, var(--cpc-texto) 11%, transparent);
}

.cpc-hero .cpc-hero-etiqueta {
	position: absolute;
	z-index: 5;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	min-height: 34px;
	padding: 7px 12px 7px 8px;
	border: 1px solid color-mix(in srgb, var(--cpc-azul) 16%, transparent);
	border-radius: var(--cpc-raio-pilula);
	background: color-mix(in srgb, var(--cpc-branco) 97%, transparent);
	color: var(--cpc-texto-2);
	box-shadow: 0 12px 26px color-mix(in srgb, var(--cpc-texto) 11%, transparent);
	animation: cpc-hero-flutua 4.8s ease-in-out infinite;
	white-space: nowrap;
}

.cpc-hero .cpc-hero-etiqueta > span {
	display: grid;
	width: 21px;
	height: 21px;
	place-items: center;
	border-radius: 50%;
	background: var(--cpc-azul-claro);
	color: var(--cpc-azul-forte);
	font-size: var(--cpc-t-micro);
	font-weight: var(--cpc-peso-max);
}

.cpc-hero .cpc-hero-etiqueta strong {
	font-size: var(--cpc-t-micro);
	font-weight: var(--cpc-peso-forte);
}

.cpc-hero .cpc-hero-etiqueta-desagio {
	top: 146px;
	left: -45px;
	animation-delay: -1s;
}

.cpc-hero .cpc-hero-etiqueta-assembleia {
	top: 232px;
	right: -74px;
	animation-delay: -2.7s;
}

.cpc-hero .cpc-hero-cartao {
	position: absolute;
	z-index: 4;
	display: flex;
	align-items: center;
	gap: 10px;
	min-width: 190px;
	padding: 12px 14px;
	border: 1px solid color-mix(in srgb, var(--cpc-azul) 16%, transparent);
	border-radius: var(--cpc-raio-md);
	background: color-mix(in srgb, var(--cpc-branco) 96%, transparent);
	box-shadow: 0 15px 35px color-mix(in srgb, var(--cpc-texto) 12%, transparent);
	animation: cpc-hero-flutua 4s ease-in-out infinite;
}

.cpc-hero .cpc-hero-cartao-topo {
	top: 52px;
	right: -4px;
}

.cpc-hero .cpc-hero-cartao-base {
	bottom: 45px;
	left: -15px;
	animation-delay: -2s;
}

.cpc-hero .cpc-hero-cartao-icone {
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	border-radius: var(--cpc-raio-sm);
	background: var(--cpc-azul-claro);
	color: var(--cpc-azul-forte);
	font-weight: var(--cpc-peso-max);
}

.cpc-hero .cpc-hero-cartao span:last-child {
	display: flex;
	flex-direction: column;
	gap: 3px;
}

.cpc-hero .cpc-hero-cartao small {
	color: var(--cpc-texto-3);
	font-size: var(--cpc-t-nano);
}

.cpc-hero .cpc-hero-cartao strong {
	color: var(--cpc-texto);
	font-size: var(--cpc-t-micro-grande);
}

/* ── Só para leitor de tela ──────────────────────────────────────────── */
.cpc-hero .cpc-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ── Animações ───────────────────────────────────────────────────────── */
@keyframes cpc-hero-flutua {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-8px); }
}

@keyframes cpc-hero-pulso {
	0%, 100% { box-shadow: var(--cpc-sombra-azul); }
	50% { box-shadow: 0 12px 27px color-mix(in srgb, var(--cpc-azul) 31%, transparent); }
}

@keyframes cpc-hero-lustro {
	0%, 68% { transform: translateX(-115%); }
	88%, 100% { transform: translateX(115%); }
}

@keyframes cpc-hero-titulo-entra {
	from {
		opacity: 0;
		filter: blur(7px);
		transform: translateY(18px);
	}
	to {
		opacity: 1;
		filter: blur(0);
		transform: translateY(0);
	}
}

@keyframes cpc-hero-destaque-entra {
	from {
		opacity: 0;
		transform: translateY(12px) scale(.96);
	}
	to {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}

@keyframes cpc-hero-brilho {
	0%, 16%, 100% { background-position: 100% 50%; }
	44%, 72% { background-position: 0% 50%; }
}

@keyframes cpc-hero-faisca {
	0%, 30%, 54%, 100% {
		opacity: 0;
		transform: scale(.45) rotate(0deg);
	}
	38%, 46% {
		opacity: 1;
		transform: scale(1) rotate(18deg);
	}
}

/* ═══════════════════════════════════════════════════════════════════════
 * Breakpoints — os seis do design system §1.8. Dois são por ALTURA de tela:
 * o mockup se preocupa em manter o buscador inteiro na primeira dobra.
 * ═══════════════════════════════════════════════════════════════════════ */

/* Desktop ─────────────────────────────────────────────────── ≥ 961px ── */
@media (min-width: 961px) {
	.cpc-hero {
		min-height: calc(100svh - 82px);
		padding-top: 38px;
		padding-bottom: 46px;
	}

	.cpc-hero .cpc-hero-conteudo {
		gap: 52px;
	}

	.cpc-hero .cpc-hero-titulo {
		margin-bottom: 12px;
	}

	.cpc-hero .cpc-hero-chapeu {
		margin-bottom: 10px;
	}

	.cpc-hero .cpc-hero-paragrafo {
		font-size: var(--cpc-t-corpo-grande);
		line-height: 1.5;
	}

	/* A caixa de busca NÃO muda de respiro aqui, e é intencional: no mockup a
	 * regra que a comprimiria para 20px perde na cascata para a que a define
	 * como 24px, declarada depois. O renderizado é 24px. */

	.cpc-hero .cpc-hero-selos {
		margin-top: 16px;
	}
}

/* Notebook baixo — comprime só a primeira seção ── ≥961px e altura ≤850px ──
 *
 * Esta faixa existe no mockup POR CAUSA do hero: é o que mantém o botão de
 * busca acima da dobra em tela de notebook.
 */
@media (min-width: 961px) and (max-height: 850px) {
	.cpc-hero {
		min-height: calc(100svh - 68px);
		padding-top: 18px;
		padding-bottom: 22px;
	}

	.cpc-hero .cpc-hero-conteudo {
		gap: 38px;
	}

	.cpc-hero .cpc-hero-titulo {
		margin-bottom: 8px;
		font-size: clamp(36px, 3.8vw, 50px);
	}

	.cpc-hero .cpc-hero-chapeu {
		margin-bottom: 7px;
		font-size: var(--cpc-t-micro-grande);
	}

	.cpc-hero .cpc-hero-paragrafo {
		font-size: var(--cpc-t-corpo);
		line-height: 1.4;
	}

	.cpc-hero .cpc-hero-busca {
		margin-top: 12px;
	}

	.cpc-hero .cpc-hero-passo-categoria {
		padding: 12px 14px 14px;
	}

	.cpc-hero .cpc-hero-passo-valor {
		margin-top: 12px;
		padding: 0 10px;
	}

	.cpc-hero .cpc-hero-passo-titulo {
		margin-bottom: 9px;
	}

	.cpc-hero .cpc-hero-passo-titulo h2 {
		font-size: var(--cpc-t-corpo-grande);
	}

	.cpc-hero .cpc-hero-passo-titulo p {
		margin-top: 3px;
		font-size: var(--cpc-t-micro);
	}

	.cpc-hero .cpc-hero-categoria {
		min-height: 78px;
		gap: 4px;
		padding: 7px 5px;
	}

	.cpc-hero .cpc-hero-categoria-icone {
		width: 64px;
		height: 36px;
	}

	.cpc-hero .cpc-hero-icone-linha {
		width: 62px;
		height: 36px;
	}

	.cpc-hero .cpc-hero-enviar {
		min-height: 44px;
		margin-top: 10px;
	}

	.cpc-hero .cpc-hero-selos {
		gap: 12px;
		margin-top: 10px;
		font-size: var(--cpc-t-micro-grande);
	}

	.cpc-hero .cpc-hero-visual {
		transform: scale(.86);
		transform-origin: right center;
	}
}

/* Tablet — uma coluna, ilustração some ────────────────────── ≤ 960px ── */
@media (max-width: 960px) {
	.cpc-hero {
		padding-top: 52px;
	}

	.cpc-hero .cpc-hero-conteudo {
		grid-template-columns: 1fr;
		gap: 36px;
	}

	.cpc-hero .cpc-hero-copy {
		max-width: 780px;
	}

	.cpc-hero .cpc-hero-busca {
		width: 100%;
		margin-top: 18px;
	}

	.cpc-hero .cpc-hero-visual {
		display: none;
	}
}

/* Celular ─────────────────────────────────────────────────── ≤ 640px ── */
@media (max-width: 640px) {
	.cpc-hero {
		min-height: auto;
		padding: 28px 0 46px;
	}

	/* Respiro lateral de 16px de cada lado — o `--cpc-largura-celular` do
	 * design system §1.4, escrito como largura. */
	.cpc-hero .cpc-hero-conteudo {
		width: calc(100% - 32px);
	}

	.cpc-hero .cpc-hero-copy,
	.cpc-hero .cpc-hero-busca {
		min-width: 0;
		max-width: 100%;
	}

	/* ATENCAO: menor que o mockup, de propósito, e a razão está medida.
	 *
	 * O mockup manda `clamp(33px, 10.5vw, 46px)` aqui, e num celular de 430px
	 * isso dá 45px em três linhas — 142px só de título. Com o resto do bloco, o
	 * botão de busca terminava 50px ABAIXO da área visível: a ação principal da
	 * home não era clicável sem rolar. Medido na 03005, nos dois tamanhos.
	 *
	 * O degrau novo fica entre o "título de bloco" e o "título de seção" da
	 * escala do design system §1.3 — não é valor inventado, é o degrau abaixo.
	 * Decisão do operador em 2026-08-12: a fonte do bloco de abertura é o que
	 * cede.
	 */
	.cpc-hero .cpc-hero-titulo {
		margin-bottom: 8px;
		font-size: clamp(28px, 8vw, 36px);
	}

	.cpc-hero .cpc-hero-chapeu {
		font-size: var(--cpc-t-micro);
	}

	.cpc-hero .cpc-hero-paragrafo {
		font-size: var(--cpc-t-corpo);
		line-height: 1.45;
	}

	/* A troca de redação. Estas duas regras precisam ficar AQUI DENTRO: elas
	 * pesam o mesmo que a regra da faixa "celular baixo" logo abaixo, que
	 * esconde o parágrafo inteiro, e em empate vence quem vem depois no
	 * arquivo. Escritas no fim do arquivo, o parágrafo curto reapareceria
	 * justamente na tela mais apertada. */
	.cpc-hero .cpc-hero-paragrafo-longo {
		display: none;
	}

	.cpc-hero .cpc-hero-paragrafo-curto {
		display: block;
	}

	/* Chave do editor: o operador liga e desliga chapéu e parágrafo no celular,
	 * um a um, sem deploy. O PHP põe esta classe quando a chave está desligada.
	 *
	 * ATENCAO: precisa vir DEPOIS da regra do parágrafo curto logo acima. As
	 * duas pesam duas classes, e em empate vence a última — invertendo a ordem,
	 * desligar o parágrafo no editor não faria nada.
	 *
	 * Vale só nesta faixa: acima de 640px as chaves não têm efeito nenhum, e é
	 * o que o rótulo delas no editor promete. */
	.cpc-hero .cpc-hero-some-no-celular {
		display: none;
	}

	.cpc-hero .cpc-hero-passo-categoria {
		padding: 12px;
		border-radius: var(--cpc-raio-md);
	}

	.cpc-hero .cpc-hero-passo-valor {
		margin-top: 16px;
		padding: 0 4px;
	}

	.cpc-hero .cpc-hero-passo-titulo h2 {
		font-size: var(--cpc-t-card);
	}

	.cpc-hero .cpc-hero-passo-titulo p {
		font-size: var(--cpc-t-micro-grande);
	}

	.cpc-hero .cpc-hero-categorias {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.cpc-hero .cpc-hero-categoria {
		min-height: 88px;
	}

	.cpc-hero .cpc-hero-credito-valor {
		gap: 7px;
	}

	.cpc-hero .cpc-hero-credito-valor strong {
		font-size: var(--cpc-t-numero);
	}

	.cpc-hero .cpc-hero-credito-lapis {
		width: 27px;
		height: 27px;
	}

	.cpc-hero .cpc-hero-credito-entrada-wrap {
		font-size: var(--cpc-t-card-grande);
	}

	.cpc-hero .cpc-hero-credito-entrada {
		width: 178px;
	}

	.cpc-hero .cpc-hero-faixa-limites {
		font-size: var(--cpc-t-micro);
	}

	/* Só o respiro muda. A altura e a largura do botão continuam as do
	 * desktop: na referência elas vêm da regra que pesa mais, e a regra que
	 * as encolheria perde. */
	.cpc-hero .cpc-hero-enviar {
		margin-top: 11px;
	}

	.cpc-hero .cpc-hero-selos {
		gap: 10px 16px;
		margin-top: 15px;
	}
}

/* Celular baixo — o parágrafo e os selos saem para o botão caber na primeira
 * tela. É o que o mockup faz. ───────────── ≤640px e altura ≤760px ── */
@media (max-width: 640px) and (max-height: 760px) {
	.cpc-hero {
		padding-top: 14px;
		padding-bottom: 24px;
	}

	.cpc-hero .cpc-hero-titulo {
		margin-bottom: 7px;
		font-size: clamp(29px, 9vw, 36px);
	}

	.cpc-hero .cpc-hero-chapeu {
		margin-bottom: 0;
		font-size: var(--cpc-t-nano);
	}

	.cpc-hero .cpc-hero-paragrafo,
	.cpc-hero .cpc-hero-selos {
		display: none;
	}

	/* Nada da caixa nem do botão comprime aqui. No mockup as três regras que
	 * comprimiriam — respiro da caixa, respiro e altura do botão — perdem
	 * para regras que pesam mais. O renderizado mantém 18px na caixa, 11px de
	 * respiro no botão e os 54px de altura. Seguir o mockup literalmente
	 * derrubaria o botão para 41px, abaixo do mínimo de alvo clicável do
	 * design system. */
}

/* Celular estreito ────────────────────────────────────────── ≤ 380px ──
 *
 * O respiro cai para 12px de cada lado: é o `--cpc-largura-estreita` do design
 * system §1.4, escrito como largura em vez de preenchimento. Vale só para o
 * conteúdo — o fundo continua ocupando a tela inteira.
 */
@media (max-width: 380px) {
	.cpc-hero .cpc-hero-conteudo {
		width: calc(100% - 24px);
	}
}

/* Movimento reduzido — a interface funciona inteira sem animação nenhuma
 * (design-system.md §3, regra 6). ───────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
	.cpc-hero *,
	.cpc-hero *::before,
	.cpc-hero *::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
	}

	.cpc-hero .cpc-hero-enviar {
		animation: none !important;
	}

	.cpc-hero .cpc-hero-enviar::after {
		display: none;
	}

	.cpc-hero .cpc-hero-faixa-alca {
		transition: none;
	}
}