/* ===========================================================
   ABL Advogados — folha principal
   Identidade conforme manual de marca (colchete, moldura,
   cores institucionais). Público majoritariamente 50+:
   tipografia grande, contraste alto, movimento contido.
   =========================================================== */

/* ---------- tipografia ----------
   Open Sans auto-hospedada, variável (300–800) e cortada no subset latino.
   Antes vinha do fonts.googleapis.com: eram 154 KB, uma origem externa no
   caminho crítico e vinte @font-face de alfabetos que este site nunca
   escreve — cirílico, grego, hebraico, vietnamita. Conferido: nenhum texto
   do site usa caractere fora deste intervalo.

   O itálico é um arquivo à parte de propósito. Só quatro regras da folha o
   usam, e o navegador só baixa um @font-face quando encontra texto que
   precise dele: nas páginas sem itálico, esses 45 KB não saem do servidor.

   font-display: swap — o texto aparece na hora, na fonte do sistema, e
   troca quando a Open Sans chega. Para um público 50+ que chega por 4G,
   ler três décimos antes vale mais do que ver a fonte certa desde o
   primeiro quadro.

   Open Sans, SIL Open Font License 1.1. */
@font-face {
	font-family: "Open Sans";
	font-style: normal;
	font-weight: 300 800;
	font-display: swap;
	src: url("../fonts/open-sans-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Reserva com as MÉTRICAS da Open Sans.

   Com font-display: swap o texto aparece na fonte do sistema e troca
   quando a Open Sans chega. A troca reflui o texto, e isso entra no CLS:
   medido, custava 0,08 na capa das internas.

   Os números saíram de medição, não de tabela: a 100px, a Open Sans
   ocupa 4800,5px nesta frase de amostra e a Arial 4603 — daí o
   size-adjust de 104,3%. Ascendente e descendente vêm da mesma medida,
   já relativas ao corpo ajustado.

   Se nenhuma das locais existir (Android costuma ter Roboto e não
   Arial), este @font-face simplesmente não carrega e a pilha segue para
   a próxima família. Não quebra nada, só deixa de ajudar. */
@font-face {
	font-family: "Open Sans reserva";
	src: local("Arial"), local("Helvetica Neue"), local("Helvetica"), local("Liberation Sans"), local("Roboto");
	size-adjust: 104.3%;
	ascent-override: 102.6%;
	descent-override: 27.8%;
	line-gap-override: 0%;
}

@font-face {
	font-family: "Open Sans";
	font-style: italic;
	font-weight: 300 700;
	font-display: swap;
	src: url("../fonts/open-sans-latin-italic.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- tokens ---------- */
:root {
	/* institucionais (manual, pág. 14) */
	--petrol: #19323b;      /* PANTONE 547 C */
	--red: #ef4036;         /* PANTONE 179 C */
	/* Variações só para quando a cor vira TEXTO — as institucionais puras
	   reprovam em AA e o público aqui é majoritariamente 50+.
	   Nos grafismos (colchete, cantoneira, bordas) usamos sempre as originais. */
	/* Precisa passar nos DOIS fundos claros do site: o branco e o creme
	   #f6f3ef das seções alternadas. Calibrado só para o branco, reprovava
	   em 4,13:1 sobre o creme. */
	--red-light: #f36b63;       /* 4,55:1 sobre o petróleo */
	/* Vermelho fechado, para texto pequeno sobre fundo claro. O --red da
	   marca dá 3,85:1 no branco e 3,48:1 no warm: serve para número grande
	   (mínimo 3:1) e reprova como rótulo (mínimo 4,5:1). Mesmo matiz, só
	   com o brilho baixado até passar nos dois: 5,09:1 e 4,60:1. */
	--red-ink: #d91c11;

	/* derivadas para profundidade de cena */
	--petrol-deep: #102530;
	--petrol-soft: #23414b;

	--paper: #ffffff;
	--warm: #f6f3ef;
	--ink: #1b2c33;
	--ink-soft: #52646c;

	/* sobre fundo escuro */
	--on-dark: #ffffff;
	--on-dark-soft: #b9c8ce;

	--shell: 1200px;
	--gut: clamp(20px, 5vw, 48px);

	/* Raio único, 14px nos quatro cantos. Antes eram dois tokens montando
	   um raio ASSIMÉTRICO — 28px num canto e 4px nos outros três — que
	   ecoava o colchete da marca. O Lucas pediu para uniformizar: a 4px os
	   três cantos pequenos liam como retos, e a assimetria, fora do logo,
	   parecia defeito em vez de sistema. */
	--r-sm: 14px;
	/* Cápsula, para o que é BAIXO. O critério é ALTURA, não o nome da
	   classe: num bloco alto 999px não vira cápsula, vira lente. Errei
	   isso uma vez ao classificar por nome — `.vizinhas a` (128px de
	   altura), `.lp__chips li` (77px) e `.lp__badge` (75px) viraram
	   comprimidos porque "chip" e "selo" soam baixos. Se passa de uma
	   linha, é superfície e usa os 14px acima. */
	--r-pill: 999px;

	--ease: cubic-bezier(0.22, 0.61, 0.36, 1);

	/* O trilho: a folha do colchete que sobra quando a marca se abre. Uma
	   vertical no mesmo x em toda seção numerada, por 11 mil pixels. Não é
	   enfeite — é a grade se apresentando. */
	--trilho: clamp(34px, 4.4vw, 62px);
	--marco-topo: 108px;              /* altura da nav em repouso */

	/* Ar: o que produz a sensação de luxo não é a quantidade, é a DIFERENÇA.
	   Uma abertura de capítulo não pode respirar igual a uma continuação. */
	--ar-seguido: clamp(40px, 5.4vh, 66px);
	--ar-capitulo: clamp(96px, 15vh, 168px);

	/* A geometria de duas colunas é UMA na página inteira. Os críticos
	   mediram cinco grids com proporções e vãos próprios, e as colunas
	   direitas "quase alinhavam" com até 30px de deriva — o pior estado. */
	--duas-colunas: minmax(0, 1.05fr) minmax(0, 0.95fr);
	--vao-colunas: clamp(48px, 6vw, 110px);
}

/* ---------- reset enxuto ---------- */
*, *::before, *::after { box-sizing: border-box; }
/* `hidden` sempre esconde. Sem isto, qualquer regra de display (flex,
   grid) vence o atributo, e o que o script escondeu aparece. */
[hidden] { display: none !important; }

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}

body {
	margin: 0;
	background: var(--paper);
	color: var(--ink);
	font-family: "Open Sans", "Open Sans reserva", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	font-size: 1.125rem;          /* 18px — leitura confortável para o público */
	line-height: 1.65;
	font-weight: 400;
	-webkit-font-smoothing: antialiased;
	/* `clip` e não `hidden`: hidden cria um contêiner de rolagem e
	   desativa position:sticky em toda a árvore abaixo — era o que
	   estava impedindo o palco da abertura de ficar preso na tela. */
	overflow-x: clip;
}

img, svg { display: block; max-width: 100%; }
img { height: auto; }

h1, h2, h3 { margin: 0; font-weight: 600; line-height: 1.15; letter-spacing: -0.02em; }
p { margin: 0; }
a { color: inherit; }

.shell {
	width: 100%;
	max-width: var(--shell);
	margin-inline: auto;
	padding-inline: var(--gut);
}

.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	background: var(--paper);
	color: var(--petrol);
	padding: 12px 18px;
	z-index: 999;
}
.skip-link:focus { left: 8px; top: 8px; }

:where(a, button, [tabindex]):focus-visible {
	outline: 3px solid var(--red);
	outline-offset: 3px;
	border-radius: 2px;
}

/* ---------- botões ---------- */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 17px 30px;
	background: var(--red);
	color: #fff;
	/* Branco sobre o vermelho da marca dá 3,85:1. Em 19px/700 o texto entra
	   na faixa "grande" do WCAG (limite 3:1) e passa em AA sem desvirtuar a
	   cor institucional — e ainda favorece o público 50+. */
	font-size: 1.1875rem;
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
	border: 2px solid var(--red);
	border-radius: var(--r-pill);
	transition: background 0.25s var(--ease), border-color 0.25s var(--ease), transform 0.25s var(--ease);
}
.btn:hover { background: #d8352b; border-color: #d8352b; transform: translateY(-2px); }

.btn--ghost {
	background: transparent;
	border-color: rgba(255, 255, 255, 0.38);
	color: var(--on-dark);
}
.btn--ghost:hover { background: rgba(255, 255, 255, 0.09); border-color: #fff; }

/* Compacto demais para carregar branco sobre vermelho dentro do AA.
   Vira contorno (13,46:1) e deixa o vermelho sólido para o CTA do hero. */
.btn--sm {
	padding: 12px 22px;
	font-size: 1rem;
	font-weight: 600;
	background: transparent;
	border-color: rgba(255, 255, 255, 0.45);
}
.btn--sm:hover {
	background: var(--red);
	border-color: var(--red);
}
.btn--block { display: flex; width: 100%; }

/* ---------- navegação ---------- */
.nav {
	position: fixed;
	inset: 0 0 auto 0;
	z-index: 300;
	padding: 18px 0;
	/* `padding` não entra na transição: animá-lo recalcula layout a cada
	   quadro e é o que faz um header parecer barato ao rolar. O encolhimento
	   agora vem de transform na marca, que roda no compositor. */
	transition: background 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.nav.is-stuck {
	background: rgba(16, 37, 48, 0.94);
	box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08);
}
/* O vidro é caro: cada quadro do blur é um passe de composição sobre tudo
   que passa atrás. Fica só onde há GPU sobrando. */
@media (min-width: 1000px) {
	.nav.is-stuck {
		background: rgba(16, 37, 48, 0.82);
		backdrop-filter: blur(16px) saturate(1.2);
		-webkit-backdrop-filter: blur(16px) saturate(1.2);
	}
}

/* Progresso de leitura: 2px no pé do header. Numa página de 11 mil pixels,
   saber quanto falta é orientação, não enfeite.

   Aqui `scroll()` é seguro, ao contrário de `view()` no conteúdo: se a
   animação congelar ou não houver suporte, o que se perde é uma linha
   decorativa — nenhuma informação depende dela. */
.nav::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	height: 2px;
	width: 100%;
	background: linear-gradient(90deg, var(--red), var(--red-light));
	transform: scaleX(0);
	transform-origin: left center;
	opacity: 0;
	transition: opacity 0.4s var(--ease);
}
.nav.is-stuck::after { opacity: 1; }

/* O progresso migra para o índice quando ele assume o topo, para a régua de
   leitura não sumir junto com o header. */
@media (min-width: 1000px) {
	.indice { --prog: 0; }
	.indice.is-fixo::after {
		background: linear-gradient(90deg, var(--red), var(--red-light));
		height: 2px;
		transform-origin: left center;
	}
	@supports (animation-timeline: scroll()) {
		@media (prefers-reduced-motion: no-preference) {
			.indice.is-fixo::after {
				animation: lerprogresso linear both;
				animation-timeline: scroll(root block);
			}
		}
	}
}

@supports (animation-timeline: scroll()) {
	@media (prefers-reduced-motion: no-preference) {
		.nav::after {
			animation: lerprogresso linear both;
			animation-timeline: scroll(root block);
		}
		@keyframes lerprogresso {
			from { transform: scaleX(0); }
			to { transform: scaleX(1); }
		}
	}
}

.nav__inner {
	display: flex;
	align-items: center;
	gap: 28px;
}

/* A ASSINATURA: colchete ABL + ADVOGADOS embaixo (pedido do escritório,
   17/10/2026). O manual só prevê ADVOGADOS na versão principal, por
   extenso; a reduzida é a sigla pura. Por isso o símbolo NÃO foi tocado:
   ADVOGADOS entra fora do colchete, como palavra de apoio, com os glifos
   extraídos da própria versão principal (advogados.svg) — mesma letra e
   mesmo espaçamento do manual, nada digitado em fonte.

   O conjunto inteiro cabe nos mesmos 72px que a marca sozinha ocupava:
   a barra continua com 108px e nada abaixo dela muda de lugar. A sigla
   tem piso de 0,85 cm (~32px) no manual; aqui ela fica com 58px, e 50px
   no estado compacto. */
.nav__brand {
	--selo: 56px;
	--adv: 84px;
	flex: none;
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	gap: 7px;
	color: #fff;
	transform-origin: left center;
	transition: transform 0.4s var(--ease);
}
.nav__brand .marca__selo { display: block; width: auto; height: var(--selo); }
.nav__brand .marca__adv { display: block; width: var(--adv); height: auto; }
/* Escalar por transform em vez de animar `height` evita recalcular o
   layout do header a cada quadro da rolagem. */
.nav.is-stuck .nav__brand { transform: scale(0.87); }

.nav__links {
	margin-left: auto;
	display: flex;
	gap: 30px;
}
.nav__links a {
	position: relative;
	color: var(--on-dark);
	font-size: 1rem;
	font-weight: 600;
	text-decoration: none;
	padding: 6px 0;
	opacity: 0.9;
	transition: opacity 0.2s var(--ease);
}
.nav__links a::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 2px;
	background: var(--red);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.3s var(--ease);
}
.nav__links a:hover { opacity: 1; }
.nav__links a:hover::after { transform: scaleX(1); }

/* O indicador do menu só existe no desktop. Declarado aqui na base para
   não depender de o menu inteiro estar escondido: se um dia o painel do
   celular reaproveitar .nav__links, o indicador não vem junto por engano. */
.nav__pill { display: none; }

.nav__burger { display: none; }

/* menu mobile */
.mobmenu {
	position: fixed;
	inset: 0;
	/* 100dvh + rolagem própria: num iPhone SE com as barras do Safari o
	   botão principal ficava 16px abaixo da dobra, sem como chegar nele. */
	height: 100vh;
	height: 100dvh;
	overflow-y: auto;
	overscroll-behavior: contain;
	z-index: 190;
	background: rgba(16, 37, 48, 0.97);
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
	padding: clamp(88px, 14vh, 120px) var(--gut) 48px;
	display: flex;
	flex-direction: column;
	gap: 36px;
}

/* O balão de WhatsApp ficava POR CIMA do botão do menu aberto. O menu já
   leva ao mesmo destino: o balão simplesmente sai de cena. */
body:has(.mobmenu:not([hidden])) .wa { display: none; }
.mobmenu[hidden] { display: none; }
.mobmenu__links { display: flex; flex-direction: column; gap: 4px; }
.mobmenu__links a {
	color: var(--on-dark);
	font-size: clamp(1.5rem, 6vw, 2rem);
	font-weight: 600;
	text-decoration: none;
	padding: 14px 0;
	border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

/* ===========================================================
   HERO — abertura pela marca

   A página abre com o colchete da ABL sozinho, em escala de tela.
   Rolando, a marca cede lugar e o conteúdo se monta em sequência.

   Mecânica: um trilho alto (.hero__track) com um palco fixo dentro
   (.hero__stage). O JS lê o progresso do trilho e distribui esse
   progresso entre as cenas. Nada aqui depende de biblioteca.

   Três degradações, todas testadas:
   · sem JS      -> estático; e desde 17/10/2026 é estático para todos:
                    a animação de entrada saiu a pedido do escritório
   · reduce      -> idem, por media query
   · até 980px   -> o palco fixo é desligado e tudo volta a fluir
   =========================================================== */
.hero {
	position: relative;
	background: var(--petrol);
	color: var(--on-dark);
	/* mesma razão do body: `hidden` aqui desativaria o sticky do palco */
	overflow: clip;
}

/* ---------- atmosfera: sem imagem, só luz e grão ---------- */
.hero__atmos {
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 0;
}
.hero__glow {
	position: absolute;
	top: -30%;
	left: 50%;
	transform: translateX(-50%);
	width: 92%;
	height: 130%;
	background:
		radial-gradient(ellipse 52% 40% at 50% 42%, rgba(206, 224, 231, 0.09), transparent 70%),
		radial-gradient(ellipse 40% 34% at 68% 62%, rgba(239, 64, 54, 0.08), transparent 72%);
}
.hero__grid {
	position: absolute;
	inset: 0;
	opacity: 0.5;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
}

/* ---------- trilho e palco ---------- */
.hero__track { position: relative; z-index: 1; }
/* A hero deixou de ser palco grudado: é uma seção comum, e a altura vem
   do conteúdo. O `min-height` de 100vh continua para ela ocupar a tela na
   chegada, mas sem forçar a barra quando o conteúdo é mais alto.

   O `padding-top` é o conserto do "não está centralizado": a barra é
   fixa e cobre os 112px do topo, então centrar no 100vh inteiro joga o
   texto para cima — medido, a folga de baixo ficava sempre 112px maior
   que a de cima, em qualquer altura de janela. Reservando a faixa da
   barra, a centralização passa a acontecer no espaço que a pessoa
   realmente enxerga.

   O `padding-bottom` não é simétrico de propósito: abaixo do bloco vem a
   dobra, e um respiro maior ali é o que faz a seção não parecer cortada. */
.hero__stage {
	position: relative;
	min-height: 100vh;
	padding-top: var(--marco-topo);
	padding-bottom: clamp(24px, 4vh, 48px);
	display: grid;
	place-items: center;
}

/* ===========================================================
   CENA 2 — o conteúdo
   =========================================================== */
.hero__content { position: relative; z-index: 2; width: 100%; }
.hero__inner { padding-block: clamp(96px, 12vh, 128px); }

/* A régua sob o folio é um ::after dirigível: durante a abertura pelo
   scroll ela se desenha do centro para fora, recebendo o fio vertical que
   desce da marca — a linha parece virar a esquina. --regua vale 1 por
   padrão, então sem JS a régua está simplesmente lá. */

/* O hero ocupa a altura da tela, mas sua escala olhava só a LARGURA: num
   monitor baixo (1512x752, 1366x768, 1280x800 — a maioria dos notebooks) o
   bloco ficava mais alto que o palco e era cortado em cima pelo menu e
   embaixo pela dobra. O termo em vh só entra quando a tela é baixa: acima
   de ~835px de altura o min() escolhe o valor de largura e nada muda. */
.hero__title {
	font-size: min(clamp(2.1rem, 4.4vw, 3.65rem), 7vh);
	line-height: 1.06;
	letter-spacing: -0.026em;
	max-width: 17ch;
	margin-bottom: clamp(16px, 3.2vh, 28px);
}
/* A revelação por clip-path é escrita pelo JS. O estado de repouso é
   `none`, e não uma janela aberta: assim, sem JS ou com o palco desligado,
   nenhum acento fica cortado pela borda da caixa da linha. */

.hero__lead {
	/* o piso de 1rem é inegociável: corpo de texto nunca abaixo de 16px,
	   por mais baixa que seja a tela */
	font-size: max(1rem, min(clamp(1.0625rem, 1.35vw, 1.1875rem), 2.55vh));
	line-height: 1.68;
	color: #d6dee0;
	max-width: 52ch;
	margin-bottom: clamp(20px, 4vh, 36px);
}

.hero__acoes {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin-bottom: 52px;
}
/* Numa tela muito baixa os dois botões empilhados custam 74px que não
   existem: com o texto um pouco menor e menos respiro lateral eles cabem
   lado a lado. A altura fica igual, então o alvo de toque não muda. */
@media (min-width: 981px) and (max-height: 720px) {
	.hero__acoes { gap: 12px; }
	.hero__acoes .btn {
		padding-inline: 20px;
		font-size: 1.0625rem;
	}
}
.btn--bone {
	background: #f2f5f6;      /* 12,28:1 com o petróleo do texto */
	color: var(--petrol);
	border-color: #f2f5f6;
	min-height: 56px;
}
.btn--bone:hover { background: #fff; border-color: #fff; }

/* ---------- microinteração dos CTAs do hero ----------
   Uma camada varre o botão da esquerda para a direita no hover, com a
   mesma curva de entrada do resto do site, e o rótulo avança um fio. Só
   transform: o preenchimento é um scaleX, não uma mudança de largura ou
   de background-position. Escopo no hero de propósito — os botões das
   outras páginas seguem com o hover simples. */
.hero__acoes .btn {
	position: relative;
	overflow: hidden;
	isolation: isolate;
}
.hero__acoes .btn::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 0.55s var(--mv-entra);
}
.hero__acoes .btn:hover::before,
.hero__acoes .btn:focus-visible::before { transform: scaleX(1); }
.hero__acoes .btn--bone::before { background: #ffffff; }
.hero__acoes .btn--ghost::before { background: rgba(255, 255, 255, 0.12); }

.hero__acoes .btn__t {
	display: inline-block;
	transition: transform 0.55s var(--mv-entra);
}
.hero__acoes .btn:hover .btn__t,
.hero__acoes .btn:focus-visible .btn__t { transform: translateX(3px); }

/* O fundo do próprio botão NÃO muda no hover: ele trocava de cor em 0.25s
   e a varredura, de 0.55s, chegava depois num botão que já estava branco —
   invisível. Quem faz o realce agora é só a camada que varre. A cor do
   texto não muda em nenhum dos dois, então o contraste medido continua
   valendo do começo ao fim do movimento. */
.hero__acoes .btn--bone:hover { background: #f2f5f6; border-color: #ffffff; }
.hero__acoes .btn--ghost:hover { background: transparent; }

/* ---------- assinatura dos sócios ---------- */
.hero__firma {
	padding-top: 26px;
	border-top: 1px solid rgba(255, 255, 255, 0.16);
}
.hero__firma-rot {
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--on-dark-soft);
	margin-bottom: 16px;
}
.firma {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 14px 34px;
}
.firma li {
	display: flex;
	align-items: center;
	gap: 12px;
}
.firma img {
	width: 52px;
	height: 52px;
	border-radius: 50%;
	object-fit: cover;
	object-position: 50% 22%;
	filter: saturate(0.8);
}
.firma span {
	font-size: 1.0625rem;
	font-weight: 600;
	letter-spacing: 0.01em;
}


/* ===========================================================
   ESTADO VIVO — só quando o JS confirma que pode dirigir a cena
   =========================================================== */
/* Era aplicado pelo `.is-live`, que o JS só acendia nesta mesma faixa de
   tela. A animação de entrada saiu; o enquadramento do hero no desktop,
   que o escritório já tinha aprovado, fica exatamente como estava. */
@media (min-width: 981px) and (min-height: 640px) {
	.hero--intro .hero__inner { padding-block: 0; }
}

/* O hero estava fora do eixo do site: seu texto começava um trilho (62px
   em telas grandes) à esquerda do de todas as outras seções, e rolar do
   hero para a primeira seção fazia o bloco inteiro pular de lado.

   Acima de 1100px quem carrega esse recuo é a própria .shell da seção;
   abaixo, é o .sec__head. O eixo do texto é gutter + trilho nos dois
   casos, e em todas as larguras — inclusive no celular, onde a diferença
   era de 34px —, então uma regra só resolve o site inteiro. */
.hero__inner { padding-left: calc(var(--gut) + var(--trilho)); }

/* fluxos de luz sobre o traço da moldura */

@media (prefers-reduced-motion: no-preference) {
}
/* ===========================================================
   SEÇÕES — estrutura comum
   =========================================================== */
/* position: relative é obrigatório aqui: a cantoneira .corner é absoluta,
   e sem âncora no pai ela se prende ao viewport — foi assim que a cantoneira
   da seção "A janela" foi parar 1.185px acima dela, em cima do texto da capa. */
/* scroll-margin-top: o header é fixo, e sem isto a seção alvo do índice
   aterrissa embaixo dele. Vale para as seis âncoras das oito áreas. */
.sec { position: relative; padding: var(--ar-seguido) 0; }

/* Seção com id é capítulo (é exatamente o conjunto que o índice lista);
   seção sem id é interstício. O capítulo abre com quase o triplo de ar,
   e é essa razão que o olho lê como hierarquia. */
.sec[id] {
	padding-block: var(--ar-capitulo) var(--ar-seguido);
	scroll-margin-top: 88px;
}
.sec--paper { background: var(--paper); }
.sec--warm { background: var(--warm); }
.sec--dark { background: var(--petrol); color: var(--on-dark); }

.shell--narrow { max-width: 860px; }

.sec__head { max-width: 46rem; margin-bottom: clamp(30px, 4.4vh, 48px); }
.sec[id] .sec__head { margin-bottom: clamp(44px, 6.6vh, 72px); }

/* ---------- o trilho do capítulo ----------
   Nove aberturas de seção idênticas, todas no mesmo x, no mesmo corpo, com
   o mesmo ar: era o indicador mais forte de template na página. O contador
   vem dos próprios id que o PHP já imprime — nenhuma linha de template
   muda, e a numeração acerta sozinha nas oito áreas, mesmo nas que têm uma
   seção a menos. */
main { counter-reset: capitulo; }
/* Só conta quem TEM cabeçalho para mostrar o número: seções com id mas sem
   .sec__head incrementavam o contador em silêncio e o visitante lia
   01, 02 e depois 05 — buracos no trilho. */
.sec[id]:has(.sec__head) { counter-increment: capitulo; }

.sec[id] .sec__head {
	position: relative;
	padding-left: var(--trilho);
}
.sec[id] .sec__head::before {
	content: counter(capitulo, decimal-leading-zero);
	position: absolute;
	left: 0;
	top: 0.1em;
	font-size: 1.375rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	line-height: 1;
	color: var(--red-ink);          /* 5,04:1 no branco · 4,56:1 no creme */
}
/* `.sec[id]` vale (0,3,1) porque o seletor de atributo conta como classe;
   `.sec--dark` sozinho vale (0,2,1) e PERDE, deixando o número no vermelho
   fechado sobre o petróleo — 2,2:1, reprovado. Precisa do [id] também. */
.sec--dark[id] .sec__head::before { color: var(--on-dark-soft); }

/* A LEI DO FIO: tracinho vertical só existe se for estrutural e de altura
   inteira — o canal da capa, a linha do protocolo, o eixo dos passos. A
   régua curta do capítulo morreu aqui: quatro tocos coloridos de alturas
   diferentes na mesma tela liam como desordem, não como sistema. O número
   pendurado sozinho marca o capítulo. */

/* O kicker já trazia uma régua vermelha de 3px à esquerda. Duas réguas no
   mesmo campo de visão é ruído: ele cede a régua e fica só com o tipo. */
.sec[id] .kicker { padding-left: 0; border-left: 0; }

.kicker {
	display: inline-block;
	margin-bottom: 20px;
	padding-left: 16px;
	border-left: 3px solid var(--red);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--petrol);
}
.kicker--light { color: var(--on-dark); }

.sec__title {
	font-size: clamp(1.75rem, 3.1vw, 2.5rem);
	font-weight: 600;
	line-height: 1.18;
	color: var(--petrol);
	text-wrap: balance;
}
.sec__title--light { color: var(--on-dark); }

.sec__lead {
	margin-top: 20px;
	font-size: clamp(1.0625rem, 1.3vw, 1.1875rem);
	line-height: 1.72;
	color: var(--ink-soft);
	max-width: 44em;
}
.sec__lead--light { color: var(--on-dark-soft); }

/* ---------- 02 motivos ---------- */
/* ===========================================================
   01 · O PONTO DE PARTIDA — a prancha dos motivos

   Era uma grade de duas colunas com fios de 2px e uma borda
   pesada em cima e embaixo: lia como tabela. Agora são seis
   itens editoriais numerados, separados só por um fio de 1px,
   com muito ar entre eles.

   O estado base é o ESTADO FINAL: tudo visível, fios inteiros,
   sem desfoque. Quem apaga e reconstrói é o JS, por estilo
   inline. Assim uma falha de script, o movimento reduzido ou a
   ausência de JS deixam a seção legível, e não escondida.
   =========================================================== */
.partida__lista {
	list-style: none;
	margin: 0;
	padding: 0;
	counter-reset: motivo;
}
.partida__item {
	counter-increment: motivo;
	position: relative;
	padding: clamp(24px, 3.2vh, 38px) 0 clamp(24px, 3.2vh, 38px) 58px;
}
/* O fio que separa. Cresce da esquerda quando o item entra: é o
   único movimento de "linha" da seção, e é estrutural. */
.partida__item::after {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 1px;
	background: rgba(27, 44, 51, 0.15);
	transform: scaleX(var(--fio, 1));
	transform-origin: left center;
}
/* A numeração, na mesma família e cor do número do capítulo —
   é a mesma ideia de narrativa, um nível abaixo. 5,04:1 no
   branco. Anda um fio atrás do texto (--pn), o que separa as
   duas camadas sem que nada pareça solto. */
.partida__item::before {
	content: counter(motivo, decimal-leading-zero);
	position: absolute;
	left: 0;
	top: calc(clamp(24px, 3.2vh, 38px) + 0.34em);
	font-size: 0.9375rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.08em;
	line-height: 1;
	color: var(--red-ink);
	transform: translateY(calc(var(--pn, 0) * 1px));
}
.partida__item p {
	margin: 0;
	font-size: clamp(1.0625rem, 1.35vw, 1.25rem);
	line-height: 1.55;
	/* O item lido recua andando de --ink para --ink-soft (14,4:1 → 6,2:1,
	   os dois aprovados em AA) em vez de perder opacidade, que levaria o
	   numeral oliva para 2,74:1. Quem não conhece color-mix fica no --ink
	   cheio: a falha cai do lado seguro. */
	color: var(--ink);
	color: color-mix(in oklab, var(--ink), var(--ink-soft) calc(var(--lido, 0) * 100%));
	max-width: 36ch;
	transform: translateY(calc(var(--pt, 0) * 1px));
}

/* ---------- o remate ---------- */
.partida__desfecho { margin-top: clamp(48px, 7vh, 92px); }
.partida__frase {
	margin: 0;
	font-size: clamp(1.5rem, 2.9vw, 2.375rem);
	line-height: 1.2;
	font-weight: 700;
	letter-spacing: -0.02em;
	color: var(--ink);
	/* mais largo que os itens de propósito: a conclusão sai do ritmo de
	   duas colunas e toma a medida inteira, que é o que a marca como
	   fecho e não como mais um item */
	max-width: 30ch;
	text-wrap: balance;
}
.partida__nota {
	margin: clamp(16px, 2.2vh, 24px) 0 0;
	font-size: 1.125rem;
	line-height: 1.7;
	color: var(--ink-soft);
	max-width: 46ch;
}

/* ---------- a prancha (desktop) ----------
   Mesma geometria da .resposta das páginas de área: cabeçalho
   sentado à esquerda, coluna direita correndo. Mesmo ponto de
   corte, mesmas colunas, mesmo vão — para as duas seções se
   lerem como o mesmo sistema. */
@media (min-width: 1100px) {
	.partida__prancha {
		display: grid;
		grid-template-columns: var(--duas-colunas);
		column-gap: var(--vao-colunas);
		align-items: start;
	}
	/* `.sec[id] .sec__head` vale (0,3,0) e define `position: relative`.
	   Uma regra de (0,2,0) aqui PERDE e o cabeçalho não gruda — foi o que
	   aconteceu. A .resposta escapa porque aquela seção não tem id; esta
	   tem, então o seletor precisa passar de (0,3,0). */
	.partida.sec .partida__prancha .sec__head {
		margin-bottom: 0;
		position: sticky;
		top: 132px;   /* nav (108px) + respiro, igual à .resposta */
	}
	.partida__desfecho { margin-top: clamp(64px, 9vh, 120px); }
}

/* ---------- movimento reduzido ----------
   Nada é apagado nem desfocado: o JS nem chega a rodar, e o
   estado base já é o final. Declarado assim mesmo para o caso de
   o script ter escrito estilo antes de a preferência mudar. */
@media (prefers-reduced-motion: reduce) {
	.partida__item,
	.partida__item p,
	.partida__desfecho {
		opacity: 1 !important;
		filter: none !important;
		transform: none !important;
	}
	.partida__item::after { transform: scaleX(1) !important; }
	.partida__item::before { transform: none !important; }
}

/* ---------- 03 áreas ---------- */
/* ===========================================================
   02 · ÁREAS DE ATUAÇÃO — a lista das bandas

   Eram nove cartões com borda, raio e sombra no hover. Agora
   são nove linhas de tipografia grande separadas por um fio,
   sem caixa nenhuma.

   A regra que sustenta a interação: UMA linha está sempre
   aberta. A primeira nasce aberta e a abertura só troca de
   lugar, nunca aparece ou some. Com isso a altura total da
   lista é constante — apontar uma linha não empurra as de
   baixo, e o cursor nunca é deixado para trás pelo layout,
   que é o defeito clássico de acordeão no hover.

   Tudo em CSS: :hover e :focus-within abrem, :has fecha a
   primeira quando outra assume. Funciona no teclado e sem JS.
   =========================================================== */
.bandas {
	position: relative;
	/* a coluna do número e o vão vivem aqui para que a cabeça e o corpo
	   usem a MESMA medida: sem isso o texto do painel começava na coluna
	   do número, desalinhado do título logo acima dele */
	--col-n: 2.4rem;
	--col-vao: clamp(18px, 2.2vw, 34px);
}
.bandas__lista {
	list-style: none;
	margin: 0;
	padding: 0;
	counter-reset: frente;
}
.banda {
	position: relative;
	border-top: 1px solid #e2dbd1;
}
.banda:last-child { border-bottom: 1px solid #e2dbd1; }

/* ---------- a cabeça da linha ---------- */
.banda__cabeca {
	display: grid;
	grid-template-columns: var(--col-n) 1fr auto;
	align-items: baseline;
	column-gap: var(--col-vao);
	margin: 0;
	padding: clamp(20px, 2.6vh, 30px) 0;
}
.banda__n {
	font-size: 0.8125rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.18em;
	color: var(--red-ink);      /* 4,56:1 no creme */
	transition: opacity 0.5s var(--mv-entra);
}
.banda__link {
	font-size: clamp(1.375rem, 2.4vw, 2.0625rem);
	font-weight: 700;
	line-height: 1.14;
	letter-spacing: -0.018em;
	color: var(--petrol);
	text-decoration: none;
	transition: opacity 0.5s var(--mv-entra), transform 0.5s var(--mv-entra);
	display: inline-block;
}
/* a linha inteira é o alvo do clique, mas só o título é o link */
.banda__link::after { content: ""; position: absolute; inset: 0; }

/* seta geométrica, desenhada com borda — sem arquivo, sem ícone */
.banda__seta {
	align-self: center;
	width: 9px;
	height: 9px;
	border-top: 2px solid var(--red-ink);
	border-right: 2px solid var(--red-ink);
	transform: rotate(45deg);
	opacity: 0.45;
	transition: transform 0.5s var(--mv-entra), opacity 0.5s var(--mv-entra);
}

/* ---------- o corpo que abre ----------
   grid-template-rows de 0fr para 1fr: a altura é animável sem
   número mágico de max-height, e o conteúdo dita a medida. */
.banda__corpo {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows 0.62s var(--mv-entra);
}
.banda__dentro {
	overflow: hidden;
	min-height: 0;
	padding-left: calc(var(--col-n) + var(--col-vao));
	opacity: 0;
	transition: opacity 0.42s var(--mv-entra);
}
.banda__quem {
	margin: 0 0 10px;
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--petrol);
}
.banda__d {
	margin: 0;
	font-size: 1.0625rem;
	line-height: 1.66;
	color: var(--ink-soft);       /* 5,59:1 no creme */
	max-width: 46ch;
	/* Três linhas para todas: as descrições variam entre duas e três e a
	   diferença fazia a altura da lista mudar ao trocar de linha, que é o
	   que empurra o conteúdo debaixo do cursor. */
	min-height: calc(1.66em * 3);
}
.banda__cta {
	display: inline-block;
	margin: clamp(14px, 1.8vh, 20px) 0 clamp(24px, 3vh, 34px);
	font-size: 0.9375rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	color: var(--red-ink);
	transition: transform 0.5s var(--mv-entra);
}

/* ---------- quem está aberta ----------
   NENHUMA nasce aberta, e isso é estrutural, não estética: com uma
   aberta por padrão, entrar na lista pelo meio fechava a primeira, subia
   tudo e o cursor caía uma linha adiante da que a pessoa mirou. Com a
   lista fechada em repouso, a linha apontada é sempre a linha escolhida,
   e daí em diante o movimento entre vizinhas é neutro porque todos os
   corpos têm a mesma altura. Em repouso a seção é um índice tipográfico
   limpo, que é o que se quer aqui. */
.banda:hover .banda__corpo,
.banda:focus-within .banda__corpo { grid-template-rows: 1fr; }
.banda:hover .banda__dentro,
.banda:focus-within .banda__dentro { opacity: 1; }

/* as demais recuam. 0,6 sobre o creme dá 3,75:1 e o título é
   texto grande (limiar 3:1) — abaixo disso reprovaria. */
.bandas__lista:has(.banda:hover, .banda:focus-within)
	.banda:not(:hover):not(:focus-within) .banda__link { opacity: 0.6; }
/* Os NÚMEROS não recuam. O oliva já parte de 4,56:1 sobre o creme e a
   0,5 cai para 1,95:1 — não há folga nenhuma para apagá-lo, e escurecer
   o oliva o suficiente para caber tiraria o dourado. Quem carrega o
   recuo é o título; os números ficam como um índice firme ao lado. */

.banda:hover .banda__link,
.banda:focus-within .banda__link { transform: translateX(6px); }
.banda:hover .banda__seta,
.banda:focus-within .banda__seta { opacity: 1; transform: rotate(45deg) translate(3px, -3px); }
.banda:hover .banda__cta,
.banda:focus-within .banda__cta { transform: translateX(4px); }
.banda__link:focus-visible { outline-offset: 6px; }

/* ---------- o número vazado ao fundo ----------
   Uma janela de uma linha com a tira dos nove números dentro:
   trocar de frente translada a tira. É o clip vertical pedido,
   feito com transform, que o compositor resolve sozinho. */
.bandas__marca {
	display: none;
	pointer-events: none;
	user-select: none;
}
.bandas__marca {
	opacity: 0;
	transition: opacity 0.55s var(--mv-entra);
}
/* só com JS: é ele que move a tira. Sem ele o número ficaria travado no
   01 enquanto a pessoa aponta a linha 5 — melhor não aparecer. */
.js .bandas:has(.banda:hover, .banda:focus-within) .bandas__marca { opacity: 1; }
.bandas__tira {
	display: grid;
	transform: translateY(calc(var(--i, 0) * -100% / 9));
	transition: transform 0.75s var(--mv-entra);
	will-change: transform;
}
.bandas__tira span {
	display: block;
	font-size: clamp(120px, 15.5vw, 230px);
	font-weight: 700;
	line-height: 1;
	font-variant-numeric: tabular-nums;
	letter-spacing: -0.04em;
	color: transparent;
	-webkit-text-stroke: 1px rgba(217, 28, 17, 0.26);
}

@media (min-width: 1100px) {
	.bandas {
		display: grid;
		grid-template-columns: minmax(0, 1.42fr) minmax(0, 0.58fr);
		column-gap: var(--vao-colunas);
		align-items: center;
	}
	.bandas__marca {
		display: block;
		overflow: hidden;
		/* a janela tem a altura de UM número da tira */
		height: clamp(120px, 15.5vw, 230px);
	}
}

@media (prefers-reduced-motion: reduce) {
	.banda__corpo,
	.banda__dentro,
	.banda__link,
	.banda__seta,
	.banda__cta,
	.bandas__tira { transition: none; }
}

/* ---------- 04 método ---------- */
.metodo__grid {
	display: grid;
	grid-template-columns: var(--duas-colunas);
	gap: var(--vao-colunas);
	align-items: start;
}
/* O arredondamento fica no figure, não na imagem: assim a imagem pode
   se deslocar por dentro sem arrastar os cantos junto. */
.metodo__foto {
	position: relative;
	margin: 40px 0 0;
	border-radius: var(--r-sm);
	overflow: hidden;
	/* proporção travada: as quatro fotos têm recortes diferentes e sem isto
	   o contêiner mudaria de altura a cada troca */
	aspect-ratio: 1000 / 1150;
}
/* Cada fotografia ocupa o contêiner inteiro. A ativa é revelada por um
   recorte que desce, com um micro zoom de 1.04 para 1 — a imagem assenta
   enquanto aparece, em vez de piscar. As demais ficam recortadas a zero
   e por baixo, então a troca nunca mostra o fundo. */
.metodo__quadro {
	position: absolute;
	inset: 0;
	z-index: 1;
	clip-path: inset(0 0 100% 0);
	transform: scale(1.04);
	transition: clip-path 0.95s var(--mv-entra), transform 1.15s var(--mv-entra);
}
.metodo__quadro img,
.metodo__quadro picture { width: 100%; height: 100%; object-fit: cover; display: block; }
.metodo__quadro.is-ativa {
	z-index: 3;
	clip-path: inset(0 0 0 0);
	transform: scale(1);
}
/* a que sai fica visível por baixo até a de cima terminar de descer */
.metodo__quadro.is-saindo { z-index: 2; clip-path: inset(0 0 0 0); }
.metodo__foto img {
	width: 100%;
	filter: saturate(0.95);
}

.etapas {
	list-style: none;
	margin: 0;
	padding: 0;
	counter-reset: etapa;
}
.etapa {
	position: relative;
	padding: 30px 0 30px 78px;
	/* Fio quente, o mesmo das outras listas em fundo claro, no lugar
	   do branco a 16% que só fazia sentido sobre o petróleo. */
	border-top: 1px solid #e4ded6;
	counter-increment: etapa;
}
.etapa:last-child { border-bottom: 1px solid #e4ded6; }
/* O fio de cima de cada etapa é a trilha; por cima dela corre o avanço em
   oliva, de 0 a 100%, no ritmo real da rolagem. Sem JS, --av vale 0 e a
   linha simplesmente não aparece — a divisória de sempre continua lá. */
.etapa::after {
	content: "";
	position: absolute;
	inset: -1px 0 auto 0;
	height: 1px;
	background: var(--red-ink);
	transform: scaleX(var(--av, 0));
	transform-origin: left center;
}
.etapa::before {
	content: counter(etapa, decimal-leading-zero);
	position: absolute;
	left: 0;
	top: 32px;
	font-size: 1.125rem;
	font-weight: 700;
	color: var(--red-ink);
	letter-spacing: 0.08em;
}
.etapa__k {
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	/* O mesmo vermelho fechado da numeração ao lado. O --red da marca
	   reprovaria aqui: são 13px, e ele dá 3,85:1 no branco. */
	color: var(--red-ink);
	margin-bottom: 8px;
}
.etapa__t {
	font-size: 1.375rem;
	font-weight: 600;
	color: var(--ink);
	margin-bottom: 10px;
}
.etapa__d {
	font-size: 1.0625rem;
	line-height: 1.68;
	color: var(--ink-soft);
	max-width: 42em;
}

/* ---------- a prancha do método (desktop) ----------
   Mesmo princípio das outras pranchas do site: a coluna da esquerda fica
   sentada enquanto a direita corre. Aqui ela carrega a fotografia, que é
   o que transforma a lista em narrativa — a imagem responde ao passo que
   está sendo lido em vez de ser um enfeite parado no topo. */
@media (min-width: 1100px) {
	/* A coluna parada NUNCA pode ser mais alta que a tela que sobra embaixo
	   da barra. Texto + foto somavam ~820px, e num notebook comum (1366 x
	   657 úteis) só 57% da fotografia aparecia enquanto as etapas corriam:
	   ela ficava "cortada pela metade" pela borda da janela (relato do
	   escritório, 17/10/2026). Agora a coluna tem teto e a foto cede altura
	   — e é recortada por DENTRO, com object-fit, sempre inteira na tela. */
	.metodo__intro {
		position: sticky;
		top: 124px;   /* nav (108px) + respiro */
		display: flex;
		flex-direction: column;
		max-height: calc(100vh - 124px - 28px);
		max-height: calc(100svh - 124px - 28px);
	}
	.metodo__foto {
		margin-top: clamp(28px, 3.4vh, 44px);
		flex: 0 1 auto;
		min-height: 0;
	}

	/* A ÚNICA medida que mudou nesta seção, e ela é o que torna a
	   narrativa possível: com o respiro original de 30px as quatro etapas
	   somavam 1011px contra 819px da coluna da esquerda — 192px de curso,
	   e a seção inteira cabia quase toda numa tela de 950px. As quatro
	   etapas apareciam juntas e não havia o que percorrer. Com este ar,
	   cada etapa ocupa o seu trecho de rolagem e a fotografia tem tempo
	   de trocar. O ar também é coerente com o resto do site. */
	/* O ar extra (8vh por etapa) existia para a foto ter tempo de trocar
	   durante a rolagem. A foto agora é fixa: o ar volta ao normal do site e
	   a seção deixa de pedir rolagem à toa. */
	.etapa { padding-block: 34px; }
}

/* No celular a fotografia continua fora, como já era antes desta mudança.
   PENDENTE: pôr cada foto junto da sua etapa exige o markup dentro de
   cada <li>, e combinamos acertar o celular depois do desktop. Aqui só
   garanto que nada regride: sem prancha, sem sticky, sem recorte. */
@media (max-width: 1099px) {
	.metodo__foto { display: none; }
}

/* ---------- recuo das etapas que não são a da vez ----------
   Os 35–45% do briefing quebram a leitura aqui, e não por pouco: sobre o
   petróleo, a descrição cai para 2,95:1 e o rótulo em oliva para 2,01:1.
   O oliva já parte de 4,54:1 e não tem folga NENHUMA — por isso o rótulo
   e o número não recuam, como acontece nos numerais da seção das áreas.
   Quem recua é o título (0,62 → 6,0:1) e a descrição (0,68 → 4,7:1), que
   é recuo bem visível e ainda aprovado. O que faz a etapa da vez ser
   inconfundível não é apagar as outras: é o fio de avanço em oliva e a
   fotografia trocando ao lado. */
.js .etapas .etapa__t,
.js .etapas .etapa__d { transition: opacity 0.8s var(--mv-entra), color 0.8s var(--mv-entra); }
/* O recuo das etapas inativas mudou de EIXO quando o fundo virou branco.
   Sobre o petróleo, baixar a opacidade escurecia o texto e o contraste
   subia; sobre o branco ele clareia, e a opacidade 0.62 media 4,27:1 —
   abaixo do mínimo. Medido: sobre o branco, --ink só sobrevive até 0.66
   e --ink-soft até 0.89, opacidade que ninguém enxerga como recuo.

   Por isso o título recua por COR, não por opacidade: de --ink (14,4:1)
   para --ink-soft (6,2:1). É um recuo bem visível e sobra folga. */
.js .etapas.is-viva .etapa:not(.is-ativa) .etapa__t { color: var(--ink-soft); }
/* A descrição já parte de --ink-soft, então não tem para onde recuar por
   cor sem furar. 0.9 é o piso medido (4,87:1) e ainda assim se percebe. */
.js .etapas.is-viva .etapa:not(.is-ativa) .etapa__d { opacity: 0.9; }

@media (prefers-reduced-motion: reduce) {
	/* nada anima e nada recua: o JS não roda, e o estado base já é o
	   legível — todas as etapas cheias e a primeira fotografia à mostra */
	.metodo__quadro,
	.etapa__t,
	.etapa__d { transition: none; }
	.etapa::after { transform: scaleX(0); }
}

/* ---------- 05 sócios ---------- */
.socios__grid {
	display: grid;
	grid-template-columns: var(--duas-colunas);
	gap: var(--vao-colunas);
	align-items: center;
}
.socios__foto {
	margin: 0;
	border-radius: var(--r-sm);
	overflow: hidden;
}
.socios__foto img {
	width: 100%;
	filter: saturate(0.95);
}
.socios__lista {
	list-style: none;
	margin: 34px 0 0;
	padding: 0;
	border-top: 2px solid var(--petrol);
}
.socios__lista li {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 16px;
	padding: 18px 0;
	border-bottom: 1px solid #e4ded6;
}
.socios__nome {
	font-size: 1.1875rem;
	font-weight: 700;
	color: var(--petrol);
}
.socios__papel {
	font-size: 0.9375rem;
	color: var(--ink-soft);
}

/* ---------- 06 faq ---------- */
.faq { border-top: 2px solid var(--petrol); }
.faq__item { border-bottom: 1px solid #e4ded6; }
.faq__q {
	list-style: none;
	cursor: pointer;
	padding: 26px 44px 26px 0;
	position: relative;
	font-size: 1.125rem;
	font-weight: 600;
	line-height: 1.5;
	color: var(--petrol);
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q::after {
	content: "";
	position: absolute;
	right: 8px;
	top: 32px;
	width: 13px;
	height: 13px;
	border-right: 2.5px solid var(--red);
	border-bottom: 2.5px solid var(--red);
	transform: rotate(45deg);
	transition: transform 0.3s var(--ease);
}
.faq__item[open] .faq__q::after { transform: rotate(-135deg); }
.faq__a {
	padding: 0 44px 28px 0;
	font-size: 1.0625rem;
	line-height: 1.72;
	color: var(--ink-soft);
}

/* ---------- 07 chamada final ---------- */
.cta {
	position: relative;
	background: var(--petrol-deep);
	color: var(--on-dark);
	padding: clamp(80px, 12vh, 130px) 0;
	overflow: hidden;
}
.cta::before {
	content: "";
	position: absolute;
	bottom: -40%;
	left: -5%;
	width: 60%;
	height: 130%;
	background: radial-gradient(ellipse at center, rgba(239, 64, 54, 0.12), transparent 62%);
	pointer-events: none;
}
.cta__inner { position: relative; z-index: 2; max-width: 780px; }
.cta__title {
	font-size: clamp(1.75rem, 3.1vw, 2.5rem);
	font-weight: 600;
	line-height: 1.14;
	margin-bottom: 22px;
}
.cta__lead {
	font-size: clamp(1.0625rem, 1.35vw, 1.1875rem);
	line-height: 1.72;
	color: var(--on-dark-soft);
	margin-bottom: 36px;
}
/* Cantoneira do manual: forma retilínea em UM canto por composição.
   A regra base viveu no bloco do hero antigo e foi embora junto com ele
   na reescrita — as quatro cantoneiras do site ficaram invisíveis, porque
   `.corner--bl` só reposiciona o que esta regra define. */
.corner {
	position: absolute;
	top: 0;
	right: 0;
	width: clamp(74px, 11vw, 148px);
	height: clamp(74px, 11vw, 148px);
	border-top: 7px solid var(--red);
	border-right: 7px solid var(--red);
	pointer-events: none;
	z-index: 3;
}

/* A cantoneira é o colchete da marca, e colchete emoldura CONTEÚDO. Presa
   à borda da viewport ela flutua solta numa tela de 1600px e lê como
   acidente; ancorada à largura do texto, ela emoldura — que é o que o
   símbolo quer dizer.

   O cálculo: a shell tem max-width e margens automáticas, então a distância
   da borda até o conteúdo é (100vw - largura da shell) / 2. */
.capa > .corner {
	right: max(var(--gut), calc((100% - var(--shell)) / 2));
	top: 96px;
	width: clamp(48px, 5vw, 84px);
	height: clamp(48px, 5vw, 84px);
	border-width: 5px;
}

/* A variante inferior (.corner--bl) foi aposentada: em três rodadas ela
   nunca deixou de ler como defeito, e o papel de assinatura geométrica
   passou ao canal da capa e ao trilho dos capítulos. */

/* ===========================================================
   RODAPÉ (provisório — será detalhado depois)
   =========================================================== */
.foot {
	background: var(--petrol-deep);
	color: var(--on-dark);
	padding: clamp(60px, 9vh, 96px) 0 40px;
}

.foot__top {
	display: grid;
	grid-template-columns: 1.3fr 1fr 0.85fr 1fr;
	gap: clamp(32px, 4vw, 56px);
	padding-bottom: 46px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

/* A mesma assinatura do menu, maior: no rodapé há espaço, e é aqui que
   alguém procura o nome do escritório para anotar. */
.foot__marca {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	margin-bottom: 22px;
	color: #fff;
}
.foot__marca .marca__selo { display: block; width: auto; height: 76px; }
.foot__marca .marca__adv { display: block; width: 112px; height: auto; }
.foot__tag {
	font-weight: 300;
	font-style: italic;
	color: var(--on-dark-soft);
	max-width: 24ch;
}


/* Alvos de toque confortáveis em QUALQUER largura: 21px de altura não
   basta no dedo, e tablet também é toque. */
.foot__col li { margin-bottom: 0; }
.foot__col a {
	display: block;
	padding: 11px 0;
}

.foot__h {
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--on-dark-soft);
	margin-bottom: 18px;
}
.foot__col ul { list-style: none; margin: 0; padding: 0; }

.foot__col a,
.foot__contato a {
	font-size: 1rem;
	color: var(--on-dark-soft);
	text-decoration: none;
	transition: color 0.22s var(--ease);
}
.foot__col a:hover,
.foot__contato a:hover { color: var(--on-dark); }

.foot__contato a {
	font-size: 1.0625rem;
	font-weight: 700;
	color: var(--on-dark);
	border-bottom: 2px solid var(--red);
	padding-bottom: 3px;
}
.foot__nota {
	margin-top: 18px;
	font-size: 1rem;
	line-height: 1.6;
	color: var(--on-dark-soft);
}

.foot__bottom {
	padding-top: 26px;
	font-size: 1rem;
	color: var(--on-dark-soft);
	display: grid;
	gap: 10px;
}
.foot__disclaimer { max-width: 78ch; line-height: 1.6; }

/* botão flutuante de WhatsApp */
.wa {
	position: fixed;
	right: 22px;
	bottom: 22px;
	z-index: 250;
	display: grid;
	place-items: center;
	width: 58px;
	height: 58px;
	border-radius: 50%;
	/* verde do WhatsApp escurecido até 3,04:1 com o ícone branco,
	   mínimo do WCAG para elemento não textual */
	background: #1daa4c;
	color: #fff;
	box-shadow: 0 10px 26px rgba(0, 0, 0, 0.26);
	transition: transform 0.28s var(--ease);
}
.wa:hover { transform: translateY(-3px) scale(1.04); }

/* ===========================================================
   MOVIMENTO (reveals)
   =========================================================== */
/* Só escondemos quando há JS para revelar de volta (html.js).
   Sem JS, ou se o script quebrar, tudo continua visível. */
.anima [data-reveal] {
	opacity: 0;
	transform: translateY(22px);
}
.anima [data-reveal].is-in {
	opacity: 1;
	transform: none;
	transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
	transition-delay: var(--d, 0ms);
}

.anima .word {
	display: inline-block;
	opacity: 0;
	transform: translateY(0.42em);
	filter: blur(7px);
}
.anima [data-cascade].is-in .word {
	opacity: 1;
	transform: none;
	filter: blur(0);
	transition: opacity 0.75s var(--ease), transform 0.75s var(--ease), filter 0.75s var(--ease);
	transition-delay: calc(var(--i, 0) * 42ms);
}

/* ===========================================================
   REVELAÇÃO POR MÁSCARA

   O conteúdo não "aparece": ele é descoberto de baixo para cima
   por uma máscara de borda suave, no ritmo da própria rolagem.

   Feito com scroll-driven animation nativa do CSS: sem GSAP, sem
   Lenis, sem biblioteca, sem uma linha de JavaScript. Isso importa
   aqui por três motivos concretos:
   · a CSP do site é script-src 'self' e não admite lib de terceiro;
   · roda no compositor, então não trava a rolagem em aparelho fraco;
   · onde não houver suporte, o conteúdo simplesmente já está lá.

   A rolagem continua sendo a nativa do navegador. Inércia
   artificial foi descartada de propósito: tira de quem tem 70 anos
   a sensação de controle sobre a página.
   =========================================================== */
@media (prefers-reduced-motion: no-preference) {
	/* ---------- SISTEMA DE MOVIMENTO ----------
	   Uma única gramática para a página inteira. Antes eram 80 elementos
	   revelando cada um por conta, com máscara: repetido 80 vezes, um efeito
	   bonito vira ruído de template. Agora revela o BLOCO, e os filhos dele
	   entram escalonados por CSS — um movimento por seção, não oitenta.

	   Só `opacity` e `transform`: as duas propriedades que o compositor
	   resolve sem layout nem paint. A máscara anterior não é composited e
	   custava um repaint por quadro em cada um dos 80 elementos.

	   A curva é a mesma em tudo o que entra: expo-out. Ela arranca rápido e
	   desacelera por muito tempo, que é o que faz um movimento parecer caro
	   em vez de mecânico. */
	:root {
		--mv-entra: cubic-bezier(0.16, 1, 0.3, 1);   /* entrada: expo-out */
		--mv-toque: cubic-bezier(0.4, 0, 0.2, 1);    /* hover e estado */
		--mv-sobe: cubic-bezier(0.5, 0, 0.15, 1);    /* saída da cortina: solta devagar */
		--mv-t-bloco: 900ms;
		--mv-t-item: 700ms;
		--mv-dist: 26px;
		--mv-passo: 90ms;                            /* escalonamento */
	}

	.anima [data-reveal] {
		opacity: 0;
		transform: translate3d(0, var(--mv-dist), 0);
		transition:
			opacity var(--mv-t-bloco) var(--mv-entra),
			transform var(--mv-t-bloco) var(--mv-entra);
		transition-delay: var(--d, 0ms);
	}
	.anima [data-reveal].is-in {
		opacity: 1;
		transform: none;
	}

	/* Escalonamento interno: os filhos do bloco entram em sequência depois
	   dele. É o que dá a sensação de composição em vez de bloco único. */
	.anima [data-reveal] > * {
		opacity: 0;
		transform: translate3d(0, calc(var(--mv-dist) * 0.55), 0);
		transition:
			opacity var(--mv-t-item) var(--mv-entra),
			transform var(--mv-t-item) var(--mv-entra);
	}
	.anima [data-reveal].is-in > * { opacity: 1; transform: none; }
	.anima [data-reveal].is-in > *:nth-child(1) { transition-delay: 90ms; }
	.anima [data-reveal].is-in > *:nth-child(2) { transition-delay: 180ms; }
	.anima [data-reveal].is-in > *:nth-child(3) { transition-delay: 270ms; }
	.anima [data-reveal].is-in > *:nth-child(4) { transition-delay: 360ms; }
	.anima [data-reveal].is-in > *:nth-child(5) { transition-delay: 450ms; }
	.anima [data-reveal].is-in > *:nth-child(n + 6) { transition-delay: 520ms; }

	/* O diagrama e a conta se movem inteiros: escalonar as partes de um
	   desenho quebraria a leitura da figura. */
	.anima .corte > *,
	.anima .conta > *,
	.anima .cnis__foto > * {
		opacity: 1;
		transform: none;
		transition: none;
	}

	/* A cascata de palavras perde o blur: `filter` força repaint por quadro
	   e é a única propriedade animada aqui que não roda no compositor. */
	.anima .word { filter: none; }
}

/* ===========================================================
   RESPONSIVO
   =========================================================== */
@media (max-width: 1000px) {
	.nav__links, .nav__cta { display: none; }

	.nav__burger {
		display: flex;
		flex-direction: column;
		justify-content: center;
		gap: 6px;
		margin-left: auto;
		width: 46px;
		height: 46px;
		padding: 0;
		background: none;
		border: 0;
		cursor: pointer;
	}
	.nav__burger span {
		display: block;
		width: 26px;
		height: 2px;
		background: #fff;
		transition: transform 0.3s var(--ease), opacity 0.3s var(--ease);
	}
	.nav__burger[aria-expanded="true"] span:first-child { transform: translateY(4px) rotate(45deg); }
	.nav__burger[aria-expanded="true"] span:last-child { transform: translateY(-4px) rotate(-45deg); }

	.metodo__grid,
	.socios__grid { grid-template-columns: 1fr; }
	.foot__top { grid-template-columns: 1fr 1fr; }
	.socios__foto { order: -1; }
 /* já há foto suficiente na sequência mobile */
	.etapa { padding-left: 62px; }
}

/* ===========================================================
   HERO no celular

   Abaixo de 980px o palco fixo é desligado pelo JS e a cena volta
   a fluir: a marca ocupa uma tela, o conteúdo vem logo abaixo.
   =========================================================== */
@media (max-width: 719px) {
	.hero__inner { padding-block: 64px 56px; }


	.hero__folio {
		flex-direction: column;
		gap: 5px;
		/* 14px é o piso para rótulo em caixa alta nesta página: abaixo
		   disso o tracking atrapalha quem tem vista cansada. */
		font-size: 0.875rem;
		letter-spacing: 0.12em;
	}

	.hero__title { font-size: clamp(1.78rem, 7.6vw, 2.1rem); line-height: 1.12; max-width: none; }
	.hero__lead { font-size: 1.0625rem; }
	.hero__acoes { margin-bottom: 40px; }
	.hero__acoes .btn { width: 100%; }

	.firma { gap: 14px 22px; }
	.firma span { font-size: 1rem; }

}

@media (max-width: 620px) {
	body { font-size: 1.0625rem; }
	/* menor e recuada, para não disputar espaço com o botão do menu */
	.corner { width: 56px; height: 56px; border-width: 4px; }

	.foot__top { grid-template-columns: 1fr; }
	.wa { width: 52px; height: 52px; right: 16px; bottom: 16px; }

	.partida__item { padding-left: 46px; }
}

/* ===========================================================
   ACESSIBILIDADE — movimento reduzido
   =========================================================== */
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }

	.anima [data-reveal],
	.anima [data-reveal] > *,
	.anima .word {
		opacity: 1 !important;
		transform: none !important;
		filter: none !important;
		transition: none !important;
	}

	.framed__side {
		stroke-dasharray: none !important;
		stroke-dashoffset: 0 !important;
		transition: none !important;
	}
	.btn:hover { transform: none; }
}

/* ===========================================================
   PÁGINAS INTERNAS

   Capa curta e sóbria: sem palco fixo, sem cena de marca. A
   abertura pela marca é privilégio da home; repeti-la em toda
   página interna viraria pedágio para quem só quer ler algo.
   =========================================================== */
.capa {
	position: relative;
	/* Clara, e não mais petróleo. A capa é a primeira coisa que se lê numa
	   página interna, e quem chega vem com dúvida, não com vontade de
	   admirar. A cantoneira e o fio vertical já eram vermelhos, então a
	   marcação da marca atravessa a inversão sem mudar. */
	background: var(--paper);
	color: var(--ink);
	padding: clamp(116px, 13vh, 148px) 0 clamp(44px, 6vh, 64px);
	overflow: clip;
}
/* O canal: a folha do colchete que sobrou quando a marca se abriu. Desce
   da base da nav até o fim da capa, no mesmo x em que o trilho de cada
   capítulo vai reaparecer. Antes havia aqui um glow de oliva a 13% que
   ninguém enxergava e que custava um gradiente de paint na primeira tela.

   ESTADO BASE = DESENHADO. O keyframe só define o `from`, então qualquer
   falha (JS morto, navegador antigo, chegada por #hash) resulta no canal
   inteiro, nunca em canal nenhum. */
.capa::after {
	content: "";
	position: absolute;
	left: calc(max(0px, (100% - var(--shell)) / 2) + var(--gut) + 5px);
	top: var(--marco-topo);
	bottom: 0;
	width: 3px;
	background: var(--red);
	transform-origin: top center;
	pointer-events: none;
	z-index: 3;
}

@media (prefers-reduced-motion: no-preference) {
	.capa::after { animation: canal-desce 1100ms cubic-bezier(0.16, 1, 0.3, 1); }
	@keyframes canal-desce { from { transform: scaleY(0); } }
}

.capa > .shell { position: relative; z-index: 2; }

.migalha {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 9px;
	font-size: 0.875rem;
	color: var(--ink-soft);
	margin-bottom: 20px;
}
.migalha a { text-decoration: none; border-bottom: 1px solid rgba(27, 44, 51, 0.3); padding-bottom: 1px; }
.migalha a:hover { border-color: var(--ink); }

/* O H1 tem que ser o maior tipo da página. Estava perdendo para o título
   do CTA do rodapé (49,6px contra 48px), o que é o oposto de hierarquia. */
.capa__titulo {
	font-size: clamp(2.35rem, 5.2vw, 3.9rem);
	font-weight: 600;
	line-height: 1.1;
	letter-spacing: -0.024em;
	max-width: 20ch;
	text-wrap: balance;
}
.capa__lead {
	margin-top: 18px;
	font-size: 1.0625rem;
	line-height: 1.68;
	color: var(--ink-soft);   /* 6,18:1 no branco */
	max-width: 54ch;
}

/* ---------- índice das áreas ---------- */
/* ---------- o índice que acompanha ----------
   Numa página de 11.600px o leitor perde a noção de onde está — foi o vale
   de orientação que o diagnóstico apontou. O índice deixa de ser uma faixa
   que passa uma vez e vira a régua da leitura: gruda abaixo do header e
   marca o capítulo em que a pessoa está.

   `position: sticky` é CSS puro. Sem JS ele continua grudando e continua
   sendo seis links que funcionam; o que o JS acrescenta é só o destaque
   do capítulo corrente. */
.indice {
	/* Warm, não branco: fica colado embaixo da capa, que agora é branca —
	   duas superfícies brancas seguidas apagariam a divisão entre elas. */
	background: var(--warm);
	color: var(--ink);
	padding: 26px 0 30px;
}
@media (min-width: 1000px) {
	.indice {
		position: sticky;
		/* -1px é o que permite detectar o grude: com top: 0 o elemento nunca
		   deixa de estar 100% visível e o observer não tem o que reportar. */
		top: -1px;
		z-index: 200;
		padding: 0;
		transition: padding 0.4s var(--ease);
	}
	.indice::after {
		content: "";
		position: absolute;
		inset: auto 0 0 0;
		height: 1px;
		background: rgba(255, 255, 255, 0.12);
	}
	/* Duas barras empilhadas custam 162px de altura de leitura. Em vez disso
	   elas se revezam: quando o índice assume o topo, o header recolhe. Quem
	   está lendo um capítulo precisa do índice, não do menu — e o menu volta
	   assim que a pessoa sobe. */
	.indice.is-fixo { box-shadow: 0 14px 30px -18px rgba(0, 0, 0, 0.7); }

	.nav {
		transform: translate3d(0, 0, 0);
		transition: background 0.4s var(--ease), box-shadow 0.4s var(--ease),
			transform 0.45s var(--mv-toque);
	}
	body:has(.indice.is-fixo) .nav { transform: translate3d(0, -100%, 0); }
	/* O foco no menu traz o header de volta: teclado nunca pode perseguir um
	   alvo que fugiu da tela. */
	body:has(.indice.is-fixo) .nav:focus-within { transform: translate3d(0, 0, 0); }
}
.indice ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	/* auto-fit em vez de 4 fixas: a página do escritório tem 6 itens e
	   os dois últimos cairiam órfãos numa segunda linha desalinhada. */
	grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
	gap: 0 clamp(18px, 2.4vw, 34px);
}
.indice a {
	display: flex;
	align-items: center;
	gap: 11px;
	min-height: 54px;
	border-top: 1px solid #e4ded6;
	text-decoration: none;
	/* 16px é o piso desta página; 15px passava despercebido mas fere a regra */
	font-size: 1rem;
	font-weight: 600;
	transition: background 0.22s var(--ease);
}
.indice a {
	position: relative;
	color: var(--ink-soft);
	transition: background 0.28s var(--mv-toque), color 0.28s var(--mv-toque);
}
/* O fio que marca o capítulo: cresce do meio para fora, no hover e no
   estado corrente. Mesma cor e mesma espessura do trilho — uma lei só. */
.indice a::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: -1px;
	height: 3px;
	background: var(--red);
	transform: scaleX(0);
	transform-origin: center;
	transition: transform 0.42s var(--mv-toque);
}
/* Só em aparelho com ponteiro de verdade. No celular o toque aplica o
   :hover e ele GRUDA até se tocar em outra coisa: o item tocado ficava
   escuro e com a barra vermelha mesmo depois de a página rolar até a
   área — parecia selecionado (relato do escritório, 17/10/2026). Quem
   marca a área da vez no celular é o .is-aqui, que acompanha a rolagem. */
@media (hover: hover) and (pointer: fine) {
	.indice a:hover { color: var(--ink); background: rgba(27, 44, 51, 0.05); }
	.indice a:hover::after { transform: scaleX(1); }
}

/* Capítulo corrente: marcado pelo JS. Sem JS, nada se marca e os seis
   links continuam funcionando. */
.indice a.is-aqui { color: var(--ink); }
.indice a.is-aqui::after { transform: scaleX(1); }
.indice a:focus-visible { outline: 3px solid var(--red-light); outline-offset: -3px; }
.indice__n {
	flex: none;
	font-size: 1.25rem;
	font-variant-numeric: tabular-nums;
	line-height: 1;
	font-weight: 700;
	letter-spacing: 0.1em;
	color: var(--red-ink);
}

/* ---------- cada frente de atuação ---------- */
.frente { padding: clamp(56px, 8vh, 92px) 0; scroll-margin-top: 96px; }
.frente__grid {
	display: grid;
	grid-template-columns: 0.72fr 1.28fr;
	gap: clamp(28px, 5vw, 72px);
	align-items: start;
}
.frente__n {
	display: block;
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.18em;
	color: var(--red-ink);
	margin-bottom: 12px;
}
.frente__t {
	font-size: clamp(1.45rem, 2.4vw, 1.95rem);
	font-weight: 700;
	color: var(--petrol);
	line-height: 1.16;
	margin-bottom: 12px;
}
.frente__quem {
	font-size: 0.9375rem;
	font-weight: 700;
	color: var(--petrol);
	padding-top: 12px;
	border-top: 2px solid var(--red);
	display: inline-block;
}
.frente__longa {
	font-size: 1.0625rem;
	line-height: 1.72;
	color: var(--ink-soft);
	margin-bottom: 22px;
	max-width: 58ch;
}
.frente__itens {
	list-style: none;
	margin: 0 0 24px;
	padding: 0;
	display: grid;
	gap: 2px;
}
.frente__itens li {
	position: relative;
	padding: 12px 0 12px 42px;
	font-size: 1rem;
	line-height: 1.6;
	color: var(--ink);
	border-bottom: 1px solid #e6e0d8;
}
/* meia-moldura da marca no lugar de um marcador genérico */
.frente__itens li::before {
	content: "";
	position: absolute;
	left: 8px;
	top: 17px;
	width: 12px;
	height: 17px;
	border-left: 3px solid var(--red);
	border-top: 3px solid var(--red);
	border-bottom: 3px solid var(--red);
	border-radius: 4px 0 0 4px;
}
.frente__link {
	display: inline-flex;
	align-items: center;
	min-height: 48px;
	font-size: 1.0625rem;
	font-weight: 700;
	color: var(--petrol);
	text-underline-offset: 5px;
}

.prose p { margin-bottom: 14px; }

@media (max-width: 900px) {
	.indice ul { grid-template-columns: repeat(2, 1fr); }
	.frente__grid { grid-template-columns: 1fr; gap: 20px; }
}
@media (max-width: 620px) {
	.indice ul { grid-template-columns: 1fr; }
	.capa { padding-top: 108px; }
	.capa__titulo { max-width: none; }
}

/* ===========================================================
   HERO — retrato dos sócios ao lado do texto

   Quando a foto dos três existe, a cena vira duas colunas: o
   texto à esquerda e o retrato à direita, ocupando o vazio.
   Sem a foto, `.hero__firma--foto` não é aplicada e tudo volta
   ao formato de coluna única.
   =========================================================== */
@media (min-width: 981px) {
	.hero__inner:has(.hero__firma--foto) {
		display: grid;
		grid-template-columns: 1fr 0.92fr;
		grid-template-areas:
			"folio  foto"
			"titulo foto"
			"lead   foto"
			"acoes  foto"
			"fone   foto";
		align-items: start;
		column-gap: clamp(36px, 4.6vw, 68px);
	}
	.hero__inner:has(.hero__firma--foto) .hero__folio  { grid-area: folio; }
	.hero__inner:has(.hero__firma--foto) .hero__title  { grid-area: titulo; }
	.hero__inner:has(.hero__firma--foto) .hero__lead   { grid-area: lead; }
	.hero__inner:has(.hero__firma--foto) .hero__acoes  { grid-area: acoes; margin-bottom: 0; }
	.hero__inner:has(.hero__firma--foto) .hero__fone   { grid-area: fone; }
	.hero__inner:has(.hero__firma--foto) .hero__firma  {
		grid-area: foto;
		align-self: center;
		padding-top: 0;
		border-top: 0;
	}
	/* o fólio atravessa as duas colunas: é a linha superior da composição */
}

.firma__moldura { position: relative; }
.firma__quadro {
	position: relative;
	margin: 0;
	/* Quadrada. A curva grande que estava aqui ficava no canto superior
	   DIREITO — justamente o que o colchete da marca deixa reto. Quem
	   carrega a linguagem da marca agora são as cantoneiras. */
	border-radius: 0;
	overflow: hidden;
}

/* Cotovelo RETO, não arredondado: contra o canto quadrado da fotografia
   a curva abria um vão e a cantoneira parecia solta. O que cita a marca
   aqui é o par de Ls em diagonal e as duas cores — que é a ideia do
   colchete —, não o raio. É também o mesmo desenho da .corner que o site
   já usa nas outras páginas.

   Recuo de 13px para o L ficar inteiro FORA da fotografia: a 9px o braço
   de baixo corria colado à barra de avanço e as duas liam como um par de
   linhas paralelas. */
.firma__foto {
	width: 100%;
	height: auto;
	aspect-ratio: 1200 / 860;
	/* Teto por ALTURA, como o tipo do hero já tem. A fotografia é dimensionada
	   pela largura da coluna e ficava com 417px fixos (com a legenda), enquanto
	   a coluna de texto encolhe em telas baixas: em 660px de altura o texto
	   caía para 415px e o bloco da foto transbordava da própria célula, subindo
	   por cima do folio. Com `cover`, o teto recorta em vez de estourar. */
	/* 42vh e não 48: a cantoneira avança 13px acima da fotografia, e a 48
	   sobravam só 6px de folga até o folio — a foto cabia, a cantoneira
	   não. O teto tem de reservar espaço para a moldura, não só para a
	   imagem. Acima de ~800px de altura o valor natural é menor e este
	   teto não entra. */
	max-height: 42vh;
	object-fit: cover;
	filter: saturate(0.82) contrast(1.04);
}
/* ---------- o fio da marca vira indicador de avanço ----------
   Era um traço decorativo de 42% ligando foto e legenda. Agora é uma
   trilha inteira com um preenchimento que acompanha o percurso do hero.
   O preenchimento usa o degradê vermelho→dourado que o site já emprega
   em outros dois lugares: continua sendo a marca, e não um enfeite novo.
   Cresce por scaleX (composto), nunca por width. */
/* sem JS o indicador fica no traço curto de sempre */
html:not(.js) .firma__quadro::before { display: none; }

.firma__nomes {
	display: block;
	/* 30 e não 16: a cantoneira de baixo agora avança 18px além da
	   fotografia e encostaria na legenda */
	margin-top: 30px;
	font-size: 1.0625rem;
	font-weight: 600;
	color: var(--on-dark);
}
.firma__nomes .hero__firma-rot { display: block; margin-bottom: 5px; }

@media (max-width: 980px) {
	.hero__firma--foto { padding-top: 28px; }
	.firma__nomes { font-size: 1rem; }
}

/* ===========================================================
   CONTEÚDO PROVISÓRIO

   Texto de espera precisa parecer texto de espera. O bloco de
   aviso só é impresso fora de produção (ver inc/pendencias.php),
   então não há risco de vazar para o site publicado.
   =========================================================== */
.provisorio {
	display: block;
	color: var(--ink-soft);
	font-style: italic;
}
.pendencia {
	display: block;
	margin-top: 10px;
	padding: 9px 13px;
	border-left: 3px solid var(--red);
	background: #fbf3f2;
	font-size: 0.875rem;
	font-style: normal;
	line-height: 1.5;
	color: #8a2f26;          /* 6,0:1 sobre o rosa claro do aviso */
}
.pendencia strong { color: #7a2a22; }

/* ===========================================================
   PÁGINA "O ESCRITÓRIO"
   =========================================================== */

/* item de saída do sumário: para quem não veio ler institucional */
.indice__sai { color: var(--red-light); font-weight: 700; }
.indice__sai span:first-child { text-decoration: underline; text-underline-offset: 4px; }

/* ---------- 02 · duas colunas com a moldura ---------- */
.dupla {
	display: grid;
	grid-template-columns: var(--duas-colunas);
	gap: var(--vao-colunas);
	align-items: start;
}
.dupla__texto .sec__title { margin-bottom: 22px; }

/* O colchete da marca em CSS: dois braços, cores institucionais.
   Desenhado com border e não em SVG — escala sozinho e não pesa. */
.moldura {
	position: relative;
	padding: clamp(14px, 1.8vw, 22px);
}
.moldura::before,
.moldura::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	width: 47.5%;
	pointer-events: none;
}
.moldura::before {
	left: 0;
	border: 3px solid var(--petrol);
	border-right: 0;
	border-radius: clamp(20px, 2.6vw, 34px) 0 0 clamp(20px, 2.6vw, 34px);
}
.moldura::after {
	right: 0;
	border: 3px solid var(--red);
	border-left: 0;
	border-radius: 0 clamp(20px, 2.6vw, 34px) clamp(20px, 2.6vw, 34px) 0;
}
.moldura__quadro { margin: 0; overflow: hidden; border-radius: var(--r-sm); }
.moldura__quadro img {
	width: 100%;
	height: auto;
	filter: saturate(0.82) contrast(1.04);
}
.moldura__nota {
	margin-top: 18px;
	font-size: 0.9375rem;
	line-height: 1.6;
	color: var(--red-ink);
	max-width: 40ch;
}

/* ---------- 03 · linha do tempo ---------- */
.linha {
	list-style: none;
	margin: 0 0 34px;
	padding: 0;
	border-left: 2px solid #e4ded6;
}
.linha__item {
	position: relative;
	padding: 0 0 26px 30px;
}
.linha__item::before {
	content: "";
	position: absolute;
	left: -7px;
	top: 7px;
	width: 12px;
	height: 12px;
	background: var(--red);
}
.linha__ano {
	display: block;
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	color: var(--ink-soft);
	margin-bottom: 5px;
}
.linha__txt {
	font-size: 1.0625rem;
	line-height: 1.68;
	color: var(--ink-soft);
	max-width: 56ch;
}
.linha__fecho {
	font-size: 1.0625rem;
	line-height: 1.72;
	color: var(--ink-soft);
	max-width: 60ch;
	margin-bottom: clamp(40px, 6vh, 56px);
}
.fatos {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: clamp(20px, 3vw, 40px);
	margin: 0;
	padding-top: 28px;
	border-top: 1px solid #e4ded6;
}
.fatos .fato dt {
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ink-soft);
	margin-bottom: 8px;
}
.fatos .fato dd {
	margin: 0;
	font-size: 1rem;
	line-height: 1.6;
	color: var(--ink-soft);
}

/* ---------- 04 · o combinado ---------- */
.pactos {
	list-style: none;
	margin: 0 0 36px;
	padding: 0;
	display: grid;
	grid-template-columns: var(--duas-colunas);
	column-gap: var(--vao-colunas);
	row-gap: clamp(22px, 3vw, 38px);
}
.pacto {
	background: var(--paper);
	border: 1px solid #e6e0d8;
	border-radius: var(--r-sm);
	padding: 28px 28px 26px;
}
.pacto__t {
	font-size: 1.1875rem;
	font-weight: 700;
	line-height: 1.3;
	color: var(--petrol);
	margin-bottom: 12px;
	padding-left: 16px;
	border-left: 3px solid var(--red);
}
.pacto__d {
	font-size: 1rem;
	line-height: 1.68;
	color: var(--ink-soft);
}
.nota-honesta {
	padding: 20px 24px;
	background: var(--paper);
	font-size: 1rem;
	line-height: 1.72;
	color: var(--ink-soft);
	max-width: 74ch;
}

/* ---------- 05 · faixa de imagem ---------- */
.faixa { margin: 0; position: relative; }
.faixa img {
	width: 100%;
	height: auto;
	display: block;
	filter: saturate(0.82) contrast(1.04);
}
.faixa__cap {
	background: var(--petrol-deep);
	color: var(--on-dark-soft);
	font-size: 0.9375rem;
	padding: 14px var(--gut);
	text-align: center;
}

/* ---------- 06 · percurso ---------- */
.passos { list-style: none; margin: 0; padding: 0; }
.passo2 {
	padding: 30px 0;
	border-top: 1px solid #e4ded6;
}
.passo2:last-child { border-bottom: 1px solid #e4ded6; }
.passo2__cab {
	display: flex;
	align-items: baseline;
	gap: 14px;
	margin-bottom: 16px;
}
.passo2__n {
	font-size: 0.875rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	color: var(--red-ink);
	flex: none;
}
.passo2__t {
	font-size: 1.25rem;
	font-weight: 700;
	color: var(--petrol);
	line-height: 1.3;
}
.passo2__cols {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(20px, 3vw, 44px);
}
.passo2__col p:not(.passo2__rot) {
	font-size: 1rem;
	line-height: 1.68;
	color: var(--ink-soft);
}
.passo2__rot {
	font-size: 1rem;
	font-weight: 700;
	color: var(--petrol);
	margin-bottom: 6px;
}
/* No desktop a coluna do cliente se distingue pelo rótulo; o fio ficava
   sendo o quarto toco vermelho da tela. No celular as bordas de coluna
   voltam pela media query própria, onde fazem trabalho estrutural. */
.passo2__col--voce .passo2__rot { color: #b3392f; }

/* ---------- 07 · quem assina ---------- */
.galeria {
	list-style: none;
	margin: 0 0 clamp(44px, 7vh, 72px);
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(22px, 3vw, 40px);
}
.cartao { text-align: left; }
/* Teto rígido: a fonte tem 760px e esticar entrega rosto borrado. */
.cartao__foto {
	margin: 0 0 16px;
	max-width: 340px;
	border-radius: var(--r-sm);
	overflow: hidden;
}
.cartao__foto img {
	width: 100%;
	height: auto;
	filter: saturate(0.82) contrast(1.04);
}
.cartao__nome {
	font-size: 1.1875rem;
	font-weight: 700;
	color: var(--petrol);
	margin-bottom: 3px;
}
.cartao__papel { font-size: 0.9375rem; color: var(--ink-soft); }
.cartao__oab { display: block; margin-top: 2px; }
.cartao__bio { margin-top: 10px; font-size: 1rem; line-height: 1.62; color: var(--ink-soft); }

.tres__ante {
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--red-ink);
	padding-bottom: 12px;
	border-bottom: 2px solid var(--petrol);
	margin-bottom: 26px;
}
.tres__lista {
	list-style: none;
	margin: 0 0 clamp(44px, 6vh, 64px);
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(22px, 3vw, 40px);
}
.tres__lista h3 {
	font-size: 1.0625rem;
	font-weight: 700;
	color: var(--petrol);
	line-height: 1.35;
	margin-bottom: 10px;
}
.tres__lista p { font-size: 1rem; line-height: 1.66; color: var(--ink-soft); }

.time {
	display: grid;
	grid-template-columns: var(--duas-colunas);
	gap: var(--vao-colunas);
	align-items: center;
}
.time__foto {
	margin: 0;
	border-radius: var(--r-sm);
	overflow: hidden;
}
.time__foto img { width: 100%; height: auto; filter: saturate(0.82) contrast(1.04); }
.time__txt { font-size: 1.0625rem; line-height: 1.72; color: var(--ink-soft); }

/* ---------- 08 · selo de fecho ---------- */
.selo {
	background: var(--petrol);
	color: var(--on-dark);
	padding: clamp(56px, 9vh, 92px) 0;
	text-align: center;
}
.selo__colchete {
	position: relative;
	max-width: 720px;
	margin: 0 auto;
	padding: clamp(30px, 4vw, 46px) clamp(28px, 4vw, 52px);
}
.selo__colchete::before,
.selo__colchete::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	width: 47.5%;
	pointer-events: none;
}
.selo__colchete::before {
	left: 0;
	border: 3px solid var(--on-dark);
	border-right: 0;
	border-radius: 30px 0 0 30px;
}
.selo__colchete::after {
	right: 0;
	border: 3px solid var(--red);
	border-left: 0;
	border-radius: 0 30px 30px 0;
}
.selo__frase {
	font-size: clamp(1.25rem, 2.2vw, 1.65rem);
	font-weight: 600;
	line-height: 1.4;
	text-wrap: balance;
}
.selo__tag {
	margin-top: 26px;
	font-size: 1rem;
	font-weight: 300;
	font-style: italic;
	color: var(--on-dark-soft);
}

/* ---------- responsivo ---------- */
@media (max-width: 900px) {
	.dupla,
	.time { grid-template-columns: 1fr; }
	.fatos { grid-template-columns: repeat(2, 1fr); }
	.pactos,
	.galeria,
	.tres__lista { grid-template-columns: repeat(2, 1fr); }
	.passo2__cols { grid-template-columns: 1fr; gap: 18px; }
	.cartao__foto { max-width: none; }
}
@media (max-width: 620px) {
	.fatos,
	.pactos,
	.galeria,
	.tres__lista { grid-template-columns: 1fr; }
	.cartao__foto { max-width: 380px; }
	.selo__colchete { padding: 26px 22px; }
	.faixa__cap { text-align: left; }
}

/* ===========================================================
   NOSSOS PROFISSIONAIS — verificação de quadro
   =========================================================== */
.verifica {
	max-width: 640px;
	margin: 0 0 clamp(30px, 5vh, 46px);
}
.verifica__label {
	display: block;
	font-size: 0.9375rem;
	font-weight: 700;
	color: var(--petrol);
	margin-bottom: 9px;
}
.verifica__linha {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
}
.verifica__campo {
	flex: 1 1 260px;
	min-height: 56px;
	padding: 0 18px;
	font-family: inherit;
	font-size: 1.125rem;       /* dedo grosso, vista cansada: campo grande */
	color: var(--ink);
	background: var(--paper);
	/* 3,04:1 com o branco: o WCAG exige esse mínimo em borda de campo,
	   e aqui é o que faz a pessoa enxergar onde digitar. */
	border: 2px solid #85979e;
	border-radius: var(--r-pill);
}
.verifica__campo:focus-visible { border-color: var(--petrol); outline: 3px solid var(--red); outline-offset: 1px; }
.verifica__campo::placeholder { color: #6b797e; }   /* 4,51:1 sobre branco */
.verifica__btn { flex: 0 0 auto; min-height: 56px; }
.verifica__ajuda {
	margin-top: 10px;
	font-size: 0.9375rem;
	color: var(--ink-soft);
}
.verifica__estado {
	font-size: 0.9375rem;
	font-weight: 700;
	color: var(--petrol);
	margin-bottom: 14px;
	min-height: 1.4em;          /* reserva a linha: nada pula quando o texto entra */
}
.verifica__vazio {
	padding: 18px 20px;
	margin-bottom: 22px;
	border-left: 4px solid var(--red);
	background: #fbf3f2;
	font-size: 1rem;
	line-height: 1.65;
	color: #7a2a22;
	max-width: 70ch;
}
.verifica__vazio strong { display: block; margin-bottom: 4px; }
.verifica__vazio a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	font-weight: 700;
	color: #7a2a22;
	text-underline-offset: 4px;
}

.quadro {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(268px, 1fr));
	gap: clamp(14px, 2vw, 22px);
}
.prof[hidden] { display: none; }
.prof__foto img { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.82); }

/* sem retrato, as iniciais aparecem dentro do colchete da marca */

.prof__papel { font-size: 0.9375rem; color: var(--ink-soft); }
.prof__oab {
	font-size: 0.875rem;
	font-weight: 700;
	color: var(--red-ink);
	margin-top: 3px;
}
.prof .pendencia { margin-top: 8px; padding: 5px 9px; font-size: 0.8125rem; }
.pendencia--bloco { display: block; margin-top: 26px; max-width: 74ch; }

@media (max-width: 620px) {
	.verifica__campo { flex: 1 1 100%; }
	.verifica__btn { width: 100%; }
	.quadro { grid-template-columns: 1fr; }
}

/* ===========================================================
   FILIAIS
   =========================================================== */
.hist { max-width: 62ch; margin-bottom: clamp(30px, 5vh, 44px); }
.hist__txt { font-size: 1.0625rem; line-height: 1.74; color: var(--ink-soft); }

.verifica--filiais { margin-bottom: 20px; }

.filiais {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: clamp(16px, 2.2vw, 26px);
}
.filial {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: 24px 24px 20px;
	background: var(--paper);
	border: 1px solid #e6e0d8;
	border-radius: var(--r-sm);
}
.filial[hidden] { display: none; }

/* a matriz se distingue pelo colchete da marca na lateral */
.filial--matriz { border-color: #d9d2c8; }
.filial--matriz::before {
	content: "";
	position: absolute;
	left: 0;
	top: 22px;
	bottom: 22px;
	width: 5px;
	background: var(--red);
	border-radius: 0 3px 3px 0;
}

.filial__cab {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 12px;
}
.filial__cidade {
	font-size: 1.25rem;
	font-weight: 700;
	color: var(--petrol);
	line-height: 1.25;
}
.filial__uf {
	margin-left: 8px;
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	color: var(--red-ink);
	vertical-align: middle;
}
.filial__selo {
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--paper);
	background: var(--petrol);
	padding: 4px 9px;
	border-radius: 3px;
}

.filial__end {
	font-style: normal;
	font-size: 1rem;
	line-height: 1.6;
	color: var(--ink-soft);
	margin-bottom: 14px;
}
.filial__cep { font-size: 0.9375rem; }

.filial__tels { list-style: none; margin: 0 0 16px; padding: 0; }
.filial__tels li { margin-bottom: 2px; }
/* telefone é alvo de toque: quem tem 70 anos disca daqui mesmo */
.filial__tels a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	font-size: 1.0625rem;
	font-weight: 700;
	color: var(--petrol);
	text-underline-offset: 4px;
}

.filial__mapa {
	margin-top: auto;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	font-size: 0.9375rem;
	font-weight: 700;
	color: var(--petrol);
	text-underline-offset: 4px;
}
.filial__ext { color: var(--red); }

.filiais__nota {
	margin-top: clamp(24px, 4vh, 34px);
	padding: 16px 20px;
	border-left: 4px solid var(--red);
	background: var(--warm);
	font-size: 1rem;
	line-height: 1.65;
	color: var(--ink-soft);
	max-width: 68ch;
}

/* texto só para leitor de tela */
.sr {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

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

/* identificação profissional no rodapé */
.foot__razao {
	font-weight: 700;
	color: var(--on-dark);
	margin-bottom: 4px;
}
.foot__razao span {
	display: block;
	font-weight: 400;
	color: var(--on-dark-soft);
}
.foot__sede { margin-bottom: 10px; line-height: 1.6; }
.foot__priv {
	margin-left: 8px;
	color: var(--on-dark);
	text-decoration: underline;
	text-underline-offset: 4px;
}
.foot__sede a {
	display: inline-block;
	margin-top: 3px;
	font-weight: 700;
	color: var(--on-dark);
	text-underline-offset: 4px;
}

/* ============================================================
   PÁGINAS DE ÁREA (page-area.php)
   Molde das oito áreas. Tudo aqui é reaproveitado pelas outras
   sete; nada é específico do planejamento de aposentadoria.
   ============================================================ */

/* ---------- capa da área ---------- */
/* O padrão de 20ch quebra demais uma H1 de duas frases. */
.capa__titulo--area { max-width: 26ch; }
.capa__titulo .leve {
	display: block;
	font-weight: 400;
	color: var(--ink-soft);
}

/* Triagem: quem caiu na página errada precisa sair antes de ler. */
/* Capa em duas colunas a partir de 1100px: antes o título e o lead paravam
   na metade da tela e a outra metade ficava vazia, o que numa tela de 2000px
   é metade da primeira impressão desperdiçada. */
.capa__grid { display: grid; gap: 30px; }
/* A migalha recua junto: o canal desce colado à borda do texto, e sem isto
   ele atravessa a palavra "Início". */
/* O recuo do canal mora no SHELL, em toda largura: quando ficava só nos
   elementos (migalha e texto), a triagem e o título de outras capas não o
   recebiam e o canal de 3px riscava as letras no celular e no tablet —
   era o bug mais visível do site. */
.capa > .shell { padding-left: calc(var(--gut) + var(--trilho)); }
@media (min-width: 1100px) {
	/* O recuo do trilho sobe para o shell: dentro da coluna 1 ele deslocava
	   só o texto, e a coluna 2 nascia 29px antes da vertical dos leads. */
	.capa__grid {
		grid-template-columns: var(--duas-colunas);
		gap: var(--vao-colunas);
		align-items: end;
	}
	.capa__titulo--area { max-width: 18ch; }
	.triagem { margin-top: 0; padding-top: 0; border-top: 0; padding-left: clamp(28px, 3vw, 44px); border-left: 1px solid #e4ded6; }
}

.triagem {
	margin-top: 26px;
	padding-top: 20px;
	border-top: 1px solid #e4ded6;
	max-width: 58ch;
	font-size: 1rem;
	line-height: 1.7;
	color: var(--ink-soft);
}
/* Frase inteira, não rótulo: em caixa alta ela ocupava duas linhas e
   perdia a legibilidade que este público precisa. */
.triagem__t {
	font-size: 1.0625rem;
	font-weight: 600;
	line-height: 1.45;
	color: var(--ink);
	margin-bottom: 18px;
	padding-bottom: 16px;
	border-bottom: 1px solid #e4ded6;
}
.triagem ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.triagem li { display: grid; gap: 1px; }
.triagem li > span { font-size: 1rem; line-height: 1.5; }
.triagem > p { margin-bottom: 4px; }
.triagem a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;         /* alvo de toque */
	color: var(--ink);
	font-weight: 700;
	text-decoration: underline;
	text-decoration-color: var(--red);
	text-decoration-thickness: 2px;
	text-underline-offset: 4px;
}
.triagem a:hover { text-decoration-color: var(--ink); }

/* ---------- a resposta curta ---------- */
.resposta__lista { margin: 0; }
.resposta__par {
	border-bottom: 1px solid #e4ded6;
	max-width: 78ch;
}
.resposta__par:first-child { border-top: 2px solid var(--petrol); }
.resposta__par > summary {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 18px;
	padding: 20px 0;
	min-height: 44px;
	list-style: none;
	font-size: 1.1875rem;
	font-weight: 700;
	color: var(--petrol);
	line-height: 1.35;
	cursor: pointer;
}
.resposta__par > summary::-webkit-details-marker { display: none; }
.resposta__par > summary::after {
	content: "";
	flex: 0 0 auto;
	width: 10px;
	height: 10px;
	margin-top: 7px;
	border-right: 2px solid var(--red);
	border-bottom: 2px solid var(--red);
	transform: rotate(45deg);
	transition: transform 0.25s var(--ease);
}
.resposta__par[open] > summary::after { transform: rotate(-135deg); }
.resposta__par > summary:hover { color: var(--ink); }
.resposta__par > summary:focus-visible { outline: 3px solid var(--red); outline-offset: 3px; }
.resposta__par > p {
	margin: 0;
	padding-bottom: 24px;
	font-size: 1.0625rem;
	line-height: 1.72;
	color: var(--ink-soft);
}

@media (prefers-reduced-motion: reduce) {
	.resposta__par > summary::after { transition: none; }
}

/* ---------- a janela ---------- */
.janela__prova,
.janela__ressalva {
	margin-top: 22px;
	max-width: 68ch;
	font-size: 1.0625rem;
	line-height: 1.74;
	color: var(--ink-soft);
}
/* Sem filete: quem diferencia a prova da ressalva é a cor do texto —
   branco pleno contra suave — e a posição no par. */
.janela__prova { color: var(--ink); }

/* ---------- .corte — a janela desenhada ----------
   Em HTML e CSS, não em SVG: assim os rótulos continuam sendo texto
   de verdade, selecionável, lido na ordem certa por leitor de tela e
   escalando com o zoom — que este público usa. */
.corte { margin-top: clamp(34px, 5vw, 56px); }

.corte__vias {
	list-style: none;
	margin: 0 0 30px;
	padding: 0;
	display: grid;
	gap: 16px;
	counter-reset: via;
}
.corte__vias li {
	display: flex;
	align-items: center;
	gap: 12px;
	color: var(--ink-soft);       /* 6,18:1 no branco */
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.45;
}
.corte__vias li::after {       /* no celular, um traço curto depois do rótulo */
	content: "";
	flex: 0 0 34px;
	border-top: 2px solid var(--ink-soft);
}

.corte__marco {
	border-top: 3px solid var(--red);
	padding-top: 14px;
	font-size: 1rem;
	font-weight: 700;
	color: var(--ink);
}
.corte__depois {
	margin-top: 20px;
	font-size: 1.0625rem;
	font-weight: 600;
	line-height: 1.5;
	color: var(--ink);
}
.corte__depois::before {       /* no celular, o fio único desce */
	content: "";
	display: block;
	width: 4px;
	height: 36px;
	margin-bottom: 14px;
	background: var(--ink);
}
.corte__legenda {
	margin-top: 26px;
	font-size: 1rem;
	line-height: 1.7;
	color: var(--ink-soft);
	max-width: 54ch;
}

@media (min-width: 760px) {
	.corte {
		display: grid;
		grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
		/* Sem vão entre as colunas: os traços dos caminhos precisam
		   encostar na linha do protocolo, senão o desenho não diz que
		   é ali que todos eles terminam. O respiro do outro lado vem
		   do padding de .corte__lado. */
		column-gap: 0;
		align-items: center;
	}
	.corte__vias { margin-bottom: 0; }
	.corte__vias li::after { flex: 1 1 auto; }   /* o traço vai até a linha */

	/* A linha vertical vermelha é o protocolo: os caminhos chegam nela,
	   e do outro lado existe um só. */
	.corte__lado {
		position: relative;
		padding-left: clamp(26px, 3vw, 44px);
		align-self: stretch;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}
	.corte__lado::before {
		content: "";
		position: absolute;
		left: 0;
		top: 0;
		bottom: 0;
		width: 3px;
		background: var(--red);
	}
	.corte__marco { border-top: 0; padding-top: 0; }
	.corte__depois::before { display: none; }
	.corte__legenda { grid-column: 1 / -1; margin-top: clamp(30px, 4vw, 46px); }
}

/* ---------- as regras ---------- */
.regras__lista {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: clamp(18px, 2.4vw, 28px);
}
@media (min-width: 720px) {
	.regras__lista { grid-template-columns: repeat(2, 1fr); }
}
.regra {
	padding: 26px 26px 28px;
	background: var(--warm);
	border-top: 3px solid var(--petrol);
	border-radius: var(--r-sm);
}
.regra__nome {
	font-size: 1.1875rem;
	font-weight: 700;
	color: var(--petrol);
	line-height: 1.3;
	margin-bottom: 14px;
}
.regra__linha {
	font-size: 1rem;
	line-height: 1.66;
	color: var(--ink-soft);
	margin-bottom: 10px;
}
/* Rótulo em texto normal: cinco cartões × três rótulos em caixa alta com
   tracking eram quinze objetos gritando na mesma tela, e 12px fica abaixo
   do piso deste projeto. */
.regra__linha b {
	display: block;
	font-size: 0.875rem;
	font-weight: 700;
	color: var(--red-ink);   /* 4,56:1 sobre o creme */
	margin-bottom: 2px;
}
/* A linha de varredura do cartão: é a que responde "essa é a minha?". */
.regra__linha--capa { font-size: 1.0625rem; color: var(--ink); }
.regra__linha--at { margin-bottom: 0; }
.regra__linha--at b { color: #b3392f; }   /* 5,3:1 sobre o creme */

/* A regra permanente não é transição: fica destacada, fora da grade. */
.regra--perm {
	margin-top: clamp(18px, 2.4vw, 28px);
	background: var(--paper);
	border-top-color: var(--red);
	border-left: 1px solid #e4ded6;
	border-right: 1px solid #e4ded6;
	border-bottom: 1px solid #e4ded6;
}
.regra__rotulo {
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--ink-soft);
	margin-bottom: 8px;
}

.regras__calculo,
.regras__fecho {
	margin-top: clamp(26px, 3.4vw, 40px);
	max-width: 74ch;
	font-size: 1.0625rem;
	line-height: 1.74;
	color: var(--ink-soft);
}
.regras__calculo {
	padding: 22px 26px;
	background: var(--warm);
	border-left: 4px solid var(--red);
}
.regras__fecho { font-weight: 600; color: var(--ink); }
.regras .nota-honesta { margin-top: clamp(24px, 3vw, 34px); background: var(--warm); }

/* Responsabilidade profissional: só imprime quando o sócio assina. */
.revisado {
	margin-top: 30px;
	font-size: 1rem;
	color: var(--ink-soft);
}

/* ---------- o CNIS ---------- */
.cnis__grid { display: grid; gap: clamp(30px, 4vw, 56px); }
@media (min-width: 900px) {
	.cnis--foto .cnis__grid {
		grid-template-columns: var(--duas-colunas);
		column-gap: var(--vao-colunas);
		/* stretch, não start: a foto acompanha a altura do texto. Com start,
		   ela acabava 350px antes e a coluna direita morria no vazio. */
		align-items: stretch;
	}
	/* Especificidade de propósito: a base `.cnis__foto img { height: auto }`
	   vem depois deste bloco no arquivo e vencia por ordem. */
	/* Grid, não flex: 1fr para a foto, auto para a legenda. O flex se
	   recusava a encolher o <picture> abaixo do tamanho intrínseco e a
	   legenda era cortada pelo overflow. Com linhas de grid a conta é
	   determinística: foto = altura da coluna menos a legenda. */
	.cnis--foto .cnis__foto {
		display: grid;
		grid-template-rows: minmax(0, 1fr) auto;
	}
	.cnis--foto .cnis__foto picture {
		display: block;
		min-height: 0;
		/* O clip mora aqui, incondicional: o zoom do parallax (scale 1.06)
		   vazava por cima da legenda quando o bloco de hover não se aplicava. */
		overflow: hidden;
		border-radius: var(--r-sm);
	}
	.cnis--foto .cnis__foto img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
}
.cnis__txt .sec__head { margin-bottom: clamp(28px, 4vh, 40px); }
.cnis__lista { margin: 0; display: grid; gap: 22px; }
.cnis__lista dt {
	font-size: 1rem;
	font-weight: 700;
	color: var(--petrol);
	padding-bottom: 8px;
	border-bottom: 2px solid var(--red);
	margin-bottom: 10px;
}
.cnis__lista dd {
	margin: 0;
	font-size: 1.0625rem;
	line-height: 1.7;
	color: var(--ink-soft);
}
.cnis__foto { margin: 0; }
.cnis__foto img {
	width: 100%;
	height: auto;
	border-radius: var(--r-sm);
	filter: saturate(0.82) contrast(1.04);
}
.cnis__foto figcaption {
	margin-top: 12px;
	font-size: 1rem;
	line-height: 1.6;
	color: var(--ink-soft);
}

/* ---------- é o seu caso? ---------- */
.seucaso__lista {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 2px;
	max-width: 86ch;
}
.seucaso__lista li {
	display: flex;
	gap: 14px;
	padding: 15px 0;
	border-bottom: 1px solid #e4ded6;
	font-size: 1.0625rem;
	line-height: 1.6;
	color: var(--ink);
}
.seucaso__lista li::before {
	content: "";
	flex: 0 0 10px;
	height: 10px;
	margin-top: 8px;
	background: var(--red);
	border-radius: 1px;
}
.seucaso__fecho {
	margin-top: 28px;
	max-width: 70ch;
	font-size: 1.0625rem;
	line-height: 1.74;
	color: var(--ink-soft);
}

/* ---------- chamada de meio de página ---------- */
.acao { margin-top: clamp(28px, 4vw, 40px); }
.acao p {
	margin-bottom: 16px;
	max-width: 56ch;
	font-size: 1.0625rem;
	line-height: 1.7;
	color: var(--ink-soft);
}

/* ---------- o que ter à mão ---------- */
.levar {
	margin-top: clamp(34px, 4.5vw, 52px);
	padding: clamp(24px, 3vw, 34px);
	background: var(--paper);
	border-radius: var(--r-sm);
	max-width: 72ch;
}
.levar__t {
	font-size: 1.125rem;
	font-weight: 700;
	color: var(--petrol);
	margin-bottom: 8px;
}
.levar__lead { font-size: 1rem; line-height: 1.7; color: var(--ink-soft); margin-bottom: 16px; }
.levar ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.levar li {
	padding-left: 20px;
	position: relative;
	font-size: 1rem;
	line-height: 1.62;
	color: var(--ink-soft);
}
.levar li:not(.marcar__item)::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.62em;
	width: 9px;
	height: 2px;
	background: var(--red);
}
/* O item marcável já tem a caixa como marca: o traço viraria dois sinais
   para a mesma coisa. */
.levar .marcar__item { padding-left: 0; }

/* ---------- recorte lateral (servidor público) ---------- */
.recorte__inner { max-width: 74ch; }
.recorte__t {
	font-size: clamp(1.375rem, 2.2vw, 1.75rem);
	font-weight: 600;
	line-height: 1.28;
	color: var(--petrol);
	margin-bottom: 16px;
}
.recorte__inner p {
	font-size: 1.0625rem;
	line-height: 1.74;
	color: var(--ink-soft);
	margin-bottom: 14px;
}
.recorte__link a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	font-weight: 700;
	color: var(--petrol);
	text-decoration: underline;
	text-decoration-color: var(--red);
	text-decoration-thickness: 2px;
	text-underline-offset: 4px;
}

/* ---------- o que este trabalho não é ----------
   Um parágrafo, não uma grade de cartões: é conteúdo sobre o serviço, não
   sobre o caso de quem lê, e chega numa altura da página em que ninguém
   tem paciência para uma quarta grade 2×2. */
.naoe__txt {
	max-width: 74ch;
	margin-bottom: clamp(22px, 3vw, 30px);
	font-size: 1.0625rem;
	line-height: 1.74;
	color: var(--ink-soft);
}

/* ---------- assinatura do selo ---------- */
/* A seção do selo é escura: assinatura em petróleo aqui some no fundo. */
.selo__quem {
	margin-top: 20px;
	font-size: 1rem;
	font-weight: 700;
	color: var(--on-dark-soft);   /* 4,54:1 sobre o petróleo */
}

/* ---------- para onde ir daqui ---------- */
.vizinhas__t {
	font-size: 1.0625rem;
	font-weight: 700;
	color: var(--petrol);
	padding-bottom: 12px;
	border-bottom: 2px solid var(--petrol);
	margin-bottom: 26px;
}
.vizinhas {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: clamp(16px, 2.2vw, 26px);
}
@media (min-width: 760px) {
	.vizinhas { grid-template-columns: repeat(3, 1fr); }
}
.vizinhas a {
	display: block;
	height: 100%;
	padding: 22px 22px 26px;
	background: var(--warm);
	border-radius: var(--r-sm);
	color: inherit;
	text-decoration: none;
	transition: background 0.3s var(--ease), transform 0.3s var(--ease);
}
.vizinhas a:hover { background: #efeae3; transform: translateY(-3px); }
.vizinhas a:focus-visible { outline: 3px solid var(--red); outline-offset: 3px; }
.vizinhas__n {
	display: block;
	font-size: 0.875rem;
	font-weight: 700;
	color: var(--red-ink);
	margin-bottom: 8px;
}
.vizinhas__nome {
	display: block;
	font-size: 1.0625rem;
	font-weight: 700;
	color: var(--petrol);
	line-height: 1.32;
	margin-bottom: 6px;
}
.vizinhas__quem {
	display: block;
	font-size: 1rem;
	line-height: 1.6;
	color: var(--ink-soft);
}

@media (prefers-reduced-motion: reduce) {
	.vizinhas a:hover { transform: none; }
}

/* Link do resumo para a página completa da área. Vem antes do botão de
   WhatsApp de propósito: entender primeiro, falar depois. */
.frente__mais { margin: 22px 0 4px; }
.frente__mais a {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	min-height: 44px;
	font-size: 1.0625rem;
	font-weight: 700;
	color: var(--petrol);
	text-decoration: underline;
	text-decoration-color: var(--red);
	text-decoration-thickness: 2px;
	text-underline-offset: 5px;
}
.frente__mais a:hover { text-decoration-color: var(--petrol); }
.frente__mais a:focus-visible { outline: 3px solid var(--red); outline-offset: 4px; }

/* ---------- .marcar — lista que a pessoa marca ----------
   Substitui listas que pediam varredura ("me encontre nesta lista") e eram
   servidas como leitura linear. Checkbox de verdade: funciona sem JS, o
   navegador preserva o estado ao voltar, e o leitor de tela anuncia
   marcado/desmarcado sem que a gente precise fingir nada com ARIA. */
.marcar {
	list-style: none;
	margin: 0;
	padding: 0;
	max-width: 84ch;
	border-top: 2px solid var(--petrol);
}
.marcar__item {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	border-bottom: 1px solid #e4ded6;
	transition: background 0.2s var(--ease);
}
.marcar__box {
	/* 24px de caixa dentro de um alvo de 44px: o público aqui é 50+ e
	   metade lê no celular. Caixa pequena é caixa não marcada. */
	flex: 0 0 auto;
	width: 24px;
	height: 24px;
	margin: 15px 0 0;
	accent-color: var(--red);
	cursor: pointer;
}
.marcar__rot {
	flex: 1;
	padding: 14px 12px 14px 0;
	min-height: 44px;
	font-size: 1.0625rem;
	line-height: 1.6;
	color: var(--ink);
	cursor: pointer;
}
.marcar__box:focus-visible { outline: 3px solid var(--red); outline-offset: 3px; }

/* :has() é progressivo: onde não houver, o checkbox ainda marca e o texto
   continua legível — só não ganha o realce. */
.marcar__item:has(.marcar__box:checked) { background: #fdf2f1; }
.marcar__item:has(.marcar__box:checked) .marcar__rot { font-weight: 600; color: var(--petrol); }
.marcar__item:hover { background: var(--warm); }

.marcar--doc { border-top-color: var(--red); max-width: none; }
.marcar--doc .marcar__rot { font-size: 1rem; }

/* A contagem do que foi marcado. Só existe com JS, e o que ela diz nunca é
   informação nova — é a soma do que a própria pessoa marcou. */
.acao__texto--contagem {
	padding-left: 18px;
	border-left: 3px solid var(--red);
	font-weight: 600;
	color: var(--ink);
}
.levar__saida {
	margin-top: 16px;
	font-size: 1rem;
	line-height: 1.6;
	color: var(--ink-soft);
}
.levar__imprimir {
	margin-top: 14px;
	display: inline-flex;
	align-items: center;
	gap: 9px;
	min-height: 44px;
	padding: 0 4px;
	background: none;
	border: 0;
	font: inherit;
	font-weight: 700;
	color: var(--petrol);
	text-decoration: underline;
	text-decoration-color: var(--red);
	text-decoration-thickness: 2px;
	text-underline-offset: 5px;
	cursor: pointer;
}
.levar__imprimir:focus-visible { outline: 3px solid var(--red); outline-offset: 3px; }

/* Impressão: a lista de documentos é a única coisa da página que a pessoa
   leva para o mundo real. Tudo o mais some. */
@media print {
	body * { visibility: hidden; }
	.levar, .levar * { visibility: visible; }
	.levar {
		position: absolute;
		inset: 0 auto auto 0;
		width: 100%;
		padding: 0;
		background: none;
	}
	.levar__imprimir, .levar__saida { display: none; }
	.marcar__item { break-inside: avoid; }
}

@media (prefers-reduced-motion: reduce) {
	.marcar__item { transition: none; }
}

/* As vias do diagrama são links: levam ao cartão que traduz o termo.
   Herdam a cor da lista para não virarem cinco links azuis no meio do
   desenho, e a sublinha só aparece no foco e no hover. */
/* Sem sublinhado permanente: cinco rótulos sublinhados sobre cinco traços
   era pontilhado demais. São links soltos numa lista — a cor própria e o
   traço que sai deles já dizem que são tocáveis; o sublinhado aparece na
   intenção. */
.corte__vias a {
	color: inherit;
	text-decoration: none;
	display: inline-block;
	padding: 6px 0;
}
.corte__vias a:hover,
.corte__vias a:focus-visible { text-decoration: underline; text-underline-offset: 4px; }
.corte__vias a:focus-visible { outline: 3px solid var(--red-light); outline-offset: 3px; }

/* O cartão de destino não pode aterrissar colado no topo nem passar
   despercebido: sem a marca, quem clicou não sabe onde caiu. */
.regra { scroll-margin-top: 96px; }
.regra:target { border-top-color: var(--red); background: #fdf2f1; }

/* ---------- .conta — o cálculo desenhado ----------
   Duas parcelas, um resultado, e as duas forças que puxam em direções
   opostas. Substituiu um parágrafo de 130 palavras: a ideia mais
   contraintuitiva da página passa a ser vista antes de ser lida.
   HTML e CSS, não SVG — os números seguem sendo texto real. */
.conta {
	margin-top: clamp(26px, 3vw, 36px);
	padding: clamp(22px, 2.4vw, 30px);
	background: var(--warm);
	border-top: 3px solid var(--red);
	border-radius: var(--r-sm);
}
.conta__t {
	font-size: 1.25rem;
	font-weight: 600;
	line-height: 1.35;
	color: var(--petrol);
	margin-bottom: 20px;
	max-width: 46ch;
}
.conta__parcelas {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 22px;
}
.conta__parcelas li {
	position: relative;
	padding: 13px 18px;
	background: var(--paper);
}
/* o "×" entre as parcelas, desenhado e não escrito */
.conta__parcelas li + li::before {
	/* o operador vem do dado: multiplicação no cálculo do benefício,
	   soma nas cotas da pensão */
	content: var(--op, "×");
	position: absolute;
	top: -19px;
	left: 18px;
	width: 26px;
	height: 26px;
	display: grid;
	place-items: center;
	background: var(--warm);
	font-size: 1.375rem;
	font-weight: 700;
	color: var(--petrol);
	line-height: 1;
}
.conta__rot {
	display: block;
	font-size: 0.875rem;
	font-weight: 700;
	color: var(--red-ink);
	margin-bottom: 4px;
}
.conta__desc { font-size: 1.0625rem; line-height: 1.6; color: var(--ink); }

.conta__igual {
	position: relative;
	margin-top: 26px;
	padding: 13px 18px;
	background: var(--petrol);
	color: var(--on-dark);
	font-size: 1.0625rem;
	font-weight: 700;
	line-height: 1.5;
}
.conta__igual::before {
	content: "=";
	position: absolute;
	top: -21px;
	left: 18px;
	width: 26px;
	height: 26px;
	display: grid;
	place-items: center;
	background: var(--warm);
	font-size: 1.375rem;
	font-weight: 700;
	color: var(--petrol);
	line-height: 1;
}

/* As duas forças. É o ponto do desenho: elas puxam em sentidos opostos. */
.forcas {
	list-style: none;
	margin: 22px 0 0;
	padding: 0;
	display: grid;
	gap: 14px;
}
@media (min-width: 720px) {
	.forcas { grid-template-columns: repeat(2, 1fr); }
}
.forca {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 13px 16px;
	background: var(--paper);
	font-size: 1rem;
	line-height: 1.62;
	color: var(--ink-soft);
}
.forca__seta {
	flex: 0 0 auto;
	width: 0;
	height: 0;
	margin-top: 6px;
	border-left: 8px solid transparent;
	border-right: 8px solid transparent;
}
.forca--sobe { border-bottom: 3px solid var(--red); }
.forca--sobe .forca__seta { border-bottom: 12px solid var(--red-ink); }
.forca--desce { border-bottom: 3px solid var(--red); }
.forca--desce .forca__seta { border-top: 12px solid #b3392f; }

.conta__fecho {
	margin-top: 20px;
	font-size: 1.0625rem;
	font-weight: 600;
	line-height: 1.6;
	color: var(--ink);
	max-width: 56ch;
}
.conta__ressalva {
	margin-top: 10px;
	font-size: 1rem;
	line-height: 1.6;
	color: var(--ink-soft);
	max-width: 62ch;
}

/* A porta de cada regra. Um cartão que abre precisa parecer que abre: por
   isso o rótulo tem sinal visível, alvo de toque cheio e sublinha — e não
   só um triângulo de 8px que este público não enxerga. */
.regra__mais { margin-top: 14px; border-top: 1px solid #e4ded6; }
.regra__mais > summary {
	display: flex;
	align-items: center;
	gap: 10px;
	min-height: 44px;
	list-style: none;
	font-size: 1rem;
	font-weight: 700;
	color: var(--petrol);
	cursor: pointer;
	text-decoration: underline;
	text-decoration-color: var(--red);
	text-decoration-thickness: 2px;
	text-underline-offset: 4px;
}
.regra__mais > summary::-webkit-details-marker { display: none; }
.regra__mais > summary::after {
	content: "";
	width: 8px;
	height: 8px;
	border-right: 2px solid var(--red);
	border-bottom: 2px solid var(--red);
	transform: rotate(45deg);
	transition: transform 0.25s var(--ease);
}
.regra__mais[open] > summary::after { transform: rotate(-135deg); }
.regra__mais[open] > summary { margin-bottom: 12px; }
.regra__mais > summary:focus-visible { outline: 3px solid var(--red); outline-offset: 3px; }

/* Chegar por link do diagrama abre a regra: quem clicou em "Pedágio" quer
   o pedágio inteiro, não o cartão fechado. */
.regra:target .regra__mais { }
.regra__mais .regra__linha:last-child { margin-bottom: 0; }

@media (prefers-reduced-motion: reduce) {
	.regra__mais > summary::after { transition: none; }
}

/* ---------- os passos como percurso ----------
   Eram quatro blocos empilhados e indistinguíveis, no meio de 3.200px sem
   nenhum objeto visual. Ganham um eixo contínuo com marcos numerados: a
   diferença entre "quatro coisas que acontecem" e "um caminho que tem
   fim" — que é o que um leitor ansioso precisa enxergar.

   O eixo é borda e pseudo-elemento, nada de imagem: escala com o zoom e
   some sozinho no celular, onde não há largura para gastar. */
@media (min-width: 760px) {
	.passos { position: relative; padding-left: 54px; }
	.passos::before {
		content: "";
		position: absolute;
		left: 11px;
		top: 34px;
		bottom: 34px;
		width: 2px;
		background: linear-gradient(var(--red) 0 70%, #e4ded6 100%);
	}
	.passo2 { position: relative; border-top: 0; padding: 26px 0 34px; }
	.passo2:last-child { border-bottom: 0; }

	/* O marco no eixo. Sólido, não anel: um anel de traço fino sobre fundo
	   da mesma cor da seção desaparece na prática, e um marco que não se vê
	   não transforma quatro blocos em um caminho. O anel branco em volta
	   é o que "fura" a linha e faz o marco pousar sobre ela. */
	.passo2::before {
		content: "";
		position: absolute;
		left: -50px;
		top: 31px;
		width: 16px;
		height: 16px;
		background: var(--petrol);
		box-shadow: 0 0 0 5px var(--warm);
		border-radius: 50%;
	}
	/* o último marco fecha o percurso: é a decisão, e ela é do cliente */
	.passo2:last-child::before { background: var(--red); }
	.passo2__cab { margin-bottom: 18px; }
}

/* No celular a grade de duas colunas colapsava e a comparação
   "no escritório × com você" — que é a razão de existir do componente —
   desaparecia justamente onde a maioria lê. Os rótulos passam a carregar
   a distinção sozinhos. */
@media (max-width: 759px) {
	.passo2__cols { grid-template-columns: 1fr; gap: 20px; }
	.passo2__col { padding-left: 16px; border-left: 3px solid #e4ded6; }
	.passo2__col--voce { border-left-color: var(--red); }
	.passo2__rot { font-size: 0.8125rem; letter-spacing: 0.1em; color: var(--red-ink); }
	.passo2__col--voce .passo2__rot { color: #b3392f; }
}

/* ===========================================================
   MOVIMENTO COM PROPÓSITO
   Três peças, e só três. Cada uma existe porque o objeto que ela
   anima é um mecanismo, e ver o mecanismo se montar ensina mais
   rápido do que ler a descrição dele. Nenhuma decora.

   Tudo em transform e opacity. Gatilho: o mesmo IntersectionObserver
   dos reveals, com as mesmas redes de segurança — nada aqui é a
   única via de acesso a informação nenhuma.
   =========================================================== */
@media (prefers-reduced-motion: no-preference) {

	/* ---------- 1. o corte se desenha ----------
	   Os caminhos crescem da esquerda até a linha do protocolo, a linha
	   desce, e só então o depois aparece. É a tese da página inteira,
	   executada em três segundos: muitos caminhos, um corte, um só depois. */
	.anima .corte__vias li::after {
		transform: scaleX(0);
		transform-origin: left center;
		transition: transform 1100ms var(--mv-entra);
	}
	.anima .corte.is-in .corte__vias li::after { transform: scaleX(1); }
	.anima .corte.is-in .corte__vias li:nth-child(1)::after { transition-delay: 120ms; }
	.anima .corte.is-in .corte__vias li:nth-child(2)::after { transition-delay: 220ms; }
	.anima .corte.is-in .corte__vias li:nth-child(3)::after { transition-delay: 320ms; }
	.anima .corte.is-in .corte__vias li:nth-child(4)::after { transition-delay: 420ms; }
	.anima .corte.is-in .corte__vias li:nth-child(5)::after { transition-delay: 520ms; }

	.anima .corte__vias li {
		opacity: 0;
		transform: translate3d(-14px, 0, 0);
		transition: opacity 700ms var(--mv-entra), transform 700ms var(--mv-entra);
	}
	.anima .corte.is-in .corte__vias li { opacity: 1; transform: none; }
	.anima .corte.is-in .corte__vias li:nth-child(1) { transition-delay: 60ms; }
	.anima .corte.is-in .corte__vias li:nth-child(2) { transition-delay: 160ms; }
	.anima .corte.is-in .corte__vias li:nth-child(3) { transition-delay: 260ms; }
	.anima .corte.is-in .corte__vias li:nth-child(4) { transition-delay: 360ms; }
	.anima .corte.is-in .corte__vias li:nth-child(5) { transition-delay: 460ms; }

	@media (min-width: 760px) {
		/* a linha do protocolo desce depois que os caminhos chegam nela */
		.anima .corte__lado::before {
			transform: scaleY(0);
			transform-origin: top center;
			transition: transform 900ms var(--mv-entra) 700ms;
		}
		.anima .corte.is-in .corte__lado::before { transform: scaleY(1); }
	}

	/* e o depois só existe depois do corte */
	.anima .corte__lado > * {
		opacity: 0;
		transform: translate3d(0, 12px, 0);
		transition: opacity 800ms var(--mv-entra), transform 800ms var(--mv-entra);
	}
	.anima .corte.is-in .corte__lado > * { opacity: 1; transform: none; }
	.anima .corte.is-in .corte__marco { transition-delay: 1150ms; }
	.anima .corte.is-in .corte__depois { transition-delay: 1300ms; }

	/* ---------- 2. as duas forças se opõem ----------
	   A ideia contraintuitiva da seção é que uma força sobe e a outra
	   desce. Elas entram vindo de sentidos contrários, e o corpo entende
	   isso antes de o texto explicar. */
	.anima .forca {
		opacity: 0;
		transition: opacity 800ms var(--mv-entra), transform 800ms var(--mv-entra);
	}
	.anima .forca--sobe { transform: translate3d(0, 18px, 0); }
	.anima .forca--desce { transform: translate3d(0, -18px, 0); }
	.anima .conta.is-in .forca { opacity: 1; transform: none; transition-delay: 420ms; }

	/* ---------- 3. o percurso se desenha ----------
	   O eixo cresce de cima para baixo e os marcos pousam nele em ordem.
	   "Quatro coisas que acontecem" vira "um caminho que tem fim". */
	@media (min-width: 760px) {
		.anima .passos::before {
			transform: scaleY(0);
			transform-origin: top center;
			transition: transform 1400ms var(--mv-entra) 200ms;
		}
		.anima .passos.is-in::before { transform: scaleY(1); }

		.anima .passo2::before {
			transform: scale(0);
			transition: transform 600ms var(--mv-entra);
		}
		.anima .passos.is-in .passo2::before { transform: scale(1); }
		.anima .passos.is-in .passo2:nth-child(1)::before { transition-delay: 320ms; }
		.anima .passos.is-in .passo2:nth-child(2)::before { transition-delay: 620ms; }
		.anima .passos.is-in .passo2:nth-child(3)::before { transition-delay: 920ms; }
		.anima .passos.is-in .passo2:nth-child(4)::before { transition-delay: 1220ms; }
	}
}

/* Sem movimento: tudo já está no lugar final. Nenhuma peça acima é a
   única via de acesso a informação nenhuma. */
@media (prefers-reduced-motion: reduce) {
	.anima .corte__vias li,
	.anima .corte__vias li::after,
	.anima .corte__lado::before,
	.anima .corte__lado > *,
	.anima .forca,
	.anima .passos::before,
	.anima .passo2::before {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}
}

/* ===========================================================
   MICROINTERAÇÕES
   O acabamento é onde o luxo mora. Nada aqui chama atenção para
   si: cada estado responde ao que a pessoa fez, no tempo em que
   ela espera resposta. Entrada e saída têm durações diferentes
   de propósito — o que chega devagar e sai rápido parece lento;
   o contrário parece atento.
   =========================================================== */
@media (hover: hover) and (pointer: fine) {

	/* Botão: sobe 1px e ganha sombra. A sombra vem de um pseudo-elemento
	   para não animar box-shadow, que é repaint. */
	.btn { position: relative; transform: translate3d(0, 0, 0); transition: transform 0.35s var(--mv-toque), background 0.25s var(--mv-toque); }
	.btn::before {
		content: "";
		position: absolute;
		inset: 0;
		border-radius: inherit;
		box-shadow: 0 10px 26px -8px rgba(239, 64, 54, 0.55);
		opacity: 0;
		transition: opacity 0.35s var(--mv-toque);
		pointer-events: none;
	}
	.btn:hover { transform: translate3d(0, -2px, 0); }
	.btn:hover::before { opacity: 1; }
	.btn:active { transform: translate3d(0, 0, 0); transition-duration: 0.08s; }

	/* Cards vizinhos: o cartão sobe e a cantoneira da marca se insinua.
	   O colchete é a identidade da ABL; usá-lo como resposta ao hover é
	   assinatura, não decoração. */
	.vizinhas a { position: relative; overflow: hidden; }
	.vizinhas a::after {
		content: "";
		position: absolute;
		top: 14px;
		right: 14px;
		width: 22px;
		height: 22px;
		border-top: 2px solid var(--red);
		border-right: 2px solid var(--red);
		opacity: 0;
		transform: translate3d(-6px, 6px, 0);
		transition: opacity 0.4s var(--mv-toque), transform 0.4s var(--mv-toque);
	}
	.vizinhas a:hover::after { opacity: 1; transform: none; }

	/* Links de texto: o filete cresce da esquerda em vez de piscar. */
	.triagem a,
	.recorte__link a,
	.frente__mais a {
		background-image: linear-gradient(var(--red), var(--red));
		background-repeat: no-repeat;
		background-position: 0 100%;
		background-size: 0% 2px;
		text-decoration: none;
		transition: background-size 0.45s var(--mv-toque);
	}
	.triagem a:hover,
	.recorte__link a:hover,
	.frente__mais a:hover { background-size: 100% 2px; }

	/* As portas: a seta gira e o rótulo avança um fio. */
	.regra__mais > summary,
	.resposta__par > summary,
	.faq__q { transition: color 0.25s var(--mv-toque); }
	.regra__mais > summary:hover::after,
	.resposta__par > summary:hover::after { border-color: var(--petrol); }

	/* Item marcável: a linha inteira responde ao passar do mouse, porque o
	   alvo é a linha inteira. */
	/* O deslocamento vem de transform, não de padding: padding recalcula
	   layout a cada quadro, e são dez itens na mesma lista. */
	.marcar__item { transition: background 0.25s var(--mv-toque); }
	.marcar__rot { transition: transform 0.25s var(--mv-toque); }
	.marcar__item:hover .marcar__rot { transform: translate3d(4px, 0, 0); }

	/* Foto: um zoom mínimo, apenas o suficiente para a imagem parecer viva.
	   1.03 é deliberado — acima disso vira efeito. */
	.cnis__foto { overflow: hidden; border-radius: var(--r-sm); }
	.cnis__foto img { transition: transform 1.2s var(--mv-toque); will-change: transform; }
	.cnis__foto:hover img { transform: scale(1.03); }
}

/* Foco visível e bonito: acessibilidade não precisa ser feia. Vale para
   teclado em qualquer dispositivo, então fica fora do @media hover. */
.btn:focus-visible,
.vizinhas a:focus-visible,
.marcar__box:focus-visible,
.regra__mais > summary:focus-visible,
.resposta__par > summary:focus-visible {
	outline: 3px solid var(--red);
	outline-offset: 4px;
	border-radius: 2px;
}

/* Seleção de texto na cor da casa. */
::selection { background: var(--petrol); color: #fff; }

@media (prefers-reduced-motion: reduce) {
	.btn, .btn::before, .vizinhas a::after, .marcar__item,
	.cnis__foto img, .nav__brand, .nav::after {
		transition: none !important;
		animation: none !important;
		transform: none !important;
	}
}

/* ===========================================================
   PROFUNDIDADE E ESTADO — desktop
   Parallax só onde há duas camadas de verdade competindo pela
   mesma faixa vertical. Em tudo mais, movimento de camada é
   custo de compositor sem retorno.
   =========================================================== */
@media (min-width: 1000px) and (prefers-reduced-motion: no-preference) {

	/* A foto do atendimento sobe mais devagar que o texto ao lado. Aqui
	   `view()` é seguro e é o uso correto dela: controla APENAS transform,
	   nunca opacidade ou máscara. Se a timeline congelar ou não houver
	   suporte, a foto fica parada — e nada se perde. */
	@supports (animation-timeline: view()) {
		.cnis__foto img {
			animation: foto-sobe linear both;
			animation-timeline: view();
			animation-range: cover 0% cover 100%;
		}
		@keyframes foto-sobe {
			from { transform: translate3d(0, 18px, 0) scale(1.06); }
			to   { transform: translate3d(0, -18px, 0) scale(1.06); }
		}
	}

	/* A capa cede o lugar: o texto sobe um pouco mais rápido que o fundo ao
	   sair de cena. Dois planos, não um bloco só.

	   SÓ TRANSFORM. A versão anterior desta regra animava também a opacidade
	   até 0,55 — e com `fill: both`, uma timeline que não resolve aplica o
	   estado final: a capa inteira ficaria semitransparente para sempre.
	   É o mesmo modo de falha que já derrubou `view()` neste projeto. Com
	   transform apenas, o pior caso é a capa 46px acima do lugar. */
	@supports (animation-timeline: view()) {
		.capa__grid {
			animation: capa-cede linear both;
			animation-timeline: view();
			animation-range: exit 0% exit 100%;
		}
		@keyframes capa-cede {
			to { transform: translate3d(0, -40px, 0); }
		}
	}
}

/* ---------- estados de hover, desktop ---------- */
@media (hover: hover) and (pointer: fine) {

	/* Cartão de regra: o filete superior engrossa e o cartão levanta um fio.
	   O gesto é o mesmo do trilho — a régua respondendo ao interesse. */
	.regra {
		position: relative;
		transform: translate3d(0, 0, 0);
		transition: transform 0.4s var(--mv-toque), background 0.3s var(--mv-toque);
	}
	.regra::after {
		content: "";
		position: absolute;
		inset: -3px 0 auto 0;
		height: 3px;
		background: var(--red);
		transform: scaleX(0);
		transform-origin: left center;
		transition: transform 0.5s var(--mv-toque);
	}
	.regra:hover { transform: translate3d(0, -3px, 0); background: #fbf8f4; }
	.regra:hover::after { transform: scaleX(1); }
	.regra--perm:hover { background: var(--warm); }

	/* Item da lista de reconhecimento: a caixa cresce um fio ao aproximar,
	   sinalizando que a linha inteira é clicável. */
	.marcar__item:hover .marcar__box { transform: scale(1.12); }
	.marcar__box { transition: transform 0.25s var(--mv-toque); }

	/* Vias do diagrama: o traço engrossa e o rótulo clareia. */
	.corte__vias a { transition: color 0.28s var(--mv-toque); }
	.corte__vias li { transition: color 0.28s var(--mv-toque); }
	.corte__vias li:hover { color: var(--ink); }
	.corte__vias li:hover::after { border-top-width: 3px; }
	.corte__vias li::after { transition: border-top-width 0.28s var(--mv-toque); }

	/* Passo do percurso: o marco cresce quando a etapa é lida. */
	.passo2 { transition: none; }
	.passo2::before { transition: transform 0.35s var(--mv-toque), background 0.35s var(--mv-toque); }
	@media (min-width: 760px) {
		.passos.is-in .passo2:hover::before { transform: scale(1.35); }
	}

	/* Foto: a moldura reage junto com a imagem. */
	.cnis__foto { transition: transform 0.5s var(--mv-toque); }
	.cnis__foto:hover { transform: translate3d(0, -3px, 0); }
}

@media (prefers-reduced-motion: reduce) {
	.cnis__foto img, .capa__grid, .regra, .regra::after,
	.marcar__box, .corte__vias li, .passo2::before, .cnis__foto {
		animation: none !important;
		transition: none !important;
		transform: none !important;
	}
	.regra::after { transform: scaleX(1) !important; }
}

/* ---------- a resposta curta, composta ----------
   O defeito da virada era mensurável: na capa o texto começa depois do
   canal (padding do trilho), e na seção branca o título voltava para a
   borda da coluna — a linha de leitura PULAVA de lugar ao cruzar o corte
   de cor, e a metade direita da tela ficava vazia.

   Agora as duas seções falam a mesma língua: título à esquerda, alinhado
   com o título da capa pelo mesmo recuo do trilho; as cinco perguntas na
   coluna direita, onde a capa tinha a triagem. O título fica sentado
   (sticky) enquanto a pessoa percorre as perguntas — a seção inteira se
   lê como uma prancha, não como um texto com sobra. */
@media (min-width: 1100px) {
	.resposta .shell {
		display: grid;
		grid-template-columns: var(--duas-colunas);
		column-gap: var(--vao-colunas);
		align-items: start;
		padding-left: calc(var(--gut) + var(--trilho));
	}
	.resposta .sec__head {
		margin-bottom: 0;
		position: sticky;
		top: 132px;   /* nav (108px) + respiro; o índice ainda não grudou aqui */
	}
	.resposta__par { max-width: none; }
}

/* ===========================================================
   A PRANCHA — composição de desktop (≥1100px)

   Uma única borda de leitura para a página inteira: a linha do
   canal. Antes cada seção tinha a sua — o título entrava no
   trilho, o corpo voltava para a borda da coluna, e blocos
   citados criavam uma terceira margem. O olho lia isso como
   desalinho, não como ritmo.

   Agora o corpo inteiro do capítulo divide a mesma esquerda, e
   o número e a régua ficam PENDURADOS na margem — no mesmo x do
   canal da capa. A metade direita deixa de ser sobra: o lead de
   cada capítulo mora nela.
   =========================================================== */
@media (min-width: 1100px) {

	/* ---------- a borda única ---------- */
	.sec[id] > .shell,
	.naoe > .shell,
	.vizinhas-sec > .shell,
	.recorte > .shell,
	.frente > .shell {
		padding-left: calc(var(--gut) + var(--trilho));
	}
	/* as nove frentes do resumo entram na mesma geometria dos capítulos */
	.frente__grid {
		grid-template-columns: var(--duas-colunas);
		column-gap: var(--vao-colunas);
	}
	.sec[id] .sec__head { padding-left: 0; }
	.sec[id] .sec__head::before { left: calc(-1 * var(--trilho)); }

	/* ---------- o cabeçalho em duas colunas ----------
	   Título à esquerda, lead à direita, pés alinhados: o gesto
	   editorial que se repete a cada capítulo e ocupa a largura
	   que antes ficava vazia. Só para heads diretos do shell — o
	   do CNIS vive dentro de uma coluna estreita e fica empilhado. */
	.sec[id] > .shell > .sec__head {
		display: grid;
		grid-template-columns: var(--duas-colunas);
		column-gap: var(--vao-colunas);
		/* start, não end: amarrado pelo pé, o lead nascia 76px abaixo num
		   título de uma linha e colado num de quatro — deriva entre capítulos.
		   Pelo topo a regra é uma só, em todos. */
		align-items: start;
		max-width: none;
	}
	.sec[id] > .shell > .sec__head .kicker { grid-column: 1 / -1; }
	.sec[id] > .shell > .sec__head .sec__title { grid-column: 1; margin: 0; }
	.sec[id] > .shell > .sec__head .sec__lead {
		grid-column: 2;
		margin: 0;
		padding-top: 10px;   /* a primeira linha do lead cai junto da caixa-alta do título */
	}
	/* capítulo de título solto usa a largura toda */
	.sec[id] > .shell > .sec__head:not(:has(.sec__lead)) .sec__title { grid-column: 1 / -1; max-width: 26ch; }

	/* ---------- o par da janela ---------- */
	.janela__par {
		display: grid;
		grid-template-columns: var(--duas-colunas);
		column-gap: var(--vao-colunas);
		align-items: start;
	}
	.janela__par .janela__prova,
	.janela__par .janela__ressalva { margin-top: 0; max-width: none; }


	/* A legenda mora dentro de .corte__lado (ver template): a coluna do
	   depois fica com marco + benefício + legenda, e a linha do protocolo
	   volta a cobrir a altura inteira — os cinco traços batem nela. */
	.corte__legenda { margin-top: clamp(20px, 2.6vw, 34px); }

	/* ---------- fecho + chamada em uma linha ---------- */
	.seucaso__fim {
		display: grid;
		grid-template-columns: var(--duas-colunas);
		column-gap: var(--vao-colunas);
		/* topos juntos, com um respiro comum depois da última régua: amarrado
		   pelo pé, a coluna do botão nascia colada no checklist e parecia um
		   item extra da lista. */
		align-items: start;
		margin-top: 44px;
	}
	.seucaso__fim .seucaso__fecho { margin-top: 0; }
	.seucaso__fim .acao { margin-top: 0; }

	/* ---------- o que não é: texto e nota lado a lado ---------- */
	.naoe > .shell {
		display: grid;
		grid-template-columns: var(--duas-colunas);
		column-gap: var(--vao-colunas);
		align-items: start;
	}
	.naoe > .shell > .sec__head { grid-column: 1 / -1; }
	.naoe__txt { margin-bottom: 0; max-width: none; }
	.naoe .nota-honesta { margin-top: 0; }

	/* ---------- interstício do servidor: voz centrada ---------- */
	.recorte__inner { margin-inline: auto; }

	/* ---------- a terminação direita é UMA ----------
	   Os críticos mediram quatro pontas direitas diferentes para blocos de
	   lista (FAQ, checklist, "Tenha isto à mão", nota da tabela). Agora as
	   réguas e os painéis fecham todos na borda do sistema; o que é texto
	   corrido dentro deles fica na medida de leitura. */
	.faq { max-width: none; }
	.faq__a { max-width: 74ch; }
	#perguntas .sec__head { max-width: none; }
	.sec[id] .marcar { max-width: none; }
	.levar { max-width: none; }
	.levar ul { grid-template-columns: 1fr 1fr; column-gap: var(--vao-colunas); }
	.levar__lead { max-width: 74ch; }
	/* painel na largura toda, texto na medida: o padding direito absorve a
	   diferença (resolve contra o bloco pai, então a conta fecha). */
	.nota-honesta {
		max-width: none;
		padding-right: max(28px, calc(100% - 82ch));
	}
	/* o cartão largo da regra permanente tinha a única linha de ~105
	   caracteres da página */
	.regra--perm .regra__linha { max-width: 65ch; }

	/* ---------- vozes centradas, no eixo do miolo ----------
	   O selo e a chamada final são as duas vozes centradas da página — mas
	   centravam no shell cru, 31px à esquerda do eixo da coluna de leitura.
	   O mesmo recuo do sistema corrige o eixo. */
	.selo > .shell,
	.cta > .shell { padding-left: calc(var(--gut) + var(--trilho)); }
	.cta__inner { text-align: center; }
	.cta__lead { margin-inline: auto; }
	.cta__actions { justify-content: center; }

	/* A vermelha fecha no pé do TEXTO, não no da caixa: embaixo só existe o
	   botão, estreito e centrado, e a cantoneira ficava a 120px dele, sem
	   nada para segurar. Emoldurando a mensagem, o botão passa a ser o que
	   sai da moldura — que é o papel dele. */

	/* o recorte do servidor volta para a borda de leitura: centrado, era o
	   único bloco de texto corrido fora de qualquer eixo */

	/* ---------- o índice fecha a grade ----------
	   Seis links em auto-fit quebravam 4+2, com meia linha morta no mapa da
	   página. 3×2 fecha sempre — inclusive nas áreas com uma seção a menos,
	   onde 5 itens fazem 3+2 e a lacuna fica no fim, não no meio. */
	.indice > .shell { padding-left: calc(var(--gut) + var(--trilho)); }
	.indice ul { grid-template-columns: repeat(3, 1fr); }
}

/* ---------- .prazo — a régua que desliza ----------
   Sessenta blocos, um por mês de prescrição. Serve a qualquer área em que
   o direito já esteja reconhecido e o que corra seja o prazo: imposto de
   renda de quem mora fora, revisão. Não é enfeite — é a única forma de
   mostrar que a janela ANDA em vez de simplesmente existir.

   HTML e CSS, nunca SVG: os dois rótulos são texto real, e o desenho
   inteiro é um gradiente sobre blocos de largura igual. */
.prazo { margin-top: clamp(34px, 4.4vw, 56px); }
.prazo__t {
	font-size: clamp(1.125rem, 1.7vw, 1.3125rem);
	font-weight: 600;
	line-height: 1.35;
	color: var(--ink);
	margin-bottom: 12px;
}
.prazo__txt,
.prazo__fecho {
	font-size: 1.0625rem;
	line-height: 1.74;
	color: var(--ink-soft);
	max-width: 68ch;
}
.prazo__fecho { margin-top: clamp(20px, 2.6vw, 30px); }

.prazo__regua {
	margin-top: clamp(24px, 3vw, 36px);
	display: grid;
	gap: 12px;
}
.prazo__meses {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(60, 1fr);
	gap: 2px;
	height: 54px;
}
.prazo__meses li {
	/* Do mês que entra (oliva cheio) ao que sai (quase apagado). O degradê
	   é calculado por índice, então a régua conta a história sozinha. */
	/* Barra sobre fundo claro: o --on-dark-soft daria 1,4:1 e a régua
	   sumiria. */
	background: rgba(27, 44, 51, 0.26);
	opacity: calc(1 - (var(--m) / 72));
	border-radius: 1px;
}
/* as duas pontas ganham peso: são elas que a legenda nomeia */
.prazo__meses li:first-child { background: var(--ink); }
.prazo__meses li:last-child { background: var(--red); opacity: 1; }

.prazo__rot {
	font-size: 0.9375rem;
	font-weight: 700;
	color: var(--ink);
}
/* --red-ink e não --red-light: aquele foi calibrado contra o petróleo
   (4,55:1) e sobre o creme desta seção cai para 2,68:1. São 15px em peso
   700 — texto normal pelo WCAG, mínimo de 4,5. */
.prazo__rot--perde { color: var(--red-ink); text-align: right; }   /* 4,55:1 sobre o petróleo */

@media (min-width: 760px) {
	.prazo__regua {
		grid-template-columns: auto 1fr auto;
		align-items: center;
		gap: clamp(16px, 2vw, 28px);
	}
	.prazo__rot { max-width: 15ch; line-height: 1.35; }
}

@media (prefers-reduced-motion: no-preference) {
	/* Os meses entram da ponta que ganha para a que perde: o movimento É a
	   informação. Falha do JS deixa a régua inteira desenhada. */
	.anima .prazo__meses li {
		transform: scaleY(0);
		transform-origin: bottom center;
		transition: transform 500ms var(--mv-entra);
		transition-delay: calc(var(--m) * 12ms);
	}
	.anima .prazo.is-in .prazo__meses li { transform: scaleY(1); }
}
@media (prefers-reduced-motion: reduce) {
	.anima .prazo__meses li { transform: none !important; transition: none !important; }
}

/* ---------- .extrato — onde a retenção aparece ----------
   Substitui a foto onde nenhuma serve. É esquema DIDÁTICO, não fac-símile:
   sem marca do INSS, sem nome, sem número de benefício e sem valores. O que
   ele ensina é uma coisa só — reconhecer a linha do código no próprio
   extrato. A legenda diz o que ele é, e isso não é opcional. */
.extrato {
	margin: 0;
	/* O stretch da coluna serve à foto, que precisa preencher; o esquema tem
	   altura própria e esticado vira um painel com um vão morto embaixo. */
	align-self: start;
	padding: clamp(22px, 2.6vw, 32px);
	background: var(--paper);
	border-radius: var(--r-sm);
}
.extrato__t {
	font-size: 1.0625rem;
	font-weight: 700;
	color: var(--petrol);
	margin-bottom: 18px;
}
.extrato__linhas {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 2px;
}
.extrato__linhas li {
	display: grid;
	grid-template-columns: 5.5rem 1fr;
	gap: 14px;
	align-items: baseline;
	padding: 13px 12px;
	background: var(--warm);
	font-size: 1rem;
	color: var(--ink-soft);
}
.extrato__cod {
	font-variant-numeric: tabular-nums;
	font-weight: 700;
	color: var(--ink-soft);
}
/* a linha que importa: é a única com cor, peso e marca */
.extrato__linha--alvo {
	background: #fdf2f1;
	box-shadow: inset 3px 0 0 var(--red);
	color: var(--ink);
	font-weight: 600;
}
.extrato__linha--alvo .extrato__cod {
	font-size: 1.25rem;
	color: #b3392f;   /* 5,3:1 sobre o rosa claro */
}
.extrato__legenda {
	margin-top: 16px;
	font-size: 0.9375rem;
	line-height: 1.6;
	color: var(--ink-soft);
}

/* ===========================================================
   LANDING PAGE
   Mesma identidade das páginas de área — trilho, tokens, ar
   desigual, componentes. O que muda é a arquitetura: uma
   pergunta na abertura, autoqualificação em seguida, e a mesma
   ação repetida nos pontos em que a pessoa decide.
   =========================================================== */
.lp__ante {
	font-size: 0.9375rem;
	font-weight: 700;
	color: var(--ink-soft);
	margin-bottom: 16px;
}
.lp__hero .capa__titulo { max-width: 20ch; }

.lp__acoes {
	margin-top: clamp(26px, 3vw, 36px);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: clamp(16px, 2vw, 28px);
}
.lp__secundario {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	font-size: 1.0625rem;
	font-weight: 700;
	color: var(--ink);
	text-decoration: underline;
	text-decoration-color: rgba(27, 44, 51, 0.35);
	text-decoration-thickness: 2px;
	text-underline-offset: 5px;
}
.lp__secundario:hover { text-decoration-color: var(--red); }
.lp__secundario:focus-visible { outline: 3px solid var(--red); outline-offset: 4px; }

/* Credenciais: fatos do escritório, nunca resultado de processo. */
.lp__selos {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 18px;
}
.lp__selos li {
	padding-left: 18px;
	border-left: 2px solid rgba(255, 255, 255, 0.18);
}
.lp__selo-t {
	display: block;
	font-size: 1.125rem;
	font-weight: 700;
	color: var(--on-dark);
	line-height: 1.3;
}
.lp__selo-d {
	display: block;
	margin-top: 2px;
	font-size: 1rem;
	line-height: 1.5;
	color: var(--on-dark-soft);
}

/* ---------- o teste ---------- */
.teste { display: grid; gap: clamp(30px, 4vw, 52px); }
@media (min-width: 1100px) {
	.teste { grid-template-columns: var(--duas-colunas); column-gap: var(--vao-colunas); align-items: start; }
}
.teste__n {
	font-size: 1.375rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	color: var(--red-ink);
	line-height: 1;
	margin-bottom: 10px;
}
.teste__t {
	font-size: clamp(1.25rem, 2vw, 1.5rem);
	font-weight: 700;
	line-height: 1.3;
	color: var(--petrol);
	margin-bottom: 12px;
}
.teste__d {
	font-size: 1.0625rem;
	line-height: 1.74;
	color: var(--ink-soft);
	margin-bottom: 22px;
}
.teste__ver a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	font-size: 1.0625rem;
	font-weight: 700;
	color: var(--petrol);
	text-decoration: underline;
	text-decoration-color: var(--red);
	text-decoration-thickness: 2px;
	text-underline-offset: 5px;
}

/* ---------- as dezesseis doenças ----------
   A lista é o ativo de conversão desta página: quem não se encontra nela vai
   embora. Por isso ela é completa, legível e varrível — não um parágrafo. */
.doencas {
	list-style: none;
	margin: 0 0 clamp(26px, 3vw, 36px);
	padding: 0;
	display: grid;
	gap: 2px;
}
@media (min-width: 760px) { .doencas { grid-template-columns: 1fr 1fr; column-gap: clamp(20px, 2.4vw, 32px); } }
.doencas li {
	padding: 14px 16px;
	background: var(--paper);
	border-left: 3px solid var(--red);
}
.doencas__nome {
	display: block;
	font-size: 1.0625rem;
	font-weight: 700;
	color: var(--petrol);
	line-height: 1.35;
}
.doencas__ex {
	display: block;
	margin-top: 2px;
	font-size: 1rem;
	line-height: 1.5;
	color: var(--ink-soft);
}

/* ---------- a súmula ---------- */
.sumula { margin: 0; max-width: 72ch; }
.sumula blockquote {
	margin: 0;
	padding-left: clamp(20px, 2.6vw, 32px);
	border-left: 3px solid var(--red);
	font-size: clamp(1.125rem, 1.9vw, 1.4375rem);
	font-weight: 600;
	line-height: 1.55;
	color: var(--ink);
}
.sumula figcaption {
	margin-top: 16px;
	padding-left: clamp(20px, 2.6vw, 32px);
	font-size: 1rem;
	font-weight: 700;
	color: var(--ink-soft);
}
.sumula__traduz {
	margin-top: clamp(24px, 3vw, 34px);
	max-width: 68ch;
	font-size: 1.0625rem;
	line-height: 1.74;
	color: var(--ink-soft);
}

/* ---------- os motivos de negativa ---------- */
.negativas {
	list-style: none;
	margin: 0 0 clamp(26px, 3vw, 36px);
	padding: 0;
	display: grid;
	gap: clamp(22px, 2.8vw, 32px);
}
@media (min-width: 900px) { .negativas { grid-template-columns: 1fr 1fr; } }
.negativas li { padding-top: 18px; border-top: 2px solid var(--petrol); }
.negativas h3 {
	font-size: 1.0625rem;
	font-weight: 700;
	color: var(--petrol);
	line-height: 1.35;
	margin-bottom: 10px;
}
.negativas p { font-size: 1rem; line-height: 1.68; color: var(--ink-soft); }

.prazo__t--grande {
	font-size: clamp(1.75rem, 3.1vw, 2.5rem);
	font-weight: 600;
	margin-bottom: 16px;
}

/* A LP herda a borda de leitura das páginas de área. */
@media (min-width: 1100px) {
	.lp .sec > .shell,
	.lp .capa > .shell,
	.lp .cta > .shell { padding-left: calc(var(--gut) + var(--trilho)); }
	.lp .capa .migalha, .lp .capa__texto { padding-left: 0; }
	.lp .sec[id] > .shell > .sec__head {
		display: grid;
		grid-template-columns: var(--duas-colunas);
		column-gap: var(--vao-colunas);
		align-items: start;
		max-width: none;
	}
	.lp .sec[id] > .shell > .sec__head .kicker { grid-column: 1 / -1; }
	.lp .sec[id] > .shell > .sec__head .sec__title { grid-column: 1; margin: 0; }
	.lp .sec[id] > .shell > .sec__head .sec__lead { grid-column: 2; margin: 0; padding-top: 10px; }
}

/* ---------- o painel de áreas no menu ----------
   Abre no hover e no foco (CSS puro: :hover e :focus-within), então mouse
   e teclado funcionam sem JavaScript. O gatilho continua sendo um link de
   verdade para o resumo. Escondido por opacity + visibility, nunca por
   display: a transição existe e o conteúdo segue no acessibility tree. */
.nav__drop { position: relative; }
.nav__drop-abre { display: inline-flex; align-items: center; gap: 7px; }
.nav__seta {
	width: 7px;
	height: 7px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg) translateY(-1px);
	transition: transform 0.3s var(--mv-toque);
}
.nav__drop:hover .nav__seta,
.nav__drop:focus-within .nav__seta { transform: rotate(-135deg) translateY(-2px); }

.nav__menu {
	/* Fixo e centrado no VIEWPORT, não no item: centrado no gatilho, em
	   1024px ele vazava 123px para fora da tela à esquerda. Como o nav é
	   fixed, o painel fixo acompanha sem conta nenhuma. */
	position: fixed;
	top: calc(var(--marco-topo) - 6px);
	left: 50%;
	width: min(880px, calc(100vw - 48px));
	transform: translate3d(-50%, 10px, 0);
	padding: 10px;
	background: var(--petrol-deep);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: var(--r-sm);
	box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.55);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.3s var(--mv-toque), transform 0.3s var(--mv-toque),
		visibility 0s linear 0.3s;
}
/* A ponte invisível sobre o vão entre o gatilho e o painel. Sem ela o
   ponteiro atravessa uma faixa morta, o hover cai e o painel foge antes
   de a pessoa chegar nele.

   Fica no GATILHO, não no painel, e por isso tem a largura dele: presa ao
   painel ela era larga como ele e cobria a base dos outros itens do menu,
   prendendo quem só queria passar para "O escritório". E a altura é
   generosa de propósito — a anterior era um número fixo de 44px calculado
   quando o vão era de 39px; a cápsula do menu cresceu, o vão virou 50px e
   sobrou uma faixa de 16px onde o hover morria. */
.nav__drop::after {
	content: "";
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	height: 62px;
	pointer-events: none;
}
.nav__drop:hover::after,
.nav__drop:focus-within::after { pointer-events: auto; }
/* .is-fechado vence o :focus-within: sem ele, o Esc fechava e o próximo
   Tab reabria o painel com o foco ainda no gatilho. */
.nav__drop.is-fechado .nav__menu {
	opacity: 0 !important;
	visibility: hidden !important;
	pointer-events: none !important;
}
.nav__drop:hover .nav__menu,
.nav__drop:focus-within .nav__menu {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: translate3d(-50%, 0, 0);
	transition-delay: 0s;
}

.nav__menu-lista {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 2px;
}
.nav__menu-lista a {
	display: block;
	padding: 12px 14px;
	border-radius: var(--r-pill);
	opacity: 1;
	transition: background 0.22s var(--mv-toque);
}
.nav__menu-lista a::after { content: none; }   /* sem o fio dos links da barra */
.nav__menu-lista a:hover,
/* ---------- o item apontado no painel ----------
   Três sinais somados, todos discretos: o fundo acende, a linha avança um
   fio e um traço em oliva aparece na borda esquerda — o mesmo dourado da
   numeração. Um sinal só, nesse fundo escuro e com oito itens juntos, não
   basta para a pessoa saber onde está. */
.nav__menu-lista a {
	position: relative;
	transition:
		background 0.28s var(--mv-toque),
		transform 0.28s var(--mv-toque);
}
.nav__menu-lista a::before {
	content: "";
	position: absolute;
	left: 0;
	top: 10px;
	bottom: 10px;
	width: 2px;
	border-radius: 2px;
	background: var(--on-dark-soft);
	transform: scaleY(0);
	transform-origin: center;
	transition: transform 0.34s var(--mv-entra);
}
.nav__menu-lista a:hover,
.nav__menu-lista a:focus-visible {
	background: rgba(255, 255, 255, 0.07);
	transform: translateX(4px);
}
.nav__menu-lista a:hover::before,
.nav__menu-lista a:focus-visible::before { transform: scaleY(1); }

/* o rodapé do painel responde do mesmo jeito */
.nav__menu-todas {
	transition: background 0.28s var(--mv-toque);
	border-radius: var(--r-pill);
}
.nav__menu-todas:hover,
.nav__menu-todas:focus-visible { background: rgba(255, 255, 255, 0.07); }
.nav__menu-nome {
	display: block;
	font-size: 1rem;
	font-weight: 600;
	color: var(--on-dark);
	line-height: 1.35;
}
.nav__menu-quem {
	display: block;
	margin-top: 1px;
	font-size: 0.875rem;
	line-height: 1.45;
	color: var(--on-dark-soft);
	font-weight: 400;
}
.nav__menu-todas {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin-top: 8px;
	min-height: 46px;
	border-top: 1px solid rgba(255, 255, 255, 0.1);
	font-size: 0.9375rem;
	font-weight: 700;
	color: var(--on-dark) !important;
	opacity: 1;
}
.nav__menu-todas::after { content: none; }

/* No celular a barra vira o menu do hambúrguer: o painel não existe lá. */
@media (max-width: 1000px) {
	.nav__menu { display: none; }
}
@media (prefers-reduced-motion: reduce) {
	.nav__menu, .nav__seta { transition: none !important; }
}

/* Sem JavaScript não há quem abra o menu do hambúrguer: o botão some e os
   links aparecem em linha, embaixo da marca. Feio de propósito não — é o
   estado de exceção funcionando. */
@media (max-width: 1000px) {
	html:not(.js) .nav { position: static; background: var(--petrol-deep); }
	html:not(.js) .nav__inner { flex-wrap: wrap; }
	html:not(.js) .nav__burger { display: none; }
	html:not(.js) .nav__links {
		display: flex;
		flex-wrap: wrap;
		gap: 10px 22px;
		width: 100%;
		padding: 6px 0 12px;
	}
	html:not(.js) .nav__cta { display: inline-flex; margin: 0 0 14px; }
}

/* ===========================================================
   LP · LINGUAGEM DE CONVERSÃO
   O que a referência aprovada faz de "moderno", traduzido para
   a marca: hero 50/50 com foto e cartão flutuante, palavra
   destacada no título, botão de WhatsApp verde com brilho,
   cartões soltos com sombra, números outline, painel escuro
   de objeções e bio com chips.
   =========================================================== */

/* ---------- hero 50/50 ---------- */
.lp__grid { display: grid; gap: clamp(32px, 4vw, 56px); }
@media (min-width: 1100px) {
	.lp__grid {
		grid-template-columns: var(--duas-colunas);
		column-gap: var(--vao-colunas);
		align-items: center;
	}
}   /* 4,54:1 */
.lp__hero .capa__lead { max-width: 52ch; }

.lp__foto { position: relative; margin: 0; }
.lp__foto img {
	width: 100%;
	height: auto;
	display: block;
	border-radius: var(--r-sm);
	filter: saturate(0.86) contrast(1.04);
	box-shadow: 0 30px 70px -30px rgba(0, 0, 0, 0.65);
}
/* o cartão flutuante sobre a foto */
.lp__badge {
	position: absolute;
	left: -18px;
	top: 26px;
	padding: 14px 18px;
	background: var(--paper);
	border-radius: var(--r-sm);
	box-shadow: 0 16px 34px -14px rgba(16, 37, 48, 0.5);
}
.lp__badge-t { display: block; font-size: 1.0625rem; font-weight: 700; color: var(--petrol); line-height: 1.2; }
.lp__badge-d { display: block; margin-top: 2px; font-size: 0.9375rem; color: var(--ink-soft); }

/* credenciais em linha, com divisores, como a referência */
.lp__cred {
	list-style: none;
	margin: clamp(26px, 3vw, 36px) 0 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 14px clamp(20px, 2.4vw, 34px);
}
.lp__cred li { padding-left: 14px; border-left: 2px solid rgba(255, 255, 255, 0.22); }
.lp__cred-t { display: block; font-size: 1rem; font-weight: 700; color: var(--on-dark); line-height: 1.3; }
.lp__cred-d { display: block; font-size: 0.9375rem; color: var(--on-dark-soft); }

/* ---------- botão de WhatsApp ----------
   Verde reconhecível, escurecido até 4,1:1 com o texto branco.
   O brilho é sombra em pseudo-elemento: nada de box-shadow animado. */
@media (prefers-reduced-motion: no-preference) {
}

/* ---------- faixa de fatos ---------- */
.lp__fatos { background: var(--warm); border-bottom: 1px solid #e4ded6; }
.lp__fatos ul {
	list-style: none;
	margin: 0;
	padding: 18px 0;
	display: flex;
	flex-wrap: wrap;
	gap: 10px clamp(24px, 3vw, 44px);
}
.lp__fatos li {
	font-size: 1rem;
	font-weight: 600;
	color: var(--ink-soft);
	display: flex;
	align-items: center;
	gap: 10px;
}
.lp__fatos li::before {
	content: "";
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--red);
}

/* ---------- cartão solto ---------- */
.lcard {
	background: var(--paper);
	border-radius: var(--r-sm);
	padding: clamp(24px, 2.8vw, 32px);
	box-shadow: 0 22px 44px -22px rgba(25, 50, 59, 0.22);
}
.lcard__t { font-size: 1.1875rem; font-weight: 700; color: var(--petrol); line-height: 1.3; margin: 10px 0 10px; }
.lcard__d { font-size: 1rem; line-height: 1.68; color: var(--ink-soft); }
.lcard__voce { margin-top: 12px; font-size: 1rem; line-height: 1.6; color: var(--ink-soft); }
.lcard__voce b { color: var(--red-ink); font-weight: 700; }

/* número outline, a assinatura visual dos passos da referência */
.lnum {
	display: block;
	font-size: 2.6rem;
	font-weight: 800;
	line-height: 1;
	color: transparent;
	-webkit-text-stroke: 2px var(--red);
	letter-spacing: 0.02em;
}
@supports not (-webkit-text-stroke: 2px black) {
	.lnum { color: var(--red-ink); }
}

.lpassos {
	list-style: none;
	margin: 0 0 clamp(28px, 3.4vw, 40px);
	padding: 0;
	display: grid;
	gap: clamp(18px, 2.2vw, 28px);
}
@media (min-width: 760px) { .lpassos { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1240px) { .lpassos { grid-template-columns: repeat(4, 1fr); } }

/* o teste e as doenças também viram cartões soltos */
.teste__bloco {
	background: var(--paper);
	border-radius: var(--r-sm);
	padding: clamp(24px, 2.8vw, 32px);
	box-shadow: 0 22px 44px -22px rgba(25, 50, 59, 0.22);
}
#teste.sec--paper { background: var(--warm); }
.doencas li {
	border-left: 0;
	border-radius: var(--r-sm);
	box-shadow: 0 16px 32px -18px rgba(25, 50, 59, 0.2);
	padding: 16px 18px;
}
#doencas.sec--warm .doencas li { background: var(--paper); }

/* ---------- objeções: texto à esquerda, painel à direita ---------- */
.lp__neggrid { display: grid; gap: clamp(28px, 3.4vw, 44px); }
@media (min-width: 1100px) {
	.lp__neggrid {
		grid-template-columns: var(--duas-colunas);
		column-gap: var(--vao-colunas);
		align-items: start;
	}
}
.lp__neggrid .sec__title--light { margin: 0 0 14px; }
.lp__negfecho { margin-top: 20px; font-size: 1rem; line-height: 1.7; color: var(--ink-soft); max-width: 52ch; }

.lpainel {
	list-style: none;
	margin: 0;
	padding: clamp(22px, 2.6vw, 30px);
	background: var(--petrol-deep);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: var(--r-sm);
	display: grid;
	gap: 20px;
}
.lpainel li { display: flex; gap: 14px; align-items: flex-start; }
.lpainel__x {
	flex: 0 0 26px;
	height: 26px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	/* a mistura de 16% de vermelho sobre o petróleo, pré-computada: mesmo
	   visual, e o contraste do × passa a ser mensurável de verdade (4,3:1) */
	background: #35262b;
	color: var(--red-light);   /* 4,55:1 sobre o petróleo */
	font-weight: 700;
	margin-top: 1px;
}
.lpainel h3 { font-size: 1.0625rem; font-weight: 700; color: var(--on-dark); line-height: 1.35; margin-bottom: 6px; }
.lpainel p { font-size: 1rem; line-height: 1.66; color: var(--on-dark-soft); }

/* ---------- quem analisa ---------- */
.lp__quem { display: grid; gap: clamp(28px, 3.4vw, 44px); }
@media (min-width: 1100px) {
	.lp__quem {
		grid-template-columns: var(--duas-colunas);
		column-gap: var(--vao-colunas);
		align-items: center;
	}
}
.lp__quemfoto { margin: 0; }
.lp__quemfoto img {
	width: 100%;
	height: auto;
	display: block;
	border-radius: var(--r-sm);
	filter: saturate(0.86) contrast(1.04);
	box-shadow: 0 24px 50px -24px rgba(25, 50, 59, 0.35);
}
.lp__quemtxt { font-size: 1.0625rem; line-height: 1.74; color: var(--ink-soft); margin-top: 14px; max-width: 56ch; }
.lp__chips {
	list-style: none;
	margin: 22px 0 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}
.lp__chips li {
	padding: 12px 18px;
	background: var(--paper);
	border-radius: var(--r-sm);
	box-shadow: 0 14px 28px -16px rgba(25, 50, 59, 0.25);
	font-size: 1rem;
	color: var(--ink-soft);
}
.lp__chips li span { display: block; font-weight: 700; color: var(--petrol); }
.lp__quemlink { margin-top: 22px; }
.lp__quemlink a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	font-weight: 700;
	color: var(--petrol);
	text-decoration: underline;
	text-decoration-color: var(--red);
	text-decoration-thickness: 2px;
	text-underline-offset: 5px;
}

/* a LP não numera capítulos: a referência não numera, e aqui o percurso é
   de decisão, não de leitura longa */
.lp .sec[id] .sec__head::before { content: none; }

/* Duas seções escuras encostadas (objeções + prazo): a respiração de
   capítulo entre elas virava um vão morto de petróleo. A costura fecha. */
.lp #prazo { padding-block-start: var(--ar-seguido); }

/* ===========================================================
   HERO E CABEÇALHO — a primeira tela
   Três coisas: o header vira cápsula flutuante, o fundo ganha
   vida (aurora lenta + grão), e a rolagem move mais do que a
   marca. Tudo em transform e opacity.
   =========================================================== */

/* ---------- o header em cápsula ----------
   Uma barra que atravessa a tela inteira compete com a marca no
   centro; uma cápsula flutuante deixa o hero respirar e resolve o
   traço do colchete cruzando o texto do menu. */
@media (min-width: 1001px) {
	.nav {
		padding: 20px 0;
		background: none !important;
		box-shadow: none !important;
	}
	.nav__inner {
		position: relative;
		gap: 20px;
	}
	/* a cápsula é um pseudo-elemento atrás dos links: assim o logo e o
	   botão ficam FORA dela, como na referência */
	.nav__links {
		position: relative;
		/* `isolation` só cria contexto de EMPILHAMENTO; ao contrário de
		   transform, filter e backdrop-filter, não vira bloco contentor. */
		isolation: isolate;
		margin-left: auto;
		margin-right: 8px;
		padding: 10px 14px;
		gap: 4px;
	}
	/* O vidro da cápsula vive num pseudo-elemento, e não na cápsula.
	   Motivo: `backdrop-filter` transforma o elemento em bloco contentor
	   para descendentes `position: fixed` — exatamente como transform faz.
	   Com ele na própria .nav__links, o painel das áreas passava a se
	   posicionar contra a cápsula (531px de largura) em vez da janela: o
	   `left: 50%` resolvia para 265px e o painel saía do eixo, chegando a
	   vazar da tela abaixo de 1120px. No pseudo-elemento o efeito é
	   idêntico e nada é aprisionado. */
	.nav__links::before {
		content: "";
		position: absolute;
		inset: 0;
		z-index: -1;
		border-radius: 999px;
		background: rgba(255, 255, 255, 0.06);
		border: 1px solid rgba(255, 255, 255, 0.1);
		backdrop-filter: blur(14px) saturate(1.2);
		-webkit-backdrop-filter: blur(14px) saturate(1.2);
		transition: background 0.4s var(--mv-toque), border-color 0.4s var(--mv-toque);
	}
	.nav.is-stuck .nav__links::before {
		background: rgba(16, 37, 48, 0.72);
		border-color: rgba(255, 255, 255, 0.14);
	}
	/* o item ativo ganha a própria cápsula, como no site do Badari */
	.nav__links a {
		padding: 8px 14px;
		border-radius: 999px;
		transition: background 0.3s var(--mv-toque), color 0.3s var(--mv-toque);
	}
	/* Sem JS o hover é o fundo simples abaixo. Com JS quem marca o item
	   sob o ponteiro é o indicador que desliza, então este fundo sai de
	   cena para os dois não se somarem. */
	.nav__links a:hover { background: rgba(255, 255, 255, 0.08); }
	/* Só os itens DIRETOS da cápsula. Escrito como `.nav__links a` isto
	   alcançava também os links dentro do painel das áreas, que são
	   descendentes — e matava o hover deles, deixando o painel sem
	   nenhum retorno visual. */
	.js .nav__links > a:hover,
	.js .nav__drop > .nav__drop-abre:hover { background: none; }
	.nav__links a[aria-current="page"],
	.js .nav__links a[aria-current="page"],
	.nav__drop:hover .nav__drop-abre,
	.js .nav__drop:hover .nav__drop-abre {
		background: var(--paper);
		color: var(--petrol);
	}

	/* ---- indicador que desliza entre os itens ----
	   Um retângulo só, absoluto, reposicionado pelo JS no hover. Anima
	   `transform` e `width`: como está fora do fluxo e não tem filhos, a
	   largura reflui apenas ele mesmo, sem tocar no layout dos irmãos, e o
	   raio de 999px fica intacto — que é justamente o que um scaleX
	   estragaria, esticando a curva das pontas. */
	.nav__pill {
		display: block;
		position: absolute;
		top: 10px;
		left: 0;
		height: calc(100% - 20px);
		width: 0;
		border-radius: 999px;
		background: rgba(255, 255, 255, 0.11);
		opacity: 0;
		pointer-events: none;
		z-index: 0;
	}
	.js .nav__pill {
		transition:
			transform 0.44s var(--mv-entra),
			width 0.44s var(--mv-entra),
			opacity 0.22s linear;
	}
	.nav__pill.is-on { opacity: 1; }

	/* O risco vermelho de 2px sob o item é do desenho antigo, quando o menu
	   era texto solto. Sob a cápsula ele atravessa a curva das pontas e
	   sobra: quem marca o hover aqui é o indicador. */
	.nav__links a::after { display: none; }
	/* o texto tem que ficar por cima do indicador */
	.nav__links > a,
	.nav__drop { position: relative; z-index: 1; }

	/* o botão ganha o verde de ação e some ao rolar, porque o balão
	   flutuante já cobre esse papel a partir dali */
	.nav__cta {
		border-radius: 999px;
		padding: 12px 24px;
		/* Sem isto o rótulo quebra em duas linhas mesmo sobrando espaço na
		   tela: a grade `1fr auto 1fr` divide o que sobra em partes iguais,
		   e a cápsula do meio cresceu quando o item "Conteúdo" entrou. Com
		   `nowrap` o conteúdo mínimo da faixa passa a ser a largura do
		   botão, e a grade cede o espaço em vez de espremê-lo. */
		white-space: nowrap;
	}

	/* a barra só materializa quando o índice não está no topo */
	.nav.is-stuck { background: rgba(16, 37, 48, 0.55) !important; backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); }
}

/* As camadas do fundo sobem em velocidades diferentes conforme a página
   rola: o JS escreve --par em cada uma. Fica em `translate` (propriedade
   independente) de propósito — assim compõe com o `transform` da animação
   da aurora em vez de sobrescrevê-lo. Sem JS, --par vale 0. */
.hero__atmos > * {
	--par: 0;
	--parx: 0;
	translate: calc(var(--parx) * 1px) calc(var(--par) * 1px);
}

/* A cápsula no EIXO da página. Com `margin-left:auto` ela ficava 39px à
   direita do centro enquanto a marca do hero, logo abaixo, está no centro
   exato: duas peças quase alinhadas é o que o olho lê como torto.

   Só a partir de 1120px. Medido: em 1001px a cápsula centrada invade o
   botão em 17px, porque o logo é estreito e o botão é largo, e o centro
   verdadeiro não fica no meio do vão entre eles. Abaixo desse ponto ela
   volta ao fluxo, encostada à direita. */
@media (min-width: 1120px) {
	/* Centralização por GRADE, não por transform.
	   O `translateX(-50%)` que estava aqui fazia da própria cápsula um
	   bloco contentor: o painel das áreas, que é `position: fixed`, passava
	   a se posicionar contra ela em vez de contra a janela. Acima de
	   1120px isso passava despercebido porque a cápsula é centrada e o
	   resultado coincidia; abaixo, o painel saía do eixo e chegava a vazar
	   da tela. Grade de três faixas centra igual e não cria contexto. */
	.nav__inner {
		display: grid;
		grid-template-columns: 1fr auto 1fr;
		align-items: center;
	}
	.nav__brand { justify-self: start; }
	.nav__links {
		position: relative;
		margin-left: 0;
		margin-right: 0;
	}
	.nav__cta { justify-self: end; }
}

/* ---------- cursor próprio dentro do hero ----------
   Um ponto que cola no ponteiro e um aro que chega com inércia (o JS move
   os dois). Só existe com ponteiro fino, tela larga e movimento permitido;
   fora disso o atributo hidden nunca é removido. */
.cursor__ponto,
/* sobre um link ou botão o aro abre e clareia: é o "pode clicar" */
/* o nativo some só enquanto o overlay está de fato ligado */


/* ---------- o fundo vivo ----------
   Aurora: três manchas de luz que derivam devagar. É o que separa um
   fundo chapado de um fundo que respira, e custa três camadas de
   compositor apenas na primeira tela. */
.hero__glow {
	position: absolute;
	inset: -20%;
	top: -30%;
	left: 50%;
	transform: translateX(-50%);
	width: 120%;
	height: 150%;
	/* Calibragem: a aurora tem que ser SENTIDA, não vista. Na primeira
	   tentativa as manchas a 20% com blur lavaram o petróleo e o fundo
	   virou verde-acinzentado — a profundidade da marca sumiu. */
	background:
		radial-gradient(ellipse 40% 32% at 30% 30%, rgba(206, 224, 231, 0.085), transparent 66%),
		radial-gradient(ellipse 36% 28% at 74% 60%, rgba(239, 64, 54, 0.09), transparent 68%),
		radial-gradient(ellipse 44% 34% at 52% 88%, rgba(16, 37, 48, 0.5), transparent 70%);
}

@media (prefers-reduced-motion: no-preference) {
	.hero__glow {
		animation: aurora 34s ease-in-out infinite alternate;
		will-change: transform;
	}
	@keyframes aurora {
		from { transform: translateX(-50%) translate3d(-2%, -1.5%, 0) scale(1); }
		to   { transform: translateX(-50%) translate3d(2.5%, 2%, 0) scale(1.08); }
	}
}

/* Um véu de luz que acompanha a rolagem: a primeira tela escurece
   conforme sai, e o conteúdo seguinte nasce de dentro dela. */

.hero__veu {
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 1;
	background: linear-gradient(180deg, transparent 55%, var(--petrol) 100%);
	opacity: 0.9;
}

/* o grão fica por cima de tudo: é o que dá textura de impressão */
.hero__grid {
	position: absolute;
	inset: 0;
	z-index: 2;
	opacity: 0.5;
	mix-blend-mode: soft-light;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
}

/* ===========================================================
   NAVEGAÇÃO NAS PÁGINAS DE FUNDO CLARO
   A barra é fixa e foi desenhada para flutuar sobre o petróleo do hero:
   marca branca, links brancos, cápsula de vidro claro. Quando as capas
   das internas viraram brancas, ela sumia — sobrava só a metade vermelha
   do colchete.

   A saída é dar fundo próprio à barra em vez de repintar tudo o que está
   dentro dela: uma navegação só, o mesmo desenho nas duas situações, e
   nada mais depende do que passa por baixo. A capa já reserva 116–148px
   de topo, então a barra sólida não cobre conteúdo nenhum.
   =========================================================== */
.abl-claro .nav {
	/* `!important` porque acima de 1120px existe um `.nav { background: none
	   !important }` — a barra vira cápsula flutuante e o fundo é removido.
	   Importante vence não-importante mesmo com especificidade menor; entre
	   dois importantes é a especificidade que decide, e esta tem a classe
	   do body a mais. */
	background: var(--petrol) !important;
}
/* No topo ela já é sólida, então o estado grudado não precisa materializar
   nada — só fecha a opacidade e assenta a sombra. O `!important` responde
   ao da regra acima de 1120px, que usa petróleo translúcido. */
.abl-claro .nav.is-stuck {
	background: var(--petrol) !important;
	box-shadow: 0 1px 0 rgba(0, 0, 0, 0.18);
}

/* ===========================================================
   BLOG — índice
   O post mais recente ocupa a largura inteira e os demais entram numa
   grade. A hierarquia é deliberada: quem chega aqui vem de uma busca com
   uma dúvida, e o destaque responde "este site fala do meu assunto"
   antes de a pessoa ler qualquer linha.
   =========================================================== */

/* ---------- filtros por assunto ---------- */
.diario__filtros {
	background: var(--warm);
	border-bottom: 1px solid #e4ded6;
	padding-block: clamp(16px, 2.2vh, 24px);
}
.diario__chips {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}
.diario__chip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	/* 44px é o alvo de toque mínimo; o público é mais velho e erra mais o dedo */
	min-height: 44px;
	padding: 0 18px;
	border: 1px solid #ddd5ca;
	border-radius: var(--r-pill);
	background: var(--paper);
	color: var(--ink);
	font-size: 0.9375rem;
	font-weight: 600;
	text-decoration: none;
	transition: background 0.26s var(--mv-toque), border-color 0.26s var(--mv-toque), color 0.26s var(--mv-toque);
}
.diario__chip:hover,
.diario__chip:focus-visible {
	border-color: var(--ink);
}
.diario__chip.is-aqui {
	background: var(--petrol);
	border-color: var(--petrol);
	color: var(--on-dark);
}
.diario__chip-n {
	font-size: 0.8125rem;
	font-weight: 700;
	color: var(--red-ink);        /* 5,09:1 no branco */
}
.diario__chip.is-aqui .diario__chip-n { color: var(--on-dark-soft); }

/* ---------- o destaque ---------- */
.destaque {
	display: grid;
	gap: clamp(26px, 4vw, 56px);
	padding-bottom: var(--ar-seguido);
	margin-bottom: var(--ar-seguido);
	border-bottom: 1px solid #e4ded6;
}
@media (min-width: 900px) {
	.destaque {
		grid-template-columns: var(--duas-colunas);
		gap: var(--vao-colunas);
		align-items: center;
	}
}
.destaque__moldura { position: relative; }
.destaque__quadro {
	margin: 0;
	overflow: hidden;
	border-radius: var(--r-sm);
	aspect-ratio: 16 / 10;
}
.destaque__quadro a { display: block; height: 100%; }
.destaque__foto {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.7s var(--mv-entra);
}
.destaque:hover .destaque__foto { transform: scale(1.03); }

/* Cantoneiras nos MESMOS dois cantos que o colchete arredonda, na
   diagonal — é a citação da marca, e o par em diagonal é o que a
   identifica, não o raio. Ficam inteiras fora da foto para não serem
   comidas pelo overflow do quadro. */
.destaque__canto {
	position: absolute;
	width: 42px;
	height: 42px;
	pointer-events: none;
}
.destaque__canto--se {
	top: -12px;
	left: -12px;
	border-top: 4px solid var(--petrol);
	border-left: 4px solid var(--petrol);
}
.destaque__canto--id {
	bottom: -12px;
	right: -12px;
	border-bottom: 4px solid var(--red);
	border-right: 4px solid var(--red);
}

.destaque__rot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 14px;
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ink-soft);
	margin-bottom: 16px;
}
.destaque__cat { color: var(--red-ink); }
.destaque__titulo {
	font-size: clamp(1.85rem, 3.4vw, 2.7rem);
	font-weight: 600;
	line-height: 1.14;
	letter-spacing: -0.02em;
	margin: 0 0 16px;
	text-wrap: balance;
}
.destaque__titulo a {
	color: inherit;
	text-decoration: none;
	background-image: linear-gradient(var(--red), var(--red));
	background-repeat: no-repeat;
	background-position: 0 100%;
	background-size: 0% 2px;
	transition: background-size 0.45s var(--mv-toque);
}
.destaque__titulo a:hover,
.destaque__titulo a:focus-visible { background-size: 100% 2px; }
.destaque__resumo {
	font-size: 1.0625rem;      /* 17px: o piso de corpo deste site */
	line-height: 1.7;
	color: var(--ink-soft);
	max-width: 54ch;
	margin: 0 0 18px;
}
.destaque__ler { margin: 22px 0 0; }

/* ---------- a grade ---------- */
.grade {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: clamp(28px, 3.4vw, 46px);
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
}
.artigo__link {
	display: grid;
	gap: 18px;
	height: 100%;
	align-content: start;
	color: inherit;
	text-decoration: none;
}
.artigo__quadro {
	margin: 0;
	overflow: hidden;
	border-radius: var(--r-sm);
	aspect-ratio: 3 / 2;
	background: var(--warm);
}
.artigo__foto {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.7s var(--mv-entra);
}
.artigo__link:hover .artigo__foto { transform: scale(1.04); }
.artigo__cat {
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: var(--red-ink);
	margin: 0 0 8px;
}
.artigo__titulo {
	font-size: 1.1875rem;
	font-weight: 600;
	line-height: 1.34;
	margin: 0 0 10px;
}
.artigo__link:hover .artigo__titulo,
.artigo__link:focus-visible .artigo__titulo { text-decoration: underline; text-underline-offset: 3px; }
.artigo__resumo {
	font-size: 1rem;
	line-height: 1.65;
	color: var(--ink-soft);
	margin: 0 0 12px;
}
.artigo__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	font-size: 0.875rem;
	color: var(--ink-soft);
	margin: 0;
}

/* ---------- paginação ---------- */
.paginacao {
	margin-top: var(--ar-seguido);
	padding-top: clamp(24px, 3vh, 36px);
	border-top: 1px solid #e4ded6;
}
.paginacao .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: center;
}
.paginacao .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	padding: 0 14px;
	border: 1px solid #ddd5ca;
	border-radius: var(--r-pill);
	color: var(--ink);
	font-weight: 600;
	text-decoration: none;
	transition: border-color 0.26s var(--mv-toque), background 0.26s var(--mv-toque);
}
.paginacao .page-numbers:hover { border-color: var(--ink); }
.paginacao .page-numbers.current {
	background: var(--petrol);
	border-color: var(--petrol);
	color: var(--on-dark);
}
.paginacao .page-numbers.dots { border: 0; min-width: 0; padding: 0 4px; }

/* ===========================================================
   HERO — redesenho editorial
   Duas vozes num título só: a primeira frase reconhece a história de quem
   chegou e é dita baixo; a segunda é a promessa e carrega o peso. A
   diferença de escala entre elas é o que faz a tela ter um assunto, em
   vez de três blocos de texto do mesmo tamanho.
   =========================================================== */

.hero__abre {
	display: block;
	font-size: clamp(1.1875rem, 1.9vw, 1.5rem);
	font-weight: 300;
	line-height: 1.35;
	letter-spacing: -0.008em;
	color: var(--on-dark-soft);        /* 7,83:1 sobre o petróleo */
	margin-bottom: clamp(14px, 1.8vh, 22px);
}
.hero__forte {
	display: block;
	/* O teto por ALTURA (9vh) existe porque numa janela baixa a medida por
	   largura sozinha empurrava o bloco inteiro para fora da dobra. */
	/* A escala é limitada pelo VERSO MAIS LONGO ("olhar o seu caso.", 17
	   caracteres) ter de caber numa linha só: a revelação é verso a verso,
	   e um verso que quebra sozinho quebra também a coreografia. */
	font-size: min(clamp(2.05rem, 3.7vw, 3.35rem), 8.2vh);
	font-weight: 700;
	line-height: 1.04;
	letter-spacing: -0.03em;
	color: var(--on-dark);
}
.hero__verso {
	display: block;
	/* A folga vertical no recorte cobre acento em cima e perna de "q" em
	   baixo durante a revelação; em repouso o recorte é generoso o
	   bastante para não existir visualmente. */
	clip-path: inset(-30% 0 -20% 0);
}

/* ---------- a fotografia ---------- */
.firma__quadro {
	border-radius: 28px;
	overflow: hidden;
	/* O recorte acompanha o raio: sem o `round`, a máscara de entrada
	   revelaria um retângulo de cantos retos sobre a foto arredondada. */
	clip-path: inset(0 round 28px);
}
.firma__moldura {
	/* Duas sombras: uma larga e muito aberta, que assenta a peça no fundo,
	   e uma curta logo abaixo, que dá o contato. Uma sombra só, nesta
	   escala, ou some ou vira mancha. */
	box-shadow:
		0 34px 70px -28px rgba(0, 0, 0, 0.55),
		0 12px 26px -14px rgba(0, 0, 0, 0.38);
	border-radius: 28px;
}
/* Fio de luz de um pixel na borda superior: é o que impede a fotografia de
   parecer um retângulo colado. Fica por cima, sem interceptar o ponteiro. */
.firma__moldura::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 28px;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16);
	pointer-events: none;
	z-index: 3;
}

/* ---------- o selo de vidro ---------- */
.firma__selo {
	position: absolute;
	left: clamp(14px, 1.8vw, 22px);
	right: clamp(14px, 1.8vw, 22px);
	bottom: clamp(12px, 1.4vw, 18px);
	z-index: 4;
	padding: clamp(12px, 1.5vw, 16px) clamp(15px, 1.8vw, 20px);
	border-radius: 18px;
	/* Escuro o bastante para o texto passar em AA sobre QUALQUER trecho da
	   fotografia. O piso é calculado contra BRANCO PURO, e não contra a
	   média da imagem: a parede de tijolo e a camisa clara do sócio da
	   direita ficam exatamente sob o selo, e a fotografia pode ser trocada
	   pelo cliente. A 0,72 o rótulo media 4,12:1 — reprovado; a 0,80 dá
	   5,48:1 no pior caso e 16,5:1 sobre um trecho escuro. */
	background: rgba(11, 26, 34, 0.8);
	border: 1px solid rgba(255, 255, 255, 0.13);
	-webkit-backdrop-filter: blur(16px) saturate(1.1);
	backdrop-filter: blur(16px) saturate(1.1);
}
.firma__selo-a,
.firma__selo-b { display: block; }
.firma__selo-a {
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--on-dark-soft);
	margin-bottom: 3px;
}
.firma__selo-b {
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.35;
	color: var(--on-dark);
}

/* ---------- a seta dos botões ---------- */
.btn__seta {
	width: 20px;
	height: 12px;
	flex: none;
	margin-left: 2px;
	transition: transform 0.42s var(--mv-entra);
}
.hero__acoes .btn:hover .btn__seta,
.hero__acoes .btn:focus-visible .btn__seta { transform: translateX(5px); }

/* ---------- paralaxe do ponteiro ----------
   O JS escreve --mx/--my (-1 a 1). A fotografia anda até 7px e o selo até
   3px: é a DIFERENÇA entre as duas amplitudes que lê como profundidade,
   não o deslocamento em si. Em `translate`, propriedade independente, para
   compor com o `transform` da entrada em vez de sobrescrevê-lo. */
.firma__moldura { --mx: 0; --my: 0; }
@media (prefers-reduced-motion: no-preference) and (hover: hover) and (pointer: fine) {
	.firma__moldura {
		translate: calc(var(--mx) * 7px) calc(var(--my) * 7px);
		transition: translate 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
	}
	.firma__selo {
		translate: calc(var(--mx) * -3px) calc(var(--my) * -3px);
		transition: translate 0.65s cubic-bezier(0.22, 0.61, 0.36, 1);
	}
}

/* ---------- hero: os dois CTAs lado a lado ----------
   Os dois como botão preenchido pediam 631px numa coluna de 508 e
   quebravam a linha — duas caixas empilhadas de larguras diferentes leem
   como acidente, não como hierarquia. O secundário vira link de texto com
   seta: cabe, é a forma mais editorial de dizer "secundário", e devolve à
   coluna da direita o espaço que a fotografia precisava. */
/* Empilhados de propósito, e não por falta de espaço mal resolvida: os
   dois lado a lado pedem 573px numa coluna de 474, e encolher o botão
   principal até caber o deixaria com corpo de 15px — pequeno demais para
   a ação mais importante da tela. Como o secundário virou link de texto,
   a coluna lê como hierarquia (peso em cima, alternativa embaixo) em vez
   de duas caixas que não couberam na linha. */
.hero__acoes {
	flex-direction: column;
	align-items: flex-start;
	gap: clamp(16px, 2vh, 24px);
}
.hero__acoes .btn--ghost {
	padding: 0;
	min-height: 44px;              /* alvo de toque preservado */
	border: 0;
	background: none;
	border-radius: 0;
	overflow: visible;
}
.hero__acoes .btn--ghost::before { content: none; }
.hero__acoes .btn--ghost .btn__t {
	background-image: linear-gradient(currentColor, currentColor);
	background-repeat: no-repeat;
	background-position: 0 100%;
	background-size: 0% 1px;
	transition: background-size 0.45s var(--mv-toque), transform 0.55s var(--mv-entra);
	padding-bottom: 3px;
}
.hero__acoes .btn--ghost:hover .btn__t,
.hero__acoes .btn--ghost:focus-visible .btn__t { background-size: 100% 1px; }
.hero__acoes .btn--ghost:hover { background: none; }

/* A fotografia ganha a coluna que o botão devolveu. */
.hero__inner:has(.hero__firma--foto) { grid-template-columns: 1fr 1.06fr; }

/* ---------- o selo, discreto ----------
   Ocupando a largura inteira da fotografia ele virava uma tarja e
   competia com a imagem. Encolhido ao próprio conteúdo e encostado no
   canto, volta a ser o que devia ser: uma legenda com profundidade. */
.firma__selo {
	right: auto;
	max-width: min(78%, 26ch);
}

/* ===========================================================
   BLOG — o texto
   É a única página do site em que a pessoa lê corrido por minutos, e o
   público tem 60 e poucos anos. Por isso o corpo é MAIOR que o do resto
   do site (18px contra 17), a entrelinha é mais larga e a medida é curta:
   66 caracteres é onde o olho ainda encontra o começo da linha seguinte
   sem procurar.
   =========================================================== */
.texto__cat {
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	margin-bottom: 14px;
}
.texto__cat a {
	color: var(--red-ink);        /* 5,09:1 no branco */
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: border-color 0.26s var(--mv-toque);
}
.texto__cat a:hover,
.texto__cat a:focus-visible { border-color: currentColor; }

.capa__titulo--texto { max-width: 24ch; }

.texto__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 18px;
	font-size: 0.9375rem;
	color: var(--ink-soft);
}

/* A fotografia de abertura fica entre a capa e o texto, encavalando as
   duas — é o que costura a chamada ao corpo em vez de empilhar dois
   blocos independentes. */
.texto__abre {
	background: linear-gradient(var(--paper) 0 62%, var(--warm) 62% 100%);
	padding-bottom: clamp(20px, 3vh, 34px);
}
.texto__quadro {
	margin: 0;
	max-width: 900px;
}
.texto__foto {
	width: 100%;
	height: auto;
	display: block;
	/* Recorte editorial em 16:9. Na proporção original (1,4:1) a imagem
	   ocupava mais de uma tela inteira e o texto começava só depois de
	   rolar — numa página cuja função é ser LIDA, a abertura não pode
	   empurrar o começo da leitura para fora da vista. */
	aspect-ratio: 16 / 9;
	object-fit: cover;
	border-radius: 28px;          /* o mesmo raio da fotografia do hero */
	box-shadow:
		0 30px 60px -30px rgba(27, 44, 51, 0.34),
		0 10px 22px -14px rgba(27, 44, 51, 0.22);
}
.texto__quadro figcaption {
	margin-top: 12px;
	font-size: 0.875rem;
	line-height: 1.55;
	color: var(--ink-soft);
}

.texto__corpo {
	max-width: 66ch;
	font-size: 1.125rem;          /* 18px: maior que o corpo do resto do site */
	line-height: 1.78;
	color: var(--ink);
}
.texto__corpo > * + * { margin-top: 1.1em; }
.texto__corpo h2 {
	font-size: clamp(1.45rem, 2.4vw, 1.85rem);
	font-weight: 600;
	line-height: 1.26;
	letter-spacing: -0.012em;
	margin-top: 2em;
	margin-bottom: 0.1em;
}
.texto__corpo h3 {
	font-size: 1.1875rem;
	font-weight: 700;
	line-height: 1.35;
	margin-top: 1.7em;
	margin-bottom: 0.1em;
}
.texto__corpo ul,
.texto__corpo ol { padding-left: 1.3em; }
.texto__corpo li + li { margin-top: 0.5em; }
.texto__corpo a {
	color: var(--ink);
	text-decoration: underline;
	text-decoration-color: var(--red);
	text-decoration-thickness: 2px;
	text-underline-offset: 4px;
	transition: text-decoration-color 0.26s var(--mv-toque);
}
.texto__corpo a:hover,
.texto__corpo a:focus-visible { text-decoration-color: var(--ink); }
.texto__corpo blockquote {
	margin-left: 0;
	padding-left: clamp(18px, 2.4vw, 28px);
	border-left: 3px solid var(--red);
	font-size: 1.1875rem;
	line-height: 1.6;
	color: var(--ink-soft);
}
.texto__corpo img { border-radius: var(--r-sm); }

/* O aviso: presente, mas visivelmente de outra ordem que o texto. */
.texto__nota {
	max-width: 66ch;
	margin-top: clamp(36px, 5vh, 58px);
	padding: clamp(18px, 2.4vw, 24px) clamp(20px, 2.6vw, 28px);
	background: var(--warm);
	border-radius: var(--r-sm);
	border-left: 3px solid var(--red);
}
.texto__nota p {
	margin: 0;
	font-size: 0.9375rem;
	line-height: 1.65;
	color: var(--ink-soft);
}

/* O formulário de busca na capa dos resultados: mesmo componente do
   "confira o advogado", em fundo claro. */
.verifica--busca {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: clamp(20px, 3vh, 30px);
	max-width: 560px;
}
.verifica--busca .verifica__campo { flex: 1 1 260px; }
/* O .btn--sm foi desenhado para flutuar sobre o petróleo: contorno branco
   a 45%, que some no claro. Aqui ele é ação primária e vai preenchido. */
.verifica--busca .btn--sm {
	background: var(--red);
	border-color: var(--red);
	color: #fff;
}
.verifica--busca .btn--sm:hover,
.verifica--busca .btn--sm:focus-visible {
	background: var(--red-ink);
	border-color: var(--red-ink);
}

/* ---------- os botões brancos ficam vermelhos no hover ----------
   No hero o botão claro já tinha uma camada que varre da esquerda para a
   direita; ela só mudava de branco para branco, o que quase não se via.
   Agora ela varre em VERMELHO, e o rótulo vira branco junto.

   A medida importa: o rótulo do hero tem 19px/700, que o WCAG conta como
   texto grande — ali o vermelho da marca (3,85:1) passa. No menu o rótulo
   tem 16px/600, texto normal, mínimo de 4,5:1: aquele mesmo vermelho
   REPROVA, e é o que já acontecia antes desta mudança. Lá vai o vermelho
   fechado. */
.hero__acoes .btn--bone::before { background: var(--red); }
.hero__acoes .btn--bone:hover,
.hero__acoes .btn--bone:focus-visible {
	background: #f2f5f6;
	border-color: var(--red);
	color: #ffffff;
}
.btn--bone:hover,
.btn--bone:focus-visible {
	background: var(--red);
	border-color: var(--red);
	color: #ffffff;
}

/* 16px/600 no menu: texto normal, e o --red daria 3,85:1. */
.nav__cta.btn--sm:hover,
.nav__cta.btn--sm:focus-visible {
	background: var(--red-ink);
	border-color: var(--red-ink);
	color: #ffffff;
}

/* ---------- a luz que segue o ponteiro ----------
   Fica ENTRE a aurora e o véu, então ilumina o fundo sem clarear o texto,
   que vive acima das duas. Só transform e opacity, e o JS a acende apenas
   quando há ponteiro de verdade sobre o hero.

   Por que ela voltou diferente: na primeira versão o halo era OLIVA, e uma
   mancha esverdeada sobre o petróleo — num site de onde o verde tinha
   acabado de sair — não lia como luz, lia como defeito de renderização.
   O problema nunca foi a luz existir. Agora ela é a mesma luz fria da
   aurora, mais fraca e com queda mais longa: em 62% em vez de 72% a borda
   deixa de ser perceptível, que é o que fazia o halo virar "faixa". */
.hero__farol {
	position: absolute;
	top: 0;
	left: 0;
	/* 34vmax: um pouco maior que os 30 antigos. Halo maior com o mesmo
	   total de luz tem gradiente mais suave por pixel — é o que tira a
	   aresta sem precisar apagar o efeito. */
	width: 34vmax;
	height: 34vmax;
	margin: -17vmax 0 0 -17vmax;
	border-radius: 50%;
	background: radial-gradient(
		circle closest-side,
		rgba(214, 231, 238, 0.11),
		rgba(214, 231, 238, 0.045) 38%,
		rgba(214, 231, 238, 0.012) 62%,
		transparent 82%
	);
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.55s linear;
}
.hero__farol.is-on { opacity: 1; }

/* ===========================================================
   CHAMADA FINAL — o fundo que conta os anos
   Fios verticais finos que avançam devagar. A escolha do motivo não é
   decorativa: o site inteiro fala de TEMPO TRABALHADO, e o CNIS é um
   registro de anos. Uma chuva de partículas genéricas diria "site
   moderno"; isto diz o assunto da página.

   Duas camadas em passos e velocidades diferentes — é a diferença entre
   elas que lê como profundidade, o mesmo princípio da fotografia do hero.

   Só `transform`: cada camada é composta pela GPU e não repinta. A
   máscara tem queda longa de propósito; foi uma borda perceptível que
   fez a luz do ponteiro parecer defeito antes.
   =========================================================== */
.cta__anos {
	position: absolute;
	inset: 0;
	z-index: 1;
	overflow: hidden;
	pointer-events: none;
	/* A máscara apaga as bordas: sem ela os fios terminam numa linha reta
	   contra o petróleo e a textura vira retângulo. */
	-webkit-mask-image: radial-gradient(ellipse 74% 68% at 50% 50%, #000 12%, transparent 78%);
	mask-image: radial-gradient(ellipse 74% 68% at 50% 50%, #000 12%, transparent 78%);
}
.cta__anos::before,
.cta__anos::after {
	content: "";
	position: absolute;
	top: -10%;
	bottom: -10%;
	/* Mais largo que o pai, porque a camada desliza: em 100% ela deixaria
	   uma faixa vazia atrás de si no fim de cada volta. */
	left: -20%;
	width: 140%;
}
/* camada de trás: passo curto, quase parada */
.cta__anos::before {
	background-image: repeating-linear-gradient(
		90deg,
		rgba(255, 255, 255, 0.05) 0 1px,
		transparent 1px 44px
	);
}
/* camada da frente: passo longo, um pouco mais rápida */
.cta__anos::after {
	background-image: repeating-linear-gradient(
		90deg,
		rgba(255, 255, 255, 0.075) 0 1px,
		transparent 1px 132px
	);
}

@media (prefers-reduced-motion: no-preference) {
	/* O deslocamento é EXATAMENTE um passo do padrão, então a volta é
	   invisível: o quadro final é idêntico ao inicial. */
	.cta__anos::before { animation: anos-passam-a 26s linear infinite; }
	.cta__anos::after { animation: anos-passam-b 17s linear infinite; }
	@keyframes anos-passam-a { to { transform: translate3d(-44px, 0, 0); } }
	@keyframes anos-passam-b { to { transform: translate3d(-132px, 0, 0); } }

	/* A luz de fundo que já existia passa a respirar, bem devagar. Junto
	   com os fios ela impede que a seção pareça uma imagem parada. */
	.cta::before { animation: cta-respira 19s ease-in-out infinite alternate; }
	@keyframes cta-respira {
		from { transform: translate3d(0, 0, 0) scale(1); opacity: 0.85; }
		to   { transform: translate3d(3%, -2%, 0) scale(1.06); opacity: 1; }
	}
}

/* ---------- o botão da chamada final acende ----------
   O halo é uma camada DESFOCADA por trás do botão, e o que anima é a
   opacidade dela. Animar `box-shadow` obrigaria o navegador a repintar a
   cada quadro; opacidade de uma camada já composta não custa nada.

   Fica atrás por `z-index: -1` dentro de um contexto isolado — sem o
   isolamento, o -1 escaparia para trás da própria seção e o halo sumiria
   sob o fundo. */
.cta__actions .btn {
	position: relative;
	isolation: isolate;
	transition: transform 0.4s var(--mv-entra), background 0.3s var(--mv-toque),
		border-color 0.3s var(--mv-toque);
}
.cta__actions .btn::after {
	content: "";
	position: absolute;
	inset: -6px;
	z-index: -1;
	border-radius: inherit;
	background: var(--red);
	filter: blur(18px);
	opacity: 0;
	transition: opacity 0.42s var(--mv-toque);
	pointer-events: none;
}
.cta__actions .btn:hover::after,
.cta__actions .btn:focus-visible::after { opacity: 0.5; }

/* O deslocamento sobe um pouco mais que o padrão: aqui o halo aparece
   junto, e 2px sozinhos ficavam tímidos ao lado dele. */
.cta__actions .btn:hover,
.cta__actions .btn:focus-visible { transform: translateY(-3px); }

@media (prefers-reduced-motion: reduce) {
	.cta__actions .btn:hover,
	.cta__actions .btn:focus-visible { transform: none; }
}

/* O e-mail corporativo no cartão do profissional. Fica abaixo do cargo e
   em corpo menor: quem chega aqui está CONFERINDO um nome, não procurando
   contato — o e-mail é confirmação, não chamada. */
.prof__email {
	margin: 6px 0 0;
	font-size: 0.875rem;
	line-height: 1.45;
	/* `overflow-wrap` e não `word-break`: aquele parte em QUALQUER letra,
	   este só quebra quando não há alternativa, e respeita o <wbr> que a
	   marcação põe antes do @. */
	overflow-wrap: break-word;
}
/* Sem sublinhado: dentro de um flex ele se estica pela linha inteira e,
   com o endereço quebrando em duas, vira duas réguas soltas. O ícone já
   diz que é e-mail; a cor no hover diz que é clicável. */
.prof__email a {
	color: var(--ink-soft);
	text-decoration: none;
	transition: color 0.24s var(--mv-toque);
}
.prof__email a:hover { color: var(--red-ink); }
.prof__email a:hover,
.prof__email a:focus-visible { color: var(--red-ink); }

/* O canal oficial, acima da lista. É a informação que de fato protege:
   contra golpe não adianta conhecer o telefone de cada funcionário,
   adianta saber que existe UM número por onde o escritório fala. */
.canal {
	max-width: 66ch;
	margin: 0 0 clamp(28px, 4vh, 44px);
	padding: clamp(16px, 2.2vw, 22px) clamp(18px, 2.4vw, 26px);
	background: var(--warm);
	border-left: 3px solid var(--red);
	border-radius: var(--r-sm);
	font-size: 1rem;
	line-height: 1.65;
	color: var(--ink-soft);
}
.canal strong { display: block; color: var(--ink); margin-bottom: 2px; }
.canal a {
	color: var(--red-ink);         /* 5,09:1 no branco e 4,60:1 no creme */
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* ---------- o selo da landing, igual ao da home ----------
   Era um cartão BRANCO sobre a fotografia; na home o mesmo elemento é
   vidro escuro. Duas soluções diferentes para o mesmo problema, no mesmo
   site, é o tipo de coisa que faz uma página parecer de outro projeto.

   A opacidade de 0,8 vem do mesmo cálculo do selo da home: o piso é
   medido contra BRANCO PURO, porque a parede de tijolo e a camisa clara
   ficam exatamente sob ele e a fotografia pode ser trocada. */
.lp__badge {
	background: rgba(11, 26, 34, 0.8);
	border: 1px solid rgba(255, 255, 255, 0.13);
	-webkit-backdrop-filter: blur(16px) saturate(1.1);
	backdrop-filter: blur(16px) saturate(1.1);
	box-shadow: none;
}
.lp__badge-t { color: var(--on-dark-soft); }
.lp__badge-d { color: var(--on-dark); }

/* ===========================================================
   CARTÃO DE PROFISSIONAL — redesenho
   Retrato circular em petróleo com as iniciais em branco, e um arco
   vermelho no alto à direita. O arco é a marca aparecendo em escala
   pequena: o colchete tem exatamente um canto claro e um vermelho, e
   aqui sobra o vermelho, no mesmo canto.

   O cartão perdeu a borda e ganhou sombra: com 118 deles na tela, 118
   contornos de 1px viram uma grade de linhas e cansam. Sombra separa
   sem desenhar.
   =========================================================== */
.prof {
	display: flex;
	align-items: flex-start;
	gap: 18px;
	padding: 20px 22px;
	background: var(--paper);
	border-radius: 18px;
	box-shadow:
		0 1px 2px rgba(27, 44, 51, 0.05),
		0 8px 22px -12px rgba(27, 44, 51, 0.14);
	transition: box-shadow 0.3s var(--mv-toque), transform 0.3s var(--mv-entra);
}
@media (prefers-reduced-motion: no-preference) {
	.prof:hover {
		transform: translateY(-2px);
		box-shadow:
			0 1px 2px rgba(27, 44, 51, 0.06),
			0 14px 30px -14px rgba(27, 44, 51, 0.22);
	}
}

/* o retrato e as iniciais dividem a mesma forma: círculo de 62px */
.prof__foto,
.prof__iniciais {
	position: relative;
	flex: none;
	width: 62px;
	height: 62px;
	margin: 0;
	border-radius: 50%;
}
.prof__foto {
	overflow: hidden;
	box-shadow: 0 4px 12px -4px rgba(27, 44, 51, 0.3);
}
.prof__iniciais {
	display: grid;
	place-items: center;
	background: var(--petrol);
	color: var(--on-dark);          /* 13,46:1 */
	font-size: 1.125rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	box-shadow: 0 4px 12px -4px rgba(27, 44, 51, 0.3);
}

/* O arco vermelho. Um anel com três lados transparentes e um só colorido,
   girado — mais barato que um SVG por cartão, e acompanha o tamanho. */
.prof__foto::after,
.prof__iniciais::after {
	content: "";
	position: absolute;
	inset: -4px;
	border-radius: 50%;
	border: 2.5px solid transparent;
	border-top-color: var(--red);
	transform: rotate(38deg);
	pointer-events: none;
}

.prof__dados { min-width: 0; }      /* deixa o e-mail longo quebrar */
.prof__nome {
	font-size: 1.0625rem;
	font-weight: 700;
	color: var(--petrol);
	line-height: 1.3;
	margin-bottom: 3px;
}

/* o envelope antes do endereço, no vermelho da marca */
.prof__email {
	display: flex;
	align-items: flex-start;
	gap: 7px;
	margin-top: 9px;
}
.prof__email::before {
	content: "";
	flex: none;
	width: 15px;
	height: 15px;
	margin-top: 3px;
	background: var(--red);
	-webkit-mask: var(--env) center / contain no-repeat;
	mask: var(--env) center / contain no-repeat;
}
:root {
	--env: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3Cpath d='m22 7-10 6L2 7'/%3E%3C/svg%3E");
}

/* ===========================================================
   WHATSAPP EM VERDE
   Pedido do escritório em 17/10/2026: todo botão que abre o WhatsApp é
   verde, e traz o símbolo. Para boa parte do público deste site o
   WhatsApp se reconhece pela cor e pelo ícone antes do rótulo.

   O verde é o MESMO matiz e a mesma saturação do verde da marca do
   WhatsApp (#25D366, 142°), só com o brilho baixado. O original dá
   1,98:1 com o texto branco e reprova; #188741 é o primeiro passo que
   passa (4,58:1), e este fica um passo abaixo (4,88:1) para sobrar folga
   contra o antialiasing, que come contraste na tela de verdade.

   Fica no fim da folha de propósito: precisa vencer, por ordem, o hover
   vermelho do botão do menu e o fundo transparente do .btn--sm.
   =========================================================== */
:root {
	--zap: #17823f;        /* 4,88:1 com o branco */
	--zap-escuro: #136a33; /* hover: 6,69:1 */
}
.btn.btn--zap {
	background: var(--zap);
	border-color: var(--zap);
	color: #fff;
}
.btn.btn--zap:hover,
.btn.btn--zap:focus-visible {
	background: var(--zap-escuro);
	border-color: var(--zap-escuro);
	color: #fff;
}
.btn__zap { flex: none; width: 22px; height: 22px; }
.btn--sm .btn__zap { width: 19px; height: 19px; }

/* No hero o fundo do botão não muda no hover: quem faz o realce é a
   camada que varre da esquerda para a direita. Ela ganha o verde fechado. */
.hero__acoes .btn.btn--zap:hover,
.hero__acoes .btn.btn--zap:focus-visible { background: var(--zap); border-color: var(--zap-escuro); }
.hero__acoes .btn--zap::before { background: var(--zap-escuro); }

/* ---------- o 0800 na primeira tela ----------
   Rótulo em --on-dark-soft (7,83:1 sobre o petróleo) e o número em branco
   (13,46:1), grande o bastante para ser lido sem óculos e com área de toque
   de 48px — o mínimo confortável para um dedo, e o público aqui é 50+. */
.hero__fone {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	column-gap: 12px;
	row-gap: 2px;
	margin: 22px 0 0;
	color: var(--on-dark-soft);
	font-size: 1rem;
}
.hero__fone-num {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	min-height: 48px;
	color: #fff;
	font-size: 1.375rem;
	font-weight: 700;
	letter-spacing: 0.01em;
	text-decoration: none;
	font-variant-numeric: tabular-nums;
}
.hero__fone-num .ico-fone { width: 22px; height: 22px; flex: none; color: var(--red-light); }
.hero__fone-num span {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 5px;
	text-decoration-color: rgba(255, 255, 255, 0.4);
}
.hero__fone-num:hover span,
.hero__fone-num:focus-visible span { text-decoration-color: #fff; }
.hero__fone-num:focus-visible { outline: 3px solid var(--red-light); outline-offset: 4px; border-radius: 6px; }

@media (max-width: 420px) {
	.hero__acoes .btn--zap { padding-inline: 22px; gap: 9px; }
}

/* ---------- contato na capa das páginas de área ----------
   Capa branca: o telefone vai em --ink (14,4:1) e o ícone em --red-ink. */
.capa__contato {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px 26px;
	margin-top: 30px;
}
.capa__fone {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	min-height: 48px;
	color: var(--ink);
	font-size: 1.0625rem;
	text-decoration: none;
}
.capa__fone strong { font-size: 1.25rem; font-weight: 700; text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; text-decoration-color: rgba(27, 44, 51, 0.35); white-space: nowrap; }
.capa__fone:hover strong, .capa__fone:focus-visible strong { text-decoration-color: currentColor; }
.capa__fone .ico-fone { color: var(--red-ink); flex: none; }

/* ---------- redes sociais e convite do YouTube ---------- */
.redes { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; margin: 22px 0 0; padding: 0; }
.rede {
	--rede-fundo: var(--petrol);
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	color: #fff;
	border: 1px solid rgba(255, 255, 255, 0.28);
	transition: background 0.25s var(--ease), border-color 0.25s var(--ease), color 0.25s var(--ease);
}
.rede .rede__ico { width: 21px; height: 21px; }
.rede:focus-visible { outline: 3px solid var(--red-light); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) {
	.rede:hover { background: #fff; border-color: #fff; color: var(--petrol); --rede-fundo: #fff; }
	.rede--youtube:hover { color: #e00; }
}

/* O convite do canal: o ícone do YouTube no vermelho próprio dele só como
   símbolo (elemento gráfico, basta 3:1); o texto fica no branco ou no
   --ink, que passam com folga. */
.yt {
	--rede-fundo: #fff;
	display: inline-flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px 14px;
	margin-top: 20px;
	padding: 12px 14px 12px 16px;
	border-radius: var(--r-sm);
	background: #fff;
	color: var(--ink);
	text-decoration: none;
	box-shadow: 0 1px 2px rgba(27, 44, 51, 0.06), 0 8px 22px -14px rgba(27, 44, 51, 0.3);
	max-width: 100%;
}
.yt .rede__ico { width: 30px; height: 30px; color: #e00; flex: none; }
.yt__t { font-size: 0.9375rem; line-height: 1.35; }
.yt__t strong { display: block; font-size: 1rem; color: var(--petrol); }
.yt__acao {
	padding: 8px 14px;
	border-radius: var(--r-pill);
	background: #c4000c;   /* vermelho do YouTube fechado: 6,26:1 com o branco */
	color: #fff;
	font-size: 0.9375rem;
	font-weight: 700;
	white-space: nowrap;
}
.yt:focus-visible { outline: 3px solid var(--red-ink); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) { .yt:hover .yt__acao { background: #9e000a; } }
.yt--escuro { background: rgba(255, 255, 255, 0.06); color: #fff; box-shadow: none; border: 1px solid rgba(255, 255, 255, 0.16); --rede-fundo: var(--petrol); }
.yt--escuro .yt__t { color: var(--on-dark-soft); }
.yt--escuro .yt__t strong { color: #fff; }
.yt--escuro .rede__ico { color: #fff; }

/* 0800 na chamada final (fundo petróleo): branco, 13,46:1. */
.cta__fone { display: inline-flex; align-items: center; gap: 9px; min-height: 48px; color: var(--on-dark-soft); font-size: 1.0625rem; text-decoration: none; }
.cta__fone strong { color: #fff; font-size: 1.25rem; white-space: nowrap; text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; text-decoration-color: rgba(255, 255, 255, 0.4); }
.cta__fone .ico-fone { color: var(--red-light); flex: none; }
.cta__fone:focus-visible { outline: 3px solid var(--red-light); outline-offset: 4px; border-radius: 6px; }
.faq__mais { margin: 34px 0 0; }

/* ===========================================================
   ONDE ESTAMOS — mapa das unidades (/filiais/)
   Cores: SP em branco com contorno petróleo; MG recua para o tom do fundo,
   só para situar Extrema. Pontos em --red-ink, com anel branco para se
   destacarem sobre o contorno; rótulos em --ink, 14,4:1 sobre o branco.
   =========================================================== */
.onde__grid { display: grid; gap: clamp(28px, 4vw, 64px); align-items: center; }
@media (min-width: 981px) { .onde__grid { grid-template-columns: 1.7fr 1fr; } }
.onde__mapa { margin: 0 -8px; }
.mapa { display: block; width: 100%; height: auto; overflow: hidden; }
.mapa__sp { fill: #fff; stroke: var(--petrol); stroke-width: 2.2; stroke-linejoin: round; }
.mapa__mg { fill: #ebe6df; stroke: #c9c1b6; stroke-width: 1.4; stroke-linejoin: round; }
.mapa__uf { font-size: 22px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; fill: var(--ink-soft); }
.mapa__ponto circle { fill: var(--red-ink); stroke: #fff; stroke-width: 3; }
.mapa__ponto text { font-size: 26px; font-weight: 700; fill: var(--ink); paint-order: stroke; stroke: #fff; stroke-width: 6px; stroke-linejoin: round; }
.mapa__ponto--matriz circle { fill: var(--petrol); }
.mapa__guia { fill: none; stroke: var(--ink-soft); stroke-width: 1.3; opacity: 0.55; }
.mapa__matriz { font-size: 17px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; fill: var(--red-ink); }
.onde__cidades { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; margin: 22px 0 0; padding: 0; }
.onde__cidades a {
	display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 16px;
	border: 1px solid #d9d2c8; border-radius: var(--r-pill); background: #fff;
	color: var(--ink); font-weight: 600; text-decoration: none;
}
.onde__cidades a span { font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--red-ink); }
.onde__cidades a:focus-visible { outline: 3px solid var(--red-ink); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { .onde__cidades a:hover { border-color: var(--petrol); } }
.onde__nota { margin-top: 22px; color: var(--ink-soft); }
.filial { scroll-margin-top: 130px; }

/* No celular o estado inteiro cabe em ~360px: nome de cidade dentro do
   mapa sairia com 9px. Lá o mapa mostra só onde ficam os pontos, maiores,
   e quem diz o nome são os botões logo abaixo — a lista legível. */
@media (max-width: 760px) {
	.mapa__ponto text, .mapa__guia, .mapa__uf { display: none; }
	.mapa__ponto circle { r: 16px; stroke-width: 5; }
	.mapa__ponto--matriz circle { r: 19px; }
}

/* ===========================================================
   CALCULADORAS
   Público 50+, muitas vezes no celular: campo de 56px de altura, letra de
   18px, opção como cartão inteiro clicável (52px) em vez de bolinha de
   20px, rótulo SEMPRE visível — placeholder some quando a pessoa começa a
   digitar e ela esquece o que o campo pedia.
   =========================================================== */
.calc__privado { margin-top: 18px; color: var(--ink-soft); font-size: 1rem; }
.calc__grid { max-width: 780px; }
html:not(.js) .calc__form { display: none; }
.calc__semjs { padding: 22px 24px; border-radius: var(--r-sm); background: var(--warm); }

.calc__campo { border: 0; margin: 0 0 30px; padding: 0; min-width: 0; }
.calc__campo > legend,
.calc__campo > label { display: block; margin-bottom: 10px; padding: 0; font-size: 1.125rem; font-weight: 700; line-height: 1.4; color: var(--ink); }
.calc__ajuda { margin: -4px 0 12px; color: var(--ink-soft); font-size: 1rem; }
.calc__input {
	width: 100%;
	min-height: 56px;
	padding: 12px 16px;
	border: 2px solid #c6cfd2;
	border-radius: 12px;
	background: #fff;
	color: var(--ink);
	font: inherit;
	font-size: 1.125rem;
}
.calc__input:focus { outline: none; border-color: var(--petrol); box-shadow: 0 0 0 4px rgba(25, 50, 59, 0.14); }
.calc__input--data { max-width: 240px; letter-spacing: 0.04em; }
.calc__input--n { width: 110px; }
.calc__par { display: flex; flex-wrap: wrap; gap: 14px 22px; }
.calc__par label { display: inline-flex; align-items: center; gap: 10px; font-size: 1.0625rem; color: var(--ink); }
.calc__moeda { display: flex; align-items: center; gap: 10px; max-width: 280px; font-weight: 700; color: var(--ink); }

.calc__opcoes { display: flex; flex-wrap: wrap; gap: 10px; }
.calc__opcoes--col { flex-direction: column; }
.calc__op {
	position: relative;
	display: flex;
	align-items: center;
	gap: 12px;
	min-height: 52px;
	padding: 12px 18px;
	border: 2px solid #d5dcde;
	border-radius: 12px;
	background: #fff;
	cursor: pointer;
	font-size: 1.0625rem;
	color: var(--ink);
	line-height: 1.4;
}
.calc__op input { flex: none; width: 22px; height: 22px; margin: 0; accent-color: var(--petrol); }
.calc__op:has(input:checked) { border-color: var(--petrol); background: #f1f5f6; }
.calc__op:has(input:focus-visible) { outline: 3px solid var(--red-ink); outline-offset: 2px; }

.calc__erro { margin: 0 0 18px; padding: 14px 16px; border-left: 4px solid var(--red-ink); background: #fdecea; color: #8f1209; font-weight: 600; border-radius: 0 10px 10px 0; }
.calc__enviar { min-width: 220px; }

.calc__res { scroll-margin-top: 130px; outline: none; }
.calc__res-t { font-size: clamp(1.375rem, 2.6vw, 1.75rem); line-height: 1.3; font-weight: 600; color: var(--ink); margin: 0 0 16px; }
.calc__res-t strong { font-weight: 800; color: var(--petrol); }
.calc__res p { color: var(--ink); }
.calc__regras { list-style: none; margin: 24px 0; padding: 0; display: grid; gap: 12px; }
.calc__regra { padding: 16px 18px; border: 1px solid #dfe4e6; border-radius: var(--r-sm); background: #fff; }
.calc__regra.is-primeira { border: 2px solid var(--petrol); box-shadow: 0 10px 26px -18px rgba(25, 50, 59, 0.55); }
.calc__regra-cab { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 6px 14px; }
.calc__regra-n { font-weight: 700; font-size: 1.0625rem; color: var(--ink); }
.calc__regra p { margin: 8px 0 0; font-size: 1rem; color: var(--ink-soft); }
.calc__art { white-space: nowrap; }
.calc__st { padding: 4px 12px; border-radius: var(--r-pill); background: #eef2f3; color: var(--petrol); font-weight: 700; font-size: 0.9375rem; }
.calc__st--ok { background: var(--zap); color: #fff; }
.calc__st--nao { background: transparent; color: var(--ink-soft); font-weight: 600; padding-inline: 0; }
.calc__lista { margin: 14px 0; padding-left: 1.2em; }
.calc__lista li { margin: 8px 0; color: var(--ink); }
.calc__destaque { padding: 14px 16px; border-left: 4px solid var(--petrol); background: var(--warm); border-radius: 0 10px 10px 0; }
.calc__urgente { color: var(--red-ink); }
.calc__nota { font-size: 0.9375rem; color: var(--ink-soft); }
.calc__acao { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; margin: 26px 0 8px; }
.calc__refazer { min-height: 48px; padding: 0; border: 0; background: none; font: inherit; font-weight: 700; color: var(--petrol); text-decoration: underline; text-underline-offset: 5px; cursor: pointer; }
.calc__aviso { margin-top: 36px; padding: 16px 18px; border-radius: var(--r-sm); background: var(--warm); font-size: 0.9375rem; color: var(--ink-soft); }
.calc__aviso p { margin: 0; }
.calc__outras { margin-top: 34px; }
.calc__outras-t { font-weight: 700; color: var(--ink); margin-bottom: 8px; }
.calc__outras ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 26px; }
.calc__outras a { display: inline-flex; min-height: 44px; align-items: center; gap: 6px; color: var(--petrol); font-weight: 700; text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; }

/* hub */
.calcs { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }
@media (min-width: 900px) { .calcs { grid-template-columns: repeat(3, 1fr); } }
.calcs__link { display: flex; flex-direction: column; height: 100%; padding: 26px 26px 24px; border-radius: var(--r-sm); background: #fff; border: 1px solid #dfe4e6; color: var(--ink); text-decoration: none; box-shadow: 0 1px 2px rgba(27, 44, 51, 0.05), 0 8px 22px -14px rgba(27, 44, 51, 0.2); }
.calcs__t { margin: 0 0 10px; font-size: 1.375rem; color: var(--petrol); }
.calcs__d { margin: 0 0 22px; color: var(--ink-soft); flex: 1; }
.calcs__ir { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; color: var(--red-ink); }
.calcs__ir svg { width: 20px; height: 12px; }
.calcs__link:focus-visible { outline: 3px solid var(--red-ink); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) { .calcs__link:hover { border-color: var(--petrol); } }
.calcs__aviso { max-width: 780px; }

/* ---------- menu com "Calculadoras" entre 1001 e 1279px ----------
   O oitavo item não cabia: "Áreas de atuação" quebrava em três linhas e
   o botão do WhatsApp saía da tela a 1100px. Nessa faixa o texto dos
   itens não quebra mais, o respiro de cada um encolhe e o botão verde
   vira só o símbolo do WhatsApp — reconhecível, com o rótulo mantido
   para leitor de tela. A partir de 1366px volta o botão com texto
   (medido: entre 1280 e 1365 ele ainda saía da tela). */
@media (min-width: 1001px) {
	.nav__links a, .nav__drop-abre { white-space: nowrap; }
}
@media (min-width: 1001px) and (max-width: 1365px) {
	.nav__inner { gap: 12px; }
	.nav__links { padding: 8px 8px; margin-right: 0; }
	.nav__links a { padding: 8px 10px; font-size: 0.9375rem; }
	.nav__cta.btn--zap { width: 50px; height: 50px; padding: 0; border-radius: 50%; font-size: 0; gap: 0; }
	.nav__cta.btn--zap .btn__zap { width: 24px; height: 24px; }
	.nav__brand { --selo: 50px; --adv: 76px; }
}

.capa__calc { margin-top: 18px; color: var(--ink-soft); }
.capa__calc a { color: var(--petrol); font-weight: 700; text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; }
.faixa-calc__lista { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 14px; }
@media (min-width: 900px) { .faixa-calc__lista { grid-template-columns: repeat(3, 1fr); } }
.faixa-calc__lista a { display: flex; flex-direction: column; gap: 6px; height: 100%; padding: 20px 22px; border-radius: var(--r-sm); background: #fff; border: 1px solid #e2dbd2; color: var(--ink-soft); text-decoration: none; }
.faixa-calc__lista strong { font-size: 1.1875rem; color: var(--petrol); }
.faixa-calc__lista a:focus-visible { outline: 3px solid var(--red-ink); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) { .faixa-calc__lista a:hover { border-color: var(--petrol); } }

/* ---------- avaliações do Google ----------
   Estrelas no amarelo fechado #8a6100 (5,54:1 sobre o branco, 5,01:1 sobre o --warm): o amarelo
   "de estrela" puro some no fundo claro e reprovaria até como grafismo. */
.avaliacoes__cab { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 12px 28px; }
.avaliacoes__nota { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0; color: var(--ink-soft); font-size: 1rem; }
.avaliacoes__nota strong { font-size: 2.25rem; line-height: 1; color: var(--ink); }
.estrelas { display: inline-flex; gap: 2px; color: #8a6100; }
.avaliacoes__lista { list-style: none; margin: 30px 0 0; padding: 0; display: grid; gap: 16px; }
@media (min-width: 900px) { .avaliacoes__lista { grid-template-columns: repeat(3, 1fr); } }
.avaliacao figure { display: flex; flex-direction: column; justify-content: space-between; height: 100%; margin: 0; padding: 22px 22px 20px; border-radius: var(--r-sm); background: var(--warm); }
.avaliacao__texto { margin: 0 0 18px; }
.avaliacao__texto p { margin: 0; color: var(--ink); display: -webkit-box; -webkit-line-clamp: 7; -webkit-box-orient: vertical; overflow: hidden; }
.avaliacao__autor { display: flex; align-items: center; gap: 12px; }
.avaliacao__ini { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 50%; background: var(--petrol); color: #fff; font-weight: 700; }
.avaliacao__nome { display: block; font-weight: 700; color: var(--ink); }
.avaliacao__nome a { color: inherit; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.avaliacao__meta { display: inline-flex; align-items: center; gap: 8px; font-size: 0.875rem; color: var(--ink-soft); }
.avaliacao__meta .estrelas svg { width: 14px; height: 14px; }
.avaliacoes__fonte { margin-top: 22px; color: var(--ink-soft); font-size: 0.9375rem; }
.avaliacoes__fonte a { color: var(--petrol); font-weight: 700; }

/* foto única do "Como trabalhamos": enquadrada no rosto do cliente */
.metodo__foto picture,
.metodo__foto img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; }

/* O logo NÃO pode ceder largura na grade da barra. Com o item
   "Calculadoras" o menu cresceu e a coluna `1fr` do logo foi espremida a
   zero: o SVG com `width: auto` tem largura mínima zero numa grade, e o
   logo sumia da barra em toda tela de desktop. Largura explícita (o selo
   é 200 x 236) e mínimo igual à palavra ADVOGADOS. */
.nav__brand { min-width: var(--adv); }
.nav__brand .marca__selo { width: calc(var(--selo) * 200 / 236); }

/* ===========================================================
   CAPA COM FOTOGRAFIA — páginas de área (começa em Planejamento)
   Refinada em 17/10/2026. Fundo branco; a foto ocupa a direita, da nav
   até a base da capa, e se DISSOLVE no branco por máscara: pela esquerda
   numa curva suave (rampa reta deixa uma "borda" visível no meio do
   degradê) e, por baixo, só nos últimos centímetros, para a capa não
   terminar numa faixa branca. A máscara é aplicada pelo CSS, não na foto:
   trocar a imagem não exige reeditar nada.
   Fotos com a pessoa à esquerda vão ESPELHADAS ('espelhar' nos dados,
   classe .capa-foto--espelho): a pessoa fica nítida à direita, olhando
   para o texto, longe da faixa em que a máscara apaga.
   =========================================================== */
.capa-foto {
	position: relative;
	overflow: hidden;
	background: #fff;
	padding: calc(var(--marco-topo) + 32px) 0 56px;
}
.capa-foto__img {
	/* Começa 12px ACIMA do fim da barra fixa, por baixo dela. Começar
	   exatamente em --marco-topo (108px) deixava uma faixa branca: a barra
	   muda de altura com a largura da tela (103,5 a 110px medidos). Começar
	   no topo resolvia a faixa mas escondia a cabeça das pessoas atrás da
	   barra. Com 12px de sobra, encosta em todas as alturas medidas. */
	position: absolute;
	top: calc(var(--marco-topo) - 12px);
	right: 0;
	bottom: 0;
	width: 55%;
	--dissolve-x: linear-gradient(to right, transparent 0, rgba(0, 0, 0, 0.04) 6%, rgba(0, 0, 0, 0.16) 13%, rgba(0, 0, 0, 0.36) 20%, rgba(0, 0, 0, 0.6) 27%, rgba(0, 0, 0, 0.82) 34%, rgba(0, 0, 0, 0.95) 41%, #000 48%);
	--dissolve-y: linear-gradient(to bottom, #000 76%, rgba(0, 0, 0, 0.7) 87%, rgba(0, 0, 0, 0.25) 95%, transparent 100%);
	-webkit-mask-image: var(--dissolve-x), var(--dissolve-y);
	-webkit-mask-composite: source-in;
	mask-image: var(--dissolve-x), var(--dissolve-y);
	mask-composite: intersect;
}
.capa-foto__img picture { display: block; width: 100%; height: 100%; }
.capa-foto--espelho .capa-foto__img picture { transform: scaleX(-1); }
.capa-foto__img img {
	display: block; width: 100%; height: 100%;
	object-fit: cover; object-position: var(--capa-foco, 55% 32%);
	/* tratamento cinematográfico, bem discreto: um pouco mais de
	   contraste e de cor, sem mexer no que a foto mostra */
	filter: contrast(1.05) saturate(1.06);
}
/* luz: um calor leve vindo do sol e uma sombra fria quase invisível na
   base — dão profundidade sem virar "filtro" */
.capa-foto__img::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background:
		radial-gradient(120% 90% at 18% 22%, rgba(255, 190, 130, 0.12), transparent 60%),
		linear-gradient(to top, rgba(25, 52, 61, 0.12), transparent 38%);
}

.capa-foto__grid { position: relative; display: grid; gap: 40px; }
.capa-foto__texto { max-width: 640px; }
.capa-foto__titulo {
	margin: 28px 0 22px;
	font-size: clamp(2.5rem, 4.45vw, 4.5rem);   /* 64 px a 1440, 72 nas telas largas */
	line-height: 1.08;
	font-weight: 700;
	letter-spacing: -0.03em;
	color: #19343d;
}
.capa-foto__linha-t { display: block; }
.capa-foto__titulo .ponto { color: var(--red); }
.capa-foto__sub {
	max-width: 31ch;
	margin: 0 0 38px;
	font-size: clamp(1.1875rem, 1.45vw, 1.3125rem);   /* 19 a 21 px */
	line-height: 1.5;
	font-weight: 400;
	color: var(--ink-soft);
	text-wrap: pretty;
}
.capa-foto__sub .leve { display: inline; }
/* "pelo resto da vida" fecha a frase em semibold, sem mudar de tamanho */
.capa-foto__sub strong, .capa-foto__sub b { font-weight: 600; color: #19343d; }

.capa-foto__acoes .btn .btn__seta { width: 20px; height: 12px; }
.capa-foto__linha { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; margin-top: 22px; }
.capa-foto__fone { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; color: var(--ink); font-size: 1.25rem; font-weight: 700; text-decoration: none; white-space: nowrap; }
.capa-foto__fone .ico-fone { color: var(--ink); }
.capa-foto__calc { display: inline-flex; align-items: center; gap: 14px; min-height: 48px; padding-left: 26px; border-left: 1px solid #d9dfe1; color: var(--ink-soft); text-decoration: none; line-height: 1.35; }
.capa-foto__calc .ico { width: 30px; height: 30px; color: var(--ink); flex: none; }
.capa-foto__calc-p { display: block; font-size: 0.9375rem; }
.capa-foto__calc-l { display: block; color: var(--ink); font-weight: 700; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.capa-foto__fone:focus-visible, .capa-foto__calc:focus-visible { outline: 3px solid var(--red-ink); outline-offset: 3px; border-radius: 6px; }

/* cartões de "não é o seu caso" (áreas fora do layout "serviço") */
.capa-foto__saidas ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.capa-foto__saidas a {
	position: relative;
	display: grid;
	grid-template-columns: auto 1fr;
	column-gap: 16px;
	align-items: start;
	height: 100%;
	padding: 22px 22px 20px;
	border-radius: 16px;
	background: rgba(255, 255, 255, 0.94);
	box-shadow: 0 1px 2px rgba(27, 44, 51, 0.06), 0 14px 34px -18px rgba(27, 44, 51, 0.32);
	color: var(--ink-soft);
	text-decoration: none;
}
.capa-foto__ico { grid-row: span 3; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: #fdecea; color: var(--red-ink); }
.capa-foto__ico .ico { width: 24px; height: 24px; }
.capa-foto__saidas strong { font-size: 1.125rem; line-height: 1.3; color: var(--petrol); }
.capa-foto__quando { font-size: 0.9375rem; line-height: 1.45; margin-top: 4px; }
.capa-foto__saidas .btn__seta { width: 22px; height: 13px; margin-top: 12px; color: var(--red-ink); }
.capa-foto__saidas a:focus-visible { outline: 3px solid var(--red-ink); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) {
	.capa-foto__saidas a { transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease); }
	.capa-foto__saidas a:hover { transform: translateY(-3px); box-shadow: 0 1px 2px rgba(27, 44, 51, 0.06), 0 20px 40px -18px rgba(27, 44, 51, 0.4); }
}

@media (min-width: 1000px) {
	/* 660 a 720 px, acompanhando a altura da tela */
	.capa-foto { display: flex; align-items: center; min-height: clamp(660px, 100svh, 720px); }
	.capa-foto > .shell { width: 100%; }
	.capa-foto__grid { grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); align-items: center; column-gap: 40px; }
	/* cada linha do título numa linha só: são duas, e ficam duas */
	.capa-foto__linha-t { white-space: nowrap; }
	.capa-foto__saidas { align-self: end; margin-right: calc(-1 * max(0px, (100vw - var(--shell)) / 2 + var(--gut) - 56px)); padding-top: 330px; }
	.capa-foto__saidas ul { grid-template-columns: repeat(3, 1fr); }
	.capa-foto__saidas a { display: flex; flex-direction: column; align-items: flex-start; }
	.capa-foto__saidas .btn__seta { margin-top: auto; padding-top: 14px; box-sizing: content-box; }
	.capa-foto__ico { grid-row: auto; margin-bottom: 20px; }
	.capa-foto__linha { flex-wrap: nowrap; }
	.capa-foto__calc { white-space: nowrap; }
}
@media (min-width: 1000px) and (max-width: 1199px) {
	.capa-foto__img { width: 52%; }
	.capa-foto__linha { flex-wrap: wrap; }
	.capa-foto__calc { padding-left: 0; border-left: 0; }
}

/* Celular e tablet: a foto vai para o topo, na largura toda, e só se
   dissolve por baixo, para o título nascer de dentro dela. */
@media (max-width: 999px) {
	.capa-foto { padding-top: calc(var(--marco-topo) - 12px); padding-bottom: 48px; }
	.capa-foto__img {
		position: relative;
		top: auto;
		bottom: auto;
		width: 100%;
		height: calc(clamp(240px, 62vw, 440px) + 12px);
		-webkit-mask-image: linear-gradient(to bottom, #000 58%, rgba(0, 0, 0, 0.55) 78%, transparent 100%);
		mask-image: linear-gradient(to bottom, #000 58%, rgba(0, 0, 0, 0.55) 78%, transparent 100%);
	}
	.capa-foto__grid { margin-top: -40px; }
	.capa-foto__titulo { margin-top: 18px; }
	.capa-foto__calc { padding-left: 0; border-left: 0; }
}

/* ENTRADA. Só nesta capa, só CSS (não depende de script: se a animação
   não rodar, o conteúdo já está lá), curta, e desligada para quem pede
   menos movimento. A foto não tem atraso: ela é o maior elemento da
   primeira tela: ela não some nem desbota (atrasaria o carregamento medido,
   o LCP); só assenta, com um zoom lento de 6%. */
@media (prefers-reduced-motion: no-preference) {
	.capa-foto__img img { animation: capa-foto-zoom 2.4s cubic-bezier(0.22, 0.61, 0.36, 1) both; }
	.capa-foto__texto .migalha,
	.capa-foto__linha-t,
	.capa-foto__sub,
	.capa-foto__acoes > .btn,
	.capa-foto__linha { animation: capa-foto-sobe 0.85s cubic-bezier(0.22, 0.61, 0.36, 1) both; }
	.capa-foto__texto .migalha { animation-delay: 0.05s; }
	.capa-foto__linha-t:nth-child(1) { animation-delay: 0.12s; }
	.capa-foto__linha-t:nth-child(2) { animation-delay: 0.22s; }
	.capa-foto__sub { animation-delay: 0.36s; }
	.capa-foto__acoes > .btn { animation-delay: 0.48s; }
	.capa-foto__linha { animation-delay: 0.58s; }
	/* o ponto vermelho chega por último, como quem fecha a frase */
	.capa-foto__titulo .ponto { display: inline-block; animation: capa-foto-ponto 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.75s both; }
}
@keyframes capa-foto-sobe { from { opacity: 0; transform: translateY(18px); } }
@keyframes capa-foto-zoom { from { transform: scale(1.06); } }
@keyframes capa-foto-ponto { from { opacity: 0; transform: scale(0.2); } }

/* ===========================================================
   LAYOUT "SERVIÇO" das páginas de área (Planejamento, 17/10/2026)
   Painéis em bege claro (--warm) sobre branco, cartões brancos dentro,
   um cartão escuro onde está o ponto de chegada — o mesmo contraste se
   repete nas seções para a página ler como um sistema só.
   =========================================================== */
.sv { padding: clamp(36px, 5vw, 64px) 0; background: #fff; }
.sv--porque { padding-top: clamp(24px, 3vw, 40px); }
.sv__painel { padding: clamp(26px, 3.4vw, 44px); border-radius: 18px; background: var(--warm); }
.sv__kicker { margin: 0 0 14px; font-size: 0.875rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--red-ink); }
.sv__titulo { margin: 0 0 26px; font-size: clamp(1.625rem, 2.6vw, 2.125rem); line-height: 1.2; font-weight: 700; letter-spacing: -0.015em; color: var(--ink); }
.sv__titulo--grande { font-size: clamp(1.875rem, 3.2vw, 2.625rem); }
.sv__lead { margin: -10px 0 28px; max-width: 62ch; color: var(--ink-soft); font-size: 1.0625rem; }
.sv__nota { margin: 22px 0 0; max-width: 72ch; color: var(--ink-soft); font-size: 1rem; }
.sv .ico { width: 30px; height: 30px; }

/* antes x depois */
.sv__contraste { display: grid; gap: 16px; }
@media (min-width: 760px) { .sv__contraste { grid-template-columns: 1fr 1fr; } }
.sv__lado { padding: 26px 26px 28px; border-radius: 14px; background: #fff; color: var(--ink-soft); }
.sv__lado .ico { color: var(--ink-soft); }
.sv__lado h3 { margin: 18px 0 10px; font-size: clamp(1.375rem, 2vw, 1.625rem); font-weight: 600; color: var(--ink); }
.sv__lado p { margin: 0; font-size: 1.0625rem; }
.sv__lado--escuro { background: var(--petrol); color: var(--on-dark-soft); }
.sv__lado--escuro .ico, .sv__lado--escuro h3 { color: #fff; }

/* regras: cartão que abre */
.sv__regras { display: grid; gap: 18px; align-items: start; }
@media (min-width: 760px) { .sv__regras { grid-template-columns: 1fr 1fr; } }
.regra-card { border: 1px solid #e3e6e7; border-radius: 16px; background: #fcfcfc; transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease); }
.regra-card[open] { grid-column: 1 / -1; background: #fff; border-color: var(--petrol); box-shadow: 0 16px 36px -24px rgba(27, 44, 51, 0.45); }
.regra-card summary { display: flex; flex-direction: column; gap: 10px; padding: 26px 26px 24px; cursor: pointer; list-style: none; }
.regra-card summary::-webkit-details-marker { display: none; }
.regra-card summary .ico { color: var(--ink-soft); margin-bottom: 6px; }
.regra-card__nome { font-size: clamp(1.375rem, 2vw, 1.625rem); font-weight: 600; color: var(--ink); line-height: 1.25; }
.regra-card__resumo { color: var(--ink-soft); font-size: 1.0625rem; }
.regra-card__abre { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; font-weight: 600; color: var(--ink); }
.regra-card__seta { width: 12px; height: 12px; border-top: 2.5px solid var(--red-ink); border-right: 2.5px solid var(--red-ink); transform: rotate(0deg); transition: transform 0.3s var(--ease); }
.regra-card__seta::after { content: ""; display: block; width: 16px; height: 2.5px; background: var(--red-ink); transform: translate(-5px, 4px) rotate(-45deg); transform-origin: right center; }
.regra-card[open] .regra-card__seta { transform: rotate(135deg); }
.regra-card[open] .regra-card__abre-t { font-size: 0; }
.regra-card[open] .regra-card__abre-t::before { content: "Fechar"; font-size: 1rem; }
.regra-card summary:focus-visible { outline: 3px solid var(--red-ink); outline-offset: 3px; border-radius: 16px; }
.regra-card__corpo { margin: 0; padding: 4px 26px 28px; display: grid; gap: 6px 28px; border-top: 1px solid #e9eced; padding-top: 22px; }
@media (min-width: 760px) { .regra-card__corpo { grid-template-columns: 170px 1fr; } }
.regra-card__corpo dt { font-weight: 700; color: var(--red-ink); font-size: 0.9375rem; letter-spacing: 0.02em; }
.regra-card__corpo dd { margin: 0 0 14px; color: var(--ink); font-size: 1.0625rem; max-width: 70ch; }
@media (hover: hover) and (pointer: fine) { .regra-card:not([open]):hover { border-color: #c9d1d4; } }

/* a fórmula */
.formula { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; align-items: stretch; }
@media (min-width: 900px) { .formula { grid-template-columns: 1fr auto 1fr auto 1fr; } }
.formula__item { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 24px 22px; border-radius: 14px; background: #fff; text-align: center; color: var(--ink-soft); }
.formula__item .ico { color: var(--ink); }
.formula__item strong { font-size: 1.25rem; color: var(--ink); }
.formula__item span { font-size: 0.9375rem; line-height: 1.45; }
.formula__item--fim { background: var(--petrol); color: var(--on-dark-soft); }
.formula__item--fim .ico, .formula__item--fim strong { color: #fff; }
.formula__op { display: grid; place-items: center; font-size: 2rem; font-weight: 300; color: var(--red-ink); line-height: 1; }

/* editorial do CNIS */
.sv__editorial { display: grid; gap: clamp(28px, 4vw, 64px); align-items: center; }
@media (min-width: 1000px) { .sv__editorial { grid-template-columns: 1fr 0.9fr; } }
.sv__lista { list-style: none; margin: 8px 0 0; padding: 0; }
.sv__lista li { display: grid; gap: 4px; padding: 16px 0; border-top: 1px solid #e6e2dc; position: relative; }
.sv__lista li::before { content: ""; position: absolute; top: -1px; left: 0; width: 48px; height: 2px; background: var(--red); }
.sv__lista strong { font-size: 1.125rem; color: var(--ink); }
.sv__lista span { color: var(--ink-soft); }
.sv__ed-foto { margin: 0; border-radius: 18px; overflow: hidden; aspect-ratio: 4 / 5; }
.sv__ed-foto picture, .sv__ed-foto img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* como funciona — três etapas ligadas por setas (17/10/2026)
   Fundo branco quente, contêiner de 1300px, cartões iguais. A entrada é
   de uma vez só (app.js 4b): cabeçalho, depois cada cartão a 150 ms do
   anterior, e por fim as setas se desenhando da esquerda para a direita.
   A entrada usa a propriedade `translate` e o hover usa `transform`: são
   independentes, então um não desfaz o outro. */
.como {
	--como-red: #d52520;        /* 4,85:1 sobre o fundo, 4,81:1 sobre o rosado do hover */
	--como-ink: #19343d;
	--como-borda: #e9e4dd;
	--como-ease: cubic-bezier(0.22, 1, 0.36, 1);
	background: #faf9f7;
	padding: clamp(64px, 8vw, 116px) 0;
}
.como__in { max-width: calc(1300px + 2 * var(--gut)); margin-inline: auto; padding-inline: var(--gut); }
.como__cab { display: grid; gap: 18px; margin-bottom: clamp(36px, 4.4vw, 60px); }
.como__titulo {
	margin: 0;
	font-size: clamp(1.875rem, 3.6vw, 3.125rem);   /* 30 px no celular, 50 px no desktop */
	line-height: 1.12;
	font-weight: 600;
	letter-spacing: -0.022em;
	color: var(--como-ink);
	text-wrap: balance;
}
.como__lead { margin: 0; max-width: 40ch; color: var(--ink-soft); font-size: 1.125rem; line-height: 1.6; }
@media (min-width: 900px) {
	.como__cab { grid-template-columns: minmax(0, 1fr) minmax(0, 400px); align-items: end; column-gap: 64px; }
	.como__lead { justify-self: end; padding-bottom: 6px; }
}

.como__etapas { list-style: none; margin: 0; padding: 0; display: grid; gap: 44px; }
.como__card {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: clamp(26px, 2.6vw, 38px);
	border: 1px solid var(--como-borda);
	border-radius: 16px;
	background: #fff;
	box-shadow: 0 1px 2px rgba(25, 52, 61, 0.04), 0 14px 34px -28px rgba(25, 52, 61, 0.22);
}
.como__topo { display: flex; align-items: center; justify-content: space-between; margin-bottom: clamp(22px, 2.4vw, 32px); }
.como__ico { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: #f6f0e8; color: var(--como-red); }
.como__ico .ico { width: 26px; height: 26px; }
.como__n { font-size: 1.625rem; font-weight: 600; line-height: 1; letter-spacing: -0.01em; color: var(--como-red); font-variant-numeric: tabular-nums; }
.como__nome { margin: 0 0 10px; font-size: clamp(1.375rem, 1.8vw, 1.5rem); line-height: 1.25; font-weight: 600; color: var(--como-ink); }
.como__texto { margin: 0; color: var(--ink-soft); font-size: 1.0625rem; line-height: 1.6; }

/* conectores: linha fina cinza e uma ponta vermelha pequena */
.como__seta { position: absolute; display: flex; align-items: center; pointer-events: none; }
.como__linha { display: block; background: #d3d8da; transform-origin: left center; }
.como__ponta { flex: none; color: var(--como-red); }
/* celular e tablet: cartões empilhados, conector vertical na linha do ícone */
@media (max-width: 999px) {
	.como__seta { top: 100%; left: calc(clamp(26px, 2.6vw, 38px) + 28px - 6px); height: 44px; width: 12px; flex-direction: column; justify-content: center; }
	.como__linha { width: 1.5px; height: 24px; transform-origin: center top; }
	.como__ponta { transform: rotate(90deg); margin-top: -2px; }
}
@media (min-width: 1000px) {
	.como__etapas { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 64px; }
	.como__seta { left: 100%; top: calc(clamp(26px, 2.6vw, 38px) + 28px - 6px); width: 64px; height: 12px; padding-inline: 10px; }
	.como__linha { flex: 1; height: 1.5px; }
	.como__ponta { margin-left: -3px; }
}

@media (hover: hover) and (pointer: fine) {
	.como__card { transition: transform 0.3s var(--como-ease), box-shadow 0.3s var(--como-ease), border-color 0.3s var(--como-ease), background-color 0.3s var(--como-ease); }
	.como__ico { transition: transform 0.3s var(--como-ease); }
	.como__card:hover {
		transform: translateY(-5px);
		border-color: rgba(213, 37, 32, 0.32);
		background-color: #fffbfa;
		box-shadow: 0 1px 2px rgba(25, 52, 61, 0.04), 0 26px 48px -30px rgba(25, 52, 61, 0.32);
	}
	.como__card:hover .como__ico { transform: scale(1.05); }
}

/* entrada (só com o script ligado e sem pedido de menos movimento) */
@media (prefers-reduced-motion: no-preference) {
	.entra .como .como__cab > *,
	.entra .como .como__card { opacity: 0; translate: 0 20px; }
	.entra .como .como__linha { transform: scaleX(0); }
	.entra .como .como__ponta { opacity: 0; translate: -4px 0; }
	.entra .como.is-vis .como__cab > *,
	.entra .como.is-vis .como__card { opacity: 1; translate: 0 0; transition: opacity 0.5s var(--como-ease), translate 0.5s var(--como-ease), transform 0.3s var(--como-ease), box-shadow 0.3s var(--como-ease), border-color 0.3s var(--como-ease), background-color 0.3s var(--como-ease); }
	.entra .como.is-vis .como__cab > :nth-child(2) { transition-delay: 0.1s; }
	.entra .como.is-vis .como__card { transition-duration: 0.6s, 0.6s, 0.3s, 0.3s, 0.3s, 0.3s; }
	.entra .como.is-vis .como__card:nth-child(1) { transition-delay: 0.2s, 0.2s, 0s, 0s, 0s, 0s; }
	.entra .como.is-vis .como__card:nth-child(2) { transition-delay: 0.35s, 0.35s, 0s, 0s, 0s, 0s; }
	.entra .como.is-vis .como__card:nth-child(3) { transition-delay: 0.5s, 0.5s, 0s, 0s, 0s, 0s; }
	.entra .como.is-vis .como__linha { transform: none; transition: transform 0.55s var(--como-ease); }
	.entra .como.is-vis .como__ponta { opacity: 1; translate: 0 0; transition: opacity 0.3s var(--como-ease), translate 0.3s var(--como-ease); }
	.entra .como.is-vis .como__card:nth-child(1) .como__linha { transition-delay: 0.8s; }
	.entra .como.is-vis .como__card:nth-child(1) .como__ponta { transition-delay: 1.2s; }
	.entra .como.is-vis .como__card:nth-child(2) .como__linha { transition-delay: 0.95s; }
	.entra .como.is-vis .como__card:nth-child(2) .como__ponta { transition-delay: 1.35s; }
	@media (max-width: 999px) {
		.entra .como .como__linha { transform: scaleY(0); }
		.entra .como .como__ponta { translate: 0 -4px; }
	}
}

/* chamada final — escura, com luz difusa e profundidade (17/10/2026)
   Fundo: gradiente radial em tons de petróleo. Três formas de luz (só
   duas no celular) derivam devagar, 16 a 20 s por ciclo; e um halo bem
   fraco atrás do título. Nada pulsa, nada brilha em neon. */
.sv-cta {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	padding: clamp(84px, 9.5vw, 136px) 0;
	text-align: center;
	background-color: #19343d;   /* base sólida: o texto continua legível mesmo sem o gradiente */
	background-image: radial-gradient(120% 95% at 50% 0%, #22444e 0%, #19343d 52%, #12272f 100%);
	--cta-ease: cubic-bezier(0.22, 1, 0.36, 1);
}
.sv-cta__fundo { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.sv-cta__fundo::after {   /* o halo atrás do título */
	content: "";
	position: absolute;
	left: 50%; top: 46%;
	width: min(900px, 110vw); height: 420px;
	translate: -50% -50%;
	background: radial-gradient(closest-side, rgba(255, 255, 255, 0.07), transparent);
}
.sv-cta__forma { position: absolute; display: block; border-radius: 50%; will-change: transform; }
.sv-cta__forma--a {
	width: 760px; height: 560px; left: -12%; top: -38%;
	background: radial-gradient(closest-side, rgba(95, 165, 172, 0.10), transparent);
	animation: cta-deriva-a 18s ease-in-out infinite alternate;
}
.sv-cta__forma--b {
	width: 680px; height: 620px; right: -14%; bottom: -46%;
	background: radial-gradient(closest-side, rgba(213, 37, 32, 0.07), transparent);
	animation: cta-deriva-b 20s ease-in-out infinite alternate;
}
.sv-cta__forma--c {
	width: 520px; height: 420px; left: 46%; top: 8%;
	background: radial-gradient(closest-side, rgba(140, 186, 196, 0.06), transparent);
	animation: cta-deriva-c 16s ease-in-out infinite alternate;
}
@keyframes cta-deriva-a { to { transform: translate3d(14%, 18%, 0) scale(1.08); } }
@keyframes cta-deriva-b { to { transform: translate3d(-16%, -12%, 0) scale(1.06); } }
@keyframes cta-deriva-c { to { transform: translate3d(-22%, 14%, 0) scale(0.94); } }
/* fora da tela não há por que mover nada */
.entra .sv-cta:not(.is-vis) .sv-cta__forma { animation-play-state: paused; }

.sv-cta__in { position: relative; display: flex; flex-direction: column; align-items: center; }
.sv-cta__kicker { margin: 0 0 22px; font-size: 0.875rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: #f3b3ae; /* 7,4:1 */ }
.sv-cta__titulo { margin: 0 auto 20px; max-width: 800px; font-size: clamp(2rem, 4.4vw, 3.5rem); line-height: 1.12; font-weight: 600; letter-spacing: -0.022em; color: #fff; text-wrap: balance; }
.sv-cta__sub { margin: 0 0 44px; max-width: 62ch; text-wrap: balance; color: #c9d6db; /* 8,8:1 */ font-size: clamp(1.125rem, 1.4vw, 1.25rem); line-height: 1.55; }
.sv-cta__btn { gap: 12px; padding: 18px 34px; border-radius: 999px; }
.sv-cta__btn .btn__seta { transition: transform 0.28s var(--cta-ease); }
.sv-cta .btn.sv-cta__btn { transition: background 0.28s var(--cta-ease), border-color 0.28s var(--cta-ease), transform 0.28s var(--cta-ease), box-shadow 0.28s var(--cta-ease); }
.sv-cta .btn.sv-cta__btn:hover,
.sv-cta .btn.sv-cta__btn:focus-visible { transform: translateY(-4px); box-shadow: 0 16px 34px -14px rgba(23, 130, 63, 0.7); }
.sv-cta .btn.sv-cta__btn:hover .btn__seta,
.sv-cta .btn.sv-cta__btn:focus-visible .btn__seta { transform: translateX(5px); }

@media (max-width: 699px) {
	.sv-cta__forma--c { display: none; }
	.sv-cta__forma--a { width: 520px; height: 420px; }
	.sv-cta__forma--b { width: 460px; height: 440px; }
	.sv-cta__fundo::after { height: 320px; }
	.sv-cta__sub { margin-bottom: 34px; }
	.sv-cta__btn { width: 100%; max-width: 360px; padding-inline: 24px; }
}

@media (prefers-reduced-motion: reduce) {
	.sv-cta__forma { animation: none; }
}
@media (prefers-reduced-motion: no-preference) {
	.entra .sv-cta .sv-cta__kicker { opacity: 0; }
	.entra .sv-cta .sv-cta__titulo,
	.entra .sv-cta .sv-cta__sub,
	.entra .sv-cta .sv-cta__btn { opacity: 0; translate: 0 20px; }
	.entra .sv-cta .sv-cta__btn { translate: 0 12px; }
	.entra .sv-cta.is-vis .sv-cta__kicker { opacity: 1; transition: opacity 0.6s var(--cta-ease); }
	.entra .sv-cta.is-vis .sv-cta__titulo { opacity: 1; translate: 0 0; transition: opacity 0.65s var(--cta-ease) 0.12s, translate 0.65s var(--cta-ease) 0.12s; }
	.entra .sv-cta.is-vis .sv-cta__sub { opacity: 1; translate: 0 0; transition: opacity 0.6s var(--cta-ease) 0.27s, translate 0.6s var(--cta-ease) 0.27s; }
	.entra .sv-cta.is-vis .sv-cta__btn { opacity: 1; translate: 0 0; transition: opacity 0.6s var(--cta-ease) 0.42s, translate 0.6s var(--cta-ease) 0.42s, background 0.28s var(--cta-ease), border-color 0.28s var(--cta-ease), transform 0.28s var(--cta-ease), box-shadow 0.28s var(--cta-ease); }
}

/* faq e relacionados
   O FAQ termina em branco, com 80px de respiro; "Veja também" começa em
   bege-claro de ponta a ponta. A troca de cor é a separação. */
.sv__faq { max-width: 900px; }
.sv--faq { padding-bottom: 80px; background: #fff; }
.sv--relacionados {
	--rel-ease: cubic-bezier(0.22, 1, 0.36, 1);
	background: #f6f4f0;
	padding: clamp(64px, 7vw, 96px) 0 clamp(72px, 8vw, 112px);
}
.sv__rel { list-style: none; margin: 0; padding: 0; display: grid; gap: 20px; }
@media (min-width: 900px) {
	/* 300 a 360px por cartão: o texto respira e não quebra palavra a palavra */
	.sv__rel { grid-template-columns: repeat(3, minmax(0, 360px)); gap: 24px; }
}
.sv__rel a {
	display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
	height: 100%; min-height: 220px;
	padding: 28px;
	border-radius: 16px;
	background: #fff;
	border: 1px solid #e6e1d9;
	box-shadow: 0 1px 2px rgba(25, 52, 61, 0.04);
	color: var(--ink-soft);
	text-decoration: none;
}
.sv__rel-ico { display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: 14px; border-radius: 50%; background: #fdecea; color: var(--red-ink); }
.sv__rel-ico .ico { width: 24px; height: 24px; }
.sv__rel strong { font-size: 1.1875rem; line-height: 1.3; color: var(--petrol); }
.sv__rel a > span:not(.sv__rel-ico) { line-height: 1.55; }
.sv__rel .btn__seta { width: 22px; height: 13px; margin-top: auto; padding-top: 18px; box-sizing: content-box; color: var(--red-ink); }
.sv__rel a:focus-visible { outline: 3px solid var(--red-ink); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) {
	.sv__rel a { transition: transform 0.3s var(--rel-ease), border-color 0.3s var(--rel-ease), box-shadow 0.3s var(--rel-ease); }
	.sv__rel .btn__seta { transition: transform 0.3s var(--rel-ease); }
	.sv__rel a:hover {
		transform: translateY(-4px);
		border-color: rgba(213, 37, 32, 0.35);
		box-shadow: 0 1px 2px rgba(25, 52, 61, 0.04), 0 22px 40px -28px rgba(25, 52, 61, 0.3);
	}
	.sv__rel a:hover .btn__seta { transform: translateX(4px); }
}
/* entrada: título sobe 20px, cartões em sequência a cada 120ms. Usa
   `translate` (no item da lista), e o hover usa `transform` (no link). */
@media (prefers-reduced-motion: no-preference) {
	.entra .sv--relacionados .sv__titulo,
	.entra .sv--relacionados .sv__rel > li { opacity: 0; translate: 0 20px; }
	.entra .sv--relacionados.is-vis .sv__titulo,
	.entra .sv--relacionados.is-vis .sv__rel > li { opacity: 1; translate: 0 0; transition: opacity 0.55s var(--rel-ease), translate 0.55s var(--rel-ease); }
	.entra .sv--relacionados.is-vis .sv__rel > li:nth-child(1) { transition-delay: 0.15s; }
	.entra .sv--relacionados.is-vis .sv__rel > li:nth-child(2) { transition-delay: 0.27s; }
	.entra .sv--relacionados.is-vis .sv__rel > li:nth-child(3) { transition-delay: 0.39s; }
}
/* seta do cartão de regra: SVG, aponta para fora (↗) e gira para baixo ao abrir */
.regra-card__seta { width: 22px; height: 22px; border: 0; color: var(--red-ink); transform: none; transition: transform 0.3s var(--ease); }
.regra-card__seta::after { content: none; }
.regra-card[open] .regra-card__seta { transform: rotate(135deg); }
/* FAQ no mesmo eixo das outras seções, com medida de leitura */
.sv__faq { max-width: var(--shell); }
.sv__faq .faq { max-width: 860px; }
/* menos do quadro na parede, mais da cliente */
.sv__ed-foto img { object-position: 50% 62%; }
/* O cartão abre NO LUGAR: ocupar a linha inteira fazia o cartão da direita
   pular para baixo e deixava um buraco ao lado do vizinho. */
.regra-card[open] { grid-column: auto; }
.regra-card__corpo { grid-template-columns: 1fr !important; gap: 2px; }
.regra-card__corpo dd { margin-bottom: 14px; }
/* Indicador de abrir/fechar: seta para BAIXO num círculo, que vira para
   cima quando o cartão está aberto — o padrão de "expandir". A seta ↗
   anterior dizia "vai para outra página", e o cartão abre no lugar. */
.regra-card__seta {
	display: grid; place-items: center; flex: none;
	width: 34px; height: 34px; border: 0; border-radius: 50%;
	background: #fdecea; color: var(--red-ink);
	transform: none; transition: transform 0.3s var(--ease), background 0.3s var(--ease);
}
.regra-card__seta svg { display: block; }
.regra-card[open] .regra-card__seta { transform: rotate(180deg); background: var(--red-ink); color: #fff; }

/* ===========================================================
   SEÇÃO "ENTENDA O CÁLCULO" MAIOR, COM A CALCULADORA DENTRO
   =========================================================== */
.sv--calculo { padding-block: clamp(48px, 7vw, 104px); }
.sv__painel--calculo { padding: clamp(28px, 5vw, 72px); border-radius: 24px; }
.sv__painel--calculo .sv__titulo { max-width: 22ch; margin-bottom: clamp(30px, 4vw, 48px); }

.sv__painel--calculo .formula { gap: 16px; }
.sv__painel--calculo .formula__item { gap: 14px; padding: clamp(28px, 3.4vw, 44px) clamp(22px, 2.6vw, 34px); border-radius: 18px; box-shadow: 0 1px 2px rgba(27, 44, 51, 0.05), 0 14px 32px -24px rgba(27, 44, 51, 0.35); }
.sv__painel--calculo .formula__item .ico { width: 42px; height: 42px; }
.sv__painel--calculo .formula__item strong { font-size: clamp(1.375rem, 2vw, 1.75rem); letter-spacing: -0.01em; }
.sv__painel--calculo .formula__item span { font-size: 1rem; max-width: 30ch; }
.sv__painel--calculo .formula__op { font-size: clamp(2.25rem, 3.4vw, 3rem); padding: 0 4px; }
.sv__painel--calculo .sv__nota { margin-top: 28px; }

/* o cartão da simulação */
.sv-calc {
	display: grid; gap: clamp(26px, 4vw, 56px);
	margin-top: clamp(40px, 5vw, 64px);
	padding: clamp(24px, 4vw, 56px);
	border-radius: 20px; background: #fff;
	border-top: 4px solid var(--red-ink);
	box-shadow: 0 1px 2px rgba(27, 44, 51, 0.05), 0 24px 48px -32px rgba(27, 44, 51, 0.45);
	scroll-margin-top: 110px;
}
@media (min-width: 1000px) {
	.sv-calc { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); align-items: start; }
	.sv-calc__intro { position: sticky; top: 130px; }
}
.sv-calc__ico { display: grid; place-items: center; width: 56px; height: 56px; margin-bottom: 20px; border-radius: 16px; background: var(--petrol); color: #fff; }
.sv-calc__ico .ico { width: 28px; height: 28px; }
.sv-calc__titulo { margin: 0 0 14px; font-size: clamp(1.5rem, 2.4vw, 2rem); line-height: 1.2; font-weight: 700; letter-spacing: -0.015em; color: var(--ink); }
.sv-calc__intro p { margin: 0 0 14px; max-width: 46ch; color: var(--ink-soft); font-size: 1.0625rem; }
.sv-calc__privado { padding-left: 14px; border-left: 3px solid var(--petrol); font-size: 1rem !important; }
.sv-calc__corpo { min-width: 0; }
.sv-calc__corpo .calc__form { scroll-margin-top: 130px; }
.sv-calc__corpo .calc__aviso { margin-top: 28px; }
.sv-calc__corpo .calc__campo:last-of-type { margin-bottom: 26px; }
/* no celular, painel e cartão somavam dois recuos e apertavam o formulário */
@media (max-width: 699px) {
	.sv__painel--calculo { padding-inline: 18px; border-radius: 20px; }
	.sv-calc { margin-inline: -8px; padding: 26px 18px; border-radius: 16px; }
	.sv-calc .calc__input--n { width: 80px; }
	.sv-calc .calc__par { gap: 14px 18px; }
}
/* a capa com foto já termina dissolvida no branco: o primeiro painel
   pode encostar mais, sem a faixa branca dobrada entre os dois */
.capa-foto + .sv { padding-top: clamp(8px, 1.4vw, 20px); }

/* valor estimado em destaque no resultado da aposentadoria */
.calc__valor { display: flex; flex-direction: column; gap: 2px; margin: 0 0 20px; padding: 20px 22px; border-radius: var(--r-sm); background: var(--petrol); color: var(--on-dark-soft); }
.calc__valor-n { font-size: clamp(2rem, 4vw, 2.625rem); line-height: 1.1; font-weight: 800; letter-spacing: -0.02em; color: #fff; }
.calc__valor-r { font-size: 0.9375rem; line-height: 1.45; }

/* ===========================================================
   REVISÃO DE APOSENTADORIA no layout "serviço" (17/10/2026)
   Peças novas: grade de 3, cartão "encerrada", carta de concessão
   comentada e a linha do tempo dos dois prazos.
   =========================================================== */
@media (min-width: 1100px) { .sv__regras--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* a tese encerrada: mesma forma, sem clique, em tom apagado */
.regra-card--encerrada { background: transparent; border-style: dashed; border-color: #d3cdc4; }
.regra-card__in { display: flex; flex-direction: column; gap: 10px; padding: 26px 26px 24px; color: var(--ink-soft); }
.regra-card__in .ico { color: var(--ink-soft); margin-bottom: 6px; }
.regra-card--encerrada .regra-card__nome { color: var(--ink-soft); }
.regra-card__selo { display: inline-block; margin-left: 6px; padding: 3px 10px; border-radius: 999px; background: #eceae6; color: var(--ink-soft); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; vertical-align: 2px; }

/* carta de concessão: texto à esquerda, o documento comentado à direita */
.carta { display: grid; gap: clamp(36px, 5vw, 72px); align-items: center; }
@media (min-width: 1000px) { .carta { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.carta__pontos { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }
.carta__pontos li { display: grid; grid-template-columns: 36px 1fr; column-gap: 14px; align-items: start; }
.carta__pontos li .carta__marca { grid-row: span 2; margin-top: 1px; }
.carta__pontos strong { font-size: 1.125rem; color: var(--ink); }
.carta__pontos li > span:last-child { color: var(--ink-soft); }
.carta__marca { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #d52520; color: #fff; font-size: 0.9375rem; font-weight: 700; line-height: 1; }
.carta__doc { margin: 0; padding: clamp(26px, 4vw, 56px); border-radius: 24px; background: var(--warm); }
.carta__papel {
	padding: clamp(22px, 2.6vw, 34px);
	border-radius: 12px;
	background: #fff;
	box-shadow: 0 1px 2px rgba(25, 52, 61, 0.06), 0 30px 60px -36px rgba(25, 52, 61, 0.45);
	rotate: -1.2deg;
}
.carta__cab { display: flex; align-items: center; gap: 14px; padding-bottom: 18px; margin-bottom: 6px; border-bottom: 1px solid #ece8e2; }
.carta__brasao { flex: none; width: 38px; height: 38px; border-radius: 50%; border: 2px solid var(--petrol); box-shadow: inset 0 0 0 5px #fff, inset 0 0 0 8px #dfe5e7; }
.carta__cab strong { display: block; color: var(--petrol); font-size: 1.0625rem; }
.carta__cab em { display: block; font-style: normal; color: var(--ink-soft); font-size: 0.875rem; }
.carta__linha { position: relative; padding: 13px 44px 13px 0; border-bottom: 1px dashed #e4dfd8; }
.carta__linha:last-child { border-bottom: 0; }
.carta__rot { display: block; color: var(--ink-soft); font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase; }
.carta__val { display: block; width: var(--w, 50%); height: 9px; margin-top: 9px; border-radius: 5px; background: #e3e8ea; }
.carta__linha:last-child .carta__val { background: var(--petrol); opacity: 0.85; }
.carta__linha.is-marcada { margin-inline: -12px; padding-left: 9px; padding-right: 56px; border-left: 3px solid #d52520; background: #fdf3f2; border-radius: 0 8px 8px 0; }
.carta__linha.is-marcada .carta__val { background: #f1c9c6; }
.carta__linha > .carta__marca { position: absolute; right: 12px; top: 50%; translate: 0 -50%; width: 28px; height: 28px; font-size: 0.875rem; }

/* prazos: linha do tempo de 10 anos com a janela de 5 */
.prazo-linha { position: relative; margin: 4px 0 30px; padding: 40px 0 62px; }
.prazo-linha__trilho { position: relative; height: 10px; border-radius: 5px; background: #e2ddd5; }
.prazo-linha__prescrito { position: absolute; inset: 0 auto 0 0; width: 20%; border-radius: 5px 0 0 5px; background: repeating-linear-gradient(-45deg, #cdc6ba 0 3px, #e2ddd5 3px 7px); }
.prazo-linha__janela { position: absolute; top: 0; bottom: 0; left: 20%; width: 50%; background: var(--petrol); }
.prazo-linha__janela::before { content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 8px; border: 1.5px solid var(--petrol); border-bottom: 0; border-radius: 4px 4px 0 0; }
.prazo-linha__janela-t { position: absolute; left: 45%; top: -40px; translate: -50% 0; white-space: nowrap; color: var(--petrol); font-size: 0.875rem; font-weight: 700; }
.prazo-linha__ano { position: absolute; top: 14px; left: calc(var(--a) * 10%); width: 1px; height: 6px; background: #b9b1a5; }
.prazo-linha__marco { position: absolute; top: 31px; left: 0; display: flex; flex-direction: column; align-items: flex-start; color: var(--ink); font-size: 0.875rem; font-weight: 600; line-height: 1.3; white-space: nowrap; }
.prazo-linha__marco b { display: block; width: 18px; height: 18px; margin-bottom: 26px; border-radius: 50%; border: 3px solid #fff; background: var(--petrol); box-shadow: 0 0 0 1px rgba(25, 52, 61, 0.2); }
.prazo-linha__marco--pedido { left: 70%; translate: -50% 0; align-items: center; }
.prazo-linha__marco--pedido b { background: #fff; border-color: var(--petrol); }
.prazo-linha__marco--fim { left: 100%; translate: -100% 0; align-items: flex-end; color: #b81d18; }
.prazo-linha__marco--fim b { background: #d52520; }
@media (max-width: 699px) {
	.prazo-linha { padding-bottom: 92px; }
	.prazo-linha__marco--pedido { flex-direction: column; }
	.prazo-linha__marco--pedido b { margin-bottom: 58px; }
}

.prazo-cards { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
@media (min-width: 700px) { .prazo-cards { grid-template-columns: 1fr 1fr; } }
.prazo-card { display: flex; flex-direction: column; padding: clamp(22px, 2.6vw, 32px); border-radius: 16px; background: #fff; border-left: 4px solid var(--petrol); box-shadow: 0 1px 2px rgba(25, 52, 61, 0.05), 0 14px 32px -26px rgba(25, 52, 61, 0.35); }
.prazo-card--fim { border-left-color: #d52520; }
.prazo-card__n { font-size: clamp(2.25rem, 3.6vw, 3rem); line-height: 1; font-weight: 700; letter-spacing: -0.02em; color: var(--petrol); }
.prazo-card--fim .prazo-card__n { color: #d52520; }
.prazo-card__t { margin-top: 6px; font-size: 1.125rem; font-weight: 600; color: var(--ink); }
.prazo-card__d { margin-top: 10px; color: var(--ink-soft); font-size: 1rem; line-height: 1.6; }
/* ajustes depois de ver na tela */
.capa-foto__sub strong { white-space: nowrap; }   /* "todos os meses." não se parte */
/* cartões fechados da mesma altura, com "Entenda a revisão" alinhado na
   base; o cartão aberto cresce sozinho (a grade alinha pelo topo) */
.sv__regras--3 .regra-card summary { justify-content: flex-start; }
.sv__regras--3 .regra-card__abre { margin-top: auto; }
@media (min-width: 1100px) { .sv__regras--3 .regra-card summary, .sv__regras--3 .regra-card__in { min-height: 19rem; } }
@media (min-width: 1280px) { .sv__regras--3 .regra-card summary, .sv__regras--3 .regra-card__in { min-height: 17.5rem; } }
@media (min-width: 760px) and (max-width: 1099px) { .sv__regras--3 .regra-card summary, .sv__regras--3 .regra-card__in { min-height: 18.5rem; } }
@media (max-width: 699px) { .prazo-linha__marco { font-size: 0.8125rem; } }

/* ===========================================================
   PENSÃO POR MORTE no layout "serviço" (17/10/2026)
   Peças novas: capa quente com rótulo e parallax, quem pode receber,
   requisitos ligados por linha, faixa escura dos prazos, documentação,
   FAQ em duas colunas e cabeçalho dos outros serviços.
   =========================================================== */
:root { --ent-ease: cubic-bezier(0.22, 1, 0.36, 1); --pz-red: #d52520; }

/* --- capa --- */
.capa-foto--quente { background: #faf9f7; }
.capa-foto__kicker { margin: 28px 0 0; font-size: 0.875rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--red-ink); }
.capa-foto__kicker + .capa-foto__titulo { margin-top: 14px; }
.capa-foto--quente .capa-foto__titulo { font-size: clamp(2.75rem, 5vw, 4.75rem); }   /* 72 px a 1440 */
.capa-foto--quente .capa-foto__sub { max-width: 36ch; }
.capa-foto--parallax .capa-foto__img picture { translate: 0 var(--par-y, 0px); }

/* --- 01 quem pode receber --- */
.sv--dependentes { background: #f4f2ee; padding: clamp(64px, 8vw, 112px) 0; }
.ent__cab { margin-bottom: clamp(32px, 4vw, 52px); }
.ent__cab .sv__lead { margin-bottom: 0; }
.dep { list-style: none; margin: 0; padding: 0; display: grid; gap: 20px; }
@media (min-width: 900px) { .dep { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; } }
.dep__card { display: flex; flex-direction: column; padding: clamp(28px, 2.6vw, 36px); border: 1px solid #e8e3dc; border-radius: 16px; background: #fff; box-shadow: 0 1px 2px rgba(25, 52, 61, 0.04), 0 14px 32px -28px rgba(25, 52, 61, 0.25); }
.dep__ico { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: #fdecea; color: var(--pz-red); }
.dep__ico .ico { width: 26px; height: 26px; }
.dep__t { margin: 22px 0 10px; font-size: 1.375rem; line-height: 1.25; font-weight: 600; color: #19343d; }
.dep__d { margin: 0 0 18px; color: var(--ink-soft); font-size: 1.0625rem; line-height: 1.6; }
.dep__lei { margin: auto 0 0; padding-top: 16px; border-top: 1px solid #efebe5; color: var(--ink-soft); font-size: 0.9375rem; line-height: 1.55; }
.dep__nota { margin: 26px 0 0; color: var(--ink-soft); font-size: 0.9375rem; }
@media (hover: hover) and (pointer: fine) {
	.dep__card { transition: transform 0.3s var(--ent-ease), box-shadow 0.3s var(--ent-ease), border-color 0.3s var(--ent-ease); }
	.dep__ico { transition: transform 0.3s var(--ent-ease); }
	.dep__card:hover { transform: translateY(-4px); border-color: rgba(213, 37, 32, 0.32); box-shadow: 0 1px 2px rgba(25, 52, 61, 0.04), 0 24px 44px -28px rgba(25, 52, 61, 0.32); }
	.dep__card:hover .dep__ico { transform: scale(1.06); }
}

/* --- 02 requisitos: três blocos, divisórias finas, uma linha que os liga --- */
.sv--requisitos { background: #faf9f7; padding: clamp(64px, 8vw, 112px) 0; }
.req { position: relative; list-style: none; margin: 0; padding: 0; display: grid; gap: 34px; }
.req__topo { position: relative; z-index: 1; display: flex; align-items: center; gap: 14px; margin-bottom: 22px; }
.req__n { padding-right: 6px; background: #faf9f7; color: var(--pz-red); font-size: 1.5rem; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.req__ico { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; border: 1px solid #e3ded7; background: #faf9f7; color: #19343d; }
.req__ico .ico { width: 22px; height: 22px; }
.req__t { margin: 0 0 8px; font-size: 1.25rem; font-weight: 600; color: #19343d; }
.req__d { margin: 0; max-width: 34ch; color: var(--ink-soft); font-size: 1.0625rem; line-height: 1.6; }
@media (min-width: 900px) {
	.req { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; }
	.req__item { padding: 0 clamp(24px, 3vw, 44px); border-left: 1px solid #e6e1da; }
	.req__item:first-child { padding-left: 0; border-left: 0; }
	/* a linha que liga os três, na altura dos números */
	.req::before { content: ""; position: absolute; left: 0; right: 0; top: 23px; height: 1px; background: linear-gradient(to right, rgba(213, 37, 32, 0.5), #e3ded7 40%, #e3ded7); transform-origin: left center; }
}

/* --- 03 prazos: faixa escura de ponta a ponta --- */
.pz {
	position: relative; overflow: hidden; isolation: isolate;
	padding: clamp(80px, 9vw, 128px) 0;
	background-color: #19343d;
	background-image: radial-gradient(110% 120% at 85% 10%, #24474f 0%, #19343d 55%, #13292f 100%);
	color: #fff;
}
.pz__fundo { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.pz__luz { position: absolute; display: block; border-radius: 50%; will-change: transform; }
.pz__luz--a { width: 720px; height: 560px; left: -10%; bottom: -40%; background: radial-gradient(closest-side, rgba(95, 165, 172, 0.10), transparent); animation: cta-deriva-a 18s ease-in-out infinite alternate; }
.pz__luz--b { width: 640px; height: 600px; right: -8%; top: -40%; background: radial-gradient(closest-side, rgba(213, 37, 32, 0.06), transparent); animation: cta-deriva-b 20s ease-in-out infinite alternate; }
.entra .pz:not(.is-vis) .pz__luz { animation-play-state: paused; }
.pz__in { position: relative; display: grid; gap: clamp(40px, 5vw, 72px); align-items: center; }
@media (min-width: 1000px) { .pz__in { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); } }
.pz__kicker { display: flex; align-items: center; gap: 10px; margin: 0 0 20px; color: #f3b3ae; font-size: 0.875rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; }
.pz__kicker .ico { width: 20px; height: 20px; }
.pz__titulo { margin: 0 0 18px; max-width: 20ch; font-size: clamp(2rem, 3.6vw, 3rem); line-height: 1.12; font-weight: 600; letter-spacing: -0.02em; color: #fff; text-wrap: balance; }
.pz__sub { margin: 0 0 28px; max-width: 46ch; color: #c9d6db; font-size: clamp(1.0625rem, 1.3vw, 1.1875rem); line-height: 1.6; }
.pz__mais summary { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; list-style: none; cursor: pointer; color: #fff; font-weight: 700; border-bottom: 1px solid rgba(255, 255, 255, 0.45); }
.pz__mais summary::-webkit-details-marker { display: none; }
.pz__mais summary .btn__seta { width: 20px; height: 12px; transition: transform 0.3s var(--ent-ease); }
.pz__mais summary:hover .btn__seta { transform: translateX(4px); }
.pz__mais[open] summary .btn__seta { transform: rotate(90deg); }
.pz__mais summary:focus-visible { outline: 3px solid #f3b3ae; outline-offset: 4px; border-radius: 4px; }
.pz__regras { margin-top: 20px; padding: 20px 24px; border-radius: 14px; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.12); }
.pz__regras ul { list-style: none; margin: 0 0 12px; padding: 0; }
.pz__regras li { padding: 10px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.1); color: #dbe4e7; line-height: 1.55; }
.pz__regras li strong { color: #fff; }
.pz__lei { margin: 10px 0 0; color: #c9d6db; font-size: 0.9375rem; line-height: 1.55; }
.pz__lei a { color: #fff; text-underline-offset: 3px; }
.pz__graf { margin: 0; }
.pz__cal { padding: clamp(24px, 3vw, 36px); border-radius: 20px; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.12); }
.pz__cal-cab { display: flex; gap: 8px; margin-bottom: 44px; }
.pz__cal-cab span { width: 10px; height: 10px; border-radius: 50%; background: rgba(255, 255, 255, 0.22); }
.pz__trilho { position: relative; height: 4px; margin: 0 4px 92px; border-radius: 2px; background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.4) 0 7px, transparent 7px 13px); }
.pz__cheio { position: absolute; left: 0; top: -1px; width: 66%; height: 6px; border-radius: 3px; background: #f3b3ae; transform-origin: left center; }
.pz__marco { position: absolute; top: -8px; display: flex; flex-direction: column; align-items: center; translate: -50% 0; text-align: center; }
.pz__marco b { width: 20px; height: 20px; border-radius: 50%; background: #19343d; border: 3px solid #f3b3ae; }
.pz__marco em { margin-top: 14px; font-style: normal; font-weight: 700; font-size: 1rem; color: #fff; white-space: nowrap; }
.pz__marco small { margin-top: 2px; max-width: 120px; font-size: 0.8125rem; line-height: 1.35; color: #c9d6db; }
.pz__marco--0 { left: 0; translate: 0 0; align-items: flex-start; text-align: left; }
.pz__marco--0 b { background: #f3b3ae; }
.pz__marco--90 { left: 33%; }
.pz__marco--180 { left: 66%; }
.pz__legenda { display: flex; flex-wrap: wrap; gap: 10px 24px; color: #c9d6db; font-size: 0.875rem; }
.pz__legenda span { display: inline-flex; align-items: center; gap: 8px; }
.pz__i { display: inline-block; width: 22px; height: 5px; border-radius: 3px; }
.pz__i--cheio { background: #f3b3ae; }
.pz__i--trac { background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.55) 0 5px, transparent 5px 9px); }
@media (max-width: 699px) {
	.pz__luz--b { display: none; }
	.pz__marco small { max-width: 92px; }
	.pz__trilho { margin-bottom: 104px; }
}
@media (prefers-reduced-motion: reduce) { .pz__luz { animation: none; } }

/* --- 04 documentação: checklist e a pasta de papéis --- */
.sv--docs { background: #faf9f7; padding: clamp(64px, 8vw, 112px) 0; }
.docs { display: grid; gap: clamp(40px, 5vw, 72px); align-items: center; }
@media (min-width: 1000px) { .docs { grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr); } }
.docs__lista { list-style: none; margin: 0; padding: 0; border-top: 1px solid #e7e2db; }
.docs__lista li { display: grid; grid-template-columns: 36px 1fr; gap: 14px; padding: 20px 0; border-bottom: 1px solid #e7e2db; }
.docs__ok { color: var(--pz-red); padding-top: 2px; }
.docs__ok .ico { width: 26px; height: 26px; }
.docs__lista strong { display: block; font-size: 1.125rem; color: #19343d; }
.docs__lista li > span:last-child > span { display: block; margin-top: 4px; color: var(--ink-soft); line-height: 1.55; }
.docs__nota { margin-top: 22px; }
.docs__arte { position: relative; margin: 0; aspect-ratio: 5 / 4; border-radius: 24px; background: #efe9e0; overflow: hidden; }
.docs__folha { position: absolute; width: 52%; height: 64%; padding: 22px 22px 0; border-radius: 6px; background: #fff; box-shadow: 0 1px 2px rgba(25, 52, 61, 0.08), 0 22px 40px -24px rgba(25, 52, 61, 0.45); }
.docs__folha strong { display: block; margin-bottom: 16px; color: #19343d; font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; }
.docs__folha span { display: block; height: 8px; margin-top: 12px; border-radius: 4px; background: #e6e9ea; }
.docs__folha span:nth-of-type(1) { width: 86%; } .docs__folha span:nth-of-type(2) { width: 70%; }
.docs__folha span:nth-of-type(3) { width: 92%; } .docs__folha span:nth-of-type(4) { width: 54%; }
/* a folha da frente começa abaixo dos títulos das de trás: os três se leem */
.docs__folha--0 { left: 8%; top: 12%; rotate: -6deg; }
.docs__folha--1 { left: 40%; top: 8%; rotate: 4deg; }
.docs__folha--2 { left: 24%; top: 34%; rotate: -1.5deg; height: 58%; }
.docs__selo { position: absolute; right: 12%; bottom: 12%; display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--pz-red); color: #fff; box-shadow: 0 14px 30px -12px rgba(213, 37, 32, 0.55); }
.docs__selo .ico { width: 30px; height: 30px; }

/* --- FAQ em duas colunas, uma resposta por vez, + e − --- */
.faq2 { background: #faf9f7; }
.faq2 .faq { max-width: none; }
@media (min-width: 1000px) {
	.faq2__in { display: grid; grid-template-columns: minmax(0, 0.35fr) minmax(0, 0.65fr); gap: clamp(40px, 5vw, 80px); align-items: start; }
	.faq2__cab { position: sticky; top: 130px; }
}
.faq2__cab .sv__lead { margin-bottom: 28px; }
.faq--mais { border-top: 1px solid #ddd6cc; }
.faq--mais .faq__q { transition: color 0.25s var(--ent-ease); }
.faq--mais .faq__q::after {
	border: 0; transform: none; width: 16px; height: 16px; top: 30px;
	background:
		linear-gradient(var(--pz-red), var(--pz-red)) center / 16px 2px no-repeat,
		linear-gradient(var(--pz-red), var(--pz-red)) center / 2px 16px no-repeat;
	transition: background-size 0.3s var(--ent-ease);
}
.faq--mais .faq__item[open] .faq__q::after { transform: none; background-size: 16px 2px, 2px 0; }
@media (hover: hover) and (pointer: fine) { .faq--mais .faq__q:hover { color: var(--pz-red); } }
.faq--mais .faq__q:focus-visible { outline: 3px solid var(--red-ink); outline-offset: 2px; }
/* a resposta abre deslizando onde o navegador sabe animar até "auto" */
@supports (interpolate-size: allow-keywords) {
	.faq--mais { interpolate-size: allow-keywords; }
	.faq--mais .faq__item::details-content { height: 0; overflow: clip; transition: height 0.3s var(--ent-ease), content-visibility 0.3s allow-discrete; }
	.faq--mais .faq__item[open]::details-content { height: auto; }
}

/* --- outros serviços: cabeçalho e "Conhecer serviço →" --- */
.rel__cab { margin-bottom: clamp(28px, 3.4vw, 44px); }
.sv__rel-ir { display: inline-flex; align-items: center; gap: 10px; margin-top: auto; padding-top: 18px; color: var(--red-ink); font-weight: 700; font-size: 0.9375rem; }
.sv__rel .sv__rel-ir .btn__seta { margin: 0; padding: 0; }

/* --- entradas (uma vez, ao chegar na tela; app.js 4b) --- */
@media (prefers-reduced-motion: no-preference) {
	.entra [data-entra] .ent__cab > *,
	.entra .dep__card,
	.entra .req__item,
	.entra .pz__texto > *,
	.entra .pz__graf,
	.entra .docs__lista li { opacity: 0; translate: 0 20px; }
	.entra .docs__lista li { translate: 0 12px; }
	.entra .docs__arte { opacity: 0; }
	.entra .req::before { transform: scaleX(0); }
	.entra .pz__cheio { transform: scaleX(0); }
	.entra .pz__marco { opacity: 0; }

	.entra [data-entra].is-vis .ent__cab > *,
	.entra .is-vis .req__item,
	.entra .is-vis .pz__texto > *,
	.entra .is-vis .pz__graf,
	.entra .is-vis .docs__lista li { opacity: 1; translate: 0 0; transition: opacity 0.6s var(--ent-ease), translate 0.6s var(--ent-ease); }
	.entra [data-entra].is-vis .ent__cab > :nth-child(2) { transition-delay: 0.08s; }
	.entra [data-entra].is-vis .ent__cab > :nth-child(3) { transition-delay: 0.16s; }

	.entra .is-vis .dep__card { opacity: 1; translate: 0 0; transition: opacity 0.6s var(--ent-ease), translate 0.6s var(--ent-ease), transform 0.3s var(--ent-ease), box-shadow 0.3s var(--ent-ease), border-color 0.3s var(--ent-ease); }
	.entra .is-vis .dep__card:nth-child(1) { transition-delay: 0.2s, 0.2s, 0s, 0s, 0s; }
	.entra .is-vis .dep__card:nth-child(2) { transition-delay: 0.32s, 0.32s, 0s, 0s, 0s; }
	.entra .is-vis .dep__card:nth-child(3) { transition-delay: 0.44s, 0.44s, 0s, 0s, 0s; }

	.entra .is-vis .req::before { transform: none; transition: transform 0.65s var(--ent-ease) 0.2s; }
	.entra .is-vis .req__item:nth-child(1) { transition-delay: 0.25s; }
	.entra .is-vis .req__item:nth-child(2) { transition-delay: 0.4s; }
	.entra .is-vis .req__item:nth-child(3) { transition-delay: 0.55s; }

	.entra .is-vis .pz__texto > :nth-child(2) { transition-delay: 0.1s; }
	.entra .is-vis .pz__texto > :nth-child(3) { transition-delay: 0.22s; }
	.entra .is-vis .pz__texto > :nth-child(4) { transition-delay: 0.32s; }
	.entra .is-vis .pz__graf { transition-delay: 0.25s; }
	.entra .is-vis .pz__cheio { transform: none; transition: transform 1s var(--ent-ease) 0.6s; }
	.entra .is-vis .pz__marco { opacity: 1; transition: opacity 0.5s var(--ent-ease); }
	.entra .is-vis .pz__marco--0 { transition-delay: 0.55s; }
	.entra .is-vis .pz__marco--90 { transition-delay: 0.85s; }
	.entra .is-vis .pz__marco--180 { transition-delay: 1.15s; }

	.entra .is-vis .docs__lista li:nth-child(1) { transition-delay: 0.2s; }
	.entra .is-vis .docs__lista li:nth-child(2) { transition-delay: 0.3s; }
	.entra .is-vis .docs__lista li:nth-child(3) { transition-delay: 0.4s; }
	.entra .is-vis .docs__lista li:nth-child(4) { transition-delay: 0.5s; }
	.entra .is-vis .docs__arte { opacity: 1; transition: opacity 0.9s var(--ent-ease) 0.2s; }

	/* capa de Pensão: os tempos do briefing */
	.capa-foto--quente .capa-foto__kicker { animation: capa-foto-sobe 0.6s var(--ent-ease) 0.05s both; }
	.capa-foto--quente .capa-foto__linha-t { animation-duration: 0.65s; animation-delay: 0.12s; }
	.capa-foto--quente .capa-foto__sub { animation-duration: 0.65s; animation-delay: 0.27s; }
	.capa-foto--quente .capa-foto__acoes > .btn { animation-duration: 0.65s; animation-delay: 0.42s; }
	.capa-foto--quente .capa-foto__linha { animation-duration: 0.65s; animation-delay: 0.5s; }
	.capa-foto--quente .capa-foto__img img { animation: capa-foto-zoom-suave 1.4s var(--ent-ease) both; }
	.capa-foto--quente .capa-foto__titulo .ponto { animation-delay: 0.6s; }
}
@keyframes capa-foto-zoom-suave { from { transform: scale(1.04); } }
/* depois da capa, uma seção de fundo próprio precisa do respiro inteiro */
.capa-foto + .sv--dependentes { padding-top: clamp(64px, 8vw, 112px); }

/* ===========================================================
   SPPREV no layout "serviço" (17/10/2026)
   Sem foto: a capa usa uma arte de linhas (partes/arte-trajetoria.php).
   Nada que lembre a identidade da autarquia.
   =========================================================== */
/* --- capa com arte --- */
.capa-foto--arte { background: radial-gradient(60% 75% at 78% 45%, #f2eee7 0%, #faf9f7 62%) #faf9f7; }
.capa-foto--arte .capa-foto__img {
	-webkit-mask-image: linear-gradient(to right, transparent 0, #000 18%);
	mask-image: linear-gradient(to right, transparent 0, #000 18%);
	display: flex; align-items: center; justify-content: center;
	padding: 24px clamp(16px, 3vw, 56px) 24px 0;
}
.arte-traj { display: block; width: 100%; height: 100%; max-height: 560px; overflow: visible; }
.arte-traj text { font-family: inherit; font-size: 15px; font-weight: 600; fill: #52646c; }
.arte-traj__marco--3 text { fill: #b81d18; }
@media (max-width: 999px) {
	.capa-foto--arte .capa-foto__img { height: clamp(200px, 52vw, 320px); padding: 8px 12px 0; -webkit-mask-image: linear-gradient(to bottom, #000 70%, transparent 100%); mask-image: linear-gradient(to bottom, #000 70%, transparent 100%); }
	.capa-foto--arte .capa-foto__grid { margin-top: 0; }
}
@media (max-width: 699px) { .arte-traj text, .arte-traj__grade { display: none; } }
@media (prefers-reduced-motion: no-preference) {
	.capa-foto--arte .capa-foto__img { animation: capa-foto-luz 0.9s var(--ent-ease) 0.2s both; }
	.arte-traj__linha { stroke-dasharray: 1; animation: arte-desenha 1.2s var(--ent-ease) 0.35s both; }
	.arte-traj__sombra { animation: capa-foto-luz 1s var(--ent-ease) 0.9s both; }
	.arte-traj__marco { animation: capa-foto-luz 0.6s var(--ent-ease) both; }
	.arte-traj__marco--1 { animation-delay: 0.45s; }
	.arte-traj__marco--2 { animation-delay: 0.85s; }
	.arte-traj__marco--3 { animation-delay: 1.15s; }
	.arte-traj__marco--4 { animation-delay: 1.45s; }
}
@keyframes arte-desenha { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes capa-foto-luz { from { opacity: 0; } }

/* --- 01 momentos: cartões que levam às seções --- */
.sv--momentos { background: #faf9f7; padding: clamp(56px, 7vw, 104px) 0; }
.capa-foto + .sv--momentos { padding-top: clamp(40px, 5vw, 72px); }
.mom__card { padding: 0; }
.mom__link { display: flex; flex-direction: column; height: 100%; padding: clamp(28px, 2.6vw, 36px); border-radius: 16px; color: inherit; text-decoration: none; }
.mom__link:focus-visible { outline: 3px solid var(--red-ink); outline-offset: 3px; }
.mom__ico { background: #f6f0e8; }
.mom__ir { margin-top: auto; padding-top: 6px; }
.mom__ir .btn__seta { width: 20px; height: 12px; transition: transform 0.3s var(--ent-ease); }
@media (hover: hover) and (pointer: fine) {
	.mom__card:hover { transform: translateY(-5px); }
	.mom__card:hover .mom__ir .btn__seta { transform: translateX(4px); }
}

/* --- 02 regras: fundo bege, cartões brancos, outras situações compactas --- */
.sv--fundo-bege { background: #f4f2ee; padding: clamp(64px, 8vw, 112px) 0; }
.sv--fundo-bege .regra-card { background: #fff; }
.sv--fundo-bege .regra-card[open] { background: #fff; }
.sv__regras-extras-t { margin: clamp(36px, 4vw, 52px) 0 16px; font-size: 1.125rem; font-weight: 600; color: #19343d; }
.regra-card--compacto summary { flex-direction: row; align-items: center; gap: 14px; padding: 18px 22px; }
.regra-card--compacto summary .ico { margin: 0; flex: none; color: var(--pz-red); }
.regra-card--compacto .regra-card__nome { flex: 1; font-size: 1.0625rem; line-height: 1.35; }
.regra-card--compacto .regra-card__seta { flex: none; }

/* --- 03 fatores: grade 2 × 2, números grandes, linhas finas, sem sombra --- */
.sv--fatores { background: #faf9f7; padding: clamp(64px, 8vw, 112px) 0; }
.fat { list-style: none; margin: 0; padding: 0; display: grid; border-bottom: 1px solid #e3ded7; }
.fat__item { display: grid; grid-template-columns: auto 1fr; gap: clamp(18px, 2.4vw, 32px); align-items: start; padding: clamp(26px, 3vw, 40px) 0; border-top: 1px solid #e3ded7; }
.fat__n { min-width: 2.2ch; font-size: clamp(2.5rem, 4vw, 3.5rem); font-weight: 300; line-height: 0.9; letter-spacing: -0.03em; color: var(--pz-red); font-variant-numeric: tabular-nums; }
.fat__t { margin: 4px 0 8px; font-size: 1.25rem; font-weight: 600; color: #19343d; }
.fat__d { margin: 0; max-width: 40ch; color: var(--ink-soft); font-size: 1.0625rem; line-height: 1.6; }
@media (min-width: 800px) {
	.fat { grid-template-columns: 1fr 1fr; }
	.fat__item:nth-child(odd) { padding-right: clamp(24px, 4vw, 64px); border-right: 1px solid #e3ded7; }
	.fat__item:nth-child(even) { padding-left: clamp(24px, 4vw, 64px); }
}

/* --- 04 reforma: faixa escura, linha do tempo de três marcos --- */
.rf__cab { max-width: 780px; margin-bottom: clamp(40px, 5vw, 64px); }
.rf__titulo { max-width: 24ch; }
.rf { position: relative; list-style: none; margin: 0; padding: 0; display: grid; gap: 34px; }
.rf::before { content: ""; position: absolute; left: 21px; top: 22px; bottom: 22px; width: 1px; background: rgba(255, 255, 255, 0.28); transform-origin: center top; }
.rf__item { position: relative; padding-left: 68px; }
.rf__n { position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: #19343d; border: 1.5px solid #f3b3ae; color: #fff; font-weight: 700; }
.rf__t { margin: 8px 0 8px; font-size: 1.25rem; font-weight: 600; color: #fff; }
.rf__d { margin: 0; max-width: 34ch; color: #c9d6db; line-height: 1.6; }
@media (min-width: 900px) {
	.rf { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(28px, 3vw, 48px); }
	.rf::before { left: 22px; right: 0; top: 22px; bottom: auto; width: auto; height: 1px; background: linear-gradient(to right, rgba(243, 179, 174, 0.7), rgba(255, 255, 255, 0.22) 60%); transform-origin: left center; }
	.rf__item { padding-left: 0; }
	.rf__n { position: relative; margin-bottom: 22px; }
	.rf__t { margin-top: 0; }
}
.rf__mais { margin-top: clamp(36px, 4vw, 52px); }
.rf__regras p { margin: 0 0 12px; color: #dbe4e7; line-height: 1.65; }
.rf__regras { max-width: 880px; }

/* --- 05 o que é analisado: texto à esquerda, lista à direita --- */
@media (min-width: 1000px) { .sv--docs-lista .docs { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); align-items: start; } }
.docs__cab { margin-bottom: 0; }
.docs__obs { margin: 24px 0 0; padding-left: 14px; border-left: 3px solid var(--pz-red); color: var(--ink-soft); font-size: 0.9375rem; line-height: 1.55; }

/* --- chamada final com telefone; nota dos outros serviços --- */
.sv-cta__fone { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; margin-top: 18px; color: #fff; font-size: 1.125rem; font-weight: 700; text-decoration: none; }
.sv-cta__fone .ico-fone { color: #f3b3ae; }
.sv-cta__fone:focus-visible { outline: 3px solid #f3b3ae; outline-offset: 3px; border-radius: 6px; }
.rel__nota { margin: 10px 0 0; color: var(--ink-soft); font-size: 0.9375rem; }

/* --- entradas --- */
@media (prefers-reduced-motion: no-preference) {
	.entra .fat__item,
	.entra .rf__item { opacity: 0; translate: 0 20px; }
	.entra .rf::before { transform: scaleY(0); }
	.entra .rf__mais { opacity: 0; }
	.entra .sv-cta .sv-cta__fone { opacity: 0; }
	.entra .is-vis .fat__item { opacity: 1; translate: 0 0; transition: opacity 0.55s var(--ent-ease), translate 0.55s var(--ent-ease); }
	.entra .is-vis .fat__item:nth-child(1) { transition-delay: 0.15s; }
	.entra .is-vis .fat__item:nth-child(2) { transition-delay: 0.25s; }
	.entra .is-vis .fat__item:nth-child(3) { transition-delay: 0.35s; }
	.entra .is-vis .fat__item:nth-child(4) { transition-delay: 0.45s; }
	.entra .is-vis .rf::before { transform: none; transition: transform 0.9s var(--ent-ease) 0.3s; }
	.entra .is-vis .rf__item { opacity: 1; translate: 0 0; transition: opacity 0.6s var(--ent-ease), translate 0.6s var(--ent-ease); }
	.entra .is-vis .rf__item:nth-child(1) { transition-delay: 0.35s; }
	.entra .is-vis .rf__item:nth-child(2) { transition-delay: 0.6s; }
	.entra .is-vis .rf__item:nth-child(3) { transition-delay: 0.85s; }
	.entra .is-vis .rf__mais { opacity: 1; transition: opacity 0.6s var(--ent-ease) 1s; }
	.entra .sv-cta.is-vis .sv-cta__fone { opacity: 1; transition: opacity 0.6s var(--cta-ease) 0.55s; }
	@media (min-width: 900px) { .entra .rf::before { transform: scaleX(0); } }
}
/* âncoras dentro da página param abaixo da barra fixa, não por baixo dela */
#conteudo section[id] { scroll-margin-top: 112px; }
/* a película de luz é para fotografia; sobre a arte ela só suja o canto */
.capa-foto--arte .capa-foto__img::after { display: none; }
.sv--fundo-bege .regra-card summary .ico { color: var(--pz-red); }

/* ===========================================================
   IMPOSTO DE RENDA DE APOSENTADOS NO EXTERIOR (17/10/2026)
   Capa 100% tipográfica: o "25%" é a imagem. Comparação antes/depois,
   descontos anteriores em três verificações, documentos em bege.
   =========================================================== */
/* --- capa: texto 55%, número 45% --- */
.capa-foto--arte-aliquota { background: radial-gradient(48% 70% at 80% 52%, #f1ebe2 0%, #faf9f7 70%) #faf9f7; }
.capa-foto--arte-aliquota .capa-foto__titulo { font-size: clamp(2.4rem, 4.3vw, 4rem); line-height: 1.08; text-wrap: balance; max-width: 15ch; }
.capa-foto--arte-aliquota .capa-foto__img { -webkit-mask-image: none; mask-image: none; justify-content: flex-start; }
@media (min-width: 1000px) {
	.capa-foto--arte-aliquota .capa-foto__img { width: 45%; padding: 24px max(var(--gut), calc((100vw - var(--shell)) / 2 + var(--gut))) 24px clamp(24px, 3vw, 56px); }
	.capa-foto--arte-aliquota .capa-foto__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 0.82fr); }
}
.arte-25 { position: relative; display: flex; flex-direction: column; align-items: flex-start; }
/* o desenho fica à direita do número, sem passar por trás dele */
.arte-25__geo { position: absolute; left: calc(100% + clamp(24px, 3vw, 48px)); top: 18%; width: clamp(80px, 7vw, 120px); height: auto; opacity: 0.9; }
.arte-25__rot { position: relative; margin-bottom: 4px; padding-left: 2px; color: #52646c; font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; }
.arte-25__num { position: relative; display: flex; align-items: flex-start; overflow: hidden; padding-bottom: 0.04em; line-height: 0.92; }
.arte-25__dig { font-size: clamp(6rem, 13vw, 12.5rem); font-weight: 700; letter-spacing: -0.05em; color: #19343d; }
.arte-25__pct { margin: 0.12em 0 0 0.04em; font-size: clamp(3rem, 6.4vw, 6.25rem); font-weight: 600; line-height: 1; color: var(--pz-red); }
.arte-25__linha { display: block; width: min(320px, 70%); height: 1px; margin: 22px 0 18px; background: var(--pz-red); transform-origin: left center; }
.arte-25__leg, .arte-25__tema { color: #52646c; font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; line-height: 1.5; max-width: 30ch; }
.arte-25__tema { margin-top: 6px; color: #19343d; }
@media (max-width: 999px) {
	/* no celular o número vem depois do texto, menor, sem disputar a leitura */
	.capa-foto--arte-aliquota { display: flex; flex-direction: column; }
	.capa-foto--arte-aliquota .capa-foto__img { order: 2; height: auto; padding: 8px var(--gut) 0; -webkit-mask-image: none; mask-image: none; }
	.capa-foto--arte-aliquota .capa-foto__grid { order: 1; margin-top: 0; }
	.arte-25__dig { font-size: clamp(4.5rem, 24vw, 7rem); }
	.arte-25__pct { font-size: clamp(2.25rem, 12vw, 3.5rem); }
	.arte-25__geo { display: none; }
}
@media (prefers-reduced-motion: no-preference) {
	.capa-foto--arte-aliquota .capa-foto__img { animation: none; }
	.arte-25__rot { animation: capa-foto-luz 0.6s var(--ent-ease) 0.2s both; }
	.arte-25__dig { animation: arte-25-sobe 0.9s var(--ent-ease) 0.3s both; }
	.arte-25__pct { animation: capa-foto-luz 0.6s var(--ent-ease) 0.95s both; }
	.arte-25__linha { animation: arte-25-linha 0.7s var(--ent-ease) 1s both; }
	.arte-25__leg, .arte-25__tema { animation: capa-foto-luz 0.6s var(--ent-ease) 1.15s both; }
	.arte-25__geo { animation: capa-foto-luz 1s var(--ent-ease) 0.6s both; }
}
@keyframes arte-25-sobe { from { opacity: 0; transform: translateY(70%); } }
@keyframes arte-25-linha { from { transform: scaleX(0); } }

/* --- 01 comparação --- */
.sv--comparacao { background: #faf9f7; padding: clamp(56px, 7vw, 104px) 0; }
.capa-foto + .sv--comparacao { padding-top: clamp(40px, 5vw, 72px); }
.cmp { display: grid; gap: 18px; align-items: stretch; }
@media (min-width: 900px) { .cmp { grid-template-columns: minmax(0, 1fr) 72px minmax(0, 1fr); gap: 0; } }
.cmp__card { display: flex; flex-direction: column; padding: clamp(28px, 3vw, 44px); border-radius: 16px; border: 1px solid #e8e3dc; background: #fff; box-shadow: 0 1px 2px rgba(25, 52, 61, 0.04), 0 14px 32px -28px rgba(25, 52, 61, 0.25); }
.cmp__ico { display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: 22px; border-radius: 50%; background: #fdecea; color: var(--pz-red); }
.cmp__ico .ico { width: 24px; height: 24px; }
.cmp__rot { margin: 0 0 8px; font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: #52646c; }
.cmp__t { margin: 0 0 12px; font-size: clamp(2rem, 3.4vw, 2.875rem); line-height: 1.05; font-weight: 700; letter-spacing: -0.02em; color: var(--pz-red); }
.cmp__d { margin: 0 0 20px; max-width: 40ch; color: var(--ink-soft); font-size: 1.0625rem; line-height: 1.6; }
.cmp__lei { margin: auto 0 0; padding-top: 14px; border-top: 1px solid #efebe5; color: #52646c; font-size: 0.875rem; }
.cmp__card--depois { background: #19343d; border-color: #19343d; color: #c9d6db; }
.cmp__card--depois .cmp__ico { background: rgba(243, 179, 174, 0.14); color: #f3b3ae; }
.cmp__card--depois .cmp__rot { color: #f3b3ae; }
.cmp__card--depois .cmp__t { color: #fff; }
.cmp__card--depois .cmp__d { color: #dbe4e7; }
.cmp__card--depois .cmp__lei { color: #c9d6db; border-top-color: rgba(255, 255, 255, 0.14); }
.cmp__seta { display: flex; align-items: center; justify-content: center; color: var(--pz-red); }
.cmp__linha { display: block; width: 40px; height: 1px; background: #d3d8da; transform-origin: left center; }
@media (max-width: 899px) { .cmp__seta { height: 28px; rotate: 90deg; } .cmp__linha { width: 18px; } }
.cmp__nota { display: flex; align-items: flex-start; gap: 10px; margin: 26px 0 0; max-width: 70ch; color: #19343d; font-size: 1rem; font-weight: 600; line-height: 1.55; }
.cmp__nota .ico { flex: none; width: 20px; height: 20px; margin-top: 2px; color: var(--pz-red); }
.cmp__mais { margin-top: 22px; }
.cmp__mais summary { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; list-style: none; cursor: pointer; color: #19343d; font-weight: 700; border-bottom: 1px solid rgba(25, 52, 61, 0.35); }
.cmp__mais summary::-webkit-details-marker { display: none; }
.cmp__mais summary .btn__seta { width: 20px; height: 12px; color: var(--pz-red); transition: transform 0.3s var(--ent-ease); }
.cmp__mais summary:hover .btn__seta { transform: translateX(4px); }
.cmp__mais[open] summary .btn__seta { transform: rotate(90deg); }
.cmp__mais summary:focus-visible { outline: 3px solid var(--red-ink); outline-offset: 4px; border-radius: 4px; }
.cmp__mais ul { list-style: none; margin: 18px 0 0; padding: 4px 24px; max-width: 900px; border-radius: 14px; background: #fff; border: 1px solid #e8e3dc; }
.cmp__mais li { padding: 14px 0; border-bottom: 1px solid #efebe5; color: var(--ink-soft); line-height: 1.6; }
.cmp__mais li:last-child { border-bottom: 0; }
.cmp__mais li strong { color: #19343d; }
@media (hover: hover) and (pointer: fine) {
	.cmp__card { transition: transform 0.3s var(--ent-ease), box-shadow 0.3s var(--ent-ease); }
	.cmp__card:hover { transform: translateY(-4px); box-shadow: 0 1px 2px rgba(25, 52, 61, 0.04), 0 24px 44px -28px rgba(25, 52, 61, 0.35); }
}

/* --- 03 descontos anteriores --- */
.sv--descontos { background: #faf9f7; padding: clamp(64px, 8vw, 112px) 0; }
.dsc { display: grid; gap: clamp(40px, 5vw, 72px); align-items: center; }
@media (min-width: 1000px) { .dsc { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); } .dsc__graf { padding: clamp(28px, 2.8vw, 40px); } }
.dsc__texto { margin-bottom: 0; }
.dsc__apoio { margin: 18px 0 0; max-width: 46ch; color: var(--ink-soft); font-size: 1rem; line-height: 1.6; }
.dsc__link { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; margin-top: 22px; color: var(--red-ink); font-weight: 700; text-decoration: none; border-bottom: 1px solid rgba(217, 28, 17, 0.4); }
.dsc__link .btn__seta { width: 20px; height: 12px; transition: transform 0.3s var(--ent-ease); }
.dsc__link:hover .btn__seta { transform: translateX(4px); }
.dsc__link:focus-visible { outline: 3px solid var(--red-ink); outline-offset: 4px; border-radius: 4px; }
.dsc__graf { padding: clamp(28px, 3.4vw, 48px); border-radius: 20px; background: #fff; border: 1px solid #ebe6df; }
.dsc__passos { position: relative; list-style: none; margin: 0; padding: 0; display: grid; gap: 28px; }
.dsc__n { display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: 18px; border-radius: 50%; background: #fff; border: 1.5px solid #19343d; color: var(--pz-red); font-weight: 700; font-variant-numeric: tabular-nums; position: relative; z-index: 1; }
.dsc__t { margin: 0 0 6px; font-size: 1.1875rem; font-weight: 600; color: #19343d; }
.dsc__d { margin: 0; color: var(--ink-soft); font-size: 1rem; line-height: 1.55; }
@media (min-width: 640px) {
	.dsc__passos { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(18px, 2vw, 28px); }
	.dsc__passos::before { content: ""; position: absolute; left: 24px; right: 24px; top: 24px; height: 1px; background: linear-gradient(to right, #19343d, rgba(25, 52, 61, 0.25)); transform-origin: left center; }
}
.dsc__obs { margin: 26px 0 0; padding-top: 18px; border-top: 1px solid #efebe5; color: var(--ink-soft); font-size: 0.9375rem; line-height: 1.55; }

/* --- 04 documentos em bege --- */
.sv--docs.sv--fundo-bege { background: #f4f2ee; }

/* --- entradas --- */
@media (prefers-reduced-motion: no-preference) {
	.entra .cmp__card,
	.entra .dsc__passo { opacity: 0; translate: 0 20px; }
	.entra .dsc__passo { translate: 0 16px; }
	.entra .cmp__linha { transform: scaleX(0); }
	.entra .dsc__passos::before { transform: scaleX(0); }
	.entra .is-vis .cmp__card { opacity: 1; translate: 0 0; transition: opacity 0.6s var(--ent-ease), translate 0.6s var(--ent-ease), transform 0.3s var(--ent-ease), box-shadow 0.3s var(--ent-ease); }
	.entra .is-vis .cmp__card--antes { transition-delay: 0.15s, 0.15s, 0s, 0s; }
	.entra .is-vis .cmp__card--depois { transition-delay: 0.45s, 0.45s, 0s, 0s; }
	.entra .is-vis .cmp__linha { transform: none; transition: transform 0.4s var(--ent-ease) 0.35s; }
	.entra .is-vis .dsc__passos::before { transform: none; transition: transform 0.7s var(--ent-ease) 0.25s; }
	.entra .is-vis .dsc__passo { opacity: 1; translate: 0 0; transition: opacity 0.55s var(--ent-ease), translate 0.55s var(--ent-ease); }
	.entra .is-vis .dsc__passo:nth-child(1) { transition-delay: 0.3s; }
	.entra .is-vis .dsc__passo:nth-child(2) { transition-delay: 0.42s; }
	.entra .is-vis .dsc__passo:nth-child(3) { transition-delay: 0.54s; }
}
/* no celular o texto vem primeiro: precisa do respiro inteiro da barra */
@media (max-width: 999px) { .capa-foto--arte-aliquota { padding-top: calc(var(--marco-topo) + 20px); } }

/* ===========================================================
   CONCESSÃO DE APOSENTADORIA no layout "serviço" (17/10/2026)
   Para quem já pediu: situação do pedido, linha do tempo ilustrativa,
   exigência (com foto) e pedido negado (faixa escura).
   =========================================================== */
/* --- capa: arte do requerimento e link discreto ao portal oficial --- */
.capa-foto--arte-requerimento { background: radial-gradient(55% 75% at 76% 50%, #f1ece4 0%, #faf9f7 66%) #faf9f7; }
.capa-foto--arte-requerimento .capa-foto__img { -webkit-mask-image: none; mask-image: none; }
@media (min-width: 1000px) { .capa-foto--arte-requerimento .capa-foto__img { width: 45%; padding-right: max(var(--gut), calc((100vw - var(--shell)) / 2)); } }
.arte-req { display: block; width: 100%; height: 100%; max-height: 520px; overflow: visible; }
.arte-req text { font-family: inherit; font-size: 16px; font-weight: 600; fill: #52646c; }
.arte-req__m--3 text { fill: #b81d18; }
@media (max-width: 999px) {
	.capa-foto--arte-requerimento .capa-foto__img { height: clamp(200px, 50vw, 300px); padding: 8px 16px 0; -webkit-mask-image: linear-gradient(to bottom, #000 72%, transparent 100%); mask-image: linear-gradient(to bottom, #000 72%, transparent 100%); }
}
@media (max-width: 699px) { .arte-req text { display: none; } }
@media (prefers-reduced-motion: no-preference) {
	.capa-foto--arte-requerimento .capa-foto__img { animation: none; }
	.arte-req__doc { animation: arte-req-sobe 0.9s var(--ent-ease) 0.25s both; }
	.arte-req__linhas path { stroke-dasharray: 1; animation: arte-desenha 0.7s var(--ent-ease) both; }
	.arte-req__linhas path:nth-child(1) { animation-delay: 0.45s; }
	.arte-req__linhas path:nth-child(2) { animation-delay: 0.52s; }
	.arte-req__linhas path:nth-child(3) { animation-delay: 0.59s; }
	.arte-req__linhas path:nth-child(4) { animation-delay: 0.66s; }
	.arte-req__linhas path:nth-child(5) { animation-delay: 0.73s; }
	.arte-req__linhas path:nth-child(6) { animation-delay: 0.8s; }
	.arte-req__fio { stroke-dasharray: 1; animation: arte-desenha 0.9s var(--ent-ease) 0.4s both; }
	.arte-req__m { animation: capa-foto-luz 0.5s var(--ent-ease) both; }
	.arte-req__m--1 { animation-delay: 0.5s; }
	.arte-req__m--2 { animation-delay: 0.7s; }
	.arte-req__m--3 { animation-delay: 0.9s; }
	.arte-req__m--4 { animation-delay: 1.1s; }
	.arte-req__selo { animation: capa-foto-luz 0.6s var(--ent-ease) 1s both; }
}
@keyframes arte-req-sobe { from { opacity: 0; transform: translateY(18px); } }
.capa-foto__externo { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; color: var(--ink-soft); font-size: 0.9375rem; font-weight: 600; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.capa-foto__externo:hover { color: #19343d; }
.capa-foto__externo:focus-visible { outline: 3px solid var(--red-ink); outline-offset: 3px; border-radius: 4px; }
@media (min-width: 1000px) { .capa-foto__linha:has(.capa-foto__externo) { flex-wrap: wrap; } }

/* --- 01 situação do pedido: bege, depois da capa com respiro inteiro --- */
.capa-foto + .sv--momentos.sv--fundo-bege { padding-top: clamp(64px, 8vw, 112px); }
.sv--momentos.sv--fundo-bege .mom__ico { background: #fdecea; }

/* --- 02 análise: observação e área expansível --- */
.req__nota { display: flex; align-items: flex-start; gap: 10px; margin: clamp(30px, 3.4vw, 44px) 0 0; max-width: 70ch; color: #19343d; font-weight: 600; line-height: 1.55; }
.req__nota .ico { flex: none; width: 20px; height: 20px; margin-top: 2px; color: var(--pz-red); }
.req__mais { margin-top: 18px; }
@media (min-width: 900px) {
	/* divisórias verticais que se revelam (no lugar da borda fixa) */
	.sv--requisitos .req__item { border-left: 0; position: relative; }
	.sv--requisitos .req__item:not(:first-child)::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 1px; background: #e6e1da; transform-origin: center top; }
}

/* --- 03 andamento: linha do tempo clara, quatro marcos --- */
.sv--andamento { background: #f4f2ee; padding: clamp(64px, 8vw, 112px) 0; }
.rf--claro::before { background: #cfc8bd; }
.rf--claro .rf__n { background: #fff; border-color: #19343d; color: var(--pz-red); font-size: 0.9375rem; font-variant-numeric: tabular-nums; }
.rf--claro .rf__t { color: #19343d; }
.rf--claro .rf__d { color: var(--ink-soft); }
.rf__item--eventual .rf__n { border-style: dashed; border-color: var(--pz-red); }
.rf__tag { display: inline-block; margin-left: 6px; padding: 2px 9px; border-radius: 999px; background: #fdecea; color: #b81d18; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; vertical-align: 2px; }
@media (min-width: 900px) {
	.rf--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.rf--claro::before { background: linear-gradient(to right, #19343d, #cfc8bd 55%); }
}
.and__nota { margin: clamp(30px, 3.4vw, 44px) 0 0; max-width: 70ch; color: var(--ink-soft); font-size: 0.9375rem; line-height: 1.55; }

/* --- 04 exigência: texto e foto à esquerda, checklist à direita --- */
.sv--exigencia { background: #faf9f7; padding: clamp(64px, 8vw, 112px) 0; }
.exi { display: grid; gap: clamp(36px, 5vw, 72px); align-items: start; }
@media (min-width: 1000px) { .exi { grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); } }
.exi__texto .ent__cab { margin-bottom: 28px; }
.exi__apoio { margin: 16px 0 0; max-width: 46ch; color: var(--ink-soft); font-size: 1rem; line-height: 1.6; }
.exi__link { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; margin-top: 14px; color: var(--red-ink); font-weight: 700; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.exi__link:focus-visible { outline: 3px solid var(--red-ink); outline-offset: 3px; border-radius: 4px; }
.exi__foto { margin: 0; border-radius: 16px; overflow: hidden; aspect-ratio: 4 / 3; max-height: 340px; }
.exi__foto picture, .exi__foto img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 60% 35%; }
@media (min-width: 1000px) { .exi__lista { margin-top: 8px; } }

/* --- 05 pedido negado: faixa escura, dois blocos e o prazo --- */
.neg__apoio { margin: 0; max-width: 46ch; color: #c9d6db; font-size: 1rem; line-height: 1.6; }
.neg__lado { display: grid; gap: 16px; }
.neg__bloco { padding: clamp(22px, 2.4vw, 30px); border-radius: 16px; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.12); }
.neg__ico { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 14px; border-radius: 50%; background: rgba(243, 179, 174, 0.14); color: #f3b3ae; }
.neg__ico .ico { width: 22px; height: 22px; }
.neg__t { margin: 0 0 6px; font-size: 1.25rem; font-weight: 600; color: #fff; }
.neg__d { margin: 0; color: #dbe4e7; line-height: 1.6; }
.neg__prazo { display: flex; align-items: flex-start; gap: 10px; margin: 8px 0 0; padding: 16px 18px; border-radius: 12px; border-left: 3px solid #f3b3ae; background: rgba(255, 255, 255, 0.04); color: #fff; font-weight: 600; line-height: 1.55; }
.neg__prazo .ico { flex: none; width: 20px; height: 20px; margin-top: 2px; color: #f3b3ae; }
.neg__obs { margin: 0; color: #c9d6db; font-size: 0.9375rem; line-height: 1.55; }

/* --- entradas --- */
@media (prefers-reduced-motion: no-preference) {
	.entra .neg__lado > *,
	.entra .exi__lista li,
	.entra .exi__foto { opacity: 0; translate: 0 20px; }
	.entra .exi__lista li { translate: 0 12px; }
	.entra .sv--requisitos .req__item::before { transform: scaleY(0); }
	.entra .is-vis .neg__lado > *,
	.entra .is-vis .exi__lista li,
	.entra .is-vis .exi__foto { opacity: 1; translate: 0 0; transition: opacity 0.6s var(--ent-ease), translate 0.6s var(--ent-ease); }
	.entra .is-vis .neg__lado > :nth-child(1) { transition-delay: 0.25s; }
	.entra .is-vis .neg__lado > :nth-child(2) { transition-delay: 0.4s; }
	.entra .is-vis .neg__lado > :nth-child(3) { transition-delay: 0.55s; }
	.entra .is-vis .neg__lado > :nth-child(4) { transition-delay: 0.65s; }
	.entra .is-vis .exi__lista li:nth-child(1) { transition-delay: 0.2s; }
	.entra .is-vis .exi__lista li:nth-child(2) { transition-delay: 0.3s; }
	.entra .is-vis .exi__lista li:nth-child(3) { transition-delay: 0.4s; }
	.entra .is-vis .exi__lista li:nth-child(4) { transition-delay: 0.5s; }
	.entra .is-vis .exi__foto { transition-delay: 0.3s; }
	.entra .is-vis.sv--requisitos .req__item::before { transform: none; transition: transform 0.5s var(--ent-ease) 0.3s; }
	/* linha do tempo: 4 marcos em ~1,1s */
	.entra .is-vis .rf--4 .rf__item:nth-child(4) { transition-delay: 1.05s; }
}

/* ===========================================================
   BENEFÍCIOS POR INCAPACIDADE, com foco em AUXÍLIO-ACIDENTE (17/10/2026)
   Capa com a arte da capacidade; "o que é" com divisórias; os três
   requisitos; não basta × pode merecer análise; situações 2 × 2.
   =========================================================== */
/* --- capa --- */
.capa-foto--arte-capacidade { background: radial-gradient(55% 75% at 76% 50%, #f1ece4 0%, #faf9f7 66%) #faf9f7; }
.capa-foto--arte-capacidade .capa-foto__titulo { font-size: clamp(2.3rem, 4vw, 3.75rem); line-height: 1.08; text-wrap: balance; max-width: 16ch; }
.capa-foto--arte-capacidade .capa-foto__img { -webkit-mask-image: none; mask-image: none; }
@media (min-width: 1000px) {
	.capa-foto--arte-capacidade .capa-foto__img { width: 45%; padding-right: max(var(--gut), calc((100vw - var(--shell)) / 2)); }
	.capa-foto--arte-capacidade .capa-foto__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 0.82fr); }
}
.arte-cap { display: block; width: 100%; height: 100%; max-height: 500px; overflow: visible; }
.arte-cap text { font-family: inherit; fill: #52646c; }
.arte-cap__rot { font-size: 13px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; fill: #19343d !important; }
.arte-cap__leg { font-size: 15px; font-weight: 600; }
.arte-cap__red { font-size: 14px; font-weight: 700; fill: #b81d18 !important; }
.arte-cap__cheio { transform-box: fill-box; transform-origin: left center; }
@media (max-width: 999px) {
	.capa-foto--arte-capacidade .capa-foto__img { height: clamp(200px, 50vw, 300px); padding: 8px 16px 0; -webkit-mask-image: linear-gradient(to bottom, #000 72%, transparent 100%); mask-image: linear-gradient(to bottom, #000 72%, transparent 100%); }
}
@media (prefers-reduced-motion: no-preference) {
	.capa-foto--arte-capacidade .capa-foto__img { animation: none; }
	.arte-cap__card, .arte-cap__rot { animation: arte-req-sobe 0.8s var(--ent-ease) 0.25s both; }
	.arte-cap__linha--1 .arte-cap__leg { animation: capa-foto-luz 0.5s var(--ent-ease) 0.45s both; }
	.arte-cap__linha--1 .arte-cap__cheio { animation: arte-cap-enche 0.9s var(--ent-ease) 0.5s both; }
	.arte-cap__linha--2 .arte-cap__leg { animation: capa-foto-luz 0.5s var(--ent-ease) 0.75s both; }
	.arte-cap__cheio--2 { animation: arte-cap-enche 0.9s var(--ent-ease) 0.8s both !important; }
	.arte-cap__perda { animation: capa-foto-luz 0.5s var(--ent-ease) 1.35s both; }
	.arte-cap__marca { animation: capa-foto-luz 0.5s var(--ent-ease) 1.5s both; }
}
@keyframes arte-cap-enche { from { transform: scaleX(0); } }

/* --- 01 o que é: bege, texto à esquerda, três blocos com divisórias --- */
.sv--oque { background: #f4f2ee; padding: clamp(64px, 8vw, 112px) 0; }
.capa-foto + .sv--oque { padding-top: clamp(64px, 8vw, 112px); }
.oq { display: grid; gap: clamp(36px, 5vw, 72px); align-items: start; }
@media (min-width: 1000px) { .oq { grid-template-columns: minmax(0, 1fr) minmax(0, 0.95fr); } }
.oq__texto { margin-bottom: 0; }
.oq__apoio { margin: 18px 0 0; max-width: 48ch; color: var(--ink-soft); font-size: 1rem; line-height: 1.6; }
.oq__blocos { list-style: none; margin: 0; padding: 0; border-top: 1px solid #ddd6cc; }
.oq__bloco { position: relative; padding: 24px 0 24px 22px; border-bottom: 1px solid #ddd6cc; }
.oq__bloco::before { content: ""; position: absolute; left: 0; top: 28px; width: 8px; height: 8px; border-radius: 50%; background: #19343d; }
.oq__t { margin: 0 0 6px; font-size: 1.1875rem; font-weight: 600; color: #19343d; }
.oq__d { margin: 0; color: var(--ink-soft); line-height: 1.6; }
.oq__bloco--alerta::before { background: var(--pz-red); }
.oq__bloco--alerta .oq__t { color: #b81d18; }
.oq__mais { margin-top: 20px; }

/* --- 02 requisitos em fundo quente --- */
.sv--dependentes.sv--fundo-quente { background: #faf9f7; }

/* --- 03 confusões: dois blocos com ✕ e ✓ --- */
.sv--confusoes { background: #fff; padding: clamp(64px, 8vw, 112px) 0; }
.cf { display: grid; gap: 20px; }
@media (min-width: 900px) { .cf { grid-template-columns: 1fr 1fr; gap: 24px; } }
.cf__bloco { padding: clamp(28px, 3vw, 44px); border-radius: 16px; border: 1px solid #e8e3dc; background: #faf9f7; }
.cf__t { margin: 0 0 20px; font-size: clamp(1.375rem, 2vw, 1.625rem); font-weight: 700; color: #19343d; }
.cf__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.cf__lista li { display: grid; grid-template-columns: 28px 1fr; gap: 12px; align-items: start; color: var(--ink-soft); font-size: 1.0625rem; line-height: 1.5; }
.cf__ico { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: #ece8e2; color: #52646c; }
.cf__bloco--sim { background: #19343d; border-color: #19343d; }
.cf__bloco--sim .cf__t { color: #fff; }
.cf__bloco--sim .cf__lista li { color: #dbe4e7; }
.cf__bloco--sim .cf__ico { background: rgba(243, 179, 174, 0.16); color: #f3b3ae; }
@media (hover: hover) and (pointer: fine) {
	.cf__bloco { transition: transform 0.3s var(--ent-ease), box-shadow 0.3s var(--ent-ease); }
	.cf__bloco:hover { transform: translateY(-3px); box-shadow: 0 22px 44px -30px rgba(25, 52, 61, 0.35); }
}

/* --- 04 situações: 2 × 2 em bege --- */
.sv--situacoes { background: #f4f2ee; padding: clamp(64px, 8vw, 112px) 0; }
@media (min-width: 760px) { .dep--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; } }
.dep--2 .dep__d { margin-bottom: 0; }

/* --- entradas --- */
@media (prefers-reduced-motion: no-preference) {
	.entra .oq__bloco,
	.entra .cf__bloco,
	.entra .cf__lista li { opacity: 0; translate: 0 20px; }
	.entra .cf__lista li { translate: 0 10px; }
	.entra .is-vis .oq__bloco,
	.entra .is-vis .cf__lista li { opacity: 1; translate: 0 0; transition: opacity 0.55s var(--ent-ease), translate 0.55s var(--ent-ease); }
	.entra .is-vis .oq__bloco:nth-child(1) { transition-delay: 0.2s; }
	.entra .is-vis .oq__bloco:nth-child(2) { transition-delay: 0.32s; }
	.entra .is-vis .oq__bloco:nth-child(3) { transition-delay: 0.44s; }
	.entra .is-vis .cf__bloco { opacity: 1; translate: 0 0; transition: opacity 0.6s var(--ent-ease), translate 0.6s var(--ent-ease), transform 0.3s var(--ent-ease), box-shadow 0.3s var(--ent-ease); }
	.entra .is-vis .cf__bloco--nao { transition-delay: 0.15s, 0.15s, 0s, 0s; }
	.entra .is-vis .cf__bloco--sim { transition-delay: 0.3s, 0.3s, 0s, 0s; }
	.entra .is-vis .cf__lista li:nth-child(1) { transition-delay: 0.45s; }
	.entra .is-vis .cf__lista li:nth-child(2) { transition-delay: 0.53s; }
	.entra .is-vis .cf__lista li:nth-child(3) { transition-delay: 0.61s; }
	.entra .is-vis .cf__lista li:nth-child(4) { transition-delay: 0.69s; }
	.entra .is-vis .cf__lista li:nth-child(5) { transition-delay: 0.77s; }
	.entra .is-vis .dep--2 .dep__card:nth-child(4) { transition-delay: 0.56s, 0.56s, 0s, 0s, 0s; }
}
/* o ícone do telefone não encolhe quando a linha aperta (com um link
   longo ao lado, ele chegava a 0px de largura) */
.capa-foto__fone .ico-fone { flex: none; }
@media (min-width: 1000px) { .capa-foto--arte-capacidade .capa-foto__linha { flex-wrap: wrap; } }
@media (max-width: 699px) { .arte-cap text { display: none; } }

/* ===========================================================
   SALÁRIO-MATERNIDADE no layout "serviço" (17/10/2026)
   Acolhedor sem ser infantil: a mesma paleta do site, nada de rosa.
   =========================================================== */
/* --- 01 o número em destaque --- */
.sv--numero { background: #faf9f7; padding: clamp(56px, 7vw, 104px) 0; }
.capa-foto + .sv--numero { padding-top: clamp(48px, 6vw, 88px); }
.nu { display: grid; gap: clamp(36px, 5vw, 72px); align-items: center; }
@media (min-width: 1000px) { .nu { grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr); } }
.nu__texto { margin-bottom: 0; }
.nu__fig { padding: clamp(32px, 4vw, 56px); border-radius: 20px; background: #f4f2ee; }
.nu__num { display: flex; align-items: baseline; gap: 14px; margin: 0; overflow: hidden; padding-bottom: 0.04em; line-height: 0.95; }
.nu__dig { font-size: clamp(5rem, 11vw, 9.5rem); font-weight: 700; letter-spacing: -0.05em; color: #19343d; }
.nu__un { font-size: clamp(1.5rem, 2.6vw, 2.25rem); font-weight: 600; color: #19343d; }
.nu__linha { display: block; width: min(260px, 60%); height: 2px; margin: 22px 0 18px; background: var(--pz-red); transform-origin: left center; }
.nu__leg { margin: 0; max-width: 38ch; color: #19343d; font-size: 1.0625rem; font-weight: 600; line-height: 1.5; }
.nu__obs { margin: 16px 0 0; padding-top: 16px; border-top: 1px solid #e3ddd4; max-width: 46ch; color: var(--ink-soft); font-size: 0.9375rem; line-height: 1.55; }

/* --- 04 situações: grade 2 × 2 com ícones e números pequenos --- */
.sv--fatores-pequeno { background: #fff; }
.sv--fatores-pequeno .fat__n { min-width: 0; padding-top: 4px; font-size: 0.9375rem; font-weight: 700; letter-spacing: 0.02em; line-height: 1; }
.fat__ico { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 14px; border-radius: 50%; background: #fdecea; color: var(--pz-red); }
.fat__ico .ico { width: 22px; height: 22px; }

/* --- entradas --- */
@media (prefers-reduced-motion: no-preference) {
	.entra .nu__dig { opacity: 0; translate: 0 60%; }
	.entra .nu__un, .entra .nu__leg, .entra .nu__obs { opacity: 0; translate: 0 16px; }
	.entra .nu__linha { transform: scaleX(0); }
	.entra .is-vis .nu__dig { opacity: 1; translate: 0 0; transition: opacity 0.9s var(--ent-ease) 0.2s, translate 0.9s var(--ent-ease) 0.2s; }
	.entra .is-vis .nu__un { opacity: 1; translate: 0 0; transition: opacity 0.6s var(--ent-ease) 0.6s, translate 0.6s var(--ent-ease) 0.6s; }
	.entra .is-vis .nu__linha { transform: none; transition: transform 0.7s var(--ent-ease) 0.75s; }
	.entra .is-vis .nu__leg { opacity: 1; translate: 0 0; transition: opacity 0.6s var(--ent-ease) 0.85s, translate 0.6s var(--ent-ease) 0.85s; }
	.entra .is-vis .nu__obs { opacity: 1; translate: 0 0; transition: opacity 0.6s var(--ent-ease) 1s, translate 0.6s var(--ent-ease) 1s; }
}

/* ===========================================================
   ISENÇÃO DE IR POR DOENÇA GRAVE no layout "serviço" (17/10/2026)
   Capa tipográfica com o "16" (mesma linguagem do "25%" de IR), o teste
   marcável, as 16 doenças, a súmula em faixa escura, negativas e régua.
   =========================================================== */
/* --- capa: mesmo layout da capa do 25% --- */
.capa-foto--arte-lista { background: radial-gradient(48% 70% at 80% 52%, #f1ebe2 0%, #faf9f7 70%) #faf9f7; }
.capa-foto--arte-lista .capa-foto__titulo { font-size: clamp(2.3rem, 4vw, 3.75rem); line-height: 1.08; text-wrap: balance; max-width: 16ch; }
.capa-foto--arte-lista .capa-foto__img { -webkit-mask-image: none; mask-image: none; justify-content: flex-start; }
@media (min-width: 1000px) {
	.capa-foto--arte-lista .capa-foto__img { width: 45%; padding: 24px max(var(--gut), calc((100vw - var(--shell)) / 2 + var(--gut))) 24px clamp(24px, 3vw, 56px); }
	.capa-foto--arte-lista .capa-foto__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 0.82fr); }
}
@media (max-width: 999px) {
	.capa-foto--arte-lista { display: flex; flex-direction: column; padding-top: calc(var(--marco-topo) + 20px); }
	.capa-foto--arte-lista .capa-foto__img { order: 2; height: auto; padding: 8px var(--gut) 0; -webkit-mask-image: none; mask-image: none; }
	.capa-foto--arte-lista .capa-foto__grid { order: 1; margin-top: 0; }
}
.arte-16__un { align-self: flex-end; margin: 0 0 0.35em 0.18em; font-size: clamp(1.5rem, 2.8vw, 2.5rem); font-weight: 600; letter-spacing: -0.01em; color: #19343d; }
@media (prefers-reduced-motion: no-preference) {
	.capa-foto--arte-lista .capa-foto__img { animation: none; }
	.arte-16__un { animation: capa-foto-luz 0.6s var(--ent-ease) 0.95s both; }
}

/* --- 01 o teste --- */
.sv--teste { background: #faf9f7; padding: clamp(56px, 7vw, 104px) 0; }
.capa-foto + .sv--teste { padding-top: clamp(48px, 6vw, 88px); }
.ts { display: grid; gap: 20px; }
@media (min-width: 900px) { .ts { grid-template-columns: 1fr 1fr; gap: 24px; } }
.ts__bloco { display: flex; flex-direction: column; padding: clamp(26px, 3vw, 40px); border-radius: 16px; border: 1px solid #e8e3dc; background: #fff; }
.ts__n { color: var(--pz-red); font-size: 0.9375rem; font-weight: 700; }
.ts__t { margin: 10px 0 8px; font-size: clamp(1.25rem, 1.9vw, 1.5rem); line-height: 1.3; font-weight: 600; color: #19343d; }
.ts__d { margin: 0 0 18px; color: var(--ink-soft); line-height: 1.6; }
.ts__marcar { max-width: none; border-top-width: 1px; border-top-color: #e4ded6; }
.ts__ver { display: inline-flex; align-items: center; gap: 8px; margin-top: auto; min-height: 44px; color: var(--red-ink); font-weight: 700; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.ts__acao { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 32px; margin-top: 24px; padding: clamp(22px, 2.6vw, 30px); border-radius: 16px; background: #f4f2ee; }
.ts__fecho { margin: 0; max-width: 54ch; color: #19343d; font-weight: 600; line-height: 1.55; }
.ts__btn { gap: 12px; }
.ts__btn .btn__seta { width: 20px; height: 12px; transition: transform 0.28s var(--ent-ease); }
@media (hover: hover) and (pointer: fine) { .ts__btn:hover .btn__seta { transform: translateX(4px); } }

/* --- 02 as dezesseis doenças --- */
.sv--doencas { background: #f4f2ee; padding: clamp(64px, 8vw, 112px) 0; }
.dz { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
@media (min-width: 640px) { .dz { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .dz { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; } }
.dz__item { display: flex; flex-direction: column; gap: 4px; padding: 18px 20px; border-radius: 12px; background: #fff; border: 1px solid #e8e3dc; border-left: 3px solid var(--pz-red); }
.dz__nome { font-size: 1.0625rem; font-weight: 600; line-height: 1.35; color: #19343d; }
.dz__ex { color: var(--ink-soft); font-size: 0.9375rem; line-height: 1.45; }

/* --- 03 a súmula, em faixa escura --- */
.sm { display: grid; gap: clamp(32px, 4vw, 64px); align-items: center; }
@media (min-width: 1000px) { .sm { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); } }
.sm__fig { position: relative; margin: 0; padding: clamp(28px, 3.4vw, 48px); border-radius: 20px; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.14); }
.sm__citacao { margin: 0; }
.sm__citacao p { margin: 0; color: #fff; font-size: clamp(1.1875rem, 1.8vw, 1.4375rem); line-height: 1.55; font-weight: 500; }
.sm__fonte { margin-top: 18px; color: #f3b3ae; font-size: 0.875rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.sm__traduz { margin: 20px 0 0; padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, 0.14); color: #dbe4e7; line-height: 1.6; }

/* --- 04 negativas --- */
.sv--negativas { background: #faf9f7; padding: clamp(64px, 8vw, 112px) 0; }
.nv { display: grid; gap: clamp(36px, 5vw, 72px); align-items: start; }
@media (min-width: 1000px) { .nv { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); } }
.nv__texto { margin-bottom: 0; }
.nv__x { display: grid; place-items: center; width: 28px; height: 28px; margin-top: 1px; border-radius: 50%; background: #fdecea; color: var(--red-ink); }

/* --- 05 a régua --- */
.sv--regua { background: #fff; padding: clamp(64px, 8vw, 112px) 0; }
.rg { padding: clamp(24px, 3vw, 40px); border-radius: 20px; background: #f4f2ee; }
.rg .prazo__regua { margin-top: 0; }
.rg__fecho { margin: 22px 0 0; max-width: 70ch; color: var(--ink-soft); line-height: 1.65; }

/* --- 06 documentos marcáveis --- */
.docs__marcavel { margin: 0; padding: 0; border: 0; background: none; }
.docs__marcavel .marcar--doc { border-top: 1px solid #ddd6cc; }
.docs__marcavel .marcar__rot strong { color: #19343d; }

/* --- entradas --- */
@media (prefers-reduced-motion: no-preference) {
	.entra .ts__bloco, .entra .dz__item, .entra .sm__fig, .entra .nv__lista li { opacity: 0; translate: 0 18px; }
	.entra .is-vis .ts__bloco, .entra .is-vis .dz__item, .entra .is-vis .sm__fig, .entra .is-vis .nv__lista li { opacity: 1; translate: 0 0; transition: opacity 0.6s var(--ent-ease), translate 0.6s var(--ent-ease); }
	.entra .is-vis .ts__bloco:nth-child(2) { transition-delay: 0.12s; }
	.entra .is-vis .dz__item { transition-delay: calc(0.1s + var(--i, 0) * 0.03s); }
	.entra .is-vis .sm__fig { transition-delay: 0.25s; }
	.entra .is-vis .nv__lista li:nth-child(2) { transition-delay: 0.1s; }
	.entra .is-vis .nv__lista li:nth-child(3) { transition-delay: 0.2s; }
	.entra .is-vis .nv__lista li:nth-child(4) { transition-delay: 0.3s; }
}
/* a régua dos 60 meses, no molde "serviço": a animação antiga esperava
   o contêiner .prazo ser revelado; aqui quem revela é a seção (data-entra)
   (sem script, a régua aparece inteira: .anima sozinha não a esconde aqui) */
.anima .sv--regua .prazo__meses li { transform: none; }
@media (prefers-reduced-motion: no-preference) {
	.entra .sv--regua .prazo__meses li { transform: scaleY(0); transform-origin: bottom center; }
	.entra .sv--regua.is-vis .prazo__meses li { transform: scaleY(1); transition: transform 0.5s var(--ent-ease) calc(0.2s + var(--m) * 12ms); }
}
/* documentos marcáveis: uma coluna, como as outras listas do molde */
.docs__marcavel .marcar--doc { display: block; }
.docs__marcavel .marcar__item { padding-left: 0; }

/* ===========================================================
   ÁREAS DE ATUAÇÃO — a vitrine dos serviços (17/10/2026)
   Capa tipográfica com a arte dos caminhos; os cartões são o centro.
   =========================================================== */
/* --- capa: texto 60%, arte 40%, 600 a 680 px --- */
.capa-foto--arte-caminhos { background: radial-gradient(50% 70% at 82% 50%, #f1ece4 0%, #faf9f7 66%) #faf9f7; }
.capa-foto--arte-caminhos .capa-foto__img { -webkit-mask-image: none; mask-image: none; }
.capa-foto--vitrine .vit__h1 { font-size: clamp(2.5rem, 4.3vw, 4.25rem); line-height: 1.08; text-wrap: balance; max-width: 19ch; }
.capa-foto--vitrine .capa-foto__sub { max-width: 40ch; }
@media (min-width: 1000px) {
	.capa-foto--vitrine { min-height: clamp(600px, 88svh, 680px); }
	.capa-foto--arte-caminhos .capa-foto__img { width: 40%; padding-right: max(var(--gut), calc((100vw - var(--shell)) / 2)); }
	.capa-foto--vitrine .capa-foto__grid { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); }
}
@media (max-width: 999px) {
	.capa-foto--arte-caminhos .capa-foto__img { height: clamp(180px, 46vw, 280px); padding: 8px 16px 0; -webkit-mask-image: linear-gradient(to bottom, #000 72%, transparent 100%); mask-image: linear-gradient(to bottom, #000 72%, transparent 100%); }
}
@media (max-width: 699px) { .arte-cam__aneis, .arte-cam__marcas { display: none; } }
.arte-cam { display: block; width: 100%; height: 100%; max-height: 500px; overflow: visible; }
.btn.vit__ir { gap: 10px; background: #19343d; border-color: #19343d; color: #fff; }
.btn.vit__ir:hover, .btn.vit__ir:focus-visible { background: #102530; border-color: #102530; color: #fff; }
@media (prefers-reduced-motion: no-preference) {
	.capa-foto--arte-caminhos .capa-foto__img { animation: none; }
	.capa-foto--vitrine .vit__h1 { animation: capa-foto-sobe 0.65s var(--ent-ease) 0.15s both; }
	.capa-foto--vitrine .capa-foto__sub { animation-delay: 0.3s; }
	.capa-foto--vitrine .capa-foto__acoes > .btn { animation-delay: 0.45s; }
	.arte-cam__aneis path { stroke-dasharray: 1; animation: arte-desenha 1.2s var(--ent-ease) 0.3s both; }
	.arte-cam__aneis circle, .arte-cam__marcas { animation: capa-foto-luz 0.8s var(--ent-ease) 0.9s both; }
	.arte-cam__linhas path { stroke-dasharray: 1; animation: arte-desenha 1.2s var(--ent-ease) both; }
	.arte-cam__linhas path:nth-child(1) { animation-delay: 0.35s; }
	.arte-cam__linhas path:nth-child(2) { animation-delay: 0.45s; }
	.arte-cam__linhas path:nth-child(3) { animation-delay: 0.55s; }
	.arte-cam__linhas path:nth-child(4) { animation-delay: 0.65s; }
	.arte-cam__origem, .arte-cam__origem-anel { animation: capa-foto-luz 0.5s var(--ent-ease) 0.25s both; }
	.arte-cam__p { animation: capa-foto-luz 0.5s var(--ent-ease) both; }
	.arte-cam__p--1 { animation-delay: 1.4s; }
	.arte-cam__p--2 { animation-delay: 1.5s; }
	.arte-cam__p--3 { animation-delay: 1.6s; }
	.arte-cam__p--4 { animation-delay: 1.7s; }
}

/* --- os serviços: duas colunas de cartões horizontais --- */
.sv--vitrine { background: #f4f2ee; padding: clamp(64px, 8vw, 112px) 0; scroll-margin-top: 96px; }
.capa-foto + .sv--vitrine { padding-top: clamp(64px, 8vw, 112px); }
/* mesmo eixo da capa e das outras seções */
.vit { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }
@media (min-width: 900px) {
	.vit { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
	/* número ímpar de áreas: a última ocupa a linha inteira em vez de sobrar sozinha */
	.vit__item:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
.vit__item { scroll-margin-top: 120px; }
.vit__card {
	display: grid; grid-template-columns: auto 1fr; gap: 22px; align-items: start; height: 100%;
	padding: clamp(26px, 2.6vw, 34px);
	border-radius: 16px; border: 1px solid #e6e5e1; background: #fff;
	box-shadow: 0 1px 2px rgba(25, 52, 61, 0.04);
	color: inherit; text-decoration: none;
}
.vit__ico { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: #fdecea; color: var(--pz-red); }
.vit__ico .ico { width: 26px; height: 26px; }
.vit__txt { display: flex; flex-direction: column; height: 100%; }
.vit__t { font-size: clamp(1.25rem, 1.7vw, 1.4375rem); line-height: 1.3; font-weight: 600; color: #19343d; }
.vit__d { margin-top: 8px; color: var(--ink-soft); font-size: 1.0625rem; line-height: 1.55; }
.vit__ir-link { display: inline-flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 18px; color: var(--red-ink); font-weight: 700; font-size: 0.9375rem; }
.vit__seta { flex: none; }
.vit__card:focus-visible { outline: 3px solid var(--red-ink); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) {
	.vit__card { transition: transform 0.3s var(--ent-ease), border-color 0.3s var(--ent-ease), box-shadow 0.3s var(--ent-ease); }
	.vit__ico, .vit__seta { transition: transform 0.3s var(--ent-ease); }
	.vit__card:hover { transform: translateY(-5px); border-color: rgba(213, 37, 32, 0.35); box-shadow: 0 1px 2px rgba(25, 52, 61, 0.04), 0 26px 48px -30px rgba(25, 52, 61, 0.35); }
	.vit__card:hover .vit__ico { transform: scale(1.06); }
	.vit__card:hover .vit__seta { transform: translate(3px, -3px); }
}
/* celular: ícone menor ao lado do título, cartão mais baixo */
@media (max-width: 559px) {
	.vit__card { gap: 14px; padding: 22px 20px; }
	.vit__ico { width: 44px; height: 44px; }
	.vit__ico .ico { width: 22px; height: 22px; }
	.vit__ir-link { padding-top: 12px; }
}

/* --- encerramento claro --- */
.vit-fim { background: #f4f2ee; padding: clamp(84px, 9vw, 120px) 0; text-align: center; }
.vit-fim__in { display: flex; flex-direction: column; align-items: center; }
.vit-fim__kicker { margin: 0; color: var(--red-ink); font-size: 0.875rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; }
.vit-fim__linha { display: block; width: 56px; height: 2px; margin: 20px 0 24px; background: var(--pz-red); transform-origin: center; }
.vit-fim__titulo { margin: 0 0 16px; max-width: 22ch; font-size: clamp(2rem, 4vw, 3.25rem); line-height: 1.12; font-weight: 600; letter-spacing: -0.02em; color: #19343d; text-wrap: balance; }
.vit-fim__sub { margin: 0 0 36px; max-width: 52ch; color: var(--ink-soft); font-size: clamp(1.0625rem, 1.3vw, 1.1875rem); line-height: 1.6; }
.vit-fim .btn.vit-fim__btn { transition: background 0.28s var(--ent-ease), border-color 0.28s var(--ent-ease), transform 0.28s var(--ent-ease), box-shadow 0.28s var(--ent-ease); }
.vit-fim .btn.vit-fim__btn:hover, .vit-fim .btn.vit-fim__btn:focus-visible { transform: translateY(-3px); box-shadow: 0 16px 34px -14px rgba(23, 130, 63, 0.6); }
.vit-fim .btn.vit-fim__btn:hover .btn__seta { transform: translateX(4px); }
@media (max-width: 699px) { .vit-fim__btn { width: 100%; max-width: 360px; } }

/* --- entradas --- */
@media (prefers-reduced-motion: no-preference) {
	.entra .vit__item { opacity: 0; translate: 0 20px; }
	.entra .is-vis .vit__item { opacity: 1; translate: 0 0; transition: opacity 0.6s var(--ent-ease) calc(0.15s + var(--i, 0) * 0.08s), translate 0.6s var(--ent-ease) calc(0.15s + var(--i, 0) * 0.08s); }
	.entra .vit-fim > .shell > *, .entra .vit-fim .vit-fim__linha { opacity: 0; translate: 0 20px; }
	.entra .vit-fim .vit-fim__linha { translate: 0 0; transform: scaleX(0); }
	.entra .vit-fim.is-vis .vit-fim__kicker { opacity: 1; translate: 0 0; transition: opacity 0.6s var(--ent-ease); }
	.entra .vit-fim.is-vis .vit-fim__linha { opacity: 1; transform: none; transition: opacity 0.4s var(--ent-ease) 0.1s, transform 0.6s var(--ent-ease) 0.1s; }
	.entra .vit-fim.is-vis .vit-fim__titulo { opacity: 1; translate: 0 0; transition: opacity 0.65s var(--ent-ease) 0.15s, translate 0.65s var(--ent-ease) 0.15s; }
	.entra .vit-fim.is-vis .vit-fim__sub { opacity: 1; translate: 0 0; transition: opacity 0.6s var(--ent-ease) 0.3s, translate 0.6s var(--ent-ease) 0.3s; }
	.entra .vit-fim.is-vis .vit-fim__btn { opacity: 1; translate: 0 0; transition: opacity 0.6s var(--ent-ease) 0.45s, translate 0.6s var(--ent-ease) 0.45s, transform 0.28s var(--ent-ease), box-shadow 0.28s var(--ent-ease); }
}
/* capa da vitrine: três linhas de título em toda largura de desktop, 600–680 px */
.capa-foto--vitrine .vit__h1 { font-size: clamp(2.5rem, 4.3vw, 4rem); }
@media (min-width: 1000px) {
	.capa-foto--vitrine { padding-top: calc(var(--marco-topo) + 20px); padding-bottom: 44px; }
	.capa-foto--vitrine .capa-foto__grid { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
	.capa-foto--vitrine .vit__h1 { margin: 20px 0 18px; }
	.capa-foto--vitrine .capa-foto__sub { margin-bottom: 30px; }
}

/* ===========================================================
   O ESCRITÓRIO (refeita em 17/10/2026)
   =========================================================== */
.capa-foto--escritorio .esc__h1 { font-size: clamp(2.5rem, 4.3vw, 4rem); line-height: 1.08; text-wrap: balance; max-width: 15ch; }
.capa-foto--escritorio .capa-foto__sub { max-width: 40ch; }
.capa-foto--escritorio .btn.vit__ir .btn__seta { width: 20px; height: 12px; transition: transform 0.28s var(--ent-ease); }
.capa-foto--escritorio .btn.vit__ir:hover .btn__seta { transform: translateX(4px); }

/* 02 essência */
.sv--essencia { background: #faf9f7; padding: clamp(64px, 8vw, 112px) 0; }
.capa-foto + .sv--essencia { padding-top: clamp(56px, 7vw, 96px); }
.esc__texto p { margin: 0 0 14px; max-width: 52ch; color: var(--ink-soft); font-size: 1.0625rem; line-height: 1.7; }
.esc__texto p:last-child { color: #19343d; font-weight: 600; }


/* 03 princípios em bege */
.sv--dependentes:not(.sv--fundo-quente) { background: #f4f2ee; }

/* quem assina */
.sv--socios { background: #faf9f7; padding: clamp(64px, 8vw, 112px) 0; }
.soc { list-style: none; margin: 0; padding: 0; display: grid; gap: 24px; }
@media (min-width: 760px) { .soc { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.soc__foto { margin: 0 0 18px; aspect-ratio: 1; border-radius: 16px; overflow: hidden; background: #ece8e2; }
.soc__foto picture, .soc__foto img { display: block; width: 100%; height: 100%; object-fit: cover; }
.soc__nome { margin: 0 0 4px; font-size: 1.375rem; font-weight: 600; color: #19343d; }
.soc__papel { margin: 0; color: var(--ink-soft); }
.soc__oab { display: block; margin-top: 2px; font-size: 0.9375rem; }
.soc__bio { margin: 10px 0 0; color: var(--ink-soft); line-height: 1.6; }
.soc__equipe { margin: clamp(28px, 3.4vw, 44px) 0 0; max-width: 70ch; color: var(--ink-soft); line-height: 1.6; }
.soc__equipe a { color: var(--red-ink); font-weight: 700; text-underline-offset: 4px; }

/* 05 áreas, faixa escura */
.esc__areas-btn { display: inline-flex; align-items: center; gap: 12px; min-height: 48px; padding: 14px 26px; border-radius: 999px; background: #fff; color: #19343d; font-weight: 700; text-decoration: none; transition: transform 0.28s var(--ent-ease), box-shadow 0.28s var(--ent-ease); }
.esc__areas-btn .btn__seta { width: 20px; height: 12px; transition: transform 0.28s var(--ent-ease); }
.esc__areas-btn:hover { transform: translateY(-3px); box-shadow: 0 16px 30px -18px rgba(0, 0, 0, 0.6); }
.esc__areas-btn:hover .btn__seta { transform: translateX(4px); }
.esc__areas-btn:focus-visible { outline: 3px solid #f3b3ae; outline-offset: 3px; }
.esc__areas { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
@media (min-width: 640px) { .esc__areas { grid-template-columns: 1fr 1fr; grid-auto-rows: 1fr; } .esc__areas li:last-child:nth-child(odd) { grid-column: 1 / -1; } }
.esc__areas li, .esc__areas a { height: 100%; }
.esc__areas a { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; padding: 12px 16px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.14); background: rgba(255, 255, 255, 0.04); color: #fff; font-weight: 600; text-decoration: none; transition: background 0.25s var(--ent-ease), border-color 0.25s var(--ent-ease); }
.esc__areas .vit__seta { color: #f3b3ae; transition: transform 0.25s var(--ent-ease); }
.esc__areas a:hover { background: rgba(255, 255, 255, 0.09); border-color: rgba(243, 179, 174, 0.5); }
.esc__areas a:hover .vit__seta { transform: translate(3px, -3px); }
.esc__areas a:focus-visible { outline: 3px solid #f3b3ae; outline-offset: 2px; }

@media (prefers-reduced-motion: no-preference) {
	.entra .soc__item, .entra .esc__areas li, .entra .esc__moldura { opacity: 0; translate: 0 20px; }
	.entra .is-vis .soc__item, .entra .is-vis .esc__areas li, .entra .is-vis .esc__moldura { opacity: 1; translate: 0 0; transition: opacity 0.6s var(--ent-ease), translate 0.6s var(--ent-ease); }
	.entra .is-vis .soc__item:nth-child(2) { transition-delay: 0.12s; }
	.entra .is-vis .soc__item:nth-child(3) { transition-delay: 0.24s; }
	.entra .is-vis .esc__areas li { transition-delay: calc(0.2s + var(--i, 0) * 0.05s); }
	.entra .is-vis .esc__moldura { transition-delay: 0.2s; }
}

/* ===========================================================
   FILIAIS — "Onde estamos", com o mapa animado (17/10/2026)
   Sequência de entrada (uma vez, ~2,4s): os contornos se desenham, a
   matriz chega, as linhas saem dela até cada unidade, os pontos chegam
   um a um com um anel que se abre, os nomes aparecem por último. Depois
   disso só a matriz respira, devagar. Hover num ponto o destaca; clique
   leva ao endereço (app.js). Sem movimento para quem pede menos.
   =========================================================== */
.capa-foto--onde { background: radial-gradient(55% 75% at 75% 50%, #f1ece4 0%, #faf9f7 66%) #faf9f7; }
.capa-foto--onde .onde__capa { align-items: center; }
@media (min-width: 1000px) {
	.capa-foto--onde { min-height: clamp(640px, 90svh, 720px); }
	.capa-foto--onde .onde__capa { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); }
}
.onde__h1 { font-size: clamp(2.5rem, 4.3vw, 4.25rem); line-height: 1.08; text-wrap: balance; max-width: 13ch; }
.capa-foto--onde .onde__sub { max-width: 42ch; }
.onde__sub p { margin: 0 0 10px; }
.onde__sub p:first-child { color: #19343d; font-weight: 600; }
.capa-foto--onde .onde__mapa { position: relative; margin: 0; }
.onde__online { position: relative; display: inline-flex; margin-top: 8px !important; margin-left: 4% !important; align-items: center; gap: 10px; margin: 0; padding: 10px 16px; border-radius: 999px; background: #fff; box-shadow: 0 1px 2px rgba(25, 52, 61, 0.06), 0 12px 28px -18px rgba(25, 52, 61, 0.45); color: #19343d; font-size: 0.875rem; font-weight: 700; }
.onde__online-ponto { width: 10px; height: 10px; border-radius: 50%; background: var(--zap); box-shadow: 0 0 0 4px rgba(23, 130, 63, 0.18); }
@media (max-width: 999px) {
	.capa-foto--onde { padding-top: calc(var(--marco-topo) + 20px); }
	.capa-foto--onde .capa-foto__grid { margin-top: 0; }   /* sem foto acima: o texto não sobe */
	.capa-foto--onde .onde__mapa { margin-top: 12px; }
	.onde__online { margin-left: 0 !important; font-size: 0.8125rem; }
}

/* o mapa: Minas é só contexto e se dissolve nas bordas, em vez de terminar
   no corte reto do quadro */
.mapa__arco { fill: none; stroke: var(--pz-red); stroke-width: 1.6; stroke-dasharray: 1; stroke-dashoffset: 0; opacity: 0.45; }
.mapa__halo { fill: none; stroke: var(--pz-red); stroke-width: 2; opacity: 0; transform-box: fill-box; transform-origin: center; pointer-events: none; }
.mapa__ponto--matriz .mapa__halo { stroke: var(--petrol); }
.mapa__ponto circle.mapa__alvo { fill: var(--red-ink); stroke: #fff; stroke-width: 3; transform-box: fill-box; transform-origin: center; transition: transform 0.25s var(--ent-ease); }
.mapa__ponto--matriz circle.mapa__alvo { fill: var(--petrol); }
.mapa__ponto text { transition: fill 0.25s var(--ent-ease); }
.mapa__ponto[data-alvo] { cursor: pointer; }
@media (hover: hover) and (pointer: fine) {
	.mapa__ponto:hover .mapa__alvo { transform: scale(1.35); }
	.mapa__ponto:hover text { fill: var(--red-ink); }
	.mapa__ponto:hover .mapa__guia { opacity: 1; stroke: var(--red-ink); }
}

@media (prefers-reduced-motion: no-preference) {
	.capa-foto--onde .mapa__sp, .capa-foto--onde .mapa__mg { stroke-dasharray: 1; animation: arte-desenha 1.4s var(--ent-ease) 0.1s both, mapa-enche 0.8s var(--ent-ease) 0.9s both; }
	.capa-foto--onde .mapa__mg { animation-delay: 0.25s, 1.05s; }
	.capa-foto--onde .mapa__uf { animation: capa-foto-luz 0.6s var(--ent-ease) 1.1s both; }
	.capa-foto--onde .mapa__arco { animation: arte-desenha 0.9s var(--ent-ease) calc(1.35s + var(--i) * 0.09s) both; }
	.capa-foto--onde .mapa__ponto { animation: mapa-chega 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) calc(1.2s + var(--i) * 0.11s) both; transform-box: fill-box; transform-origin: center; }
	.capa-foto--onde .mapa__ponto text, .capa-foto--onde .mapa__guia { animation: capa-foto-luz 0.5s var(--ent-ease) calc(1.6s + var(--i) * 0.11s) both; }
	.capa-foto--onde .mapa__guia { stroke-dasharray: 1; animation: arte-desenha 0.5s var(--ent-ease) calc(1.6s + var(--i) * 0.11s) both; }
	.capa-foto--onde .mapa__halo { animation: mapa-onda 1.1s var(--ent-ease) calc(1.25s + var(--i) * 0.11s) 1 both; }
	/* depois da chegada, só a matriz respira — devagar */
	.capa-foto--onde .mapa__ponto--matriz .mapa__halo { animation: mapa-onda 1.1s var(--ent-ease) 1.2s 1 both, mapa-respira 3.2s ease-out 2.6s infinite; }
	.onde__online { animation: capa-foto-sobe 0.6s var(--ent-ease) 2.1s both; }
	.onde__online-ponto { animation: mapa-online 2.4s ease-in-out 2.6s infinite; }
}
@keyframes mapa-enche { from { fill-opacity: 0; } }
@keyframes mapa-chega { from { opacity: 0; transform: scale(0.2); } }
@keyframes mapa-onda { 0% { opacity: 0.7; transform: scale(1); } 100% { opacity: 0; transform: scale(3.2); } }
@keyframes mapa-respira { 0% { opacity: 0.45; transform: scale(1); } 70%, 100% { opacity: 0; transform: scale(2.6); } }
@keyframes mapa-online { 0%, 100% { box-shadow: 0 0 0 4px rgba(23, 130, 63, 0.18); } 50% { box-shadow: 0 0 0 7px rgba(23, 130, 63, 0.06); } }

/* unidades */
.sv--unidades { background: #f4f2ee; padding: clamp(64px, 8vw, 112px) 0; scroll-margin-top: 96px; }
.un__cab { margin-bottom: clamp(28px, 3.4vw, 44px); }
.un__cab .onde__cidades { margin-top: 24px; }
/* a setinha do "Ver no mapa" em vermelho escuro: o claro dava 3,85:1 */
.filial__ext { color: var(--red-ink); }

/* ===========================================================
   CALCULADORAS no padrão das áreas (17/10/2026)
   Central: capa com o "3" (mesmo layout do "16" e do "25%"), três
   cartões, três passos. Cada calculadora: capa compacta + o cartão de
   simulação (o mesmo .sv-calc embutido em Planejamento e Revisão).
   =========================================================== */
/* três cartões lado a lado */
@media (min-width: 1000px) { .vit--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .vit--3 .vit__item:last-child:nth-child(odd) { grid-column: auto; } }
.vit--3 .vit__card { grid-template-columns: 1fr; gap: 18px; }
.vit__pergunta { margin-bottom: 8px; color: var(--red-ink); font-size: 0.9375rem; font-weight: 700; line-height: 1.4; }
.capa-foto--calcs .arte-3 .arte-25__dig { padding-right: 0.08em; }

/* capa compacta das calculadoras: título e texto, sem arte */
.capa-foto--calc { min-height: 0 !important; padding-bottom: clamp(28px, 4vw, 48px); }
.capa-foto--calc .capa-foto__grid { grid-template-columns: 1fr !important; }
.capa-foto--calc .capa-foto__texto { max-width: 820px; }
.capa-foto--calc .calc__h1 { font-size: clamp(2.25rem, 4.2vw, 3.75rem); line-height: 1.1; text-wrap: balance; max-width: 20ch; }
.capa-foto--calc .capa-foto__sub { max-width: 62ch; }
@media (max-width: 999px) { .capa-foto--calc { padding-top: calc(var(--marco-topo) + 20px); } .capa-foto--calc .capa-foto__grid { margin-top: 0; } }

/* o formulário, num fundo bege que o destaca da capa */
.sv--simular { background: #f4f2ee; padding: clamp(40px, 5vw, 72px) 0 clamp(64px, 8vw, 104px); }
.sv--simular .sv-calc { margin-top: 0; }
.sv--calc-outras { background: #faf9f7; }
@media (min-width: 1000px) { .vit--3 .vit__pergunta { min-height: 2.8em; } }

/* painel das Calculadoras na barra: três colunas, mais estreito que o de áreas */
.nav__menu--calc { width: min(660px, calc(100vw - 48px)); }
/* quatro calculadoras desde 28/10/2026: grade 2x2 */
.nav__menu--calc .nav__menu-lista { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* dentro do painel o texto quebra linha (a barra proíbe, e a regra vazava) */
.nav__menu .nav__menu-lista a { white-space: normal; }

/* Título da home de 17/10/2026: versos de até 22 caracteres ("Direito
   Previdenciário", "clareza e compromisso."), mais longos que os 17 do
   título anterior. A escala baixa na mesma proporção para cada verso
   continuar numa linha só — a revelação é verso a verso. */
.hero__forte--longo { font-size: min(clamp(1.9rem, 3.15vw, 2.9rem), 7vh); }
@media (max-width: 1000px) { .hero__forte--longo { font-size: clamp(1.25rem, 7vw, 2rem); } }
/* telas muito estreitas: melhor o verso quebrar do que ser cortado */
@media (max-width: 359px) { .hero__forte--longo .hero__verso { white-space: normal; } }
.hero__title:has(.hero__forte--longo) { max-width: none; }
.hero__forte--longo .hero__verso { white-space: nowrap; }


/* ===========================================================
   HERO CINEMATOGRÁFICA DA HOME (17/10/2026) — partes/hero-cinema.php
   -----------------------------------------------------------
   Reproduz a referência que o Lucas mandou (desenhada em 16:9). Tudo no
   desktop é medido em --u = 1% da largura de uma tela 16:9 que caiba na
   janela: em 1672x941 vale 16,72px; numa janela baixa (1538x745) a
   altura manda e tudo encolhe junto, em vez de o título engolir a tela.

   A foto (hero-trio) tem as cores dela. Frações medidas no arquivo:
   rosto da esquerda começa em 24,8% da largura, o da direita termina em
   89,7%; topo da cabeça mais alta em 21% da altura.
   =========================================================== */
.hc {
	--hc-verde: #188247;                    /* 4,86:1 com o branco */
	--hc-ease: cubic-bezier(0.22, 1, 0.36, 1);
	position: relative;
	isolation: isolate;
	overflow: clip;
	background: #0f3338;
	color: #fff;
	padding-top: calc(var(--marco-topo) + clamp(20px, 5vw, 40px));
}
/* petróleo da referência: mais claro à esquerda da foto, fundo no pé */
.hc__fundo {
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background:
		radial-gradient(ellipse 36% 54% at 44% 60%, rgba(40, 98, 102, 0.36), transparent 72%),
		radial-gradient(ellipse 52% 58% at 22% 30%, rgba(30, 82, 88, 0.24), transparent 70%),
		radial-gradient(ellipse 70% 62% at 0% 100%, rgba(4, 20, 24, 0.62), transparent 72%),
		linear-gradient(180deg, #0e3136 0%, #10353a 52%, #0a282c 100%);
}

.hc__in {
	position: relative;
	z-index: 2;
	padding-inline: var(--gut);
}
.hc__texto { max-width: 40rem; }

.hc__kicker {
	display: flex;
	align-items: center;
	gap: 16px;
	margin: 0 0 22px;
	font-size: 0.8125rem;
	font-weight: 500;
	line-height: 1.3;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: #dfe7ea;
}
.hc__fio {
	flex: none;
	width: 48px;
	height: 3px;
	background: #e3302a;
	transform-origin: left center;
}

.hc__titulo {
	margin: 0;
	font-size: clamp(2.125rem, 1.4rem + 3.2vw, 2.75rem);
	font-weight: 700;
	line-height: 1.07;
	letter-spacing: -0.02em;
	color: #fff;
}
/* o verso recorta a revelação; o respiro de 0,16em, devolvido na
   margem, deixa acento e descendente fora do corte */
.hc__verso {
	display: block;
	overflow: clip;
	padding-block: 0.16em;
	margin-block: -0.16em;
}
.hc__sobe { display: block; }
.hc__ponto { color: #f0443b; }

.hc__lead {
	margin: 20px 0 0;
	font-size: 1.0625rem;
	line-height: 1.62;
	color: #c9d3d7;
}
.hc__br { display: none; }

.hc__acoes {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 30px;
	margin-top: 28px;
}
.hc__cta {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	min-height: 56px;
	padding: 0 26px 0 22px;
	border-radius: 999px;
	background: var(--hc-verde);
	color: #fff;
	font-size: 1.0625rem;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	box-shadow: 0 10px 26px -14px rgba(4, 40, 20, 0.7);
	transition: transform 0.35s var(--hc-ease), box-shadow 0.35s var(--hc-ease), background-color 0.25s ease;
}
.hc__cta .btn__zap { flex: none; width: 26px; height: 26px; }
.hc__cta .btn__seta { flex: none; width: 20px; height: 12px; margin: 0 0 0 4px; transition: transform 0.35s var(--hc-ease); }
.hc__cta:hover,
.hc__cta:focus-visible {
	background: #14743f;
	transform: translateY(-3px);
	box-shadow: 0 18px 34px -14px rgba(24, 130, 71, 0.75);
}
.hc__cta:hover .btn__seta,
.hc__cta:focus-visible .btn__seta { transform: translateX(4px); }

/* secundário: link editorial, sublinhado só sob o texto (como na
   referência); no hover o fio engrossa e a seta anda */
.hc__link {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	padding-block: 10px;
	color: #fff;
	font-size: 1rem;
	font-weight: 600;
	text-decoration: none;
}
.hc__link-t {
	padding-bottom: 6px;
	background: linear-gradient(#fff, #fff) 0 100% / 100% 1px no-repeat;
	transition: background-size 0.4s var(--hc-ease);
}
.hc__link .btn__seta { flex: none; width: 20px; height: 12px; margin: 0; transition: transform 0.35s var(--hc-ease); }
.hc__link:hover .hc__link-t,
.hc__link:focus-visible .hc__link-t { background-size: 100% 2px; }
.hc__link:hover .btn__seta,
.hc__link:focus-visible .btn__seta { transform: translateX(4px); }

.hc__fone { margin: 22px 0 0; }
.hc__fone a {
	display: inline-flex;
	align-items: center;
	gap: 18px;
	padding-left: 14px;
	color: #fff;
	font-size: 1.5rem;
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
}
.hc__fone-ico { flex: none; width: 28px; height: 28px; color: #f0443b; }
.hc__fone a:hover span:last-child,
.hc__fone a:focus-visible span:last-child { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }

/* o contorno de foco vermelho do site some no petróleo: aqui é branco */
.hc a:focus-visible { outline: 3px solid #fff; outline-offset: 4px; }
.hc__cta:focus-visible { border-radius: 999px; }

/* ---- celular e tablet: a foto vem abaixo do texto ---- */
.hc__foto {
	position: relative;
	z-index: 1;
	margin: 36px 0 0;
}
.hc__quadro {
	aspect-ratio: 1200 / 844;
	width: 100%;
	-webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 16%, #000 70%, transparent 100%);
	mask-image: linear-gradient(to bottom, transparent 0, #000 16%, #000 70%, transparent 100%);
}
.hc__quadro picture { display: block; width: 100%; height: 100%; }
.hc__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 30%;
}
.hc__nomes {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-top: -14px;
	padding: 0 var(--gut) 44px;
	text-align: center;
}
.hc__nomes-rot {
	display: flex;
	align-items: center;
	gap: 14px;
	font-size: 0.6875rem;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: 0.26em;
	text-transform: uppercase;
	color: #c4cfd3;
}
.hc__nomes-rot::before,
.hc__nomes-rot::after {
	content: "";
	width: 40px;
	height: 1px;
	background: rgba(255, 255, 255, 0.34);
}
.hc__nomes-n { margin-top: 10px; font-size: 0.9375rem; line-height: 1.4; color: #eef3f4; }

.hc__rolar { display: none; }

@media (min-width: 560px) and (max-width: 1000px) {
	.hc__quadro { aspect-ratio: 16 / 10; }
	.hc__foto { margin-top: 20px; }
}
/* celular estreito: três versos não cabem; viram texto corrido e o
   título entra inteiro, de uma vez */
@media (max-width: 559px) {
	.hc__verso,
	.hc__sobe { display: inline; overflow: visible; padding: 0; margin: 0; }
	.hc__titulo { text-wrap: balance; }
}

/* ---- desktop: a composição da referência, medida em --u ---- */
@media (min-width: 1001px) {
	.hc {
		--u: min(1vw, 1.7778vh);
		min-height: max(calc(56.25 * var(--u)), 600px);
		padding: max(calc(var(--marco-topo) + 44px), calc(12 * var(--u))) 0 calc(6 * var(--u));
	}
	.hc__in { padding-inline: calc(4.3 * var(--u)) 0; }
	.hc__texto { max-width: none; }

	.hc__kicker {
		gap: calc(1.3 * var(--u));
		margin-bottom: calc(2.5 * var(--u));
		font-size: max(12px, calc(1.06 * var(--u)));
	}
	.hc__fio { width: calc(4.3 * var(--u)); height: max(3px, calc(0.24 * var(--u))); }
	.hc__titulo { font-size: max(40px, calc(3.92 * var(--u))); line-height: 1.06; }
	.hc__verso { white-space: nowrap; }
	.hc__lead {
		margin-top: calc(1.9 * var(--u));
		font-size: max(17px, calc(1.34 * var(--u)));
	}
	.hc__br { display: inline; }
	.hc__acoes {
		max-width: calc(52 * var(--u));
		gap: calc(1.2 * var(--u)) calc(2.6 * var(--u));
		margin-top: calc(2.9 * var(--u));
	}
	.hc__cta {
		min-height: max(52px, calc(4.66 * var(--u)));
		gap: max(12px, calc(0.95 * var(--u)));
		padding: 0 max(22px, calc(1.55 * var(--u))) 0 max(18px, calc(1.38 * var(--u)));
		font-size: max(16px, calc(1.24 * var(--u)));
	}
	.hc__cta .btn__zap { width: max(24px, calc(2.2 * var(--u))); height: max(24px, calc(2.2 * var(--u))); }
	.hc__cta .btn__seta,
	.hc__link .btn__seta { width: max(18px, calc(1.3 * var(--u))); height: max(11px, calc(0.78 * var(--u))); }
	.hc__cta .btn__seta { margin-left: calc(0.3 * var(--u)); }
	.hc__link { gap: max(10px, calc(0.9 * var(--u))); font-size: max(16px, calc(1.23 * var(--u))); }
	.hc__link-t { padding-bottom: max(5px, calc(0.42 * var(--u))); background-size: 100% max(1px, calc(0.09 * var(--u))); }
	.hc__link:hover .hc__link-t,
	.hc__link:focus-visible .hc__link-t { background-size: 100% max(2px, calc(0.15 * var(--u))); }
	.hc__fone { margin-top: calc(2.1 * var(--u)); }
	.hc__fone a {
		gap: calc(1.4 * var(--u));
		padding-left: calc(1 * var(--u));
		font-size: max(22px, calc(1.93 * var(--u)));
	}
	.hc__fone-ico { width: max(24px, calc(1.9 * var(--u))); height: max(24px, calc(1.9 * var(--u))); }

	/* a foto encosta no alto e na direita; sobra 16px por cima para o
	   paralaxe (até 9px para baixo) nunca descobrir a borda */
	.hc__foto {
		position: absolute;
		top: -16px;
		right: calc(-0.6 * var(--u));
		/* 59,4u é a proporção da referência (16:9). Em janela larga e baixa
		   sobra espaço à direita: a foto cresce até ocupar a altura inteira
		   da hero, desde que o primeiro rosto (24,8% da foto) fique depois
		   de ~58u, longe do texto */
		width: max(calc(59.4 * var(--u)), min(calc((max(56.25 * var(--u), 600px) + 16px) * 1.2949), calc((100% - 57.4 * var(--u)) / 0.7524)));
		aspect-ratio: 1800 / 1390;
		margin: 0;
		-webkit-mask-image: linear-gradient(to right, transparent 0, rgba(0, 0, 0, 0.1) 4%, rgba(0, 0, 0, 0.42) 9%, rgba(0, 0, 0, 0.8) 13.5%, #000 17.5%);
		mask-image: linear-gradient(to right, transparent 0, rgba(0, 0, 0, 0.1) 4%, rgba(0, 0, 0, 0.42) 9%, rgba(0, 0, 0, 0.8) 13.5%, #000 17.5%);
	}
	.hc__quadro {
		aspect-ratio: auto;
		height: 100%;
		-webkit-mask-image: linear-gradient(to bottom, #000 0, #000 62%, rgba(0, 0, 0, 0.55) 79%, rgba(0, 0, 0, 0.16) 90%, transparent 98%);
		mask-image: linear-gradient(to bottom, #000 0, #000 62%, rgba(0, 0, 0, 0.55) 79%, rgba(0, 0, 0, 0.16) 90%, transparent 98%);
	}
	.hc__img { object-position: 50% 0; }
	/* legenda no pé já dissolvido, centrada no meio da foto inteira */
	.hc__nomes {
		position: absolute;
		left: 17%;
		right: 0;
		/* dentro da caixa: a máscara da figura cortaria o que passasse */
		bottom: calc(4.4 * var(--u));
		margin: 0;
		padding: 0;
	}
	.hc__nomes-rot {
		gap: calc(1.6 * var(--u));
		font-size: max(11px, calc(0.84 * var(--u)));
	}
	.hc__nomes-rot::before,
	.hc__nomes-rot::after { width: calc(6.8 * var(--u)); }
	.hc__nomes-n { margin-top: calc(1.3 * var(--u)); font-size: max(15px, calc(1.27 * var(--u))); }

	.hc__rolar {
		display: block;
		position: absolute;
		left: 50%;
		bottom: calc(4.2 * var(--u));
		z-index: 2;
		width: max(26px, calc(2.05 * var(--u)));
		translate: -50% 0;
		color: rgba(255, 255, 255, 0.78);
	}
	.hc__rolar svg { display: block; width: 100%; height: auto; }

	/* a cápsula do menu passa sobre o tijolo da foto: vidro mais escuro
	   enquanto a página está no topo, para o branco manter o contraste */
	.home .nav:not(.is-stuck) .nav__links::before {
		background: rgba(8, 30, 35, 0.58);
		border-color: rgba(255, 255, 255, 0.14);
	}
}
@media (min-width: 1001px) and (max-height: 620px) { .hc__rolar { display: none; } }
/* a partir de 1280px o link fica ao lado do botão (pedido do Lucas);
   abaixo disso desce, para não passar por cima do primeiro sócio */
@media (min-width: 1280px) { .hc__acoes { max-width: none; flex-wrap: nowrap; } }

/* ---- entrada: uma vez, só CSS, ~1,4s no total ----
   Nada espera JS: em reduced-motion tudo já nasce no lugar. */
@media (prefers-reduced-motion: no-preference) {
	.hc__img { animation: hc-foto 1.4s var(--hc-ease) both; }
	.hc__kicker { animation: hc-surge 0.6s var(--hc-ease) 0.08s both; }
	.hc__fio { animation: hc-fio 0.7s var(--hc-ease) 0.12s both; }
	.hc__sobe { animation: hc-verso 0.74s var(--hc-ease) both; }
	.hc__verso:nth-child(1) .hc__sobe { animation-delay: 0.16s; }
	.hc__verso:nth-child(2) .hc__sobe { animation-delay: 0.26s; }
	.hc__verso:nth-child(3) .hc__sobe { animation-delay: 0.36s; }
	.hc__lead { animation: hc-sobe-16 0.6s var(--hc-ease) 0.56s both; }
	.hc__acoes { animation: hc-sobe-12 0.5s var(--hc-ease) 0.7s both; }
	.hc__fone { animation: hc-sobe-12 0.5s var(--hc-ease) 0.8s both; }
	.hc__nomes { animation: hc-surge 0.7s var(--hc-ease) 1s both; }
	.hc__rolar { animation: hc-surge 0.6s ease 1.3s both; }
	.hc__rolar-b { animation: hc-rolar 2.2s ease-in-out 1.9s infinite; }
}
@media (prefers-reduced-motion: no-preference) and (max-width: 559px) {
	.hc__sobe { animation: none; }
	.hc__titulo { animation: hc-sobe-16 0.7s var(--hc-ease) 0.14s both; }
}
@keyframes hc-foto { from { opacity: 0; transform: scale(1.05); } to { opacity: 1; transform: none; } }
@keyframes hc-verso { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: none; } }
@keyframes hc-sobe-16 { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes hc-sobe-12 { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes hc-surge { from { opacity: 0; } to { opacity: 1; } }
@keyframes hc-fio { from { transform: scaleX(0); } to { transform: none; } }
@keyframes hc-rolar { 0%, 100% { transform: none; } 50% { transform: translateY(4px); } }

/* ---- nome do sócio no hover (desktop com mouse) ----
   As áreas cobrem cada pessoa, da cabeça ao tronco; a etiqueta nasce
   logo acima da cabeça. O bloco de texto deixa de capturar o ponteiro
   fora dos próprios elementos, senão a faixa larga dele tapava a foto. */
.hc__quem { display: none; }
@media (min-width: 1001px) and (hover: hover) and (pointer: fine) {
	.hc__in { pointer-events: none; }
	.hc__texto > * { pointer-events: auto; }
	.hc__texto { width: fit-content; }
	.hc__quem { display: block; position: absolute; inset: 0; z-index: 2; }
	.hc__pessoa { position: absolute; top: 24%; height: 50%; cursor: default; }
	.hc__pessoa--1 { left: 17%; width: 22%; }
	.hc__pessoa--2 { left: 41%; width: 25%; }
	.hc__pessoa--3 { left: 68%; width: 26%; top: 27%; }
	.hc__etiqueta {
		position: absolute;
		left: 50%;
		/* logo abaixo do queixo: acima da cabeça ficaria sob o menu */
		top: 46%;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 8px 16px;
		border-radius: 12px;
		background: rgba(8, 30, 35, 0.86);
		border: 1px solid rgba(255, 255, 255, 0.16);
		backdrop-filter: blur(8px);
		-webkit-backdrop-filter: blur(8px);
		color: #c9d3d7;
		font-size: max(12px, calc(0.82 * var(--u)));
		line-height: 1.35;
		white-space: nowrap;
		opacity: 0;
		translate: -50% 6px;
		transition: opacity 0.25s ease, translate 0.3s var(--hc-ease);
		pointer-events: none;
	}
	.hc__etiqueta b { color: #fff; font-size: max(14px, calc(1.05 * var(--u))); font-weight: 700; }
	.hc__pessoa:hover .hc__etiqueta { opacity: 1; translate: -50% 0; }
}

/* ===========================================================
   HOME — SEÇÕES ABAIXO DA HERO (17/10/2026) — partes/home-secoes.php
   Briefing "REDESIGN PREMIUM — TODAS AS SEÇÕES DA HOME". Cabeçalho
   comum (.hm__kicker/.hm__titulo/.hm__sub), contêiner de 1300px e uma
   classe genérica de entrada (.hm-e, atraso em --d) sobre o gatilho
   data-entra do app.js (4b): anima uma vez, ao chegar na tela.
   Cinza de texto: #52646c (o #64737a do briefing fica abaixo de 4,5:1
   sobre o bege #f4f2ee).
   =========================================================== */
.hm {
	--hm-ink: #19343d;
	--hm-red: #d52520;
	--hm-cinza: #52646c;
	--hm-borda: #e6e5e1;
	--hm-ease: cubic-bezier(0.22, 1, 0.36, 1);
	padding: clamp(72px, 8.5vw, 120px) 0;
	color: var(--hm-ink);
}
.hm--quente { background: #faf9f7; }
.hm--bege { background: #f4f2ee; }
.hm--agua { background: #eaf0f0; }
.hm__in,
.hm-faq .hm__in { max-width: calc(1300px + 2 * var(--gut)); margin-inline: auto; padding-inline: var(--gut); }
.hm__cab { max-width: 760px; margin-bottom: clamp(40px, 4.6vw, 64px); }

.hm__kicker {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 0 0 18px;
	font-size: 0.8125rem;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: #19343d;
}
.hm__kicker::before { content: ""; flex: none; width: 28px; height: 2px; background: #d52520; }
.hm__titulo {
	margin: 0;
	font-size: clamp(2rem, 1.25rem + 2.4vw, 3.25rem);
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: -0.022em;
	color: #19343d;
	text-wrap: balance;
}
.hm__titulo--m { font-size: clamp(1.875rem, 1.2rem + 1.7vw, 2.75rem); }
.hm__sub {
	margin: 18px 0 0;
	max-width: 46ch;
	font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
	line-height: 1.6;
	color: #52646c;
	text-wrap: pretty;
}

/* link editorial: fio fino em repouso, vermelho que varre no hover */
.hm-link {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin-top: 28px;
	color: #19343d;
	font-size: 1.0625rem;
	font-weight: 700;
	text-decoration: none;
}
.hm-link__t {
	padding-bottom: 4px;
	background:
		linear-gradient(#d52520, #d52520) 0 100% / 0 2px no-repeat,
		linear-gradient(rgba(25, 52, 61, 0.3), rgba(25, 52, 61, 0.3)) 0 100% / 100% 1px no-repeat;
	transition: background-size 0.45s var(--hm-ease, ease);
}
.hm-link .hm-seta,
.hm-link .btn__seta { flex: none; transition: transform 0.3s var(--hm-ease, ease); }
.hm-link .btn__seta { width: 20px; height: 12px; margin: 0; }
.hm-link:hover .hm-link__t,
.hm-link:focus-visible .hm-link__t { background-size: 100% 2px, 100% 1px; }
.hm-link:hover .hm-seta,
.hm-link:focus-visible .hm-seta { transform: translate(3px, -3px); }
.hm-link:hover .btn__seta,
.hm-link:focus-visible .btn__seta { transform: translateX(4px); }
.hm-seta { width: 14px; height: 14px; }

/* ---------- 02 · em qual momento você está ---------- */
.hm-momento__grade { list-style: none; margin: 0; padding: 0; display: grid; gap: 22px; }
@media (min-width: 760px) { .hm-momento__grade { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.hm-momento__card {
	position: relative;
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: clamp(18px, 2vw, 28px);
	height: 100%;
	padding: clamp(26px, 2.8vw, 40px);
	border: 1px solid #e6e5e1;
	border-radius: 18px;
	background: #fff;
	color: inherit;
	text-decoration: none;
	transition: transform 0.3s var(--hm-ease), border-color 0.3s var(--hm-ease), box-shadow 0.3s var(--hm-ease);
}
.hm-momento__ico {
	display: grid;
	place-items: center;
	width: 54px;
	height: 54px;
	border-radius: 14px;
	background: #fbf1ef;
	color: #d52520;
	transition: transform 0.3s var(--hm-ease);
}
.hm-momento__ico .ico { width: 26px; height: 26px; }
.hm-momento__n {
	position: absolute;
	top: clamp(22px, 2.4vw, 32px);
	right: clamp(24px, 2.6vw, 36px);
	font-size: 0.875rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	color: #8a979c;
	font-variant-numeric: tabular-nums;
}
.hm-momento__txt { display: flex; flex-direction: column; padding-right: 32px; }
.hm-momento__t { margin: 4px 0 8px; font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem); font-weight: 700; line-height: 1.25; color: #19343d; }
.hm-momento__d { color: #52646c; font-size: 1rem; line-height: 1.6; }
.hm-momento__ir { display: inline-flex; align-items: center; gap: 8px; margin-top: 18px; color: #b81d18; font-size: 0.9375rem; font-weight: 700; }
.hm-momento__ir .hm-seta { transition: transform 0.3s var(--hm-ease); }
.hm-momento__card:focus-visible { outline: 3px solid #b81d18; outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) {
	.hm-momento__card:hover {
		transform: translateY(-5px);
		border-color: rgba(213, 37, 32, 0.34);
		box-shadow: 0 24px 48px -32px rgba(25, 52, 61, 0.38);
	}
	.hm-momento__card:hover .hm-momento__ico { transform: scale(1.05); }
	.hm-momento__card:hover .hm-seta { transform: translate(4px, -4px); }
}

/* ---------- 03 · nossa essência ---------- */
.hm-essencia__grade { display: grid; gap: clamp(36px, 5vw, 72px); align-items: center; }
@media (min-width: 1000px) { .hm-essencia__grade { grid-template-columns: minmax(0, 0.45fr) minmax(0, 0.55fr); gap: clamp(48px, 6vw, 96px); } }
.hm-essencia__foto { margin: 0; border-radius: 22px; overflow: hidden; aspect-ratio: 7 / 6; }
.hm-essencia__foto picture,
.hm-essencia__foto img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 38% 50%; }
.hm-essencia__extra { margin: 20px 0 0; max-width: 46ch; font-size: 1.0625rem; font-weight: 600; line-height: 1.55; color: #19343d; }
.hm-essencia__atributos {
	list-style: none;
	margin: clamp(32px, 3.6vw, 48px) 0 0;
	padding: 24px 0 0;
	border-top: 1px solid #ddd6cc;
	display: grid;
	gap: 14px;
}
.hm-essencia__atributos li { display: flex; align-items: center; gap: 12px; font-size: 1.0625rem; font-weight: 700; color: #19343d; }
.hm-essencia__atributos li::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: #d52520; }
/* um atributo por linha, separados por fio fino */
.hm-essencia__atributos { gap: 0; padding-top: 0; }
.hm-essencia__atributos li { padding: 16px 0; border-bottom: 1px solid #ddd6cc; }

/* ---------- 04 · áreas de atuação ---------- */
.hm-areas__grade { list-style: none; margin: 0; padding: 0; display: grid; gap: 20px; }
@media (min-width: 640px) { .hm-areas__grade { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .hm-areas__grade { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.hm-areas__card {
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: 28px 28px 26px;
	border: 1px solid #e6e5e1;
	border-radius: 16px;
	background: #fff;
	color: inherit;
	text-decoration: none;
	transition: transform 0.3s var(--hm-ease), border-color 0.3s var(--hm-ease), box-shadow 0.3s var(--hm-ease);
}
.hm-areas__card::before { content: ""; position: absolute; top: -1px; left: 28px; width: 40px; height: 2px; background: #d52520; }
.hm-areas__ico { color: #d52520; }
.hm-areas__ico .ico { width: 24px; height: 24px; }
.hm-areas__t { margin: 18px 0 8px; font-size: clamp(1.1875rem, 1.1rem + 0.3vw, 1.3125rem); font-weight: 700; line-height: 1.3; color: #19343d; }
.hm-areas__d { margin-bottom: 18px; color: #52646c; font-size: 0.96875rem; line-height: 1.6; }
.hm-areas__card .hm-seta { margin-top: auto; align-self: flex-end; color: #19343d; transition: transform 0.3s var(--hm-ease), color 0.3s var(--hm-ease); }
.hm-areas__card:focus-visible { outline: 3px solid #b81d18; outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) {
	.hm-areas__card:hover { transform: translateY(-4px); border-color: rgba(213, 37, 32, 0.3); box-shadow: 0 20px 40px -30px rgba(25, 52, 61, 0.34); }
	.hm-areas__card:hover .hm-seta { transform: translate(3px, -3px); color: #b81d18; }
}
.hm-areas__todas { margin: clamp(32px, 3.6vw, 48px) 0 0; text-align: center; }
.hm-areas__todas .hm-link { margin-top: 0; }

/* ---------- 05 · avaliações do Google: nota + carrossel (07/11/2026) ----------
   Rolagem nativa com scroll-snap (dedo, trackpad e teclado funcionam sem JS);
   o app.js liga setas, barra de progresso e "Ler tudo". Estrela dourada com
   contorno #b57f00 (3,3:1 no branco); a nota em texto carrega o significado. */
.hm-aval__cab { display: grid; gap: 28px; margin-bottom: clamp(36px, 4vw, 56px); }
@media (min-width: 1000px) { .hm-aval__cab { grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 48px; } }
.hm-aval__cab-t .hm__sub { margin-top: 14px; }
.hm-aval__cab > .hm-link { margin-top: 0; justify-self: start; }
.hm-aval__nota { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.hm-aval__nota-l { display: flex; align-items: center; gap: 16px; margin: 0; }
.hm-aval__num { font-size: clamp(3rem, 2.3rem + 2.2vw, 4.25rem); font-weight: 700; line-height: 0.95; letter-spacing: -0.03em; color: #19343d; }
.hm-aval__nota-r { display: flex; flex-direction: column; gap: 6px; }
.hm-aval__total { font-size: 0.9375rem; font-weight: 600; color: #52646c; }
.hm-aval .estrelas { gap: 3px; color: #f2a900; }
.hm-aval .estrelas path { stroke: #b57f00; }
.hm-aval__nota .estrelas svg { width: 24px; height: 24px; }
.hm-aval__nota .hm-link { margin-top: 0; }

.hm-aval__car { position: relative; }
.hm-aval__trilho {
	--g: clamp(16px, 2vw, 24px);
	display: flex;
	gap: var(--g);
	list-style: none;
	margin: 0;
	padding: 4px 0 6px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	overscroll-behavior-x: contain;
	scrollbar-width: none;
}
.hm-aval__trilho::-webkit-scrollbar { display: none; }
.hm-aval__trilho:focus-visible { outline: 3px solid #b81d18; outline-offset: 6px; border-radius: 18px; }
.hm-aval__card { display: flex; flex: 0 0 min(86%, 420px); scroll-snap-align: start; }
@media (min-width: 760px) { .hm-aval__card { flex-basis: calc((100% - var(--g)) / 2); } }
@media (min-width: 1100px) { .hm-aval__card { flex-basis: calc((100% - 2 * var(--g)) / 3); } }
.hm-aval__fig {
	position: relative;
	display: flex;
	flex-direction: column;
	width: 100%;
	margin: 0;
	padding: clamp(24px, 2.6vw, 32px);
	border: 1px solid #e6e5e1;
	border-radius: 16px;
	background: #fff;
}
.hm-aval__fig::before { content: ""; position: absolute; top: -1px; left: 28px; width: 40px; height: 2px; background: #d52520; }
.hm-aval__estrelas { margin: 0 0 16px; line-height: 0; }
.hm-aval__estrelas .estrelas svg { width: 20px; height: 20px; }
.hm-aval__texto { margin: 0 0 22px; color: #19343d; font-size: 1.0625rem; line-height: 1.65; }
.hm-aval__texto p { margin: 0; white-space: pre-line; overflow-wrap: anywhere; }
/* corte em 7 linhas só com JS ligado (sem JS o texto aparece inteiro) */
.entra .hm-aval__texto p { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 7; overflow: hidden; }
.entra .hm-aval__texto.is-aberto p { display: block; -webkit-line-clamp: unset; overflow: visible; }
.hm-aval__mais {
	align-self: flex-start;
	margin: -10px 0 22px;
	padding: 4px 0;
	border: 0;
	background: none;
	color: #19343d;
	font: inherit;
	font-size: 0.9375rem;
	font-weight: 700;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 4px;
	cursor: pointer;
}
.hm-aval__mais[hidden] { display: none; }
.hm-aval__mais:hover { text-decoration-color: #d52520; text-decoration-thickness: 2px; }
.hm-aval__mais:focus-visible { outline: 3px solid #b81d18; outline-offset: 3px; border-radius: 4px; }
.hm-aval__autor { display: flex; align-items: center; gap: 12px; margin-top: auto; padding-top: 18px; border-top: 1px solid #ece9e3; }
.hm-aval__ini {
	display: grid;
	flex: none;
	place-items: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: #19343d;
	color: #fff;
	font-size: 0.9375rem;
	font-weight: 700;
	letter-spacing: 0.02em;
}
.hm-aval__quem { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.hm-aval__nome { color: #19343d; font-weight: 700; text-decoration: none; }
a.hm-aval__nome:hover { text-decoration: underline; text-underline-offset: 3px; }
a.hm-aval__nome:focus-visible { outline: 3px solid #b81d18; outline-offset: 2px; border-radius: 3px; }
.hm-aval__meta { font-size: 0.875rem; color: #52646c; }

.hm-aval__ctrl { display: flex; align-items: center; gap: 12px; margin-top: clamp(24px, 2.6vw, 32px); }
.hm-aval__ctrl[hidden] { display: none; }
.hm-aval__prog { flex: 1; height: 2px; margin-right: 12px; overflow: hidden; border-radius: 2px; background: #dcd8d0; }
.hm-aval__prog > span { display: block; height: 100%; background: #d52520; transform: scaleX(0.3); transform-origin: 0 50%; transition: transform 0.35s var(--hm-ease); }
.hm-aval__seta {
	display: grid;
	flex: none;
	place-items: center;
	width: 48px;
	height: 48px;
	padding: 0;
	border: 1.5px solid #19343d;
	border-radius: 50%;
	background: transparent;
	color: #19343d;
	cursor: pointer;
	transition: background-color 0.25s ease, color 0.25s ease, opacity 0.25s ease;
}
.hm-aval__seta:hover:not(:disabled) { background: #19343d; color: #fff; }
.hm-aval__seta:focus-visible { outline: 3px solid #b81d18; outline-offset: 3px; }
.hm-aval__seta:disabled { opacity: 0.35; cursor: default; }
.hm-aval__fonte { margin: 16px 0 0; font-size: 0.875rem; color: #52646c; }
@media (prefers-reduced-motion: reduce) { .hm-aval__prog > span { transition: none; } }

/* ---------- 06 · como funciona (o componente .como, com o cabeçalho da home) ---------- */
.hm-como .como__titulo { font-weight: 700; }
.hm-como .como__cab { grid-template-columns: 1fr; }

/* ---------- 07 · onde estamos ---------- */
.hm-onde__grade { display: grid; gap: clamp(40px, 5vw, 72px); align-items: center; }
@media (min-width: 1000px) { .hm-onde__grade { grid-template-columns: minmax(0, 0.56fr) minmax(0, 0.44fr); } }
.hm-onde__numero { position: relative; display: grid; place-items: center start; min-height: clamp(220px, 24vw, 320px); }
.hm-onde__arte { position: absolute; inset: 0; width: 100%; height: 100%; }
.hm-onde__n { position: relative; margin: 0; padding-left: clamp(8px, 3vw, 48px); }
.hm-onde__janela { display: block; overflow: clip; padding-block: 0.08em; margin-block: -0.08em; }
.hm-onde__digitos {
	display: block;
	font-size: clamp(6rem, 4rem + 8vw, 11.5rem);
	font-weight: 700;
	line-height: 0.95;
	letter-spacing: -0.045em;
	color: #19343d;
	font-variant-numeric: tabular-nums;
}
.hm-onde__rot { display: block; margin-top: 10px; font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: #52646c; }
.hm-onde__fio { fill: none; }

/* ---------- 08 · dúvidas frequentes (o FAQ .faq2 das áreas) ---------- */
.sv.hm-faq { padding: clamp(72px, 8.5vw, 120px) 0; background: #fff; }
.hm-faq .faq--mais .faq__item:first-child { border-top: 0; }

/* ---------- entradas: uma vez, ao chegar na tela ---------- */
@media (prefers-reduced-motion: no-preference) {
	.entra [data-entra] .hm-e { opacity: 0; translate: 0 18px; }
	.entra [data-entra].is-vis .hm-e {
		opacity: 1;
		translate: 0 0;
		transition: opacity 0.6s var(--hm-ease, ease) var(--d, 0s), translate 0.6s var(--hm-ease, ease) var(--d, 0s);
	}
	.entra [data-entra] .hm-areas__grade .hm-e { transition-duration: 0.55s; }
	/* foto da essência: aparece e se abre de lado */
	.entra .hm-essencia .hm-essencia__foto { opacity: 0; clip-path: inset(0 14% 0 0 round 22px); }
	.entra .hm-essencia.is-vis .hm-essencia__foto { opacity: 1; clip-path: inset(0 0 0 0 round 22px); transition: opacity 0.8s var(--hm-ease), clip-path 1s var(--hm-ease); }
	/* 08 sobe de dentro da janela; os fios se desenham */
	.entra .hm-onde .hm-onde__digitos { translate: 0 100%; }
	.entra .hm-onde.is-vis .hm-onde__digitos { translate: 0 0; transition: translate 0.9s var(--hm-ease) 0.2s; }
	.entra .hm-onde .hm-onde__fio { stroke-dasharray: 1; stroke-dashoffset: 1; }
	.entra .hm-onde.is-vis .hm-onde__fio { stroke-dashoffset: 0; transition: stroke-dashoffset 1.1s var(--hm-ease) 0.45s; }
	.entra .hm-onde.is-vis .hm-onde__fio--2 { transition-delay: 0.65s; }
	/* FAQ e cabeçalhos usam .ent__cab; as perguntas entram juntas */
	.entra .hm-faq .faq--mais { opacity: 0; translate: 0 18px; }
	.entra .hm-faq.is-vis .faq--mais { opacity: 1; translate: 0 0; transition: opacity 0.6s var(--hm-ease) 0.2s, translate 0.6s var(--hm-ease) 0.2s; }
}

/* ajustes após a primeira revisão visual */
.hm-momento__txt { height: 100%; }
.hm-momento__ir { margin-top: auto; padding-top: 18px; }
@media (max-width: 559px) {
	.hm-momento__card { grid-template-columns: 1fr; gap: 16px; }
	.hm-momento__txt { padding-right: 0; }
}
.hm-essencia__texto header { margin: 0; }

/* ===========================================================
   NOSSOS PROFISSIONAIS (17/10/2026) — no padrão das demais páginas.
   Usa o cabeçalho .hm__* da home, .como, .vit-fim e a capa .capa-foto.
   =========================================================== */
.pf-busca { padding: clamp(64px, 8vw, 112px) 0; background: #f4f2ee; }
.pf__cab { max-width: 760px; margin-bottom: clamp(28px, 3.4vw, 44px); }
.pf-verifica {
	max-width: 860px;
	padding: clamp(24px, 3vw, 40px);
	border: 1px solid #e6e5e1;
	border-radius: 18px;
	background: #fff;
	box-shadow: 0 18px 44px -34px rgba(25, 52, 61, 0.35);
}
.pf-lista { margin-top: clamp(40px, 4.6vw, 64px); display: grid; gap: clamp(36px, 4vw, 56px); }
.pf-grupo__t {
	display: flex;
	align-items: baseline;
	gap: 12px;
	margin: 0 0 18px;
	padding-bottom: 14px;
	border-bottom: 1px solid #ddd6cc;
	font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem);
	font-weight: 700;
	color: #19343d;
}
.pf-grupo__t span { font-size: 0.875rem; font-weight: 600; color: #52646c; font-variant-numeric: tabular-nums; }
/* grupo sem ninguém durante a busca: some junto */
.pf-grupo:not(:has(.prof:not([hidden]))) { display: none; }
.pf-quadro { display: grid; gap: 14px; margin: 0; }
@media (min-width: 640px) { .pf-quadro { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .pf-quadro { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.pf-quadro .prof {
	padding: 18px 20px;
	border: 1px solid #e6e5e1;
	border-radius: 16px;
	background: #fff;
	transition: border-color 0.25s ease, transform 0.25s ease;
}
.pf-quadro .prof[hidden] { display: none; }
@media (hover: hover) and (pointer: fine) { .pf-quadro .prof:hover { border-color: rgba(213, 37, 32, 0.3); transform: translateY(-2px); } }
.pf-quadro .prof__nome { margin: 0; font-size: 1.0625rem; font-weight: 700; line-height: 1.3; color: #19343d; }

/* O e-mail desce para a largura inteira do cartão, embaixo da foto e do
   nome. Ao lado da foto sobravam 215 px no desktop, e o endereço mais
   longo da lista (38 caracteres) pede 282 px: quebrava em dois. Na linha
   inteira, em 13 px, cabe de 1000 px para cima e no celular. */
.pf-quadro .prof {
	display: grid;
	grid-template-columns: 62px minmax(0, 1fr);
	/* as linhas 1fr acima e abaixo centram nome + cargo na altura da foto
	   sem afastar um do outro (a foto, maior, esticava as duas linhas) */
	grid-template-rows: 1fr auto auto 1fr auto;
	gap: 0 18px;
}
.pf-quadro .prof__dados { display: contents; }
.pf-quadro .prof__foto,
.pf-quadro .prof__iniciais { grid-row: 1 / 5; }
.pf-quadro .prof__nome { grid-column: 2; grid-row: 2; }
.pf-quadro .prof__papel { grid-column: 2; grid-row: 3; margin: 0; }
.pf-quadro .prof__oab { grid-column: 2; grid-row: 4; }
.pf-quadro .prof__email {
	grid-column: 1 / -1;
	grid-row: 5;
	margin-top: 14px;
	font-size: 0.8125rem;
}
.pf-quadro .prof__email::before { margin-top: 2px; }
/* E o número de colunas sai da largura que esse e-mail pede (~330 px de
   cartão), não de um ponto fixo: com 3 colunas a 1000 px e 2 a 640 px os
   cartões ficavam estreitos demais e ele voltava a quebrar. */
.pf-quadro { grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); }
@media (max-width: 420px) { .pf-quadro .prof { padding: 16px; column-gap: 16px; } }

/* faixa escura do canal oficial */
.pf-canal {
	padding: clamp(56px, 7vw, 96px) 0;
	background-color: #19343d;
	background-image: radial-gradient(110% 120% at 0% 0%, #22444e 0%, #19343d 55%, #12272f 100%);
	color: #fff;
}
.pf-canal__in { display: grid; gap: 32px; align-items: center; }
@media (min-width: 1000px) { .pf-canal__in { grid-template-columns: minmax(0, 1.3fr) auto; gap: 64px; } }
.pf-canal__kicker { margin: 0 0 14px; font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: #f3b3ae; }
.pf-canal__titulo { margin: 0; font-size: clamp(1.75rem, 1.2rem + 1.8vw, 2.75rem); font-weight: 700; line-height: 1.15; letter-spacing: -0.02em; text-wrap: balance; }
.pf-canal__sub { margin: 16px 0 0; max-width: 52ch; font-size: 1.125rem; line-height: 1.6; color: #c9d6db; }
.pf-canal__acoes { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
.pf-canal__fone { display: inline-flex; align-items: center; gap: 14px; color: #fff; font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); font-weight: 700; text-decoration: none; }
.pf-canal__fone .ico-fone { width: 28px; height: 28px; color: #f0443b; }
.pf-canal__fone:hover span,
.pf-canal__fone:focus-visible span { text-decoration: underline; text-underline-offset: 6px; }
.pf-canal a:focus-visible { outline: 3px solid #fff; outline-offset: 4px; }

/* sócios fundadores */
.pf-socios__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 28px; }
@media (min-width: 760px) { .pf-socios__lista { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.pf-socio__foto { margin: 0 0 18px; aspect-ratio: 1; border-radius: 18px; overflow: hidden; background: #e9e4dd; }
.pf-socio__foto picture, .pf-socio__foto img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pf-socio__nome { margin: 0; font-size: 1.25rem; font-weight: 700; line-height: 1.3; color: #19343d; }
.pf-socio__papel { margin: 4px 0 0; color: #52646c; }
.pf-socio__email { display: inline-block; margin-top: 8px; color: #b81d18; font-weight: 600; word-break: break-all; }
.arte-quadro .arte-16__un { margin-left: 0.18em; }

/* ---------- 07 · onde estamos: mapa do Brasil (partes/mapa-brasil.php) ---------- */
.hm-onde__mapa { margin: 0; }
.br { display: block; width: 100%; max-width: 620px; height: auto; margin-inline: auto; overflow: visible; }
.br__uf { fill: var(--uf-fill, #fff); stroke: var(--uf-borda, #bccdcf); stroke-width: 0.9; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.br__uf--sp { fill: var(--sp-fill, #19343d); stroke: var(--sp-borda, #19343d); }
.br__arco { fill: none; stroke: #d52520; stroke-width: 1.2; stroke-opacity: 0.45; stroke-linecap: round; }
.br__arco--fora { stroke-dasharray: 0.02 0.03; stroke-opacity: 0.55; }
.br__capitais circle { fill: #19343d; fill-opacity: 0.55; }
.br__un { fill: #d52520; stroke: #fff; stroke-width: 1.6; }
.br__un--matriz { fill: #fff; stroke: #d52520; stroke-width: 3; }
.hm-onde__legenda { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 28px; margin-top: 18px; font-size: 0.9375rem; font-weight: 600; color: #19343d; }
.hm-onde__leg { display: inline-flex; align-items: center; gap: 10px; }
.hm-onde__leg::before { content: ""; flex: none; }
.hm-onde__leg--un::before { width: 10px; height: 10px; border-radius: 50%; background: #d52520; }
.hm-onde__leg--dist::before { width: 26px; height: 0; border-top: 1.6px solid rgba(213, 37, 32, 0.6); }

@media (prefers-reduced-motion: no-preference) {
	.entra .hm-onde .br__uf { opacity: 0; }
	.entra .hm-onde .br__arco { stroke-dasharray: 1; stroke-dashoffset: 1; }
	.entra .hm-onde .br__arco--fora { stroke-dasharray: 1; }
	.entra .hm-onde .br__capitais circle,
	.entra .hm-onde .br__un { opacity: 0; transform: scale(0.4); transform-box: fill-box; transform-origin: center; }

	.entra .hm-onde.is-vis .br__uf { opacity: 1; transition: opacity 0.8s var(--hm-ease) 0.1s; }
	.entra .hm-onde.is-vis .br__un { opacity: 1; transform: none; transition: opacity 0.4s ease calc(0.6s + var(--i) * 0.07s), transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) calc(0.6s + var(--i) * 0.07s); }
	.entra .hm-onde.is-vis .br__arco { stroke-dashoffset: 0; transition: stroke-dashoffset 1s var(--hm-ease) calc(1.2s + var(--i) * 0.045s); }
	.entra .hm-onde.is-vis .br__capitais circle { opacity: 1; transform: none; transition: opacity 0.35s ease calc(1.9s + var(--i) * 0.045s), transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) calc(1.9s + var(--i) * 0.045s); }
	/* a matriz respira devagar depois que tudo chegou */
	.hm-onde.is-vis .br__un--matriz { animation: br-respira 3.2s ease-in-out 3.4s infinite; }
}
@keyframes br-respira { 0%, 100% { stroke-width: 3; } 50% { stroke-width: 6; stroke-opacity: 0.55; } }
@media (max-width: 559px) { .hm-onde__legenda { flex-direction: column; align-items: center; text-align: center; } }

/* detalhe ampliado da região das unidades */
.br__caixa { fill: #fff; stroke: #bccdcf; stroke-width: 1; filter: drop-shadow(0 10px 18px rgba(25, 52, 61, 0.12)); }
/* o <use> não aceita seletor por dentro; as cores entram por variável */
.br__zoom { --uf-fill: #f3f6f6; --sp-fill: #dfe9e9; --sp-borda: #19343d; }
.br__guia { fill: none; stroke: #19343d; stroke-opacity: 0.45; stroke-width: 1; stroke-dasharray: 3 4; }
.br__det-un text { font-size: 11px; font-weight: 700; fill: #19343d; paint-order: stroke; stroke: #fff; stroke-width: 3px; stroke-linejoin: round; }
.br__det-matriz { font-size: 8.5px; letter-spacing: 0.08em; text-transform: uppercase; fill: #b81d18; }
.br__det-fora { font-size: 10.5px; font-weight: 700; fill: #52646c; }
.br__det-rot { font-size: 9px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; fill: #52646c; }
@media (prefers-reduced-motion: no-preference) {
	.entra .hm-onde .br__detalhe { opacity: 0; }
	.entra .hm-onde.is-vis .br__detalhe { opacity: 1; transition: opacity 0.7s var(--hm-ease) 2.6s; }
}

/* ===== ajustes do escritório (27/10/2026) ===== */
/* cartão "Já sou aposentado" com atalho para a isenção de IR */
.hm-momento__card--duplo { cursor: pointer; }
.hm-momento__estica { position: static; text-decoration: none; }
.hm-momento__estica::after { content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: 1; }
.hm-momento__estica:focus-visible { outline: none; }
.hm-momento__card--duplo:has(.hm-momento__estica:focus-visible) { outline: 3px solid #b81d18; outline-offset: 3px; }
.hm-momento__card--duplo .hm-momento__ir { margin-top: 18px; padding-top: 0; }
.hm-momento__atalho {
	position: relative;
	z-index: 2;
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 14px;
	padding: 12px 14px;
	border-radius: 12px;
	background: #fbf1ef;
	border: 1px solid rgba(213, 37, 32, 0.22);
	color: #8f1712;
	font-size: 0.9375rem;
	font-weight: 700;
	line-height: 1.35;
	text-decoration: none;
	transition: background-color 0.25s ease, border-color 0.25s ease;
}
.hm-momento__atalho .ico { flex: none; width: 18px; height: 18px; color: #d52520; }
.hm-momento__atalho .hm-seta { flex: none; margin-left: auto; transition: transform 0.3s var(--hm-ease); }
.hm-momento__atalho:hover, .hm-momento__atalho:focus-visible { background: #f8e3df; border-color: rgba(213, 37, 32, 0.45); }
.hm-momento__atalho:hover .hm-seta { transform: translate(3px, -3px); }
.hm-momento__atalho:focus-visible { outline: 3px solid #b81d18; outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) {
	.hm-momento__card--duplo:hover { transform: translateY(-5px); border-color: rgba(213, 37, 32, 0.34); box-shadow: 0 24px 48px -32px rgba(25, 52, 61, 0.38); }
	.hm-momento__card--duplo:hover .hm-momento__ico { transform: scale(1.05); }
}

/* menu de áreas: título mais visível (pedido do escritório) */
.nav__menu .nav__menu-nome { color: #fff; font-weight: 700; text-decoration: underline; text-decoration-color: rgba(240, 68, 59, 0.75); text-decoration-thickness: 2px; text-underline-offset: 5px; }
.nav__menu a:hover .nav__menu-nome,
.nav__menu a:focus-visible .nav__menu-nome { text-decoration-color: #f0443b; }
/* responsável pela unidade, no cartão da filial */
.filial__resp { display: flex; align-items: center; gap: 8px; margin: 6px 0 10px; font-size: 0.9375rem; font-weight: 700; color: #19343d; }
.filial__resp .ico { flex: none; width: 18px; height: 18px; color: #d52520; }

/* ============ isenção de IR: ajustes pedidos pelo escritório (27/10/2026) ============ */
/* #b81d18 sobre o rosa #fdecea: 5,7:1 (o --red-ink dá 4,45 e reprova AA) */
/* doenças: selo "curado também tem direito" e os dois casos à parte */
.dz__selo { align-self: flex-start; margin-top: 8px; padding: 4px 10px; border-radius: 999px; background: #fdecea; color: #b81d18; font-size: 0.8125rem; font-weight: 700; line-height: 1.3; }
.dz__tambem-t { margin: clamp(30px, 3.4vw, 44px) 0 14px; color: #19343d; font-size: 1.125rem; font-weight: 700; }
@media (min-width: 1000px) { .dz--tambem { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.dz--tambem .dz__item { border-left-color: #19343d; }

/* súmula: a explicação simples vem primeiro, a citação embaixo como base */
.sm__traduz--antes { margin: 0 0 22px; padding: 0 0 22px; border-top: 0; border-bottom: 1px solid rgba(255, 255, 255, 0.14); color: #fff; font-size: clamp(1.1875rem, 1.8vw, 1.4375rem); font-weight: 500; line-height: 1.55; }
.sm__traduz--antes + .sm__citacao p { color: #dbe4e7; font-size: 1.0625rem; font-weight: 400; font-style: italic; line-height: 1.6; }

/* os dois caminhos: tabela comparativa + alerta */
.sv--caminhos { background: #fff; padding: clamp(64px, 8vw, 112px) 0; }
.cm__tabela-wrap { overflow-x: auto; border-radius: 16px; border: 1px solid #e8e3dc; }
.cm__tabela { width: 100%; min-width: 620px; border-collapse: collapse; font-size: 1rem; line-height: 1.5; }
.cm__tabela th, .cm__tabela td { padding: 16px 20px; text-align: left; vertical-align: top; border-top: 1px solid #e8e3dc; }
.cm__tabela thead th, .cm__tabela thead td { border-top: 0; background: #f4f2ee; color: #19343d; font-size: 1.0625rem; font-weight: 700; }
.cm__tabela tbody th { width: 24%; color: #19343d; font-weight: 700; }
.cm__tabela td { color: var(--ink-soft); }
.cm__tabela .cm__judicial { background: #19343d; color: #fff; }
.cm__tabela thead .cm__judicial { background: #10262d; color: #fff; }
.cm__tabela tbody .cm__judicial { border-top-color: rgba(255, 255, 255, 0.14); }
.cm__x, .cm__ok { display: inline-grid; place-items: center; width: 22px; height: 22px; margin-right: 6px; border-radius: 50%; font-weight: 700; font-size: 0.875rem; line-height: 1; vertical-align: -3px; }
.cm__x { background: #fdecea; color: #b81d18; }
.cm__ok { background: rgba(255, 255, 255, 0.16); color: #fff; }
.cm__alerta { margin-top: clamp(24px, 3vw, 36px); padding: clamp(22px, 2.6vw, 32px); border-radius: 16px; background: #fdecea; border-left: 4px solid var(--pz-red); }
.cm__alerta-t { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; color: #b81d18; font-size: 1.125rem; font-weight: 700; }
.cm__alerta-t .ico { flex: none; width: 22px; height: 22px; }
.cm__alerta p { max-width: 75ch; color: #19343d; line-height: 1.65; }
.cm__alerta p + p { margin-top: 10px; }

/* régua: meses reais e a conta do que se perde */
.prazo__mes { display: block; margin-top: 2px; font-size: 0.875rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.rg__calc { margin-top: clamp(24px, 3vw, 36px); padding: clamp(22px, 2.6vw, 32px); border-radius: 16px; background: #fff; border: 1px solid #e3ddd4; }
.rg__calc-p { display: block; margin-bottom: 12px; color: #19343d; font-size: 1.125rem; font-weight: 700; line-height: 1.4; }
.rg__calc-campo { display: flex; align-items: center; gap: 10px; max-width: 300px; min-height: 54px; padding: 0 16px; border-radius: 12px; border: 2px solid #8a8378; background: #fff; }
.rg__calc-campo:focus-within { border-color: #19343d; box-shadow: 0 0 0 3px rgba(25, 52, 61, 0.18); }
.rg__calc-campo span { color: #19343d; font-weight: 700; }
.rg__calc-campo input { flex: 1; min-width: 0; height: 50px; border: 0; background: none; color: #19343d; font: inherit; font-size: 1.25rem; font-weight: 700; outline: 0; }
.rg__calc-saida { display: grid; gap: 14px; margin-top: 20px; }
@media (min-width: 760px) { .rg__calc-saida { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.rg__calc-caixa { padding: 18px 20px; border-radius: 12px; background: #fdecea; }
.rg__calc-caixa--total { background: #19343d; }
.rg__calc-rot { margin: 0; color: #19343d; font-weight: 600; line-height: 1.4; }
.rg__calc-v { margin: 6px 0 0; color: #b81d18; font-size: clamp(1.75rem, 3vw, 2.25rem); font-weight: 700; line-height: 1.15; font-variant-numeric: tabular-nums; }
.rg__calc-obs { margin: 8px 0 0; color: #19343d; font-size: 0.9375rem; line-height: 1.5; }
.rg__calc-caixa--total .rg__calc-rot, .rg__calc-caixa--total .rg__calc-v { color: #fff; }
.rg__calc-caixa--total .rg__calc-obs { color: #dbe4e7; }
.rg__calc-btn { margin-top: 20px; gap: 12px; }

/* documentos: o reforço para quem acha que falta papel */
.docs__reforco { display: flex; align-items: flex-start; gap: 10px; margin: 20px 0 0; padding: 16px 18px; border-radius: 12px; background: #eef4f1; color: #19343d; font-weight: 600; line-height: 1.55; }
.docs__reforco .ico { flex: none; width: 22px; height: 22px; margin-top: 1px; color: #1f6b4a; }

/* mapa: as três linhas para o exterior terminam num destino com nome */
.br__arco--fora { stroke: #19343d; stroke-opacity: 0.5; }
.br__fora circle { fill: #fff; stroke: #19343d; stroke-width: 2; }
.br__fora text { font-size: 17px; font-weight: 700; fill: #19343d; paint-order: stroke; stroke: #fff; stroke-width: 3px; stroke-linejoin: round; }
@media (prefers-reduced-motion: no-preference) {
	.entra .hm-onde .br__fora g { opacity: 0; }
	.entra .hm-onde.is-vis .br__fora g { opacity: 1; transition: opacity 0.5s ease calc(2.2s + var(--i) * 0.12s); }
}
/* celular: cada linha da comparação vira um cartão, sem rolagem lateral */
@media (max-width: 699px) {
	.cm__tabela-wrap { overflow: visible; border: 0; }
	.cm__tabela { min-width: 0; }
	.cm__tabela thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
	.cm__tabela, .cm__tabela tbody, .cm__tabela tr, .cm__tabela th, .cm__tabela td { display: block; width: auto; }
	.cm__tabela tr { margin-bottom: 12px; border-radius: 14px; overflow: hidden; border: 1px solid #e8e3dc; }
	.cm__tabela tbody th { width: auto; padding: 14px 16px 6px; border-top: 0; font-size: 1.0625rem; }
	.cm__tabela td { padding: 6px 16px 14px; border-top: 0; }
	.cm__tabela td::before { content: attr(data-col); display: block; margin-bottom: 2px; color: #19343d; font-size: 0.8125rem; font-weight: 700; }
	.cm__tabela td.cm__judicial { padding-top: 12px; }
	.cm__tabela td.cm__judicial::before { color: #fff; }
	.rg__calc { padding: 18px 16px; }
}
.rg__calc-mais { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; margin: 12px 0 0 4px; color: #19343d; font-weight: 700; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.rg__calc .rg__calc-btn + .rg__calc-mais { margin-left: 18px; }
@media (max-width: 699px) { .rg__calc .rg__calc-btn + .rg__calc-mais { margin-left: 0; } }
/* vitrine com quatro cartões (calculadoras): 2x2 até telas largas, 4 numa linha acima */
@media (min-width: 1000px) { .vit--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1240px) { .vit--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ===========================================================
   VÍDEO DO YOUTUBE DENTRO DO TEXTO (07/11/2026) — inc/videos-youtube.php.
   Cartão no lugar do iframe que a CSP bloqueava: abre o YouTube em outra
   aba, sem carregar nada do Google na página.
   =========================================================== */
.video-yt { margin: 1.6em 0; }
.video-yt .video-yt__a,
.texto__corpo .video-yt .video-yt__a {
	display: flex;
	align-items: center;
	gap: 16px;
	max-width: 600px;
	padding: 14px 20px 14px 14px;
	border: 1px solid #e6e5e1;
	border-radius: 14px;
	background: #fff;
	color: #19343d;
	text-decoration: none;
	transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.video-yt__play {
	display: grid;
	flex: none;
	place-items: center;
	width: 52px;
	height: 52px;
	border-radius: 12px;
	background: #d52520;
	color: #fff;
}
.video-yt__t { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.video-yt__k { font-size: 0.875rem; font-weight: 600; color: #52646c; }
.video-yt__n { font-weight: 700; line-height: 1.35; text-decoration: underline; text-decoration-color: rgba(213, 37, 32, 0.55); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.video-yt .video-yt__a:hover { border-color: rgba(213, 37, 32, 0.4); box-shadow: 0 16px 32px -26px rgba(25, 52, 61, 0.45); }
.video-yt .video-yt__a:hover .video-yt__n { text-decoration-color: #19343d; }
.video-yt .video-yt__a:focus-visible { outline: 3px solid #b81d18; outline-offset: 3px; }