/* ── Página de festival (template-festival.php) ───────────────────────────
   Quadro da edição da home → navegação → ingressos e serviços → line-up →
   notícias → conteúdo editorial → Lab → histórico. */
.festival { gap: var(--esp-pagina); }

/* Abertura: o mesmo quadro de edição da home (cartoes.css). */
.festival__abertura { min-width: 0; }

/* ── "Sobre o festival": o texto do editor em capítulos (um por h2), numa coluna de leitura centrada sob o
   cabeçalho padrão do bloco. O título de cada capítulo é um h3 centrado na mesma coluna da prosa. ────── */
.festival__editorial-corpo { display: grid; gap: var(--esp-6); width: 100%; max-width: 46rem; margin-inline: auto; }
.festival__capitulo { display: grid; gap: var(--esp-3); min-width: 0; }
.festival__capitulo-titulo { margin: 0; font-size: var(--texto-titulo-3); font-weight: var(--peso-display); line-height: var(--altura-apertada); text-align: center; text-wrap: balance; }
.festival__capitulo .prosa { width: 100%; }
.festival__capitulo .prosa > :first-child { margin-top: 0; }
.festival__capitulo--intro .prosa p:first-child { color: var(--cor-texto); }

/* Nota de referência (fas_referencia_html): de que edição são os valores ou os artistas de um bloco. O desenho é o
   das notas do Lab (.fas-lab__ref): miúda, suave, o nome da edição em destaque, centrada e numa coluna de leitura.
   Uma por bloco, logo abaixo do cabeçalho — nunca repetida cartão a cartão. */
.fas-referencia { max-width: 46rem; margin: 0 auto; color: var(--cor-texto-suave); font-size: var(--texto-mini); line-height: var(--altura-corpo); text-align: center; text-wrap: balance; }
/* O nome da edição se destaca como a citação de um guia na prosa (cor de link, peso médio), não como um título. */
.fas-referencia strong { color: var(--cor-link); font-weight: var(--peso-medio); }

/* Galeria dos palcos dentro da prosa (bloco de galeria do editor): cartões com a foto em 16:9 e a legenda
   com o nome do palco embaixo, não sobreposta. Duas colunas no celular, três do tablet em diante. A foto é
   trocada no editor. O CSS do bloco do WordPress usa :not(#individual-image) para ganhar de qualquer tema, então
   estas regras repetem o truque de especificidade E somam a classe .festival: as regras de colunas do bloco
   (dentro de @media (min-width: 600px)) empatavam com as nossas e, vindo depois, ganhavam — a galeria saía com
   72px por foto e a legenda por cima da imagem. */
