/* ============================================================
   caminhos.css — estilo compartilhado das páginas editoriais de
   rotas de peregrinação/longo curso (Casa de Roma).
   Cada página linka este arquivo e sobrescreve só os acentos
   (--accent / --accent2) num <style> inline curto, se quiser cor
   própria. Sem isso, cai no acento padrão (ferrugem + verde).
   ============================================================ */
/* Fontes auto-hospedadas (assets/fonts/, SIL OFL — ver CINZEL-OFL.txt e
   MONTSERRAT-OFL.txt), no lugar de fonts.googleapis.com: a folha do Google
   bloqueava a renderizacao por 850-900 ms em 4G (auditoria de lancamento
   2026-09-15, secao 12). Sao fontes variaveis (eixo wght); os nomes de familia
   sao os mesmos que o CSS abaixo ja pedia, entao nada mais muda. Mesmos
   arquivos, com hash de conteudo no nome, que index.html ja usava. */
@font-face{font-family:'Cinzel';src:url('assets/fonts/cinzel-500-700.5da695bc29.woff2') format('woff2');font-weight:500 700;font-display:swap}
@font-face{font-family:'Montserrat';src:url('assets/fonts/montserrat-400-700.5b290cfa05.woff2') format('woff2');font-weight:400 700;font-display:swap}
:root{
  --font-serif:'Cinzel',Georgia,serif;
  --font-sans:'Montserrat',system-ui,-apple-system,sans-serif;
  --r-sm:6px;--r-md:12px;--r-lg:20px;--r-xl:28px;
  /* Casa de Roma — paleta oficial */
  --basalto:#2B2B2B;--mineral:#6E6E6E;--porta:#7FA8B8;--ferrugem:#B45F3C;--verde:#4F6A4F;--bege:#F5F5F0;
  /* Acentos da página (padrão: ferrugem = estrada de terra + verde = mata).
     Sobrescreva --accent/--accent2 num <style> inline para dar cor própria à rota. */
  --accent:#a95938;--accent-soft:#f6e9e3;--accent2:#4F6A4F;--accent2-soft:#e8eee7;
  /* Tokens de tema (claro) */
  --bg:var(--bege);--bg-2:#efeee7;--surface:#ffffff;--border:#e3e1d8;--border-soft:#ecebe3;
  --text:var(--basalto);--text-2:#57574f;--text-3:#65655d;
  --nav-bg:rgba(245,245,240,.82);--nav-border:#e3e1d8;
  --shadow:0 1px 2px rgba(43,43,43,.04),0 12px 34px -12px rgba(43,43,43,.14);
  --shadow-lg:0 2px 6px rgba(43,43,43,.05),0 30px 60px -22px rgba(43,43,43,.28);
}
[data-theme="dark"]{
  --accent:#d0805f;--accent-soft:#33221b;--accent2:#8aa585;--accent2-soft:#232c22;
  --bg:#141517;--bg-2:#191a1d;--surface:#202225;--border:#31332e;--border-soft:#282a26;
  --text:#eae8e2;--text-2:#b1aea6;--text-3:#9d9b92;
  --nav-bg:rgba(20,21,23,.72);--nav-border:#2c2e2a;
  --shadow:0 1px 2px rgba(0,0,0,.3),0 14px 40px -14px rgba(0,0,0,.55);
  --shadow-lg:0 2px 8px rgba(0,0,0,.4),0 34px 70px -22px rgba(0,0,0,.7);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--font-sans);background:var(--bg);color:var(--text);line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:clip}
a{text-decoration:none;color:inherit}
img{max-width:100%}
.wrap{max-width:1080px;margin:0 auto;padding:0 24px}
.wrap-narrow{max-width:760px;margin:0 auto;padding:0 24px}
/* Skip link (visível só no foco) — hub /caminhos. */
.skip-link{position:absolute;top:-200px;left:12px;z-index:1000;padding:10px 16px;border-radius:8px;background:var(--text);color:var(--bg);font-weight:600;font-size:14px}.skip-link:focus{top:12px;outline:3px solid var(--accent);outline-offset:2px}main:focus{outline:none}
.serif{font-family:var(--font-serif)}

/* ---------- NAV ---------- */
.nav{position:sticky;top:0;z-index:50;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);background:var(--nav-bg);border-bottom:1px solid var(--nav-border)}
.nav-in{max-width:1080px;margin:0 auto;padding:12px 24px;display:flex;align-items:center;gap:14px}
.brand{display:flex;flex-direction:column;line-height:1.1}
.brand b{font-family:var(--font-serif);font-weight:600;font-size:15px;letter-spacing:.06em;color:var(--text)}
.brand span{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-3);margin-top:2px}
.nav-sp{flex:1}
.nav-links{display:flex;gap:6px}
.nav-links a{font-size:12.5px;font-weight:600;color:var(--text-2);padding:7px 12px;border-radius:var(--r-sm);transition:.18s}
.nav-links a:hover{background:var(--bg-2);color:var(--text)}
.tbtn{background:none;border:1px solid var(--border);border-radius:var(--r-sm);color:var(--text);font-size:15px;cursor:pointer;padding:6px 10px;line-height:1;transition:.18s}
.tbtn:hover{background:var(--bg-2)}
/* A nav precisa de ~950px para caber os 9 links das paginas de rota, mas so'
   sumia abaixo de 640px -- entao de 641 a 950px ela estourava a viewport e a
   pagina inteira rolava na horizontal (medido em 21/09/2026 na /peitaberaba e
   confirmado na /pefurnasdobomjesus, que tambem tem 9 links). Esconder a nav
   nessa faixa tiraria o menu de tablet e de laptop pequeno; deixa-la quebrar
   em duas linhas mantem todo link alcancavel e nao esconde nada. Abaixo de
   640px o comportamento nao muda: continua oculta, como sempre foi. */
@media(max-width:960px){
  /* o espacador empurraria os links para uma linha propria e o botao de tema
     para uma terceira -- nav de 174px de altura, medido. Zerado o espacador e
     deixando os links encolherem, eles quebram DENTRO do espaco que sobra
     entre a marca e o botao, que continuam na mesma linha. */
  .nav-sp{flex:0 0 0;width:0}
  .nav-links{flex:1 1 auto;min-width:0;flex-wrap:wrap;justify-content:flex-end;row-gap:4px}}
@media(max-width:640px){.nav-links{display:none}}

/* ---------- HERO ---------- */
.hero{position:relative;overflow:hidden;padding:100px 0 64px;text-align:center;isolation:isolate}
.hero-aura{position:absolute;inset:-20% -10% 0;z-index:-1;filter:blur(70px);opacity:.6;pointer-events:none}
.hero-aura span{position:absolute;display:block;border-radius:50%;mix-blend-mode:multiply;animation:drift 22s ease-in-out infinite}
[data-theme="dark"] .hero-aura span{mix-blend-mode:screen;opacity:.5}
.a1{width:44vw;height:44vw;left:6%;top:2%;background:var(--accent)}
.a2{width:40vw;height:40vw;right:4%;top:-4%;background:var(--accent2)}
.a3{width:36vw;height:36vw;left:38%;top:26%;background:var(--porta);animation-delay:-13s}
@keyframes drift{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(4%,5%) scale(1.08)}66%{transform:translate(-4%,2%) scale(.95)}}
.hero-contour{position:absolute;inset:0;z-index:-1;opacity:.5;pointer-events:none;color:var(--border)}
/* Personagens da Dicas Outdoor no hero (assets/personagens/).
   Mesma regra das imagens de card (sec. 17 do Manual_Geracao_Imagens): a arte e
   decorativa, o texto vem sempre por cima, e existe cor de fundo se ela nao
   carregar. O scrim radial abre o centro pro h1 e mantem a arte visivel nas
   bordas — a arte foi composta com o personagem no terco direito. */
.hero-personagem{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none;background:var(--bg)}
.hero-personagem img,.hero-personagem video{width:100%;height:100%;object-fit:cover;object-position:center 42%;display:block;opacity:.46}
[data-theme="dark"] .hero-personagem img,[data-theme="dark"] .hero-personagem video{opacity:.34}
/* O scrim abre o miolo pro texto. A elipse acompanha a COLUNA de texto (~62ch),
   nao a largura da tela: em monitor largo um scrim proporcional cobriria a arte
   inteira e o personagem sumiria. Por isso o raio vai em ch/px, nao em %. */
.hero-personagem::after{content:"";position:absolute;inset:0;background:
  radial-gradient(46rem 22rem at 50% 44%,var(--bg) 0%,rgba(0,0,0,.0) 72%),
  linear-gradient(to bottom,rgba(0,0,0,0) 58%,var(--bg) 100%)}
/* Video no ar: a foto sai de cena. E' regra de CSS, e nao style num <img>,
   porque a foto pode ser anexada DEPOIS que o video comecou a tocar. */
.hero-personagem.com-video img{display:none}
/* O video e' enfeite: quem pediu menos movimento ve so o poster. */
@media(prefers-reduced-motion:reduce){.hero-personagem video{display:none}}
/* Arte vertical: o personagem esta no TERCO INFERIOR, entao o recorte puxa
   pra baixo. Na horizontal ele esta a direita. A classe vem do JS, que e
   quem escolheu a arte — nao da largura da tela. */
.hero-personagem.vertical img,.hero-personagem.vertical video{object-position:center 74%}
@media(max-width:640px){.hero-personagem:not(.vertical) img,.hero-personagem:not(.vertical) video{object-position:72% 42%}}
.eyebrow{display:inline-block;font-size:11.5px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--accent);background:var(--surface);border:1px solid var(--border);padding:7px 15px;border-radius:100px;box-shadow:var(--shadow)}
.hero h1{font-family:var(--font-serif);font-weight:600;font-size:clamp(32px,6vw,58px);line-height:1.14;letter-spacing:.005em;margin:26px auto 0;max-width:18ch;overflow-wrap:anywhere;text-wrap:balance}
.hero h1 i{font-style:normal;color:var(--accent)}
.hero p.lead{font-size:clamp(16px,2.2vw,19px);color:var(--text-2);max-width:56ch;margin:22px auto 0}
.hero-sub{font-size:13px;color:var(--text-3);margin-top:14px;letter-spacing:.02em}
.hero-stats{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:28px}
.hstat{font-size:12.5px;font-weight:700;color:var(--text-2);background:var(--surface);border:1px solid var(--border);padding:7px 14px;border-radius:100px}
.hstat b{color:var(--text)}
.hero-cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:30px}
/* Sobre foto (auditoria 2026-09-15 §8: p10 1,9-2,3:1 em cinza): branco quase
   cheio com sombra, e a pill com fundo escuro real em vez de vidro a 14%.
   Especificidade 0,3,0 de propósito — vence o `.hero-photo .eyebrow` inline
   de cada rota sem tocar em 19 arquivos. */
.hero.hero-photo .eyebrow{background:rgba(16,18,15,.62);border-color:rgba(255,255,255,.34);color:#fff}
.btn{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:14.5px;padding:13px 22px;border-radius:100px;border:1px solid transparent;cursor:pointer;transition:transform .18s,box-shadow .18s,background .18s}
.btn:hover{transform:translateY(-2px)}
.btn-primary{background:var(--text);color:var(--bg);box-shadow:var(--shadow)}
.btn-primary:hover{box-shadow:var(--shadow-lg)}
.btn-ghost{background:var(--surface);color:var(--text);border-color:var(--border)}
.btn-ghost:hover{border-color:var(--text-3)}
.btn-accent{background:var(--accent);color:#fff;box-shadow:var(--shadow)}
[data-theme="dark"] .btn-accent{color:#141517}
.btn-accent:hover{box-shadow:var(--shadow-lg)}
.scroll-cue{margin-top:44px;display:inline-flex;flex-direction:column;align-items:center;gap:6px;color:var(--text-3);font-size:11px;letter-spacing:.16em;text-transform:uppercase}
.scroll-cue svg{animation:bob 2.4s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}}

/* Hero de pagina de rota no celular (2026-09-02). Em 375px o hero media 1.112px --
   uma tela e meia antes do primeiro dado. O lead sozinho ocupava 230px (9 linhas) e
   o respiro vertical, 200px: os dois foram dimensionados no desktop e nunca tiveram
   recorte proprio no mobile.
   NAO se usa `-webkit-line-clamp` aqui, de proposito: o lead e' o resumo que o leitor
   (e o buscador) usa pra decidir se a rota e' pra ele, e cortar com reticencias
   esconderia justamente o numero medido que a pagina existe pra dar. O que encolhe e'
   o espaco em volta e a entrelinha -- nenhuma palavra sai da tela, e o corpo fica em
   16px, que e' o piso de leitura no celular.
   Tudo preso a `.hero-photo` pra nao mexer no hero do hub (/caminhos), que ja tem
   recorte proprio em `body.do-hub .hero`. O seletor `.hero.hero-photo` precisa dos
   dois nomes: o padding de 130px vive no <style> de cada pagina, depois deste
   arquivo, e so' perde para uma especificidade maior (0,2,0). */
@media(max-width:560px){
  .hero.hero-photo{padding:88px 0 52px}
  .hero-photo h1{margin-top:20px}
  .hero-photo p.lead{line-height:1.5;margin-top:18px}
  .hero-photo .hero-sub{margin-top:12px}
  .hero-photo .hero-stats{margin-top:20px}
  .hero-photo .hero-cta{margin-top:22px}
  .hero-photo .scroll-cue{margin-top:26px}
}

/* ---------- SEÇÃO GENÉRICA ---------- */
.sec{padding:56px 0;border-top:1px solid var(--border-soft)}
.sec-head{max-width:640px;margin:0 auto 32px;text-align:center}
.sec-kicker{font-size:11.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--text-3)}
.sec-head h2{font-family:var(--font-serif);font-weight:600;font-size:clamp(24px,3.8vw,36px);margin-top:12px;line-height:1.22;overflow-wrap:anywhere;text-wrap:balance}
.sec-head p{color:var(--text-2);margin-top:14px;font-size:15.5px}

/* ---------- HISTÓRIA ---------- */
.historia p{font-size:clamp(15.5px,1.9vw,17.5px);line-height:1.85;color:var(--text);margin-top:18px}
.historia p:first-of-type{margin-top:0}
.historia p:first-of-type::first-letter{font-family:var(--font-serif);font-size:3.4em;float:left;line-height:.82;padding:.05em .08em 0 0;color:var(--accent)}

/* ---------- OS PERCURSOS (pagina de LUGAR com mais de uma rota) ----------
   Morava inline so' nas duas paginas do PETAR; as outras cinco que usam
   .percursos (Canastra Parte Alta, Caverna do Diabo, Furnas, Carlos Botelho,
   Bananal) publicaram os cartoes sem estilo -- o titulo colava no texto. */
.percursos{display:grid;gap:14px;margin-top:8px}
.percursos .p{border:1px solid var(--border);border-radius:14px;padding:16px 18px;background:var(--surface)}
.percursos .p>b:first-child{display:block;font-family:var(--font-serif);font-size:16px;margin-bottom:4px}
.percursos .p .meta{font-size:12.5px;color:var(--text-2);letter-spacing:.02em;margin-top:6px}
.percursos+.historia{margin-top:32px}

/* ---------- VINHETAS ---------- */
/* .essenciais -- a caixa de destaque no formato dos guias publicados, que
   substituiu as 3 vinhetas de "Por que ir" (regua editorial de 2026-09-22).
   Nasceu inline em peitaberaba.html, a pagina-piloto, e subiu para ca' quando
   virou padrao: componente de pagina de rota mora na folha compartilhada, senao
   cada retrofit recopia o CSS e eles divergem em silencio.
   Duas colunas no desktop, uma no celular -- medido a 375px sem overflow. */
.essenciais{border:1px solid var(--border);border-radius:16px;background:var(--surface);padding:22px 24px;max-width:760px;margin:0 auto}
.essenciais ul{list-style:none;margin:0;padding:0;display:grid;gap:13px}
@media(min-width:760px){.essenciais ul{grid-template-columns:1fr 1fr;gap:13px 30px}}
.essenciais li{display:flex;gap:10px;font-size:clamp(14px,1.75vw,15px);line-height:1.6;color:var(--text-2)}
.essenciais li::before{content:"\273B";color:var(--accent);flex:none;line-height:1.6}
.vign{display:flex;flex-direction:column;gap:16px;max-width:760px;margin:0 auto}
.vign .v{background:var(--surface);border:1px solid var(--border);border-left:3px solid var(--mineral);border-radius:var(--r-md);padding:20px 24px;font-size:clamp(15px,1.9vw,16.5px);line-height:1.62;color:var(--text);box-shadow:var(--shadow)}
.vign .v b.who{display:block;font-family:var(--font-serif);font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--text-3);margin-bottom:8px}

