/* Portal CAR — site público: agenda, página do evento e ficha de inscrição.
   Carregar depois de tokens.css e site.css. */

/* ---------------------------------------------------------------- agenda */

.secao-agenda {
  margin: 8px 0 40px;
}

.secao-agenda h2 {
  font-size: clamp(1.3rem, 1.1rem + 1vw, 1.75rem);
  margin: 0 0 4px;
}

.secao-agenda .apoio {
  margin-bottom: 20px;
}

.agenda {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Cartão ocupa a altura toda da linha: título de duas linhas num evento não
   pode deixar o cartão vizinho pendurado no ar. */
.agenda > li {
  display: flex;
}

/* ------------------------------------------- calendário (agenda.php)

   A página da agenda é o quadro inteiro: o mesmo card de evento da home,
   só que agrupado pelo mês em que o encontro acontece. É o agrupamento que
   dá cara de calendário — sem ele a lista de cartazes seria uma fila sem
   referência de tempo. */

.agenda-apoio {
  max-width: 60ch;
  margin-bottom: 28px;
}

.agenda-mes {
  margin-bottom: 36px;
}

/* O nome do mês é a régua da página: fica preso na linha âmbar para o olho
   achar de novo o começo do bloco depois de rolar. */
.agenda-mes-titulo {
  margin: 0 0 16px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--linha);
  font-family: var(--fonte-display);
  font-size: clamp(1.25rem, 1.05rem + .9vw, 1.6rem);
  font-weight: 400;
  letter-spacing: .5px;
  color: var(--ambar);
}

.evento-card {
  display: flex;
  flex: 1;
  flex-direction: column;
  background: var(--grafite);
  border: 1px solid var(--linha);
  border-radius: var(--raio-card);
  box-shadow: var(--sombra);
  overflow: hidden;
  color: var(--branco);
  transition: transform var(--transicao), border-color var(--transicao);
}

a.evento-card:hover,
a.evento-card:focus-visible {
  border-color: var(--ambar);
  text-decoration: none;
  transform: translateY(-3px);
}

.evento-card .capa {
  aspect-ratio: 16 / 9;
  width: 100%;
  object-fit: cover;
  display: block;
  background: var(--grafite-2);
}

/* Evento sem foto: xadrez de bandeira em vez de buraco branco. */
.evento-card .capa-vazia {
  aspect-ratio: 16 / 9;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    repeating-conic-gradient(var(--grafite-2) 0% 25%, var(--preto) 0% 50%) 0 0 / 36px 36px;
  color: var(--prata);
}

.evento-card .corpo {
  padding: 16px 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}

.evento-card h3 {
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.35;
}

.evento-card .meta {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--prata);
  font-size: .875rem;
}

.evento-card .rodape-card {
  margin-top: auto;
  padding-top: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.evento-card .abrir {
  color: var(--ambar);
  font-weight: 600;
  font-size: .9rem;
}

/* ===================================================== quadro da agenda

   O destaque, a linha compacta e o quadro do que já aconteceu. Moram aqui
   — e não no construcao.css, que é da página inicial — porque a home e a
   agenda.php mostram as mesmas peças, e CSS que só existe numa das duas
   quebra a outra em silêncio. Quem monta a marcação é includes/eventos.php:
   evento_destaque(), evento_linha() e eventos_realizados_painel(). */

/* Título miúdo dentro da seção — "Também na agenda", "Logo depois". */
.secao-titulo {
  margin: 0 0 14px;
  color: var(--prata);
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
}

/* Cabeçalho das seções da página da agenda. */
.agenda-secao {
  margin: 0 0 44px;
}

.agenda-secao-titulo {
  margin: 0 0 18px;
  font-size: clamp(1.25rem, 1.05rem + .9vw, 1.65rem);
  line-height: 1.2;
}

/* ---------- Destaque + lista ao lado ----------

   Um evento grande e os seguintes em linhas à direita. Dois cartazes do
   mesmo tamanho lado a lado não dizem qual é o próximo; um grande e uma
   lista dizem. Abaixo de 900px a lista desce para debaixo do destaque, que
   é onde ela cabe sem espremer nem um nem outro. */
.agenda-com-lista {
  display: grid;
  gap: 22px;
  grid-template-columns: minmax(0, 1.65fr) minmax(250px, .85fr);
  align-items: start;
}

/* Sem ninguém na fila, o destaque ocupa a largura toda. */
.agenda-com-lista.sem-lista {
  grid-template-columns: 1fr;
}

/* Dentro da dupla o destaque tem menos espaço: a foto cede um pouco para o
   texto, que é quem carrega data, local e o botão da inscrição. */
.agenda-com-lista .destaque {
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
}

/* Na coluna estreita o título do destaque desce um degrau: com o tamanho
   cheio ele quebrava em cinco linhas de uma palavra. */
.agenda-com-lista .destaque-titulo {
  font-size: clamp(1.2rem, 1rem + .9vw, 1.55rem);
}

.agenda-proximos {
  min-width: 0;
}

.agenda-proximos-mais {
  margin: 14px 0 0;
  font-size: .875rem;
}

.agenda-proximos-mais a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--prata);
  font-weight: 600;
}

.agenda-proximos-mais a:hover,
.agenda-proximos-mais a:focus-visible {
  color: var(--ambar);
}

/* ---------- A coluna ao lado do destaque (home) ----------

   Calendário do mês em cima, "Também na agenda" embaixo. A coluna inteira
   é presa à altura do cartão do próximo encontro: o que passar disso rola
   dentro da lista, e não estica a seção. Sem isso, seis linhas ao lado de
   um destaque de 500px deixavam a página com um degrau à direita. */
.agenda-lateral {
  min-width: 0;
}

.agenda-lateral-caixa {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.agenda-lateral .secao-titulo {
  margin-bottom: 10px;
}

.agenda-lateral .agenda-proximos {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}

.agenda-lateral .agenda-rolagem {
  min-height: 0;
}

.agenda-lateral .agenda-proximos-mais {
  margin: 0;
}

/* Na coluna dividida com o calendário a linha vem miúda: com o cartaz de
   84px sobravam menos de duas na janela de rolagem, e lista de uma linha
   só não se lê como lista. */
.agenda-lateral .evento-linha {
  grid-template-columns: 68px minmax(0, 1fr);
  gap: 11px;
  padding: 7px 11px 7px 7px;
}

/* A trava de altura é só de quem tem as duas coisas na coluna — calendário
   e lista. Com o calendário sozinho não há o que rolar, e prender a coluna
   a 480px deixaria um vão embaixo dele. */
@media (min-width: 901px) {
  /* Os dois cartões terminam na mesma linha: a altura da fila é a do mais
     alto e o destaque acompanha, em vez de deixar um degrau à direita. */
  .agenda-com-lista.com-calendario {
    align-items: stretch;
  }

  /* A altura da linha do grid é do destaque; a coluna se estica até ela
     (align-self) e o miolo é preso por dentro, fora do fluxo — assim o
     conteúdo da coluna nunca é quem manda na altura. O min-height é o
     piso: calendário mais duas linhas de encontro, para destaque baixinho
     não espremer a lista até sumir. */
  .com-calendario .agenda-lateral {
    position: relative;
    align-self: stretch;
    min-height: 480px;
  }

  .com-calendario .agenda-lateral-caixa {
    position: absolute;
    inset: 0;
    /* Rede: o que não couber na coluna continua alcançável em vez de sumir
       cortado. */
    overflow-y: auto;
  }

  .com-calendario .agenda-rolagem {
    flex: 1 1 auto;
    overflow-y: auto;
    /* A barra não encosta na borda das linhas. */
    padding-right: 5px;
  }
}

/* Mesma barra das tabelas do painel: a branca do sistema num tema escuro
   entrega que é outro controle — e não é. */
.agenda-rolagem {
  scrollbar-width: thin;
  scrollbar-color: var(--linha) var(--grafite);
}

.agenda-rolagem::-webkit-scrollbar {
  width: 10px;
}

.agenda-rolagem::-webkit-scrollbar-track {
  background: var(--grafite);
  border-radius: var(--raio-pill);
}

.agenda-rolagem::-webkit-scrollbar-thumb {
  border-radius: var(--raio-pill);
  background: var(--linha);
}

.agenda-rolagem::-webkit-scrollbar-thumb:hover {
  background: var(--prata);
}

/* ---------- Calendário do mês ----------

   O mês inteiro num quadro só, com os dias de encontro em âmbar. É a
   quarta forma de mostrar o mesmo evento — o dia, e não o cartaz —, e quem
   a monta é includes/calendario-mes.php. A troca de mês é link de verdade
   (?mes=AAAA-MM) e o detalhe do dia abre por :target: o quadro funciona
   inteiro sem JavaScript. */
.calendario {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: none;
  padding: 12px 12px 10px;
  background: var(--grafite);
  border: 1px solid var(--linha);
  border-radius: var(--raio-card);
}

.calendario-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  margin-bottom: 8px;
}

