/* ==========================================================================
   Recorre Soluções · folha única
   --------------------------------------------------------------------------
   CSS nativo, sem framework e sem etapa de build: o tema sobe por FTP e
   funciona. Camadas em @layer para que a ordem de especificidade seja
   explícita e o CSS do WordPress nunca vença o nosso por acidente.
   ========================================================================== */

@layer reset, tokens, base, layout, componentes, utilidades;

/* ==========================================================================
   RESET
   ========================================================================== */
@layer reset {
	*, *::before, *::after { box-sizing: border-box; }
	* { margin: 0; }
	html { -webkit-text-size-adjust: 100%; }
	body { min-height: 100svh; -webkit-font-smoothing: antialiased; }
	img, picture, svg, video { display: block; max-width: 100%; height: auto; }
	input, button, textarea, select { font: inherit; color: inherit; }
	button { background: none; border: 0; cursor: pointer; }
	ul, ol { list-style: none; padding: 0; }
	a { color: inherit; }
	p, h1, h2, h3, h4 { overflow-wrap: break-word; }
	summary::-webkit-details-marker { display: none; }
}

/* ==========================================================================
   TOKENS
   --------------------------------------------------------------------------
   A paleta é a do cliente e está fechada em quatro cores. Os neutros abaixo
   são o mesmo azul dessaturado, não cores novas.

   Contrastes verificados (WCAG 2.2):
     --brand sobre --paper ......... 8,3:1  ✓ AAA
     --muted sobre --paper ......... 5,4:1  ✓ AA
     --gold  sobre --ink ........... 7,3:1  ✓ AAA
     --gold  sobre --paper ......... 2,1:1  ✗ nunca como texto
   ========================================================================== */
@layer tokens {
	:root {
		/* Cores da marca */
		--ink:        #0B2545;
		--brand:      #0A4D9B;
		--brand-alto: #0A3F80;
		--gold:       #D4AF37;
		--paper:      #FFFFFF;
		--paper-warm: #FAFAF8;

		/* Neutros derivados */
		--muted:       #5A6B85;
		--muted-claro: #A9B8CE;
		--hairline:    rgb(11 37 69 / 0.12);
		--hairline-forte: rgb(11 37 69 / 0.22);
		--hairline-clara: rgb(255 255 255 / 0.16);

		/* Verde do WhatsApp na versão sóbria. O cliente vetou tons berrantes. */
		--whats: #128C7E;

		/* Papéis de cor no contexto claro */
		--fundo: var(--paper);
		--texto: var(--ink);
		--texto-suave: var(--muted);
		--fio: var(--hairline);
		--foco: var(--brand);

		/* Tipografia */
		--f-display: Newsreader, Georgia, 'Times New Roman', serif;
		--f-texto:   Inter, system-ui, -apple-system, 'Segoe UI', sans-serif;
		--f-mono:    'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace;

		--t--1: clamp(0.89rem, 0.86rem + 0.15vw, 0.97rem);
		--t-0:  clamp(1.06rem, 1.02rem + 0.20vw, 1.19rem);
		--t-1:  clamp(1.33rem, 1.25rem + 0.38vw, 1.56rem);
		--t-2:  clamp(1.66rem, 1.53rem + 0.65vw, 2.05rem);
		--t-3:  clamp(2.07rem, 1.86rem + 1.06vw, 2.69rem);
		--t-4:  clamp(2.59rem, 2.25rem + 1.70vw, 3.53rem);
		--t-5:  clamp(3.24rem, 2.71rem + 2.65vw, 4.63rem);

		/* Espaço */
		--e-1: 0.5rem;
		--e-2: 1rem;
		--e-3: 1.5rem;
		--e-4: 2rem;
		--e-5: 3rem;
		--e-6: 4rem;
		--e-secao: clamp(5rem, 11vh, 10rem);

		/* Forma. Rigor institucional se comunica por cantos quase retos. */
		--raio: 3px;
		--largura: 1240px;
		--margem: clamp(1.25rem, 4vw, 3rem);
		--coluna-num: clamp(0rem, -2rem + 8vw, 5.5rem);

		/* Movimento */
		--ease: cubic-bezier(0.16, 1, 0.3, 1);
		--dur: 480ms;
	}

	/* Contexto escuro: os mesmos papéis, outros valores. Qualquer componente
	   dentro de um bloco navy se adapta sem precisar de variante própria.

	   As duas classes precisam estar juntas aqui. Quando .secao--escura só
	   trocava background e color, tudo que usava --texto-suave (intro de seção,
	   eyebrow, rótulos técnicos) continuava pintando #5A6B85 sobre navy, o que
	   dá 2,8:1 e reprova em WCAG AA. Contexto escuro é um conceito só. */
	.tema-escuro,
	.secao--escura {
		--fundo: var(--ink);
		--texto: var(--paper);
		--texto-suave: var(--muted-claro);
		--fio: var(--hairline-clara);
		--foco: var(--gold);
	}
}

/* ==========================================================================
   BASE
   ========================================================================== */
@layer base {
	body {
		background: var(--fundo);
		color: var(--texto);
		font-family: var(--f-texto);
		font-size: var(--t-0);
		line-height: 1.6;
		font-variant-numeric: tabular-nums;
	}

	h1, h2, h3 {
		font-family: var(--f-display);
		font-weight: 400;
		letter-spacing: -0.02em;
		line-height: 1.12;
		text-wrap: balance;
	}
	h3 { font-weight: 500; line-height: 1.25; }

	p { text-wrap: pretty; }

	a { text-decoration-thickness: 1px; text-underline-offset: 0.22em; }

	:focus-visible {
		outline: 2px solid var(--foco);
		outline-offset: 3px;
		border-radius: 1px;
	}

	::selection { background: var(--ink); color: var(--paper); }

	/* Rótulo técnico em monoespaçada. É a assinatura visual do projeto:
	   metadado, prazo, artigo de lei e numeral usam esta fonte, nunca frase. */
	.eyebrow,
	.rotulo-mono {
		font-family: var(--f-mono);
		font-size: 0.72rem;
		font-weight: 500;
		letter-spacing: 0.12em;
		text-transform: uppercase;
		color: var(--texto-suave);
	}

	.aviso-legal {
		font-size: var(--t--1);
		line-height: 1.5;
		color: var(--texto-suave);
		max-width: 62ch;
	}

	.pular {
		position: absolute;
		left: -9999px;
		z-index: 100;
		padding: var(--e-2) var(--e-3);
		background: var(--ink);
		color: var(--paper);
	}
	.pular:focus { left: var(--e-2); top: var(--e-2); }
}