.festival .festival__capitulo figure.wp-block-gallery.has-nested-images:not(#fas-galeria) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--esp-3); align-items: start; margin: var(--esp-5) 0 0; padding: 0; }
/* width: 100%, e não auto: com auto o item de grid encolhia para o min-content da legenda (73px) em vez de esticar. */
.festival .festival__capitulo .wp-block-gallery.has-nested-images figure.wp-block-image:not(#fas-galeria) { display: grid; width: 100%; max-width: none; margin: 0; flex: none; }
.festival .festival__capitulo .wp-block-gallery.has-nested-images figure.wp-block-image:not(#fas-galeria) img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border: 1px solid var(--cor-borda); border-radius: var(--raio-1); }
.festival .festival__capitulo .wp-block-gallery.has-nested-images figure.wp-block-image:not(#fas-galeria) figcaption { position: static; margin-top: var(--esp-2); padding: 0; background: none; color: var(--cor-texto); font-size: var(--texto-mini); font-weight: var(--peso-forte); line-height: var(--altura-apertada); text-align: center; text-shadow: none; }
.festival .festival__capitulo .wp-block-gallery.has-nested-images figure.wp-block-image:not(#fas-galeria) figcaption small { display: block; margin-top: 2px; color: var(--cor-texto-suave); font-size: var(--texto-legenda); font-weight: var(--peso-normal); }
@media (min-width: 40rem) { .festival .festival__capitulo figure.wp-block-gallery.has-nested-images:not(#fas-galeria) { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--esp-4); } }

/* Os blocos desta página seguem o mesmo sistema das seções da home: linha de horizonte no tom do bloco
   e rótulo centralizado. O tom vem de festival__bloco--<tom> (secoes.css), atribuído em sequência pelo
   template; o padrão é ciano, para um bloco sem tom não ficar sem cor. */
.festival__bloco { display: grid; gap: var(--esp-4); }
.festival__bloco::before {
  content: '';
  display: block;
  height: 1px;
  margin-top: var(--esp-transicao-secao);
  margin-bottom: calc(var(--esp-transicao-secao) - var(--esp-4)); /* o gap do grid já dá o respiro de baixo */
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--tom-secao, var(--tom-ciano)) 50%, transparent), transparent);
}
.festival__rotulo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--esp-2);
  color: var(--tom-secao, var(--tom-ciano));
  font-size: var(--texto-mini);
  text-align: center;
}
/* Cabeçalho dos blocos, no padrão das seções da home: rótulo miúdo no tom, título grande e uma linha de
   descrição. Vem de fas_festival_cabecalho(), em inc/helpers.php. */
.festival__cabecalho { display: grid; justify-items: center; gap: var(--esp-2); text-align: center; }
.festival__titulo { max-width: 34rem; font-size: var(--texto-titulo-2); font-weight: var(--peso-display); line-height: var(--altura-apertada); text-wrap: balance; }
.festival__descricao { max-width: 46rem; color: var(--cor-texto-suave); font-size: var(--texto-mini); line-height: var(--altura-corpo); }


/* Organização própria do festival, usando superfícies e tipografia do tema. */
.festival > *, .festival :where(section, article, details, nav) { min-width: 0; }
.festival [id] { scroll-margin-top: calc(var(--altura-topbar) + var(--altura-header-real, var(--altura-header)) + var(--esp-5)); }
.admin-bar .festival [id] { scroll-margin-top: calc(var(--wp-admin--admin-bar-height, 32px) + var(--altura-topbar) + var(--altura-header-real, var(--altura-header)) + var(--esp-5)); }
.festival__nav { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--esp-2); }
.festival__nav a { display: inline-flex; align-items: center; min-height: 44px; padding: var(--esp-2) var(--esp-3); border-radius: var(--raio-1); background: var(--cor-superficie); color: var(--cor-texto); font-size: var(--texto-controle); text-decoration: none; }
.festival__nav a:hover { background: var(--cor-superficie-alta); color: var(--cor-acento); }
/* O bloco logo depois da navegação não soma a margem da sua linha de horizonte ao vão da página: o espaço
   abaixo dos atalhos fica igual ao de cima. */
.festival__nav + .festival__bloco::before { margin-top: 0; }
/* Subtítulo que divide Festival e DreamVille dentro da seção. Mesmo desenho do subtítulo da lista de
   serviço, porque é a mesma ideia: uma faixa dentro do bloco, não um bloco novo. */
.festival__faixa-grupo {
  width: 100%;
  max-width: 40rem;
  margin: 0 auto;
  padding-bottom: var(--esp-2);
  border-bottom: 1px solid var(--cor-borda);
  color: var(--cor-acento);
  font-size: var(--texto-pequeno);
  font-weight: var(--peso-forte);
}
/* A faixa seguinte precisa de ar depois da grade anterior; a primeira não, o cabeçalho já deu. */
.festival__categorias + .festival__faixa-grupo { margin-top: var(--esp-6); }
@media (min-width: 48rem) { .festival__faixa-grupo { max-width: none; } }

.festival__categorias { display: grid; gap: var(--esp-3); align-items: start; }
.festival__categoria .festival__sanfona-resumo { display: grid; grid-template-columns: minmax(0, 1fr) auto 16px; gap: var(--esp-3); min-height: 96px; padding: var(--esp-4); }
.festival__categoria-nome { display: grid; gap: var(--esp-1); color: var(--cor-texto); font-size: var(--texto-pequeno); overflow-wrap: anywhere; }
.festival__categoria small { color: var(--cor-texto-suave); font-size: var(--texto-legenda); font-weight: var(--peso-normal); line-height: 1.4; }
.festival__categoria-preco { display: grid; gap: var(--esp-1); max-width: 10rem; text-align: right; }
.festival__categoria-preco strong { color: var(--cor-acento); font-size: var(--texto-pequeno); font-variant-numeric: tabular-nums; white-space: nowrap; }
.festival__categoria-itens { list-style: none; margin: 0; padding: 0 var(--esp-4) var(--esp-3); }
.festival__arquivo-conteudo { display: grid; gap: var(--esp-4); padding: var(--esp-4) 0; }
.festival__arquivo > .festival__sanfona-resumo { justify-content: space-between; text-align: left; }
@media (min-width: 48rem) { .festival__categorias { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 359px) { .festival__categoria .festival__sanfona-resumo { gap: var(--esp-2); padding: var(--esp-3); } .festival__categoria-preco { max-width: 8rem; } }

/* ── Lista de modalidades de um serviço (Estacionamento, Shuttle, Locker): a tabela inteira à vista ──
   Era um cartão compacto com sanfona. Sete linhas não justificavam esconder quatro atrás de um clique. */
.festival__lista {
  display: grid;
  gap: var(--esp-4);
  width: 100%;
  max-width: 40rem;
  margin-inline: auto;
  padding: var(--recuo-painel);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-2);
  background: var(--cor-superficie);
}
.festival__lista-grupo { display: grid; gap: var(--esp-1); min-width: 0; }
.festival__lista-grupo h3 { margin: 0; padding-bottom: var(--esp-2); border-bottom: 1px solid var(--cor-borda); color: var(--cor-acento); font-size: var(--texto-pequeno); font-weight: var(--peso-forte); }
.festival__lista-grupo ul { list-style: none; margin: 0; padding: 0; display: grid; }
/* Duas colunas a partir daqui: sete linhas empilhadas deixavam meia tela vazia, e uma coluna de ~19rem
   apertaria demais nome, condição e os dois preços do estacionamento. Por isso o cartão também cresce. */
@media (min-width: 60rem) {
  .festival__lista { max-width: var(--largura-conteudo); }
  .festival__lista-grupo ul { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--esp-8); }
  /* Numa grade de duas colunas por linha, os dois últimos itens são sempre o último de cada coluna: é deles
     que o traço tem de sair, e não só do último filho, senão sobra uma linha pendurada no meio da grade. */
  .festival__lista-grupo .festival__ingresso:nth-last-child(-n+2) { border-bottom: 0; }
}