.calendario-mes {
  margin: 0;
  font-family: var(--fonte-display);
  font-size: 1.05rem;
  font-weight: 400;
  letter-spacing: .5px;
  line-height: 1.15;
  text-align: center;
}

.calendario-ano {
  color: var(--prata);
}

/* Seta da troca de mês. O `vazio` é o lugar dela no limite da navegação:
   sem ele o nome do mês pularia de lado. */
.calendario-passo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 32px;
  height: 32px;
  border: 1px solid var(--linha);
  border-radius: 50%;
  background: var(--grafite-2);
  color: var(--prata);
  transition: color var(--transicao), border-color var(--transicao),
    background var(--transicao);
}

a.calendario-passo:hover,
a.calendario-passo:focus-visible {
  border-color: var(--ambar);
  color: var(--ambar);
  text-decoration: none;
}

.calendario-passo.vazio {
  border-color: transparent;
  background: none;
}

/* O quadro enquanto o mês vizinho não chega (a troca acontece sem
   recarregar a página — ver assets/js/agenda-calendario.js). Apaga um
   pouco e para de aceitar clique na seta; nada de girar nada, que a espera
   é a de uma consulta e um sinal piscando a cada seta cansa mais do que
   informa. A classe só existe com JavaScript. */
.calendario.carregando {
  opacity: .55;
  transition: opacity var(--transicao);
}

.calendario.carregando .calendario-passo {
  pointer-events: none;
}

/* A moldura da grade: é sobre ela que o dia aberto se deita, e por isso o
   cabeçalho com o mês e as setas continua à vista e clicável. */
.calendario-quadro {
  position: relative;
}

.calendario-grade {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.calendario-grade th {
  padding: 0 0 5px;
  color: var(--prata);
  font-size: .625rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-align: center;
  text-transform: uppercase;
}

.calendario-grade td {
  padding: 2px;
}

/* Quadrado miúdo de propósito: o calendário divide a coluna com a lista de
   encontros, e a altura dos dois junta é a do cartão do próximo encontro. */
.calendario-dia {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 28px;
  padding: 3px 0;
  border: 1px solid transparent;
  border-radius: 9px;
  color: var(--prata);
  font-size: .8125rem;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  transition: background var(--transicao), border-color var(--transicao),
    color var(--transicao);
}

/* O dia de hoje tem anel, e não cor: a cor deste quadro é do dia que tem
   evento — as duas marcas precisam poder aparecer no mesmo quadrado. */
.calendario-dia.hoje {
  box-shadow: inset 0 0 0 2px var(--prata);
  color: var(--branco);
  font-weight: 700;
}

.calendario-dia.com-evento {
  background: rgba(217, 164, 65, .14);
  border-color: rgba(217, 164, 65, .5);
  color: var(--ambar);
  font-weight: 700;
}

/* O que já aconteceu acende mais fraco: continua sendo dia de evento, mas
   não é convite para lugar nenhum. */
.calendario-dia.com-evento.passado {
  background: rgba(154, 163, 173, .1);
  border-color: rgba(154, 163, 173, .35);
  color: var(--prata);
}

a.calendario-dia:hover,
a.calendario-dia:focus-visible {
  background: var(--ambar);
  border-color: var(--ambar);
  color: var(--preto);
  text-decoration: none;
}

.calendario-ponto {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: currentColor;
}

.calendario-vazio {
  margin: 8px 0 2px;
  color: var(--prata);
  font-size: .8125rem;
  line-height: 1.4;
}

/* ---------- O dia aberto ----------

   O detalhe do dia se deita sobre a grade, como uma carta que vira: quem
   clicou no dia quer ver o que tem nele, e o calendário volta no "fechar".
   Empurrando o conteúdo para baixo — que foi a primeira tentativa — ele
   espremia a lista de encontros da coluna, que é presa à altura do cartão
   do destaque e não tem sobra para ceder.

   Escondido até alguém pedir: sem JavaScript quem abre é o :target do
   endereço; com ele, a classe que o script põe (e aí a âncora nem entra no
   endereço). Os dois caminhos abrem o mesmo bloco. */
.calendario-detalhe {
  display: none;
  position: absolute;
  inset: -6px -4px -4px;
  z-index: 2;
  padding: 4px;
  overflow-y: auto;
  background: var(--grafite);
  border-radius: 12px;
}

.calendario-detalhe:target,
.calendario-detalhe.aberto {
  display: block;
}

/* Grade coberta é grade fora do caminho: sem isto o Tab continua passando
   pelos dias que estão embaixo do bloco aberto, e o foco some da tela.
   Navegador sem :has() volta ao de antes — o dia coberto continua clicável,
   que é feio mas não quebra nada. */
.calendario-quadro:has(.calendario-detalhe:target) .calendario-grade,
.calendario-quadro:has(.calendario-detalhe.aberto) .calendario-grade {
  visibility: hidden;
}

.calendario-detalhe:focus-visible {
  outline: none;
}

.calendario-detalhe-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 9px;
}

.calendario-detalhe-titulo {
  margin: 0;
  color: var(--ambar);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .1em;
  line-height: 1.3;
  text-transform: uppercase;
}

.calendario-fechar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 30px;
  height: 30px;
  border: 1px solid var(--linha);
  border-radius: 50%;
  color: var(--prata);
  transition: color var(--transicao), border-color var(--transicao);
}

.calendario-fechar:hover,
.calendario-fechar:focus-visible {
  border-color: var(--ambar);
  color: var(--ambar);
  text-decoration: none;
}


/* No aperto do celular o alvo do dedo não desce de 44px. */
@media (hover: none) {
  .calendario-passo {
    width: 44px;
    height: 44px;
  }

  .calendario-dia {
    min-height: 42px;
  }

  .calendario-fechar {
    width: 44px;
    height: 44px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .calendario-dia,
  .calendario-passo,
  .calendario-fechar,
  .calendario.carregando {
    transition: none;
  }
}

/* ---------- Próximo encontro em destaque ---------- */

/* O primeiro da agenda sai da grade: é a resposta da pergunta que trouxe a
   pessoa até aqui — quando é, onde é e como se inscrever. */
.destaque {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  overflow: hidden;
  background: var(--grafite);
  border: 1px solid var(--linha);
  border-radius: var(--raio-card);
  box-shadow: var(--sombra);
}

/* Fio âmbar no alto: só este cartão o tem em toda a página. */
.destaque::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  z-index: 2;
  background: linear-gradient(90deg, var(--ambar), rgba(217, 164, 65, 0) 72%);
}

