/* tokens.css entra por <link> no _layout.html, não por @import: assim o navegador
   não precisa baixar e ler este arquivo antes de descobrir que existe um segundo
   (uma viagem a mais no caminho crítico), e a URL recebe o carimbo de versão do
   build — por @import ela ficava sem carimbo e a paleta corrigida continuava
   presa no cache enquanto o resto da página já tinha atualizado. */

/* ============ BASE ============ */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }
/* A barra de navegação é fixa, então um salto de âncora para no topo do documento
   e deixa a barra por cima do começo da seção. No mapa isso escondia a faixa de
   busca inteira. O desconto vale para qualquer alvo de âncora, não só o mapa. */
[id] { scroll-margin-top: calc(var(--nav-h) + var(--sp-2)); }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-text);
  font-size: var(--t-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(800px 520px at 12% -5%, rgba(119, 45, 183, 0.30), transparent 70%),
    radial-gradient(700px 500px at 92% 8%, rgba(221, 115, 221, 0.16), transparent 70%),
    radial-gradient(900px 700px at 50% 108%, rgba(76, 26, 120, 0.35), transparent 70%);
}

/* height:auto é o que deixa os atributos width/height do HTML servirem só de reserva
   de espaço — sem ele, aspect-ratio não governa a altura e a peça estica. */
