html, body { margin:0; padding:0; background:#061116; }
  * { box-sizing: border-box; }
  a { color:#C8E7CA; text-decoration:none; }
  a:hover { color:#D3ECD4 !important; }
  ::selection { background:#4C7B66; color:#D3ECD4; }
  :focus-visible { outline:2px solid #7EAD8F !important; outline-offset:3px !important; }
  @keyframes flapL { 0%,100% { transform: rotate(-15deg) scaleX(1); } 50% { transform: rotate(19deg) scaleX(.84); } }
  @keyframes flapR { 0%,100% { transform: rotate(15deg) scaleX(1); } 50% { transform: rotate(-19deg) scaleX(.84); } }
  .wl { transform-box: view-box; transform-origin: 58px 18px; animation: flapL .5s ease-in-out infinite; }
  .wr { transform-box: view-box; transform-origin: 62px 18px; animation: flapR .5s ease-in-out infinite; }
  .w2 { animation-duration: .62s; animation-delay: -.2s; }
  .w3 { animation-duration: .78s; animation-delay: -.35s; }
  .w4 { animation-duration: .92s; animation-delay: -.5s; }
  @keyframes batDriftA { from { transform: translate(-12vw, 10vh); } to { transform: translate(112vw, -4vh); } }
  @keyframes batDriftB { from { transform: translate(108vw, 4vh); } to { transform: translate(-14vw, 16vh); } }
  @keyframes batBob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-26px); } }
  @keyframes moonPulse {
    0%,100% { box-shadow: 0 0 70px 14px rgba(126,173,143,.40), 0 0 220px 70px rgba(126,173,143,.20); }
    50%     { box-shadow: 0 0 110px 26px rgba(200,231,202,.55), 0 0 300px 110px rgba(126,173,143,.30); }
  }
  @keyframes fogDrift { from { transform: translateX(-30%); } to { transform: translateX(0%); } }
  @keyframes fogDriftSlow { from { transform: translateX(0%); } to { transform: translateX(-30%); } }
  @keyframes emberFlicker { 0%,100% { opacity:1; } 38% { opacity:.45; } 62% { opacity:.85; } 80% { opacity:.6; } }
  @keyframes lanternFlicker {
    0%,100% { opacity:.9; filter: drop-shadow(0 0 8px rgba(214,162,81,.85)); }
    42% { opacity:1; filter: drop-shadow(0 0 18px rgba(232,178,92,1)); }
    68% { opacity:.78; filter: drop-shadow(0 0 10px rgba(214,162,81,.7)); }
  }
  .lantern { animation: lanternFlicker 2.8s ease-in-out infinite; }
  .lantern-b { animation-duration: 3.6s; animation-delay: -.9s; }
  .lantern-c { animation-duration: 2.2s; animation-delay: -1.5s; }
  .ember { animation: emberFlicker 3s ease-in-out infinite; }
  @keyframes twinkle { 0%,100% { opacity:.25; } 50% { opacity:1; } }
  details > summary { list-style:none; cursor:pointer; }
  details > summary::-webkit-details-marker { display:none; }
  details[open] .faq-plus { transform: rotate(45deg); }
  .nav-burger { display: none; }
  @media (max-width: 940px) {
    .nav-desk { display: none !important; }
    .nav-burger { display: grid !important; }
    .hero-pad { padding: 104px 20px 172px !important; }
    .sec-pad { padding: 76px 20px !important; }
    .moon { width: 210px !important; height: 210px !important; right: 7% !important; top: 8% !important; }
    .hero-meta { font-size: 14px !important; gap: 10px 20px !important; padding: 16px 18px !important; }
    .count-box { min-width: 68px !important; padding: 11px 8px !important; }
    .count-num { font-size: 24px !important; }
    .cart-grid { padding: 22px !important; }
    .lantern-extra { display: none !important; }
  }
  @media (max-width: 560px) {
    .hero-pad { padding: 88px 18px 150px !important; }
    .sec-pad { padding: 64px 18px !important; }
    .moon { width: 160px !important; height: 160px !important; }
    .footer-pad { padding: 56px 18px 32px !important; }
  }

/* ------------------------------------------------------------------ hover
   O protótipo trazia o estado de foco num atributo `style-hover`, que só o
   runtime do empacotador entendia. Aqui viram regras de verdade: o navegador
   faz isso sozinho, sem JavaScript nenhum.

   **`!important` em toda troca de `color`, e não é capricho.** O protótipo
   escreveu a cor de cada elemento no `style` inline, e estilo inline vence
   classe: sem isto, vinte botões e links trocavam borda e sombra no hover e
   mantinham a cor do texto. No `@jujuba_rockbar` o resultado era pior que
   nenhum efeito — fundo claro entrando sob texto claro, com o rótulo sumindo
   ao passar o mouse.

   **`:focus-visible` junto do `:hover`.** Quem percorre a página pelo teclado
   precisa ver onde está, e o navegador só desenha o anel padrão — que some
   sobre fundo escuro. O mesmo estado serve aos dois. */

/* A transição é o que faz isso parecer um botão, e não uma troca seca de cor.
   Vale para todo link e botão da página, inclusive os que ainda não têm
   classe de hover. */
a, button {
  transition: color .18s ease, background-color .18s ease, border-color .18s ease,
              box-shadow .18s ease !important;
}

/* Quem pede menos movimento continua vendo a mudança de estado — ela é
   informação —, só que sem a animação. */
@media (prefers-reduced-motion: reduce) {
  a, button { transition: none; }
}

/* Os links da gaveta do celular e do rodapé não vieram do protótipo com estado
   nenhum: a cor deles é inline, então a regra genérica `a:hover` nunca os
   alcançou. */
.hv-menu:hover,
.hv-menu:focus-visible { color:#C8E7CA !important; border-bottom-color:#7EAD8F !important }
.hv-menu-cta:hover,
.hv-menu-cta:focus-visible { background:#D3ECD4 !important; box-shadow:0 0 40px rgba(200,231,202,.55) !important}
.hv-rodape:hover,
.hv-rodape:focus-visible { color:#D3ECD4 !important }
.hv-marca:hover,
.hv-marca:focus-visible { opacity:.82 !important}
/* «Ver no mapa» e `@jujuba_rockbar` compartilham o estado: são os dois botões
   de contorno que levam para fora da página, e o preenchimento os separa dos
   links das bandas, que só acendem a borda. O ícone do pino acompanha sozinho
   — o SVG desenha com `currentColor`. */
.hv-26:hover,
.hv-26:focus-visible,
.hv-mapa:hover,
.hv-mapa:focus-visible { background:#C8E7CA !important; color:#061116 !important }
/* Abrir e fechar o menu são o mesmo par de botões, e recebem o mesmo estado:
   quem aprendeu um reconhece o outro. */
.nav-burger:hover,
.nav-burger:focus-visible,
.hv-fechar:hover,
.hv-fechar:focus-visible {
  border-color:#7EAD8F !important;
  background:rgba(19,76,78,.75) !important;
  color:#D3ECD4 !important;
}
.hv-1:hover,
.hv-1:focus-visible { color:#D3ECD4 !important}
.hv-2:hover,
.hv-2:focus-visible { color:#D3ECD4 !important}
.hv-3:hover,
.hv-3:focus-visible { color:#D3ECD4 !important}
.hv-4:hover,
.hv-4:focus-visible { color:#D3ECD4 !important}
.hv-5:hover,
.hv-5:focus-visible { color:#D3ECD4 !important}
.hv-6:hover,
.hv-6:focus-visible { color:#D3ECD4 !important}
.hv-7:hover,
.hv-7:focus-visible { color:#D3ECD4 !important}
/* **`!important` no `color`, e não é capricho.** O botão traz `color` no
   `style` inline, e estilo inline vence classe: sem isto o `background` claro
   do hover entrava e a cor do texto não mudava — texto #C8E7CA sobre fundo
   #C8E7CA, ou seja, o rótulo sumia ao passar o mouse.

   Sem brilho externo: a aplicação usa só a troca de fundo (`.nav-chamada:hover`
   em `app/static/css/base.css`), e a barra tem de ser a mesma dos dois lados. */
.hv-8:hover,
.hv-8:focus-visible { background:#C8E7CA !important; color:#061116 !important }
/* As duas chamadas grandes de compra. O estado que vinha do protótipo trocava
   `#C8E7CA` por `#D3ECD4` — dois verdes claríssimos a um passo um do outro —
   e aumentava um brilho que já existia em repouso: havia efeito, e ninguém
   via. O que o olho pega é o **deslocamento**, então o botão sobe dois pixels,
   ganha sombra projetada embaixo (que é o que faz a elevação parecer
   elevação) e clareia de verdade. `:active` devolve ao lugar, para o clique
   ter resposta própria.

   A barra do topo fica de fora de propósito: ela copia `.nav-chamada` da
   aplicação, e as duas precisam continuar iguais dos dois lados. */
.hv-9:hover,
.hv-9:focus-visible,
.hv-10:hover,
.hv-10:focus-visible {
  background:#E4F5E5 !important;
  /* Preto puro só no estado: o halo de 70px lava o `#061116` do repouso, e a
     palavra é o que a pessoa precisa ler no momento em que decide comprar. */
  color:#000 !important;
  transform:translateY(-2px) !important;
  box-shadow:0 0 70px rgba(200,231,202,.8), 0 12px 28px rgba(6,17,22,.55) !important;
}
.hv-9:active,
.hv-10:active {
  color:#000 !important;
  transform:translateY(0) !important;
  box-shadow:0 0 40px rgba(200,231,202,.6) !important;
}

.hv-11:hover,
.hv-11:focus-visible { border-color:#7EAD8F !important; box-shadow:0 0 40px rgba(126,173,143,.25) !important}
.hv-12:hover,
.hv-12:focus-visible { border-color:#7EAD8F !important; color:#D3ECD4 !important; box-shadow:0 0 20px rgba(126,173,143,.3) !important}
.hv-13:hover,
.hv-13:focus-visible { border-color:#7EAD8F !important; box-shadow:0 0 40px rgba(126,173,143,.25) !important}
.hv-14:hover,
.hv-14:focus-visible { border-color:#7EAD8F !important; color:#D3ECD4 !important; box-shadow:0 0 20px rgba(126,173,143,.3) !important}
.hv-15:hover,
.hv-15:focus-visible { border-color:#7EAD8F !important; box-shadow:0 0 40px rgba(126,173,143,.25) !important}
.hv-16:hover,
.hv-16:focus-visible { border-color:#7EAD8F !important; color:#D3ECD4 !important; box-shadow:0 0 20px rgba(126,173,143,.3) !important}
.hv-17:hover,
.hv-17:focus-visible { border-color:#7EAD8F !important; box-shadow:0 0 40px rgba(126,173,143,.25) !important}
.hv-18:hover,
.hv-18:focus-visible { border-color:#7EAD8F !important; color:#D3ECD4 !important; box-shadow:0 0 20px rgba(126,173,143,.3) !important}
.hv-19:hover,
.hv-19:focus-visible { border-color:#7EAD8F !important; box-shadow:0 0 46px rgba(126,173,143,.3) !important}
.hv-20:hover,
.hv-20:focus-visible { border-color:#7EAD8F !important; color:#D3ECD4 !important; box-shadow:0 0 18px rgba(126,173,143,.3) !important}
.hv-21:hover,
.hv-21:focus-visible { border-color:#7EAD8F !important; color:#D3ECD4 !important; box-shadow:0 0 18px rgba(126,173,143,.3) !important}
.hv-22:hover,
.hv-22:focus-visible { border-color:#7EAD8F !important; box-shadow:0 0 46px rgba(126,173,143,.3) !important}
.hv-23:hover,
.hv-23:focus-visible { border-color:#7EAD8F !important; color:#D3ECD4 !important; box-shadow:0 0 18px rgba(126,173,143,.3) !important}
.hv-24:hover,
.hv-24:focus-visible { border-color:#7EAD8F !important; box-shadow:0 0 46px rgba(126,173,143,.3) !important}
.hv-25:hover,
.hv-25:focus-visible { border-color:#7EAD8F !important; color:#D3ECD4 !important; box-shadow:0 0 18px rgba(126,173,143,.3) !important}
.hv-27:hover,
.hv-27:focus-visible { border-color:#7EAD8F !important; color:#D3ECD4 !important}

/* ------------------------------------------------- espaços reservados de foto
   Caixa declarada, e não `<img>` apontando para arquivo inexistente: um ícone
   de imagem quebrada num site publicado parece defeito, e isto parece o que é
   — um lugar à espera da foto. Cada bloco tem, ao lado, a linha do `<img>` que
   o substitui. */
.foto-slot {
  display: grid;
  place-items: center;
  min-height: 220px;
  padding: 24px;
  border: 1px dashed rgba(126, 173, 143, .45);
  border-radius: 12px;
  background: rgba(19, 76, 78, .18);
  color: #7EAD8F;
  font-size: 13px;
  letter-spacing: .08em;
  text-align: center;
  text-transform: uppercase;
}
/* Apoiadores: quatro por fileira, e a fileira incompleta fica no meio.
   O `max-width` é a largura que o cartão teria numa grade de quatro colunas —
   sem ele, dois cartões sozinhos na última fileira esticariam até a metade da
   tela cada um. */
.grade-apoiadores {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 22px;
}
.grade-apoiadores > div {
  flex: 1 1 220px;
  max-width: calc((100% - 3 * 22px) / 4);
}
.grade-apoiadores .logo-banda {
  padding: 12px;
  object-fit: contain;
}
.grade-apoiadores .logo-apoiador-ampliado { transform: scale(1.75); }
.grade-apoiadores .logo-apoiador-onofre { transform: scale(1.75); }
.grade-apoiadores .logo-apoiador-rpr { transform: scale(1.25); }
.grade-apoiadores .logo-apoiador-algodao { transform: scale(1.2); }
.grade-apoiadores .logo-apoiador-expec { transform: scale(2.1); }
@media (max-width: 1080px) {
  .grade-apoiadores > div { max-width: calc((100% - 2 * 22px) / 3); }
}
@media (max-width: 760px) {
  .grade-apoiadores > div { max-width: calc((100% - 22px) / 2); }
}
@media (max-width: 480px) {
  .grade-apoiadores > div { max-width: none; }
}

/* A logo à esquerda do título de «O evento». `flex-shrink: 0` porque o título
   tem três palavras longas e quebra em duas ou três linhas: sem isso, ele
   espremeria a logo conforme a coluna encolhesse. */
.evento-marca {
  display: flex;
  align-items: center;
  gap: clamp(14px, 2vw, 22px);
}
.logo-evento {
  flex-shrink: 0;
  width: clamp(88px, 11vw, 140px);
  height: auto;
  filter: drop-shadow(0 0 30px rgba(126, 173, 143, .3));
}
/* Na coluna estreita do celular, lado a lado sobraria pouco para cada um. */
@media (max-width: 620px) {
  .evento-marca { flex-direction: column; align-items: flex-start; gap: 12px; }
  .logo-evento { width: 100px; }
}

.foto {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 12px;
  object-fit: cover;
}

/* Logo de banda não é foto de banda. Os arquivos que existem têm 150 px, e a
   caixa tem 230 de altura: `cover` os ampliava e recortava, e o resultado é o
   borrão que se vê de longe. `scale-down` nunca passa do tamanho natural —
   escolhe o menor entre `none` e `contain` —, então o logo aparece como ele é,
   centralizado, com o fundo escuro em volta.

   Trocar por foto de verdade é só apontar o `src` e voltar para `class="foto"`. */
.logo-banda {
  display: block;
  width: 100%;
  height: 100%;
  padding: 26px;
  object-fit: scale-down;
}

/* ------------------------------------------------------------- menu do celular
   `hidden` é o que substitui o condicional do runtime. O atributo já esconde o
   elemento por padrão do navegador, e o `display:flex` do filho não o
   sobrescreve porque a regra abaixo tem precedência declarada. */
#menu-mobile[hidden] { display: none; }

/* -------------------------------------------------- atalho para o conteúdo
   Primeira parada do teclado, fora da tela até receber foco. Sem ele, quem
   navega por Tab percorre o menu inteiro em toda página antes de chegar ao que
   veio ler. */
.pular-para-conteudo {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  padding: 14px 20px;
  background: #C8E7CA;
  color: #061116;
  font-family: 'Oswald', sans-serif;
  font-size: 14px;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-decoration: none;
}
.pular-para-conteudo:focus { left: 12px; top: 12px; }

/* ------------------------------------------------------ movimento reduzido
   Quem configurou o sistema para menos animação tem motivo — enjoo e vertigem
   são os mais comuns. A página continua inteira; só para de se mexer. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }

  /* **Depois das regras que anula, e não antes.** Entre dois `!important` de
     mesma especificidade vence o último do arquivo, e daqui de cima ele não
     anulava nada. O estado das chamadas de compra continua mudando — cor e
     sombra são informação —, mas nada se desloca: é o deslocamento que provoca
     enjoo. */
  .hv-9:hover, .hv-9:focus-visible, .hv-9:active,
  .hv-10:hover, .hv-10:focus-visible, .hv-10:active { transform: none !important; }
}