/* Lugares do guia (22/10/2026), da prova aprovada em prova-places/: lista com miniatura, mapa com cartão, ficha com foto,
   etiquetas e barra de ações. Tudo com o prefixo lg-, porque o molde e a casca já usam .mini, .acoes, .bloco e .mapa. */
.lg-aba svg,.lg-camada svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex:none}
:where(.lg-aba,.lg-camada) button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}

/* o main do protótipo tem respiro (base.css); a aba vai de borda a borda, como a prova */
#paineis>.lg-aba{margin:-28px -36px -60px}
@media (max-width:860px){#paineis>.lg-aba{margin:-18px -16px -50px}}

/* cidades, quando a viagem tem mais de uma */
.lg-cidades{display:flex;gap:22px;overflow-x:auto;padding:16px 20px 12px;scrollbar-width:none}
.lg-cidades::-webkit-scrollbar{display:none}
.lg-cidades button{flex:none;padding:4px 0;font:400 20px/1.2 var(--d);color:var(--cinza);border-bottom:1px solid transparent}
.lg-cidades button[aria-current=true]{color:var(--tinta);border-bottom-color:var(--tinta)}

/* lista */
.lg-capa{position:relative;height:240px;overflow:hidden;background:var(--tinta)}
.lg-capa img{width:100%;height:100%;object-fit:cover;display:block}
.lg-capa:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.5),rgba(0,0,0,0) 34%,rgba(0,0,0,0) 55%,rgba(0,0,0,.55))}
.lg-capa .k{position:absolute;top:18px;left:20px;color:#F4EFE5;z-index:1;text-shadow:0 1px 6px rgba(0,0,0,.45)}
.lg-capa h1{position:absolute;left:20px;bottom:16px;margin:0;z-index:1;font:400 46px/1 var(--d);color:#F4EFE5;letter-spacing:-.01em}
/* cidade sem foto: o nome em tinta sobre areia, sem o degradê */
.lg-capa.sem-foto{height:auto;padding:22px 20px 20px;background:var(--areia)}
.lg-capa.sem-foto:after{display:none}
.lg-capa.sem-foto .k{position:static;color:var(--grafite);text-shadow:none}
.lg-capa.sem-foto h1{position:static;margin-top:44px;color:var(--tinta)}
.lg-topo{padding:18px 20px 8px}
.lg-topo p{margin:0 0 14px;color:var(--grafite);font-size:15px}
.lg-pilula{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:46px;border:1px solid var(--linha);
  border-radius:999px;background:#FBF8F2;font:700 14px/1 var(--c)}
.lg-filtros{display:flex;gap:8px;overflow-x:auto;padding:6px 20px 12px;scrollbar-width:none}
.lg-filtros::-webkit-scrollbar{display:none}
.lg-filtros button{flex:none;min-height:34px;padding:0 14px;border:1px solid var(--linha);border-radius:999px;background:#FBF8F2;font-size:13px;color:var(--grafite)}
.lg-filtros button[aria-pressed=true]{background:var(--tinta);border-color:var(--tinta);color:var(--creme)}
.lg-grupo{padding:0 20px}
.lg-grupo h2{margin:18px 0 2px}
.lg-linha{display:flex;align-items:center;gap:14px;width:100%;padding:14px 0;border-bottom:1px solid var(--linha);text-align:left}
.lg-mini{width:64px;height:64px;border-radius:8px;overflow:hidden;flex:none;background:var(--areia);display:grid;place-items:center;color:var(--grafite)}
.lg-mini img{width:100%;height:100%;object-fit:cover;display:block}
.lg-mini svg{width:24px;height:24px;stroke-width:1.3}
.lg-linha .tx{flex:1;min-width:0}
.lg-linha b{display:block;font:400 19px/1.2 var(--d)}
.lg-linha span{display:block;font-size:14px;line-height:1.35;color:var(--grafite)}
.lg-linha .cat{font-size:13px;color:var(--cinza)}
.lg-linha>svg{color:var(--cinza);width:18px;height:18px}
.lg-pe{padding:28px 20px 48px;margin:0;color:var(--cinza);font-size:13px}

/* camada por cima das abas: mapa e ficha */
html.lg-preso,html.lg-preso body{overflow:hidden}
.lg-camada{position:fixed;inset:0;z-index:100;background:var(--creme);overscroll-behavior:contain}
.lg-tela{position:absolute;inset:0;max-width:var(--larg);margin:0 auto;background:var(--creme)}
.lg-redondo{position:absolute;z-index:500;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;
  background:rgba(46,46,45,.86);color:var(--creme);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.lg-voltar,.lg-fechar{top:calc(14px + env(safe-area-inset-top));left:14px}
.lg-fechar{z-index:650}

/* mapa */
.lg-mapa{overflow:hidden}
.lg-mapa-fundo,.lg-mapinha{position:absolute;inset:0;background:var(--areia)}
.lg-mapa .leaflet-tile-pane,.lg-mapinha .leaflet-tile-pane{filter:grayscale(1) sepia(.22) brightness(1.04) contrast(.88)}
.lg-camada .leaflet-container{font:inherit;background:var(--areia)}
.lg-filtros.sobre{position:absolute;z-index:500;left:0;right:0;top:calc(10px + env(safe-area-inset-top));padding-left:66px}
.lg-pino{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--tinta);color:var(--creme);box-sizing:border-box;
  border:2px solid var(--creme);box-shadow:0 2px 6px rgba(0,0,0,.25);font:500 12px/1 var(--m);transition:transform .15s}
.lg-pino svg{width:15px;height:15px;stroke-width:1.8}
.lg-pino.sel{transform:scale(1.3);box-shadow:0 0 0 5px rgba(46,46,45,.22),0 2px 6px rgba(0,0,0,.25)}
/* grupo de lugares próximos: creme, com a conta; o toque aproxima o mapa */
.lg-pino.junto{width:40px;height:40px;background:var(--creme);color:var(--tinta);border-color:var(--tinta);font-size:14px}
.lg-cartao{position:absolute;z-index:500;left:12px;right:12px;bottom:calc(14px + env(safe-area-inset-bottom));display:flex;gap:14px;
  padding:12px;border-radius:14px;background:rgba(251,248,242,.97);box-shadow:0 8px 28px rgba(0,0,0,.18);text-align:left;align-items:center}
.lg-cartao[hidden]{display:none!important}
.lg-cartao .lg-mini{width:76px;height:76px}
.lg-cartao .tx{flex:1;min-width:0}
.lg-cartao b{display:block;font:400 20px/1.15 var(--d)}
.lg-cartao span{display:block;font-size:13px;color:var(--grafite);line-height:1.35}
.lg-cartao .k{margin-bottom:4px;font-size:10px}
.lg-sem-mapa{position:absolute;z-index:450;inset:auto 24px 45%;margin:0;padding:12px;background:rgba(251,248,242,.95);border-radius:10px;text-align:center;color:var(--grafite)}

/* ficha */
/* quem rola é a folha; a barra de ações fica fora dela, presa à tela (no iOS, fixed dentro de rolagem podia rolar junto) */
.lg-ficha{overflow:hidden}
.lg-folha{position:absolute;inset:0;overflow-y:auto;overscroll-behavior:contain;padding-bottom:120px}
.lg-cabeca{position:relative;height:46vh;min-height:300px;max-height:440px;background:var(--areia)}
.lg-fotos{display:flex;height:100%;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
.lg-fotos::-webkit-scrollbar{display:none}
.lg-fotos img{flex:none;width:100%;height:100%;object-fit:cover;scroll-snap-align:start}
.lg-pontos{position:absolute;left:0;right:0;bottom:12px;display:flex;justify-content:center;gap:6px}
.lg-pontos i{width:6px;height:6px;border-radius:50%;background:rgba(244,239,229,.55)}
.lg-pontos i.on{background:#F4EFE5}
.lg-cabeca.so-texto{height:auto;min-height:0;max-height:none;padding:calc(76px + env(safe-area-inset-top)) 20px 0;background:var(--creme)}
.lg-cabeca.so-texto .k{color:var(--cinza)}
.lg-corpo{padding:22px 20px 0}
.lg-corpo h1{margin:0 0 6px;font:400 36px/1.08 var(--d);letter-spacing:-.01em}
.lg-onde{margin:0;color:var(--grafite);font-size:15px}
.lg-vao{height:18px}
.lg-etiquetas{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 18px}
.lg-etiquetas span{display:inline-flex;align-items:center;gap:6px;min-height:30px;padding:0 12px;border:1px solid var(--linha);
  border-radius:999px;font-size:13px;color:var(--grafite)}
.lg-etiquetas svg{width:15px;height:15px}
.lg-texto{margin:0;padding-top:18px;border-top:1px solid var(--linha);font-size:17px;line-height:1.55}
.lg-bloco{margin-top:22px}
.lg-bloco p{margin:6px 0 0;font-size:15px;line-height:1.5;color:var(--grafite)}
.lg-acoes{position:absolute;z-index:600;left:50%;transform:translateX(-50%);bottom:calc(16px + env(safe-area-inset-bottom));display:flex;gap:8px;
  padding:8px;border-radius:18px;background:rgba(46,46,45,.9);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:0 10px 30px rgba(0,0,0,.25)}
.lg-acoes a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;width:74px;height:62px;border-radius:12px;
  background:rgba(244,239,229,.12);color:var(--creme);text-decoration:none;font:700 12px/1 var(--c)}
.lg-acoes a.prim{background:var(--creme);color:var(--tinta)}
/* no Guia, o lugar e o hotel abrem a ficha no toque */
#p-guia article.lugar,#p-guia article.hotel2{cursor:pointer}