/* ── Painel de ausência: a seção que ainda não tem o que mostrar usa o mesmo retângulo das que têm ── */
.festival__vazio {
  display: grid;
  justify-items: center;
  gap: var(--esp-2);
  width: 100%;
  max-width: 40rem;
  margin-inline: auto;
  padding: var(--esp-8) var(--recuo-painel);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-2);
  background: var(--cor-superficie);
  text-align: center;
}
.festival__vazio-titulo { margin: 0; color: var(--cor-texto); font-size: var(--texto-pequeno); font-weight: var(--peso-forte); text-wrap: pretty; }
.festival__vazio-texto { margin: 0; max-width: 34rem; color: var(--cor-texto-suave); font-size: var(--texto-mini); line-height: var(--altura-corpo); text-wrap: pretty; }

/* ── Uma linha de modalidade: usada na lista de serviço e dentro das categorias de Ingressos e DreamVille ── */
.festival__ingresso { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--esp-3); align-items: center; min-height: var(--alvo-toque); padding-block: var(--esp-2); border-bottom: 1px solid rgb(126 74 255 / .18); }
.festival__ingresso:last-child { border-bottom: 0; }
.festival__ingresso-nome { display: grid; gap: 2px; min-width: 0; color: var(--cor-texto); font-size: var(--texto-corpo); overflow-wrap: anywhere; }
.festival__ingresso-obs { color: var(--cor-texto-suave); font-size: var(--texto-legenda); }
/* Etiqueta do destino na linha (Festival / DreamVille), só onde o subtítulo agrupa por outra coisa. */
.festival__ingresso-etiqueta {
  display: inline-block;
  margin-left: var(--esp-2);
  padding: 1px var(--esp-2);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-pill);
  color: var(--cor-texto-suave);
  font-size: var(--texto-rotulo);
  font-weight: var(--peso-display);
  letter-spacing: var(--tracking-rotulo);
  text-transform: uppercase;
  vertical-align: middle;
  white-space: nowrap;
}
/* Valores: preço normal em cima; o preço Bybit, quando cadastrado, em subdestaque embaixo. */
.festival__ingresso-valores { display: grid; justify-items: end; gap: 2px; text-align: right; }
.festival__ingresso-linha { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: baseline; gap: 2px var(--esp-2); }
.festival__ingresso-valor { color: var(--cor-texto); font-size: var(--texto-pequeno); font-weight: var(--peso-forte); font-variant-numeric: tabular-nums; white-space: nowrap; }
.festival__ingresso-brl { color: var(--cor-texto-suave); font-size: var(--texto-legenda); font-variant-numeric: tabular-nums; white-space: nowrap; }
.festival__ingresso-linha--bybit { color: var(--cor-texto-suave); }
.festival__ingresso-bybit-rotulo { font-size: var(--texto-rotulo); font-weight: var(--peso-display); letter-spacing: var(--tracking-rotulo); text-transform: uppercase; }
.festival__ingresso-valor--bybit { color: var(--cor-texto-suave); font-size: var(--texto-mini); font-weight: var(--peso-forte); }
.festival__ingresso--esgotado .festival__ingresso-nome > span:first-child, .festival__ingresso-linha--esgotado .festival__ingresso-valor { color: var(--cor-texto-suave); text-decoration: line-through; }
.festival__ingresso-esgotado { color: var(--cor-alerta); font-size: var(--texto-rotulo); font-weight: var(--peso-display); letter-spacing: var(--tracking-rotulo); text-transform: uppercase; }

