/* ==========================================================================
   rotaGov — landing page
   ==========================================================================

   Os tokens de cor e as duas famílias tipográficas vêm do próprio sistema
   (`buslite-frontend/docs/design/tokens.json` e `src/shared/constants/colors.ts`).
   O que é novo aqui está marcado como tal.

   Três regras de cor, e elas valem em toda a folha:

   - **azul** é estrutura: barra, cabeçalho, fundo institucional, texto de destaque;
   - **verde** é ação e confirmação, e nada mais. Gastá-lo em decoração apaga o que
     ele significa dentro do produto;
   - **amarelo** é atenção e "ainda não existe". Só isso.

   E uma regra de contraste que não é opcional: texto sobre o verde da marca é
   `--verde-tinta`, nunca branco. Branco sobre #00b86b dá 2,6:1 e reprova o AA;
   o verde escuro dá cerca de 6:1. É por isso que o `:hover` do botão verde
   **clareia** o fundo em vez de escurecer — escurecer para #00904f só ficaria
   legível trocando o texto para branco, que é exatamente a troca proibida.
   ========================================================================== */

/* ---------- fontes próprias, servidas daqui ----------
   Auto-hospedadas em vez de Google Fonts por coerência com a política da página:
   ela afirma não entregar dado nenhum de quem visita a terceiros, e um <link> para
   fonts.googleapis.com entregaria o IP de cada visitante. Subconjunto latino basta —
   todo acento do português cabe nele. */
