/*
 * Ajustes sobre o desenho.
 *
 * Arquivo separado de propósito: `main.css` é a cópia fiel do `styles.css`
 * entregue, e manter as correções aqui deixa cada desvio visível e reversível.
 * Carregado depois do main.css.
 */

/* ==========================================================================
 * LISTAS: sem linha sobrando no último item
 *
 * O desenho separa itens de lista com `border-bottom`, mas só zera o último em
 * três lugares (`.hero-question p`, `.hero-choice > a`, `.hero-stats div`).
 * Em todas as outras listas o último item mantém a borda, e o que deveria ser
 * um separador entre itens vira um traço solto fechando a lista.
 *
 * Aparece na home (cards de área), nas páginas internas (percursos, etapas,
 * checklists), nos artigos e no acervo do blog. Corrigido em um lugar só.
 *
 * As bordas de card em grade (`.info-card`, `.support-card`, `.authority-card`
 * e afins) NÃO entram aqui: ali o `border-bottom` desenha a malha da grade,
 * não um separador de lista.
 * ========================================================================== */

.pillar-card li:last-child,
.result-actions li:last-child,
.condo-path li:last-child,
.steps li:last-child,
.team-group li:last-child,
.article-page li:last-child,
.article-page ul li:last-child,
.article-page ol li:last-child,
.problem-list > div:last-child,
.why-list > div:last-child,
.faq details:last-child {
	border-bottom: 0;
}

/* --------------------------------------------------------------------------
 * check-list: o caso das duas colunas
 *
 * Aqui `:last-child` não resolve. O desenho usa `columns: 2` (multi-coluna do
 * CSS), então o item que fecha a PRIMEIRA coluna não é o último do DOM — e
 * continuaria com o traço solto. CSS não sabe selecionar "último de cada
 * coluna".
 *
 * Solução: grade de verdade e borda invertida. Com `border-top` em vez de
 * `border-bottom`, a linha passa a existir só ENTRE fileiras; basta remover a
 * do topo da primeira fileira, que é sempre completa. Vale para duas colunas
 * e para uma, sem depender de a quantidade de itens ser par.
 *
 * Efeito colateral aceito: a leitura passa de coluna-a-coluna para
 * linha-a-linha. São itens independentes de checklist, e a ordem visual passa
 * a bater com a ordem do DOM — melhor para leitor de tela.
 * -------------------------------------------------------------------------- */

.check-list {
	columns: auto;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: 45px;
	/*
	 * O `gap: 45px` do desenho valia só entre colunas no multi-column. Em grid
	 * o mesmo atalho passa a valer também entre fileiras, o que abria um vão de
	 * 45px e descolava o texto da própria linha divisória.
	 */
	row-gap: 0;
}

.check-list li {
	border-top: 1px solid var(--line);
	border-bottom: 0;
	/* Texto centralizado na altura da fileira: quando um item quebra em duas
	   linhas, o vizinho não fica pendurado no topo. Os itens continuam
	   esticando na mesma altura, então as bordas seguem alinhadas. */
	display: flex;
	align-items: center;
	min-height: 52px;
}

/* Primeira fileira (2 itens) sem linha em cima. */
.check-list li:nth-child(-n + 2) {
	border-top: 0;
}

@media (max-width: 620px) {
	.check-list {
		grid-template-columns: 1fr;
	}

	/* Numa coluna só, a primeira fileira tem 1 item: o segundo volta a ter linha. */
	.check-list li:nth-child(2) {
		border-top: 1px solid var(--line);
	}

	.check-list li:first-child {
		border-top: 0;
	}
}

/* ==========================================================================
 * ESCALA TIPOGRÁFICA
 *
 * Auditoria feita no navegador (1440px e 390px) sobre home, página de área,
 * artigo, arquivo do blog e post. O desenho foi construído com tipografia
 * muito pequena: 13 elementos abaixo de 14px, incluindo links de menu e rodapé
 * a 9,3px, rótulos de card a 9,9px e botões a 12,5px.
 *
 * Para um escritório de advocacia — público que tende a ser mais velho e lê no
 * celular — isso é barreira de leitura, não estilo. Aqui ficam definidos os
 * pisos de legibilidade e uma hierarquia de títulos coerente, válida nas duas
 * pontas.
 *
 * Referência dos pisos: corpo ≥16px, apoio ≥14px, rótulo/micro ≥12,5px,
 * elemento interativo ≥13px.
 * ========================================================================== */

/* --- Micro-rótulos: numeração de card, cargo, categoria, chamada ---------- */
.pillar-card > span,
.support-card span,
.method-flow span,
.info-card span,
.method-item span,
.person-card small,
.article-card small,
.article-card strong,
.support-card strong,
.hero-stats p,
.authority-card p {
	font-size: .78rem;
}

/* --- Sobrelinha das seções ----------------------------------------------- */
.eyebrow {
	font-size: .8rem;
}

/* --- Elementos interativos ----------------------------------------------- */
.button {
	font-size: .875rem;
}

.footer-links a {
	font-size: .82rem;
}

/* --- Texto de apoio ------------------------------------------------------- */
.person-card p,
.footer-info strong,
.footer-info span,
.footer-info a,
footer > p {
	font-size: .88rem;
}

.method-flow p,
.pillar-card li {
	font-size: .97rem;
}

/* --- Títulos de terceiro nível: o desenho variava entre 22, 25, 29 e 32px
       sem critério. Passam a ter dois degraus só: card de destaque e item de
       lista. ------------------------------------------------------------- */
.person-card h3,
.people-group.assistant-group .person-card h3 {
	font-size: 1.32rem;
}

.method-flow h3 {
	font-size: 1.36rem;
}

/* --------------------------------------------------------------------------
 * Blog: meta, breadcrumb e títulos de encerramento
 *
 * Três defeitos encontrados na auditoria do post:
 *
 * 1. A data saía a 17,6px — maior que muito texto de apoio. `.post-meta` é um
 *    `<p>` dentro do `.page-hero-content`, e `.page-hero p:not(.eyebrow)` tem
 *    especificidade maior que a classe sozinha. Precisa do seletor composto.
 * 2. O breadcrumb ficava em 11,2px, abaixo do piso de legibilidade.
 * 3. "Leia também" (29px) e o título do bloco de contato (24px) eram dois H2
 *    de mesmo nível hierárquico com tamanhos diferentes.
 * -------------------------------------------------------------------------- */

/* `p.post-meta` e não `.post-meta`: `.page-hero p:not(.eyebrow)` soma a
   especificidade do argumento do :not e empata com a classe sozinha. */