/* ── Sanfona (calendário e tabela dos cartões) ───────────────────────────── */
.festival__sanfona { border: 1px solid var(--cor-borda); border-radius: var(--raio-1); background: var(--cor-superficie); }
.festival__sanfona-resumo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--esp-2);
  min-height: var(--alvo-toque);
  padding: var(--esp-3) var(--esp-4);
  color: var(--tom-secao, var(--tom-ciano));
  font-size: var(--texto-controle);
  font-weight: var(--peso-forte);
  cursor: pointer;
  list-style: none;
}
.festival__sanfona-resumo::-webkit-details-marker { display: none; }
.festival__sanfona-resumo:hover { color: var(--cor-texto); }
.festival__sanfona-resumo:focus-visible { outline: 2px solid var(--cor-borda-ativa); outline-offset: -2px; border-radius: var(--raio-1); }
.festival__sanfona-resumo svg { flex-shrink: 0; transition: rotate var(--dur-rapida) var(--ease-padrao); }
.festival__sanfona[open] .festival__sanfona-resumo svg { rotate: 180deg; }
.festival__sanfona[open] .festival__sanfona-resumo { border-bottom: 1px solid var(--cor-borda); }
.festival__sanfona-corpo { display: grid; gap: var(--esp-4); padding: var(--esp-4); }

/* ── Palcos (template-parts/festival/palcos.php): um cartão por palco, com a foto sangrando até as bordas — o
   desenho do card de notícia (cartoes.css, .fas-noticia .foto): margem negativa até as bordas, e quem arredonda
   os cantos é o overflow do cartão, não a imagem.

   Flex, e não grid: com cinco palcos em três colunas, a última linha tem dois — no grid eles ficariam presos à
   esquerda, e aqui ficam centrados. A base de cada cartão é a largura de uma coluna, então as linhas cheias
   saem idênticas a um grid. ─────────────────────────────────────────────────────────────────────────────── */
