/* ==========================================================================
   Site do NA Espírito Santo – estilos
   Mobile first: o estilo base é para celular; telas maiores vêm nos @media.
   Compatibilidade: cada cor tem uma linha com o HEX antes da linha com var(),
   para navegadores que não entendem variáveis (ex.: Opera Mini). Tamanhos com
   clamp() também têm uma linha simples antes, pelo mesmo motivo.
   Sem "gap" em flexbox (não funciona em Safari antigo): espaços com margin.
   ========================================================================== */

:root {
  --na-azul: #211E70;
  --na-amarelo: #F9E423;
  --na-branco: #FEFEFE;
  --cinza-claro: #F2F2F7;
  --fonte: 'Montserrat', Arial, Helvetica, sans-serif;
}

/* ---------- Base ---------- */

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

html {
  /* Impede o iPhone de aumentar o texto sozinho ao girar a tela */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: 'Montserrat', Arial, Helvetica, sans-serif;
  font-family: var(--fonte);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  background: #211E70;
  background: var(--na-azul);
  color: #FEFEFE;
  color: var(--na-branco);
  /* Toque sem o "flash" cinza do Safari/Chrome no celular */
  -webkit-tap-highlight-color: transparent;
}

img,
svg {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
}

/* Garante que "hidden" esconda mesmo elementos com display definido no CSS */
[hidden] {
  display: none !important;
}

/* Foco visível para quem navega pelo teclado */
a:focus-visible,
button:focus-visible,
input:focus-visible {
  outline: 3px solid #F9E423;
  outline: 3px solid var(--na-amarelo);
  outline-offset: 3px;
}

/* Largura máxima + margens laterais respeitando o "notch" do iPhone */
.conteudo {
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
  padding-left: 20px;
  padding-right: 20px;
  padding-left: max(20px, env(safe-area-inset-left));
  padding-right: max(20px, env(safe-area-inset-right));
}

/* Filete amarelo que separa blocos, como nas peças do manual */
.filete {
  width: 64px;
  height: 3px;
  margin: 18px 0;
  border: 0;
  background: #F9E423;
  background: var(--na-amarelo);
}

/* Botão de ação: amarelo com texto azul */
.botao {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  min-height: 52px;
  padding: 12px 20px;
  border-radius: 999px;
  background: #F9E423;
  background: var(--na-amarelo);
  color: #211E70;
  color: var(--na-azul);
  font-size: 18px;
  font-weight: 700;
  text-decoration: none;
  text-align: center;
  -webkit-touch-callout: none;
}

.botao:active {
  -webkit-transform: scale(0.98);
  transform: scale(0.98);
}

.secao-titulo {
  margin: 0 0 20px;
  font-size: 24px;
  font-size: clamp(22px, 6vw, 32px);
  font-weight: 700;
  line-height: 1.2;
}

/* ---------- 1. Topo ---------- */

/* Topo travado no alto ao rolar (sticky). Onde não houver suporte
   (ex.: Opera Mini), ele apenas rola junto com a página. */
.topo {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 10;
  padding-top: 10px;
  padding-top: max(10px, env(safe-area-inset-top));
  padding-bottom: 10px;
  border-bottom: 1px solid #3A347D;
  background: #211E70;
  background: var(--na-azul);
}

.topo-interno {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  align-items: center;
}

.topo-logo {
  -webkit-flex-shrink: 0;
  flex-shrink: 0;
  width: auto;
  height: 40px;
  margin-right: 14px;
}

.topo-comite {
  margin: 0;
  padding-left: 14px;
  border-left: 2px solid #F9E423;
  border-left: 2px solid var(--na-amarelo);
  margin-right: 12px;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.3;
}

/* Link discreto para o painel de atualização (servidores do CSA/ES) */
.topo-acesso {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  align-items: center;
  -webkit-flex-shrink: 0;
  flex-shrink: 0;
  min-height: 44px;
  margin-left: auto;
  padding: 6px 12px;
  border: 1px solid #FEFEFE;
  border: 1px solid var(--na-branco);
  border-radius: 999px;
  color: #FEFEFE;
  color: var(--na-branco);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
}

.topo-acesso-icone {
  width: 15px;
  height: 15px;
  margin-right: 6px;
  fill: currentColor;
}

/* Celular: só "CSA/ES" no topo (o nome completo está no rodapé), para o topo travado
   continuar baixinho e caber o link do painel */
@media (max-width: 479px) {
  .topo-comite-longo {
    display: none;
  }
}

@media (max-width: 359px) {
  .topo-comite {
    display: none;
  }
}