.page-hero p.post-meta {
	font-size: .82rem;
	letter-spacing: .1em;
}

.breadcrumbs {
	font-size: .78rem;
}

.related-posts > h2,
.article-cta h2 {
	font-size: clamp(1.45rem, 2.4vw, 2.15rem);
	line-height: 1.1;
}

/* --------------------------------------------------------------------------
 * Hierarquia de títulos no responsivo
 *
 * Os `clamp` do desenho têm mínimos pensados para desktop: num aparelho de
 * 390px o H1 ainda saía a 52px e os H2 a 45px. Uma manchete de 100 caracteres
 * a 52px ocupa quase uma tela inteira, e H2 quase do tamanho do H1 apaga a
 * diferença entre título de página e título de seção.
 *
 * Escala alvo no celular: H1 33 · H2 27 · H3 21 · H3 menor 18 · corpo 16 —
 * proporção equivalente à do desktop (53/47/32/21), só que na medida da tela.
 * -------------------------------------------------------------------------- */

@media (max-width: 1260px) {
	.four-path-hero h1,
	.page-hero h1 {
		font-size: clamp(2.05rem, 5.4vw, 3.4rem);
		max-width: 22ch;
		line-height: 1.08;
	}

	.home-section-heading h2,
	.people-group-header h2,
	.content-lead h2,
	.internal-heading h2,
	.audience-heading h2,
	.problem-intro h2,
	.smart-intro h2,
	.condo-heading h2,
	.track-copy h2,
	.why-statement h2,
	.intro h2,
	.section-heading h2,
	.process h2,
	.contact h2 {
		font-size: clamp(1.7rem, 4.4vw, 2.7rem);
		line-height: 1.1;
	}

	/* Páginas internas usam `.info-card` e `.method-item`; entram no mesmo
	   degrau dos cards da home, senão saíam maiores que os H2 da própria seção. */
	.five-pillars .pillar-card h3,
	.support-card h3,
	.info-card h3,
	.method-item h3 {
		font-size: clamp(1.3rem, 3vw, 1.75rem);
	}

	.article-card h2,
	.article-card h3 {
		font-size: clamp(1.25rem, 2.8vw, 1.6rem);
	}
}

@media (max-width: 620px) {
	.four-path-hero h1,
	.page-hero h1 {
		font-size: clamp(1.95rem, 8.5vw, 2.5rem);
		max-width: none;
	}

	.home-section-heading h2,
	.people-group-header h2,
	.content-lead h2,
	.internal-heading h2,
	.audience-heading h2,
	.problem-intro h2,
	.smart-intro h2,
	.condo-heading h2,
	.track-copy h2,
	.why-statement h2,
	.intro h2,
	.section-heading h2,
	.process h2,
	.contact h2 {
		font-size: clamp(1.6rem, 7vw, 2.05rem);
	}

	.five-pillars .pillar-card h3,
	.support-card h3,
	.info-card h3,
	.method-item h3 {
		font-size: 1.3rem;
	}

	.article-card h2,
	.article-card h3 {
		font-size: 1.25rem;
	}

	.person-card h3,
	.people-group.assistant-group .person-card h3,
	.method-flow h3 {
		font-size: 1.15rem;
	}

	/* Prosa do acervo: os títulos internos dos posts também encolhem. */
	.article-page h2 {
		font-size: 1.5rem;
		margin-top: 36px;
	}

	.article-page h3 {
		font-size: 1.22rem;
	}
}

/* --------------------------------------------------------------------------
 * Alinhamento do cabeçalho com o resto da página
 *
 * O `.site-header` do desenho usa `padding-inline: clamp(20px, 3vw, 58px)`,
 * enquanto `.page-hero`, `.content-section` e o `footer` usam
 * `clamp(24px, 8vw, 130px)`. São dois ritmos horizontais diferentes: a 1920px
 * o cabeçalho para em 58px e o conteúdo em 130px.
 *
 * Resultado medido: a logo ficava 72px à esquerda da coluna de conteúdo e o
 * menu 57px além da margem direita — o cabeçalho inteiro "vazando" para fora
 * do grid da página.
 *
 * Passa a usar o mesmo clamp das seções. Abaixo de 620px o desenho reduz o
 * padding de propósito para caber o botão do menu, e isso é preservado.
 * -------------------------------------------------------------------------- */

@media (min-width: 621px) {
	.site-header {
		padding-inline: clamp(24px, 8vw, 130px);
	}
}

/* --------------------------------------------------------------------------
 * Marca no topo: logo horizontal
 *
 * O desenho usava a versão vertical (viewBox 1191x1080, quase quadrada) e a
 * caixa `.brand` foi dimensionada para ela: 190x126. A horizontal é 1920x1080,
 * ou seja 16:9 — dentro daquela caixa o `object-fit: contain` a encolheria para
 * ~165x93, deixando o logo pequeno e com sobra vertical.
 *
 * A caixa passa a ter a proporção da arte (16:9), ocupando a altura útil do
 * cabeçalho (138px de header menos os 10px de padding).
 *
 * Dimensões em px, não em %: `.brand` é `display: grid` com a linha em `auto`,
 * então `height: 100%` no filho resolve contra altura indefinida e cai para
 * `auto` — a imagem voltava ao tamanho intrínseco e estourava a caixa.
 * -------------------------------------------------------------------------- */

/*
 * Largura fluida em vez de degraus fixos: entre 961px e ~1300px o cabeçalho
 * fica apertado — os 8 itens do menu já quebravam em 2-3 linhas no desenho
 * original, e alinhar o padding com o conteúdo tirou mais 144px dessa faixa.
 * Encolher a marca junto com a viewport devolve esse espaço ao menu.
 */
.brand,
.brand-official {
	width: clamp(145px, 12.5vw, 200px);
	height: auto;
	aspect-ratio: 16 / 9;
}

/*
 * No desenho original o menu cabia em uma linha a 1440px. Alinhar o padding do
 * cabeçalho com o conteúdo tirou 144px dessa faixa e passou a quebrar os
 * rótulos em duas linhas — regressão que não existia antes.
 *
 * O espaço é recuperado em três frentes pequenas, em vez de uma grande:
 * gap mais econômico, entreletra um pouco menor e a marca reduzida (acima).
 * Somadas, devolvem ~57px e o menu volta a caber em uma linha.
 */