.festival__palcos-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--esp-3); }
.festival__palco-cartao {
  flex: 0 1 calc((100% - var(--esp-3)) / 2);
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--esp-3);
  padding: var(--esp-3);
  overflow: hidden;
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-2);
  background: var(--cor-superficie);
}
@media (min-width: 48rem) {
  .festival__palcos-lista { gap: var(--esp-4); }
  .festival__palco-cartao { flex-basis: calc((100% - var(--esp-4) * 2) / 3); }
}
.festival__palco-cartao .foto { display: block; margin: calc(var(--esp-3) * -1) calc(var(--esp-3) * -1) 0; }
.festival__palco-cartao .foto img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  /* `height: auto` é obrigatório: sem ele o atributo `height` do <img> vence o aspect-ratio. */
  height: auto;
  object-fit: cover;
  border-radius: 0;
  background: rgb(18 7 38);
}
.festival__palco-cartao h3 { margin: 0; padding: 0 var(--esp-1) var(--esp-1); font-size: var(--texto-pequeno); font-weight: var(--peso-forte); line-height: var(--altura-apertada); text-align: center; overflow-wrap: anywhere; }

/* ── Line-up ─────────────────────────────────────────────────────────────── */
/* auto-fit, não auto-fill: com um bloco só (fase 1, artistas sem dia) o auto-fill reservava três colunas e deixava
   o painel encolhido à esquerda, com dois terços da largura vazios. O auto-fit recolhe as colunas sem conteúdo, e
   o bloco único ocupa a largura toda; dois dias dividem ao meio, três ou mais ficam iguais ao que era. */
.festival__lineup-palcos { display: grid; gap: var(--esp-5); }
@media (min-width: 48rem) { .festival__lineup-palcos { grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); column-gap: var(--esp-8); } }
/* Só nomes: um bloco por dia, os nomes em chips com foto. É o que o festival divulga primeiro. */
.festival__lineup-nomes .festival__lineup-palco { padding: var(--recuo-painel); border: 1px solid var(--cor-borda); border-radius: var(--raio-2); background: var(--cor-superficie); }
.festival__lineup-palco { display: grid; gap: var(--esp-3); align-content: start; }
.festival__palco { display: flex; align-items: baseline; gap: var(--esp-2); margin: 0; padding-bottom: var(--esp-2); border-bottom: 1px solid var(--cor-borda); color: var(--cor-texto); font-size: var(--texto-pequeno); font-weight: var(--peso-forte); }
.festival__palco-data { margin-inline-start: auto; color: var(--cor-texto-suave); font-size: var(--texto-legenda); font-weight: var(--peso-normal); }
.festival__palco-cor { align-self: center; width: .75rem; height: .75rem; border-radius: 50%; background: var(--palco-cor, var(--cor-texto-suave)); box-shadow: 0 0 10px var(--palco-cor, transparent); }
/* Chips de artista: são rótulos, não botões — por isso no celular ficam compactos (altura compacta, avatar menor,
   recuo curto), para caberem dois ou três por linha em vez de um por linha, em qualquer fase (só nomes ou por
   dia). A partir de 48rem voltam ao tamanho cheio, onde já cabem vários por linha. */