.destaque-capa {
  position: relative;
  display: block;
  background: var(--grafite-2);
}

.destaque-capa img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 260px;
  object-fit: cover;
}

/* Encontro sem foto: xadrez de bandeira em vez de buraco vazio. */
.destaque-vazia {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  min-height: 260px;
  color: var(--prata);
  background:
    repeating-conic-gradient(var(--grafite-2) 0% 25%, var(--preto) 0% 50%) 0 0 / 36px 36px;
}

/* Bloco de calendário sobre a foto: a data se lê antes de qualquer texto.
   É repetição visual do que está na lista abaixo — por isso o cartão todo
   sai do fluxo do leitor de tela (aria-hidden no link da capa). */
.destaque-data {
  position: absolute;
  top: 14px;
  left: 14px;
  display: grid;
  justify-items: center;
  gap: 2px;
  min-width: 64px;
  padding: 9px 10px;
  border: 1px solid rgba(217, 164, 65, .55);
  border-radius: 14px;
  background: rgba(10, 11, 13, .82);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  line-height: 1;
}

.destaque-data .dia {
  font-family: var(--fonte-display);
  font-size: 1.75rem;
  color: var(--branco);
}

.destaque-data .mes {
  color: var(--ambar);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.destaque-corpo {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 26px 28px;
}

.destaque-selos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 0;
}

.destaque-contagem {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--prata);
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
}

/* Encontro dentro da semana: a contagem acende. */
.destaque-contagem.urgente {
  color: var(--ambar);
}

.destaque-titulo {
  margin: 0;
  font-size: clamp(1.35rem, 1.1rem + 1.3vw, 1.9rem);
  line-height: 1.2;
}

.destaque-titulo a {
  color: var(--branco);
}

.destaque-titulo a:hover,
.destaque-titulo a:focus-visible {
  color: var(--ambar);
  text-decoration: none;
}

.destaque-dados {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.destaque-dados li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: var(--prata);
  font-size: .9375rem;
  line-height: 1.45;
}

.destaque-dados svg {
  flex: none;
  margin-top: 3px;
  color: var(--ambar);
}

.destaque-dados strong {
  color: var(--branco);
  font-weight: 600;
}

.destaque-acoes {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 6px 0 0;
}

/* ---------- A linha do evento ----------

   Cartaz miúdo, título e data — o evento em duas linhas de texto ao lado
   da imagem. É a forma compacta da agenda (a lista ao lado do destaque e o
   arquivo do que já passou), e a linha inteira é o link.

   Duas colunas, não três: a primeira versão tinha o selo da situação numa
   terceira coluna, e como o selo não quebra ("Inscrições abertas"), ele
   comia a largura do título até deixá-lo em cinco linhas de uma palavra. */
.agenda-linhas {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.evento-linha {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr);
  align-items: center;
  gap: 13px;
  padding: 9px 13px 9px 9px;
  background: var(--grafite);
  border: 1px solid var(--linha);
  border-radius: 13px;
  color: inherit;
  transition: border-color var(--transicao), background var(--transicao),
    transform var(--transicao);
}

a.evento-linha:hover,
a.evento-linha:focus-visible {
  border-color: var(--ambar);
  background: var(--grafite-2);
  text-decoration: none;
  transform: translateX(2px);
}

/* O cartaz aparece como cartaz: sem véu por cima, que é o que a lista tem
   para mostrar de imagem. A data vai por escrito, na linha de baixo. */
.evento-linha-capa {
  display: block;
  overflow: hidden;
  border-radius: 9px;
  aspect-ratio: 16 / 10;
  background: var(--grafite-2);
}

.evento-linha-capa img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.evento-linha-vazia {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: var(--prata);
  background:
    repeating-conic-gradient(var(--grafite-2) 0% 25%, var(--preto) 0% 50%) 0 0 / 16px 16px;
}

.evento-linha-texto {
  display: grid;
  gap: 4px;
  min-width: 0;
}

/* Título longo pára em duas linhas com reticências: a lista é uma régua de
   datas, e linha que cresce sozinha desalinha a régua inteira. */
.evento-linha-titulo {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  color: var(--branco);
  font-weight: 600;
  font-size: .9375rem;
  line-height: 1.3;
}

a.evento-linha:hover .evento-linha-titulo,
a.evento-linha:focus-visible .evento-linha-titulo {
  color: var(--ambar);
}

.evento-linha-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 2px 7px;
  color: var(--prata);
  font-size: .8125rem;
  line-height: 1.3;
}

.evento-linha-meta svg {
  flex: none;
  color: var(--ambar);
}

/* A cidade acompanha a data quando cabe; na linha estreita ela some antes
   do título, que é o que identifica o evento. */
.evento-linha-cidade::before {
  content: "·";
  margin-right: 5px;
}

@media (max-width: 420px) {
  .evento-linha {
    grid-template-columns: 68px minmax(0, 1fr);
  }

  .evento-linha-cidade {
    display: none;
  }
}

/* ---------- O que já aconteceu ----------

   Quadro à parte, no pé da agenda, em linhas e não em cartazes: é memória
   do clube, não convite. Fundo mais fundo que o da página para ler como
   arquivo, e não como mais uma seção de eventos. */
.painel-realizados {
  margin: 8px 0 40px;
  padding: 22px 20px 24px;
  background: var(--grafite);
  border: 1px solid var(--linha);
  border-radius: var(--raio-card);
}

.painel-realizados-titulo {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 4px;
  color: var(--prata);
  font-size: .875rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.painel-realizados-titulo svg {
  flex: none;
  color: var(--ambar);
}

.painel-realizados-apoio {
  margin: 0 0 18px;
  color: var(--prata);
  font-size: .875rem;
}

/* Dentro do quadro a linha já está sobre fundo escuro: ela se separa pelo
   contorno, sem repetir o mesmo cinza do painel. */
.painel-realizados .evento-linha {
  background: transparent;
}

.painel-realizados a.evento-linha:hover,
.painel-realizados a.evento-linha:focus-visible {
  background: var(--grafite-2);
}

@media (max-width: 900px) {
  .agenda-com-lista {
    grid-template-columns: 1fr;
  }

  .agenda-com-lista .destaque {
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  }
}

@media (max-width: 820px) {
  .destaque,
  .agenda-com-lista .destaque {
    grid-template-columns: 1fr;
  }

  .destaque-capa img,
  .destaque-vazia {
    min-height: 0;
    aspect-ratio: 16 / 9;
  }

  .destaque-corpo {
    padding: 22px 20px;
  }

  .destaque-acoes .btn {
    flex: 1 1 220px;
    justify-content: center;
  }
}

@media (max-width: 480px) {
  .destaque-acoes .btn {
    width: 100%;
  }

  .painel-realizados {
    padding: 18px 14px 20px;
  }
}

/* -------------------------------------------------------- página do evento */

/* Caminho de volta no alto da página — quem chegou por link direto também
   descobre que existe uma agenda. */
.voltar-agenda {
  margin: 0 0 14px;
}

.voltar-agenda a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px 8px 0;
  color: var(--prata);
  font-weight: 600;
  font-size: .9rem;
}

.voltar-agenda a:hover,
.voltar-agenda a:focus-visible {
  color: var(--ambar);
}

/* O cartaz do evento.

   É um carrossel de uma foto só — não por capricho, mas porque é o que já
   sabe abrir a foto ampliada numa caixa por cima da página, com Esc, clique
   fora e foco de volta no lugar. Com uma foto o carrossel.js não liga seta,
   marcador nem passagem automática: sobra a foto e o clique que amplia.

   O que muda aqui em relação ao carrossel da história é o recorte. Lá as
   fotos são deitadas e entram numa moldura 3:2 com `cover`, para a tira não
   pular de altura. Cartaz de encontro é quase sempre em pé e cheio de letra
   miúda: recortar a beirada come a data e o telefone da organização. Então
   ele aparece inteiro, encolhendo só até caber na coluna e na tela. */
