/* Cesar Segatto Advocacia — sistema de design.
   Tokens, reset e primitivas reaproveitadas por todas as páginas.
   Ordem de carregamento: fonts.css → base.css → layout.css → home.css|pages.css

   ── Três regras que explicam quase todo o arquivo ────────────────────────

   1. O amarelo é CLARO. #FFC72C tem 13,5:1 contra o preto — enxerga-se de
      longe como texto, como fio e como bloco chapado. Isso resolve metade
      dos problemas e cria um novo: **nada branco pode pousar em cima dele**.
      Branco sobre #FFC72C dá 1,55:1, ilegível. Por isso existe --accent-ink,
      que é o preto: é a cor de tudo que fica DENTRO de uma área amarela —
      texto de botão, letras do monograma, seleção de texto. Trocou o
      amarelo? Confira o --accent-ink junto.

   2. O amarelo é caro. Sobre preto ele domina qualquer composição em que
      apareça, então aparece pouco e sempre com função: a ação principal, o
      monograma, o número da seção, o link, o marcador da linha do tempo.
      Espalhar amarelo por bordas e seta é o caminho mais curto para o site
      parecer fita de sinalização.

   3. O erro tem cor própria (--danger). Na paleta anterior, de bordô, o
      acento servia de vermelho de erro por acaso; com amarelo isso deixaria
      um campo inválido indistinguível de um destaque comum. */

:root {
  /* ══ superfícies, do fundo para a frente ══════════════════════════════
     Preto de verdade na base, e cinzas NEUTROS acima dele — nada de cinza
     quente: ao lado do amarelo, cinza quente vira bege e suja a paleta. Os
     degraus são largos (0 → 13 → 21 → 31) porque sobre preto chapado um
     degrau curto simplesmente não se vê. */
  --bg:            #000000;   /* página */
  --surface-sunk:  #050505;   /* recuos: campos de formulário */
  --surface-1:     #0d0d0d;   /* bandas de seção */
  --surface-2:     #151515;   /* cartões */
  --surface-3:     #1f1f1f;   /* hover de cartão e de linha */

  /* ══ traços ═══════════════════════════════════════════════════════════ */
  --line:          #262626;   /* divisor padrão */
  --line-soft:     #1a1a1a;   /* divisor interno, mais discreto */
  --line-strong:   #3a3a3a;   /* borda de botão secundário e de tracejado */

  /* ══ texto, do mais claro ao mais apagado ═════════════════════════════ */
  --text:          #f4f3f0;   /* corpo e títulos */
  --text-2:        #b6b4af;   /* secundário */
  --text-3:        #888681;   /* legendas, metadados */
  --text-4:        #5d5b57;   /* espaços reservados, rodapé legal */

  /* ══ acento — amarelo ═════════════════════════════════════════════════
     Um amarelo só, porque um só basta: 13,5:1 sobre preto serve de texto,
     de fio e de bloco chapado. O que muda conforme o papel é a cor que vai
     EM CIMA dele.
       ink   preto — texto de botão, letras do monograma, seleção de texto
       deep  âmbar mais fundo, para fios e molduras não gritarem
       hi    hover do preenchimento */
  --accent:        #ffc72c;
  --accent-hi:     #ffd75f;
  --accent-deep:   #c4901a;
  --accent-ink:    #000000;
  /* Fundo tingido, só para painel — hoje a confirmação de envio do
     formulário. Não sirva de brilho de fundo: em área grande e difusa o
     amarelo vira um disco aceso no alto da página. */
  --accent-wash:   rgba(255, 199, 44, .09);
  --accent-halo:   rgba(255, 199, 44, .22);  /* brilho do ponto e do foco */

  /* Erro de formulário tem cor própria: campo inválido em amarelo não se
     distingue de destaque em amarelo. */
  --danger:        #e5484d;
  --danger-halo:   rgba(229, 72, 77, .22);

  /* ══ tipografia ═══════════════════════════════════════════════════════
     A monoespaçada é a voz documental do site: números de seção, datas,
     rótulos, cabeçalhos de tabela, anos da linha do tempo. É a tipografia
     de quem lê edital — e não custa download nenhum, sai do sistema. */
  --font-body:    'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --font-mono:    ui-monospace, 'SFMono-Regular', 'Cascadia Mono',
                  'Segoe UI Mono', Menlo, Consolas, monospace;

  /* ══ medidas ══════════════════════════════════════════════════════════ */
  --page:      1240px;
  --gutter:    clamp(20px, 4.4vw, 48px);
  --header-h:  68px;   /* alimenta o scroll-padding e as âncoras */

  /* ══ arredondamento ═══════════════════════════════════════════════════
     Estrutura (fios, faixas, molduras) é reta; só o que se clica é curvo,
     e de pouco. É o que separa "editorial" de "painel de aplicativo". */
  --r-sm: 3px;
  --r-md: 6px;
  --r-pill: 999px;

  /* ══ profundidade ═════════════════════════════════════════════════════
     Sombra quase não se vê sobre preto. O que dá volume ao cartão é o fio
     de luz no topo — a mesma coisa que uma quina metálica faria. */
  --edge:   inset 0 1px 0 rgba(255, 255, 255, .045);
  --lift:   0 20px 50px -28px rgba(0, 0, 0, .95);

  /* ══ movimento ════════════════════════════════════════════════════════ */
  --ease: cubic-bezier(.22, .61, .36, 1);
  --fast: .18s;
  --mid:  .32s;

  /* Faz o navegador desenhar campos, menus e barras de rolagem no escuro —
     sem isso o <select> e o checkbox de contato.html saem brancos. */
  color-scheme: dark;
}