.festival__artistas { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--esp-2); }
.festival__artista { display: inline-flex; align-items: center; gap: var(--esp-2); min-height: var(--alvo-toque-compacto); padding: 2px var(--esp-2) 2px 2px; border: 1px solid var(--cor-borda); border-radius: var(--raio-pill); background: var(--cor-superficie-alta); color: var(--cor-texto); font-size: var(--texto-mini); font-weight: var(--peso-forte); line-height: var(--altura-apertada); }
.festival__avatar { width: 1.5rem; height: 1.5rem; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
@media (min-width: 48rem) {
  .festival__artista { min-height: var(--alvo-toque); padding: var(--esp-1) var(--esp-3) var(--esp-1) var(--esp-1); }
  .festival__artistas .festival__avatar { width: 1.75rem; height: 1.75rem; }
}
.festival__avatar--iniciais { display: grid; place-items: center; background: linear-gradient(135deg, var(--fas-violeta-aurora), var(--fas-magenta-aurora)); color: var(--fas-abismo); font-size: var(--texto-rotulo); font-weight: var(--peso-display); letter-spacing: var(--tracking-rotulo); }

/* Dias: um botão por dia, todos iguais na largura toda (o desenho dos dias do Lab). Nunca rola, nunca corta —
   a régua de chips que rolava cortava o "Dia 1" pela esquerda no celular. Duas linhas: o dia em cima, a data
   embaixo. */
.festival__lineup-dias { display: grid; grid-template-columns: repeat(var(--dias, 3), minmax(0, 1fr)); gap: var(--esp-2); width: 100%; max-width: 40rem; margin-inline: auto; }
.festival__lineup-dia-botao {
  display: grid;
  justify-items: center;
  gap: 2px;
  min-width: 0;
  min-height: var(--alvo-toque);
  padding: var(--esp-2) var(--esp-2);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-1);
  background: var(--cor-superficie);
  color: var(--cor-texto);
  font: inherit;
  line-height: var(--altura-apertada);
  cursor: pointer;
  transition: border-color var(--dur-rapida) var(--ease-padrao), background var(--dur-rapida) var(--ease-padrao), color var(--dur-rapida) var(--ease-padrao);
}
.festival__lineup-dia-botao strong { font-size: var(--texto-controle); font-weight: var(--peso-forte); }
.festival__lineup-dia-botao small { color: var(--cor-texto-suave); font-size: var(--texto-legenda); white-space: nowrap; }
.festival__lineup-dia-botao:hover { border-color: var(--cor-borda-ativa); }
.festival__lineup-dia-botao[aria-selected='true'] { border-color: var(--cor-acento); background: rgb(121 226 255 / .08); color: var(--cor-acento); }
.festival__lineup-dia-botao[aria-selected='true'] small { color: var(--cor-acento); opacity: .8; }
.festival__lineup-dia-botao:focus-visible { outline: 2px solid var(--cor-acento); outline-offset: 2px; }
.festival__lineup-dia { display: grid; gap: var(--esp-3); }
.festival__lineup-dia:focus-visible { outline: 2px solid var(--cor-acento); outline-offset: 4px; }
.festival__lineup-dia-rotulo { margin: 0; text-align: center; font-size: var(--texto-titulo-3); font-weight: var(--peso-forte); }
/* O ocultamento vive aqui, e não no HTML do servidor, para o fallback sem JavaScript ser real: sem a classe
   .js (header.php a escreve na primeira linha do <head>) os dias ficam empilhados com os seus títulos e a
   régua de abas some. Com JS, a classe chega antes do primeiro quadro — sem piscada. */
html.js .festival__lineup-dia:not([data-lineup-ativo]) { display: none; }
html.js .festival__lineup-dia-rotulo { display: none; }
html:not(.js) .festival__lineup-dias { display: none; }
.festival__lineup-fuso { text-align: center; }
/* O "ver todos" (secoes.css) traz a sua margem de cima; o grid do bloco já dá esp-4, então só o que falta. */
.festival__bloco .ver-todos { margin-top: calc(var(--esp-bloco-interno) - var(--esp-4)); }

/* ── Grade de horários (template-parts/festival/grade.php) ────────────────
   A mesma geometria da grade do Lab (lab-timetable.css, .fas-tt__grade*), que só carrega na página do Lab;
   aqui em versão de leitura: sem botões, com a foto do artista. A caixa é uma janela sobre o dia — rola nos
   dois eixos, a régua de horas fica presa à esquerda e o nome do palco no topo. */
