/* Identidade do Comitê Popular do Lula ("Guia de interface web e apps", v1, 2026-10), adotada em 2026-10-10, quando o
   site (Bora Lula, antes Eleja o Lula) passou a ser uma iniciativa do Comitê. Os tokens moram em tokens.css, o arquivo do guia, sem mexer;
   aqui eles entram no app: as variáveis antigas do <style> do index.html apontam para os tokens e os componentes
   seguem o guia. Vem depois do <style> e manda nele; fica num arquivo à parte para trocar a marca sem mexer no resto.
   Regras do guia que valem aqui: marca chapada (sombra só para mostrar camada), Montserrat 500/700/800/900, botões em
   pílula de 44 px, foco com anel grafite (amarelo sobre vermelho), verde e azul de texto só na versão 700, amarelo
   nunca como texto ou borda sobre branco, links de texto sublinhados, caixa-alta só em títulos de destaque e rótulos,
   animações de até 200 ms. Logo do Comitê no cabeçalho (mínimo 120 px de largura) e a mão do "L" no favicon. */
:root{--papel:var(--cp-surface);--tinta:var(--cp-ink);--vermelho:var(--cp-red-500);--vinho:var(--cp-red-700);
  --nevoa:var(--cp-surface-alt);--cinza:var(--cp-ink-muted);--selo:var(--cp-green-700);
  --amarelo:var(--cp-yellow-400);--azul:var(--cp-blue-700);--sombra:0 -6px 16px rgb(42 42 42 / .14)}
body{font-family:var(--cp-font);font-weight:500;line-height:1.55}
.maplibregl-map,.previa .maplibregl-popup-content,.etiqueta,.previa .maplibregl-popup-close-button{font-family:var(--cp-font)}
b,strong{font-weight:700}

/* tipografia: escala fluida do guia */
h1{font-size:var(--cp-text-h1);font-weight:900;line-height:1.1;letter-spacing:-.01em}
h2{font-size:var(--cp-text-h3);font-weight:700;line-height:1.25;letter-spacing:0}
.sec{color:var(--cp-ink-muted);font-size:var(--cp-text-sm);line-height:1.45}
.cabeca strong,.vazio p{font-weight:800}

/* links de texto sempre sublinhados, em vermelho 500 (6,2:1 sobre branco) */
.link,.bloco .cab a,.ver-pagina,.agenda summary,.previa .ver,.link-ext,.credito a,.rodape a{color:var(--cp-red-500);text-decoration:underline;text-underline-offset:3px}
.link:hover,.bloco .cab a:hover,.ver-pagina:hover,.agenda summary:hover,.previa .ver:hover,.link-ext:hover{color:var(--cp-red-600)}
.cidade{color:var(--cp-red-500)}.cidade:hover{color:var(--cp-red-600)}
.voltar{color:var(--cp-ink-muted);text-decoration:underline;text-underline-offset:3px;min-height:44px;display:inline-flex;align-items:center;margin-bottom:2px}
.prior{color:var(--cp-red-700)}

/* foco visível em tudo que é clicável: anel branco + grafite; sobre vermelho, anel amarelo */
a:focus-visible,button:focus-visible,summary:focus-visible,.btn:focus-visible,.chip:focus-visible,.pill:focus-visible,
input:focus-visible,textarea:focus-visible,select:focus-visible{outline:none;box-shadow:var(--cp-focus-light);border-radius:var(--cp-radius-sm)}
.btn:focus-visible,.pill:focus-visible,.ver-todas:focus-visible{border-radius:var(--cp-radius-pill)}

