/* =====================================================================
   Raster 7 — site institucional
   Sobre Bootstrap 5, servido localmente.

   DIREÇÃO
   O site é a vitrine do mesmo instrumento que o cliente vai operar
   todos os dias: continuidade total com o sistema visual dos painéis.
   O wordmark RASTER7 em texto puro (Barlow Condensed, "7" azul) é o
   logotipo. Tema claro com faixas alternadas — papel cinza-frio e
   azul-marinho profundo — como um relatório impresso intercalado com
   telas da sala de controle.

   ASSINATURA
   A "linha de itinerário": a linha com nós do trilho do painel vira
   fio condutor — sublinha os eyebrows, percorre o cartão de telemetria
   do hero e marca as listas de serviço. Um único gesto, repetido com
   disciplina.
   ===================================================================== */

/* ------------------------------------------------------------ fontes */

@font-face {
  font-family: 'Barlow Condensed';
  src: url('/assets/fonts/barlow-condensed-600-latin.woff2') format('woff2');
  font-weight: 600; 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: 'Barlow Condensed';
  src: url('/assets/fonts/barlow-condensed-600-latin-ext.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
  unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB;
}
@font-face {
  font-family: 'Barlow Condensed';
  src: url('/assets/fonts/barlow-condensed-500-latin.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Sans';
  src: url('/assets/fonts/ibm-plex-sans-400-latin.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+2122;
}
@font-face {
  font-family: 'IBM Plex Sans';
  src: url('/assets/fonts/ibm-plex-sans-400-latin-ext.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB;
}
@font-face {
  font-family: 'IBM Plex Sans';
  src: url('/assets/fonts/ibm-plex-sans-500-latin.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+2122;
}
@font-face {
  font-family: 'IBM Plex Sans';
  src: url('/assets/fonts/ibm-plex-sans-500-latin-ext.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
  unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB;
}
@font-face {
  font-family: 'IBM Plex Sans';
  src: url('/assets/fonts/ibm-plex-sans-600-latin.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+2122;
}
@font-face {
  font-family: 'IBM Plex Sans';
  src: url('/assets/fonts/ibm-plex-sans-600-latin-ext.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
  unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB;
}
@font-face {
  font-family: 'IBM Plex Sans';
  src: url('/assets/fonts/ibm-plex-sans-700-latin.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+2122;
}
@font-face {
  font-family: 'IBM Plex Sans';
  src: url('/assets/fonts/ibm-plex-sans-700-latin-ext.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
  unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB;
}
@font-face {
  font-family: 'IBM Plex Mono';
  src: url('/assets/fonts/ibm-plex-mono-500-latin.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+2122;
}
@font-face {
  font-family: 'IBM Plex Mono';
  src: url('/assets/fonts/ibm-plex-mono-500-latin-ext.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
  unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB;
}
@font-face {
  font-family: 'IBM Plex Mono';
  src: url('/assets/fonts/ibm-plex-mono-600-latin.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+2122;
}

/* ------------------------------------------------------------ tokens */

:root {
  --papel:       #f6f7f9;
  --carta:       #ffffff;
  --traco:       #e3e7ed;
  --traco-forte: #cfd6e0;

  --tinta:   #0f1720;
  --tinta-2: #5b6675;
  --tinta-3: #8a94a3;

  --acento:       #1d4ed8;
  --acento-forte: #1740ad;
  --acento-vivo:       hsl(220 72% 66%);
  --acento-vivo-forte: hsl(220 72% 57%);

  --escuro:       #000000;
  --escuro-alto:  hsl(0 0% 9%);
  --escuro-linha: hsl(0 0% 17%);
  --claro-no-escuro: hsl(220 16% 93%);
  --fraco-no-escuro: hsl(220 10% 64%);

  --rodando:   #0f8a43;
  --rodando-f: #e8f5ed;

  /* Tipografia comum de propósito: títulos e corpo na pilha do sistema
     (Segoe UI / Roboto / Arial). O Barlow Condensed fica reservado ao
     wordmark RASTER7 — é logotipo, não fonte de texto. */
  --fonte-marca:   'Barlow Condensed', 'Arial Narrow', sans-serif;
  --fonte-display: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --fonte-corpo:   -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --fonte-mono:    'IBM Plex Mono', 'Courier New', monospace;

  --raio:   12px;
  --raio-p: 8px;

  --sombra-carta: 0 1px 2px rgb(15 23 32 / .04), 0 1px 3px rgb(15 23 32 / .05);
  --sombra-alta:  0 10px 28px rgb(15 23 32 / .10), 0 2px 6px rgb(15 23 32 / .05);
}

/* ------------------------------------------------------------ base */

body {
  font-family: var(--fonte-corpo);
  color: var(--tinta);
  background: var(--papel);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

::selection { background: var(--acento); color: #fff; }

h1, h2, h3 {
  font-family: var(--fonte-display);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -.015em;
  color: inherit;
}

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

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

.mono {
  font-family: var(--fonte-mono);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

/* Eyebrow com a linha de itinerário: traço, nó preenchido, rótulo. */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  font-family: var(--fonte-corpo);
  font-weight: 700;
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .16em;
  color: var(--acento);
  margin-bottom: 1rem;
}
.eyebrow::before {
  content: '';
  width: 34px;
  height: 2px;
  background: currentColor;
  border-radius: 1px;
}
.eyebrow::after {
  content: '';
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: currentColor;
  margin-left: -.65rem;
  transform: translateX(-3px);
}
.faixa-escura .eyebrow { color: var(--acento-vivo); }

/* ------------------------------------------------------------ botões */

.btn-acento {
  --bs-btn-bg: var(--acento-vivo);
  --bs-btn-border-color: var(--acento-vivo);
  --bs-btn-hover-bg: var(--acento-vivo-forte);
  --bs-btn-hover-border-color: var(--acento-vivo-forte);
  --bs-btn-active-bg: var(--acento-vivo-forte);
  --bs-btn-active-border-color: var(--acento-vivo-forte);
  --bs-btn-color: #fff;
  --bs-btn-hover-color: #fff;
  --bs-btn-active-color: #fff;
  font-weight: 600;
  border-radius: 999px;
}
.btn-vazado {
  --bs-btn-color: var(--claro-no-escuro);
  --bs-btn-border-color: var(--escuro-linha);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--escuro-alto);
  --bs-btn-hover-border-color: var(--acento-vivo);
  --bs-btn-active-bg: var(--escuro-alto);
  --bs-btn-active-color: #fff;
  font-weight: 500;
  border-radius: 999px;
}
.btn-lg { padding: .8rem 1.9rem; }

/* ------------------------------------------------------------ topo */

.topo {
  position: sticky;
  top: 0;
  z-index: 1030;
  background: var(--escuro);
  border-bottom: 1px solid var(--acento-vivo);
}
.topo .navbar { padding: .55rem 0; }

.marca {
  display: flex;
  align-items: center;
  gap: .6rem;
}
.sigla {
  font-family: var(--fonte-marca);
  font-weight: 600;
  font-size: 1.55rem;
  letter-spacing: .02em;
  color: var(--claro-no-escuro);
  line-height: 1;
}
.sigla em { font-style: normal; color: var(--acento-vivo); }

.marca .selo {
  font-family: var(--fonte-marca);
  font-weight: 500;
  font-size: .64rem;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--fraco-no-escuro);
  border: 1px solid var(--escuro-linha);
  border-radius: 3px;
  padding: .14rem .34rem;
}

.topo .nav-link {
  color: var(--fraco-no-escuro);
  font-weight: 500;
  font-size: .95rem;
  padding: .5rem .85rem;
}
.topo .nav-link:hover,
.topo .nav-link:focus-visible { color: #fff; }
.topo .nav-link.ativo { color: #fff; }

.navbar-toggler {
  border: 1px solid var(--escuro-linha);
  border-radius: var(--raio-p);
  padding: .5rem .6rem;
  display: inline-flex;
  flex-direction: column;
  gap: 5px;
}
.navbar-toggler .tracinho {
  width: 20px;
  height: 2px;
  background: var(--claro-no-escuro);
  border-radius: 1px;
}
.navbar-toggler:focus { box-shadow: 0 0 0 3px var(--acento-vivo); }

/* ------------------------------------------------------------ faixas */

.faixa {
  padding: 5rem 0;
  background: var(--papel);
}
.faixa-branca  { background: var(--carta); }
.faixa-escura {
  background: var(--escuro);
  color: var(--claro-no-escuro);
}
.faixa-escura .texto-suave { color: var(--fraco-no-escuro); }
.texto-suave { color: var(--tinta-2); }

.titulo-secao {
  font-size: clamp(1.65rem, 3.2vw, 2.35rem);
  margin-bottom: .75rem;
}

/* ------------------------------------------------------------ hero */

.hero {
  position: relative;
  background: var(--escuro) url('/assets/img/rodovia-aerea.jpg') center / cover no-repeat;
  color: var(--claro-no-escuro);
  padding: 6.5rem 0 20.5rem;
  overflow: hidden;
  isolation: isolate;
}
/* Vídeo de fundo (POV de ônibus à noite), self-hosted e mudo. A foto
   no background segue como fallback enquanto carrega ou se falhar. */
.hero-video {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Véu azul-marinho por cima: leve de propósito, o vídeo é o protagonista.
   A filmagem noturna já é escura e garante o contraste do texto. */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(100deg,
    hsl(0 0% 0% / .46) 28%,
    hsl(0 0% 0% / .36) 60%,
    hsl(0 0% 0% / .20) 100%);
}
@media (prefers-reduced-motion: reduce) {
  .hero-video { display: none; }
}
.hero .container { position: relative; }

/* Desktop mantém o dobro (7.2rem); no celular o piso cai para 2.8rem,
   senão o título sozinho engole a tela inteira. */
.hero h1 {
  font-size: clamp(2.8rem, 10vw, 7.2rem);
  color: #fff;
  margin: 0 0 1.1rem;
}
.hero h1 em {
  font-style: normal;
  color: var(--acento-vivo);
}
.hero .chamada,
.cabecalho-pagina .chamada {
  font-size: 1.11rem;
  line-height: 1.65;
  color: var(--fraco-no-escuro);
  max-width: 34rem;
}
.cabecalho-pagina .chamada { color: hsl(220 14% 80%); }

.selo-pulso {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  font-family: var(--fonte-mono);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .12em;
  color: var(--claro-no-escuro);
  background: var(--escuro-alto);
  border: 1px solid var(--escuro-linha);
  border-radius: 999px;
  padding: .45rem .95rem;
  margin-bottom: 1.6rem;
}
.selo-pulso .ponto {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #2ecc71;
  box-shadow: 0 0 0 0 rgb(46 204 113 / .55);
  animation: pulso 2.4s infinite;
}
@keyframes pulso {
  0%   { box-shadow: 0 0 0 0 rgb(46 204 113 / .55); }
  70%  { box-shadow: 0 0 0 9px rgb(46 204 113 / 0); }
  100% { box-shadow: 0 0 0 0 rgb(46 204 113 / 0); }
}

/* Cartão de telemetria: uma amostra honesta do produto. */
.carta-telemetria {
  background: var(--escuro-alto);
  border: 1px solid var(--escuro-linha);
  border-radius: var(--raio);
  box-shadow: var(--sombra-alta);
  padding: 1.4rem 1.5rem;
  max-width: 25rem;
  margin-left: auto;
}
.carta-telemetria .cabeca {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--escuro-linha);
}
.prefixo {
  font-family: var(--fonte-mono);
  font-weight: 600;
  font-size: 1.15rem;
  letter-spacing: .06em;
  color: #fff;
  background: var(--escuro);
  border: 1px solid var(--escuro-linha);
  border-radius: 6px;
  padding: .3rem .6rem;
}
.badge-rodando {
  font-family: var(--fonte-mono);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .1em;
  color: #58d68d;
  background: hsl(145 45% 14%);
  border: 1px solid hsl(145 40% 22%);
  border-radius: 999px;
  padding: .3rem .7rem;
}
.carta-telemetria .linhas {
  font-family: var(--fonte-mono);
  font-size: .82rem;
  color: var(--fraco-no-escuro);
  padding-top: 1rem;
  display: grid;
  gap: .55rem;
}
.carta-telemetria .linhas b {
  color: var(--claro-no-escuro);
  font-weight: 600;
  float: right;
}

/* Itinerário dentro do cartão: a assinatura em miniatura. */
.rota {
  position: relative;
  margin-top: 1.15rem;
  padding-left: 1.1rem;
  display: grid;
  gap: .8rem;
}
.rota::before {
  content: '';
  position: absolute;
  left: 4px;
  top: .45rem;
  bottom: .45rem;
  width: 2px;
  background: var(--escuro-linha);
}
.rota .parada {
  position: relative;
  font-size: .8rem;
  color: var(--fraco-no-escuro);
}
.rota .parada::before {
  content: '';
  position: absolute;
  left: -1.1rem;
  top: .32rem;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--escuro-alto);
  border: 2px solid var(--fraco-no-escuro);
}
.rota .parada.atual { color: #fff; }
.rota .parada.atual::before {
  background: var(--acento-vivo);
  border-color: var(--acento-vivo);
}

/* ------------------------------------------------------------ cartões */

.carta-servico {
  background: var(--carta);
  border: 1px solid var(--traco);
  border-radius: var(--raio);
  box-shadow: var(--sombra-carta);
  padding: 1.8rem 1.7rem;
  height: 100%;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.carta-servico:hover {
  transform: translateY(-4px);
  box-shadow: var(--sombra-alta);
  border-color: var(--traco-forte);
}
.carta-servico h3 {
  font-size: 1.15rem;
  margin-bottom: .55rem;
  color: var(--acento-vivo);
}
.carta-servico p {
  color: var(--tinta-2);
  font-size: .95rem;
  margin: 0;
}
.carta-servico .icone {
  width: 46px;
  height: 46px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: #e8edfb;
  color: var(--acento);
  margin-bottom: 1.1rem;
}
.carta-servico .icone svg { width: 24px; height: 24px; }

/* ------------------------------------------------------------ números */

.numero-grande {
  font-family: var(--fonte-mono);
  font-weight: 600;
  font-size: clamp(2.4rem, 5vw, 3.6rem);
  font-variant-numeric: tabular-nums;
  color: #fff;
  line-height: 1;
}
.numero-grande .sinal { color: var(--acento-vivo); }
.numero-legenda {
  color: var(--fraco-no-escuro);
  font-size: .92rem;
  max-width: 15rem;
  margin: .6rem auto 0;
}

/* ------------------------------------------------------------ listas de recurso */

.lista-rota {
  list-style: none;
  margin: 0;
  padding-left: 1.35rem;
  position: relative;
  display: grid;
  gap: 1.05rem;
}
.lista-rota::before {
  content: '';
  position: absolute;
  left: 5px;
  top: .6rem;
  bottom: .6rem;
  width: 2px;
  background: var(--traco-forte);
}
.lista-rota li { position: relative; }
.lista-rota li::before {
  content: '';
  position: absolute;
  left: -1.35rem;
  top: .38rem;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--papel);
  border: 3px solid var(--acento);
}
.faixa-branca .lista-rota li::before { background: var(--carta); }
.lista-rota b { font-weight: 600; }
.lista-rota span { color: var(--tinta-2); }

/* ------------------------------------------------------------ imagens */

.foto-moldura {
  border-radius: var(--raio);
  overflow: hidden;
  box-shadow: var(--sombra-alta);
}
.foto-moldura img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ------------------------------------------------------------ breadcrumb hero */

.cabecalho-pagina {
  position: relative;
  background: var(--escuro);
  color: #fff;
  padding: 6.5rem 0 4.5rem;
  background-size: cover;
  background-position: center;
  isolation: isolate;
}
.cabecalho-pagina::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(100deg,
    hsl(0 0% 0% / .94) 25%,
    hsl(0 0% 0% / .72) 60%,
    hsl(0 0% 0% / .45) 100%);
}
.cabecalho-pagina h1 {
  font-size: clamp(2rem, 4.2vw, 3rem);
  margin: 0;
}
.trilha {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .6rem;
  font-family: var(--fonte-corpo);
  font-weight: 600;
  font-size: .78rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--fraco-no-escuro);
  margin-bottom: 1.1rem;
}
.trilha a { color: var(--fraco-no-escuro); }
.trilha a:hover { color: #fff; }
.trilha .separa {
  width: 22px;
  height: 2px;
  background: var(--escuro-linha);
  display: inline-block;
}
.trilha .aqui { color: var(--acento-vivo); }

/* ------------------------------------------------------------ CTA final */

.chamada-final {
  position: relative;
  background: var(--escuro);
  background-size: cover;
  background-position: center;
  color: #fff;
  padding: 6rem 0;
  isolation: isolate;
  text-align: center;
}
.chamada-final::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: hsl(0 0% 0% / .82);
}
.chamada-final h2 {
  font-size: clamp(1.8rem, 3.6vw, 2.6rem);
  margin-bottom: 1rem;
}
.chamada-final p {
  color: var(--fraco-no-escuro);
  max-width: 38rem;
  margin: 0 auto 2rem;
}

/* ------------------------------------------------------------ formulário */

.carta-form {
  background: var(--carta);
  border: 1px solid var(--traco);
  border-radius: var(--raio);
  box-shadow: var(--sombra-carta);
  padding: 2.2rem;
}
.form-label {
  font-weight: 600;
  font-size: .88rem;
  color: var(--tinta);
}
.form-control {
  border-color: var(--traco-forte);
  border-radius: var(--raio-p);
  padding: .65rem .85rem;
  font-size: .95rem;
}
.form-control:focus {
  border-color: var(--acento);
  box-shadow: 0 0 0 .2rem rgb(29 78 216 / .12);
}
/* Honeypot fora da tela — não usar display:none, robô esperto pula. */
.campo-website {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.bloco-contato {
  background: var(--carta);
  border: 1px solid var(--traco);
  border-radius: var(--raio);
  padding: 1.5rem 1.6rem;
}
.bloco-contato .rotulo {
  font-family: var(--fonte-corpo);
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--tinta-3);
  margin-bottom: .3rem;
}
.bloco-contato .valor {
  font-weight: 600;
  font-size: 1.02rem;
  word-break: break-word;
}

/* ------------------------------------------------------------ rodapé */

.rodape {
  background: var(--escuro);
  color: var(--fraco-no-escuro);
  padding: 4rem 0 2rem;
  border-top: 1px solid var(--acento-vivo);
}
.rodape .sigla { font-size: 1.8rem; }
.rodape-frase { color: var(--fraco-no-escuro); line-height: 1.7; }
.rodape-titulo {
  font-family: var(--fonte-corpo);
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .16em;
  color: var(--claro-no-escuro);
  margin-bottom: 1rem;
}
.rodape-lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: .55rem;
}
.rodape-lista a { color: var(--fraco-no-escuro); }
.rodape-lista a:hover { color: #fff; }
.rodape-base {
  border-top: 1px solid var(--escuro-linha);
  margin-top: 3rem;
  padding-top: 1.4rem;
  font-size: .85rem;
}

/* ------------------------------------------------------------ 404 */

.erro-404 {
  background: var(--escuro);
  color: var(--claro-no-escuro);
  padding: 7rem 0;
  text-align: center;
}
/* 02/10/2026: mesmo desenho e rotulo de public/erro/404.html */
.erro-404 .rota-perdida { display: block; width: 100%; max-width: 30rem; height: auto; margin: 0 auto 2.2rem; overflow: visible; }
.erro-404 .rota-perdida .perdida { animation: rota-andar 2.4s linear infinite; }
@keyframes rota-andar { to { stroke-dashoffset: -40; } }
@media (prefers-reduced-motion: reduce) { .erro-404 .rota-perdida .perdida { animation: none; } }
.erro-404 .codigo {
  font-family: var(--fonte-mono);
  font-weight: 500;
  font-size: .8rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--acento-vivo);
}
.erro-404 h1 { font-family: var(--fonte-marca); font-weight: 600; font-size: clamp(2.6rem, 9vw, 4rem); color: #fff; }

/* ------------------------------------------------------------ revelação */

.revela {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .55s ease, transform .55s ease;
}
.revela.visivel {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .revela { opacity: 1; transform: none; transition: none; }
  .selo-pulso .ponto { animation: none; }
  .carta-servico { transition: none; }
}

/* ------------------------------------------------------------ responsivo */

@media (max-width: 991.98px) {
  .topo .navbar-collapse {
    border-top: 1px solid var(--escuro-linha);
    margin-top: .7rem;
    padding-top: .7rem;
  }
  .carta-telemetria { margin: 2.5rem auto 0; }
  .faixa { padding: 3.5rem 0; }
  .hero { padding: 4.5rem 0 9rem; }
}

/* Logotipo em SVG (02/10/2026) - substitui o wordmark em texto .sigla.
   Altura fixa, largura pela proporcao do arquivo. */
.marca-logo { display: block; height: 1.55rem; width: auto; }
.rodape .marca-logo { height: 1.9rem; }

/* --------------------------------------------- documentos legais (02/10/2026)
   Termos de Uso e Politica de Privacidade. Coluna de leitura de ~70
   caracteres; sumario fixo ao lado no desktop, no topo no celular. */

.documento { padding: 3.5rem 0 4.5rem; }
.documento .sumario {
  position: sticky;
  top: 5.5rem;
  font-size: .875rem;
  border-left: 2px solid var(--traco);
  padding-left: 1rem;
}
.documento .sumario .rotulo {
  font-family: var(--fonte-marca);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--tinta-2);
  margin-bottom: .6rem;
}
.documento .sumario ol { list-style: none; padding: 0; margin: 0; counter-reset: s; }
.documento .sumario li { counter-increment: s; margin: .32rem 0; }
.documento .sumario li::before { content: counter(s) ". "; color: var(--acento); font-family: var(--fonte-mono); font-size: .78rem; }
.documento .sumario a { color: var(--tinta-2); text-decoration: none; }
.documento .sumario a:hover { color: var(--acento); }

.texto-legal { max-width: 46rem; color: var(--tinta); font-size: 1rem; line-height: 1.72; counter-reset: secao; }
.texto-legal .vigencia {
  font-family: var(--fonte-mono);
  font-size: .8rem;
  color: var(--tinta-2);
  margin-bottom: 1.75rem;
}
.texto-legal h2 {
  counter-increment: secao;
  font-size: 1.3rem;
  margin: 2.6rem 0 .8rem;
  scroll-margin-top: 5.5rem;
}
.texto-legal h2::before {
  content: counter(secao, decimal-leading-zero);
  font-family: var(--fonte-mono);
  font-size: .8rem;
  color: var(--acento);
  margin-right: .7rem;
  vertical-align: .15rem;
}
.texto-legal h3 { font-size: 1.02rem; font-weight: 600; margin: 1.5rem 0 .45rem; }
.texto-legal p, .texto-legal li { color: var(--tinta-2); }
.texto-legal ul { padding-left: 1.2rem; }
.texto-legal li { margin: .35rem 0; }
.texto-legal strong { color: var(--tinta); font-weight: 600; }
.texto-legal .destaque {
  background: var(--papel);
  border-left: 3px solid var(--acento);
  padding: .9rem 1.1rem;
  margin: 1.2rem 0;
  border-radius: 0 4px 4px 0;
}
.texto-legal .destaque p:last-child { margin-bottom: 0; }
.texto-legal table { width: 100%; border-collapse: collapse; font-size: .9rem; margin: 1rem 0 1.4rem; }
.texto-legal th, .texto-legal td { border-bottom: 1px solid var(--traco); padding: .55rem .6rem .55rem 0; vertical-align: top; text-align: left; }
.texto-legal th { font-family: var(--fonte-marca); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; font-size: .78rem; color: var(--tinta); }
.texto-legal td { color: var(--tinta-2); }
.tabela-rola { overflow-x: auto; }

@media (max-width: 991.98px) {
  .documento .sumario { position: static; margin-bottom: 2rem; }
}