.festival__grade-scroll {
  --grade-eixo: 2.75rem;
  --grade-faixa: 8.5rem;
  position: relative;
  max-width: 100%;
  max-height: min(60vh, 36rem);
  overflow: auto;
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-1);
  background: var(--fas-abismo);
  overscroll-behavior: contain;
  scrollbar-width: thin;
}
@media (min-width: 40rem) { .festival__grade-scroll { --grade-faixa: 9.75rem; } }
.festival__grade-scroll:focus-visible { outline: 2px solid var(--cor-acento); outline-offset: 2px; }
.festival__grade { display: grid; align-items: start; }
.festival__grade-eixo { position: sticky; left: 0; z-index: 3; background: var(--fas-abismo); border-right: 1px solid var(--cor-borda); }
.festival__grade-cab {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 3rem;
  margin: 0;
  padding: var(--esp-2);
  background: var(--fas-abismo);
  border-bottom: 2px solid var(--palco-cor, var(--cor-borda));
  color: var(--cor-texto);
  font-size: var(--texto-legenda);
  font-weight: var(--peso-forte);
  line-height: var(--altura-apertada);
  text-align: center;
  overflow: hidden;
}
.festival__grade-eixo .festival__grade-cab { z-index: 4; color: var(--cor-texto-suave); }
.festival__grade-cab--hora svg { opacity: .7; }
.festival__grade-coluna { min-width: 0; border-right: 1px solid rgb(126 74 255 / .14); }
/* Borda transparente, e não padding: filhos em position:absolute medem a partir da borda, então o primeiro set
   (e a primeira linha de hora) descem juntos e não colam no cabeçalho. content-box para a altura inline
   (minutos × escala) ser a do relógio, sem as bordas comerem dela. As linhas de hora vêm de um gradiente
   repetido no passo da escala. */
.festival__grade-horas, .festival__grade-horarios { position: relative; box-sizing: content-box; border-top: var(--esp-3) solid transparent; border-bottom: var(--esp-3) solid transparent; }
.festival__grade-horarios { background-image: repeating-linear-gradient(to bottom, rgb(126 74 255 / .16) 0 1px, transparent 1px calc(60px * var(--grade-escala, 1.5))); }
.festival__grade-horas time { position: absolute; left: 0; right: 0; padding-top: 4px; color: var(--cor-texto-suave); font-size: var(--texto-rotulo); font-variant-numeric: tabular-nums; text-align: center; }
.festival__grade-set {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: safe center;
  gap: var(--esp-1);
  padding: var(--esp-1) var(--esp-2);
  border: 1px solid rgb(126 74 255 / .3);
  border-radius: calc(var(--raio-1) / 1.5);
  background: rgb(26 11 61 / .7);
  color: var(--cor-texto);
  text-align: center;
  overflow: hidden;
}
.festival__grade-set time { color: var(--cor-texto-suave); font-size: var(--texto-rotulo); font-variant-numeric: tabular-nums; white-space: nowrap; }
.festival__grade-set strong { font-size: var(--texto-mini); font-weight: var(--peso-forte); line-height: var(--altura-apertada); overflow-wrap: anywhere; text-wrap: balance; }
.festival__grade-set--medio strong { font-size: var(--texto-legenda); }
.festival__grade-set--longo strong { font-size: var(--texto-rotulo); }
.festival__grade-set--baixo .festival__avatar { display: none; }
.festival__grade-set--baixo { gap: 2px; }
/* Chips dos palcos, presos logo abaixo do cabeçalho fixo do site enquanto a grade passa: no celular só cabe
   um palco e meio por vez, e sem eles a pessoa não sabe em qual está. O marcado é o palco à vista; tocar em
   outro leva a grade até ele (lineup.js). Some sem JS e quando a grade inteira cabe na tela. */
.festival__grade-palcos {
  position: sticky;
  top: calc(var(--altura-topbar) + var(--altura-header-real, var(--altura-header)));
  z-index: 5;
  display: flex;
  gap: var(--esp-2);
  margin-inline: calc(var(--gutter) * -1);
  padding: var(--esp-2) var(--gutter);
  background: color-mix(in srgb, var(--cor-fundo) 92%, transparent);
  backdrop-filter: blur(8px);
  overflow-x: auto;
  scrollbar-width: none;
}
.admin-bar .festival__grade-palcos { top: calc(var(--wp-admin--admin-bar-height, 32px) + var(--altura-topbar) + var(--altura-header-real, var(--altura-header))); }
.festival__grade-palcos::-webkit-scrollbar { display: none; }
html:not(.js) .festival__grade-palcos, .festival__grade-palcos[hidden] { display: none; }
.festival__grade-palco {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-2);
  flex-shrink: 0;
  min-height: var(--alvo-toque);
  padding: var(--esp-1) var(--esp-3);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-pill);
  background: var(--cor-superficie);
  color: var(--cor-texto-suave);
  font: inherit;
  font-size: var(--texto-mini);
  font-weight: var(--peso-forte);
  cursor: pointer;
  transition: border-color var(--dur-rapida) var(--ease-padrao), color var(--dur-rapida) var(--ease-padrao);
}
.festival__grade-palco[aria-pressed='true'] { border-color: var(--palco-cor, var(--cor-acento)); color: var(--cor-texto); }
.festival__grade-palco:focus-visible { outline: 2px solid var(--cor-acento); outline-offset: 2px; }