.cartaz-evento {
  margin: 0;
  max-width: 100%;
}

.cartaz-evento .carrossel-palco {
  background: var(--grafite-2);
  border-radius: var(--raio-card);
}

/* Uma foto só não rola para lado nenhum: nada de meia foto pela beirada
   nem de barra de rolagem, que ali seriam promessa de algo que não existe. */
.cartaz-evento .carrossel-trilho {
  overflow: hidden;
  scrollbar-width: none;
}

.cartaz-evento .carrossel-trilho::-webkit-scrollbar {
  display: none;
}

.cartaz-evento .carrossel-slide {
  flex-basis: 100%;
}

.cartaz-evento .carrossel-quadro {
  aspect-ratio: auto;
  background: transparent;
  cursor: zoom-in;
}

.cartaz-evento .carrossel-quadro img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 70vh;
  object-fit: contain;
  margin: 0 auto;
}

/* Coluna da esquerda: foto em cima, descrição embaixo. */
.evento-principal {
  display: grid;
  gap: 24px;
  align-content: start;
}

.evento-titulo {
  font-size: clamp(1.6rem, 1.2rem + 2vw, 2.4rem);
  line-height: 1.15;
  margin: 0 0 10px;
}

.evento-selos {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}

.evento-colunas {
  display: grid;
  gap: 24px;
  grid-template-columns: minmax(0, 1.6fr) minmax(260px, 1fr);
  align-items: start;
}

/* Evento sem foto e sem descrição não deixa meia tela vazia. */
.evento-colunas.uma-coluna {
  grid-template-columns: 1fr;
  max-width: 520px;
}

@media (max-width: 800px) {
  .evento-colunas {
    grid-template-columns: 1fr;
  }
}

.evento-descricao {
  white-space: pre-line;
  line-height: 1.7;
}

.ficha-dados {
  margin: 0;
}

.ficha-dados div {
  display: flex;
  gap: 10px;
  padding: 9px 0;
  border-bottom: 1px solid var(--linha);
}

.ficha-dados div:last-child {
  border-bottom: none;
}

.ficha-dados dt {
  flex: none;
  width: 92px;
  color: var(--prata);
  font-size: .85rem;
}

.ficha-dados dd {
  margin: 0;
  font-size: .95rem;
}

/* -------------------------------------------------------------- inscrição */

.form-inscricao {
  scroll-margin-top: 20px;
}

.form-inscricao h2 {
  margin-top: 0;
}

/* O que já está na ficha, na tela de adicionar veículo: uma linha por
   veículo, com o número da ficha dele e o nome do dono. É lista de leitura,
   não de escolha — nada aqui é clicável. */
.veiculos-atuais {
  margin: 0 0 20px;
}

.lista-fichas {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  display: grid;
  gap: 8px;
}

.lista-fichas li {
  border: 1px solid var(--linha);
  border-radius: 12px;
  padding: 10px 14px;
  background: rgba(255, 255, 255, .02);
}

.lista-fichas .ajuda {
  display: block;
  margin-top: 2px;
}

.grupo-campos {
  border: 1px solid var(--linha);
  border-radius: 14px;
  padding: 16px 18px 6px;
  margin: 0 0 20px;
}

.grupo-campos legend {
  padding: 0 8px;
  font-weight: 700;
  font-size: .9rem;
  color: var(--ambar);
  text-transform: uppercase;
  letter-spacing: .05em;
}

/* Honeypot: invisível para gente, preenchido por robô. */
.armadilha {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.dias-grade {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}

.dia-opcao {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 13px;
  border: 1px solid var(--linha);
  border-radius: 12px;
  background: var(--preto);
  cursor: pointer;
  transition: border-color var(--transicao), background var(--transicao);
}

.dia-opcao:hover {
  border-color: var(--grafite-2);
  background: var(--grafite-2);
}

.dia-opcao input {
  width: 18px;
  height: 18px;
  accent-color: var(--ambar);
  flex: none;
}

.dia-opcao:has(input:checked) {
  border-color: var(--ambar);
  background: rgba(217, 164, 65, .10);
}

/* Mesmo desenho para navegador sem :has() — a classe vem do JS. */
.dia-opcao.marcado {
  border-color: var(--ambar);
  background: rgba(217, 164, 65, .10);
}

.dia-opcao .data {
  font-weight: 600;
}

.dia-opcao .semana {
  color: var(--prata);
  font-size: .8rem;
  text-transform: capitalize;
}

.aviso-lgpd {
  color: var(--prata);
  font-size: .82rem;
  line-height: 1.55;
  margin: 18px 0 0;
}

/* Endereço da 2ª via à vista, com o botão de copiar. */
.link-comprovante {
  max-width: 520px;
  margin: 20px auto 0;
  text-align: left;
}

.link-comprovante input {
  font-size: .85rem;
  color: var(--prata);
}

.link-comprovante .btn {
  margin-top: 8px;
}

/* ----------------------------------------------------------- confirmação */

.confirmacao {
  text-align: center;
  padding: 30px 24px;
}

.confirmacao .numero {
  font-family: var(--fonte-display);
  font-size: clamp(2rem, 1.4rem + 3vw, 3rem);
  color: var(--ambar);
  letter-spacing: 2px;
  margin: 6px 0 2px;
}

.confirmacao .rotulo-numero {
  color: var(--prata);
  font-size: .85rem;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.resumo {
  text-align: left;
  max-width: 520px;
  margin: 26px auto 0;
}

/* QR Code do comprovante: fundo branco sempre, senão a leitura falha. */
.qr-caixa {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin: 20px 0 4px;
}

.qr-caixa .qr {
  width: 220px;
  height: 220px;
  padding: 10px;
  background: #fff;
  border-radius: 12px;
  image-rendering: pixelated; /* mantém os módulos nítidos ao redimensionar */
}

/* Um QR por veículo: lado a lado onde couber, um embaixo do outro no
   celular. O nome do carro fica junto do código — mostrar o QR errado na
   portaria é o erro que esta lista existe para evitar. */
.qr-lista {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 18px;
}

.qr-lista .qr-caixa {
  margin: 12px 0 0;
}

.qr-veiculo {
  font-size: .95rem;
}

@media print {
  .topo,
  .menu,
  .menu-site,
  .rodape,
  .faixa-quadriculada,
  .acoes-form {
    display: none !important;
  }

  body {
    background: #fff;
    color: #000;
  }

  .card,
  .confirmacao {
    border: 1px solid #999;
    box-shadow: none;
  }
}

/* --------------------------------------------- etiqueta de seção
   Etiqueta curta em âmbar, com um filete antes: abre a seção na página
   inicial e o bloco de abertura da história. Veio de construcao.css
   quando deixou de ser só da home. */

.secao-etiqueta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 8px;
  color: var(--ambar);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.secao-etiqueta::before {
  content: "";
  width: 24px;
  height: 2px;
  flex: none;
  border-radius: 2px;
  background: currentColor;
}

/* ------------------------------------------- história do clube
   A página historia.php: o álbum abre a tela, o texto ocupa a coluna da
   leitura e o cartão do clube acompanha a rolagem na coluna da direita.
   O corpo do texto em si é desenhado por .texto-rico (site.css): o mesmo
   desenho da área de edição do painel. */

.historia-titulo {
  margin: 0 0 6px;
  font-family: var(--fonte-display);
  font-weight: 400;
  font-size: clamp(1.6rem, 4vw, 2.25rem);
  line-height: 1.15;
}

.historia-apoio {
  margin: 0;
  max-width: 60ch;
  color: var(--prata);
  font-size: clamp(.95rem, 2.2vw, 1.0625rem);
}

/* Tira de botões no pé de uma tela de leitura. Nasceu na história e ficou:
   a agenda.php também a usa para fechar a página. */
.historia-acoes {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 20px 0 0;
}

/* ---- capa: o álbum na abertura ---- */

.historia-capa {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--linha);
  border-radius: var(--raio-card);
  box-shadow: var(--sombra);
}

/* Um degradê só no pé da capa — legenda, marcadores e contador deitam por
   cima dele, como na vitrine da página inicial. Aqui ele é uma faixa baixa,
   e não uma porcentagem da altura: com a foto inteira na moldura, escurecer
   metade da capa apagaria o pé da própria foto. */
.historia-capa::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  height: 128px;
  pointer-events: none;
  background: linear-gradient(to top, rgba(10, 11, 13, .92) 0%, rgba(10, 11, 13, .66) 46%, rgba(10, 11, 13, 0) 100%);
}

