/* Lista de Lugares — estrutura do guia de viagem (celular primeiro).
   Cada guia define os tokens do seu mundo e sobrepõe o que for dele. */
svg.ti { width: 1.15em; height: 1.15em; flex: none; vertical-align: -0.18em; }
body.guia { min-height: 100dvh; }
.g-topo { position: sticky; top: 0; z-index: 30; background: var(--topo-fundo, var(--superficie)); color: var(--topo-tinta, var(--tinta)); }
.g-topo-in { max-width: 760px; margin: 0 auto; display: flex; align-items: center; gap: 10px; padding: 10px 16px; }
.g-marca { display: flex; align-items: center; gap: 8px; min-width: 0; color: inherit; text-decoration: none; font-weight: 800; }
.g-marca span { overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-height: 1.15; }
.g-busca { margin-left: auto; position: relative; flex: 0 1 170px; min-width: 110px; }
.g-busca svg { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--placeholder, var(--tinta-2)); }
.g-busca input { width: 100%; min-height: 40px; border-radius: 99px; border: 1.5px solid var(--linha); background: var(--superficie); color: var(--tinta); padding: .35em .8em .35em 2.2em; }
.g-busca input:focus { outline: 3px solid var(--foco, var(--destaque)); outline-offset: 1px; }
.g-net { margin: 0; padding: 6px 16px; display: flex; gap: 6px; align-items: center; justify-content: center; font-size: .85rem; font-weight: 700; background: var(--aviso-fundo, #fff3c4); color: var(--aviso-tinta, #6b4e00); }
.g-main { max-width: 760px; margin: 0 auto; padding: 14px 16px 40px; display: flex; flex-direction: column; gap: 16px; }
.g-voltar { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; min-height: 40px; color: var(--tinta-2); font-weight: 700; text-decoration: none; }
.g-h1 { margin: 0; font-family: var(--fonte-titulo); font-size: clamp(2rem, 9vw, 3rem); line-height: 1; text-wrap: balance; }
.g-meta { margin: -6px 0 0; display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: center; color: var(--tinta-2); font-weight: 600; font-size: .92rem; }
.g-meta span { display: inline-flex; align-items: center; gap: 6px; }
.g-barra { display: inline-block; width: 64px; height: 7px; border-radius: 99px; background: var(--superficie-2); overflow: hidden; }
.g-barra span { display: block; height: 100%; background: var(--ok); border-radius: 99px; }
.g-atalho { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 8px 14px; border-radius: var(--raio); background: var(--superficie); border: 1.5px solid var(--linha); color: inherit; text-decoration: none; font-weight: 750; }
.g-atalho > svg:first-child { color: var(--fav); }
.g-atalho b { margin-left: auto; }
.g-cidades, .g-tipos, .g-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.g-cidade { display: flex; align-items: center; gap: 12px; min-height: 76px; padding: 8px 12px 8px 8px; border-radius: var(--raio); background: var(--superficie); border: 1.5px solid var(--linha); color: inherit; text-decoration: none; }
.g-cidade img { width: 72px; height: 60px; object-fit: cover; border-radius: calc(var(--raio) - 4px); flex: none; }
.g-cidade-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.g-cidade-txt b { font-size: 1.12rem; }
.g-cidade-txt small { color: var(--tinta-2); }
.g-cidade > svg { color: var(--tinta-2); }
.g-tipos { display: grid; grid-template-columns: 1fr 1fr; }
.g-tipo { position: relative; display: flex; flex-direction: column; gap: 8px; min-height: 104px; padding: 14px; border-radius: var(--raio); background: var(--cor-tipo); color: var(--tipo-tinta, #fff); text-decoration: none; }
.g-tipo-ic svg { width: 1.9rem; height: 1.9rem; }
.g-tipo b { font-size: 1.05rem; line-height: 1.1; margin-top: auto; }
.g-tipo small { font-size: .78rem; font-weight: 700; opacity: .9; }
.g-tipo-num { position: absolute; top: 10px; right: 14px; font-family: var(--fonte-titulo); font-size: 1.6rem; line-height: 1; }
.g-abas { display: inline-flex; align-self: flex-start; gap: 4px; padding: 4px; border-radius: 99px; background: var(--superficie-2); }
.g-abas button { display: inline-flex; align-items: center; gap: 6px; min-height: 38px; padding: 0 14px; border: 0; border-radius: 99px; background: transparent; font-weight: 700; color: var(--tinta-2); }
.g-abas [aria-selected="true"] { background: var(--superficie); color: var(--tinta); box-shadow: 0 1px 3px rgba(0,0,0,.15); }
.g-vista { display: flex; flex-direction: column; gap: 12px; }
.g-ferr { display: flex; flex-direction: column; gap: 10px; padding: 12px; border-radius: var(--raio); background: var(--superficie); border: 1.5px solid var(--linha); }
.g-ordem { display: flex; flex-wrap: wrap; gap: 6px; }
.g-ordem .ll-chip { min-height: 36px; font-size: .85rem; }
.g-ferr .ll-origem-sel { max-width: 100%; flex: 1 1 180px; }
.g-mapa { height: 62vh; border-radius: var(--raio); overflow: hidden; position: relative; }
.g-sem-net { height: auto; min-height: 120px; display: grid; place-items: center; padding: 16px; border: 2px dashed var(--linha); background: transparent; }
.g-sem-net .ll-mapa-off { text-align: center; max-width: 34ch; }
.g-mapa-fraco { position: absolute; z-index: 500; left: 8px; right: 8px; bottom: 8px; margin: 0; padding: 6px 10px; border-radius: 8px; background: var(--aviso-fundo, #fff3c4); color: var(--aviso-tinta, #6b4e00); font-size: .85rem; font-weight: 700; display: flex; gap: 6px; align-items: center; }
.ll-onde .ll-minimapa.g-sem-net { height: auto; }
.g-item { position: relative; display: flex; align-items: stretch; border-radius: var(--raio); background: var(--superficie); border: 1.5px solid var(--linha); overflow: hidden; }
.g-item-link { flex: 1; min-width: 0; display: flex; gap: 12px; padding: 8px; color: inherit; text-decoration: none; }
.g-item-foto, .g-item-ic { width: 84px; height: 84px; flex: none; border-radius: calc(var(--raio) - 4px); object-fit: cover; }
.g-item-ic { display: grid; place-items: center; background: color-mix(in srgb, var(--cor-tipo) 16%, var(--superficie)); color: var(--cor-tipo); }
.g-item-ic svg { width: 2rem; height: 2rem; }
.g-item-txt { min-width: 0; display: flex; flex-direction: column; gap: 3px; padding-top: 2px; }
.g-item-nome { font-size: 1.05rem; line-height: 1.2; }
.g-item-res { color: var(--tinta-2); font-size: .86rem; line-height: 1.3; }
.g-item-dist { display: inline-flex; align-items: center; gap: 4px; font-weight: 750; font-size: .88rem; color: var(--dist-tinta, var(--destaque)); margin-top: auto; }
.g-item-acoes { display: flex; flex-direction: column; justify-content: center; gap: 4px; padding: 6px 6px 6px 0; }
.g-bot { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; border: 1.5px solid var(--linha); background: var(--superficie); color: var(--tinta-2); }
.g-bot[data-fav][aria-pressed="true"] { color: var(--fav); border-color: currentColor; }
.g-bot[data-vis][aria-pressed="true"] { color: #fff; background: var(--ok); border-color: var(--ok); }
.g-vazio { padding: 32px 12px; text-align: center; color: var(--tinta-2); border: 2px dashed var(--linha); border-radius: var(--raio); }
.g-ficha .ll-ficha { gap: 16px; }
.g-ficha .ll-ficha-fotos img { height: auto; aspect-ratio: 4 / 3; }
.g-rodape { max-width: 760px; margin: 0 auto; padding: 16px 16px calc(28px + env(safe-area-inset-bottom)); color: var(--tinta-2); font-size: .8rem; text-align: center; }
.ll-ficha .ll-ficha-acoes .ll-acao { min-height: 44px; }

/* ---------- layout por filtros ---------- */
.g-heroi { display: flex; flex-direction: column; gap: 10px; padding: 8px 0 4px; }
.g-filtros { position: sticky; top: 60px; z-index: 20; margin: 0 -16px; padding: 8px 16px; display: flex; flex-direction: column; gap: 8px; background: color-mix(in srgb, var(--fundo) 94%, transparent); }
.fileira { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 2px 0; }
.fileira::-webkit-scrollbar { display: none; }
.g-barra-res { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.g-busca-c { position: relative; flex: 1 1 200px; }
.g-busca-c svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--tinta-2); }
.g-busca-c input { width: 100%; min-height: 44px; border-radius: 99px; border: 1.5px solid var(--linha); background: var(--superficie); padding: .4em 1em .4em 2.4em; }
.g-alterna { display: inline-flex; padding: 4px; border-radius: 99px; background: var(--superficie-2); gap: 2px; }
.g-alterna button { border: 0; background: transparent; min-height: 36px; padding: 0 12px; border-radius: 99px; font-weight: 700; display: inline-flex; align-items: center; gap: 4px; color: var(--tinta-2); }
.g-alterna [aria-pressed="true"] { background: var(--tinta); color: var(--fundo); }

@media (min-width: 700px) {
  .g-tipos { grid-template-columns: repeat(3, 1fr); }
  .g-ferr { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; }
}
.g-item .ll-situ-grupo { margin-top: 2px; }
.g-agora { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; border-radius: var(--raio); background: var(--superficie-2); }
.g-agora .ll-secao-titulo { margin: 0; }
.g-agora .ll-situ { font-size: .88rem; }