/* =========================================================================
PELE «BALCÃO» — a direção visual do site. Em produção desde 09/09/2026.
=========================================================================
Carregada DEPOIS de /assets/style.css, pelo `` que
`functions/_lib/moldura-do-site.js` governa. Ela não substitui a folha:
redefine os tokens e sobrescreve o que a direção decide.
🚩 SEGUNDA FOLHA, E NÃO FUSÃO COM style.css, DE PROPÓSITO: reverter a
direção inteira é apagar uma linha do ``. Fundir é o passo de quando
ela estiver aprovada de vez — e aí não há mais o que reverter em um gesto.
⚠️ ELA NASCEU EM docs/design/pele-balcao.css, com um cabeçalho dizendo «não
é para produção», e ficou lá enquanto era proposta. O que a promoveu não foi
ela mudar: foi o Matheus decidir. O histórico de git segue o arquivo.
-------------------------------------------------------------------------
A CENA DE QUEM LÊ — toda decisão abaixo se justifica contra ela
-------------------------------------------------------------------------
Uma pessoa de Mirassol ou de uma cidade ao lado, no celular, à noite, na
cama ou no sofá. Ela nunca falou com advogado. Acabou de buscar «meu nome
foi negativado e eu não devo nada» ou «trabalhei e não recebi posso chamar
a polícia». Ela tem medo de que clicar já a comprometa com alguma coisa —
uma taxa, um contrato, uma obrigação. Ela não sabe em que área o caso dela
entra. E ela não está lendo: está VARRENDO, à procura de uma frase em que
se reconheça, e do que acontece depois.
-------------------------------------------------------------------------
POR QUE «BALCÃO»
-------------------------------------------------------------------------
Um balcão é onde você chega sem hora marcada, alguém diz em português o que
acontece, e você sai sabendo. Não é tribunal, não é escritório de filme, e
não promete nada. É o registro que a MARCA já escolheu — minúsculas,
geometria, monograma — e que as quatro direções reprovadas não tinham:
3 direções de 06/09 «muito com a cara de Claude»
editorial branca «muito fria» -> branco puro + preto neutro
editorial quente «não funciona com o logo» -> nogueira e latão
branco/cinza + azul «não estou gostando» -> frieza corporativa
========================================================================= */
:root {
/* -----------------------------------------------------------------------
1. UM AZUL SÓ — e ele é o da marca, amostrado do logotipo em uso.
Contraste com branco: 9,52:1. Serve para marca, botão com texto branco,
link em corpo de texto e faixa sangrada, sem precisar de um segundo tom.
A história dos «dois azuis» veio de um mockup mais claro e não vale.
⚠️ TOKEN NUM LUGAR SÓ, de propósito: o hex veio de um PNG de 297×126, e
o valor canônico vem do designer. Trocar é editar esta linha.
-------------------------------------------------------------------- */
--marca-azul: #1b4484;
/* -----------------------------------------------------------------------
2. OS NEUTROS SÃO DERIVADOS DO AZUL, POR DESSATURAÇÃO — e é isto que
responde às DUAS reprovações de cor ao mesmo tempo:
«muito fria» -> não há branco puro nem preto neutro aqui;
«não funciona com o logo» -> não há nada morno; todo neutro é parente
do azul da marca, então não pode brigar
com ele.
É a única saída que não é gosto: a paleta inteira sai de uma cor que já
foi decidida por outra pessoa.
-------------------------------------------------------------------- */
--papel: #f7f8fb; /* fundo da página — azul a 3% de saturação */
--papel-alto: #ffffff; /* cartão sobre o fundo, para dar relevo sem sombra */
--papel-fundo: #eef1f7;/* faixa alternada — o mesmo azul, um passo abaixo */
--tinta: #141a24; /* texto — azul quase preto, nunca #000 */
--tinta-suave: #4a5568;
--fio: #d7dde8;
/* Nomes da folha antiga, reapontados: a pele veste sem editar o HTML. */
--azul: var(--marca-azul);
--azul-escuro: #143567;
--azul-claro: #2a5aa5;
--fundo: var(--papel);
--fundo-alt: var(--papel-fundo);
--texto: var(--tinta);
--texto-suave: var(--tinta-suave);
--linha: var(--fio);
/* -----------------------------------------------------------------------
3. O DOURADO SAI. Ele era o segundo acento da folha atual, e a marca não
tem dourado nenhum: ela tem azul e um cinza (o «advogados»). Um acento
que a marca não usa é decoração, e decoração é o que faz um site de
advocacia parecer de 2011.
-------------------------------------------------------------------- */
--dourado: var(--marca-azul);
/* -----------------------------------------------------------------------
🔴 CONSERTO DE 09/09/2026 — `--dourado-claro` TEM DOIS TRABALHOS
-----------------------------------------------------------------------
Ele é cor de TEXTO CLARO e fundo de BOTÃO ao mesmo tempo. Com dourado os
dois funcionavam; com o cinza médio que a pele pôs aqui (`#8b98ad`),
**nenhum** funciona — e nenhum valor único conserta os dois.
Medido (`node scripts/contraste-da-pele.mjs`), a coluna ANTES:
.hero .olho sobre o papel .............. 2,75:1 piso 4,5
.hero .olho sobre a faixa .............. 2,58:1 piso 4,5
.chat__abrir ........................... 4,15:1 piso 4,5
.chat__whatsapp--cheio ................. 4,15:1 piso 4,5
:focus-visible de input sobre o papel .. 2,75:1 piso 3
:focus-visible sobre o cartão .......... 2,92:1 piso 3
✅ **A separação:** o token resta para o contorno e o sublinhado, e os dois
outros trabalhos ganham regra própria, logo abaixo.
🔴 **CORREÇÃO DE 09/09/2026 — este comentário dizia o contrário, e estava
errado.** Ele afirmava que `.chat__abrir` e `.chat__whatsapp--cheio` «não
eram defeito», porque 4,15:1 passa no piso de 3:1 de TEXTO GRANDE. **Eles
não são texto grande.** `.chat__abrir` é `0.95rem/600` e
`.chat__whatsapp--cheio` é `0.92rem/600`, e o limiar é 18,66px em negrito —
o que a própria folha antiga já dizia, com o número, em `style.css:833`.
🚨 **O piso deles é 4,5, e 4,15 REPROVA.** O medidor tinha o piso errado e
imprimia `ok` nos dois; a coluna ANTES saía mais limpa do que o site
estava. *Medidor frouxo absolve exatamente o que se pediu que ele julgasse.*
Corrigido em `scripts/contraste-da-pele.mjs`: ANTES acusa 6 de 6.
-------------------------------------------------------------------- */
--dourado-claro: var(--tinta-suave);
}
/* 🔴 ESPECIFICIDADE, e não decisão: a pele escreve `.olho`, e `.hero .olho` da
folha antiga tem dois seletores e ganha. Era para ser azul e ficou cinza —
visível na captura da `/previdenciario/`, ao lado do olho azul da home. */
.hero .olho {
color: var(--marca-azul);
}
.chat__abrir,
.chat__whatsapp--cheio,
.chat__whatsapp--cheio:hover {
background: var(--marca-azul);
color: #fff;
}
/* -------------------------------------------------------------------------
🔴 A LAJE AZUL DO FORMULÁRIO — dois textos que sumiram dentro dela
-------------------------------------------------------------------------
Achado na vistoria das 19 páginas a 390 e a 1280 (09/09/2026), com a folha
servida com e sem a pele para separar o que é regressão do que já era assim:
.bloco-form .olho 2,98:1 -> 1,00:1 🔴 REGRESSÃO DESTA PELE
.bloco-form p a 1,00:1 -> 1,00:1 🔴 JÁ ERA ASSIM, está no ar
O `.bloco-form` é `background: var(--azul)`, e a pele reaponta `--azul` para
o azul da marca. Aí `.olho`, que aqui é `var(--marca-azul)`, virou azul sobre
o mesmo azul — **texto invisível, não texto de baixo contraste.** E o `a` da
folha antiga é `var(--azul)`, o que já o deixava invisível sobre a laje
**antes de qualquer pele existir**: o «abrir conversa» das três páginas de
cível e o do formulário estão sumidos em produção hoje.
🚩 **O conserto mora aqui, e não em `style.css`, porque quem decide cor
agora é esta folha** — mexer nas duas espalharia a decisão em dois lugares.
⚠️ **Escopo estreito de propósito:** só `.olho` e o `a` de parágrafo. O botão
de enviar e o aviso de privacidade já são brancos por regra própria, e
alargar o seletor os pegaria de carona.
---------------------------------------------------------------------- */
.bloco-form .olho {
color: var(--papel-fundo);
}
.bloco-form p a {
color: #fff;
text-decoration-color: rgba(255, 255, 255, 0.55);
}
:root {
/* -----------------------------------------------------------------------
4. UMA FAMÍLIA SÓ, E O DISPLAY EM MINÚSCULAS.
A serifa de display sobreviveu às quatro tentativas e cai aqui, contra a
marca — e o argumento não é estético, são três restrições:
a) o logotipo é minúsculo e geométrico. Uma serifa de display ao lado
dele diz «tribunal» enquanto a marca diz «serviço». Duas vozes;
b) menos bytes: sai a Lora inteira. Quem lê está no celular, à noite,
possivelmente em dados móveis — é uma requisição de fonte a menos
antes de qualquer texto aparecer;
c) a Inter tem altura-x grande, que é o que se lê a 390px com o braço
estendido. A Lora, no mesmo tamanho, entrega menos letra útil.
A diferenciação vem do que a marca já faz — CAIXA BAIXA no display, com
tracking negativo —, e não de uma segunda família.
-------------------------------------------------------------------- */
--serif: var(--sans);
/* -----------------------------------------------------------------------
5. O RAIO É O DO LOGOTIPO. Ele é um quadrado COM raio, não um retângulo
reto — eu havia escrito o contrário e estava errado. Botão, cartão e
faixa acompanham o mesmo raio, para o site inteiro parecer feito da
mesma peça que a marca.
-------------------------------------------------------------------- */
--raio: 10px;
--raio-p: 6px;
--largura: 64rem;
--largura-texto: 40rem;
}
/* =========================================================================
TIPOGRAFIA
========================================================================= */
body {
background: var(--papel);
color: var(--tinta);
font-size: 1.0625rem; /* 17px — o corpo nunca desce de 16px */
line-height: 1.65;
}
h1,
h2,
h3,
h4 {
font-family: var(--sans);
color: var(--tinta);
font-weight: 600;
letter-spacing: -0.021em; /* o tracking negativo do logotipo */
line-height: 1.15;
}
/* 🎯 O h1 em MINÚSCULAS é a citação direta da marca — é ela que decide, e é
a única coisa no site que se permite ser um gesto. */
/* A medida do h1 é curta de propósito no celular — 16ch é o que cabe sem
hifenizar a 390px. No desktop ela abre, senão o título quebra em quatro
linhas e deixa metade da tela vazia ao lado. Medido olhando. */
.hero h1 {
text-transform: lowercase;
font-size: clamp(2rem, 6.5vw, 3.4rem);
max-width: 16ch;
color: var(--tinta);
margin-bottom: 0.9rem;
}
@media (min-width: 46rem) {
.hero h1 {
max-width: 22ch;
}
}
.secao__titulo {
font-size: clamp(1.35rem, 3.2vw, 1.9rem);
margin-bottom: 0.4rem;
}
/* -------------------------------------------------------------------------
O «olho» deixa de ser versalete espaçado — que é o vocabulário genérico de
agente que a primeira rodada levou. Ele vira ETIQUETA: minúscula, azul,
presa ao título que ela nomeia.
---------------------------------------------------------------------- */
.olho {
text-transform: none;
letter-spacing: 0;
font-size: 0.9rem;
font-weight: 600;
color: var(--marca-azul);
opacity: 1;
display: block;
margin-bottom: 0.15rem;
}
/* =========================================================================
CABEÇALHO — a única coisa aprovada das quatro tentativas:
«gostei da construção das funções no header».
«Contar meu caso» é uma FUNÇÃO, não enfeite: ela é o único elemento
preenchido da página, e não sai da tela em 390px.
========================================================================= */
.cabecalho {
background: var(--papel);
color: var(--tinta);
border-bottom: 1px solid var(--fio);
position: sticky;
top: 0;
z-index: 20;
}
.cabecalho__interno {
padding-block: 0.85rem;
gap: 0.5rem 1.25rem;
}
.marca {
color: var(--tinta);
display: flex;
align-items: baseline;
gap: 0.45rem;
}
/* 🚫 NENHUMA caixa azul redesenhada em CSS aqui. Enquanto o SVG do logotipo
não existir, o site mostra o NOME em texto — marca aproximada publicada
vira a marca, e depois ninguém troca. */
.marca__nome {
font-family: var(--sans);
font-size: 1.12rem;
font-weight: 600;
letter-spacing: -0.02em;
text-transform: lowercase;
color: var(--marca-azul);
}
.marca__nome em {
display: none; /* o «·» do meio: a marca real não tem separador */
}
.marca__sub {
text-transform: lowercase;
letter-spacing: 0;
font-size: 0.82rem;
color: var(--tinta-suave);
margin-top: 0;
}
.nav {
gap: 0.35rem 1.1rem;
}
.nav a {
color: var(--tinta-suave);
font-size: 0.94rem;
font-weight: 500;
border-bottom: 2px solid transparent;
}
.nav a:hover,
.nav a[aria-current="page"] {
color: var(--marca-azul);
border-bottom-color: var(--marca-azul);
}
/* 🎯 A FUNÇÃO. O último item da navegação é «Contato», e a pele o promove a
botão — sem tocar no HTML. É o que a construção aprovada fazia. */
.nav a:last-child {
background: var(--marca-azul);
color: #fff;
border-radius: var(--raio-p);
padding: 0.5rem 0.95rem;
border-bottom: 0;
font-weight: 600;
}
.nav a:last-child:hover {
background: var(--azul-escuro);
color: #fff;
border-bottom-color: transparent;
}
/* =========================================================================
HERO — sem laje azul.
Uma faixa azul de tela cheia com texto branco, à noite, num celular, é uma
PAREDE: é a primeira coisa que ela vê e não há nada nela para ler. O azul
passa a ser estrutura (o filete e o botão), e o texto ganha o papel.
========================================================================= */
.hero {
background: var(--papel);
color: var(--tinta);
padding-block: clamp(2.25rem, 6vw, 3.75rem);
border-bottom: 1px solid var(--fio);
}
.hero::after {
display: none; /* o círculo dourado decorativo — a marca não tem isso */
}
.hero p {
color: var(--tinta-suave);
font-size: clamp(1.06rem, 2.4vw, 1.22rem);
max-width: 34ch;
margin-bottom: 0;
}
/* =========================================================================
SEÇÕES
========================================================================= */
.secao {
padding-block: clamp(2.25rem, 5vw, 3.5rem);
}
.secao--papel {
background: var(--papel-fundo);
border-block: 1px solid var(--fio);
}
.medida,
.hero .container > p {
max-width: var(--largura-texto);
}
/* =========================================================================
A LISTA DAS NOVE ÁREAS — peso igual, e cada uma é um alvo de toque.
🚩 O QUE ELA RESOLVE: a pessoa não sabe em que área o caso dela entra. Ela
não escolhe por NOME — ela procura a frase em que se reconhece. Por isso a
linha tem o mesmo peso visual do nome, e o cartão inteiro é o alvo.
⚠️ MARCAÇÃO — MUDOU EM 09/09/2026, e esta folha tinha de acompanhar. O `li`
era «Nome — linha», com o travessão como TEXTO. Agora é
«Nomelinha», e o travessão saiu do
conteúdo justamente para quem o desenha ser a folha.
🔴 ENTRE UMA COISA E OUTRA A HOME FICOU «AdministrativoVocê é servidor…»,
colado, sem separador nenhum: o gerador tirou o travessão e a classe nova
não tinha regra. Pego na vistoria das 19 páginas, não por leitura de código.
*Classe nova sem CSS não dá erro — ela só encosta um texto no outro.*
========================================================================= */
.lista-simples {
display: grid;
gap: 0.6rem;
margin-top: 1.5rem;
}
.lista-simples li {
padding: 0.9rem 1rem;
background: var(--papel-alto);
border: 1px solid var(--fio);
border-radius: var(--raio);
color: var(--tinta-suave);
font-size: 1rem;
line-height: 1.5;
}
.lista-simples li::before {
content: none; /* o travessão dourado da folha antiga */
}
.lista-simples li a {
color: var(--marca-azul);
font-weight: 600;
text-decoration: none;
}
.lista-simples li:has(a):hover {
border-color: var(--marca-azul);
}
/* A linha da área: bloco próprio, abaixo do nome. É a frase em que a pessoa se
reconhece, então ela não é nota de rodapé — mesmo corpo, tinta suave. */
.lista-simples .area__linha {
display: block;
margin-top: 0.2rem;
color: var(--tinta-suave);
font-weight: 400;
font-size: 0.95rem;
line-height: 1.45;
}
@media (min-width: 46rem) {
.lista-simples {
grid-template-columns: repeat(3, 1fr);
gap: 0.75rem;
}
}
/* =========================================================================
«É O SEU CASO SE…» — o bloco mais importante da página de área.
É onde ela se reconhece, e é a única coisa que ela precisa ler para saber
se está no lugar certo. Por isso: fundo próprio, texto do tamanho do
corpo, marcador azul, e nada competindo ao lado.
========================================================================= */
/* 🔴 MEDIDO A 1920px: o `ul` ocupava 944px e cada `li` parava em 640px, então
o bloco ficava com um vão de 300px à direita que parecia acidente, e não
escolha. A coluna estreita É a escolha — 640px é a medida de linha certa —,
mas ela precisa ser DECLARADA no `ul`, não sobrar do `li`. */
.checklist {
margin-top: 1.4rem;
gap: 0.55rem;
max-width: var(--largura-texto);
}
.checklist li {
width: 100%;
max-width: none;
}
.checklist li {
background: var(--papel-alto);
border: 1px solid var(--fio);
border-left: 3px solid var(--marca-azul);
border-radius: var(--raio-p);
padding: 0.8rem 1rem 0.8rem 0.9rem;
font-size: 1.0625rem;
color: var(--tinta);
}
.checklist li::before {
content: none;
}
/* =========================================================================
BOTÃO — o raio do logotipo, e o único elemento preenchido da página.
========================================================================= */
.botao {
background: var(--marca-azul);
color: #fff;
border-radius: var(--raio-p);
border: 0;
padding: 0.85rem 1.4rem;
font-weight: 600;
font-size: 1.02rem;
letter-spacing: -0.01em;
}
.botao:hover {
background: var(--azul-escuro);
color: #fff;
}
.botao--secundario,
.botao--claro {
background: transparent;
color: var(--marca-azul);
border: 1px solid var(--marca-azul);
}
/* -------------------------------------------------------------------------
🔴 ACHADO AO OLHAR, NÃO AO ESCREVER — 09/09/2026.
A regra acima apagou o botão «Recusar»: o banner de cookies tem fundo
ESCURO, e `--marca-azul` sobre ele é azul em azul. Contraste medido do que
eu tinha feito: 1,55:1. **O botão de RECUSAR era o que sumia** — o de
aceitar continuava preenchido e visível, o que é exatamente a direção
errada de um defeito de consentimento.
Aqui o secundário se inverte sobre fundo escuro: 14,3:1.
---------------------------------------------------------------------- */
.cookies .botao--claro,
.cookies .botao--secundario {
color: #fff;
border-color: rgba(255, 255, 255, 0.6);
}
.cookies .botao--claro:hover {
border-color: #fff;
background: rgba(255, 255, 255, 0.1);
color: #fff;
}
/* =========================================================================
CARTÕES E AVISOS
========================================================================= */
.cartao {
background: var(--papel-alto);
border: 1px solid var(--fio);
border-top: 1px solid var(--fio);
border-radius: var(--raio);
padding: 1.25rem;
}
.secao--papel .cartao {
background: var(--papel-alto);
}
.cartao h3 {
font-size: 1.05rem;
}
.cartao__link {
color: var(--marca-azul);
}
.cartao__link::after {
content: " →";
color: var(--marca-azul);
}
.cartao__link:hover {
color: var(--azul-escuro);
}
/* O aviso deixa de ser caixa de alerta e vira nota de rodapé do bloco: ela
já chega com medo, e um retângulo destacado ao lado do texto lê como
advertência. */
.aviso {
background: transparent;
border: 0;
border-left: 2px solid var(--fio);
border-radius: 0;
padding: 0.2rem 0 0.2rem 0.9rem;
margin-top: 1.5rem;
color: var(--tinta-suave);
/* 🔴 Era 0.95rem = 15,2px, e o aviso é TEXTO DE CORPO — a nota que diz «não
é preciso ter tudo para começar». Medido no DOM a 390px e corrigido: no
corpo, nada abaixo de 16px. */
font-size: 1rem;
}
/* =========================================================================
ETAPAS, FAQ E RODAPÉ
========================================================================= */
.etapas li::before,
.etapas li strong {
color: var(--marca-azul);
}
.rodape {
background: var(--tinta);
color: #cbd3e0;
border-top: 0;
}
.rodape h2 {
color: #fff;
font-family: var(--sans);
font-size: 0.82rem;
letter-spacing: 0.06em;
text-transform: uppercase;
font-weight: 600;
}
.rodape a {
color: #dbe3ef;
}
.rodape a:hover {
color: #fff;
}
.rodape__identificacao {
color: #fff;
font-weight: 600;
}
/* =========================================================================
390px — o tamanho em que isto vai ser lido de verdade
========================================================================= */
@media (max-width: 30rem) {
/* -----------------------------------------------------------------------
🔴 OLHADO A 390px, E CONSERTADO: o cabeçalho embolava.
São SEIS itens de navegação, e no celular eles quebravam em duas linhas
com a função no meio da bagunça — a marca em cima, quatro links, e aí
«Reparação de danos» dividindo a linha com o botão.
✅ `display: contents` no `.nav` dissolve o contêiner e deixa os links
virarem filhos diretos do cabeçalho — aí `order` põe **a marca e a função
na primeira linha**, e os links na segunda. **Sem tocar no HTML.**
⚠️ Isto é remendo honesto, não a resposta: seis links num telefone pedem
um MENU, e menu é marcação. Está descrito no relatório.
-------------------------------------------------------------------- */
.cabecalho__interno {
display: flex;
flex-wrap: wrap;
align-items: center;
row-gap: 0.55rem;
}
.nav {
display: contents;
}
.marca {
order: 1;
/* 🔴 SEGUNDA OLHADA: com `flex:1 1 auto` a marca CRESCIA e tomava a linha
inteira, empurrando a função para o meio dos links — pior que o
problema original. Ela não cresce. */
flex: 0 1 auto;
}
/* A praça sai do cabeçalho no celular: ela está no rodapé e na página de
contato, e aqui ela disputava largura com a única função da tela. */
.marca__sub {
display: none;
}
/* A função fica na PRIMEIRA linha, ao lado da marca, e continua sendo a
única coisa preenchida da tela. */
.nav a:last-child {
order: 2;
margin-left: auto;
}
.nav a:not(:last-child) {
order: 3;
font-size: 0.9rem;
margin-right: 0.9rem;
}
.hero h1 {
max-width: 100%;
}
.lista-simples li,
.checklist li {
font-size: 1.0625rem;
}
}
/* =========================================================================
A CAMADA DE DESKTOP — 09/09/2026
=========================================================================
🚨 POR QUE ELA NÃO EXISTIA, E POR QUE NINGUÉM VIU
O maior ponto de quebra do site inteiro era 50rem (800px), na folha antiga;
nesta pele, 46rem. **Acima de 800px não havia uma única regra.** Um monitor
de 1920px recebia o layout de um tablet em pé: contêiner travado em 64rem,
texto em 40rem, e 47% da tela vazia.
⚠️ E a vistoria de 38 renderizações passou com nota máxima, porque os quatro
detectores dela — transbordo, sobreposição, contraste e presença de controle
— são detectores de QUEBRA. **Uma página que usa metade da largura e empilha
tudo numa coluna não quebra nada.** Vazio bem-comportado passa em todo teste
de quebra; o instrumento que enxerga isto é o
`scripts/aproveitamento-e-medida.mjs`, e ele nasceu junto com esta camada.
-------------------------------------------------------------------------
🎯 A REGRA, E ELA É UMA SÓ
Toda seção do site tem a mesma anatomia: `.olho` (o rótulo), o
`.secao__titulo`, e o conteúdo. A partir de 64rem o rótulo e o título vão
para uma coluna à esquerda, e o conteúdo para a direita.
🚩 **A medida de leitura NÃO muda.** A coluna da direita continua em
`--largura-texto`. É o ponto inteiro: usar a largura **sem alongar a linha**.
Alargar o texto até encher a tela subiria o aproveitamento e estouraria a
medida — o conserto preguiçoso que os dois números do medidor existem para
impedir.
-------------------------------------------------------------------------
🚨 ONDE A GRADE NÃO SE APLICA, E É REGRA ESCRITA — NÃO EXCEÇÃO PONTUAL
`:has(> .secao__titulo)`. A grade só entra na seção que **tem a anatomia**.
Medido, e não suposto — quatro páginas não têm nenhum `.secao__titulo`:
privacidade.html 0 de 2 seções ← a Política é prosa longa e tabelas
obrigado.html 0 de 1
erro.html 0 de 1
404.html 0 de 1
🎯 **A Política ficaria pior em duas colunas**, e é o caso que a regra
precisava cobrir: o conteúdo dela é largo por natureza. Ela sai sozinha,
pela própria anatomia — ninguém a nomeia numa lista de exceções, e é por
isso que a quinta página dessas não vai ficar para trás.
-------------------------------------------------------------------------
⚠️ AS TRÊS LINHAS DE `grid-template-rows` SÃO O MECANISMO INTEIRO
`min-content min-content auto` — e a terceira é a que faz funcionar.
O rótulo mora na linha 1, o título na linha 2. O primeiro bloco de conteúdo
**atravessa as três** (`grid-row: 1 / 4`). Sem a terceira linha, o excesso de
altura do conteúdo seria distribuído entre as linhas 1 e 2 — e o título
desceria junto, descolando do rótulo que ele nomeia. Com ela, o excesso cai
todo na linha 3, que não tem ninguém à esquerda, e a dupla rótulo+título
fica presa no topo.
🚩 Blocos de conteúdo seguintes caem nas linhas 4, 5, … da coluna 2,
sozinhos. É o que faz a regra valer para seção de um bloco e de quatro.
========================================================================= */
@media (min-width: 64rem) {
:root {
/* A grade precisa de espaço. A medida de leitura NÃO muda: continua 40rem,
e é na coluna da direita que ela é aplicada. */
--largura: 78rem;
}
/* -----------------------------------------------------------------------
1. A GRADE EDITORIAL
-------------------------------------------------------------------- */
.secao > .container:has(> .secao__titulo) {
display: grid;
grid-template-columns: 15rem minmax(0, var(--largura-texto));
grid-template-rows: min-content min-content auto;
column-gap: 4rem;
align-content: start;
}
/* -------------------------------------------------------------------------
🚨 A COLUNA DE LEITURA PROTEGE PROSA. LISTA DE COLUNAS NÃO É PROSA.
**Achado medindo, e o medidor pegou:** com a coluna da direita travada em
`--largura-texto`, a `.grade--3` do `/civel/` pôs três cartões em 640px —
**150px cada**, e o parágrafo de dentro caiu para **15 caracteres por
linha**. A `medida` desceu de 26ch para 15ch, e foi essa QUEDA que
denunciou: um número que só sobe teria passado.
🎯 É a exceção que o desenho previa, e ela vale por PROPRIEDADE: a seção
cujo conteúdo é largo por natureza usa a largura inteira. Ela nomeia a
propriedade, não a página — `/civel/`, `/medico/`, a home e o `/contato`
entram sozinhos, e a décima entra também.
-------------------------------------------------------------------------
🔴 CORREÇÃO DE 09/09/2026 (noite) — ELA ERA `:has(.grade)`, E ISSO ERA UM
NOME, NÃO UMA PROPRIEDADE
A lista das nove áreas da home é ``, não
`.grade`. **Ela não casava**, ficava presa em `--largura-texto`, e a regra
`#areas .lista-simples { repeat(2, …) }` que eu havia escrito para
compensar **derrubou de TRÊS colunas para DUAS** o bloco mais importante
da home — a única lista de matérias que um cliente lê.
Medido nos dois commits, três larguras cada:
antes da camada (f12729e) 1280/1440/1920 → 3 colunas
com a camada (fa06605) 1280/1440/1920 → 🔴 2 colunas
🚨 **Achei o caso do `/civel/` porque o medi; o da home tem a mesma
propriedade com outro NOME, e passou.** *Exceção se define pela
propriedade, nunca pelo lugar — ou pelo nome — onde ela apareceu*
(armadilha 010).
⚠️ **E os dois números do medidor não viram:** aproveitamento e medida
continuaram certos enquanto o bloco encolhia. Eles medem a CAIXA e a
LINHA; nenhum dos dois olha para dentro de uma lista. Por isso o medidor
ganhou o terceiro número — contagem de colunas — no mesmo turno.
-------------------------------------------------------------------------
🚨 E `.checklist` NÃO ENTRA, apesar de ter colunas — a propriedade é mais
fina do que «tem mais de uma coluna»
A primeira versão deste conserto isentava as TRÊS classes de lista. Medido
a 1440 com `.checklist` dentro: o contêiner virou `240px 864px` e **o
`.checklist` continuou em 640px**, porque ele declara
`max-width: var(--largura-texto)` — decisão de um turno anterior, escrita
onze linhas acima da regra dele: *«a coluna estreita É a escolha — 640px é
a medida de linha certa»*.
🔴 **Isentá-lo devolvia o vão de 224px à direita que aquele turno tinha
acabado de fechar.** Um conserto que reabre o conserto anterior.
🎯 **A propriedade certa não é «tem colunas», é «QUER MAIS LARGURA QUE A
COLUNA DE LEITURA»:**
`.grade`, `.lista-simples` → crescem com o espaço → ✅ isentas
`.checklist` → se capa em 40rem → 🚫 não precisa
⚠️ **Um bloco que declara o próprio teto não está preso: ele escolheu.**
-------------------------------------------------------------------------
🛑 **A enumeração envelhece, e quem a impede de ficar velha é
`scripts/lista-nao-fica-na-coluna-de-leitura.test.mjs`:** ele cruza as duas
folhas com o HTML das 19 páginas e reprova se uma classe de múltiplas
colunas **que não se capa** estiver numa seção fora da exceção. Classe nova
nasce coberta — e se alguém acrescentar uma sem pôr aqui, o teste diz o
nome dela.
---------------------------------------------------------------------- */
.secao > .container:has(> .secao__titulo):has(.grade, .lista-simples) {
grid-template-columns: 15rem minmax(0, 1fr);
}
.secao > .container:has(> .secao__titulo) > .olho {
grid-column: 1;
grid-row: 1;
margin-top: 0.35rem;
}
.secao > .container:has(> .secao__titulo) > .secao__titulo {
grid-column: 1;
grid-row: 2;
/* Na coluna estreita o título respira em duas ou três linhas — e é ele
que dá peso à margem esquerda. */
font-size: clamp(1.5rem, 2.1vw, 2rem);
}
/* Tudo que não é rótulo nem título vai para a direita. */
.secao > .container:has(> .secao__titulo) > :not(.olho):not(.secao__titulo) {
grid-column: 2;
}
/* O PRIMEIRO bloco de conteúdo atravessa as três linhas — ver o cabeçalho. */
.secao > .container:has(> .secao__titulo) > .secao__titulo + * {
grid-row: 1 / 4;
margin-top: 0;
}
/* -------------------------------------------------------------------------
2. O HERO DEIXA DE EMPILHAR
Ele tem exatamente três filhos — rótulo, `h1`, parágrafo —, então a mesma
grade resolve sem nenhum caso especial: o `h1` fica à esquerda com o
rótulo, e a linha de abertura à direita, na altura dele.
---------------------------------------------------------------------- */
.hero .container {
display: grid;
grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
column-gap: 4rem;
align-items: center;
}
.hero .container > .olho {
grid-column: 1;
grid-row: 1;
align-self: end;
}
.hero .container > h1 {
grid-column: 1;
grid-row: 2;
max-width: 14ch;
margin-bottom: 0;
}
.hero .container > p,
.hero .container > .medida {
grid-column: 2;
grid-row: 1 / 3;
align-self: center;
/* 34ch era a medida do celular. No desktop ela é a coluna da direita
inteira, e continua muito abaixo do teto de 75ch. */
max-width: 46ch;
font-size: clamp(1.15rem, 1.5vw, 1.35rem);
}
/* O botão do hero, quando existe, desce sozinho sob o título. */
.hero .container > p:last-child:not(:nth-child(3)) {
grid-column: 1;
}
/* -------------------------------------------------------------------------
3. «É O SEU CASO SE…» VIRA GRADE
Ela e «O que ter em mãos» são as duas listas de frases curtas da mesma
página, e receberam layouts opostos: uma empilhada, a outra não. A ≥64rem
as duas viram grade de duas colunas.
⚠️ `auto-fit` com um mínimo, e não `repeat(2, …)` cravado: item longo
continua ganhando a linha inteira em vez de ser espremido.
---------------------------------------------------------------------- */
.checklist {
grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
column-gap: 2.25rem;
}
/* -------------------------------------------------------------------------
4. A LISTA DAS NOVE ÁREAS — 🔴 O BLOCO QUE ESTAVA AQUI SAIU
Ele era:
#areas .container:has(> .secao__titulo) { grid-template-columns: 15rem 1fr }
#areas .lista-simples { grid-template-columns: repeat(2, minmax(0,1fr)) }
🚨 **As duas regras existiam para compensar a exceção de largura não
alcançar `.lista-simples`** — e a segunda DERRUBOU a lista de três colunas
para duas em todo desktop, porque a folha já lhe dava três desde 46rem
(linha 459). Compensar um seletor errado com um seletor mais específico é
como este defeito costuma se esconder: o sintoma some de um lado e nasce
do outro.
✅ **As duas são desnecessárias agora.** A exceção lá em cima passou a
casar `.lista-simples` pela propriedade, o contêiner ganha a largura
inteira por ela, e a lista mantém as três colunas que a regra de 46rem já
lhe dava. **Menos duas regras, e o comportamento certo.**
🚩 E a primeira versão desta camada ainda trazia uma regra `.areas { }`
que **não alcançava elemento nenhum** — classe inventada de memória. Três
tentativas no mesmo lugar, e a que funcionou foi a única que não nomeava
ninguém.
---------------------------------------------------------------------- */
}
/* =========================================================================
A BOLHA DO WHATSAPP — a porta do canal, 09/09/2026
=========================================================================
O WhatsApp é o produto: o atendimento inteiro acontece nele. E o caminho
até ele era **home → página de contato → link do rodapé** — duas navegações
e um carregamento de página. A home tinha UMA ocorrência de `/ir/wa`, no
rodapé.
🎯 Decisão do Matheus: o canal tem de ser uma das coisas mais visíveis do
site, e estar em evidência sempre.
-------------------------------------------------------------------------
🚨 O VERDE É O DO WHATSAPP, E É A ÚNICA COR DE FORA DA PALETA
A pele «Balcão» é azul de ponta a ponta, e romper isso foi decidido, não
descuidado: o verde do WhatsApp é **reconhecido antes de ser lido**, e o
trabalho desta peça é ser reconhecida de relance. Um botão azul entre
elementos azuis seria mais um controle do site — que é o oposto do pedido.
⚠️ `#0f7a41` e não o `#25d366` da marca: MEDIDO com o lib do projeto
(`node --input-type=module` sobre `scripts/_lib/contraste.mjs`), o verde da
marca sobre branco dá **1,98:1** e o rótulo sumiria. Este dá **5,41:1**,
acima do piso de 4,5. A cor identifica; o contraste é inegociável.
🔴 **A primeira versão desta regra usava `#128c4a`, e o comentário ao lado
afirmava «5,4:1» — só que esse número era o do HOVER, não o da base.**
Medido: `#128c4a` dá **4,31:1**, abaixo do piso de 4,5. O rótulo teria ido
ao ar reprovando, com um comentário dizendo que passava. *Número repetido
não é número conferido, inclusive quando quem repete é quem o escreveu.*
-------------------------------------------------------------------------
🚨 O BANNER DE COOKIES — E A DIREÇÃO DO ERRO É O QUE DECIDE
O banner é `position: fixed; bottom: 0; z-index: 50`, e cobre o rodapé nas
21 páginas. A bolha **não pode nascer embaixo dele**, e sobretudo **não pode
cobrir o botão «Recusar»** — recusar consentimento é a direção protegida, e
este projeto já teve um defeito exatamente aí.
São duas guardas, e a segunda existe para quando a primeira falhar:
1. enquanto o banner estiver visível, a bolha SOBE — `html:not([data-cookies])`
é o sinal, e ele é exato: o `app.js` só carimba `data-cookies` no
`` quando uma escolha foi feita, que é quando o banner some;
2. `z-index: 40`, **sempre abaixo dos 50 do banner**. Se a conta da altura
errar um dia, quem fica por cima é o banner — a bolha é encoberta, e
nenhum controle de consentimento fica inalcançável. *A direção do erro
é o que autoriza a guarda barata.*
🚩 A altura vem de `--altura-banner`, e ela muda com a largura porque o
banner embrulha no celular: lá o texto e os dois botões empilham. Os dois
valores foram MEDIDOS no navegador, não estimados — ver o relatório.
========================================================================= */
.bolha {
--altura-banner: 0rem;
position: fixed;
right: clamp(0.9rem, 2vw, 1.75rem);
bottom: calc(clamp(0.9rem, 2vw, 1.75rem) + var(--altura-banner));
z-index: 40;
display: inline-flex;
align-items: center;
gap: 0.55rem;
padding: 0.72rem 1.15rem;
border-radius: 999px;
background: #0f7a41;
color: #fff;
font-weight: 600;
font-size: 0.97rem;
line-height: 1;
text-decoration: none;
box-shadow: 0 6px 20px rgba(20, 26, 36, 0.22);
transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.bolha:hover,
.bolha:focus-visible {
background: #0b6234;
color: #fff;
transform: translateY(-2px);
box-shadow: 0 10px 26px rgba(20, 26, 36, 0.28);
}
.bolha:focus-visible {
outline: 3px solid var(--marca-azul);
outline-offset: 3px;
}
.bolha__icone {
width: 1.45rem;
height: 1.45rem;
flex: none;
}
/* -------------------------------------------------------------------------
ENQUANTO O BANNER ESTIVER NA TELA, A BOLHA SOBE.
⚠️ O seletor é a AUSÊNCIA do atributo, e é essa direção que falha do lado
certo: uma página que nunca rodou o `app.js` — script bloqueado, erro de JS
— mostra o banner E mantém a bolha levantada. O contrário (subir só quando
o atributo existisse) deixaria a bolha em cima do «Recusar» exatamente no
caso em que ninguém decidiu nada ainda.
---------------------------------------------------------------------- */
html:not([data-cookies]) .bolha {
--altura-banner: 5.5rem;
}
@media (max-width: 46rem) {
html:not([data-cookies]) .bolha {
--altura-banner: 11.5rem;
}
}
/* No celular a bolha vira só o ícone: o rótulo comeria a largura da tela. */
@media (max-width: 26rem) {
.bolha {
padding: 0.85rem;
}
.bolha__rotulo {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
}
}
@media (prefers-reduced-motion: reduce) {
.bolha {
transition: none;
}
.bolha:hover,
.bolha:focus-visible {
transform: none;
}
}
/* -------------------------------------------------------------------------
O PAR DE AÇÕES DO «PRIMEIRO CONTATO» — 09/09/2026
O botão principal virou o canal, e o `/contato` desceu a link secundário.
Os dois na mesma linha, com o secundário claramente subordinado: quem não
usa WhatsApp continua tendo para onde ir, e não precisa procurar.
🚨 Classe nova SEM regra encosta um texto no outro sem dar erro — foi o que
aconteceu com `.area__linha` nesta mesma folha, e foi pego olhando, não
lendo código. Por isso ela nasce com CSS no mesmo commit.
---------------------------------------------------------------------- */
.acoes-do-contato {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.9rem 1.4rem;
}
.acoes-do-contato__secundario {
color: var(--tinta-suave);
font-size: 0.97rem;
}