/* =========================================================================
   Adv do Brasil — folha de estilo unica

   Direcao: dossie juridico. Fundo de papel quente em vez de branco puro,
   ancoras em petroleo profundo, e um sistema de fios de 1px no lugar de
   sombra. A numeracao em monoespaçada vem da linguagem de processo
   administrativo: item 01, item 02.

   Tipografia: Frank Ruhl Libre (titulo), Mulish (texto), IBM Plex Mono
   (rotulo e numero). As duas primeiras sao a identidade herdada do site
   anterior e foram mantidas de proposito.

   Contraste: o ouro rende 1,7:1 sobre papel e por isso NUNCA e cor de texto
   em fundo claro. Ele so preenche, contorna e escreve sobre petroleo, onde
   rende 6,3:1. O cinza de apoio e #5A666E (5,6:1), nao o #808A93 do tema
   antigo, que reprovava na WCAG AA.
   ========================================================================= */

/* --------------------------------------------------------------- fontes -- */
/* Fontes variaveis: um arquivo por familia cobre a faixa de peso inteira.
   Subset latin, que ja contem toda a acentuacao do portugues. */
@font-face {
  font-family: "Frank Ruhl Libre";
  src: url("/fontes/frank-ruhl-libre.woff2") format("woff2-variations");
  font-weight: 300 900; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2122;
}
@font-face {
  font-family: "Mulish";
  src: url("/fontes/mulish.woff2") format("woff2-variations");
  font-weight: 200 1000; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2122;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("/fontes/ibm-plex-mono-500.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2122;
}

/* --------------------------------------------------------------- tokens -- */
:root {
  --petroleo: #143F51;
  --petroleo-fundo: #0A2530;
  --petroleo-claro: #1D5468;
  --ouro: #E3C470;
  --ouro-forte: #D2B567;

  --papel: #FBFAF7;
  --papel-fundo: #F4F1EA;
  --branco: #FFFFFF;
  --tinta: #14212A;
  --tinta-suave: #5A666E;
  --fio: #E4DFD7;
  --fio-escuro: rgba(227, 196, 112, .22);

  --serif: "Frank Ruhl Libre", Georgia, "Times New Roman", serif;
  --sans: "Mulish", "Segoe UI", system-ui, -apple-system, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;

  --container: 1240px;
  --faixa: 38px;          /* altura da tira de contato   */
  --barra: 78px;          /* altura da barra de navegacao */
  --topo: calc(var(--faixa) + var(--barra));
  --raio: 3px;
  --curva: cubic-bezier(.22, .61, .36, 1);

  /* Grao sutil aplicado sobre as areas escuras, para o petroleo nao ficar
     chapado. Fica em ~3% de opacidade: perceptivel, nunca ruidoso. */
  --grao: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E");
}

/* ---------------------------------------------------------------- reset -- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.72;
  color: var(--tinta);
  background: var(--papel);
  padding-top: var(--topo);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img, picture, svg, video { display: block; max-width: 100%; height: auto; }

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 600;
  line-height: 1.14;
  letter-spacing: -.015em;
  color: var(--petroleo);
  text-wrap: balance;
}
h1 { font-size: clamp(2.15rem, 5vw, 3.6rem); }
h2 { font-size: clamp(1.6rem, 3.2vw, 2.4rem); }
h3 { font-size: clamp(1.2rem, 2vw, 1.5rem); }
h4 { font-size: 1.1rem; }

a { color: var(--petroleo); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--petroleo-claro); }

:where(a, button, input, textarea, select, summary):focus-visible {
  outline: 2px solid var(--ouro);
  outline-offset: 3px;
  border-radius: 2px;
}

.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: 28px; }

.pular-para-conteudo {
  position: absolute; left: -9999px; top: 0; z-index: 2000;
  background: var(--petroleo-fundo); color: var(--branco);
  padding: 14px 22px; font-weight: 700;
}
.pular-para-conteudo:focus { left: 0; color: var(--branco); }

/* --------------------------------------------------------------- rotulo -- */
/* Assinatura do sistema: monoespaçada em caixa alta, precedida de um fio
   curto em ouro. Marca cada secao como um item numerado de dossie. */
.rotulo {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--mono); font-size: .75rem; font-weight: 500;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--tinta-suave);
}
.rotulo::before {
  content: ""; width: 26px; height: 1px; background: var(--ouro-forte); flex: 0 0 auto;
}
.rotulo--ouro { color: var(--ouro); }
.rotulo--ouro::before { background: var(--ouro); }