.historia-capa-selo {
  position: absolute;
  top: 14px;
  right: 16px;
  z-index: 2;
  margin: 0;
  padding: 6px 14px;
  border: 1px solid rgba(217, 164, 65, .45);
  border-radius: var(--raio-pill);
  background: rgba(10, 11, 13, .74);
  color: var(--ambar);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}

/* ---- abertura: etiqueta, título e subtítulo ---- */

.historia-abertura {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
}

.historia-abertura > * {
  margin: 0;
}

/* ---- leitura: capa, texto e trilho ---- */

/* A capa entrou para dentro da coluna da leitura. Em largura inteira ela
   ficava desproporcional: uma foto em pé aparecendo inteira num quadro de
   1040px deixa mais vão do que foto. Na coluna, a moldura tem a medida do
   texto e a página passa a ter uma linha vertical só. */
.historia-principal {
  display: flex;
  flex-direction: column;
  gap: 24px;
  min-width: 0;
}

.historia-leitura {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  align-items: start;
  gap: 28px;
}

/* Quem dá a medida da leitura é a coluna da grade: um max-width por dentro
   deixaria uma sobra entre o texto e o trilho — o mesmo defeito de antes,
   só que menor. Por isso o `none`, que apaga o 68ch do .texto-rico. */
.historia-corpo {
  max-width: none;
  padding: 32px 34px;
  background: var(--grafite);
  border: 1px solid var(--linha);
  border-radius: var(--raio-card);
  box-shadow: var(--sombra);
}