/* ==========================================================================
   LAYOUT
   ========================================================================== */
@layer layout {
	.secao { padding-block: var(--e-secao); }
	.secao--escura { background: var(--ink); color: var(--paper); }
	.secao--escura h1, .secao--escura h2, .secao--escura h3 { color: var(--paper); }

	.secao__interno,
	.hero__interno,
	.topo__interno,
	.rodape__interno,
	.rodape__base {
		max-width: var(--largura);
		margin-inline: auto;
		padding-inline: var(--margem);
	}

	/* Alternância de fundo: branco → branco quente → navy → branco.
	   Evita a monotonia sem introduzir cor nova. */
	.secao--situacoes { background: var(--paper-warm); }
	.secao--ferramenta { background: var(--paper-warm); }

	/* Cabeçalho de seção com o numeral na coluna de margem. */
	.secao__cabeca {
		display: grid;
		grid-template-columns: 1fr;
		gap: var(--e-2);
		margin-bottom: var(--e-6);
	}
	.secao__num {
		font-family: var(--f-mono);
		font-size: 0.78rem;
		font-weight: 500;
		letter-spacing: 0.1em;
		color: var(--texto-suave);
		padding-bottom: var(--e-1);
		border-bottom: 1px solid var(--gold);
		width: 2.6em;
	}
	.secao__titulo { font-size: var(--t-3); max-width: 20ch; }
	.secao__intro {
		margin-top: var(--e-3);
		max-width: 62ch;
		color: var(--texto-suave);
		font-size: var(--t-1);
		line-height: 1.5;
	}
	.secao__cabeca .eyebrow { margin-bottom: var(--e-1); }

	@media (min-width: 60rem) {
		.secao__cabeca {
			grid-template-columns: var(--coluna-num) 1fr;
			gap: var(--e-4);
			align-items: start;
		}
	}

	.secao__mais { margin-top: var(--e-4); }
	.secao__mais a { color: var(--brand); font-weight: 500; }
	.secao--escura .secao__mais a { color: var(--gold); }
}

/* ==========================================================================
   COMPONENTES
   ========================================================================== */