/* -------------------------------------------------------------- botoes --- */
.botao {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 13px 26px;
  font-family: var(--sans); font-size: .9rem; font-weight: 700;
  letter-spacing: .02em; text-decoration: none; cursor: pointer;
  border: 1px solid transparent; border-radius: var(--raio);
  transition: background .25s var(--curva), color .25s var(--curva),
              border-color .25s var(--curva), transform .25s var(--curva);
}
.botao--ouro { background: var(--ouro); color: #23180B; }
.botao--ouro:hover { background: var(--ouro-forte); color: #23180B; transform: translateY(-2px); }
.botao--tinta { background: var(--petroleo); color: var(--branco); }
.botao--tinta:hover { background: var(--petroleo-fundo); color: var(--branco); transform: translateY(-2px); }
.botao--contorno { background: transparent; color: var(--petroleo); border-color: var(--fio); }
.botao--contorno:hover { background: var(--petroleo); color: var(--branco); border-color: var(--petroleo); }
.botao--fantasma { background: transparent; color: var(--petroleo); border-color: rgba(20, 63, 81, .28); }
.botao--fantasma:hover { background: rgba(20, 63, 81, .07); color: var(--petroleo); }
.botao--claro { background: transparent; color: var(--branco); border-color: rgba(255, 255, 255, .34); }
.botao--claro:hover { background: rgba(255, 255, 255, .1); color: var(--branco); border-color: rgba(255, 255, 255, .6); }
.botao--grande { padding: 17px 34px; font-size: .97rem; }

/* ============================================================ cabecalho == */
.topo {
  position: fixed; inset: 0 0 auto 0; z-index: 1000;
  background: var(--petroleo-fundo);
}

/* --- tira de contato --- */
.topo__faixa {
  height: var(--faixa);
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  overflow: hidden;
  transition: height .3s var(--curva), opacity .3s var(--curva);
}
.topo__faixa-interna {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  height: var(--faixa);
}
.topo__faixa p {
  font-family: var(--mono); font-size: .75rem; font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase;
  color: rgba(255, 255, 255, .62);
  /* Sem nowrap: o e-mail e longo e, se nao puder quebrar, ele define a
     largura do viewport e empurra o botao do menu para fora da tela. */
  min-width: 0; overflow: hidden; text-overflow: ellipsis;
}
.topo__faixa i { color: var(--ouro); font-style: normal; margin-inline: 8px; }
.topo__faixa a { color: rgba(255, 255, 255, .78); text-decoration: none; }
.topo__faixa a:hover { color: var(--ouro); }

/* --- barra principal --- */
.topo__barra {
  height: var(--barra);
  background: var(--petroleo);
  border-bottom: 1px solid var(--fio-escuro);
  transition: height .3s var(--curva), background .3s var(--curva);
}
.topo__barra-interna { display: flex; align-items: center; gap: 28px; height: 100%; }

.marca { flex: 0 0 auto; display: block; }
.marca img {
  width: 178px; height: 45px; object-fit: contain;
  transition: width .3s var(--curva), height .3s var(--curva);
}

/* Estado compacto: a tira de contato recolhe e a barra encurta, para devolver
   altura de tela na leitura de artigo longo. */
.topo.compacto { box-shadow: 0 10px 34px rgba(10, 37, 48, .18); }
.topo.compacto .topo__faixa { height: 0; opacity: 0; }
.topo.compacto .topo__barra { height: 62px; background: var(--petroleo-fundo); }
.topo.compacto .marca img { width: 148px; height: 37px; }

/* --- navegacao --- */
.menu { margin-left: auto; display: flex; align-items: center; gap: 30px; }
.menu__lista { display: flex; align-items: center; gap: 4px; list-style: none; padding: 0; }
.menu__item { position: relative; display: flex; align-items: center; }

.menu__link {
  position: relative;
  display: flex; align-items: center; min-height: 44px; padding: 0 12px;
  font-size: .8rem; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; text-decoration: none;
  color: rgba(255, 255, 255, .82);
  transition: color .25s var(--curva);
  white-space: nowrap;
}
/* Fio dourado que entra pela esquerda. Substitui o sublinhado padrao. */
.menu__link::after {
  content: ""; position: absolute; left: 12px; right: 12px; bottom: 8px;
  height: 1px; background: var(--ouro);
  transform: scaleX(0); transform-origin: left;
  transition: transform .3s var(--curva);
}
.menu__link:hover { color: var(--branco); }
.menu__link:hover::after,
.menu__link[aria-current="page"]::after { transform: scaleX(1); }
.menu__link[aria-current="page"] { color: var(--ouro); }

.menu__seta {
  display: grid; place-items: center;
  width: 26px; height: 44px; margin-left: -8px;
  background: none; border: 0; cursor: pointer;
  color: rgba(255, 255, 255, .6);
  transition: color .25s var(--curva), transform .3s var(--curva);
}
.menu__seta:hover { color: var(--ouro); }
.menu__item--pai:hover .menu__seta,
.menu__seta[aria-expanded="true"] { transform: rotate(180deg); color: var(--ouro); }

/* --- submenu --- */
.submenu {
  position: absolute; top: 100%; left: -8px; z-index: 20;
  width: 372px; padding: 10px;
  background: var(--branco);
  border: 1px solid var(--fio);
  border-top: 2px solid var(--ouro);
  box-shadow: 0 22px 54px rgba(10, 37, 48, .17);
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: translateY(10px);
  transition: opacity .25s var(--curva), transform .25s var(--curva), visibility .25s;
}
.menu__item--pai:hover .submenu,
.menu__item--pai:focus-within .submenu,
.submenu.aberto { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); }
.submenu ul { list-style: none; padding: 0; display: grid; gap: 2px; }
.submenu a {
  display: flex; gap: 14px; padding: 13px 14px;
  text-decoration: none; border-radius: var(--raio);
  transition: background .2s var(--curva);
}
.submenu a:hover, .submenu a[aria-current="page"] { background: var(--papel-fundo); }
.submenu__num {
  font-family: var(--mono); font-size: .75rem; font-weight: 500;
  color: var(--ouro-forte); padding-top: 3px;
}
.submenu__txt strong {
  display: block; font-family: var(--serif); font-size: 1.02rem;
  font-weight: 600; color: var(--petroleo); line-height: 1.3;
}
.submenu__txt small {
  display: block; margin-top: 3px; font-size: .82rem;
  color: var(--tinta-suave); line-height: 1.45;
}

.menu__cta { flex: 0 0 auto; }

.menu-botao {
  display: none; margin-left: auto;
  width: 48px; height: 48px; padding: 13px 11px;
  background: transparent; border: 0; cursor: pointer;
}
.menu-botao span {
  display: block; height: 2px; background: var(--branco);
  transition: transform .3s var(--curva), opacity .2s var(--curva);
}
.menu-botao span + span { margin-top: 6px; }
.menu-botao[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.menu-botao[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menu-botao[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* ================================================================= hero == */
.hero {
  position: relative;
  background: var(--petroleo-fundo);
  color: rgba(255, 255, 255, .84);
  overflow: hidden;
}
/* Atmosfera: um halo frio no canto superior direito e o grao por cima. */
.hero::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(760px 460px at 78% 8%, rgba(29, 84, 104, .85), transparent 62%),
    radial-gradient(520px 380px at 8% 96%, rgba(227, 196, 112, .1), transparent 66%);
}
.hero::after {
  content: ""; position: absolute; inset: 0;
  background-image: var(--grao); opacity: .035; pointer-events: none;
}
.hero > * { position: relative; z-index: 1; }

.hero__interno {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr);
  gap: clamp(36px, 5vw, 72px);
  align-items: center;
  padding-block: clamp(56px, 7vw, 104px);
}
.hero__texto { text-align: left; max-width: 40ch; }
.hero h1 { color: var(--branco); margin-top: 22px; }
.hero h1 em {
  font-style: normal; color: var(--ouro);
  /* Sublinhado fino que nao encosta na letra, como marcacao a caneta. */
  box-shadow: inset 0 -2px 0 rgba(227, 196, 112, .38);
}
/* Frase da marca. Fica abaixo do H1 para que o titulo possa carregar a
   palavra-chave sem abrir mao da linha que da personalidade a hero. */
.hero__frase {
  margin-top: 18px;
  font-family: var(--serif); font-weight: 500; font-style: italic;
  font-size: clamp(1.15rem, 2.3vw, 1.5rem); line-height: 1.4;
  color: var(--ouro);
}
.hero__linha {
  margin-top: 18px; font-size: 1.06rem; line-height: 1.68;
  color: rgba(255, 255, 255, .78);
}
.hero__acoes { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }

.hero__figura { position: relative; }
.hero__figura img {
  width: 100%; border-radius: var(--raio);
  filter: saturate(.92) contrast(1.04);
}
/* Moldura deslocada: um retangulo em fio dourado atras da foto. */
.hero__figura::before {
  content: ""; position: absolute; inset: 22px -22px -22px 22px;
  border: 1px solid rgba(227, 196, 112, .5); border-radius: var(--raio);
}
.hero__selo {
  position: absolute; left: -26px; bottom: 30px;
  display: grid; gap: 2px;
  padding: 18px 22px;
  background: var(--ouro); color: #23180B;
  border-radius: var(--raio);
  box-shadow: 0 18px 40px rgba(10, 37, 48, .34);
}
.hero__selo strong { font-family: var(--serif); font-size: 1.42rem; line-height: 1.1; }
.hero__selo span {
  font-family: var(--mono); font-size: .75rem; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase; opacity: .78;
}

/* Entrada escalonada, uma vez, no carregamento. */
@media (prefers-reduced-motion: no-preference) {
  .hero__texto > *, .hero__figura { animation: surgir .7s var(--curva) both; }
  .hero__texto > :nth-child(1) { animation-delay: .05s; }
  .hero__texto > :nth-child(2) { animation-delay: .13s; }
  .hero__texto > :nth-child(3) { animation-delay: .21s; }
  .hero__texto > :nth-child(4) { animation-delay: .29s; }
  .hero__texto > :nth-child(5) { animation-delay: .37s; }
  .hero__figura { animation-delay: .18s; }
}
@keyframes surgir { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

/* Barra de indicadores encostada na base da hero. */
.hero__indices {
  display: grid; grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid rgba(255, 255, 255, .13);
}
.hero__indice { padding: 24px 4px 30px; }
.hero__indice + .hero__indice { border-left: 1px solid rgba(255, 255, 255, .13); padding-left: 28px; }
.hero__indice strong {
  display: block; font-family: var(--serif); font-size: 1.5rem; color: var(--ouro); line-height: 1.2;
}
.hero__indice span {
  display: block; margin-top: 4px; font-size: .88rem; color: rgba(255, 255, 255, .66);
}

/* ============================================================== secoes === */
.secao { padding-block: clamp(58px, 6.6vw, 96px); }
.secao--papel { background: var(--papel-fundo); }
.secao--fio { border-top: 1px solid var(--fio); }
.secao--escura {
  position: relative; background: var(--petroleo); color: rgba(255, 255, 255, .82);
}
.secao--escura::after {
  content: ""; position: absolute; inset: 0;
  background-image: var(--grao); opacity: .03; pointer-events: none;
}
.secao--escura > * { position: relative; z-index: 1; }
.secao--escura h2, .secao--escura h3 { color: var(--branco); }

/* Cabecalho de secao: rotulo, titulo e um fio que atravessa ate a borda. */
.secao__topo { margin-bottom: clamp(34px, 4vw, 54px); max-width: 62ch; }
.secao__topo h1, .secao__topo h2 { margin-top: 14px; }
.secao__topo p { margin-top: 16px; color: var(--tinta-suave); font-size: 1.03rem; }
.secao--escura .secao__topo p { color: rgba(255, 255, 255, .72); }

.dupla { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(34px, 5vw, 72px); align-items: center; }
.dupla--invertida .dupla__figura { order: -1; }
.dupla__texto > * + * { margin-top: 18px; }
.dupla__texto p { color: var(--tinta-suave); }
.dupla__figura { position: relative; }
.dupla__figura img { border-radius: var(--raio); }
.dupla__figura::before {
  content: ""; position: absolute; inset: 18px -18px -18px 18px;
  border: 1px solid var(--fio); border-radius: var(--raio); z-index: -1;
}

/* =============================================================== cards === */
.grade { display: grid; gap: 1px; background: var(--fio); border: 1px solid var(--fio); }
/* Enquanto a grade nao entrou na tela, o fio de fundo nao pode aparecer
   sozinho no lugar dos cartoes. */
.js .grade.anima { background: transparent; border-color: transparent; }
.js .grade.anima.visivel { background: var(--fio); border-color: var(--fio); }
.grade--3 { grid-template-columns: repeat(3, 1fr); }
.grade--2 { grid-template-columns: repeat(2, 1fr); }

/* Cartoes colados por um fio de 1px, como celulas de uma tabela de processo.
   Sem sombra e sem borda solta: a grade inteira e um bloco. */
.card {
  display: flex; flex-direction: column; gap: 12px;
  padding: 34px 30px 32px;
  background: var(--branco);
  transition: background .3s var(--curva);
  position: relative;
}
.card::before {
  content: ""; position: absolute; inset: 0 auto auto 0;
  width: 100%; height: 2px; background: var(--ouro);
  transform: scaleX(0); transform-origin: left;
  transition: transform .35s var(--curva);
}
.card:hover::before { transform: scaleX(1); }
.card:hover { background: var(--papel); }
.card__num {
  font-family: var(--mono); font-size: .75rem; font-weight: 500;
  letter-spacing: .16em; color: var(--ouro-forte);
}
.card h2, .card h3 { font-size: 1.24rem; }
.card p { color: var(--tinta-suave); font-size: .97rem; }
.card__link {
  margin-top: auto; padding-top: 16px;
  font-family: var(--mono); font-size: .76rem; font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase;
  text-decoration: none; color: var(--petroleo);
  display: inline-flex; align-items: center; gap: 8px;
}
.card__link::after { content: "→"; transition: transform .25s var(--curva); }
.card:hover .card__link::after { transform: translateX(4px); }
.card__link:hover { color: var(--petroleo-claro); text-decoration: underline; }

.secao--escura .grade { background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .14); }
.secao--escura .card { background: var(--petroleo); }
.secao--escura .card:hover { background: var(--petroleo-claro); }
.secao--escura .card p { color: rgba(255, 255, 255, .74); }

/* ----------------------------------------------------------- passos ------ */
.passos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; list-style: none; padding: 0; }
.passo { position: relative; padding: 30px 24px 6px 0; }
.passo + .passo { padding-left: 28px; }
.passo::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: rgba(255, 255, 255, .18);
}
.passo::after {
  content: ""; position: absolute; top: -3px; left: 0; width: 7px; height: 7px;
  background: var(--ouro); border-radius: 50%;
}
.passo__num {
  font-family: var(--mono); font-size: .75rem; font-weight: 500;
  letter-spacing: .16em; color: var(--ouro);
}
.passo h3 { margin: 10px 0 8px; font-size: 1.14rem; }
.passo p { color: rgba(255, 255, 255, .72); font-size: .95rem; }

