/* O estilo.css calibra o `scroll-padding-top` pela altura do cabecalho fixo:
   e o quanto o navegador desconta ao saltar para uma ancora. O valor de la,
   8,5rem, foi feito para o cabecalho de 125px. O novo mede 156px — sem este
   ajuste, quem clica em "Atuacao" cai com os primeiros 20px da secao
   escondidos atras da faixa, o titulo cortado ao meio. So no desktop: abaixo
   de 62rem o cabecalho nao e fixo e nao ha o que descontar. */
@media (min-width: 62rem) {
  html { scroll-padding-top: 10.5rem; }
}

/* ------------------------------------------------------------------------
   Cabecalho novo.

   No desktop o brasao ocupa a coluna da esquerda atravessando as duas faixas
   — assinatura em cima, menu embaixo — e o resto recua para a direita dele.
   ------------------------------------------------------------------------ */
@font-face {
  font-family: "Allura";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/allura-nome.woff2") format("woff2");
}

.topo2 {
  position: sticky;
  top: 0;
  z-index: 40;
  background: #1b3a63;
  border-bottom: 3px solid #c9a356;
}
.topo2__grade {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  column-gap: 1.35rem;
  align-items: center;
  padding-block: 0.95rem 0.55rem;
}

/* ---------------------------------------------------------------- brasao - */
.topo2__brasao {
  grid-row: 1 / 3;
  grid-column: 1;
  align-self: center;
  display: block;
  /* Centrado nas duas faixas, o topo do escudo caia 8,5px abaixo do topo do
     "C" de Carlos — medido no desenho da letra, nao na caixa da linha, que
     tem folga por cima. O deslocamento e relativo: nao mexe na altura da
     faixa, so encosta os dois topos na mesma reta. */
  position: relative;
  top: -8.5px;
}
/* O escudo cresceu de 4,75rem para 7,25rem: centrado nas duas faixas, o topo
   dele passa a nascer na mesma linha do nome, e ele deixa de parecer um
   adereco ao lado do texto. */
.topo2__brasao img { display: block; height: 7.25rem; width: auto; }

/* ----------------------------------------------------------------- marca - */
.topo2__marca {
  grid-row: 1;
  grid-column: 2;
  text-decoration: none;
  min-width: 0;
}
.topo2__nome {
  display: block;
  font-family: "Allura", cursive;
  font-weight: 400;
  /* Corpo fixo, nao clamp: o alinhamento do topo do escudo com o topo do "C"
     depende do corpo do nome. Com clamp, o nome encolhia junto com a janela e
     os dois topos saiam da mesma reta — 2px a 1280px. Fixo em 3,5rem, o
     alinhamento vale em toda a faixa do desktop. O celular tem corpo proprio
     mais abaixo, e la o escudo nao atravessa as faixas. */
  font-size: 3.5rem;
  /* A caixa natural da Allura mede 1,25em, mas a tinta do nome ocupa 0,786em:
     com entrelinha normal sobra um vao que parece linha em branco. */
  line-height: 0.79;
  color: #ffffff;
  letter-spacing: 0;
}
.topo2__area {
  display: block;
  margin-top: 0.8rem;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  /* Mesmo cinza claro da inscricao. O cabecalho ja tem o aro do escudo, os
     links e o botao em latao — mais um dourado aqui pesava demais. */
  color: rgb(255 255 255 / 0.62);
  line-height: 1;
}
.topo2__oab {
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: none;
  color: rgb(255 255 255 / 0.62);
}

/* --------------------------------------------------------------- sociais - */
/* Os icones ficam como o site ja os define: 2,75rem de circulo, 1,25rem de
   desenho, borda e hover do bloco `.sociais` do estilo.css. Nao ha regra de
   tamanho aqui de proposito — assim, se um dia o site mudar os icones, o
   cabecalho acompanha sem precisar de retoque em dois lugares. */
.topo2__contato { grid-row: 1; grid-column: 3; }