/* botões: pílula de 44 px; primário vermelho, contorno vermelho, apoio verde 700 */
.btn{font:700 var(--cp-text-md)/1.2 var(--cp-font);min-height:44px;padding:10px var(--cp-space-6);border-radius:var(--cp-radius-pill);
  border:2px solid transparent;background:var(--cp-red-500);color:#fff;justify-content:center;transition:background-color .15s}
.btn:hover{background:var(--cp-red-600)}.btn:active{background:var(--cp-red-700)}
.btn[disabled]{background:var(--cp-border);color:var(--cp-ink-muted);cursor:not-allowed}
.btn.sec{background:transparent;color:var(--cp-red-500);border-color:var(--cp-red-500)}.btn.sec:hover{background:var(--cp-danger-bg)}
.btn.sec.perigo{color:var(--cp-red-700);border-color:var(--cp-red-700)}
.btn.mini{min-height:44px;padding:8px var(--cp-space-4);font-size:var(--cp-text-sm)}
@media (min-width:1024px){.btn.mini{min-height:36px;padding:6px var(--cp-space-4)}}
.btn.google{background:var(--cp-ink)}.btn.google:hover{background:#3d3d3d}.btn.google .g{color:var(--cp-red-500)}
.btn.vou{min-height:52px;font-size:var(--cp-text-lg);font-weight:800;padding:12px 32px}
.btn-whats{background:var(--cp-green-700);min-height:44px;font-weight:700}.btn-whats:hover{background:#06601c}
.ver-todas{border:2px solid var(--cp-red-500);color:var(--cp-red-500);font-weight:700;min-height:44px;border-radius:var(--cp-radius-pill)}
.ver-todas:hover{background:var(--cp-danger-bg)}

/* campos: rótulo visível acima, borda forte (3,7:1), foco com borda e anel grafite */
label{font-weight:700;font-size:var(--cp-text-sm);color:var(--cp-ink)}
label.marcar,.opcao,label input,label textarea,label select{font-weight:500}
input,textarea,select{border:1.5px solid var(--cp-border-strong);border-radius:var(--cp-radius-md);min-height:44px}
input[type=checkbox],input[type=radio]{min-height:0;accent-color:var(--cp-red-500)}
input:focus,textarea:focus,select:focus{border-color:var(--cp-ink)}
input:focus-visible,textarea:focus-visible,select:focus-visible{border-radius:var(--cp-radius-md)}
.busca input,.busca input:focus-visible{border:0;min-height:0;box-shadow:none}
/* erro com ícone e texto, não só cor */
.erro{color:var(--cp-danger-fg);font-weight:700;font-size:var(--cp-text-sm)}.erro:not(:empty)::before{content:"⚠\FE0E  "}

/* alertas: fundo e texto de feedback, raio 8 */
.aviso{background:var(--cp-success-bg);color:var(--cp-success-fg);border-left:4px solid var(--cp-green-700);border-radius:var(--cp-radius-md)}
.aviso p,.aviso h2{color:var(--cp-ink)}
.aviso-org{background:var(--cp-warning-bg);color:var(--cp-warning-fg);border-left:4px solid var(--cp-yellow-400);border-radius:var(--cp-radius-md)}
.convite{background:var(--cp-warning-bg);border-color:var(--cp-yellow-400)}

/* etiquetas: rótulo de 12 px em caixa-alta, raio 4 */
.status,.foto .data,.foto .online{font-size:var(--cp-text-xs);font-weight:800;text-transform:uppercase;letter-spacing:.08em;border-radius:var(--cp-radius-sm)}
.status{padding:3px 8px;background:var(--cp-surface-alt);color:var(--cp-ink)}
.status.publicada{background:var(--cp-success-bg);color:var(--cp-success-fg)}.status.analise{background:var(--cp-warning-bg);color:var(--cp-warning-fg)}
.status.recusada{background:var(--cp-danger-bg);color:var(--cp-danger-fg)}
.foto .data{background:#fff;color:var(--cp-ink);box-shadow:var(--cp-shadow-1)}
.foto .img~.data{box-shadow:var(--cp-shadow-1)}
.foto .online{background:var(--cp-blue-700);color:#fff}
.selo,.meta.vao{color:var(--cp-green-700)}

/* divisórias decorativas */
.linha,.card,.insc,.evento-online,.turno-meu .pessoa,.turno-meu .desistiram,#sugestoes div,#sug-criar div,#sug-cidade div,#sug-end>div{border-top-color:var(--cp-border)}
.avatar,.logo-org{border-color:var(--cp-border)}

/* cards: fundo branco, borda, raio 8, padding 16; um botão por card */
.evento{background:var(--cp-surface);border:1px solid var(--cp-border);border-radius:var(--cp-radius-md);overflow:hidden}
.evento>.foto{border-radius:0}
.evento>:not(.foto){margin-left:var(--cp-space-4);margin-right:var(--cp-space-4)}.evento>:last-child{margin-bottom:var(--cp-space-4)}
.evento .tit{font-weight:700}
.foto,.foto.mini,.cubo,.cartao,.turno-meu,.moderar,.logo-org{border-radius:var(--cp-radius-md)}
.foto .logo{border-radius:var(--cp-radius-md);box-shadow:var(--cp-shadow-1)}
.cartao,.moderar{background:var(--cp-surface-alt)}
/* sem foto: cartaz desenhado pelo app (função cartaz no index.html), por baixo da foto e da logo. Fundo nas cores
   escuras do guia, que seguram texto branco pequeno (a cidade); tarja amarela; medidas em cqw, relativas ao card */
.foto{isolation:isolate;container-type:inline-size}
.cartaz{position:absolute;inset:0;z-index:0;display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-start;gap:3cqw;padding:9cqw 8cqw;color:#fff;text-align:left;overflow:hidden}
.cartaz::before{content:'';position:absolute;right:-18cqw;top:-18cqw;width:70cqw;height:70cqw;border-radius:50%;background:rgb(255 255 255 / .08)}
.cartaz-vermelho{background:var(--cp-red-500)}.cartaz-verde{background:var(--cp-green-700)}.cartaz-azul{background:var(--cp-blue-700)}.cartaz-vinho{background:var(--cp-red-700)}
.cartaz-tarja{background:var(--cp-yellow-400);color:var(--cp-ink);font:900 max(10px,5.2cqw)/1.25 var(--cp-font);text-transform:uppercase;letter-spacing:.06em;padding:.15em .45em;transform:rotate(-3deg);transform-origin:left bottom}
.cartaz-tipo{font-family:var(--cp-font);font-weight:900;text-transform:uppercase;line-height:.92}
.cartaz-onde{font:700 max(11px,6cqw)/1.2 var(--cp-font)}
.foto.mini .cartaz{padding:8cqw;align-items:center;justify-content:center;text-align:center}.foto.mini .cartaz-tarja{display:none}
.foto.capa .cartaz{padding:5cqw 6cqw;gap:1.6cqw}.foto.capa .cartaz-tarja{font-size:2.6cqw}.foto.capa .cartaz-onde{font-size:3.2cqw}
/* com logo da organização: o logo no alto, o texto embaixo e sem a tarja */
.foto.com-logo .logo{top:36%;height:44%;width:56%}.foto.com-logo .cartaz-tarja{display:none}
.foto.capa.com-logo .logo{top:42%;height:58%;width:34%}
/* cards da inicial (e a prévia do cadastro, que imita o card): a imagem preenche a área 4:5 e corta a sobra,
   sem o fundo desfocado; a página da ação segue mostrando a arte inteira */
.evento .foto .img,.evento-online .foto .img{object-fit:cover}
.evento .foto .fundo,.evento-online .foto .fundo{display:none}
.f-panfletagem,.f-bandeiraco,.f-outro{background:var(--cp-red-500)}.f-adesivaco,.f-ato{background:var(--cp-green-500)}
.f-encontro,.f-porta,.f-cultural{background:var(--cp-blue-500)}.f-ligatona,.f-caminhada{background:var(--cp-red-700)}
.f-bicicletada{background:var(--cp-green-700)}
.t-panfletagem,.t-bandeiraco,.t-outro{background:var(--cp-danger-bg)}.t-adesivaco,.t-ato{background:var(--cp-success-bg)}
.t-encontro,.t-porta,.t-cultural{background:var(--cp-info-bg)}.t-ligatona,.t-caminhada{background:var(--cp-warning-bg)}
.t-bicicletada{background:var(--cp-success-bg)}

/* menus e camadas: raio 8 e sombra 2 (sombra só para mostrar camada) */
.mais .opcoes,.agenda .opcoes,.pop-cidade,#sugestoes{border-radius:var(--cp-radius-md);box-shadow:var(--cp-shadow-2)}
.mais summary{width:44px;height:44px}
.mais .opcoes button,.agenda .opcoes a,.agenda .opcoes button{min-height:44px;border-radius:var(--cp-radius-sm)}
.agenda summary{min-height:44px;display:flex;align-items:center}
#recado{border-radius:var(--cp-radius-md)}
.previa .maplibregl-popup-content{border-radius:var(--cp-radius-lg);box-shadow:var(--cp-shadow-2)}
#gaveta{border-radius:var(--cp-radius-lg) var(--cp-radius-lg) 0 0;transition:transform .2s ease}

/* inicial */
/* logo do Comitê no topo da inicial, fora da barra (pedido do Gui: na barra ele a deixava alta demais);
   no celular, respiro de 24 a 32 px entre logo, frase, texto, busca, botão e filtros */
.hero{margin-top:var(--cp-space-6)}
.hero .logo-hero{display:block;width:150px;height:auto;margin:0 auto var(--cp-space-6)}
.hero h1{font-size:var(--cp-text-display);line-height:1;font-weight:900;text-transform:uppercase;color:var(--cp-red-500);max-width:18ch;margin:0 auto var(--cp-space-4)}
.hero p{color:var(--cp-ink-muted);font-size:var(--cp-text-lg);margin-bottom:0}
.hero .caixa{margin-top:var(--cp-space-8)}
.hero .hero-cta{margin-top:var(--cp-space-8);gap:var(--cp-space-3)}
.inicio-pg .filtros{margin-top:var(--cp-space-8);gap:var(--cp-space-3)}
.caixa .busca{box-shadow:var(--cp-shadow-2);border:1.5px solid var(--cp-border-strong)}
.bloco{margin-top:var(--cp-space-12)}
.bloco h2{font-size:var(--cp-text-h2);font-weight:800;line-height:1.15}
.bloco .cab{margin-bottom:var(--cp-space-4)}.bloco .cab a{font-weight:700}
.cidade,.cidade:hover{text-transform:inherit;text-decoration-color:currentColor}
/* filtros: alvo de 44 px; o escolhido fica grafite com letra branca (e negrito, para não depender só da cor) */
.filtro .rot{font-weight:700;color:var(--cp-ink-muted)}
.filtro .pill{min-height:44px;padding:8px 16px;border:1.5px solid var(--cp-border-strong);color:var(--cp-ink);font-weight:500;font-size:var(--cp-text-sm)}
.filtro .pill.ativo,.pill.ativo{background:var(--cp-ink);border-color:var(--cp-ink);color:#fff;font-weight:700;box-shadow:none}
.quando{background:var(--cp-surface-alt)}.pill{min-height:36px;color:var(--cp-ink-muted)}
.chip{border-radius:var(--cp-radius-md);box-shadow:var(--cp-shadow-1);color:var(--cp-ink-muted);min-height:44px}
.chip.ativo{border-color:var(--cp-ink);color:var(--cp-ink);font-weight:700}

/* mapa */
.etiqueta{font-weight:700;box-shadow:var(--cp-shadow-2)}
/* ação hoje: pino amarelo com estrela vermelha; no horário: vermelho com estrela amarela piscando (index.html, conteudoPino) */
.etiqueta.m-hoje,.amostra-pino.m-hoje{background:var(--cp-yellow-400);color:var(--cp-ink);box-shadow:0 0 0 2px var(--cp-red-500),var(--cp-shadow-2)}
.etiqueta.m-hoje .estrela,.amostra-pino.m-hoje .estrela{color:var(--cp-red-500);font-size:1.25em;line-height:1}
.etiqueta.m-agora,.amostra-pino.m-agora{background:var(--cp-red-500);color:#fff;box-shadow:0 0 0 2px var(--cp-yellow-400),var(--cp-shadow-2)}
.etiqueta.m-agora .estrela,.amostra-pino.m-agora .estrela{color:var(--cp-yellow-400);font-size:1.3em;line-height:1}
.etiqueta.foco{background:var(--cp-ink);color:#fff}
.etiqueta.sel{background:var(--cp-red-500);box-shadow:0 3px 12px rgb(195 9 10 / .45)}
.card.sel{background:var(--cp-danger-bg);border-left-color:var(--cp-red-500)}.card.sel .tit{color:var(--cp-red-700)}
.perfil-topo .letra{background:var(--cp-red-500);font-weight:900}

/* barra de abas (celular): branca, aba ativa em vermelho e sublinhada, inativas em grafite; respeita a área segura */
nav{background:var(--cp-surface);border-top:1px solid var(--cp-border);padding-bottom:env(safe-area-inset-bottom,0px)}
nav a{color:var(--cp-ink-muted);font-size:var(--cp-text-xs);font-weight:700}
nav a.ativo{color:var(--cp-red-500)}
nav a.cta{background:var(--cp-red-500);color:#fff}nav a.cta.ativo{color:#fff;background:var(--cp-red-700)}
nav a:focus-visible{border-radius:var(--cp-radius-md)}nav a.cta:focus-visible{box-shadow:var(--cp-focus-red)}
@media (max-width:899px){
  nav a.ativo:not(.cta)>span:last-child{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:3px}
}

/* cabeçalho (desktop): vermelho, "Bora Lula" à esquerda; o item ativo ocupa a altura toda da barra e leva o
   sublinhado grosso amarelo colado na borda de baixo */
@media (min-width:900px){
  /* 64 px de margem dos lados na barra (pedido de 12/10) */
  :root{--cab:64px;--margem-lado:64px}
  nav{background:var(--cp-red-500);border-top:0;border-bottom:0;padding-bottom:0}
  nav .barra{max-width:none;padding:0 var(--margem-lado)}
  /* faixa das fotos (pedido de 12/10): o logo do Comitê na linha do "Bora Lula" da barra (64 px) e no meio da altura
     da faixa; os números ficam no alto à direita */
  .faixa-marca{left:var(--margem-lado)}
  /* marca como na capa do link (pedido do Gui em 2026-10-10): BORA sobre LULA na letra do título da agenda Bora Lula,
     sem o AGENDA; SVG com o contorno das letras, gerado por scripts/gerar_capa.py */
  nav .marca{align-items:center;height:var(--cab);padding:0 8px 0 0}
  nav .marca img{display:block;height:36px;width:auto}  /* 14 px de respiro acima e abaixo na barra de 64 */
  nav .marca:hover{background:none}
  nav a{color:#fff;font-size:var(--cp-text-sm);font-weight:700;height:var(--cab);border-radius:0}
  nav a:hover{background:rgb(255 255 255 / .14)}
  nav a.ativo{color:#fff;background:none;box-shadow:inset 0 -4px 0 var(--cp-yellow-400);border-radius:0}
  nav a:focus-visible{box-shadow:var(--cp-focus-red)}
  /* ação principal sobre vermelho: botão branco com texto grafite */
  nav a.cta{background:#fff;color:var(--cp-ink);border-radius:var(--cp-radius-pill);padding:0 var(--cp-space-6);height:44px}
  nav a.cta:hover,nav a.cta.ativo{background:var(--cp-surface-alt);color:var(--cp-ink);box-shadow:none}
  nav a.cta:focus-visible{box-shadow:var(--cp-focus-red)}
  .hero{margin-top:0}.hero .logo-hero{width:180px}
  .pagina{padding-top:var(--cp-space-8)}
  .acao-lado{border-color:var(--cp-border);border-radius:var(--cp-radius-md);box-shadow:var(--cp-shadow-1)}
  #gaveta{border-radius:var(--cp-radius-lg);box-shadow:var(--cp-shadow-2)}
  .trilho{gap:var(--cp-space-6)}
  .evento{transition:box-shadow .15s}.foto{transition:none}
  .evento:hover .foto{transform:none;box-shadow:none}.evento:hover{box-shadow:var(--cp-shadow-2)}
  .bloco{margin-top:var(--cp-space-16)}
}
/* barra única (pedido de 12/10/2026, no jeito da Netflix): Início, Mapa, Salvos e Painel junto da marca, à esquerda; Ajuda e a
   conta à direita. A ordem vem daqui porque o boralula acrescenta o Painel no fim da barra (tools/agenda_menu.html) */
nav .marca{order:0}nav a[data-rota=inicio]{order:1}nav a[data-rota=mapa]{order:2}nav a[data-rota=salvos]{order:3}nav a[data-rota=fila]{order:5}
nav #ajuda{order:8}nav .conta{order:9}
/* link da barra que vai para o menu da conta (data-menu-conta): não aparece na barra */
nav a[data-menu-conta]{display:none!important}
/* a conta: a bolinha diz se a pessoa entrou (vazia: não; com a inicial: sim). No celular é a última aba e o menu abre
   para cima; no computador, a bolinha e o e-mail, com o menu para baixo */
nav .conta{flex:1;display:flex;position:relative;min-width:0}
nav .conta-menu{flex:1;display:flex;min-width:0}
nav .conta>a,nav .conta summary{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-width:0;
  color:var(--cp-ink-muted);font-size:var(--cp-text-xs);font-weight:700;text-decoration:none;cursor:pointer;list-style:none}
nav .conta summary::-webkit-details-marker{display:none}
nav .conta summary:focus-visible{box-shadow:var(--cp-focus-light);border-radius:var(--cp-radius-md)}
.bolinha{flex:none;width:22px;height:22px;border-radius:50%;border:2px solid currentColor;display:inline-flex;align-items:center;
  justify-content:center;font:800 13px/1 var(--cp-font)}
.bolinha svg{width:15px;height:15px}
.bolinha.logado{background:var(--cp-red-500);border-color:var(--cp-red-500);color:#fff}
nav .conta .seta{display:none;width:16px;height:16px;flex:none}
nav .conta-email{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* o menu da conta: camada branca, raio 8, sombra 2, itens de 44 px */
#conta .opcoes{position:absolute;right:8px;bottom:calc(100% + 8px);z-index:1001;min-width:240px;max-width:calc(100vw - 16px);
  display:flex;flex-direction:column;padding:var(--cp-space-2);background:var(--cp-surface);border:1px solid var(--cp-border);
  border-radius:var(--cp-radius-md);box-shadow:var(--cp-shadow-2)}
#conta .opcoes a,#conta .opcoes button{flex:none;display:flex;flex-direction:row;align-items:center;justify-content:flex-start;
  width:100%;min-height:44px;height:auto;padding:0 var(--cp-space-3);margin:0;border:0;border-radius:var(--cp-radius-sm);background:none;box-shadow:none;
  color:var(--cp-ink);font:500 var(--cp-text-sm)/1.2 var(--cp-font);text-align:left;text-decoration:none;text-shadow:none;cursor:pointer}
#conta .opcoes a:hover,#conta .opcoes button:hover{background:var(--cp-surface-alt);color:var(--cp-ink)}
#conta .opcoes a:focus-visible,#conta .opcoes button:focus-visible{box-shadow:var(--cp-focus-light)}
#conta .conta-quem{display:flex;flex-direction:column;min-width:0;padding:var(--cp-space-2) var(--cp-space-3) 10px;margin-bottom:6px;border-bottom:1px solid var(--cp-border)}
#conta .conta-quem b{color:var(--cp-ink);font-size:var(--cp-text-sm)}
#conta .conta-quem span{color:var(--cp-ink-muted);font-size:var(--cp-text-xs);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#conta .opcoes .conta-sair{margin-top:6px;border-top:1px solid var(--cp-border);border-radius:0 0 var(--cp-radius-sm) var(--cp-radius-sm);font-weight:700}
@media (min-width:900px){
  nav .marca{margin-right:var(--cp-space-4)}
  nav #ajuda{margin-left:auto}
  nav .conta{flex:0 0 auto}
  nav .conta-menu{flex:0 0 auto}
  nav .conta>a,nav .conta summary{flex-direction:row;gap:10px;height:var(--cab);padding:0 0 0 var(--cp-space-3);color:#fff;font-size:var(--cp-text-sm)}
  nav .conta>a{padding-right:var(--cp-space-3)}
  nav .conta>a:hover,nav .conta summary:hover,nav .conta-menu[open] summary{background:rgb(255 255 255 / .14)}
  nav .conta summary{padding-right:var(--cp-space-2)}
  nav .conta summary:focus-visible,nav .conta>a:focus-visible{box-shadow:var(--cp-focus-red);border-radius:0}
  .bolinha{width:32px;height:32px;font-size:15px}
  .bolinha svg{width:20px;height:20px}
  /* sobre o vermelho, a bolinha de quem entrou é amarela com a letra grafite */
  nav .bolinha.logado{background:var(--cp-yellow-400);border-color:var(--cp-yellow-400);color:var(--cp-ink)}
  nav .conta .seta{display:block}
  nav .conta-email{max-width:220px}
  #conta .opcoes{top:calc(100% - 4px);bottom:auto;right:0}
}
/* entre 900 e 1199 px fica só a bolinha (o e-mail continua no title e no menu) */
@media (min-width:900px) and (max-width:1199px){nav .conta-email{display:none}}

/* busca da inicial, como no Airbnb (pedido de 12/10/2026): Onde · Quando · O que e o Buscar. No celular, um cartão com
   os três campos um embaixo do outro e o Buscar na largura toda; no computador, uma pílula com divisórias, e o campo
   aberto ganha fundo branco com sombra sobre o cinza dos outros. A escolha abre numa camada embaixo (raio 16, sombra 2).
   O z-index põe a barra (e a camada) acima do que vem depois na página: o transform que a centraliza no computador cria um
   contexto de empilhamento, e sem ele a camada do "O que" ficava por baixo do "Perto de você" e dos cards (12/10/2026) */
.busca-tripla{position:relative;z-index:40;display:grid;grid-template-columns:1fr;max-width:860px;margin:var(--cp-space-8) auto 0;text-align:left;
  background:var(--cp-surface);border:1.5px solid var(--cp-border-strong);border-radius:var(--cp-radius-lg);box-shadow:var(--cp-shadow-2)}
.bt-seg{display:flex;flex-direction:column;justify-content:center;gap:2px;min-width:0;min-height:60px;margin:0;padding:10px 20px;
  background:none;border:0;border-top:1px solid var(--cp-border);border-radius:0;color:var(--cp-ink);font:inherit;text-align:left;cursor:pointer}
.bt-seg:first-child{border-top:0;border-radius:var(--cp-radius-lg) var(--cp-radius-lg) 0 0}
.bt-seg label,.bt-rot{display:block;margin:0;font-size:var(--cp-text-xs);font-weight:800;color:var(--cp-ink);letter-spacing:.02em;cursor:pointer}
.bt-val{overflow:hidden;color:var(--cp-ink-muted);font-size:var(--cp-text-md);font-weight:500;white-space:nowrap;text-overflow:ellipsis}
.bt-val.marcado{color:var(--cp-ink);font-weight:700}
.bt-onde input,.bt-onde input:focus,.bt-onde input:focus-visible{width:100%;height:auto;min-height:0;margin:0;padding:0;border:0;border-radius:0;box-shadow:none;outline:none;
  background:none;color:var(--cp-ink);font:500 var(--cp-text-md)/1.45 var(--cp-font)}
.bt-onde input::placeholder{color:var(--cp-ink-muted);opacity:1}
.bt-onde:focus-within{box-shadow:inset 0 0 0 2px var(--cp-ink)}
.bt-seg:focus-visible{box-shadow:inset 0 0 0 3px var(--cp-ink);border-radius:var(--cp-radius-md)}
.bt-buscar{display:flex;align-items:center;justify-content:center;gap:8px;min-height:48px;margin:8px;padding:0 24px;border:0;
  border-radius:var(--cp-radius-pill);background:var(--cp-red-500);color:#fff;font:700 var(--cp-text-md)/1 var(--cp-font);cursor:pointer;transition:background-color .15s}
.bt-buscar:hover{background:var(--cp-red-600)}.bt-buscar:active{background:var(--cp-red-700)}
.bt-buscar:focus-visible{box-shadow:var(--cp-focus-light)}
.bt-buscar svg{width:20px;height:20px}
.bt-pop{padding:var(--cp-space-4) 20px 20px;border-top:1px solid var(--cp-border)}
.bt-pop .pills{display:flex;flex-wrap:wrap;gap:8px}
.bt-pop .pill{min-height:44px;padding:8px 16px;border:1.5px solid var(--cp-border-strong);border-radius:var(--cp-radius-pill);background:var(--cp-surface);
  color:var(--cp-ink);font:500 var(--cp-text-sm)/1.2 var(--cp-font);cursor:pointer}
.bt-pop .pill:hover{border-color:var(--cp-ink)}
.bt-pop .pill.ativo{background:var(--cp-ink);border-color:var(--cp-ink);color:#fff;font-weight:700}
.bt-pop .datas{margin-top:12px}
.bt-tit{margin:var(--cp-space-4) 0 var(--cp-space-2);color:var(--cp-ink);font-size:var(--cp-text-sm);font-weight:800}
.bt-tit:first-child{margin-top:0}
.bt-tit label{display:inline;margin:0;font:inherit}
.bt-palavra input{width:100%}
.bt-perto{display:flex;align-items:center;gap:8px;width:100%;min-height:44px;padding:0 12px;border:0;border-radius:var(--cp-radius-md);
  background:var(--cp-surface-alt);color:var(--cp-ink);font:700 var(--cp-text-sm)/1.2 var(--cp-font);cursor:pointer}
.bt-perto:hover{background:var(--cp-border)}
.bt-sug{display:flex;flex-direction:column;margin-top:6px}
.bt-sug:empty{display:none}
.bt-sug button{display:flex;flex-direction:column;align-items:flex-start;gap:1px;min-height:44px;padding:6px 12px;border:0;border-radius:var(--cp-radius-md);
  background:none;color:var(--cp-ink);font:500 var(--cp-text-md)/1.3 var(--cp-font);text-align:left;cursor:pointer}
.bt-sug button:hover,.bt-sug button:focus-visible{background:var(--cp-surface-alt)}
.bt-sug small{color:var(--cp-ink-muted);font-size:var(--cp-text-xs)}
/* no celular, a escolha abre logo embaixo do campo tocado, e o Buscar fica no fim */
.bt-onde{order:0}.bt-pop-onde{order:1}.bt-quando{order:2}.bt-pop-quando{order:3}.bt-oque{order:4}.bt-pop-oque{order:5}.bt-buscar{order:6}
.bt-pop{border-bottom:1px solid var(--cp-border)}
@media (min-width:900px){
  /* o hero tem 640 px; a barra sai dele e fica com até 860 px, centrada */
  .busca-tripla{width:min(860px,calc(100vw - 48px));max-width:none;left:50%;transform:translateX(-50%);
    grid-template-columns:minmax(0,1.25fr) minmax(0,1fr) minmax(0,1.15fr) auto;align-items:center;padding:6px;border-radius:var(--cp-radius-pill)}
  .busca-tripla.com-aberto{background:var(--cp-surface-alt)}
  .bt-seg,.bt-seg:first-child{position:relative;min-height:58px;padding:8px 24px;border-top:0;border-radius:var(--cp-radius-pill)}
  /* divisória reta entre os campos; some junto do campo aberto ou com o mouse em cima */
  .bt-seg+.bt-seg::before{content:"";position:absolute;left:0;top:25%;height:50%;border-left:1px solid var(--cp-border)}
  .bt-seg:hover::before,.bt-seg:hover+.bt-seg::before,.bt-seg.aberto::before,.bt-seg.aberto+.bt-seg::before{border-left-color:transparent}
  .bt-seg:hover{background:var(--cp-surface-alt)}
  .busca-tripla.com-aberto .bt-seg:hover{background:var(--cp-border)}
  .bt-seg.aberto,.busca-tripla.com-aberto .bt-seg.aberto:hover{background:var(--cp-surface);box-shadow:var(--cp-shadow-2)}
  .bt-onde:focus-within{box-shadow:var(--cp-shadow-2)}
  .bt-buscar{margin:0 0 0 8px;min-height:52px}
  .bt-pop{position:absolute;top:calc(100% + 12px);z-index:30;width:min(560px,100%);padding:var(--cp-space-6);border:1px solid var(--cp-border);
    border-radius:var(--cp-radius-lg);background:var(--cp-surface);box-shadow:var(--cp-shadow-2)}
  .bt-pop-onde{left:0;width:min(400px,100%)}
  .bt-pop-quando{left:22%}
  .bt-pop-oque{right:0}
}

/* os números da faixa (pedido de 12/10/2026): um painel translúcido, um vidro escuro com desfoque, que os separa das fotos
   sem esconder a foto; uma linha fina entre um número e outro */
@media (min-width:900px){
  .faixa-fotos .contadores,.faixa-mapa .contadores{gap:0;padding:12px 4px;border:1px solid rgb(255 255 255 / .24);
    border-radius:var(--cp-radius-lg);background:rgb(20 20 20 / .42);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
    box-shadow:var(--cp-shadow-2)}
  .faixa-fotos .contador,.faixa-mapa .contador{padding:0 18px}
  .faixa-fotos .contador+.contador,.faixa-mapa .contador+.contador{border-left:1px solid rgb(255 255 255 / .26)}
  .faixa-mapa .contadores{padding:8px 2px}.faixa-mapa .contador{padding:0 14px}
}
/* entre 900 e 1099 px o nome e os itens da barra não cabem em tamanho cheio; na faixa das fotos, os números ficam menores
   para o painel não encostar no logo do Comitê (na linha dos 64 px) */
@media (min-width:900px) and (max-width:1099px){nav .marca img{height:32px}nav a{padding:0 10px}
  .faixa-fotos .contador{padding:0 12px}.faixa-fotos .contador b{font-size:26px}}

/* "Divulgação pública": ação importada que a moderação ainda não conferiu. Etiqueta discreta (cinza, contorno),
   e na página da ação um aviso em amarelo-claro do guia (fundo de alerta, texto escuro) */
.tag-divulga{display:inline-block;font-size:12px;font-weight:700;line-height:1.4;color:var(--cp-ink-muted);background:var(--cp-surface-alt);
  border:1px solid var(--cp-border);border-radius:var(--cp-radius-pill);padding:1px 9px;letter-spacing:.01em}
.aviso-divulga{background:var(--cp-warning-bg);color:var(--cp-warning-fg);border-radius:var(--cp-radius-md);padding:10px 12px;margin:10px 0 12px;font-size:15px;line-height:1.45}
/* coração (salvar) no canto do card e na página da ação; tela Salvos (spec 2026-10-12-recomendacao-de-eventos) */
.evento-caixa{position:relative;min-width:0;scroll-snap-align:start}
.coracao{position:absolute;top:8px;right:8px;z-index:2;width:44px;height:44px;padding:0;border:0;border-radius:50%;background:rgba(255,255,255,.92);box-shadow:var(--cp-shadow-1);display:grid;place-items:center;cursor:pointer}
.coracao svg{width:24px;height:24px;fill:none;stroke:var(--cp-ink);stroke-width:2;stroke-linejoin:round}
.coracao[aria-pressed="true"] svg{fill:var(--cp-red-500);stroke:var(--cp-red-500)}
.coracao:focus-visible{outline:3px solid var(--cp-yellow-400);outline-offset:2px}
.evento-caixa .foto .online{top:auto;bottom:10px;right:auto;left:10px}
.titulo-acao{display:flex;align-items:flex-start;gap:12px}
.titulo-acao h1{flex:1;min-width:0}
.titulo-acao .coracao{position:static;flex:none;box-shadow:none;border:1px solid var(--cp-border)}
.salvos-grade{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:24px 16px;margin-top:16px}

/* inicial: convite "Conte do que você gosta" e "Não encontrou nada? Proponha" (spec 2026-10-12-recomendacao-de-eventos) */
.convite-gostos{padding:20px;border-radius:var(--cp-radius-md);background:var(--cp-warning-bg);display:grid;gap:8px;justify-items:start}
.convite-gostos p{margin:0}
.propor{margin:-4px 0 28px;padding:16px;border:1px dashed var(--cp-border-strong);border-radius:var(--cp-radius-md);display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;text-align:left}
.propor p{margin:0;font-size:15px}