@media (max-width: 700px) {
  :root { --header-h: 60px; }
}

/* ══ reset ══════════════════════════════════════════════════════════════ */

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

html {
  /* Sem isto a âncora pousa embaixo do cabeçalho fixo. */
  scroll-padding-top: calc(var(--header-h) + 24px);
  -webkit-text-size-adjust: 100%;
}

/* Não há `scroll-behavior: smooth` aqui, e é de propósito. Todas as âncoras
   do site são entre páginas (`areas.html#penal`), mais o link de pulo. Com
   rolagem suave ligada, o salto que o navegador faz ao abrir a página com
   fragmento vira uma animação que qualquer reflow durante o carregamento
   cancela — e o visitante que clicou em "Direito penal" aterrissa no topo de
   areas.html sem entender por quê. Rolagem suave também atrapalha quem pediu
   menos movimento. */

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  /* clip, e não hidden. `overflow-x: hidden` faz o navegador computar o
     overflow-y do body como `auto`, o que transforma o body num contêiner de
     rolagem próprio: a partir daí a rolagem por âncora (areas.html#penal) e o
     scroll-padding-top do cabeçalho fixo param de funcionar, sem erro nenhum.
     `clip` corta o estouro horizontal igual, mas não cria contêiner. */
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4 { margin: 0; font-weight: 400; }
p { margin: 0; }
img, svg { display: block; max-width: 100%; }
blockquote, figure { margin: 0; }
button { font: inherit; color: inherit; }

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--text); }

::selection { background: var(--accent); color: var(--accent-ink); }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Trava a rolagem do fundo enquanto o menu de celular está aberto. */
body.is-locked { overflow: hidden; }

/* ══ utilidades ═════════════════════════════════════════════════════════ */

/* Primeiro elemento focável da página: pula o menu inteiro. */
.skip {
  position: fixed;
  top: 10px; left: 10px;
  z-index: 200;
  padding: 12px 18px;
  background: var(--accent);
  color: var(--accent-ink);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  border-radius: var(--r-sm);
  transform: translateY(-180%);
  transition: transform var(--mid) var(--ease);
}
.skip:focus { transform: none; color: var(--accent-ink); }

/* ══ primitivas de rótulo ═══════════════════════════════════════════════ */

/* Olho de seção: "01 — Trajetória". O fio à esquerda ancora o rótulo na
   coluna e vira a assinatura do sistema, repetida em todas as páginas. */
.kicker {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--accent);
}
.kicker::before {
  content: "";
  flex: none;
  width: 28px;
  height: 1px;
  background: var(--accent-deep);
}

/* Rótulo curto e neutro: legendas de números, campos, cabeçalhos de coluna. */
.eyebrow {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text-3);
}

/* Pastilha de informação viva: prazo de resposta, inscrição, ano. */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 7px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--surface-2);
  box-shadow: var(--edge);
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-2);
  white-space: nowrap;
}

.chip__dot {
  flex: none;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 0 var(--accent-halo);
  animation: pulse 3s var(--ease) infinite;
}

@keyframes pulse {
  0%, 70%, 100% { box-shadow: 0 0 0 0 var(--accent-halo); }
  35%           { box-shadow: 0 0 0 6px rgba(255, 199, 44, 0); }
}

/* ══ botões ═════════════════════════════════════════════════════════════ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px 28px;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-align: center;
  white-space: nowrap;
  cursor: pointer;
  transition:
    background var(--fast) var(--ease),
    border-color var(--fast) var(--ease),
    color var(--fast) var(--ease),
    transform var(--fast) var(--ease);
}
.btn:active { transform: translateY(1px); }

/* Sem o fio de luz do --edge: sobre amarelo um realce branco não se vê, e
   amarelo chapado com texto preto é justamente o que se quer ver. */
.btn--solid {
  background: var(--accent);
  color: var(--accent-ink);
}
.btn--solid:hover { background: var(--accent-hi); color: var(--accent-ink); }

.btn--outline {
  border-color: var(--line-strong);
  color: var(--text);
}
.btn--outline:hover {
  border-color: var(--accent-deep);
  background: var(--surface-2);
  color: var(--text);
}

.btn--sm { padding: 11px 18px; font-size: 10.5px; }
.btn--block { display: flex; width: 100%; }

