/* BOLSODRIVE · cabeçalho do rio (montado por assets/nav.js). Carregar por último.
   Celular: uma linha de 48 px (logo, trecho atual, [ RIO ]) + a linha do curso de 8 px.
   Desktop (≥ 900 px): os 4 trechos em linha como [ ABAS ] (12 px, 44 px de altura) e as margens num menu.
   Nome curto: nav.js pode emitir <span class="nv-curto">A teia</span> antes do nome (<span class="nv-nome">); o curto
   aparece quando a linha aperta (.nv-aperta, medido pelo nav.js) e some no resto. Sem os spans, nada muda.
   Classes nv-* para não herdar as regras antigas de .hrow/.brand/.tab do app.css. */
:root{--nv-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}

.site-header{
  position:sticky; top:0; z-index:50; background:#070a07;
  border-bottom:1px solid rgba(116,255,150,.18);
  padding-top:env(safe-area-inset-top);
}
.site-header:empty{min-height:57px}
.nv-row{
  max-width:1180px; margin:0 auto; height:48px; padding:0 4px 0 16px;
  display:flex; align-items:center; gap:8px;
}

/* marca: o logo Osciloscópio (SVG inline, nome em contornos; proporção 840,4 × 82,6) e a tag embaixo */
.nv-mark{
  flex:none; display:flex; flex-direction:column; justify-content:center; min-height:44px;
  text-decoration:none!important; font-family:var(--nv-mono); line-height:1.15;
}
.nv-mark .nv-m{display:block; line-height:0}
.nv-mark .nv-logo{display:block; height:18px; width:183px; overflow:visible}
.nv-mark .nv-tag{font-size:10px; color:#5c8a63; white-space:nowrap; margin-top:4px}
.nv-mark .nv-tag::before{content:"//\00a0"}
.nv-mark:hover .nv-tag{color:#86a58c}
@media (max-width:379px){
  .nv-row .nv-mark .nv-tag{display:none} .nv-aqui b{font-size:11px} .nv-row .nv-bt{padding:0 10px}
  .nv-row .nv-mark .nv-logo{height:15px; width:153px}
}
/* 380–419 px: logo em 16 px para sobrar espaço ao trecho atual */
@media (min-width:380px) and (max-width:419px){ .nv-row .nv-mark .nv-logo{height:16px; width:163px} .nv-aqui b{font-size:11px} }
/* 320–359 px: logo um pouco menor e "trecho 1/3" no lugar de "trecho 1 de 3", para caber com o [ RIO ] */
.nv-aqui .nv-ct{display:none}
@media (max-width:359px){
  .nv-row{gap:6px}
  .nv-row .nv-mark .nv-logo{height:14px; width:142px}
  .nv-row .nv-bt{padding:0 8px}
  .nv-aqui .nv-lg{display:none} .nv-aqui .nv-ct{display:inline}
}

/* trecho atual (celular) */
.nv-aqui{
  flex:1; min-width:0; display:flex; flex-direction:column; align-items:flex-end; justify-content:center;
  font-family:var(--nv-mono); line-height:1.2; text-transform:uppercase; text-align:right;
}
.nv-aqui small{font-size:10.5px; letter-spacing:.04em; color:#5c8a63; white-space:nowrap}
.nv-aqui b{max-width:100%; font-size:12px; font-weight:700; letter-spacing:0; color:#d8efdd; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}

/* botão [ RIO ] / [ MARGENS ] */
.nv-bt,.nv-fecha{
  flex:none; min-height:44px; min-width:44px; padding:0 12px;
  font-family:var(--nv-mono); font-size:12px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; white-space:nowrap;
  color:#ffb02e; background:transparent; border:1px solid rgba(116,255,150,.32); border-radius:4px; cursor:pointer;
}
.nv-bt::before,.nv-fecha::before{content:"[\00a0"} .nv-bt::after,.nv-fecha::after{content:"\00a0]"}
.nv-bt:hover,.nv-fecha:hover{border-color:#ffb02e}
.nv-bt[aria-expanded="true"]{background:#ffb02e; color:#120c00; border-color:#ffb02e}
.nv-bt .nv-bt-d{display:none}
.nv-bt:focus-visible,.nv-fecha:focus-visible,.nv-mark:focus-visible,.nv-trechos a:focus-visible,
.nv-mapa a:focus-visible,.nv-segue a:focus-visible{outline:2px solid #ffb02e; outline-offset:2px}

/* os 4 trechos em linha: só no desktop */
.nv-trechos{display:none}
.nv-trechos a .nv-n{color:#6c8f70}                    /* 5,5:1 (era #4f6b51, 3,4:1) */
.nv-trechos a[aria-current] .nv-n{color:#553a00}      /* sobre o âmbar: 5,8:1 (era #6b4a00, 4,4:1) */
/* BolsoZap: link direto na linha, só no desktop (no celular fica no mapa); sem cor de destaque e sem colchetes (não é trecho) */
.nv-zap{display:none}

/* a linha do curso: 4 estações, da nascente à foz */
.nv-curso{position:relative; height:8px; max-width:1180px; margin:0 auto}
.nv-curso::before{content:""; position:absolute; left:16px; right:16px; top:3px; height:2px; background:rgba(116,255,150,.18)}
.nv-feito{position:absolute; left:16px; top:3px; height:2px; width:calc(100% - 32px); background:#7df59a; transform-origin:0 50%; transform:scaleX(0)}
.nv-curso i{position:absolute; top:1px; width:6px; height:6px; margin-left:-3px; border-radius:50%; background:#4f6b51}
.nv-curso i.ok{background:#7df59a}
.nv-curso i.agora{background:#ffb02e; box-shadow:0 0 0 3px rgba(255,176,46,.25)}
/* .afl é também a ficha do sistema (base.css); aqui é só o estado "afluente" da linha: nada da ficha vale */
.nv-curso.afl{width:auto; padding:0; margin:0 auto; border:0; border-radius:0; background:none; text-align:start; transition:none}
.nv-curso.margem::before{background:rgba(116,255,150,.09)}
.nv-curso.margem i{background:#2c3d2e}
.nv-curso.margem i.volta{background:#070a07; box-shadow:inset 0 0 0 1.5px #ffb02e}

/* ---------- o mapa do rio ---------- */
html.nv-trava,html.nv-trava body{overflow:hidden}
.nv-mapa{
  position:fixed; inset:0; z-index:70; background:#070a07; color:#d8efdd;
  overflow:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch;
}
.nv-mapa[hidden]{display:none}
.nv-mapa-in{max-width:560px; margin:0 auto; padding:calc(4px + env(safe-area-inset-top)) 16px calc(32px + env(safe-area-inset-bottom))}
.nv-topo{display:flex; justify-content:space-between; align-items:center; gap:10px; height:48px; margin:0 -12px 4px 0}
.nv-k{font-family:var(--nv-mono); font-size:12px; letter-spacing:.08em; color:#5c8a63; text-transform:uppercase; margin:18px 0 6px}
.nv-k::before{content:"//\00a0"}

.nv-lista{list-style:none; margin:0; padding:0 0 0 24px; position:relative}
.nv-lista::before{content:""; position:absolute; left:7px; top:22px; bottom:26px; width:2px; background:linear-gradient(#4f6b51,#7df59a 60%,#ffb02e)}
.nv-lista li{position:relative}
.nv-lista li::before{content:""; position:absolute; left:-22px; top:21px; width:10px; height:10px; border-radius:50%; background:#070a07; border:2px solid #4f6b51}
.nv-lista li.ok::before{background:#7df59a; border-color:#7df59a}
.nv-lista li.agora::before{background:#ffb02e; border-color:#ffb02e; box-shadow:0 0 0 3px rgba(255,176,46,.25)}
.nv-lista li.volta::before{border-color:#ffb02e}
.nv-lista a{display:block; min-height:56px; padding:12px 0 12px 6px; text-decoration:none!important; color:#d8efdd; border-bottom:1px solid rgba(116,255,150,.12)}
.nv-lista a .nv-n{font-family:var(--nv-mono); font-size:12px; color:#86a58c; margin-right:8px}
.nv-lista a b{font-family:var(--nv-mono); font-size:15px; font-weight:700; text-transform:uppercase; letter-spacing:.04em}
.nv-lista a .nv-d{display:block; font-size:14px; line-height:1.35; color:#86a58c; margin-top:3px}
.nv-lista a[aria-current] b{color:#ffb02e}
.nv-lista a:hover b{color:#ffb02e}
/* afluente (↳): dentro do trecho, recuado, sem estação própria; a linha do rio para na foz */
.nv-lista .nv-afl{position:relative; list-style:none; margin:0; padding:0 0 0 14px}
.nv-lista .nv-afl::before{content:""; position:absolute; left:-19px; width:6px; top:0; bottom:0; background:#070a07}
.nv-lista .nv-afl li::before{display:none}
.nv-lista .nv-afl a{min-height:48px; padding:10px 0 10px 6px; font-size:13px; color:#86a58c}
.nv-lista .nv-afl a b{font-size:13px; color:#d8efdd}
.nv-lista .nv-afl a .nv-d{font-size:13px}
.nv-lista .nv-afl a[aria-current] b,.nv-lista .nv-afl a:hover b{color:#ffb02e}
.nv-sec-afl{display:none}
/* a linha do curso no afluente: um ramo curto na estação da foz */
.nv-curso.afl::after{content:""; position:absolute; right:15px; top:-6px; width:2px; height:10px; background:#7df59a; transform:rotate(-45deg); transform-origin:50% 100%; border-radius:1px}
@media (max-width:419px){ .nv-aqui .nv-afl-lg{display:none} }

.nv-margens{display:grid; grid-template-columns:1fr 1fr; gap:8px}
.nv-margens a{
  display:flex; align-items:center; justify-content:space-between; gap:8px; min-height:44px; padding:0 10px;
  font-family:var(--nv-mono); font-size:12.5px; font-weight:700; text-transform:uppercase; letter-spacing:.02em;
  color:#86a58c; text-decoration:none!important; border:1px solid rgba(116,255,150,.18); border-radius:4px;
}
.nv-margens a span::before{content:"[\00a0"} .nv-margens a span::after{content:"\00a0]"}
.nv-margens a:hover{color:#d8efdd; border-color:rgba(116,255,150,.32)}
.nv-margens a[aria-current]{color:#ffb02e; border-color:#ffb02e}
.nv-margens a:last-child:nth-child(odd){grid-column:1/-1}
.nv-conta{flex:none; min-width:22px; padding:2px 6px; border-radius:999px; background:#ffb02e; color:#120c00; font-size:11px; text-align:center; line-height:1.3}

/* ---------- rodapé: "fatos até dd/mm" (nav.js injeta em todas as páginas) ---------- */
.nv-fatos{font-family:var(--nv-mono); font-size:12px; line-height:1.5; letter-spacing:.04em; color:#5c8a63; margin:14px 0 0}
.nv-fatos::before{content:"//\00a0"}
footer.site-footer .nv-fatos{margin:0}
.rodape .nv-fatos{margin:10px 0 0}
/* fora de um rodapé (depois do "siga o rio"), alinha com o conteúdo */
main > .nv-fatos,.wrap > .nv-fatos{margin:14px 0 0}
body > .nv-fatos{max-width:720px; margin:14px auto 0; padding:0 16px}

/* ---------- siga o rio → próximo trecho (antes do rodapé) ----------
   É a .porta do sistema (base.css): rótulo mono cinza + destino em âmbar sans 18/700 + uma linha do que tem lá.
   Sem caixa e sem borda verde (a caixa verde era herança do terminal); só um filete separa do conteúdo. */
.nv-segue{margin:36px 0 0; border-top:1px solid rgba(116,255,150,.18)}
.nv-segue.solto{max-width:720px; margin:36px auto 0; padding:0 16px; border-top:0}
.nv-segue.solto a{border-top:1px solid rgba(116,255,150,.18)}
.nv-segue a{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:2px 10px; min-height:56px; padding:16px 0 4px;
  color:#d8efdd; text-decoration:none!important;
}
.nv-segue .nv-k2{font-family:var(--nv-mono); font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:#86a58c}
.nv-segue b{font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif; font-size:18px; font-weight:700; line-height:1.3; color:#ffb02e}
.nv-segue a:hover b{text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px}
.nv-segue .nv-d{flex-basis:100%; font-size:14px; line-height:1.4; color:#86a58c; margin-top:2px}

/* ---------- desktop ---------- */
@media (min-width:900px){
  .nv-row{padding:0 16px; gap:16px}
  .nv-aqui{display:none}
  .nv-trechos{display:flex; flex:1; justify-content:flex-end; gap:6px; min-width:0}
  .nv-trechos a{
    flex:none; display:flex; align-items:center; min-height:44px; padding:0 10px;
    font-family:var(--nv-mono); font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.02em; white-space:nowrap;
    color:#86a58c; text-decoration:none!important; border:1px solid rgba(116,255,150,.18); border-radius:4px;
  }
  .nv-trechos a::before{content:"[\00a0"} .nv-trechos a::after{content:"\00a0]"}
  .nv-trechos a .nv-n{margin-right:6px}
  .nv-trechos a:hover{color:#d8efdd; border-color:rgba(116,255,150,.32)}
  .nv-trechos a[aria-current]{background:#ffb02e; color:#120c00; border-color:#ffb02e}
  .nv-zap{
    flex:none; display:flex; align-items:center; min-height:44px; padding:0 10px;
    font-family:var(--nv-mono); font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.02em; white-space:nowrap;
    color:#86a58c; text-decoration:none!important; border:1px solid rgba(116,255,150,.18); border-radius:4px;
  }
  .nv-zap:hover{color:#d8efdd; border-color:rgba(116,255,150,.32)}
  .nv-zap[aria-current]{color:#d8efdd; border-color:#ffb02e}
  .nv-zap:focus-visible{outline:2px solid #ffb02e; outline-offset:2px}
  .nv-bt{min-height:44px; font-size:12px; max-width:230px; overflow:hidden; text-overflow:ellipsis}
  .nv-bt .nv-bt-m{display:none}
  .nv-bt .nv-bt-d{display:inline}
  .nv-bt.nv-bt-margem{border-color:#ffb02e}
  /* menu das margens, ancorado ao botão */
  .nv-mapa{
    inset:auto; top:var(--hdr,57px); right:max(16px, calc((100vw - 1180px) / 2 + 16px)); width:340px;
    max-height:calc(100vh - var(--hdr,57px) - 24px);
    border:1px solid rgba(116,255,150,.32); border-top:0; border-radius:0 0 4px 4px;
  }
  .nv-mapa-in{padding:4px 14px 16px}
  .nv-topo,.nv-sec-rio{display:none}
  .nv-sec-afl{display:block}
  .nv-trechos a.nv-pai{color:#d8efdd; border-color:#ffb02e}
  .nv-trechos a.nv-afl-t{margin-left:-2px}
  .nv-trechos a.nv-afl-t .nv-n{margin-right:5px}
  .nv-mapa .nv-k{margin-top:12px}
  .nv-margens{grid-template-columns:1fr}
  .nv-margens a:last-child:nth-child(odd){grid-column:auto}
  .nv-segue b{font-size:17px}
}
@media (min-width:900px) and (max-width:1099px){ .nv-row .nv-mark .nv-tag{display:none} }
/* no afluente há um item a mais na linha: sem colchetes até caber folgado */
@media (min-width:900px) and (max-width:1179px){
  .nv-trechos.com-afl{gap:4px}
  .nv-trechos.com-afl a{padding:0 7px}
  .nv-trechos.com-afl a::before,.nv-trechos.com-afl a::after{content:none}
}
/* a linha não cabe (nav.js mede; ex.: o botão "margem: A rede em órbita" a 900 px): primeiro os trechos sem colchetes,
   depois, se ainda não couber, o link BolsoZap sai da linha (continua no mapa) */
.nv-row.nv-aperta .nv-trechos{gap:4px}
.nv-row.nv-aperta .nv-trechos a{padding:0 7px}
.nv-row.nv-aperta .nv-trechos a::before,.nv-row.nv-aperta .nv-trechos a::after{content:none}
.nv-row.nv-sem-zap .nv-zap{display:none}
@media (min-width:1100px){ .nv-row .nv-mark .nv-logo{height:20px; width:204px} }
/* nome curto (se o nav.js emitir .nv-curto): escondido por padrão; na linha apertada ele entra no lugar do nome */
.nv-curto{display:none}
.nv-row.nv-aperta .nv-curto{display:inline}
.nv-row.nv-aperta .nv-curto + .nv-nome{display:none}