.historia-trilho {
  position: sticky;
  top: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.historia-clube {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 24px 20px 22px;
  text-align: center;
  border: 1px solid var(--linha);
  border-radius: var(--raio-card);
  background: var(--grafite);
  box-shadow: var(--sombra);
}

/* O emblema é o arquivo oficial, exibido como está: só o tamanho muda. */
.historia-clube-emblema {
  width: 108px;
  height: auto;
}

.historia-clube-sigla {
  margin: 0;
  font-family: var(--fonte-display);
  font-size: 1.5rem;
  font-weight: 400;
  letter-spacing: .04em;
}

.historia-clube-cidade {
  margin: 0;
  color: var(--prata);
  font-size: .8125rem;
  line-height: 1.45;
}

.historia-clube-acoes {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  margin-top: 6px;
}

.historia-clube-acoes .btn {
  justify-content: center;
}

.historia-clube-atalho {
  margin: 4px 0 0;
  font-size: .875rem;
  font-weight: 600;
}

.historia-clube-atalho a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* O "voltar" deixou de abrir a página: agora fecha o trilho, embaixo do
   cartão, onde não disputa a atenção com o título. */
.historia-trilho .voltar-agenda {
  margin: 0;
  text-align: center;
}

@media (max-width: 900px) {
  /* Coluna estreita demais para duas: o trilho desce para o fim da página,
     que é onde os botões já estavam antes. */
  .historia-leitura {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .historia-trilho {
    position: static;
  }

  .historia-corpo {
    padding: 24px 22px;
  }
}

@media (max-width: 560px) {
  /* Selo menor: em 350px de largura ele avançava sobre a foto. */
  .historia-capa-selo {
    top: 10px;
    right: 12px;
    padding: 4px 10px;
    font-size: .6875rem;
  }
}

/* ------------------------------------------------------- carrossel
   As fotos passando na tela, uma de cada vez. O HTML vem de
   includes/carrossel.php e a passagem automática de assets/js/carrossel.js.

   O desenho parte do que funciona sem script: a tira rola para o lado com
   scroll-snap, e a barra de rolagem só some quando o JavaScript assume
   (.carrossel-vivo) — sem ele, ela é o que avisa que tem mais foto ali. */

.carrossel {
  margin: 18px 0 0;
  max-width: 860px;
}

.carrossel-palco {
  position: relative;
  overflow: hidden;
  background: var(--grafite);
  border: 1px solid var(--linha);
  border-radius: 18px;
  box-shadow: var(--sombra);
}

.carrossel-trilho {
  position: relative; /* âncora do offsetLeft que o script usa para rolar */
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
}

.carrossel-trilho:focus-visible {
  outline: 2px solid var(--ambar);
  outline-offset: -2px;
}

.carrossel-vivo .carrossel-trilho {
  scrollbar-width: none;
}

.carrossel-vivo .carrossel-trilho::-webkit-scrollbar {
  display: none;
}

.carrossel-slide {
  flex: 0 0 100%;
  scroll-snap-align: center;
  scroll-snap-stop: always;
}

/* Sem script não há seta nem marcador: a foto seguinte aparece pela beirada
   para deixar claro que a tira anda. Com script, uma foto por vez. */
.carrossel:not(.carrossel-vivo) .carrossel-slide {
  flex-basis: min(88%, 620px);
}

.carrossel-dica {
  margin: 10px 0 0;
  color: var(--prata);
  font-size: .8125rem;
}

.carrossel-vivo .carrossel-dica {
  display: none;
}

.carrossel-foto {
  position: relative;
  margin: 0;
}

/* Moldura 3:2 — o mesmo recorte das miniaturas da história, para foto em pé
   e foto deitada ocuparem o mesmo lugar e a tira não pular de altura. */
.carrossel-quadro {
  display: block;
  aspect-ratio: 3 / 2;
  background: var(--preto);
}

.carrossel-quadro img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* A legenda deita sobre o pé da foto, num degradê que segura a leitura sem
   roubar altura do quadro. */
.carrossel-foto figcaption {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 34px 18px 14px;
  background: linear-gradient(to top, rgba(10, 11, 13, .92) 0%, rgba(10, 11, 13, .78) 45%, rgba(10, 11, 13, 0) 100%);
  color: var(--branco);
  font-size: .875rem;
  line-height: 1.45;
}

.carrossel-seta {
  position: absolute;
  top: 50%;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  transform: translateY(-50%);
  background: rgba(10, 11, 13, .72);
  border: 1px solid var(--linha);
  border-radius: 999px;
  color: var(--branco);
  cursor: pointer;
  transition: background var(--transicao), color var(--transicao), border-color var(--transicao);
}

.carrossel-seta.anterior {
  left: 10px;
}

.carrossel-seta.proxima {
  right: 10px;
}

.carrossel-seta:hover {
  background: var(--preto);
  border-color: rgba(217, 164, 65, .55);
  color: var(--ambar);
}

.carrossel-seta:focus-visible {
  outline: 2px solid var(--ambar);
  outline-offset: 2px;
}

.carrossel-barra {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 12px 0 0;
}

.carrossel-tocar {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  background: transparent;
  border: 1px solid var(--linha);
  border-radius: 999px;
  color: var(--prata);
  cursor: pointer;
  transition: color var(--transicao), border-color var(--transicao);
}

.carrossel-tocar:hover {
  border-color: rgba(217, 164, 65, .55);
  color: var(--ambar);
}

.carrossel-tocar:focus-visible {
  outline: 2px solid var(--ambar);
  outline-offset: 2px;
}

/* Um ícone por vez: o botão mostra o que ele faz agora, não o estado. */
.carrossel-tocar .carrossel-icone-tocar,
.carrossel-tocar[data-parado="1"] .carrossel-icone-pausa {
  display: none;
}

.carrossel-tocar[data-parado="1"] .carrossel-icone-tocar {
  display: grid;
}

.carrossel-pontos {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* O ponto é o miolo do botão: 10px de bolinha dentro de um alvo de 26px,
   que é o que o dedo precisa acertar. */
.carrossel-pontos button {
  width: 26px;
  height: 26px;
  padding: 8px;
  background: var(--linha);
  background-clip: content-box;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  transition: background-color var(--transicao);
}

.carrossel-pontos button:hover {
  background-color: var(--prata);
}

.carrossel-pontos button[aria-current="true"] {
  background-color: var(--ambar);
}

.carrossel-pontos button:focus-visible {
  outline: 2px solid var(--ambar);
  outline-offset: -2px;
}

.carrossel-conta {
  margin: 0 0 0 auto;
  color: var(--prata);
  font-size: .8125rem;
  font-variant-numeric: tabular-nums;
}

@media (hover: none) {
  /* No celular a foto passa com o dedo: as setas só atrapalhariam o
     arrasto, e o alvo de toque fica nos marcadores. */
  .carrossel-seta {
    display: none;
  }
}

@media (max-width: 560px) {
  .carrossel-palco {
    border-radius: 14px;
  }

  .carrossel-foto figcaption {
    padding: 28px 14px 12px;
    font-size: .8125rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .carrossel-trilho {
    scroll-behavior: auto;
  }

  .carrossel-seta,
  .carrossel-tocar,
  .carrossel-pontos button {
    transition: none;
  }
}

/* ----------------------------------------- carrossel da capa
   O mesmo carrossel, na abertura de historia.php: sem moldura, mais
   largo e mais baixo, com os controles deitados sobre a foto. Precisa
   vir depois do bloco acima — é dele que estas regras discordam. */

/* Na capa a foto é larga e baixa: 16:9 em vez do 3:2 da tira, para o álbum
   caber na abertura sem empurrar o texto para fora da tela. */
.carrossel-capa {
  position: relative;
  margin: 0;
  max-width: none;
}

.carrossel-capa .carrossel-palco {
  border: 0;
  border-radius: 0;
  box-shadow: none;
  /* Fundo da moldura: é o que aparece ao lado da foto que não preenche o
     quadro inteiro. Cinza, e não preto, para a foto ter borda visível. */
  background: var(--grafite-2);
}

/* Na capa a foto aparece INTEIRA — o álbum é o assunto da página, e o
   recorte comia a beirada de foto em pé e de foto de grupo. A moldura
   continua fixa em 3:2 para a tira não pular de altura de uma foto para a
   outra: o que sobra dos lados é fundo da moldura, e não pedaço perdido.
   Mesma escolha do cartaz do evento, pelo mesmo motivo. */
.carrossel-capa .carrossel-quadro {
  /* Âncora do fundo desfocado: sem isto ele se prenderia à <figure>, que
     hoje tem a mesma medida, mas por acidente e não por regra. */
  position: relative;
  aspect-ratio: 3 / 2;
  /* Teto de altura para a capa não tomar a tela inteira em notebook de
     tela baixa: passando daqui a moldura fica mais deitada, e a foto
     encolhe dentro dela — continua inteira. */
  max-height: 70vh;
  background: transparent;
}

.carrossel-capa .carrossel-quadro img {
  object-fit: contain;
}

.carrossel-capa .carrossel-foto figcaption {
  z-index: 2;
  bottom: 46px;
  padding: 0 18px;
  background: none;
}

.carrossel-capa .carrossel-seta {
  z-index: 2;
}

.carrossel-capa .carrossel-barra {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2;
  margin: 0;
  padding: 0 16px 12px;
}

/* O vão da moldura recebe a própria foto, ampliada e desfocada: sem isso
   sobra um retângulo cinza dos dois lados de toda foto em pé. O `scale`
   existe porque o desfoque puxa a borda para dentro e deixaria uma orla
   clara na beirada. */
.carrossel-fundo {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.carrossel-fundo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.15);
  filter: blur(24px) saturate(.8) brightness(.5);
}

/* A foto de verdade precisa ficar por cima do fundo: elemento posicionado
   pinta acima de conteúdo que não é posicionado, e o fundo é absoluto. */
.carrossel-capa .carrossel-quadro > img {
  position: relative;
  z-index: 1;
}

/* Sem JavaScript não há barra de controles, e o aviso de que a tira rola
   cairia fora da capa — dentro dela ele deita sobre a foto. */
.carrossel-capa .carrossel-dica {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2;
  margin: 0;
  padding: 0 18px 12px;
  color: var(--branco);
}

/* Na tela estreita a moldura fica mais alta (4:3): a foto em pé, que aqui
   aparece inteira, some dentro de um 3:2 de 234px. E a faixa escura do pé
   encolhe junto, senão come metade da capa. */
@media (max-width: 560px) {
  .carrossel-capa .carrossel-quadro {
    aspect-ratio: 4 / 3;
  }

  .historia-capa::after {
    height: 104px;
  }
}

/* --------------------------------------------------- foto ampliada
   A caixa que abre por cima da página quando se clica na foto do carrossel.
   É um <dialog>: enquanto ninguém abre, ele não ocupa lugar nenhum. O
   elemento inteiro cobre a tela para que sobre fundo para clicar e fechar,
   e a foto aparece inteira (object-fit: contain), sem o recorte 3:2 da
   tira — ampliar é justamente para ver o que o recorte cortou. */

.ampliada {
  width: 100%;
  max-width: 100%;
  height: 100%;
  max-height: 100%;
  margin: 0;
  padding: 14px;
  border: 0;
  background: transparent;
  color: var(--branco);
  overflow: hidden;
}

.ampliada::backdrop {
  background: rgba(5, 6, 8, .9);
}

.ampliada-caixa {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  height: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

.ampliada-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.ampliada-conta {
  margin: 0;
  color: var(--prata);
  font-size: .8125rem;
  font-variant-numeric: tabular-nums;
}

.ampliada-fechar {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  background: rgba(20, 22, 26, .9);
  border: 1px solid var(--linha);
  border-radius: 999px;
  color: var(--branco);
  cursor: pointer;
  transition: color var(--transicao), border-color var(--transicao);
}

.ampliada-fechar:hover {
  border-color: rgba(217, 164, 65, .55);
  color: var(--ambar);
}

.ampliada-fechar:focus-visible,
.ampliada-seta:focus-visible {
  outline: 2px solid var(--ambar);
  outline-offset: 2px;
}

/* O quadro toma a altura que sobra; min-height: 0 é o que deixa a foto
   encolher dentro do flex em vez de empurrar a legenda para fora da tela. */
.ampliada-quadro {
  position: relative;
  flex: 1;
  min-height: 0;
}

/* A foto é posicionada dentro do quadro, e não empilhada nele: só assim o
   `max-height: 100%` tem uma altura de verdade contra a qual medir — no
   fluxo normal ele não resolve e a foto passa da tela. `margin: auto` com
   `inset: 0` centraliza nos dois eixos, e `width/height: auto` garante que
   foto pequena não seja esticada. */
.ampliada-quadro img {
  position: absolute;
  inset: 0;
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  margin: auto;
}

/* z-index acima da foto: as duas coisas são posicionadas, e sem isto a seta
   da esquerda — que vem antes da foto no HTML — ficaria embaixo dela. */
.ampliada-seta {
  position: absolute;
  z-index: 1;
  top: 50%;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  padding: 0;
  transform: translateY(-50%);
  background: rgba(10, 11, 13, .72);
  border: 1px solid var(--linha);
  border-radius: 999px;
  color: var(--branco);
  cursor: pointer;
  transition: background var(--transicao), color var(--transicao), border-color var(--transicao);
}

.ampliada-seta.anterior {
  left: 0;
}

.ampliada-seta.proxima {
  right: 0;
}

.ampliada-seta:hover {
  background: var(--preto);
  border-color: rgba(217, 164, 65, .55);
  color: var(--ambar);
}

.ampliada-legenda {
  margin: 0 auto;
  max-width: 76ch;
  color: var(--prata);
  font-size: .875rem;
  line-height: 1.45;
  text-align: center;
}

/* Com a caixa aberta, a página atrás não rola — senão o dedo que passa por
   fora da foto leva a leitura embora sem ninguém pedir. */
.sem-rolagem {
  overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
  .ampliada-fechar,
  .ampliada-seta,
  .galeria-item img {
    transition: none;
  }

  .galeria-item a:hover img,
  .galeria-item a:focus-visible img {
    transform: none;
  }
}

/* O convite da história na página inicial não mora aqui: é só dela, e o
   desenho da vitrine está no fim de construcao.css. */

@media (max-width: 560px) {
  .historia-corpo {
    padding: 20px 18px;
  }
}

/* ------------------------------------------------------- em breve
   Áreas do site que ainda estão sendo construídas. */

.em-breve {
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
}

.em-breve .icone-grande {
  display: grid;
  place-items: center;
  width: 76px;
  height: 76px;
  margin: 0 auto 18px;
  border: 1px solid rgba(217, 164, 65, .28);
  border-radius: 20px;
  background: rgba(217, 164, 65, .12);
  color: var(--ambar);
}

.em-breve .acoes-form {
  justify-content: center;
}

/* ------------------------------------------------- mural de fotos
   As fotos que a diretoria publica depois do encontro (fotos.php e a
   seção "Fotos do encontro" da página do evento).

   A grade é de miniaturas 3:2 — o mesmo recorte que o upload gera —, e
   embaixo de cada uma fica a tira de reações. A tira é um formulário de
   verdade: sem JavaScript ela recarrega a página e volta para a âncora
   da foto, e é por isso que cada <li> tem id. */

.mural-evento {
  margin-top: 34px;
  padding-top: 26px;
  border-top: 1px solid var(--linha);
}

.mural-evento:first-of-type {
  border-top: 0;
  padding-top: 0;
}

.mural-cabecalho {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: flex-start;
  justify-content: space-between;
}

.mural-cabecalho h2 a {
  color: var(--branco);
  text-decoration: none;
}

.mural-cabecalho h2 a:hover,
.mural-cabecalho h2 a:focus-visible {
  color: var(--ambar);
  text-decoration: underline;
}

/* A grade das fotos do encontro — a mesma nas duas telas que a mostram
   (a seção "Fotos do encontro" de evento.php e o mural). São miniaturas:
   seis por fila no computador, duas no celular, e o clique amplia.

   Onde cada foto leva a tira de reações embaixo — só o mural —, a coluna
   é mais larga: seis pílulas não cabem em 150px. */

.galeria-grade {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  /* Cada miniatura tem a altura do que ela tem dentro: sem isto, a foto com
     legenda de três linhas estica a fila inteira e as vizinhas ficam com um
     vão escuro embaixo. */
  align-items: start;
  gap: 10px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}

/* No mural é o contrário: as fotos da fila têm a mesma altura para que as
   tiras de reação fiquem alinhadas, e é a tira que desce até o pé do
   cartão (o `margin-top: auto` de .mural-reacoes). */
.galeria-grade.com-reacoes {
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  align-items: stretch;
  gap: 14px;
}

.galeria-item {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--linha);
  border-radius: 12px;
  background: var(--grafite);
}

.com-reacoes .galeria-item {
  border-radius: 16px;
  box-shadow: var(--sombra);
}

.galeria-item figure {
  margin: 0;
}

/* O `overflow` é do link, e não do <li>: é ele que segura a foto quando
   ela cresce um pouco no ponteiro. */
.galeria-item a {
  display: block;
  overflow: hidden;
}

.galeria-item img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  background: var(--grafite-2);
  transition: transform 180ms ease;
}

.galeria-item a:hover img,
.galeria-item a:focus-visible img {
  transform: scale(1.04);
}

.galeria-item figcaption {
  padding: 8px 12px 0;
  color: var(--prata);
  font-size: .85rem;
}

/* No celular a conta é outra: `auto-fill` com a mesma medida mínima daria
   uma coluna só, e uma foto por linha não é grade de miniaturas — é a
   rolagem infinita que a grade veio substituir. Três fotos por linha onde
   não há reação; duas onde há, que seis pílulas não cabem em um terço de
   tela. */
@media (max-width: 560px) {
  .galeria-grade {
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
  }

  /* Com a tira guardada no botão, o cartão tem a altura da foto — e a
     foto que abre a tira não estica as vizinhas da fila. */
  .galeria-grade.com-reacoes {
    grid-template-columns: repeat(2, 1fr);
    align-items: start;
    gap: 10px;
  }

  .galeria-item figcaption {
    padding: 6px 8px 0;
    font-size: .8rem;
  }

  /* Pílula menor: com a coluna pela metade, é o que faz caber três por
     linha em vez de duas e meia. */
  .mural-reacoes {
    gap: 4px;
    padding: 8px 8px 10px;
  }

  .mural-reacao {
    padding: 4px 6px;
    font-size: .85rem;
  }
}

/* A tira de reações. Os botões são pílulas pequenas; o número só aparece
   quando alguém já reagiu — zero ao lado de seis emojis é ruído. */

.mural-reacoes {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  align-items: center;
  padding: 10px 12px 12px;
}

.mural-reacao {
  display: inline-flex;
  gap: 4px;
  align-items: center;
  padding: 5px 8px;
  border: 1px solid var(--linha);
  border-radius: 999px;
  background: transparent;
  color: var(--prata);
  font: inherit;
  font-size: .92rem;
  line-height: 1;
  cursor: pointer;
  transition: border-color 180ms ease, background 180ms ease, transform 180ms ease;
}

.mural-reacao:hover,
.mural-reacao:focus-visible {
  border-color: var(--ambar);
  background: rgba(217, 164, 65, .1);
  transform: translateY(-2px);
}

.mural-reacao.marcada {
  border-color: var(--ambar);
  background: rgba(217, 164, 65, .18);
  color: var(--branco);
}

.mural-reacao-emoji {
  font-size: 1.05rem;
}

.mural-reacoes-total {
  flex-basis: 100%;
  margin: 4px 0 0;
  color: var(--prata);
  font-size: .82rem;
}

/* ---- o botão que guarda a tira no celular

   Seis pílulas embaixo de cada foto ocupam mais altura que a miniatura, e
   numa grade de duas colunas isso vira uma tela de botão para meia tela de
   foto. Abaixo de 560px a tira sai de cena e no lugar dela fica um botão
   que já a resume: os dois emojis mais votados e o total.

   Quem abre e fecha é a caixa de marcar escondida — CSS puro, sem
   JavaScript, como a gaveta do painel. No computador o botão não existe e a
   tira continua aberta, como sempre esteve. */

.mural-reacoes-caixa {
  display: flex;
  flex-direction: column;
  margin-top: auto;
}

/* A caixa some da tela e do foco no computador: controle escondido que
   ainda recebe Tab é armadilha para quem navega pelo teclado. */
.mural-reacoes-chave {
  display: none;
}

.mural-reacoes-abrir {
  display: none; /* só existe no celular — ver o @media adiante */
  gap: 6px;
  align-items: center;
  justify-content: center;
  margin: 8px;
  padding: 7px 10px;
  border: 1px solid var(--linha);
  border-radius: 999px;
  color: var(--prata);
  font-size: .82rem;
  line-height: 1;
  cursor: pointer;
  transition: border-color 180ms ease, background 180ms ease, color 180ms ease;
}

.mural-reacoes-abrir:hover {
  border-color: var(--ambar);
  color: var(--branco);
}

/* Esta foto já tem a reação deste navegador. */
.mural-reacoes-abrir.reagi {
  border-color: var(--ambar);
  background: rgba(217, 164, 65, .14);
  color: var(--branco);
}

/* O foco é da caixa escondida; quem o mostra é o rótulo. */
.mural-reacoes-chave:focus-visible + .mural-reacoes-abrir {
  outline: 2px solid var(--ambar);
  outline-offset: 2px;
}

.mural-reacoes-vazio,
.mural-reacoes-resumo {
  display: inline-flex;
  gap: 5px;
  align-items: center;
}

.mural-reacoes-selo {
  font-size: 1rem;
  letter-spacing: -.06em;
}

.mural-reacoes-numero {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

/* A seta é o único <svg> filho direto do rótulo (o sorriso do "Reagir"
   está dentro de um <span>), e vira de cabeça para baixo com a tira
   aberta. */
.mural-reacoes-abrir > svg {
  flex: none;
  transition: transform 180ms ease;
}

.mural-reacoes-chave:checked + .mural-reacoes-abrir > svg {
  transform: rotate(180deg);
}

@media (max-width: 560px) {
  .mural-reacoes-abrir {
    display: flex;
  }

  .mural-reacoes-caixa .mural-reacoes {
    display: none;
  }

  /* Aberta pelo toque, ou porque esta é a foto que acabou de receber a
     reação: sem script o POST volta para `#foto-<id>`, e voltar para um
     botão fechado esconderia justamente o que mudou. */
  .mural-reacoes-chave:checked ~ .mural-reacoes,
  .galeria-item:target .mural-reacoes {
    display: flex;
  }
}

.mural-aviso {
  flex-basis: 100%;
  margin: 6px 0 0;
  color: var(--sucesso);
  font-size: .82rem;
}

.mural-aviso.erro {
  /* Sobre o grafite do cartão, o --erro puro fica abaixo do AA. */
  color: var(--erro-claro);
}

.mural-reacoes.enviando,
.mural-notas.enviando {
  opacity: .6;
}

/* Nota do encontro: cinco estrelas que também são botões. */

.mural-notas {
  min-width: 220px;
  text-align: right;
}

.mural-notas-resumo {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: flex-end;
  margin: 0;
  color: var(--prata);
  font-size: .88rem;
}

.estrelas {
  display: inline-flex;
  gap: 2px;
  color: var(--linha);
}

.estrela.cheia {
  color: var(--ambar);
}

.mural-notas-botoes {
  display: flex;
  gap: 2px;
  justify-content: flex-end;
  margin: 6px 0 0;
  padding: 0;
  border: 0;
}

.mural-nota {
  padding: 4px;
  border: 0;
  background: transparent;
  color: var(--linha);
  line-height: 0;
  cursor: pointer;
  transition: color 180ms ease, transform 180ms ease;
}

.mural-nota:hover,
.mural-nota:focus-visible,
.mural-nota.marcada {
  color: var(--ambar);
}

.mural-nota:hover {
  transform: scale(1.15);
}

/* ---- a paginação por números

   Os números das páginas, clicáveis, com uma seta em cada ponta. Antes eram
   dois botões ("Fotos anteriores" e "Mais fotos") com o "Página 4 de 8" no
   meio: quem queria o fim do álbum tocava sete vezes para chegar lá.

   A fila quebra em duas linhas no celular estreito em vez de encolher os
   alvos — número que não se acerta com o dedo não é atalho. */

.paginacao {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  justify-content: center;
  margin-top: 34px;
}

.paginacao-numeros {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
}

.paginacao-numero,
.paginacao-seta {
  display: inline-flex;
  min-width: 38px;
  height: 38px;
  align-items: center;
  justify-content: center;
  padding: 0 10px;
  border: 1px solid var(--linha);
  border-radius: 999px;
  color: var(--prata);
  font-size: .92rem;
  font-variant-numeric: tabular-nums;
  text-decoration: none;
  transition: border-color 180ms ease, background 180ms ease, color 180ms ease;
}

.paginacao-seta {
  padding: 0;
}

a.paginacao-numero:hover,
a.paginacao-numero:focus-visible,
a.paginacao-seta:hover,
a.paginacao-seta:focus-visible {
  border-color: var(--ambar);
  color: var(--branco);
}

.paginacao-numero.atual {
  border-color: var(--ambar);
  background: var(--ambar);
  color: var(--preto);
  font-weight: 700;
}

/* A reticência não é botão: fica sem contorno e sem alvo de toque. */
.paginacao-numero.reticencias {
  min-width: 20px;
  padding: 0 2px;
  border-color: transparent;
}

/* Seta na ponta do álbum: guarda o lugar para a fila não dançar de uma
   página para a outra. */
.paginacao-seta.desligada {
  opacity: .35;
}

@media (hover: none) {
  /* Alvo de dedo: 44px, nunca menos. */
  .mural-reacao { padding: 10px 14px; }
  .mural-nota   { padding: 9px; }
  .mural-reacoes-abrir { padding: 12px 14px; }
  .paginacao-numero,
  .paginacao-seta { min-width: 44px; height: 44px; }
}

@media (max-width: 640px) {
  .mural-notas {
    min-width: 0;
    text-align: left;
  }

  .mural-notas-resumo,
  .mural-notas-botoes {
    justify-content: flex-start;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mural-reacao,
  .mural-nota,
  .mural-reacoes-abrir,
  .mural-reacoes-abrir > svg,
  .paginacao-numero,
  .paginacao-seta {
    transition: none;
  }

  .mural-reacao:hover,
  .mural-reacao:focus-visible,
  .mural-nota:hover {
    transform: none;
  }
}

/* O índice do mural: um cartão por encontro, com a foto de capa. */

.mural-eventos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.mural-cartao {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--linha);
  border-radius: 16px;
  background: var(--grafite);
  box-shadow: var(--sombra);
}

.mural-cartao-capa {
  display: block;
  background: var(--grafite-2);
}

.mural-cartao-capa img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.mural-cartao-sem-foto {
  display: grid;
  place-items: center;
  aspect-ratio: 3 / 2;
  color: var(--prata);
}

.mural-cartao-corpo {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 16px 18px 18px;
}

.mural-cartao-corpo h2 {
  font-size: 1.05rem;
}

.mural-cartao-corpo h2 a {
  color: var(--branco);
  text-decoration: none;
}

.mural-cartao-corpo h2 a:hover,
.mural-cartao-corpo h2 a:focus-visible {
  color: var(--ambar);
  text-decoration: underline;
}

.mural-cartao-selos {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  margin: 12px 0 0;
}

.mural-cartao-selos .chip {
  display: inline-flex;
  gap: 6px;
  align-items: center;
}

.mural-cartao-corpo .acoes-form {
  margin-top: auto;
  padding-top: 14px;
}