/* Celular: a grade rola com a página, e não dentro de uma janela — rolagem dentro de rolagem era o que
   parecia improviso. Ocupa a largura toda da tela (sem caixa dentro de caixa) e desliza palco a palco com
   encaixe, a coluna parando logo depois da régua de horas. Do tablet em diante fica a janela, como no Lab. */
@media (max-width: 47.99rem) {
  .festival__grade-scroll { max-height: none; margin-inline: calc(var(--gutter) * -1); border-inline: 0; border-radius: 0; scroll-snap-type: x proximity; scroll-padding-left: var(--grade-eixo); }
  .festival__grade-coluna { scroll-snap-align: start; }
  .festival__grade-cab { position: static; }
  .festival__grade-eixo .festival__grade-cab { position: static; }
}
@media (max-width: 39.99rem) {
  .festival__grade-set--medio strong { font-size: var(--texto-rotulo); }
  .festival__grade-set--curto strong { font-size: var(--texto-legenda); }
}

/* Histórico: uma linha por edição encerrada. */
.festival__historico ol { display: grid; gap: var(--esp-2); }
.festival__historico li {
  display: grid; grid-template-columns: 4rem minmax(0, 1fr) auto; gap: var(--esp-3); align-items: center;
  padding: var(--esp-3) var(--esp-4); border: 1px solid var(--cor-borda); border-radius: var(--raio-1); background: var(--cor-superficie);
}
.festival__historico .ano { color: var(--cor-acento); font-size: var(--texto-titulo-3); font-weight: var(--peso-forte); font-variant-numeric: tabular-nums; }
.festival__historico .detalhes { display: grid; gap: 2px; min-width: 0; }
.festival__historico .tema { font-weight: var(--peso-forte); text-wrap: pretty; }
.festival__historico .meta { color: var(--cor-texto-suave); font-size: var(--texto-mini); }
.festival__historico .fas-selo { justify-self: end; }
@media (max-width: 40rem) {
  .festival__historico li { grid-template-columns: 3.25rem minmax(0, 1fr); }
  .festival__historico .fas-selo { grid-column: 2; justify-self: start; }
}

@media (prefers-reduced-motion: reduce) {
  .festival__sanfona-resumo svg { transition: none; }
  .festival__grade-scroll { scroll-behavior: auto; }
  .festival__faixa-estado .pulso, .festival__faixa-acoes .pulso { animation: none; }
}

/* Preços abertos no celular: condições e valores não disputam uma coluna estreita. */
@media (max-width: 39.99rem) {
  .festival__ingresso { grid-template-columns: minmax(0, 1fr); gap: var(--esp-2); padding-block: var(--esp-4); }
  .festival__ingresso-valores { justify-items: start; text-align: left; }
  .festival__ingresso-linha { justify-content: flex-start; }
  .festival__ingresso-obs { font-size: var(--texto-pequeno); }
  .festival__arquivo .festival__grade-scroll, .festival__arquivo .festival__grade-palcos { margin-inline: 0; }
}

/* Ajuste restrito ao conteúdo do festival em celulares de 320px. */
.festival__abertura .fas-edicao, .festival__abertura .estado { min-width: 0; }
@media (max-width: 359px) {
  .festival__abertura .fas-edicao .corpo { padding: var(--esp-4); }
  .festival__abertura .fas-edicao .estado { padding: var(--esp-3); }
  .festival__abertura .fas-contagem .bloco { min-width: 0; }
}