/* ============================================================
   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).
   ============================================================ */
: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:#8b8981;
  --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}
.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)}
@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%)}
/* 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}
/* Legenda das duas marcas do hero ("Quero ir" / "Ja fui", 2026-09-01): os botoes
   ficaram curtos como no app, e o destino que estava no rotulo desceu pra ca. */
.hero-marcar{margin-top:12px;font-size:12.5px;color:var(--text-3);line-height:1.5}
.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)}
.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 .hero-marcar{margin-top:10px}
  .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)}

/* ---------- VINHETAS ---------- */
.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-grid.ficha-grid-1{grid-template-columns:minmax(200px,340px) 1fr}
.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)}
.ramais-cta{text-align:center;margin-top:26px}

/* ---------- 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:#3f8a7a;--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}
/* 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-offroad{background:#33241a;color:#d99e6a}

/* Rota anunciada oficialmente mas nunca confirmada como implementada (sem GPX/trajeto oficial). */
.desbravar-badge{font-size:10px;font-weight:800;letter-spacing:.02em;padding:2px 8px;border-radius:8px;white-space:nowrap;margin-left:6px;color:#946200;border:1px dashed #c07000;cursor:help}
[data-theme="dark"] .desbravar-badge{color:#f5c070;border-color:#e09020}

/* ---------- 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:#c07000}
.dif-puxada{background:#fbe4e4;color:#c62828}
.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}

/* ---------- PREPARO (2 colunas + bloco de terreno) ---------- */
.prep-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.prep-col h3{font-family:var(--font-serif);font-weight:700;font-size:18px;margin-bottom:12px}
.prep-col ul{list-style:none;display:flex;flex-direction:column;gap:9px}
.prep-col li{font-size:14px;color:var(--text-2);line-height:1.55;padding-left:22px;position:relative}
.prep-col li::before{content:"—";position:absolute;left:0;color:var(--accent);font-weight:700}
.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)}

/* ---------- 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)}
.fontes-list small{font-weight:400;color:var(--text-3)}

/* ---------- 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)}
.mapa-selo{display:inline-flex;align-items:center;gap:6px;background:color-mix(in srgb,var(--accent) 14%,transparent);color:var(--accent);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}
/* grupo de botões — empilha no mobile (responsivo) */
.mapa-acoes{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.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}
@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}
.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)}

/* Nota de dificuldade — pedido do usuário (2026-08-30): a faixa Leve/Média/
   Puxada/Extrema aparecia sozinha na ficha, sem dizer de onde sai nem que o
   esforço real é individual. Texto completo em /dificuldade. */
.dif-nota{max-width:760px;margin:18px auto 0;background:color-mix(in srgb,var(--text-2) 6%,transparent);border:1px solid var(--border);border-left:3px solid var(--accent2);border-radius:var(--r-md);padding:18px 22px}
.dif-nota-head{font-weight:700;font-size:14px;margin-bottom:8px;line-height:1.35;overflow-wrap:anywhere}
.dif-nota p{font-size:13.5px;color:var(--text-2);line-height:1.62;margin:0 0 9px}
.dif-nota p:last-child{margin-bottom:0}
.dif-nota-link a{font-weight:600;color:var(--accent);text-decoration:underline}

/* ---------- 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}
.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}
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 "CASA DE ROMA" 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-capa:not(.hub-capa-vazia) .desbravar-badge{color:#ffd08a;border-color:#ffb347;background:rgba(0,0,0,.4)}
.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}
/* 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}

/* 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}
body.do-hub .hub-card .desbravar-badge{font-size:9.5px;padding:2px 7px;margin-left:0}

/* ---------- 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 é o mesmo vocabulário da
   .desbravar-badge: "tracejado = ainda não confirmado". 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}
}