/* ============================================================================
   em floripa — tema "Disco Marquee Praiano"
   Reskin puro: reestiliza as classes já usadas por app.js/index.html.
   Nenhuma classe renomeada; nenhuma mudança de lógica no JS.
   ========================================================================== */

:root {
  /* base / fundos */
  --bg: #100913;
  --card-1: #1c1426;
  --card-2: #2a1734;
  --modal-bg: #17101e;

  /* letreiro / disco */
  --cream: #fbe9c8;
  --gold: #ffd166;
  --bulb-glow: #ffb03c;
  --tangerine-1: #ff8a4c;
  --tangerine-2: #ff5a3c;
  --blush: #e0a892;
  --tag-muted: #b58aa0;
  --dark-text: #160a06;
  --stub-text: #2a0f06;

  /* mar / praia */
  --teal: #2fa39a;
  --teal-light: #5fd0c6;
  --teal-today: #2fd4c4;
  --teal-chip-txt: #bff0ea;

  /* linhas / detalhes */
  --card-border: rgba(255, 138, 76, 0.22);
  --card-border-h: #ff8a4c;
  --marquee-line: rgba(255, 209, 102, 0.5);
  --footer-muted: #8f7288;

  /* tipografia */
  --f-body:
    "Space Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    sans-serif;
  --f-display: "Anton", "Space Grotesk", sans-serif;
  /* Títulos de CONTEÚDO (nome do evento). A Anton fica nos rótulos curtos de
     UI (dia, chips, botões), mas em título ela é pesada demais: contraforma
     quase fechada, letras coladas, acento espremido — em caixa alta e frase
     longa vira um bloco. A Barlow 600 com tracking mantém a caixa alta e o ar
     de pôster, com letras que se distinguem. */
  --f-title: "Barlow Condensed", "Anton", sans-serif;
  --f-word: "Bungee", "Anton", sans-serif;

  --radius: 15px;

  /* Altura da barra de abas do mobile. Zero no desktop, onde ela não existe —
     assim o respiro do rodapé é a MESMA expressão nos dois, sem media query
     duplicando a regra. */
  --tabbar-h: 0px;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: var(--f-body);
  color: var(--cream);
  line-height: 1.5;
  min-height: 100vh;
  background:
    radial-gradient(900px 500px at 15% -5%, #3a1230 0%, transparent 55%),
    radial-gradient(800px 500px at 90% 0%, #2a1236 0%, transparent 55%),
    radial-gradient(1100px 620px at 50% 118%, #0e3f3d 0%, transparent 56%),
    var(--bg);
  background-repeat: no-repeat;
  background-color: var(--bg);
}

a {
  color: inherit;
  text-decoration: none;
}

/* ---------- Cabeçalho: letreiro de marquise ---------- */
.topbar {
  max-width: 1400px;
  margin: 0 auto;
  padding: 34px clamp(16px, 4vw, 40px) 6px;
}
.marquee {
  position: relative;
  border: 2px solid rgba(255, 209, 102, 0.55);
  border-radius: 20px;
  padding: 30px 22px 26px;
  text-align: center;
  background:
    radial-gradient(
      340px 210px at 50% 98%,
      rgba(255, 209, 102, 0.32),
      transparent 62%
    ),
    radial-gradient(
      520px 240px at 50% 0%,
      rgba(255, 90, 60, 0.2),
      transparent 65%
    ),
    radial-gradient(
      680px 300px at 50% 138%,
      rgba(47, 163, 154, 0.28),
      transparent 60%
    );
}
.bulbs {
  position: absolute;
  left: 16px;
  right: 16px;
  display: flex;
  justify-content: space-between;
  pointer-events: none;
}
.bulbs-top {
  top: 9px;
}
.bulbs-bottom {
  bottom: 9px;
}
.bulbs i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 9px 2px var(--bulb-glow);
  animation: blink 1.2s ease-in-out infinite;
}
.bulbs i:nth-child(6n + 1) {
  animation-delay: 0s;
}
.bulbs i:nth-child(6n + 2) {
  animation-delay: 0.15s;
}
.bulbs i:nth-child(6n + 3) {
  animation-delay: 0.3s;
}
.bulbs i:nth-child(6n + 4) {
  animation-delay: 0.45s;
}
.bulbs i:nth-child(6n + 5) {
  animation-delay: 0.6s;
}
.bulbs i:nth-child(6n) {
  animation-delay: 0.75s;
}
.bulbs-bottom i:nth-child(6n + 1) {
  animation-delay: 0.6s;
}
.bulbs-bottom i:nth-child(6n + 2) {
  animation-delay: 0.75s;
}
.bulbs-bottom i:nth-child(6n + 3) {
  animation-delay: 0s;
}
.bulbs-bottom i:nth-child(6n + 4) {
  animation-delay: 0.15s;
}
.bulbs-bottom i:nth-child(6n + 5) {
  animation-delay: 0.3s;
}
.bulbs-bottom i:nth-child(6n) {
  animation-delay: 0.45s;
}

.brand {
  display: block;
}
/* Ícone + letreiro na mesma linha. `flex-wrap` porque em tela estreita o nome
   em Bungee é largo: ali o ícone sobe para cima do nome em vez de espremer os
   dois. */
.marca-txt {
  min-width: 0;
}
.marca {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(10px, 2vw, 18px);
  flex-wrap: wrap;
}
.marca-icone {
  width: clamp(46px, 8vw, 64px);
  height: auto;
  /* 22% aproxima o squircle que o iOS/Android desenham por cima da mesma arte */
  border-radius: 22%;
  border: 1px solid rgba(255, 209, 102, 0.35);
  box-shadow: 0 6px 18px -6px rgba(0, 0, 0, 0.75);
}
.logo {
  margin: 0;
  font-family: var(--f-word);
  font-weight: 400;
  font-size: clamp(30px, 6vw, 52px);
  line-height: 1;
  color: var(--cream);
  text-shadow: 0 0 22px rgba(255, 138, 76, 0.65);
}
.tagline {
  margin: 12px 0 0;
  font-family: var(--f-body);
  color: var(--tangerine-1);
  font-size: clamp(11px, 1.6vw, 13px);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  font-weight: 600;
}
.horizon {
  width: min(280px, 70%);
  height: 3px;
  margin: 16px auto 0;
  border-radius: 999px;
  background: linear-gradient(90deg, #ffd166, #ff5a3c, #e0759a, #2fa39a);
}
.meta {
  display: flex;
  justify-content: center;
  gap: 14px;
  margin-top: 12px;
  flex-wrap: wrap;
}
.updated,
.count {
  font-size: 12px;
  color: var(--footer-muted);
}
.count {
  color: var(--tangerine-1);
  font-weight: 700;
}

/* ---------- Layout: desktop = 3 colunas ---------- */
.layout {
  display: grid;
  grid-template-columns: minmax(220px, 280px) minmax(0, 1fr) minmax(0, 300px);
  gap: clamp(16px, 3vw, 34px);
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 clamp(16px, 4vw, 40px);
  align-items: start;
}
/* As colunas grudam ABAIXO da barra de comando, que também é sticky no desktop
   e muda de altura (a fileira de filtros ativos entra e sai). Presas ao topo da
   janela elas rolavam para trás dela e sumiam. --barra-h é escrita pelo JS; no
   mobile vale 0, e ali a barra rola junto com a página. */
.sidebar-left,
.sidebar-right {
  position: sticky;
  top: calc(var(--barra-h, 0px) + 12px);
  max-height: calc(100vh - var(--barra-h, 0px) - 24px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: 2px;
}
.sidebar-right {
  min-height: 1px;
}
.sidebar-left,
.sidebar-right {
  scrollbar-width: thin;
  scrollbar-color: var(--card-border) transparent;
}
.sidebar-left::-webkit-scrollbar,
.sidebar-right::-webkit-scrollbar {
  width: 8px;
}
.sidebar-left::-webkit-scrollbar-thumb,
.sidebar-right::-webkit-scrollbar-thumb {
  background: var(--card-border);
  border-radius: 8px;
}

/* DECK — o bloco de comandos do topo: busca, páginas e seções. Chamava-se
   .searchbar de quando só tinha a busca; o nome ficou pequeno para o que o
   elemento virou (o id `navdeck` já dizia "deck", agora a classe concorda).
   ESTÁTICO de propósito: fixo, ele cobriria o day-head sticky (a data no topo
   é a âncora de orientação da lista). Quem persiste na rolagem do mobile é a
   .tabbar, no rodapé, que não disputa espaço com o topo. */
.deck {
  max-width: 1400px;
  margin: 0 auto;
  padding: 12px clamp(16px, 4vw, 40px) 10px;
}
/* No MOBILE a barra é uma pilha, não uma linha: as páginas moram na tabbar do
   rodapé, então sobram os tipos, a busca e (quando há filtro) os pills ativos,
   um abaixo do outro. Precisa do gap — sem ele os três se encostavam, porque a
   antiga .deck-linha (que era flex e separava busca de páginas) deixou de
   existir quando o topo virou barra de comando.
   Declarada aqui, ANTES do @media do desktop, para a regra de lá vencer sem
   depender de especificidade. */
.barra {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
/* No mobile o grupo da direita não existe como caixa: `contents` o dissolve e
   Salvos (escondido aqui) e busca voltam a ser filhos diretos da pilha. Ele só
   vira uma caixa de verdade no desktop, onde ocupa a terceira coluna do grid. */
.barra-dir {
  display: contents;
}
/* a margem que separava os tipos do letreiro agora é do gap acima */
.barra > .atalhos {
  margin-top: 0;
}

/* Uma linha só: BUSCA à esquerda, PÁGINAS à direita (como no handoff). Antes
   a nav era uma faixa centrada por cima, o que criava duas barras concorrendo
   — os atalhos de seção descem para baixo, como sugestão de filtro. */
.page-nav {
  display: flex;
  justify-content: flex-end;
  flex: 0 0 auto;
  min-width: 0;
}
.deck-linha {
  display: flex;
  flex-wrap: nowrap;
  gap: 10px;
  align-items: center;
}
.search-wrap {
  flex: 1 1 auto;
  min-width: 0;
  position: relative;
  display: flex;
  align-items: center;
}
.search-icon {
  position: absolute;
  left: 13px;
  color: var(--tangerine-1);
  pointer-events: none;
}
.search {
  width: 100%;
  min-width: 0;
  font-family: inherit;
  font-size: 14px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 138, 76, 0.28);
  color: var(--cream);
  padding: 11px 38px 11px 40px;
  border-radius: 12px;
  transition: 0.15s;
}
.search::placeholder {
  color: var(--blush);
  opacity: 0.7;
}
.search:focus {
  outline: none;
  border-color: var(--tangerine-1);
  box-shadow: 0 0 0 3px rgba(255, 138, 76, 0.12);
}
.search::-webkit-search-cancel-button {
  display: none;
}
.search-clear {
  position: absolute;
  right: 8px;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: rgba(255, 255, 255, 0.06);
  color: var(--blush);
  cursor: pointer;
  font-size: 13px;
  transition: 0.15s;
}
.search-clear:hover {
  color: var(--cream);
  background: rgba(255, 138, 76, 0.18);
}

/* Desktop: a busca+abas ficam sobre a coluna central (mesma grade do .layout),
   com a mesma largura da lista de eventos — em vez de esticar a página toda. */
@media (min-width: 921px) {
  /* O letreiro deita: ícone + nome + tagline à esquerda, contagem à direita.
     Em pé ele gastava 245px de altura para 89px de conteúdo — num monitor de
     900px, 27% do que se vê antes do primeiro evento. As luzes ficam: são a
     identidade do site, e o que sai é só a folga de cartaz. */
  .topbar {
    padding-top: 16px;
    padding-bottom: 0;
  }
  .marquee {
    padding: 12px 20px;
  }
  .brand {
    display: flex;
    align-items: center;
    gap: 18px;
    text-align: left;
  }
  .marca {
    flex: none;
    gap: 14px;
  }
  .marca-icone {
    width: 52px;
  }
  .logo {
    font-size: 34px;
  }
  .tagline {
    margin: 4px 0 0;
    font-size: 11.5px;
    letter-spacing: 0.24em;
  }
  /* a régua colorida era um separador horizontal — deitado, o espaço já separa */
  .horizon {
    display: none;
  }
  .meta {
    margin: 0 0 0 auto;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    text-align: right;
  }
  .count {
    font-family: var(--f-display);
    font-size: 22px;
    line-height: 1;
    color: var(--gold);
  }

  /* ---------- BARRA DE COMANDO (desktop) ----------
     O topo tinha quatro faixas empilhadas — letreiro, busca, modos de ver e
     atalhos — somando ~400px antes do primeiro evento, e nenhuma delas era
     claramente a principal: todas gritavam no mesmo volume. Vira uma linha só,
     na ordem em que as perguntas aparecem: como quero VER (modo), o QUE quero
     (tipo), o MEU (salvos), e a busca para o que não cabe em botão.
     Ela é sticky e encolhe com o letreiro ao rolar — ver .deck.compacta. */
  .deck {
    position: sticky;
    top: 0;
    z-index: 30;
    /* FULL-BLEED: o fundo e a linha divisória atravessam a JANELA inteira, e
       quem segura o alinhamento é o wrapper interno (.barra),
       cada um com o max-width do layout. Sem anular o max-width que a regra
       base do .deck traz, a linha do estado compacto parava nos 1400px e não
       chegava às bordas da tela. */
    max-width: none;
    padding: 14px 0 0;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    /* A barra é FAIXA nos dois estados: fundo e linha moram aqui, no elemento
       full-bleed, e não no .barra. A barra já foi uma CAIXA no topo (fundo,
       borda e cantos) e isso não fechava: uma moldura com espaço interno não
       alinha por fora e por dentro ao mesmo tempo. Ou a borda caía na coluna,
       ou as views e a busca caíam — nunca os dois. A caixa era, além disso, a
       única coisa da tela mais larga que o resto do site, e sem par nenhum
       embaixo dela: ali cada coluna começa direto na sua própria caixa, sem
       moldura envolvendo as três. Medido em 09/08/26: ela sobrava 11px de cada
       lado. Sem a caixa, o alinhamento sai de graça — e os dois estados passam
       a ter um desenho só, em vez de um deles ser exceção. */
    border-bottom: 1px solid rgba(255, 138, 76, 0.16);
    box-shadow: 0 10px 24px -18px #000;
    background: rgba(16, 9, 19, 0.82);
  }
  /* A barra é o WRAPPER alinhado dentro do .deck full-bleed: ela não pinta
     nada, só põe o conteúdo nas colunas. Quem desenha a faixa é o .deck. */
  .barra {
    /* MESMO grid do .layout, com as mesmas três colunas: páginas sobre os
       filtros, tipos sobre a lista, busca sobre o detalhe. Era flex, e cada
       bloco parava onde o anterior terminasse — a barra desenhava uma divisão
       que não existia em mais lugar nenhum da tela. */
    display: grid;
    grid-template-columns: minmax(220px, 280px) minmax(0, 1fr) minmax(0, 300px);
    gap: clamp(16px, 3vw, 34px);
    align-items: center;
    /* As MESMAS medidas do .layout, à risca — é o que faz cada bloco nascer
       na coluna do que vem embaixo dele. Sem moldura no caminho, basta copiar:
       não há espaço interno para compensar. */
    box-sizing: border-box;
    max-width: 1400px;
    margin-inline: auto;
    padding: 8px clamp(16px, 4vw, 40px);
  }
  /* Terceira coluna: Salvos + busca dividem a mesma faixa do painel de detalhe.
     A busca cresce e o Salvos fica do tamanho que precisa. */
  .barra-dir {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
  }
  /* O separador existia para dividir "modo de ver" de "tipo" quando a barra era
     uma fileira só. Com as colunas do layout, o gap já faz isso — e um traço a
     mais ocuparia célula própria no grid. */
  .barra-sep {
    display: none;
  }
  /* O painel de detalhe ganha o mesmo respiro que a coluna de filtros tem por
     dentro (.controls, padding-top de 4px). Sem isso a caixa da direita
     começava 4px acima da primeira caixa da esquerda, e as duas colunas — que
     grudam no mesmo `top` — pareciam desalinhadas em relação à barra. */
  .sidebar-right > .detail {
    margin-top: 4px;
  }
  /* Rolar só APERTA a barra: o desenho é o mesmo, muda a altura. O que sobrou
     de diferença entre os dois estados cabe nesta linha e no padding do .deck
     — o resto (fundo, linha, alinhamento) é comum. */
  .deck.compacta > .barra {
    padding: 5px clamp(16px, 4vw, 40px);
  }
  .barra-marca {
    flex: none;
  }
  .deck .btn-salvos {
    display: inline-flex;
  }
  .barra-marca img {
    display: block;
    width: 28px;
    height: 28px;
    border-radius: 22%;
    border: 1px solid rgba(255, 209, 102, 0.35);
  }
  /* A marca só existe no compacto (a regra global a esconde). Flex, não block:
     a fileira é flex com align-items padrão (stretch), então este <a> estica
     para os 32px dos atalhos vizinhos — mas a imagem tem 28px e, sendo block,
     encostava no TOPO da caixa esticada, 2px acima do centro dos outros
     ícones. Centralizar aqui alinha sem mexer no tamanho da marca. */
  .deck.compacta .barra-marca {
    display: flex;
    align-items: center;
  }
  /* modo de ver: bloco próprio, mais escuro — é a única coisa aqui que troca
     de PÁGINA, e a caixa separa isso de tudo que só filtra a mesma lista */
  .deck .views {
    background: rgba(16, 9, 19, 0.5);
    border-color: rgba(255, 138, 76, 0.3);
  }
  /* Tamanho ÚNICO nos dois estados, e é o do compacto. Em 15px o bloco de
     páginas passava da coluna de filtros que fica embaixo dele; em 13px as
     duas larguras batem, e a barra deixa de brigar com o grid de três colunas.
     De quebra o bloco para de mudar de tamanho ao rolar — só os tipos e a
     busca encolhem, que é onde o compacto precisa mesmo ganhar espaço. */
  .deck .view-btn {
    font-size: 13px;
    padding: 6px 11px;
  }
  /* ---------- estado ROLADO ----------
     O letreiro só interessa na chegada. Quando ele sai de cena a barra encolhe
     e os tipos viram ícones de 32px: os controles seguem a um clique em
     qualquer ponto da lista, sem custar a faixa inteira de volta. */
  .deck.compacta {
    /* sem padding: o respiro vertical vem do padding do .barra, e o lateral,
       do wrapper. Fundo e linha já estão no .deck — aqui só se aperta. */
    padding: 0;
  }
  /* Na barra fina os tipos viram ícones e a fileira ganha o meio da tela: sem
     os rótulos ela encolhe muito, e encostada à esquerda ficava perdida no
     vazio. O separador some junto — ele existia para dividir "modo de ver" de
     "tipo", e com a fileira centralizada o próprio espaço já faz isso. */
  .deck.compacta .atalhos {
    justify-content: center;
  }
  .deck.compacta .barra-sep {
    display: none;
  }
  .deck.compacta .atalho {
    width: 32px;
    height: 32px;
    padding: 0;
    justify-content: center;
    border-radius: 10px;
  }
  /* só o ícone: o rótulo vive no title/aria-label */
  .deck.compacta .atalho .rotulo {
    display: none;
  }
  .deck.compacta .atalho .ico {
    width: 16px;
    height: 16px;
  }
  .deck.compacta .btn-salvos {
    width: 32px;
    height: 32px;
    padding: 0;
    justify-content: center;
    border-radius: 10px;
  }
  .deck.compacta .btn-salvos-txt {
    display: none;
  }
  /* a contagem vira selo no canto — é o que faz o ícone ainda dizer
     "você tem 3 marcados" sem texto */
  .deck.compacta .btn-salvos-n {
    position: absolute;
    top: -6px;
    right: -6px;
    font-size: 10.5px;
    padding: 1px 5px;
    background: var(--tangerine-1);
    color: #2a0f06;
  }
  .deck.compacta .search {
    font-size: 13px;
    padding: 8px 12px 8px 35px;
    border-radius: 10px;
  }

  /* Na primeira coluna as páginas começam à ESQUERDA, no mesmo x em que os
     cartões de filtro começam embaixo. Encostadas à direita (o padrão, de
     quando a barra era uma linha só) elas flutuavam no meio do caminho. */
  .deck .page-nav {
    justify-content: flex-start;
  }
  /* os tipos ocupam a coluna do meio e rolam na horizontal quando não cabem */
  .deck .atalhos {
    min-width: 0;
    margin: 0;
  }
  .deck .atalho {
    font-size: 12.5px;
    padding: 7px 12px;
  }
  .deck .atalho .ico {
    width: 13px;
    height: 13px;
  }
  /* a busca toma o que sobra da terceira coluna depois do Salvos */
  .deck .search-wrap {
    flex: 1 1 auto;
    min-width: 0;
  }
  .deck .search {
    font-size: 13.5px;
    padding: 10px 14px 10px 37px;
    border-radius: 11px;
  }
}

/* Menu do rodapé: abre PARA CIMA, a partir do botão "Menu" da barra de abas. */
.nav-pop {
  position: fixed;
  right: 10px;
  z-index: 41;
  min-width: 190px;
  bottom: calc(var(--tabbar-h) + 6px);
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 6px;
  background: var(--modal-bg);
  border: 1px solid var(--card-border);
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
}
.nav-pop button {
  border: 0;
  background: transparent;
  color: var(--cream);
  cursor: pointer;
  font-family: var(--f-display);
  letter-spacing: 0.03em;
  font-size: 15px;
  text-align: left;
  padding: 11px 14px;
  border-radius: 9px;
}
.nav-pop button {
  display: flex;
  align-items: center;
  gap: 8px;
}
.nav-pop button:hover,
.nav-pop button:focus-visible {
  background: rgba(255, 138, 76, 0.14);
}
.nav-pop button.is-active {
  color: var(--gold);
}
@media (max-width: 920px) {
  :root {
    --tabbar-h: calc(56px + env(safe-area-inset-bottom, 0px));
  }
  /* a barra é fixa: o conteúdo respira por fora dela */
  body {
    padding-bottom: var(--tabbar-h);
  }
}

/* Página "Perfis": diretório das casas/produtoras monitoradas */
.perfis-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}
.perfil-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 14px 10px;
  cursor: pointer;
  text-align: center;
  background: linear-gradient(160deg, var(--card-1), var(--card-2));
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  color: var(--cream);
  font-family: inherit;
  transition: 0.15s;
}
.perfil-card:hover,
.perfil-card:focus-visible {
  border-color: var(--tangerine-1);
  transform: translateY(-2px);
}
.perfil-card-av {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: 2px;
}
.perfil-card-nome {
  font-weight: 700;
  font-size: 13.5px;
  word-break: break-all;
}
.perfil-card-label {
  font-size: 11.5px;
  color: var(--blush);
}
.perfil-card-n {
  font-size: 11px;
  color: var(--footer-muted);
}

/* Mobile: a .deck-linha fica SÓ com a busca, inteira. As páginas moram no
   barra de abas do rodapé — antes existiam nos dois lugares, e para caber ao
   lado da nav a busca virava lupa com um estado de abre/fecha que só existia
   por falta de espaço. Uma navegação, um lugar; a busca deixa de ser um modo
   e volta a ser um campo, sempre no topo da página. */
@media (max-width: 920px) {
  .page-nav {
    display: none;
  }
  /* fonte: ver o bloco anti-zoom no fim do arquivo (o iOS amplia abaixo de 16px) */
  .search {
    padding: 9px 34px 9px 36px;
  }
}

/* Seções de conteúdo — o SEGUNDO nível de navegação (o primeiro é .page-nav,
   que escolhe COMO olhar). Pills, como no handoff: agora que a nav divide a
   linha com a busca, esta fileira é só delas e não há mais competição. */
.atalhos {
  display: flex;
  gap: 8px;
  margin-top: 10px;
  /* `safe`: centraliza enquanto couber e volta a alinhar à esquerda quando
     estoura. Com `center` puro o excesso vaza para os DOIS lados e a rolagem
     não alcança o começo — no mobile as primeiras pills ficariam inacessíveis. */
  justify-content: safe center;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.atalhos::-webkit-scrollbar {
  display: none;
}
.atalho {
  flex: 0 0 auto;
  border: 1px solid rgba(255, 138, 76, 0.25);
  cursor: pointer;
  font-family: var(--f-display);
  letter-spacing: 0.04em;
  font-size: 13.5px;
  padding: 8px 16px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--cream);
  transition: 0.15s;
}
.atalho:hover {
  border-color: var(--tangerine-1);
}
.atalho .ico {
  width: 14px;
  height: 14px;
}
.atalho.is-active {
  color: var(--dark-text);
  background: var(--gold);
  border-color: var(--gold);
}
/* Cards de VIBE: thumbnail ilustrado de fundo (gerado no estilo do site) com
   rótulo por cima. Vibe sem arte mapeada cai no chip comum com emoji. */
.tag-card {
  position: relative;
  overflow: hidden;
  cursor: pointer;
  min-width: 116px;
  height: 52px;
  flex: 1 1 40%;
  border: 1px solid var(--card-border);
  border-radius: 12px;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: 0.15s;
}
/* A arte descansa sob um VÉU ROXO no tom do painel (não cinza: dessaturar
   tirava a arte "da casa") — o card lê como parte do fundo e o rótulo branco
   salta; a cor plena é a recompensa do hover/foco/ativo. O véu é cor por cima
   (funciona em qualquer navegador) + um leve backdrop-filter de apoio. */
.tag-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(28, 20, 38, 0.68); /* --card-1 com alpha */
  backdrop-filter: saturate(0.75) brightness(0.9);
  -webkit-backdrop-filter: saturate(0.75) brightness(0.9);
  transition:
    backdrop-filter 0.25s,
    -webkit-backdrop-filter 0.25s,
    background 0.25s;
}
.tag-card:hover::before,
.tag-card:focus-visible::before,
.tag-card.is-active::before {
  background: rgba(28, 20, 38, 0.1);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.tag-card:hover,
.tag-card:focus-visible {
  border-color: var(--tangerine-1);
  transform: translateY(-1px);
}
.tag-card.is-active {
  border-color: var(--gold);
  box-shadow: 0 0 0 2px var(--gold);
}
.tag-card-label {
  position: relative;
  z-index: 1;
  color: var(--cream);
  font-weight: 700;
  font-size: 12.5px;
  padding: 4px 10px;
  text-transform: capitalize;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  text-shadow: 0 1px 6px rgba(16, 9, 19, 0.9);
}
/* ---------- Página de perfil (/perfil/<handle>): cabeçalho ---------- */
.filtro-ativo {
  border: 1px solid var(--card-border-h);
  border-radius: var(--radius);
  background: linear-gradient(150deg, rgba(255, 138, 76, 0.1), var(--card-1));
  padding: 16px 18px;
  margin-bottom: 14px;
  position: relative;
}
/* Quando o recorte é uma VIBE, a arte dela vira o fundo do card — ela já existe
   para o chip do painel, e aqui tem espaço para ser vista. O véu escuro por
   cima é o que mantém o texto legível sobre qualquer arte: sem ele, o nome
   sumia nas artes claras. */
.filtro-ativo.com-arte {
  background-size: cover;
  background-position: center;
  overflow: hidden;
  /* cria o contexto de empilhamento para o véu poder ir PARA TRÁS do conteúdo
     sem sair de cima do fundo — ver o ::before abaixo */
  isolation: isolate;
}
/* O MESMO tratamento dos cards de vibe do painel (ver .tag-card::before): véu
   roxo no tom da casa, não cinza — dessaturar tirava a arte "da casa" —, mais
   um backdrop-filter que baixa saturação e brilho. Os dois cards mostram a
   mesma arte e agora leem como a mesma família.

   O empilhamento custou duas tentativas erradas, então fica registrado: o véu
   precisa ficar ACIMA do fundo do card e ABAIXO de todo o conteúdo.
   - `z-index: -1` sozinho não funciona: `.filtro-ativo` é `position: relative`
     sem z-index e não cria contexto, então o véu ia para trás do próprio fundo
     e não pintava nada;
   - subir o conteúdo com `> * { position: relative }` funciona para o texto e
     ATROPELA o `absolute` do × de fechar, que ia parar no canto de baixo.
   Com `isolation: isolate` no pai (acima), o -1 se resolve dentro do card e
   nenhum filho precisa ser tocado. */
.filtro-ativo.com-arte::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(28, 20, 38, 0.68);
  backdrop-filter: saturate(0.6) brightness(0.7);
  -webkit-backdrop-filter: saturate(0.6) brightness(0.7);
}
/* A sombra é a segunda linha de defesa: o véu resolve o contraste médio, ela
   resolve o texto caindo em cima de um detalhe claro da arte. */
.filtro-ativo.com-arte .ph-nome,
.filtro-ativo.com-arte .ph-meta {
  text-shadow: 0 1px 6px rgba(16, 9, 19, 0.95);
}
/* --tag-muted era o texto mais fraco do card (4.5 de contraste no pior caso, no
   limite do aceitável — e sobre arte, abaixo dele). Creme rebaixado mantém a
   hierarquia sem perder a leitura. */
.filtro-ativo.com-arte .ph-meta {
  color: var(--cream);
  opacity: 0.82;
}
/* o card inteiro é o link para o perfil no Instagram */
.ph-link {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-right: 36px;
  border-radius: 10px;
  transition: 0.15s;
}
.ph-link:hover {
  background: rgba(255, 138, 76, 0.07);
}
.ph-link:hover .ph-go {
  color: var(--gold);
}
.ph-av {
  border-radius: 50%;
  flex: none;
  background: var(--card-2);
}
.ph-regiao-ico {
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(47, 163, 154, 0.18);
  color: var(--teal-light);
}
.ph-regiao-ico .ico {
  width: 22px;
  height: 22px;
}
/* Segunda fileira da barra: os filtros ativos. Fundo tangerina a 5% para se
   separar da primeira sem virar outra barra, e só existe quando há filtro. */
:root {
  --barra-h: 0px;
}
@media (min-width: 921px) {
}

/* A marca da barra e o botão Salvos existem só no DESKTOP — a barra de comando
   é de lá. No mobile o topo é o letreiro + a fileira de tipos, e Salvos mora no
   menu (☰ → Salvos), onde o dedo alcança. Escondidos AQUI, fora do media query:
   dentro dele, o padrão do mobile virava "visível" e os dois apareciam soltos
   entre os tipos e a busca. */
.barra-marca,
.btn-salvos {
  display: none;
}

/* Salvos na barra: cantos de 11px em vez de pill, e fora da fileira de tipos.
   Não é um tipo de rolê nem um recorte de data — é a sua estante, e a forma diz
   isso antes do rótulo. */
.btn-salvos {
  flex: none;
  /* sem `display` aqui: quem decide é o par de regras acima (escondido no
     mobile) e a do @media do desktop, que o traz de volta como inline-flex */
  align-items: center;
  gap: 7px;
  position: relative;
  border: 1px solid rgba(255, 138, 76, 0.3);
  border-radius: 11px;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.05);
  color: var(--cream);
  font-family: var(--f-display);
  letter-spacing: 0.03em;
  font-size: 13px;
  padding: 8px 13px;
  transition: 0.15s;
}
.btn-salvos:hover {
  border-color: var(--tangerine-1);
}
.btn-salvos.is-active {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--dark-text);
}
.btn-salvos .ico {
  width: 15px;
  height: 15px;
}
.btn-salvos-n {
  font-style: normal;
  font-size: 11px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 999px;
  background: rgba(255, 138, 76, 0.22);
  color: var(--tangerine-1);
}
.btn-salvos.is-active .btn-salvos-n {
  background: rgba(0, 0, 0, 0.18);
  color: var(--dark-text);
}

/* Separador entre as duas naturezas de atalho: LENTES (salvos, fim de semana —
   recortes que atravessam qualquer tipo) e SEÇÕES (o tipo do rolê). Elas se
   combinam, e o traço evita que a fileira pareça uma lista só de opções
   mutuamente exclusivas. */
.atalhos-sep {
  flex: 0 0 auto;
  align-self: center;
  width: 1px;
  height: 20px;
  background: rgba(255, 138, 76, 0.3);
  margin: 0 2px;
}
/* contagem no atalho Salvos */
.atalho-n {
  font-style: normal;
  font-size: 11.5px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 999px;
  margin-left: 2px;
  background: rgba(255, 138, 76, 0.22);
  color: var(--tangerine-1);
}
.atalho.is-active .atalho-n {
  background: rgba(0, 0, 0, 0.18);
  color: var(--dark-text);
}
/* Cabeçalho do bloco de salvos que já passaram (fica DEPOIS dos próximos). */
.salvos-divisor {
  font-family: var(--f-display);
  font-size: 15px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--blush);
  margin: 26px 0 10px;
  padding-top: 16px;
  border-top: 1px dashed var(--card-border);
}
.salvos-rodape {
  margin: 18px 0 8px;
  padding: 14px 16px;
  border-radius: var(--radius);
  border: 1px dashed var(--card-border);
  text-align: center;
}
.salvos-rodape p {
  margin: 0 0 9px;
}
.ph-corpo {
  min-width: 0;
  flex: 1 1 auto;
}
.ph-nome {
  font-family: var(--f-title);
  font-weight: 600;
  font-size: 20px;
  letter-spacing: 0.02em;
}
.ph-label {
  font-family: var(--f-body);
  font-weight: 400;
  font-size: 13px;
  color: var(--blush);
  margin-left: 6px;
}
.ph-meta {
  margin-top: 4px;
  font-size: 12px;
  color: var(--tag-muted);
}
.ph-go {
  flex: none;
  font-size: 12px;
  font-weight: 600;
  color: var(--tangerine-1);
  white-space: nowrap;
}
@media (max-width: 560px) {
  .ph-go {
    display: none;
  }
}
/* bio: recolhida, rotulada como cópia — o dado corrente está na fonte */
.ph-bio {
  margin-top: 10px;
}
.ph-bio > summary {
  cursor: pointer;
  font-size: 12px;
  color: var(--blush);
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.ph-bio > summary::-webkit-details-marker {
  display: none;
}
.ph-bio > summary::before {
  content: "▸";
  font-size: 10px;
  transition: transform 0.15s;
}
.ph-bio[open] > summary::before {
  transform: rotate(90deg);
}
.ph-bio > summary:hover {
  color: var(--cream);
}
.ph-bio p {
  margin: 7px 0 0;
  font-size: 13px;
  color: var(--cream);
  opacity: 0.85;
  white-space: pre-line;
}
.ph-bio-nota {
  display: block;
  margin-top: 5px;
  font-size: 11px;
  color: var(--footer-muted);
}
.ph-close {
  position: absolute;
  top: 8px;
  right: 10px;
  border: 0;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.06);
  color: var(--blush);
  width: 28px;
  height: 28px;
  border-radius: 9px;
  font-size: 15px;
  transition: 0.15s;
}
.ph-close:hover {
  color: var(--cream);
  background: rgba(255, 138, 76, 0.18);
}
/* sobre a arte, o fundo quase transparente do × sumia junto com ele */
.filtro-ativo.com-arte .ph-close {
  background: rgba(16, 9, 19, 0.7);
  color: var(--cream);
}

.footer-sobre {
  margin-top: 10px;
}
.footer-sobre a {
  color: var(--tangerine-1);
  font-weight: 600;
  font-size: 13px;
  border-bottom: 1px dashed rgba(255, 138, 76, 0.5);
}
.footer-sobre a:hover {
  border-bottom-style: solid;
}

/* ---------- Sugerir local (visitante) ---------- */
.sg-mapa {
  position: relative;
  z-index: 0; /* contém os z-index do Leaflet */
  height: 260px;
  margin: 10px 0 8px;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--card-border);
  background: var(--card-1);
  cursor: crosshair;
}
.sg-mapa .leaflet-tile-pane {
  filter: invert(1) hue-rotate(192deg) contrast(0.72) brightness(1.18)
    saturate(0.38);
}
.sg-mapa .leaflet-container {
  background: var(--card-1);
  font-family: var(--f-body);
}
.sg-linha {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.ve-pin-visitante {
  width: 24px;
  height: 24px;
  border-radius: 50% 50% 50% 4px;
  transform: rotate(-45deg);
  background: linear-gradient(135deg, var(--gold), var(--tangerine-1));
  border: 2px solid rgba(16, 9, 19, 0.55);
  box-shadow: 0 6px 14px -4px rgba(0, 0, 0, 0.8);
}

/* Puxar para atualizar (só no app instalado — ver ativarPuxarParaAtualizar) */
.ptr {
  position: fixed;
  top: -44px;
  left: 0;
  right: 0;
  height: 44px;
  z-index: 70;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--card-1);
  border-bottom: 1px solid var(--card-border);
  color: var(--blush);
  font-size: 12.5px;
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 0.2s,
    transform 0.26s;
}
.ptr.is-on {
  opacity: 1;
}

/* ---------- Página "Por perto" ---------- */
.perto-aviso {
  margin: 0 0 12px;
  padding: 9px 13px;
  border-radius: 10px;
  border: 1px solid rgba(47, 163, 154, 0.45);
  background: rgba(47, 163, 154, 0.1);
  color: var(--teal-chip-txt);
  font-size: 12.5px;
  line-height: 1.45;
}

/* "você está aqui" no mapa — ponto teal pulsante, distinto dos pins dourados */
.mapa-eu {
  display: block;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--teal-light);
  border: 3px solid rgba(16, 9, 19, 0.85);
  box-shadow: 0 0 0 4px rgba(95, 208, 198, 0.35);
}

/* ---------- Mapa (/mapa) ---------- */
.mapa-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.mapa-nota {
  margin: 0;
  font-size: 13px;
  color: var(--blush);
}
.mapa-eu-btn {
  flex: none;
  border: 1px solid var(--teal);
  border-radius: 999px;
  cursor: pointer;
  background: rgba(47, 163, 154, 0.14);
  color: var(--teal-light);
  padding: 6px 13px;
  font-family: var(--f-body);
  font-size: 12.5px;
  font-weight: 600;
}
.mapa-eu-btn:hover {
  background: var(--teal);
  color: #062521;
}
.mp-rota {
  display: inline-block;
  margin-top: 6px;
  color: var(--tangerine-1);
  font-size: 12px;
  font-weight: 700;
}
.mapa-canvas {
  /* dividindo a página com a lista de eventos, o mapa não pode comer a tela
     inteira: com 70vh não sobrava nada para os eventos logo abaixo */
  height: min(52vh, 520px);
  border-radius: var(--radius);
  border: 1px solid var(--card-border);
  overflow: hidden;
  background: var(--card-1);
  /* CONTEXTO DE EMPILHAMENTO: o Leaflet usa z-index 400-800 nos panes dele.
     Sem isto esses valores competem no contexto raiz e o mapa passava POR CIMA
     do painel de detalhe no mobile (z-index 60) — clicar num evento do popup
     abria o painel atrás do mapa. */
  position: relative;
  z-index: 0;
}
/* Tiles do OSM são claros e gritam no tema plum. O filtro inverte e recompõe o
   matiz: vira um mapa escuro sem depender de um segundo provedor (nem de chave
   de API), mantendo a atribuição do OpenStreetMap. */
.mapa-canvas .leaflet-tile-pane {
  filter: invert(1) hue-rotate(192deg) contrast(0.72) brightness(1.18)
    saturate(0.38);
}
.mapa-canvas .leaflet-container {
  background: var(--card-1);
  font-family: var(--f-body);
}
.mapa-canvas .leaflet-control-attribution {
  background: rgba(16, 9, 19, 0.82);
  color: var(--footer-muted);
  font-size: 10.5px;
}
.mapa-canvas .leaflet-control-attribution a {
  color: var(--tangerine-1);
}
.mapa-canvas .leaflet-control-zoom a {
  background: rgba(16, 9, 19, 0.92);
  color: var(--cream);
  border-color: var(--card-border);
}
.mapa-canvas .leaflet-control-zoom a:hover {
  background: var(--card-2);
  color: var(--gold);
}
/* Pin: o mesmo teal dos controles flutuantes (mar), com a contagem quando o
   local tem mais de um evento. */
.mapa-pin {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50% 50% 50% 4px;
  transform: rotate(-45deg);
  background: linear-gradient(135deg, var(--gold), var(--tangerine-1));
  color: var(--stub-text);
  font-weight: 700;
  font-size: 12px;
  font-family: var(--f-body);
  box-shadow: 0 6px 14px -4px rgba(0, 0, 0, 0.8);
  border: 2px solid rgba(16, 9, 19, 0.55);
}
.mapa-pin-wrap:hover .mapa-pin,
.leaflet-marker-icon:focus .mapa-pin {
  background: linear-gradient(135deg, var(--teal-light), var(--teal));
}
.mapa-pin > * {
  transform: rotate(45deg);
}
.mapa-popup .leaflet-popup-content-wrapper {
  background: var(--modal-bg);
  color: var(--cream);
  border: 1px solid var(--marquee-line);
  border-radius: 12px;
}
.mapa-popup .leaflet-popup-tip {
  background: var(--modal-bg);
  border: 1px solid var(--marquee-line);
}
.mapa-popup .leaflet-popup-content {
  margin: 12px 14px;
  font-size: 13px;
}
.mapa-popup .leaflet-popup-close-button {
  color: var(--blush);
}
.mp-venue {
  font-family: var(--f-title);
  font-weight: 600;
  font-size: 17px;
  letter-spacing: 0.03em;
}
.mp-bairro {
  display: block;
  color: var(--tag-muted);
  font-size: 11.5px;
  margin-top: 1px;
}
.mp-lista {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 9px;
}
.mp-lista a {
  display: block;
  color: var(--cream);
  line-height: 1.3;
}
.mp-lista a:hover {
  color: var(--gold);
}
.mp-quando {
  color: var(--gold);
  font-variant-numeric: tabular-nums;
  font-size: 11.5px;
}
.mp-mais {
  display: block;
  margin-top: 7px;
  color: var(--footer-muted);
  font-size: 11.5px;
}

/* ---------- Página /sobre ---------- */
.sobre-view {
  max-width: 640px;
}
.sobre-view h2 {
  font-family: var(--f-title);
  font-weight: 600;
  letter-spacing: 0.02em;
  font-size: 26px;
  margin: 4px 0 12px;
}
.sobre-view p {
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--cream);
  opacity: 0.92;
}
.sobre-sugerir {
  border: 1px solid var(--card-border-h);
  border-radius: var(--radius);
  background: rgba(255, 138, 76, 0.07);
  padding: 16px 18px;
  margin: 18px 0;
}
.sobre-nota {
  font-size: 12.5px !important;
  color: var(--tag-muted);
  opacity: 0.8;
}
/* A premissa (docs/PREMISSA.md): as dores em lista, a resposta em destaque. */
.sobre-dores {
  margin: 0 0 14px;
  padding-left: 20px;
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--cream);
  opacity: 0.92;
}
.sobre-dores li {
  margin-bottom: 6px;
}
.sobre-dores strong {
  color: var(--gold);
}
.sobre-resposta {
  font-family: var(--f-title);
  font-size: 18px !important;
  letter-spacing: 0.03em;
  color: var(--gold);
  opacity: 1 !important;
}
.sobre-contato a {
  color: var(--gold);
}

/* vibe ou estilo musical SEM arte mapeada: arte GENÉRICA da casa (sunburst +
   sparkles, centro vazio para o rótulo) — nasce consistente com os irmãos e
   ganha arte própria depois (é só adicionar em VIBE_ARTE / MUSIC_ARTE). O
   gradiente segura enquanto carrega. */
.tag-sem-arte {
  background-image:
    url(/assets/vibes/generica.webp),
    linear-gradient(150deg, var(--card-2), var(--card-1));
}
.tag-card-n {
  position: absolute;
  z-index: 1;
  top: 5px;
  right: 7px;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--cream);
  background: rgba(16, 9, 19, 0.65);
  border-radius: 999px;
  padding: 1px 7px;
}
.vibe-bg-balada {
  background-image: url(/assets/vibes/balada.webp);
}
.vibe-bg-festival {
  background-image: url(/assets/vibes/festival.webp);
}
.vibe-bg-beira-mar {
  background-image: url(/assets/vibes/beira-mar.webp);
}
.vibe-bg-ao-ar-livre {
  background-image: url(/assets/vibes/ao-ar-livre.webp);
}
.vibe-bg-pool {
  background-image: url(/assets/vibes/pool.webp);
}
.vibe-bg-sunset {
  background-image: url(/assets/vibes/sunset.webp);
}
.vibe-bg-open-bar {
  background-image: url(/assets/vibes/open-bar.webp);
}
.vibe-bg-nostalgia {
  background-image: url(/assets/vibes/nostalgia.webp);
}
.vibe-bg-show {
  background-image: url(/assets/vibes/show.webp);
}
.vibe-bg-karaoke {
  background-image: url(/assets/vibes/karaoke.webp);
}
.vibe-bg-samba {
  background-image: url(/assets/vibes/samba.webp);
}
.vibe-bg-gastronomia {
  background-image: url(/assets/vibes/gastronomia.webp);
}
.vibe-bg-boteco {
  background-image: url(/assets/vibes/boteco.webp);
}
.vibe-bg-acustico {
  background-image: url(/assets/vibes/acustico.webp);
}
.vibe-bg-halloween {
  background-image: url(/assets/vibes/halloween.webp);
}
.vibe-bg-stand-up {
  background-image: url(/assets/vibes/stand-up.webp);
}
.vibe-bg-cinema {
  background-image: url(/assets/vibes/cinema.webp);
}
.vibe-bg-universitaria {
  background-image: url(/assets/vibes/universitaria.webp);
}
.vibe-bg-corporativa {
  background-image: url(/assets/vibes/corporativa.webp);
}

/* Artes de ESTILO MUSICAL (09/08/26). Pasta própria porque o eixo é outro, e
   o que a arte mostra também: vibe é CENA (como é o rolê), estilo musical é
   INSTRUMENTO (o que toca). Sem essa regra as duas fileiras do painel de
   filtros virariam a mesma parede de cenas de festa.
   Cada arte cobre uma FAMÍLIA, não um gênero — ver MUSIC_ARTE em app.js. */
.music-bg-eletronica {
  background-image: url(/assets/musica/eletronica.webp);
}
.music-bg-rock {
  background-image: url(/assets/musica/rock.webp);
}
.music-bg-pop {
  background-image: url(/assets/musica/pop.webp);
}
.music-bg-mpb {
  background-image: url(/assets/musica/mpb.webp);
}
/* Sem arquivo próprio: estas duas artes de VIBE já mostram exatamente o que o
   estilo musical pediria — samba é o trio de instrumentos (pandeiro, violão,
   surdo) e nostalgia é fita cassete, vitrola e vinil. Apontar para elas evita
   um segundo arquivo idêntico; em troca, quem mexer naquela imagem mexe nos
   dois eixos de uma vez. */
.music-bg-samba {
  background-image: url(/assets/vibes/samba.webp);
}
.music-bg-nostalgia {
  background-image: url(/assets/vibes/nostalgia.webp);
}
.music-bg-sertanejo {
  background-image: url(/assets/musica/sertanejo.webp);
}
.music-bg-funk {
  background-image: url(/assets/musica/funk.webp);
}
.music-bg-rap {
  background-image: url(/assets/musica/rap.webp);
}
.music-bg-forro {
  background-image: url(/assets/musica/forro.webp);
}
.music-bg-jazz {
  background-image: url(/assets/musica/jazz.webp);
}

/* "+ N estilos": expande a cauda dos estilos musicais */
.chip-more {
  color: var(--teal-light);
  border-style: dashed;
}

/* o selo @perfil é clicável (filtra pelo perfil) — herda o visual do span */
button.tag-source.ig {
  border: 0;
  cursor: pointer;
  font-family: inherit;
}
button.tag-source.ig:hover {
  filter: brightness(1.12);
}

/* Vibe em destaque: é o filtro com mais personalidade do site */
.fgroup[data-group="vibe"] summary {
  color: var(--gold);
}

/* ---------- Controles (sidebar esquerda) ---------- */
.controls {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
  padding: 4px 0 12px;
}
.filter-group {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

.views {
  display: flex;
  gap: 6px;
  flex: 0 0 auto;
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 138, 76, 0.22);
  border-radius: 12px;
  padding: 4px;
}
.views .view-btn {
  flex: 0 0 auto;
}
.view-btn {
  border: 0;
  cursor: pointer;
  font-family: var(--f-display);
  letter-spacing: 0.03em;
  font-size: 14px;
  padding: 9px 16px;
  border-radius: 9px;
  background: transparent;
  color: var(--cream);
  transition: 0.15s;
}
.view-btn.is-active {
  background: var(--gold);
  color: var(--dark-text);
}

/* Chips rápidos de data */
.chip {
  border: 1px solid rgba(255, 138, 76, 0.22);
  background: rgba(255, 255, 255, 0.05);
  color: var(--cream);
  padding: 7px 13px;
  border-radius: 999px;
  cursor: pointer;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 500;
  transition: 0.15s;
}
.chip:hover {
  border-color: var(--tangerine-1);
}

/* Chips de categoria/tag */
.chip {
  text-transform: capitalize;
}
.chip.is-active {
  color: var(--dark-text);
  background: var(--gold);
  border-color: var(--gold);
  font-weight: 700;
}
.chip.tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.chip.tag.is-active {
  color: var(--dark-text);
  background: var(--gold);
  border-color: var(--gold);
}
.chip-count {
  font-size: 11px;
  font-weight: 700;
  opacity: 0.6;
}
.chip.tag.is-active .chip-count {
  opacity: 0.85;
}

/* Grupos colapsáveis de filtro */
.fgroup {
  border: 1px solid var(--card-border);
  border-radius: 12px;
  background: linear-gradient(90deg, var(--card-1), var(--card-2));
  margin-bottom: 8px;
}
.fgroup > summary {
  cursor: pointer;
  padding: 9px 12px;
  list-style: none;
  user-select: none;
  font-family: var(--f-display);
  font-size: 12.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--blush);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.fgroup > summary::-webkit-details-marker {
  display: none;
}
.fgroup > summary::after {
  content: "▸";
  opacity: 0.55;
  transition: transform 0.15s;
}
.fgroup[open] > summary::after {
  transform: rotate(90deg);
}
.fgroup > summary:hover {
  color: var(--cream);
}
.fgroup-body {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 2px 10px 11px;
}

/* ---------- Região: a lista com o mapa ao lado ----------
   Todas as outras dimensões do painel são fileiras de chips — a ordem delas é
   contagem, e contagem não tem lugar no espaço. Região tem: o evento acontece
   em algum lugar de uma cidade que é uma ilha com um pedaço no continente.
   A lista continua LISTA (o alvo do clique é um botão empilhado como os
   outros); quem carrega a geografia é a faixa de mapa ao lado, com um ponto
   por região. Desenho do turno 5b do Claude Design. */
.mapa-regioes {
  /* o .fgroup-body é flex: sem isto o conjunto encolhe até o conteúdo e a
     faixa do mapa fica espremida */
  flex: 1 1 100%;
  display: flex;
  gap: 8px;
  align-items: stretch;
}
.mapa-mini {
  position: relative;
  width: 112px;
  flex: none;
  border-radius: 10px;
  overflow: hidden;
  background: radial-gradient(130% 80% at 20% 10%, #17304a, #0a1220 74%);
  border: 1px solid rgba(255, 138, 76, 0.12);
}
.mapa-mini-svg {
  display: block;
  width: 100%;
  height: 100%;
}
/* As cinco camadas do desenho, de baixo para cima: continente, ilhota, baías,
   ilha, lagoas. A ilha é a única com contorno claro — é ela que a lista está
   descrevendo, e o resto é entorno. */
.si-continente {
  fill: #2a2036;
  stroke: rgba(255, 138, 76, 0.45);
  stroke-width: 2.4;
}
.si-ilhota {
  fill: #2f2440;
  stroke: rgba(255, 138, 76, 0.4);
  stroke-width: 1.4;
}
.si-ilha {
  fill: #432a50;
  stroke: #ffb07c;
  stroke-width: 3;
}
.si-lagoa {
  fill: #12253b;
  stroke: rgba(255, 176, 124, 0.45);
  stroke-width: 1.4;
}
/* O ponto liga a linha da lista ao lugar no mapa: a linha não sai do lugar, e
   mesmo assim se sabe onde fica. Filtra também — quem está olhando o mapa não
   deveria ter que procurar a linha correspondente para clicar.
   É `aria-hidden` de propósito: a MESMA ação já existe no botão ao lado, com
   nome e foco de teclado. Repetir as seis regiões na navegação por teclado (e
   no leitor de tela) só para dar um atalho de mouse pagaria caro por pouco. */
.reg-ponto {
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: rgba(255, 138, 76, 0.55);
  transition: 0.18s;
  cursor: pointer;
}
/* O alvo do dedo é bem maior que a bolinha: 7px seria impossível de acertar no
   celular. O pseudo-elemento estende a área sem mexer no desenho. */
.reg-ponto::after {
  content: "";
  position: absolute;
  inset: -10px;
  border-radius: 50%;
}
.reg-ponto:hover {
  background: var(--tangerine-1, #ff8a4c);
}
.reg-ponto.is-active {
  width: 11px;
  height: 11px;
  background: var(--gold, #ffd166);
  box-shadow: 0 0 0 16px rgba(255, 209, 102, 0.2);
}
.rp-norte {
  left: 67%;
  top: 20%;
}
.rp-central {
  left: 46%;
  top: 46%;
}
.rp-leste {
  left: 65%;
  top: 50%;
}
.rp-sul {
  left: 50%;
  top: 65%;
}
.rp-continente {
  left: 22%;
  top: 47%;
}
/* "Outras cidades" é um TRAÇO na borda, não um ponto: Palhoça, Garopaba e
   Bombinhas estão fora do recorte do mapa, e dar a elas uma coordenada dentro
   dele seria mentir sobre a geografia. */
.rp-outras {
  left: 4px;
  top: 50%;
  width: 5px;
  height: 16px;
  border-radius: 3px;
  transform: translateY(-50%);
  background: rgba(255, 138, 76, 0.5);
}
.rp-outras.is-active {
  width: 5px;
  height: 26px;
  border-radius: 3px;
  box-shadow: 0 0 12px 3px rgba(255, 209, 102, 0.35);
}
/* o traço é fino: a área de clique dele cresce mais para os lados */
.rp-outras::after {
  inset: -10px -12px;
  border-radius: 6px;
}
.regioes-lista {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
  min-width: 0;
}
.reg-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 9px;
  border-radius: 10px;
  cursor: pointer;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  background: rgba(16, 9, 19, 0.55);
  border: 1px solid rgba(255, 138, 76, 0.22);
  color: var(--cream);
  transition: 0.18s;
}
.reg-item:hover {
  border-color: var(--tangerine-1);
}
.reg-item.is-active {
  background: linear-gradient(
    90deg,
    rgba(255, 138, 76, 0.9),
    rgba(255, 90, 60, 0.55)
  );
  border-color: var(--gold);
  color: var(--dark-text);
}
.reg-item-nome {
  overflow: hidden;
  text-overflow: ellipsis;
}
.reg-item-n {
  margin-left: auto;
  opacity: 0.6;
  font-weight: 500;
}

/* ---------- Agenda ---------- */
.app.content {
  padding: 8px 0 40px;
  min-width: 0;
}
.day-group {
  margin-bottom: 26px;
  animation: rise 0.5s cubic-bezier(0.2, 0.7, 0.3, 1) both;
}
/* virou <button> (leva para /dia/…): remove a aparência nativa.
   SEM `background` aqui: `button.day-head` tem especificidade maior que
   `.day-head` e zerava o gradiente do sticky abaixo — os cards subiam POR CIMA
   do texto da data em vez de sumirem atrás dele. */
button.day-head {
  width: 100%;
  border: 0;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.day-head {
  display: flex;
  align-items: center;
  gap: 12px;
  /* No desktop a data gruda ABAIXO da barra de comando, que também é sticky —
     em top:0 ela passava por baixo e sumia. --barra-h é escrito pelo JS que
     monta os filtros ativos, porque a barra ganha uma segunda fileira (e ~35px)
     quando há filtro. No mobile a variável é 0 e nada muda. */
  position: sticky;
  top: var(--barra-h, 0px);
  z-index: 10;
  padding: 8px 0;
  margin-bottom: 10px;
  /* opaco até quase o fim: o dígito de 44px desce até a base da caixa, e com o
     corte em 62% o card de trás aparecia atrás do número. O resto é só o fade
     que evita a borda dura. */
  background: linear-gradient(var(--bg) 84%, transparent);
}
.day-num {
  font-family: var(--f-display);
  font-size: 44px;
  line-height: 0.8;
  color: var(--cream);
}
.day-dow {
  font-family: var(--f-display);
  font-size: 16px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--blush);
}
.day-head.is-today .day-num {
  color: var(--gold);
}
.day-head.is-today .day-dow::after {
  content: " · hoje";
  color: var(--gold);
}
/* Madrugada (antes das 6h): a seção é a NOITE CORRENTE — os eventos que
   começaram ontem à noite e ainda estão rolando. Chamava-se "ontem", que
   contradizia a faixa "também acontecendo hoje" logo abaixo, às 1h da manhã,
   no horário nobre de quem usa o site. O comportamento (mostrar essa noite,
   e não só o dia seguinte) fica: só o rótulo muda. */
.day-head.is-yesterday .day-dow::after {
  content: " · esta noite";
  color: var(--gold);
}
/* divisor-onda em teal preenchendo a linha do dia */
.day-head::after {
  content: "";
  flex: 1;
  height: 9px;
  opacity: 0.8;
  background-image: radial-gradient(
    circle at 50% -2px,
    transparent 5px,
    var(--teal) 5px 6.6px,
    transparent 7px
  );
  background-size: 15px 9px;
  background-repeat: repeat-x;
}
/* contagem de eventos do dia — pill à direita (depois do divisor-onda) */
.day-count {
  order: 2;
  flex: 0 0 auto;
  font-family: var(--f-display);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  color: var(--stub-text);
  background: var(--gold);
  border-radius: 999px;
  padding: 1px 9px;
}
/* (o contador de HOJE já foi cream; destoava dos irmãos gold — o destaque de
   hoje fica no número/rótulo dourados do próprio day-head) */

/* Dia de hoje sem eventos: a seção existe mesmo assim (ver render). */
.day-empty {
  margin: 4px 0 8px;
  padding: 14px 18px;
  border-radius: var(--radius);
  border: 1px dashed var(--card-border);
  color: var(--footer-muted);
  font-size: 14px;
}

/* Card de evento = ticket com stub tangerina à esquerda */
.event {
  position: relative;
  display: block;
  margin-bottom: 11px;
  padding: 15px 18px 15px 74px;
  background: linear-gradient(90deg, var(--card-1), var(--card-2));
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  overflow: hidden;
  color: inherit;
  transition: 0.18s;
}
.event:hover {
  border-color: var(--card-border-h);
  transform: translateY(-2px);
  box-shadow: 0 14px 30px -14px rgba(255, 90, 60, 0.55);
}
.event.is-active {
  border-color: var(--card-border-h);
  box-shadow:
    0 0 0 1px var(--card-border-h),
    0 14px 30px -14px rgba(255, 90, 60, 0.55);
}
.event-time {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 60px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: linear-gradient(160deg, var(--tangerine-1), var(--tangerine-2));
  color: var(--stub-text);
  font-family: var(--f-display);
  font-size: 15px;
  letter-spacing: 0.02em;
  line-height: 1;
  text-align: center;
  border-right: 2px dashed rgba(42, 15, 6, 0.4);
}
.event-time.time-tbd {
  font-size: 12.5px;
}
.event-time small {
  display: block;
  font-weight: 400;
  font-size: 10px;
}
.event-body h3 {
  margin: 0;
  padding-right: 78px; /* limpa as caixas da estrela + kebab */
  font-family: var(--f-title);
  font-weight: 600;
  font-size: 22px;
  letter-spacing: 0.05em;
  line-height: 1.14;
  text-transform: uppercase;
  color: var(--cream);
}
/* O título é um <button>: é ele que carrega a ação principal do card para o
   teclado (o card deixou de ser <a> — ver eventCard). Some como botão e herda
   tudo do h3; a área de clique se estende ao card inteiro pelo ::after, então
   o alvo continua sendo o card todo, não só o texto. */
.event-open {
  all: unset;
  display: block;
  cursor: pointer;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
}
.event-open::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
}
/* O selo do perfil é um botão próprio (filtra pelo perfil) e precisa ficar
   ACIMA da área de clique do título. A estrela e o kebab já são absolute com
   z-index — não os reposicione aqui, quebra o canto do card. */
.event .tag-source {
  position: relative;
  z-index: 1;
}
.event-open:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 3px;
  border-radius: 4px;
}
.event-meta {
  margin-top: 5px;
  color: var(--blush);
  font-size: 13px;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
}
.dot {
  opacity: 0.5;
}
.event-desc {
  margin: 8px 0 0;
  color: #d8c3cf;
  font-size: 13px;
}

/* Rodapé do card: selo, perfil, tags */
.card-foot {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 11px;
  padding-right: 92px;
  font-size: 11px;
  color: var(--blush);
}
.card-foot .tag-source {
  margin-top: 0;
}
.card-tag {
  font-size: 11.5px;
  color: var(--tag-muted);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 138, 76, 0.18);
  padding: 2px 9px;
  border-radius: 999px;
  text-transform: capitalize;
  white-space: nowrap;
}
.tag-source {
  font-size: 11.5px;
  color: var(--tag-muted);
  display: inline-block;
}
.tag-source.ig {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 11px 3px 8px;
  border-radius: 999px;
  font-weight: 500;
  font-size: 11.5px;
  color: #fff;
  background: linear-gradient(
    70deg,
    #f09433,
    #e6683c 25%,
    #dc2743 50%,
    #cc2366 75%,
    #bc1888
  );
}
.tag-source.ig svg {
  flex: none;
}
/* avatar do perfil dentro da pílula do selo de fonte (no lugar do ícone) */
.tag-source.ig .tag-avatar {
  flex: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  object-fit: cover;
  margin: -1px 1px -1px -3px;
  border: 1px solid rgba(255, 255, 255, 0.7);
}

/* Selo de categoria: pílula dourada uniforme */
.badge {
  font-family: var(--f-body);
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
  color: var(--dark-text);
  background: var(--gold);
  padding: 3px 9px;
  border-radius: 6px;
}
.badge-corner {
  position: absolute;
  right: 14px;
  bottom: 13px;
}
/* todas as categorias usam o selo dourado (tema disco) */
.cat-show,
.cat-festa,
.cat-teatro,
.cat-cinema,
.cat-cultura,
.cat-feira,
.cat-danca,
.cat-esporte,
.cat-outro {
  color: var(--dark-text);
  background: var(--gold);
}

/* Estrela de favorito. Caixa IGUAL à do kebab (28×28, centro a 26px do topo =
   centro da 1ª linha do título) — antes cada ícone tinha caixa própria e os
   três elementos da linha ficavam cada um numa altura. */
.fav-btn {
  position: absolute;
  top: 12px;
  right: 40px;
  z-index: 1;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  font-size: 20px;
  line-height: 1;
  color: var(--blush);
  transition: 0.15s;
}
.fav-btn:hover {
  color: var(--gold);
  transform: scale(1.12);
}
.fav-btn.is-fav {
  color: var(--gold);
}

/* Faixa de eventos longos "também acontecendo hoje" */
.long-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 4px 0 12px;
}
.long-strip-label {
  font-family: var(--f-display);
  font-size: 12px;
  color: var(--blush);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-right: 2px;
}
.long-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--card-border);
  color: var(--cream);
  padding: 5px 11px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 600;
  transition: 0.15s;
  max-width: 100%;
  min-width: 0;
}
/* pílula de UMA linha: título de festival é longo e, sem truncar, a pílula
   virava um bloco de 200px de altura (visto com a "32ª Incanto Trentino").
   O title= no <a> mostra o nome completo no hover. */
.long-title-txt {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  min-width: 0;
}
.long-badge .long-until {
  flex: none;
  white-space: nowrap;
}
.long-badge .long-hora {
  flex: none;
  white-space: nowrap;
  font-weight: 700;
  color: var(--cream);
}
.long-badge:hover {
  border-color: var(--tangerine-1);
}
.long-until {
  color: var(--blush);
  font-weight: 500;
  font-size: 11.5px;
}

/* ---------- Calendário ---------- */
/* hoje ancorado: anel dourado; dias passados esmaecem para o olho achar o
   presente num mês que inclui histórico */
.cal-cell.today {
  box-shadow: inset 0 0 0 2px var(--gold);
}
/* Feriado: fundo levemente quente + selo com o nome. Discreto de propósito —
   ele informa o dia, não disputa com "hoje" (anel) nem com os eventos. */
.cal-cell.feriado {
  background-color: rgba(255, 138, 76, 0.07);
  border-color: rgba(255, 138, 76, 0.22);
}
.cal-feriado {
  display: block;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--tangerine-1);
  margin-bottom: 4px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
/* no cabeçalho do dia da agenda, junto de "quinta · agosto" */
.day-feriado {
  color: var(--tangerine-1);
  font-weight: 700;
}
.cal-cell.past {
  opacity: 0.45;
}
.cal-cell.past.has-events:hover,
.cal-cell.past.has-events:focus-visible {
  opacity: 0.9;
}

.cal-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-bottom: 18px;
}
.cal-nav button {
  width: 40px;
  height: 40px;
  border-radius: 11px;
  border: 1px solid rgba(255, 138, 76, 0.28);
  background: rgba(255, 255, 255, 0.05);
  color: var(--tangerine-1);
  cursor: pointer;
  font-size: 18px;
  transition: 0.15s;
}
.cal-nav button:hover {
  border-color: var(--tangerine-1);
  background: rgba(255, 138, 76, 0.12);
}
.cal-title {
  font-family: var(--f-display);
  font-size: 24px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--cream);
  min-width: 220px;
  text-align: center;
}
.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 8px;
}
.cal-dow {
  text-align: center;
  font-family: var(--f-display);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: #c98aa0;
  padding-bottom: 4px;
  text-transform: uppercase;
}
.cal-cell {
  min-height: 104px;
  border-radius: 12px;
  padding: 8px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  cursor: default;
}
.cal-cell.has-events {
  background: linear-gradient(160deg, #1f1529, #2c1838);
  border-color: rgba(255, 138, 76, 0.28);
  cursor: pointer;
}
.cal-cell.has-events:hover {
  border-color: var(--tangerine-1);
}
.cal-cell.empty {
  background: transparent;
  border-color: transparent;
}
.cal-cell.today {
  border-color: var(--teal-today);
}
.cal-daynum {
  font-family: var(--f-display);
  font-size: 14px;
  color: #c98aa0;
  margin-bottom: 5px;
}
.cal-cell.today .cal-daynum {
  color: var(--teal-today);
}
.cal-ev {
  font-size: 11px;
  font-weight: 600;
  color: var(--stub-text);
  background: linear-gradient(120deg, var(--gold), var(--tangerine-1));
  padding: 2px 7px;
  border-radius: 6px;
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
}
.cal-ev b {
  font-weight: 700;
}
.cal-more {
  font-size: 10.5px;
  color: #c98aa0;
  font-weight: 600;
}
.cal-count {
  display: none;
  font-size: 11px;
  font-weight: 800;
  color: var(--stub-text);
  background: var(--gold);
  border-radius: 999px;
  padding: 1px 7px;
}

/* ---------- Painel de detalhe (barra à direita, estética do modal disco) ---------- */
.detail {
  position: relative;
  overflow: hidden;
  border: 2px solid var(--marquee-line);
  border-radius: 20px;
  padding: 22px 20px;
  background:
    radial-gradient(
      420px 220px at 50% 0%,
      rgba(255, 90, 60, 0.22),
      transparent 62%
    ),
    var(--modal-bg);
  box-shadow: 0 40px 100px -40px rgba(0, 0, 0, 0.85);
}
.detail-empty {
  color: var(--footer-muted);
  font-size: 13px;
  line-height: 1.55;
  margin: 0;
}
.detail .badge {
  display: inline-block;
  margin-bottom: 10px;
}
.detail h2 {
  margin: 0 0 8px;
  font-family: var(--f-title);
  font-weight: 600;
  font-size: 26px;
  letter-spacing: 0.05em;
  line-height: 1.12;
  text-transform: uppercase;
  color: var(--cream);
}
.detail-when {
  margin: 0 0 6px;
  font-family: var(--f-display);
  font-size: 15px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--tangerine-1);
}
.detail-meta {
  margin: 2px 0 0;
  color: var(--blush);
  font-size: 14px;
}
/* Grade das postagens: a arte de CADA post, e cada uma é o link para o seu
   post. Substituiu a miniatura única + os botões "Ver postagem N" — a imagem
   já comunica que há algo para abrir, e várias divulgações do mesmo evento
   viram galeria em vez de uma lista de botões idênticos. */
.detail-posts {
  display: grid;
  gap: 6px;
  margin: 12px 0 0;
  grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
}
.detail-post {
  position: relative;
  display: block;
  aspect-ratio: 1;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--card-border);
  background: rgba(255, 255, 255, 0.04);
  transition:
    transform 0.15s,
    border-color 0.15s,
    box-shadow 0.15s;
}
.detail-post img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* afordância de link: a arte sobe e ganha borda ao passar o mouse */
.detail-post:hover,
.detail-post:focus-visible {
  transform: translateY(-2px);
  border-color: var(--card-border-h);
  box-shadow: 0 8px 18px -10px rgba(255, 90, 60, 0.7);
}
/* selo do Instagram no canto: diz PARA ONDE a foto leva */
.detail-post-ico {
  position: absolute;
  right: 4px;
  bottom: 4px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: linear-gradient(70deg, #f09433, #dc2743 55%, #bc1888);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}
.detail-post-ico svg {
  width: 12px;
  height: 12px;
}
.detail-posts-hint {
  margin: 7px 0 0;
  font-size: 11.5px;
  color: var(--footer-muted);
  text-align: center;
}
/* nem todo post tem arte guardada: os itens sem imagem se removem sozinhos
   (data-hide-on-error), então a grade pode acabar vazia — sem isso sobrava um
   espaço em branco e uma legenda contando fotos que não estão ali. */
.detail-posts:empty {
  display: none;
}
.detail-posts:empty + .detail-posts-hint {
  display: none;
}

.detail-desc {
  margin: 14px 0 0;
  color: #d8c3cf;
  font-size: 14px;
  line-height: 1.6;
}
.detail-links {
  margin: 16px 0 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.detail-link {
  color: var(--tangerine-1);
  font-size: 14px;
  font-weight: 700;
}
.detail-link:hover {
  text-decoration: underline;
}

/* Fonte original = ação PRINCIPAL do painel (botão dourado grande) */
.detail-source-wrap {
  margin: 16px 0 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.detail-source {
  display: block;
  text-align: center;
  text-decoration: none;
  font-family: var(--f-display);
  letter-spacing: 0.03em;
  font-size: 15px;
  color: var(--stub-text);
  background: linear-gradient(120deg, var(--gold), var(--tangerine-1));
  padding: 13px 16px;
  border-radius: 12px;
  transition: 0.15s;
}
.detail-source:hover {
  filter: brightness(1.06);
}
/* Link do perfil: barra na largura do painel, com o MESMO gradiente do selo
   de fonte da lista (.tag-source.ig) — quem viu o selo no card reconhece a
   barra como "o Instagram de onde isso veio". Fica acima da grade porque é o
   contexto das fotos, não uma ação concorrente. */
.detail-profile {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  text-decoration: none;
  color: #fff;
  font-weight: 700;
  background: linear-gradient(
    70deg,
    #f09433,
    #e6683c 25%,
    #dc2743 50%,
    #cc2366 75%,
    #bc1888
  );
  padding: 8px 12px 8px 8px;
  border-radius: 12px;
  transition: filter 0.15s;
}
.detail-profile:hover {
  filter: brightness(1.08);
}
.detail-profile-av {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  object-fit: cover;
  flex: 0 0 auto;
  border: 1px solid rgba(255, 255, 255, 0.7);
}
.detail-profile span {
  font-family: var(--f-display);
  letter-spacing: 0.02em;
  font-size: 14px;
}
.detail-profile-go {
  margin-left: auto;
  opacity: 0.85;
}
.detail-nosource {
  color: var(--footer-muted);
  font-size: 13px;
  margin: 14px 0 0;
}
/* aviso de IA — reforça o disclaimer do rodapé no contexto do evento */
.detail-disclaimer {
  margin: 10px 0 0;
  padding: 8px 12px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--card-border);
  color: var(--footer-muted);
  font-size: 12px;
  line-height: 1.45;
  text-align: center;
}

.detail-actions {
  margin: 12px 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: stretch;
}
.detail-actions > button {
  flex: 1 1 auto;
}
.detail-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 138, 76, 0.35);
  background: transparent;
  color: var(--tangerine-1);
  padding: 9px 12px;
  border-radius: 11px;
  cursor: pointer;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  transition: 0.15s;
}
.detail-secondary:hover {
  background: rgba(255, 138, 76, 0.1);
}

/* Ações de admin no painel */
.detail-admin {
  margin: 12px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--card-border);
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.mini-btn {
  border: 1px solid var(--card-border);
  background: transparent;
  color: var(--blush);
  padding: 7px 12px;
  border-radius: 9px;
  cursor: pointer;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  transition: 0.15s;
}
.mini-btn:hover {
  border-color: var(--tangerine-1);
  color: var(--cream);
}
.mini-btn.danger {
  color: var(--tangerine-2);
  border-color: rgba(255, 90, 60, 0.4);
}
.mini-btn.danger:hover {
  background: rgba(255, 90, 60, 0.14);
}
.detail .modal-tags {
  margin-top: 14px;
}

/* Chips de tag no detalhe */
.modal-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0 0;
}
.tag-chip {
  font-size: 12px;
  font-weight: 600;
  color: var(--tag-muted);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 138, 76, 0.2);
  padding: 3px 10px;
  border-radius: 999px;
  text-transform: capitalize;
  cursor: pointer;
  font-family: inherit;
  transition: 0.15s;
}
.tag-chip:hover {
  border-color: var(--tangerine-1);
  color: var(--cream);
}
/* chip que só informa (bairro fora do mapa de regiões): não há filtro para
   onde levar, então não finge ser clicável */
.tag-chip.is-static {
  cursor: default;
}
.tag-chip.is-static:hover {
  border-color: rgba(255, 138, 76, 0.2);
  color: var(--tag-muted);
}

/* Botões do detalhe */
.ics-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--f-display);
  letter-spacing: 0.03em;
  font-size: 14px;
  border: 0;
  cursor: pointer;
  color: var(--stub-text);
  background: linear-gradient(120deg, var(--gold), var(--tangerine-1));
  padding: 11px 16px;
  border-radius: 12px;
  transition: 0.15s;
}
.ics-btn:hover {
  filter: brightness(1.06);
}
.fav-btn-lg {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid rgba(255, 138, 76, 0.4);
  background: transparent;
  color: var(--tangerine-1);
  padding: 10px 15px;
  border-radius: 12px;
  cursor: pointer;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  transition: 0.15s;
}
.fav-btn-lg:hover {
  border-color: var(--tangerine-1);
  background: rgba(255, 138, 76, 0.1);
}
.fav-btn-lg.is-fav {
  border-color: var(--gold);
  color: var(--gold);
  background: rgba(255, 209, 102, 0.12);
}

/* ---------- Faixa de ondas (mar) + rodapé ---------- */
.wave-strip {
  position: relative;
  height: 76px;
  margin-top: 30px;
  overflow: hidden;
  background: linear-gradient(180deg, transparent, rgba(15, 63, 61, 0.55));
}
.wave {
  position: absolute;
  left: 0;
  right: 0;
  height: 16px;
  background-repeat: repeat-x;
  background-size: 30px 16px;
}
.wave-1 {
  top: 26px;
  opacity: 0.5;
  background-image: radial-gradient(
    circle at 50% -4px,
    transparent 9px,
    var(--teal) 9px 11px,
    transparent 12px
  );
  animation: waveX 4s linear infinite;
}
.wave-2 {
  top: 42px;
  opacity: 0.35;
  background-position-x: 15px;
  background-image: radial-gradient(
    circle at 50% -4px,
    transparent 9px,
    var(--teal-light) 9px 11px,
    transparent 12px
  );
  animation: waveX 6s linear infinite reverse;
}

.footer {
  text-align: center;
  color: var(--footer-muted);
  font-size: 12.5px;
  line-height: 1.6;
  padding: 0 24px 60px;
  max-width: 720px;
  margin: 0 auto;
}
.admin-link {
  color: var(--footer-muted);
  font-size: 12.5px;
}
.admin-link:hover {
  color: var(--tangerine-1);
}

/* Sugerir um perfil (rodapé): o admin não conhece todos os produtores da
   cidade — os visitantes conhecem. Vai pro funil de descobertos do admin. */
.sugerir-wrap {
  margin: 26px auto 0;
  padding: 18px 20px;
  max-width: 460px;
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.03);
}
.sugerir-titulo {
  margin: 0;
  font-family: var(--f-display);
  letter-spacing: 0.03em;
  font-size: 16px;
  color: var(--cream);
}
.sugerir-sub {
  margin: 6px 0 12px;
}
.sugerir-form {
  display: flex;
  gap: 8px;
}
.sugerir-form input {
  flex: 1;
  min-width: 0;
  font-family: inherit;
  font-size: 14px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 138, 76, 0.28);
  border-radius: 10px;
  color: var(--cream);
  padding: 10px 12px;
  transition: 0.15s;
}
.sugerir-form input::placeholder {
  color: var(--blush);
  opacity: 0.7;
}
.sugerir-form input:focus {
  outline: none;
  border-color: var(--tangerine-1);
  box-shadow: 0 0 0 3px rgba(255, 138, 76, 0.12);
}
.sugerir-btn {
  border: 0;
  cursor: pointer;
  font-family: var(--f-display);
  letter-spacing: 0.03em;
  font-size: 14px;
  padding: 10px 18px;
  border-radius: 10px;
  color: var(--stub-text);
  background: linear-gradient(120deg, var(--gold), var(--tangerine-1));
  transition: 0.15s;
}
.sugerir-btn:hover {
  filter: brightness(1.06);
}
.sugerir-btn:disabled {
  opacity: 0.6;
  cursor: default;
}
.sugerir-out {
  margin: 10px 0 0;
  min-height: 1.2em;
  color: var(--teal-light);
}
.sugerir-out:empty {
  margin: 0;
  min-height: 0;
}

/* ---------- Chips do card do recorte ----------
   Os filtros SECUNDÁRIOS (os que não deram a cara ao card) e o "limpar tudo".
   Ficam num rodapé dentro do card, separados do rosto por uma linha. */
.fa-mais {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 138, 76, 0.16);
}
.fa-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--dark-text);
  background: var(--gold);
  border: 0;
  padding: 5px 11px;
  border-radius: 999px;
  transition: filter 0.15s;
}
.fa-chip .x {
  font-size: 11px;
  opacity: 0.65;
}
.fa-chip:hover {
  filter: brightness(1.06);
}
.fa-chip:hover .x {
  opacity: 1;
}
.fa-limpar {
  cursor: pointer;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  /* CREME e sem sublinhado: é a SAÍDA do estado de filtro, não mais um filtro —
     a forma (sem pílula) já a separa dos chips dourados, e o sublinhado a fazia
     competir com eles por atenção. Era ciano até 09/08: sobre a arte da vibe o
     ciano ficava fraco, e o creme lê nos dois fundos. */
  color: var(--cream);
  background: none;
  border: 0;
  padding: 5px 4px;
  margin-left: auto;
  text-decoration: none;
}
.fa-limpar:hover {
  color: var(--cream);
}

/* Botão de compartilhar (card + detalhe) */
.share-btn {
  position: absolute;
  top: 13px;
  right: 42px;
  z-index: 1;
  background: none;
  border: 0;
  padding: 3px;
  cursor: pointer;
  line-height: 0;
  color: var(--blush);
  transition: 0.15s;
}
.share-btn:hover {
  color: var(--tangerine-1);
  transform: scale(1.12);
}
.share-btn-lg {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid rgba(255, 138, 76, 0.4);
  background: transparent;
  color: var(--tangerine-1);
  padding: 10px 15px;
  border-radius: 12px;
  cursor: pointer;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  transition: 0.15s;
}
.share-btn-lg:hover {
  border-color: var(--tangerine-1);
  background: rgba(255, 138, 76, 0.1);
}

/* Contagem de favoritos (♥ N) — card e detalhe */
.fav-count {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--tangerine-1);
  white-space: nowrap;
}
.fav-count::before {
  content: "♥";
}
.detail .fav-count.detail-favs {
  margin: 8px 0 0;
  font-size: 13px;
}

/* Excluir evento (admin) */
.admin-del {
  margin-left: auto;
  background: none;
  border: 0;
  cursor: pointer;
  font-size: 13px;
  line-height: 1;
  padding: 2px 4px;
  border-radius: 6px;
  opacity: 0.7;
  transition: 0.15s;
}
.admin-del:hover {
  opacity: 1;
  background: rgba(255, 90, 60, 0.18);
}
.del-btn-lg {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  border: 1px solid rgba(255, 90, 60, 0.5);
  background: transparent;
  color: var(--tangerine-2);
  padding: 10px 15px;
  border-radius: 12px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  transition: 0.15s;
}
.del-btn-lg:hover {
  background: rgba(255, 90, 60, 0.14);
  border-color: var(--tangerine-2);
}

/* Menu de ações (⋮) do card + dropdown flutuante (caixa igual à da estrela) */
.kebab {
  position: absolute;
  top: 12px;
  right: 10px;
  z-index: 1;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  line-height: 0;
  color: var(--blush);
  transition: 0.15s;
}
.kebab:hover {
  color: var(--cream);
}
.ev-menu {
  position: fixed;
  z-index: 120;
  min-width: 196px;
  background: var(--modal-bg);
  border: 1px solid var(--marquee-line);
  border-radius: 12px;
  box-shadow: 0 20px 50px -18px rgba(0, 0, 0, 0.8);
  padding: 6px;
}
.ev-menu-item {
  display: block;
  width: 100%;
  text-align: left;
  cursor: pointer;
  background: none;
  border: 0;
  border-radius: 8px;
  padding: 9px 12px;
  font-family: inherit;
  font-size: 13.5px;
  color: var(--cream);
  transition: 0.12s;
}
.ev-menu-item:hover {
  background: rgba(255, 138, 76, 0.14);
}
.ev-menu-item.danger {
  color: var(--tangerine-2);
}
.ev-menu-item.danger:hover {
  background: rgba(255, 90, 60, 0.16);
}

/* Modal (editar evento / sugerir edição) */
.emodal-back {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 7vh 16px 4vh;
  overflow-y: auto;
  background: rgba(8, 4, 12, 0.7);
  backdrop-filter: blur(3px);
}
.emodal {
  width: 100%;
  max-width: 480px;
  margin: auto;
  background: var(--modal-bg);
  border: 2px solid var(--marquee-line);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 40px 100px -30px rgba(0, 0, 0, 0.85);
}
.emodal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px 8px;
}
.emodal-head h3 {
  margin: 0;
  font-family: var(--f-display);
  font-size: 20px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--cream);
}
.emodal-x {
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 138, 76, 0.3);
  color: var(--tangerine-1);
  width: 32px;
  height: 32px;
  border-radius: 9px;
  cursor: pointer;
  font-size: 15px;
}
.emodal-body {
  padding: 2px 18px 6px;
}
.emodal-body label {
  display: block;
  font-size: 11.5px;
  color: var(--blush);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 12px 0 4px;
}
.emodal-body input,
.emodal-body select,
.emodal-body textarea {
  width: 100%;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 138, 76, 0.28);
  color: var(--cream);
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 14px;
  font-family: inherit;
}
.emodal-body textarea {
  min-height: 90px;
  resize: vertical;
}
.emodal-body option {
  color: #111;
}
/* Passo a passo do "adicionar à tela de início" (iOS não tem API de instalação) */
.ios-passos {
  margin: 6px 0 0;
  padding: 0;
  list-style: none;
  counter-reset: passo;
}
.ios-passos li {
  counter-increment: passo;
  position: relative;
  margin: 0 0 12px;
  padding-left: 34px;
  font-size: 14px;
  line-height: 1.45;
  color: var(--cream);
}
.ios-passos li::before {
  content: counter(passo);
  position: absolute;
  left: 0;
  top: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--f-display);
  font-size: 13px;
  color: var(--stub-text);
  background: var(--gold);
}
.ios-passos .ico {
  width: 17px;
  height: 17px;
  vertical-align: -3px;
  color: var(--teal-light);
}
.emodal-body input:focus,
.emodal-body select:focus,
.emodal-body textarea:focus {
  outline: none;
  border-color: var(--tangerine-1);
}
.emodal-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.emodal-row > div {
  flex: 1 1 150px;
}
.emodal-hint {
  display: block;
  font-size: 11px;
  color: var(--footer-muted);
  text-transform: none;
  letter-spacing: 0;
  margin-top: 4px;
}
.emodal-foot {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 12px 18px 18px;
}
.emodal-foot .ics-btn,
.emodal-foot .fav-btn-lg {
  margin: 0;
}

/* Selo de evento cancelado/adiado */
.status-tag {
  display: inline-block;
  font-family: var(--f-body);
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 3px 9px;
  border-radius: 6px;
  margin-bottom: 6px;
  white-space: nowrap;
}
.status-cancelado {
  background: var(--tangerine-2);
  color: #fff;
}
.status-adiado {
  background: var(--gold);
  color: var(--dark-text);
}
.event.is-cancelado {
  opacity: 0.66;
}
.event.is-cancelado .event-body h3 {
  text-decoration: line-through;
  text-decoration-thickness: 2px;
}
.detail .status-tag {
  margin-left: 8px;
  vertical-align: middle;
}

/* Esqueleto de carregamento */
.skel-card {
  height: 96px;
  border-radius: var(--radius);
  margin-bottom: 11px;
  border: 1px solid var(--card-border);
  background: linear-gradient(
    90deg,
    var(--card-1) 0%,
    var(--card-2) 45%,
    var(--card-1) 90%
  );
  background-size: 200% 100%;
  animation: shimmer 1.3s ease-in-out infinite;
}

/* Toast (aviso transitório) */
.toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  transform: translate(-50%, 20px);
  z-index: 200;
  padding: 11px 18px;
  border-radius: 12px;
  background: var(--modal-bg);
  border: 1px solid var(--marquee-line);
  color: var(--cream);
  font-size: 14px;
  font-weight: 600;
  box-shadow: 0 16px 40px -12px rgba(0, 0, 0, 0.7);
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 0.2s,
    transform 0.2s;
}
.toast.show {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* ---------- utilidades ---------- */
.hidden {
  display: none !important;
}
.empty {
  text-align: center;
  color: var(--blush);
  padding: 60px 0;
  font-size: 16px;
}

/* Barra de abas, convite de instalação e bottom-sheet: só existem no mobile.
   O convite fica fora do desktop de propósito: "tela de início" é vocabulário
   de celular, e o menu que oferece a alternativa também é só de lá. */

.tabbar,
.instalar-faixa,
.filters-backdrop,
.sheet-head,
.limpar-no-painel,
.detail-backdrop {
  display: none;
}

/* ---------- Responsivo ---------- */
@media (max-width: 920px) {
  .layout {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .views {
    flex: 0 0 auto;
  }
  .views .view-btn {
    flex: 0 0 auto;
  }

  /* Painel de detalhe vira sheet deslizante (mesmo padrão dos filtros),
     controlado por JS via .is-open (o conteúdo é dinâmico por evento). */
  .sidebar-right {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    top: auto;
    z-index: 60;
    max-height: 86vh;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 0 16px calc(18px + env(safe-area-inset-bottom, 0px));
    background: var(--modal-bg);
    border-radius: 20px 20px 0 0;
    box-shadow: 0 -24px 60px -24px rgba(0, 0, 0, 0.85);
    transform: translateY(105%);
    transition: transform 0.28s cubic-bezier(0.2, 0.8, 0.3, 1);
  }
  .sidebar-right.is-open {
    transform: translateY(0);
  }
  .detail-sheet-head {
    display: flex;
  }
  .detail-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 50;
    background: rgba(8, 4, 12, 0.6);
    backdrop-filter: blur(2px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s;
  }
  .detail-backdrop.is-open {
    opacity: 1;
    pointer-events: auto;
  }

  /* Convite de instalação: encostado ACIMA da barra de abas, nunca por cima
     dela. Faixa e não modal — instalar é oferta, não pedido. */
  .instalar-faixa {
    display: flex;
    align-items: center;
    gap: 10px;
    position: fixed;
    left: 8px;
    right: 8px;
    z-index: 41;
    bottom: calc(var(--tabbar-h) + 8px);
    padding: 10px 12px;
    border-radius: 14px;
    background: var(--modal-bg);
    border: 1px solid var(--card-border);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
    animation: popIn 0.28s cubic-bezier(0.2, 0.8, 0.3, 1) both;
  }
  .instalar-faixa .ico {
    width: 22px;
    height: 22px;
    color: var(--teal-light);
  }
  .instalar-faixa p {
    margin: 0;
    flex: 1 1 auto;
    font-size: 12.5px;
    line-height: 1.35;
    color: var(--cream);
  }
  .instalar-sim {
    flex: 0 0 auto;
    border: 0;
    cursor: pointer;
    padding: 8px 14px;
    border-radius: 999px;
    font-family: var(--f-display);
    letter-spacing: 0.03em;
    font-size: 13px;
    color: var(--dark-text);
    background: var(--gold);
  }
  .instalar-nao {
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    cursor: pointer;
    border: 1px solid var(--card-border);
    background: transparent;
    color: var(--blush);
    font-size: 13px;
  }
  body.sheet-aberto .instalar-faixa {
    opacity: 0;
    pointer-events: none;
  }

  /* BARRA DE ABAS: a navegação inteira do mobile, no alcance do polegar.
     Destinos (Agenda, Perto, Salvos) + duas ações (Filtrar, Menu). Calendário,
     Perfis e Sobre são visita ocasional e ficam dentro do Menu — a régua vale
     nos dois sentidos: o que está aqui NÃO se repete lá, senão volta a existir
     a mesma navegação em dois lugares. Sempre visível: barra que some e volta
     no scroll custa mais atenção do que os 56px que ela ocupa. */
  .tabbar {
    display: flex;
    position: fixed;
    inset: auto 0 0 0;
    z-index: 40;
    height: var(--tabbar-h);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background: rgba(16, 9, 19, 0.93);
    backdrop-filter: blur(10px);
    border-top: 1px solid var(--card-border);
  }
  .tab-btn {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 6px 2px;
    color: var(--footer-muted);
    font-family: var(--f-display);
    font-size: 11px;
    letter-spacing: 0.03em;
  }
  .tab-btn .ico {
    width: 21px;
    height: 21px;
    stroke-width: 1.7;
  }
  .tab-btn span {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  /* o `background` dourado é da pílula do desktop (.view-btn.is-active), que
     estes botões também herdam por serem .view-btn — aqui a marca de ativo é
     a COR do ícone e do rótulo, não um bloco */
  .tab-btn.is-active {
    color: var(--gold);
    background: transparent;
  }
  /* AÇÃO (filtrar, menu): abre um painel e volta — não é lugar onde se fica,
     então nunca recebe estado ativo. O destaque dela é estar ABERTA. */
  .tab-acao[aria-expanded="true"] {
    color: var(--tangerine-1);
  }
  /* /sobre não tem lista para filtrar. Apagado e sem toque, NÃO escondido:
     tirar o botão reflui as outras quatro fatias e a barra dança ao trocar de
     página. */
  .tab-btn.is-off {
    opacity: 0.3;
    pointer-events: none;
  }
  .tab-btn:active {
    transform: scale(0.96);
  }
  /* Contagem de salvos: pequena, colada no ícone — é informação, não alarme */
  .tab-badge {
    position: absolute;
    top: 2px;
    left: 50%;
    margin-left: 6px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--f-body);
    font-style: normal;
    font-size: 10.5px;
    font-weight: 700;
    color: var(--stub-text);
    background: var(--gold);
  }

  /* Fundo escuro por trás do sheet */
  .filters-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 50;
    background: rgba(8, 4, 12, 0.6);
    backdrop-filter: blur(2px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s;
  }

  /* Sidebar de filtros vira sheet deslizante colado na base */
  .sidebar-left {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    top: auto;
    z-index: 60;
    max-height: 82vh;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 0 16px calc(18px + env(safe-area-inset-bottom, 0px));
    background: var(--modal-bg);
    border-top: 2px solid var(--marquee-line);
    border-radius: 20px 20px 0 0;
    box-shadow: 0 -24px 60px -24px rgba(0, 0, 0, 0.85);
    transform: translateY(105%);
    transition: transform 0.28s cubic-bezier(0.2, 0.8, 0.3, 1);
  }
  .controls {
    flex-direction: column;
    align-items: stretch;
    padding: 6px 0 4px;
  }

  /* Cabeçalho do sheet (título + fechar + alça) */
  .sheet-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: sticky;
    top: 0;
    z-index: 2;
    padding: 16px 2px 12px;
    background: var(--modal-bg);
  }
  .sheet-head::before {
    content: "";
    position: absolute;
    top: 7px;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 4px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.18);
  }
  .sheet-title {
    font-family: var(--f-display);
    font-size: 20px;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--cream);
  }
  /* Mesma cor do "limpar tudo" do card (creme): são o MESMO comando em dois
     lugares, e duas cores para a mesma ação seria ruído. `margin-left: auto` o
     cola no ✕, deixando o título sozinho na esquerda. */
  .limpar-no-painel.hidden {
    display: none;
  }
  .limpar-no-painel {
    display: inline-flex;
    align-items: center;
    margin-left: auto;
    margin-right: 10px;
    cursor: pointer;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    color: var(--cream);
    background: none;
    border: 0;
    padding: 6px 2px;
  }
  .limpar-no-painel:active {
    color: var(--tangerine-1);
  }
  .sheet-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    cursor: pointer;
    color: var(--tangerine-1);
    font-size: 16px;
    border: 1px solid rgba(255, 138, 76, 0.3);
    background: rgba(0, 0, 0, 0.3);
  }

  /* Estado aberto */
  /* estado aberto agora vem de .is-open (JS) — era :checked de um input
     display:none, que não é focável nem existe p/ leitores de tela */
  .sidebar-left.is-open {
    transform: translateY(0);
    visibility: visible;
  }
  .filters-backdrop.is-open {
    opacity: 1;
    pointer-events: auto;
  }
  /* sheet fechado sai do fluxo de foco: só translateY o mantinha tabulável */
  .sidebar-left,
  .sidebar-right {
    visibility: hidden;
    transition:
      transform 0.28s cubic-bezier(0.2, 0.8, 0.3, 1),
      visibility 0s 0.28s;
  }
  .sidebar-left.is-open,
  .sidebar-right.is-open {
    transition: transform 0.28s cubic-bezier(0.2, 0.8, 0.3, 1);
  }
  .sidebar-right.is-open {
    visibility: visible;
  }
  /* trava o scroll de trás enquanto um sheet está aberto */
  body.sheet-aberto {
    overflow: hidden;
  }
}

@media (max-width: 560px) {
  .event {
    padding-left: 66px;
  }
  .event-time {
    width: 54px;
  }
  .event-body h3 {
    font-size: 19px;
  }
  .cal-cell {
    min-height: 66px;
  }
  .cal-ev,
  .cal-more {
    display: none;
  }
  .cal-cell .cal-count {
    display: inline-block;
  }
  .day-num {
    font-size: 38px;
  }
}

/* ---------- keyframes ---------- */
@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(22px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes blink {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.35;
  }
}
@keyframes waveX {
  to {
    background-position-x: 30px;
  }
}
@keyframes popIn {
  from {
    opacity: 0;
    transform: translateY(18px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes glowPulse {
  0%,
  100% {
    opacity: 0.55;
  }
  50% {
    opacity: 1;
  }
}
@keyframes shimmer {
  to {
    background-position: -200% 0;
  }
}

/* ---------- Acessibilidade ---------- */

/* Foco visível em TODOS os interativos. Antes só a busca e os campos do modal
   tinham regra própria, e o outline padrão do navegador some sobre estes
   fundos escuros — quem navega por teclado ficava sem saber onde está. */
:where(a, button, [tabindex], input, select, textarea):focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 2px;
  border-radius: 6px;
}
.event:focus-visible {
  outline-offset: -3px;
}

/* Contraste AA: --footer-muted dava ~3.4:1 sobre o fundo (mínimo é 4.5:1), e é
   usado inclusive no aviso "interpretado por IA" — o texto que mais precisa ser
   lido. Estes tons ficam acima de 4.5:1 mantendo a paleta. */
:root {
  --footer-muted: #bda3b4;
  --tag-muted: #d0aabf;
}
.search::placeholder {
  color: var(--blush);
  opacity: 0.95;
}
.cal-dow,
.cal-daynum,
.cal-more {
  color: #e3b9c9;
}
.chip-count {
  opacity: 0.85;
}
/* cancelado: o line-through e o selo já comunicam; a opacidade global jogava
   TODO o conteúdo do card abaixo do contraste mínimo */
.event.is-cancelado {
  opacity: 1;
}
.event.is-cancelado .event-body h3 {
  text-decoration: line-through;
  opacity: 0.75;
}

/* ---------- Zoom ao focar um campo (iOS) ---------- */
/* O Safari do iPhone DÁ ZOOM na página quando o campo focado tem fonte menor
   que 16px — a página fica torta e não volta sozinha ao sair do campo. A cura
   é a FONTE, não o viewport: `user-scalable=no` tiraria o pinça-para-ampliar de
   todo mundo, e o Safari ignora essa meta desde o iOS 10 — nem funcionaria.
   `!important` porque isto é uma REGRA do projeto, não um estilo: nenhum campo
   pode ficar abaixo de 16px no mobile, e são dezenas espalhados entre o site e
   o admin, cada um com sua classe. Sem ele, qualquer `font-size` por classe
   (que é como todos são estilizados) venceria e o zoom voltaria — o tamanho
   menor volta sozinho acima de 920px, onde o problema não existe. */
@media (max-width: 920px) {
  input,
  select,
  textarea {
    font-size: 16px !important;
  }
}

/* Respeita quem pede menos movimento: as lâmpadas piscam sem parar (risco
   vestibular/fotossensível) e a lista reanima a cada tecla digitada. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}
/* célula do calendário virou <button> (era <div> clicável, inacessível) —
   remove a aparência nativa e mantém o visual anterior */
button.cal-cell {
  font: inherit;
  color: inherit;
  text-align: left;
  width: 100%;
  border: 1px solid var(--card-border);
  background: rgba(255, 255, 255, 0.03);
  cursor: pointer;
  /* flex em coluna, não block: o <button> centraliza o conteúdo na vertical
     por conta própria, e num dia com 1 evento a pílula flutuava no meio da
     célula enquanto a do vizinho com 3 começava no topo */
  display: flex;
  flex-direction: column;
}

/* ---------- Ícones inline (traço) ---------- */
/* Set autoral no peso do funil/burger — interface sem emoji; herda a cor do
   texto via currentColor. */
.ico {
  width: 15px;
  height: 15px;
  flex: none;
  vertical-align: -2px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.atalho {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.fgroup summary .ico {
  margin-right: 4px;
}
.footer-sobre .ico {
  vertical-align: -3px;
  margin-right: 2px;
}