/* ------------------------------------------------------------------ menu - */
.topo2__menu {
  grid-row: 2;
  grid-column: 2 / span 2;
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: var(--s3);
  margin-top: 0.5rem;
}
/* O fio de 1px que o site ja usa entre as duas faixas do cabecalho. Ele fica
   no grupo de links, e nao na faixa inteira, para terminar no fim de
   "Contato" em vez de correr por baixo do botao. */
.topo2__links {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s2);
  min-width: 0;
  border-top: 1px solid rgb(255 255 255 / 0.12);
  padding-top: 0.35rem;
}
.topo2__links a {
  color: #d8b76a;
  text-decoration: none;
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: 0.055em;
  text-transform: uppercase;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  border-bottom: 2px solid transparent;
}
.topo2__links a:hover { color: #ffffff; border-bottom-color: currentColor; }
.topo2__menu .botao--cheio {
  align-self: center;
  background: #c9a356; color: #0e1e36; border: 0;
  min-height: 2.6rem;
  display: inline-flex; align-items: center;
  padding: 0 1.15rem; border-radius: 4px;
  font-weight: 600; font-size: 0.9375rem; text-decoration: none;
  flex: none;
}
.topo2__menu .botao--cheio:hover { background: #e0c079; }

/* Assinatura centrada (versao escolhida): o bloco nome/area/OAB centra na
   sobra entre o escudo e os icones. Aumentar o nome nao fechava o vao a
   direita — a 3,5rem ele ocupa metade da coluna; centrar reparte a sobra. */
.topo2__marca { text-align: center; }

/* ---------------------------------------------- celular e tablet (<62rem) -
   Tres colunas na faixa de cima: brasao a esquerda, nome e area centrados,
   redes a direita em coluna, com a altura do brasao. O menu vem abaixo, em
   toda a largura — diferente do desktop, onde o brasao atravessa as faixas.

   O escudo nao tem tamanho proprio aqui: ele mede o vao entre duas linhas que
   o cabecalho ja tinha — a cabeca do "C" do nome em cima, a base dos icones
   embaixo. Havia um `--brasao` em rem que fixava a altura; ele so acertava as
   duas linhas por coincidencia, e so no tablet.                             */
@media (max-width: 61.999rem) {
  /* Como hoje: no celular o cabecalho deixa de ser fixo. Fixo, esta faixa
     comeria um terco da tela em todas as rolagens. */
  .topo2 { position: static; }
  /* Duas colunas: o brasao a esquerda atravessando duas fileiras, e a direita
     o nome em cima e as redes embaixo. O brasao de 8rem tem 128px de altura,
     enquanto nome + area + inscricao somam uns 48px — os 80px que sobravam ao
     lado dele sao exatamente onde as redes cabem, na horizontal e no tamanho
     certo, sem custar altura nenhuma ao cabecalho.

     Sem justify-content de proposito: com ele a grade mede as colunas pelo
     conteudo, e o menu de tres colunas empurra a faixa para fora da tela. */
  /* A coluna do brasao vale exatamente um terco da grade, como as tres
     colunas do menu logo abaixo — assim o centro do escudo cai no mesmo eixo
     do centro de "Seguranca". Com `auto` ela media so a largura do escudo, e
     os dois eixos ficavam fora.

     O `column-gap` e zero de proposito: com vao, a coluna do brasao mediria
     (largura - vao)/3 enquanto a do menu mede largura/3, e os eixos voltariam
     a divergir. O respiro entre escudo e nome vem do padding-inline do bloco
     do nome. */
  .topo2__grade {
    /* Quanto o bloco nome/area/inscricao desce dentro da fileira de cima. O
       mesmo valor sai do respiro das redes logo abaixo, e por isso a altura
       do cabecalho nao muda: o que o nome ganha em cima, as redes devolvem
       embaixo. O bloco fica mais baixo e mais perto dos icones — que era o
       pedido — sem custar um pixel de faixa.

       De quebra, e ele que resolve o alinhamento do escudo: o brasao esta
       centrado no vao das duas fileiras, e esse vao nao muda de tamanho, so
       de reparticao. Entao o escudo fica onde esta enquanto o "C" sobe ao seu
       encontro. Medido a 375px, o escudo nascia 7,83px abaixo do topo do
       desenho do "C" — descer o nome 8px encosta os dois na mesma reta. */
    --descer-nome: 0.5rem;
    grid-template-columns: 1fr 2fr;
    column-gap: 0;
    /* Vao pequeno aqui de proposito: o respiro entre a inscricao e as redes e
       dado pelo `margin-top` do bloco de redes, para nao empurrar tambem o
       menu, que pode ficar mais perto. */
    row-gap: 0.2rem;
    padding-block: 0.6rem 0.45rem;
    /* Referencia do escudo, que aqui e posicionado: sem isto ele se prenderia
       a pagina inteira em vez da sua celula da grade. */
    position: relative;
  }

  .topo2__brasao {
    grid-row: 1 / 3; grid-column: 1;
    /* `start`, e nao `center`. Centrado, o escudo pendia da ALTURA DO TEXTO:
       a 320px a area de atuacao quebra em duas linhas, o bloco cresce 7,6px e
       o escudo desce metade disso — 4,6px fora da linha do "C", com a regra
       certa em toda parte. Ancorado no topo da fileira, escudo e nome passam
       a pender do mesmo ponto, e a quebra da area deixa de mexer com ele.

       O recuo e o mesmo `--descer-nome` do bloco do nome, menos 1px: o
       desenho do "C" nasce um pouco acima da caixa da linha, porque a Allura
       tem ascendente alto e a entrelinha aqui e 0,79. Medido nas tres
       larguras, o residuo fica abaixo de meio pixel — invisivel.

       E `margin-top`, nao `top`. Com `top` o deslocamento e so pintura: a
       grade dimensiona as fileiras como se o escudo comecasse no topo, e no
       tablet — onde ele media 7rem fixos — a base descia ate 0,63px do menu,
       prestes a encostar. Com margem, os 7px entram na conta.

       E a ALTURA do escudo deixou de ser um numero escolhido: ela e o vao
       entre as duas linhas que o cabecalho ja tem — o topo do "C" em cima, a
       base dos icones embaixo. Era assim que o desenho ja caia no tablet, por
       coincidencia de medidas, e e o que fecha o conjunto. Presa em rem, a
       coincidencia so valia naquela largura: a 375px o escudo parava 6,7px
       antes dos icones, e a 320px, 14,3px antes — solto no canto.

       `position: absolute` na area da grade, e nao `align-self: stretch`.
       Esticar parece o caminho, mas cria uma alca: a fileira se dimensiona
       pelo conteudo, o conteudo e o escudo, e o escudo mede a fileira. Sem
       saida, o navegador cai no tamanho intrinseco do SVG — 222px de altura,
       o cabecalho em 336px. Item posicionado nao entra na conta das fileiras:
       elas passam a medir so o texto e os icones, e o `top`/`bottom` colam o
       escudo exatamente nas duas linhas que sobraram.

       A coluna nao encolhe com isso: ela vale `1fr`, uma fracao da largura, e
       nao a medida do que esta dentro — o eixo com "Seguranca" fica de pe. */
    position: absolute;
    /* `1 / 2`, e nao `1`. Para item posicionado, linha `auto` nao quer dizer
       "uma coluna": quer dizer a borda da grade. Escrito `grid-column: 1`, o
       escudo ia da primeira linha ate a direita da faixa e centrava na tela
       inteira, 170px fora do eixo de "Seguranca". Fechar as duas pontas e o
       que o prende a coluna. */
    grid-row: 1 / 3; grid-column: 1 / 2;
    /* As duas linhas do desenho: o topo do "C" em cima, a base dos icones
       embaixo. E so isto que define o tamanho do escudo. */
    top: calc(var(--descer-nome) - 1px);
    bottom: 0;

    /* A altura sai do par top/bottom, e a largura sai da altura pela proporcao
       do desenho — nesta ordem. Duas tentativas erradas antes desta, ambas
       porque a largura acabava mandando na altura:

       `left: 0; right: 0` com `aspect-ratio` — o navegador preenche a coluna
       na largura e tira a altura dai; a 375px o escudo passava 28px abaixo
       dos icones. E `width: fit-content` — para medir a largura ele precisa
       da altura da imagem, que depende da largura: circularidade que ele
       resolve caindo no tamanho intrinseco do SVG.

       Sem `left`/`right`, so `top` e `bottom` restringem a caixa, e a largura
       fica livre para a proporcao resolver.

       E `align-self: stretch` e obrigatorio: a regra de cima, do desktop, diz
       `center`, e caixa posicionada tambem obedece ao alinhamento. Com
       `center` o navegador nao estica entre as duas linhas — ele monta uma
       caixa pequena e a centra na sobra, e o escudo encolhia para 56px de
       largura no meio do vao. */
    align-self: stretch; justify-self: center;
    left: auto; right: auto;
    height: auto;
    width: auto;
    aspect-ratio: 180 / 222;
  }
  .topo2__brasao img { height: 100%; width: 100%; }

  /* `align-self: end` com margem em cima: a fileira cresce o tanto da margem
     e o bloco desce junto, encostado na base. */
  .topo2__marca {
    grid-row: 1; grid-column: 2; align-self: end;
    margin-top: var(--descer-nome);
  }
  /* Padding so no nome: a coluna de 2fr tem um minimo automatico igual ao seu
     conteudo mais largo, e a 320px esse conteudo era a fileira de icones. Com
     padding nela, o minimo ia a 203px, a coluna do brasao caia de 93 para 77 e
     os dois eixos saiam do lugar. Os icones ja sao centrados e nao precisam
     do recuo. */
  .topo2__marca { padding-inline: 0.7rem; }
  /* O nome nunca quebra, e por isso o corpo tem de caber na coluna que sobra.
     Medido: "Carlos Roberto da Silva" mede 7,953x o corpo, e a coluna vale
     dois tercos da grade menos o padding: (tela - 40) * 2/3 - 22,4. Dai o
     corpo maximo, e a conta abaixo e essa com 8% de folga. A 320px da 19,1px,
     a 375px da 23,4px, e trava em 2rem acima de 486px. */
  .topo2__nome {
    font-size: clamp(1.125rem, calc(7.76vw - 5.7px), 2rem);
    white-space: nowrap;
  }
  .topo2__area {
    margin-top: 0.5rem;
    font-size: 0.6875rem;
    letter-spacing: 0.16em;
  }
  /* Em tela estreita a inscricao nao cabe ao lado da area: desce uma linha,
     e o ponto medio some junto. */
  .topo2__ponto { display: none; }
  .topo2__oab { display: block; margin-top: 0.3rem; letter-spacing: 0.08em; }

  /* Redes na horizontal, embaixo do nome, dentro do espaco que o brasao ja
     ocupa. Tamanho do celular do site — 2,375rem de circulo, 1rem de desenho:
     o nome e a area e que precisam de destaque, as redes vem depois. */
  .topo2__contato {
    grid-row: 2; grid-column: 2;
    justify-self: center; align-self: start;
    /* Uma linha de respiro entre a inscricao e as redes, menos o tanto que o
       nome desceu. E daqui que sai o espaco do `--descer-nome`: sem esta
       subtracao o cabecalho cresceria a mesma medida. */
    margin-top: calc(0.95rem - var(--descer-nome));
  }
  .topo2 .sociais { gap: 0.6rem; }
  .topo2 .sociais a { width: 2.375rem; height: 2.375rem; }
  .topo2 .sociais svg { width: 1rem; height: 1rem; }

  .topo2__menu {
    grid-row: 3;
    grid-column: 1 / span 2;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin-top: 0;
    min-width: 0;
  }
  /* No celular o fio nao fica acima do menu: ele corre ENTRE as duas fileiras
     de palavras. E feito das bordas dos tres itens de baixo, e por isso o
     `gap` horizontal da grade e zero — com vao entre as colunas a linha
     sairia tracejada em tres pedacos. O respiro lateral vem do
     `padding-inline` dos links. Mesma solucao do estilo.css. */
  .topo2__links {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    border-top: 0;
    padding-top: 0.15rem;
    padding-bottom: 0.35rem;
    min-width: 0;
  }
  .topo2__links a {
    min-height: 2.75rem;
    font-size: 0.8125rem;
    letter-spacing: 0.03em;
    justify-content: center;
    text-align: center;
    padding-inline: 0.15rem;
  }
  .topo2__links a:nth-child(n + 4) {
    border-top: 1px solid rgb(255 255 255 / 0.12);
  }

  /* O "Enviar meu caso" sai do cabecalho no celular: ele ja existe no corpo,
     abaixo da fita de fotos (secao `.chamada-movel`). Deixar os dois a mostra
     duplicava o botao na mesma tela — o estilo.css avisa exatamente disso e eu
     tinha passado por cima. */
  .topo2__menu .botao--cheio { display: none; }
}

/* ------------------------------------------------------ tablet em pe -----
   Entre 40rem e 62rem o desenho continua sendo o do celular — o do desktop
   nao cabe: so o nome a 3,5rem mede 445px, e com escudo, icones e vaos o
   conjunto pede 800px numa faixa de 728px.

   O que muda e a largura: sem limite, o mesmo desenho se estica e o brasao
   fica sozinho num canto enquanto as seis palavras do menu se espalham por
   toda a tela. Travando o conteudo e centrando, o cabecalho de tablet fica
   com a mesma densidade do celular, no meio da faixa.

   E o `scroll-padding-top`: o estilo.css usa 11rem aqui porque, nele, o
   cabecalho de tablet e fixo. Neste ele nao e — sem corrigir, cada salto do
   menu pararia 176px cedo demais, com um vao enorme sobrando acima do
   titulo. */
@media (min-width: 40rem) and (max-width: 61.999rem) {
  html { scroll-padding-top: 1.5rem; }
  /* So a largura muda aqui: as colunas de um terco, a centralizacao e o
     tamanho do escudo ja vem da faixa de celular. O escudo cresce sozinho no
     tablet, sem regra propria: o nome vai a 2rem, o bloco de texto fica mais
     alto, e o vao entre as duas linhas — que e a altura dele — cresce junto. */
  .topo2__grade {
    max-width: 32rem;
    margin-inline: auto;
  }
}

/* ------------------------------------------------------- landing page ----
   A landing (`analise-do-caso.html`) nao usa o cabecalho do site sem o menu:
   ela tem um cabecalho proprio, que e a faixa. Um elemento so, sticky em toda
   largura, com a assinatura de um lado e a chamada do outro.

   Duas ausencias, ambas de proposito:

   Nao ha icones de rede em largura nenhuma. A pagina e de conversao, e cada
   saida para outro lugar e uma conversa que nao acontece. Eles seguem no
   rodape, para quem for procurar.

   Nao ha a versao alta do cabecalho do site. Antes existiam duas pecas — uma
   alta no topo da pagina e uma faixa que descia ao rolar. Como as duas
   passaram a ser a mesma coisa, sobrou uma so, e com ela foram embora o
   `IntersectionObserver` e a classe que ele ligava. O cabecalho e sticky e
   pronto: sem JS, sem estado, sem nada para dessincronizar.

   O escudo aqui tem tamanho proprio, e nao a regra das duas linhas do site —
   ela media o vao entre a cabeca do "C" e a base dos icones, e aqui nao ha
   icones nem segunda fileira de que pender.                                */
.topo2--faixa {
  position: sticky;
  top: 0;
}
.faixa__interno {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.45rem 0.75rem;
  padding-block: 0.4rem;
}
.faixa__marca {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  text-decoration: none;
  min-width: 0;
}
.faixa__marca img { display: block; height: 2.5rem; width: auto; flex: none; }
.faixa__texto { display: flex; flex-direction: column; min-width: 0; }
.faixa__nome {
  font-family: "Allura", cursive;
  font-weight: 400;
  /* Medido: a 320px sobram 239px para a assinatura e o nome em 1,35rem pede
     240 — estourava por menos de um pixel, e conteudo transbordado numa faixa
     sticky nao ganha barra de rolagem, so some cortado. O clamp encolhe o nome
     nas telas mais estreitas e trava no tamanho cheio a partir de 386px. */
  font-size: clamp(1.15rem, 5.6vw, 1.35rem);
  /* Mesma razao do cabecalho do site: a tinta da Allura ocupa bem menos que a
     caixa natural da linha, e com entrelinha normal sobraria um vao. */
  line-height: 0.9;
  color: #ffffff;
  white-space: nowrap;
}
.faixa__linha {
  margin-top: 0.15rem;
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgb(255 255 255 / 0.62);
  white-space: nowrap;
}
.faixa__oab { font-weight: 400; letter-spacing: 0.08em; text-transform: none; }
.faixa__interno .botao--cheio {
  background: #c9a356; color: #0e1e36; border: 0;
  min-height: 2.4rem;
  display: inline-flex; align-items: center;
  padding: 0 1.05rem; border-radius: 4px;
  font-weight: 600; font-size: 0.9375rem; text-decoration: none;
  white-space: nowrap;
}
.faixa__interno .botao--cheio:hover { background: #e0c079; color: #0e1e36; }

/* A linha da area e a mais larga das duas quando o nome encolhe: sao 40
   caracteres, e cada 0,01em de entreletra custa 4px nela. Abaixo de 22rem o
   espacejamento cede, que e o que menos se nota. */
@media (max-width: 22rem) {
  .faixa__linha { letter-spacing: 0.08em; }
}

/* Telas estreitas: assinatura em cima, botao ocupando a largura toda embaixo.
   Numa linha so, a 375px, sobrariam 151px para uma assinatura que pede 240 —
   o nome teria de cair para 15px de corpo, ilegivel numa fonte de traco fino
   como a Allura.

   O corte e 30rem porque e onde a linha unica passa a caber, medido: escudo
   32 + vao 9 + assinatura 240 + vao 12 + botao 139 = 432px de largura util, e
   o envelope come 40 nas bordas. Abaixo disso a fileira quebra de qualquer
   jeito — sem esta regra o botao quebrava sozinho e ficava encolhido no canto
   esquerdo, o que parecia defeito. */
@media (max-width: 29.999rem) {
  .faixa__interno .botao--cheio { flex: 1 0 100%; justify-content: center; }
}

/* O `scroll-padding-top` do site foi calibrado para o cabecalho dele. Aqui a
   faixa e bem mais baixa: sem corrigir, cada salto para o formulario pararia
   cedo demais, com um vao enorme sobrando acima. Os valores acompanham as
   duas alturas medidas da faixa — 100,4px em duas fileiras e 54,8px em uma.

   `:has` porque a folha e a mesma nas tres paginas e nao ha como marcar o
   <html> daqui. Onde ele nao existir, sobra o valor do site: o salto para no
   lugar, so com folga demais. */
html:has(.topo2--faixa) { scroll-padding-top: 7rem; }
@media (min-width: 30rem) {
  html:has(.topo2--faixa) { scroll-padding-top: 4.5rem; }
}

/* =====================================================================
   PALETA DE 26/08/2026
   O sitio ficou com o marinho aberto (a faixa acima, #1b3a63) e todo o
   dourado original: filete, menu, icones e botao. So a faixa clareou.

   A landing e a politica ganharam o "ceu de manha": faixa clara e os
   detalhes em marinho. O dourado NAO vem para ca porque nao passa —
   medido: #d8b76a sobre #e8eff9 da 1,66:1, e texto pede 4,5:1. Ate o
   latao mais escuro do sitio, #a8823c, para em 3,06:1. O ouro sobrevive
   no aro do brasao, que tem campo proprio.
   ===================================================================== */
.topo2--faixa { background: #e8eff9; border-bottom: 3px solid #12447e; }
.faixa__interno { background: #e8eff9; }
.faixa__nome { color: #12325a; }
.faixa__linha, .faixa__oab { color: rgb(18 50 90 / 0.74); }
.faixa__interno .botao--cheio { background: #12447e; color: #ffffff; }
.faixa__interno .botao--cheio:hover { background: #1351b4; color: #ffffff; }

/* =====================================================================
   ALTERNADOR DE TEMA
   O padrao e o claro; o escuro so por escolha, gravada em localStorage e
   carimbada em <html data-tema="escuro"> antes da primeira pintura.
   ===================================================================== */
.tema {
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 2.6rem;
  height: 2.6rem;
  padding: 0;
  border-radius: 4px;
  border: 1px solid currentColor;
  background: transparent;
  color: inherit;
  cursor: pointer;
}
.tema svg {
  width: 1.15rem; height: 1.15rem;
  fill: none; stroke: currentColor; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
}
.tema__lua { display: none; }
.tema:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
:root[data-tema="escuro"] .tema__sol { display: none; }
:root[data-tema="escuro"] .tema__lua { display: block; }

.topo2 .tema { color: #d8b76a; }
.topo2 .tema:hover { color: #ffffff; }
.topo2--faixa .tema { color: #1d3f6d; }
.topo2--faixa .tema:hover { color: #12447e; }

/* A faixa usa justify-content: space-between. Com tres filhos o alternador
   cairia no meio do vao; a margem automatica cola ele no botao de acao,
   como no cabecalho do sitio. Abaixo de 30rem o botao vira uma linha
   inteira e o alternador fica no alto, a direita da assinatura — o unico
   arranjo que cabe naquela largura. */
.topo2--faixa .tema { margin-left: auto; }

@media (max-width: 39.999rem) {
  .tema { width: 2.4rem; height: 2.4rem; }
}

/* =====================================================================
   A FAIXA DA LANDING E DA POLITICA NO DESKTOP  (26/08/2026)
   ---------------------------------------------------------------------
   Ate aqui a faixa ficava presa nas proporcoes do celular: o brasao com
   altura fixa de 2.5rem e o nome travado em 1.35rem pelo clamp. No
   desktop ela media 54px contra os 153px do cabecalho do sitio — 35% —,
   e lia-se como uma barra de celular esticada.

   O numero nao foi escolhido por gosto: o nome vai a 3.5rem, que e
   EXATAMENTE o do cabecalho do sitio. As duas pecas passam a ter a
   assinatura do mesmo tamanho, e a diferenca de altura que sobra (153
   contra 122) e so a fileira do menu, que a landing nao tem.
   ===================================================================== */
@media (min-width: 62rem) {
  .faixa__interno { padding-block: 0.7rem; gap: 0.45rem 1rem; }
  .faixa__marca { gap: 1rem; }
  .faixa__marca img { height: 6.25rem; }
  .faixa__nome { font-size: 3.5rem; }
  .faixa__linha { font-size: 0.9375rem; letter-spacing: 0.2em; }
}

/* ---------------------- os cabecalhos no tema escuro ---------------------- */
/* O sitio conserva o marinho aberto: ja e escuro, e assim o ouro fica
   intacto nos dois temas. A landing nao pode conservar o ceu de manha, e
   vira marinho, com os detalhes que eram marinho virando azul palido. */
:root[data-tema="escuro"] .topo2 { background: #1b3a63; }
:root[data-tema="escuro"] .topo2--faixa { background: #16294a; border-bottom-color: #82b2f0; }
:root[data-tema="escuro"] .faixa__interno { background: #16294a; }
:root[data-tema="escuro"] .faixa__nome { color: #eaf1fb; }
:root[data-tema="escuro"] .faixa__linha,
:root[data-tema="escuro"] .faixa__oab { color: rgb(234 241 251 / 0.74); }
:root[data-tema="escuro"] .faixa__interno .botao--cheio { background: #82b2f0; color: #08111d; }
:root[data-tema="escuro"] .faixa__interno .botao--cheio:hover { background: #a6cbfa; color: #08111d; }
:root[data-tema="escuro"] .topo2--faixa .tema { color: #b9cdea; }
:root[data-tema="escuro"] .topo2--faixa .tema:hover { color: #eaf1fb; }