/* ============================================================
   Alves & Freire — sistema visual v1
   Tipografia decidida em 26/07/2026 pelo quadro de especimens:
     título  → Newsreader (serifa de leitura, contraste baixo, ecoa o wordmark)
     texto   → Figtree    (sans humanista, escolha do Moabe por legibilidade)
   Cor ainda NEUTRA de propósito — a paleta é a próxima decisão.
   ============================================================ */

:root {
  /* ---- PALETA N1 · Azul-petróleo — escolhida pelo Moabe em 27/07/2026 ----
     Acento a 195°, lido como azul escuro por quem não é de design, mas fora do
     azul corporativo que o setor inteiro usa. Mantém o logotipo azul original viável.
     Contrastes medidos: título 16,7:1 · corpo secundário 8,6:1 · acento 8,4:1 ·
     texto sobre a faixa escura 13,3:1. Meta do invariante 11 é 7:1 no corpo. */
  --ink:      #101A1E;   /* corpo e títulos */
  --ink-2:    #3C4B51;   /* secundário — 8,58:1 sobre --paper */
  /* 27/07: era #6B797F, que dava 4,26:1 — reprovava em WCAG AA nos numerais das áreas
     e no "Ver a área →". Escurecido para 5,00:1. Terciário não é licença para ilegível.
     05/08: e ainda assim reprovava. Os 5,00:1 foram aferidos sobre --paper, o fundo
     MAIS CLARO do site; a varredura de pixel encontrou o terciário caindo a 4,18:1
     sobre a textura de contornos, que escurece o papel localmente. Medir a cor contra
     o melhor fundo em que ela aparece é medir o caso que não interessa. Recalibrado
     contra o PIOR fundo real medido (#E4E5E2): agora 5,64:1 lá e 6,71:1 sobre --paper. */
  --ink-3:    #4C5A61;   /* terciário — 5,64:1 sobre o pior fundo real */
  /* 27/07, à noite: o Moabe disse que não gostou do "verde" da faixa de Teses.
     Não era só a faixa. O papel inteiro tinha tinta ciano — #F7F9F9 e #E9EFF0
     são cinzas frios, e a faixa alternada, sendo a maior área tingida da
     página, foi onde isso ficou visível. Os dois neutralizaram. Efeito
     colateral bem-vindo: sobre papel neutro o azul-petróleo do acento passa a
     ser A cor da página, em vez de um tom a mais numa família esverdeada. */
  --paper:    #F8F8F6;
  --paper-2:  #EDEDEA;   /* faixa alternada */
  --escuro:   #0D2A31;   /* faixa escura */
  --sobre-escuro:   #EBF2F3;
  /* 27/07: era #9DB4B8, que dava 6,93:1 sobre a faixa escura — passava em WCAG AA
     mas ficava abaixo da meta de 7:1 do invariante 11. Clareado até 7,66:1. */
  --sobre-escuro-2: #A6BDC1;
  --linha:    #DBE3E4;
  --linha-2:  #C0CCCE;

  /* ---- o acento. REGRA: só três papéis, e nenhum deles é fundo de seção.
         1) filete da área aberta  2) filete do julgado  3) botão principal e sublinhado de link.
         Fora disso, a página é papel e tinta. É essa dose que faz a cor pesar em
         distinção sem pesar em seriedade. ---- */
  --acento:   #14515C;
  --acento-2: #0F3F48;   /* estado pressionado / hover do botão cheio */

  /* ---- escala tipográfica, razão ~1,25 ---- */
  --display:  clamp(34px, 5.2vw, 60px);
  --h2:       clamp(26px, 3.2vw, 36px);
  --h3:       21px;
  --lead:     20px;
  --corpo:    18px;      /* piso do invariante 11 — público 50–65 */
  --peq:      15px;
  --kicker:   12px;

  /* ---- espaço, escala de 4 ---- */
  --e1: 4px;  --e2: 8px;  --e3: 12px; --e4: 16px; --e5: 24px;
  --e6: 32px; --e7: 48px; --e8: 64px; --e9: 96px; --e10: 128px;

  /* ---- grade ---- */
  --calha:  32px;
  --margem: 24px;
  --largura: 1180px;
  --medida:  64ch;   /* medida de linha do corpo */

  /* ---- raio. 27/07: o Moabe gosta de quadrado, mas pediu um arredondamento leve.
         3px é o ponto onde a aresta deixa de ser dura sem virar "cartão de app". ---- */
  --raio: 3px;
}

