/* Páginas de jornada por perfil: Empresas, Advocacia e Particulares.
   Reaproveitam os tokens e a estrutura de cabeçalho e rodapé de legal.css,
   carregada antes desta folha, e acrescentam o layout editorial das páginas. */

.perfil-hero { padding: clamp(52px, 6vw, 88px) 0 clamp(40px, 4.4vw, 62px); background: var(--white); border-bottom: 1px solid var(--line-light); }
.perfil-hero .container { width: min(1280px, calc(100% - 104px)); }
.perfil-hero h1 { max-width: 21ch; font-family: var(--serif); font-size: clamp(2.1rem, 4.4vw, 3.5rem); font-weight: 400; letter-spacing: -.035em; line-height: 1.05; margin: 0; }
.perfil-hero .intro { max-width: 62ch; margin: 26px 0 0; color: var(--gray-dark); font-size: .95rem; line-height: 1.78; }
.perfil-hero .intro p { margin: 0 0 14px; font-size: inherit; }
.perfil-hero .intro p:last-child { margin-bottom: 0; }

/* ============================================================
   HERO PRETO E MONOCROMATICO — TESTE, SOMENTE /localiza, 2026-08-24
   ============================================================
   `.perfil-hero` e' compartilhado pelas 18 internas, entao entra por classe
   modificadora `hero-mono`, declarada so' no `localiza.html`. **NAO replicar em
   CHECK, DUE, CAMPO, INVESTIGA ou CONTINUADO sem aprovacao** — e' teste.
   MESMA fotografia do CTA final da propria pagina, com DUAS diferencas
   deliberadas, para criar unidade sem parecer repeticao:
     1. recorte proprio (`hero-localiza-mono-*`), porque o heroi e' 3,45:1 contra
        2,58:1 do CTA — o recorte do CTA sofreria `cover` nas laterais;
     2. tratamento MONOCROMATICO aqui, colorido la'.
   A dessaturacao e' `filter: grayscale(1)` no `::before`, e aqui isso e' seguro:
   o registro sobre `background-blend-mode` vale para o caso em que veu e foto
   dividem o MESMO pseudo-elemento — `filter` incidiria sobre o veu junto e
   afundaria o piso. Aqui a foto esta no `::before` e o veu no `::after`, entao o
   filtro alcanca so' a imagem. `contrast` e `brightness` sobem um pouco para o
   preto e branco ler contemporaneo em vez de chapado; sem sepia, sem virado.
   O veu segue a densidade calibrada do CTA, nao a densa que foi corrigida:
   preto dominante COM a fotografia visivel. */