@media (min-width: 1261px) {
	/*
	 * `.inner-header .main-nav` precisa estar aqui junto: o desenho redefine a
	 * fonte do menu nas páginas internas com especificidade maior (0,2,0), e
	 * sem isso o ajuste valia só na home — o resto do site voltava aos 9,28px.
	 */
	.main-nav,
	.inner-header .main-nav {
		/*
		 * O desenho usa .58rem — 9,28px, pequeno demais para navegação e o
		 * principal motivo de o menu ficar difícil de ler.
		 *
		 * Fonte fluida em vez de fixa: o espaço disponível para o menu cresce
		 * com a viewport (0,84 × largura − marca), então o tamanho pode
		 * acompanhar. O piso de 10,5px é o maior que ainda cabe em uma linha a
		 * 1280px, e o teto de 13px evita que o menu domine o cabeçalho em telas
		 * muito largas.
		 */
		font-size: clamp(10.5px, .83vw, 13px);
		gap: clamp(8px, .8vw, 16px);
	}

	.main-nav a {
		letter-spacing: .055em;
	}
}

/* --------------------------------------------------------------------------
 * Menu mobile entra junto com a troca da faixa de números
 *
 * O desenho troca as duas coisas em pontos diferentes: o hambúrguer aparece em
 * `max-width: 960px` e o bloco de números do hero some em `max-width: 1050px`.
 * Sobra uma faixa de 90px em que o layout já está em modo estreito mas o menu
 * ainda tenta caber horizontal — justamente onde ele fica mais apertado.
 *
 * Aqui os dois passam a virar no mesmo ponto. `top: 100%` em vez do valor fixo
 * do desenho porque a altura do cabeçalho agora acompanha a marca fluida.
 * -------------------------------------------------------------------------- */