@media (max-width: 700px) {
  :root { --margem: 20px; --calha: 20px; }
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: 'Figtree', system-ui, -apple-system, sans-serif;
  font-size: var(--corpo);
  font-weight: 400;
  line-height: 1.62;
  font-feature-settings: "kern";
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; display: block; }

/* ---------- primitivas de layout ----------
   As mesmas em todas as páginas do site. É o que faz as subpáginas
   parecerem a mesma casa. */
.env      { max-width: var(--largura); margin-inline: auto; padding-inline: var(--margem); }
.env--txt { max-width: 820px; }
.faixa    { padding-block: var(--e9); }
.faixa--curta { padding-block: var(--e7); }
.faixa--alt   { background: var(--paper-2); }
.faixa--escura{ background: var(--escuro); color: var(--sobre-escuro); }
@media (max-width: 700px) {
  .faixa { padding-block: var(--e7); }
  .faixa--curta { padding-block: var(--e6); }
}

/* ---------- tipografia ---------- */
h1, h2, h3, .display {
  font-family: 'Newsreader', Georgia, serif;
  font-weight: 600;
  letter-spacing: -0.012em;
  text-wrap: balance;
  margin: 0;
}
h1 { font-size: var(--display); line-height: 1.06; max-width: 22ch; }
h2 { font-size: var(--h2);      line-height: 1.14; max-width: 26ch; }
h3 { font-size: var(--h3);      line-height: 1.28; letter-spacing: -0.006em; }

p { margin: 0; max-width: var(--medida); }
.lead { font-size: var(--lead); line-height: 1.5; max-width: 54ch; color: var(--ink); }
.peq  { font-size: var(--peq);  line-height: 1.55; color: var(--ink-2); max-width: 72ch; }
.meta { font-size: var(--peq);  color: var(--ink-3); }

.kicker {
  font-size: var(--kicker); font-weight: 600;
  letter-spacing: 0.19em; text-transform: uppercase;
  color: var(--ink-2); margin: 0;
}
/* 27/07: a varredura de contraste achou os rótulos ".meta" a 3,35:1 na faixa escura —
   reprovado em WCAG AA. A regra listava só .kicker e .peq. Toda cor secundária precisa
   ter par declarado para fundo escuro; por isso .meta entrou aqui. */
.faixa--escura .kicker,
.faixa--escura .peq,
.faixa--escura .meta { color: var(--sobre-escuro-2); }

/* números em coluna nunca dançam */
.num, .idx, time, .valor { font-variant-numeric: tabular-nums; }

/* ---------- pilha vertical: espaço vem do layout, não de margens soltas ---------- */
.pilha       { display: flex; flex-direction: column; gap: var(--e4); align-items: flex-start; }
.pilha--fina { gap: var(--e2); }
.pilha--larga{ gap: var(--e6); }

/* ---------- botões ---------- */
.btn {
  display: inline-flex; align-items: center; gap: var(--e2);
  min-height: 48px; padding: var(--e3) var(--e5);
  font-family: inherit; font-size: 16px; font-weight: 500;
  text-decoration: none; color: var(--ink);
  border: 1px solid var(--ink); background: transparent;
  border-radius: var(--raio);
  transition: background-color .18s ease, color .18s ease,
              border-color .18s ease, transform .16s ease;
}
/* movimento: sobe 1px ao passar o mouse, afunda ao clicar. Discreto de propósito —
   botão que salta lê como app, e o registro aqui é institucional. */
.btn:hover  { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn .seta  { transition: transform .18s ease; }
.btn:hover .seta { transform: translateX(3px); }
.btn--cheio { background: var(--acento); border-color: var(--acento); color: var(--paper); }
.btn:hover  { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.btn--cheio:hover { background: var(--acento-2); border-color: var(--acento-2); }
.faixa--escura .btn { color: var(--sobre-escuro); border-color: var(--sobre-escuro); }
.faixa--escura .btn:hover { background: var(--sobre-escuro); color: var(--escuro); border-color: var(--sobre-escuro); }

a { color: inherit; }
.link { text-decoration: none; border-bottom: 1px solid var(--acento); padding-bottom: 2px; }
.link:hover { border-bottom-color: var(--ink); color: var(--acento); }
.faixa--escura .link { border-bottom-color: var(--sobre-escuro-2); }
.faixa--escura .link:hover { border-bottom-color: var(--sobre-escuro); color: var(--sobre-escuro); }

:where(a, button, [tabindex]):focus-visible {
  outline: 2px solid var(--ink); outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }