/**
 * Hero Theme Two — Home
 *
 * Reconstruída a partir do protótipo de referência (expo-nerd-ux). Os valores
 * vieram da folha de estilo do protótipo conferida contra a tabela de medidas
 * computadas @1280/@390 — a folha tem seletores repetidos e vale sempre a
 * ÚLTIMA ocorrência.
 *
 * Tudo escopado em `.h2-home` (classe no <main> do front-page.php) porque o
 * main.css do tema anterior continua carregado para servir o MENU, que por
 * decisão do user permanece como está.
 *
 * @package HeroThemeTwo
 */

/* ══════════════════════════════════════════════════════════
   Base
   ══════════════════════════════════════════════════════════ */
.h2-home{background:var(--ink);color:var(--ink);font-family:var(--body)}
.h2-home *,.h2-home *::before,.h2-home *::after{box-sizing:border-box}
.h2-home .container{width:var(--container);margin-inline:auto}

.h2-home h1,.h2-home h2,.h2-home h3,.h2-home h4{
  font-family:var(--display);font-weight:800;font-synthesis:none;margin:0;
}
.h2-home h1,.h2-home h2{letter-spacing:-.045em}
.h2-home h3,.h2-home h4{letter-spacing:-.025em}
/* Última palavra/linha do título em lime — padrão de TODOS os títulos. */
.h2-home .neon{color:var(--lime);font-style:normal}

.h2-home .kicker{
  display:block;margin-bottom:19px;font-family:var(--body);font-size:9px;font-weight:900;
  letter-spacing:.15em;text-transform:uppercase;color:var(--brand-green);
}