/* Em telas bem estreitas, o link encolhe */
@media (max-width: 400px) {
  .topo-acesso {
    padding: 6px 10px;
    font-size: 12px;
  }

  .topo-acesso-icone {
    display: none;
  }
}

/* ---------- 2. Hero + Linha de Ajuda ---------- */

.hero {
  position: relative;
  overflow: hidden; /* segura a marca d'água sem criar rolagem lateral */
  padding: 24px 0 32px;
}

/* Símbolo grande atrás do conteúdo, já na cor de marca d'água (sem opacidade extra) */
.hero-marca-dagua {
  position: absolute;
  top: 50%;
  right: -35%;
  width: 90%;
  max-width: 560px;
  height: auto;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  pointer-events: none;
  z-index: 0;
}

.hero-interno {
  position: relative;
  z-index: 1;
}

/* Como na placa de rodovia do manual (p. 12): "Problemas com drogas?" em
   uma linha só e "Nós podemos ajudar!" bem menor logo abaixo */
.hero-titulo {
  margin: 0;
  color: #F9E423;
  color: var(--na-amarelo);
  font-size: 18px;
  font-size: clamp(20px, 7vw, 46px);
  font-weight: 900;
  line-height: 1.15;
  letter-spacing: -0.3px;
  white-space: nowrap;
}

/* O "?" grande das peças do manual */
.hero-interrogacao {
  font-size: 1.45em;
  line-height: 0.8;
  vertical-align: -0.08em;
}

.hero-subtitulo {
  display: block;
  margin-top: 2px;
  color: #FEFEFE;
  color: var(--na-branco);
  font-size: 16px;
  font-size: max(17px, 0.72em); /* proporcional ao título, como na placa, sem ficar ilegível */
  font-weight: 700;
  letter-spacing: 0;
}

.ajuda-rotulo {
  margin: 0;
  color: #F9E423;
  color: var(--na-amarelo);
  font-size: 18px;
  font-weight: 700;
}

.ajuda-numero {
  display: -webkit-inline-box;
  display: -webkit-inline-flex;
  display: inline-flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  align-items: center;
  margin: 2px 0 0;
  padding: 4px 0;
  color: #FEFEFE;
  color: var(--na-branco);
  font-size: 36px;
  font-size: clamp(34px, 10vw, 52px);
  font-weight: 900;
  line-height: 1.1;
  text-decoration: none;
  white-space: nowrap;
}

.icone-telefone {
  width: 0.72em;
  height: 0.72em;
  margin-right: 10px;
  fill: #F9E423;
  fill: var(--na-amarelo);
}

.ajuda-dica {
  margin: 0;
  font-size: 14px;
  font-weight: 500;
}

/* Número + WhatsApp na mesma linha quando cabe; senão o botão desce */
.ajuda-linha {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-align: center;
  -webkit-align-items: center;
  align-items: center;
  margin-right: -24px; /* compensa a margem do bloco do número */
}

.ajuda-bloco {
  margin: 0 24px 14px 0;
}

.botao-whatsapp {
  -webkit-box-flex: 1;
  -webkit-flex: 1 1 240px;
  flex: 1 1 240px;
  max-width: 340px;
  margin: 0 24px 14px 0;
}

.icone-conversa {
  -webkit-flex-shrink: 0;
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  margin-right: 10px;
  fill: #211E70;
  fill: var(--na-azul);
}

/* ---------- 3/4. Busca (Etapa 3) ---------- */

.busca {
  padding: 32px 0;
  background: #FEFEFE;
  background: var(--na-branco);
  color: #211E70;
  color: var(--na-azul);
  text-align: center;
}

.busca-form {
  max-width: 560px;
  margin: 0 auto;
}