@layer componentes {

	/* ---------- Botões ---------- */
	.btn {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: 0.5em;
		min-height: 3rem;
		padding: 0.75rem 1.5rem;
		border-radius: var(--raio);
		font-size: var(--t--1);
		font-weight: 500;
		letter-spacing: 0.01em;
		text-decoration: none;
		border: 1px solid transparent;
		transition: background-color 170ms var(--ease), border-color 170ms var(--ease), color 170ms var(--ease);
	}
	.btn--primario { background: var(--brand); color: var(--paper); }
	.btn--primario:hover { background: var(--brand-alto); }
	.secao--escura .btn--primario,
	.tema-escuro .btn--primario { background: var(--gold); color: var(--ink); }
	.secao--escura .btn--primario:hover { background: #E0C255; }

	.btn--contorno { border-color: var(--hairline-forte); color: var(--texto); }
	.btn--contorno:hover { border-color: var(--texto); }
	.secao--escura .btn--contorno { border-color: var(--hairline-clara); color: var(--paper); }
	.secao--escura .btn--contorno:hover { border-color: var(--gold); color: var(--gold); }

	.btn--texto {
		padding-inline: 0;
		color: var(--brand);
		text-decoration: underline;
		text-decoration-color: var(--hairline-forte);
	}
	.btn--texto:hover { text-decoration-color: currentColor; }

	.btn--compacto { min-height: 2.75rem; padding: 0.5rem 1rem; }

	/* ---------- Topo ---------- */
	.topo {
		position: sticky;
		top: 0;
		z-index: 40;
		background: rgb(255 255 255 / 0.92);
		backdrop-filter: blur(10px);
		border-bottom: 1px solid var(--hairline);
	}
	.topo__interno {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--e-3);
		min-height: 4.5rem;
	}

	.marca { text-decoration: none; display: inline-flex; align-items: center; }

	/* Logotipo enviado pelo cliente. O WordPress emite <a class="custom-logo-link">
	   com o <img> dentro, e é nesse par que mandamos, não num wrapper nosso.
	   Altura fixa e largura livre para qualquer proporção de arquivo caber sem
	   distorcer nem empurrar o cabeçalho. */
	.custom-logo-link {
		display: inline-flex;
		align-items: center;
		text-decoration: none;
		line-height: 0;
	}
	.custom-logo {
		height: 2.25rem;
		width: auto;
		max-width: min(15rem, 42vw);
		object-fit: contain;
	}
	@media (max-width: 30rem) {
		.custom-logo { height: 1.9rem; }
	}
	.marca__texto {
		display: inline-flex;
		align-items: baseline;
		gap: 0.35em;
		font-family: var(--f-display);
		font-size: 1.4rem;
		letter-spacing: -0.02em;
	}
	.marca__nome { color: var(--ink); font-weight: 600; }
	.marca__sobrenome { color: var(--muted); font-weight: 300; }
	.marca__texto--rodape .marca__nome { color: var(--paper); }
	.marca__texto--rodape .marca__sobrenome { color: var(--muted-claro); }

	.navegacao__lista {
		display: flex;
		align-items: center;
		gap: var(--e-4);
	}
	.navegacao__lista a {
		font-size: var(--t--1);
		text-decoration: none;
		color: var(--ink);
		/* 0.75rem em cima e embaixo leva o alvo a 44px de altura, que é o
		   mínimo confortável de toque. O critério 2.5.8 do WCAG pede 24px,
		   mas 24px em telefone é um convite ao erro de clique. */
		padding-block: 0.75rem;
		border-bottom: 1px solid transparent;
	}
	.navegacao__lista a:hover,
	.navegacao__lista .current-menu-item > a { border-bottom-color: var(--gold); }

	.menu-botao { display: none; }

	@media (max-width: 61.99rem) {
		.menu-botao {
			display: inline-flex;
			align-items: center;
			gap: 0.6rem;
			min-height: 44px;
			padding: 0.5rem;
			font-family: var(--f-mono);
			font-size: 0.72rem;
			letter-spacing: 0.12em;
			text-transform: uppercase;
		}
		.menu-botao__barras { display: grid; gap: 5px; width: 20px; }
		.menu-botao__barras span { height: 1px; background: var(--ink); }
		.navegacao {
			position: fixed;
			inset: 4.5rem 0 auto 0;
			background: var(--paper);
			border-bottom: 1px solid var(--hairline);
			padding: var(--e-4) var(--margem) var(--e-5);
			display: none;
		}
		.navegacao[data-aberto] { display: block; }
		.navegacao__lista { flex-direction: column; align-items: stretch; gap: 0; }
		.navegacao__lista a {
			display: block;
			padding-block: var(--e-2);
			border-bottom: 1px solid var(--hairline);
			font-size: var(--t-0);
		}
		.navegacao__acao { margin-top: var(--e-3); }
		.navegacao__acao .btn { width: 100%; }
	}
	@media (min-width: 62rem) {
		.navegacao { display: flex; align-items: center; gap: var(--e-4); }
	}

	/* ---------- Hero ---------- */
	.hero { padding-block: clamp(3.5rem, 8vh, 7rem) var(--e-secao); }
	.hero__interno {
		display: grid;
		gap: var(--e-5);
	}
	@media (min-width: 62rem) {
		.hero__interno {
			grid-template-columns: 1.12fr 0.88fr;
			gap: clamp(2rem, 5vw, 4.5rem);
			align-items: center;
		}
	}

	.hero__titulo {
		margin-top: var(--e-3);
		font-size: var(--t-5);
		max-width: 15ch;
	}
	.hero__titulo em {
		font-style: italic;
		color: var(--brand);
	}
	.hero__sub {
		margin-top: var(--e-3);
		max-width: 54ch;
		font-size: var(--t-1);
		line-height: 1.5;
		color: var(--muted);
	}
	.hero__acoes {
		margin-top: var(--e-4);
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: var(--e-3);
	}
	.hero__dados {
		margin-top: var(--e-5);
		padding-top: var(--e-3);
		border-top: 1px solid var(--hairline);
		display: grid;
		gap: var(--e-3);
	}
	@media (min-width: 40rem) {
		.hero__dados { grid-template-columns: repeat(3, 1fr); gap: var(--e-2); }
	}
	.hero__dados dt {
		font-family: var(--f-mono);
		font-size: 0.68rem;
		letter-spacing: 0.12em;
		text-transform: uppercase;
		color: var(--muted);
		margin-bottom: 0.35rem;
	}
	.hero__dados dd { font-size: var(--t--1); line-height: 1.45; }

	/* ---------- Situações (navegação pelo que aconteceu) ---------- */
	.situacoes {
		display: grid;
		gap: 1px;
		background: var(--hairline);
		border-block: 1px solid var(--hairline);
	}
	@media (min-width: 48rem) {
		.situacoes { grid-template-columns: repeat(2, 1fr); }
		/* São cinco situações. Sem isto, a última fica sozinha e a célula
		   vizinha aparece como um retângulo cinza vazio. */
		.situacao:last-child:nth-child(odd) { grid-column: 1 / -1; }
	}
	.situacao__link {
		display: grid;
		grid-template-columns: 1fr auto;
		align-items: center;
		gap: var(--e-3);
		min-height: 6.5rem;
		padding: var(--e-3) var(--e-3);
		background: var(--paper-warm);
		text-decoration: none;
		transition: background-color 170ms var(--ease);
	}
	.situacao__link:hover { background: var(--paper); }
	.situacao__rotulo {
		grid-column: 1;
		display: block;
		font-family: var(--f-display);
		font-size: var(--t-1);
		line-height: 1.2;
		letter-spacing: -0.01em;
	}
	.situacao__prazo {
		grid-column: 1;
		display: block;
		margin-top: 0.5rem;
		font-family: var(--f-mono);
		font-size: 0.68rem;
		letter-spacing: 0.1em;
		text-transform: uppercase;
		color: var(--muted);
	}
	.situacao__seta {
		grid-row: 1 / span 2;
		grid-column: 2;
		color: var(--brand);
		transition: transform 200ms var(--ease);
	}
	.situacao__link:hover .situacao__seta { transform: translateX(4px); }

	/* ---------- Destaques ---------- */
	.destaques { display: grid; gap: var(--e-5); }
	@media (min-width: 56rem) {
		.destaques { grid-template-columns: repeat(2, 1fr); gap: clamp(2rem, 5vw, 4rem); }
	}
	.destaque {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: var(--e-2);
		padding-top: var(--e-3);
		border-top: 2px solid var(--ink);
	}
	.destaque__titulo { font-size: var(--t-2); }
	.destaque__titulo a { text-decoration: none; }
	.destaque__titulo a:hover { text-decoration: underline; text-decoration-color: var(--gold); }
	.destaque__resumo { color: var(--muted); max-width: 48ch; }
	.destaque__prazos { margin-top: var(--e-2); width: 100%; }
	.destaque__prazos ul { margin-top: var(--e-2); display: grid; gap: 0.6rem; }
	.destaque__prazos li {
		display: grid;
		grid-template-columns: 9rem 1fr;
		gap: var(--e-2);
		padding-bottom: 0.6rem;
		border-bottom: 1px solid var(--hairline);
		font-size: var(--t--1);
	}
	.destaque__prazo { font-family: var(--f-mono); font-size: 0.75rem; color: var(--brand); }
	.destaque .btn { margin-top: var(--e-3); }

	/* ---------- Etapas do método ---------- */
	.etapas {
		display: grid;
		gap: var(--e-4);
		counter-reset: etapa;
	}
	@media (min-width: 48rem) {
		.etapas { grid-template-columns: repeat(2, 1fr); gap: var(--e-5); }
	}
	@media (min-width: 72rem) {
		.etapas { grid-template-columns: repeat(4, 1fr); }
	}
	.etapa {
		padding-top: var(--e-3);
		border-top: 1px solid var(--hairline-clara);
		position: relative;
	}
	/* A régua: o fio que liga as etapas, com o marcador dourado. */
	.etapa::before {
		content: "";
		position: absolute;
		top: -1px;
		left: 0;
		width: 1.75rem;
		height: 2px;
		background: var(--gold);
	}
	.etapa__num {
		font-family: var(--f-mono);
		font-size: 0.72rem;
		letter-spacing: 0.12em;
		color: var(--gold);
	}
	.etapa__titulo { margin-top: var(--e-2); font-size: var(--t-1); }
	.etapa p { margin-top: var(--e-2); color: var(--muted-claro); font-size: var(--t--1); line-height: 1.6; }

	/* ---------- Régua de prazo ---------- */
	.regua {
		display: grid;
		gap: var(--e-3);
		margin-top: var(--e-4);
		border-top: 1px solid var(--fio);
		padding-top: var(--e-3);
	}
	@media (min-width: 48rem) {
		.regua { grid-auto-flow: column; grid-auto-columns: 1fr; gap: var(--e-4); }
	}
	.regua__marca { position: relative; padding-top: var(--e-3); }
	.regua__marca::before {
		content: "";
		position: absolute;
		top: calc(-1 * var(--e-3) - 1px);
		left: 0;
		width: 1px;
		height: var(--e-3);
		background: var(--gold);
	}
	.regua__prazo {
		display: block;
		font-family: var(--f-mono);
		font-size: 0.75rem;
		letter-spacing: 0.08em;
		color: var(--brand);
	}
	.secao--escura .regua__prazo { color: var(--gold); }
	.regua__rotulo { display: block; margin-top: 0.35rem; font-weight: 500; }
	.regua__texto { display: block; margin-top: 0.35rem; font-size: var(--t--1); color: var(--texto-suave); }

	/* ---------- Advogado ---------- */
	.advogado { display: grid; gap: var(--e-4); }
	@media (min-width: 56rem) {
		.advogado { grid-template-columns: 0.8fr 1.2fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
	}
	.advogado__texto { display: grid; gap: var(--e-3); max-width: 62ch; }
	.advogado__oab {
		font-family: var(--f-mono);
		font-size: 0.72rem;
		letter-spacing: 0.12em;
		text-transform: uppercase;
		color: var(--brand);
	}
	.advogado__acoes { margin-top: var(--e-2); }

	/* ---------- FAQ ---------- */
	.faq { border-top: 1px solid var(--fio); max-width: 76ch; }
	.faq__item { border-bottom: 1px solid var(--fio); }
	.faq__pergunta {
		display: grid;
		grid-template-columns: 3rem 1fr 1.5rem;
		align-items: baseline;
		gap: var(--e-2);
		padding-block: var(--e-3);
		cursor: pointer;
		list-style: none;
		font-family: var(--f-display);
		font-size: var(--t-1);
		line-height: 1.3;
	}
	.faq__num {
		font-family: var(--f-mono);
		font-size: 0.72rem;
		letter-spacing: 0.1em;
		color: var(--texto-suave);
	}
	.faq__icone {
		position: relative;
		width: 14px;
		height: 14px;
		align-self: center;
		justify-self: end;
	}
	.faq__icone::before,
	.faq__icone::after {
		content: "";
		position: absolute;
		background: var(--brand);
		transition: transform 200ms var(--ease), opacity 200ms var(--ease);
	}
	.faq__icone::before { inset: 6px 0 auto 0; height: 1px; }
	.faq__icone::after  { inset: 0 6px auto 6px; width: 1px; height: 14px; }
	.faq__item[open] .faq__icone::after { transform: scaleY(0); opacity: 0; }
	.secao--escura .faq__icone::before,
	.secao--escura .faq__icone::after { background: var(--gold); }
	.faq__resposta {
		padding: 0 0 var(--e-4) 3.75rem;
		color: var(--texto-suave);
		max-width: 68ch;
	}
	@media (max-width: 40rem) {
		.faq__pergunta { grid-template-columns: 2.25rem 1fr 1.25rem; font-size: var(--t-0); }
		.faq__resposta { padding-left: 0; }
	}

	/* ---------- Ferramentas ---------- */
	.ferramenta {
		border: 1px solid var(--fio);
		border-radius: var(--raio);
		background: var(--paper);
		padding: clamp(1.5rem, 4vw, 3rem);
	}
	.ferramenta__cabeca { max-width: 62ch; }
	.ferramenta__titulo { margin-top: var(--e-1); font-size: var(--t-2); }
	.ferramenta__intro { margin-top: var(--e-2); color: var(--muted); font-size: var(--t--1); }
	/* Melhoria progressiva: sem JavaScript o formulário não teria como
	   responder, então ele só existe quando o script está de pé. O conteúdo
	   informativo abaixo dele continua visível nos dois casos. */
	.ferramenta__form { display: none; }
	[data-ferramenta][data-js] .ferramenta__form {
		margin-top: var(--e-4);
		display: grid;
		gap: var(--e-4);
		border: 0;
	}
	.passo { border: 0; padding: 0; }
	.passo[hidden] { display: none; }
	.passo__titulo {
		display: flex;
		align-items: baseline;
		gap: var(--e-2);
		font-family: var(--f-texto);
		font-size: var(--t-0);
		font-weight: 500;
		padding: 0;
		margin-bottom: var(--e-3);
	}
	.passo__num {
		font-family: var(--f-mono);
		font-size: 0.72rem;
		letter-spacing: 0.1em;
		color: var(--muted);
	}

	.opcoes { display: grid; gap: 1px; background: var(--hairline); border: 1px solid var(--hairline); }
	.opcoes--linha { grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); }
	.opcao {
		display: block;
		background: var(--paper);
		padding: var(--e-3);
		cursor: pointer;
		min-height: 44px;
		transition: background-color 150ms var(--ease);
	}
	.opcao:hover { background: var(--paper-warm); }
	.opcao input { position: absolute; opacity: 0; width: 0; height: 0; }
	.opcao__corpo { display: block; padding-left: 1.85rem; position: relative; }
	.opcao__corpo::before {
		content: "";
		position: absolute;
		left: 0;
		top: 0.28em;
		width: 15px;
		height: 15px;
		border: 1px solid var(--hairline-forte);
		border-radius: 50%;
	}
	.opcao input:checked + .opcao__corpo::before {
		border-color: var(--brand);
		box-shadow: inset 0 0 0 3px var(--paper), inset 0 0 0 9px var(--brand);
	}
	.opcao input:focus-visible + .opcao__corpo::before {
		outline: 2px solid var(--foco);
		outline-offset: 2px;
	}
	.opcao__rotulo { display: block; font-weight: 500; }
	.opcao__pista { display: block; margin-top: 0.3rem; font-size: var(--t--1); color: var(--muted); }
	.opcao--curta .opcao__corpo { padding-left: 1.6rem; }

	.ferramenta__saidas { margin-top: var(--e-4); display: grid; gap: var(--e-4); }
	.saida {
		border-top: 2px solid var(--ink);
		padding-top: var(--e-3);
		display: grid;
		gap: var(--e-3);
	}
	.saida[hidden] { display: none; }
	.saida__fase { font-size: var(--t-2); }
	.saida__base { font-family: var(--f-mono); font-size: 0.72rem; letter-spacing: 0.1em; color: var(--brand); }
	.saida__texto { max-width: 68ch; }
	.saida__janela {
		background: var(--paper-warm);
		border-left: 2px solid var(--gold);
		padding: var(--e-3);
		display: grid;
		gap: var(--e-1);
		max-width: 68ch;
	}
	.saida__nota { color: var(--brand); font-weight: 500; }
	.saida__cabe ul { margin-top: var(--e-2); display: grid; gap: 0.6rem; }
	.saida__cabe li {
		padding-left: 1.4rem;
		position: relative;
		color: var(--muted);
	}
	.saida__cabe li::before {
		content: "";
		position: absolute;
		left: 0;
		top: 0.68em;
		width: 8px;
		height: 1px;
		background: var(--gold);
	}

	/* Ferramenta 2: anatomia do contrato */
	.contrato { margin-top: var(--e-4); display: grid; gap: var(--e-4); }
	@media (min-width: 60rem) {
		.contrato { grid-template-columns: 0.9fr 1.1fr; gap: var(--e-5); align-items: start; }
	}
	.contrato__papel {
		background: var(--paper-warm);
		border: 1px solid var(--hairline);
		padding: var(--e-4);
		font-size: var(--t--1);
		position: sticky;
		top: 6rem;
	}
	.contrato__selo {
		font-family: var(--f-mono);
		font-size: 0.62rem;
		letter-spacing: 0.16em;
		color: var(--muted);
		border: 1px solid var(--hairline-forte);
		padding: 0.25rem 0.5rem;
		display: inline-block;
		margin-bottom: var(--e-3);
	}
	.contrato__titulo { font-family: var(--f-display); font-size: var(--t-1); }
	.contrato__sub { font-family: var(--f-mono); font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin-block: 0.35rem var(--e-3); }
	.contrato__linha {
		display: grid;
		grid-template-columns: auto 1fr auto;
		align-items: baseline;
		gap: 0.5rem;
		padding-block: 0.55rem;
		border-bottom: 1px solid var(--hairline);
		transition: background-color 200ms var(--ease);
	}
	.contrato__linha[data-ativa] { background: rgb(212 175 55 / 0.18); }
	.contrato__pontos { border-bottom: 1px dotted var(--hairline-forte); transform: translateY(-0.2em); }
	.contrato__valor { font-family: var(--f-mono); font-size: 0.75rem; }

	.contrato__lista { display: grid; gap: 1px; background: var(--hairline); border: 1px solid var(--hairline); }
	.contrato__lista > li { background: var(--paper); }
	.contrato__botao {
		display: grid;
		grid-template-columns: 2.5rem 1fr;
		align-items: baseline;
		gap: var(--e-2);
		width: 100%;
		min-height: 48px;
		padding: var(--e-2) var(--e-3);
		text-align: left;
		font-weight: 500;
	}
	.contrato__botao:hover { background: var(--paper-warm); }
	.contrato__indice { font-family: var(--f-mono); font-size: 0.72rem; color: var(--muted); }
	/* Sem JavaScript, todos os painéis ficam abertos: o texto continua sendo
	   conteúdo útil e indexável. Com JavaScript, viram acordeão. */
	.contrato__painel {
		padding: 0 var(--e-3) var(--e-3) calc(2.5rem + var(--e-3) + var(--e-2));
		display: grid;
		gap: var(--e-2);
	}
	[data-ferramenta][data-js] .contrato__painel { display: none; }
	[data-ferramenta][data-js] .contrato__painel[data-aberto] { display: grid; }
	.contrato__painel h3 { font-size: var(--t-0); font-family: var(--f-texto); font-weight: 600; }
	.contrato__painel p { font-size: var(--t--1); color: var(--muted); max-width: 58ch; }
	.contrato__onde .rotulo-mono { display: block; margin-bottom: 0.2rem; }
	@media (max-width: 40rem) {
		.contrato__painel { padding-left: var(--e-3); }
		.contrato__papel { position: static; }
	}

	.ferramenta__rodape {
		margin-top: var(--e-4);
		padding-top: var(--e-3);
		border-top: 1px solid var(--hairline);
		display: grid;
		gap: var(--e-2);
		justify-items: start;
	}

	/* ---------- Fecho ---------- */
	.fecho { display: grid; gap: var(--e-5); }
	@media (min-width: 56rem) {
		.fecho { grid-template-columns: 1fr 1fr; align-items: start; }
	}
	.fecho__acoes { display: flex; flex-wrap: wrap; gap: var(--e-2); }
	.fecho__dados { display: grid; gap: var(--e-3); }
	@media (min-width: 30rem) {
		.fecho__dados { grid-template-columns: repeat(2, 1fr); }
	}
	.fecho__dados dt {
		font-family: var(--f-mono);
		font-size: 0.68rem;
		letter-spacing: 0.12em;
		text-transform: uppercase;
		color: var(--muted-claro);
		margin-bottom: 0.4rem;
	}
	.fecho__dados dd { font-size: var(--t--1); line-height: 1.5; }

	/* ---------- Foto pendente ---------- */
	.foto-pendente {
		display: grid;
		place-content: center;
		gap: 0.4rem;
		text-align: center;
		padding: var(--e-3);
		background:
			repeating-linear-gradient(
				135deg,
				rgb(11 37 69 / 0.03) 0 10px,
				transparent 10px 20px
			),
			var(--paper-warm);
		border: 1px dashed var(--hairline-forte);
		width: 100%;
	}
	.foto-pendente__marca {
		font-family: var(--f-mono);
		font-size: 0.68rem;
		letter-spacing: 0.14em;
		text-transform: uppercase;
		color: var(--brand);
	}
	.foto-pendente__desc { font-size: var(--t--1); color: var(--muted); max-width: 26ch; }

	/* ---------- Trilha ---------- */
	.trilha { padding-block: var(--e-3); border-bottom: 1px solid var(--hairline); }
	.trilha ol { display: flex; flex-wrap: wrap; gap: 0.5rem; font-size: var(--t--1); color: var(--muted); }
	.trilha li + li::before { content: "/"; margin-right: 0.5rem; color: var(--hairline-forte); }
	.trilha a { text-decoration: none; }
	.trilha a:hover { text-decoration: underline; }

	/* ---------- Rodapé ---------- */
	.rodape { background: var(--ink); color: var(--paper); padding-top: var(--e-6); }
	.rodape__interno { display: grid; gap: var(--e-5); padding-bottom: var(--e-5); }
	@media (min-width: 52rem) {
		.rodape__interno { grid-template-columns: 1.3fr 0.8fr 1fr; gap: var(--e-4); }
	}
	.rodape__linha { margin-top: var(--e-2); color: var(--muted-claro); font-size: var(--t--1); max-width: 34ch; }
	.rodape__oab { margin-top: var(--e-3); font-family: var(--f-mono); font-size: 0.72rem; letter-spacing: 0.08em; color: var(--gold); }
	.rodape__cnpj { margin-top: 0.35rem; font-family: var(--f-mono); font-size: 0.68rem; color: var(--muted-claro); }
	.rodape .rotulo-mono { color: var(--muted-claro); margin-bottom: var(--e-2); }
	.rodape__lista, .rodape__redes { display: grid; gap: 0.6rem; font-size: var(--t--1); }
	.rodape a { text-decoration: none; color: var(--paper); }
	.rodape a:hover { text-decoration: underline; text-decoration-color: var(--gold); }
	.rodape__contato p { font-size: var(--t--1); color: var(--muted-claro); margin-bottom: 0.6rem; line-height: 1.5; }
	.rodape__redes { margin-top: var(--e-2); }
	.rodape__base {
		border-top: 1px solid var(--hairline-clara);
		padding-block: var(--e-3);
		display: grid;
		gap: var(--e-2);
	}
	.rodape__base .aviso-legal { color: var(--muted-claro); }
	.rodape__credito { font-size: var(--t--1); color: var(--muted-claro); }
	@media (min-width: 52rem) {
		.rodape__base { grid-template-columns: 1.6fr 1fr; align-items: center; }
		.rodape__credito { text-align: right; }
	}

	/* ---------- Banner de consentimento ---------- */
	.consento {
		position: fixed;
		inset: auto 0 0 0;
		z-index: 60;
		background: var(--ink);
		color: var(--paper);
		border-top: 2px solid var(--gold);
	}
	/* Herda os tokens do contexto escuro, para os rótulos e o botão de
	   contorno se comportarem como dentro de qualquer bloco navy. */
	.consento {
		--texto-suave: var(--muted-claro);
		--fio: var(--hairline-clara);
		--foco: var(--gold);
	}
	.consento__interno {
		max-width: var(--largura);
		margin-inline: auto;
		padding: var(--e-3) var(--margem);
		display: grid;
		gap: var(--e-3);
		align-items: center;
	}
	@media (min-width: 52rem) {
		.consento__interno { grid-template-columns: 1fr auto; gap: var(--e-5); }
	}
	.consento__texto p:last-child {
		margin-top: 0.4rem;
		font-size: var(--t--1);
		line-height: 1.5;
		color: var(--muted-claro);
		max-width: 68ch;
	}
	.consento__texto a { color: var(--gold); }
	.consento__acoes { display: flex; gap: var(--e-2); flex-wrap: wrap; }
	.consento__acoes .btn { flex: 1 1 auto; min-width: 8.5rem; }
	.consento .btn--primario { background: var(--gold); color: var(--ink); }
	.consento .btn--primario:hover { background: #E0C255; }
	.consento .btn--contorno { border-color: var(--hairline-clara); color: var(--paper); }
	.consento .btn--contorno:hover { border-color: var(--gold); color: var(--gold); }

	/* ---------- Barra fixa no celular ---------- */
	.barra-fixa {
		position: fixed;
		inset: auto 0 0 0;
		z-index: 45;
		display: none;
		gap: 1px;
		background: var(--hairline-forte);
		border-top: 1px solid var(--hairline-forte);
	}
	.barra-fixa__btn { flex: 1; border-radius: 0; min-height: 3.5rem; }
	.barra-fixa .btn--contorno { background: var(--paper); border-color: transparent; }
	@media (max-width: 61.99rem) {
		.barra-fixa[data-visivel] { display: flex; }
		/* Folga inicial. O valor exato é medido e reescrito pelo JavaScript,
		   porque a altura real depende do tamanho de fonte do usuário. */
		body.tem-barra { padding-bottom: 4.5rem; }
	}
}

/* ==========================================================================
   COMPONENTES · PÁGINAS INTERNAS
   ========================================================================== */
@layer componentes {

	/* ---------- Topo de página ---------- */
	.pagina__topo { max-width: 68ch; }
	.pagina__titulo { margin-top: var(--e-2); font-size: var(--t-4); max-width: 18ch; }
	.pagina__intro {
		margin-top: var(--e-3);
		font-size: var(--t-1);
		line-height: 1.5;
		color: var(--muted);
		max-width: 62ch;
	}

	/* ---------- Prosa (texto corrido do editor e dos blocos) ---------- */
	.prosa { max-width: 68ch; display: grid; gap: var(--e-3); }
	.prosa--larga { max-width: 72ch; }
	.prosa h2 { margin-top: var(--e-3); font-size: var(--t-2); }
	.prosa h3 { margin-top: var(--e-2); font-size: var(--t-1); }
	.prosa ul, .prosa ol { display: grid; gap: 0.6rem; padding-left: 1.4rem; }
	.prosa ul { list-style: none; }
	.prosa ul li { position: relative; padding-left: 0.4rem; }
	.prosa ul li::before {
		content: "";
		position: absolute;
		left: -1rem;
		top: 0.68em;
		width: 8px;
		height: 1px;
		background: var(--gold);
	}
	.prosa ol { list-style: decimal; }
	.prosa a { color: var(--brand); }
	.prosa blockquote {
		border-left: 2px solid var(--gold);
		padding-left: var(--e-3);
		font-family: var(--f-display);
		font-size: var(--t-1);
	}

	/* ---------- Página de serviço ---------- */
	.servico__topo { padding-block: clamp(2.5rem, 6vh, 5rem) var(--e-5); }
	.servico__titulo { margin-top: var(--e-2); font-size: var(--t-4); max-width: 17ch; }
	.servico__resumo {
		margin-top: var(--e-3);
		font-size: var(--t-1);
		line-height: 1.5;
		color: var(--muted);
		max-width: 58ch;
	}
	.servico__acoes { margin-top: var(--e-4); display: flex; flex-wrap: wrap; gap: var(--e-2); }
	.servico__corpo { display: grid; gap: var(--e-6); padding-bottom: var(--e-secao); }
	.bloco .secao__cabeca { margin-bottom: var(--e-3); }
	.bloco--lei { background: var(--paper-warm); padding: var(--e-4); border-left: 2px solid var(--brand); }

	/* ---------- Lista de serviços (hub) ---------- */
	.lista-servicos { display: grid; gap: 1px; background: var(--hairline); border-block: 1px solid var(--hairline); }
	@media (min-width: 52rem) {
		.lista-servicos { grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); }
	}
	.item-servico { background: var(--fundo); padding: var(--e-4) var(--e-3); display: grid; gap: 0.6rem; align-content: start; }
	.secao--situacoes .item-servico { background: var(--paper-warm); }
	.item-servico__titulo { font-size: var(--t-1); }
	.item-servico__titulo a { text-decoration: none; }
	.item-servico__titulo a:hover { text-decoration: underline; text-decoration-color: var(--gold); }
	.item-servico__situacao {
		font-family: var(--f-mono);
		font-size: 0.68rem;
		letter-spacing: 0.1em;
		text-transform: uppercase;
		color: var(--brand);
	}
	.item-servico__resumo { color: var(--muted); font-size: var(--t--1); }
	.item-servico__prazo { font-size: var(--t--1); color: var(--muted); }
	.item-servico__prazo .rotulo-mono { display: block; margin-bottom: 0.2rem; }

	/* ---------- Dados verificáveis (Sobre) ---------- */
	.dados-verificaveis { display: grid; gap: 0; border-top: 1px solid var(--hairline); max-width: 72ch; }
	.dados-verificaveis > div {
		display: grid;
		grid-template-columns: 1fr;
		gap: 0.25rem;
		padding-block: var(--e-3);
		border-bottom: 1px solid var(--hairline);
	}
	@media (min-width: 40rem) {
		.dados-verificaveis > div { grid-template-columns: 14rem 1fr; gap: var(--e-3); }
	}
	.dados-verificaveis dt {
		font-family: var(--f-mono);
		font-size: 0.68rem;
		letter-spacing: 0.12em;
		text-transform: uppercase;
		color: var(--muted);
	}

	/* ---------- Contato ---------- */
	.contato { display: grid; gap: var(--e-6); margin-top: var(--e-6); }
	@media (min-width: 56rem) {
		.contato { grid-template-columns: 0.85fr 1.15fr; gap: clamp(2rem, 6vw, 5rem); align-items: start; }
	}
	.contato__direto > p { margin-bottom: var(--e-3); color: var(--muted); max-width: 42ch; }
	.contato__dados { margin-top: var(--e-4); display: grid; gap: var(--e-3); border-top: 1px solid var(--hairline); padding-top: var(--e-3); }
	.contato__dados dt {
		font-family: var(--f-mono);
		font-size: 0.68rem;
		letter-spacing: 0.12em;
		text-transform: uppercase;
		color: var(--muted);
		margin-bottom: 0.3rem;
	}
	.contato__dados dd { font-size: var(--t--1); line-height: 1.5; }

	/* ---------- Formulário ---------- */
	.form { display: grid; gap: var(--e-3); max-width: 34rem; }
	.form__campo { display: grid; gap: 0.4rem; }
	.form__campo label { font-size: var(--t--1); font-weight: 500; }
	.form__req {
		font-family: var(--f-mono);
		font-size: 0.62rem;
		letter-spacing: 0.1em;
		text-transform: uppercase;
		color: var(--muted);
		margin-left: 0.4rem;
	}
	.form input[type="text"],
	.form input[type="tel"],
	.form input[type="email"],
	.form select,
	.form textarea {
		width: 100%;
		min-height: 3rem;
		padding: 0.7rem 0.9rem;
		background: var(--paper);
		border: 1px solid var(--hairline-forte);
		border-radius: var(--raio);
		font-size: var(--t-0);
		transition: border-color 150ms var(--ease);
	}
	.form textarea { min-height: 8rem; resize: vertical; line-height: 1.5; }
	.form :is(input, select, textarea):hover { border-color: var(--muted); }
	.form :is(input, select, textarea):focus-visible { border-color: var(--brand); }
	.form__ajuda { font-size: var(--t--1); color: var(--muted); }
	.form__aceite { display: grid; grid-template-columns: auto 1fr; gap: 0.7rem; align-items: start; font-weight: 400; }
	.form__aceite input { margin-top: 0.3rem; width: 18px; height: 18px; accent-color: var(--brand); }
	.form__aceite span { font-size: var(--t--1); color: var(--muted); }
	.form__aceite a { color: var(--brand); }
	.form button[type="submit"] { justify-self: start; margin-top: var(--e-1); }
	.form .aviso-legal { margin-top: var(--e-2); }

	.alerta {
		padding: var(--e-3);
		border-left: 2px solid var(--brand);
		background: var(--paper-warm);
		margin-bottom: var(--e-4);
		font-size: var(--t--1);
		max-width: 34rem;
	}
	.alerta--erro { border-left-color: var(--ink); }

	/* ---------- Blog ---------- */
	.lista-posts { display: grid; gap: 0; border-top: 1px solid var(--hairline); margin-top: var(--e-6); }
	.post-item {
		display: grid;
		gap: 0.5rem;
		padding-block: var(--e-4);
		border-bottom: 1px solid var(--hairline);
		max-width: 72ch;
	}
	.post-item__data {
		font-family: var(--f-mono);
		font-size: 0.68rem;
		letter-spacing: 0.1em;
		color: var(--muted);
	}
	.post-item__titulo { font-size: var(--t-2); max-width: 26ch; }
	.post-item__titulo a { text-decoration: none; }
	.post-item__titulo a:hover { text-decoration: underline; text-decoration-color: var(--gold); }
	.post-item__resumo { color: var(--muted); max-width: 62ch; }
	.post-item__mais a { color: var(--brand); font-size: var(--t--1); font-weight: 500; }

	.artigo__topo { max-width: 68ch; padding-bottom: var(--e-4); border-bottom: 1px solid var(--hairline); margin-bottom: var(--e-5); }
	.artigo__titulo { margin-top: var(--e-2); font-size: var(--t-4); max-width: 22ch; }
	.artigo__resumo { margin-top: var(--e-3); font-size: var(--t-1); line-height: 1.5; color: var(--muted); max-width: 58ch; }
	.artigo__autor {
		margin-top: var(--e-3);
		font-family: var(--f-mono);
		font-size: 0.7rem;
		letter-spacing: 0.08em;
		color: var(--brand);
	}
	.artigo__pe { margin-top: var(--e-5); padding-top: var(--e-3); border-top: 1px solid var(--hairline); }

	.navigation.pagination { margin-top: var(--e-5); }
	.navigation.pagination .nav-links { display: flex; gap: 0.5rem; flex-wrap: wrap; }
	.navigation.pagination .page-numbers {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-width: 2.75rem;
		min-height: 2.75rem;
		border: 1px solid var(--hairline);
		text-decoration: none;
		font-family: var(--f-mono);
		font-size: 0.78rem;
	}
	.navigation.pagination .page-numbers.current { background: var(--ink); color: var(--paper); border-color: var(--ink); }

	/* ---------- Depoimentos ---------- */
	.depoimentos { display: grid; gap: var(--e-4); margin-top: var(--e-6); }
	@media (min-width: 52rem) { .depoimentos { grid-template-columns: repeat(2, 1fr); } }
	.depoimento { border-top: 2px solid var(--ink); padding-top: var(--e-3); display: grid; gap: var(--e-2); }
	.depoimento blockquote p { font-family: var(--f-display); font-size: var(--t-1); line-height: 1.4; }
	.depoimento__nome { display: block; font-weight: 500; }
	.depoimento__meta {
		display: block;
		font-family: var(--f-mono);
		font-size: 0.68rem;
		letter-spacing: 0.1em;
		text-transform: uppercase;
		color: var(--muted);
	}

	.vazio {
		margin-top: var(--e-5);
		padding: var(--e-4);
		border: 1px dashed var(--hairline-forte);
		background: var(--paper-warm);
		display: grid;
		gap: var(--e-2);
		max-width: 68ch;
	}
	.vazio__texto { color: var(--muted); }

	.prova-alternativa { margin-top: var(--e-6); }
	.prova-lista { display: grid; gap: var(--e-4); counter-reset: prova; }
	@media (min-width: 52rem) { .prova-lista { grid-template-columns: repeat(2, 1fr); gap: var(--e-5); } }
	.prova-lista > li { border-top: 1px solid var(--hairline); padding-top: var(--e-3); display: grid; gap: 0.6rem; align-content: start; }
	.prova-lista__num {
		font-family: var(--f-mono);
		font-size: 0.72rem;
		letter-spacing: 0.12em;
		color: var(--gold);
	}
	.prova-lista h3 { font-size: var(--t-1); }
	.prova-lista p { color: var(--muted); font-size: var(--t--1); }
}

/* ==========================================================================
   UTILIDADES
   ========================================================================== */
@layer utilidades {
	.visualmente-oculto {
		position: absolute !important;
		width: 1px; height: 1px;
		padding: 0; margin: -1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}

	/* Revelação na entrada em viewport. Máscara e deslocamento curto, sem
	   bounce e sem escala: o tom aqui é peso institucional. */
	[data-revelar] {
		opacity: 0;
		transform: translateY(14px);
		transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
	}
	[data-revelar][data-visivel] { opacity: 1; transform: none; }

	@media (prefers-reduced-motion: reduce) {
		*, *::before, *::after {
			animation-duration: 0.001ms !important;
			animation-iteration-count: 1 !important;
			transition-duration: 0.001ms !important;
			scroll-behavior: auto !important;
		}
		[data-revelar] { opacity: 1; transform: none; }
	}
}