/* Link de saída de seção: "Todos os casos encerrados →". */
.link-more {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent);
  transition: color var(--fast) var(--ease);
}
.link-more::after {
  content: "→";
  transition: transform var(--mid) var(--ease);
}
.link-more:hover { color: var(--text); }
.link-more:hover::after { transform: translateX(5px); }

/* ══ moldura de imagem ══════════════════════════════════════════════════ */

/* A "chapa": o retrato de estúdio veio com fundo branco, e a página é preta.
   Em vez de mascarar o branco até ele sumir — que era o que o hero antigo
   fazia, ao custo de um degradê tão longo que precisava de ruído para não
   listrar —, a foto é TRATADA: parcialmente dessaturada e multiplicada por
   um cinza quente, o que comprime o branco do estúdio a um cinza médio e
   deixa os escuros escuros. O resultado é uma foto graduada, coerente com a
   paleta, dentro de uma moldura que assume ser uma moldura.

   Para voltar à foto crua, apague o filter e a regra .plate::before. */
.plate {
  position: relative;
  isolation: isolate;          /* prende o mix-blend-mode aqui dentro */
  overflow: hidden;
  border-radius: var(--r-md);
  background: var(--surface-1);
  box-shadow: var(--edge), var(--lift);
}

.plate > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(.38) contrast(1.06) saturate(1.06);
}

/* O z-index destas três camadas NÃO é decorativo, é obrigatório.
   O filter da <img> a promove para a mesma etapa de pintura dos
   pseudo-elementos posicionados, e lá vale a ordem da árvore: sem
   z-index explícito a imagem passa por cima do ::before e a tintura
   simplesmente some, sem erro nenhum no console. */
.plate::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: #949290;
  mix-blend-mode: multiply;
}

/* Base escura para a legenda pousar sem precisar de caixa. */
.plate::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(180deg,
    rgba(0, 0, 0, 0) 44%,
    rgba(0, 0, 0, .58) 74%,
    rgba(0, 0, 0, .97) 100%);
}

/* Moldura vazia, à espera da fotografia. */
.frame {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: var(--surface-1);
}
.frame--portrait { aspect-ratio: 4 / 5; }
.frame--thumb    { aspect-ratio: 4 / 3; }

.frame > img { width: 100%; height: 100%; object-fit: cover; }
.frame > .placeholder {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  border: 0;
  border-radius: 0;
}

.frame__caption {
  margin-top: 14px;
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.7;
  letter-spacing: .04em;
  color: var(--text-3);
}

/* ══ linha do tempo ═════════════════════════════════════════════════════
   Usada na home (ano + fato) e em trajetoria.html (ano + título + fato). */

.timeline { display: flex; flex-direction: column; }

.timeline__row {
  position: relative;
  display: grid;
  grid-template-columns: 76px 1fr;
  gap: 22px;
  padding: 20px 0 20px 24px;
  border-bottom: 1px solid var(--line-soft);
}
.timeline__row:first-child { border-top: 1px solid var(--line); }

/* O ponto na margem é o que transforma uma lista numa linha do tempo. */
.timeline__row::before {
  content: "";
  position: absolute;
  left: 0;
  top: 27px;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--accent);
}
/* e o fio é o que liga um ponto ao seguinte */
.timeline__row::after {
  content: "";
  position: absolute;
  left: 3px;
  top: 34px;
  bottom: -1px;
  width: 1px;
  background: var(--line);
}
.timeline__row:last-child::after { display: none; }

.timeline__year {
  padding-top: 2px;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: .04em;
  font-variant-numeric: tabular-nums;
  color: var(--accent);
}

.timeline__title {
  margin-bottom: 5px;
  font-size: 17px;
  color: var(--text);
}

.timeline__fact {
  font-size: 14.5px;
  line-height: 1.68;
  color: var(--text-2);
}
.timeline__title + .timeline__fact { color: var(--text-3); }

/* ══ espaço reservado ═══════════════════════════════════════════════════
   Marca onde entra conteúdo que o escritório ainda vai enviar. A hachura
   diagonal é de propósito: diz "provisório" sem gritar, e some junto com o
   bloco quando o conteúdo real chegar. */

.placeholder {
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-sm);
  padding: 24px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  line-height: 1.75;
  letter-spacing: .03em;
  color: var(--text-4);
  background-image: repeating-linear-gradient(135deg,
    transparent 0 7px, rgba(255, 255, 255, .018) 7px 14px);
}

/* ══ revelação ao rolar ═════════════════════════════════════════════════
   js/main.js troca data-anim="" por data-anim="in" quando o elemento entra
   na tela. Sem JavaScript a regra nunca dispara — daí o <noscript> no <head>
   de cada página e a rede de segurança no próprio script. */

[data-anim] {
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity .7s var(--ease),
    transform .7s var(--ease);
}
[data-anim="in"] { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  [data-anim] { opacity: 1; transform: none; transition: none; }
  .chip__dot { animation: none; }
}