/* ---------------------------------------------------------- breadcrumb --- */
.trilha { padding-block: 16px; border-bottom: 1px solid var(--fio); background: var(--papel); }
.trilha ol {
  display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0;
  font-family: var(--mono); font-size: .76rem; letter-spacing: .06em;
}
.trilha li + li::before { content: "/"; margin-right: 8px; color: var(--ouro-forte); }
.trilha a { color: var(--tinta-suave); text-decoration: none; }
.trilha a:hover { color: var(--petroleo); text-decoration: underline; }
.trilha [aria-current="page"] { color: var(--petroleo); }

/* =============================================================== artigo == */
.leitura {
  position: fixed; top: 0; left: 0; z-index: 1200;
  height: 2px; width: 0; background: var(--ouro);
  transition: width .1s linear;
}

.artigo { padding-block: clamp(38px, 4.6vw, 62px); }

/* Abertura dividida: os dois blocos fecham na mesma linha de base. */
.artigo__abertura {
  display: grid; grid-template-columns: 1.05fr .95fr;
  gap: clamp(30px, 4vw, 58px); align-items: end;
  margin-bottom: clamp(34px, 4vw, 54px);
}
.artigo__abertura--sem-imagem { grid-template-columns: minmax(0, 74ch); }

/* Corpo em duas colunas: trilho fixo com o sumario e o texto ao lado. Sem
   isso o artigo vira uma coluna estreita sozinha no meio da tela, que deixa
   metade do desktop vazio. */