.perfil-hero.hero-mono { position: relative; isolation: isolate; overflow: hidden; background: var(--graphite); border-bottom-color: rgba(255, 255, 255, .14); }
.perfil-hero.hero-mono::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background-image: url("assets/hero-localiza-mono-1800.webp");
  background-size: cover; background-position: 50% 32%;
  filter: grayscale(1) contrast(1.12) brightness(1.06);
  opacity: .95;
}
.perfil-hero.hero-mono::after {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(100deg, rgba(0, 0, 0, .72) 0%, rgba(0, 0, 0, .68) 44%, rgba(0, 0, 0, .44) 76%, rgba(0, 0, 0, .62) 100%);
}
.perfil-hero.hero-mono > .container { position: relative; z-index: 1; }
.perfil-hero.hero-mono .eyebrow { color: var(--gold-bright); }
.perfil-hero.hero-mono h1 { color: var(--off-white); }
.perfil-hero.hero-mono .intro { color: #d2cbc0; }
/* Respiro entre o ultimo paragrafo e a dupla de botoes do heroi.
   Medido antes de mexer: `.perfil-actions` nao tinha `margin-top`, e da ultima
   LINHA de texto ao topo do botao sobravam 4 px -- os botoes ficavam colados no
   paragrafo. Os 4 px eram so' a meia-entrelinha do `<p>`, nao espaco de projeto.
   A rampa e' linear na largura da janela: ~28 px a 1440, ~24 a 768 e ~21 a 375.
   Some-se a meia-entrelinha e o vao percebido fica em ~32 / ~28 / ~25 px.
   ESCOPO: pendurada em `.hero-mono` de proposito. `.perfil-actions` existe em
   16 paginas -- as seis de direcionamento tambem a usam no CTA final, e outras
   dez a usam no proprio heroi. `hero-mono` e' exatamente o heroi das seis, e so'
   ele: e' o seletor mais estreito que cobre o pedido sem alcancar nada mais. */
.perfil-hero.hero-mono .perfil-actions { margin-top: clamp(21px, .6vw + 19px, 28px); }
/* Hierarquia preservada: o primario ganha preenchimento mais fechado e moldura
   mais forte; o secundario fica identificavel sem competir. Sobre preto os dois
   originais sumiriam — `.btn-dark` e' preto com borda preta e `.btn-outline` tem
   tinta preta com borda preta a 30%. */
.perfil-hero.hero-mono .btn-dark { color: var(--white); background: rgba(0, 0, 0, .62); border-color: rgba(255, 255, 255, .40); }
.perfil-hero.hero-mono .btn-dark:hover { color: var(--white); background: rgba(0, 0, 0, .80); border-color: var(--gold-bright); }
.perfil-hero.hero-mono .btn-outline { color: var(--white); background: rgba(0, 0, 0, .22); border-color: rgba(255, 255, 255, .26); }
.perfil-hero.hero-mono .btn-outline:hover { color: var(--white); border-color: var(--gold-bright); }
.perfil-hero.hero-mono .btn-outline .btn-arrow { color: var(--gold-bright); }

/* ------------- HEROES MONOCROMATICOS DOS CINCO DIRECIONAMENTOS RESTANTES
   A linguagem aprovada no /localiza, aplicada a CHECK, DUE, CAMPO, INVESTIGA e
   CONTINUADO. As modificadoras declaram SO' o que muda -- fotografia, ancoragem
   e veu; base preta, filtro monocromatico, tipografia e botoes vem da regra
   `.hero-mono` acima, que continua sendo a do /localiza e nao foi tocada.
   Mesma especificidade (0,2,1) da regra base: quem vence e' a ordem de origem,
   e por isso estas vem DEPOIS. O /localiza nao carrega modificadora nenhuma,
   entao continua lendo a base e permanece byte-identico ao aprovado.

   A DENSIDADE DO VEU NAO E' COPIADA. Angulo e posicao dos stops sim -- as cinco
   composicoes repetem a geometria do /localiza, massa escura a esquerda onde o
   texto cai e luz a direita. O que muda e' o alfa, porque as fotografias tem
   luminancias muito diferentes: medida na metade esquerda do recorte ja' com o
   filtro do CSS aplicado, a p99 vai de 0,098 no DUE a 1,000 no CHECK, contra
   0,098 do /localiza. Copiar o .72 do /localiza no CHECK deixaria o texto sobre
   janela estourada. Os valores abaixo sao ponto de partida calculado; os finais
   saem da medicao sob glifo, registrada ao lado de cada faixa. */
.perfil-hero.hero-mono-check::before { background-image: url("assets/hero-check-mono-1800.webp"); background-position: 50% 32%; }
.perfil-hero.hero-mono-due::before { background-image: url("assets/hero-due-mono-1800.webp"); background-position: 50% 32%; }
.perfil-hero.hero-mono-campo::before { background-image: url("assets/hero-campo-mono-1800.webp"); background-position: 50% 32%; }
.perfil-hero.hero-mono-investiga::before { background-image: url("assets/hero-investiga-mono-1800.webp"); background-position: 50% 32%; }
.perfil-hero.hero-mono-continuado::before { background-image: url("assets/hero-continuado-mono-1800.webp"); background-position: 50% 32%; }
.perfil-hero.hero-mono-check::after { background: linear-gradient(100deg, rgba(0, 0, 0, .90) 0%, rgba(0, 0, 0, .86) 44%, rgba(0, 0, 0, .62) 76%, rgba(0, 0, 0, .80) 100%); }
.perfil-hero.hero-mono-due::after { background: linear-gradient(100deg, rgba(0, 0, 0, .72) 0%, rgba(0, 0, 0, .68) 44%, rgba(0, 0, 0, .44) 76%, rgba(0, 0, 0, .62) 100%); }
.perfil-hero.hero-mono-campo::after { background: linear-gradient(100deg, rgba(0, 0, 0, .72) 0%, rgba(0, 0, 0, .68) 44%, rgba(0, 0, 0, .44) 76%, rgba(0, 0, 0, .62) 100%); }
.perfil-hero.hero-mono-investiga::after { background: linear-gradient(100deg, rgba(0, 0, 0, .77) 0%, rgba(0, 0, 0, .73) 44%, rgba(0, 0, 0, .49) 76%, rgba(0, 0, 0, .67) 100%); }
.perfil-hero.hero-mono-continuado::after { background: linear-gradient(100deg, rgba(0, 0, 0, .86) 0%, rgba(0, 0, 0, .82) 44%, rgba(0, 0, 0, .58) 76%, rgba(0, 0, 0, .76) 100%); }

/* Banda fotográfica entre a abertura e as situações. As páginas de perfil
   eram inteiramente tipográficas: uma fotografia aqui dá respiro e mostra o
   ambiente do público antes da lista de situações. Sem legenda e sem texto
   por cima — a imagem não disputa com o H1 nem com o conteúdo. */
.perfil-media { margin: 0; overflow: hidden; background: var(--paper); }
.perfil-media picture { display: block; }
.perfil-media img { display: block; width: 100%; height: auto; aspect-ratio: 2 / 1; object-fit: cover; }

@media (max-width: 700px) {
  .perfil-media img { aspect-ratio: 1 / 1; }
}

.perfil-section { padding-block: clamp(50px, 5.4vw, 78px); }
.perfil-section .container { width: min(1280px, calc(100% - 104px)); }
.perfil-section.on-paper { background: var(--paper); }
.perfil-section.on-light { background: var(--off-white); }
.perfil-section > .container > .eyebrow { margin-bottom: 14px; }
.perfil-section h2 { max-width: 22ch; margin: 0 0 34px; padding: 0; border: 0; font-family: var(--serif); font-size: clamp(1.6rem, 2.6vw, 2.3rem); font-weight: 400; letter-spacing: -.03em; line-height: 1.12; }

/* Lista de situações: índice editorial em duas colunas, com filete bronze
   curto sobre cada divisor — a mesma linguagem das áreas de atuação, porém em
   escala menor, porque aqui são exemplos e não o catálogo.

   `grid-auto-rows: 1fr` iguala a altura de todas as faixas, e não é
   preciosismo: as duas colunas partilham a mesma trilha de linha, então um
   único item que quebre em duas linhas inflava a faixa inteira e produzia uma
   banda mais alta no meio da lista — 74 px contra 53 px, medido em
   `/condominios` (itens 05/06) e em `/advocacia` (11/12) antes da correção de
   2026-08-16. O ritmo dos divisores passa a ser constante independentemente do
   comprimento do texto, que é o que a lista promete visualmente.

   **A trava não substitui a regra de copy:** estes enunciados são de uma linha
   por definição (ver seção 6 do AGENTS.md). Se um item passar a quebrar, a faixa
   inteira sobe junto — uniforme, porém mais alta. Ao escrever item novo, medir
   contra os demais em vez de confiar no `1fr`. */
.situacoes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: 0 clamp(34px, 4.4vw, 70px); }
.situacao { position: relative; display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 0 14px; align-items: baseline; padding: 15px 0; border-top: 1px solid var(--line-light); }
.situacao::before { content: ""; position: absolute; top: -1px; left: 0; width: 13px; height: 1px; background: var(--gold-bright); }
.situacao span { color: var(--gold); font-family: var(--serif); font-size: .92rem; line-height: 1.5; }
.situacao p { margin: 0; font-size: .84rem; line-height: 1.55; }

