/* ═══════════════════════════════════════════════════════════════
CONFLUÊNCIAS · SISTEMA DE DESIGN
Direção "Periódico" — aprovada em 14/08/2026
REGRAS INEGOCIÁVEIS DESTA LINGUAGEM
1. Nada de border-radius, box-shadow ou linear-gradient.
A hierarquia vem de fio, peso tipográfico e espaço.
2. Duas famílias apenas: Newsreader (voz editorial) e
IBM Plex Mono (metadado: data, CRP, índice, rótulo).
Nenhuma sans genérica.
3. O laranja #F29A1E NUNCA leva texto branco (2,2:1).
Sempre texto marrom #4C2A23 (5,7:1).
4. A terracota #BD6A4B reprova em AA para texto pequeno (3,6:1).
Para rótulos use --terracota-txt (#9E5334, 5,1:1).
Reserve #BD6A4B para traços e elementos decorativos.
5. Sem foto real, o retrato é monograma em cor chapada.
Cores válidas p/ iniciais em creme: #A61F21, #4C2A23,
#8F4A2E, #7A3B22, #9E5334. Com #F29A1E, iniciais em marrom.
FONTES (carregar no de cada página)
═══════════════════════════════════════════════════════════════ */
:root{
--papel:#FAF4E4;
--papel-2:#F3E7CD;
--tinta:#3B211A;
--tinta-suave:#7A5647;
--terracota-txt:#9E5334;
--regra:rgba(59,33,26,.16);
--regra-media:rgba(59,33,26,.30);
--laranja:#F29A1E;
--vermelho:#CC1A1A;
--bordo:#A61F21;
--marrom:#4C2A23;
--terracota:#BD6A4B;
--dourado:#DFA567;
--pessego:#F0C6A3;
--creme:#FBF1D5;
--serif:'Newsreader', Georgia, serif;
--mono:'IBM Plex Mono', ui-monospace, monospace;
}
*{ box-sizing:border-box; margin:0; padding:0; }
html{ -webkit-font-smoothing:antialiased; }
body{
font-family:var(--serif); background:var(--papel); color:var(--tinta);
font-size:18px; line-height:1.6;
}
a{ color:inherit; text-decoration:none; }
img{ display:block; }
.shell{ max-width:1280px; margin:0 auto; padding:0 48px; }
.grid{ display:grid; grid-template-columns:repeat(12,1fr); column-gap:28px; }
.mono{ font-family:var(--mono); font-size:11px; letter-spacing:.11em; text-transform:uppercase; font-weight:500; }
/* ═════ CAMADA 1 · CABEÇALHO ═════ */
.utility{ border-bottom:1px solid var(--regra); }
.utility .shell{
display:flex; justify-content:space-between; align-items:center;
padding-top:11px; padding-bottom:11px; color:var(--tinta-suave);
}
.utility a{ color:var(--tinta); }
.utility a + a{ margin-left:22px; }
.masthead .shell{
display:flex; align-items:flex-end; justify-content:space-between;
gap:48px; padding-top:32px; padding-bottom:26px;
}
.mh-brand{ display:flex; align-items:center; gap:22px; }
.mh-brand img{ width:84px; height:84px; }
.wordmark{ font-weight:400; font-size:70px; letter-spacing:-.028em; line-height:.88; }
/* `.mh-meta` (descrição do site + "N perfis · N estados") saiu do
masthead em 18/08/2026, por decisão do autor. As regras vão junto:
regra de CSS sem marcação é exatamente o que a auditoria de 17/08
encontrou em três outros lugares e mandou resolver. */
.mainnav{ border-top:2px solid var(--tinta); border-bottom:1px solid var(--regra); }
.mainnav .shell{ display:flex; align-items:stretch; justify-content:space-between; }
.mainnav-links{ display:flex; }
.mainnav-links a{
padding:15px 22px 14px; border-right:1px solid var(--regra);
font-family:var(--mono); font-size:11px; letter-spacing:.11em;
text-transform:uppercase; font-weight:500;
}
.mainnav-links a:first-child{ padding-left:0; }
.mainnav-links a.current{ color:var(--bordo); }
.nav-cta{
background:var(--laranja); color:var(--marrom); align-self:center;
padding:11px 22px; font-family:var(--mono); font-size:11px;
letter-spacing:.11em; text-transform:uppercase; font-weight:600;
}
/* marcadores e cabeçalhos de seção */
.sec-mark{ display:flex; align-items:baseline; gap:14px; color:var(--terracota-txt); }
.sec-mark .num{ color:var(--bordo); font-weight:600; }
.sec-head{
display:flex; align-items:flex-end; justify-content:space-between;
gap:32px; margin:14px 0 32px;
}
.sec-head h2, .sec-head h1{ font-size:40px; font-weight:400; letter-spacing:-.022em; line-height:1; }
.sec-head .aside{ text-align:right; color:var(--tinta-suave); }
.sec-head .aside a{ color:var(--bordo); border-bottom:1px solid var(--bordo); padding-bottom:2px; }
/* ═════ CAMADA 2 · QUEM SOMOS ═════ */
.quem{ padding:54px 0 56px; border-bottom:1px solid var(--regra); }
.statement{
font-size:56px; line-height:1.05; font-weight:400; letter-spacing:-.018em;
margin:24px 0 34px; max-width:17.5em;
}
.statement em{ font-style:italic; color:var(--bordo); }
.quem-corpo{ columns:2; column-gap:44px; max-width:960px; margin-bottom:30px; }
.quem-corpo p{
font-size:18px; line-height:1.62; color:var(--tinta-suave);
font-weight:300; margin-bottom:14px; break-inside:avoid;
}
.quem-corpo p strong{ color:var(--tinta); font-weight:500; }
.quem-acoes{ display:flex; align-items:center; gap:28px; }
.btn-bloco{
background:var(--tinta); color:var(--papel); padding:14px 26px;
font-family:var(--mono); font-size:11px; letter-spacing:.11em;
text-transform:uppercase; font-weight:600;
}
.lnk-sub{
font-family:var(--mono); font-size:11px; letter-spacing:.11em;
text-transform:uppercase; font-weight:500; color:var(--bordo);
border-bottom:1px solid var(--bordo); padding-bottom:3px;
}
/* ═════ CAMADA 3 · DIRETÓRIO (carrossel) ═════ */
.diretorio{ padding:46px 0 58px; border-bottom:1px solid var(--regra); overflow:hidden; }
.car-nav{ display:flex; align-items:center; gap:18px; justify-content:flex-end; }
.car-contador{ color:var(--tinta-suave); }
.car-setas{ display:flex; gap:8px; }
/* `.car-seta` é