.artigo__grade {
  display: grid; grid-template-columns: 214px minmax(0, 1fr);
  gap: clamp(30px, 4.5vw, 64px); align-items: start;
}
.artigo__trilho { position: sticky; top: calc(var(--topo) + 26px); }
.artigo__trilho[hidden] { display: none; }
.artigo__trilho-titulo {
  font-family: var(--mono); font-size: .75rem; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase; color: var(--tinta-suave);
  padding-bottom: 12px; border-bottom: 1px solid var(--fio); margin-bottom: 14px;
}
.sumario { list-style: none; padding: 0; display: grid; gap: 2px; counter-reset: item; }
.sumario a {
  display: grid; grid-template-columns: 26px 1fr; gap: 4px;
  padding: 8px 0; font-size: .92rem; line-height: 1.4;
  color: var(--tinta-suave); text-decoration: none;
}
.sumario a::before {
  counter-increment: item; content: counter(item, decimal-leading-zero);
  font-family: var(--mono); font-size: .72rem; color: var(--ouro-forte);
  padding-top: 2px;
}
.sumario a:hover { color: var(--petroleo); }
.sumario a.ativo { color: var(--petroleo); font-weight: 700; }

.artigo__cabecalho { max-width: 74ch; }
.artigo__categoria {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--mono); font-size: .75rem; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--petroleo); text-decoration: none;
}
.artigo__categoria::before { content: ""; width: 22px; height: 1px; background: var(--ouro-forte); }
.artigo__categoria:hover { color: var(--petroleo-claro); }
.artigo__cabecalho h1 { margin-top: 18px; }

/* Linha fina: entre o H1 e a linha de data. Menor que o titulo, maior que o
   corpo, tinta mais fraca, ainda acima do minimo de contraste. */