@font-face {
  font-family: 'Barlow Semi Condensed';
  src: url('fontes/barlow-sc-700.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Barlow Semi Condensed';
  src: url('fontes/barlow-sc-600.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Sans';
  src: url('fontes/plex-sans-var.woff2') format('woff2');
  font-weight: 100 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Mono';
  src: url('fontes/plex-mono-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Mono';
  src: url('fontes/plex-mono-500.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}

:root {
  color-scheme: light;

  --azul: #12507e;
  --azul-escuro: #0d3d61;
  --azul-noite: #09283f; /* herói, faixa de contato */
  --azul-rodape: #071d2e;
  --azul-claro: #dce7f1;

  /* novos: a rampa de texto sobre o azul-noite. Três degraus, e cada um tem um
     trabalho — título, parágrafo, e a linha miúda de apoio. Sem os três, ou o
     parágrafo grita junto com o título ou a linha miúda some. */
  --sobre-azul: #e7eef4;
  --sobre-azul2: #c6d6e2;
  --sobre-azul3: #7fa3bc;

  --verde: #00b86b;
  --verde-claro: #00c975; /* só no :hover — ver a nota de contraste no topo */
  --verde-tinta: #06301c; /* onAccent — o texto sobre o verde, nunca branco */
  --verde-suave: #c8f2dc;
  --verde-selo: #0e6e3a;

  --amarelo: #e3b600;
  --amarelo-suave: #fdf1b8;
  --amarelo-tinta: #7a5f00;

  --papel: #f1f4f6;
  --superficie: #ffffff;
  --superficie2: #eff2f5;
  --tinta: #0f1a24;
  --tinta2: #5e6b78;
  --tinta3: #9aa3ad;
  --tinta-azul: #33495c; /* texto de corpo sobre o azul-claro */
  --regua: #e5e8ec;
  --regua-forte: #cbd5df;

  --display: 'Barlow Semi Condensed', 'Bahnschrift', 'DIN Alternate', 'Segoe UI', sans-serif;
  --corpo: 'IBM Plex Sans', 'Segoe UI', -apple-system, BlinkMacSystemFont, Roboto, Arial, sans-serif;
  --mono: 'IBM Plex Mono', 'Cascadia Mono', Consolas, monospace;

  --largura: 1180px;
  --raio: 18px;
  --raio-m: 14px;
  --raio-p: 10px;

  --sombra-baixa: 0 1px 2px rgba(15, 26, 36, .05), 0 10px 28px -18px rgba(15, 26, 36, .3);
  --sombra-media: 0 2px 4px rgba(15, 26, 36, .06), 0 22px 48px -22px rgba(15, 26, 36, .28);
  --sombra-ficha: 0 1px 2px rgba(15, 26, 36, .05), 0 18px 40px -18px rgba(9, 40, 63, .55);

  --curva: cubic-bezier(.22, .61, .36, 1);
}

/* ---------- base ---------- */
* { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 88px; }

body {
  margin: 0;
  background: var(--superficie);
  color: var(--tinta);
  font-family: var(--corpo);
  font-size: 17px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* A vinheta do herói sangra para fora da coluna de propósito. Sem isto ela
     empurra a página e cria rolagem horizontal no celular. */
  overflow-x: hidden;
}

img, svg { max-width: 100%; display: block; }
/* `height: auto` não é detalhe: os atributos width/height do HTML estão lá para
   reservar espaço antes do download e evitar o salto de layout, mas continuam
   valendo como dica de apresentação — sem isto a imagem estica na vertical. */
img { height: auto; }

h1, h2, h3 { font-family: var(--display); font-weight: 600; line-height: 1.08; margin: 0; text-wrap: balance; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
a { color: inherit; }
input, button { font: inherit; color: inherit; }

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

.pular {
  position: absolute; left: 16px; top: -60px; z-index: 60;
  background: var(--verde); color: var(--verde-tinta);
  padding: 10px 18px; border-radius: 0 0 var(--raio-p) var(--raio-p);
  font-weight: 600; text-decoration: none;
  transition: top .18s var(--curva);
}
.pular:focus { top: 0; }

.centro {
  width: 100%; max-width: var(--largura);
  margin-inline: auto;
  padding-inline: 24px;
}

/* ---------- tipografia de seção ---------- */
.olho {
  font-family: var(--mono);
  font-size: 11.5px; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase;
  margin-bottom: 8px;
}
.olho--claro { color: var(--azul); }
.olho--sobre-azul { color: var(--sobre-azul3); }

.titulo-secao { font-size: clamp(30px, 3.8vw, 42px); letter-spacing: -.006em; max-width: 24ch; }
.titulo-secao--largo { max-width: 26ch; }
.titulo-secao--medio { font-size: clamp(28px, 3.4vw, 38px); max-width: 22ch; }
.titulo-secao--claro { font-size: clamp(30px, 3.8vw, 44px); color: #fff; max-width: 20ch; }

.apoio { margin-top: 14px; max-width: 62ch; color: var(--tinta2); }
.apoio--escuro { color: var(--tinta-azul); }
.apoio--claro { color: var(--sobre-azul2); }

.faixa { padding-block: 88px; }
.faixa--papel { background: var(--papel); }
.faixa--claro { background: var(--azul-claro); }
.faixa--branca { background: var(--superficie); border-top: 1px solid var(--regua); }
.faixa--dupla {
  background: var(--superficie);
  border-block: 1px solid var(--regua);
}

.rodape-secao { margin-top: 18px; max-width: 70ch; font-size: 14.5px; color: var(--tinta3); }

/* ---------- botões ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 10px;
  font-weight: 600; font-size: 16.5px;
  padding: 15px 26px; border-radius: var(--raio-p);
  text-decoration: none; border: none;
  cursor: pointer;
  transition: background-color .18s var(--curva), transform .18s var(--curva), box-shadow .18s var(--curva);
}
.btn--acao { background: var(--verde); color: var(--verde-tinta); box-shadow: var(--sombra-baixa); }
.btn--acao:hover { background: var(--verde-claro); transform: translateY(-2px); box-shadow: var(--sombra-media); }
.btn--claro { color: var(--sobre-azul); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .34); }
.btn--claro:hover { color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .7); transform: translateY(-2px); }
.btn--pequeno { font-size: 15px; padding: 11px 20px; }
.btn--grande { font-size: 17.5px; padding: 17px 28px; border-radius: 12px; }

.zap { width: 20px; height: 20px; flex: none; }
.btn--pequeno .zap { width: 18px; height: 18px; }
.btn--grande .zap { width: 22px; height: 22px; }

.acoes { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }

/* O tique verde é um <path> sem atributo de pintura: quem pinta é esta regra, e
   por isso ele herda o mesmo verde em todos os lugares em que aparece. */
.tique {
  width: 19px; height: 19px; flex: none;
  fill: none; stroke: var(--verde);
  stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round;
}
.tique--escuro { width: 15px; height: 15px; stroke: #00904f; }

/* ---------- barra ---------- */
.barra {
  position: sticky; top: 0; z-index: 50;
  background: rgba(9, 40, 63, .94);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255, 255, 255, .14);
}
.barra__centro {
  padding-block: 14px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
}

.marca { display: flex; align-items: center; gap: 11px; text-decoration: none; flex: none; }
.marca__sinete { width: 34px; height: 34px; flex: none; }
.marca__texto { display: flex; flex-direction: column; line-height: 1; }
.marca__nome {
  font-family: var(--display); font-weight: 700; font-size: 25px;
  color: #fff; letter-spacing: .01em;
}
.marca__assinatura {
  font-family: var(--mono); font-weight: 400; font-size: 10.5px;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--sobre-azul3); margin-top: 3px;
}

.menu { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 26px; justify-content: flex-end; }
.menu a { font-size: 15px; color: var(--sobre-azul2); text-decoration: none; white-space: nowrap; }
.menu a:hover { color: #fff; }
.menu .btn:hover { color: var(--verde-tinta); }

/* ---------- herói ---------- */
.heroi { background: var(--azul-noite); color: var(--sobre-azul); position: relative; overflow: hidden; }
.heroi__centro {
  padding-top: 72px;
  display: grid; grid-template-columns: 1fr; gap: 40px;
  align-items: center;
}
.heroi__fala { min-width: 0; padding-bottom: 56px; }
.heroi__titulo {
  font-size: clamp(38px, 5.4vw, 62px);
  line-height: 1.03; letter-spacing: -.005em;
  margin-bottom: 20px; color: #fff; max-width: 19ch;
}
.heroi__apoio { max-width: 52ch; font-size: 18.5px; color: var(--sobre-azul2); margin-bottom: 14px; }
.heroi__nota { max-width: 52ch; font-size: 16px; color: #8fa9bc; }
.heroi__linha {
  margin-top: 22px;
  font-family: var(--mono); font-size: 12.5px;
  color: var(--sobre-azul3); font-variant-numeric: tabular-nums;
}

.heroi__vinheta { position: relative; min-width: 0; min-height: 320px; align-self: stretch; }

/* A foto sangra até a borda da janela, e não até a borda da coluna.
   `--sangria` mede o que sobra entre a coluna e a janela: zero enquanto a tela é
   mais estreita que `--largura` (aí sangra só o padding), e metade da folga
   depois disso. Sem esta conta a foto termina num corte reto a uns 100 px da
   borda em telas largas, e o herói parece uma imagem que não coube.
   Passar da borda por causa da barra de rolagem — que o `100vw` conta e o
   layout não — é de graça: o `.heroi` tem `overflow: hidden`. */
.heroi__vinheta { --sangria: calc((100vw - min(100vw, var(--largura))) / 2 + 24px); }

/* A largura vai explícita, e não por um `right` negativo com `width: auto`.
   O véu é um span e obedecia aos dois lados; a foto é elemento substituído e
   não: `width: auto` num absoluto substituído resolve pela largura intrínseca
   e o `right` sai por superrestrição, e o `max-width: 100%` da regra geral de
   `img` ainda a prendia na coluna. O véu chegava na borda e a foto parava
   390 px antes, num monitor de 1920. */
.heroi__foto,
.heroi__veu {
  position: absolute; inset: 0;
  left: 0; right: auto;
  width: calc(100% + var(--sangria)); max-width: none; height: 100%;
}
.heroi__foto { object-fit: cover; }
/* O véu não é enfeite: sem ele o título branco cai sobre a parte clara do céu da
   foto e perde o contraste justamente na primeira linha da página. */
.heroi__veu {
  background: linear-gradient(90deg, var(--azul-noite) 0%, rgba(9, 40, 63, .55) 34%, rgba(9, 40, 63, .12) 72%);
  pointer-events: none;
}

/* ---------- fichas ---------- */
.ficha {
  background: var(--superficie); color: var(--tinta);
  border-radius: var(--raio-m); padding: 16px 18px;
  display: grid; gap: 10px;
  box-shadow: var(--sombra-ficha);
}
.ficha--aovivo { position: absolute; bottom: 26px; left: 8px; max-width: 310px; border-radius: 16px; }
.ficha--placa { position: absolute; top: 18px; left: 18px; gap: 7px; padding: 12px 15px; border: 1px solid var(--regua); border-radius: 12px; }
.ficha--legenda { position: absolute; bottom: 18px; right: 18px; gap: 6px; padding: 11px 14px; border: 1px solid var(--regua); border-radius: 12px; background: rgba(255, 255, 255, .94); }
/* Encostado no alto e à direita: embaixo mora a legenda, e à esquerda está a
   casa do desenho — o cartão em cima dela taparia justamente quem espera. */
.ficha--aviso { position: absolute; top: 16px; right: 16px; max-width: 300px; gap: 6px; }

.ficha__topo { display: flex; align-items: center; gap: 9px; }
.ficha__olho {
  font-family: var(--mono); font-size: 10.5px;
  letter-spacing: .13em; text-transform: uppercase; color: var(--tinta2);
}
.ficha__hora, .ficha__dado, .ficha__placa {
  font-family: var(--mono); font-size: 12.5px;
  font-variant-numeric: tabular-nums; color: var(--tinta2);
}
.ficha__hora { margin-left: auto; font-weight: 500; color: var(--tinta); }
.ficha__placa { font-size: 14px; font-weight: 500; color: var(--tinta); }
.ficha__nome { font-family: var(--display); font-weight: 600; font-size: 22px; line-height: 1.15; }
.ficha__frase { font-size: 13.5px; line-height: 1.4; }
.ficha__linha { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.ficha__coord { font-family: var(--mono); font-size: 11.5px; color: var(--tinta3); font-variant-numeric: tabular-nums; }

/* O ponto que pulsa é o único movimento "vivo" da página fora do ônibus. Ele
   custa dois elementos: um fixo, para o estado continuar legível quando a
   animação é desligada, e um que cresce e some. */
.pulso { position: relative; width: 9px; height: 9px; flex: none; display: inline-block; }
.pulso::before, .pulso::after {
  content: ''; position: absolute; inset: 0;
  border-radius: 50%; background: var(--verde);
}
.pulso::after { animation: pulsa 2.2s ease-out infinite; }
@keyframes pulsa {
  0%   { transform: scale(1);   opacity: .55; }
  70%  { transform: scale(2.6); opacity: 0; }
  100% { transform: scale(2.6); opacity: 0; }
}

.selo {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 600;
  padding: 4px 11px; border-radius: 999px;
  white-space: nowrap;
}
.selo::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.selo--movimento { background: var(--verde-suave); color: var(--verde-selo); }
.selo--parado { background: var(--amarelo-suave); color: var(--amarelo-tinta); }
.selo--desligado { background: #edf0f3; color: #4b5761; }

/* ---------- provas ---------- */
.provas { background: var(--azul-escuro); color: #dce7f1; border-top: 3px solid var(--verde); }
.provas__grade {
  padding-block: 26px;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 20px 34px;
}
.prova { display: flex; gap: 11px; align-items: flex-start; font-size: 15.5px; line-height: 1.45; }
.prova .tique { margin-top: 4px; }

/* ---------- painel do mapa ---------- */
.painel {
  margin-top: 34px;
  background: var(--superficie);
  border: 1px solid var(--regua);
  border-radius: var(--raio);
  box-shadow: var(--sombra-baixa);
  overflow: hidden;
}
.painel__mapa { position: relative; background: #e9edef; }
.mapa { width: 100%; height: auto; }

.painel__pe {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1px; background: var(--regua);
}
.mini { background: var(--superficie); padding: 22px 24px; }
.mini__titulo { font-size: 21px; margin-bottom: 6px; }
.mini__texto { font-size: 15px; color: var(--tinta2); }

/* ---------- no celular ---------- */
.dupla { display: grid; grid-template-columns: 1fr; gap: 48px; align-items: center; }
.dupla__fala { min-width: 0; }

.lista { margin-top: 22px; display: grid; gap: 9px; max-width: 56ch; }
.lista li { position: relative; padding-left: 20px; font-size: 15.5px; color: var(--tinta2); }
.lista li::before {
  content: ''; position: absolute; left: 0; top: .62em;
  width: 7px; height: 7px; border-radius: 2px; background: var(--verde);
}

.vinheta-foto {
  position: relative; margin: 26px 0 0;
  border-radius: var(--raio-m); overflow: hidden;
  aspect-ratio: 16 / 9; background: var(--superficie2);
}
.vinheta-foto__img { width: 100%; height: 100%; object-fit: cover; }
.vinheta-foto__veu { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(9, 40, 63, .1), rgba(9, 40, 63, .55)); }
.legenda {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 10px 14px; margin: 0;
  font-size: 13.5px; color: var(--sobre-azul2);
}

/* ---------- aparelhos ---------- */
.aparelhos { min-width: 0; display: flex; gap: 20px; justify-content: center; flex-wrap: wrap; }
.aparelho {
  width: 236px; flex: none;
  background: var(--tinta); border-radius: 26px; padding: 8px;
  box-shadow: 0 1px 2px rgba(15, 26, 36, .06), 0 26px 50px -26px rgba(15, 26, 36, .6);
}
.aparelho--recuado { align-self: flex-end; }
.aparelho__tela { background: var(--papel); border-radius: 20px; overflow: hidden; }

.tela__topo { padding: 12px 14px 14px; }
.tela__topo--motorista { background: var(--azul); }
.tela__topo--responsavel { background: var(--azul-noite); }
.tela__olho {
  font-family: var(--mono); font-size: 9.5px;
  letter-spacing: .14em; text-transform: uppercase; color: #a9c6dd;
}
.tela__topo--responsavel .tela__olho { color: var(--sobre-azul3); }
.tela__olho--escuro { color: var(--tinta2); font-size: 10px; letter-spacing: .12em; }
.tela__titulo { font-family: var(--display); font-weight: 600; font-size: 19px; color: #fff; line-height: 1.1; margin-top: 4px; }
.tela__sub { font-family: var(--mono); font-size: 11px; color: #a9c6dd; font-variant-numeric: tabular-nums; margin-top: 2px; }

.tela__corpo { padding: 10px; display: grid; gap: 8px; }
.parada {
  background: var(--superficie); border: 1px solid var(--regua);
  border-radius: var(--raio-p); padding: 9px 11px;
  display: flex; align-items: center; gap: 9px;
}
.parada--proxima { border: 1.5px solid var(--azul); }
.parada__marca {
  width: 20px; height: 20px; border-radius: 50%; flex: none;
  background: var(--verde); display: flex; align-items: center; justify-content: center;
}
.parada__marca svg { width: 12px; height: 12px; fill: none; stroke: var(--verde-tinta); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.parada__marca--vazia { background: var(--azul-claro); }
.parada span { min-width: 0; }
.parada b { display: block; font-size: 12.5px; font-weight: 600; line-height: 1.25; }
.parada i { display: block; font-style: normal; font-family: var(--mono); font-size: 10.5px; color: var(--tinta2); }
.parada__proxima { color: var(--azul); }

.tela__botao {
  background: var(--verde); color: var(--verde-tinta);
  border-radius: var(--raio-p); padding: 11px;
  text-align: center; font-size: 13px; font-weight: 600;
}
.tela__cartao { background: var(--superficie); border: 1px solid var(--regua); border-radius: var(--raio-p); padding: 11px 12px; display: grid; gap: 5px; }
.tela__frase { font-size: 12.5px; line-height: 1.4; }
.tela__hora, .tela__pe { font-family: var(--mono); font-size: 10.5px; color: var(--tinta3); font-variant-numeric: tabular-nums; }
.tela__pe { text-align: center; }
.tela__mapa { background: #e9edef; border-radius: var(--raio-p); overflow: hidden; height: 132px; }
.tela__mapa svg { width: 100%; height: 100%; }

/* ---------- antes e depois ---------- */
.antes-depois {
  margin-top: 34px;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px;
}
.coluna {
  background: var(--superficie); border: 1px solid var(--regua);
  border-radius: 4px var(--raio-m) var(--raio-m) 4px;
  padding: 26px 28px;
}
/* A borda de topo é o que separa as duas colunas sem precisar de vermelho: cinza
   para o que existe hoje, azul para o que passa a existir. */
.coluna--hoje { border-top: 3px solid var(--regua-forte); }
.coluna--depois { border-top: 3px solid var(--azul); box-shadow: var(--sombra-baixa); }
.coluna__olho {
  font-family: var(--mono); font-size: 11px;
  letter-spacing: .14em; text-transform: uppercase;
  margin-bottom: 16px;
}
.coluna--hoje .coluna__olho { color: var(--tinta3); }
.coluna--depois .coluna__olho { color: var(--azul); }
.coluna ul { display: grid; gap: 13px; }
.coluna li { position: relative; padding-left: 26px; font-size: 16px; }
.coluna--hoje li { color: var(--tinta2); }
.coluna--hoje li::before { content: ''; position: absolute; left: 0; top: .58em; width: 13px; height: 2px; background: var(--regua-forte); }
.coluna--depois li { color: var(--tinta); }
.coluna--depois li .tique { position: absolute; left: 0; top: .22em; }

/* ---------- tira de imagens ---------- */
.tira {
  margin-top: 34px; margin-bottom: 16px;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px;
}
.tira__quadro {
  position: relative; margin: 0;
  border-radius: var(--raio-m); overflow: hidden;
  aspect-ratio: 4 / 3; background: var(--superficie2);
}
.tira__quadro img { width: 100%; height: 100%; object-fit: cover; }
/* O véu comum é o que faz uma foto aérea e dois desenhos lerem como um conjunto.
   Sem ele, a diferença de origem aparece antes do conteúdo. */
.tira__veu {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(9, 40, 63, .16), rgba(9, 40, 63, .34));
  pointer-events: none;
}

/* ---------- papéis ---------- */
.papeis { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.papel {
  background: var(--superficie); border: 1px solid var(--regua);
  border-radius: var(--raio-m); padding: 22px 24px;
  box-shadow: var(--sombra-baixa);
}
.papel__nome { font-size: 21px; margin-bottom: 10px; }
.papel ul { display: grid; gap: 7px; }
.papel li { position: relative; padding-left: 18px; font-size: 14.5px; color: var(--tinta2); }
.papel li::before {
  content: ''; position: absolute; left: 0; top: .64em;
  width: 7px; height: 7px; border-radius: 2px; background: var(--verde);
}

/* ---------- orçamento ---------- */
.orcamento { display: grid; grid-template-columns: 1fr; gap: 40px; align-items: start; }
.orcamento__fala, .orcamento__cartoes { min-width: 0; }
.orcamento__cartoes { display: grid; gap: 14px; }

.cartoes { margin-top: 28px; display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 16px; }
.cartao {
  background: var(--superficie); border: 1px solid var(--regua);
  border-radius: var(--raio-m); padding: 22px 24px;
}
.cartao--barra { border: none; border-left: 4px solid var(--azul); padding: 20px 22px; }
.cartao__titulo { font-size: 20px; margin-bottom: 6px; }
.cartao__texto { font-size: 15px; color: var(--tinta2); }

/* ---------- contato ---------- */
.contato {
  background: var(--azul-noite); color: var(--sobre-azul);
  padding-block: 88px; border-top: 3px solid var(--verde);
}
.contato__grade { display: grid; grid-template-columns: 1fr; gap: 44px; align-items: start; }
.contato__fala, .formulario { min-width: 0; }
.contato__nota { margin-top: 20px; font-family: var(--mono); font-size: 12.5px; color: var(--sobre-azul3); }
.contato__selos {
  margin-top: 30px; padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, .16);
  display: flex; flex-wrap: wrap; gap: 8px 26px;
  font-family: var(--mono); font-size: 12px; color: var(--sobre-azul3);
}

.formulario {
  background: var(--superficie); color: var(--tinta);
  border-radius: var(--raio); padding: 28px 30px;
  box-shadow: 0 1px 2px rgba(15, 26, 36, .06), 0 30px 60px -30px rgba(0, 0, 0, .6);
}
.formulario__titulo { font-size: 24px; margin-bottom: 6px; }
.formulario__apoio { font-size: 15px; color: var(--tinta2); margin-bottom: 20px; }
.formulario__campos { display: grid; gap: 14px; }
.formulario__campos label { display: grid; gap: 6px; }
.rotulo { font-size: 13.5px; font-weight: 600; }
.formulario__campos input {
  padding: 12px 14px; min-height: 46px;
  border: 1px solid var(--regua-forte); border-radius: 8px;
  background: var(--superficie);
  /* 16px e não menos: abaixo disso o Safari do iPhone dá zoom ao focar o campo,
     e a página inteira salta na cara de quem só queria digitar o município. */
  font-size: 16px;
}
.formulario__campos input:focus-visible { border-color: var(--azul); outline-color: var(--azul); }
.formulario__campos button { margin-top: 4px; min-height: 50px; }
.formulario__aviso { margin-top: 14px; font-size: 13px; color: var(--tinta3); }
.formulario__ok {
  margin-top: 14px; padding: 12px 14px; border-radius: var(--raio-p);
  background: var(--verde-suave); color: var(--verde-tinta);
  font-size: 14px; font-weight: 600;
}
.formulario__ok[hidden] { display: none; }

/* ---------- rodapé ---------- */
.rodape { background: var(--azul-rodape); color: #8fa9bc; padding-block: 34px; }
.rodape__centro { display: flex; flex-wrap: wrap; gap: 16px 32px; align-items: center; justify-content: space-between; }
.marca--rodape .marca__sinete { width: 28px; height: 28px; }
.marca--rodape .marca__nome { font-size: 20px; color: var(--sobre-azul); }
.marca--rodape .marca__assinatura { margin-top: 0; }
.rodape__linha { font-size: 13.5px; }
.rodape__linha a { color: #a9c6dd; }

/* ==========================================================================
   Entrada dos blocos
   ==========================================================================
   Só esconde quando existe `html.js` — ver a nota no <head> do index.html. E a
   animação termina visível (`forwards`), então se o observador nunca disparar
   por qualquer motivo, o pior caso é o bloco aparecer sem animação, nunca sumir.
   ========================================================================== */
.js .revelar { opacity: 0; }
.js .revelar.visivel { animation: entra .68s var(--curva) forwards; }
@keyframes entra {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}

/* ---------- gestão ---------- */
/* A seção é escura para o painel acender como tela. O cartão dentro dela é
   claro de propósito: relatório de prefeitura é papel, e o contraste entre o
   fundo noturno e a superfície clara é o que faz o painel parecer ligado. */
.faixa--gestao { background: var(--azul-noite); color: var(--sobre-azul); }

.mesa-quadro { margin: 34px 0 0; }
.mesa {
  background: var(--superficie); color: var(--tinta);
  border-radius: var(--raio); overflow: hidden;
  box-shadow: var(--sombra-ficha);
}

.mesa__topo {
  display: flex; flex-wrap: wrap; gap: 14px;
  align-items: center; justify-content: space-between;
  padding: 16px 20px;
  background: var(--superficie2);
  border-bottom: 1px solid var(--regua);
}
.mesa__olho {
  font-family: var(--mono); font-size: 10.5px;
  letter-spacing: .14em; text-transform: uppercase; color: var(--tinta3);
}
.mesa__titulo { font-family: var(--display); font-weight: 600; font-size: 21px; line-height: 1.15; margin-top: 2px; }
.mesa__acoes { display: flex; flex-wrap: wrap; gap: 8px; }
.mesa__filtro {
  font-family: var(--mono); font-size: 11.5px;
  padding: 7px 12px; border-radius: 999px;
  background: var(--superficie); color: var(--tinta2);
  border: 1px solid var(--regua-forte);
}
.mesa__filtro--acao { background: var(--azul); border-color: var(--azul); color: #fff; }

/* As réguas de 1px do painel são o próprio fundo aparecendo pelo `gap`. Sai
   mais barato que borda em cada célula e nunca dobra a linha entre duas. */
.mesa__indicadores {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1px; background: var(--regua);
  border-bottom: 1px solid var(--regua);
}
.indicador { background: var(--superficie); padding: 16px 20px; }
.indicador__rotulo { font-size: 12.5px; color: var(--tinta2); }
.indicador__valor {
  font-family: var(--display); font-weight: 600; font-size: 30px;
  line-height: 1.1; margin-top: 2px; font-variant-numeric: tabular-nums;
}
.indicador__nota { font-family: var(--mono); font-size: 10.5px; color: var(--tinta3); margin-top: 3px; }

.mesa__grade { display: grid; grid-template-columns: 1fr; gap: 1px; background: var(--regua); }
.quadro__coluna { display: grid; gap: 1px; background: var(--regua); }
.quadro { background: var(--superficie); padding: 18px 20px; }
.quadro__titulo { font-family: var(--display); font-weight: 600; font-size: 17px; margin-bottom: 13px; }
.quadro__frase { font-size: 14.5px; line-height: 1.5; }
.quadro__pe { margin-top: 12px; font-size: 12.5px; line-height: 1.5; color: var(--tinta2); }

/* Barras de magnitude: um matiz só. A cor não distingue rota nenhuma aqui —
   quem distingue é o nome à esquerda e o comprimento. Pintar cada rota de uma
   cor faria a legenda virar obrigatória sem informar nada em troca. */
.raias { display: grid; gap: 9px; }
.raia { display: grid; grid-template-columns: minmax(64px, 84px) 1fr auto; align-items: center; gap: 12px; }
.raia__nome { font-size: 13px; color: var(--tinta2); }
.raia__trilho { height: 10px; border-radius: 4px; background: var(--superficie2); }
.raia__valor { display: block; height: 100%; border-radius: 4px; background: var(--azul); }
.raia__num { font-family: var(--mono); font-size: 12px; color: var(--tinta); font-variant-numeric: tabular-nums; }

.linhas { display: grid; gap: 9px; }
.linhas li { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 13.5px; }
.linhas__num { font-family: var(--mono); font-size: 13px; color: var(--tinta); font-variant-numeric: tabular-nums; }
/* Estado nunca vai só na cor: o selo carrega a palavra junto, que é o que
   sobra para quem não separa verde de amarelo. */
.tarja { font-family: var(--mono); font-size: 10.5px; padding: 4px 9px; border-radius: 999px; white-space: nowrap; }
.tarja::before { content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: currentColor; margin-right: 6px; vertical-align: .12em; }
.tarja--ok { background: var(--verde-suave); color: var(--verde-selo); }
.tarja--atencao { background: var(--amarelo-suave); color: var(--amarelo-tinta); }

.mesa__nota { margin-top: 11px; font-family: var(--mono); font-size: 11.5px; color: var(--sobre-azul3); }

.recursos {
  margin-top: 34px;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(232px, 1fr));
  gap: 11px 26px;
}
.recursos li { position: relative; padding-left: 20px; font-size: 15px; color: var(--sobre-azul2); }
.recursos li::before {
  content: ''; position: absolute; left: 0; top: .62em;
  width: 7px; height: 7px; border-radius: 2px; background: var(--verde);
}

/* ---------- eficiência ---------- */
/* A `.vinheta-foto` nasceu empilhada embaixo de um texto, com margem no topo.
   Aqui ela é coluna irmã, então a margem sai e o quadro fica mais alto. */
.vinheta-foto--lado { margin: 0; aspect-ratio: 4 / 3; }

/* ---------- largura ---------- */
@media (min-width: 760px) {
  .centro { padding-inline: 28px; }
  /* O padding da coluna mudou de 24 para 28: a sangria tem que acompanhar, senão
     sobra uma tira de 4 px de azul entre a foto e a borda da janela. */
  .heroi__vinheta { --sangria: calc((100vw - min(100vw, var(--largura))) / 2 + 28px); }
  .heroi__centro { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 48px; }
  .heroi__fala { padding-bottom: 72px; }
  .heroi__vinheta { min-height: 440px; }
  .ficha--aovivo { bottom: 34px; }
  .dupla { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 56px; }
  .orcamento { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 44px; }
  .contato__grade { grid-template-columns: repeat(auto-fit, minmax(310px, 1fr)); gap: 48px; }
  .mesa__grade { grid-template-columns: 1.35fr 1fr; }
}

@media (max-width: 759px) {
  .faixa, .contato { padding-block: 60px; }
  .barra__centro { padding-block: 10px; }
  .menu { gap: 10px 18px; }
  .heroi__centro { padding-top: 52px; }

  /* No celular a vinheta vira uma faixa que atravessa a tela inteira: sai da
     coluna pelos dois lados com a margem negativa, e por isso a sangria da foto
     volta a zero — quem sangra agora é a caixa, não a imagem dentro dela.

     O `min-height: 0` não é higiene, é o conserto de um bug: com o `min-height`
     de 320px da regra base valendo junto com `aspect-ratio: 4/3`, a altura vira
     a medida definida e a largura sai dela — 320 × 4/3 = 426 px numa coluna de
     342. A vinheta estourava a tela e levava o cartão "Ao vivo" junto, com o
     horário cortado na borda direita. */
  .heroi__vinheta {
    aspect-ratio: 4 / 3;
    min-height: 0;
    margin-inline: -24px;
    --sangria: 0px;
  }
  .ficha--aovivo { left: 16px; right: 16px; max-width: none; }
  .ficha--placa, .ficha--legenda { position: static; box-shadow: none; border-radius: 0; border: none; border-top: 1px solid var(--regua); }
  .formulario { padding: 22px 20px; }
}

/* ==========================================================================
   Movimento reduzido
   ==========================================================================
   O `animation: none` cobre o CSS. O SVG não: `animateMotion` é SMIL e ignora
   media query — o ônibus é parado pelo `pauseAnimations()` no script.js.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .js .revelar { opacity: 1; }
}