@media (max-width: 1260px) {
	/*
	 * O desenho esconde o bloco de números do hero em 1050px. O ponto de virada
	 * aqui é 1100 — calculado a partir de onde o menu horizontal deixa de caber
	 * dentro da margem alinhada: `0.84 × largura − 145px de marca = 779px de
	 * menu` resolve em ~1100px. Abaixo disso o menu invadia o recuo da direita.
	 * Antecipar o esconde-hero mantém os dois interruptores no mesmo ponto.
	 */
	.hero-choice {
		display: none;
	}

	/*
	 * Sem a coluna dos números, o hero precisa voltar a uma coluna só. O desenho
	 * só faz isso em 960px, então entre 961 e 1050 já sobrava uma coluna vazia —
	 * defeito que ficaria bem mais visível agora que o corte subiu para 1260.
	 */
	.hero {
		grid-template-columns: 1fr;
	}

	.menu-toggle {
		display: grid;
		gap: 5px;
		padding: 10px;
		border: 0;
		background: none;
		cursor: pointer;
	}

	.menu-toggle span:not(.sr-only) {
		display: block;
		width: 27px;
		height: 1px;
		background: white;
		transition: transform .25s ease, opacity .18s ease, background-color .25s ease;
	}

	/*
	 * Aberto, as três barras viram um X dourado.
	 *
	 * O gancho é `aria-expanded`, que o JS já mantém em dia — não precisa de
	 * classe nova, e o estado visual passa a derivar do mesmo atributo que o
	 * leitor de tela anuncia, sem risco de um mudar e o outro não.
	 *
	 * O deslocamento de 6px é a distância entre as barras (1px de altura + 5px de
	 * `gap`): leva a de cima e a de baixo exatamente ao centro, onde as duas se
	 * cruzam. A do meio some.
	 */
	.menu-toggle[aria-expanded="true"] span:not(.sr-only) {
		background: var(--gold, #e1b941);
	}

	.menu-toggle[aria-expanded="true"] span:nth-child(1) {
		transform: translateY(6px) rotate(45deg);
	}

	.menu-toggle[aria-expanded="true"] span:nth-child(2) {
		opacity: 0;
	}

	.menu-toggle[aria-expanded="true"] span:nth-child(3) {
		transform: translateY(-6px) rotate(-45deg);
	}

	/* O rótulo acompanha o que o botão faz agora, não o que ele fazia antes. */
	.menu-toggle .sr-fechar,
	.menu-toggle[aria-expanded="true"] .sr-abrir {
		display: none;
	}

	.menu-toggle[aria-expanded="true"] .sr-fechar {
		display: block;
	}

	/* O X continua sendo X sem a animação; só o caminho até ele desaparece. */
	@media (prefers-reduced-motion: reduce) {
		.menu-toggle span:not(.sr-only) {
			transition: none;
		}
	}

	/* Idem no mobile: o desenho fixa `top: 105px` no `.inner-header .main-nav`,
	   valor que não bate mais com a altura do cabeçalho ajustado. */
	.main-nav,
	.inner-header .main-nav {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		display: none;
		align-items: stretch;
		gap: 0;
		padding: 24px;
		background: #111c19;
	}

	.main-nav.open {
		display: flex;
		flex-direction: column;
	}

	/*
	 * No menu empilhado não há disputa por espaço horizontal: os rótulos podem
	 * ter tamanho de leitura normal, bem acima dos 9,28px do desenho.
	 */
	.main-nav a {
		padding: 14px 0;
		font-size: .82rem;
		letter-spacing: .08em;
		white-space: normal;
	}

	.nav-cta {
		margin-top: 10px;
		text-align: center;
	}

	/* ----------------------------------------------------------------------
	 * Menu mobile em tela cheia, com WhatsApp e Contato no rodapé do painel
	 *
	 * O painel abria com a altura do conteúdo e deixava o site aparecendo por
	 * baixo. Agora ocupa tudo o que existe abaixo do cabeçalho.
	 *
	 * O cabeçalho vira `fixed` enquanto o menu está aberto. Não é enfeite: ele é
	 * `absolute; top: 0`, então rola junto com a página — abrir o menu depois de
	 * rolar deixaria o botão de fechar fora da tela, sem saída a não ser recarregar.
	 *
	 * Com o cabeçalho fixo, o painel (que é `absolute; top: 100%` dentro dele)
	 * fica preso à viewport de graça, e `calc(100dvh - 100%)` resolve a altura sem
	 * número mágico: o `100%` de um absoluto se mede pela altura do bloco que o
	 * contém, que é o próprio cabeçalho. Assim o painel acompanha sozinho as três
	 * alturas de cabeçalho do desenho, em vez de repetir 112px/105px/120px aqui e
	 * dessincronizar na próxima mudança. `dvh` e não `vh` por causa da barra do
	 * navegador no celular, que muda de altura ao rolar.
	 * ------------------------------------------------------------------- */

	.site-header:has(.main-nav.open) {
		position: fixed;
		top: 0;
	}

	.main-nav.open {
		height: calc(100dvh - 100%);
		overflow-y: auto;
		overscroll-behavior: contain;
	}

	/* Trava a rolagem do site atrás do menu aberto. */
	html:has(.main-nav.open) {
		overflow: hidden;
	}

	/* ----------------------------------------------------------------------
	 * Conteúdo do painel mobile
	 *
	 * Abaixo desta faixa o menu do admin dá lugar ao bloco `.nav-mobile`, que
	 * lista as nove áreas em vez do atalho "Outras Ações" e fecha com Sobre,
	 * Blog e os dois botões de contato. Trocar o bloco inteiro, em vez de
	 * esconder item a item, mantém o mobile imune ao que o escritório cadastrar
	 * no menu.
	 * ------------------------------------------------------------------- */

	.main-nav > a {
		display: none;
	}

	.nav-mobile {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		min-height: 100%;
	}

	/* Os links do painel são filhos do bloco, não do .main-nav, então repetem
	   aqui o tamanho de leitura definido para o menu empilhado. */
	.nav-mobile > a {
		padding: 13px 0;
		font-size: .82rem;
		letter-spacing: .08em;
		text-transform: uppercase;
		white-space: normal;
	}

	/*
	 * Empurra os botões para o rodapé do painel. Como `.nav-mobile` tem
	 * `min-height: 100%`, sobra espaço mesmo com poucos itens, e o par fica
	 * ancorado embaixo em vez de colado na lista.
	 *
	 * `sticky` além disso porque a lista cresceu: com dez áreas mais Sobre e Blog,
	 * o conteúdo passa de 770px e não cabe num iPhone de 844px — medido, faltavam
	 * 30px. Sem isto, os dois botões ficariam logo abaixo da dobra, e o CTA de
	 * WhatsApp que motivou a mudança seria o único item que exige rolar para ver.
	 *
	 * A alternativa era apertar o espaçamento dos links, mas eles já estão com
	 * 43px de altura de toque, na borda dos 44px recomendados — encolher trocaria
	 * um problema por outro. Colado no rodapé, o par fica sempre visível e a lista
	 * rola por trás.
	 *
	 * O fundo é obrigatório: sem ele os links passariam por baixo dos botões ao
	 * rolar.
	 *
	 * O fundo é um degrau mais claro que o painel, e o bloco sangra até as bordas
	 * — `margin-inline: -24px` cancela o padding do `.main-nav`, e o
	 * `margin-bottom` negativo faz o mesmo embaixo. Sem a sangria ele ficaria uma
	 * caixa flutuando com o conteúdo aparecendo pelas laterais e por baixo; de
	 * ponta a ponta lê como rodapé da área, que é o que ele é. A cor diferente diz
	 * "isto não faz parte da lista" antes de qualquer linha.
	 */
	.nav-acoes {
		position: sticky;
		/*
		 * -24px, não 0: o `bottom` do sticky é medido contra a caixa de CONTEÚDO
		 * do painel, que termina 24px acima da borda visual por causa do padding.
		 * Com 0 a banda parava ali e sobrava uma faixa por onde os links passavam
		 * por baixo — medido, o "Blog" aparecia. O deslocamento compensa o padding
		 * e encosta a banda no fim do painel. A `margin-bottom` negativa abaixo
		 * resolve o fluxo, mas não a ancoragem: são coisas diferentes.
		 */
		bottom: -24px;
		margin-top: auto;
		margin-inline: -24px;
		margin-bottom: -24px;
		display: flex;
		flex-direction: column;
		gap: 10px;
		padding: 0 24px 24px;
		background: #16231f;
	}

	/* Dentro do bloco fixo a divisória é o limite superior dele, então encosta no
	   topo em vez de manter a folga que separa as seções da lista. */
	.nav-acoes .nav-divisor {
		margin: 0 0 14px;
	}

	.nav-acoes .button {
		justify-content: center;
		padding: 15px 18px;
		font-size: .72rem;
		text-align: center;
	}

	.nav-mobile .nav-cta {
		margin-top: 0;
	}
}

/*
 * O painel mobile não existe no desktop, onde a navegação é a faixa horizontal
 * vinda do menu do admin.
 *
 * Precisa de media query, não pode ser regra solta: solta, ela ficaria depois do
 * bloco de `max-width: 1260px` com a mesma especificidade e venceria também no
 * mobile — o painel simplesmente não aparecia. Foi assim que escrevi da primeira
 * vez e o menu abriu vazio.
 */
@media (min-width: 1261px) {
	.nav-mobile {
		display: none;
	}
}

/* --------------------------------------------------------------------------
 * Divisória dourada com as pontas dissolvidas
 *
 * Uma linha de ponta a ponta cortaria o painel em blocos duros. O degradê
 * partindo de transparente, passando pelo dourado no centro e voltando a
 * transparente marca a separação sem fechar a composição — a linha some antes
 * de encostar nas bordas.
 *
 * 1px em tela de alta densidade some; a opacidade compensa mantendo o traço
 * discreto sem precisar engrossar.
 * -------------------------------------------------------------------------- */

.nav-divisor {
	display: block;
	height: 1px;
	margin: 14px 0;
	border: 0;
	opacity: .85;
	background: linear-gradient(
		90deg,
		transparent 0%,
		rgba(225, 185, 65, .15) 12%,
		var(--gold, #e1b941) 50%,
		rgba(225, 185, 65, .15) 88%,
		transparent 100%
	);
}

/*
 * `nowrap` só onde há folga confirmada. Como item flex, cada link encolhe até
 * o min-content (a maior palavra) e quebra mesmo quando a linha caberia —
 * travar o wrap resolve, mas se aplicado numa largura apertada o menu
 * transbordaria o cabeçalho. Abaixo disso, deixa quebrar como o desenho já
 * fazia.
 */
@media (min-width: 1261px) {
	.main-nav a {
		white-space: nowrap;
	}
}

.brand-official {
	object-fit: contain;
}

@media (max-width: 620px) {
	.brand,
	.brand-official {
		width: 145px;
	}
}

/* --------------------------------------------------------------------------
 * Hero da home — título grande demais no desktop
 *
 * Medido em 1440x900 antes da correção:
 *   - h1 a 86px, 6 linhas, 560px de altura
 *   - apenas ~17 caracteres por linha
 *   - hero com 1190px, estourando a dobra em 290px
 *
 * Duas causas somadas:
 *
 * 1. `clamp(3.25rem, 6vw, 6.5rem)` foi dimensionado para uma manchete curta.
 *    A manchete real tem 100 caracteres.
 * 2. A coluna do texto tinha só 632px de 1425px disponíveis, porque a grid
 *    reserva 32vw para as estatísticas mais 7vw de gap. O `max-width: 1080px`
 *    do h1 nunca chegava a valer.
 *
 * Corrige os dois: devolve largura à coluna do texto e baixa o teto da fonte,
 * mirando 30-35 caracteres por linha — a faixa em que manchete display continua
 * legível. Só a partir de 961px, que é onde o desenho deixa de empilhar.
 * -------------------------------------------------------------------------- */

@media (min-width: 961px) {
	.hero {
		/* Coluna da direita mais enxuta e menos respiro entre as duas. */
		grid-template-columns: minmax(0, 1fr) minmax(260px, 26vw);
		gap: 4.5vw;
		/* O topo de 190px empurrava tudo para fora da dobra. */
		padding-top: 165px;
	}

	.four-path-hero h1 {
		font-size: clamp(2.9rem, 3.7vw, 4.05rem);
		line-height: 1.05;
		/* Trava o comprimento da linha mesmo em telas muito largas. */
		max-width: 24ch;
	}

	.hero-content {
		max-width: none;
	}

	.hero-copy {
		max-width: 60ch;
		margin: 26px 0 34px;
	}
}

/* --------------------------------------------------------------------------
 * Primeiro bloco das páginas internas: proporção estável entre páginas
 *
 * O markup é idêntico em todas (`.content-grid` > `.content-lead` +
 * `.content-copy`), mas o resultado visual não era: a coluna da esquerda tem
 * 426px e o título 47px, o que dá ~14 caracteres por linha. Com títulos que vão
 * de 29 a 63 caracteres, o mesmo bloco fechava em 2 linhas numa página e 5 em
 * outra — daí a impressão de páginas fora do padrão.
 *
 * Correção pela geometria, não caso a caso: a coluna ganha largura (gap menor,
 * proporção mais equilibrada) e o título desce para ~35px. Com ~22 caracteres
 * por linha, o título mais curto ocupa 2 linhas e o mais longo 3 — faixa
 * estreita o bastante para as páginas parecerem irmãs.
 *
 * O `.internal-heading h2` fica de fora: ele ocupa a largura toda da seção, e
 * ali 47px está correto.
 * -------------------------------------------------------------------------- */

@media (min-width: 1051px) {
	.content-grid {
		grid-template-columns: 1fr 1.25fr;
		gap: 6.5vw;
	}

	.content-lead h2 {
		font-size: clamp(1.7rem, 2.4vw, 2.6rem);
		line-height: 1.1;
	}
}

/* --------------------------------------------------------------------------
 * Hover dos cards: mesmo comportamento em todas as páginas
 *
 * Auditoria do desenho: `.audience-card`, `.feature-card`, `.area-card`,
 * `.support-card`, `.person-card` e `.article-card` têm hover. O `.info-card`
 * — o card mais usado nas páginas de atuação — só tem em UMA página, através de
 * `.labor-info-grid .info-card:hover`. O `.method-item` não tem nenhum.
 *
 * O resultado é que o mesmo card responde ao mouse numa página e fica inerte na
 * seguinte.
 *
 * O realce usa `box-shadow: inset` e não `border-top`, como faz a variante da
 * trabalhista: borda de verdade acrescentaria 3px à altura do card e
 * descolaria a linha da grade. A sombra interna pinta no mesmo lugar sem
 * alterar a caixa.
 * -------------------------------------------------------------------------- */

.info-card {
	transition: background .2s ease, box-shadow .2s ease;
}

.info-card:hover {
	background: white;
	box-shadow: inset 0 3px 0 var(--gold);
}

/* A variante da trabalhista já reservava 3px de borda; sem ela os cards daquela
   página passam a ter exatamente a mesma altura das demais. */
.labor-info-grid .info-card,
.labor-info-grid .info-card:hover {
	border-top: 0;
}

/* `.method-item` fica sobre fundo escuro: o realce é um leve clareamento. */
.method-item {
	transition: background .2s ease;
}

.method-item:hover {
	background: rgba(255, 255, 255, .06);
}

/* --------------------------------------------------------------------------
 * Blocos de conteúdo alinhados à esquerda, com respiro do título
 *
 * O desenho centraliza `.faq` e `.article-page` (`max-width: 980px; margin: 0
 * auto`) dentro de seções cujo título fica na borda do conteúdo. A 1440px isso
 * empurrava o FAQ 108px para dentro, desalinhado do próprio título — e o
 * `.faq` ainda vinha sem margem superior, colado ao título (medido: 0px de
 * intervalo).
 *
 * Passam a começar na mesma borda do título, que é onde o olho procura o início
 * da linha. A largura máxima continua, para não esticar a linha de leitura.
 * -------------------------------------------------------------------------- */

/*
 * Só o `.faq` é realinhado. O `.article-page` volta a ficar centralizado
 * (decisão do operador): é coluna de leitura corrida, e centrada ela fica
 * equilibrada na página em vez de encostada numa borda com um vazio do outro
 * lado — o oposto do FAQ, que é uma lista subordinada a um título alinhado à
 * esquerda e por isso precisa começar onde o título começa.
 */
.faq {
	margin-inline: 0;
	margin-top: clamp(28px, 3vw, 44px);
}

/*
 * `.article-grid` era o único grid da família sem margem superior: `.info-grid`
 * tem 55px e `.document-box` e `.faq` ganharam respiro, mas o grid de cards
 * colava no bloco de texto anterior (medido: 0px em /outras-acoes/).
 *
 * Em /areas-de-atuacao/ o mesmo grid abre a seção, sem nada antes — por isso a
 * mesma estrutura parecia certa numa página e grudada na outra.
 *
 * Fora do arquivo do blog (`.arquivo`), onde a barra de filtros já traz a
 * própria margem e um acréscimo aqui somaria duas vezes.
 */
.content-section:not(.arquivo) > * + .article-grid {
	margin-top: clamp(38px, 4vw, 55px);
}

/* --------------------------------------------------------------------------
 * "B" decorativo ao lado do FAQ
 *
 * Com o FAQ alinhado à esquerda e limitado a 980px, sobram ~200px de coluna
 * vazia à direita. O desenho já usa esse recurso em outras seções
 * (`.section-watermark`), sempre sobre fundo escuro — aqui a mesma marca
 * aparece em fundo claro, então a opacidade é bem menor para virar textura e
 * não ruído atrás do texto.
 *
 * Feito por pseudo-elemento com `:has()` em vez de markup: o conteúdo dessas
 * páginas vem do desenho importado e é editável no admin — decoração não deveria
 * poder ser apagada sem querer por quem edita o texto.
 * -------------------------------------------------------------------------- */

.content-section:has(> .faq) {
	position: relative;
	overflow: hidden;
}

.content-section:has(> .faq)::after {
	content: "B";
	position: absolute;
	z-index: 0;
	right: clamp(-70px, -3vw, -10px);
	top: 50%;
	transform: translateY(-50%);
	color: var(--deep);
	font-family: Georgia, 'Times New Roman', serif;
	font-size: clamp(18rem, 30vw, 34rem);
	font-weight: 700;
	line-height: .72;
	letter-spacing: -.12em;
	opacity: .055;
	pointer-events: none;
	user-select: none;
}

/* O conteúdo sobe acima da marca. */
.content-section:has(> .faq) > * {
	position: relative;
	z-index: 1;
}

/*
 * No estreito não há coluna livre: a marca ficaria atrás do texto, atrapalhando
 * a leitura em vez de decorar.
 */
@media (max-width: 1100px) {
	.content-section:has(> .faq)::after {
		display: none;
	}
}

/* --------------------------------------------------------------------------
 * Breadcrumb em faixa própria, abaixo do hero
 *
 * No desenho o caminho ficava dentro do `.page-hero`, acima da sobrelinha e
 * sobre o fundo escuro. Movido para uma faixa logo abaixo, precisa de cor
 * própria: o `.breadcrumbs` original é branco translúcido com link dourado,
 * ilegível em fundo claro.
 *
 * O recuo lateral acompanha o mesmo clamp das seções, para o caminho começar
 * alinhado com o conteúdo e com a marca no topo.
 * -------------------------------------------------------------------------- */

.breadcrumb-bar {
	padding: 14px clamp(24px, 8vw, 130px);
	background: var(--cream);
	border-bottom: 1px solid var(--line);
}

.breadcrumb-bar .breadcrumbs {
	margin: 0;
	color: var(--muted);
}

.breadcrumb-bar .breadcrumbs a {
	color: #087553;
	font-weight: 700;
}

.breadcrumb-bar .breadcrumbs a:hover {
	text-decoration: underline;
}

/* --------------------------------------------------------------------------
 * Ritmo vertical entre seções
 *
 * Medido a 1280px: sobravam entre 215 e 256px de vazio entre uma seção e a
 * seguinte — quase um terço da altura da tela só de respiro. O efeito vem do
 * empilhamento: cada seção traz `clamp(80px, 10vw, 145px)` de padding em cima
 * e embaixo, e o espaço entre duas é a soma dos dois.
 *
 * `padding-block` sozinho, sem tocar no horizontal (que já foi alinhado com o
 * cabeçalho). O corte deixa o intervalo entre seções em ~130-165px, folgado
 * para um site editorial mas sem o buraco.
 * -------------------------------------------------------------------------- */

.home-pillars,
.support-areas,
.home-method,
.people-section,
.content-section,
.contact {
	padding-block: clamp(52px, 5vw, 82px);
}

/* A faixa de números não tem padding no topo (encosta no hero por design);
   só o de baixo precisa acompanhar o novo ritmo. */
.home-authority {
	padding-bottom: clamp(40px, 4vw, 64px);
}

/* O `min-height` do bloco de contato foi calibrado para o padding antigo. */
.contact {
	min-height: 0;
}

/* --------------------------------------------------------------------------
 * "Áreas principais": largura mínima dos cards
 *
 * O desenho mantém três cards por linha até 1050px e só então colapsa para uma
 * coluna. No intervalo entre 1051 e 1260 isso produz cards de ~280px — estreitos
 * demais para um card que carrega título de 32px, parágrafo e lista de até seis
 * itens: o título quebra em três linhas e a lista fica espremida.
 *
 * `auto-fit` com `minmax` troca a contagem fixa de colunas por uma largura
 * mínima: o próprio grid decide quantos cabem e reflui para dois, depois um,
 * sem que nenhum card fique abaixo de 340px.
 * -------------------------------------------------------------------------- */

@media (max-width: 1260px) {
	.five-pillar-grid {
		/*
		 * `min(340px, 100%)` e não `340px`: o mínimo do minmax é rígido, então
		 * numa tela de 360px (coluna útil de 302px) o card mantinha 340px e
		 * empurrava a página 24px para o lado. O `min()` deixa o piso ceder
		 * quando a coluna é menor que ele.
		 */
		grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr));
		grid-auto-rows: auto;
	}

	/* Os spans fixos do desenho (span 2, e o posicionamento dos cards 4 e 5)
	   entram em conflito com o auto-fit e precisam ser soltos. */
	.five-pillar-grid .pillar-card,
	.five-pillar-grid .pillar-card:nth-child(4),
	.five-pillar-grid .pillar-card:nth-child(5) {
		grid-column: auto;
	}

	/* A altura mínima de 620px foi calibrada para a coluna estreita de três por
	   linha; com cards mais largos o conteúdo ocupa menos altura. */
	.five-pillars .pillar-card {
		min-height: 0;
	}

	/*
	 * Em duas colunas, o último card sobra sozinho e deixava metade da fileira
	 * vazia. Ocupando a largura toda, a seção fecha alinhada. Dentro desta faixa
	 * o auto-fit nunca chega a três colunas (precisaria de 1064px de conteúdo, e
	 * o máximo aqui é 1058), então não há risco de o span brigar com um terceiro
	 * card na linha.
	 *
	 * `:nth-child(odd)` porque isso só vale quando a contagem é ímpar: com duas
	 * colunas, um último card em posição par tem companhia na fileira, e esticá-lo
	 * criaria uma faixa larga solta embaixo de um par normal. A quantidade de
	 * áreas é editável no admin, então a regra tem de valer para 5 e para 6.
	 */
	.five-pillar-grid .pillar-card:last-child:nth-child(odd) {
		grid-column: 1 / -1;
	}
}

