/* EM FLORIPA — MAPA VIVO v8 "OBRA-PRIMA" (design congelado GT+Hermes v1.23 sobre engenharia v7)
   Camadas: mapa full-bleed → pílula do topo (vidro, z50; nesta página ganha clima+busca+👤) →
   cascata DE TRÁS dela (z6, costurada por JS) → painel de resultados 50% à esquerda →
   pins-gota → popup (z30). costurar() MEDE o header: nada de px cravado entre camadas. */

/* página-app: sem rolagem de página; painel e mapa rolam por dentro; rodapé sai */
html, body { overflow: hidden; height: 100%; }
footer.rodape { display: none; }

.app-mapa {
  position: relative; width: 100vw; margin-left: calc(50% - 50vw);
  height: 100vh; min-height: 560px; overflow: hidden;
  margin-top: -96px; /* fallback; costurar() normaliza pro topo real da página */
}
.mapa-fundo { position: absolute; inset: 0; background: linear-gradient(165deg, #0a1e33, #081827); }

/* véu: integra o painel esquerdo e o mapa numa coisa só (50/50) */
.veu {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(90deg, rgba(5,14,24,.72) 0%, rgba(5,14,24,.48) 34%,
              rgba(5,14,24,.16) 52%, transparent 64%);
  transition: opacity .4s;
}
.app-mapa.recolhido .veu { opacity: 0; }

/* ---- o topo nesta página: logo + clima + 🔍 + 🌗(humor) + 👤 ---- */
header.topo { z-index: 50; }
header.topo .botao-accent { display: none; } /* ferramenta limpa; B2B = Mia (navbar) + rodapé + claim I2 */
.clima-topo { font-size: .8rem; color: #cfe0ee; white-space: nowrap; align-self: center; margin-right: 2px; }
.topo-busca { display: none; flex: 1; align-items: center; gap: 8px; min-width: 0; }
.topo-busca input {
  flex: 1; min-width: 0; font: inherit; font-size: .88rem; color: #eef4f8;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14);
  border-radius: 999px; padding: 8px 16px; outline: none;
}
.topo-busca input::placeholder { color: #8fa8bd; }
.topo-busca .tb-fechar {
  flex: none; width: 34px; height: 34px; border-radius: 50%; cursor: pointer;
  font: inherit; color: #dbe7f1; background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.14);
}
header.topo.buscando .logo, header.topo.buscando .topo-acoes { display: none; }
header.topo.buscando .topo-busca { display: flex; }

/* ---- CASCATA (largura/top medidas pela costura) ---- */
.filtros-caixa {
  position: absolute; z-index: 6; top: 96px; left: 50%; transform: translateX(-50%);
  width: min(94%, 680px);
  border-radius: 22px; padding: 26px 14px 12px; /* padding-top cobre o tuck sob a pílula */
  background: rgba(10,26,42,.8); backdrop-filter: blur(18px) saturate(1.15);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 10px 34px rgba(0,0,0,.38);
  animation: surgir-camada .6s cubic-bezier(.3,.9,.35,1);
}
@keyframes surgir-camada {
  from { transform: translate(-50%, -30px); opacity: 0; }
  to { transform: translate(-50%, 0); opacity: 1; }
}
.filtros-toggle {
  position: absolute; top: 7px; right: 11px; z-index: 3; cursor: pointer; font: inherit;
  min-width: 28px; height: 22px; padding: 0 6px; border-radius: 8px;
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.15);
  color: #cfe0ee; font-size: .82rem; line-height: 20px; transition: all .2s;
}
.filtros-toggle:hover { border-color: rgba(255,139,57,.6); color: #FF8B39; }
.filtros-caixa.recolhida {
  display: inline-flex; align-items: center; gap: 8px; width: auto; padding: 8px 12px; animation: none;
}
.filtros-caixa.recolhida .trilho,
.filtros-caixa.recolhida .subs-linha,
.filtros-caixa.recolhida .tipos-linha,
.filtros-caixa.recolhida .vibes-linha,
.filtros-caixa.recolhida .tags-linha,
.filtros-caixa.recolhida .lente-cab { display: none; }
.filtros-caixa.recolhida::before {
  content: '\2315 Filtrar'; color: #cfe0ee; font-size: .84rem; font-weight: 600; white-space: nowrap;
}
.filtros-caixa.recolhida .filtros-toggle { position: static; height: 24px; }

/* nível 0 = os 3 "dados" dividindo a linha inteira (só categorias COM dados) */
.trilho.como-dados { display: flex; gap: 8px; align-items: stretch; }
.cat-celula {
  flex: 1 1 0; min-width: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px; padding: 10px 4px 9px; border-radius: 14px; cursor: pointer; font: inherit;
  color: #e8f0f6; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1);
  position: relative; transition: background .2s, border-color .2s, transform .12s;
}
.cat-celula:hover { border-color: rgba(255,139,57,.55); background: rgba(255,139,57,.1); }
.cat-celula:active { transform: scale(.96); }
.cat-celula .cc-ico { font-size: 1.55rem; line-height: 1; }
.cat-celula .cc-nome { font-size: .74rem; font-weight: 600; line-height: 1.18; text-align: center; }
.cat-celula.ativa { background: rgba(255,139,57,.14); border-color: #FF8B39; color: #ffd0a1; }
.cat-celula.ativa::after {
  content: ''; position: absolute; bottom: 5px; left: 30%; right: 30%;
  height: 3px; border-radius: 3px; background: #FF8B39;
}

/* nível 1: subcategorias inclinadas (o "grande diferencial") — quebram linha, nunca rolam */
/* AJUSTES_0707: subs em UMA linha com rolagem horizontal */
.subs-linha { display: flex; flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; gap: 7px 9px; align-items: center; padding: 9px 2px 3px; scrollbar-width: none; -ms-overflow-style: none; }
.subs-linha::-webkit-scrollbar { display: none; }
.subs-linha:empty, .tipos-linha:empty { display: none; }
.sub-pill {
  flex: 0 0 auto; cursor: pointer; font: inherit; font-size: .84rem; color: #e8f0f6;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12);
  border-left: 3px solid #FF8B39; border-radius: 9px; padding: 6px 13px;
  transform: skewX(-8deg); transition: background .2s, border-color .2s, color .2s;
}
.sub-pill > span { display: inline-block; transform: skewX(8deg); }
.sub-pill:hover { border-color: rgba(255,139,57,.6); background: rgba(255,139,57,.1); }
.sub-pill.ativa { background: rgba(255,139,57,.22); border-color: #FF8B39; color: #ffd9b0; font-weight: 600; }
.sub-pill .seta { opacity: .45; font-size: .76em; margin-left: 3px; }
.limpar-filtro {
  cursor: pointer; font: inherit; font-size: .8rem; color: #b9cbd9;
  background: none; border: 1px solid rgba(255,255,255,.14); border-radius: 999px;
  width: 30px; height: 30px; flex: 0 0 auto; margin-left: 4px; transition: all .2s;
}
.limpar-filtro:hover { color: #FF8B39; border-color: rgba(255,139,57,.6); }

/* nível 2: tipos em chips menores */
.tipos-linha { display: flex; flex-wrap: nowrap; overflow-x: auto; gap: 6px; padding: 8px 2px 3px; scrollbar-width: none; -ms-overflow-style: none; }
.tipos-linha::-webkit-scrollbar { display: none; }
.tipo-chip {
  flex: 0 0 auto; cursor: pointer; font: inherit; font-size: .78rem; color: #dbe7f1;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1);
  border-radius: 999px; padding: 4px 12px; transition: all .2s;
}
.tipo-chip:hover { border-color: rgba(255,139,57,.5); }
.tipo-chip.ativa { background: rgba(255,139,57,.26); border-color: #FF8B39; color: #ffd9b0; }

/* ---- RESULTADOS: exatos 50% à esquerda (o mapa brilha nos outros 50%) ---- */
.painel {
  position: absolute; top: 240px; left: 0; bottom: 0; z-index: 4;
  width: 50%; overflow-y: auto; overscroll-behavior: contain;
  padding: 0 16px calc(130px + env(safe-area-inset-bottom, 0px)) 12px;
  display: flex; flex-direction: column; gap: 10px;
  transition: transform .45s cubic-bezier(.6,.05,.28,.91), top .35s ease;
  scrollbar-width: none;
}
.painel::-webkit-scrollbar { display: none; }
.app-mapa.recolhido .painel { transform: translateX(-112%); }
#cards { display: flex; flex-direction: column; gap: 12px; }

/* régua dos resultados: contagem + ordenar + recolher */
.resultados-topo {
  position: sticky; top: 0; z-index: 5; flex: none;
  display: flex; align-items: center; gap: 8px;
  border-radius: 16px; padding: 8px 8px 8px 14px;
  background: rgba(10,26,42,.8); backdrop-filter: blur(16px) saturate(1.1);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 8px 24px rgba(0,0,0,.3);
}
.rt-contagem { flex: 1; min-width: 0; font-size: .78rem; color: #b9cbd9; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ordenar {
  flex: none; font: inherit; font-size: .78rem; color: #e8f0f6; cursor: pointer;
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14);
  border-radius: 999px; padding: 6px 10px; max-width: 132px;
}
.ordenar option { color: #081827; }
.rt-recolher {
  flex: none; width: 30px; height: 30px; border-radius: 50%; cursor: pointer;
  font-size: .72rem; color: #dbe7f1; border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.07); transition: background .2s;
}
.rt-recolher:hover { background: rgba(255,139,57,.2); }

.aba-resultados {
  position: absolute; z-index: 6; top: 50%; left: 0; transform: translateY(-50%);
  display: none; width: 32px; height: 60px; cursor: pointer;
  border-radius: 0 16px 16px 0; font-size: .8rem; color: #dbe7f1;
  border: 1px solid rgba(255,255,255,.14); border-left: none;
  background: rgba(10,26,42,.72); backdrop-filter: blur(12px);
}
.app-mapa.recolhido .aba-resultados { display: block; }

/* ---- O CARD v8: foto GRANDE (40/60), 3 linhas — QUEM / O QUE / A PROVA ---- */
.cartao-lugar {
  flex: none; display: grid; grid-template-columns: 2fr 3fr; cursor: pointer;
  min-height: 132px;
  border-radius: 18px; overflow: hidden; text-decoration: none; color: #eef4f8;
  background: rgba(14,32,50,.6); backdrop-filter: blur(18px) saturate(1.2);
  border: 1px solid rgba(255,255,255,.1);
  box-shadow: 0 8px 24px rgba(0,0,0,.3);
  transition: border-color .25s, background .25s, opacity .3s;
}
.cartao-lugar:hover { border-color: rgba(255,139,57,.6); background: rgba(14,32,50,.78); }
.cartao-lugar.fora { opacity: .42; }
.cartao-lugar .cl-foto {
  width: 100%; height: 100%; min-height: 132px; align-self: stretch;
  object-fit: cover; display: block;
}
.cartao-lugar .cl-foto-vazia {
  width: 100%; height: 100%; min-height: 132px; align-self: stretch;
  display: flex; align-items: center; justify-content: center; font-size: 2.1rem;
  background: linear-gradient(150deg, #12304a, #081827);
}
.cartao-lugar .cl-corpo {
  padding: 12px 14px; min-width: 0;
  display: flex; flex-direction: column; justify-content: center; gap: 5px;
}
.cartao-lugar strong { display: block; font-size: .98rem; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cartao-lugar .cl-meta { margin: 0; font-size: .78rem; opacity: .85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cartao-lugar .cl-nota { margin: 0; font-size: .8rem; color: #ffb066; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.mapa-nota-overlay {
  position: absolute; z-index: 5; right: 10px; bottom: 8px; margin: 0;
  font-size: .66rem; opacity: .75; padding: 3px 10px; border-radius: 999px;
  background: rgba(8,24,39,.6); backdrop-filter: blur(8px); color: #dbe7f1;
}
.mapa-nota-overlay a { color: inherit; }

.mapa-aviso {
  position: absolute; inset: 0; z-index: 3; display: flex;
  align-items: center; justify-content: center; text-align: center; padding: 24px;
  background: linear-gradient(165deg, #0a1e33, #081827); color: #dbe7f1;
}
.mapa-aviso-mini {
  position: absolute; right: 16px; top: calc(var(--topo-h, 96px) + 10px); z-index: 5;
  padding: 8px 16px; border-radius: 999px; font-size: .78rem;
  background: rgba(8,24,39,.82); color: #dbe7f1; backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.12); white-space: nowrap;
}

.maplibregl-ctrl-top-right { top: calc(var(--topo-h, 96px) + 6px); }

/* ---- navbar sobre o mapa: vidro mais denso ---- */
nav.navbar {
  background: rgba(8,22,36,.74); backdrop-filter: blur(18px) saturate(1.15);
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 10px 34px rgba(0,0,0,.45);
  bottom: calc(4px + env(safe-area-inset-bottom, 0px));
}

/* ---- PIN GOTA — invólucro SEM transform/transition (MapLibre posiciona por transform) ---- */
.pin-cat { width: 34px; height: 44px; cursor: pointer; }
.pin-gota {
  position: relative; width: 100%; height: 100%;
  transition: transform .18s; transform-origin: 50% 100%;
}
.pin-gota .pg-cabeca {
  position: absolute; top: 0; left: 2px; width: 30px; height: 30px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-size: 14px;
  border: 2px solid rgba(255,255,255,.92); box-shadow: 0 3px 12px rgba(0,0,0,.5);
}
.pin-gota .pg-rabo {
  position: absolute; top: 26px; left: 50%; transform: translateX(-50%);
  width: 0; height: 0;
  border-left: 7px solid transparent; border-right: 7px solid transparent;
  border-top: 16px solid rgba(255,255,255,.92);
  filter: drop-shadow(0 2px 3px rgba(0,0,0,.4));
}
.pin-gota .pg-rabo::after {
  content: ''; position: absolute; top: -16px; left: -5px;
  border-left: 5px solid transparent; border-right: 5px solid transparent;
  border-top: 12px solid var(--cor-pin, #FF8B39);
}
.pin-cat:hover .pin-gota, .pin-cat.pulso .pin-gota { transform: scale(1.18); }
.pin-cat.pulso .pg-cabeca::after {
  content: ''; position: absolute; inset: -7px; border-radius: 50%;
  border: 2px solid rgba(255,139,57,.8); animation: pulsar 1.1s ease-out infinite;
}
.app-mapa.zoom-longe .pin-gota { transform: scale(.72); }
.app-mapa.zoom-longe .pin-cat:hover .pin-gota, .app-mapa.zoom-longe .pin-cat.pulso .pin-gota { transform: scale(.9); }
@keyframes pulsar { 0% { transform: scale(.8); opacity: 1; } 100% { transform: scale(1.25); opacity: 0; } }

/* popup SEMPRE acima dos pins */
.maplibregl-popup { z-index: 30; }
.cartao-mapa .maplibregl-popup-content {
  background: rgba(10,26,42,.93); color: #eef4f8; border-radius: 16px;
  padding: 0; overflow: hidden; width: 236px;
  box-shadow: 0 12px 40px rgba(0,0,0,.5);
  backdrop-filter: blur(14px); border: 1px solid rgba(255,255,255,.1);
}
.cartao-mapa .maplibregl-popup-tip { border-top-color: rgba(10,26,42,.93); }
.cartao-mapa img { width: 100%; height: 96px; object-fit: cover; display: block; }
.cartao-mapa .cartao-corpo { padding: 11px 13px 13px; }
.cartao-mapa strong { font-size: .94rem; line-height: 1.25; display: block; margin-bottom: 3px; }
.cartao-mapa .cartao-meta { margin: 2px 0; font-size: .76rem; opacity: .85; }
.cartao-mapa .botao { display: inline-block; margin-top: 8px; font-size: .82rem; padding: 6px 13px; }
.cartao-mapa .maplibregl-popup-close-button { color: #eef4f8; font-size: 17px; right: 6px; top: 4px; background: none; }

/* ---- MOBILE (o berço: aqui tem que ficar perfeito) ---- */
@media (max-width: 860px) {
  .filtros-caixa { padding: 24px 10px 10px; }
  .cat-celula { padding: 8px 2px 8px; border-radius: 12px; }
  .cat-celula .cc-ico { font-size: 1.3rem; }
  .cat-celula .cc-nome { font-size: .64rem; }
  .sub-pill { font-size: .78rem; padding: 5px 11px; }
  .tipo-chip { font-size: .72rem; padding: 3px 10px; }
  .clima-topo { font-size: .72rem; }
  .painel { width: 50%; padding: 0 8px calc(150px + env(safe-area-inset-bottom, 0px)) 8px; gap: 8px; }
  #cards { gap: 10px; }
  .resultados-topo { padding: 6px 6px 6px 10px; border-radius: 14px; flex-wrap: wrap; }
  .rt-contagem { font-size: .68rem; }
  .ordenar { font-size: .7rem; max-width: 108px; }
  .veu { background: linear-gradient(90deg, rgba(5,14,24,.74) 0%, rgba(5,14,24,.5) 38%, rgba(5,14,24,.16) 56%, transparent 70%); }
  /* CARD_2807: a foto era height:100% e esticava com o texto (virava quase 1:4).
     Agora e 3:4 travada e o card tem altura fixa — cabem ~7 lugares em vez de 4. */
  .cartao-lugar { grid-template-columns: 72px minmax(0, 1fr); min-height: 0; height: 96px;
    border-radius: 14px; }
  .cartao-lugar .cl-foto, .cartao-lugar .cl-foto-vazia {
    width: 72px; height: 96px; min-height: 0; aspect-ratio: 3 / 4; object-fit: cover; }
  .cartao-lugar .cl-foto-vazia { font-size: 1.5rem; }
  .cartao-lugar .cl-corpo { padding: 7px 9px; gap: 1px; justify-content: center; }
  .cartao-lugar strong { font-size: .79rem; line-height: 1.22; white-space: normal;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .cartao-lugar .cl-meta { font-size: .63rem; white-space: nowrap; display: block;
    overflow: hidden; text-overflow: ellipsis; }
  .cartao-lugar .cl-nota { font-size: .65rem; }
  .maplibregl-ctrl-top-right { display: none; } /* pinça é o zoom natural */
  .mapa-nota-overlay { bottom: calc(84px + env(safe-area-inset-bottom, 0px)); right: 8px; }
}

/* ===== DESKTOP_RAIL_0707: rail lateral fixo + mapa cheio (>=861px) ===== */
@media (min-width: 861px) {
  /* filtros ancorados no topo-esquerda, largura do rail */
  .filtros-caixa {
    left: 18px; top: 84px; transform: none; margin: 0;
    width: 372px; max-width: 372px; animation: none;
    padding: 16px 14px 12px;
  }
  .filtros-caixa.recolhida { left: 18px; transform: none; width: auto; padding: 8px 12px; }
  /* lista na MESMA coluna, logo abaixo dos filtros */
  .painel {
    left: 18px; width: 372px; top: 300px;
    padding: 0 2px 28px 0;
  }
  /* rail recolhido desliza pra fora pela esquerda */
  .app-mapa.recolhido .painel { transform: translateX(-410px); }
  /* veu estreito: escurece so a faixa atras do rail, o mapa brilha inteiro */
  .veu {
    background: linear-gradient(90deg, rgba(5,14,24,.80) 0, rgba(5,14,24,.72) 360px,
                rgba(5,14,24,.34) 412px, transparent 476px);
  }
  /* aba de reabrir cola na borda esquerda, alinhada ao rail */
  .aba-resultados { top: 330px; transform: none; height: 64px; }
  /* cards ocupam a largura do rail com folga */
  #cards { gap: 12px; }
}

/* SELO_1107: verificado em destaque no mapa */
.selo-v { color: #35c26a; font-weight: 800; }
.pin-verificado .pg-cabeca { box-shadow: 0 0 0 2.5px #35c26a, 0 6px 14px rgba(0,0,0,.45); }

/* FACETAS no mapa (fable 22/07) */
.cl-vibes { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.cl-vibe { font-size: .68rem; font-weight: 600; color: #48d187;
  background: rgba(53,194,106,.12); border-radius: 999px; padding: 2px 8px; }
.faceta-ativa { font: inherit; font-size: .8rem; font-weight: 700; color: #0b1c2c;
  background: #48d187; border: none; border-radius: 999px; padding: 3px 10px; cursor: pointer; }

/* ═══ NAVEGAÇÃO v2 (fable 22/07): as 3 lentes + os chips de filtro ativo ═══ */
.lente-cab { display:flex; align-items:center; gap:6px; margin:13px 2px 7px;
  font-size:.64rem; letter-spacing:.13em; text-transform:uppercase; font-weight:700; color:#9fb4c4; }
.lente-dot { width:7px; height:7px; border-radius:50%; flex:0 0 auto; }
.lente-dot.e{ background:#6ba9ff } .lente-dot.v{ background:#48d187 } .lente-dot.t{ background:#9fb4c4 }
.vibes-linha { display:flex; flex-wrap:wrap; gap:6px; }
.tags-linha { display:flex; flex-wrap:wrap; gap:6px; max-height:96px; overflow-y:auto; scrollbar-width:thin; }
.vibe-chip, .tag-chip { font:inherit; font-size:.74rem; font-weight:600; padding:5px 11px; border-radius:999px;
  cursor:pointer; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); color:#e8f0f6;
  white-space:nowrap; transition:background .15s, border-color .15s; }
.vibe-chip.vibe { color:#48d187; border-color:rgba(72,209,135,.26); }
.vibe-chip.saber { color:#e6b56b; border-color:rgba(230,181,107,.26); }
.vibe-chip.vibe.ativa { background:rgba(72,209,135,.2); border-color:#48d187; }
.vibe-chip.saber.ativa { background:rgba(230,181,107,.2); border-color:#e6b56b; }
.tag-chip:hover { border-color:rgba(255,139,57,.5); }
.tag-chip.ativa { background:rgba(255,139,57,.16); border-color:#FF8B39; color:#ffd0a1; }

.filtros-ativos { display:none; }
.filtros-ativos.tem { display:flex; flex-wrap:wrap; align-items:center; gap:6px; padding:2px 2px 9px; }
.ativos-label { font-size:.7rem; font-weight:700; color:#8fa8bd; }
.ativo-chip { font:inherit; font-size:.73rem; font-weight:600; padding:4px 9px; border-radius:999px; cursor:pointer;
  display:inline-flex; align-items:center; gap:5px; border:1px solid; background:rgba(255,255,255,.06); }
.ativo-chip.e { color:#6ba9ff; border-color:rgba(107,169,255,.42); }
.ativo-chip.vibe { color:#48d187; border-color:rgba(72,209,135,.42); }
.ativo-chip.tag { color:#ffd0a1; border-color:rgba(255,139,57,.42); }
.ativo-chip .x { opacity:.65; font-weight:800; }
.ativos-limpar { font:inherit; font-size:.7rem; color:#8fa8bd; background:none; border:none; cursor:pointer; text-decoration:underline; }

/* mobile: o mapa continua rei — a cascata não passa de ~46vh, rola por dentro */
@media (max-width:860px){
  .filtros-caixa { max-height:46vh; overflow-y:auto; scrollbar-width:thin; }
  .tags-linha { max-height:74px; }
}

/* ═══ NAV v4 (fable 28/07) ═══
   Desktop >=861px: ff-corpo e display:contents -> o rail lateral segue igual.
   Mobile <=860px: barra de lentes + folha de filtros TRANSLUCIDA (o mapa vive atras)
   + resultados de volta na coluna esquerda de 50%. */
.barra-lentes { display: none; }
.ff-corpo { display: contents; }
.ff-cabeca, .ff-pe, .ff-veu { display: none; }

/* ESCALA_2807: grade aguenta as 12 categorias; com 3 fica identico ao de hoje
   (auto-fit colapsa as trilhas vazias e as 3 dividem a linha inteira) */
.trilho.como-dados {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(84px, 1fr));
  gap: 8px; align-items: stretch;
}
/* ESCALA_2807: tags agrupadas por familia em vez de uma parede de 99 chips */
.tags-linha { display: block; max-height: none; overflow: visible; }
.tag-fam { margin: 0 0 13px; }
.tag-fam-nome { margin: 0 0 6px; font-size: .63rem; letter-spacing: .1em; text-transform: uppercase;
  font-weight: 700; color: #8fa8bd; }
.tag-fam-chips { display: flex; flex-wrap: wrap; gap: 6px; }

/* no rail do desktop os filtros ficam em no maximo ~metade da coluna: o resto e dos
   RESULTADOS. Com as familias de tags a arvore passa de 700px — sem teto ela sufocava a lista. */
@media (min-width: 861px) {
  .filtros-caixa { max-height: min(46vh, 430px); overflow-y: auto; scrollbar-width: thin; }
  .filtros-caixa::-webkit-scrollbar { width: 6px; }
  .filtros-caixa::-webkit-scrollbar-thumb { background: rgba(255,255,255,.16); border-radius: 99px; }
}

@media (max-width: 860px) {
  /* ---- A. a barra de lentes: a unica camada de filtro sobre o mapa ---- */
  /* IPHONE_2807: fixed + safe-area, sem depender de medida do JS. z-index 49 fica
     abaixo do topo (50) e acima do painel (4): nunca some atras da pilula. */
  .barra-lentes {
    position: fixed; z-index: 49; left: 8px; right: 8px;
    top: calc(86px + env(safe-area-inset-top, 0px)); display: flex; gap: 6px;
  }
  .lente-btn {
    flex: 1 1 0; min-width: 0; font: inherit; font-size: .76rem; font-weight: 600; cursor: pointer;
    display: flex; align-items: center; justify-content: center; gap: 5px; padding: 9px 8px;
    border-radius: 999px; color: #e8f0f6; white-space: nowrap;
    background: rgba(10,26,42,.84); backdrop-filter: blur(14px) saturate(1.1);
    border: 1px solid rgba(255,255,255,.14); box-shadow: 0 6px 18px rgba(0,0,0,.32);
    transition: background .2s, border-color .2s;
  }
  .lente-btn .lb-txt { overflow: hidden; text-overflow: ellipsis; }
  .lente-btn:active { transform: scale(.97); }
  .lente-btn.tem { background: rgba(255,139,57,.2); border-color: #FF8B39; color: #ffd0a1; }
  .lente-btn.tem .lente-dot { display: none; }

  /* ---- B. folha de filtros: 80vh, vidro de verdade, o mapa continua vivo atras ---- */
  .ff-veu {
    display: block; position: fixed; inset: 0; z-index: 68; opacity: 0; pointer-events: none;
    background: linear-gradient(to top, rgba(4,12,22,.42), rgba(4,12,22,0) 42%);
    transition: opacity .3s;
  }
  .ff-veu.aberto { opacity: 1; pointer-events: auto; }
  .filtros-caixa {
    position: fixed; left: 0; right: 0; bottom: 0; top: auto; z-index: 70;
    width: 100%; max-width: none; margin: 0; height: min(46vh, 430px);
    transform: translateY(103%); max-height: none; overflow: hidden; padding: 0;
    border: 1px solid rgba(255,255,255,.16); border-bottom: none; border-radius: 24px 24px 0 0;
    background: rgba(8,20,34,.72); backdrop-filter: blur(28px) saturate(1.3);
    box-shadow: 0 -14px 44px rgba(0,0,0,.45);
    animation: none; transition: transform .34s cubic-bezier(.32,.72,.28,1);
    display: flex; flex-direction: column;
  }
  .filtros-caixa.aberta { transform: translateY(0); }
  .filtros-toggle { display: none; }
  .ff-cabeca {
    display: flex; align-items: center; justify-content: space-between; flex: none;
    padding: 19px 16px 11px; border-bottom: 1px solid rgba(255,255,255,.1);
  }
  .ff-cabeca::before {
    content: ''; position: absolute; top: 8px; left: 50%; transform: translateX(-50%);
    width: 40px; height: 4px; border-radius: 99px; background: rgba(255,255,255,.3);
  }
  .ff-titulo { font-size: 1.02rem; color: #eef4f8; }
  .ff-fechar {
    font: inherit; font-size: 1rem; cursor: pointer; width: 34px; height: 34px; border-radius: 50%;
    color: #dbe7f1; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16);
  }
  .ff-corpo { display: block; flex: 1 1 auto; overflow-y: auto; padding: 4px 16px 18px; }
  .ff-corpo .lente-cab { margin-top: 20px; font-size: .68rem; }
  .ff-pe {
    display: block; flex: none; padding: 10px 16px calc(12px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid rgba(255,255,255,.1); background: rgba(6,16,28,.42);
  }
  .ff-ver {
    width: 100%; font: inherit; font-size: .94rem; font-weight: 700; cursor: pointer;
    padding: 13px 16px; border-radius: 14px; border: none; color: #0b1c2c; background: #FF8B39;
  }
  /* na folha a taxonomia respira: nada de rolagem lateral */
  .filtros-caixa .subs-linha, .filtros-caixa .tipos-linha { flex-wrap: wrap; overflow: visible; }

  /* ---- C. resultados de VOLTA na coluna esquerda de 50% ---- */
  .painel {
    position: absolute; left: 0; right: auto; bottom: 0; z-index: 4;
    /* pendurado na medida real da barra (--chrome-h); o fallback e folgado de proposito */
    top: calc(var(--chrome-h, 182px) + 10px);
    width: 50%; height: auto; border-radius: 0; border-top: none; box-shadow: none;
    background: none; backdrop-filter: none;
    padding: 0 8px calc(150px + env(safe-area-inset-bottom, 0px)) 8px; gap: 8px;
    transition: transform .45s cubic-bezier(.6,.05,.28,.91), top .35s ease;
  }
  .app-mapa.recolhido .painel { transform: translateX(-112%); }
  .folha-alca { display: none; }
  .veu { display: block; }
  .mapa-nota-overlay { bottom: calc(84px + env(safe-area-inset-bottom, 0px)); right: 8px; }
  .cartao-lugar { grid-template-columns: 2fr 3fr; }
}

/* estado vazio da folha de resultados (fable 28/07) */
.sem-resultado { display: none; text-align: center; padding: 22px 16px 8px; color: #b9cbd9; }
.sem-resultado .sr-titulo { margin: 0 0 4px; font-size: .92rem; font-weight: 600; color: #eef4f8; }
.sem-resultado .sr-dica { margin: 0 0 14px; font-size: .8rem; }
.sem-resultado .sr-limpar {
  font: inherit; font-size: .82rem; font-weight: 600; cursor: pointer; padding: 8px 18px;
  border-radius: 999px; color: #ffd0a1; background: rgba(255,139,57,.14); border: 1px solid #FF8B39;
}

/* CARD_DESKTOP_2807: mesma disciplina do celular — a foto era height:100% e esticava
   com o texto (147x197, so ~2 lugares a vista no rail). Agora 3:4 travada. */
@media (min-width: 861px) {
  .cartao-lugar { grid-template-columns: 90px minmax(0, 1fr); min-height: 0; height: 120px; }
  .cartao-lugar .cl-foto, .cartao-lugar .cl-foto-vazia {
    width: 90px; height: 120px; min-height: 0; aspect-ratio: 3 / 4; object-fit: cover; }
  .cartao-lugar .cl-corpo { padding: 10px 12px; gap: 2px; justify-content: center; }
  .cartao-lugar strong { font-size: .9rem; }
  .cartao-lugar .cl-meta { font-size: .74rem; }
  .cartao-lugar .cl-nota { font-size: .76rem; }
}

/* ═══ SELOS DE VIBE v5 (fable 28/07) ═══
   Menores e escaneaveis, sem reticencias, e CLICAVEIS: tocar filtra o mapa por aquela vibe.
   Numa coluna de ~110px o segredo e caber dois inteiros — nao cortar nenhum. */
.cl-vibe { cursor: pointer; transition: background .15s, color .15s; }
.cl-vibe:hover { background: rgba(53,194,106,.24); color: #7ff0b4; }
@media (max-width: 860px) {
  /* na coluna de ~107px dois selos so cabem CORTADOS — e selo cortado nao se le nem
     convida ao toque. Entao aqui e UM selo inteiro; o segundo volta no desktop. */
  .cl-vibes { gap: 3px; margin-top: 3px; flex-wrap: nowrap; }
  .cl-vibes .cl-vibe:nth-child(n+2) { display: none; }
  .cl-vibe {
    font-size: .58rem; font-weight: 700; letter-spacing: .01em; padding: 2px 7px;
    white-space: nowrap; flex: 0 0 auto;
  }
}

/* ═══ RITMO v6 (fable 28/07): espacamentos coerentes na coluna estreita ═══ */
@media (max-width: 860px) {
  .painel { gap: 8px; padding-left: 8px; padding-right: 8px; }
  #cards { gap: 8px; }
  .resultados-topo { padding: 6px 6px 6px 10px; gap: 6px; flex-wrap: nowrap; }
  .rt-contagem { font-size: .66rem; flex: 1 1 auto; }
  .ordenar { font-size: .66rem; max-width: 92px; padding: 5px 7px; }
  .rt-recolher { width: 26px; height: 26px; }
  .filtros-ativos.tem { padding: 0 2px 7px; gap: 5px; }
}