.artigo__linha-fina {
  margin-top: 18px;
  font-family: var(--serif); font-weight: 500;
  font-size: clamp(1.12rem, 2.1vw, 1.32rem); line-height: 1.48;
  color: var(--tinta-suave);
}
.artigo__meta {
  display: flex; flex-wrap: wrap; gap: 6px 22px;
  margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--fio);
  font-family: var(--mono); font-size: .78rem; letter-spacing: .05em;
  color: var(--tinta-suave);
}
.artigo__capa img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--raio); }

.artigo__corpo { max-width: 74ch; font-size: 1.05rem; }
.artigo__corpo > * + * { margin-top: 24px; }
.artigo__corpo p, .artigo__corpo li { text-align: left; }
.artigo__corpo h2 {
  margin-top: 52px; padding-top: 22px; border-top: 1px solid var(--fio);
  font-size: clamp(1.4rem, 2.6vw, 1.85rem);
}
.artigo__corpo h3 { margin-top: 36px; }
.artigo__corpo ul, .artigo__corpo ol { padding-left: 22px; }
.artigo__corpo li + li { margin-top: 10px; }
.artigo__corpo li::marker { color: var(--ouro-forte); }
.artigo__corpo a { color: var(--petroleo); font-weight: 600; }
.artigo__corpo blockquote {
  padding: 6px 0 6px 28px; border-left: 2px solid var(--ouro);
  font-family: var(--serif); font-size: 1.18rem; color: var(--petroleo);
}
.artigo__corpo img, .fig-artigo img { width: 100%; border-radius: var(--raio); }
.fig-artigo figcaption {
  margin-top: 10px; font-family: var(--mono); font-size: .78rem;
  color: var(--tinta-suave); text-align: left;
}
.cta-artigo { text-align: left; }
.cta-artigo a {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 14px 30px;
  background: var(--petroleo); color: var(--branco);
  border-radius: var(--raio); font-size: .88rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; text-decoration: none;
  transition: background .25s var(--curva);
}
.cta-artigo a:hover { background: var(--ouro); color: #23180B; }

/* ------------------------------------------------------- dados de contato - */
.dados { display: grid; gap: 22px; margin-top: 30px; }
.dados__item dt {
  font-family: var(--mono); font-size: .75rem; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase; color: var(--tinta-suave);
  margin-bottom: 4px;
}
.dados__item dd { margin: 0; font-size: 1.05rem; }
.dados__item address { font-style: normal; line-height: 1.7; }
/* Telefone e e-mail sao os alvos mais tocados desta pagina. */
.dados__item dd > a, .dados__item address a {
  display: inline-flex; align-items: center; min-height: 44px;
  font-weight: 600;
}
.dados__cta { margin-top: 26px; }

/* ------------------------------------------------------------------ faq -- */
.faq { max-width: 74ch; border-top: 1px solid var(--fio); }
.faq__item { border-bottom: 1px solid var(--fio); }
.faq__item summary {
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  padding: 22px 0; cursor: pointer; list-style: none;
}
/* A pergunta e um h3 de verdade dentro do summary, que o HTML permite.
   Sem isso o texto sai do outline de headings e o leitor de tela perde a
   navegacao por titulo dentro do FAQ. */
.faq__pergunta {
  font-family: var(--serif); font-size: 1.13rem; font-weight: 600;
  line-height: 1.35; color: var(--petroleo); text-align: left;
  margin: 0;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
  content: ""; flex: 0 0 auto; width: 13px; height: 13px;
  background:
    linear-gradient(var(--petroleo), var(--petroleo)) center/13px 1px no-repeat,
    linear-gradient(var(--petroleo), var(--petroleo)) center/1px 13px no-repeat;
  transition: transform .3s var(--curva);
}
.faq__item[open] summary::after { transform: rotate(45deg); }
.faq__item[open] .faq__pergunta { color: var(--petroleo-claro); }
.faq__resposta { padding: 0 0 24px; color: var(--tinta-suave); text-align: left; max-width: 66ch; }
.faq__resposta > * + * { margin-top: 12px; }

/* ------------------------------------------------------------- tabela ---- */
/* Acima de 640px: so fios horizontais, sem grade de planilha. */
.tabwrap { overflow-x: auto; border: 1px solid var(--fio); border-radius: var(--raio); }
.tab { width: 100%; border-collapse: collapse; font-size: .96rem; }
.tab caption { padding: 14px 18px; text-align: left; color: var(--tinta-suave); font-size: .85rem; }
.tab thead th {
  background: var(--petroleo); color: var(--branco);
  padding: 14px 18px; text-align: left; border: 0;
  font-family: var(--mono); font-size: .75rem; font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase;
}
.tab tbody th, .tab tbody td {
  padding: 15px 18px; text-align: left; vertical-align: top;
  border: 0; border-bottom: 1px solid var(--fio); background: transparent;
}
.tab tbody th { font-weight: 700; color: var(--petroleo); }
.tab tbody tr:last-child th, .tab tbody tr:last-child td { border-bottom: 0; }

/* ============================================================ lista blog = */
.artigos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 34px 30px; }
.artigo-card { display: flex; flex-direction: column; }
.artigo-card__capa {
  position: relative; aspect-ratio: 3 / 2; overflow: hidden;
  background: var(--papel-fundo); border-radius: var(--raio);
}
.artigo-card__capa img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .6s var(--curva);
}
.artigo-card:hover .artigo-card__capa img { transform: scale(1.045); }
.artigo-card__corpo { display: flex; flex-direction: column; gap: 10px; padding-top: 18px; }
.artigo-card__categoria {
  align-self: flex-start;
  font-family: var(--mono); font-size: .75rem; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--tinta-suave); text-decoration: none;
}
.artigo-card__categoria:hover { color: var(--petroleo); }
.artigo-card h2, .artigo-card h3 { font-size: 1.2rem; line-height: 1.28; }
.artigo-card h2 a, .artigo-card h3 a {
  text-decoration: none;
  background-image: linear-gradient(var(--ouro), var(--ouro));
  background-size: 0 2px; background-position: 0 100%; background-repeat: no-repeat;
  transition: background-size .35s var(--curva);
}
.artigo-card:hover h2 a, .artigo-card:hover h3 a { background-size: 100% 2px; }
.artigo-card p { font-size: .94rem; color: var(--tinta-suave); }
.artigo-card__meta {
  margin-top: auto; padding-top: 12px;
  font-family: var(--mono); font-size: .7rem; letter-spacing: .05em;
  color: var(--tinta-suave);
}