/* --------------------------------------------------------------------------
 * Cards de apoio: quatro colunas de verdade iguais
 *
 * O desenho declara `repeat(4, 1fr)`, e `1fr` é `minmax(auto, 1fr)`: o piso é o
 * min-content da coluna. "Administradoras" tem 15 caracteres sem hífen nem
 * espaço, então essa coluna se recusava a descer e ficava com 266px enquanto as
 * outras três dividiam o que sobrava, com 214px. Quatro cards que deveriam ser
 * idênticos apareciam com um mais largo.
 *
 * `minmax(0, 1fr)` remove o piso e devolve a divisão exata. Defeito anterior à
 * promoção do card de inventário — a palavra sempre esteve nesse grid —, achado
 * ao medir as fileiras depois da mudança.
 *
 * A media query é obrigatória: o desenho colapsa esse grid para 2 colunas abaixo
 * de 1050px e para 1 abaixo de 700px, e este arquivo carrega depois do main.css.
 * Sem o teto de 1051px, a correção venceria aqueles colapsos e travaria o grid em
 * quatro colunas no celular.
 * -------------------------------------------------------------------------- */

@media (min-width: 1051px) {
	.support-grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* --------------------------------------------------------------------------
 * Áreas principais: a segunda fileira centraliza só quando são cinco
 *
 * O desenho fixa a posição dos cards 4 e 5 (`grid-column: 2 / span 2` e
 * `4 / span 2`) para centralizar a segunda fileira do arranjo 3+2. É bonito com
 * cinco e quebra com seis: o sexto card não tem posição declarada, não cabe ao
 * lado do quinto (que termina na coluna 6) e desce para uma terceira fileira
 * sozinho, encostado à esquerda.
 *
 * Como a quantidade de áreas é editável em cada página desde a Fase 4, a solução
 * não pode ser trocar 5 por 6 no CSS. Aqui o posicionamento fixo é solto, e
 * devolvido apenas quando o card 4 é o penúltimo e o 5 é o último — isto é,
 * quando existem exatamente cinco. Com seis, todos ficam em `span 2` e o grid de
 * 6 colunas resolve sozinho em 3+3.
 * -------------------------------------------------------------------------- */

@media (min-width: 1261px) {
	.five-pillar-grid .pillar-card:nth-child(4),
	.five-pillar-grid .pillar-card:nth-child(5) {
		grid-column: span 2;
	}

	.five-pillar-grid .pillar-card:nth-child(4):nth-last-child(2) {
		grid-column: 2 / span 2;
	}

	.five-pillar-grid .pillar-card:nth-child(5):nth-last-child(1) {
		grid-column: 4 / span 2;
	}
}

/* --------------------------------------------------------------------------
 * Botões do hero: grade simétrica 4 → 2 → 1
 *
 * O desenho usa flex com wrap: cada botão ganha a largura do próprio texto, o
 * que produzia quatro larguras diferentes e uma quebra 3+1 desalinhada.
 *
 * Grade de colunas iguais resolve as duas coisas de uma vez — todos os botões
 * ficam do mesmo tamanho e a quebra passa a ser previsível: quatro numa linha
 * no desktop, dois por linha no intermediário, um por linha no celular.
 *
 * A coluna de texto do hero também ganha espaço (a dos números encolhe), porque
 * quatro botões em 755px davam 180px cada — estreito demais até para rótulo
 * curto.
 * -------------------------------------------------------------------------- */

@media (min-width: 1261px) {
	.hero {
		grid-template-columns: minmax(0, 1fr) minmax(240px, 22vw);
		gap: 3.5vw;
	}
}

.home-actions {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 10px;
	align-items: stretch;
	/*
	 * `width: max-content` faz as colunas `1fr` resolverem pela maior largura de
	 * conteúdo em vez de dividirem a coluna inteira do hero. Continuam iguais
	 * entre si — que é o que dá simetria — mas o grupo passa a ter a largura do
	 * rótulo mais longo, e não os 827px da coluna.
	 */
	width: max-content;
	max-width: 100%;
}

.home-actions .button {
	width: 100%;
	/* Recuo enxuto: "Cobrança Condominial" quebrava em duas linhas por poucos
	   pixels. Como as colunas são iguais, o rótulo mais longo define o limite. */
	padding-inline: 14px;
	/* O desenho usa min-height 56px, calibrado para botões isolados. Numa
	   fileira de quatro isso deixa o bloco pesado; 46px mantém a área de toque
	   confortável e alivia o conjunto. */
	min-height: 46px;
	padding-block: 10px;
	font-size: clamp(.68rem, .8vw, .78rem);
	letter-spacing: .05em;
	text-align: center;
	line-height: 1.2;
}

@media (max-width: 1260px) {
	.home-actions {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/*
 * No celular os quatro continuam dois a dois — empilhados um por linha ficavam
 * uma coluna estreita e alta. O grupo passa a ocupar a largura toda e o recuo
 * interno encolhe para sobrar espaço ao rótulo mais longo; como as colunas são
 * iguais e os itens esticam, um rótulo que quebre em duas linhas não desalinha
 * o conjunto.
 */
@media (max-width: 620px) {
	.home-actions {
		width: 100%;
		gap: 8px;
	}

	.home-actions .button {
		padding-inline: 8px;
		font-size: .68rem;
		letter-spacing: .03em;
	}
}

/* Abaixo disso duas colunas não cabem sem picotar o rótulo. */
@media (max-width: 359px) {
	.home-actions {
		grid-template-columns: 1fr;
	}
}

/* --------------------------------------------------------------------------
 * Bloco de números do hero — sem as linhas externas
 *
 * O elemento carrega duas classes: `.hero-choice`, que traz `border-top` e
 * `border-bottom`, e `.hero-stats`, que desenha as divisórias entre os itens.
 * As linhas de fora fecham o bloco numa caixa que o desenho não pedia aqui.
 * Só as externas saem; as divisórias entre 40+, 14.000+ e Atuação continuam.
 * -------------------------------------------------------------------------- */

.hero-choice.hero-stats {
	border-top: 0;
	border-bottom: 0;
}

/* --------------------------------------------------------------------------
 * Faixa de números (40+ / 14.000+ / Atuação) — fecha a borda de cima
 *
 * O `.authority-card` do desenho tem `border-right` e `border-bottom`, e
 * `border-left` só no primeiro. Sem `border-top`, a faixa fica aberta em cima:
 * os cards claros parecem soltos sobre o fundo. O terceiro card é o
 * `.highlighted`, de fundo verde escuro, onde a linha não aparece nem faz falta.
 * -------------------------------------------------------------------------- */

.authority-card {
	border-top: 1px solid var(--line);
}

/*
 * Os mesmos três números (40+ / 14.000+ / Atuação) aparecem duas vezes na home:
 * no `.hero-stats`, dentro do hero, e nesta faixa clara logo abaixo.
 *
 * O desenho já esconde o bloco do hero em `max-width: 1050px`. Esconder esta
 * faixa a partir de 1051px fecha o complemento exato: no desktop os números
 * aparecem só no hero, no mobile só aqui — nunca duplicados, nunca ausentes.
 */
@media (min-width: 1261px) {
	.home-authority.compact-authority {
		display: none;
	}
}

/*
 * No mobile esta faixa passa a ser a única a mostrar os números, e o desenho
 * a dimensionou como elemento secundário: `clamp(1.75rem, 2.8vw, 3rem)` colapsa
 * no mínimo em tela estreita (2.8vw dá ~10px a 375px), e o rótulo fica em
 * .68rem. Como agora carrega sozinha essa informação, ganha peso.
 */
@media (max-width: 1260px) {
	/*
	 * 40+ e 14.000+ dividem a primeira linha; "Atuação" ocupa a segunda inteira.
	 * O desenho empilhava os três em coluna única abaixo de 700px, o que deixava
	 * a faixa muito alta e com peso igual entre os itens. Em duas linhas o bloco
	 * fica mais compacto e o card destacado ganha a ênfase que o verde já pedia.
	 */
	.home-authority.compact-authority {
		grid-template-columns: repeat(2, 1fr);
	}

	.authority-card.highlighted {
		grid-column: 1 / -1;
	}

	/*
	 * Bordas. O desenho dá `border-right` + `border-bottom` a todo card e
	 * `border-left` só ao `:first-child` — regra pensada para uma única fileira
	 * de três. Em duas linhas o segundo card fica com o lado esquerdo aberto e o
	 * destacado não fecha em nenhum dos lados.
	 *
	 * Aqui a lógica inverte: todo card fecha à esquerda e só o último de cada
	 * fileira fecha à direita. Assim cada linha divisória é desenhada uma vez só,
	 * sem dobrar espessura entre células vizinhas.
	 */
	.authority-card {
		min-height: 0;
		/*
		 * Padding lateral enxuto: com dois cards por linha, cada pixel de recuo
		 * sai do número. "14.000+" é o texto mais largo e é ele que define o
		 * limite — a 320px sobram ~102px para ele dentro do card.
		 */
		padding: 28px 16px;
		border-left: 1px solid var(--line);
		border-right: 0;
		/* Conteúdo centralizado: com dois cards estreitos lado a lado, o texto
		   alinhado à esquerda deixava blocos de larguras diferentes desencontrados. */
		align-items: center;
		text-align: center;
	}

	.authority-card:nth-child(2n),
	.authority-card.highlighted {
		border-right: 1px solid var(--line);
	}

	/*
	 * O card destacado tem fundo verde escuro: a borda clara apareceria como um
	 * fio sobre ele. Fica transparente para não desenhar nada, mantendo a mesma
	 * caixa e o alinhamento com os cards de cima.
	 */
	.authority-card.highlighted {
		border-color: transparent;
	}

	/*
	 * Com dois cards por linha o número divide a largura da tela, então a fonte
	 * acompanha a viewport em vez de um valor fixo: "14.000+" é o mais largo e
	 * precisa caber em ~110px num aparelho de 390px.
	 */
	.authority-card strong {
		font-size: clamp(1.6rem, 8.4vw, 3rem);
	}

	/* O destacado ocupa a linha toda, então pode ser maior. */
	.authority-card.highlighted strong {
		font-size: clamp(2.4rem, 10vw, 3.6rem);
	}

	.authority-card p {
		margin-top: 10px;
		font-size: .72rem;
	}

	.authority-card.highlighted p {
		font-size: .8rem;
	}

	.authority-note {
		margin-top: 30px;
		font-size: 1.02rem;
	}
}

/* Em telas bem largas o `ch` já segura a linha; a fonte pode subir um pouco. */
@media (min-width: 1600px) {
	.four-path-hero h1 {
		font-size: 4.35rem;
	}
}

/* --------------------------------------------------------------------------
 * Escala dos títulos no desktop
 *
 * Medido a 1440px antes: o h1 do hero saía a 53px, os h2 de seção a 72px e o
 * da faixa de contato a 86px. A hierarquia estava invertida — os subtítulos
 * maiores que o título principal da página.
 *
 * O desenho dimensionou cada h2 com seu próprio clamp entre 4.6vw e 6vw, o que
 * funcionava quando o h1 também era enorme. Reduzido o hero, todos ficaram
 * desproporcionais.
 *
 * Aqui todos passam a compartilhar uma escala só, ancorada no hero e um pouco
 * abaixo dele: h1 de página interna acompanha o hero, h2 de seção fica um
 * degrau abaixo. Só no desktop — no mobile os mínimos do desenho já são
 * proporcionais.
 * -------------------------------------------------------------------------- */

@media (min-width: 1261px) {
	/* H1 das páginas internas: exatamente a mesma escala do hero da home —
	   3.9vw deixava a interna (56px) maior que a home (53px). */
	.page-hero h1 {
		font-size: clamp(2.9rem, 3.7vw, 4.05rem);
		max-width: 26ch;
	}

	/* H2 de seção: um degrau abaixo do H1. */
	/*
	 * `.content-lead h2` fica de fora desta lista: ele vive numa coluna estreita
	 * do `.content-grid` e tem regra própria, mais acima. Estando aqui, vencia
	 * por ordem de origem e devolvia o título aos 47px.
	 */
	.home-section-heading h2,
	.people-group-header h2,
	.internal-heading h2,
	.audience-heading h2,
	.problem-intro h2,
	.smart-intro h2,
	.condo-heading h2,
	.track-copy h2,
	.why-statement h2,
	.intro h2,
	.section-heading h2,
	.process h2 {
		font-size: clamp(2.2rem, 3.25vw, 3.6rem);
		line-height: 1.06;
	}

	/*
	 * A faixa de contato tinha o maior título da página (86px), maior até que o
	 * H1. É um bloco de encerramento, não o assunto principal.
	 */
	.contact h2 {
		font-size: clamp(2.3rem, 3.4vw, 3.8rem);
		line-height: 1.06;
	}

	/*
	 * H3 dos cards de área: saía a 46px, praticamente igual aos H2 de seção
	 * (47px) — o título do card competia com o título da seção que o contém.
	 * Seletor precisa ser `.five-pillars .pillar-card h3` porque é assim que o
	 * desenho define; `.pillar-card h3` sozinho tem especificidade menor e perde.
	 */
	.five-pillars .pillar-card h3 {
		font-size: clamp(1.7rem, 2.2vw, 2.4rem);
		margin-top: clamp(30px, 3vw, 46px);
	}

	/* Mesmo degrau para os cards das páginas internas. */
	.info-card h3,
	.method-item h3 {
		font-size: clamp(1.5rem, 1.95vw, 2.1rem);
	}
}