/* ---------- FICHA TÉCNICA ---------- */
.ficha-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px}
/* Um quadro sozinho (rota de um municipio so, na secao de cobertura vegetal):
   sem isto o auto-fit o estica pela largura inteira e ele vira uma caixa vazia
   com um numero perdido no meio. A segunda coluna existe para a `.ficha-note`
   (grid-column:1/-1) continuar ocupando a largura toda -- com uma coluna so, a
   nota virava uma tira de 340px de largura e 259px de altura. */
.ficha-item{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);padding:16px 18px;box-shadow:var(--shadow)}
.ficha-lbl{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text-3)}
.ficha-val{font-family:var(--font-serif);font-size:1.3rem;font-weight:600;color:var(--text);margin-top:6px;line-height:1.28;overflow-wrap:anywhere;hyphens:auto}
.combina-val{font-family:var(--font-sans,inherit);font-size:14px;font-weight:600;line-height:1.4}
.ficha-note{grid-column:1/-1;font-size:13.5px;color:var(--text-2);margin-top:2px;line-height:1.6}

/* ---------- CIDADES DO TRAJETO (timeline de waypoints) ---------- */
.trajeto{max-width:640px;margin:0 auto;position:relative;padding-left:6px}
.trajeto::before{content:"";position:absolute;left:12px;top:10px;bottom:10px;width:2px;background:linear-gradient(var(--accent),var(--accent2));opacity:.35;border-radius:2px}
.tj-city{position:relative;display:flex;align-items:baseline;gap:14px;padding:9px 0 9px 34px}
.tj-city::before{content:"";position:absolute;left:6px;top:14px;width:14px;height:14px;border-radius:50%;background:var(--surface);border:2px solid var(--accent);box-shadow:0 0 0 4px var(--bg)}
.tj-city.inicio::before,.tj-city.final::before{background:var(--accent);width:16px;height:16px;left:5px}
.tj-city.final::before{background:var(--accent2);border-color:var(--accent2)}
/* Ícone por cidade (opcional) -- substitui a bolinha lisa quando a cidade tem
   referência real. Cidades sem ícone continuam com o ponto padrão acima. */
.tj-city.tem-icon{padding-left:40px}
.tj-city.tem-icon::before{display:none}
.tj-icon{position:absolute;left:-1px;top:8px;width:26px;height:26px;border-radius:50%;background:var(--surface);border:2px solid var(--accent);box-shadow:0 0 0 4px var(--bg);display:flex;align-items:center;justify-content:center;font-size:13px;line-height:1;z-index:1;cursor:help}
.tj-city.final .tj-icon{border-color:var(--accent2)}
.tj-nome{font-weight:600;font-size:15px;color:var(--text)}
.tj-nome a:hover{color:var(--accent);text-decoration:underline}
.tj-role{font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text-3);white-space:nowrap}
.tj-role.r-inicio{color:var(--accent)}
.tj-role.r-final{color:var(--accent2)}
.trajeto-note{max-width:640px;margin:20px auto 0;font-size:12.5px;color:var(--text-3);text-align:center;font-style:italic;line-height:1.6}

/* ---------- RAMAIS (grade, p/ rotas-rede: Caminho da Fé, Franciscana) ---------- */
.ramais-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px}
.ramal-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);padding:14px 16px;box-shadow:var(--shadow)}
.ramal-card.principal{border-color:var(--accent);background:var(--accent-soft)}
.ramal-nome{font-weight:700;font-size:13.5px;color:var(--text)}
.ramal-rota{font-size:12px;color:var(--text-2);margin-top:4px}
.ramal-meta{display:flex;gap:8px;margin-top:9px;align-items:center}
.ramal-km{font-size:12px;font-weight:700;color:var(--text-3)}

/* ---------- BIOMAS (cor da página dedicada) ----------
   Cada página dedicada pode setar <html data-biome="cerrado"> e a paleta
   de acento reflete o bioma. NÃO usar no hub /caminhos (lá é sempre padrão).
   Só o acento muda — o resto do tema (bg/texto) segue claro/escuro normal. */