.h2-home .btn{
  display:inline-flex;justify-content:center;align-items:center;gap:24px;position:relative;
  min-height:54px;padding:0 24px;border-radius:var(--r-btn);border:1px solid var(--lime);
  background:var(--lime);color:var(--ink);font-family:var(--body);font-size:11px;font-weight:900;
  letter-spacing:.06em;text-transform:uppercase;text-decoration:none;cursor:pointer;
  transition:background .2s,transform .2s,box-shadow .2s;
}
.h2-home .btn:hover{background:var(--bright);transform:translateY(-2px)}
.h2-home .btn:focus-visible{outline:3px solid #84b300;outline-offset:3px}

/* ══════════════════════════════════════════════════════════
   APARÊNCIA POR SEÇÃO
   ══════════════════════════════════════════════════════════
   Cada seção da Home carrega `data-space`, `data-band` e `data-width`, vindos
   do painel do Editor Visual. São ESCOLHAS NOMEADAS, não pixels livres — o
   tema anterior mostrou onde dá campo livre: quatro larguras de container
   diferentes (1200/1100/1040/1000) que ninguém decidiu, e cabeçalhos 20px fora
   de registro entre si. Aqui só existem três espaçamentos e três larguras
   possíveis no site inteiro.

   Tudo por variável CSS no próprio elemento: a sobrescrita "Avançado" do
   editor é só emitir `style="--section-y:…"`, sem `!important` e sem CSS
   gerado em banco.

   ═══ BUG RAIZ DO SITE AO VIVO, corrigido (07/08/2026) ═══
   Estas regras usavam `.h2-home > [data-…]` — combinador de FILHO DIRETO.
   No site real, o plugin embrulha cada seção num wrapper próprio
   (`Hero_*::…` em class-helpers.php:399 emite `<div class="hero-section-role">`
   via `do_action('hero_before_section')`), então o caminho vira
   `main.h2-home > .hero-section-role > .h2-section` — e NENHUMA regra com `>`
   aplicava: seção sem padding vertical, sem `color:#fff` nas bandas escuras,
   sem kicker lime. Foi ISSO que quebrou o site inteiro na primeira ativação
   do tema (títulos escuro-sobre-escuro a 1,10:1, seções coladas) enquanto os
   mockups — sem o wrapper — validavam perfeitos. Medido ao vivo:
   paddingTop 0px e color rgb(9,10,9) na seção escura de ingressos.
   Fix: descendente (` `) em vez de filho direto (`>`). É seguro porque os
   atributos data-space/band/width só existem nos wrappers de seção dentro de
   .h2-home — não há aninhamento que o descendente pegasse por engano.
   LIÇÃO: mockup precisa reproduzir o DOM REAL (wrappers de plugin inclusos),
   não só o template do tema. */
/* v0.33.0 — os três degraus e a largura "Largo" passaram a ler um TOKEN com
   padrão embutido. A página Configurações do tema define esses tokens; sem ela
   (ou com o campo vazio) o `var()` cai no mesmo número de antes, então o site
   não muda sozinho.
   Token com fallback e NÃO regra sobrescrita de propósito: não há disputa de
   especificidade, e o `style="--section-y:…"` que o Editor emite por seção
   continua vencendo os dois, por ser inline. Precedência declarada do projeto:
   tema → Customizer → Editor. */
.h2-home [data-space]{padding-block:var(--section-y)}
.h2-home [data-space="compacto"]{--section-y:var(--h2-space-compacto,76px)}
.h2-home [data-space="padrao"]  {--section-y:var(--h2-space-padrao,120px)}
.h2-home [data-space="amplo"]   {--section-y:var(--h2-space-amplo,168px)}

.h2-home [data-width="padrao"] .container{width:var(--container)}
.h2-home [data-width="largo"]  .container{width:min(var(--h2-largura-largo,1400px), 100% - 48px)}
.h2-home [data-width="total"]  .container{width:100%;padding-inline:24px}

/* Papéis de banda. `--on-band` é a cor de texto que cada papel garante, pra
   um card não precisar saber em que faixa caiu.

   v0.27.2 — `--on-band-soft` é o texto SECUNDÁRIO da banda (parágrafo de
   apoio, legenda). Existe por causa de um bug real: a Home tem DUAS camadas
   com `data-band` — o wrapper `.hero-section-role`, do plugin, e a
   `.h2-section`, do tema — e elas podem discordar. Como seletor descendente
   (`[data-band="escuro"] p`) casa com QUALQUER ancestral, o wrapper externo
   dizendo "contraste" pintava de branco o parágrafo de uma seção "clara":
   branco no branco, contraste 1,00:1, medido em Atrações no site.

   Custom property resolve porque HERDA: vence sempre a banda mais PRÓXIMA,
   que é a mesma que pinta o fundo. É a única forma de "closest wins" que o
   CSS oferece — não existe seletor de ancestral mais próximo. */
.h2-home [data-band="claro"]{background:var(--paper);color:var(--ink);--on-band:var(--ink);--on-band-soft:var(--muted);--band-line:var(--line)}
.h2-home [data-band="papel"]{background:var(--paper-2);color:var(--ink);--on-band:var(--ink);--on-band-soft:var(--muted);--band-line:var(--line)}
.h2-home [data-band="escuro"]{background:var(--ink);color:#fff;--on-band:#fff;--on-band-soft:#ffffff8f;--band-line:#ffffff1f}
.h2-home [data-band="contraste"]{background:var(--ink-3);color:#fff;--on-band:#fff;--on-band-soft:#ffffff8f;--band-line:#ffffff1f}
/* "Mídia" é a faixa que carrega foto/vídeo por baixo — o hero é o caso. Não
   define fundo: quem pinta é a própria mídia. */
.h2-home [data-band="midia"]{color:#fff;--on-band:#fff;--on-band-soft:#ffffff8f;--band-line:#ffffff25}

/* O kicker precisa virar com a banda: verde-escuro lê em fundo claro e some
   em fundo escuro, onde o lime puro é que funciona. */
.h2-home [data-band="escuro"] .kicker,
.h2-home [data-band="contraste"] .kicker,
.h2-home [data-band="midia"] .kicker{color:var(--lime)}

/* ══════════════════════════════════════════════════════════
   HERO
   ══════════════════════════════════════════════════════════
   Estrutura da referência: copy à esquerda + cartão de contagem à direita,
   alinhados pela BASE; faixa de nomes LIME e barra de dados ancoradas no pé.
   O respiro inferior grande (245px) existe justamente pra copy não passar por
   baixo dessas duas faixas absolutas. */
/* `.hero` TAMBÉM é uma classe bare do tema antigo (main.css:
   `.hero{display:flex;align-items:center;justify-content:center;background:
   #0A0A0A;...}`). A maioria das propriedades conflitantes já é sobrescrita
   abaixo (specificity .h2-home .hero > .hero), mas `justify-content` e
   `background` NÃO eram redeclaradas aqui — vazavam do main.css por
   ausência, não por perderem a briga de especificidade. Hoje é inofensivo
   (o único filho em fluxo normal, `.hero-main`, já se autocentra via
   margin:auto do `.container`, e o fundo fica atrás das camadas `inset:0`),
   mas é uma mina-terrestre: qualquer edição futura do `.hero` antigo, ou um
   hero sem `bg_image` cadastrada, reacende o vazamento. Selado aqui. */
.h2-home .hero{position:relative;display:flex;justify-content:flex-start;align-items:center;min-height:900px;color:#fff;background:var(--ink);overflow:hidden}

/* ── Mídia de fundo ──────────────────────────────────────
   Encaixe, posição, overlay e efeito vêm todos do Editor Visual, via
   variáveis no próprio elemento — nada aqui é fixo. `--hero-fit` e
   `--hero-pos` valem tanto pra imagem de fundo quanto pro <video>.

   GOTCHA (bug real, corrigido): `.hero-bg` TAMBÉM colide com main.css
   (`.hero-bg{z-index:2;...}`, de outro componente antigo não relacionado).
   Sem um z-index PRÓPRIO aqui, o valor antigo vazava — e como `.hero-shade`/
   `.grid-lines` (o véu escuro e a malha) ficam em z-index:auto, um
   `z-index:2` explícito faz `.hero-bg` empilhar ACIMA deles pela regra de
   stacking (positioned+z-index sempre pinta depois de positioned+auto,
   INDEPENDENTE da ordem no DOM) — a FOTO cobriria o véu que a escurece,
   prejudicando a legibilidade do texto sobre fotos claras. `z-index:0`
   sela o vazamento (specificity vence o antigo) e preserva a ordem natural
   por DOM entre as camadas auto (backdrop → bg → shade → grid-lines). */
.h2-home .hero-bg{
  position:absolute;inset:0;z-index:0;
  background-size:var(--hero-fit,cover);
  background-position:var(--hero-pos,50% 30%);
  background-repeat:no-repeat;
  filter:saturate(.86) contrast(1.08);
  transform:scale(1.02);
}
.h2-home .hero-bg video,
.h2-home .hero-bg img{
  position:absolute;inset:0;width:100%;height:100%;display:block;
  object-fit:var(--hero-fit,cover);object-position:var(--hero-pos,50% 30%);
}
/* `contain` deixa barras nas laterais; o backdrop é a MESMA imagem em cover e
   borrada preenchendo o vazio, em vez de uma faixa chapada. */
.h2-home .hero-backdrop{
  position:absolute;inset:0;background-size:cover;background-position:center;
  filter:blur(34px) saturate(1.1) brightness(.6);transform:scale(1.12);
}

/* Overlay: cor E opacidade configuráveis. O padrão reproduz o véu da
   referência (#060706 a ~68%). */
.h2-home .hero-shade{
  position:absolute;inset:0;
  background:var(--hero-overlay-color,#060706);
  opacity:var(--hero-overlay-opacity,.68);
}

/* ── Efeitos de movimento no fundo ───────────────────────
   Um efeito por vez, escolhido no editor (`data-hero-fx`). Todos respeitam
   `prefers-reduced-motion` no bloco lá embaixo. */
.h2-home .hero[data-hero-fx="kenburns"] .hero-bg{
  animation:h2-kenburns var(--hero-fx-speed,28s) ease-in-out infinite alternate;
  transform-origin:var(--hero-pos,50% 30%);
}
@keyframes h2-kenburns{from{transform:scale(1.02)}to{transform:scale(1.16)}}

.h2-home .hero[data-hero-fx="drift"] .hero-bg{
  animation:h2-drift var(--hero-fx-speed,34s) ease-in-out infinite alternate;
}
@keyframes h2-drift{from{transform:scale(1.09) translate3d(-1.4%,-1%,0)}to{transform:scale(1.09) translate3d(1.4%,1%,0)}}

/* Respiro: a imagem "respira" sem deslocar — o mais discreto dos três. */
.h2-home .hero[data-hero-fx="pulse"] .hero-bg{
  animation:h2-pulse var(--hero-fx-speed,20s) ease-in-out infinite alternate;
}
@keyframes h2-pulse{from{transform:scale(1.02)}to{transform:scale(1.06)}}
/* v0.27.0 — MALHA DA REFERÊNCIA. Valores copiados de `.hero-grid` do tema
   anterior (hero-expo-theme/assets/css/main.css:905), não estimados.

   O que havia aqui antes divergia em quatro pontos, e o terceiro era o que
   mais pesava: a coluna media `12.5%`, então a célula ESTICAVA junto com a
   janela — retângulo deitado no monitor largo, quase quadrado no celular.
   Em 60px fixos a malha é quadrada em qualquer tela, que é o que dá a
   leitura de grade técnica em vez de listra.

   A cor também muda: lime a 6%, não branco. E não há `opacity` no elemento
   — a discrição vem da própria cor. Empilhar os dois multiplicaria os
   alfas e a malha sumiria. */
.h2-home .grid-lines{
  position:absolute;inset:0;
  background-image:linear-gradient(rgba(166,223,0,.06) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(166,223,0,.06) 1px,transparent 1px);
  background-size:60px 60px;
  animation:h2-grid-move 20s linear infinite;
}
@keyframes h2-grid-move{to{background-position:60px 60px}}
/* Malha em movimento constante incomoda quem tem sensibilidade vestibular —
   o tema anterior já desligava (main.css:3861), e a regra vem junto. */
@media(prefers-reduced-motion:reduce){
  .h2-home .grid-lines{animation:none}
}
.h2-home .hero-main{
  position:relative;z-index:2;display:flex;justify-content:space-between;align-items:flex-end;
  gap:55px;padding:125px 0 245px;
}
.h2-home .hero-copy{flex:1 1 auto;min-width:0;max-width:740px;text-shadow:0 3px 28px #000}

.h2-home .eyebrow{
  display:inline-flex;align-items:center;gap:10px;padding:8px 11px;border-radius:var(--r-pill);
  background:#080a0875;border:1px solid #ffffff20;backdrop-filter:blur(8px);
  font-size:10px;font-weight:900;letter-spacing:.15em;text-transform:uppercase;
}
.h2-home .eyebrow b{width:7px;height:7px;border-radius:50%;background:var(--lime);box-shadow:0 0 15px var(--lime);flex:none}

.h2-home .hero h1{
  margin:25px 0 24px;font-size:clamp(64px,7.1vw,105px);line-height:.86;
  letter-spacing:-.055em;text-transform:uppercase;font-weight:800;text-wrap:balance;
}
.h2-home .hero-copy > p{
  max-width:620px;margin:0;font-size:17px;font-weight:600;line-height:1.65;color:#fff;text-shadow:0 2px 18px #000;
}
.h2-home .hero-actions{display:flex;align-items:center;gap:30px;margin-top:34px;flex-wrap:wrap}
.h2-home .inline-link{
  padding:14px 4px;font-size:10px;font-weight:900;letter-spacing:.07em;text-transform:uppercase;
  color:#fff;text-decoration:none;text-shadow:0 2px 12px #000;
}
.h2-home .inline-link span{margin-left:10px;color:var(--lime)}
.h2-home .inline-link:hover span{color:var(--bright)}
.h2-home .inline-link:focus-visible{outline:3px solid #84b300;outline-offset:3px;border-radius:4px}

/* Cartão de contagem */
.h2-home .countdown-card{
  flex:none;width:365px;margin-bottom:7px;padding:22px;border-radius:16px;
  background:#0a0c0aca;border:1px solid #ffffff35;backdrop-filter:blur(14px);box-shadow:0 22px 70px #0008;
}
.h2-home .countdown-title{
  display:flex;justify-content:space-between;align-items:center;gap:12px;
  margin-bottom:17px;padding-bottom:14px;border-bottom:1px solid #ffffff1f;
}
.h2-home .countdown-title span{color:var(--lime);font-size:8px;font-weight:900;letter-spacing:.12em;text-transform:uppercase}
.h2-home .countdown-title b{color:#ffffff9e;font-size:8px;letter-spacing:.1em}
.h2-home .countdown-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.h2-home .countdown-grid > div{text-align:center;background:#ffffff09;border-radius:9px;min-width:0;padding:10px 4px}
.h2-home .countdown-grid strong{
  display:block;color:#fff;font-family:var(--display);font-size:30px;line-height:1;
  letter-spacing:-.05em;font-variant-numeric:tabular-nums;
}
.h2-home .countdown-grid small{
  display:block;margin-top:7px;color:#ffffff70;font-size:7px;font-weight:900;
  letter-spacing:.08em;text-transform:uppercase;
}

/* Rodapé do hero: faixa de nomes + barra de dados EMPILHADAS num container só,
   ancorado no pé. A referência ancora cada uma por conta (`bottom:94px` no
   ticker, `bottom:0` na barra) porque lá a barra tem exatamente 94px sempre.
   Aqui ela quebra em 2 linhas em telas médias e vai a ~144px — medido, o
   ticker entrava por cima dela. Empilhar remove o número mágico: a faixa fica
   acima da barra qualquer que seja a altura dela. */
.h2-home .hero-foot{position:absolute;inset:auto 0 0;z-index:3;display:flex;flex-direction:column}

/* v0.27.0 — Faixa de nomes TRANSLÚCIDA (véu de 35% + blur), no lugar do lime
   sólido de antes. Duas razões:

   1) Cor. A faixa lime tem a largura toda da tela e o botão "Garanta seu
      Ingresso" tem ~220px — os dois no mesmo lime, na mesma dobra, e o olho
      ia pro elemento decorativo. Com o véu, o lime volta a apontar só pra
      ação e sobra como acento no separador.

   2) 35% e não transparente puro, e isso foi medido. A faixa fica sobre a
      FOTO do hero, que o admin troca, sob o overlay que o admin também
      regula. No pior caso (foto branca), o transparente puro só passa o AA
      com overlay >= 60%; o véu de 35% aguenta até 34%. Como o overlay é
      campo do Editor Visual, o transparente amarraria a legibilidade da
      faixa a um ajuste feito em outra tela — quebraria calado. */
.h2-home .hero-ticker{
  position:relative;z-index:4;display:flex;align-items:center;flex:none;
  height:56px;overflow:hidden;
  background:#0a0c0a59;color:#fff;backdrop-filter:blur(10px);
  border-block:1px solid #ffffff1a;
}
.h2-home .ticker-track{display:flex;width:max-content;animation:h2-ticker 34s linear infinite}
.h2-home .ticker-group{display:flex;align-items:center;flex:none}
.h2-home .ticker-group span{
  display:flex;align-items:center;gap:27px;padding-left:27px;white-space:nowrap;
  color:#fff;font-size:10px;font-weight:900;letter-spacing:.08em;text-transform:uppercase;
  /* A sombra é seguro contra o trecho claro da foto que o véu deixa passar:
     o contraste medido é a média do fundo, mas uma faixa branca localizada
     na imagem apagaria o nome bem ali. */
  text-shadow:0 1px 10px #000000b3;
}
.h2-home .ticker-group b{color:var(--lime);font-size:10px}
@keyframes h2-ticker{to{transform:translateX(-50%)}}

/* Barra de dados no pé do hero */
.h2-home .hero-info{
  position:relative;z-index:3;
  background:#080a08e8;backdrop-filter:blur(14px);border-top:1px solid #ffffff25;
}
.h2-home .info-grid{display:grid;grid-template-columns:1fr 1.3fr 1.1fr auto;align-items:center;min-height:var(--nav-h)}
.h2-home .info-grid > *{
  display:flex;flex-direction:column;justify-content:center;min-height:var(--nav-h);
  padding:0 28px;border-right:1px solid #ffffff1f;
}
.h2-home .info-grid > :first-child{padding-left:0}
.h2-home .info-grid small{color:var(--lime);font-size:8px;font-weight:900;letter-spacing:.14em;text-transform:uppercase}
.h2-home .info-grid strong{margin-top:8px;color:#fff;font-size:12px;font-family:var(--body);font-weight:700}
.h2-home .info-grid > a{
  flex-direction:row;align-items:center;gap:28px;min-width:160px;border:0;
  color:var(--lime);font-size:9px;font-weight:900;text-transform:uppercase;text-decoration:none;
}
.h2-home .info-grid > a:hover{color:var(--bright)}
.h2-home .info-grid > a:focus-visible{outline:3px solid #84b300;outline-offset:-3px}

/* ══════════════════════════════════════════════════════════
   Responsivo — breakpoints da referência
   ══════════════════════════════════════════════════════════ */
@media(max-width:1100px){
  .h2-home .hero-main{padding:110px 0 235px;gap:40px}
  .h2-home .countdown-card{width:320px}
}
@media(max-width:980px){
  .h2-home .hero{min-height:0}
  .h2-home .hero-main{flex-direction:column;align-items:stretch;padding:104px 0 250px}
  .h2-home .countdown-card{width:100%;max-width:420px;margin-bottom:0}
  .h2-home .info-grid{grid-template-columns:1fr 1fr}
  .h2-home .info-grid > *{min-height:72px}
  .h2-home .info-grid > a{grid-column:1/-1;justify-content:space-between;border-right:0}
}
@media(max-width:680px){
  .h2-home .hero h1{font-size:clamp(49px,16vw,68px)}
  .h2-home .hero-main{padding:92px 0 240px;gap:28px}
  .h2-home .hero-copy > p{font-size:15px}
  .h2-home .countdown-grid strong{font-size:24px}
  .h2-home .info-grid{grid-template-columns:1fr}
  .h2-home .info-grid > *{border-right:0;border-bottom:1px solid #ffffff1f;padding:0 20px}
}

/* Movimento reduzido: o ticker PARA (carrega nomes de atrações, precisa ficar
   legível parado) e o 2º grupo — que só existe pra emenda — some. */
@media (prefers-reduced-motion: reduce){
  .h2-home *{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .h2-home .ticker-track{animation:none;transform:none}
  .h2-home .ticker-group:nth-child(2){display:none}
  /* A regra genérica acima só encurta a animação — o Ken Burns terminaria
     PARADO no fim do curso (scale 1.16), deixando a foto ampliada e cortada.
     Aqui ela é cancelada de verdade e o fundo volta ao enquadramento base. */
  .h2-home .hero .hero-bg{animation:none!important;transform:scale(1.02)!important}
}

/* ══════════════════════════════════════════════════════════
   ATRAÇÕES — cards de convidado
   ══════════════════════════════════════════════════════════
   Valores da referência: grade de 3, card de 510px, monograma gigante ao
   fundo e degradê que escurece só a metade de baixo, onde fica o nome.

   O monograma é decoração DERIVADA (iniciais do nome), não um campo novo —
   e é ele que segura o card quando não há foto cadastrada, o que dispensa
   imagem de placeholder.

   GOTCHA (bug real, corrigido): o wrapper do cabeçalho chamava-se
   `.section-title`, mas essa classe JÁ EXISTE global no tema antigo
   (main.css), aplicada direto num <h2> com `color:var(--text-primary)` — que
   MUDA com o modo escuro do site (`[data-theme="dark"]{--text-primary:#E8E8E8}`,
   quase branco). Os tokens da Home (`tokens.css`) são FIXOS e não reagem ao
   modo escuro — o fundo desta seção continua branco sempre. Resultado: com o
   modo escuro do site ligado, o título herdava cor quase-branca sobre fundo
   branco fixo — texto praticamente invisível. Renomeado para `.h2-headband`
   (namespace exclusivo da Home, sem colisão possível com main.css) — nenhuma
   outra seção nova reaproveitava `.section-title`, então o rename é local. */
.h2-home .h2-headband{
  display:grid;grid-template-columns:1.25fr .75fr;gap:80px;align-items:end;margin-bottom:54px;
}
.h2-home .h2-headband h2{font-size:clamp(46px,5vw,74px);line-height:.92;letter-spacing:-.055em;text-transform:uppercase}
/* v0.27.2 — `--on-band-soft` no lugar das duas regras por banda que havia
   aqui. Elas casavam com o wrapper do plugin e pintavam de branco o
   parágrafo desta seção clara: contraste 1,00:1 em Atrações, no ar. */
.h2-home .h2-headband p{margin:0;max-width:430px;font-size:15px;line-height:1.7;color:var(--on-band-soft,var(--muted))}
@media(max-width:900px){
  .h2-home .h2-headband{grid-template-columns:1fr;gap:20px;align-items:start;margin-bottom:34px}
  .h2-home .h2-headband p{max-width:none}
}

.h2-home .guest-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.h2-home .guest{
  position:relative;height:510px;overflow:hidden;border-radius:var(--r-card);
  background:#222;color:#fff;text-decoration:none;display:block;
}
/* v0.26.1 — o hover do convidado agora é o MESMO das Experiências: nada
   acontece com o card, só a FOTO clareia e aproxima.

   A versão anterior (v0.23.4) levantava o card, jogava sombra e acendia uma
   borda lime — três efeitos somados num card de 510px, que é grande demais
   pra levantar sem parecer solto da página. O card fica parado; quem reage é
   a imagem.

   Os valores são os mesmos do `.experience > img` logo abaixo, de propósito:
   são os dois grids de card com foto sangrada da Home, e hover diferente
   entre eles fazia a página parecer feita por duas mãos.

   O anel lime que a experiência anima no `::after` NÃO vem junto — ele é a
   assinatura visual daquela seção, não parte do efeito de hover. */
a.guest:focus-visible{outline:3px solid var(--lime);outline-offset:3px}
.h2-home .guest-foto{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
  filter:brightness(1.12) saturate(.98) contrast(1.02);
  transition:transform .55s,filter .55s;
}
.h2-home .guest:hover .guest-foto{filter:brightness(1.18) saturate(1.08) contrast(1.02);transform:scale(1.045)}
/* Monograma: enorme, quase transparente e inclinado — textura, não leitura.
   `pointer-events:none` porque o card inteiro pode ser link. */
/* Monograma: RESERVA pra card sem foto cadastrada, não decoração sobre a
   foto. A foto é o conteúdo principal do card — foi o erro da 1ª versão. */
.h2-home .initials{
  position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;
  font-family:var(--display);font-size:210px;font-weight:900;letter-spacing:-.17em;
  color:#ffffff14;transform:rotate(-9deg);
}
.h2-home .guest--sem-foto,
.h2-home .atr--sem-foto{background:linear-gradient(150deg,#242724,#141614)}
.h2-home .lime-guest.guest--sem-foto{background:var(--lime)}
.h2-home .lime-guest .initials{color:#00000015}
.h2-home .guest-shade{position:absolute;inset:0;background:linear-gradient(#0000 40%,#080808f0)}
.h2-home .guest-top{
  position:absolute;inset:20px 20px auto;display:flex;justify-content:space-between;align-items:center;
}
.h2-home .guest-top span{opacity:.6;font-size:9px;font-variant-numeric:tabular-nums}
.h2-home .guest-top b{
  padding:8px 11px;border-radius:var(--r-pill);background:#ffffff18;border:1px solid #fff5;
  font-size:8px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;
}
.h2-home .guest-copy{position:absolute;inset:auto 24px 24px}
.h2-home .guest-copy small{display:block;margin-bottom:6px;color:var(--lime);font-size:9px;font-weight:900;text-transform:uppercase;letter-spacing:.1em}
.h2-home .guest-copy h3{font-size:26px;line-height:1.05;text-transform:uppercase}

/* Card em destaque: fundo lime e tudo inverte pra ficar legível sobre ele.

   BUG REAL corrigido (achado pelo user no site ao vivo, 07/08/2026): o
   tratamento lime aplicava a QUALQUER card com destaque marcado — e como os 3
   convidados estão marcados, os 3 viravam lime, com o degradê verde de 93% de
   opacidade cobrindo o card INTEIRO e apagando os rostos. Conferido na
   referência ao vivo: lá só UM card é `lime-guest`, e é justamente o ÚNICO
   SEM FOTO (Vyni Takahashi, que cai no monograma). Os outros dois, com foto,
   usam o degradê PRETO normal (`#0000 40% → #080808f0`).
   Ou seja: o lime é a identidade do card SEM foto — o preenchimento que
   substitui a imagem —, não um "selo de destaque" sobre o rosto de ninguém.
   Fix: `:not(:has(.guest-foto))` restringe tudo ao card sem foto. Card com
   foto E destaque mantém o degradê preto, preservando o rosto.
   Fallback: navegador sem `:has()` (Firefox < 121) ignora o bloco inteiro e
   cai no degradê preto — que é o comportamento correto pra card com foto, o
   caso mais comum. Degrada pro lado seguro. */
.h2-home .lime-guest:not(:has(.guest-foto)){background:var(--lime);color:var(--ink)}
.h2-home .lime-guest:not(:has(.guest-foto)) .guest-shade{background:linear-gradient(#0000,#92c200ee)}
.h2-home .lime-guest:not(:has(.guest-foto)) .guest-copy small{color:var(--ink);opacity:.72}
.h2-home .lime-guest:not(:has(.guest-foto)) .guest-top b{background:#0000001a;border-color:#0003}

@media(max-width:900px){
  .h2-home .guest-grid{grid-template-columns:1fr 1fr}
  .h2-home .guest{height:430px}
  .h2-home .initials{font-size:150px}
}
@media(max-width:600px){
  .h2-home .guest-grid{grid-template-columns:1fr}
  .h2-home .guest{height:400px}
}

/* Rodapé do card de convidado — link "Ver painel" de largura total, com
   régua em cima e a seta na ponta (referência: `.guest-copy a`). No card
   lime a régua escurece, senão some sobre o verde. */
.h2-home .guest-copy a{
  display:flex;justify-content:space-between;align-items:center;margin-top:14px;padding-top:17px;
  border-top:1px solid #ffffff3b;color:inherit;text-decoration:none;
  font-family:var(--body);font-size:9px;font-weight:900;letter-spacing:.1em;text-transform:uppercase;
}
.h2-home .guest-copy a:hover{color:var(--bright)}
/* Faltavam nestas 2: mesmo bug do fundo/degradê lime — o "Ver painel" escuro
   sobre lime só faz sentido no card SEM foto (fundo lime real); num card com
   foto (fundo escuro) ele ficaria quase invisível. */
.h2-home .lime-guest:not(:has(.guest-foto)) .guest-copy a{border-color:#00000032}
.h2-home .lime-guest:not(:has(.guest-foto)) .guest-copy a:hover{color:#3d5200}
.h2-home .guest-copy a:focus-visible{outline:3px solid var(--lime);outline-offset:3px}

/* Link central "Ver todas as atrações". */
.h2-home .center{text-align:center;margin-top:40px}
.h2-home .under-link{
  display:inline-flex;align-items:center;gap:42px;min-height:46px;
  color:inherit;text-decoration:none;border-bottom:1px solid currentColor;
  font-family:var(--body);font-size:9px;font-weight:900;letter-spacing:.1em;text-transform:uppercase;
}
.h2-home .under-link:hover{color:var(--brand-green)}
.h2-home .under-link:focus-visible{outline:3px solid var(--lime);outline-offset:4px}

/* ══════════════════════════════════════════════════════════
   EXPERIÊNCIAS — bento de arenas (seção escura)
   ══════════════════════════════════════════════════════════
   É AQUI que moram as atrações secundárias — seção própria, separada de
   Atrações (correção do user). Valores da referência: grade 1.08fr/.92fr ×
   3 faixas de 210px, principal ocupando a coluna esquerda; abaixo, fileira
   de minis de 360px. */
.h2-home .experience-head{
  display:grid;grid-template-columns:1.25fr .75fr;gap:80px;align-items:end;margin-bottom:54px;
}
.h2-home .experience-head h2{font-size:clamp(46px,5vw,74px);line-height:.92;letter-spacing:-.055em;text-transform:uppercase}
.h2-home .experience-head p{margin:0;max-width:430px;font-size:15px;line-height:1.7;color:#ffffff8f}

.h2-home .experience-grid{display:grid;grid-template-columns:1.08fr .92fr;grid-template-rows:repeat(3,210px);gap:14px}
.h2-home .experience{
  position:relative;isolation:isolate;display:flex;flex-direction:column;justify-content:space-between;
  padding:25px;overflow:hidden;border-radius:var(--r-card-lg);
  background:#171917;border:1px solid #ffffff30;box-shadow:inset 0 0 0 1px #ffffff08;
}
.h2-home .experience > img{
  position:absolute;inset:0;z-index:-3;width:100%;height:100%;object-fit:cover;
  filter:brightness(1.12) saturate(.98) contrast(1.02);
  transition:transform .55s,filter .55s;
}
.h2-home .experience:hover > img{filter:brightness(1.18) saturate(1.08) contrast(1.02);transform:scale(1.045)}
.h2-home .experience-shade{
  position:absolute;inset:0;z-index:-2;
  background:linear-gradient(90deg,#080a08b8 0%,#080a084d 54%,#080a080a 100%),
             linear-gradient(#0000 35%,#080a08a8 100%);
}
/* Anel lime decorativo vazando pelo canto — assinatura visual da seção. */
.h2-home .experience::after{
  content:"";position:absolute;bottom:-116px;right:-74px;z-index:-1;
  width:200px;height:200px;border:44px solid #a6df001d;border-radius:50%;
  transition:transform .45s;
}
.h2-home .experience:hover::after{transform:scale(1.12)}

.h2-home .activity-tags{
  position:relative;z-index:3;display:flex;flex-wrap:wrap;justify-content:flex-end;align-self:flex-end;gap:6px;
}
.h2-home .activity-tag{
  padding:7px 10px;border-radius:999px;font-family:var(--body);font-size:7px;font-weight:900;
  letter-spacing:.08em;text-transform:uppercase;color:#eaffac;
  background:#0a0c09c7;border:1px solid #dfff7f99;backdrop-filter:blur(10px);box-shadow:0 6px 18px #0005;
}
.h2-home .activity-tag.signup{background:var(--lime);border-color:var(--lime);color:var(--ink)}

.h2-home .experience > div:last-child{position:relative;z-index:2;max-width:78%;text-shadow:0 2px 12px #000}
.h2-home .experience small{
  display:block;color:var(--bright);font-family:var(--body);font-size:8px;font-weight:900;
  letter-spacing:.14em;text-transform:uppercase;
}
.h2-home .experience h3{margin:9px 0 7px;font-size:29px;line-height:.95;letter-spacing:-.045em;text-transform:uppercase}
.h2-home .experience p{margin:0;max-width:390px;font-size:11px;line-height:1.5;color:#ffffffe0}
/* Card largo: a chamada é o botão circular ancorado na faixa à direita do
   bloco de texto (right negativo em relação ao div, como na referência). */
.h2-home .experience div > a{
  position:absolute;bottom:0;right:-92px;display:grid;place-items:center;
  width:35px;height:35px;border-radius:50%;font-size:13px;text-decoration:none;
  color:var(--bright);background:#0b0c0b70;border:1px solid #fff6;transition:all .25s;
}
.h2-home .experience div > a:hover{background:var(--lime);color:var(--ink);border-color:var(--lime);transform:rotate(8deg)}
.h2-home .experience div > a:focus-visible{outline:3px solid var(--lime);outline-offset:3px}

/* Principal: coluna esquerda inteira, título gigante, chamada sublinhada. */
.h2-home .main-card{grid-row:1/4}
.h2-home .main-card > img{object-position:center 28%;filter:brightness(1.1) saturate(1.02) contrast(1.01)}
.h2-home .main-card:hover > img{filter:brightness(1.16) saturate(1.1) contrast(1.01)}
.h2-home .main-card .experience-shade{
  background:linear-gradient(#080a0805 28%,#080a0852 57%,#080a08d1 100%),
             linear-gradient(90deg,#080a0833,#0000 60%);
}
.h2-home .main-card::after{width:500px;height:500px;border-width:95px;border-color:#a6df0017;bottom:-180px;right:-270px}
.h2-home .main-card > div:last-child{max-width:88%}
.h2-home .main-card h3{margin:13px 0;font-size:68px}
.h2-home .main-card p{max-width:430px;font-size:14px;color:#ffffffe8}
.h2-home .main-card div > a{
  position:static;display:inline-flex;gap:38px;width:auto;height:auto;margin-top:24px;padding-bottom:9px;
  border:0;border-bottom:1px solid #ffffffb0;border-radius:0;background:none;
  color:#fff;font-family:var(--body);font-size:9px;font-weight:900;text-transform:uppercase;
}
.h2-home .main-card div > a:hover{color:var(--lime);border-color:var(--lime);background:none;transform:none}

/* Fileira de minis. */
.h2-home .more-attractions{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:14px}
.h2-home .mini-experience{
  position:relative;isolation:isolate;display:flex;flex-direction:column;justify-content:space-between;
  height:360px;padding:24px;overflow:hidden;border-radius:var(--r-card-lg);border:1px solid #ffffff30;
  background:#171917;
}
.h2-home .mini-experience > img{
  position:absolute;inset:0;z-index:-3;width:100%;height:100%;object-fit:cover;
  filter:brightness(1.08) saturate(1.02);transition:transform .5s,filter .5s;
}
.h2-home .mini-experience:hover > img{filter:brightness(1.14) saturate(1.1);transform:scale(1.05)}
.h2-home .mini-shade{position:absolute;inset:0;z-index:-2;background:linear-gradient(#0608060d 0%,#06080638 35%,#060806e6 100%)}
.h2-home .access-tag{
  align-self:flex-end;padding:7px 10px;border-radius:var(--r-pill);
  font-family:var(--body);font-size:7px;font-weight:900;letter-spacing:.1em;text-transform:uppercase;
  background:#0a0c0a70;border:1px solid #ffffff5c;backdrop-filter:blur(9px);
}
.h2-home .signup-tag{color:var(--bright);border-color:#a6df0080}
.h2-home .mini-experience > div:last-child{text-shadow:0 2px 12px #000}
.h2-home .mini-experience small{
  display:block;color:var(--bright);font-family:var(--body);font-size:8px;font-weight:900;
  letter-spacing:.13em;text-transform:uppercase;
}
.h2-home .mini-experience h3{margin:10px 0;font-size:38px;line-height:.92;letter-spacing:-.05em;text-transform:uppercase}
.h2-home .mini-experience p{margin:0 0 18px;font-size:11px;line-height:1.5;color:#ffffffe0}
.h2-home .mini-experience a{
  color:inherit;text-decoration:none;padding-bottom:7px;border-bottom:1px solid #ffffff8f;
  font-family:var(--body);font-size:8px;font-weight:900;letter-spacing:.08em;text-transform:uppercase;
}
.h2-home .mini-experience a:hover{color:var(--bright);border-color:var(--bright)}
.h2-home .mini-experience a:focus-visible{outline:3px solid var(--lime);outline-offset:3px}

/* Card sem foto cadastrada: degradê próprio pra não ficar um vazio preto. */
.h2-home .experience--sem-foto{background:linear-gradient(150deg,#1d201d,#101210)}

@media(max-width:980px){
  .h2-home .experience-head{grid-template-columns:1fr;gap:20px;align-items:start;margin-bottom:34px}
  .h2-home .experience-head p{max-width:none}
  .h2-home .experience-grid{grid-template-columns:1fr 1fr;grid-template-rows:450px 300px 300px}
  .h2-home .main-card{grid-area:auto/1/auto/3}
  .h2-home .experience:nth-child(4){grid-column:1/3}
  .h2-home .more-attractions{grid-template-columns:1fr 1fr}
  .h2-home .mini-experience:last-child{grid-column:1/3}
}
@media(max-width:680px){
  .h2-home .experience-grid{display:flex;flex-direction:column}
  .h2-home .experience{min-height:300px}
  .h2-home .experience > div:last-child{max-width:88%}
  .h2-home .main-card{min-height:480px}
  .h2-home .main-card h3{font-size:52px}
  .h2-home .experience h3{font-size:32px}
  .h2-home .more-attractions{display:flex;flex-direction:column}
  .h2-home .mini-experience{height:auto;min-height:280px}
}

/* ══════════════════════════════════════════════════════════
   PROGRAMAÇÃO — intro fixa + agenda por dia
   ══════════════════════════════════════════════════════════
   Valores da referência: duas colunas .8fr/1.2fr com vão de 100px, intro
   sticky, abas de dia com régua embaixo e linhas de agenda de 110px. */
.h2-home .schedule{display:grid;grid-template-columns:.8fr 1.2fr;gap:100px}
.h2-home .schedule-intro{position:sticky;top:35px;align-self:start}
.h2-home .schedule-intro h2{font-size:clamp(46px,5vw,74px);line-height:.92;letter-spacing:-.055em;text-transform:uppercase}
.h2-home .schedule-intro p{max-width:390px;margin:27px 0;line-height:1.7;color:var(--muted)}

.h2-home .tabs{display:grid;grid-template-columns:repeat(3,1fr);border-bottom:1px solid var(--line)}
.h2-home .tabs button{
  padding:17px 8px;border:0;border-bottom:3px solid #0000;background:none;cursor:pointer;
  /* #888 media 3,54:1 sobre branco — reprovado pro texto pequeno (achado na
     auditoria de contraste, 07/08/2026). #747474 chega a 4,67:1. Herdado
     também por `.tabs small` (a data "11 set"/"13 set" abaixo do dia). */
  color:#747474;font-family:var(--body);font-size:11px;font-weight:900;text-transform:uppercase;
  letter-spacing:.06em;transition:color .2s,border-color .2s;
}
.h2-home .tabs small{display:block;margin-bottom:5px;font-size:8px;letter-spacing:.1em}
.h2-home .tabs .active{color:var(--ink);border-color:var(--lime)}
.h2-home .tabs button:hover{color:var(--ink)}
.h2-home .tabs button:focus-visible{outline:3px solid var(--lime);outline-offset:-3px}

.h2-home .agenda-row{
  display:grid;grid-template-columns:80px 1fr auto;align-items:center;gap:24px;
  min-height:110px;border-bottom:1px solid var(--line);
}
.h2-home .agenda-row time{color:var(--brand-green);font-size:19px;font-weight:900;font-variant-numeric:tabular-nums}
.h2-home .agenda-row div{display:flex;flex-direction:column;gap:7px}
.h2-home .agenda-row div strong{font-family:var(--body);font-size:16px;font-weight:700}
.h2-home .agenda-row div span{color:var(--muted);font-size:11px}
.h2-home .agenda-row > b{color:var(--brand-green);font-weight:400}
.h2-home .agenda .note{margin:16px 0 0;color:#747474;font-size:9px}

@media(max-width:980px){
  .h2-home .schedule{grid-template-columns:1fr;gap:48px}
  .h2-home .schedule-intro{position:static}
}
@media(max-width:680px){
  .h2-home .agenda-row{grid-template-columns:62px 1fr auto;gap:12px;min-height:88px}
}

/* ══════════════════════════════════════════════════════════
   INGRESSOS — cards de passe (seção escura #151715)
   ══════════════════════════════════════════════════════════
   Valores da folha da referência conferidos contra a tabela computada
   (vale sempre a ÚLTIMA ocorrência de cada seletor: raio 19, padding
   37/33/30, gap 18, min-height 590). */
.h2-home .h2-section--ingressos{background:#151715;position:relative;overflow:hidden}
/* Malha fantasma da seção, esmaecendo em cima e embaixo. */
.h2-home .h2-section--ingressos::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(#ffffff06 1px,#0000 1px),linear-gradient(90deg,#ffffff05 1px,#0000 1px);
  background-size:74px 74px;
  -webkit-mask-image:linear-gradient(#0000 12%,#000 70%,#0000);
          mask-image:linear-gradient(#0000 12%,#000 70%,#0000);
}
.h2-home .tickets-wrap{position:relative;z-index:2}

.h2-home .ticket-head{
  position:relative;display:grid;grid-template-columns:1.25fr .75fr;gap:80px;align-items:end;margin-bottom:54px;
}
.h2-home .ticket-head::after{
  content:"PASSES // 2026";position:absolute;top:-25px;right:0;pointer-events:none;white-space:nowrap;
  font-family:var(--display);font-size:86px;font-weight:900;letter-spacing:-.07em;color:#ffffff0a;
}
.h2-home .ticket-head > *{position:relative;z-index:2}
.h2-home .ticket-head h2{font-size:clamp(46px,5vw,74px);line-height:.92;letter-spacing:-.055em;text-transform:uppercase}
.h2-home .ticket-head p{margin:0;max-width:430px;font-size:15px;line-height:1.7;color:#ffffffa3}
/* v0.31.0 — o cabeçalho era o único dos cinco desta família (`h2-headband`,
   `experience-head`, `partners-head`, `location-head`) que nunca empilhava:
   ficava em duas colunas até 320px, e o texto de apoio virava uma coluna de
   ~90px com uma ou duas palavras por linha ao lado do título. Mesma regra dos
   outros — o texto desce para baixo do título. */
@media(max-width:900px){
  .h2-home .ticket-head{grid-template-columns:1fr;gap:20px;align-items:start;margin-bottom:34px}
  .h2-home .ticket-head p{max-width:none}
}

/* Barra de ferramentas: filtros + faixa de pagamento. */
/* v0.31.0 — era grid `1fr auto`: o cartão de formas de pagamento reservava
   355px fixos e a barra de filtros ficava com as sobras. Com seis abas isso
   escondia opção de compra já em 1024px (medido), sem véu nem seta contando
   que havia mais. O cartão saiu; a linha inteira é dos filtros. */
.h2-home .ticket-tools{position:relative;z-index:3;margin:-8px 0 45px}
/* `wrap` e não rolagem: a barra cresce para baixo quando não couber, em vez
   de esconder aba atrás de uma rolagem sem barra de rolagem visível. Nenhuma
   largura testada (360 a 1440) esconde alguma coisa. */
.h2-home .ticket-filters{
  display:flex;flex-wrap:wrap;align-items:center;gap:5px;padding:6px;border-radius:12px;
  background:#090b09a6;border:1px solid #ffffff1d;backdrop-filter:blur(12px);box-shadow:inset 0 1px #ffffff0d;
}
.h2-home .ticket-filters button{
  flex:0 0 auto;min-height:46px;padding:0 18px;border:1px solid #0000;border-radius:8px;background:none;cursor:pointer;
  color:#ffffff82;font-family:var(--body);font-size:9px;font-weight:900;letter-spacing:.055em;text-transform:uppercase;
  transition:color .25s,background .25s,border-color .25s;
}
.h2-home .ticket-filters button:hover{color:#fff;background:#ffffff0b;transform:translateY(-1px)}
.h2-home .ticket-filters button.active{background:var(--lime);border-color:var(--lime);color:var(--ink);box-shadow:none}
.h2-home .ticket-filters button:focus-visible{outline:3px solid var(--lime);outline-offset:-3px}

/* v0.31.0 — as regras de `.payment-strip` saíram junto com o markup. Ficar
   com CSS de um bloco que não existe mais é o tipo de coisa que reaparece
   meses depois brigando com uma classe nova de nome parecido.
   A nota que fecha a seção herdou a promessa que aquele cartão carregava. */
/* Mesma cor do `.ticket-help` logo abaixo: são duas notas em sequência, e cor
   diferente entre elas leria como hierarquia que não existe. O literal (e não
   `--on-band-soft`) segue a convenção desta seção inteira, que já assume banda
   escura — em #ffffff6b a nota media 4,05:1, reprovada; aqui dá 6,2:1. */
.h2-home .ticket-nota{
  margin:22px 0 0;text-align:center;color:#ffffff8c;
  font-family:var(--body);font-size:11px;letter-spacing:.02em;
}

/* Grade e card. */
.h2-home .ticket-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;align-items:stretch}
.h2-home .ticket{
  position:relative;display:flex;flex-direction:column;min-height:590px;padding:37px 33px 30px;overflow:hidden;
  border-radius:19px;background:linear-gradient(145deg,#222522,#191b19);border:1px solid #ffffff26;
  color:#fff;box-shadow:0 25px 65px #0005;
  transition:transform .35s cubic-bezier(.22,1,.36,1),border-color .35s,box-shadow .35s;
}
/* BUG REAL corrigido (achado pelo user, 07/08/2026): `display:flex` numa
   classe SEMPRE vence o `display:none` que o navegador aplica por padrão a
   `[hidden]` — são especificidades diferentes (autor > user-agent), então o
   atributo `hidden` que o PHP grava nos ingressos fora da aba padrão nunca
   fazia efeito nenhum. Resultado: TODOS os ingressos apareciam em TODAS as
   abas, sempre — a curadoria "Mais populares" (passaporte meia/inteira,
   social, VIP, família) nunca existiu na tela, só no HTML. É regra básica de
   `[hidden]` + display custom: sempre precisa dessa exceção explícita. */
.h2-home .ticket[hidden]{display:none}
.h2-home .ticket::before{content:"";position:absolute;inset:0 0 auto;height:5px;background:linear-gradient(90deg,var(--lime),#e2ff82,var(--lime))}
.h2-home .ticket:hover{border-color:#a6df006b;transform:translateY(-9px);box-shadow:0 32px 80px #0008}
/* `.ticket-tag` agora é a CHAMADA, e vive dentro de `.ticket-eyebrow` (bloco
   da v0.25.0 mais abaixo). Estas propriedades continuam valendo — o bloco novo
   só acrescenta a cor por contexto de card. */
.h2-home .ticket-tag{color:var(--lime);font-size:9px;font-weight:900;letter-spacing:.12em;text-transform:uppercase}
/* Era 21px quando o `<small>` do lote era o primeiro filho; a linha de topo já
   traz respiro próprio, então o título encosta menos. */
.h2-home .ticket h3{margin:15px 0 12px;font-size:29px;letter-spacing:-.03em;text-transform:uppercase}
.h2-home .ticket > p{margin:0;min-height:55px;color:#ffffffa0;font-size:12px;line-height:1.6}
.h2-home .price{margin:31px 0;padding:25px 0;border-block:1px dashed #ffffff30}
.h2-home .price small{display:block;margin-bottom:6px;opacity:.55;font-size:8px;text-transform:uppercase;letter-spacing:.1em}
.h2-home .price b{font-family:var(--display);font-size:52px;line-height:1;letter-spacing:-.05em;font-variant-numeric:tabular-nums}
/* v0.25.1 — rótulo "Inclui" acima da lista de benefícios. Mesma receita do
   `.price small` logo acima (sem `color` próprio, só `opacity`): herda a cor
   de texto do card automaticamente — escura no `.featured`, lime-branca no
   escuro/vip — sem precisar de override por variante. */
.h2-home .ticket-includes{display:block;margin:0 0 10px;opacity:.55;font-size:8px;font-weight:900;text-transform:uppercase;letter-spacing:.1em}

/* v0.25.4 — parcelamento logo abaixo do valor. Mesma receita do rótulo do
   preço (`opacity` sobre a cor herdada), então funciona nos três fundos de
   card sem override por variante. */
.h2-home .price .ticket-inst{display:block;margin-top:9px;opacity:.62;font-size:11px;font-weight:600;letter-spacing:.01em}

/* v0.25.4 — aviso de documento. Âmbar em vez da cor do card: é uma condição
   de acesso, não decoração — precisa se destacar do resto do texto sem gritar
   como um erro. O `title` carrega a instrução completa (que o checkout e o
   e-ticket já exibem por extenso). */
/* O respiro de baixo é maior que o de cima de propósito: a tarja pertence ao
   bloco do PREÇO (é condição da compra), não à lista de benefícios que vem
   depois. Coladas, as duas liam como uma coisa só.

   O `>` no seletor não é enfeite: a tarja é um `<p>` filho direto do card, e
   `.h2-home .ticket > p` (a regra do parágrafo de descrição) tem
   especificidade 0,2,1 — vencia `.h2-home .ticket-doc` (0,2,0) e zerava a
   margem junto com o `min-height:55px`. Com `> .ticket-doc` sobe pra 0,3,0 e
   a tarja passa a controlar o próprio espaçamento. */
.h2-home .ticket > .ticket-doc{
  display:flex;align-items:flex-start;gap:7px;margin:2px 0 30px;min-height:0;
  padding:9px 11px;border-radius:8px;
  background:#ffca2814;border:1px solid #ffca2833;color:#ffd98a;
  font-size:10px;line-height:1.45;cursor:help;
}
.h2-home .ticket > .ticket-doc .ti{font-size:13px;line-height:1.15;flex:none}
/* No card branco o âmbar claro sumiria — escurece pra manter a leitura. */
.h2-home .ticket.featured > .ticket-doc{background:#ffca2820;border-color:#c8960033;color:#6b4e00}
/* O combo destaque+VIP tem fundo escuro: volta pro âmbar claro. */
.h2-home .ticket.featured.vip > .ticket-doc{background:#ffca2814;border-color:#ffca2833;color:#ffd98a}
.h2-home .ticket ul{display:flex;flex-direction:column;gap:14px;min-height:125px;margin:0 0 28px;padding:0;list-style:none}
.h2-home .ticket li{position:relative;padding-left:22px;color:#ffffffb3;font-size:11px;line-height:1.45}
.h2-home .ticket li::before{
  content:"\2713";position:absolute;left:0;top:0;display:grid;place-items:center;width:14px;height:14px;
  border-radius:50%;background:#a6df0019;color:var(--lime);font-size:9px;font-weight:900;
}
.h2-home .ticket > a{
  display:flex;justify-content:space-between;align-items:center;min-height:55px;margin-top:auto;padding:0 19px;
  border:1px solid #ffffff42;border-radius:8px;color:#fff;text-decoration:none;
  font-family:var(--body);font-size:9px;font-weight:900;letter-spacing:.06em;text-transform:uppercase;transition:all .25s;
}
.h2-home .ticket > a:hover{border-color:var(--lime);color:var(--lime);transform:translateY(-2px)}
.h2-home .ticket > a:focus-visible{outline:3px solid var(--lime);outline-offset:3px}
.h2-home .ticket > a.is-off{opacity:.45;cursor:not-allowed;pointer-events:none}

/* Numeral fantasma por POSIÇÃO VISUAL: como a grade reordena por aba, o
   numeral não pode ser nth-child fixo — o JS grava data-pos ao filtrar. */
.h2-home .ticket::after{
  content:attr(data-pos);position:absolute;top:24px;right:24px;
  font-family:var(--display);font-size:42px;font-weight:900;letter-spacing:-.07em;color:#ffffff16;
}

/* Destaque: card branco levantado, badge lime. */
.h2-home .ticket.featured{background:#fff;border-color:#fff;color:var(--ink);transform:translateY(-16px);box-shadow:0 34px 85px #0009}
.h2-home .ticket.featured:hover{transform:translateY(-24px)}
/* BUG REAL, medido ao vivo (08/08/2026): o lift de -16px foi desenhado pra UM
   card se destacar entre vizinhos na mesma linha. Quando VÁRIOS ingressos são
   destaque e caem juntos numa linha inteira (é o caso dos 3 VIPs na aba "Mais
   populares"), a linha toda sobe e o ritmo da grade quebra: medido 2px de
   respiro acima e 34px abaixo, no lugar dos 18px uniformes.
   `.ticket-grid:has(.featured ~ .featured)` = "existe mais de um destaque
   visível" → ninguém levanta, a grade volta a respirar igual. O hover continua
   respondendo (mais curto, sem competir com o lift que não existe mais).
   `:not([hidden])` porque as abas escondem card sem tirar do DOM: sem isso um
   destaque de OUTRA aba contaria como vizinho. */
.h2-home .ticket-grid:has(.ticket.featured:not([hidden]) ~ .ticket.featured:not([hidden])) .ticket.featured{transform:none}
.h2-home .ticket-grid:has(.ticket.featured:not([hidden]) ~ .ticket.featured:not([hidden])) .ticket.featured:hover{transform:translateY(-9px)}
.h2-home .ticket.featured::after{color:#0a0b0a12}
/* #718b0c media 3,89:1 sobre branco — reprovado pro texto pequeno (achado na
   auditoria de contraste, 07/08/2026). #667d0b chega a 4,66:1. */
.h2-home .ticket.featured .ticket-tag{color:#667d0b}
.h2-home .ticket.featured > p{color:#5f635b}
.h2-home .ticket.featured .price{border-color:#1113}
.h2-home .ticket.featured li{color:#50534e}
.h2-home .ticket.featured li::before{background:#a6df0030;color:#4d6b00}
.h2-home .ticket.featured > a{background:var(--ink);border-color:var(--ink);color:#fff}
.h2-home .ticket.featured > a:hover{color:var(--lime);background:#252825;transform:translateY(-2px)}
.h2-home .best{
  position:absolute;top:21px;right:20px;z-index:3;padding:8px 12px;border-radius:20px;
  background:var(--lime);color:var(--ink);font-size:7px;font-weight:900;letter-spacing:.1em;text-transform:uppercase;
}
/* Com selo, o numeral fantasma sai — os dois brigariam pelo mesmo canto.
   A 1ª regra existe desde quando SÓ o card destacado podia ter selo; a 2ª
   cobre o caso novo da v0.25.0, em que o selo é campo próprio e pode aparecer
   em card escuro também. As duas convivem de propósito: navegador sem `:has()`
   perde só o caso novo, e o comportamento antigo continua garantido. */
.h2-home .ticket.featured::after{content:none}
.h2-home .ticket:has(.best)::after{content:none}

/* VIP: verde profundo com moldura lime.

   BUG REAL corrigido (medido ao vivo, 07/08/2026): um ingresso pode ser
   `featured` E `vip` ao mesmo tempo (os 3 VIPs reais do site são — o admin
   marcou destaque neles). `featured` pinta o card BRANCO com texto quase-preto
   (`color:var(--ink)` + filhos em cinza-escuro); `.vip`, declarado DEPOIS,
   vencia só o `background` (vira escuro) e herdava todo o texto escuro do
   featured → título/preço a 1,10:1, bullets a 2,31:1, invisíveis. Era o
   defeito nº 2 (CRÍTICO, "impacto direto em receita") da auditoria externa:
   os 3 produtos mais caros do catálogo ilegíveis. Por isso o bloco abaixo
   re-declara TODAS as cores de filho que o featured escurece — `.vip` vem
   depois no arquivo, mesma especificidade, então vence o featured sempre. */
.h2-home .ticket.vip{background:linear-gradient(145deg,#20251a,#10120f);border-color:#a6df0078;color:#fff}
.h2-home .ticket.vip .ticket-tag{color:var(--lime)}
.h2-home .ticket.vip > p{color:#ffffffa0}
.h2-home .ticket.vip .price{border-color:#ffffff30}
.h2-home .ticket.vip li{color:#ffffffb3}
.h2-home .ticket.vip li::before{background:#a6df0019;color:var(--lime)}
.h2-home .ticket.vip > a{background:none;border-color:#ffffff42;color:#fff}
/* Botão VIP inverte pra preenchido no hover (fundo lime-bright, texto escuro)
   — na referência é o único botão de ingresso que faz isso; os outros ficam
   contorno. Estava usando o hover genérico (só contorno lime), sem o
   preenchimento que marca o tier premium. */
/* Sem halo lime (abolido em ago/2026): a inversão pra preenchido já marca
   sozinha que este é o único botão de ingresso que muda de peso no hover. */
.h2-home .ticket.vip > a:hover{background:var(--bright);border-color:var(--bright);color:var(--ink);transform:translateY(-2px)}


.h2-home .ticket-help{position:relative;z-index:2;margin:38px 0 0;text-align:center;color:#ffffff8c;font-size:10px}
.h2-home .ticket-help a{color:var(--lime)}

@media(max-width:980px){
  .h2-home .ticket-head::after{font-size:58px}
  .h2-home .ticket-tools{margin-bottom:30px}
  .h2-home .ticket-grid{grid-template-columns:1fr;max-width:650px;margin-inline:auto}
  .h2-home .ticket{min-height:auto}
  .h2-home .ticket.featured,.h2-home .ticket.featured:hover{transform:none}
  .h2-home .ticket > p,.h2-home .ticket ul{min-height:0}
}
@media(max-width:680px){
  .h2-home .ticket{padding:32px 25px 26px}
  .h2-home .ticket h3{font-size:26px}
  .h2-home .price b{font-size:46px}
  .h2-home .ticket-head::after{display:none}
  .h2-home .best{position:static;align-self:flex-start;margin:-12px 0 16px}
}

/* ══════════════════════════════════════════════════════════
   COMUNIDADE — copy + palco do perfil (seção #070807)
   ══════════════════════════════════════════════════════════
   Valores da referência. O fundo tem o brilho radial verde atrás do card e o
   "HERO" gigante de 300px como textura; o card do perfil inclina 1.5° e é
   orbitado por membros flutuantes. Este é um dos DOIS lugares onde o título
   usa a última linha em lime (`.community h2 em` na referência). */
.h2-home .h2-section--expo_hero{
  position:relative;overflow:hidden;color:#fff;
  background:radial-gradient(circle at 77% 52%,#16200c 0,#0000 28%),var(--ink-4);
}
/* v0.27.3 — ESPAÇAMENTO só quando o admin não escolheu.
   A referência usa 145px; o token `padrao` do tema dá 120px. Amarrar direto
   no seletor da seção mataria o controle de espaçamento do Editor Visual,
   então o ajuste vale apenas para `padrao` — quem escolher compacto ou amplo
   continua mandando. */
.h2-home .h2-section--expo_hero[data-space="padrao"]{--section-y:145px}

/* v0.27.3 — 390px e não os 300px da referência, e isso é proposital.
   No MESMO corpo de 300px a palavra saía 635×277 aqui contra 825×423 lá: a
   referência computa `Arial, Helvetica` (o fallback — a fonte que o protótipo
   pediu não carrega lá), e League Spartan é condensada, ocupando 23% menos
   largura no mesmo font-size.

   Copiar o valor numérico deixaria a marca-d'água visivelmente menor; copiar
   a Arial meteria uma fonte de fora no design system. 390px iguala a LARGURA
   ocupada (300 × 825/635) mantendo a tipografia do tema — decisão do dono da
   marca. */
.h2-home .h2-section--expo_hero::before{
  content:"HERO";position:absolute;top:-60px;right:-30px;pointer-events:none;
  font-family:var(--display);font-size:385px;font-weight:900;letter-spacing:-.1em;
  /* line-height EXPLICITO — a peca que faltava. A referencia declara
     `line-height:450px` (1.5 x 300). Sem ele o navegador usa `normal`
     (~1.15), a caixa de linha nasce mais curta e a MESMA regra de `top`
     joga a palavra pra cima: era por isso que ela colava no topo da
     secao. Com 1.5 o `top:-60px` da referencia volta a valer. */
  line-height:1.5;color:#ffffff08;
}
.h2-home .h2-section--expo_hero::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(#ffffff07 1px,#0000 1px),linear-gradient(90deg,#ffffff06 1px,#0000 1px);
  background-size:75px 75px;
  -webkit-mask-image:radial-gradient(circle at 75%,#000,#0000 55%);
          mask-image:radial-gradient(circle at 75%,#000,#0000 55%);
}
.h2-home .community-grid{position:relative;z-index:2;display:grid;grid-template-columns:1fr .85fr;align-items:center;gap:105px}
.h2-home .community-copy h2{
  margin:23px 0;font-size:clamp(53px,5.1vw,77px);line-height:.93;letter-spacing:-.06em;text-transform:uppercase;
}
.h2-home .community-copy > p{max-width:600px;color:#ffffff91;line-height:1.7}
.h2-home .benefits{display:flex;flex-wrap:wrap;gap:24px;margin:30px 0}
.h2-home .benefits span{color:#ffffffa8;font-size:10px}
.h2-home .benefits b{margin-right:5px;color:var(--lime)}

/* Palco: card central + satélites em absoluto. */
.h2-home .profile-stage{position:relative;isolation:isolate;display:grid;place-items:center;min-height:610px}
/* v0.27.4 — OS DOIS ANEIS da referencia, que faltavam aqui: um solido de
   590px e um tracejado de 455px, ambos em lime a ~16%, centrados no palco.
   Medidos no protótipo (`.profile-stage::before/::after`), nao estimados.

   `z-index:-1` porque pseudo-elemento de elemento posicionado pinta na ordem
   do DOM: sem isso o ::after (tracejado) sairia POR CIMA do card do perfil,
   cortando o avatar com uma linha. O `isolation:isolate` do palco garante que
   o -1 fique atras do card e nao vaze pra tras da secao. */
.h2-home .profile-stage::before,
.h2-home .profile-stage::after{
  content:"";position:absolute;top:50%;left:50%;translate:-50% -50%;z-index:-1;
  border-radius:50%;pointer-events:none;
}
.h2-home .profile-stage::before{width:590px;height:590px;border:1px solid rgba(166,223,0,.16)}
.h2-home .profile-stage::after{width:455px;height:455px;border:1px dashed rgba(166,223,0,.16)}
/* Em tela estreita os aneis passariam da largura do palco e virariam duas
   linhas retas cortando a coluna. Encolhem junto. */
@media(max-width:520px){
  .h2-home .profile-stage::before{width:340px;height:340px}
  .h2-home .profile-stage::after{width:262px;height:262px}
}
.h2-home .profile{
  position:relative;width:min(100%,455px);padding:26px 28px 27px;text-align:center;
  border-radius:23px;border:1px solid #ffffff24;
  background:linear-gradient(145deg,#1a1c1ae8,#0d0f0def);backdrop-filter:blur(18px);
  transform:rotate(1.5deg);box-shadow:0 36px 95px #000c;
}
.h2-home .profile-top{position:relative;display:flex;align-items:center;gap:8px;text-align:left;color:#ffffff80;font-size:10px}
.h2-home .profile-top i{width:7px;height:7px;border-radius:50%;background:var(--lime)}
.h2-home .profile-top b{margin-left:auto}
.h2-home .rank-row{
  position:relative;display:flex;justify-content:space-between;margin:20px -5px 0;padding:11px 12px;
  border-radius:9px;background:#ffffff08;border:1px solid #fff1;
  color:#ffffff6e;font-size:8px;letter-spacing:.08em;text-transform:uppercase;
}
.h2-home .rank-row b{color:var(--lime)}
.h2-home .avatar{
  position:relative;width:132px;height:132px;margin:24px auto 17px;padding:6px;
  border-radius:50%;border:2px solid var(--lime);background:#171b14;
}
.h2-home .avatar img{width:100%;height:100%;border-radius:50%;object-fit:cover}
.h2-home .level-badge{
  position:absolute;bottom:7px;right:-7px;z-index:2;display:grid;place-items:center;width:35px;height:35px;
  border-radius:50%;border:3px solid #111;background:var(--lime);color:#0b0c0a;font-size:10px;font-weight:900;
}
.h2-home .profile h3{position:relative;margin:0;font-size:22px;letter-spacing:-.03em;text-transform:uppercase}
.h2-home .profile > p{position:relative;color:#ffffff73;font-size:9px;letter-spacing:.09em;text-transform:uppercase}
.h2-home .xp-label{position:relative;display:flex;justify-content:space-between;margin:21px 0 8px;color:#ffffff69;font-size:8px;text-transform:uppercase}
.h2-home .xp{position:relative;height:6px;border-radius:8px;background:#ffffff18;overflow:hidden}
.h2-home .xp i{display:block;height:100%;background:linear-gradient(90deg,#80af00,var(--bright))}
.h2-home .mission{
  position:relative;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;
  margin-top:19px;padding:12px;text-align:left;border-radius:10px;
  background:#a6df0009;border:1px solid #a6df0028;
}
.h2-home .mission-icon{display:grid;place-items:center;width:29px;height:29px;border-radius:8px;background:#a6df001b;color:var(--lime);font-size:12px;font-weight:900}
.h2-home .mission small{color:#ffffff57;font-size:7px;text-transform:uppercase}
.h2-home .mission b{font-size:9px}
.h2-home .mission > span{color:var(--lime);font-size:9px;font-weight:900}
.h2-home .stats{position:relative;display:grid;grid-template-columns:repeat(3,1fr);margin-top:18px;padding-top:18px;border-top:1px solid #ffffff17}
.h2-home .stats div{display:flex;flex-direction:column;gap:4px}
.h2-home .stats b{font-size:16px;font-variant-numeric:tabular-nums}
.h2-home .stats span{color:#fff6;font-size:7px;text-transform:uppercase}

/* Satélites: orbs de membros + pílulas de recompensa, todos flutuando. */
.h2-home .network-orb{
  position:absolute;z-index:4;width:68px;height:68px;padding:4px;border-radius:50%;
  background:#111;border:1px solid #a6df0080;box-shadow:0 10px 30px #000b;
  animation:h2-orb-float 5s ease-in-out infinite;
}
.h2-home .network-orb img{width:100%;height:100%;border-radius:50%;object-fit:cover}
.h2-home .network-orb span{
  position:absolute;top:calc(100% + 7px);left:50%;transform:translateX(-50%);white-space:nowrap;
  padding:4px 7px;border-radius:10px;background:#0c0e0ce8;border:1px solid #ffffff17;
  color:#ffffff9c;font-size:7px;letter-spacing:.08em;text-transform:uppercase;
}
.h2-home .orb-one{top:40px;left:-3px}
.h2-home .orb-two{top:100px;right:-30px;animation-delay:-1.4s}
.h2-home .orb-three{bottom:80px;left:5px;animation-delay:-2.8s}
.h2-home .orb-four{bottom:75px;right:-18px;animation-delay:-4.1s}
@keyframes h2-orb-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-13px)}}

.h2-home .reward-float{
  position:absolute;z-index:5;display:flex;align-items:center;gap:9px;padding:9px 12px 9px 9px;
  border-radius:12px;background:#121512e8;border:1px solid #ffffff1c;backdrop-filter:blur(10px);
  box-shadow:0 14px 35px #0009;animation:h2-reward-pulse 4.5s ease-in-out infinite;
}
.h2-home .reward-float i{display:grid;place-items:center;width:31px;height:31px;border-radius:9px;background:var(--lime);color:#10110f;font-size:9px;font-style:normal;font-weight:900}
.h2-home .reward-float b{font-size:9px}
.h2-home .reward-float span{display:block;color:#ffffff69;font-size:7px;text-transform:uppercase}
.h2-home .reward-xp{top:185px;right:-2px}
.h2-home .reward-coin{bottom:155px;left:-2px;animation-delay:-2.2s}
@keyframes h2-reward-pulse{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-7px) scale(1.025)}}

@media(max-width:980px){
  .h2-home .community-grid{grid-template-columns:1fr;gap:48px}
  .h2-home .benefits{flex-direction:column}
  .h2-home .profile-stage{width:min(100%,620px);margin:auto;min-height:575px}
  .h2-home .orb-one{left:25px}
  .h2-home .orb-two{right:15px}
  .h2-home .orb-three{left:35px}
  .h2-home .orb-four{right:25px}
  .h2-home .reward-xp{right:-10px}
  .h2-home .reward-coin{left:-10px}
}
@media(max-width:680px){
  /* v0.27.3 — escala junto com os 390px do desktop (150 x 390/300).
     Deixar em 150 faria a marca-d'agua encolher desproporcionalmente
     no celular em relacao ao resto da secao. */
  /* v0.27.4 — escala o corpo E o topo na mesma razao do desktop. */
  .h2-home .h2-section--expo_hero::before{font-size:193px;top:-30px}
  .h2-home .profile{width:calc(100% - 28px);padding:22px 20px}
  .h2-home .avatar{width:118px;height:118px}
  .h2-home .network-orb{width:54px;height:54px}
  .h2-home .reward-float{transform:scale(.88)}
  .h2-home .orb-one{top:95px;left:-18px}
  .h2-home .orb-two{top:50px;right:-3px}
  .h2-home .orb-three{bottom:45px;left:2px}
  .h2-home .orb-four{bottom:45px;right:2px}
  .h2-home .reward-xp{top:260px}
  .h2-home .reward-coin{bottom:210px}
}
@media (prefers-reduced-motion: reduce){
  .h2-home .network-orb,.h2-home .reward-float{animation:none}
}

/* ══════════════════════════════════════════════════════════
   PARCEIROS — faixas de patrocínio (banda clara)
   ══════════════════════════════════════════════════════════
   A banda "claro" já pinta o fundo; aqui entra só o filete central que a
   referência desenha no corpo da seção e a tipografia das faixas. */
.h2-home .h2-section--patrocinadores{
  position:relative;overflow:hidden;
  background-image:linear-gradient(90deg,#0000 0 49.9%,#090a0906 50%,#0000 50.1%);
}

/* `.kicker.neon` precisa vencer `.kicker`: as duas classes têm a mesma força e
   `.neon` vem ANTES no arquivo, então sem isto o lime perdia pro verde-marca
   dentro do painel escuro do CTA. */
.h2-home .kicker.neon{color:var(--lime)}

.h2-home .partners-head{display:grid;grid-template-columns:1.25fr .75fr;align-items:end;gap:90px;margin-bottom:72px}
.h2-home .partners-head h2{margin:17px 0 0;font-size:clamp(48px,5.4vw,76px);line-height:.92;letter-spacing:-.06em;text-transform:uppercase}
.h2-home .partners-head p{margin:0;color:#5f635b;font-size:14px;line-height:1.7}

/* Faixa: rótulo fixo à esquerda, grade elástica à direita. */
.h2-home .sponsor-tier{display:grid;grid-template-columns:180px 1fr;gap:35px;padding:30px 0;border-top:1px solid var(--line)}
.h2-home .tier-label{display:flex;align-items:flex-start;gap:16px;padding-top:8px}
/* #777b73 media 4,32:1 sobre branco — reprovado por pouco pro texto pequeno
   (achado na auditoria de contraste, 07/08/2026). #72766e chega a 4,63:1,
   mesma matiz. */
.h2-home .tier-label > span{
  display:grid;place-items:center;width:31px;height:31px;flex:none;
  border-radius:50%;border:1px solid var(--line);color:#72766e;font-size:8px;font-weight:900;
}
.h2-home .tier-label small{display:block;color:#72766e;font-size:7px;font-weight:900;letter-spacing:.12em;text-transform:uppercase}
.h2-home .tier-label strong{font-size:13px;text-transform:uppercase}

.h2-home .logo-grid{display:grid;gap:12px}
.h2-home .master-grid{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.h2-home .gold-grid{grid-template-columns:repeat(3,1fr)}
.h2-home .support-grid{grid-template-columns:repeat(6,1fr)}

.h2-home .logo-slot{
  display:flex;flex-direction:column;justify-content:center;align-items:center;gap:8px;
  min-height:135px;padding:18px;min-width:0;
  border-radius:12px;border:1px solid #d8dbd2;background:#fff;text-decoration:none;
  transition:border-color .25s,transform .25s,box-shadow .25s;
}
.h2-home a.logo-slot:hover{border-color:var(--lime);transform:translateY(-3px);box-shadow:0 13px 35px #3340000d}
.h2-home a.logo-slot:focus-visible{outline:3px solid var(--lime);outline-offset:3px}
/* Regra que a referência não tem — lá todo slot é vaga vazia. O logo real
   precisa caber sem esticar: teto de altura e proporção preservada. */
.h2-home .logo-slot img{max-width:100%;max-height:62px;width:auto;height:auto;object-fit:contain}
.h2-home .logo-master img{max-height:104px}
/* Vaga PLACEHOLDER (some quando o logo real entra — é temporário por
   natureza, ver logo-slot.is-vaga), mas ainda assim precisa dar o mínimo pra
   texto grande (3:1); #c4c8be media 1,70:1. #8d9089 chega a 3,24:1. E o
   rótulo "Sua marca aqui"/"Apoiador" (#8c9088, 3,25:1) reprovava o mínimo de
   texto pequeno — achados na auditoria de contraste, 07/08/2026. */
.h2-home .logo-slot i{color:#8d9089;font-size:21px;font-style:normal;font-weight:900;letter-spacing:-.05em;text-transform:uppercase;text-align:center;line-height:1.1}
.h2-home .logo-slot span{color:#737670;font-size:7px;font-weight:900;letter-spacing:.12em;text-transform:uppercase;text-align:center}
.h2-home .logo-master{min-height:190px;background:linear-gradient(135deg,#fff 0%,#f9fbf4 65%,#eff6d9 100%)}
/* Vaga aberta: fica evidente que é convite, não patrocinador apagado. */
.h2-home .logo-slot.is-vaga{border-style:dashed}

/* Painel escuro de fechamento. */
.h2-home .partner-cta{
  position:relative;overflow:hidden;display:grid;grid-template-columns:1fr 1fr auto;align-items:center;
  gap:46px;margin-top:62px;padding:48px 52px;border-radius:18px;background:#171917;color:#fff;
}
.h2-home .partner-cta::after{
  content:"";position:absolute;bottom:-180px;right:-100px;width:260px;height:260px;
  border:56px solid #a6df0020;border-radius:50%;pointer-events:none;
}
.h2-home .partner-cta > *{position:relative;z-index:2}
.h2-home .partner-cta h3{margin:12px 0 0;font-size:39px;line-height:.94;letter-spacing:-.045em;text-transform:uppercase}
.h2-home .partner-cta > p{margin:0;color:#ffffff8f;font-size:11px;line-height:1.65}
.h2-home .partner-cta .btn{width:max-content;white-space:nowrap}

@media(max-width:980px){
  .h2-home .h2-section--patrocinadores{background-image:none}
  .h2-home .partners-head{grid-template-columns:1fr;gap:48px}
  .h2-home .sponsor-tier{grid-template-columns:1fr;gap:18px}
  .h2-home .support-grid{grid-template-columns:repeat(3,1fr)}
  .h2-home .logo-slot{min-height:110px}
  .h2-home .logo-master{min-height:155px}
  .h2-home .partner-cta{grid-template-columns:1fr 1fr}
  .h2-home .partner-cta .btn{grid-column:1/3}
}
@media(max-width:680px){
  .h2-home .partners-head{gap:25px;margin-bottom:48px}
  .h2-home .partners-head h2{font-size:44px}
  .h2-home .gold-grid,.h2-home .master-grid{grid-template-columns:1fr}
  .h2-home .support-grid{grid-template-columns:repeat(2,1fr)}
  .h2-home .logo-slot{min-height:100px}
  .h2-home .partner-cta{grid-template-columns:1fr;gap:24px;margin-top:42px;padding:34px 26px}
  .h2-home .partner-cta h3{font-size:34px}
  .h2-home .partner-cta .btn{grid-column:1;width:100%}
}

/* ══════════════════════════════════════════════════════════
   EXPOSITORES — vitrine de marcas (seção #0d0f0d)
   ══════════════════════════════════════════════════════════
   Cada card carrega `--exhibitor-accent` inline (mapa de categoria do Design
   System). O acento pinta APENAS fio, monograma, halo, categoria e seta —
   nunca texto corrido nem fundo, que é a regra do pacote de cor. */
.h2-home .h2-section--expositores{position:relative;overflow:hidden;background:var(--ink-3);color:#fff}

.h2-home .exhibitors-head{display:grid;grid-template-columns:1.15fr .85fr;align-items:end;gap:90px;margin-bottom:43px}
.h2-home .exhibitors-head h2{margin:0;font-size:clamp(49px,5.4vw,77px);line-height:.89;text-transform:uppercase}
.h2-home .exhibitors-head p{max-width:430px;margin:0 0 22px;color:#ffffff82;font-size:14px;line-height:1.7}
.h2-home .exhibitor-count{display:flex;align-items:baseline;gap:10px;color:#ffffff64;font-size:8px;font-weight:900;letter-spacing:.1em;text-transform:uppercase}
.h2-home .exhibitor-count b{font-family:var(--display);font-size:27px;letter-spacing:-.04em;color:var(--lime)}

.h2-home .exhibitor-filters{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:25px}
.h2-home .exhibitor-filters button{
  min-height:43px;padding:0 18px;border-radius:30px;border:1px solid #ffffff25;background:#ffffff07;cursor:pointer;
  color:#ffffff80;font-family:var(--body);font-size:8px;font-weight:900;letter-spacing:.07em;text-transform:uppercase;
  transition:color .25s,background .25s,border-color .25s;
}
.h2-home .exhibitor-filters button:hover{color:#fff;border-color:#ffffff65;transform:translateY(-1px)}
.h2-home .exhibitor-filters button.active{background:var(--lime);border-color:var(--lime);color:var(--ink)}
.h2-home .exhibitor-filters button:focus-visible{outline:3px solid var(--lime);outline-offset:2px}

/* BUG REAL corrigido (achado pelo user comparando com a referência ao vivo,
   07/08/2026): o halo radial (`::before`) NÃO EXISTE na referência — lá o
   `::before` computa `background-image:none` (card LISO, fundo sólido
   `rgb(23,25,23)` / #171917). Removido.
   CORREÇÃO 08/08/2026: no mesmo lote removi por engano o `::after` junto —
   mas o `::after` é REAL: uma barrinha de 4px no topo, na cor do acento, que
   fica em 23% da largura em repouso e abre pra 100% no hover
   (`transform:scaleX(.23)` → `scaleX(1)`, conferido no CSSOM ao vivo). Sem
   ela o hover do card ficava sem esse "abrir" no topo que a referência tem. */
.h2-home .exhibitor-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.h2-home .exhibitor-card{
  --exhibitor-accent:var(--lime);
  position:relative;overflow:hidden;
  display:grid;grid-template-columns:78px 1fr auto;align-items:center;gap:20px;
  min-height:255px;padding:26px;min-width:0;
  border-radius:16px;border:1px solid #ffffff1d;background:#171917;
  transition:transform .35s cubic-bezier(.22,1,.36,1),border-color .35s,box-shadow .35s;
}
.h2-home .exhibitor-card::after{
  content:"";position:absolute;top:0;left:0;right:0;height:4px;z-index:-1;
  background:var(--exhibitor-accent);transform-origin:0 center;transform:scaleX(.23);
  transition:transform .4s cubic-bezier(.22,1,.36,1);
}
.h2-home .exhibitor-card:hover{border-color:color-mix(in srgb,var(--exhibitor-accent) 60%,#fff0);transform:translateY(-6px);box-shadow:0 25px 65px #0007}
.h2-home .exhibitor-card:hover::after{transform:scaleX(1)}

.h2-home .exhibitor-number{position:absolute;top:17px;right:20px;font-family:var(--display);font-size:36px;font-weight:900;letter-spacing:-.05em;color:#ffffff14}
.h2-home .exhibitor-logo{
  display:grid;place-items:center;width:78px;height:78px;border-radius:20px;
  background:#090b09;border:1px solid color-mix(in srgb,var(--exhibitor-accent) 55%,#fff0);box-shadow:0 14px 34px #0006;
}
.h2-home .exhibitor-logo span{font-family:var(--display);font-size:22px;font-weight:900;letter-spacing:-.06em;color:var(--exhibitor-accent)}
/* ── v0.31.0 — LOGO DA LOJA ──
   Limite em PIXEL, não em porcentagem: dentro de um grid com
   `place-items:center` o item não estica, a porcentagem fica indefinida e a
   proporção da imagem manda. Uma logo 120×320 virava 76×163 e vazava 85px
   para fora do quadro de 78px — medido. `contain` porque cortar a marca de
   um terceiro não é opção. */
.h2-home .exhibitor-logo img{
  display:block;max-width:54px;max-height:54px;width:auto;height:auto;object-fit:contain;
}
/* O fundo é escolha do admin, por expositor, e não estética: com quadro
   escuro fixo uma logo preta mede 1,11:1; com placa clara fixa uma logo
   branca mede 1,10:1. Em ambos a marca some. Padrão claro (a maioria das
   marcas entrega versão escura/colorida); `escuro` é o escape. */
.h2-home .exhibitor-logo[data-fundo="claro"]{background:#f4f4f1;border-color:#ffffff2e}
.h2-home .exhibitor-copy{min-width:0}
/* Acento como TEXTO pequeno sobre o card escuro: o roxo da paleta (#7B61FF)
   media 4,21:1 — reprovado por pouco (mín. 4,5:1; achado na auditoria de
   contraste, 07/08/2026). Clarear 20% com branco via color-mix cobre a cor
   mais escura da paleta sem tratar cor a cor; as demais só ganham folga. Vale
   pro rótulo de categoria e pra seta (12px). O monograma (22px bold, mín. 3:1)
   e usos de acento como FUNDO/borda ficam com a cor crua. */
.h2-home .exhibitor-copy small{display:block;color:color-mix(in srgb,var(--exhibitor-accent) 80%,#fff);font-size:7px;font-weight:900;letter-spacing:.12em;text-transform:uppercase}
.h2-home .exhibitor-copy h3{margin:9px 0 15px;font-size:26px;line-height:.92;text-transform:uppercase;overflow-wrap:anywhere}
.h2-home .exhibitor-copy > span{display:flex;align-items:center;gap:8px;color:#fff6;font-size:8px;letter-spacing:.07em;text-transform:uppercase}
.h2-home .exhibitor-copy > span i{width:5px;height:5px;border-radius:50%;background:var(--exhibitor-accent);flex:none}
.h2-home .exhibitor-arrow{
  display:grid;place-items:center;align-self:end;width:34px;height:34px;flex:none;
  border-radius:50%;border:1px solid #ffffff28;color:color-mix(in srgb,var(--exhibitor-accent) 80%,#fff);font-size:12px;transition:all .3s;
}
.h2-home .exhibitor-card:hover .exhibitor-arrow{background:var(--exhibitor-accent);border-color:var(--exhibitor-accent);color:#080a08;transform:rotate(8deg)}

/* Painel B2B de fechamento. */
.h2-home .exhibitor-cta{
  display:grid;grid-template-columns:1.1fr .9fr auto;align-items:center;gap:38px;margin-top:16px;padding:30px 32px;
  border-radius:15px;border:1px solid #a6df003e;background:linear-gradient(110deg,#171c14,#222b18);
}
.h2-home .exhibitor-cta small{display:block;color:var(--lime);font-size:7px;font-weight:900;letter-spacing:.1em;text-transform:uppercase}
.h2-home .exhibitor-cta strong{display:block;margin-top:8px;font-family:var(--display);font-size:19px;text-transform:uppercase;line-height:1.05}
.h2-home .exhibitor-cta p{margin:0;color:#ffffff7a;font-size:10px;line-height:1.55}
.h2-home .exhibitor-cta .btn{width:max-content;white-space:nowrap}

@media(max-width:980px){
  .h2-home .exhibitors-head{grid-template-columns:1fr;gap:25px}
  .h2-home .exhibitor-grid{grid-template-columns:repeat(2,1fr)}
  .h2-home .exhibitor-cta{grid-template-columns:1fr 1fr}
  .h2-home .exhibitor-cta .btn{grid-column:1/3}
}
@media(max-width:680px){
  .h2-home .exhibitors-head h2{font-size:45px}
  .h2-home .exhibitor-filters{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
  .h2-home .exhibitor-filters button{flex:none}
  .h2-home .exhibitor-grid{grid-template-columns:1fr}
  .h2-home .exhibitor-card{grid-template-columns:62px 1fr auto;gap:14px;min-height:195px;padding:22px}
  .h2-home .exhibitor-card::before{background:none}
  .h2-home .exhibitor-logo{width:62px;height:62px;border-radius:16px}
  /* Acompanha o quadro menor — o limite é pixel, então não encolhe sozinho. */
  .h2-home .exhibitor-logo img{max-width:42px;max-height:42px}
  .h2-home .exhibitor-copy h3{font-size:23px}
  .h2-home .exhibitor-cta{grid-template-columns:1fr;gap:20px;padding:27px 24px}
  .h2-home .exhibitor-cta .btn{grid-column:1;width:100%}
}

/* ══════════════════════════════════════════════════════════
   CONCURSOS — painel de inscrições ("Entre no jogo.")
   ══════════════════════════════════════════════════════════
   Painel CLARO sobre banda escura: a sombra funda é o que o faz flutuar.
   A intro gruda (sticky) enquanto a lista rola, como na referência. */
.h2-home .h2-section--concursos{position:relative;background:var(--ink-3);color:#fff}

/* v0.25.6 — O painel virou subseção DENTRO de Experiências, então precisa do
   próprio respiro em relação aos cards acima. Antes era uma seção separada e
   o padding de banda dava esse espaço de graça.
   Os dois seletores cobrem as duas saídas possíveis do template: com e sem a
   fileira de mini-experiências (o repeater pode ter menos de 5 itens). */
.h2-home .more-attractions + .registration-panel,
.h2-home .experience-grid + .registration-panel{margin-top:70px}
@media(max-width:680px){
  .h2-home .more-attractions + .registration-panel,
  .h2-home .experience-grid + .registration-panel{margin-top:44px}
}

.h2-home .registration-panel{
  display:grid;grid-template-columns:.68fr 1.32fr;align-items:start;gap:70px;padding:55px;
  border-radius:20px;border:1px solid #fff5;background:var(--paper);color:var(--ink);
  box-shadow:0 28px 75px #0008;
}
.h2-home .registration-intro{position:sticky;top:40px}
/* BUG REAL corrigido (achado na auditoria de contraste, 07/08/2026): o painel
   de inscrições é um CARTÃO CLARO dentro de uma seção de banda ESCURA — o
   kicker herdava a cor de lime que a banda escura dá pra todo `.kicker`
   (`[data-band="escuro"] .kicker{color:var(--lime)}`), mas o fundo real ali é
   branco (o do cartão), não o preto da seção. Lime a 1,59:1 sobre branco.
   Especificidade extra (+1 seletor) pra vencer a regra de banda garantido,
   não por ordem de declaração no arquivo. */
.h2-home [data-band="escuro"] .registration-panel .kicker{color:var(--brand-green)}
.h2-home .registration-intro h3{margin:0 0 18px;font-size:52px;line-height:.95;letter-spacing:-.055em;text-transform:uppercase}
.h2-home .registration-intro p{margin:0;color:#5f635b;font-size:13px;line-height:1.7}
.h2-home .registration-note{display:flex;align-items:center;gap:8px;margin-top:28px;color:#737373;font-size:8px;letter-spacing:.08em;text-transform:uppercase}
.h2-home .registration-note i{width:7px;height:7px;flex:none;border-radius:50%;background:var(--lime)}

.h2-home .tournament-list{border-top:1px solid var(--line)}
.h2-home .tournament-row{
  display:grid;grid-template-columns:68px 1fr auto;align-items:center;gap:17px;
  min-height:135px;padding:22px 0;border-bottom:1px solid var(--line);
}
.h2-home .tournament-thumb{
  display:block;width:68px;height:68px;border-radius:12px;object-fit:cover;
  border:1px solid #1112;box-shadow:0 8px 22px #1112;
}
/* Concurso sem imagem destacada cai no ícone colorido — mesmo quadro, mesmo
   peso visual, pra linha não desalinhar. */
.h2-home .tournament-thumb--icon{display:grid;place-items:center;font-size:26px;border-color:#0000}
.h2-home .tournament-body{min-width:0}
.h2-home .tournament-body small{display:block;color:var(--brand-green);font-size:7px;font-weight:900;letter-spacing:.12em;text-transform:uppercase}
.h2-home .tournament-body h4{margin:7px 0 6px;font-size:18px;letter-spacing:-.025em;text-transform:uppercase;overflow-wrap:anywhere}
.h2-home .tournament-body p{margin:0;color:#737373;font-size:9px}
.h2-home .tournament-body p.is-low{color:#8a6d00}
.h2-home .tournament-body p.is-out{color:#8a2f2f}

/* Barra de ocupação: dado real que a referência não tem, em 4px pra informar
   sem competir com o título. */
.h2-home .tournament-gauge{position:relative;height:4px;margin-top:9px;max-width:210px;border-radius:4px;background:#0000000f;overflow:hidden}
.h2-home .tournament-gauge span{display:block;height:100%;background:var(--brand-green);border-radius:inherit}
.h2-home .tournament-gauge.is-low span{background:#e0a800}
.h2-home .tournament-gauge.is-out span{background:#b34747}

.h2-home .tournament-countdown{display:flex;align-items:baseline;gap:9px;margin-top:10px}
.h2-home .tournament-countdown small{color:#737373;font-size:7px;letter-spacing:.08em;text-transform:uppercase}
.h2-home .tournament-countdown .cc-num{font-family:var(--display);font-size:13px;font-weight:900;font-variant-numeric:tabular-nums}
.h2-home .tournament-countdown .cc-lbl{margin-right:6px;color:#737373;font-size:7px;text-transform:uppercase}

.h2-home .tournament-cta{display:flex;flex-direction:column;align-items:stretch;gap:7px}
.h2-home .tournament-cta button,
.h2-home .tournament-cta > a{
  display:flex;justify-content:space-between;align-items:center;gap:23px;min-height:42px;padding:0 14px;
  border-radius:7px;border:1px solid var(--ink);background:none;color:var(--ink);cursor:pointer;
  font-family:var(--body);font-size:8px;font-weight:900;letter-spacing:.06em;text-transform:uppercase;
  text-decoration:none;transition:background .2s,color .2s,border-color .2s;
}
.h2-home .tournament-cta button:hover:not(.is-off){background:var(--ink);color:#fff}
.h2-home .tournament-cta button:focus-visible{outline:3px solid var(--lime);outline-offset:2px}
.h2-home .tournament-cta button.is-off{opacity:.4;cursor:not-allowed;border-style:dashed}

/* "Detalhes" — abre a ficha do concurso (popup), não mais um <details> inline.
   Continua com cara de LINK miúdo (como era o <summary> antigo), nunca de
   botão: o seletor precisa de `button.js-open-details` porque a regra genérica
   `.h2-home .tournament-cta button` acima (0,2,1) vence uma classe só (0,2,0)
   e devolveria a borda/caixa do CTA. */
.h2-home .tournament-cta button.js-open-details{
  display:block;width:100%;min-height:0;gap:0;padding:4px 0;text-align:center;
  background:none;border:0;border-radius:0;cursor:pointer;
  color:#737373;font-family:var(--body);font-size:7px;font-weight:900;letter-spacing:.1em;text-transform:uppercase;
}
.h2-home .tournament-cta button.js-open-details:hover{background:none;color:var(--ink)}

/* Imagem e título do card também abrem a ficha (afordância redundante — o
   botão "Detalhes" continua sendo o controle acessível por teclado). */
.h2-home .tournament-row .js-open-details-proxy{cursor:pointer}
.h2-home .tournament-row h4.js-open-details-proxy:hover{color:var(--brand-green)}
.h2-home .tournament-pills{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:8px}
/* `--pill` vem da paleta de categoria do plugin (hero_term_color()) — a cor
   CRUA como texto sobre a própria pílula quase-branca reprovava contraste
   pequeno pra várias delas (achado na auditoria de contraste, 07/08/2026;
   ex.: ciano a 1,77:1, laranja a 2,31:1). 50% de mistura com preto cobre toda
   a paleta atual com folga (pior caso calculado 5,17:1), sem precisar tratar
   cor a cor — o mix é dinâmico sobre `var(--pill)`, não um valor fixo. */
.h2-home .tournament-pills span{
  padding:4px 8px;border-radius:20px;font-size:7px;font-weight:900;letter-spacing:.06em;text-transform:uppercase;
  color:color-mix(in srgb,var(--pill,#a6df00) 50%,black);
  background:color-mix(in srgb,var(--pill,#a6df00) 14%,transparent);
}
.h2-home .tournament-rules{
  display:inline-block;padding:0;border:0;background:none;cursor:pointer;
  color:var(--brand-green);font-family:var(--body);font-size:8px;font-weight:900;letter-spacing:.06em;
  text-transform:uppercase;text-decoration:underline;text-underline-offset:3px;
}

@media(max-width:980px){
  .h2-home .registration-panel{grid-template-columns:1fr;gap:38px;padding:42px}
  .h2-home .registration-intro{position:static}
  .h2-home .tournament-row{grid-template-columns:58px 1fr}
  .h2-home .tournament-thumb{width:58px;height:58px;border-radius:10px}
  .h2-home .tournament-cta{grid-column:2;width:100%}
}
@media(max-width:680px){
  .h2-home .registration-panel{padding:28px 20px}
  .h2-home .registration-intro h3{font-size:44px}
  .h2-home .tournament-row{grid-template-columns:42px 1fr;padding:19px 0;min-height:0}
  .h2-home .tournament-thumb{width:42px;height:42px;border-radius:8px}
  .h2-home .tournament-thumb--icon{font-size:18px}
}

/* ══════════════════════════════════════════════════════════
   IMPRENSA — credenciamento e o crachá (banda clara)
   ══════════════════════════════════════════════════════════
   A malha some pra direita, deixando o crachá escuro respirar. O crachá
   flutua devagar e fica inclinado 2.5°, como se estivesse pendurado. */
.h2-home .h2-section--imprensa{position:relative;overflow:hidden;background:#fff;color:var(--ink)}
.h2-home .press-grid-lines{
  position:absolute;inset:0;opacity:.5;pointer-events:none;
  background-image:linear-gradient(#1012100a 1px,#0000 1px),linear-gradient(90deg,#1012100a 1px,#0000 1px);
  background-size:78px 78px;
  -webkit-mask-image:linear-gradient(90deg,#000,#0000 72%);
          mask-image:linear-gradient(90deg,#000,#0000 72%);
}
.h2-home .press-layout{position:relative;z-index:2;display:grid;grid-template-columns:1.05fr .95fr;align-items:center;gap:110px}
.h2-home .press-copy h2{margin:0;font-size:clamp(48px,5.1vw,75px);line-height:.9;text-transform:uppercase}
/* v0.27.9 — cor ciente da banda. Era `--muted` fixo, afinado pra banda
   clara da Imprensa: reaproveitada na banda escura media 3,56:1. Em banda
   clara `--on-band-soft` resolve pro proprio `--muted`, entao Imprensa nao
   muda de aparencia. */
.h2-home .press-copy > p{max-width:590px;margin:27px 0 30px;color:var(--on-band-soft,var(--muted));font-size:14px;line-height:1.7}

.h2-home .press-benefits{border-top:1px solid #dfe3db;margin-bottom:34px}
.h2-home .press-benefits > span{
  display:grid;grid-template-columns:35px 1fr;grid-template-rows:auto auto;align-items:center;column-gap:14px;
  min-height:72px;padding:13px 0;border-bottom:1px solid #dfe3db;
}
.h2-home .press-benefits i{
  grid-row:1/3;display:grid;place-items:center;width:31px;height:31px;
  border-radius:50%;border:1px solid var(--lime);color:var(--ink);font-size:7px;font-style:normal;font-weight:900;
}
.h2-home .press-benefits b{align-self:end;font-size:12px;text-transform:uppercase}
/* #858585 media 3,69:1 sobre branco — reprovado pro texto pequeno (achado na
   auditoria de contraste, 07/08/2026). #757575 chega a 4,61:1. */
.h2-home .press-benefits small{align-self:start;margin-top:4px;color:var(--on-band-soft,#757575);font-size:9px}
/* A referência põe um glow verde neste botão; aqui não — glow de botão foi
   abolido no Design System. */
.h2-home .press-button{width:100%}
.h2-home .press-button.is-off{opacity:.45;cursor:not-allowed;pointer-events:none}
/* #898989 media 3,50:1 sobre branco — reprovado pro texto pequeno (achado na
   auditoria de contraste, 07/08/2026). #757575 chega a 4,61:1 (mesmo tom
   usado em .press-benefits small, acima). */
.h2-home .press-deadline{display:block;margin-top:14px;color:#757575;font-size:7px;letter-spacing:.05em;text-transform:uppercase}

/* ── A credencial ── */
.h2-home .press-pass{
  position:relative;width:min(100%,430px);min-height:550px;margin:35px auto 0;padding:45px 37px 37px;
  border-radius:20px;border:1px solid #ffffff25;color:#fff;
  background:radial-gradient(circle at 80% 15%,#2c371f,#151815 42%),#151815;
  transform:rotate(2.5deg);transform-origin:50% 8%;will-change:transform;
  box-shadow:0 38px 90px #10141048;animation:h2-pass-float 6.5s ease-in-out infinite;
}
@keyframes h2-pass-float{0%,100%{transform:translateY(0) rotate(2.5deg)}50%{transform:translateY(-12px) rotate(1.7deg)}}
.h2-home .pass-clip{
  position:absolute;top:-1px;left:50%;transform:translateX(-50%);z-index:4;width:94px;height:25px;
  border-radius:0 0 12px 12px;border:1px solid #ffffff70;border-top:0;
  background:linear-gradient(#f7f8f5,#cdd2ca);box-shadow:0 7px 18px #0008;
}
.h2-home .pass-clip i{
  position:absolute;top:8px;left:50%;transform:translateX(-50%);width:38px;height:5px;
  border-radius:5px;background:#71766f;box-shadow:inset 0 1px 2px #0007;
}
.h2-home .pass-top{position:relative;display:flex;justify-content:space-between;align-items:center;gap:24px;padding-bottom:24px;border-bottom:1px solid #ffffff1d}
.h2-home .pass-logo{width:178px;height:72px;object-fit:contain;object-position:left center}
/* Sem logo cadastrada, o nome do site ocupa o mesmo espaço — o topo do crachá
   não pode desabar por falta de imagem. */
.h2-home .pass-logo--text{display:flex;align-items:center;width:178px;height:72px;font-family:var(--display);font-size:26px;line-height:.95;letter-spacing:-.04em;text-transform:uppercase}
.h2-home .pass-top > span{font-family:var(--display);font-size:20px;letter-spacing:-.04em;color:#ffffff8c}
.h2-home .pass-signal{position:relative;display:flex;align-items:center;gap:8px;margin-top:24px;color:var(--lime);font-size:7px;font-weight:900;letter-spacing:.1em;text-transform:uppercase}
.h2-home .pass-signal i{width:7px;height:7px;flex:none;border-radius:50%;background:var(--lime)}
.h2-home .pass-signal.is-off{color:#ffffff6b}
.h2-home .pass-signal.is-off i{background:#ffffff5c}
.h2-home .pass-title{position:relative;margin:55px 0 50px}
.h2-home .pass-title small{display:block;color:#ffffff62;font-size:8px;font-weight:900;letter-spacing:.12em;text-transform:uppercase}
.h2-home .pass-title strong{display:block;margin-top:10px;font-family:var(--display);font-size:58px;line-height:.86;letter-spacing:-.055em;color:#fff}
.h2-home .pass-data{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:14px;padding:19px 0;border-block:1px solid #ffffff1d}
.h2-home .pass-data span{display:flex;flex-direction:column;gap:7px}
.h2-home .pass-data small{color:var(--lime);font-size:7px;text-transform:uppercase}
.h2-home .pass-data b{font-size:10px}
.h2-home .pass-code{position:relative;display:flex;align-items:end;gap:4px;height:40px;margin-top:25px}
.h2-home .pass-code i{width:5px;background:#fff}
.h2-home .press-pass > p{margin:14px 0 0;color:#ffffff5c;font-size:7px;letter-spacing:.14em;text-transform:uppercase}

@media(max-width:980px){
  .h2-home .press-layout{grid-template-columns:1fr;gap:70px}
  .h2-home .press-pass{margin-top:30px}
}
@media(max-width:680px){
  .h2-home .press-copy h2{font-size:45px}
  .h2-home .press-pass{min-height:500px;padding:27px;animation-duration:7.5s}
  .h2-home .pass-title{margin:48px 0 42px}
  .h2-home .pass-title strong{font-size:48px}
  .h2-home .pass-logo,.h2-home .pass-logo--text{width:140px;height:58px}
}
@media (prefers-reduced-motion: reduce){
  .h2-home .press-pass{animation:none}
}

/* ══════════════════════════════════════════════════════════
   EDIÇÕES — retrospectiva em cartões-pôster (banda #090a09)
   ══════════════════════════════════════════════════════════
   A foto ocupa o cartão inteiro; o sombreado (z-index -2) garante que o texto
   embaixo seja legível sobre QUALQUER foto — inclusive uma clara. */
.h2-home .h2-section--edicoes{overflow:hidden;background:var(--ink);color:#fff}
.h2-home .editions-head{display:grid;grid-template-columns:1.2fr .8fr;align-items:end;gap:90px;margin-bottom:55px}
.h2-home .editions-head h2{margin:0;font-size:clamp(49px,5.4vw,76px);line-height:.92;letter-spacing:-.055em;text-transform:uppercase}
.h2-home .editions-head p{margin:0 0 20px;color:#ffffff8c;font-size:14px;line-height:1.7}
.h2-home .edition-count{display:flex;align-items:center;gap:13px;color:#ffffff69;font-size:8px;font-weight:900;letter-spacing:.1em;text-transform:uppercase}
.h2-home .edition-count b{font-family:var(--display);font-size:26px;letter-spacing:-.05em;color:var(--lime)}

.h2-home .editions-grid{display:grid;grid-template-columns:1.2fr .9fr .9fr;gap:14px}
.h2-home .edition-card{
  position:relative;isolation:isolate;overflow:hidden;display:block;height:510px;
  border-radius:15px;border:1px solid #ffffff28;background:#181a18;color:inherit;text-decoration:none;
  transition:transform .4s cubic-bezier(.22,1,.36,1);
}
/* Foto levemente dessaturada em repouso e volta ao normal + zoom no hover
   (`filter`/`transform` na referência) — faltava aqui, o card só levantava. */
.h2-home .edition-card img{
  position:absolute;inset:0;z-index:-3;width:100%;height:100%;object-fit:cover;
  filter:saturate(.82) contrast(1.02);transition:transform .55s,filter .55s;
}
.h2-home .edition-shade{position:absolute;inset:0;z-index:-2;background:linear-gradient(#08090814 0%,#08090847 38%,#080908f5 100%)}
.h2-home a.edition-card:hover{transform:translateY(-7px)}
.h2-home a.edition-card:hover img{filter:saturate(1) contrast(1.03);transform:scale(1.045)}
.h2-home a.edition-card:focus-visible{outline:3px solid var(--lime);outline-offset:3px}

.h2-home .edition-top{position:absolute;inset:20px 20px auto;display:flex;justify-content:space-between;align-items:center}
.h2-home .edition-top span{
  padding:7px 10px;border-radius:20px;border:1px solid #ffffff47;background:#0a0b0a80;backdrop-filter:blur(8px);
  font-size:7px;font-weight:900;letter-spacing:.09em;text-transform:uppercase;
}
.h2-home .edition-top b{font-family:var(--display);font-size:29px;letter-spacing:-.05em;color:var(--lime)}
.h2-home .edition-copy{position:absolute;inset:auto 25px 25px}
.h2-home .edition-copy small{display:block;color:var(--lime);font-size:8px;font-weight:900;letter-spacing:.12em;text-transform:uppercase}
.h2-home .edition-copy h3{margin:10px 0 13px;font-size:37px;line-height:.92;letter-spacing:-.05em;text-transform:uppercase;text-wrap:balance}
.h2-home .edition-copy p{max-width:420px;margin:0;color:#ffffffa6;font-size:10px;line-height:1.6}
/* v0.26.3 — data e local no pé do cartão. Deliberadamente mais apagado que o
   rótulo lime do topo: é informação de consulta, não a chamada editorial.
   Sem caixa-alta e sem peso 900 justamente pra não competir com ele. */
.h2-home .edition-meta{
  display:flex;align-items:center;gap:6px;margin-top:14px;
  color:#ffffff80;font-size:9px;line-height:1.4;letter-spacing:.02em;
}
.h2-home .edition-meta .ti{font-size:12px;line-height:1;flex:none;color:#ffffff5c}

/* ══════════════════════════════════════════════════════════
   MODAL "TODAS AS EDIÇÕES" (v0.26.3)
   ══════════════════════════════════════════════════════════
   Abre pela faixa do acervo. Mostra TODAS as edições — inclusive as que não
   couberam nos cartões da seção — e cada capa leva pra página da edição, que
   já tem a galeria do Drive.
   Fica FORA de `.h2-home` no seletor porque o modal é filho do <body> depois
   que o JS o move pra lá (senão `overflow:hidden` de seção o cortaria). */
.edicoes-modal{position:fixed;inset:0;z-index:9999;display:grid;place-items:center;padding:24px}
.edicoes-modal[hidden]{display:none}
.edicoes-modal__overlay{position:absolute;inset:0;background:#05060590;backdrop-filter:blur(6px);border:0}
.edicoes-modal__box{
  position:relative;width:min(1040px,100%);max-height:min(86vh,860px);overflow:auto;
  padding:30px 32px 26px;border-radius:20px;
  background:#141614;border:1px solid #ffffff1f;box-shadow:0 40px 100px #000c;
}
.edicoes-modal__head{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:22px}
.edicoes-modal__head h3{
  margin:0;font-family:var(--display);font-size:clamp(24px,3vw,34px);font-weight:800;
  letter-spacing:-.04em;text-transform:uppercase;color:#fff;
}
.edicoes-modal__close{
  display:grid;place-items:center;width:38px;height:38px;flex:none;cursor:pointer;
  border-radius:50%;border:1px solid #ffffff2e;background:none;color:#fff;font-size:17px;transition:all .2s;
}
.edicoes-modal__close:hover{background:#ffffff14;border-color:#ffffff52}
.edicoes-modal__close:focus-visible{outline:3px solid var(--lime);outline-offset:2px}

/* Filtro por tipo — mesma linguagem das abas de ingressos, pra quem já usou
   uma reconhecer a outra. Só renderiza quando há mais de um tipo. */
.edicoes-modal__filtros{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:18px}
.edicoes-modal__filtros button{
  min-height:38px;padding:0 15px;border-radius:8px;border:1px solid #0000;background:none;cursor:pointer;
  color:#ffffff82;font-family:var(--body);font-size:9px;font-weight:900;
  letter-spacing:.055em;text-transform:uppercase;transition:color .25s,background .25s,border-color .25s;
}
.edicoes-modal__filtros button:hover{color:#fff;background:#ffffff0b}
.edicoes-modal__filtros button.active{background:var(--lime);border-color:var(--lime);color:var(--ink)}
.edicoes-modal__filtros button:focus-visible{outline:3px solid var(--lime);outline-offset:-3px}

.edicoes-modal__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:14px}
/* O card usa `display:block`, que venceria o `hidden` do filtro — mesma
   armadilha dos ingressos (autor vence user-agent). */
.edicoes-modal__card[hidden]{display:none}
.edicoes-modal__card{
  position:relative;display:block;aspect-ratio:3/4;overflow:hidden;isolation:isolate;
  border-radius:14px;border:1px solid #ffffff1f;background:#1c1f1c;
  color:inherit;text-decoration:none;
}
.edicoes-modal__card img{
  position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;
  filter:brightness(1.12) saturate(.98) contrast(1.02);transition:transform .55s,filter .55s;
}
a.edicoes-modal__card:hover img{filter:brightness(1.18) saturate(1.08) contrast(1.02);transform:scale(1.045)}
a.edicoes-modal__card:focus-visible{outline:3px solid var(--lime);outline-offset:3px}
.edicoes-modal__semcapa{
  position:absolute;inset:0;z-index:-2;display:grid;place-items:center;
  background:linear-gradient(150deg,#242724,#141614);
  font-family:var(--display);font-size:52px;font-weight:900;letter-spacing:-.06em;color:#ffffff14;
}
.edicoes-modal__shade{position:absolute;inset:0;z-index:-1;background:linear-gradient(#0000 42%,#080908f2)}
.edicoes-modal__info{position:absolute;inset:auto 14px 13px;display:flex;flex-direction:column;gap:3px}
.edicoes-modal__info b{font-family:var(--display);font-size:26px;line-height:1;letter-spacing:-.04em;color:#fff}
.edicoes-modal__info small{color:#ffffff9e;font-size:9px;line-height:1.35}
/* Estatísticas da própria edição. Exibidas como foram escritas no admin
   ("5K+", "200+") — ver o comentário no template sobre por que não somamos
   isso entre edições. */
.edicoes-modal__stats{display:flex;flex-wrap:wrap;gap:4px 10px;margin-top:7px}
.edicoes-modal__stats em{
  display:inline-flex;align-items:baseline;gap:4px;font-style:normal;
  color:#ffffff70;font-size:8px;letter-spacing:.05em;text-transform:uppercase;
}
.edicoes-modal__stats em b{font-family:var(--display);font-size:13px;letter-spacing:-.02em;color:var(--lime)}
.edicoes-modal__pe{margin:20px 0 0;color:#ffffff70;font-size:10px;text-align:center}

@media(max-width:680px){
  .edicoes-modal{padding:12px}
  .edicoes-modal__box{padding:20px 14px 16px;max-height:92vh}
  /* DUAS COLUNAS FIXAS. O `minmax(140px,1fr)` anterior calculava (256-10)/2 =
     123px por coluna num aparelho de 320px — abaixo do mínimo de 140 — e o
     grid caía pra UMA coluna: cards de 339px de altura e uma rolagem enorme
     pra ver 6 edições. Com `repeat(2,1fr)` a decisão é do layout, não do
     cálculo, e o acervo cabe na tela. */
  .edicoes-modal__grid{grid-template-columns:repeat(2,1fr);gap:9px}
  .edicoes-modal__info{inset:auto 10px 10px}
  .edicoes-modal__info b{font-size:19px}
  .edicoes-modal__info small{font-size:8px}
  /* Com 3+ tipos os filtros passariam da largura e quebrariam em duas
     fileiras, empurrando a grade pra baixo. Rolagem horizontal mantém a
     altura previsível. */
  .edicoes-modal__filtros{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-bottom:14px}
  .edicoes-modal__filtros::-webkit-scrollbar{display:none}
  .edicoes-modal__filtros button{flex:none}
  .edicoes-modal__head h3{font-size:22px}
  /* Estatísticas viram só o número + rótulo curto; três pares completos não
     cabem num card de 123px sem virar sopa de letrinhas. */
  .edicoes-modal__stats{gap:3px 7px;margin-top:5px}
  .edicoes-modal__stats em{font-size:7px}
  .edicoes-modal__stats em b{font-size:11px}
}
/* O cartão largo ganha manchete maior — é o pôster de abertura da série. */
.h2-home .edition-origin .edition-copy h3{font-size:50px}

.h2-home .next-chapter{
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:42px;margin-top:15px;padding:28px 32px;
  border-radius:14px;border:1px solid #a6df0045;background:linear-gradient(110deg,#151915,#1d2515);
}
.h2-home .next-chapter small{display:block;color:#ffffff6c;font-size:7px;font-weight:900;letter-spacing:.1em;text-transform:uppercase}
.h2-home .next-chapter strong{display:block;margin-top:4px;font-family:var(--display);font-size:52px;line-height:.9;letter-spacing:-.06em;color:var(--lime)}
.h2-home .next-chapter > p{margin:0;color:#ffffffb0;font-size:11px;line-height:1.55;letter-spacing:.04em;text-transform:uppercase}
.h2-home .next-chapter .btn{width:max-content;white-space:nowrap}

/* v0.26.4 — a faixa virou o resumo do acervo: número grande, o que ele é, e
   os fatos derivados em uma linha só. Duas alturas de texto em vez de uma,
   pra separar "o que é" de "os detalhes". */
/* Separador entre o número e os fatos. Traço lime bem apagado, do tamanho do
   texto — não do bloco inteiro: régua de borda a borda viraria uma segunda
   moldura dentro da faixa, que já tem a sua. */
.h2-home .acervo-fatos{
  display:flex;flex-direction:column;gap:6px;min-width:0;
  padding-left:26px;border-left:2px solid #a6df0038;
}
.h2-home .acervo-titulo{
  margin:0;color:#fff;font-size:13px;font-weight:700;line-height:1.35;
  letter-spacing:.03em;text-transform:uppercase;
}
.h2-home .acervo-linha{
  margin:0;color:#ffffff8a;font-size:11px;line-height:1.55;letter-spacing:.02em;
}
/* Os fatos vêm de dados cadastrados e podem ficar longos numa coluna estreita;
   sem isto a linha empurraria o botão pra fora da faixa. */
@media(max-width:980px){
  .h2-home .acervo-linha{font-size:10px}
}

@media(max-width:980px){
  .h2-home .editions-head{grid-template-columns:1fr;gap:28px;margin-bottom:36px}
  .h2-home .editions-grid{grid-template-columns:1fr 1fr}
  /* Em duas colunas o pôster de abertura ocupa a linha inteira, senão ficaria
     do mesmo tamanho dos outros e perderia a hierarquia. */
  .h2-home .edition-origin{grid-column:1/3;height:470px}
  .h2-home .edition-copy h3{font-size:41px}
  .h2-home .next-chapter{grid-template-columns:1fr 1fr}
  .h2-home .next-chapter .btn{grid-column:1/3}
}
@media(max-width:680px){
  /* Tipografia FLUIDA em vez de um tamanho fixo: 44px é confortável num
     iPhone de 390px e sufocante num Android de 320px. O clamp acompanha a
     largura e para de crescer no valor que já usávamos. */
  .h2-home .editions-head h2{font-size:clamp(32px,9.5vw,44px)}
  .h2-home .edition-copy h3,.h2-home .edition-origin .edition-copy h3{font-size:clamp(28px,8.5vw,37px)}

  /* 9px e 10px passam no desktop, onde a tela está a 60cm do olho; no celular
     ficam abaixo do confortável de leitura. Subidos ao mínimo que ainda
     mantém a hierarquia com o texto principal. */
  .h2-home .edition-meta{font-size:10px}
  .h2-home .edition-copy p{font-size:11px}

  /* ═══ FORMATO NO CELULAR ═══
     Três pôsteres empilhados custam ~2.100px de rolagem só nesta seção. As
     duas opções abaixo atacam isso por caminhos diferentes; o Editor Visual
     escolhe qual, e o `data-mobile` no container carrega a decisão.

     A especificidade extra (`.h2-section--edicoes` no meio) não é enfeite:
     `.h2-home [data-width="padrao"] .container` pesa 0,3,0 e venceria um
     seletor de duas classes, deixando a regra sem efeito silenciosamente.

     ── PADRÃO: destaque + arquivo (~33% menos altura) ──
     A edição mais recente segue pôster; as demais viram fileiras de ~100px
     com miniatura, ano e manchete. Parte da ideia de que se quer VER a
     última e apenas SABER que as outras existem. */
  .h2-home .h2-section--edicoes .editions-grid[data-mobile="destaque"]{
    display:flex;flex-direction:column;gap:10px;
  }
  .h2-home .editions-grid[data-mobile="destaque"] .edition-origin{height:430px}
  .h2-home .editions-grid[data-mobile="destaque"] .edition-card:not(.edition-origin){
    height:auto;min-height:96px;display:grid;
    grid-template-columns:92px 1fr;align-items:center;gap:14px;padding:10px;
    background:#141614;border:1px solid #ffffff17;
  }
  /* A foto sai do `inset:0` e vira miniatura em fluxo normal. */
  .h2-home .editions-grid[data-mobile="destaque"] .edition-card:not(.edition-origin) > img{
    position:relative;inset:auto;z-index:0;grid-column:1;grid-row:1/3;
    width:92px;height:76px;border-radius:10px;filter:none;
  }
  .h2-home .editions-grid[data-mobile="destaque"] .edition-card:not(.edition-origin) .edition-shade{display:none}
  .h2-home .editions-grid[data-mobile="destaque"] .edition-card:not(.edition-origin) .edition-top{
    position:static;grid-column:2;grid-row:1;inset:auto;padding:0;
    display:flex;gap:8px;align-items:baseline;
  }
  .h2-home .editions-grid[data-mobile="destaque"] .edition-card:not(.edition-origin) .edition-top span{
    padding:0;border:0;background:none;font-size:7px;backdrop-filter:none;
  }
  .h2-home .editions-grid[data-mobile="destaque"] .edition-card:not(.edition-origin) .edition-top b{font-size:15px;color:var(--lime)}
  .h2-home .editions-grid[data-mobile="destaque"] .edition-card:not(.edition-origin) .edition-copy{
    position:static;grid-column:2;grid-row:2;inset:auto;
  }
  .h2-home .editions-grid[data-mobile="destaque"] .edition-card:not(.edition-origin) .edition-copy h3{
    font-size:17px;margin:2px 0 3px;line-height:1.05;
  }
  /* Rótulo editorial e parágrafo não cabem numa fileira de 100px — quem
     quiser o texto inteiro abre a página da edição. */
  .h2-home .editions-grid[data-mobile="destaque"] .edition-card:not(.edition-origin) .edition-copy small,
  .h2-home .editions-grid[data-mobile="destaque"] .edition-card:not(.edition-origin) .edition-copy p{display:none}
  .h2-home .editions-grid[data-mobile="destaque"] .edition-card:not(.edition-origin) .edition-meta{margin-top:0;font-size:9px}

  /* ── OPÇÃO: mosaico (~38% menos altura) ──
     Duas colunas de capas. Bate o olho em tudo de uma vez; o texto longo
     migra pra página da edição. */
  .h2-home .h2-section--edicoes .editions-grid[data-mobile="mosaico"]{
    display:grid;grid-template-columns:1fr 1fr;gap:10px;
  }
  .h2-home .editions-grid[data-mobile="mosaico"] .edition-card{height:236px}
  /* A primeira ocupa a linha inteira: com número ímpar de edições, sem isto
     sobra um buraco na última linha. */
  .h2-home .editions-grid[data-mobile="mosaico"] .edition-origin{grid-column:1/3;height:300px}
  .h2-home .editions-grid[data-mobile="mosaico"] .edition-copy{inset:auto 14px 14px}
  .h2-home .editions-grid[data-mobile="mosaico"] .edition-copy h3{font-size:19px;margin:6px 0 0}
  .h2-home .editions-grid[data-mobile="mosaico"] .edition-origin .edition-copy h3{font-size:30px}
  .h2-home .editions-grid[data-mobile="mosaico"] .edition-copy small{font-size:7px}
  .h2-home .editions-grid[data-mobile="mosaico"] .edition-copy p,
  .h2-home .editions-grid[data-mobile="mosaico"] .edition-meta{display:none}
  /* Só o cartão de abertura tem largura pra sustentar o parágrafo. */
  .h2-home .editions-grid[data-mobile="mosaico"] .edition-origin .edition-copy p{display:block;font-size:10px;margin-top:6px}
  .h2-home .acervo-linha{font-size:11px}
  .h2-home .acervo-titulo{font-size:12px}

  /* A faixa mantém número e texto LADO A LADO, em vez de empilhar tudo:
     empilhado dava três blocos e uma faixa muito alta, e o número sozinho
     numa linha só parecia solto. Assim o traço vertical continua separando
     de verdade, e a faixa fica bem mais curta. */
  .h2-home .next-chapter{grid-template-columns:auto 1fr;gap:0 16px;padding:22px}
  .h2-home .next-chapter strong{font-size:38px}
  .h2-home .next-chapter .btn{grid-column:1/3;width:100%;margin-top:18px}
  .h2-home .acervo-fatos{padding-left:16px;border-left:2px solid #a6df0038;padding-top:0;border-top:0}
}

/* Abaixo de 400px o lado a lado deixa de compensar. O rótulo "Nosso acervo"
   fixa a 1ª coluna em ~64px, e no 320px sobram apenas 145px pro texto: a
   linha de fatos quebra em CINCO linhas dentro de uma coluna estreitíssima.
   Empilhado ela ocupa a largura toda e cai pra duas linhas.

   Medido nos dois formatos, pra não decidir no olho:
     320px lado a lado → 208px de altura, texto em 5 linhas num vão de 145px
     320px empilhado   → 247px de altura, texto em 2 linhas na largura toda
   Ou seja, empilhar é ~39px MAIS ALTO — a troca é altura por legibilidade, e
   num bloco que já está em rolagem esses 39px não custam nada perto de ler
   cinco linhas espremidas. (Minha suposição inicial era que empilhar
   encurtaria a faixa; a medição mostrou o contrário.) */
@media(max-width:400px){
  .h2-home .next-chapter{grid-template-columns:1fr;gap:0;padding:20px}
  .h2-home .next-chapter .btn{grid-column:1}
  .h2-home .acervo-fatos{
    padding-left:0;border-left:0;
    margin-top:14px;padding-top:14px;border-top:2px solid #a6df0038;
  }
}

/* ══════════════════════════════════════════════════════════
   REDES — "Faça parte da nossa família." (banda branca)
   ══════════════════════════════════════════════════════════ */
.h2-home .h2-section--comunidade{position:relative;overflow:hidden;background:#fff;color:var(--ink)}
.h2-home .social-word{
  position:absolute;top:30px;right:-20px;pointer-events:none;
  font-family:var(--display);font-size:170px;font-weight:900;line-height:1;letter-spacing:-.07em;color:#090a0908;
}
.h2-home .social-head{display:grid;grid-template-columns:1.15fr .85fr;align-items:end;gap:90px;margin-bottom:48px;position:relative;z-index:2}
.h2-home .social-head h2{margin:0;font-size:clamp(48px,5.2vw,76px);line-height:.89;letter-spacing:-.055em;text-transform:uppercase}
/* v0.27.0 — LIME CRU aqui, por decisão explícita do dono da marca, com o
   custo medido e aceito: #a6df00 sobre o branco dá 1,59:1, abaixo até do
   mínimo de 3:1 que vale pra título grande e negrito. Não é descuido nem
   valor herdado — é escolha de identidade sobre a métrica.

   Trocar de volta é uma linha: `var(--brand-green)` (#5a7a00) devolve
   4,98:1. O meio-termo medido era #6f9a00, com 3,33:1. */
.h2-home .social-head h2 em{color:var(--lime);font-style:normal}
.h2-home .social-head p{max-width:430px;margin:0 0 22px;color:var(--muted);font-size:14px;line-height:1.7}
/* v0.34.0 — virou botão de copiar. `min-height:44px` porque agora é alvo de
   toque de verdade (WCAG 2.5.5): com o padding de 9px ela dava 30px. */
.h2-home .social-hashtag{
  display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;
  border-radius:30px;border:1px solid var(--lime);background:none;cursor:pointer;
  color:var(--ink);font-family:var(--body);font-size:8px;font-weight:900;letter-spacing:.11em;text-transform:uppercase;
  transition:background .2s,color .2s;
}
.h2-home .social-hashtag:hover{background:var(--lime)}
.h2-home .social-hashtag:focus-visible{outline:3px solid var(--lime);outline-offset:3px}
.h2-home .social-hashtag__ico{display:grid;place-items:center;font-size:13px;line-height:1}
/* Confirmação no lugar do ícone — sem toast, sem elemento novo no DOM. */
.h2-home .social-hashtag.copiou{background:var(--lime)}
.h2-home .social-hashtag.copiou .social-hashtag__txt::after{content:" · copiado"}
.h2-home .social-hashtag.copiou .social-hashtag__ico{display:none}

/* v0.32.0 — flex com a última fileira CENTRALIZADA, no lugar de
   `repeat(3,1fr)`. A grade fixa deixava o resto encostado na esquerda com o
   buraco inteiro à direita: com 4 ou 7 redes o vão media 757px ao lado de um
   card solto, e com 5, 379px. Não lia como fim de lista, lia como card que não
   carregou.

   `flex-grow:0` é o ponto: com grow, a rede sozinha na última fileira viraria
   um card de largura inteira ao lado de cards de 365px — pior que o buraco. É
   pela mesma razão que `auto-fit` não resolve (ele colapsa a trilha vazia e
   estica o que sobrou), o que já estava medido antes de eu tentar. */
.h2-home .social-grid{
  display:flex;flex-wrap:wrap;justify-content:center;gap:14px;position:relative;z-index:2;
}
.h2-home .social-card{
  /* 3 por fileira, sem crescer — ver o comentário do .social-grid. */
  flex:0 1 calc(33.333% - 9.34px);
  position:relative;overflow:hidden;display:grid;grid-template-columns:54px 1fr auto;align-items:center;gap:18px;
  min-height:215px;padding:27px;min-width:0;
  border-radius:16px;border:1px solid #d9ddd4;background:var(--paper-4);color:inherit;text-decoration:none;
  transition:transform .35s cubic-bezier(.22,1,.36,1),border-color .35s,box-shadow .35s;
}
/* Barrinha no topo, reservada em 18% da largura, que abre pra 100% no hover
   — existe na referência (`.social-card::before`).

   v0.27.0 — a cor virou `--rede`, definida por card no template, em vez do
   lime global. O lime brigava com a marca de cada rede: barra verde-limão
   em cima do azul do Facebook não pertence a nenhuma das duas identidades.

   A divisão que ficou: o lime segue sendo a cor do EVENTO (título, hashtag,
   nota da comunidade); a cor da rede manda só no que é do card dela. O
   fallback devolve o lime se o template não passar a variável, então card
   de rede nova não nasce sem acento. */
.h2-home .social-card::before{
  content:"";position:absolute;inset:0 0 auto;height:4px;
  background:var(--rede-barra,var(--lime));
  transform-origin:0 center;transform:scaleX(.18);transition:transform .4s cubic-bezier(.22,1,.36,1);
}
.h2-home .social-card:hover{border-color:var(--rede,#9dcc27);transform:translateY(-7px);box-shadow:0 24px 55px #1217121c}
.h2-home .social-card:hover::before{transform:scaleX(1)}
.h2-home .social-card:focus-visible{outline:3px solid var(--rede,var(--lime));outline-offset:3px}
/* Marca-d'água: o mesmo ícone, gigante, sangrando no canto. */
.h2-home .social-watermark{
  position:absolute;bottom:-35px;right:-26px;z-index:0;display:grid;place-items:center;width:150px;height:150px;
  opacity:.055;pointer-events:none;transform:rotate(-8deg) scale(.96);
  transition:opacity .35s,transform .5s cubic-bezier(.22,1,.36,1);
}
.h2-home .social-watermark i{font-size:150px;line-height:1;color:var(--ink)}
.h2-home .social-card:hover .social-watermark{opacity:.09;transform:rotate(-3deg) scale(1.03)}
.h2-home .social-icon{
  position:relative;z-index:1;display:grid;place-items:center;width:54px;height:54px;
  border-radius:15px;background:var(--ink);color:#fff;box-shadow:0 9px 24px #0002;
}
/* v0.27.0 — `color` explícito no glifo, e não só no quadrado. O `color:#fff`
   do pai é herdado em condições normais, mas o fundo de cada rede entra por
   `style=""` inline no template e qualquer regra de tema que alcance o `i`
   (ou um ícone de marca que traga cor própria) vencia a herança — foi assim
   que o glifo do Facebook apareceu colorido em vez de branco. Fixar aqui
   torna a silhueta branca independente do que o fundo seja. */
.h2-home .social-icon i{color:#fff;font-size:27px;line-height:1}
.h2-home .social-card > div{position:relative;z-index:1;min-width:0}
.h2-home .social-card small{display:block;color:#6b6b6b;font-size:7px;font-weight:900;letter-spacing:.11em;text-transform:uppercase}
.h2-home .social-card h3{margin:9px 0 6px;font-size:27px;line-height:.9;text-transform:uppercase}
.h2-home .social-card p{margin:0;color:#6b6b6b;font-size:10px;overflow-wrap:anywhere}
.h2-home .social-card > b{
  position:relative;z-index:1;display:grid;place-items:center;width:34px;height:34px;flex:none;
  border-radius:50%;border:1px solid #ced3c9;font-size:12px;transition:all .3s;
}
/* A seta acende na cor da rede. `color:#fff` junto porque o padrão herdado é
   escuro — legível sobre o lime, ilegível sobre o azul do Facebook. */
.h2-home .social-card:hover > b{
  background:var(--rede,var(--lime));border-color:var(--rede,var(--lime));
  color:var(--rede-seta-cor,#fff);transform:rotate(8deg);
}

.h2-home .social-note{display:flex;justify-content:center;align-items:center;gap:9px;margin:28px 0 0;color:#737373;font-size:9px;position:relative;z-index:2}
.h2-home .social-note i{width:7px;height:7px;flex:none;border-radius:50%;background:var(--lime)}

@media(max-width:980px){
  .h2-home .social-head{grid-template-columns:1fr;gap:25px;margin-bottom:34px}
  .h2-home .social-card{flex:0 1 calc(50% - 7px)}
}
@media(max-width:680px){
  .h2-home .social-word{font-size:92px;top:38px}
  .h2-home .social-head h2{font-size:45px}
  /* Uma coluna: cada card ocupa a fileira inteira (o `flex-basis` de 50% da
     faixa acima deixaria dois por linha num celular estreito). */
  .h2-home .social-card{flex:1 1 100%}
  .h2-home .social-icon{width:48px;height:48px}
  .h2-home .social-icon i{font-size:24px}
  .h2-home .social-watermark{width:120px;height:120px;bottom:-29px;right:-18px}
  .h2-home .social-watermark i{font-size:120px}
  .h2-home .social-note{justify-content:flex-start;align-items:flex-start;line-height:1.5}
  .h2-home .social-note i{margin-top:3px}
}

/* ══════════════════════════════════════════════════════════
   LOCAL — moldura do mapa (banda #101210)
   ══════════════════════════════════════════════════════════
   v0.26.7 — O mapa estava ILEGÍVEL, e por acúmulo: duas camadas de
   escurecimento empilhadas, cada uma justificável sozinha.

     1. filtro no mapa: grayscale(.78) saturate(.7) brightness(.9)
     2. véu por cima:   preto a 85% de opacidade na faixa esquerda

   A justificativa original do véu era "garantir contraste pro cartão de
   endereço". Só que o cartão tem `background:#111311ed` — 93% opaco — e a
   chip de coordenadas tem 85%, ambos com `backdrop-filter`. Os dois já se
   defendem sozinhos: o véu escurecia o mapa inteiro pra resolver um problema
   que não existia mais.

   Agora: dessaturação leve (o mapa não briga com o lime da marca, mas as ruas
   e os nomes continuam legíveis) e véu reduzido a um esfumado de borda, que
   serve pra assentar a moldura, não pra apagar o conteúdo. */
.h2-home .h2-section--mapa{overflow:hidden;background:var(--ink-2);color:#fff}
.h2-home .location-head{display:grid;grid-template-columns:1.25fr .75fr;align-items:end;gap:90px;margin-bottom:48px}
.h2-home .location-head h2{margin:0;font-size:clamp(48px,5.2vw,74px);line-height:.91;letter-spacing:-.055em;text-transform:uppercase}
.h2-home .location-head p{margin:0;color:#ffffff8c;font-size:14px;line-height:1.7}

.h2-home .map-shell{
  position:relative;overflow:hidden;height:610px;
  border-radius:20px;border:1px solid #ffffff24;background:#d7dbd1;box-shadow:0 30px 85px #0008;
}
.h2-home .venue-map{
  position:absolute;inset:0;width:100%;height:100%;border:0;
  /* Dessaturação parcial em vez de quase-cinza, e SEM redução de brilho: era
     o `brightness(.9)` somado ao véu que apagava os nomes de rua. */
  filter:grayscale(.32) saturate(.92) contrast(1.03);
}
.h2-home .map-tone{
  position:absolute;inset:0;pointer-events:none;
  /* Esfumado de borda, não cortina. A faixa esquerda caiu de 85% para 28% de
     opacidade e termina bem antes do meio; o rodapé só assenta a chip de
     coordenadas na moldura. */
  background:
    linear-gradient(90deg,#080a0847 0%,#080a081a 22%,#0000 42%),
    linear-gradient(#0000 82%,#080a0833);
}
/* v0.26.12 — cartão a 65% de opacidade (era 93% → 86% → 72% → 65%).
   A primeira tentativa parou em 86% porque os textos fracos do cartão (rótulo
   pequeno a 52% de branco, endereço a 60%) reprovavam abaixo disso. Só que
   travar o FUNDO por causa do TEXTO era atacar o sintoma: reforçando os dois
   textos, o mesmo limite de 4,5:1 permite descer bem mais.

     textos a 52%/60% → cartão só até 86%
     textos a 72%/80% → cartão até 70%
     textos a 82%/90% → cartão até 65%   ← aqui
     tudo branco      → cartão até 58%

   PAREI EM 65% de propósito. Descer além disso exige levar todo o texto pro
   branco puro, e aí o rótulo, o endereço e o nome do local passam a ter o
   mesmo peso — a hierarquia do cartão morre pra ganhar 7% de transparência.
   Não vale a troca.

   Medido no pior caso, que é o cartão sobre uma rua branca do mapa:
   rótulo 4,63:1 · endereço 5,13:1 · título 5,70:1.
   O `blur` é o que torna isso confortável — sem ele as linhas do mapa
   passariam nítidas por trás do texto, e contraste sozinho não resolveria. */
.h2-home .address{
  position:absolute;bottom:34px;left:34px;z-index:2;width:min(420px,100% - 68px);padding:30px;
  border-radius:16px;border:1px solid #ffffff33;background:#111311a6;backdrop-filter:blur(26px);
  color:#fff;box-shadow:0 25px 65px #0009;
}
.h2-home .venue-tag{display:inline-flex;align-items:center;gap:8px;margin-bottom:22px;color:var(--lime);font-size:8px;font-weight:900;letter-spacing:.1em;text-transform:uppercase}
.h2-home .venue-tag i{width:7px;height:7px;flex:none;border-radius:50%;background:var(--lime)}
/* v0.26.11 — 52% → 72% de branco. É o reforço que permitiu o cartão ficar
   translúcido: com o fundo a 72%, este rótulo a 52% media 3,3:1 e reprovava. */
.h2-home .address small{display:block;color:#ffffffd1;font-size:8px;font-weight:900;letter-spacing:.1em;text-transform:uppercase}
.h2-home .address h3{margin:10px 0 13px;font-size:30px;line-height:.97;letter-spacing:-.04em;text-transform:uppercase}
/* v0.26.11 — 60% → 80% de branco, mesmo motivo do rótulo acima. É o endereço
   em si: o texto que alguém copia pra colar no aplicativo de mapas. */
.h2-home .address > p{margin:0;color:#ffffffe6;font-size:12px;line-height:1.6}
.h2-home .venue-details{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:22px 0}
.h2-home .venue-details small{display:block;color:var(--lime);font-size:7px;font-weight:900;text-transform:uppercase}
.h2-home .venue-details b{font-size:9px}
/* v0.26.8 — PULSO DO PINO.
   Duas ondas saindo da PONTA do pino, que é onde o `iconAnchor` do Leaflet
   marca a coordenada real. Pulsar do centro do balão sugeriria um local ~20px
   ao norte do verdadeiro — num mapa, isso é informação errada, não detalhe.
   A segunda onda entra com metade do ciclo de atraso pra a repetição não
   parecer um piscar único. */
.h2-home .venue-pin{position:relative}
.h2-home .venue-pin__pulse{
  position:absolute;left:50%;top:46px;  /* 46px = iconAnchor Y, a ponta */
  width:0;height:0;pointer-events:none;
}
.h2-home .venue-pin__pulse i{
  position:absolute;left:0;top:0;transform:translate(-50%,-50%);
  width:16px;height:16px;border-radius:50%;
  border:2px solid #e11d2a;opacity:0;
  animation:h2-pin-pulse 2.6s cubic-bezier(.2,.6,.35,1) infinite;
}
.h2-home .venue-pin__pulse i:nth-child(2){animation-delay:1.3s}
@keyframes h2-pin-pulse{
  0%   {transform:translate(-50%,-50%) scale(.4);opacity:.75}
  70%  {opacity:.14}
  100% {transform:translate(-50%,-50%) scale(3.6);opacity:0}
}
@media(prefers-reduced-motion:reduce){
  .h2-home .venue-pin__pulse{display:none}
}

/* v0.26.10 — MARCADOR "VOCÊ" com avatar, em lime.
   Estrutura vinda do mapa da Caçada; a cor virou o lime da marca.

   O contorno escuro por fora do anel NÃO é enfeite. Medido sobre o mapa
   claro: o lime sozinho fica em 1,43:1 contra o fundo — abaixo dos 3:1 que
   um objeto gráfico precisa, e pior até que o azul (2,57:1) que estava aqui
   antes. Com o contorno, o conjunto vai a 11,18:1 contra o mapa e o lime
   mantém 7,84:1 contra o próprio contorno. É a mesma correção que a linha da
   rota precisou depois que o mapa foi clareado. */
.h2-home .venue-you{position:relative;width:40px;height:40px}
.h2-home .venue-you__av{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2;
  width:30px;height:30px;border-radius:50%;object-fit:cover;
  border:2.5px solid var(--lime);background:#141812;
  /* 1º anel: contorno escuro que sustenta o lime sobre mapa claro.
     2º e 3º: brilho e sombra, que são o acabamento. */
  box-shadow:0 0 0 1.5px #0b3d00,0 0 10px #a6df00b3,0 2px 5px #00000080;
}
/* Sem conta Hero: silhueta genérica, mesmo anel e mesmo pulso. */
.h2-home .venue-you__av--generico{display:grid;place-items:center;color:#e2f5ad}
.h2-home .venue-you__wave{
  position:absolute;left:50%;top:50%;z-index:1;
  width:30px;height:30px;margin:-15px 0 0 -15px;border-radius:50%;
  border:2px solid var(--lime);opacity:.5;
  /* A onda também precisa se sustentar sobre o mapa claro. */
  box-shadow:0 0 0 1px #0b3d0059;
  animation:h2-you-wave 2s ease-out infinite;
}
@keyframes h2-you-wave{
  0%   {transform:scale(.75);opacity:.55}
  100% {transform:scale(2.5);opacity:0}
}
.h2-home .venue-you__lbl{
  position:absolute;left:50%;top:calc(100% - 4px);transform:translateX(-50%);z-index:3;
  padding:1px 7px;border-radius:8px;background:var(--lime);color:var(--ink);
  font-family:var(--body);font-size:9px;font-weight:800;letter-spacing:.02em;white-space:nowrap;
  box-shadow:0 1px 4px #00000066;
}
@media(prefers-reduced-motion:reduce){
  .h2-home .venue-you__wave{animation:none;opacity:.35}
}

/* v0.26.7 — Bloco de rota dentro do cartão de endereço.
   v0.26.12 — virou um botão só; o rótulo separado saiu junto, porque o texto
   dele passou pra dentro do próprio botão. */
.h2-home .route-actions{margin-top:20px;padding-top:17px;border-top:1px solid #ffffff25}
.h2-home .route-modes{display:flex;gap:7px}
.h2-home .route-modes button{
  flex:1;display:inline-flex;align-items:center;justify-content:center;gap:9px;
  min-height:46px;padding:0 16px;cursor:pointer;
  /* v0.26.14 — lime PREENCHIDO com texto escuro, igual ao `.btn` do hero.
     Passou por três formas até aqui, e cada troca teve motivo:
       contorno claro  → o texto dependia do que estivesse atrás (3,23:1)
       fundo escuro    → resolveu o contraste, mas virava um botão secundário
       lime preenchido → é a ação principal do cartão, e agora parece uma
     O texto escuro sobre lime dá 12,44:1 e não depende do mapa por trás. */
  border-radius:9px;border:1px solid var(--lime);background:var(--lime);color:var(--ink);
  font-family:var(--body);font-size:10px;font-weight:900;letter-spacing:.06em;text-transform:uppercase;
  transition:background .2s,transform .2s;
}
.h2-home .route-modes button .ti{font-size:15px;line-height:1}
/* Mesmo hover do `.btn` do hero: clareia pro `--bright` e sobe 2px. Nada de
   halo lime — foi abolido no projeto e eu já o reintroduzi por engano uma vez
   nesta sessão. */
.h2-home .route-modes button:hover{background:var(--bright);border-color:var(--bright);transform:translateY(-2px)}
.h2-home .route-modes button:focus-visible{outline:3px solid var(--lime);outline-offset:2px}
/* `is-active` é o que o venue-map.js marca no modo escolhido. */
/* Rota já traçada. Com a base agora lime, repetir lime aqui não diria nada —
   o estado seria invisível. Verde escuro com texto branco lê como "já feito"
   e devolve a atenção pro painel de distância que apareceu logo abaixo. */
.h2-home .route-modes button.is-active{
  background:var(--brand-green);border-color:var(--brand-green);color:#fff;transform:none;
}

/* O feedback nasce oculto; o JS acrescenta `is-visible` junto com o estado. */
.h2-home .route-feedback{display:none}
.h2-home .route-feedback.is-visible{
  display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:11px;
  padding:9px 11px;border-radius:8px;background:#ffffff0d;border:1px solid #ffffff1f;
  color:#ffffffc4;font-size:10px;line-height:1.45;
}
.h2-home .route-feedback.is-loading{border-color:#ffffff33}
.h2-home .route-feedback.is-success{border-color:#a6df0045;color:#fff}
/* Erro em âmbar, não vermelho: recusar a localização é uma escolha legítima
   do visitante, não uma falha dele. */
.h2-home .route-feedback.is-error{background:#ffca2814;border-color:#ffca2833;color:#ffd98a}
.h2-home .route-feedback__clear{
  flex:none;padding:0;border:0;background:none;cursor:pointer;text-decoration:underline;
  color:inherit;font-family:var(--body);font-size:9px;font-weight:900;letter-spacing:.06em;text-transform:uppercase;
}
.h2-home .route-feedback__clear:focus-visible{outline:3px solid var(--lime);outline-offset:2px}

.h2-home .route-actions__externo{
  display:inline-flex;align-items:center;gap:7px;margin-top:12px;
  color:#ffffff7a;font-size:9px;letter-spacing:.04em;text-decoration:none;
}
.h2-home .route-actions__externo:hover{color:#fff}
.h2-home .route-actions__externo:focus-visible{outline:3px solid var(--lime);outline-offset:3px}
.h2-home .map-coordinates{
  position:absolute;bottom:18px;right:20px;z-index:2;padding:7px 9px;border-radius:6px;
  background:#101210d9;backdrop-filter:blur(8px);color:#ffffff83;font-size:7px;font-weight:900;letter-spacing:.1em;
}
/* O balão do Leaflet precisa vencer o véu e o cartão. */
.h2-home .map-shell .leaflet-pane,
.h2-home .map-shell .leaflet-control-container{z-index:1}
.h2-home .map-shell .leaflet-popup-pane{z-index:3}

/* Popup do pino (só abre se alguém clicar — não é mais automático). O
   `.venue-popup*` só tinha estilo CLARO no main.css (do tema antigo); aqui
   escurece pra combinar com o resto da seção, caso alguém clique. */
.h2-home .venue-popup-wrap .leaflet-popup-content-wrapper{
  padding:0;border-radius:14px;overflow:hidden;background:#151815;
  box-shadow:0 15px 40px #0009;border:1px solid #ffffff1f;
}
.h2-home .venue-popup-wrap .leaflet-popup-tip{background:#151815}
.h2-home .venue-popup-wrap .leaflet-popup-close-button{color:#fff9}
.h2-home .venue-popup__body{padding:14px 16px 16px;color:#fff}
.h2-home .venue-popup__name{font-family:var(--display);font-size:20px;letter-spacing:-.02em;margin:0 0 6px;color:#fff;line-height:1.15;text-transform:uppercase}
.h2-home .venue-popup__desc{font-size:12px;line-height:1.5;color:#ffffffa0;margin:0}

@media(max-width:980px){
  .h2-home .location-head{grid-template-columns:1fr;gap:24px;margin-bottom:30px}
  .h2-home .map-shell{height:660px}
  /* Era 72% de preto na metade de baixo. O cartão continua sobre o mapa aqui,
     mas com fundo 93% opaco — basta um esfumado pra ele não parecer colado. */
  .h2-home .map-tone{background:linear-gradient(#0000 62%,#080a083d)}
}
@media(max-width:680px){
  .h2-home .location-head h2{font-size:44px}
  /* Em tela estreita o cartão não cabe SOBRE o mapa sem tapá-lo: o mapa fica
     na metade de cima e o cartão ocupa a largura embaixo. */
  .h2-home .map-shell{height:720px;border-radius:15px}
  .h2-home .venue-map{height:48%}
  /* Aqui o cartão fica ABAIXO do mapa, não sobre ele — o véu não protege
     texto nenhum e só escurecia os 48% que sobraram de mapa. Reduzido a um
     esfumado no pé, que costura o mapa com o cartão em vez de apagá-lo. */
  .h2-home .map-tone{background:linear-gradient(#0000 84%,#080a0836)}
  .h2-home .address{width:auto;left:14px;right:14px;bottom:14px;padding:24px}
  .h2-home .address h3{font-size:27px}
  .h2-home .venue-details{grid-template-columns:1fr}
  .h2-home .map-coordinates{top:14px;right:14px;bottom:auto}
}

/* ══════════════════════════════════════════════════════════
   MASCOTES DECORATIVOS (v0.23.3)
   ══════════════════════════════════════════════════════════
   3 PNGs absolutos que "espiam" pra dentro das seções de INGRESSOS,
   COMUNIDADE (Expo Nerd Hero) e PATROCINADORES. São pura decoração —
   `pointer-events:none` e `aria-hidden` no HTML garantem que não
   interferem com leitores de tela nem cliques.

   TRUQUE: `left:-155px` posiciona o mascote FORA da seção; o
   `overflow:hidden` no wrapper corta a parte que escapa, revelando
   só a parte que "espia" pra dentro. O `:has()` seleciona só as
   seções que têm mascote, sem afetar outras seções da home.
   ══════════════════════════════════════════════════════════ */

/* Wrapper das seções que hospedam mascote: precisa de position:relative
   pra o mascote absoluto se ancorar aqui + overflow pra cortar a parte
   que escapa. `.h2-section` é o wrapper interno gerado pelo hero-core. */
.h2-home .h2-section:has(> .decor-mascot),
.h2-home .hero-section-role:has(> .h2-section > .decor-mascot){
  position:relative;overflow:hidden
}

.h2-home .decor-mascot{
  position:absolute;z-index:1;width:auto;max-width:none;height:auto;
  pointer-events:none;user-select:none;
  filter:drop-shadow(0 25px 35px #0005)
}
.h2-home .decor-phantom{
  height:510px;left:-155px;bottom:-82px;opacity:.18;transform:rotate(4deg)
}
.h2-home .decor-civil{
  height:650px;left:-170px;bottom:-105px;opacity:.13;
  filter:drop-shadow(0 25px 35px #0009)
}
.h2-home .decor-hero-guide{
  height:560px;right:-165px;top:18px;opacity:.095;transform:rotate(-4deg);
  filter:grayscale(.15) drop-shadow(0 22px 30px #2223)
}

@media (max-width:680px){
  .h2-home .decor-phantom{height:360px;left:-145px;bottom:-35px;opacity:.12}
  .h2-home .decor-civil{height:410px;left:-170px;bottom:-30px;opacity:.08}
  .h2-home .decor-hero-guide{height:350px;right:-155px;top:80px;opacity:.065}
}

/* ══════════════════════════════════════════════════════════
   BOTÃO COMPACT (CTA header)
   ══════════════════════════════════════════════════════════
   `.btn.compact` = o "Comprar ingresso" do header. Pulsa por um ANEL que
   expande (::before), e o anel pausa no hover pra sinalizar interatividade.

   GLOW LIME REMOVIDO (08/08/2026) — regressão minha, corrigida.
   O halo verde atrás de botão foi ABOLIDO por decisão do user em ago/2026
   (`--btn-glow:none` em main.css e hero-components.css). Eu reintroduzi aqui
   em três lugares na v0.23.3 argumentando "a referência tem", sem conferir a
   decisão que o projeto já tinha tomado. O anel expandindo continua — é ele
   que dá o pulso, e não depende de halo. */

.h2-home .btn:hover,
.hero-theme-two .btn:hover{
  background:var(--bright);transform:translateY(-2px)
}

.hero-theme-two .btn.compact,
.h2-home .btn.compact{
  min-height:50px;padding:0 22px;font-size:10px;
  animation:cta-pulse 2.4s ease-in-out infinite
}
.hero-theme-two .btn.compact::before,
.h2-home .btn.compact::before{
  content:"";position:absolute;inset:-1px;
  border:1px solid var(--lime);border-radius:inherit;
  animation:cta-ring 2.4s ease-out infinite;
  pointer-events:none
}
.hero-theme-two .btn.compact:hover,
.h2-home .btn.compact:hover{animation-play-state:paused}
.hero-theme-two .btn.compact:hover::before,
.h2-home .btn.compact:hover::before{animation-play-state:paused;opacity:0}

/* O pulso agora é só uma respirada de escala — sem halo verde. */
@keyframes cta-pulse{
  0%,100%{transform:scale(1)}
  50%{transform:scale(1.018)}
}
@keyframes cta-ring{
  0%{opacity:.55;transform:scale(1)}
  70%,100%{opacity:0;transform:scale(1.13)}
}

@media (max-width:680px){
  /* Mesmo do referência: em mobile o compact some (o menu hamburger
     resolve; espaço no header é escasso) */
  .hero-theme-two .btn.compact,
  .h2-home .btn.compact{display:none}
  .hero-theme-two .btn.compact,
  .hero-theme-two .btn.compact::before,
  .h2-home .btn.compact,
  .h2-home .btn.compact::before{animation:none}
}

@media (prefers-reduced-motion:reduce){
  .hero-theme-two .btn.compact,
  .hero-theme-two .btn.compact::before,
  .h2-home .btn.compact,
  .h2-home .btn.compact::before{animation:none}
}

/* ══════════════════════════════════════════════════════════
   LINHA DE TOPO DO CARD DE INGRESSO (v0.25.0)
   ══════════════════════════════════════════════════════════
   `CHAMADA · LOTE · TIPO` — tudo no MESMO tamanho, lido da esquerda pra
   direita. Só a cor distingue: chamada em lime, lote em neutro, tipo na cor
   cadastrada no admin.

   Substituiu a pílula flutuante de tipo da v0.24.0, que ficava solta no canto
   superior direito e disputava espaço com o numeral fantasma e com o selo.

   Onde o LOTE aparece duas vezes (aqui e acima do preço) é de propósito: em
   cima é identificação rápida na varredura da vitrine, lá embaixo é o rótulo
   do valor ("2º lote / R$ 190").
   ══════════════════════════════════════════════════════════ */

.h2-home .ticket{position:relative} /* âncora do selo e do numeral */
.h2-home .ticket-eyebrow{
  display:flex;align-items:center;flex-wrap:wrap;gap:8px;
  position:relative;z-index:3;padding-right:62px;
  font-family:var(--body);font-size:9px;font-weight:900;
  letter-spacing:.12em;text-transform:uppercase;line-height:1.4;
}
/* O numeral fantasma fica no canto sup-direito; o padding acima reserva o
   espaço dele. Com SELO o reservado é maior, senão a linha passa por baixo. */
.h2-home .ticket:has(.best) .ticket-eyebrow{padding-right:130px}

.h2-home .ticket-eyebrow .ticket-tag{color:var(--lime)}
.h2-home .ticket-eyebrow .sep{color:#ffffff3d;font-weight:400}
.h2-home .ticket-eyebrow .ticket-lote{color:#ffffff99;font-weight:700}

/* O tipo usa a cor CRUA cadastrada, sem retoque: é o mesmo #a6df00 dos botões
   quando o tipo é lime. Chegamos aqui depois de um erro real — eu clareava
   toda cor em 25% "por segurança", o que desviava o lime pra #bce740 (outro
   verde) e quebrava a identidade. Medindo a paleta crua sobre os dois fundos
   escuros de card, o pior caso dá 5,92:1: o retoque não protegia de nada.
   `--tipo` chega inline do PHP; o branco é só o neutro de quem não tem cor. */
.h2-home .ticket-eyebrow .ticket-type{display:inline-flex;align-items:center;gap:5px;color:var(--tipo,#fff)}
/* Coroa do VIP (e qualquer ícone de tipo): herda a cor do texto por
   currentColor, então acompanha o ciclo de cor sem regra própria. Um pelo
   maior que a caixa alta do rótulo pra não parecer encolhido ao lado dela. */
.h2-home .ticket-eyebrow .ticket-type .ti{font-size:12px;line-height:1}

/* ── VIP: a palavra INTEIRA troca de cor, devagar ──
   Mesma paleta da barra do rodapé (main.css `.footer::before`), mas animando
   `color` em vez de deslizar um gradiente: gradiente recortado deixaria cada
   letra numa cor diferente ao mesmo tempo, e ainda dependeria de
   `background-clip:text` (sem suporte = texto transparente, some da tela).
   16s porque aqui é uma palavra pra LER — no rodapé, que é decoração, 4s.
   Três das quatro cores são as cruas do rodapé; só o roxo é clareado 4%
   (#9B59FF mede 4,34:1 sobre o card escuro e reprova por pouco). */
.h2-home .ticket-eyebrow .ticket-type[data-anima="1"]{
  animation:h2-tipo-ciclo 16s ease-in-out infinite;
}
@keyframes h2-tipo-ciclo{
  0%,  18% {color:#a6df00}
  25%, 43% {color:#00d4ff}
  50%, 68% {color:#9f60ff}
  75%, 93% {color:#ff4d8d}
  100%     {color:#a6df00}
}

/* ── Card BRANCO destacado ──
   Aqui nada pode usar a cor crua: lime puro sobre branco mede 1,59:1 e some.
   50% da cor + preto passa em toda a paleta (pior caso 5,54:1). */
.h2-home .ticket.featured .ticket-eyebrow .ticket-tag{color:#667d0b}
.h2-home .ticket.featured .ticket-eyebrow .sep{color:#0a0b0a35}
.h2-home .ticket.featured .ticket-eyebrow .ticket-lote{color:#0a0b0a9e}
.h2-home .ticket.featured .ticket-eyebrow .ticket-type{
  color:color-mix(in srgb, var(--tipo,#000) 50%, #000)
}
.h2-home .ticket.featured .ticket-eyebrow .ticket-type[data-anima="1"]{
  animation-name:h2-tipo-ciclo-claro;
}
@keyframes h2-tipo-ciclo-claro{
  0%,  18% {color:#537000}
  25%, 43% {color:#006a80}
  50%, 68% {color:#4e2d80}
  75%, 93% {color:#802747}
  100%     {color:#537000}
}

/* ── Card featured + vip AO MESMO TEMPO ──
   BUG REAL, medido ao vivo (08/08/2026): os 3 ingressos VIP do site são
   `featured` E `vip` juntos. O `.featured` acima pinta a linha toda em tons
   ESCUROS (porque assume fundo branco), mas o `.vip` troca o fundo de volta
   pra escuro — e não havia nenhuma regra `.vip` desfazendo as cores. Medido
   no site: lote a 1,02:1 (invisível), roxo do ciclo a 1,80:1, rosa a 2,06:1.

   É a MESMA armadilha que já tinha mordido o `> p`, `li` e `.price` deste
   card em 07/08 — a correção de lá não alcançou a linha de topo porque ela
   só nasceu na v0.25.0. Aqui `.featured.vip` (2 classes) vence `.featured`
   (1 classe) e devolve a paleta de fundo escuro. */
.h2-home .ticket.featured.vip .ticket-eyebrow .ticket-tag{color:var(--lime)}
.h2-home .ticket.featured.vip .ticket-eyebrow .sep{color:#ffffff3d}
.h2-home .ticket.featured.vip .ticket-eyebrow .ticket-lote{color:#ffffff99}
.h2-home .ticket.featured.vip .ticket-eyebrow .ticket-type{color:var(--tipo,#fff)}
.h2-home .ticket.featured.vip .ticket-eyebrow .ticket-type[data-anima="1"]{
  animation-name:h2-tipo-ciclo;
}
/* O rótulo "Inclui" e o do preço usam `opacity` sobre `currentColor`; no combo
   o `color` do card vem do `.vip` (branco), então já herdam certo — mas o
   `.featured` deixa `color:var(--ink)` mais específico. Selado junto. */
.h2-home .ticket.featured.vip{color:#fff}

/* Sem animação o VIP congela numa cor legível — nunca fica sem cor. */
@media(prefers-reduced-motion:reduce){
  .h2-home .ticket-eyebrow .ticket-type[data-anima="1"]{animation:none;color:#a6df00}
  .h2-home .ticket.featured .ticket-eyebrow .ticket-type[data-anima="1"]{color:#537000}
  .h2-home .ticket.featured.vip .ticket-eyebrow .ticket-type[data-anima="1"]{color:#a6df00}
}

@media(max-width:680px){
  /* Em coluna única o numeral encolhe e o selo passa pro fluxo (regra da
     seção de ingressos), então a linha recupera a largura toda. */
  .h2-home .ticket-eyebrow,
  .h2-home .ticket:has(.best) .ticket-eyebrow{padding-right:48px}
}

/* ══════════════════════════════════════════════════════════
   EVENTOS PARCEIROS (v0.27.1)
   ══════════════════════════════════════════════════════════
   Portado do tema anterior, que trazia o CSS num `<style>` dentro do
   template. Aqui mora no home.css como todo o resto — CSS em template part
   escapa do design system e some do radar quando alguém procura uma regra. */
.h2-home .evp-grid{display:flex;flex-wrap:wrap;gap:16px}
/* flex e não `repeat(auto-fill,minmax())`: a quantidade vem do admin
   (1 a 20), e com grade fixa qualquer número que não fecha a fileira deixa
   card órfão esticado ao lado de um buraco. No flex o que sobra preenche. */
.h2-home .evp-card{
  flex:1 1 300px;display:flex;flex-direction:column;min-width:0;
  overflow:hidden;border-radius:var(--r-card-lg);
  background:var(--paper-4);border:1px solid #d9ddd4;color:inherit;text-decoration:none;
  transition:transform .35s cubic-bezier(.22,1,.36,1),border-color .35s,box-shadow .35s;
}
.h2-home .evp-card:hover{transform:translateY(-7px);border-color:#9dcc27;box-shadow:0 24px 55px #1217121c}
.h2-home .evp-card:focus-visible{outline:3px solid var(--lime);outline-offset:3px}

.h2-home .evp-card__capa{position:relative;display:block;aspect-ratio:16/9;overflow:hidden;background:#e6e9e2}
.h2-home .evp-card__capa img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform .55s cubic-bezier(.22,1,.36,1),filter .55s;
}
.h2-home .evp-card:hover .evp-card__capa img{transform:scale(1.045);filter:brightness(1.06) saturate(1.05)}
.h2-home .evp-card--sem-capa .evp-card__capa{display:grid;place-items:center}
.h2-home .evp-card--sem-capa .evp-card__capa > i{font-size:38px;color:#00000026}
/* Véu só no pé da capa: o selo fica ali e precisa de fundo previsível, mas
   escurecer a imagem inteira apagaria a capa que o parceiro escolheu. */
.h2-home .evp-card__capa::after{
  content:"";position:absolute;inset:auto 0 0;height:52%;pointer-events:none;
  background:linear-gradient(#0000,#060806b8);
}
.h2-home .evp-card__capa .hero-pe-seal{position:absolute;left:12px;bottom:12px;z-index:1}

.h2-home .evp-card__corpo{display:flex;flex-direction:column;flex:1;gap:8px;padding:20px}
.h2-home .evp-card__corpo > small{
  color:var(--brand-green);font-family:var(--body);font-size:8px;font-weight:900;
  letter-spacing:.13em;text-transform:uppercase;
}
.h2-home .evp-card__corpo h3{margin:0;font-size:23px;line-height:1.02;letter-spacing:-.03em;text-transform:uppercase}
.h2-home .evp-card__meta{display:flex;flex-wrap:wrap;gap:6px 16px;margin:0;color:#5f665f;font-size:12px}
.h2-home .evp-card__meta span{display:inline-flex;align-items:center;gap:6px;min-width:0}
.h2-home .evp-card__meta i{flex:none;color:var(--brand-green);font-size:14px}
/* `margin-top:auto` prende a chamada no pé: com quantidades de texto
   diferentes entre os cards, sem isso cada seta para numa altura. */
.h2-home .evp-card__cta{
  display:inline-flex;align-items:center;gap:10px;margin-top:auto;padding-top:6px;
  color:var(--ink);font-family:var(--body);font-size:9px;font-weight:900;
  letter-spacing:.1em;text-transform:uppercase;
}
.h2-home .evp-card__cta b{
  display:grid;place-items:center;width:28px;height:28px;flex:none;
  border-radius:50%;border:1px solid #ced3c9;font-size:11px;transition:all .3s;
}
.h2-home .evp-card:hover .evp-card__cta b{background:var(--lime);border-color:var(--lime);transform:rotate(8deg)}

/* Banda escura: o card claro sobre fundo escuro precisa inverter os tons. */
/* v0.27.2 — ancorado em `.h2-section`. Sem isso o seletor casava tambem
   com o wrapper `.hero-section-role` do plugin, que carrega o proprio
   data-band e pode discordar da secao — foi o que deixou o paragrafo de
   Atracoes branco no branco. Aqui a secao e quem manda. */
.h2-home .h2-section[data-band="escuro"] .evp-card,
.h2-home .h2-section[data-band="contraste"] .evp-card{background:#171917;border-color:#ffffff26;color:#fff}
.h2-home .h2-section[data-band="escuro"] .evp-card__corpo > small,
.h2-home .h2-section[data-band="contraste"] .evp-card__corpo > small,
.h2-home .h2-section[data-band="escuro"] .evp-card__meta i,
.h2-home .h2-section[data-band="contraste"] .evp-card__meta i{color:var(--lime)}
.h2-home .h2-section[data-band="escuro"] .evp-card__meta,
.h2-home .h2-section[data-band="contraste"] .evp-card__meta{color:#ffffff9e}
.h2-home .h2-section[data-band="escuro"] .evp-card__cta,
.h2-home .h2-section[data-band="contraste"] .evp-card__cta{color:#fff}
.h2-home .h2-section[data-band="escuro"] .evp-card__cta b,
.h2-home .h2-section[data-band="contraste"] .evp-card__cta b{border-color:#ffffff4d}

@media(max-width:520px){
  .h2-home .evp-card{flex:1 1 100%}
  .h2-home .evp-card__corpo h3{font-size:21px}
}

/* ══════════════════════════════════════════════════════════
   PERFIL DO CONVIDADO — ícone e popup (v0.27.1)
   ══════════════════════════════════════════════════════════ */
/* v0.27.2 — o `space-between` da regra original (numero a esquerda, selo a
   direita, como na referencia) foi anulado quando entrou o icone do
   Instagram: `margin-left:auto` nele absorvia TODO o espaco livre e
   empacotava numero e selo a esquerda. Agora quem empurra e o selo, e o
   icone so encosta nele. */
.h2-home .guest-top{display:flex;align-items:center;gap:10px}
.h2-home .guest-top b{margin-left:auto}
.h2-home .guest-ig{
  position:relative;display:grid;place-items:center;width:34px;height:34px;
  border-radius:50%;color:#fff;background:#0b0c0b8c;border:1px solid #ffffff4d;
  backdrop-filter:blur(8px);transition:all .22s;text-decoration:none;
}
.h2-home .guest-ig i{font-size:16px;line-height:1}
/* O disco tem 34px por desenho, mas o ALVO precisa de 44 (WCAG 2.5.5) — ainda
   mais aqui, colado num card que também leva a outro destino: errar o dedo
   abriria o perfil em vez do Instagram. O ::before estende a área de toque
   sem engordar o visual. */
.h2-home .guest-ig::before{content:"";position:absolute;top:50%;left:50%;width:44px;height:44px;transform:translate(-50%,-50%)}
.h2-home .guest-ig:hover{background:var(--lime);border-color:var(--lime);color:var(--ink);transform:scale(1.08)}
.h2-home .guest-ig:focus-visible{outline:3px solid var(--lime);outline-offset:3px}

/* Botão com cara de link: é o mesmo desenho do <a> que ele substituiu. */
.h2-home .guest-abrir{
  font:inherit;color:inherit;background:none;border:0;padding:0 0 6px;cursor:pointer;
  display:inline-flex;align-items:center;gap:9px;min-height:32px;
  border-bottom:1px solid #ffffff8f;
  font-family:var(--body);font-size:8px;font-weight:900;letter-spacing:.1em;text-transform:uppercase;
}
.h2-home .guest-abrir:hover{color:var(--lime);border-color:var(--lime)}
.h2-home .guest-abrir:focus-visible{outline:3px solid var(--lime);outline-offset:4px}

/* O popup é movido pro <body> pelo JS e recebe a classe .h2-home junto: os
   tokens do tema são escopados em .h2-home, não em :root. Sem isso var(--lime)
   sai vazio e o texto perde a cor — já aconteceu no modal de edições. */
.cv-modal{position:fixed;inset:0;z-index:9999;display:none;place-items:center;padding:24px}
.cv-modal.is-open{display:grid}
.cv-modal__bg{position:absolute;inset:0;background:#04050498;backdrop-filter:blur(6px)}
/* v0.30.0 — o cartão virou coluna flex: o miolo rola e o pé fica grudado no
   fim. Antes o cartão inteiro rolava, e no celular a ação principal ("Ver na
   programação") nascia 244px abaixo da dobra — medido. */
.cv-modal__card{
  position:relative;display:flex;flex-direction:column;
  width:min(720px,100%);max-height:88vh;overflow:hidden;
  background:#141614;border:1px solid #ffffff1f;border-radius:var(--r-card-lg);box-shadow:0 40px 90px #000c;
}
.cv-modal__corpo{display:flex;flex-direction:column;flex:1;min-height:0}
.cv-modal__rola{flex:1;min-height:0;overflow:auto}
.cv-modal__x{
  position:absolute;top:14px;right:14px;z-index:3;width:44px;height:44px;border-radius:50%;
  display:grid;place-items:center;font-size:22px;line-height:1;color:#fff;cursor:pointer;
  background:#0b0c0bad;border:1px solid #ffffff40;backdrop-filter:blur(8px);
}
.cv-modal__x:hover{background:var(--lime);color:var(--ink);border-color:var(--lime)}
.cv-modal__x:focus-visible{outline:3px solid var(--lime);outline-offset:3px}
/* v0.30.0 — a capa de 210px saiu. O recorte era cego (`center 22%`) e em foto
   fora do enquadramento previsto ele pegava queixo e parede em vez do rosto.
   No lugar entra um retrato pequeno, onde um recorte errado custa pouco. */
/* O `padding-right` reserva a área do botão de fechar. Na capa antiga o nome
   morava no rodapé de uma faixa de 210px e ficava longe do X; com a cabeça
   compacta ele subiu para a mesma linha — e "VYNI TAKAHASHI" já encostava no X
   a 390px (medido: nome termina em 309, X começa em 306). */
.cv-modal__cab{display:flex;align-items:center;gap:18px;padding:26px 78px 0 26px}
.cv-retrato{
  flex:none;display:block;width:88px;height:88px;border-radius:16px;overflow:hidden;
  object-fit:cover;object-position:center 30%;   /* rosto costuma morar no terço de cima */
  border:1px solid #ffffff24;background:#1c1f1c;
}
.cv-retrato--vazio{display:grid;place-items:center;background:linear-gradient(150deg,#243014,#12160e);
  font-family:var(--display);font-size:30px;font-weight:900;color:#ffffff3d}
.cv-modal__id{min-width:0}
.cv-eyebrow{display:block;color:var(--bright);font-family:var(--body);font-size:8px;font-weight:900;letter-spacing:.14em;text-transform:uppercase}
.cv-modal__id h3{margin:7px 0 8px;font-size:34px;line-height:.95;letter-spacing:-.04em;text-transform:uppercase;color:#fff}
/* A função ("Ator e dublador") só existia enterrada no meio da bio. */
.cv-funcao{display:block;margin-bottom:9px;color:#ffffff9e;font-family:var(--body);font-size:12.5px}
.cv-handle{display:inline-flex;align-items:center;gap:7px;min-height:32px;color:#ffffffcc;font-family:var(--body);font-size:12px;font-weight:700;text-decoration:none}
.cv-handle:hover{color:var(--lime)}
.cv-bio{margin:20px 26px 0;color:#ffffffcf;font-size:14px;line-height:1.72;max-width:62ch}
.cv-pers{margin:26px 26px 26px}
.cv-lbl{display:block;margin-bottom:14px;color:var(--bright);font-family:var(--body);font-size:8px;font-weight:900;letter-spacing:.14em;text-transform:uppercase}
/* auto-fit e não repeat(4): com 3 personagens o 4º track ficava vazio e a
   fileira nascia torta. Assim 3 viram 3 quadros maiores, 4 viram 4. */
.cv-pers__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px}
/* `min-width:0` porque item de grid não encolhe abaixo do próprio min-content
   por padrão: uma obra de nome comprido esticava o track e empurrava a fileira
   para fora do cartão. */
.pers{margin:0;min-width:0}
/* 3:4 e não 1:1 — retrato de personagem é vertical, e o quadrado corta testa e
   queixo justo de quem se quer reconhecer. */
.pers__art{display:block;width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:12px;border:1px solid #ffffff1a}
.pers__art--vazia{display:grid;place-items:center;background:linear-gradient(150deg,#243014,#12160e);
  font-family:var(--display);font-size:34px;font-weight:900;color:#ffffff26}
.pers figcaption{display:block;margin-top:10px}
.pers b{display:block;color:#fff;font-family:var(--body);font-size:13.5px;font-weight:800;line-height:1.25}
/* Duas linhas e reticências. Sem limite, uma obra longa deixa os cards com
   alturas diferentes; e no limite exato da caixa o texto termina no meio da
   palavra em vez de quebrar. */
.pers small{
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  margin-top:4px;color:#ffffff96;font-family:var(--body);font-size:11.5px;line-height:1.45;
}
.cv-modal__pe{
  flex:none;display:flex;flex-wrap:wrap;gap:12px;align-items:center;
  padding:16px 26px;border-top:1px solid #ffffff14;background:#141614;
}
/* Sem pílula: o Instagram é o secundário aqui — a ação principal do pé é a
   programação. O min-height segura os 44px de alvo que o padding dava. */
.cv-ig-btn{
  display:inline-flex;align-items:center;gap:9px;min-height:44px;padding:0 2px;
  color:#ffffffc4;text-decoration:none;background:none;border:0;
  font-family:var(--body);font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
}
.cv-ig-btn:hover{color:var(--lime)}
.cv-ig-btn:focus-visible{outline:3px solid var(--lime);outline-offset:4px;border-radius:4px}
@media(max-width:620px){
  .cv-modal{padding:0}
  .cv-modal__card{width:100%;max-height:100vh;border-radius:0;border:0}
  .cv-modal__cab{padding:20px 70px 0 20px;gap:14px}
  .cv-retrato{width:68px;height:68px;border-radius:14px}
  .cv-modal__id h3{font-size:26px}
  .cv-bio,.cv-pers{margin-left:20px;margin-right:20px}
  .cv-modal__pe{padding:14px 20px}
  .cv-pers__grid{grid-template-columns:repeat(2,1fr);gap:14px}
  .cv-modal__pe .btn,.cv-ig-btn{flex:1 1 100%;justify-content:center}
}
@media(prefers-reduced-motion:reduce){
  .h2-home .guest-ig{transition:none}
}

/* ══════════════════════════════════════════════════════════
   LISTA DO ACERVO (v0.27.7)
   ══════════════════════════════════════════════════════════
   Reaproveita a `tournament-row` das inscrições em vez de criar um segundo
   desenho de linha. Mas aquela nasceu em banda CLARA, e a seção de edições é
   ESCURA — sem virar as bordas e o texto secundário, a lista sumia. */
.h2-home .acervo-lista{margin-top:34px}
.h2-home .acervo-lista__head{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 18px;margin-bottom:6px}
.h2-home .acervo-lista__head p{margin:0;color:var(--on-band-soft,var(--muted));font-size:11px}
.h2-home .acervo-row{min-height:104px}
.h2-home .h2-section[data-band="escuro"] .tournament-list,
.h2-home .h2-section[data-band="contraste"] .tournament-list{border-top-color:#ffffff14}
.h2-home .h2-section[data-band="escuro"] .acervo-row,
.h2-home .h2-section[data-band="contraste"] .acervo-row{border-bottom-color:#ffffff14}
.h2-home .h2-section[data-band="escuro"] .acervo-row .tournament-body h4,
.h2-home .h2-section[data-band="contraste"] .acervo-row .tournament-body h4{color:#fff}
.h2-home .h2-section[data-band="escuro"] .acervo-row .tournament-body p,
.h2-home .h2-section[data-band="contraste"] .acervo-row .tournament-body p{color:#ffffff85}
.h2-home .h2-section[data-band="escuro"] .acervo-row .tournament-body small,
.h2-home .h2-section[data-band="contraste"] .acervo-row .tournament-body small{color:var(--lime)}
/* Botão discreto: a ação principal da seção é a faixa de acervo; cada linha é
   um convite secundário e não pode competir com ela em peso.

   O seletor precisa do `.acervo-row ... > a` e NÃO basta `.btn--ghost`: a
   regra herdada das inscrições é `.h2-home .tournament-cta > a`, que tem
   especificidade (0,2,1) — o seletor de elemento `a` desempata contra os
   (0,2,0) de uma classe só. Medido: com `.btn--ghost` sozinho, borda e texto
   vinham `--ink`, preto sobre a banda escura. */
.h2-home .acervo-row .tournament-cta > a{
  border-color:var(--on-band-soft,#12171240);color:var(--on-band,var(--ink));background:none;
}
.h2-home .acervo-row .tournament-cta > a:hover{border-color:var(--lime);color:var(--lime);background:none}
.h2-home .acervo-row .tournament-cta > a:focus-visible{outline:3px solid var(--lime);outline-offset:2px}
@media(max-width:640px){
  /* Em coluna estreita a terceira coluna espremeria o botão; ele desce e
     ocupa a linha toda, mantendo os 44px de alvo. */
  .h2-home .acervo-row{grid-template-columns:56px 1fr;gap:13px;min-height:0;padding:18px 0}
  .h2-home .acervo-row .tournament-thumb{width:56px;height:56px}
  .h2-home .acervo-row .tournament-cta{grid-column:1/3}
  .h2-home .acervo-row .tournament-cta .btn{width:100%;justify-content:center;min-height:44px}
}

/* ══════════════════════════════════════════════════════════
   CHAMADA DE STAFF (v0.27.9)
   ══════════════════════════════════════════════════════════
   Só o crachá e o selo de vagas: a coluna de texto reaproveita
   `press-copy`/`press-benefits` da seção de Imprensa. */
.h2-home .staff-badge{
  position:relative;width:min(100%,330px);margin-inline:auto;padding:0 0 22px;
  border-radius:20px;background:linear-gradient(160deg,#1b1e1a,#0e100e);
  border:1px solid #ffffff1f;box-shadow:0 34px 80px #000a;overflow:hidden;
}
.h2-home .staff-badge__fita{
  height:46px;display:grid;place-items:center;background:var(--lime);color:var(--ink);
  font-family:var(--body);font-size:9px;font-weight:900;letter-spacing:.22em;text-transform:uppercase;
}
.h2-home .staff-badge__foto{
  width:104px;height:104px;margin:22px auto 0;border-radius:50%;display:grid;place-items:center;
  background:#ffffff0f;border:2px solid var(--lime);font-family:var(--display);font-size:34px;color:#ffffff5c;
}
.h2-home .staff-badge__nome{
  margin:16px 0 3px;text-align:center;font-family:var(--display);font-size:26px;
  letter-spacing:-.02em;text-transform:uppercase;color:#fff;
}
.h2-home .staff-badge__papel{
  display:block;text-align:center;color:var(--lime);font-family:var(--body);
  font-size:8px;font-weight:900;letter-spacing:.16em;text-transform:uppercase;
}
.h2-home .staff-badge__grade{
  display:grid;grid-template-columns:1fr 1fr;gap:1px;margin:20px 20px 0;
  background:#ffffff14;border:1px solid #ffffff14;border-radius:12px;overflow:hidden;
}
.h2-home .staff-badge__grade div{padding:11px 12px;background:#12140f}
.h2-home .staff-badge__grade small{
  /* .52 e nao .44: medido, o alfa antigo dava 4,38:1 contra o fundo proprio
     do cracha (#12140f) — reprovava AA por pouco. .52 sobe pra 5,6:1. */
  display:block;color:#ffffff85;font-family:var(--body);font-size:7px;
  font-weight:900;letter-spacing:.13em;text-transform:uppercase;
}
.h2-home .staff-badge__grade b{display:block;margin-top:4px;color:#fff;font-family:var(--body);font-size:12px}

/* Verde-marca como BASE e lime só na banda escura: lime sobre fundo claro
   mede 1,59:1 — o mesmo caso do título da seção de Redes. Mesma receita já
   usada no `.kicker`. */
.h2-home .staff-vagas{
  display:inline-flex;align-items:center;gap:9px;margin-top:16px;padding:8px 14px;
  border-radius:999px;background:#a6df0014;border:1px solid #a6df0040;color:var(--brand-green);
  font-family:var(--body);font-size:10px;font-weight:800;letter-spacing:.05em;
}
.h2-home .staff-vagas i{width:7px;height:7px;border-radius:50%;background:currentColor;flex:none}
.h2-home .h2-section[data-band="escuro"] .staff-vagas,
.h2-home .h2-section[data-band="contraste"] .staff-vagas{color:var(--lime)}
@media(max-width:900px){.h2-home .staff-badge{margin-top:8px}}

/* ══════════════════════════════════════════════════════════
   DUELO DE COSPLAY — 3 modos (v0.28.0)
   ══════════════════════════════════════════════════════════ */

/* ── PLACAR (padrão): o duelo com barra proporcional ── */
.h2-home .placar{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:32px}
.h2-home .placar__card{
  position:relative;aspect-ratio:4/5;overflow:hidden;border-radius:var(--r-card-lg);
  border:1px solid #ffffff26;text-decoration:none;color:inherit;transition:border-color .3s,transform .35s;
}
.h2-home .placar__card:hover{border-color:var(--lime);transform:translateY(-6px)}
.h2-home .placar__card:focus-visible{outline:3px solid var(--lime);outline-offset:3px}
.h2-home .placar__card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.h2-home .placar__card::after{content:"";position:absolute;inset:auto 0 0;height:60%;background:linear-gradient(#0000,#060806f2)}
.h2-home .placar__txt{position:absolute;inset:auto 18px 18px;z-index:1}
.h2-home .placar__nome{margin:0;font-family:var(--display);font-size:21px;line-height:1.05;text-transform:uppercase;color:#fff}
.h2-home .placar__pers{display:block;margin-top:3px;color:var(--lime);font-family:var(--body);font-size:8px;font-weight:900;letter-spacing:.12em;text-transform:uppercase}
.h2-home .placar__barra{grid-column:1/3;margin-top:4px}
.h2-home .placar__trilho{display:flex;height:38px;border-radius:var(--r-pill);overflow:hidden;border:1px solid #ffffff1f;background:#ffffff0a}
.h2-home .placar__parte{
  display:grid;place-items:center;font-family:var(--body);font-size:11px;font-weight:900;letter-spacing:.04em;
  transition:flex-basis .5s cubic-bezier(.22,1,.36,1);
}
.h2-home .placar__parte--a{background:var(--lime);color:var(--ink)}
.h2-home .placar__parte--b{background:#2a2f28;color:#fff}
.h2-home .placar__legenda{display:flex;justify-content:space-between;margin:9px 2px 0;color:var(--on-band-soft,var(--muted));font-size:10.5px}
.h2-home .placar__votar{display:block;margin:22px auto 0;width:max-content}
@media(max-width:640px){
  .h2-home .placar{gap:10px}
  .h2-home .placar__card{aspect-ratio:3/4}
  .h2-home .placar__nome{font-size:16px}
}

/* ── PÓDIO: os três primeiros em degraus ── */
.h2-home .podio{display:grid;grid-template-columns:1fr 1.15fr 1fr;align-items:end;gap:14px;margin-top:38px}
/* O 1º vai pra coluna do meio (a mais larga) e os degraus formam o pódio.
   SÓ no desktop: no celular a ordem do DOM já é a certa (1º, 2º, 3º), e é
   ela que o leitor de tela e a tabulação seguem nos dois tamanhos. */
@media(min-width:641px){
  .h2-home .podio__lugar--2{order:1}
  .h2-home .podio__lugar--1{order:2}
  .h2-home .podio__lugar--3{order:3}
}
.h2-home .podio__lugar{text-align:center}
.h2-home .podio__foto{width:100%;aspect-ratio:1;object-fit:cover;border-radius:50%;border:2px solid #ffffff2e;margin-bottom:14px}
.h2-home .podio__lugar--1 .podio__foto{border-color:var(--lime);border-width:3px}
.h2-home .podio__nome{margin:0 0 3px;font-family:var(--display);font-size:19px;line-height:1.05;text-transform:uppercase;color:#fff}
.h2-home .podio__pers{display:block;color:var(--on-band-soft,var(--muted));font-family:var(--body);font-size:10px}
.h2-home .podio__degrau{
  margin-top:14px;display:grid;place-items:center;gap:2px;border-radius:12px 12px 0 0;
  background:linear-gradient(#1a1d19,#101210);border:1px solid #ffffff14;border-bottom:0;
}
.h2-home .podio__lugar--1 .podio__degrau{height:118px;background:linear-gradient(#2a3312,#141709);border-color:#a6df0040}
.h2-home .podio__lugar--2 .podio__degrau{height:88px}
.h2-home .podio__lugar--3 .podio__degrau{height:68px}
.h2-home .podio__pos{font-family:var(--display);font-size:30px;color:#ffffff42;line-height:1}
.h2-home .podio__lugar--1 .podio__pos{color:var(--lime)}
.h2-home .podio__score{font-family:var(--body);font-size:10px;font-weight:900;letter-spacing:.08em;color:#ffffff8f;text-transform:uppercase}
.h2-home .podio__lugar--1 .podio__score{color:#fff}
.h2-home .podio-cta{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;
  margin-top:26px;padding:18px 22px;border-radius:var(--r-card);background:#ffffff08;border:1px solid #ffffff1a;
}
.h2-home .podio-cta p{margin:0;color:var(--on-band-soft,var(--muted));font-size:12.5px}
.h2-home .podio-cta b{color:#fff}
@media(max-width:640px){
  .h2-home .podio{grid-template-columns:1fr;gap:18px;align-items:stretch}
  /* Mantém a PROPORÇÃO entre os degraus: iguais, o pódio deixaria de ser
     pódio e viraria três cards empilhados. */
  .h2-home .podio__lugar--1 .podio__degrau{height:76px}
  .h2-home .podio__lugar--2 .podio__degrau{height:60px}
  .h2-home .podio__lugar--3 .podio__degrau{height:48px}
  .h2-home .podio__foto{width:92px;margin-inline:auto}
  .h2-home .podio-cta{flex-direction:column;align-items:stretch;text-align:center}
  .h2-home .podio-cta .btn{width:100%;justify-content:center}
}

/* ── ARENA: costura diagonal, largura total do conteúdo ── */
.h2-home .arena{position:relative;display:flex;min-height:520px;overflow:hidden;isolation:isolate}
.h2-home .arena__lado{
  position:relative;flex:1 1 50%;overflow:hidden;text-decoration:none;color:inherit;
  transition:flex-basis .45s cubic-bezier(.22,1,.36,1);
}
.h2-home .arena__lado:first-child{clip-path:polygon(0 0,100% 0,calc(100% - 90px) 100%,0 100%)}
.h2-home .arena__lado:last-child{clip-path:polygon(90px 0,100% 0,100% 100%,0 100%);margin-left:-90px}
.h2-home .arena:hover .arena__lado{flex-basis:42%}
.h2-home .arena__lado:hover{flex-basis:58%}
.h2-home .arena__lado img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:grayscale(.35) brightness(.85);transition:filter .45s,transform .6s;
}
.h2-home .arena__lado:hover img{filter:none;transform:scale(1.04)}
.h2-home .arena__lado::after{content:"";position:absolute;inset:auto 0 0;height:58%;background:linear-gradient(#0000,#050705f2)}
.h2-home .arena__txt{position:absolute;inset:auto 34px 30px;z-index:1;max-width:74%}
.h2-home .arena__nome{margin:0;font-family:var(--display);font-size:clamp(24px,2.4vw,34px);line-height:1;text-transform:uppercase;color:#fff}
.h2-home .arena__pers{display:block;margin-top:6px;color:var(--lime);font-family:var(--body);font-size:9px;font-weight:900;letter-spacing:.14em;text-transform:uppercase}
.h2-home .arena__votar{
  display:inline-flex;align-items:center;gap:8px;margin-top:16px;min-height:44px;padding:0 18px;
  border-radius:var(--r-pill);background:#0a0c0ab5;border:1px solid #ffffff5c;color:#fff;
  font-family:var(--body);font-size:9px;font-weight:900;letter-spacing:.1em;text-transform:uppercase;
  backdrop-filter:blur(8px);transition:all .25s;
}
.h2-home .arena__lado:hover .arena__votar{background:var(--lime);border-color:var(--lime);color:var(--ink)}
.h2-home .arena__lado:focus-visible{outline:3px solid var(--lime);outline-offset:-6px}
.h2-home .arena__vs{
  position:absolute;top:50%;left:50%;translate:-50% -50%;z-index:2;display:grid;place-items:center;
  width:82px;height:82px;border-radius:50%;pointer-events:none;background:#070907;
  border:2px solid var(--lime);color:var(--lime);font-family:var(--display);font-size:26px;letter-spacing:-.03em;
}
@media(max-width:760px){
  /* A costura diagonal só funciona lado a lado. Em coluna vira empilhado,
     com a mesma linha lime separando na horizontal. */
  .h2-home .arena{flex-direction:column;min-height:0}
  .h2-home .arena__lado{flex-basis:auto!important;height:280px;clip-path:none!important;margin:0!important}
  .h2-home .arena__lado:first-child{border-bottom:2px solid var(--lime)}
  .h2-home .arena__vs{width:58px;height:58px;font-size:19px}
}
@media(prefers-reduced-motion:reduce){
  .h2-home .arena__lado,.h2-home .arena__lado img,.h2-home .placar__parte{transition:none}
}

/* ══════════════════════════════════════════════════════════
   DÚVIDAS (FAQ) — v0.29.0
   Prefixo próprio (`duvidas-`) e NÃO `faq-`: o hero-theme-two carrega o
   main.css do tema anterior, que já define `.faq-item` como card com fundo e
   borda e `.faq-chips` centralizado. Classe repetida SOMA regra em vez de
   substituir — foi o que colou as bordas na primeira tentativa.
   Cards em duas colunas, sem filtro de categoria (decisão do usuário: o menu
   seletor saiu). Nenhuma caixa nasce aberta: numa grade a linha inteira cresce
   junto com a caixa mais alta, então uma aberta deixaria ~60px de vão ao lado.
   ══════════════════════════════════════════════════════════ */
.h2-home .duvidas-cards{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:start;margin-top:30px}
.h2-home .duvidas-item{
  padding:18px 20px;border-radius:var(--r-card);
  background:#ffffff08;border:1px solid var(--band-line,#1217121f);transition:border-color .25s;
}
.h2-home .duvidas-item:hover{border-color:var(--lime)}
/* `min-height:44px` porque o summary É o botão que abre a resposta (WCAG 2.5.5);
   sem ele a altura vem do círculo de 30px e o alvo fica menor que o dedo. */
.h2-home .duvidas-item summary{
  display:flex;align-items:center;gap:12px;cursor:pointer;list-style:none;min-height:44px;
  font-family:var(--display);font-size:16px;line-height:1.25;color:var(--on-band,var(--ink));
}
.h2-home .duvidas-item summary::-webkit-details-marker{display:none}
.h2-home .duvidas-item summary::after{
  content:"+";margin-left:auto;flex:none;display:grid;place-items:center;width:30px;height:30px;
  border-radius:50%;border:1px solid var(--band-line,#1217121f);
  font-family:var(--body);font-size:17px;line-height:1;transition:background .25s,color .25s,border-color .25s;
}
.h2-home .duvidas-item[open] summary::after{content:"−";background:var(--lime);border-color:var(--lime);color:var(--ink)}
.h2-home .duvidas-item summary:hover::after{border-color:var(--lime)}
.h2-home .duvidas-item summary:focus-visible{outline:3px solid var(--lime);outline-offset:2px}
.h2-home .duvidas-item p{margin:14px 0 0;color:var(--on-band-soft,var(--muted));font-size:13px;line-height:1.75;max-width:70ch}
@media(max-width:640px){
  .h2-home .duvidas-cards{grid-template-columns:1fr}
}

/* ══════════════════════════════════════════════════════════
   FALE CONOSCO — v0.29.0
   Mesmo motivo do prefixo: o main.css antigo é dono de `.contato-form`,
   `.contato-container` e `.info-item`. O `.form-group` continua sendo o do
   tema (inputs já estilizados nas duas bandas) — esse a gente REUSA de
   propósito, não é colisão.
   ══════════════════════════════════════════════════════════ */
.h2-home .fale-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:44px;margin-top:34px;align-items:start}
.h2-home .fale-form .form-group{margin-bottom:16px}
.h2-home .fale-linha{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.h2-home .fale-canais{display:flex;flex-direction:column;gap:10px}
.h2-home .fale-canal{
  display:flex;align-items:center;gap:14px;padding:16px 18px;border-radius:var(--r-card);
  text-decoration:none;color:inherit;background:#ffffff08;border:1px solid var(--band-line,#1217121f);
  transition:border-color .25s,transform .25s;min-height:44px;
}
/* Só o <a> levanta no hover — o horário de atendimento é um <span> e não leva
   a lugar nenhum; animar ele prometeria um clique que não existe. */
.h2-home a.fale-canal:hover{border-color:var(--lime);transform:translateY(-2px)}
.h2-home .fale-canal:focus-visible{outline:3px solid var(--lime);outline-offset:3px}
.h2-home .fale-canal__ico{display:grid;place-items:center;width:40px;height:40px;flex:none;border-radius:12px;background:var(--lime);color:var(--ink);font-size:19px}
.h2-home .fale-canal b{display:block;font-family:var(--body);font-size:13px;color:var(--on-band,var(--ink))}
.h2-home .fale-canal small{display:block;margin-top:2px;color:var(--on-band-soft,var(--muted));font-size:11.5px}
.h2-home .fale-aviso{margin:12px 0 0;padding:12px 14px;border-radius:10px;font-size:13px}
.h2-home .fale-aviso[hidden]{display:none}
.h2-home .fale-aviso--ok{background:rgba(166,223,0,.14);color:var(--on-band,var(--ink))}
/* O texto do erro herda a cor da banda em vez de vir vermelho: vermelho claro
   sobre banda clara dá ~2,3:1. Quem carrega o "deu errado" é o fundo + a
   borda, que funcionam nas duas bandas. */
.h2-home .fale-aviso--erro{background:rgba(255,59,59,.12);border:1px solid rgba(255,59,59,.45);color:var(--on-band,var(--ink))}
@media(max-width:860px){
  .h2-home .fale-grid{grid-template-columns:1fr;gap:30px}
  .h2-home .fale-linha{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){
  .h2-home a.fale-canal:hover{transform:none}
}