/* Ressalva de limites: bloco de leitura obrigatória, marcado por filete. */
.ressalva { max-width: 74ch; margin: 34px 0 0; padding: 22px 26px; background: var(--white); border-left: 2px solid var(--gold); }
.ressalva p { margin: 0; color: var(--gray-dark); font-size: .84rem; line-height: 1.72; }
.ressalva p + p { margin-top: 11px; }
.ressalva strong { color: var(--graphite); font-weight: 600; }
.on-paper .ressalva { background: rgba(255, 255, 255, .55); }

/* Mensagem central: única frase em serifa grande, com respiro. */
.mensagem { padding-block: clamp(54px, 6vw, 86px); color: var(--off-white); background: var(--graphite); }
.mensagem .container { width: min(1280px, calc(100% - 104px)); }
.mensagem .eyebrow { color: var(--gold-bright); }
.mensagem blockquote { max-width: 20ch; margin: 0; font-family: var(--serif); font-size: clamp(1.9rem, 3.6vw, 3rem); font-weight: 400; letter-spacing: -.035em; line-height: 1.1; }
.mensagem .apoio { max-width: 60ch; margin: 26px 0 0; color: #c5bdb3; font-size: .9rem; line-height: 1.75; }

/* Serviços relacionados: ponte para o catálogo dos quatro pilares. */
.relacionadas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(34px, 4.4vw, 70px); }
.relacionada { position: relative; display: grid; grid-template-columns: 46px minmax(0, 1fr) 18px; grid-template-rows: auto auto; gap: 5px 15px; align-content: center; min-height: 104px; padding: 20px 0; color: var(--graphite); border-top: 1px solid rgba(117, 88, 48, .32); text-decoration: none; transition: color .2s ease, border-color .2s ease; }
.relacionada::before { content: ""; position: absolute; top: -1px; left: 0; width: 38px; height: 2px; background: var(--gold-bright); transition: width .32s ease; }
.relacionada:hover::before, .relacionada:focus-visible::before { width: 100%; }
.relacionada b { grid-row: 1 / 3; align-self: start; position: relative; display: grid; place-items: center; width: 40px; height: 40px; color: var(--gold); font-family: var(--serif); font-size: .92rem; font-weight: 400; }
.relacionada b::before { content: ""; position: absolute; inset: 0; background: var(--gold-bright); opacity: .55; -webkit-mask: url("assets/service-badge.png") center / contain no-repeat; mask: url("assets/service-badge.png") center / contain no-repeat; }
.relacionada h3 { grid-column: 2; margin: 0; font-family: var(--serif); font-size: 1.08rem; font-weight: 400; letter-spacing: -.015em; line-height: 1.2; }
.relacionada p { grid-column: 2; margin: 0; color: #6b6961; font-size: .76rem; line-height: 1.55; }
.relacionada i { grid-column: 3; grid-row: 1 / 3; align-self: center; justify-self: end; color: var(--gold); font-family: var(--serif); font-size: 1.2rem; font-style: normal; transition: transform .28s ease; }
.relacionada:hover, .relacionada:focus-visible { color: #755f3d; }
.relacionada:hover i, .relacionada:focus-visible i { transform: translateX(4px); }

/* Chamada final. */
.perfil-cta { padding-block: clamp(56px, 6vw, 88px); background: var(--white); border-top: 1px solid var(--line-light); }
.perfil-cta .container { width: min(1280px, calc(100% - 104px)); }
/* CORRECAO TECNICA preservada da versao posterior. A `/404.html` usa
   `.perfil-cta` com `h1`, e sem o `h1` neste seletor o titulo herdava a cor do
   `body` e ficava escuro sobre o cartao escuro: medido **1,36** nesta mesma
   versao, texto literalmente invisivel. Nao altera a aparencia pretendida de
   5805fb7 em nenhuma outra pagina. */
.perfil-cta h2, .perfil-cta h1 { max-width: 20ch; margin: 0 0 16px; padding: 0; border: 0; font-family: var(--serif); font-size: clamp(1.6rem, 2.8vw, 2.4rem); font-weight: 400; letter-spacing: -.03em; line-height: 1.1; }
.perfil-cta p { max-width: 58ch; margin: 0 0 30px; color: var(--gray-dark); font-size: .9rem; }
.perfil-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.btn { display: inline-flex; align-items: center; gap: 11px; min-height: 46px; padding: 0 22px; border: 1px solid transparent; text-decoration: none; font-size: .69rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; transition: color .2s ease, background .2s ease, border-color .2s ease; }
.btn svg { flex: 0 0 auto; width: 17px; height: 17px; }
.btn-dark { color: var(--white); background: var(--graphite); border-color: var(--graphite); }
.btn-dark:hover { color: var(--white); background: #000000; }
.btn-outline { color: var(--graphite); border-color: rgba(0, 0, 0, .3); }
.btn-outline:hover { color: var(--graphite); border-color: var(--gold); }
.btn-arrow { color: var(--gold-bright); font-family: var(--serif); font-size: 1rem; line-height: 1; }
.btn-outline .btn-arrow { color: var(--gold); }

/* ============================================================
   FUNDO FOTOGRAFICO DO CTA — SOMENTE /localiza, 2026-08-24
   ============================================================
   `.perfil-cta` e' componente compartilhado pelas 18 paginas internas, entao a
   fotografia entra por classe MODIFICADORA `cta-foto`, declarada apenas no
   `localiza.html`. Nenhuma outra pagina e' tocada.
   A geometria e' a mesma ja usada no heroi e em `#perfis`: veu mais denso a
   esquerda, onde caem eyebrow, titulo e paragrafo, e ABERTO a direita, onde nao
   ha texto. **A densidade da esquerda caiu de .94/.90 para .66/.62 em 2026-08-24**,
   por decisao do proprietario: a 0,94 o observador da fotografia praticamente
   desaparecia, e o pior contraste media 6,34 contra um piso de 4,5 — folga
   ociosa. Em .66/.62 ele participa da composicao e o pior caso fica em 5,32.
   **Nao voltar a fechar para "ganhar contraste":** a margem ja e' suficiente, e
   fechar e' o caminho da mancha chapada. O lado DIREITO nao foi tocado.
   As tintas invertem porque a superficie inverteu: `--gray-dark` sobre foto
   noturna some, e `.btn-outline` tem tinta preta com borda preta a 30% — os dois
   desapareceriam. Bronze CLARO no eyebrow e nas setas: `--gold` #755830 e' tinta
   de fundo claro e reprova sobre escuro. */
.perfil-cta.cta-foto { position: relative; isolation: isolate; overflow: hidden; background: var(--graphite); border-top-color: rgba(255, 255, 255, .14); }
.perfil-cta.cta-foto::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background-image: url("assets/cta-localiza-1600.webp");
  background-size: cover; background-position: 50% 44%;
  opacity: .92; filter: saturate(.68);
}
.perfil-cta.cta-foto::after {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(100deg, rgba(0, 0, 0, .66) 0%, rgba(0, 0, 0, .62) 40%, rgba(0, 0, 0, .42) 72%, rgba(0, 0, 0, .60) 100%);
}
.perfil-cta.cta-foto > .container { position: relative; z-index: 1; }
.perfil-cta.cta-foto .eyebrow { color: var(--gold-bright); }
.perfil-cta.cta-foto h2 { color: var(--off-white); }
.perfil-cta.cta-foto p { color: #d2cbc0; }
.perfil-cta.cta-foto .btn-dark { color: var(--white); background: rgba(0, 0, 0, .58); border-color: rgba(255, 255, 255, .34); }
.perfil-cta.cta-foto .btn-dark:hover { color: var(--white); background: rgba(0, 0, 0, .78); border-color: var(--gold-bright); }
.perfil-cta.cta-foto .btn-outline { color: var(--white); background: rgba(0, 0, 0, .30); border-color: rgba(255, 255, 255, .34); }
.perfil-cta.cta-foto .btn-outline:hover { color: var(--white); border-color: var(--gold-bright); }
.perfil-cta.cta-foto .btn-outline .btn-arrow { color: var(--gold-bright); }

/* ---------------- CTA FOTOGRAFICO DOS CINCO DIRECIONAMENTOS RESTANTES
   A mesma fotografia que abre a pagina em preto e branco a fecha COLORIDA, em
   recorte proprio -- e' o fechamento do arco visual, e o recorte diferente e' o
   que faz a repeticao ler como intencao e nao como falha.
   Sem `grayscale` aqui, de proposito: o `saturate(.68)` da regra base segura a
   cor sem lavar a fotografia. */
.perfil-cta.cta-foto-check::before { background-image: url("assets/cta-check-1600.webp"); background-position: 50% 44%; }
.perfil-cta.cta-foto-due::before { background-image: url("assets/cta-due-1600.webp"); background-position: 50% 44%; }
.perfil-cta.cta-foto-campo::before { background-image: url("assets/cta-campo-1600.webp"); background-position: 50% 44%; }
.perfil-cta.cta-foto-investiga::before { background-image: url("assets/cta-investiga-1600.webp"); background-position: 50% 44%; }
.perfil-cta.cta-foto-continuado::before { background-image: url("assets/cta-continuado-1600.webp"); background-position: 50% 44%; }
.perfil-cta.cta-foto-check::after { background: linear-gradient(100deg, rgba(0, 0, 0, .84) 0%, rgba(0, 0, 0, .80) 40%, rgba(0, 0, 0, .60) 72%, rgba(0, 0, 0, .78) 100%); }
.perfil-cta.cta-foto-due::after { background: linear-gradient(100deg, rgba(0, 0, 0, .66) 0%, rgba(0, 0, 0, .62) 40%, rgba(0, 0, 0, .42) 72%, rgba(0, 0, 0, .60) 100%); }
.perfil-cta.cta-foto-campo::after { background: linear-gradient(100deg, rgba(0, 0, 0, .66) 0%, rgba(0, 0, 0, .62) 40%, rgba(0, 0, 0, .42) 72%, rgba(0, 0, 0, .60) 100%); }
.perfil-cta.cta-foto-investiga::after { background: linear-gradient(100deg, rgba(0, 0, 0, .71) 0%, rgba(0, 0, 0, .67) 40%, rgba(0, 0, 0, .47) 72%, rgba(0, 0, 0, .65) 100%); }
.perfil-cta.cta-foto-continuado::after { background: linear-gradient(100deg, rgba(0, 0, 0, .86) 0%, rgba(0, 0, 0, .82) 40%, rgba(0, 0, 0, .60) 72%, rgba(0, 0, 0, .78) 100%); }

/* Navegação entre os cinco perfis, ao pé da página. */
.outros-perfis { padding-block: clamp(44px, 4.6vw, 62px); background: var(--paper); }
.outros-perfis .container { width: min(1280px, calc(100% - 104px)); }
.outros-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(18px, 2vw, 26px); margin-top: 22px; }
.outro-card { position: relative; display: flex; flex-direction: column; gap: 9px; padding: 24px 26px; color: var(--graphite); background: var(--white); border: 1px solid var(--line-light); text-decoration: none; transition: border-color .28s ease, transform .28s ease; }
.outro-card::before { content: ""; position: absolute; top: -1px; left: -1px; width: 38px; height: 2px; background: var(--gold-bright); transition: width .32s ease; }
.outro-card:hover, .outro-card:focus-visible { transform: translateY(-3px); border-color: #c9c2b4; }
.outro-card:hover::before, .outro-card:focus-visible::before { width: calc(100% + 2px); }
.outro-card strong { font-size: .74rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.outro-card span { color: var(--gold); font-size: .67rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }

@media (max-width: 900px) {
  /* Heroi na faixa 701-900: a coluna de texto se alarga sobre a parte iluminada
     da fotografia e o `.72` do desktop derrubava o segundo paragrafo para 4,28.
     A correcao de 2026-08-24 subiu SO' a densidade da esquerda (.72->.82 e
     .68->.78) e anotou "devolve ~5,1", mas deixou o TERCEIRO stop no valor do
     desktop, `.44` em 76%. Medido no pixel composto em 2026-08-30: com o master
     `-1800` recortado por `cover` numa caixa de 768, a abertura de 76% cai sobre
     a cauda do paragrafo e sobre o botao secundario — paragrafo em **2,95** e
     seta do `.btn-outline` em **1,72**, os dois abaixo do piso. As cinco irmas
     abaixo ja' tinham o terceiro stop recalibrado (.74, .58, .56, .49, .58); so'
     o /localiza ficou para tras. Terceiro stop passa a `.56` em 86% e a ponta a
     `.70`, que e' o veu MAIS LEVE em que toda tinta do heroi alcanca seu piso:
     paragrafo **5,50** e seta **3,05** (piso 3,0 de objeto grafico). Verificado
     que 1440 e 375 nao se movem — 5,82 e 5,05, identicos ao publicado — e que as
     cinco irmas seguem intactas, porque as regras delas vem depois nesta media
     query e vencem por ordem. Ao trocar o master ou a ancora, remedir a 768. */
  .perfil-hero.hero-mono::after { background: linear-gradient(100deg, rgba(0, 0, 0, .82) 0%, rgba(0, 0, 0, .78) 56%, rgba(0, 0, 0, .56) 86%, rgba(0, 0, 0, .70) 100%); }
  /* Faixa 701-900 das cinco: a coluna de texto se alarga sobre a parte clara,
     exatamente como no /localiza, entao a esquerda sobe. */
  .perfil-hero.hero-mono-check::after { background: linear-gradient(100deg, rgba(0, 0, 0, .94) 0%, rgba(0, 0, 0, .94) 60%, rgba(0, 0, 0, .74) 88%, rgba(0, 0, 0, .86) 100%); }
  .perfil-hero.hero-mono-due::after { background: linear-gradient(100deg, rgba(0, 0, 0, .84) 0%, rgba(0, 0, 0, .80) 54%, rgba(0, 0, 0, .58) 86%, rgba(0, 0, 0, .70) 100%); }
  .perfil-hero.hero-mono-campo::after { background: linear-gradient(100deg, rgba(0, 0, 0, .85) 0%, rgba(0, 0, 0, .81) 56%, rgba(0, 0, 0, .56) 86%, rgba(0, 0, 0, .70) 100%); }
  .perfil-hero.hero-mono-investiga::after { background: linear-gradient(100deg, rgba(0, 0, 0, .87) 0%, rgba(0, 0, 0, .83) 44%, rgba(0, 0, 0, .49) 76%, rgba(0, 0, 0, .67) 100%); }
  .perfil-hero.hero-mono-continuado::after { background: linear-gradient(100deg, rgba(0, 0, 0, .94) 0%, rgba(0, 0, 0, .92) 44%, rgba(0, 0, 0, .58) 76%, rgba(0, 0, 0, .76) 100%); }
  /* A faixa 701-900 nao recebia nem a geometria deitada do desktop nem a
     correcao em pe do celular, e a 768 o paragrafo media **3,51** — o trecho
     ABERTO do veu de 100deg subia sobre ele. E' a mesma falha ja registrada
     para `#contato`, e a mesma correcao: mover STOPS, nunca subir alfa.
     Os quatro alfas sao identicos aos do desktop; so' as posicoes mudam,
     empurrando a abertura para depois da coluna de texto. */
  /* A densidade da esquerda NAO e' a mesma das tres larguras, e isso e' medicao.
     A 1440 o texto ocupa a metade esquerda, que na fotografia e' a parte escura;
     a 768 a mesma coluna se alarga sobre a rua iluminada, e .66 derrubava o
     paragrafo para **3,41**. Aqui a densidade sobe para .82/.78, que devolve 5,09. */
  .perfil-cta.cta-foto::after { background: linear-gradient(100deg, rgba(0, 0, 0, .82) 0%, rgba(0, 0, 0, .78) 54%, rgba(0, 0, 0, .42) 88%, rgba(0, 0, 0, .60) 100%); }
  .perfil-cta.cta-foto-check::after { background: linear-gradient(100deg, rgba(0, 0, 0, .94) 0%, rgba(0, 0, 0, .94) 54%, rgba(0, 0, 0, .60) 88%, rgba(0, 0, 0, .78) 100%); }
  .perfil-cta.cta-foto-due::after { background: linear-gradient(100deg, rgba(0, 0, 0, .82) 0%, rgba(0, 0, 0, .78) 54%, rgba(0, 0, 0, .42) 88%, rgba(0, 0, 0, .60) 100%); }
  .perfil-cta.cta-foto-campo::after { background: linear-gradient(100deg, rgba(0, 0, 0, .82) 0%, rgba(0, 0, 0, .78) 54%, rgba(0, 0, 0, .42) 88%, rgba(0, 0, 0, .60) 100%); }
  .perfil-cta.cta-foto-investiga::after { background: linear-gradient(100deg, rgba(0, 0, 0, .87) 0%, rgba(0, 0, 0, .83) 54%, rgba(0, 0, 0, .47) 88%, rgba(0, 0, 0, .65) 100%); }
  .perfil-cta.cta-foto-continuado::after { background: linear-gradient(100deg, rgba(0, 0, 0, .88) 0%, rgba(0, 0, 0, .86) 54%, rgba(0, 0, 0, .52) 88%, rgba(0, 0, 0, .70) 100%); }
  .perfil-hero .container, .perfil-section .container, .mensagem .container, .perfil-cta .container, .outros-perfis .container { width: min(1280px, calc(100% - 48px)); }
  .situacoes, .relacionadas, .outros-grid { grid-template-columns: 1fr; }
  /* Em coluna única não há trilha partilhada: cada item já é a própria linha, e
     manter o `1fr` aqui igualaria as doze faixas pela mais alta, desperdiçando
     altura justamente onde a tela é menor. */
  .situacoes { grid-auto-rows: auto; }
  .perfil-hero h1, .perfil-section h2, .mensagem blockquote, .perfil-cta h2 { max-width: none; }
}

@media (max-width: 700px) {
  .perfil-hero .container, .perfil-section .container, .mensagem .container, .perfil-cta .container, .outros-perfis .container { width: min(1280px, calc(100% - 40px)); }
  .ressalva { padding: 18px 20px; }
  .perfil-actions .btn { width: 100%; justify-content: center; }
  /* Heroi no celular: caixa em pe (0,89:1 contra 3,45:1 do desktop), entao o
     recorte 3:4 e o gradiente quase vertical, pela mesma razao ja registrada
     para `#contato` e para o CTA desta pagina. */
  .perfil-hero.hero-mono::before { background-image: url("assets/hero-localiza-mono-mobile.webp"); background-position: 50% 30%; }
  /* No celular o conteudo ocupa de 14% a 90% da altura do heroi — medido —,
     entao NAO existe faixa central livre: abrir o veu no meio, como no desktop,
     joga a abertura exatamente sobre o segundo paragrafo, que media **3,51**.
     A geometria correta aqui e' o inverso: DENSO na faixa do texto e aberto nas
     duas pontas, onde nao ha nada. Com isso o pior caso sobe para 5,92.
     Testadas tres densidades de miolo — .86 (6,20), .76 (5,92) e .68 (4,85):
     ficou .76, que e' onde a fotografia aparece sem gastar a margem toda. */
  .perfil-hero.hero-mono::after { background: linear-gradient(180deg, rgba(0, 0, 0, .44) 0%, rgba(0, 0, 0, .76) 13%, rgba(0, 0, 0, .76) 89%, rgba(0, 0, 0, .50) 100%); }
  /* Celular: caixa em pe, veu denso na faixa do texto e aberto nas pontas. */
  .perfil-hero.hero-mono-check::before { background-image: url("assets/hero-check-mono-mobile.webp"); background-position: 50% 30%; }
  .perfil-hero.hero-mono-due::before { background-image: url("assets/hero-due-mono-mobile.webp"); background-position: 50% 30%; }
  .perfil-hero.hero-mono-campo::before { background-image: url("assets/hero-campo-mono-mobile.webp"); background-position: 50% 30%; }
  .perfil-hero.hero-mono-investiga::before { background-image: url("assets/hero-investiga-mono-mobile.webp"); background-position: 50% 30%; }
  .perfil-hero.hero-mono-continuado::before { background-image: url("assets/hero-continuado-mono-mobile.webp"); background-position: 50% 30%; }
  .perfil-hero.hero-mono-check::after { background: linear-gradient(180deg, rgba(0, 0, 0, .58) 0%, rgba(0, 0, 0, .88) 13%, rgba(0, 0, 0, .88) 89%, rgba(0, 0, 0, .64) 100%); }
  .perfil-hero.hero-mono-due::after { background: linear-gradient(180deg, rgba(0, 0, 0, .58) 0%, rgba(0, 0, 0, .82) 10%, rgba(0, 0, 0, .82) 89%, rgba(0, 0, 0, .54) 100%); }
  .perfil-hero.hero-mono-campo::after { background: linear-gradient(180deg, rgba(0, 0, 0, .44) 0%, rgba(0, 0, 0, .76) 13%, rgba(0, 0, 0, .76) 89%, rgba(0, 0, 0, .50) 100%); }
  .perfil-hero.hero-mono-investiga::after { background: linear-gradient(180deg, rgba(0, 0, 0, .49) 0%, rgba(0, 0, 0, .81) 13%, rgba(0, 0, 0, .81) 89%, rgba(0, 0, 0, .55) 100%); }
  .perfil-hero.hero-mono-continuado::after { background: linear-gradient(180deg, rgba(0, 0, 0, .54) 0%, rgba(0, 0, 0, .84) 13%, rgba(0, 0, 0, .84) 89%, rgba(0, 0, 0, .60) 100%); }
  /* No celular a caixa deixa de ser deitada e passa a ficar em pe: o texto
     atravessa a largura inteira e o trecho ABERTO do veu de 100deg subiria
     justamente sobre ele. E' a mesma falha ja registrada para `#contato`.
     Troca a imagem para o recorte 3:4 e o gradiente para quase vertical. */
  .perfil-cta.cta-foto::before { background-image: url("assets/cta-localiza-mobile.webp"); background-position: 50% 42%; }
  .perfil-cta.cta-foto::after { background: linear-gradient(176deg, rgba(0, 0, 0, .76) 0%, rgba(0, 0, 0, .72) 48%, rgba(0, 0, 0, .50) 80%, rgba(0, 0, 0, .68) 100%); }
  .perfil-cta.cta-foto-check::before { background-image: url("assets/cta-check-mobile.webp"); background-position: 50% 42%; }
  .perfil-cta.cta-foto-due::before { background-image: url("assets/cta-due-mobile.webp"); background-position: 50% 42%; }
  .perfil-cta.cta-foto-campo::before { background-image: url("assets/cta-campo-mobile.webp"); background-position: 50% 42%; }
  .perfil-cta.cta-foto-investiga::before { background-image: url("assets/cta-investiga-mobile.webp"); background-position: 50% 42%; }
  .perfil-cta.cta-foto-continuado::before { background-image: url("assets/cta-continuado-mobile.webp"); background-position: 50% 42%; }
  .perfil-cta.cta-foto-check::after { background: linear-gradient(176deg, rgba(0, 0, 0, .88) 0%, rgba(0, 0, 0, .84) 48%, rgba(0, 0, 0, .64) 80%, rgba(0, 0, 0, .80) 100%); }
  .perfil-cta.cta-foto-due::after { background: linear-gradient(176deg, rgba(0, 0, 0, .84) 0%, rgba(0, 0, 0, .80) 48%, rgba(0, 0, 0, .58) 80%, rgba(0, 0, 0, .74) 100%); }
  .perfil-cta.cta-foto-campo::after { background: linear-gradient(176deg, rgba(0, 0, 0, .76) 0%, rgba(0, 0, 0, .72) 48%, rgba(0, 0, 0, .50) 80%, rgba(0, 0, 0, .68) 100%); }
  .perfil-cta.cta-foto-investiga::after { background: linear-gradient(176deg, rgba(0, 0, 0, .81) 0%, rgba(0, 0, 0, .77) 48%, rgba(0, 0, 0, .55) 80%, rgba(0, 0, 0, .73) 100%); }
  .perfil-cta.cta-foto-continuado::after { background: linear-gradient(176deg, rgba(0, 0, 0, .90) 0%, rgba(0, 0, 0, .86) 48%, rgba(0, 0, 0, .64) 80%, rgba(0, 0, 0, .82) 100%); }
}