.paginacao { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 8px; margin-top: 56px; }
.paginacao a, .paginacao span {
  min-width: 48px; min-height: 48px; padding: 12px 16px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--fio); border-radius: var(--raio);
  font-family: var(--mono); font-size: .85rem; text-decoration: none;
  transition: background .2s var(--curva), border-color .2s var(--curva);
}
.paginacao a:hover { background: var(--branco); border-color: var(--petroleo); }
.paginacao [aria-current="page"] { background: var(--petroleo); color: var(--branco); border-color: var(--petroleo); }

.nuvem { display: flex; flex-wrap: wrap; gap: 8px; }
.nuvem a {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 18px; min-height: 44px;
  background: var(--branco); border: 1px solid var(--fio); border-radius: var(--raio);
  font-size: .88rem; font-weight: 600; text-decoration: none;
  transition: background .2s var(--curva), border-color .2s var(--curva), color .2s var(--curva);
}
.nuvem a:hover { background: var(--petroleo); color: var(--branco); border-color: var(--petroleo); }
.nuvem span { font-family: var(--mono); font-size: .75rem; color: var(--ouro-forte); }
.nuvem a:hover span { color: var(--ouro); }

/* ============================================================== chamada == */
.chamada {
  position: relative; background: var(--petroleo-fundo); color: var(--branco);
  padding-block: clamp(48px, 5.6vw, 76px);
}
.chamada::after {
  content: ""; position: absolute; inset: 0;
  background-image: var(--grao); opacity: .035; pointer-events: none;
}
.chamada__interna {
  position: relative; z-index: 1;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 34px;
}
.chamada__texto { max-width: 58ch; }
.chamada h2 { color: var(--branco); margin-top: 14px; }
.chamada p { margin-top: 12px; color: rgba(255, 255, 255, .74); }
.chamada__acao { display: grid; gap: 12px; justify-items: start; }
.chamada__horario {
  font-family: var(--mono); font-size: .75rem; letter-spacing: .1em;
  text-transform: uppercase; color: rgba(255, 255, 255, .5) !important;
  margin-top: 0 !important;
}

/* =============================================================== rodape == */
.rodape { background: var(--petroleo); color: rgba(255, 255, 255, .76); padding-top: clamp(50px, 6vw, 78px); }
.rodape__grade {
  display: grid; grid-template-columns: 1.7fr 1fr 1fr 1.5fr;
  gap: 44px; text-align: left;
  padding-bottom: clamp(38px, 4vw, 56px);
}
.rodape__logo { width: 190px; height: 48px; object-fit: contain; margin-bottom: 20px; }
.rodape__bloco h2 {
  font-family: var(--mono); font-size: .75rem; font-weight: 500;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--ouro); margin-bottom: 18px;
}
.rodape__bloco > * + * { margin-top: 14px; }
.rodape__bloco p, .rodape address { font-size: .93rem; }
.rodape__bloco ul { list-style: none; padding: 0; display: grid; gap: 11px; }
.rodape a { color: rgba(255, 255, 255, .8); font-size: .93rem; text-decoration: none; }
.rodape a:hover { color: var(--ouro); text-decoration: underline; }
.rodape address { font-style: normal; line-height: 1.75; }
.rodape__redes { display: flex !important; gap: 20px; }
.rodape__horario span { color: rgba(255, 255, 255, .52); }
.rodape__credito a { color: rgba(255, 255, 255, .8); }
.rodape__credito a:hover { color: var(--ouro); }
.rodape__base {
  display: flex; flex-wrap: wrap; gap: 10px 26px; justify-content: space-between;
  padding-block: 22px; border-top: 1px solid rgba(255, 255, 255, .13);
  font-family: var(--mono); font-size: .75rem; letter-spacing: .05em;
  color: rgba(255, 255, 255, .6);
}