[data-biome="mata-atlantica"]{--accent:#3f7a4e;--accent-soft:#e6efe7;--accent2:#2f6a5a;--accent2-soft:#e2eeeb}
[data-theme="dark"][data-biome="mata-atlantica"]{--accent:#7cc08c;--accent-soft:#1e3320;--accent2:#6fb3a0;--accent2-soft:#16302a}
[data-biome="cerrado"]{--accent:#8c6124;--accent-soft:#f4ecdd;--accent2:#8a6a3a;--accent2-soft:#efe8dc}
[data-theme="dark"][data-biome="cerrado"]{--accent:#e0a860;--accent-soft:#33260f;--accent2:#c6a878;--accent2-soft:#2e2718}
[data-biome="caatinga"]{--accent:#b1553c;--accent-soft:#f5e7e1;--accent2:#7e8a5a;--accent2-soft:#eceee0}
[data-theme="dark"][data-biome="caatinga"]{--accent:#e08a6a;--accent-soft:#33201b;--accent2:#b3c088;--accent2-soft:#262a16}
[data-biome="amazonia"]{--accent:#2f7d6a;--accent-soft:#e0efe9;--accent2:#3f7a4e;--accent2-soft:#e6efe7}
[data-theme="dark"][data-biome="amazonia"]{--accent:#5fc0a8;--accent-soft:#12302a;--accent2:#7cc08c;--accent2-soft:#1e3320}
[data-biome="pampa"]{--accent:#826728;--accent-soft:#f3edda;--accent2:#6a7d55;--accent2-soft:#e9ede0}
[data-theme="dark"][data-biome="pampa"]{--accent:#d9b45f;--accent-soft:#302810;--accent2:#a5c07f;--accent2-soft:#242a17}
[data-biome="serra"]{--accent:#4e6f7f;--accent-soft:#e6eef2;--accent2:#4F6A4F;--accent2-soft:#e8eee7}
[data-theme="dark"][data-biome="serra"]{--accent:#8fb3c6;--accent-soft:#1a2a33;--accent2:#8aa585;--accent2-soft:#232c22}
[data-biome="litoral"]{--accent:#3E7186;--accent-soft:#e2edf1;--accent2:#357767;--accent2-soft:#e2efec}
[data-theme="dark"][data-biome="litoral"]{--accent:#7FA8B8;--accent-soft:#20313a;--accent2:#6fbfae;--accent2-soft:#163029}

/* ---------- CLIMA (tempo real, Open-Meteo — sem chave, sem custo) ---------- */
.clima-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;max-width:640px;margin:0 auto}
.clima-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:20px;text-align:center;box-shadow:var(--shadow);min-height:150px;display:flex;flex-direction:column;justify-content:center}
.clima-local{font-size:10.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--text-3)}
.clima-icon{width:60px;height:60px;margin:8px auto}
.clima-icon svg{width:100%;height:100%}
.clima-temp{font-family:var(--font-serif);font-size:2rem;font-weight:700;color:var(--text);line-height:1.1}
.clima-desc{font-size:12.5px;color:var(--text-2);margin-top:2px}
.clima-loading,.clima-err{color:var(--text-3);font-size:12.5px;margin-top:10px}
.clima-note{text-align:center;font-size:11.5px;color:var(--text-3);margin-top:16px;font-style:italic}

/* ícones de clima animados (SVG inline, sem gif de terceiro) */
.ci-sun-core{animation:ci-pulse 3s ease-in-out infinite;transform-origin:center}
.ci-sun-rays{transform-origin:32px 32px;animation:ci-spin 28s linear infinite}
@keyframes ci-pulse{0%,100%{opacity:1}50%{opacity:.8}}
@keyframes ci-spin{from{transform:rotate(0)}to{transform:rotate(360deg)}}
.ci-cloud{animation:ci-drift 5s ease-in-out infinite}
@keyframes ci-drift{0%,100%{transform:translateX(0)}50%{transform:translateX(3px)}}
.ci-drop{animation:ci-fall 1s linear infinite;opacity:0}
.ci-drop:nth-child(2){animation-delay:.3s}.ci-drop:nth-child(3){animation-delay:.6s}
@keyframes ci-fall{0%{transform:translateY(-3px);opacity:0}25%{opacity:1}90%{opacity:.2}100%{transform:translateY(7px);opacity:0}}
.ci-bolt{animation:ci-flash 2.4s ease-in-out infinite;transform-origin:center}
@keyframes ci-flash{0%,45%,100%{opacity:1}50%,58%{opacity:.2}}
.ci-fog-line{animation:ci-fogmove 3.8s ease-in-out infinite;opacity:.7}
.ci-fog-line:nth-child(2){animation-delay:.4s}.ci-fog-line:nth-child(3){animation-delay:.8s}
@keyframes ci-fogmove{0%,100%{transform:translateX(0);opacity:.55}50%{transform:translateX(5px);opacity:.9}}
@media(prefers-reduced-motion:reduce){
  .ci-sun-core,.ci-sun-rays,.ci-cloud,.ci-drop,.ci-bolt,.ci-fog-line{animation:none}
}

/* ---------- BADGES DE ATIVIDADE (peregrinação × aventura) ---------- */
.atv-badge{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;padding:2px 8px;border-radius:8px;white-space:nowrap}
.atv-peregrinacao{background:#f3e9d6;color:#9a6a1e}
.atv-trekking{background:#e3f2e3;color:#2e7d32}
.atv-bikepacking{background:#e2edf1;color:#2b6d84}
.atv-multi{background:#efe7f3;color:#6a4a8a}
/* As quatro abaixo entraram com a expansão do catálogo (PARNA, Estrada Real,
   Trilhas SP, Ciclorrotas SP) e nunca ganharam cor: a badge saía sem fundo
   nenhum, parecendo texto solto. Corrigido em 2026-08-30. */
.atv-parna{background:#e0efe9;color:#256e5c}
.atv-estrada_real{background:#f1e9de;color:#8a6a3a}
.atv-trilha_sp{background:#e6eef2;color:#3a6b80}
.atv-ciclorrota_sp{background:#e2edf1;color:#2b6d84}
/* Ciclorrotas PR (Pedala Paraná) -- sem cor ate' 2026-09-29, como as quatro acima. */
.atv-ciclorrota_pr{background:#e3f2fd;color:#1565c0}
/* Off-road 4x4 -- entrou em 2026-09-01 com a Serra da Canastra. Terra e poeira. */
.atv-offroad{background:#f0e6dd;color:#8a5a32}
[data-theme="dark"] .atv-peregrinacao{background:#332810;color:#e0b866}
[data-theme="dark"] .atv-trekking{background:#1a3d1d;color:#7ec98a}
[data-theme="dark"] .atv-bikepacking{background:#173039;color:#7cb8cc}
[data-theme="dark"] .atv-multi{background:#281a33;color:#c49ae0}
[data-theme="dark"] .atv-parna{background:#12302a;color:#6fc7ae}
[data-theme="dark"] .atv-estrada_real{background:#2e2718;color:#d0b076}
[data-theme="dark"] .atv-trilha_sp{background:#1a2a33;color:#8fb3c6}
[data-theme="dark"] .atv-ciclorrota_sp{background:#173039;color:#7cb8cc}
[data-theme="dark"] .atv-ciclorrota_pr{background:#12314a;color:#7db8e8}
[data-theme="dark"] .atv-offroad{background:#33241a;color:#d99e6a}

/* Rota anunciada oficialmente mas nunca confirmada como implementada (sem GPX/trajeto oficial). */

/* ---------- BADGES DE DIFICULDADE ---------- */
.dif-badge{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;padding:2px 8px;border-radius:8px}
.dif-leve{background:#e3f2e3;color:#2e7d32}
.dif-media{background:#fdf0e0;color:#9a5a00}
.dif-puxada{background:#fbe4e4;color:#b71c1c}
.dif-extrema{background:#f3e5f5;color:#6a1b9a}
[data-theme="dark"] .dif-leve{background:#1a3d1d;color:#7ec98a}
[data-theme="dark"] .dif-media{background:#3d2000;color:#ffa726}
[data-theme="dark"] .dif-puxada{background:#3d0a15;color:#f57090}
[data-theme="dark"] .dif-extrema{background:#2c0d3d;color:#d98af5}
/* rota sem nivel ("não se aplica" ou "–"), 2026-10-12: neutro, sem cor de faixa */
.dif-sem{background:#eceae4;color:#57574f;text-transform:none}
[data-theme="dark"] .dif-sem{background:#2a2b28;color:#b1aea6}

/* ---------- PREPARO (2 colunas + bloco de terreno) ---------- */
.prep-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.prep-note{grid-column:1/-1;margin-top:6px;padding:14px 18px;background:var(--accent2-soft);border-radius:var(--r-md);font-size:13.5px;color:var(--text-2);line-height:1.6}
/* "Onde você vai caminhar" — terreno/bioma/paisagem (full-width, acima das 2 colunas) */
.prep-terreno{grid-column:1/-1}
.prep-terreno h3{font-family:var(--font-serif);font-weight:700;font-size:18px;margin-bottom:10px}
.prep-terreno-intro{font-size:14px;color:var(--text-2);line-height:1.6;margin-bottom:14px;max-width:60ch}
.terreno-list{list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px}
.terreno-list li{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);padding:14px 16px;box-shadow:var(--shadow)}
.terreno-list li>b{display:block;font-size:14.5px;color:var(--text);margin-bottom:5px}
.terreno-list li span{font-size:13px;color:var(--text-2);line-height:1.55}
.atualizacao-info{margin-top:14px;font-size:12.5px;color:var(--text-3,var(--text-2));display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.atualizacao-info .atualizacao-sep{opacity:.5}
@media(max-width:720px){.prep-grid{grid-template-columns:1fr;gap:22px}}

/* ---------- TRAJETO COMPACTO (secundário — o mapa PNG é o principal) ---------- */
/* Decisão 2026-07-16: o mapa mostra as cidades visualmente; a lista fica como texto
   (SEO + leitor de tela + gancho pro Dicas Outdoor), enxuta, sem competir com o mapa. */
.trajeto.compact{max-width:760px;padding-left:0;display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:center}
.trajeto.compact::before{display:none}
.trajeto.compact .tj-city{padding:0;display:inline-flex;align-items:center;gap:6px}
.trajeto.compact .tj-city::before,.trajeto.compact .tj-icon{display:none}
.trajeto.compact .tj-city:not(:last-child) .tj-nome::after{content:"→";margin-left:8px;color:var(--text-3);font-weight:400}
.trajeto.compact .tj-nome{font-weight:600;font-size:14px;color:var(--text-2)}
.trajeto.compact .tj-city.inicio .tj-nome,.trajeto.compact .tj-city.final .tj-nome{color:var(--accent)}
.trajeto.compact .tj-city.final .tj-nome{color:var(--accent2)}
.trajeto.compact .tj-role{display:none}

/* ---------- ELO (produto) ---------- */
.elo-card{background:linear-gradient(135deg,var(--accent2-soft),var(--surface) 45%,var(--accent-soft));border:1px solid var(--border);border-radius:var(--r-xl);padding:clamp(30px,5vw,52px);text-align:center;box-shadow:var(--shadow-lg);position:relative;overflow:hidden}
.elo-card h2{font-family:var(--font-serif);font-weight:600;font-size:clamp(22px,3.2vw,32px);line-height:1.2;max-width:26ch;margin:14px auto 0}
.elo-card p{color:var(--text-2);font-size:15.5px;max-width:56ch;margin:16px auto 0}
.elo-flow{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;margin-top:28px}
.elo-node{display:inline-flex;align-items:center;gap:9px;font-weight:600;font-size:14px;color:#fff;padding:12px 20px;border-radius:100px;box-shadow:var(--shadow);transition:transform .18s,box-shadow .18s}
.elo-node:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}
.elo-node.n1{background:var(--accent)}.elo-node.n2{background:var(--accent2)}
[data-theme="dark"] .elo-node{color:#141517}

/* ---------- QUEM JA FEZ (contagem anonima) ----------
   Era a `.relato-box`: caixa grande, centro da pagina, com titulo em serifa e
   botao proprio. Virou esta linha em 2026-09-01 (pedido do usuario) quando o
   botao de marcar subiu pro hero -- a contagem sozinha nao merece uma secao, e
   um numero baixo gritado em corpo 19 trabalha contra a rota. */
.jafui-mini{max-width:640px;margin:0 auto;text-align:center;font-size:12.5px;line-height:1.6;color:var(--text-3)}

/* ---------- FONTES ---------- */
.fontes-list{max-width:560px;margin:0 auto;display:flex;flex-direction:column;gap:10px}
.fontes-list a{display:flex;justify-content:space-between;align-items:center;gap:10px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);padding:13px 18px;font-size:13.5px;font-weight:600;color:var(--text);transition:.18s}
.fontes-list a:hover{border-color:var(--accent);color:var(--accent)}
/* O rotulo da fonte e' um dominio, e dominio nao tem onde quebrar:
   `guiadeareasprotegidas.sp.gov.br` sao 182px numa tela de 320, e a pagina
   inteira rolava na horizontal (+8px na /pesmcaminhosdomar; 8 paginas citam
   esse mesmo dominio). Achado pelo test_overflow_horizontal.js na primeira
   vez que ele rodou, em 22/09/2026 -- ninguem tinha visto a olho.
   As duas linhas abaixo sao REDUNDANTES HOJE, e isso foi medido: tirando so'
   o `flex-wrap` o teste passa, tirando so' o `overflow-wrap` tambem passa, e
   so' tirando AS DUAS o estouro volta. Ficam as duas de proposito e em ordem:
   o `flex-wrap` joga o dominio para uma linha propria, onde ele cabe inteiro
   e legivel; o `overflow-wrap` so' entra se um dia aparecer dominio maior que
   a linha toda, quebrando no meio da palavra -- feio, mas melhor que rolar. */
.fontes-list small{font-weight:400;color:var(--text-3);min-width:0;overflow-wrap:anywhere}
.fontes-list a{flex-wrap:wrap}

/* ---------- MAPA DA ROTA (exposto) + LIGHTBOX ---------- */
/* MUDOU em 2026-08-30: de 2026-07-16 até aqui a página não tinha PNG inline — o
   mapa só existia dentro do lightbox, atrás de um botão. Quem chegava na página
   não via mapa nenhum. Agora ele fica exposto (largura total da coluna, altura
   limitada pra não empurrar o resto da página pra baixo) e o lightbox virou só a
   ampliação. Ao lado, o download direto em PNG. */
.mapa-verificado{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:clamp(22px,4vw,32px) clamp(20px,4vw,30px);box-shadow:var(--shadow)}
/* Pagina de LUGAR com mais de um percurso empilha blocos de mapa (PE Furnas do
   Bom Jesus, 2026-09-23): sem isto os tres cartoes encostam um no outro. */
.mapa-verificado+.mapa-verificado{margin-top:18px}
.mapa-selo{display:inline-flex;align-items:center;gap:6px;background:color-mix(in srgb,var(--accent) 14%,transparent);color:color-mix(in srgb,var(--accent) 82%,#000);border:1px solid color-mix(in srgb,var(--accent) 40%,transparent);border-radius:999px;padding:5px 13px;font-size:13px;font-weight:600;margin-bottom:16px}
.mapa-desc{font-size:14.5px;color:var(--text-2);line-height:1.55;margin:0 0 4px}
.mapa-nota{font-size:13px;color:var(--text-2);margin-top:14px}
/* A figura do mapa. object-fit:contain preserva o traçado inteiro (nada de corte);
   o max-height evita que um PNG muito alto tome a tela toda no celular. */
.mapa-figura{margin:18px 0 0;display:block}
.mapa-img{display:block;width:100%;max-height:min(70vh,620px);object-fit:contain;background:var(--bg);border:1px solid var(--border);border-radius:var(--r-md)}
.mapa-cap{margin-top:8px;font-size:12.5px;color:var(--text-3);text-align:center}
/* O mapa passou a ser embrulhado em <figure> + <button> (caminhos.js, renderMapa).
   O botao existe por acessibilidade -- ampliar era acao so' de mouse, porque <img>
   nao recebe foco de teclado -- e AQUI ele e' zerado de proposito: a aparencia do
   mapa em todas as paginas de rota tem de continuar exatamente a mesma. O que o
   botao acrescenta e' foco, nao moldura. */
.mapa-fig{margin:0}
.mapa-ampliar-img{display:block;width:100%;padding:0;border:0;background:none;cursor:zoom-in;font:inherit;color:inherit}
.mapa-ampliar-img:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:var(--r-md)}
/* grupo de botões — empilha no mobile (responsivo) */
.mapa-acoes{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
/* GPX e Wikiloc do traçado próprio, na linha de baixo do card (Pedido E, 28/10/2026) */
.mapa-acoes.mapa-acoes-gpx{margin-top:10px}
a.mapa-abrir{text-decoration:none}
.mapa-abrir,.mapa-baixar{display:inline-flex;align-items:center;justify-content:center;gap:7px;border-radius:999px;padding:11px 20px;font-size:14px;font-weight:600;cursor:pointer;font-family:inherit;text-align:center;transition:border-color .18s,color .18s,background .18s,box-shadow .18s;flex:1 1 auto;min-width:0}
.mapa-abrir{background:none;border:1px solid var(--border);color:var(--text)}
.mapa-abrir:hover{border-color:var(--accent);color:var(--accent)}
/* baixar o PNG = ação principal desta seção (o mapa já está à vista) */
.mapa-baixar{background:var(--accent);border:1px solid var(--accent);color:#fff;box-shadow:var(--shadow)}
.mapa-baixar:hover{background:color-mix(in srgb,var(--accent) 86%,#000);border-color:color-mix(in srgb,var(--accent) 86%,#000);color:#fff}
[data-theme="dark"] .mapa-baixar,[data-theme="dark"] .mapa-baixar:hover{color:#141517}
@media(max-width:560px){.mapa-acoes{flex-direction:column}.mapa-abrir,.mapa-baixar{flex:1 1 100%}}
.lightbox{position:fixed;inset:0;z-index:9999;display:none;align-items:center;justify-content:center;padding:clamp(12px,3vw,32px);background:rgba(10,11,9,.88);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.lightbox.aberto{display:flex}
.lightbox img{max-width:100%;max-height:92vh;border-radius:12px;box-shadow:0 24px 70px rgba(0,0,0,.55)}
.lightbox-fechar{position:absolute;top:16px;right:20px;background:rgba(255,255,255,.15);color:#fff;border:none;border-radius:50%;width:42px;height:42px;font-size:24px;line-height:1;cursor:pointer;transition:background .18s}
.lightbox-fechar:hover{background:rgba(255,255,255,.3)}

/* ---------- GPX + WIKILOC (grátis) E NOTA DE DIFICULDADE ---------- */
/* MUDOU em 2026-08-30: este bloco era o CTA de conteúdo "premium" (.premium-cta,
   com botão inativo "Em breve na lojinha") mais o formulário "Quero percorrer
   esta rota" (.quero-*, que pedia nome/e-mail/celular/cidade). Os dois saíram:
   página verificada é gratuita e sem login. O card ficou (mesmo desenho, nome
   honesto: .rota-cta) servindo o que a pessoa veio buscar — GPX e Wikiloc. */
.rota-cta{max-width:720px;margin:0 auto;text-align:center;background:linear-gradient(135deg,var(--accent-soft),var(--surface) 55%,var(--accent2-soft));border:1px solid var(--border);border-radius:var(--r-lg);padding:clamp(26px,4vw,38px) 28px;box-shadow:var(--shadow)}
.rota-cta .sel{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:4px 12px;font-size:11.5px;font-weight:700;letter-spacing:.04em;margin-bottom:14px;text-transform:uppercase}
.rota-cta .sel.ok{background:color-mix(in srgb,var(--verde,#3f8f5c) 16%,transparent);color:var(--verde,#3f8f5c);border:1px solid color-mix(in srgb,var(--verde,#3f8f5c) 42%,transparent)}
.rota-cta h3{font-family:var(--font-serif);font-weight:600;font-size:clamp(19px,2.6vw,23px);margin:0 0 8px;line-height:1.25;overflow-wrap:anywhere}
.rota-cta p{font-size:14px;color:var(--text-2);line-height:1.55;margin:0 auto 18px;max-width:52ch}
.aviso-inativo{font-size:12.5px;color:var(--text-2);margin-top:14px;font-style:italic;line-height:1.55}
/* dois botões lado a lado, empilhando no celular */
/* Procedencia do tracado (2026-08-31): quem registrou e quando. Fica ENTRE a
   descricao e os botoes de proposito -- e o que decide se a pessoa confia no
   arquivo, entao nao pode virar letra miuda de rodape como o .aviso-inativo.
   Caixa discreta, contraste normal de texto, um degrau acima da descricao. */
.rota-cta .gpx-fonte{font-size:13.5px;color:var(--text-2);line-height:1.6;max-width:52ch;margin:0 auto 18px;padding:12px 16px;border:1px solid var(--border);border-radius:var(--r-md);background:color-mix(in srgb,var(--surface) 72%,transparent)}
.rota-cta .gpx-fonte b{color:var(--text)}
.rota-cta .gpx-fonte a{color:inherit;text-decoration:underline;text-underline-offset:2px}
/* nome de perfil numa linha so' ("mi-ka" quebrava em "mi-" / "ka") */
.gpx-autor{white-space:nowrap}
.gpx-acoes{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.gpx-acoes .btn{flex:0 1 auto}
@media(max-width:420px){.gpx-acoes{flex-direction:column}.gpx-acoes .btn{width:100%}}
/* Links de UM arquivo alternativo dentro de um .ficha-item (Rota da Luz, 2026-09-01):
   a mesma rota publicada tambem em dois arquivos de dia. Nao viram .btn de proposito --
   o download principal continua sendo o card .rota-cta da secao #gpx; aqui e variante. */
.gpx-variantes{display:flex;flex-wrap:wrap;gap:8px 16px;margin-top:12px;font-size:12.5px}
.gpx-variantes a{color:var(--text-2);text-decoration:underline;text-underline-offset:2px}
.gpx-variantes a:hover{color:var(--text)}

[data-theme="dark"] .mapa-selo{color:var(--accent)}

/* ---------- FECHAMENTO ---------- */
.close{padding:20px 0 64px;text-align:center}
.close h2{font-family:var(--font-serif);font-weight:600;font-size:clamp(24px,3.6vw,34px);max-width:22ch;margin:0 auto 12px;line-height:1.2}
.close p{color:var(--text-2);font-size:15.5px;max-width:46ch;margin:0 auto 26px}
/* Os 26px embaixo do paragrafo separavam-no do botao do fechamento. No
   caminhos.html nao ha mais botao (era "Ver o catalogo", ancora para a
   propria pagina) -- sem isto sobrava um vao morto antes do rodape. As
   paginas de rota, que mantem o botao, nao sao afetadas. */
.close p:last-child{margin-bottom:0}

/* ---------- FOOTER ---------- */
.foot{border-top:1px solid var(--border-soft);padding:40px 0 36px;text-align:center;color:var(--text-3);font-size:13px}
.foot .fbrand{font-family:var(--font-serif);font-weight:600;font-size:16px;color:var(--text-2);letter-spacing:.05em}
.foot .ftag{font-style:italic;margin-top:6px;color:var(--text-3)}
.foot .apps{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin:20px 0 20px}
.foot .apps a{font-size:12.5px;font-weight:600;color:var(--text-2);border:1px solid var(--border);padding:8px 15px;border-radius:100px;transition:.18s}
.foot .apps a:hover{border-color:var(--text-3);color:var(--text)}
.foot a.ig{color:var(--accent);font-weight:600}
/* Linha de Ajuda / suporte / documentos (2026-09-14). Ate' aqui as paginas de
   rota nao tinham NENHUMA das quatro saidas -- nem contato. Texto em
   --text-2, nao --text-3: o .foot inteiro herda --text-3, que nesse corpo
   ficava abaixo do minimo AA de contraste. O separador some em tela estreita,
   pra nao sobrar orfao no comeco da linha quebrada. */
.foot .flinks{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin:0 0 14px;font-size:12.5px;color:var(--text-2)}
.foot .flinks a{color:var(--text-2);text-decoration:underline;text-underline-offset:2px}
.foot .flinks a:hover,.foot .flinks a:focus-visible{color:var(--accent)}
.foot .flinks span{color:var(--text-3)}
@media (max-width:520px){.foot .flinks span{display:none}}
.foot .ver{margin-top:8px;font-size:11.5px}

/* ============================================================
   HUB /caminhos — LANDING + CATÁLOGO do Dicas Outdoor
   ------------------------------------------------------------
   Reescrito em 2026-08-30. Antes daqui esta seção era só o índice
   cru de rotas; a raiz de dicasoutdoor.com.br faz 301 pra cá
   (netlify.toml), então a página é a home do domínio e precisa
   apresentar o produto — sem enterrar o catálogo, que é o que a
   maior parte do tráfego vem buscar. Por isso a ordem é hero
   funcional (com a busca dentro) → atalhos → CATÁLOGO → landing.

   ESCOPO: caminhos.css é compartilhada com as 15 páginas de rota,
   /dificuldade e _modelo-rota.html. Tudo que sobrescreve classe
   compartilhada (.nav, .hero, .sec, .btn, .atv-badge, .dif-badge)
   está preso em `body.do-hub`, que só caminhos.html tem. As classes
   .hub-* e .do-* são exclusivas desta página.
   ============================================================ */

/* Texto só para leitor de tela (rótulos de campo, explicação do botão
   desabilitado). Não existia neste CSS até 2026-08-30. */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
/* seta de link externo, já usada no markup da nav */
.ext{font-size:.85em;opacity:.7}

/* --- ajustes de moldura só nesta página --- */
/* A nav escondia TODOS os links ≤640px, e com eles o único acesso ao
   app no celular. Agora só os links de texto somem; o botão do app fica. */
body.do-hub .nav-in{max-width:1180px}
/* A nav do hub tem um filho que as paginas de rota nao tem: o botao
   `.nav-app`, que e' o unico acesso ao app no celular e por isso NAO pode
   sumir. Marca (116px) + botao (158px) + tema (43px) + padding e gaps pedem
   369px -- entao abaixo disso a pagina rolava na horizontal: +3px a 360, +23
   a 340 e +43 a 320, que e' iPhone SE e Android pequeno (medido 22/09/2026).
   Encolher a fonte resolveria no papel, mas piora a leitura justamente na
   tela menor. Em vez disso a nav quebra: marca e tema na primeira linha, o
   botao do app na segunda, inteiro -- ele fica MAIS visivel, nao menos. */
@media(max-width:420px){
  body.do-hub .nav-in{flex-wrap:wrap;row-gap:8px;padding-left:12px;padding-right:12px}
  body.do-hub .nav-sp{flex:0 0 0;width:0}
  body.do-hub .tbtn{order:2;margin-left:auto}
  body.do-hub .nav-app{order:3;flex:1 1 100%;justify-content:center}
}
body.do-hub .nav-app{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:700;color:#fff;background:var(--accent2);border:1px solid var(--accent2);padding:7px 13px;border-radius:100px;white-space:nowrap;transition:.18s}
body.do-hub .nav-app:hover{background:color-mix(in srgb,var(--accent2) 84%,#000);border-color:color-mix(in srgb,var(--accent2) 84%,#000)}
/* Fase 6 (2026-09-03): no tema escuro --accent2 vira um tom pastel claro
   (feito pra "brilhar" sobre fundo escuro), e texto branco em cima cai pra
   2.69:1. Texto escuro preserva a cor de fundo pastel (identidade visual
   intencional do tema escuro) e passa em 6.79:1 no estado normal e 4.93:1
   no hover — não precisou escurecer o botão, só a letra. */
[data-theme="dark"] body.do-hub .nav-app{color:#141517}
body.do-hub .nav-app:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media(max-width:640px){
  body.do-hub .nav-links{display:none}
  body.do-hub .brand span{display:none}
  /* sem isto a marca quebra em duas linhas e engorda a nav no celular */
  body.do-hub .brand b{white-space:nowrap;font-size:13.5px}
  body.do-hub .nav-in{gap:10px;padding:10px 16px}
}

/* Hero funcional: teto baixo pra que o primeiro cartão do catálogo caiba em
   uma rolagem. O hero editorial original tinha 100px só de padding superior. */
body.do-hub .hero{padding:clamp(46px,7vh,72px) 0 clamp(30px,4vh,44px)}
body.do-hub .hero h1{font-size:clamp(29px,5.2vw,50px);max-width:20ch;margin-top:20px}
body.do-hub .hero p.lead{font-size:clamp(15px,1.9vw,17.5px);margin-top:16px;max-width:60ch}
body.do-hub .sec{padding:clamp(48px,7vw,72px) 0}
body.do-hub .close{padding:clamp(40px,6vw,60px) 0 64px}

/* Divisor entre seções: uma trilha pontilhada de mapa. 1 path, ~120 bytes. */
.do-div{display:block;width:100%;height:14px;color:var(--text-3);opacity:.45;pointer-events:none}

/* Números reais do acervo, logo abaixo do lead (o .hstat já existia no CSS e
   nunca tinha sido usado nesta página). */
body.do-hub .hero-stats{margin-top:22px;gap:8px}
body.do-hub .hstat{font-size:12px;padding:6px 13px}

/* ---------- BUSCA DO HERO (é o mesmo input do catálogo) ---------- */
.do-busca{max-width:620px;margin:26px auto 0;position:relative}
.do-busca input{width:100%;font:inherit;font-size:15px;font-weight:500;height:52px;padding:0 46px;border-radius:100px;border:1px solid var(--border);background:var(--surface);color:var(--text);box-shadow:var(--shadow)}
.do-busca input::placeholder{color:var(--text-3);font-weight:400}
.do-busca input:focus{outline:none;border-color:var(--accent2)}
.do-busca input:focus-visible{outline:2px solid var(--accent2);outline-offset:1px}
.do-busca .ic{position:absolute;left:17px;top:50%;transform:translateY(-50%);font-size:16px;opacity:.55;pointer-events:none}
.do-busca .lim{position:absolute;right:8px;top:50%;transform:translateY(-50%);width:34px;height:34px;border:none;border-radius:50%;background:none;color:var(--text-3);font-size:17px;line-height:1;cursor:pointer;display:none}
.do-busca .lim:hover{background:var(--bg-2);color:var(--text)}
.do-busca.tem-valor .lim{display:block}
.do-dica{margin-top:11px;font-size:12px;color:var(--text-3)}

/* ---------- ATALHOS POR DESEJO ---------- */
/* "Começa pelo desejo" é o posicionamento do produto (POSICIONAMENTO.md):
   a pessoa escolhe o que quer VIVER, não a taxonomia interna do catálogo. */
.do-desejos{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:12px}
.do-desejo{display:flex;flex-direction:column;text-align:left;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:18px 20px;box-shadow:var(--shadow);cursor:pointer;font:inherit;color:inherit;transition:border-color .18s,box-shadow .18s}
.do-desejo:hover{border-color:color-mix(in srgb,var(--accent2) 55%,var(--border));box-shadow:var(--shadow-lg)}
.do-desejo:focus-visible{outline:2px solid var(--accent2);outline-offset:2px}
.do-desejo .ic{font-size:22px;line-height:1}
.do-desejo b{display:block;font-family:var(--font-serif);font-weight:600;font-size:16.5px;line-height:1.25;margin-top:10px;color:var(--text)}
.do-desejo span{font-size:13px;color:var(--text-2);line-height:1.5;margin-top:5px}
.do-desejo .n{margin-top:12px;font-size:12px;font-weight:700;color:var(--accent2)}

/* ---------- BARRA DE FILTROS (sticky) ---------- */
.do-bar{position:sticky;top:var(--do-nav-h,56px);z-index:40;background:var(--nav-bg);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--border);margin-bottom:18px;padding:12px 0}
.do-bar-in{display:flex;flex-direction:column;gap:10px}
.do-bar .do-busca{margin:0;max-width:none}
.do-bar .do-busca input{height:44px;font-size:14px;box-shadow:none}
.do-linha{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.do-linha-fim{margin-left:auto}

/* chips de natureza (button real: recebe foco, tem aria-pressed) */
.hub-chip{font:inherit;font-size:12.5px;font-weight:600;padding:7px 14px;border-radius:100px;border:1px solid var(--border);background:var(--surface);color:var(--text-2);cursor:pointer;transition:.16s;white-space:nowrap}
.hub-chip:hover{border-color:var(--text-3);color:var(--text)}
.hub-chip[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:#fff}
/* Fase 6 (2026-09-03): mesmo caso de .nav-app/.hub-btn-1 acima —
   --accent no tema escuro é pastel claro (6.03:1 com texto escuro). */
[data-theme="dark"] .hub-chip[aria-pressed="true"]{color:#141517}
.hub-chip:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* seletores */
.hub-uf-select{flex:0 0 auto;font:inherit;font-size:13px;font-weight:600;padding:9px 32px 9px 14px;border-radius:100px;border:1px solid var(--border);background:var(--surface) url('data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 20 20%22 fill=%22none%22 stroke=%22%23888%22 stroke-width=%222%22><path d=%22M5 8l5 5 5-5%22/></svg>') no-repeat right 11px center/11px;color:var(--text);cursor:pointer;appearance:none;-webkit-appearance:none;max-width:100%}
.hub-uf-select:focus{outline:none;border-color:var(--accent)}
.hub-uf-select:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.hub-uf-select.ativo{border-color:var(--accent2);color:var(--accent2)}

/* toggles de status — aparência propositalmente diferente dos chips:
   não são "que tipo de rota", são "o que mostrar". */
.do-tog{display:inline-flex;align-items:center;gap:7px;font:inherit;font-size:12.5px;font-weight:600;color:var(--text-2);background:none;border:1px solid var(--border);border-radius:100px;padding:6px 13px 6px 9px;cursor:pointer;white-space:nowrap;transition:.16s}
.do-tog:hover{border-color:var(--text-3);color:var(--text)}
.do-tog:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.do-tog i{width:28px;height:16px;border-radius:100px;background:color-mix(in srgb,var(--text-3) 40%,transparent);position:relative;flex:0 0 auto;transition:background .16s}
.do-tog i::after{content:"";position:absolute;top:2px;left:2px;width:12px;height:12px;border-radius:50%;background:var(--surface);transition:transform .16s}
.do-tog[aria-pressed="true"]{color:var(--accent2);border-color:color-mix(in srgb,var(--accent2) 50%,transparent)}
.do-tog[aria-pressed="true"] i{background:var(--accent2)}
.do-tog[aria-pressed="true"] i::after{transform:translateX(12px)}

/* pills do que está filtrado agora — é o que dá reversibilidade */
.do-pills{display:flex;gap:7px;flex-wrap:wrap;align-items:center;margin-bottom:14px}
.do-pill{display:inline-flex;align-items:center;gap:6px;font:inherit;font-size:12px;font-weight:600;color:var(--accent2);background:var(--accent2-soft);border:1px solid color-mix(in srgb,var(--accent2) 32%,transparent);border-radius:100px;padding:5px 10px 5px 12px;cursor:pointer}
.do-pill:hover{border-color:var(--accent2)}
.do-pill:focus-visible{outline:2px solid var(--accent2);outline-offset:2px}
.do-pill .x{font-size:14px;line-height:1;opacity:.7}
.do-limpar{font:inherit;font-size:12px;font-weight:600;color:var(--text-3);background:none;border:none;text-decoration:underline;cursor:pointer;padding:5px 4px}
.do-limpar:hover{color:var(--text)}

/* botão de filtros do celular */
.do-filtros-btn{display:none;align-items:center;gap:7px;font:inherit;font-size:13px;font-weight:700;color:var(--text);background:var(--surface);border:1px solid var(--border);border-radius:100px;padding:0 16px;height:44px;cursor:pointer;white-space:nowrap}
.do-filtros-btn .n{display:inline-flex;align-items:center;justify-content:center;min-width:19px;height:19px;padding:0 5px;border-radius:100px;background:var(--accent);color:#fff;font-size:11px;font-weight:700}
.do-filtros-btn .n[hidden]{display:none}

/* ---------- GRID ---------- */
body.do-hub #catalogo .wrap{max-width:1180px}
.hub-count{font-size:13px;color:var(--text-3);margin:0 0 14px}
.hub-count b{color:var(--text-2);font-weight:700}
.hub-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px;align-items:start}
.hub-empty{grid-column:1/-1;text-align:center;padding:48px 20px;color:var(--text-2);font-size:14px}
.hub-empty b{display:block;font-family:var(--font-serif);font-size:19px;color:var(--text);margin-bottom:8px;font-weight:600}
.do-mais{display:flex;flex-direction:column;align-items:center;gap:9px;margin-top:26px}
.do-mais-n{font-size:12.5px;color:var(--text-3)}
.do-nota-grid{margin:22px auto 0;font-size:12.5px;color:var(--text-3);line-height:1.6;text-align:center;max-width:70ch}

/* ---------- CARTÃO ---------- */
/* <article>, não <a>: com dois botões dentro, um link envolvendo o cartão
   seria HTML inválido e quebraria a navegação por teclado. O <a> mora no h3,
   que é o que o robô de busca segue. */
.hub-card{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--shadow);transition:box-shadow .18s,border-color .18s;position:relative;overflow:hidden}
.hub-card:hover{border-color:color-mix(in srgb,var(--accent) 45%,var(--border));box-shadow:var(--shadow-lg)}
/* tarja lateral por natureza da rota — leitura instantânea num grid de 329 */
.hub-card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;z-index:3;background:var(--mineral)}
.hub-card[data-grupo="pe"]::before{background:var(--accent)}
.hub-card[data-grupo="mata"]::before{background:var(--accent2)}
.hub-card[data-grupo="bike"]::before{background:var(--porta)}
.hub-card[data-grupo="offroad"]::before{background:#8a5a32}

.hub-corpo{display:flex;flex-direction:column;flex:1;padding:16px 18px 18px}

/* Arte de capa. 202 das 329 rotas têm; as outras caem no .hub-capa-vazia,
   desenhado de propósito (curvas de nível + emoji da rota) pra não parecer
   imagem que falhou ao carregar. */
.hub-capa{position:relative;display:block;aspect-ratio:16/9;background:var(--bg-2);overflow:hidden}
.hub-capa img{width:100%;height:100%;object-fit:cover;display:block}
.hub-capa-vazia{background:var(--accent2-soft);display:flex;align-items:center;justify-content:center}
.hub-capa-vazia::before{content:"";position:absolute;inset:0;background-image:url('data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 width=%22240%22 height=%22135%22 viewBox=%220 0 240 135%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.2%22 opacity=%22.13%22><path d=%22M-10 104 Q 60 76 120 96 T 250 84%22/><path d=%22M-10 82 Q 56 54 118 74 T 250 62%22/><path d=%22M-10 60 Q 52 34 116 52 T 250 40%22/><path d=%22M-10 38 Q 48 16 114 32 T 250 20%22/></svg>');background-size:cover}
[data-theme="dark"] .hub-capa-vazia::before{filter:invert(1);opacity:.45}
.hub-capa-vazia .em{position:relative;font-size:34px;line-height:1;opacity:.62}
/* badges por cima da capa, legíveis sobre qualquer imagem */
.hub-capa-badges{position:absolute;left:10px;right:10px;bottom:8px;display:flex;gap:6px;flex-wrap:wrap;align-items:center;z-index:2}
.hub-capa:not(.hub-capa-vazia)::after{content:"";position:absolute;inset:auto 0 0 0;height:58%;background:linear-gradient(180deg,transparent,rgba(12,13,11,.74));pointer-events:none;z-index:1}
.hub-capa:not(.hub-capa-vazia) .atv-badge{background:rgba(255,255,255,.93);color:#2b2b2b}
.hub-selo-pag{margin-left:auto;font-size:10px;font-weight:800;letter-spacing:.03em;text-transform:uppercase;padding:2px 8px;border-radius:8px;background:var(--accent);color:#fff;white-space:nowrap}
[data-theme="dark"] .hub-selo-pag{color:#141517}
/* Terceiro estado: a rota não tem página própria, mas o LUGAR dela tem.
   Deliberadamente mais discreto que o `.hub-selo-pag` — contorno em vez de
   preenchimento —, porque a promessa é menor: a página é do parque, não desta
   rota. Ver `lugarDe()` em caminhos_hub.js. */
.hub-selo-lugar{margin-left:auto;font-size:10px;font-weight:800;letter-spacing:.03em;text-transform:uppercase;padding:2px 8px;border-radius:8px;background:rgba(0,0,0,.42);color:#fff;border:1px solid rgba(255,255,255,.55);white-space:nowrap}
.hub-capa-vazia .hub-selo-lugar{background:var(--accent2-soft);color:var(--text);border-color:color-mix(in srgb,var(--accent2) 45%,transparent)}

.hub-card h3{font-family:var(--font-serif);font-weight:600;font-size:17px;line-height:1.24;color:var(--text);overflow-wrap:anywhere}
.hub-card h3 a{color:inherit}
.hub-card h3 a:hover{color:var(--accent)}
.hub-card h3 a:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:3px}
.hub-rota{font-size:12px;font-weight:500;color:var(--text-2);line-height:1.45;margin-top:6px}

/* Escala de distância — régua logarítmica, não perfil de elevação.
   Não existe dado de altimetria por rota; desenhar um perfil seria inventar.
   O que existe é km, e comparar 12 km com 480 km num grid é justamente o que
   ninguém consegue fazer só lendo o número. Log porque um terço do catálogo
   tem ≤30 km e um sexto tem ≥300 km: em escala linear, dois terços dos
   cartões teriam a mesma barrinha de nada. */
.hub-esc{position:relative;height:3px;border-radius:2px;margin-top:12px;background:color-mix(in srgb,var(--text-3) 22%,transparent)}
.hub-esc i{position:absolute;left:0;top:0;bottom:0;border-radius:2px;background:linear-gradient(90deg,var(--accent2),var(--accent))}
.hub-esc b{position:absolute;top:-2px;width:1px;height:7px;background:color-mix(in srgb,var(--text-3) 34%,transparent)}
.hub-esc.sem-km{height:0;background:none;border-top:2px dashed color-mix(in srgb,var(--text-3) 40%,transparent);margin-top:13px}

.hub-meta{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:10px}
.hub-km{font-size:12.5px;font-weight:700;color:var(--text-2);font-variant-numeric:tabular-nums}
.hub-uf{font-size:11px;font-weight:700;letter-spacing:.06em;color:var(--text-3)}
.hub-desc{font-size:13px;line-height:1.55;color:var(--text-2);margin-top:12px;display:-webkit-box;-webkit-line-clamp:3;line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}

/* Cartão de GRUPO: uma página que cobre várias rotas (Furnas, PETAR Santana,
   Carlos Botelho, Canastra Parte Alta) sai uma vez só na lista, e cada rota
   vira uma linha com o seu próprio "Guardar" — é o id da rota que o app abre. */
.hub-trilhas{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-direction:column}
.hub-trilhas li{display:grid;grid-template-columns:1fr auto;grid-template-areas:"nome guardar" "meta guardar";column-gap:10px;row-gap:3px;align-items:center;padding:9px 0;border-top:1px solid var(--border)}
.hub-trilhas li:first-child{border-top:0;padding-top:2px}
.hub-trilha-nome{grid-area:nome;font-size:13px;font-weight:600;line-height:1.35;color:var(--text);overflow-wrap:anywhere}
.hub-trilha-meta{grid-area:meta;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.hub-trilha-guardar{grid-area:guardar;display:inline-flex;align-items:center;min-height:44px;padding:0 12px;font-size:12px;font-weight:600;white-space:nowrap;border-radius:100px;border:1px solid color-mix(in srgb,var(--accent2) 70%,transparent);color:var(--accent2)}
.hub-trilha-guardar:hover{background:var(--accent2-soft);border-color:var(--accent2)}
.hub-trilha-guardar:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.hub-card-grupo .hub-acoes{grid-template-columns:1fr}

/* badges menores dentro do cartão, sem mexer nas classes compartilhadas */
body.do-hub .hub-card .atv-badge{font-size:9.5px;padding:2px 7px}
body.do-hub .hub-card .dif-badge{font-size:10px;padding:1px 7px;background:transparent;border:1px solid currentColor}

/* ---------- OS DOIS BOTÕES ---------- */
/* margin-top:auto encosta as ações na base: numa linha do grid, cartões de
   alturas diferentes alinham os botões. */
.hub-acoes{display:grid;grid-template-columns:1fr auto;gap:8px;margin-top:auto;padding-top:16px}
.hub-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:44px;padding:0 14px;font:inherit;font-size:13px;font-weight:600;line-height:1.25;text-align:center;border-radius:100px;border:1px solid transparent;cursor:pointer;transition:background .16s,border-color .16s,color .16s}
.hub-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* botão 1 — página dedicada, habilitada */
.hub-btn-1{background:var(--accent);border-color:var(--accent);color:#fff}
.hub-btn-1:hover{background:color-mix(in srgb,var(--accent) 86%,#000);border-color:color-mix(in srgb,var(--accent) 86%,#000);color:#fff}
/* Fase 6 (2026-09-03): mesmo caso do .nav-app acima — --accent no tema
   escuro é pastel claro, texto branco cai pra 3.02:1. Texto escuro passa em
   6.03:1 (normal) e 4.58:1 (hover, fundo já escurecido pelo color-mix). */
[data-theme="dark"] .hub-btn-1{color:#141517}
[data-theme="dark"] .hub-btn-1:hover{color:#141517}

/* Botão 1 — desabilitado. É aria-disabled, não disabled: botão `disabled` não
   recebe foco, e aí o leitor de tela nunca chega na explicação do porquê.
   Tracejado e SEM opacity — opacidade global é o que faz botão desabilitado
   parecer bug de renderização. O tracejado diz "ainda não confirmado" (era o
   mesmo vocabulário do selo "A Desbravar", que saiu da tela em 2026-09-10 a
   pedido do dono). Como 314 das 329 rotas caem aqui, este estado decide a
   cara da página inteira. */
.hub-btn-1[aria-disabled="true"]{background:transparent;border:1px dashed color-mix(in srgb,var(--text-3) 60%,transparent);color:var(--text-3);cursor:default}
.hub-btn-1[aria-disabled="true"]:hover{border-style:solid;color:var(--text-2)}

/* Botão 2 — app (muro de login). Outline de propósito: 329 botões sólidos
   apontando pra um login é armadilha de conversão, e o catálogo aberto é o
   que constrói a confiança. Nos cartões sem página ele é a única ação viva,
   e aí sobe meio grau de ênfase. */
.hub-btn-2{background:transparent;border-color:color-mix(in srgb,var(--accent2) 70%,transparent);color:var(--accent2)}
.hub-btn-2:hover{background:var(--accent2-soft);border-color:var(--accent2)}
.hub-card[data-nopage] .hub-btn-2{background:var(--accent2-soft);border-color:color-mix(in srgb,var(--accent2) 45%,transparent)}
.hub-card[data-nopage] .hub-btn-2:hover{background:color-mix(in srgb,var(--accent2) 22%,transparent)}

.hub-nopage-msg{margin-top:10px;font-size:12px;line-height:1.55;color:var(--text-2);background:color-mix(in srgb,var(--text-2) 7%,transparent);border-left:2px solid color-mix(in srgb,var(--text-3) 45%,transparent);border-radius:0 var(--r-sm) var(--r-sm) 0;padding:10px 12px}
.hub-foot{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:12px;font-size:11.5px;font-weight:500;color:var(--text-3)}
.hub-foot a{color:var(--text-2);text-decoration:underline;text-underline-offset:2px}
.hub-foot a:hover{color:var(--accent)}
.hub-foot a:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:3px}
.hub-foot .sep{opacity:.5}

/* ---------- COMO LEMOS UMA ROTA ---------- */
.do-criterios{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px}
.do-criterio{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:20px 22px;box-shadow:var(--shadow)}
.do-criterio h3{font-family:var(--font-serif);font-weight:600;font-size:16px;line-height:1.3;margin-bottom:9px;display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.do-criterio p{font-size:13.5px;line-height:1.6;color:var(--text-2)}
.do-criterio a{color:var(--accent);font-weight:600;text-decoration:underline;text-underline-offset:2px}

/* ---------- PÁGINAS PRONTAS ---------- */
.do-prontas{display:grid;grid-template-columns:repeat(auto-fill,minmax(212px,1fr));gap:10px}
.do-pronta{display:flex;align-items:center;gap:9px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);padding:12px 14px;font-size:13.5px;font-weight:600;color:var(--text);box-shadow:var(--shadow);transition:border-color .16s,color .16s}
.do-pronta:hover{border-color:var(--accent);color:var(--accent)}
.do-pronta:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.do-pronta .em{font-size:17px;line-height:1;flex:0 0 auto}
.do-pronta span{line-height:1.3;overflow-wrap:anywhere}

/* ---------- BOTTOM-SHEET DE FILTROS (celular) ---------- */
.do-sheet-bg{position:fixed;inset:0;z-index:60;background:rgba(0,0,0,.45);opacity:0;pointer-events:none;transition:opacity .2s}
.do-sheet-bg.aberto{opacity:1;pointer-events:auto}
.do-sheet{position:fixed;left:0;right:0;bottom:0;z-index:61;max-height:86vh;display:flex;flex-direction:column;background:var(--bg);border-radius:var(--r-xl) var(--r-xl) 0 0;box-shadow:0 -20px 60px -18px rgba(0,0,0,.5);transform:translateY(100%);transition:transform .24s cubic-bezier(.2,.8,.2,1)}
.do-sheet.aberto{transform:none}
.do-sheet-head{display:flex;align-items:center;gap:10px;padding:16px 20px 12px;border-bottom:1px solid var(--border-soft)}
.do-sheet-head h2{font-family:var(--font-serif);font-weight:600;font-size:18px}
.do-sheet-x{margin-left:auto;background:none;border:1px solid var(--border);border-radius:50%;width:34px;height:34px;font-size:18px;line-height:1;color:var(--text-2);cursor:pointer}
.do-sheet-body{overflow-y:auto;padding:16px 20px 20px;display:flex;flex-direction:column;gap:18px;-webkit-overflow-scrolling:touch}
.do-grupo>b{display:block;font-size:11.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--text-3);margin-bottom:9px}
.do-grupo .hub-uf-select{width:100%}
.do-sheet-foot{display:flex;gap:10px;align-items:center;padding:12px 20px;border-top:1px solid var(--border-soft);background:var(--surface)}
.do-sheet-foot .btn{flex:1;justify-content:center}
body.do-sheet-aberto{overflow:hidden}

/* ---------- RESPONSIVO ---------- */
@media(max-width:900px){
  .do-linha-fim{margin-left:0}
}
@media(max-width:720px){
  /* no celular a barra sticky vira uma linha só: busca + botão de filtros */
  .do-bar-in{flex-direction:row;align-items:center;gap:8px}
  .do-bar .do-busca{flex:1;min-width:0}
  .do-bar .do-linha{display:none}
  .do-filtros-btn{display:inline-flex}
  body.do-hub .hero{padding:34px 0 26px}
  .do-busca input{height:48px}
}
@media(max-width:560px){
  .hub-grid{grid-template-columns:1fr;gap:12px}
  .hub-corpo{padding:14px 16px 16px}
  .hub-acoes{grid-template-columns:1fr;padding-top:14px}
  .hub-btn{min-height:46px}
  .hub-desc{-webkit-line-clamp:2;line-clamp:2}
  .do-desejos{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:10px;margin:0 -24px;padding:0 24px 6px;scrollbar-width:none}
  .do-desejos::-webkit-scrollbar{display:none}
  .do-desejo{min-width:216px;scroll-snap-align:start}
}
@media(hover:none){
  .hub-card:hover{border-color:var(--border);box-shadow:var(--shadow)}
  .hub-btn-1:hover{background:var(--accent)}
  .hub-btn-1[aria-disabled="true"]:hover{border-style:dashed;color:var(--text-3)}
  .hub-btn-2:hover{background:transparent}
  .hub-card[data-nopage] .hub-btn-2:hover{background:var(--accent2-soft)}
  .hub-btn:active{filter:brightness(.94)}
}
@media(prefers-reduced-motion:reduce){
  .do-sheet,.do-sheet-bg{transition:none}
}

/* reveal */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.8,.2,1)}
.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  .hero-aura span,.scroll-cue svg{animation:none}
  html{scroll-behavior:auto}
}

/* ═══ Citação da conferência na seção de acesso ═══════════════════════════
   Bloco GERADO por scripts/gerar_citacao_acesso.py a partir de
   rota.conferencia. Fonte, data e ALCANCE — a terceira é a que costuma se
   perder: a ficha de um parque não fala por cada trilha dele. */
.acesso-fonte{margin-top:1.1rem;padding:.8rem 1rem;border-left:3px solid var(--verde,#2e7d32);
  background:rgba(46,125,50,.06);border-radius:0 8px 8px 0;font-size:.86rem;line-height:1.6}
.acesso-fonte p{margin:0 0 .45rem}
.acesso-fonte p:last-child{margin-bottom:0}
.acesso-fonte-rota{font-size:.9em;opacity:.85}
.acesso-fonte-ressalva{padding-top:.45rem;border-top:1px solid rgba(0,0,0,.08);opacity:.92}

/* ===========================================================================
   PADRAO DE PAGINA DE ROTA v2 -- `body.rota-v2` (aprovado em 2026-09-22)

   Nasceu inline no peitaberaba.html como piloto e subiu para ca' quando o
   dono aprovou. `_modelo-rota.html` ja' sai com a classe; pagina antiga
   entra no padrao ganhando `class="rota-v2"` no <body>, e so'.

   O ESCOPO, DEPOIS DO RETROFIT (2026-09-24). Com as 22 paginas de rota no
   padrao, o escopo saiu de tudo o que e' exclusivo da v2. Ele NAO saiu de
   tudo porque esta folha tambem serve 9 paginas que nao sao rota (hub
   /caminhos, app.html, dificuldade.html, as 4 cidades-viagem e as duas do
   Outdoor). Continuam com `body.rota-v2`:
   - o que toca peca compartilhada com elas: .brand, .tbtn, .nav-in,
     .hero-cta, .hero-stats, .hstat, e o foco visivel em a/button/summary;
   - uma regra exclusiva que so' vence a base POR CAUSA da especificidade
     do escopo: .metodo-corpo p (perde para .acesso-fonte p:last-child). A
     outra, .hero-marcar, saiu com o botao do painel do topo (14/10/2026);
   - as variaveis de cor da vegetacao, definidas no proprio body.
   Medido por estilo calculado de cada elemento, antes e depois, nas 32
   paginas que carregam a folha, a 375 e 1280 px, tema claro e escuro: zero
   diferenca. Soltar qualquer uma das de cima muda pagina -- medir antes.
   =========================================================================== */
/* -- Navegacao -------------------------------------------------------------
   O indice tinha 9 ancoras no desktop e SUMIA por inteiro abaixo de 640px,
   sem substituto: no celular a pagina ficava sem navegacao nenhuma. Agora sao
   5 ancoras no desktop e um <details> "Nesta pagina" no celular -- <details>
   e' nativo, funciona por teclado e sem JavaScript. */
body.rota-v2 .brand b{letter-spacing:.08em}
/* Alvo de toque de 44x44 no botao de tema (era ~31x28). */
body.rota-v2 .tbtn{min-width:44px;min-height:44px;font-size:17px;padding:0;display:inline-flex;align-items:center;justify-content:center}
.nav-indice{display:none}
.nav-indice > summary{list-style:none;cursor:pointer;font-size:12.5px;font-weight:700;color:var(--text-2);border:1px solid var(--border);border-radius:var(--r-sm);padding:0 14px;min-height:44px;display:inline-flex;align-items:center;gap:7px}
.nav-indice > summary::-webkit-details-marker{display:none}
.nav-indice[open] > summary{background:var(--bg-2);color:var(--text)}
.nav-indice-lista{position:absolute;left:12px;right:12px;margin-top:8px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--shadow);padding:6px;z-index:60;display:grid}
.nav-indice-lista a{font-size:14px;font-weight:600;color:var(--text-2);padding:0 14px;min-height:44px;display:flex;align-items:center;border-radius:var(--r-sm)}
.nav-indice-lista a:hover,.nav-indice-lista a:focus-visible{background:var(--bg-2);color:var(--text)}
@media(max-width:640px){
  .nav-indice{display:block}
  body.rota-v2 .nav-in{position:relative}
}
/* Foco visivel em toda a pagina, nao so' onde o navegador resolve mostrar. */
body.rota-v2 a:focus-visible,body.rota-v2 button:focus-visible,body.rota-v2 summary:focus-visible,body.rota-v2 [tabindex]:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:4px}

/* -- Hero ------------------------------------------------------------------
   No celular o hero anterior passava de uma tela: 6 chips, 3 botoes e duas
   linhas de apoio. Aqui sao 4 chips, 1 CTA e a marca de parcialidade -- que
   subiu para o hero justamente porque era a informacao que so' aparecia na
   11a rolagem. */
.hero-photo{position:relative;padding:112px 0 54px;text-align:center;isolation:isolate;overflow:hidden}
.hero-photo::before{content:"";position:absolute;inset:0;z-index:-1;background-image:linear-gradient(180deg,rgba(15,17,14,.32),rgba(12,13,11,.82) 88%),url('assets/caminhos/ciclo-itaberaba-hero.jpg');background-size:cover;background-position:center 52%}
/* WebP (scripts/gerar_heros_webp.py) onde image-set() existe; a regra acima e' o fallback JPEG. */
.hero-photo::before{background-image:linear-gradient(180deg,rgba(15,17,14,.32),rgba(12,13,11,.82) 88%),image-set(url('assets/caminhos/ciclo-itaberaba-hero.webp') type('image/webp'),url('assets/caminhos/ciclo-itaberaba-hero.jpg') type('image/jpeg'))}
.hero-photo .eyebrow{background:rgba(255,255,255,.14);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);color:#fff;border-color:rgba(255,255,255,.28)}
.hero-photo h1{color:#fff}
.hero-photo h1 i{color:#f5c98a}
.hero-photo p.lead{color:rgba(255,255,255,.9)}
.hero-photo .hstat{background:rgba(255,255,255,.14);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);color:#fff;border-color:rgba(255,255,255,.28)}
.hero-photo .hstat b{color:#fff}
.hero-photo .btn-ghost{background:rgba(255,255,255,.16);color:#fff;border-color:rgba(255,255,255,.32)}
.hero-photo .btn-ghost:hover{border-color:rgba(255,255,255,.6)}
.hero-photo-credit{margin-top:14px;font-size:10.5px;color:rgba(255,255,255,.62);letter-spacing:.03em;line-height:1.5}
/* Marca de registro parcial, no hero. Primeira das DUAS ocorrencias que a regua
   editorial permite (a outra fica no download do GPX) -- ver CAMINHOS.md, §4. */
/* inline-BLOCK, nao inline-flex: com flex o <b> de dentro virava um item de flex
   proprio e a frase saia repartida em tres colunas no celular. Aqui o texto
   quebra como texto. */
.hero-parcial,.selo-km{display:inline-block;max-width:34em;margin-top:16px;padding:9px 17px;border-radius:16px;background:rgba(214,158,74,.22);border:1px solid rgba(245,201,138,.5);color:#f5c98a;font-size:12.5px;font-weight:700;text-align:center;line-height:1.5}
/* v2.2 (2026-09-23): o selo do km vai para TODA pagina de rota, logo abaixo do
   botao do painel. Dois tons do mesmo componente: .selo-km.ok (so' contorno)
   quando o numero bate ou a diferenca esta' explicada; .hero-parcial, que ja'
   existia, continua sendo o preenchido -- so' para registro parcial. Assim o
   dourado cheio segue sendo alerta. Estado declarado em data-estado:
   bate | difere | medido | parcial | terceiro. */
.selo-km.ok{background:rgba(12,12,12,.32)}
/* Hero SEM foto (rota ainda sem arte de capa): o fundo e' o da pagina, e o
   #f5c98a -- escrito para o gradiente escuro da .hero-photo -- some no tema
   claro. Medido na Rota das Cavernas, 2026-09-23. A cor sai da familia do
   proprio componente, nao do --accent (que e' verde no tema claro). */
.hero:not(.hero-photo) .hero-parcial,.hero:not(.hero-photo) .selo-km{color:#7a4e12;border-color:rgba(122,78,18,.45)}
.hero:not(.hero-photo) .selo-km.ok{background:transparent}
[data-theme="dark"] .hero:not(.hero-photo) .hero-parcial,[data-theme="dark"] .hero:not(.hero-photo) .selo-km{color:#f5c98a;border-color:rgba(245,201,138,.5)}
body.rota-v2 .hero-cta{margin-top:18px}
/* O hero completo tem de caber em UMA tela de celular. Medido a 375x812 antes
   deste bloco: ele terminava em 1.143px, 1,41 tela, e a marca de "registro
   parcial" -- que e' justamente o que nao pode passar despercebido -- ficava
   abaixo da dobra. Cada valor abaixo foi medido, nao chutado. */
@media(max-width:560px){
  .hero-photo{padding:74px 0 28px}
  .hero-photo h1{font-size:clamp(25px,7vw,32px);line-height:1.14}
  .hero-photo .eyebrow{font-size:9.5px;padding:5px 11px}
  .hero-photo p.lead{font-size:14.5px;line-height:1.55;margin-top:12px}
  body.rota-v2 .hero-stats{margin-top:14px;gap:7px}
  body.rota-v2 .hstat{font-size:11.5px;padding:6px 11px}
  .hero-parcial,.selo-km{font-size:11.5px;padding:7px 12px;margin-top:11px}
  .hero-photo-credit{margin-top:10px;font-size:15px}
}

/* -- Faixa de clima --------------------------------------------------------
   Era uma grade de dois cartoes de 150px de altura minima: medido a 375px,
   custava uma tela inteira e empurrava a decisao para a terceira rolagem
   (CAMINHOS.md, "Clima subiu da 7a para a 2a"). Aqui os mesmos dois pontos
   viram uma faixa de uma linha por ponto. O markup e' o mesmo que initClima
   ja' produz -- nao ha componente novo em caminhos.js. */
.sec-clima{padding:24px 0 20px;border-bottom:1px solid var(--border)}
.clima-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;max-width:none;margin:0}
.clima-card{min-height:0;padding:11px 14px;text-align:left;box-shadow:none;display:grid;grid-template-columns:34px 1fr auto;align-items:center;gap:2px 11px;border-radius:12px}
.clima-card .clima-local{grid-column:2;font-size:9.5px;letter-spacing:.06em;line-height:1.3}
.clima-card .clima-icon{grid-row:1 / span 2;grid-column:1;width:34px;height:34px;margin:0}
.clima-card .clima-temp{grid-row:1 / span 2;grid-column:3;font-size:1.45rem}
.clima-card .clima-desc{grid-column:2;font-size:12px;margin:0}
.clima-card .clima-loading,.clima-card .clima-err{grid-column:2;margin:0;font-size:12px}
.clima-note{text-align:left;margin-top:10px;font-style:normal;font-size:11.5px}
@media(max-width:640px){.clima-grid{grid-template-columns:1fr}}

/* -- Cobertura vegetal (v2.1, 2026-09-22) ---------------------------------
   Na v2 ela era um <details> do acordeao final e o numero so' aparecia a quem
   clicasse. O dono a trouxe de volta para a vista, em bloco proprio logo
   abaixo do clima. Vale a mesma disciplina que encolheu o clima: banda
   compacta, sem titulo -- o numero, e uma linha dizendo o que ele nao e'. */
.sec-vegetacao{padding:20px 0;border-bottom:1px solid var(--border)}
.vegeta-num{margin:0;font-size:clamp(14px,1.9vw,15.5px);line-height:1.6;color:var(--text-2)}
.vegeta-nota{margin:8px 0 0;font-size:11.5px;line-height:1.65;color:var(--text-3)}

/* -- v2.2: a cobertura vira figura (2026-09-23) ----------------------------
   So' com o que ja' temos: pct_natural e pct_florestal do MapBiomas por
   municipio. A figura separa FLORESTA de OUTRA COBERTURA NATIVA (campo, savana,
   brejo, agua) -- na Canastra mais da metade do nativo e' campo, e "52,8% de
   cobertura vegetal" fazia o leitor imaginar mata. O markup sai pronto de
   `cobertura_vegetal_rota.py --html`; nada disto depende de JS.
   Um municipio -> isotipo de dez figuras (cada uma = 10%).
   Dois ou mais -> perfil de mata, na ordem do percurso: colunas acima de 560px
   com 5+ municipios, linhas no resto. O bioma NAO vem de dado de municipio (o
   campo `bioma` de cities_data.js e' estimado): o rotulo .veg-bioma e' escrito
   na pagina, a partir do que ela ja' afirma sobre o lugar. */
body.rota-v2{--veg-f:#2f7a45;--veg-c:#a47c1c;--veg-u:#a9a79d;--veg-trilho:#e7e5dc}
[data-theme="dark"] body.rota-v2{--veg-f:#5fae74;--veg-c:#d6b25a;--veg-u:#5a5c55;--veg-trilho:#2a2c28}
/* Rotulo em duas camadas: BIOMA (um dos seis do IBGE, sempre) + PAISAGEM (o
   ambiente dentro dele: serra, altitude, litoral, vale, transicao). O bioma
   tem cor propria em data-bioma -- NAO usa o --accent, porque o data-biome da
   pagina tem "serra" e "litoral", que nao sao bioma, e pintaria Mata Atlantica
   de azul. Nenhuma pagina fica sem rotulo (regra do dono, 2026-09-23). */
.veg-bioma{--bio:var(--veg-f);display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 0;margin:0 0 10px;font-size:10.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--text)}
.veg-bioma::before{content:"";align-self:center;width:9px;height:9px;border-radius:50%;margin-right:8px;background:var(--bio)}
/* duas linhas fixas: o bioma, e a paisagem embaixo alinhada ao texto -- com
   separador na mesma linha, a paisagem longa quebrava e o "·" abria a linha. */
.veg-bioma span{flex-basis:100%;padding-left:17px;margin-top:2px;font-size:12.5px;font-weight:600;letter-spacing:.01em;text-transform:none;color:var(--text-2)}
.veg-bioma[data-bioma="cerrado"]{--bio:#a47c1c}
.veg-bioma[data-bioma="caatinga"]{--bio:#9a5a3a}
.veg-bioma[data-bioma="amazonia"]{--bio:#1f6f5c}
.veg-bioma[data-bioma="pantanal"]{--bio:#2d6f8e}
.veg-bioma[data-bioma="pampa"]{--bio:#6d7f2e}
[data-theme="dark"] .veg-bioma[data-bioma="cerrado"]{--bio:#d6b25a}
[data-theme="dark"] .veg-bioma[data-bioma="caatinga"]{--bio:#d08a66}
[data-theme="dark"] .veg-bioma[data-bioma="amazonia"]{--bio:#4fb89c}
[data-theme="dark"] .veg-bioma[data-bioma="pantanal"]{--bio:#6fb0cf}
[data-theme="dark"] .veg-bioma[data-bioma="pampa"]{--bio:#b3c46a}
.veg-fig{margin-top:14px}
.veg-iso{display:flex;gap:6px;max-width:340px}
/* A figura de FLORESTA muda com o bioma (data-bioma no .veg-iso, do IBGE):
   copa densa na Mata Atlantica, arvore torta no Cerrado, emergente na
   Amazonia, mandacaru na Caatinga, palmeira no Pantanal, espinilho no Pampa.
   O USO HUMANO e' a sombra da mesma arvore -- a mata que nao esta' la'. */
.veg-iso{--arv:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 24'%3E%3Ccircle cx='6' cy='9.5' r='4.3'/%3E%3Ccircle cx='14' cy='9.5' r='4.3'/%3E%3Ccircle cx='10' cy='5.8' r='5'/%3E%3Ccircle cx='10' cy='11.5' r='3.8'/%3E%3Crect x='9' y='12' width='2' height='11' rx='.6'/%3E%3C/svg%3E")}
.veg-iso[data-bioma="cerrado"]{--arv:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 24'%3E%3Cpath d='M10.6 23c-.5-3.2-2.2-4.8-1.5-8 .6-2.6 2.6-3.6 2-6.8' stroke='black' fill='none' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.6'/%3E%3Cpath d='M9.4 15.4c2.2-.7 3.8-2.6 5-5.2' stroke='black' fill='none' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.1'/%3E%3Cpath d='M.8 7.4C1.6 4.6 4.6 3 8.2 3.2c2.8.1 4.6 1.4 5.2 3.2-1.6 1.6-4.6 2.4-7.6 2.3C3.4 8.6 1.6 8.2.8 7.4z'/%3E%3Cpath d='M10.2 10.2c.9-2.2 3.2-3.4 6-3.2 1.8.1 3 1 3.2 2.2-1 1.4-3.2 2.2-5.6 2.2-1.6 0-2.8-.4-3.6-1.2z'/%3E%3C/svg%3E")}
.veg-iso[data-bioma="amazonia"]{--arv:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 24'%3E%3Cellipse cx='10' cy='4.6' rx='9.2' ry='3.3'/%3E%3Crect x='9.2' y='6' width='1.6' height='16'/%3E%3Cpath d='M6.6 23 10 18.6 13.4 23z'/%3E%3C/svg%3E")}
.veg-iso[data-bioma="caatinga"]{--arv:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 24'%3E%3Crect x='8.5' y='2' width='3' height='21' rx='1.5'/%3E%3Cpath d='M8.5 14.5H6a1.6 1.6 0 0 1-1.6-1.6V7.2a1.5 1.5 0 0 1 3 0v4.3h1.1z'/%3E%3Cpath d='M11.5 11.5h1.1V5.2a1.5 1.5 0 0 1 3 0V11a1.6 1.6 0 0 1-1.6 1.6h-2.5z'/%3E%3C/svg%3E")}
.veg-iso[data-bioma="pantanal"]{--arv:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 24'%3E%3Cpath d='M10 23V8.5' stroke='black' fill='none' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.6'/%3E%3Cpath d='M10 8.5C7.5 5.6 4.3 5.4 1.3 7.4 3.8 3.9 7.8 4 10 8.5zM10 8.5c2.5-2.9 5.7-3.1 8.7-1.1-2.5-3.5-6.5-3.4-8.7 1.1zM10 8.5C9.4 5 7.4 2.2 4.4 1.3c3.3-.3 5.6 2.7 5.6 7.2zM10 8.5c.6-3.5 2.6-6.3 5.6-7.2-3.3-.3-5.6 2.7-5.6 7.2z'/%3E%3C/svg%3E")}
.veg-iso[data-bioma="pampa"]{--arv:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 24'%3E%3Cpath d='M1.6 10.2C4 7 7 6 10 6s6 1 8.4 4.2c-2.4 1.2-5.4 1.7-8.4 1.7s-6-.5-8.4-1.7z'/%3E%3Cpath d='M10 23v-6.2L7.2 11.6M10 16.8l2.8-5.2' stroke='black' fill='none' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.8'/%3E%3C/svg%3E")}
.veg-iso i{flex:1;aspect-ratio:5/6;background:var(--veg-f);-webkit-mask:var(--g) center/contain no-repeat;mask:var(--g) center/contain no-repeat;--g:var(--arv)}
.veg-iso i.c{background:var(--veg-c);
  --g:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 24'%3E%3Cpath d='M3 23C4 17 5 14 7 11M8 23C8 16 9 11 10 6M12 23c0-6 0-10-1-14M16 23c-1-5-2-8-4-11M18 23c-1-3-3-6-5-7' stroke='black' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E")}
.veg-iso i.u{background:var(--veg-u);opacity:.55}
.veg-leg{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:3px 14px;font-size:11.5px;color:var(--text-2)}
.veg-leg li::before{content:"";display:inline-block;width:9px;height:9px;border-radius:2px;margin-right:6px;vertical-align:-1px;background:var(--veg-f)}
.veg-leg li.c::before{background:var(--veg-c)}
.veg-leg li.u::before{background:var(--veg-trilho);box-shadow:inset 0 0 0 1.5px var(--veg-u)}
.veg-perfil{list-style:none;margin:0;padding:0;display:flex;gap:6px;align-items:flex-start}
.veg-perfil li{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:4px}
.veg-perfil b{order:1;font-size:11.5px;color:var(--text-2)}
.veg-col{order:2;width:100%;height:96px;display:flex;flex-direction:column-reverse;border-radius:5px 5px 0 0;background:var(--veg-trilho);overflow:hidden}
.veg-col i{display:block;flex:none}
.veg-col i.f{height:calc(var(--f) * 1%);background:var(--veg-f)}
.veg-col i.c{height:calc(var(--c) * 1%);background:var(--veg-c)}
.veg-perfil small{order:3;font-size:10px;line-height:1.25;color:var(--text-3);text-align:center;hyphens:auto;-webkit-hyphens:auto}
/* Mais de 10 municipios: recolhido. Fechado mostra a silhueta (uma coluna fina
   por municipio, sem nome) e o convite; aberto, as linhas com nome e numero. */
.veg-lista summary{list-style:none;cursor:pointer;display:flex;flex-direction:column;gap:8px}
.veg-lista summary::-webkit-details-marker{display:none}
.veg-mini{display:flex;align-items:stretch;gap:2px;height:44px}
.veg-mini i{flex:1;border-radius:2px 2px 0 0;background:linear-gradient(to top,var(--veg-f) 0 calc(var(--f) * 1%),var(--veg-c) 0 calc((var(--f) + var(--c)) * 1%),var(--veg-trilho) 0)}
.veg-abrir{font-size:12.5px;font-weight:700;color:var(--text-2)}
.veg-abrir::after{content:" \25BE";color:var(--text-3)}
.veg-lista[open] .veg-abrir::after{content:" \25B4"}
.veg-lista summary:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
.veg-lista .veg-perfil{margin-top:12px}
/* Rota que cruza mais de um bioma (bioma predominante do IBGE, por municipio):
   cada nome ganha o ponto do seu bioma. O script so' emite data-bioma no <li>
   quando ha' mais de um -- em rota de um bioma so', o rotulo ja' diz. */
.veg-perfil li[data-bioma] small::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:5px;background:var(--veg-f)}
.veg-perfil li[data-bioma="cerrado"] small::before{background:#a47c1c}
.veg-perfil li[data-bioma="caatinga"] small::before{background:#9a5a3a}
.veg-perfil li[data-bioma="amazonia"] small::before{background:#1f6f5c}
.veg-perfil li[data-bioma="pantanal"] small::before{background:#2d6f8e}
.veg-perfil li[data-bioma="pampa"] small::before{background:#6d7f2e}
/* linhas: sempre com ate' 4 municipios, e com qualquer numero no celular */
.veg-perfil.linhas{flex-direction:column;align-items:stretch;gap:8px}
.veg-perfil.linhas li{flex-direction:row;gap:10px}
.veg-perfil.linhas small{order:1;flex:0 0 9em;text-align:left;font-size:12px;color:var(--text-2)}
.veg-perfil.linhas .veg-col{height:12px;flex:1;flex-direction:row;border-radius:6px}
.veg-perfil.linhas .veg-col i.f{height:auto;width:calc(var(--f) * 1%)}
.veg-perfil.linhas .veg-col i.c{height:auto;width:calc(var(--c) * 1%)}
.veg-perfil.linhas b{order:3;flex:0 0 2.8em;text-align:right}
@media(max-width:560px){
  .veg-perfil{flex-direction:column;align-items:stretch;gap:8px}
  .veg-perfil li{flex-direction:row;gap:10px}
  .veg-perfil small{order:1;flex:0 0 10em;text-align:left;font-size:12px;color:var(--text-2)}
  .veg-col{height:12px;flex:1;flex-direction:row;border-radius:6px}
  .veg-col i.f{height:auto;width:calc(var(--f) * 1%)}
  .veg-col i.c{height:auto;width:calc(var(--c) * 1%)}
  .veg-perfil b{order:3;flex:0 0 2.8em;text-align:right}
}

/* -- Decisao rapida --------------------------------------------------------
   Agua, celular, carro e volta estavam na 9a secao. Aqui eles sao chips, na
   segunda tela, com o detalhe datado logo abaixo, no bloco "no dia". */
.decidir-chips{display:flex;flex-wrap:wrap;gap:9px;margin:0 0 20px}
/* O balao e' TEXTO CORRIDO, nao flex: com inline-flex cada pedaco (icone,
   <b>rotulo</b>, detalhe) virava uma coluna, e no celular o detalhe quebrava
   em 2-3 linhas estreitas a direita. Agora o texto flui e, quando quebra, as
   linhas seguintes alinham sob o rotulo (recuo pendurado do icone). Raio de
   18px: numa linha so' continua pilula; em varias, nao vira oval. */
.dchip{--dchip-ico:1.6em;display:inline-block;max-width:100%;font-size:12.5px;line-height:1.45;font-weight:700;color:var(--text-2);background:var(--surface);border:1px solid var(--border);padding:8px 14px 8px calc(14px + var(--dchip-ico));text-indent:calc(-1 * var(--dchip-ico));border-radius:18px;overflow-wrap:break-word;text-wrap:pretty}
.dchip b{color:var(--text)}
.dchip b{white-space:nowrap}
.dchip.alerta{border-color:rgba(181,116,31,.45);background:rgba(181,116,31,.09)}
/* Chip que e' link (26/10/2026: "Leve o traçado" da /caminhodafe leva ao Wikiloc). */
a.dchip{text-decoration:none}
a.dchip:hover{text-decoration:underline}

/* -- Ritmo visual: a ilustracao do corpo -----------------------------------
   Padrao v2.3 (CAMINHOS.md, "Ilustracao de corpo -- v2.3"): UMA ilustracao por
   pagina, do piso (ou, em pagina de varios percursos, uma composicao do lugar),
   em linha e aguada, feita a partir das fotos do dono. Sem placa, porteira ou
   pictograma -- ilustracao de IA nao ancora fato de acesso. A porteira do
   piloto do Itaberaba saiu em 2026-09-24 por isso.

   A identificacao de IA NAO se repete em cada legenda: ela fica UMA vez, na
   linha abaixo do hero, valendo para a pagina inteira. */
figure.ilustra{margin:32px 0}
figure.ilustra img{display:block;width:100%;height:auto;border-radius:var(--r-lg);border:1px solid var(--border)}
figure.ilustra figcaption{margin-top:10px;font-size:12.5px;line-height:1.6;color:var(--text-3)}
figure.ilustra figcaption b{color:var(--text-2)}
/* A vertical entra ao lado do texto no desktop e no fluxo, no ponto narrativo
   certo, no celular -- e' a alternancia que a regua pede. */
.ilustra-dupla{display:grid;gap:24px;align-items:start;margin:32px 0}
@media(min-width:1100px){.ilustra-dupla{grid-template-columns:minmax(0,1fr) 300px;width:calc(100% + 324px);margin-left:-162px}}
@media(max-width:1099px){.ilustra-dupla figure.ilustra{max-width:420px;margin:0 auto}}
.ilustra-dupla figure.ilustra{margin:0}
.ilustra-dupla .historia p:first-child{margin-top:0}
/* Quando o bloco ao lado e' grade (etapas, cartoes) ou nota curta, e nao prosa,
   a vertical nao divide coluna: entra sozinha, centrada, abaixo dele. */
figure.ilustra.ilustra-solo{max-width:360px;margin:32px auto}
/* Ajuste do dono, 2026-09-22: dentro do wrap-narrow (712px uteis) a duas
   colunas deixava o texto em ~400px -- linha curta e hifenizacao. Agora ela
   so' entra acima de 1100px, e ai' o bloco sai do wrap para o texto manter
   largura de leitura; abaixo disso a vertical empilha, centrada. */
.ficha-grid{grid-template-columns:repeat(auto-fit,minmax(215px,1fr))}
.ficha-val{hyphens:manual;overflow-wrap:break-word}

/* -- Caixa lateral de servico ---------------------------------------------*/
.box-lateral{border:1px solid var(--border);border-left:3px solid var(--accent);border-radius:12px;background:var(--bg-2);padding:16px 18px;margin:24px 0;font-size:13.5px;line-height:1.65;color:var(--text-2)}
.box-lateral h3{font-family:var(--font-serif);font-size:15px;margin:0 0 7px;color:var(--text)}
.box-lateral p{margin:0 0 9px}
.box-lateral p:last-child{margin-bottom:0}

/* -- "O que encontramos no dia" -------------------------------------------
   A grade de quatro itens (carro, celular, agua, volta) FOI REMOVIDA em
   2026-09-22, por decisao do dono: ela repetia, com mais palavras, os quatro
   chips de alerta da "Decisao rapida". Em pagina curta, redundancia custa
   leitura. Sobrou o que so' existe aqui -- a data da passagem, o que ficou
   sem resposta e o acesso na nossa passagem. As regras de .nodia-grid e
   .nodia-item sairam junto: CSS sem marcacao viva desinforma quem le depois.
   Preco, horario, cota, telefone e regra de portaria continuam NAO morando
   aqui -- mudam sem aviso, e a pagina manda conferir na fonte. */
.nodia{border:1px solid var(--border);border-radius:16px;background:var(--surface);overflow:hidden}
.nodia-head{padding:15px 20px;border-bottom:1px solid var(--border);background:var(--bg-2)}
.nodia-head b{font-family:var(--font-serif);font-size:15.5px;color:var(--text);display:block}
.nodia-head span{font-size:11.5px;color:var(--text-3);letter-spacing:.02em}
.nodia-pe{padding:15px 20px;font-size:12.5px;line-height:1.65;color:var(--text-3)}
.nodia-pe a{font-weight:700}

/* -- Dados e metodologia, recolhiveis -------------------------------------
   O conteudo continua inteiro e rastreavel; o que muda e' que ele parou de
   interromper a reportagem. */
details.metodo{border:1px solid var(--border);border-radius:14px;background:var(--surface);margin-top:14px}
details.metodo > summary{cursor:pointer;list-style:none;padding:0 20px;min-height:56px;display:flex;align-items:center;gap:10px;font-size:14px;font-weight:700;color:var(--text)}
details.metodo > summary::-webkit-details-marker{display:none}
details.metodo > summary::after{content:"+";margin-left:auto;font-size:20px;color:var(--text-3);line-height:1}
details.metodo[open] > summary::after{content:"\2212"}
details.metodo > summary:hover{background:var(--bg-2)}
body.rota-v2 .metodo-corpo{padding:2px 20px 20px;font-size:13.5px;line-height:1.7;color:var(--text-2);border-top:1px solid var(--border)}
body.rota-v2 .metodo-corpo h4{font-family:var(--font-serif);font-size:14.5px;color:var(--text);margin:18px 0 6px}
body.rota-v2 .metodo-corpo h4:first-child{margin-top:16px}
body.rota-v2 .metodo-corpo p{margin:0 0 10px}

/* -- Fontes e evidencias, por tipo ----------------------------------------
   "Fontes oficiais" juntava num monte so' o orgao gestor, a lei, o nosso
   registro no Wikiloc e a base cartografica -- e chamava o Wikiloc de fonte
   oficial, que ele nao e'. Agora cada tipo diz o que e'. */
.evid{display:grid;gap:20px}
.evid-grupo > h3{font-size:10.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--text-3);margin:0 0 4px}
.evid-grupo > p.evid-que{margin:0 0 10px;font-size:12.5px;color:var(--text-3);line-height:1.55}
.evid-grupo .fontes-list{margin:0}
.evid-nao-oficial{border-left:3px solid var(--border);padding-left:14px}
/* -- O grupo "conferir": tres <section> que se leem como UMA lista ------
   Pedido do dono (2026-09-22): o <details> da consulta a' fonte aparecia
   sozinho entre duas secoes, parecendo um widget repetido, e as fontes
   vinham em outro formato logo abaixo. Continuam sendo tres <section>
   porque test_editorial_acesso.py procura a secao com class=sec e id=acesso
   literais -- e o proprio comentario nao pode conter essa tag escrita por
   extenso, ou o regex do teste casa AQUI e le o trecho errado (aconteceu).
   O que se funde e' a aparencia. O espacamento entre itens passa a
   ser sempre o margin-top:14px do proprio details. */
.conferir > .sec{padding-top:0;padding-bottom:0;border-top:0}
.conferir > .sec:first-child{padding-top:56px;border-top:1px solid var(--border-soft)}
.conferir > .sec:last-child{padding-bottom:56px}

/* -- Mapa -----------------------------------------------------------------*/
/* Texto escurecido como na regra base: o accent puro dava 4,45:1 sobre este
   fundo, abaixo do AA (auditoria de lancamento de 2026-09-24). */
.mapa-selo{background:rgba(181,116,31,.12);color:color-mix(in srgb,var(--accent) 82%,#000);border:1px solid rgba(181,116,31,.35)}
.mapa-legenda{margin-top:12px;font-size:12px;line-height:1.65;color:var(--text-3)}

/* -- Experiencias essenciais: a caixa ja' existe em caminhos.css. ---------*/
.essenciais{max-width:900px}

/* == Molde da pagina de rota (docs/MOLDE_PAGINA_ROTA.md, 2026-10-12) =======
   Piloto em /caminhodafe. So' classes NOVAS: nenhuma regra acima muda, entao
   as outras paginas de rota ficam como estao ate' a Fase 3. */

/* Blocos recolhiveis do molde: mata, ramais, municipios e "Dados, fontes e
   evidencias" -- mesmo desenho do details.metodo. */
.veg-dobra,.ramais-dobra,.trajeto-dobra,.dados-dobra{border:1px solid var(--border);border-radius:14px;background:var(--surface);margin-top:14px}
.veg-dobra>summary,.ramais-dobra>summary,.trajeto-dobra>summary,.dados-dobra>summary{cursor:pointer;list-style:none;padding:12px 20px;min-height:56px;display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;font-size:14px;font-weight:700;color:var(--text)}
.veg-dobra>summary::-webkit-details-marker,.ramais-dobra>summary::-webkit-details-marker,.trajeto-dobra>summary::-webkit-details-marker,.dados-dobra>summary::-webkit-details-marker{display:none}
.veg-dobra>summary::after,.ramais-dobra>summary::after,.trajeto-dobra>summary::after,.dados-dobra>summary::after{content:"+";margin-left:auto;font-size:20px;color:var(--text-3);line-height:1}
.veg-dobra[open]>summary::after,.ramais-dobra[open]>summary::after,.trajeto-dobra[open]>summary::after,.dados-dobra[open]>summary::after{content:"\2212"}
.veg-dobra>summary small{font-weight:400;color:var(--text-3);font-size:12.5px}
.dados-dobra>summary{font-weight:600;color:var(--text-2);font-size:13px;line-height:1.5}
.veg-dobra>:not(summary),.trajeto-dobra>:not(summary),.dados-dobra>:not(summary){margin-left:16px;margin-right:16px}
.veg-dobra>:last-child,.trajeto-dobra>:last-child,.dados-dobra>:last-child{margin-bottom:16px}
.ramais-dobra .ramais-grid{padding:4px 16px 16px}
/* Slot dobrado (Etapa 3, 14/10/2026): o texto longo do slot fica inteiro, num acordeão fechado, como os ramais. */
.slot-dobra .slot-corpo{padding:4px 16px 16px}
.slot-dobra .slot-corpo>p:first-child,.slot-dobra .slot-corpo .historia p:first-child{margin-top:0}
.dados-dobra .evid{margin-top:18px}

.obs-campo .nodia-pe{font-style:italic}

/* Infografico 1 -- perfil de altitude, gerado por scripts/gerar_infograficos_rota.py.
   O SVG estica (preserveAspectRatio="none"); todo texto fica em HTML por cima,
   para nao deformar. 160 px no celular. */
.perfil-bloco{margin-top:18px}
.perfil-alt{position:relative;border:1.5px dashed var(--border);border-radius:var(--r-md);background:var(--surface);padding:52px 8px 8px 44px}
.perfil-svg{display:block;width:100%;height:var(--perfil-h,160px);overflow:visible}
@media (min-width:700px){.perfil-svg{height:220px}}
.perfil-area{fill:var(--accent-soft)}
.perfil-linha{fill:none;stroke:var(--accent);stroke-width:2;vector-effect:non-scaling-stroke}
.perfil-grade{stroke:var(--border);stroke-width:1;stroke-dasharray:4 4;vector-effect:non-scaling-stroke}
.perfil-hachura-linha{stroke:var(--text-2);stroke-width:2.5;opacity:.55}
.perfil-veiculo{opacity:.75}
.perfil-tique{stroke:var(--text-3);stroke-width:1.5;vector-effect:non-scaling-stroke}
.perfil-selo{position:absolute;top:6px;left:8px;font-size:11px;font-weight:600;color:var(--text-2);border:1px dashed var(--border);border-radius:999px;padding:2px 9px;background:var(--surface)}
.perfil-selo::before{content:"📡 "}
.perfil-eixo-y{position:absolute;left:6px;font-size:10.5px;color:var(--text-3)}
.perfil-y-teto{top:52px}
.perfil-y-piso{bottom:8px}
.perfil-pico{position:absolute;top:31px;transform:translateX(-50%);font-size:11px;font-weight:700;color:var(--text);white-space:nowrap}
.perfil-pico::before{content:"▲ "}
.perfil-veiculo-rot{position:absolute;bottom:14px;transform:translateX(-50%);max-width:9em;font-size:10px;line-height:1.25;text-align:center;color:var(--text);background:var(--surface);border:1px solid var(--border);border-radius:6px;padding:1px 5px}
.perfil-cidades{position:relative;list-style:none;margin:6px 8px 0 44px;padding:0;height:3.2em}
/* nomes alternam entre duas linhas: a 360 px, vizinhos se encostavam */
.perfil-cidades li:nth-child(even){top:1.5em}
.perfil-cidades li{position:absolute;top:0;transform:translateX(-50%);font-size:11px;color:var(--text-2);white-space:nowrap}
.perfil-cidades li:first-child{transform:none}
.perfil-cidades li:last-child{transform:translateX(-100%)}
/* rotulo unico: o gerador diz de que ponta ele e' (no km 0, o :last-child jogava o nome para fora) */
.perfil-cidades li.ponta-ini{transform:none}
.perfil-cidades li.ponta-fim{transform:translateX(-100%)}
.perfil-fonte{margin-top:2px;font-size:12px;color:var(--text-3)}
.perfil-tabela{margin-top:8px;font-size:13px}
.perfil-tabela>summary{cursor:pointer;color:var(--text-2);min-height:44px;display:flex;align-items:center}
.perfil-tabela>summary::-webkit-details-marker{display:none}
.perfil-tabela>summary::before{content:"\25B8\00a0";color:var(--text-3)}
.perfil-tabela[open]>summary::before{content:"\25BE\00a0"}
.perfil-tabela p{color:var(--text-3);font-size:12.5px;margin:4px 0 8px}
.perfil-tabela table{width:100%;border-collapse:collapse}
.perfil-tabela th,.perfil-tabela td{text-align:left;padding:4px 6px;border-bottom:1px solid var(--border-soft);font-weight:400}
.perfil-tabela thead th{font-weight:700;color:var(--text)}
.perfil-tabela td{text-align:right;font-variant-numeric:tabular-nums}
.mapa-ressalvas{margin:16px 0 0;padding-left:1.2em;font-size:13.5px;line-height:1.6;color:var(--text-2)}

/* Links da regua de dificuldade (a regua mora no bloco de dados, .bd-escala). */
.regua-links{margin-top:10px;font-size:13px;color:var(--text-2)}
.regua-links a{color:inherit;font-weight:600;text-decoration:underline;text-underline-offset:2px}

/* Ficha no desenho 3 + 1 do molde de 13/10 (docs/MOLDE_PAGINA_ROTA.md, secao 4):
   linha 1 com tres numeros grandes (Extensao, Tempo, Dificuldade), linha 2 corrida
   (Desnivel, Altitude, Formato, Municipios/UF e o slot), origem uma vez por grupo. */
.ficha{margin:22px 0 6px}
.ficha-destaque{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px 18px;align-items:start}
.ficha-destaque .ficha-item{background:none;border:0;box-shadow:none;padding:0}
.ficha-destaque .ficha-lbl{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--text-3)}
.ficha-destaque .ficha-val{font-family:inherit;font-size:clamp(18px,4.6vw,24px);font-weight:700;line-height:1.25;color:var(--text)}
.ficha-destaque .ficha-sub{display:block;margin-top:2px;font-size:12.5px;line-height:1.45;color:var(--text-2)}
.ficha-linha{margin-top:14px;padding-top:12px;border-top:1px solid var(--border);font-size:14px;line-height:1.75;color:var(--text-2)}
.ficha-linha .ficha-lbl,.ficha-linha .ficha-val{display:inline}
.ficha-linha .ficha-lbl{font-family:inherit;font-size:inherit;font-weight:600;letter-spacing:0;text-transform:none;color:var(--text);margin:0}
.ficha-linha .ficha-val{font-family:inherit;font-size:inherit;font-weight:400;letter-spacing:0;text-transform:none;line-height:inherit;color:var(--text-2);margin:0}
.ficha-linha .ficha-lbl::after{content:": "}
.ficha-linha .ficha-val+.ficha-lbl::before{content:" · ";font-weight:400;color:var(--text-3)}
.ficha-origem{display:block;grid-column:1/-1;margin-top:6px;font-size:12px;line-height:1.55;color:var(--text-3)}
@media(max-width:560px){.ficha-destaque{grid-template-columns:1fr}}
/* Vindos do inline da /rotamarciaprado (13/10/2026): as marcas do perfil que o
   gerar_infograficos_rota.py desenha (subidas, pontos e o selo do traçado proprio). */
.perfil-selo.proprio::before{content:"✓ "}
.perfil-selo.proprio.parcial::before{content:"◐ "}
.perfil-subida{fill:var(--accent,#b5552b);opacity:.28}
.perfil-ponto{stroke:var(--text-3);stroke-width:1;stroke-dasharray:3 3;vector-effect:non-scaling-stroke}
.perfil-subida-rot{position:absolute;bottom:14px;transform:translateX(-50%);font-size:10px;line-height:1.25;text-align:center;color:var(--text);background:var(--surface);border:1px solid var(--border);border-radius:6px;padding:1px 5px;white-space:nowrap}

/* == Bloco de dados da "Decisao rapida" (pedido da sala Produto, 14/10/2026) ==========
   Gerado por scripts/gerar_bloco_dados_rota.py a partir de scripts/fichas_rota.json.
   No celular: nenhum texto abaixo de 15 px, contraste >= 4,5:1, fonte e data a um toque
   (<details class="ficha-origem">). A origem do tracado se le pelo icone e pelo texto
   do selo, nunca so' pela cor. */
.bd{--bd-ok-bg:#e6f0e4;--bd-ok-tx:#2b542b;--bd-ok-bd:#9cbf96;--bd-3o-bg:#fbf1d6;--bd-3o-tx:#5f4500;--bd-3o-bd:#d9b44a;
  --bd-f1:#57574f;--bd-f2:#4F6A4F;--bd-f3:#a95938;--bd-f4:#b4b2a8;--bd-f5:#dcdad0}
[data-theme="dark"] .bd{--bd-ok-bg:#1d2b1c;--bd-ok-tx:#b2dbab;--bd-ok-bd:#3f6a3a;--bd-3o-bg:#2e2610;--bd-3o-tx:#ecd17a;--bd-3o-bd:#7a6524;
  --bd-f1:#c9c6bd;--bd-f2:#8aa585;--bd-f3:#d0805f;--bd-f4:#6a6c64;--bd-f5:#3f413b}
.bd{font-size:16px;line-height:1.5;color:var(--text)}
.bd .ficha-destaque .ficha-lbl{font-size:15px;letter-spacing:.02em;text-transform:none;font-weight:600;color:var(--text-2)}
.bd .ficha-destaque .ficha-val{font-size:clamp(22px,5.6vw,26px);margin-top:0}
.bd .ficha-destaque .ficha-sub{font-size:15px;color:var(--text-2)}
/* celular: rotulo e valor na mesma linha (uma linha a menos por numero) */
@media(max-width:560px){
  .bd .ficha-destaque{gap:8px}
  .bd .ficha-destaque .ficha-item{display:grid;grid-template-columns:6.4em 1fr;align-items:baseline;column-gap:10px}
  .bd .ficha-destaque .ficha-sub{grid-column:2;margin-top:0}
  .bd .ficha-destaque .ficha-val{font-size:20px}
}
.bd details.ficha-origem{grid-column:1/-1;margin-top:2px;font-size:15px;color:var(--text-2)}
.bd details.ficha-origem>summary{cursor:pointer;list-style:none;display:inline-flex;align-items:center;gap:6px;min-height:36px;color:var(--text-2);text-decoration:underline;text-underline-offset:3px}
.bd details.ficha-origem>summary::-webkit-details-marker{display:none}
.bd details.ficha-origem>summary::before{content:"ⓘ";display:inline-block;text-decoration:none;font-size:17px}
.bd details.ficha-origem>p{margin:2px 0 6px;line-height:1.55}
/* linha 2: selo, perfil, Sobe/Desce, resumo */
.bd .ficha-linha{display:block;font-size:16px;line-height:1.5;color:var(--text)}
.bd-selo{display:inline-flex;align-items:center;gap:6px;margin:0 0 6px;padding:3px 12px;border-radius:999px;border:1.5px solid;font-size:15px;font-weight:600}
.bd-selo.bd-proprio{background:var(--bd-ok-bg);color:var(--bd-ok-tx);border-color:var(--bd-ok-bd)}
.bd-selo.bd-terceiro{background:var(--bd-3o-bg);color:var(--bd-3o-tx);border-color:var(--bd-3o-bd);border-style:dashed}
.bd-perfil{display:block;width:100%;height:44px;margin:0 0 8px}
.bd-perfil-area{fill:var(--accent-soft)}
.bd-perfil-linha{fill:none;stroke:var(--accent);stroke-width:2;vector-effect:non-scaling-stroke}
.bd-desnivel>.ficha-lbl,.bd-formato .ficha-lbl,.bd-mun .ficha-lbl{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.bd-desnivel>.ficha-val{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:0}
.bd-card{display:flex;flex-direction:column;gap:0;padding:5px 12px 6px;border:1px solid var(--border);border-radius:12px;background:var(--surface)}
.bd-card-unico{grid-column:1/-1}
.bd-card-lbl{font-size:15px;color:var(--text-2)}
.bd-card b{font-size:20px;font-weight:700;color:var(--text);font-variant-numeric:tabular-nums}
.bd-resumo{display:flex;flex-wrap:wrap;align-items:baseline;gap:0;margin-top:8px;font-size:16px;color:var(--text)}
.bd .bd-par .ficha-lbl,.bd .bd-par .ficha-val{display:inline;font:inherit;letter-spacing:0;text-transform:none;color:inherit;margin:0}
.bd-formato{order:1}.bd-mun{order:2}.bd-alt{order:3}.bd-extra{order:4}
.bd .ficha-linha .ficha-lbl::after,.bd .ficha-linha .ficha-val+.ficha-lbl::before{content:none}
.bd .bd-alt .ficha-lbl::after,.bd .bd-extra .ficha-lbl::after{content:": "}
.bd .bd-alt .ficha-lbl,.bd .bd-extra .ficha-lbl{color:var(--text-2)}
.bd-par:not(.bd-formato)::before{content:"·";margin:0 .45em;color:var(--text-2)}
/* titulos de grupo */
.bd-tit{margin:16px 0 6px;font-size:16px;font-weight:700;color:var(--text)}
/* piso */
.bd-barra{display:flex;gap:2px;height:16px;border-radius:8px;overflow:hidden}
.bd-fatia{display:block;min-width:4px}
.bd-f1{background:var(--bd-f1)}.bd-f2{background:var(--bd-f2)}.bd-f3{background:var(--bd-f3)}.bd-f4{background:var(--bd-f4)}.bd-f5{background:var(--bd-f5)}
.bd-piso-top,.bd-piso-resto{margin:8px 0 0;font-size:16px;line-height:1.55}
.bd-piso-resto{font-size:15px;color:var(--text-2);margin-top:2px}
.bd-leg{overflow-wrap:anywhere}
.bd-leg b{white-space:nowrap}
.bd-leg+.bd-leg::before{content:"·";margin:0 .4em 0 .1em;color:var(--text-2)}
.bd-sw{display:inline-block;width:11px;height:11px;margin-right:5px;border-radius:3px;outline:1px solid var(--border);vertical-align:-1px}
.bd-aviso{margin:10px 0 0;padding:6px 12px;border-left:3px solid var(--accent);background:var(--bg-2);border-radius:0 10px 10px 0;font-size:15px;line-height:1.5;color:var(--text)}
/* regua */
.bd-regua{margin-top:16px}
/* Modelo C, "Eixo de horas": faixas num eixo; cada modo e' um ponteiro na hora real */
.mc-tit{margin:0 0 2px;font-size:15px;font-weight:600;color:var(--text-2)}
.mc+.mc{margin-top:14px}
.mc-eixo{position:relative;padding:50px 0 0}
.mc-eixo.dois{padding-bottom:52px}
.mc-eixo.sem{padding-top:8px}
.mc-eixo.sem .mc-barra{height:40px}
.mc-barra{display:flex;height:48px}
.mc-faixa{display:flex;flex-direction:column;justify-content:center;align-items:center;flex-basis:0;min-width:0;box-sizing:border-box;padding:0;background:var(--bg-2);color:var(--text-2);line-height:1.15;text-align:center;border:1px solid var(--border);margin-left:-1px}
.mc-faixa:first-child{margin-left:0;border-radius:8px 0 0 8px}
.mc-faixa:last-child{border-radius:0 8px 8px 0}
.mc-faixa b{font-size:15px;font-weight:600}
.mc-faixa span{font-size:15px;white-space:nowrap;letter-spacing:-.01em}
.mc-faixa.ativo{position:relative;z-index:1;background:var(--accent-soft);color:var(--text);border-color:var(--text)}
.mc-faixa.ativo b{font-weight:800}
.mc-pt{position:absolute;width:0}
.mc-pt::before{content:"";position:absolute;left:-9px;border:9px solid transparent}
.mc-pt.cima{top:0}
.mc-pt.cima::before{top:41px;border-bottom:0;border-top:10px solid var(--text)}
.mc-pt.baixo{top:98px}
.mc-pt.baixo::before{top:1px;border-top:0;border-bottom:10px solid var(--text)}
.mc-rot{position:absolute;left:0;transform:translateX(-50%);white-space:nowrap;text-align:center;font-size:15px;line-height:1.2;color:var(--text)}
.mc-pt.cima .mc-rot{top:0}
.mc-pt.baixo .mc-rot{top:12px}
.mc-pt.esq .mc-rot{left:-9px;transform:none;text-align:left}
.mc-pt.dir .mc-rot{left:auto;right:-9px;transform:none;text-align:right}
.mc-rot em{font-style:normal;font-weight:600;color:var(--text-2)}
.mc-rot b{font-size:17px;font-weight:700;font-variant-numeric:tabular-nums}
.bd-contas{margin:10px 0 0}
.bd-contas .bd-conta+.bd-conta{margin-top:2px}
.bd-conta b{color:var(--text);font-weight:600}
.bd-resultado{margin:8px 0 0;font-size:16px;line-height:1.35}
.bd-conta{margin:0;font-size:15px;line-height:1.45;color:var(--text-2)}
.bd-nota-dif{margin:0;font-size:16px;color:var(--text)}
.bd .regua-links{margin-top:4px;font-size:15px}
.bd .regua-links a{display:inline-block;padding:6px 0;white-space:nowrap}
.bd-classif{margin:4px 0 0;font-size:16px;color:var(--text)}
.bd-info{display:inline-flex;align-items:center;justify-content:center;min-width:32px;min-height:32px;margin:-6px 0;text-decoration:none;font-size:18px;color:var(--text-2)}
.bd-fontes{margin:0;font-size:16px}
.bd-fontes a{display:inline-block;padding:6px 0;font-weight:600;color:var(--text);text-decoration:underline;text-underline-offset:3px}

/* Celular: nada abaixo de 15 px na Decisao rapida, na Observacao de campo e em Dados
   (pedido de 14/10/2026). O "Na passagem" deixou de ser italico: a data abre o card e
   cada observacao tem titulo com icone. */
body.rota-v2 #decidir .sec-kicker,body.rota-v2 #dia .sec-kicker,body.rota-v2 #dados .sec-kicker{font-size:15px;letter-spacing:.12em}
body.rota-v2 .dchip{font-size:15px}
body.rota-v2 #decidir .ficha-grid .ficha-lbl{font-size:15px;letter-spacing:.02em;text-transform:none}
body.rota-v2 #decidir .ficha-grid .ficha-val{font-size:17px}
body.rota-v2 .nodia-head b{font-size:17px}
body.rota-v2 .nodia-head span{font-size:15px;color:var(--text-2)}
body.rota-v2 .nodia-pe{font-size:16px;line-height:1.6;color:var(--text-2);font-style:normal}
body.rota-v2 .nodia-pe i,body.rota-v2 .obs-campo .nodia-pe{font-style:normal}
body.rota-v2 .nodia-pe{padding:12px 18px}
body.rota-v2 .nodia-pe>b:first-child{color:var(--text)}
body.rota-v2 .nodia-pe>b:first-child::before{content:"📍";margin-right:6px}
body.rota-v2 .dados-dobra>summary{font-size:16px;color:var(--text)}
body.rota-v2 .dados-dobra>summary small{display:block;width:100%;font-size:15px;font-weight:400;color:var(--text-2)}
body.rota-v2 .dados-dobra .metodo-tit{margin:22px 0 6px;font-family:var(--font-serif);font-size:17px;color:var(--text)}
body.rota-v2 .dados-dobra .metodo-corpo{padding:0;border:0;font-size:16px;color:var(--text-2)}
body.rota-v2 .evid-grupo>h3{font-size:15px}
body.rota-v2 .evid-grupo>p.evid-que{font-size:15px;color:var(--text-2)}
body.rota-v2 .fontes-list small{font-size:15px;color:var(--text-2)}
body.rota-v2 #dados .fontes-list a,body.rota-v2 #dados .metodo-corpo h4,body.rota-v2 #dados .rota-cta p,
body.rota-v2 #dados .gpx-fonte,body.rota-v2 #dados .aviso-inativo,body.rota-v2 #dados .rota-cta .sel,body.rota-v2 #dados .btn{font-size:15px}
/* o selo verde do traçado no tema escuro dava ~2,7:1 (verde da paleta sobre fundo escuro) */
[data-theme="dark"] .rota-cta .sel.ok{color:#b2dbab}

/* ── Letra mínima de 15 px no celular (sala Produto, 14/10/2026; molde, seção 3) ──
   Na página de rota, a 390 px, nenhum texto que informa fica abaixo de 15 px: topo,
   chips, clima, legendas, fonte do perfil, mapa, "Antes de ir", listas dentro de
   acordeão e rodapé. Exceção única: o kicker da seção (.sec-kicker), rótulo
   decorativo em caixa alta, sem informação. Medido por scripts/test_letra_minima_rota.js. */
@media(max-width:767px){
  body.rota-v2 .skip-link,
  body.rota-v2 .nav-indice summary,body.rota-v2 .nav-indice-lista a,
  body.rota-v2 .hero-photo .eyebrow,body.rota-v2 .eyebrow,
  body.rota-v2 .hstat,body.rota-v2 .hstat b,
  body.rota-v2 .hero-parcial,body.rota-v2 .selo-km,body.rota-v2 .hero-photo-credit,body.rota-v2 .lead,
  body.rota-v2 .clima-card .clima-local,body.rota-v2 .clima-local,body.rota-v2 .clima-err,body.rota-v2 .clima-note,
  body.rota-v2 .veg-bioma,body.rota-v2 .veg-bioma span,body.rota-v2 .sec-vegetacao summary,
  body.rota-v2 .sec-vegetacao small,body.rota-v2 .vegeta-num,body.rota-v2 .vegeta-nota,
  body.rota-v2 .veg-fig small,body.rota-v2 .veg-fig b,body.rota-v2 .veg-leg li,
  body.rota-v2 figcaption,body.rota-v2 figcaption b,body.rota-v2 .essenciais li,
  body.rota-v2 .ramais-dobra summary,body.rota-v2 .ramal-nome,body.rota-v2 .ramal-rota,body.rota-v2 .ramal-km,
  body.rota-v2 .dif-badge,
  body.rota-v2 .mapa-selo,body.rota-v2 .mapa-cap,body.rota-v2 .mapa-abrir,body.rota-v2 .mapa-baixar,
  body.rota-v2 .perfil-selo,body.rota-v2 .perfil-eixo-y,body.rota-v2 .perfil-pico,
  body.rota-v2 .perfil-subida-rot,body.rota-v2 .perfil-veiculo-rot,body.rota-v2 .perfil-cidades li,
  body.rota-v2 .perfil-fonte,body.rota-v2 .perfil-tabela summary,body.rota-v2 .perfil-tabela p,
  body.rota-v2 .perfil-tabela th,body.rota-v2 .perfil-tabela td,
  body.rota-v2 .mapa-ressalvas li,body.rota-v2 .trajeto-dobra summary,body.rota-v2 .tj-role,
  body.rota-v2 .terreno-list b,body.rota-v2 .terreno-list span,body.rota-v2 .trajeto a,body.rota-v2 .trajeto span,body.rota-v2 .trajeto div,body.rota-v2 .terreno-list a,body.rota-v2 .prep-note,body.rota-v2 .prep-note a,
  body.rota-v2 .elo-node,body.rota-v2 .jafui-mini,body.rota-v2 .close .btn,
  body.rota-v2 .foot .ftag,body.rota-v2 .foot .apps a,body.rota-v2 .foot .flinks,body.rota-v2 .foot .flinks a,
  body.rota-v2 .foot div,body.rota-v2 .foot strong,body.rota-v2 .foot .ig,body.rota-v2 .foot .ver,
  body.rota-v2 .slot-corpo p,body.rota-v2 .slot-corpo b,body.rota-v2 .slot-corpo li,body.rota-v2 .slot-corpo a,
  body.rota-v2 .slot-corpo small,body.rota-v2 .slot-corpo span,body.rota-v2 .slot-corpo h3,body.rota-v2 .slot-corpo h4,
  body.rota-v2 .slot-corpo .ficha-lbl,body.rota-v2 .slot-corpo .ficha-val,body.rota-v2 .slot-corpo .meta,
  body.rota-v2 #acesso p,body.rota-v2 #acesso a,body.rota-v2 #acesso b,body.rota-v2 #dados .ficha-note,body.rota-v2 #dados .ficha-note small,body.rota-v2 #dados .ficha-note b,
  body.rota-v2 .slot-corpo .ficha-note,body.rota-v2 .slot-corpo .ficha-note small,body.rota-v2 .slot-corpo .aviso-inativo,body.rota-v2 .trajeto.compact .tj-nome{font-size:15px}
}

/* ── Enxugar o celular (molde, 4ª revisão, 25/10/2026) ──
   Clima: só o rótulo "Agora" e os dois cartões. Vegetação: bioma, UMA frase de título, a figura
   numa dobra e a linha curta da fonte. "O caminho": o acordeão do slot e o cartão da passagem
   numa seção só. Só quem usa a marcação nova (.clima-agora, .sec-caminho) muda de aparência. */
body.rota-v2 .clima-agora{margin:0 0 8px;font-size:15px;font-weight:700;color:var(--text-2)}
body.rota-v2 .sec-vegetacao .vegeta-num{margin:0 0 4px;font-family:var(--font-serif);font-size:17px;line-height:1.4;font-weight:600;color:var(--text)}
body.rota-v2 .sec-vegetacao .vegeta-num b{font-weight:600}
body.rota-v2 .sec-vegetacao .vegeta-nota{margin:10px 0 0;font-size:15px;line-height:1.5;color:var(--text-2)}
body.rota-v2 .sec-caminho .sec-head{margin-bottom:20px}
body.rota-v2 .sec-caminho .caminho-slot{margin-bottom:14px}
body.rota-v2 .sec-caminho .caminho-slot .ramais-dobra{margin-top:0}