img, video, svg { display: block; max-width: 100%; height: auto; }
/* Plus Jakarta: título no peso cheio (800), texto no leve. O entreletra da
   Jakarta é mais largo que o da Space Grotesk, daí o -0.03em. */
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 800; line-height: 1.06; letter-spacing: -0.03em; margin: 0; }
/* Destaque manuscrito: só em corpo grande, nunca em rótulo pequeno. */
.script { font-family: var(--font-accent); font-weight: 400; letter-spacing: 0; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip {
  position: absolute; left: var(--sp-4); top: var(--sp-2);
  z-index: 200; padding: 0.6rem 1rem;
  background: var(--gold); color: #1a1205; font-weight: 600;
  border-radius: var(--r-sm); transform: translateY(-160%);
  transition: transform var(--dur) var(--ease-out);
}
.skip:focus { transform: translateY(0); }

.sr {
  position: absolute; width: 1px; height: 1px; padding: 0;
  margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: clamp(1rem, 4vw, 3rem); }
main { position: relative; z-index: 1; }

/* ============ TIPOGRAFIA UTIL ============ */
.eyebrow {
  font-family: var(--font-display);
  font-size: var(--t-eyebrow);
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  /* --fg-label, e não --pink-soft: o rosa da marca segue intocado nos degradês
     e no céu; só o texto de 11px ganha a versão legível de cada superfície. */
  color: var(--fg-label);
  display: flex; align-items: center; gap: var(--sp-3);
}
.eyebrow::before {
  content: ''; width: 28px; height: 1px; flex: none;
  background: var(--grad-brand);
}
/* Quando o título quebra em duas linhas, o padrão `slice` pinta UM degradê sobre
   a caixa das duas e cada linha mostra só a sua fatia: medido no "Viver o
   litoral / com quem é de casa", a segunda linha parava em 66% do degradê e
   nunca chegava no ouro — o título lia como cor chapada. `clone` dá a cada linha
   o degradê inteiro, do claro ao ouro. */
.grad-text {
  background: var(--grad-text);
  -webkit-background-clip: text; background-clip: text;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
  color: transparent;
}
.lead { font-size: clamp(1.02rem, 1.4vw, 1.22rem); color: var(--fg-muted); max-width: 62ch; }
.muted { color: var(--fg-muted); }
.dim { color: var(--fg); font-size: var(--t-sm); font-weight: 500; }

/* ============ BOTÕES ============ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  font-family: var(--font-display); font-size: var(--t-sm); font-weight: 500;
  letter-spacing: 0.04em; padding: 0.82rem 1.4rem; border-radius: var(--r-pill);
  border: 1px solid transparent; cursor: pointer; position: relative;
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur) var(--ease-out),
              background-color var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out);
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
/* Um `svg` com viewBox e sem width/height ocupa a linha inteira; dentro do flex
   do botão isso empurra o rótulo para fora. */
.btn svg { width: 16px; height: 16px; flex: none; }

.btn-primary {
  color: var(--paper);
  background: var(--grad-brand);
  background-size: 180% 100%;
  box-shadow: 0 10px 34px -16px rgba(119, 45, 183, 0.95);
  transition: background-position var(--dur-slow) var(--ease-out), transform var(--dur-fast) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.btn-primary:hover { background-position: 100% 0; box-shadow: var(--shadow-glow); }

.btn-ghost { color: var(--fg); background: var(--surface); border-color: var(--line-strong); }
.btn-ghost:hover { background: var(--surface-2); border-color: var(--pink); }

.btn-quiet { color: var(--fg-muted); background: transparent; border-color: var(--line); padding: 0.55rem 1rem; }
.btn-quiet:hover { color: var(--fg); border-color: var(--line-strong); }

.btn[disabled], .btn[aria-disabled='true'] { opacity: 0.5; cursor: not-allowed; transform: none; }

/* ============ NAV ============ */
.nav {
  position: sticky; top: 0; z-index: 100;
  height: var(--nav-h);
  display: flex; align-items: center;
  background: color-mix(in srgb, var(--ink-850) 80%, transparent);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border-bottom: 1px solid var(--line);
}
/* gap medido, não escolhido: marca + nove itens + seletor de céu + Anfitrião
   somam 1278px com o respiro antigo de 24px, e a faixa estourava a janela em
   toda largura entre o ponto de quebra (1301px) e 1374px. */
.nav__in { display: flex; align-items: center; gap: var(--sp-3); width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: clamp(1rem, 4vw, 3rem); }
.nav__brand { display: flex; align-items: center; gap: 0.6rem; flex: none; }
.nav__brand img { height: 32px; width: auto; }
.nav__links { display: flex; align-items: center; gap: var(--sp-1); margin-left: auto; }
.nav__links a {
  font-family: var(--font-display); font-size: var(--t-sm); font-weight: 500;
  /* Nove itens cabem na faixa só com o respiro apertado; acima de 0.5rem a
     navegação estoura antes do ponto de quebra do menu. */
  padding: 0.5rem; border-radius: var(--r-pill); color: var(--fg-muted);
  white-space: nowrap;
  position: relative; transition: color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}
.nav__links a:hover { color: var(--fg); background: var(--surface-2); }
.nav__links a[aria-current='page'] { color: var(--fg); }
.nav__links a[aria-current='page']::after {
  content: ''; position: absolute; left: 0.5rem; right: 0.5rem; bottom: 0.18rem;
  height: 2px; border-radius: 2px; background: var(--grad-brand);
}

/* Submenu da faixa: o mapa de cada área antes de escolher onde clicar.
   Abre no :focus-within também, senão quem navega por teclado não alcança. */
.navgrp { position: relative; display: flex; align-items: center; }
.navgrp__pop {
  position: absolute; top: 100%; left: 50%;
  /* Sem piso de largura: com `min-width: 210px` os nove submenus mediam 210px
     exatos, incluindo o de "Peças da loja". A caixa é de grade com os links em
     `nowrap`, então sem o piso cada uma para no seu próprio item mais longo —
     que é o tamanho pedido. */
  display: grid; gap: 0.1rem; width: max-content;
  padding: 0.4rem; margin-top: 0.5rem;
  border: 1px solid var(--line-strong); border-radius: var(--r-md);
  background: color-mix(in srgb, var(--ink-850) 97%, transparent);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  box-shadow: var(--shadow-card);
  opacity: 0; visibility: hidden; translate: -50% -6px;
  transition: opacity var(--dur-fast) var(--ease-out),
    translate var(--dur-fast) var(--ease-out), visibility var(--dur-fast);
}
.navgrp:hover > .navgrp__pop, .navgrp:focus-within > .navgrp__pop {
  opacity: 1; visibility: visible; translate: -50% 0;
}
.navgrp__pop a {
  padding: 0.5rem 0.6rem; border-radius: var(--r-sm);
  font-size: var(--t-xs); color: var(--fg-muted); white-space: nowrap;
}
.navgrp__pop a:hover, .navgrp__pop a:focus-visible { color: var(--fg); background: var(--surface-2); }
/* O Perfil mora na ponta direita da faixa: centrado em left:50% o submenu
   passaria da janela, então este ancora pela borda direita. */
.navgrp__pop--fim { left: auto; right: 0; translate: 0 -6px; }
.navgrp:hover > .navgrp__pop--fim, .navgrp:focus-within > .navgrp__pop--fim { translate: 0 0; }
/* O grupo é só o invólucro do atalho; o layout da faixa continua medindo o
   próprio botão, inclusive o `margin-left: auto` da tela estreita. */
.navgrp--perfil { flex: none; }
.nav__cta { flex: none; }
.nav__host {
  flex: none; display: inline-flex; align-items: center; gap: 0.45rem;
  min-height: 42px; padding: 0.5rem 0.9rem;
  font-family: var(--font-display); font-size: var(--t-sm); font-weight: 500;
  color: var(--fg); cursor: pointer;
  border: 1px solid var(--line-strong); border-radius: var(--r-pill);
  background: var(--surface-2);
  transition: border-color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}
.nav__host:hover { border-color: var(--accent); background: var(--surface); }
.nav__host:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.nav__host-mark { color: var(--fg-label); }
/* Atalho para o painel do membro. Mesma pílula do Anfitrião para o par de ações
   do topo ler como um bloco só. */
.nav__perfil {
  flex: none; display: inline-flex; align-items: center; gap: 0.45rem;
  min-height: 42px; padding: 0.5rem 0.9rem;
  font-family: var(--font-display); font-size: var(--t-sm); font-weight: 500;
  color: var(--fg); text-decoration: none;
  border: 1px solid var(--line-strong); border-radius: var(--r-pill);
  background: var(--surface-2);
  transition: border-color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}
.nav__perfil svg { width: 18px; height: 18px; flex: none; }
.nav__perfil:hover { border-color: var(--accent); background: var(--surface); }
.nav__perfil:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.nav__host[aria-expanded='true'] { border-color: var(--accent); }
.nav__toggle {
  display: none; flex: none; margin-left: auto;
  width: 42px; height: 42px; border-radius: var(--r-sm);
  background: var(--surface); border: 1px solid var(--line-strong); color: var(--fg);
  cursor: pointer; align-items: center; justify-content: center;
}
.nav__toggle span { display: block; width: 17px; height: 1.5px; background: currentColor; position: relative; }
.nav__toggle span::before, .nav__toggle span::after { content: ''; position: absolute; left: 0; width: 17px; height: 1.5px; background: currentColor; }
.nav__toggle span::before { top: -5px; }
.nav__toggle span::after { top: 5px; }

/* Subiu de 1200px: com nove itens, mais o seletor de céu e o Anfitrião, a faixa
   precisa de 1290px para caber inteira — abaixo disso ela estourava a janela.
   Quem mexer aqui tem de mexer junto em motion.js e theme.js. */
@media (max-width: 1300px) {
  .nav__toggle { display: flex; order: 4; margin-left: 0; }
  .nav__cta { display: none; }
  /* Perfil e Anfitrião ficam no topo em qualquer largura — só perdem o rótulo. */
  /* Quem é item do flex aqui é o grupo, não o botão: `order` e `margin-left`
     no filho não movem nada. */
  .navgrp--perfil { order: 2; margin-left: auto; }
  .nav__perfil { width: 42px; padding: 0.5rem; justify-content: center; }
  .nav__perfil-txt { display: none; }
  .nav__host { order: 3; margin-left: 0; width: 42px; padding: 0.5rem; justify-content: center; }
  .nav__host-txt { display: none; }
  .nav__links {
    position: fixed; inset: var(--nav-h) 0 auto 0;
    flex-direction: column; align-items: stretch; gap: 0;
    /* Opaco de propósito: o menu do celular cobre a tela inteira e não há nada
       atrás para deixar à mostra. Os 2% que faltavam bastavam para o título do
       herói atravessar e virar sujeira atrás dos nomes das áreas. */
    background: var(--ink-850);
    border-bottom: 1px solid var(--line);
    padding: var(--sp-3) clamp(1rem, 4vw, 3rem) var(--sp-5);
    max-height: calc(100dvh - var(--nav-h)); overflow-y: auto;
  }
  .nav__links[hidden] { display: none; }
  /* `display: block` não é cosmético: o link nasce inline, e em inline o padding
     vertical e a borda não entram na altura da linha. O resultado era a borda de
     cada área caindo em cima do nome da área seguinte, do tamanho do texto — os
     riscos soltos atrás dos nomes. Em bloco ela vira o divisor de largura cheia
     que sempre foi a intenção. */
  .nav__links a { display: block; padding: 0.85rem 0; border-bottom: 1px solid var(--line); font-size: 1rem; border-radius: 0; }
  .nav__links a[aria-current='page']::after { left: 0; right: auto; width: 24px; bottom: 0.4rem; }
  /* Sem cursor não há hover: aqui o menu já lista as nove áreas, e abrir todas
     as subpáginas faria uma lista de tela e meia. */
  .navgrp { display: block; }
  .navgrp__pop { display: none; }
}

/* ============ SEÇÕES ============ */
/* O respiro de uma seção EMPILHA com o da seguinte, então o teto aqui vale o
   dobro na tela. O pedido foi aproximar 5–10px, não comprimir: o ar entre seções
   é bem-vindo. Teto em --sp-8 menos 4px fecha o vão em 136px no desktop, contra
   os 144px de antes. Abaixo de ~1360px quem manda é o termo em vw, que já
   entregava a medida aprovada e não mudou. */
.section { padding-block: clamp(3rem, 5vw, calc(var(--sp-8) - 4px)); position: relative; }
.section--tight { padding-block: clamp(2.5rem, 5vw, calc(var(--sp-8) - 4px)); }
.section__head { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--sp-5); margin-bottom: var(--sp-6); }
.section__head > div:first-child { flex: 1 1 32ch; display: grid; gap: var(--sp-3); }
.section__head h2 { font-size: var(--t-d1); }
.rule { height: 1px; background: var(--grad-line); border: 0; margin: 0; opacity: 0.55; }

/* ============ HERO / EXPLORAR ============ */
.hero {
  position: relative;
  /* Reaplica --fg aqui: color herdado do body já vem resolvido e ignoraria a troca de fase. */
  color: var(--fg);
  min-height: min(100svh, 860px);
  display: flex; align-items: flex-end;
  padding-block: clamp(3rem, 10vh, 6rem);
  overflow: hidden;
  border-bottom: 1px solid var(--line);
}
/* Subpágina: o mesmo herói de vídeo, mais baixo — abaixo dele vem conteúdo que
   precisa aparecer sem rolagem longa. */
.hero--sub { min-height: min(72svh, 660px); }
.hero__media { position: absolute; inset: 0; z-index: 0; }
.hero__media video, .hero__media img { width: 100%; height: 100%; object-fit: cover; }
.hero__media::after {
  content: ''; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(16, 13, 21, 0.72) 0%, rgba(16, 13, 21, 0.35) 42%, rgba(16, 13, 21, 0.97) 100%),
    linear-gradient(104deg, rgba(76, 26, 120, 0.55) 0%, rgba(221, 115, 221, 0.12) 55%, transparent 100%);
}
.hero__in { position: relative; z-index: 1; width: 100%; }
/* Substrato do texto do herói, ancorado no próprio bloco de conteúdo — e não em
   porcentagens do herói, que erram o alvo quando o h1 muda de altura. O vídeo
   tem quadros claros (medidos até rgb(146,139,149) sob o véu) nos quais nenhuma
   cor de 11px alcança 4.5:1: a correção é garantir a superfície, não repintar o
   texto. Fica atrás do conteúdo e acima do vídeo, dentro deste contexto. */
.hero__in::before {
  content: ''; position: absolute; z-index: -1; pointer-events: none;
  left: 50%; transform: translateX(-50%); width: 100vw;
  top: -8%; bottom: -16%;
  background: linear-gradient(180deg, transparent 0%, rgba(16, 13, 21, 0.58) 22%,
              rgba(16, 13, 21, 0.82) 54%, rgba(16, 13, 21, 0.88) 100%);
}
.hero__grid { display: grid; gap: var(--sp-5); max-width: 1200px; }
.hero h1 { font-size: var(--t-hero); text-transform: uppercase; letter-spacing: -0.04em; }
.hero__lock { width: clamp(150px, 20vw, 230px); margin-bottom: var(--sp-2); }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-2); }
/* As três chamadas do herói são a porta de entrada do site: carregam mais peso
   que um botão comum e por isso saem da medida padrão do `.btn`. */
.hero__actions .btn { font-size: var(--t-body); padding: 1.02rem 1.9rem; }
.hero__meta { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-5); margin-top: var(--sp-5); font-size: var(--t-xs); letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-dim); font-family: var(--font-display); }

/* ============ EXPLORAR: split view ============ */
.explore { border-bottom: 1px solid var(--line); }
.explore__bar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--sp-3);
  /* Assimétrico de propósito: o respiro de cima separa a busca do herói, o de
     baixo só encosta no painel do catálogo. Simetrizei uma vez e foi recusado —
     os 17px embaixo são a medida aprovada. */
  padding-block: clamp(var(--sp-5), 4vw, var(--sp-7)) var(--sp-4);
}
.explore__anfitriao-curto { display: none; }
.search { position: relative; }
.search input {
  width: 100%; font: inherit; color: var(--fg);
  background: var(--surface); border: 1px solid var(--line-strong);
  border-radius: var(--r-pill); padding: 0.72rem 1rem 0.72rem 2.6rem;
  transition: border-color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}
.search input::placeholder { color: var(--fg-dim); }
.search input:hover { border-color: var(--line-strong); background: var(--surface-2); }
.search svg { position: absolute; left: 0.92rem; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--fg-dim); }

.toggle {
  display: inline-flex; flex: none; padding: 3px; gap: 2px;
  background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r-pill);
}
.toggle button {
  font-family: var(--font-display); font-size: var(--t-sm); font-weight: 500;
  padding: 0.5rem 1.05rem; border-radius: var(--r-pill); border: 0; cursor: pointer;
  background: transparent; color: var(--fg-muted);
  display: inline-flex; align-items: center; gap: 0.4rem;
  transition: color var(--dur-fast) var(--ease-out);
}
.toggle button svg { width: 15px; height: 15px; }
.toggle button[aria-selected='true'] { color: var(--paper); background: var(--grad-brand); }

/* Sem margem embaixo: o mapa tem a altura da tela e encosta na seção seguinte. */
#view-mapa { padding-bottom: 0; }

.panel {
  background: linear-gradient(180deg, rgba(250, 249, 252, 0.05), rgba(250, 249, 252, 0.015));
  border: 1px solid var(--line); border-radius: var(--r-lg);
  overflow: hidden;
}
.panel__head { padding: var(--sp-4) var(--sp-4) var(--sp-3); border-bottom: 1px solid var(--line); }
.panel__head h3 { font-size: var(--t-d3); }

/* Busca, filtros e contagem numa linha só — é o cabeçalho de comando do
   catálogo. Linha única em qualquer largura: a faixa flutua sobre o mapa quando
   a lista recolhe, e duas linhas ali comeriam o desenho. */
/* A âncora do pop-up de chips é a faixa inteira, não o botão: o botão fica perto
   da borda esquerda da coluna, e uma caixa alinhada por ele saía da tela. */
.mapbar { position: relative; z-index: 7; display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-3); }
/* min-width:0 é o que deixa o campo encolher: sem isso o tamanho intrínseco do
   input empurra o botão de filtros para fora da linha. */
.mapbar .search { flex: 1 1 90px; min-width: 0; }
.mapbar__conta { flex: 0 0 auto; white-space: nowrap; font-size: var(--t-xs); color: var(--fg-muted); border: 1px solid var(--line); border-radius: var(--r-pill); padding: 0.3rem 0.7rem; }
/* A caixa de chips é um pop-up ancorado no botão, não uma faixa no fluxo: dez
   chips empilhados aqui empurravam o mapa para fora da tela. */
.filtros { flex: 0 0 auto; }
.filtros[data-aberto='false'] .filters { display: none; }
.filters { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
/* Da largura da faixa, nem mais nem menos: os chips quebram em linhas dentro do
   pop-up, que é o lugar onde quebrar não custa nada ao mapa. */
.panel--side .filters {
  position: absolute; top: calc(100% + var(--sp-2)); left: 0; right: 0;
  padding: var(--sp-3); border-radius: var(--r-md);
  background: color-mix(in srgb, var(--ink-900) 94%, transparent);
  backdrop-filter: blur(16px);
  border: 1px solid var(--line-strong); box-shadow: var(--shadow-card);
}
.filtros__abre {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  margin: 0; white-space: nowrap;
  font-family: var(--font-display); font-size: var(--t-xs); font-weight: 500;
  letter-spacing: 0.06em; padding: 0.42rem 0.82rem 0.42rem 0.9rem;
  border-radius: var(--r-pill); min-height: 40px;
  background: color-mix(in srgb, var(--ink-900) 88%, transparent);
  border: 1px solid var(--line-strong); color: var(--fg);
  cursor: pointer;
}
.filtros__abre::after {
  content: ''; width: 7px; height: 7px; flex: none;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform var(--dur-fast) var(--ease-out);
}
.filtros[data-aberto='true'] .filtros__abre::after { transform: translateY(1px) rotate(-135deg); }
.filtros[data-aberto='true'] .filtros__abre { border-color: var(--accent); }
.filtros__abre:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
/* Quantos filtros estão ligados: no celular a lista de lugares virou carrossel,
   então a contagem é o único retorno de que o filtro pegou com a caixa fechada. */
/* Ouro cheio com tinta escura mede 3,93:1 nas fases claras, onde --gold desce
   para #9b6a00. Mesma saída dos chips de categoria: véu de ouro e borda de ouro,
   com o texto em --fg sobre a superfície escura da caixa. */
.filtros__conta {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 22px; height: 22px; padding: 0 0.32rem;
  border-radius: var(--r-pill); color: var(--fg);
  background: color-mix(in srgb, var(--gold) 26%, transparent);
  border: 1px solid var(--gold);
  font-size: 0.68rem; font-weight: 700;
}
.filtros__conta[hidden] { display: none; }
.chip {
  font-family: var(--font-display); font-size: var(--t-xs); font-weight: 500;
  letter-spacing: 0.06em; padding: 0.32rem 0.66rem; border-radius: var(--r-pill);
  background: transparent; border: 1px solid var(--line-strong); color: var(--fg-muted);
  cursor: pointer; transition: all var(--dur-fast) var(--ease-out);
  display: inline-flex; align-items: center; gap: 0.35rem;
}
.chip:hover { color: var(--fg); border-color: var(--pink); }
/* Ligado, o chip inteiro vira a cor da categoria — é a mesma cor do ponto dele no
   mapa, então o filtro é a legenda. O texto escolhe preto ou branco conforme a
   luminância do preenchimento (--cat-fg vem do JS que pinta o chip): as sete cores
   do guia vão do verde-claro ao violeta, e uma cor de texto fixa sumiria em
   metade delas. */
.chip[aria-pressed='true'] {
  color: var(--cat-fg, var(--paper));
  background: var(--cat, var(--purple));
  border-color: var(--cat, var(--purple));
}

/* Desligado, só a bolinha carrega a cor. */
.chip[data-cat]::before {
  content: ''; width: 8px; height: 8px; border-radius: 50%; flex: none;
  background: var(--cat); box-shadow: 0 0 0 1px rgba(16, 13, 21, 0.5);
}
/* Ligada, a bolinha seria um buraco da cor do fundo: vira a cor do texto para
   continuar marcando o começo do rótulo sem mexer na largura do chip. */
.chip[aria-pressed='true'][data-cat]::before {
  background: var(--cat-fg, var(--paper)); box-shadow: none;
}

/* Sem teto de altura: a lista rola dentro da coluna, cuja altura é a do mapa.
   O `max-height: 540px` que morava aqui travava a rolagem no meio do catálogo. */
.placelist { overflow-y: auto; scrollbar-width: thin; }
.placelist::-webkit-scrollbar { width: 8px; }
.placelist::-webkit-scrollbar-thumb { background: var(--ink-600); border-radius: 4px; }

/* O cartão do catálogo é desenhado em ui.css. Aqui ficam só as peças de texto
   que outras páginas também usam. */
.place__name { font-family: var(--font-display); font-weight: 500; font-size: 1rem; letter-spacing: -0.01em; }
.place__meta { font-size: var(--t-xs); color: var(--fg-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.place__desc { font-size: var(--t-sm); color: var(--fg-muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

.tag {
  font-family: var(--font-display); font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase;
  /* Mesmo motivo do .plano__selo: a cor dá 6,5:1, o traço de 11px rendeu 4,44:1. */
  font-weight: 600;
  padding: 0.22rem 0.52rem; border-radius: var(--r-sm); border: 1px solid var(--line-strong); color: var(--fg-dim);
}
.tag--supporter { color: var(--gold); border-color: rgba(255, 187, 39, 0.45); background: rgba(255, 187, 39, 0.1); }
.tag--demo { color: var(--fg-label); border-color: rgba(221, 115, 221, 0.4); background: rgba(221, 115, 221, 0.08); }

/* Mapa da costa: o mesmo recorte do litoral em .pmtiles que a página do mapa
   desenha. Os pontos são marcadores do MapLibre, então cada um está sobre a
   coordenada real do Guia de Praias — não há mais desenho ilustrativo. */
/* A altura é a da tela menos a barra fixa: o mapa é a vista, não um bloco dentro
   dela. `svh` em vez de `vh` porque no celular a barra do navegador recolhe e o
   `vh` deixaria uma faixa do desenho sempre escondida sob ela. */
.map {
  position: relative; overflow: hidden; background: var(--ink-750);
  height: calc(100svh - var(--nav-h));
  border-block: 1px solid var(--line);
}
.map__canvas { display: block; width: 100%; height: 100%; }
/* Sem transform próprio: o marcador escreve o dele na linha e venceria este. É a
   caixa de 30px com a bolinha centrada que põe o ponto sobre a coordenada, com
   anchor 'center' — quem desloca é o MapLibre, não o CSS. */
/* A caixa é maior que a moeda de propósito: 34px de moeda é desenho bonito e
   alvo de toque ruim — fica abaixo do mínimo de 44px e, num mapa onde os pontos
   se encostam, errar o dedo abre o vizinho. A moeda continua com os mesmos 34px
   e centrada, então o ponto não se mexe de lugar; o que cresce é só o que
   recebe o toque. */
.pin {
  position: absolute; z-index: 2;
  display: grid; place-items: center; cursor: pointer;
  width: 44px; height: 44px; padding: 0; border: 0; background: transparent; color: var(--paper);
}
/* O ponto é a moeda da categoria — a mesma peça do cartão da lista, com o mesmo
   glifo. É ela que liga um ao outro, então quem desenha é `.coin`, em ui.css. */
.pin__coin {
  width: 34px; height: 34px;
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
/* Apoiador é um anel dourado por fora, não outra cor: assim o ponto continua
   dizendo a categoria e o apoio aparece ao mesmo tempo. */
.pin--supporter .pin__coin { box-shadow: 0 0 0 3px var(--gold), 0 3px 10px -3px rgba(16, 13, 21, 0.8); }
.pin:hover .pin__coin, .pin:focus-visible .pin__coin { transform: scale(1.18); }
.pin[aria-current='true'] { z-index: 3; }
.pin[aria-current='true'] .pin__coin { transform: scale(1.3); box-shadow: 0 0 0 8px rgba(221, 115, 221, 0.18), 0 0 26px rgba(221, 115, 221, 0.55), inset 0 0 0 2px rgba(255, 255, 255, 0.92); }
/* O fundo do rótulo é escuro nas quatro fases — ele flutua sobre o mapa, que
   clareia de dia. Então a cor do texto também é fixa: herdando `--paper` ele
   virava tinta escura sobre a pastilha escura, e o nome sumia numa caixa preta. */
.pin__label {
  position: absolute; bottom: 108%; left: 50%; transform: translateX(-50%);
  display: grid; gap: 0.1rem; justify-items: center;
  white-space: nowrap; font-family: var(--font-display); font-size: var(--t-xs);
  color: #faf9fc;
  background: rgba(16, 13, 21, 0.92); border: 1px solid rgba(250, 249, 252, 0.22);
  padding: 0.3rem 0.55rem; border-radius: var(--r-sm); opacity: 0; pointer-events: none;
  transition: opacity var(--dur-fast) var(--ease-out);
}
/* O nome sozinho não dizia que ali havia para onde ir: a pessoa via o rótulo,
   lia o lugar e não tinha por que clicar. A segunda linha é a única coisa na
   tela que nomeia o destino do clique. */
.pin__cta {
  font-size: 0.68rem; letter-spacing: 0.04em; text-transform: uppercase;
  /* Cor fixa, não a da categoria: o rótulo é escuro nas quatro fases e as sete
     cores de categoria incluem tons que sumiriam contra ele. */
  color: #e79ae7;
}
.pin:hover .pin__label, .pin:focus-visible .pin__label, .pin[aria-current='true'] .pin__label { opacity: 1; }

/* Detalhe do lugar */
.detail { border-top: 1px solid var(--line); padding: var(--sp-4); display: grid; gap: var(--sp-3); }
.detail[hidden] { display: none; }
.detail__title { font-family: var(--font-display); font-size: var(--t-d3); font-weight: 700; }
.detail dl { display: grid; grid-template-columns: auto 1fr; gap: var(--sp-2) var(--sp-4); font-size: var(--t-sm); margin: 0; }
.detail dt { color: var(--fg-dim); font-family: var(--font-display); font-size: var(--t-xs); letter-spacing: 0.1em; text-transform: uppercase; }
.detail dd { margin: 0; color: var(--fg-muted); }
.detail__close { justify-self: end; }

/* Agenda / calendário */
.agenda[hidden], .mapview[hidden] { display: none; }
.agenda__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--sp-4); }
.day {
  background: linear-gradient(180deg, rgba(250, 249, 252, 0.05), rgba(250, 249, 252, 0.015));
  border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden;
  display: flex; flex-direction: column;
}
.day__head { padding: var(--sp-4); border-bottom: 1px solid var(--line); display: flex; align-items: baseline; gap: var(--sp-3); }
.day__num { font-family: var(--font-display); font-size: 2rem; font-weight: 700; line-height: 1; background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
.day__dow { font-family: var(--font-display); font-size: var(--t-xs); letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-dim); }
.day__list { display: grid; gap: 1px; background: var(--line); flex: 1; }
.day__empty { padding: var(--sp-4); font-size: var(--t-sm); color: var(--fg-dim); background: var(--ink-850); }
.slot { padding: var(--sp-4); background: var(--ink-850); display: grid; gap: var(--sp-2); }
.slot__time { font-family: var(--font-display); font-size: var(--t-xs); letter-spacing: 0.1em; color: var(--gold); }
.slot__title { font-family: var(--font-display); font-weight: 500; }
.slot__where { font-size: var(--t-sm); color: var(--fg-muted); }

/* ============ CARDS ============ */
.grid { display: grid; gap: var(--sp-4); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }

.card {
  position: relative; display: flex; flex-direction: column; gap: var(--sp-3);
  padding: var(--sp-5); border-radius: var(--r-lg);
  background: linear-gradient(170deg, rgba(250, 249, 252, 0.06), rgba(250, 249, 252, 0.015));
  border: 1px solid var(--line); overflow: hidden;
  transition: transform var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.card::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: var(--grad-brand); opacity: 0; transition: opacity var(--dur) var(--ease-out);
  mix-blend-mode: soft-light;
}
.card:hover { transform: translateY(-4px); border-color: var(--line-strong); box-shadow: var(--shadow-card); }
.card:hover::after { opacity: 0.35; }
.card h3 { font-size: var(--t-d3); }
/* A cor é padrão, não imposição: sem o :not, `.card p` (duas unidades de
   especificidade) vencia `.dim` e a classe não pintava nada dentro do cartão. */
.card p { font-size: var(--t-sm); }
.card p:not(.dim) { color: var(--fg-muted); }
.card__foot { margin-top: auto; padding-top: var(--sp-2); }
.card__media { margin: calc(var(--sp-5) * -1) calc(var(--sp-5) * -1) 0; aspect-ratio: 16 / 10; background: var(--ink-700); }
.card__media img, .card__media video { width: 100%; height: 100%; object-fit: cover; }
.card--link { cursor: pointer; }

.ph {
  display: grid; place-items: center; gap: var(--sp-2); text-align: center;
  min-height: 180px; border-radius: var(--r-md);
  border: 1px dashed var(--line-strong);
  background:
    repeating-linear-gradient(45deg, rgba(250, 249, 252, 0.022) 0 10px, transparent 10px 20px);
  color: var(--fg-dim); font-size: var(--t-sm); padding: var(--sp-4);
}
.ph__label { font-family: var(--font-display); font-size: var(--t-xs); letter-spacing: 0.18em; text-transform: uppercase; color: var(--fg-label); }

/* ============ VÍDEO ============ */
.vblock { position: relative; border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--line); background: var(--ink-800); }
.vblock video { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.vblock__cap { padding: var(--sp-3) var(--sp-4); font-size: var(--t-xs); color: var(--fg-dim); border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); }
.vfacade { position: relative; width: 100%; padding: 0; border: 0; cursor: pointer; background: var(--ink-800); display: block; }
.vfacade img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.vfacade__play {
  position: absolute; inset: 0; display: grid; place-items: center;
  background: linear-gradient(180deg, rgba(16, 13, 21, 0.1), rgba(16, 13, 21, 0.6));
}
.vfacade__play span {
  display: grid; place-items: center; width: 62px; height: 62px; border-radius: 50%;
  background: var(--grad-brand); box-shadow: var(--shadow-glow);
  transition: transform var(--dur) var(--ease-out);
}
.vfacade__play svg { width: 20px; height: 20px; margin-left: 3px; color: var(--paper); }
.vfacade:hover .vfacade__play span { transform: scale(1.1); }
.vfacade__txt {
  position: absolute; left: var(--sp-4); bottom: var(--sp-4); right: var(--sp-4);
  font-family: var(--font-display); font-size: var(--t-sm); text-align: left;
}

/* ============ SPLIT EDITORIAL ============ */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 4vw, 4rem); align-items: center; }
.split--wide-right { grid-template-columns: 0.85fr 1.15fr; }
/* Uma trilha `1fr` nunca encolhe abaixo do min-content do item, e um carrossel dentro
   de um `div` comum empurra esse min-content para a soma dos cartões. */
.split > * { min-width: 0; }
.split__copy { display: grid; gap: var(--sp-4); align-content: start; }

/* ============ TIMELINE (SOBRE) ============ */
.tl { display: grid; gap: var(--sp-5); position: relative; }
.tl::before { content: ''; position: absolute; left: 21px; top: 10px; bottom: 10px; width: 2px; background: var(--grad-line); background-size: 100% 200%; opacity: 0.5; }
@media (min-width: 880px) {
  .tl { grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); }
  .tl::before { left: 10px; right: 10px; top: 21px; bottom: auto; height: 2px; width: auto; background: var(--grad-line); }
}
.tl__item { position: relative; display: grid; gap: var(--sp-3); padding-left: 58px; }
.tl__item::before {
  content: ''; position: absolute; left: 12px; top: 10px; width: 20px; height: 20px; border-radius: 50%;
  background: var(--ink-900); border: 2px solid var(--pink); box-shadow: 0 0 18px rgba(221, 115, 221, 0.55);
}
@media (min-width: 880px) {
  .tl__item { padding-left: 0; padding-top: 58px; }
  .tl__item::before { left: 0; top: 12px; }
}
.tl__era { font-family: var(--font-display); font-size: var(--t-xs); letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); }
.tl__logo { height: 56px; width: auto; object-fit: contain; object-position: left; }

/* ============ MURO DE APOIADORES ============ */
.wall { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.wall__cell {
  aspect-ratio: 16 / 9; display: grid; place-items: center; gap: var(--sp-2);
  background: var(--ink-850); padding: var(--sp-4); text-align: center;
  transition: background-color var(--dur) var(--ease-out);
}
.wall__cell:hover { background: var(--ink-700); }
a.wall__cell { text-decoration: none; }
a.wall__cell:focus-visible { outline: 2px solid var(--focus); outline-offset: -3px; }
a.wall__cell:hover .wall__mark { color: var(--fg); }
.wall__mark {
  font-family: var(--font-display); font-weight: 700; font-size: 0.95rem; letter-spacing: -0.01em;
  color: var(--fg-muted);
}
.wall__kind { font-size: 0.625rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-dim); }

/* Ficha do estabelecimento aberta pelo muro */
.ficha { display: grid; gap: var(--sp-3); }
.ficha dl { display: grid; grid-template-columns: minmax(96px, auto) 1fr; gap: 0.4rem var(--sp-4); font-size: var(--t-sm); margin: 0; }
.ficha dt { color: var(--fg-dim); font-family: var(--font-display); font-size: var(--t-xs); letter-spacing: 0.1em; text-transform: uppercase; }
.ficha dd { margin: 0; color: var(--fg-muted); overflow-wrap: anywhere; }
@media (max-width: 520px) { .ficha dl { grid-template-columns: 1fr; gap: 0.1rem var(--sp-2); } }

/* ============ LOJA ============ */
.tee { display: grid; gap: var(--sp-3); }
.tee__shot {
  aspect-ratio: 4 / 5; border-radius: var(--r-md); border: 1px solid var(--line);
  display: grid; place-items: center; padding: var(--sp-6); overflow: hidden; position: relative;
}
.tee__shot img { width: 72%; height: auto; object-fit: contain; filter: drop-shadow(0 10px 30px rgba(0, 0, 0, 0.5)); }
.tee--night { background: radial-gradient(120% 90% at 50% 0%, var(--ink-700), var(--ink-900)); }
.tee--purple { background: radial-gradient(120% 90% at 50% 0%, var(--purple), var(--purple-deep)); }
.tee--gold { background: radial-gradient(120% 90% at 50% 0%, #3b2a05, var(--ink-900)); }
.tee__name { font-family: var(--font-display); font-weight: 500; }

/* ============ CHAT (PRÉVIA) ============ */
.chat { border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; background: var(--ink-850); display: grid; }
.chat__head { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-4); border-bottom: 1px solid var(--line); }
.chat__avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--grad-brand); display: grid; place-items: center; flex: none; }
.chat__avatar img { width: 22px; }
.chat__log { display: grid; gap: var(--sp-3); padding: var(--sp-5) var(--sp-4); min-height: 280px; align-content: start; }
.bubble { max-width: 46ch; padding: 0.7rem 1rem; border-radius: var(--r-md); font-size: var(--t-sm); line-height: 1.55; }
.bubble--me { justify-self: end; background: var(--grad-brand); color: var(--paper); border-bottom-right-radius: 4px; }
.bubble--ai { justify-self: start; background: var(--surface-2); border: 1px solid var(--line); color: var(--fg-muted); border-bottom-left-radius: 4px; }
.bubble--ai strong { color: var(--fg); font-weight: 600; }
.chat__foot { display: flex; gap: var(--sp-2); padding: var(--sp-3) var(--sp-4) var(--sp-4); border-top: 1px solid var(--line); }
.chat__foot input { flex: 1; font: inherit; font-size: var(--t-sm); color: var(--fg); background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r-pill); padding: 0.6rem 1rem; }

