/* ============================================================
   BUILDERTECH — SISTEMA VISUAL "ESTRADA À NOITE"
   ------------------------------------------------------------
   O site acontece sobre um mapa noturno (canvas.mapa, desenhado
   pelo mapa.js). Marinho é o que ainda não se vê; ciano é o que
   o BuilderTrack enxerga. A luz revela.

   Regras fáceis de quebrar sem perceber:
   1. Nenhuma cor nova. Tom intermediário = opacidade ou
      color-mix sobre os tokens abaixo.
   2. Ciano só no que foi rastreado, no pico e no botão principal.
   3. Mona Sans faz título (largura 125%) e texto (100%); Martian
      Mono é só leitura de frota: placa, velocidade, rótulo.
   4. As seções não pintam fundo: o mapa passa por trás. Quem
      precisa de leitura limpa usa .painel ou uma sombra local.
   ============================================================ */

@font-face{ font-family:'Mona Sans'; font-style:normal; font-weight:200 900; font-stretch:75% 125%; font-display:swap;
  src:url(/assets/fonts/mona-sans-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD }
@font-face{ font-family:'Mona Sans'; font-style:normal; font-weight:200 900; font-stretch:75% 125%; font-display:swap;
  src:url(/assets/fonts/mona-sans-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF }
@font-face{ font-family:'Martian Mono'; font-style:normal; font-weight:100 800; font-stretch:75% 112.5%; font-display:swap;
  src:url(/assets/fonts/martian-mono-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD }
@font-face{ font-family:'Martian Mono'; font-style:normal; font-weight:100 800; font-stretch:75% 112.5%; font-display:swap;
  src:url(/assets/fonts/martian-mono-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF }

:root{
  --fundo:#07111F;
  --painel:#0A1524;
  --rodape:#060E1A;
  --traco:#1E3550;
  --traco-2:#142338;
  --tinta:#E8EEF6;
  --tinta-2:#B7C7DA;
  --suave:#93A8C2;
  --apagado:#6F849C;
  --ciano:#3FC7E0;
  --ciano-tinta:#052029;

  --sans:'Mona Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono:'Martian Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
  --fonte:var(--sans); /* a demo do produto ainda lê var(--fonte) */

  --lateral:clamp(20px, 4.4vw, 64px);
  --largura:1440px;
  --ease:cubic-bezier(.22, 1, .36, 1);
  --ease-out:var(--ease);
  --ease-io:cubic-bezier(.77, 0, .175, 1);
}

*, *::before, *::after{ box-sizing:border-box }
html{ background:var(--fundo); -webkit-text-size-adjust:100% }
body{
  margin:0; background:var(--fundo); color:var(--tinta);
  font-family:var(--sans); font-size:17px; line-height:1.6; font-weight:400;
  -webkit-font-smoothing:antialiased; overflow-x:clip;
}
img, video{ display:block; max-width:100% }
a{ color:inherit; text-decoration:none }
button{ font:inherit }
:focus-visible{ outline:2px solid var(--ciano); outline-offset:3px; border-radius:4px }
a, button, input, select, textarea{ -webkit-tap-highlight-color:transparent }
section[id]{ scroll-margin-top:88px }
::selection{ background:var(--ciano); color:var(--ciano-tinta) }
[hidden]{ display:none !important }

/* Rolagem suave (Lenis, ligado pelo site.js só em ponteiro fino e sem movimento reduzido) */
html.lenis, html.lenis body{ height:auto }
.lenis:not(.lenis-autoToggle).lenis-stopped{ overflow:clip }
.lenis [data-lenis-prevent]{ overscroll-behavior:contain }

/* Troca de página: a nova entra de dentro do escuro (só onde o navegador suporta) */
@view-transition{ navigation:auto }
::view-transition-old(root){ animation:vt-sai .28s ease both }
::view-transition-new(root){ animation:vt-entra .5s var(--ease) both }
@keyframes vt-sai{ to{ opacity:0 } }
@keyframes vt-entra{ from{ opacity:0 } }

/* O mapa: fixo, atrás de tudo */
.mapa{ position:fixed; inset:0; width:100%; height:100vh; height:100lvh; z-index:0; pointer-events:none }
main, .rodape{ position:relative; z-index:1 }

.miolo{ max-width:var(--largura); margin:0 auto; padding:0 var(--lateral); position:relative }
.grade{ display:grid; grid-template-columns:repeat(12, minmax(0, 1fr)); column-gap:clamp(12px, 2vw, 32px) }

/* ============================================================
   TIPOGRAFIA
   Escala: 12 / 15 / 18 / 24 / 36 / 56 / 88 / 132
   Título: Mona Sans larga (125%), peso médio, entreletra
   fechado. A segunda tinta (em) faz o papel de "ainda no escuro".
   ============================================================ */
.titulo{
  margin:0; font-family:var(--sans); font-stretch:125%; font-weight:500;
  line-height:1; letter-spacing:-.035em; text-wrap:balance;
}
.titulo--hero{ font-size:clamp(40px, 5.7vw, 96px); line-height:.98 }
.titulo--xl{ font-size:clamp(36px, 5.5vw, 88px); line-height:.98 }
.titulo--l{ font-size:clamp(30px, 3.7vw, 56px); line-height:1.02 }
.titulo--m{ font-size:clamp(22px, 2.3vw, 36px); line-height:1.08; letter-spacing:-.03em }
.titulo em{ font-style:normal; color:var(--suave) }

.lead{ margin:24px 0 0; font-size:clamp(16px, 1.25vw, 18px); line-height:1.6; color:var(--suave); max-width:33em; text-wrap:pretty }

/* Leitura de frota: rótulo em caixa alta */
.rotulo{
  display:inline-flex; align-items:center; gap:12px; margin:0 0 28px;
  font-family:var(--mono); font-size:11.5px; font-weight:500; line-height:1.4;
  letter-spacing:.09em; text-transform:uppercase; color:var(--suave);
}
.rotulo::before{ content:""; width:7px; height:7px; border-radius:50%; background:var(--ciano); flex:none }
.rotulo img{ width:22px; height:22px; border-radius:6px }
.rotulo:has(img)::before{ display:none }
.mono{ font-family:var(--mono); font-variant-numeric:tabular-nums }

/* Título que se monta: cada palavra sai de trás da própria linha de base.
   O motor quebra o título em .fx-palavra; aqui só muda o jeito de entrar. */
[data-fx="palavras"] .fx-palavra{
  opacity:1; transform:translateY(105%); clip-path:inset(0 0 100% 0);
  transition:transform 1s var(--ease), clip-path 1s var(--ease);
}
[data-fx="palavras"].fx-em-cena .fx-palavra{ transform:none; clip-path:inset(-20% -10% -30% -10%) }
.fx-reduzido [data-fx="palavras"] .fx-palavra{ clip-path:none }

/* ============================================================
   BOTÕES E LINKS
   Pílula com a seta num disco: no hover o disco avança e a seta
   troca de lugar. A seta é desenhada (máscara), não um caractere.
   ============================================================ */
.seta{
  display:inline-block; flex:none; width:1em; height:1em; background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 8h11M9 3.5 13.5 8 9 12.5' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 8h11M9 3.5 13.5 8 9 12.5' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.botao{
  --bx:0px; --by:0px;
  position:relative; display:inline-flex; align-items:center; justify-content:space-between; gap:18px;
  min-height:56px; padding:6px 6px 6px 26px; border-radius:999px; border:1px solid transparent;
  background:var(--ciano); color:var(--ciano-tinta);
  font-family:var(--sans); font-size:15.5px; font-weight:550; letter-spacing:-.01em; line-height:1.15;
  cursor:pointer; text-align:left;
  transform:translate(var(--bx), var(--by));
  transition:transform .5s var(--ease), background-color .25s ease, border-color .25s ease, color .25s ease;
}
.botao .seta{
  width:44px; height:44px; border-radius:50%; background:var(--ciano-tinta);
  -webkit-mask:none; mask:none; position:relative; transition:transform .5s var(--ease);
}
.botao .seta::before, .botao .seta::after{
  content:""; position:absolute; inset:0; margin:auto; width:16px; height:16px; background:var(--ciano);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 8h11M9 3.5 13.5 8 9 12.5' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 8h11M9 3.5 13.5 8 9 12.5' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  transition:transform .5s var(--ease), opacity .3s ease;
}
.botao .seta::after{ transform:translateX(-26px); opacity:0 }
.botao .seta{ overflow:hidden }
.botao--p{ min-height:44px; padding:4px 4px 4px 18px; gap:12px; font-size:14px }
.botao--p .seta{ width:36px; height:36px }
.botao--contorno{ background:transparent; border-color:var(--traco); color:var(--tinta) }
.botao--contorno .seta{ background:var(--traco-2) }
.botao--contorno .seta::before, .botao--contorno .seta::after{ background:var(--tinta) }
.botao--largo{ width:100% }
@media (hover:hover) and (pointer:fine){
  .botao:hover .seta::before{ transform:translateX(26px); opacity:0 }
  .botao:hover .seta::after{ transform:none; opacity:1 }
  .botao--contorno:hover{ border-color:var(--suave) }
}
.botao:active{ transform:translate(var(--bx), var(--by)) scale(.97); transition-duration:.12s }
.botao:disabled{ opacity:.7; cursor:progress }

.link-seta{
  display:inline-flex; align-items:center; gap:12px; padding-bottom:7px;
  font-size:15.5px; font-weight:500; color:inherit;
  background:linear-gradient(currentColor, currentColor) left bottom / 100% 1px no-repeat;
  transition:background-size .5s var(--ease);
}
.link-seta .seta{ transition:transform .5s var(--ease) }
.link-seta:hover{ background-size:0 1px; background-position:right bottom }
.link-seta:hover .seta{ transform:translateX(5px) }

/* ============================================================
   CABEÇALHO
   Transparente no topo; ao rolar ganha fundo. Descendo, recolhe
   (as cenas presas pedem a tela inteira); subindo, volta.
   ============================================================ */
header[data-cabecalho]{
  position:fixed; top:0; left:0; right:0; z-index:50;
  border-bottom:1px solid transparent;
  transition:background-color .35s ease, border-color .35s ease, transform .5s var(--ease);
  view-transition-name:cabecalho;
}
header[data-cabecalho].rolado{
  background:rgba(7, 17, 31, .82); border-bottom-color:var(--traco-2);
  backdrop-filter:blur(16px) saturate(140%); -webkit-backdrop-filter:blur(16px) saturate(140%);
}
header[data-cabecalho].recolhido:not(.menu-aberto):not(:focus-within){ transform:translateY(-101%) }
.barra{
  max-width:calc(var(--largura) + 40px); margin:0 auto; height:76px; padding:0 var(--lateral);
  display:flex; align-items:center; justify-content:space-between; gap:20px;
}
.marca{ display:flex; align-items:center; gap:12px; color:var(--tinta); flex:none }
.marca img{ width:30px; height:30px; object-fit:cover; border-radius:8px }
.marca span{ font-stretch:112%; font-size:18px; font-weight:600; letter-spacing:-.03em; line-height:1.1 }
.marca b{ color:var(--ciano); font-weight:inherit }
.marca small{ display:block; font-family:var(--mono); font-stretch:100%; font-size:9.5px; font-weight:400; letter-spacing:.04em; color:var(--apagado) }

.menu{ display:flex; align-items:center; gap:clamp(18px, 2.2vw, 34px) }
.menu > a:not(.botao){ position:relative; padding:6px 0; color:var(--tinta-2); font-size:14.5px; font-weight:450; white-space:nowrap; transition:color .25s ease }
.menu > a:not(.botao)::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background:currentColor; transform:scaleX(0); transform-origin:right; transition:transform .5s var(--ease) }
.menu > a:not(.botao):hover{ color:var(--tinta) }
.menu > a:not(.botao):hover::after{ transform:scaleX(1); transform-origin:left }

.so-mobile{ display:none }
@media (max-width:920px){ .so-desktop{ display:none !important } .so-mobile{ display:block } }

.hamburguer{
  width:46px; height:46px; border-radius:50%; border:1px solid var(--traco);
  background:transparent; color:var(--tinta); cursor:pointer;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px;
}
.hamburguer span{ display:block; width:18px; height:1.6px; background:var(--tinta) }
.hamburguer span:last-child{ width:12px }
.celular-fim{ display:flex; align-items:center; gap:10px }

.menu-celular{ padding:8px var(--lateral) 24px !important; display:flex; flex-direction:column; gap:0; border-top:1px solid var(--traco-2) }
.menu-celular > a{ color:var(--tinta); font-stretch:125%; font-size:24px; font-weight:500; letter-spacing:-.03em; padding:17px 0; border-bottom:1px solid var(--traco-2) }
.menu-celular > a.botao{ margin-top:18px; border-bottom:0; padding:6px 6px 6px 24px; font-stretch:100%; font-size:16px; letter-spacing:-.01em; color:var(--ciano-tinta) }

/* Troca de idioma */
.bt-idioma{ display:inline-flex; align-items:center; gap:2px; padding:3px; border:1px solid var(--traco); border-radius:999px; font-family:var(--mono); font-size:11px; font-weight:500; letter-spacing:.05em; line-height:1; white-space:nowrap }
.bt-idioma > *{ display:inline-flex; align-items:center; gap:6px; padding:6px 9px; border-radius:999px }
.bt-idioma [aria-current]{ background:var(--traco-2); color:var(--tinta) }
.bt-idioma a{ color:var(--apagado); transition:color .2s ease }
.bt-idioma a:hover{ color:var(--tinta) }
.bt-idioma svg{ width:16px; height:12px; border-radius:2px; flex:none; box-shadow:0 0 0 1px rgba(255, 255, 255, .14) }
.bt-idioma a svg{ opacity:.55; transition:opacity .2s ease }
.bt-idioma a:hover svg{ opacity:1 }
@media (max-width:400px){ .bt-idioma__cod{ display:none } .bt-idioma > *{ padding:6px 7px } }
.menu-celular__idioma{ display:none }
@media (max-width:520px){
  .celular-fim .bt-idioma{ display:none }
  .menu-celular__idioma{ display:flex; padding:18px 0 4px }
  .menu-celular__idioma .bt-idioma__cod{ display:inline }
  .barra{ gap:10px }
}

/* Chamada de cada seção: uma por cena, cada uma com as próprias palavras */
.secao-cta{ margin-top:clamp(36px, 4vw, 56px); display:flex; flex-wrap:wrap; align-items:center; gap:18px 28px }

/* Painel: superfície para leitura limpa por cima do mapa */
.painel-s{ border:1px solid var(--traco); border-radius:20px; background:color-mix(in srgb, var(--painel) 92%, transparent); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px) }

/* ============================================================
   FORMULÁRIO
   ============================================================ */
.form{ display:flex; flex-direction:column; gap:20px; padding:clamp(22px, 3vw, 40px); border-radius:24px; border:1px solid var(--traco); background:color-mix(in srgb, var(--painel) 94%, transparent); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); color:var(--tinta) }
.form label{ display:flex; flex-direction:column; gap:6px; font-family:var(--mono); font-size:11px; font-weight:500; letter-spacing:.08em; text-transform:uppercase; color:var(--suave) }
.form input, .form select, .form textarea{
  width:100%; padding:13px 0; border:0; border-bottom:1px solid var(--traco); border-radius:0;
  background:transparent; color:var(--tinta);
  font-family:var(--sans); font-size:17px; letter-spacing:-.01em; text-transform:none;
  transition:border-color .25s ease;
}
.form select{ appearance:none; -webkit-appearance:none; cursor:pointer; background:linear-gradient(45deg, transparent 50%, var(--suave) 50%) calc(100% - 11px) 55% / 6px 6px no-repeat, linear-gradient(-45deg, transparent 50%, var(--suave) 50%) calc(100% - 5px) 55% / 6px 6px no-repeat }
.form select option{ background:var(--painel); color:var(--tinta) }
.form input::placeholder, .form textarea::placeholder{ color:var(--apagado); opacity:.85 }
.form textarea{ resize:vertical; min-height:96px }
.form input:focus, .form select:focus, .form textarea:focus{ outline:none; border-bottom-color:var(--ciano) }
.form h3{ margin:0; font-stretch:125%; font-size:22px; font-weight:500; letter-spacing:-.03em; line-height:1.15 }
.form > p{ margin:0; font-size:15px; line-height:1.55; color:var(--suave) }
.form button[type=submit]{ margin-top:8px }
.form .form__aviso{ font-size:12.5px; line-height:1.5; color:var(--apagado) }
.form__aviso a{ color:var(--tinta-2); text-decoration:underline; text-underline-offset:3px }
.form__ok p{ margin:0; display:flex; align-items:center; gap:10px; font-size:15px; color:var(--ciano) }
.form__erro p{ margin:0; font-size:14.5px; line-height:1.5; color:var(--tinta) }
.form__erro a{ text-decoration:underline; text-underline-offset:3px }
@media (max-width:860px){ input, select, textarea{ font-size:16px !important } }
.bt-ok__v{ stroke-dasharray:15; stroke-dashoffset:15; animation:bt-traca .44s var(--ease) .14s forwards }
@keyframes bt-traca{ to{ stroke-dashoffset:0 } }
[data-form-ok]{ transition:opacity .32s var(--ease), transform .32s var(--ease) }
@starting-style{ [data-form-ok]{ opacity:0; transform:translateY(6px) scale(.98) } }

/* ============================================================
   CONTATO
   Texto à esquerda, formulário à direita. Vale para a home e para
   as páginas de apoio (guias, locadoras, Brasília).
   ============================================================ */
.contato{ padding:clamp(110px, 13vw, 200px) 0 clamp(90px, 10vw, 160px) }
.contato .grade{ align-items:start; row-gap:48px }
.contato__lado{ grid-column:1 / span 5; position:sticky; top:clamp(96px, 16vh, 140px) }
.contato .form{ grid-column:7 / span 6 }
@media (max-width:960px){
  .contato__lado, .contato .form{ grid-column:1 / -1 }
  .contato__lado{ position:static }
}

/* ============================================================
   RODAPÉ
   A marca em corpo gigante, apagada; a luz do ponteiro acende
   letra por letra (site.js). Depois, colunas e a linha final.
   ============================================================ */
.rodape{ background:color-mix(in srgb, var(--rodape) 93%, transparent); border-top:1px solid var(--traco-2); padding:clamp(64px, 7vw, 110px) 0 0; overflow:hidden }
.rodape__topo{ display:flex; flex-wrap:wrap; gap:48px; justify-content:space-between }
.rodape__marca{ flex:1 1 300px; min-width:250px }
.rodape__marca p{ margin:20px 0 0; max-width:19em; font-size:15.5px; color:var(--suave) }
.rodape__redes{ margin-top:26px; display:flex; flex-wrap:wrap; gap:8px }
.rodape__redes a{ display:inline-flex; align-items:center; min-height:38px; padding:0 16px; border-radius:999px; border:1px solid var(--traco); font-size:13.5px; color:var(--tinta-2); transition:border-color .25s ease, color .25s ease }
.rodape__redes a:hover{ border-color:var(--suave); color:var(--tinta) }
.rodape__cols{ flex:2 1 420px; display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); gap:32px }
.rodape__cols h3{ margin:0 0 18px; font-family:var(--mono); font-size:11px; font-weight:500; letter-spacing:.09em; text-transform:uppercase; color:var(--apagado) }
.rodape__cols ul{ margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:11px }
.rodape__cols a{ font-size:15.5px; color:var(--tinta-2); transition:color .2s ease }
.rodape__cols a:hover{ color:var(--tinta) }
.rodape__nome{
  margin:clamp(56px, 7vw, 110px) 0 0; display:flex; justify-content:space-between; user-select:none;
  font-stretch:125%; font-weight:600; font-size:clamp(44px, 13.4vw, 232px); line-height:.8; letter-spacing:-.05em;
}
.rodape__nome span{ color:var(--traco); opacity:calc(.55 + var(--luz, 0) * .45); transition:color .5s ease }
.rodape__nome span.aceso{ color:var(--tinta) }
.rodape__nome span.aceso.t{ color:var(--ciano) }
.rodape__base{ margin-top:clamp(28px, 3vw, 44px); padding:22px 0; border-top:1px solid var(--traco-2); display:flex; flex-wrap:wrap; gap:12px; justify-content:space-between; font-family:var(--mono); font-size:11px; letter-spacing:.03em; color:var(--apagado) }
.rodape__base a{ color:inherit }
@media (max-width:480px){ .rodape__cols{ grid-template-columns:1fr } }
@media (max-width:860px){ .rodape__base{ padding-bottom:88px } }

/* Barra de ação do celular: aparece depois do topo, some no formulário. */
.bt-barra{ position:fixed; left:0; right:0; bottom:0; z-index:45; display:none; padding:10px 14px calc(10px + env(safe-area-inset-bottom)); background:rgba(7, 17, 31, .94); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border-top:1px solid var(--traco-2); transform:translateY(110%); transition:transform .4s var(--ease) }
.bt-barra.aparece{ transform:none }
.bt-barra a{ flex:1 }
@media (max-width:860px){ .bt-barra{ display:flex } }

@media (prefers-reduced-motion:reduce){
  ::view-transition-old(root), ::view-transition-new(root){ animation:none }
  .botao, .botao .seta, .botao .seta::before, .botao .seta::after{ transition:none }
  header[data-cabecalho]{ transition:none }
}

/* ============================================================
   PÁGINAS DE TAREFA — privacidade
   Texto longo pede papel claro: tinta marinho sobre o claro.
   Cabeçalho e rodapé continuam escuros. Sem mapa, sem efeito de
   rolagem: aqui a pessoa veio ler.
   ============================================================ */
body.pagina-legal{ background:var(--tinta); color:var(--fundo) }
.pagina-legal header[data-cabecalho]{ background:var(--fundo); border-bottom-color:var(--traco-2) }
.pagina-legal header[data-cabecalho].recolhido{ transform:none }
.pagina-legal .rodape{ background:var(--rodape) }
.legal{ padding:clamp(130px, 14vw, 190px) 0 clamp(80px, 9vw, 130px) }
.legal .container{ max-width:var(--largura); margin:0 auto; padding:0 var(--lateral); display:grid; grid-template-columns:repeat(12, minmax(0, 1fr)); column-gap:clamp(12px, 2vw, 32px) }
.legal__head{ grid-column:1 / -1; margin-bottom:clamp(48px, 6vw, 88px); padding-bottom:28px; border-bottom:1px solid rgba(7, 17, 31, .16) }
.legal__head h1{ margin:0; font-stretch:125%; font-size:clamp(38px, 5.6vw, 88px); font-weight:500; letter-spacing:-.04em; line-height:.98 }
.legal__meta{ margin:24px 0 0; font-family:var(--mono); font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; color:#4A5D74 }
.legal__body{ grid-column:4 / span 7; font-size:17px; line-height:1.7 }
.legal__body h2{ margin:56px 0 14px; padding-top:28px; border-top:1px solid rgba(7, 17, 31, .16); font-stretch:125%; font-size:clamp(22px, 2vw, 28px); font-weight:500; letter-spacing:-.03em; line-height:1.15 }
.legal__botao{ min-height:40px; padding:8px 18px; border:1px solid rgba(7,17,31,.32); border-radius:999px; background:transparent; color:inherit; font:inherit; font-size:15px; font-weight:500; cursor:pointer }
.legal__botao:focus-visible{ outline:2px solid #0E7490; outline-offset:2px }
@media (hover:hover) and (pointer:fine){ .legal__botao:hover{ border-color:rgba(7,17,31,.6) } }
.legal__body h2:first-child{ margin-top:0; padding-top:0; border-top:0 }
.legal__body h3{ margin:28px 0 8px; font-size:18px; font-weight:600; letter-spacing:-.015em }
.legal__body p{ margin:0 0 16px; color:#33465E }
.legal__body strong{ color:var(--fundo); font-weight:600 }
.legal__body a{ color:var(--fundo); text-decoration:underline; text-underline-offset:3px }
.legal__body ul{ margin:0 0 18px; padding:0; list-style:none }
.legal__body li{ position:relative; padding-left:22px; margin-bottom:8px; color:#33465E }
.legal__body li::before{ content:""; position:absolute; left:0; top:.85em; width:10px; height:1px; background:currentColor }
.legal__box{ margin:28px 0; padding:22px 24px; border-radius:16px; background:rgba(7, 17, 31, .05); border:1px solid rgba(7, 17, 31, .12) }
.legal__box p:last-child{ margin-bottom:0 }
.legal__contact{ margin:12px 0 0 }
.legal__contact dt{ margin-top:14px; font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:#4A5D74 }
.legal__contact dd{ margin:4px 0 0; font-family:var(--mono); font-size:14.5px; color:var(--fundo) }
@media (max-width:960px){ .legal__body{ grid-column:1 / -1 } }