/* -------------------------------------------------------- flutuante/LGPD - */
.whatsapp-flutuante {
  position: fixed; right: 22px; bottom: 22px; z-index: 900;
  display: grid; place-items: center; width: 56px; height: 56px;
  background: #1FA855; color: var(--branco); border-radius: 50%;
  box-shadow: 0 10px 26px rgba(10, 37, 48, .3);
  transition: transform .25s var(--curva), background .25s var(--curva);
}
.whatsapp-flutuante:hover { transform: translateY(-3px); background: #17924a; color: var(--branco); }

.cookies {
  position: fixed; inset: auto 18px 18px 18px; z-index: 1100;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 20px; max-width: 1180px; margin-inline: auto;
  padding: 22px 26px;
  background: var(--branco);
  border: 1px solid var(--fio); border-top: 2px solid var(--ouro);
  border-radius: var(--raio);
  box-shadow: 0 22px 54px rgba(10, 37, 48, .2);
}
.cookies[hidden] { display: none; }
.cookies__texto { flex: 1 1 420px; }
.cookies__texto p { margin-top: 8px; font-size: .89rem; color: var(--tinta-suave); }
.cookies__acoes { display: flex; flex-wrap: wrap; gap: 10px; }
.cookies.saindo { opacity: 0; transform: translateY(16px); transition: opacity .3s, transform .3s; }

/* --------------------------------------------------------------- erro ---- */
.erro { padding-block: clamp(64px, 9vw, 118px); max-width: 62ch; }
.erro__codigo {
  font-family: var(--serif); font-size: clamp(5.5rem, 17vw, 11rem);
  line-height: .9; color: var(--petroleo); opacity: .13;
}
.erro h1 { margin-top: -10px; }
.erro p { margin: 18px 0 32px; max-width: 52ch; color: var(--tinta-suave); }
.erro__acoes { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 12px; }

/* --------------------------------------------------------------- prosa --- */
.prosa { max-width: 74ch; }
.prosa > * + * { margin-top: 20px; }
.prosa h2 { margin-top: 46px; padding-top: 20px; border-top: 1px solid var(--fio); }
.prosa h3 { margin-top: 30px; }
.prosa ul, .prosa ol { padding-left: 22px; }
.prosa li + li { margin-top: 8px; }
.prosa li::marker { color: var(--ouro-forte); }
.prosa p, .prosa li { text-align: left; }

/* ------------------------------------------------------------ animacao --- */
/* So esconde quem tem JS para revelar depois. Sem a classe .js no <html>,
   o conteudo nasce visivel: script que nao carrega nao pode apagar a pagina. */
.js .anima { opacity: 0; transform: translateY(20px); transition: opacity .55s var(--curva), transform .55s var(--curva); }
.js .anima.visivel { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .anima { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ===================================================== 1080px e abaixo === */
@media (max-width: 1080px) {
  :root { --barra: 70px; }
  .menu-botao { display: block; }

  .menu {
    position: fixed; inset: var(--topo) 0 auto 0;
    flex-direction: column; align-items: stretch; gap: 0;
    max-height: calc(100dvh - var(--topo));
    padding: 10px 28px 30px;
    background: var(--petroleo-fundo);
    border-bottom: 1px solid var(--fio-escuro);
    overflow-y: auto;
    opacity: 0; visibility: hidden; pointer-events: none;
    transform: translateY(-10px);
    transition: opacity .28s var(--curva), transform .28s var(--curva), visibility .28s;
  }
  .menu.aberto { opacity: 1; visibility: visible; pointer-events: auto; transform: none; }
  .menu__lista { flex-direction: column; align-items: stretch; gap: 0; }
  .menu__item { flex-wrap: wrap; }
  .menu__item + .menu__item { border-top: 1px solid rgba(255, 255, 255, .1); }
  .menu__link { flex: 1; min-height: 54px; padding: 0; font-size: .88rem; }
  .menu__link::after { display: none; }
  .menu__seta { width: 54px; height: 54px; margin: 0; }

  /* No toque nao existe hover: o submenu abre pelo botao, nunca por hover. */
  .submenu {
    position: static; width: 100%; padding: 0 0 12px;
    background: transparent; border: 0; box-shadow: none;
    transform: none; transition: none;
    display: none; opacity: 1; visibility: visible; pointer-events: auto;
  }
  .menu__item--pai:hover .submenu, .menu__item--pai:focus-within .submenu { display: none; }
  .submenu.aberto { display: block; }
  .submenu a { padding: 12px 0 12px 16px; border-left: 1px solid var(--fio-escuro); border-radius: 0; }
  .submenu a:hover, .submenu a[aria-current="page"] { background: rgba(255, 255, 255, .05); }
  .submenu__txt strong { color: var(--branco); font-size: .98rem; }
  .submenu__txt small { color: rgba(255, 255, 255, .6); }
  .menu__cta { margin-top: 20px; }

  .topo.compacto .topo__faixa { height: var(--faixa); opacity: 1; }
  .topo.compacto .topo__barra { height: var(--barra); }
  .topo.compacto .marca img { width: 178px; height: 45px; }

  .grade--3 { grid-template-columns: repeat(2, 1fr); }
  .artigos { grid-template-columns: repeat(2, 1fr); }
  .passos { grid-template-columns: repeat(2, 1fr); gap: 0 28px; }
  .rodape__grade { grid-template-columns: repeat(2, 1fr); }
}

/* ===================================================== 1000px e abaixo === */
@media (max-width: 1000px) {
  /* O trilho do sumario nao cabe: some, e o artigo volta a uma coluna. */
  .artigo__grade { grid-template-columns: 1fr; }
  .artigo__trilho { display: none; }
  .artigo__abertura { grid-template-columns: 1fr; }
  .artigo__abertura--sem-imagem { grid-template-columns: 1fr; }
}

/* ====================================================== 860px e abaixo === */
@media (max-width: 860px) {
  .topo__faixa-interna { justify-content: flex-start; }
  .topo__praca { display: none; }
  .topo__contatos { white-space: nowrap; }

  .hero__interno { grid-template-columns: 1fr; gap: 40px; }
  .hero__texto { max-width: none; }
  .hero__linha { max-width: 56ch; }
  /* A imagem vem DEPOIS do texto. Jogar a figura para o topo empurra o H1
     para fora da primeira tela: o visitante abre o site e nao le o que o
     escritorio faz, so ve uma foto. */
  .hero__figura { order: 0; margin-top: 6px; }
  /* A moldura deslocada nao le em tela estreita e ainda arrisca empurrar
     a largura do documento. Sai no mobile. */
  .hero__figura::before { display: none; }
  /* Selo compacto: em bloco ele ocupava uma tela inteira sozinho. */
  .hero__selo {
    position: static; display: inline-grid; margin-top: 18px;
    justify-items: start; padding: 12px 20px;
  }
  .hero__indices { grid-template-columns: 1fr; }
  .hero__indice + .hero__indice { border-left: 0; border-top: 1px solid rgba(255, 255, 255, .13); padding-left: 0; }
  .hero__indice { padding: 20px 0; }

  .dupla { grid-template-columns: 1fr; }
  .dupla--invertida .dupla__figura, .dupla__figura { order: -1; }
  .dupla__figura::before { display: none; }

  /* Nada centralizado, em nenhuma largura. Texto centralizado misturado
     com texto alinhado passa sensacao de desorganizacao. */

  .grade--3, .grade--2 { grid-template-columns: 1fr; }
  .artigos { grid-template-columns: 1fr; }
  .passos { grid-template-columns: 1fr; }
  .passo, .passo + .passo { padding: 26px 0 8px; }

  .chamada__interna { flex-direction: column; align-items: flex-start; }
  .chamada__acao { justify-items: start; }

  .rodape__grade { grid-template-columns: 1fr; gap: 34px; }

  .cookies { inset: auto 12px 12px 12px; padding: 20px; }
  .cookies__acoes { width: 100%; }
  .cookies__acoes .botao { flex: 1 1 auto; }
}

/* ====================================================== 640px e abaixo === */
/* Trilha completa nao cabe em tela estreita: ela quebrava em tres linhas e
   deixava o separador solto. Fica so o nivel acima, com seta de volta. O
   nome da pagina atual nao se perde: e o H1 logo abaixo. O BreadcrumbList
   do JSON-LD continua completo, entao o Google enxerga o caminho inteiro. */
@media (max-width: 640px) {
  .trilha ol { display: block; }
  /* Oculta so visualmente: com display:none o caminho sumiria tambem do
     leitor de tela, e ali ele e navegacao util. */
  .trilha li {
    position: absolute; width: 1px; height: 1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  }
  .trilha li:nth-last-child(2) {
    position: static; width: auto; height: auto;
    overflow: visible; clip: auto; white-space: normal; display: block;
  }
  .trilha li:nth-last-child(2)::before {
    /* Caractere literal, nao escape CSS: "90" foi lido como  seguido
       de "90" e saiu um quadrado vazio. A pilha de fonte tambem muda porque
       a seta esta fora do unicode-range declarado para a IBM Plex Mono. */
    content: "←";
    font-family: ui-monospace, "Segoe UI Symbol", Consolas, monospace;
    margin-right: 8px; color: var(--ouro-forte);
  }
  .trilha ol { gap: 0; }
}

/* Tabela vira cartao. Zerar borda e fundo herdados ANTES de reconstruir,
   senao sobra risco vertical cortando o cartao.                            */
@media (max-width: 640px) {
  .tabwrap { overflow: visible; border: 0; background: transparent; border-radius: 0; }
  .tab { min-width: 0; font-size: 1rem; }
  .tab caption { display: none; }
  .tab thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .tab, .tab tbody, .tab tr, .tab th, .tab td { display: block; width: auto; }
  .tab tbody tr {
    background: var(--branco); border: 1px solid var(--fio);
    border-radius: var(--raio); padding: 2px 20px 18px; margin-bottom: 14px;
  }
  .tab tbody th, .tab tbody td { border: 0; background: transparent; }
  .tab tbody th {
    border-bottom: 1px solid var(--fio);
    padding: 16px 0 13px; font-size: 1.04rem;
  }
  .tab tbody td { padding: 15px 0 0; text-align: left; line-height: 1.56; }
  .tab tbody td::before {
    content: attr(data-rotulo); display: block; margin-bottom: 2px;
    font-family: var(--mono); font-weight: 500; font-size: .75rem;
    letter-spacing: .12em; text-transform: uppercase; color: var(--ouro-forte);
  }
  .tab tbody tr:last-child td { border-bottom: 0; }
}

/* =============================================== alvos de toque (mobile) = */
/* Abaixo de 860px tudo que se toca precisa de 44px de altura util. Rotulo
   pequeno vira link de dificil acerto, e o telefone da tira e justamente o
   que mais se toca no site inteiro. */
@media (max-width: 860px) {
  .marca { display: flex; align-items: center; min-height: 46px; }
  .topo__faixa a {
    display: inline-flex; align-items: center;
    min-height: 42px; padding-inline: 6px;
  }
  .card__link { min-height: 44px; align-items: center; }
  .artigo__categoria, .artigo-card__categoria { padding-block: 11px; }
  /* Titulo do card e o link principal da listagem: precisa de area util.
     Breadcrumb e telefone do rodape idem, sao toque frequente. */
  .artigo-card h2 a, .artigo-card h3 a { display: inline-block; padding-block: 9px; }
  /* Alvo de toque por padding, nao por inline-flex: caixa atomica nao
     quebra junto com o separador e deixa a barra orfa numa linha so. */
  .trilha a, .trilha [aria-current="page"] { padding-block: 7px; }
  .rodape__bloco p a { display: inline-flex; align-items: center; min-height: 40px; }
  /* O mapa do site nao e texto corrido: e uma lista onde cada item existe
     para ser tocado. Vale a area cheia, ao contrario dos links de artigo. */
  .prosa li > a { display: inline-flex; align-items: center; min-height: 40px; }
  .nuvem a, .rodape__bloco ul a, .rodape__redes a {
    min-height: 44px; display: inline-flex; align-items: center;
  }
}

/* ====================================================== 480px e abaixo === */
@media (max-width: 560px) {
  /* So o telefone na tira. O e-mail continua no rodape e no /contato/. */
  .topo__contatos i, .topo__contatos a[href^="mailto"] { display: none; }
}

@media (max-width: 480px) {
  :root { --faixa: 44px; --barra: 64px; }
  body { font-size: 16.5px; }
  .container { padding-inline: 18px; }
  .marca img, .topo.compacto .marca img { width: 146px; height: 37px; }
  .topo__faixa p { font-size: .72rem; letter-spacing: .06em; }
  .menu { inset: var(--topo) 0 auto 0; padding-inline: 18px; }
  /* Botao de largura cheia centraliza o rotulo por dentro e devolve a
     linha de texto centralizada que o resto do layout evita. Largura
     natural, encostado a esquerda como todo o resto. */
  .botao { width: auto; }
  .whatsapp-flutuante { right: 14px; bottom: 14px; width: 52px; height: 52px; }
}