/* Rótulo só para leitores de tela (o placeholder já orienta quem vê) */
.busca-rotulo {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.busca-campo-caixa {
  position: relative;
}

.campo-busca {
  display: block;
  width: 100%;
  min-height: 56px;
  margin: 0;
  padding: 14px 52px 14px 14px;
  border: 3px solid #211E70;
  border: 3px solid var(--na-azul);
  border-radius: 14px;
  background: #FEFEFE;
  background: var(--na-branco);
  color: #211E70;
  color: var(--na-azul);
  font-family: inherit;
  font-size: 17px; /* 16px ou mais: evita o zoom automático do iPhone */
  font-weight: 500;
  /* Tira o visual próprio do Safari/iPhone no campo de busca */
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.campo-busca::-webkit-search-cancel-button,
.campo-busca::-webkit-search-decoration {
  -webkit-appearance: none;
  display: none;
}

.campo-busca::placeholder {
  color: #5B5896;
  opacity: 1;
  font-size: 15px;
}

/* Celulares bem estreitos: texto de exemplo um pouco menor para caber inteiro */
@media (max-width: 359px) {
  .campo-busca::placeholder {
    font-size: 14px;
  }
}

/* Campo vazio: o "X" está escondido, então o texto de exemplo usa o espaço todo */
.campo-busca:placeholder-shown {
  padding-right: 14px;
}

.campo-busca:focus {
  outline: none;
  border-color: #F9E423;
  border-color: var(--na-amarelo);
  box-shadow: 0 0 0 3px #211E70;
}

.busca-limpar {
  position: absolute;
  top: 50%;
  right: 6px;
  width: 44px;
  height: 44px;
  margin-top: -22px;
  padding: 10px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.busca-limpar svg {
  width: 24px;
  height: 24px;
  fill: #211E70;
  fill: var(--na-azul);
}

.busca-contador {
  margin: 20px 0 12px;
  font-weight: 700;
}

.busca-contador:empty {
  display: none;
}

.busca-sem-js {
  margin: 20px 0 0;
}

/* Nenhum resultado */
.sem-resultado {
  max-width: 560px;
  margin: 8px auto 0;
  padding: 20px;
  border-radius: 14px;
  background: #F2F2F7;
  background: var(--cinza-claro);
}

.sem-resultado p {
  margin: 0 0 12px;
}

.sem-resultado-titulo {
  font-size: 18px;
  font-weight: 700;
}

.sem-resultado-botao {
  max-width: 300px;
  margin: 0 auto 12px;
}

/* ---------- Cards dos grupos ---------- */

/* 1 coluna no celular; 2 no tablet; 3 no computador (ver @media) */
.grupos-lista {
  margin: 0 -8px;
  padding: 0;
  list-style: none;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  text-align: left;
}

.grupos-item {
  width: 100%;
  padding: 8px;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
}

.card-grupo {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-flex-direction: column;
  flex-direction: column;
  width: 100%;
  padding: 18px;
  border: 1px solid #DCDBEA;
  border-top: 5px solid #F9E423;
  border-top: 5px solid var(--na-amarelo);
  border-radius: 14px;
  background: #FEFEFE;
  background: var(--na-branco);
  box-shadow: 0 2px 8px rgba(33, 30, 112, 0.10);
  cursor: pointer;
}

.card-nome {
  margin: 0 0 6px;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.25;
}

.card-cidade {
  margin: 0;
  font-weight: 700;
}

.card-bairro,
.card-endereco {
  margin: 0;
}

.card-endereco {
  margin-top: 4px;
  color: #45427F;
}

/* Espaço entre a última linha de texto e o botão "Ver detalhes" */
.card-grupo > p:last-of-type {
  margin-bottom: 16px;
}

/* "Ver detalhes" sempre no pé do card */
.card-detalhes {
  width: 100%;
  margin-top: auto;
  border: 0;
  font-family: inherit;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

/* Chamada das reuniões online, entre a busca e os cards */
.busca-virtual {
  display: block;
  max-width: 560px;
  margin: 16px auto 0;
  padding: 14px 16px;
  border-radius: 12px;
  border-left: 5px solid #F9E423;
  border-left: 5px solid var(--na-amarelo);
  background: #F2F2F7;
  background: var(--cinza-claro);
  color: #211E70;
  color: var(--na-azul);
  font-size: 16px;
  line-height: 1.4;
  text-decoration: none;
}

.busca-virtual strong {
  display: block;
  margin-top: 2px;
  text-decoration: underline;
}

/* ---------- 5. Links úteis ---------- */

.links-uteis {
  padding: 32px 0;
  background: #F2F2F7;
  background: var(--cinza-claro);
  color: #211E70;
  color: var(--na-azul);
}

.links-lista {
  margin: 0 -6px;
  padding: 0;
  list-style: none;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
}

/* Celular: 2 por linha, alvos de toque grandes */
.links-lista li {
  width: 50%;
  padding: 6px;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
}

.link-cartao {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  width: 100%;
  min-height: 72px;
  padding: 12px 10px;
  border-radius: 12px;
  border-bottom: 4px solid #F9E423;
  border-bottom: 4px solid var(--na-amarelo);
  background: #211E70;
  background: var(--na-azul);
  color: #FEFEFE;
  color: var(--na-branco);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
}

.link-cartao:active {
  background: #3A347D;
}

/* ---------- 6. Rodapé ---------- */

.rodape {
  padding: 32px 0;
  padding-bottom: max(32px, env(safe-area-inset-bottom));
  font-size: 16px;
}

.rodape-logo {
  width: 150px;
  height: auto;
}

.rodape-nome {
  margin: 12px 0 0;
  font-weight: 700;
}

.rodape-linha {
  margin: 0 0 8px;
}

.rodape-rotulo {
  color: #F9E423;
  color: var(--na-amarelo);
  font-weight: 700;
}

/* Área de toque maior nos links do rodapé */
.rodape-destaque {
  display: inline-block;
  padding: 6px 0;
  font-weight: 700;
  text-decoration: underline;
}

.rodape-site {
  margin: 16px 0;
  font-size: 20px;
  font-weight: 700;
}

.rodape-site a {
  color: #F9E423;
  color: var(--na-amarelo);
  text-decoration: none;
}

.rodape-atualizacao,
.rodape-aviso {
  margin: 0 0 6px;
  font-size: 14px;
}

.rodape-aviso a {
  font-weight: 700;
}

/* ---------- Popup de detalhes do grupo ---------- */

/* Fundo escuro que cobre a página. No celular a janela ocupa a tela toda. */
.popup-fundo {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 100; /* acima do topo travado (z-index 10) */
  background: rgba(10, 9, 40, 0.7);
}

.popup {
  width: 100%;
  height: 100%;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch; /* rolagem suave no iPhone antigo */
  overscroll-behavior: contain;
  background: #FEFEFE;
  background: var(--na-branco);
  color: #211E70;
  color: var(--na-azul);
  outline: none;
}

/* Barra azul com o nome do grupo e o X, sempre visível ao rolar a janela */
.popup-barra {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 2;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  align-items: center;
  padding: 8px 8px 8px 20px;
  padding-top: max(8px, env(safe-area-inset-top));
  background: #211E70;
  background: var(--na-azul);
  color: #FEFEFE;
  color: var(--na-branco);
  border-bottom: 3px solid #F9E423;
  border-bottom: 3px solid var(--na-amarelo);
}

.popup-titulo {
  -webkit-box-flex: 1;
  -webkit-flex: 1 1 auto;
  flex: 1 1 auto;
  margin: 0 8px 0 0;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.25;
}

.popup-fechar {
  -webkit-flex-shrink: 0;
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  padding: 12px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.popup-fechar svg {
  width: 24px;
  height: 24px;
  fill: #FEFEFE;
  fill: var(--na-branco);
}

.popup-corpo {
  padding: 18px 20px 28px;
  padding-bottom: max(28px, env(safe-area-inset-bottom));
}

.popup-local {
  margin: 0 0 16px;
  font-size: 18px;
  font-weight: 700;
}

.popup-subtitulo {
  margin: 20px 0 8px;
  font-size: 17px;
  font-weight: 700;
}

.popup-endereco,
.popup-referencia {
  margin: 0;
}

.popup-referencia {
  margin-top: 6px;
  color: #45427F;
}

/* Tabela de reuniões */
.popup-reunioes {
  width: 100%;
  border-collapse: collapse;
  font-size: 16px;
}

.popup-reunioes th {
  padding: 6px 6px 6px 0;
  border-bottom: 2px solid #211E70;
  border-bottom: 2px solid var(--na-azul);
  font-size: 14px;
  font-weight: 700;
  text-align: left;
}

.popup-reunioes td {
  padding: 8px 6px 8px 0;
  border-bottom: 1px solid #DCDBEA;
  vertical-align: middle;
}

.popup-reunioes .popup-dia {
  font-weight: 700;
}

/* Linha da observação fica "grudada" na reunião de cima */
.popup-reunioes .popup-com-obs td {
  border-bottom: 0;
  padding-bottom: 0;
}

.popup-reunioes .popup-obs td {
  padding-top: 2px;
  font-size: 14px;
  font-style: italic;
}

.popup-tipo {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  align-items: center;
  white-space: nowrap;
}

/* Botão "i" depois de Aberta/Fechada */
.popup-info {
  -webkit-flex-shrink: 0;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  margin: -8px -8px -8px 0;
  padding: 9px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.icone-info {
  display: block;
  width: 22px;
  height: 22px;
  fill: #211E70;
  fill: var(--na-azul);
}

.popup-info[aria-expanded="true"] .icone-info {
  fill: #5B5896;
}

.popup-info-texto {
  margin: 12px 0 0;
  padding: 12px 14px;
  border-left: 4px solid #F9E423;
  border-left: 4px solid var(--na-amarelo);
  border-radius: 8px;
  background: #F2F2F7;
  background: var(--cinza-claro);
  font-size: 15px;
  line-height: 1.5;
}

.popup-info-texto p {
  margin: 0 0 8px;
}

.popup-info-texto p:last-child {
  margin-bottom: 0;
}

/* Mapa do Google (criado só quando a janela abre) */
.popup-mapa {
  margin: 20px 0 12px;
  border-radius: 12px;
  overflow: hidden;
  background: #F2F2F7;
  background: var(--cinza-claro);
}

.popup-mapa iframe {
  display: block;
  width: 100%;
  height: 240px;
  border: 0;
}

.popup-maps {
  width: 100%;
}

.popup-ajuda {
  margin: 24px 0 10px;
  padding-top: 16px;
  border-top: 1px solid #DCDBEA;
  font-size: 15px;
  text-align: center;
}

.popup-ajuda a {
  font-weight: 900;
  white-space: nowrap;
}

/* O botão do WhatsApp da página usa margens pensadas para o topo; aqui não */
.popup .botao-whatsapp {
  max-width: none;
  margin: 0;
}

/* ---------- Tablet (a partir de 600px) ---------- */

@media (min-width: 600px) {
  .topo-logo {
    height: 52px;
  }

  .topo-comite {
    font-size: 15px;
  }

  .hero {
    padding: 48px 0 56px;
  }

  .hero-marca-dagua {
    right: -10%;
    width: 60%;
  }

  .links-lista li {
    width: 33.333%;
  }

  .grupos-item {
    width: 50%;
  }
}

/* ---------- Computador (a partir de 960px) ---------- */

@media (min-width: 960px) {
  .hero {
    padding: 72px 0 80px;
  }

  .hero-marca-dagua {
    right: 4%;
    width: 42%;
  }

  .busca,
  .links-uteis,
  .rodape {
    padding-top: 48px;
    padding-bottom: 48px;
  }

  .link-cartao:hover {
    background: #3A347D;
  }

  .grupos-item {
    width: 33.333%;
  }

  .card-grupo:hover {
    box-shadow: 0 4px 16px rgba(33, 30, 112, 0.22);
  }

  /* No computador a janela fica centralizada, com o fundo escuro em volta */
  .popup {
    max-width: 640px;
    height: auto;
    max-height: 90%;
    margin: 3% auto 0;
    border-radius: 16px;
  }

  .popup-mapa iframe {
    height: 300px;
  }

  .botao:hover {
    -webkit-filter: brightness(1.05);
    filter: brightness(1.05);
  }
}

/* Quem pediu menos animação no celular não vê o efeito de toque */
@media (prefers-reduced-motion: reduce) {
  .botao:active {
    -webkit-transform: none;
    transform: none;
  }
}

/* ==========================================================================
   Página "Todos os grupos por cidade" (site/grupos/, gerada por script)
   ========================================================================== */

.lista-pagina {
  padding: 24px 0 40px;
  background: #FEFEFE;
  background: var(--na-branco);
  color: #211E70;
  color: var(--na-azul);
}

.lista-pagina a {
  font-weight: 700;
}

.lista-titulo {
  margin: 8px 0 12px;
  font-size: 26px;
  font-weight: 900;
  line-height: 1.2;
}

.lista-subtitulo {
  margin: 28px 0 8px;
  font-size: 20px;
  font-weight: 700;
}

.lista-ajuda {
  padding: 12px 14px;
  border-left: 4px solid #F9E423;
  border-left: 4px solid var(--na-amarelo);
  background: #F2F2F7;
  background: var(--cinza-claro);
}

.lista-voltar {
  margin: 0 0 8px;
}

.lista-indice p {
  line-height: 2;
}

.lista-cidade {
  margin-top: 32px;
}

.lista-cidade-nome {
  margin: 0 0 8px;
  padding-bottom: 6px;
  border-bottom: 3px solid #F9E423;
  border-bottom: 3px solid var(--na-amarelo);
  font-size: 22px;
  font-weight: 900;
}

.lista-grupo {
  padding: 14px 0;
  border-bottom: 1px solid #DADCE8;
}

.lista-grupo p {
  margin: 4px 0;
}

.lista-grupo-nome {
  margin: 0 0 4px;
  font-size: 18px;
  font-weight: 700;
}

.lista-reunioes {
  margin: 6px 0;
  padding-left: 20px;
}

.busca-todos {
  margin: 24px 0 0;
  text-align: center;
}

.busca-todos a {
  font-weight: 700;
}