/* ============ FOOTER ============ */
/* O fundo segue a fase: preso no escuro, o rodapé virava ilha noturna no meio
   de uma página clara e apagava o texto secundário, que nas fases claras é escuro. */
.foot { position: relative; z-index: 1; border-top: 1px solid var(--line); background: color-mix(in srgb, var(--ink-800) 72%, transparent); padding-block: var(--sp-7) var(--sp-5); margin-top: var(--sp-7); }
.foot__top { display: grid; grid-template-columns: minmax(240px, 1.2fr) repeat(auto-fit, minmax(150px, 1fr)); gap: var(--sp-6); }
.foot__brand { display: grid; gap: var(--sp-4); align-content: start; }
.foot__brand img { width: 200px; height: auto; }
.foot h2 { font-family: var(--font-display); font-size: var(--t-xs); letter-spacing: 0.18em; text-transform: uppercase; color: var(--fg-dim); margin-bottom: var(--sp-3); font-weight: 500; }
.foot ul { display: grid; gap: var(--sp-2); }
.foot ul a { font-size: var(--t-sm); color: var(--fg-muted); transition: color var(--dur-fast) var(--ease-out); }
.foot ul a:hover { color: var(--fg); }
/* Texto de leitura, não rótulo: 12px de Inter 400 em caixa baixa é o traço mais fino
   da página. Sobre fundo claro ele perde ~2.8 de razão para o antialiasing, e escurecer
   a cor devolve pouco (nominal 7.4 ainda mede 4.6); o peso 500 engrossa o traço e é o
   que de fato tira a medição do limite. */
.foot__bottom { display: flex; flex-wrap: wrap; gap: var(--sp-3) var(--sp-5); align-items: center; margin-top: var(--sp-7); padding-top: var(--sp-5); border-top: 1px solid var(--line); font-size: var(--t-xs); font-weight: 500; color: var(--fg-muted); }
.foot__bottom .sp { margin-left: auto; }

/* ============ ANIMAÇÃO DE ENTRADA ============ */
.reveal { opacity: 0; transform: translateY(24px); }
.is-ready .reveal { transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); }
.reveal.in { opacity: 1; transform: none; }

@keyframes drift { to { background-position: 200% 0; } }
.anim-grad {
  background: linear-gradient(96deg, var(--purple), var(--pink), var(--gold), var(--pink), var(--purple));
  background-size: 200% 100%;
  animation: drift 18s linear infinite;
}
@keyframes float-y { 50% { transform: translateY(-10px); } }
.float { animation: float-y 7s var(--ease-in-out) infinite; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; }
  .anim-grad, .float { animation: none; }
  html { scroll-behavior: auto; }
}

/* ============ RESPONSIVO ============ */
@media (max-width: 1040px) {
  .split, .split--wide-right { grid-template-columns: 1fr; }
  .explore__anfitriao { flex: 0 1 auto; min-width: 0; }
  .explore__anfitriao-longo { display: none; }
  .explore__anfitriao-curto { display: inline; }
}
@media (max-width: 560px) {
  .section__head { flex-direction: column; align-items: flex-start; gap: var(--sp-4); margin-bottom: var(--sp-5); }
  /* Em coluna, a base 32ch do flex deixa de medir largura e vira ALTURA: cada
     cabeçalho ganhava ~210px de ar vazio, e a grade interna esticava as linhas
     para preencher. flex-basis auto devolve a altura ao conteúdo. */
  .section__head > div:first-child { flex: 0 1 auto; }
  .section { padding-block: var(--sp-7); }
  .section--tight { padding-block: var(--sp-6); }
  .hero__actions .btn { flex: 1 1 100%; }
  .foot__top { grid-template-columns: 1fr 1fr; }
  .foot__brand { grid-column: 1 / -1; }
  /* No celular não há cursor, então o rótulo de passagem não existe — mas
     escondê-lo de todos tirava também o do ponto aceso, que é justamente o que
     diz o nome do lugar e que dali se chega à página. Fica só esse. */
  .pin__label { display: none; }
  .pin[aria-current='true'] .pin__label { display: grid; }
}