/* ============================================================================
   A PELE DA MARCA DE 2026 — carregada DEPOIS do Tailwind e do <style> do casco.

   Por que uma folha à mão, e não classes do Tailwind: o site é compilado pelo
   Vite, e o CSS publicado só tem as classes que as telas já usavam. Classe
   nova escrita numa view não existiria no arquivo servido — a tela abriria
   sem desenho — e recompilar aqui exigiria instalar o projeto inteiro. Esta
   folha não depende de build: basta o navegador.

   Prefixo `bx-` no que é novo. O punhado de regras que sobrescreve utilitário
   do Tailwind está no fim, marcado, e existe só para vestir o que já estava
   lá (o fundo do rodapé, o degradê do topo) sem reescrever a view inteira.

   Fonte: `bilhetix/identidade-visual` (arquivos/marca-2026).
============================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');

:root{
  --bx-azul:#2563FF;
  --bx-azul-fundo:#1D4ED8;
  --bx-roxo:#7C3AED;
  --bx-magenta:#FF2D8F;
  --bx-coral:#FF5A4F;
  --bx-coral-fundo:#F2483D;
  --bx-escuro:#080F24;
  --bx-tinta:#0B1220;
  --bx-texto:#3F4757;
  --bx-suave:#79818F;
  --bx-linha:#E8EAEF;
  --bx-papel:#F7F8FA;
  --bx-cinza:#E7EBF1;
}

/* A tipografia da marca em todo o site. */
body{font-family:'Poppins',ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;}

/* ── O TOPO ─────────────────────────────────────────────────────────────── */

.bx-criar-conta{
  background:var(--bx-coral);
  color:var(--bx-escuro);
  font-weight:600;
}
.bx-criar-conta:hover{background:var(--bx-coral-fundo);color:var(--bx-escuro);}

/* ── O HERO ─────────────────────────────────────────────────────────────── */

.bx-hero{
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(620px 420px at 88% -10%, rgba(37,99,255,.45), transparent 62%),
    radial-gradient(560px 420px at 96% 112%, rgba(255,45,143,.38), transparent 60%),
    var(--bx-escuro);
}
.bx-hero h1{letter-spacing:-.03em;font-weight:700;font-size:34px;line-height:1.06;}
/* No celular, uma coluna só: empilhar é o padrão, e virar duas colunas é a
   exceção do computador. A primeira versão usava `flex` direto, e no telefone
   a linha não quebrava — a página inteira ficava mais larga que a tela. */
.bx-hero-linha{display:flex;flex-direction:column;gap:26px;}
@media (min-width:1024px){.bx-hero-linha{flex-direction:row;align-items:center;gap:48px;}}
.bx-hero-texto{text-align:center;min-width:0;}
@media (min-width:640px){.bx-hero h1{font-size:46px;}}
@media (min-width:1024px){
  .bx-hero h1{font-size:56px;}
  .bx-hero-texto{text-align:left;}
}
.bx-hero .bx-aqui{color:var(--bx-coral);}
.bx-hero-apoio{color:rgba(255,255,255,.72);}

/* OS DESTAQUES EM PILHA, na metade direita do hero (aprovado em 21/09/2026):
   cartas 4:3 sobrepostas; a da frente reta, as de trás inclinadas e mais
   escuras. `data-pos` diz a posição (0 = frente). No celular vão abaixo do
   texto, menores. */
.bx-destaques{position:relative;flex:none;width:100%;max-width:520px;height:280px;margin:0 auto;touch-action:pan-y;user-select:none;-webkit-user-select:none;cursor:grab}
.bx-destaques.bx-arrastando{cursor:grabbing}
/* enquanto arrasta, a carta da frente acompanha o dedo e nenhuma anima */
.bx-arrastando .bx-destaque{transition:none}
.bx-arrastando .bx-destaque[data-pos="0"]{transform:translateX(var(--bx-desloca,0)) rotate(calc(var(--bx-desloca,0) / 40 * 1deg))}
.bx-destaque img{pointer-events:none;-webkit-user-drag:none}
@media (min-width:1024px){.bx-destaques{width:520px;height:340px;margin:0}}
.bx-destaque{position:absolute;left:50%;top:50%;width:270px;height:202px;margin:-101px 0 0 -135px;border-radius:20px;overflow:hidden;background:#111;color:#fff;
  border:1px solid rgba(255,255,255,.14);box-shadow:0 26px 60px -24px rgba(0,0,0,.85);
  transition:transform .7s cubic-bezier(.2,.8,.2,1),opacity .7s,filter .7s}
@media (min-width:1024px){.bx-destaque{width:360px;height:270px;margin:-135px 0 0 -180px}}
.bx-destaque img{width:100%;height:100%;object-fit:cover;display:block}
.bx-destaque-veu{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;padding:16px;
  background:linear-gradient(to bottom,rgba(0,0,0,0) 0%,rgba(0,0,0,.05) 25%,rgba(0,0,0,.6) 60%,rgba(0,0,0,.92) 100%)}
.bx-destaque-cat{align-self:flex-start;background:var(--bx-azul);color:#fff;font-size:9px;font-weight:700;letter-spacing:.7px;text-transform:uppercase;padding:3px 10px;border-radius:100px;margin-bottom:7px}
.bx-destaque strong{font-size:18px;font-weight:800;line-height:1.25;text-shadow:0 1px 8px rgba(0,0,0,.6)}
.bx-destaque small{display:flex;align-items:center;gap:5px;margin-top:4px;font-size:12px;color:rgba(255,255,255,.85)}
.bx-destaque[data-pos="0"]{transform:none;z-index:3;filter:none;opacity:1}
.bx-destaque[data-pos="1"]{transform:translate(-22px,-26px) rotate(-6deg) scale(.92);z-index:2;filter:brightness(.6);opacity:.95}
.bx-destaque[data-pos="2"]{transform:translate(24px,-24px) rotate(5deg) scale(.92);z-index:1;filter:brightness(.5);opacity:.9}
.bx-destaque[data-pos="3"],.bx-destaque[data-pos="4"]{transform:translate(0,-30px) scale(.86);z-index:0;filter:brightness(.4);opacity:0}
@media (min-width:1024px){
  .bx-destaque[data-pos="1"]{transform:translate(-64px,-22px) rotate(-8deg) scale(.9)}
  .bx-destaque[data-pos="2"]{transform:translate(66px,-18px) rotate(7deg) scale(.9)}
}
.bx-destaque:focus-visible{outline:3px solid #fff;outline-offset:3px}
@media (prefers-reduced-motion:reduce){.bx-destaque{transition:none}}
.bx-destaque-pontos{position:absolute;left:50%;bottom:-4px;transform:translateX(-50%);display:flex;gap:6px}
.bx-destaque-pontos b{width:6px;height:6px;border-radius:3px;background:rgba(255,255,255,.35);cursor:pointer;transition:all .3s}
.bx-destaque-pontos b.bx-on{width:14px;background:var(--bx-azul)}
[dir="rtl"] .bx-destaque-veu{text-align:right}

/* O seletor de segmento (Entretenimento · Profissional). */
.bx-segmentos{
  display:inline-flex;gap:4px;padding:4px;border-radius:999px;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);
}
.bx-seg{
  padding:9px 20px;border-radius:999px;font-size:14.5px;font-weight:500;
  color:rgba(255,255,255,.82);text-decoration:none;white-space:nowrap;
}
.bx-seg:hover{color:#fff;}
.bx-seg.bx-ativo{background:#fff;color:var(--bx-escuro);font-weight:600;}

/* ── O CARTÃO DE EVENTO ─────────────────────────────────────────────────── */

.bx-card{
  display:flex;flex-direction:column;background:#fff;border:1px solid var(--bx-linha);
  border-radius:18px;overflow:hidden;text-decoration:none;
  box-shadow:0 1px 2px rgba(11,18,32,.04);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.bx-card:hover{
  transform:translateY(-3px);
  border-color:#DDE1E8;
  box-shadow:0 18px 40px -22px rgba(11,18,32,.45);
}
.bx-card-capa{position:relative;aspect-ratio:1;background:var(--bx-cinza);overflow:hidden;}
.bx-card-capa img{width:100%;height:100%;object-fit:cover;transition:transform .35s ease;}
.bx-card:hover .bx-card-capa img{transform:scale(1.04);}
.bx-card-vazia{width:100%;height:100%;display:flex;align-items:center;justify-content:center;color:#C3C8D2;}

/* A data é o dado que decide o clique: sai da linha de texto e vira selo. */
.bx-data{
  position:absolute;left:10px;top:10px;display:flex;flex-direction:column;align-items:center;
  min-width:50px;padding:6px 9px;border-radius:12px;background:rgba(8,15,36,.86);color:#fff;
  backdrop-filter:blur(4px);
}
.bx-data b{font-size:18px;font-weight:700;line-height:1;}
.bx-data span{font-size:10px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;}

.bx-cat{
  position:absolute;left:10px;bottom:10px;padding:5px 11px;border-radius:999px;
  background:var(--bx-azul);color:#fff;font-size:10.5px;font-weight:700;
  letter-spacing:.07em;text-transform:uppercase;
}
.bx-online{
  position:absolute;right:10px;top:10px;padding:5px 11px;border-radius:999px;
  background:var(--bx-roxo);color:#fff;font-size:10.5px;font-weight:700;letter-spacing:.06em;
}

.bx-card-corpo{display:flex;flex-direction:column;gap:7px;padding:14px 14px 16px;}
.bx-card-nome{
  font-size:15.5px;font-weight:600;color:var(--bx-tinta);line-height:1.28;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.bx-card-linha{display:flex;align-items:center;gap:6px;font-size:13.5px;color:var(--bx-texto);}
.bx-card-linha svg{flex:none;color:var(--bx-suave);}
.bx-card-linha span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.bx-card-quando{font-size:13px;color:var(--bx-suave);}
.bx-card-pe{margin-top:4px;display:flex;align-items:center;gap:8px;}
.bx-preco-rotulo{font-size:13px;color:var(--bx-texto);}
.bx-preco{font-size:16px;font-weight:700;color:var(--bx-tinta);}
.bx-gratuito{font-size:14px;font-weight:700;color:#0E8A4F;}
/* Esgotado: ocupa o lugar do preço, no mesmo formato de selo do "CONSULTE",
   mas em coral — é informação que muda a decisão, não um rótulo neutro. */
.bx-esgotado{
  display:inline-flex;align-items:center;height:26px;padding:0 11px;border-radius:999px;
  background:rgba(255,90,79,.14);color:#C3382E;font-size:12px;font-weight:700;letter-spacing:.05em;
}
.bx-consulte{
  display:inline-flex;align-items:center;height:26px;padding:0 11px;border-radius:999px;
  background:var(--bx-cinza);color:var(--bx-suave);font-size:12px;font-weight:700;letter-spacing:.04em;
}

@media (max-width:640px){
  .bx-card{border-radius:14px;}
  .bx-card-corpo{padding:12px 12px 14px;gap:6px;}
  .bx-card-nome{font-size:14px;}
  .bx-data{min-width:44px;padding:5px 7px;}
  .bx-data b{font-size:15px;}
}

/* ── AS ABAS DE CATEGORIA ───────────────────────────────────────────────── */

.bx-aba{
  flex:none;padding:15px 4px;margin-right:24px;border-bottom:3px solid transparent;
  font-size:15px;font-weight:500;color:var(--bx-texto);text-decoration:none;white-space:nowrap;
}
.bx-aba:hover{color:var(--bx-tinta);}
.bx-aba.bx-ativo{border-bottom-color:var(--bx-azul);color:var(--bx-tinta);font-weight:600;}

/* "Perto de mim" centralizado na faixa: a caixa ocupa a altura inteira da fila
   e centraliza o botão nela. Com `align-self:center` ele se alinhava pela
   altura do texto das abas, e sobrava a espessura do traço da aba ativa
   embaixo — ficava uns pixels acima do meio. */
.bx-perto{align-self:stretch;display:flex;align-items:center;}

/* A faixa de abas gruda ABAIXO do cabeçalho, não no topo da janela: o
   cabeçalho é `fixed` e ocupa os primeiros 64 px (o `pt-16` do <main> existe
   por isso). Com `top:0` a faixa deslizava para debaixo dele, e o conteúdo
   aparecia sobreposto ao rolar. */
.bx-abas-fixas{position:sticky;top:64px;}

/* ── SOBRESCRITAS DO TAILWIND ───────────────────────────────────────────── */
/* Só para vestir o que já existia, sem reescrever as views inteiras.        */

footer.bg-gray-900{background:var(--bx-escuro);}
footer.bg-gray-900 .bg-gray-800{background:rgba(255,255,255,.07);}
footer.bg-gray-900 .bg-gray-800:hover{background:rgba(255,255,255,.12);}
footer.bg-gray-900 .border-gray-800{border-color:rgba(255,255,255,.1);}

/* O degradê antigo do topo (roxo) não vinha da marca: vira o azul-escuro
   com as duas luzes do símbolo. */
.hero-gradient{
  background:
    radial-gradient(620px 420px at 88% -10%, rgba(37,99,255,.45), transparent 62%),
    radial-gradient(560px 420px at 96% 112%, rgba(255,45,143,.38), transparent 60%),
    var(--bx-escuro);
}

/* ── A DICA (tooltip) ────────────────────────────────────────────────────
   Usada na escolha do benefício da meia-entrada, para mostrar a lei que
   prevê cada tipo. É CSS próprio porque o Tailwind do site é compilado: uma
   classe utilitária nova não existiria no arquivo servido.
   Abre no passar do mouse e também no foco pelo teclado. */
.bx-dica{position:relative;display:inline-flex;align-items:center;color:var(--bx-suave);cursor:help}
.bx-dica>[role="tooltip"]{
  position:absolute;right:0;bottom:calc(100% + 8px);z-index:20;width:max-content;max-width:230px;
  padding:8px 10px;border-radius:10px;background:var(--bx-escuro);color:#fff;
  font-size:12px;line-height:1.35;font-weight:500;text-align:left;
  opacity:0;visibility:hidden;transform:translateY(4px);transition:opacity .15s ease, transform .15s ease;
  box-shadow:0 10px 24px -12px rgba(8,15,36,.7);
}
.bx-dica>[role="tooltip"]::after{
  content:"";position:absolute;right:14px;top:100%;border:6px solid transparent;border-top-color:var(--bx-escuro);
}
.bx-dica:hover>[role="tooltip"],.bx-dica:focus>[role="tooltip"],.bx-dica:focus-within>[role="tooltip"]{
  opacity:1;visibility:visible;transform:translateY(0);
}
@media (prefers-reduced-motion:reduce){.bx-dica>[role="tooltip"]{transition:none}}

/* A DICA SOLTA — posicionada pelo script, em coordenadas de tela.
   Dentro de lista que rola (a escolha do benefício, com 12 categorias), a
   dica `absolute` era RECORTADA pela borda do rolamento: aparecia cortada
   ao meio, por cima do próprio item. `fixed` sai do recorte; quem calcula
   onde ela cabe — acima ou abaixo do ícone — é o script do rodapé.
   Sem a seta: balão solto, apontando para lugar nenhum, mente. */
.bx-dica-solta>[role="tooltip"]{position:fixed;right:auto;bottom:auto;transform:none}
.bx-dica-solta>[role="tooltip"]::after{display:none}

/* ── MEIA SOCIAL ─────────────────────────────────────────────────────────
   Não é direito de lei: é campanha do produtor (1 kg de alimento). Vem em
   primeiro lugar na escolha e com pele própria — verde, a cor de doação —
   para não se confundir com as categorias legais, que são obrigação. */
.bx-social{border-color:#9BD8B4 !important;background:#F0FAF4}
.bx-social:hover{border-color:#6FC795 !important}
.bx-social-escolhida{border-color:#2F7D57 !important;background:#E2F5EA}

/* ── O RESUMO DO PEDIDO ──────────────────────────────────────────────────
   Três blocos (ingressos, taxas, total), com os números alinhados pela
   direita em fonte tabular — coluna de dinheiro que dança é coluna que não
   se confere. As taxas ficam à vista, com a explicação de cada uma numa
   dica; esconder atrás de "ver detalhes" o que se está pagando é o contrário
   do que este bloco existe para fazer. */
.bx-resumo-titulo{
  display:flex;align-items:center;gap:6px;margin:16px 0 6px;
  font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--bx-suave);
}
.bx-resumo-linhas{display:flex;flex-direction:column;gap:6px}
.bx-resumo-linha{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;font-size:14px}
.bx-resumo-rotulo{display:flex;align-items:center;gap:6px;flex-wrap:wrap;color:var(--bx-texto);line-height:1.35;min-width:0}
.bx-resumo-nota{display:block;width:100%;font-size:12px;color:var(--bx-suave);line-height:1.3}
.bx-resumo-valor{flex:none;font-weight:600;color:var(--bx-tinta);font-variant-numeric:tabular-nums}
.bx-resumo-soma{margin-top:2px;padding-top:6px;border-top:1px dashed var(--bx-linha);color:var(--bx-suave)}
.bx-resumo-soma .bx-resumo-rotulo,.bx-resumo-soma .bx-resumo-valor{color:var(--bx-suave);font-weight:600}
.bx-resumo-total{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin-top:14px;padding-top:12px;border-top:1px solid var(--bx-linha);
  font-size:16px;font-weight:700;color:var(--bx-tinta);font-variant-numeric:tabular-nums;
}
.bx-resumo-total-destaque{
  margin-top:14px;padding:12px 14px;border:0;border-radius:12px;
  background:var(--bx-azul);color:#fff;
}
.bx-resumo-total-destaque span:last-child{font-size:19px}

/* ── O RELÓGIO DA RESERVA ────────────────────────────────────────────────
   Mesma peça no carrinho e na página do evento, porque é o mesmo prazo.
   Neutro enquanto sobra tempo; no último minuto vira coral — alarme que
   toca o tempo inteiro ninguém escuta. */
.bx-relogio{
  display:inline-flex;align-items:center;gap:5px;flex:none;
  padding:5px 10px;border-radius:999px;background:var(--bx-papel);
  border:1px solid var(--bx-linha);color:var(--bx-texto);
  font-size:12.5px;font-weight:600;font-variant-numeric:tabular-nums;
}
.bx-relogio svg{color:var(--bx-suave)}
.bx-relogio-aperto{background:rgba(255,90,79,.12);border-color:rgba(255,90,79,.3);color:#C3382E}
.bx-relogio-aperto svg{color:currentColor}

/* ── O GRUPO DE EVENTO NO CARRINHO ───────────────────────────────────── */
.bx-grupo-topo{
  display:flex;align-items:center;gap:12px;
  padding:14px 16px;background:var(--bx-papel);border-bottom:1px solid var(--bx-linha);
}
.bx-grupo-capa{width:44px;height:44px;border-radius:10px;object-fit:cover;flex:none}
.bx-grupo-nome{
  display:block;font-size:14.5px;font-weight:600;color:var(--bx-tinta);text-decoration:none;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.bx-grupo-nome:hover{color:var(--bx-azul)}
.bx-grupo-onde{margin-top:2px;font-size:12px;color:var(--bx-suave);line-height:1.3}
.bx-grupo-item{display:flex;align-items:flex-start;gap:12px;padding:14px 16px}
.bx-grupo-item + .bx-grupo-item{border-top:1px solid var(--bx-linha)}
.bx-item-setor{font-size:14px;font-weight:600;color:var(--bx-tinta)}
/* o lugar marcado do item do carrinho — e a cobrança de quem ainda não marcou */
.bx-item-lugar{font-size:12.5px;font-weight:600;color:var(--bx-azul);margin-top:2px}
.bx-item-sem-lugar{font-size:12.5px;font-weight:600;color:#C2410C;margin-top:2px}
.bx-item-sem-lugar a{color:var(--bx-azul);font-weight:600;text-decoration:underline;margin-left:4px}
.bx-item-nota{margin-top:2px;font-size:12.5px;color:var(--bx-suave)}
.bx-grupo-aviso{padding:2px 4px;font-size:12.5px;color:var(--bx-suave);line-height:1.45}

@media (max-width:640px){
  .bx-grupo-topo{padding:12px;gap:10px}
  .bx-grupo-capa{width:38px;height:38px}
  .bx-grupo-item{padding:12px}
}

/* ── "VOCÊ JÁ TEM NO CARRINHO", na página do evento ──────────────────── */
.bx-reserva{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:11px 16px;background:var(--bx-papel);border-bottom:1px solid var(--bx-linha);
  font-size:13px;color:var(--bx-texto);text-decoration:none;
}
.bx-reserva:hover{background:#F1F3F7}
.bx-reserva-texto strong{color:var(--bx-tinta)}

/* A nota do valor à vista, sob o total do cartão. */
.bx-resumo-aviso{margin-top:12px;font-size:12px;color:var(--bx-suave);line-height:1.45}
.bx-resumo-aviso strong{color:var(--bx-texto);font-weight:600}

/* O selo do FESTIVAL: roxo, a cor que o site já usa para o cartão que não é
   um evento simples. Azul é categoria; festival não é categoria, é outra
   natureza de cartão — o clique leva a uma lista de dias. */
.bx-festival{background:var(--bx-roxo)}

/* ── O CUPOM DE DESCONTO (página do evento) ──────────────────────────────
   Discreto até ser pedido: um link com ícone; aberto, campo + botão;
   aplicado, o código em destaque e a saída. A etiqueta "Cupom X" vai no
   lote que o código liberou, em verde — é ganho, não categoria. */
.bx-cupom{margin-top:14px;padding-top:12px;border-top:1px dashed var(--bx-linha)}
.bx-cupom-abrir{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:var(--bx-azul);background:none;border:0;padding:0;cursor:pointer}
.bx-cupom-abrir:hover{text-decoration:underline}
.bx-cupom-form{display:flex;gap:8px}
.bx-cupom-campo{flex:1;min-width:0;height:40px;padding:0 12px;border:1px solid var(--bx-linha);border-radius:10px;font-size:14px;
                font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--bx-tinta);background:#fff}
.bx-cupom-campo:focus{outline:none;border-color:var(--bx-azul);box-shadow:0 0 0 3px rgba(37,99,255,.15)}
.bx-cupom-botao{flex:none;height:40px;padding:0 14px;border:0;border-radius:10px;background:var(--bx-azul);color:#fff;font-size:13px;font-weight:700;cursor:pointer}
.bx-cupom-botao:disabled{opacity:.5;cursor:default}
.bx-cupom-aplicado{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 12px;border-radius:10px;
                   background:#EAF7EF;color:#1F6E45;font-size:13px}
.bx-cupom-aplicado strong{letter-spacing:.06em}
.bx-cupom-remover{background:none;border:0;padding:0;font-size:12px;color:#1F6E45;text-decoration:underline;cursor:pointer}
.bx-cupom-erro{margin-top:8px;font-size:12.5px;color:#C3382E}
.bx-cupom-etiqueta{display:inline-flex;align-items:center;height:20px;padding:0 8px;border-radius:999px;background:#EAF7EF;color:#1F6E45;
                   font-size:11px;font-weight:700;letter-spacing:.04em}

/* ── A GALERIA AMPLIADA ─────────────────────────────────────────────────
   Miniatura quadrada que responde ao toque; palco escuro em tela cheia
   com a foto contida (nunca cortada), setas nas laterais e o contador
   embaixo. No celular as setas encolhem e vão para os cantos de baixo,
   onde o polegar alcança. */
.bx-galeria-mini{display:block;aspect-ratio:1;border:0;padding:0;border-radius:10px;overflow:hidden;background:var(--bx-cinza);cursor:zoom-in}
.bx-galeria-mini img{width:100%;height:100%;object-fit:cover;transition:transform .3s ease}
.bx-galeria-mini:hover img{transform:scale(1.05)}
.bx-galeria-mini:focus-visible{outline:3px solid var(--bx-azul);outline-offset:2px}
.bx-galeria-palco{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;
                  background:rgba(8,15,36,.94);padding:56px 72px}
.bx-galeria-figura{margin:0;max-width:100%;max-height:100%;display:flex;flex-direction:column;align-items:center;gap:10px}
.bx-galeria-grande{max-width:100%;max-height:calc(100vh - 140px);border-radius:12px;object-fit:contain;
                   box-shadow:0 30px 80px -30px rgba(0,0,0,.9);background:#000}
.bx-galeria-contador{font-size:13px;font-weight:600;color:rgba(255,255,255,.7);font-variant-numeric:tabular-nums}
.bx-galeria-fechar,.bx-galeria-seta{position:absolute;display:flex;align-items:center;justify-content:center;
                  width:48px;height:48px;border:0;border-radius:999px;background:rgba(255,255,255,.12);color:#fff;cursor:pointer;
                  transition:background .15s ease}
.bx-galeria-fechar:hover,.bx-galeria-seta:hover{background:rgba(255,255,255,.24)}
.bx-galeria-fechar:focus-visible,.bx-galeria-seta:focus-visible{outline:3px solid #fff;outline-offset:2px}
.bx-galeria-fechar{top:16px;right:16px}
.bx-galeria-seta{top:50%;transform:translateY(-50%)}
.bx-galeria-anterior{left:16px}
.bx-galeria-proxima{right:16px}
@media (max-width:640px){
  .bx-galeria-palco{padding:56px 12px 72px}
  .bx-galeria-grande{max-height:calc(100vh - 150px);border-radius:8px}
  .bx-galeria-seta{top:auto;bottom:14px;transform:none;width:44px;height:44px}
  .bx-galeria-anterior{left:14px}
  .bx-galeria-proxima{right:14px}
}
@media (prefers-reduced-motion:reduce){.bx-galeria-mini img{transition:none}}

/* ── O LINE-UP ──────────────────────────────────────────────────────────
   Lista da ordem do palco. Sem horário: numerada, o número num disco
   discreto. Com horário: a hora no lugar do número, em fonte tabular, e
   uma linha do tempo à esquerda ligando as entradas. */
.bx-lineup{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.bx-lineup-item{display:flex;align-items:center;gap:12px;padding:9px 0;border-bottom:1px solid var(--bx-linha);font-size:15px;color:var(--bx-tinta)}
.bx-lineup-item:last-child{border-bottom:0}
.bx-lineup-num{flex:none;width:28px;height:28px;border-radius:999px;display:flex;align-items:center;justify-content:center;
               background:var(--bx-papel);color:var(--bx-suave);font-size:12px;font-weight:700}
.bx-lineup-hora{flex:none;min-width:52px;font-size:13px;font-weight:700;color:var(--bx-azul);font-variant-numeric:tabular-nums;letter-spacing:.02em}
.bx-lineup-foto{flex:none;width:32px;height:32px;border-radius:999px;object-fit:cover;background:var(--bx-cinza)}
.bx-lineup-nome{font-weight:600}
.bx-lineup-com-hora{position:relative;padding-left:14px}
.bx-lineup-com-hora::before{content:"";position:absolute;left:4px;top:12px;bottom:12px;width:2px;border-radius:2px;background:linear-gradient(var(--bx-azul),var(--bx-magenta))}

/* Duas seções lado a lado no computador (Line-up e Atrações), empilhadas no
   celular. Existe porque `md:grid-cols-2` não está no Tailwind compilado. */
.bx-lado-a-lado{display:grid;grid-template-columns:1fr;gap:24px;align-items:start}
@media (min-width:768px){.bx-lado-a-lado{grid-template-columns:1fr 1fr}}

/* ── A TIRAGEM E A COTA DE MEIA ─────────────────────────────────────────
   Informação obrigatória do ponto de venda (Decreto 8.537/2015, art. 8º).
   Fica no cartão de ingressos, legível e sem competir com os preços: sem
   cor de alarme, mas com os números em destaque. */
.bx-tiragem{margin-top:16px;padding:11px 13px;border:1px solid var(--bx-linha);border-radius:12px;background:var(--bx-papel)}
.bx-tiragem-linha{display:flex;align-items:center;flex-wrap:wrap;gap:4px;font-size:12.5px;color:var(--bx-texto);line-height:1.45}
.bx-tiragem-linha strong{color:var(--bx-tinta);font-variant-numeric:tabular-nums}
.bx-tiragem-nota{margin-top:3px;font-size:12px;color:var(--bx-suave);line-height:1.4}
/* Serviços do local (seção da página do evento): duas colunas de ícone + nome. */
.bx-servicos-evento{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:10px}
.bx-servicos-evento li{display:flex;align-items:center;gap:11px;font-size:14px;font-weight:500;color:var(--bx-tinta)}
.bx-servicos-evento-icone{flex:none;display:grid;place-items:center;width:38px;height:38px;border-radius:11px;background:#EEF2FF;color:var(--bx-azul)}
/* Serviços exclusivos da área: uma faixa entre o nome da área e os lotes. */
.bx-servicos{margin:0 0 10px;padding:9px 12px;border-radius:12px;background:var(--bx-papel);border:1px solid var(--bx-linha)}
.bx-servicos-titulo{font-size:11px;font-weight:700;color:var(--bx-suave);margin-bottom:5px}
.bx-servicos ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}
.bx-servicos li{display:flex;align-items:flex-start;gap:7px;font-size:12.5px;color:var(--bx-texto);line-height:1.4}
.bx-servicos-icone{width:15px;height:15px;flex:none;margin-top:1px;color:#16A34A}
.bx-tiragem-nota strong{color:var(--bx-texto);font-variant-numeric:tabular-nums}

/* ── A TIRAGEM E A COTA DE MEIA ─────────────────────────────────────────
   Informação obrigatória do ponto de venda (Decreto 8.537/2015, art. 8º).
   Fica no cartão de ingressos, legível e sem competir com os preços. */
.bx-tiragem{margin-top:16px;padding:11px 13px;border:1px solid var(--bx-linha);border-radius:12px;background:var(--bx-papel)}
.bx-tiragem-linha{display:flex;align-items:center;flex-wrap:wrap;gap:4px;font-size:12.5px;color:var(--bx-texto);line-height:1.45}
.bx-tiragem-linha strong{color:var(--bx-tinta);font-variant-numeric:tabular-nums}
.bx-tiragem-nota{margin-top:3px;font-size:12px;color:var(--bx-suave);line-height:1.4}
.bx-tiragem-nota strong{color:var(--bx-texto);font-variant-numeric:tabular-nums}

/* ── REALIZAÇÃO (as produtoras do evento) ───────────────────────────────
   Quem organiza, com razão social e CNPJ: é a quem o cliente cobra se a
   festa não acontecer. Cartões lado a lado, discretos — informação de
   responsabilidade, não propaganda. */
.bx-produtoras{display:grid;grid-template-columns:1fr;gap:10px}
@media (min-width:640px){.bx-produtoras{grid-template-columns:repeat(2,1fr)}}
.bx-produtora{display:flex;align-items:center;gap:12px;padding:12px 14px;border:1px solid var(--bx-linha);border-radius:12px;background:var(--bx-papel)}
.bx-produtora-inicial{flex:none;width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;
                      background:var(--bx-escuro);color:#fff;font-size:15px;font-weight:700}
.bx-produtora-nome{font-size:14px;font-weight:600;color:var(--bx-tinta);line-height:1.3}
.bx-produtora-razao{font-size:12px;color:var(--bx-texto);line-height:1.35}
.bx-produtora-cnpj{font-size:11.5px;color:var(--bx-suave);font-variant-numeric:tabular-nums;margin-top:1px}

/* ── ATIVAÇÃO DA CONTA (código e senha) ─────────────────────────────────
   O campo do código é o centro da tela: grande, espaçado e em caixa alta,
   porque é copiado do e-mail e conferido a olho. */
.bx-codigo{width:100%;padding:14px 16px;border:1px solid var(--bx-linha);border-radius:12px;background:#fff;
           font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:26px;font-weight:700;
           letter-spacing:.34em;text-align:center;text-transform:uppercase;color:var(--bx-tinta)}
.bx-codigo:focus{outline:none;border-color:var(--bx-azul);box-shadow:0 0 0 3px rgba(37,99,255,.15)}
.bx-codigo::placeholder{color:#C3C8D2;letter-spacing:.34em}
.bx-passos{display:flex;align-items:center;justify-content:center;gap:22px;list-style:none;margin:0;padding:0}
.bx-passo{display:flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600;color:var(--bx-suave)}
.bx-passo-bola{width:22px;height:22px;border-radius:999px;display:flex;align-items:center;justify-content:center;
               background:var(--bx-cinza);color:var(--bx-suave);font-size:11px;font-weight:700}
.bx-passo-atual,.bx-passo-feito{color:var(--bx-tinta)}
.bx-passo-atual .bx-passo-bola,.bx-passo-feito .bx-passo-bola{background:var(--bx-azul);color:#fff}
.bx-regras{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:3px;font-size:12.5px;color:var(--bx-suave)}
.bx-regras li::before{content:"○ ";color:#C3C8D2}
.bx-regra-ok{color:#1F6E45}
.bx-regra-ok::before{content:"● ";color:#1F6E45}

/* ── A PÁGINA DA PRODUTORA ──────────────────────────────────────────────
   A faixa de identificação: a inicial num quadrado escuro (a produtora não
   tem logotipo no cadastro), o nome grande e, miúdos, razão social e CNPJ —
   que é o que diz com quem se está lidando. */
.bx-produtora-capa{display:flex;align-items:center;gap:18px;padding:22px;border:1px solid var(--bx-linha);
                   border-radius:18px;background:var(--bx-papel)}
.bx-produtora-marca{flex:none;width:66px;height:66px;border-radius:16px;display:flex;align-items:center;justify-content:center;
                    background:var(--bx-escuro);color:#fff;font-size:26px;font-weight:700}
.bx-produtora-rotulo{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--bx-suave)}
.bx-produtora-titulo{font-size:clamp(22px,3.4vw,30px);font-weight:700;color:var(--bx-tinta);line-height:1.15;letter-spacing:-.01em}
.bx-produtora-dados{margin-top:4px;font-size:13px;color:var(--bx-texto);font-variant-numeric:tabular-nums}
.bx-produtora-resumo{margin-top:6px;font-size:13px;color:var(--bx-suave)}
.bx-produtora-vazio{padding:28px;border:1px dashed var(--bx-linha);border-radius:16px;background:#fff;text-align:center}
@media (max-width:640px){
  .bx-produtora-capa{gap:14px;padding:16px}
  .bx-produtora-marca{width:52px;height:52px;border-radius:13px;font-size:21px}
}

/* O cartão da produtora na página do evento vira BOTÃO: leva ao histórico. */
.bx-produtora{transition:border-color .15s ease, background .15s ease}
a.bx-produtora:hover{border-color:#DDE1E8;background:#F1F3F7}
a.bx-produtora:focus-visible{outline:3px solid var(--bx-azul);outline-offset:2px}
.bx-produtora-seta{margin-left:auto;flex:none;color:var(--bx-suave)}

/* ── ÁRABE: A PÁGINA DA DIREITA PARA A ESQUERDA ─────────────────────────
   `dir="rtl"` no <html> já espelha texto, flex e grade. O que não espelha
   sozinho é o que foi posicionado à mão para a esquerda ou a direita: sem
   isto o selo da data cairia sobre o "Online", os menus do topo (presos
   em right-0) abririam para fora da tela e as setas apontariam para trás. */
[dir="rtl"] .bx-data{left:auto;right:10px}
[dir="rtl"] .bx-cat{left:auto;right:10px}
[dir="rtl"] .bx-online{right:auto;left:10px}
[dir="rtl"] .bx-dica>[role="tooltip"]{right:auto;left:0;text-align:right}
[dir="rtl"] .bx-dica>[role="tooltip"]::after{right:auto;left:14px}
[dir="rtl"] .bx-galeria-anterior{left:auto;right:16px}
[dir="rtl"] .bx-galeria-proxima{right:auto;left:16px}
/* Setas: as do catálogo levam .bx-seta; as desenhadas à mão nas telas
   (trilha, "Ver todos", métodos de pagamento) são achadas pelo traçado. */
[dir="rtl"] .bx-seta,
[dir="rtl"] svg:has(path[d="M9 5l7 7-7 7"]),
[dir="rtl"] svg:has(path[d="M15 19l-7-7 7-7"]),
[dir="rtl"] svg:has(path[d="m13 6 6 6-6 6"]){transform:scaleX(-1)}
[dir="rtl"] .bx-produtora-seta{margin-left:0;margin-right:auto}
[dir="rtl"] .bx-lineup-com-hora{padding-left:0;padding-right:14px}
[dir="rtl"] .bx-lineup-com-hora::before{left:auto;right:4px}
/* Os utilitários físicos do Tailwind que as telas do site usam. */
[dir="rtl"] .right-0{right:auto;left:0}
[dir="rtl"] .right-1{right:auto;left:.25rem}
[dir="rtl"] .right-3{right:auto;left:.75rem}
[dir="rtl"] .left-3{left:auto;right:.75rem}
[dir="rtl"] .left-4{left:auto;right:1rem}
[dir="rtl"] .text-left{text-align:right}
[dir="rtl"] .text-right{text-align:left}
[dir="rtl"] .ml-1{margin-left:0;margin-right:.25rem}
[dir="rtl"] .ml-2{margin-left:0;margin-right:.5rem}
[dir="rtl"] .ml-3{margin-left:0;margin-right:.75rem}
[dir="rtl"] .mr-1{margin-right:0;margin-left:.25rem}
[dir="rtl"] .pl-10{padding-left:0;padding-right:2.5rem}
[dir="rtl"] .pl-12{padding-left:0;padding-right:3rem}
[dir="rtl"] .pr-1{padding-right:0;padding-left:.25rem}
[dir="rtl"] .pr-4{padding-right:0;padding-left:1rem}
[dir="rtl"] .pr-10{padding-right:0;padding-left:2.5rem}
[dir="rtl"] .pr-11{padding-right:0;padding-left:2.75rem}
/* A marca e os números continuam da esquerda para a direita: R$ 40,00,
   CPF, o código, o relógio do carrinho. */
[dir="rtl"] .bx-resumo-valor,[dir="rtl"] .bx-codigo,[dir="rtl"] .bx-relogio{direction:ltr;unicode-bidi:isolate}
/* O que o produtor escreve (nome do evento, descrição, atrações) continua
   em português dentro da página em árabe. Sem isto o algoritmo bidi trata
   o parágrafo latino como RTL e a pontuação troca de ponta (".estão…",
   "HashtagMais [avulso]#"). `plaintext` faz cada parágrafo tomar a direção
   da própria primeira letra: o árabe segue RTL, o português volta a LTR. */
[dir="rtl"] :is(h1,h2,h3,h4,p,li,td,th,dt,dd,label,blockquote,.prose){unicode-bidi:plaintext}
/* Árabe é cursivo: espaçar as letras quebra a ligação entre elas. */
[lang="ar-AE"] *{letter-spacing:0!important}

/* ── PÁGINA DO EVENTO NO CELULAR: INGRESSOS DEPOIS DO LINE-UP ────────────
   No computador são duas colunas (conteúdo | local, ingressos, compartilhar).
   Empilhadas, a lateral inteira ia para o fim e o botão de compra ficava
   depois da galeria e da realização. Aqui as colunas somem da caixa
   (display: contents) e cada seção é item da mesma fila: o que não tem
   classe fica na ordem natural (capa, título, descrição, atrações/line-up),
   depois Ingressos, serviços e galeria, Local, realização e orientações, e compartilhar no fim. */
@media (max-width:1023.98px){
  .bx-evento-grade{display:flex;flex-direction:column;gap:2rem}
  .bx-evento-principal,.bx-evento-lateral{display:contents}
  .bx-evento-principal>*,.bx-evento-lateral>*{margin-top:0!important}
  .bx-m-ingressos{order:1}
  .bx-m-redes{order:2}    /* redes do evento: logo depois dos Ingressos */
  .bx-m-lineup{order:3}   /* atrações e line-up: DEPOIS dos Ingressos (pedido do Bruno) */
  .bx-m-depois{order:4}   /* mapa, serviços, galeria */
  .bx-m-local{order:5}    /* Local antes de Realização */
  .bx-m-final{order:6}    /* realização, orientações */
  .bx-m-fim{order:7}      /* compartilhar */
}

/* ── MAPA DO EVENTO (a planta; public/js/bilhetix-mapa.js) ─────────────────
   Aprovado na prévia de 21/09/2026: planta baixa com zoom e arrasto, cada
   área com o contorno colorido que anda e o nome numa etiqueta. */
.bx-planta{position:relative;border:1px solid var(--bx-linha);border-radius:12px;overflow:hidden;background:#FBFCFE;aspect-ratio:16/10;touch-action:none;cursor:grab;user-select:none;-webkit-user-select:none}
.bx-planta.arrastando{cursor:grabbing}
.bx-planta svg{width:100%;height:100%;display:block}
@media (max-width:640px){.bx-planta{aspect-ratio:1/1}}
.bx-planta-controles{position:absolute;right:10px;top:10px;display:flex;flex-direction:column;gap:6px}
.bx-planta-controles button{width:34px;height:34px;border-radius:9px;border:1px solid var(--bx-linha);background:#fff;color:var(--bx-tinta);display:grid;place-items:center;cursor:pointer;box-shadow:0 2px 6px -3px rgba(11,18,32,.3)}
.bx-planta-controles button:hover{border-color:#C9CED8}
.bx-planta-controles button:focus-visible{outline:2px solid var(--bx-azul);outline-offset:2px}
.bx-planta-controles svg{width:17px;height:17px}
.bx-planta-dica{position:absolute;left:10px;bottom:10px;font-size:11px;color:var(--bx-suave);background:rgba(255,255,255,.9);padding:4px 8px;border-radius:7px;border:1px solid var(--bx-linha);pointer-events:none}
.bx-planta-realce{position:absolute;left:10px;top:10px;font-size:12px;font-weight:600;color:var(--bx-tinta);background:#fff;padding:6px 10px;border-radius:9px;border:1px solid var(--bx-linha);box-shadow:0 2px 6px -3px rgba(11,18,32,.3);pointer-events:none}
.bx-planta-contorno{fill-opacity:.06;stroke-width:.5;cursor:pointer;stroke-dasharray:2.2 1.4;animation:bx-planta-anda 1.6s linear infinite}
.bx-planta-contorno.ativo{fill-opacity:.16;stroke-width:.9}
@keyframes bx-planta-anda{to{stroke-dashoffset:-3.6}}
@media (prefers-reduced-motion:reduce){.bx-planta-contorno{animation:none}}
.bx-planta-legenda{list-style:none;margin:14px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:6px 16px}
.bx-planta-legenda button{all:unset;box-sizing:border-box;width:100%;display:flex;gap:10px;align-items:flex-start;font-size:13px;line-height:1.35;cursor:pointer;padding:6px;border-radius:10px;color:var(--bx-texto)}
.bx-planta-legenda button:hover{background:var(--bx-papel)}
.bx-planta-legenda button:focus-visible{outline:2px solid var(--bx-azul)}
.bx-planta-legenda b{display:block;color:var(--bx-tinta);font-weight:600}
.bx-planta-desc{display:block;color:var(--bx-suave);font-size:12px}
.bx-planta-amostra{flex:none;width:30px;height:22px;border-radius:5px;margin-top:1px;border:1.5px dashed}
[dir="rtl"] .bx-planta-controles{right:auto;left:10px}
[dir="rtl"] .bx-planta-dica,[dir="rtl"] .bx-planta-realce{left:auto;right:10px}

/* ── PÁGINA DO LOCAL (site.local) — o molde é a da produtora ─────────────── */
.bx-local-marca{background:#FFF0F6;color:#DB2777}
.bx-local-info{display:grid;grid-template-columns:1fr;gap:14px;margin-top:14px}
@media (min-width:900px){.bx-local-info{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}}
.bx-local-bloco{padding:20px;border:1px solid var(--bx-linha);border-radius:16px;background:#fff}
.bx-local-titulo{font-size:14px;font-weight:700;color:var(--bx-tinta);margin-bottom:10px}
.bx-local-dados{display:flex;flex-direction:column;gap:8px}
.bx-local-dados div{display:grid;grid-template-columns:80px 1fr;gap:10px;font-size:13px;line-height:1.4}
.bx-local-dados dt{color:var(--bx-suave)}
.bx-local-dados dd{color:var(--bx-tinta);font-weight:500;min-width:0}
.bx-local-mapa{margin-top:14px;display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:600;color:#fff;background:var(--bx-azul);padding:9px 14px;border-radius:999px}
.bx-local-mapa:hover{background:var(--bx-azul-fundo)}
.bx-local-mapa:focus-visible{outline:3px solid var(--bx-azul);outline-offset:2px}
.bx-local-chips{display:flex;flex-wrap:wrap;gap:8px}
.bx-local-chip{font-size:13px;font-weight:500;color:var(--bx-tinta);padding:6px 12px;border-radius:999px;border:1px solid var(--bx-linha);background:var(--bx-papel)}
a.bx-local-chip:hover{border-color:#DDE1E8;background:#F1F3F7}
.bx-local-chip-neutro{color:var(--bx-texto);font-weight:400}
.bx-local-rotulo{margin:14px 0 8px;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--bx-suave)}
/* O nome do local no cartão da página do evento vira botão. */
a.bx-local-link{display:flex;align-items:flex-start;gap:12px;border-radius:12px;margin:-6px;padding:6px;transition:background .15s ease}
a.bx-local-link:hover{background:var(--bx-papel)}
a.bx-local-link:focus-visible{outline:3px solid var(--bx-azul);outline-offset:2px}
[dir="rtl"] .bx-local-dados div{direction:rtl}

/* ── REDES DO EVENTO (lateral, depois do Local) ─────────────────────────── */
.bx-redes{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.bx-rede{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:10px;border:1px solid var(--bx-linha);background:var(--bx-papel);font-size:13px;font-weight:500;color:var(--bx-tinta);transition:border-color .15s ease,background .15s ease}
.bx-rede:hover{border-color:#DDE1E8;background:#F1F3F7}
.bx-rede:focus-visible{outline:3px solid var(--bx-azul);outline-offset:2px}
.bx-rede svg{flex:none;color:var(--bx-suave)}
.bx-rede span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* a cor da rede aparece no ícone, só ao passar */
.bx-rede-instagram:hover svg{color:#E1306C}.bx-rede-facebook:hover svg{color:#1877F2}.bx-rede-youtube:hover svg{color:#FF0000}
.bx-rede-spotify:hover svg{color:#1DB954}.bx-rede-soundcloud:hover svg{color:#FF5500}.bx-rede-tiktok:hover svg,.bx-rede-x:hover svg{color:#0B1220}
.bx-rede-site:hover svg{color:var(--bx-azul)}

/* ── CENSURA POR ÁREA (site._censura), no cartão de ingressos ────────────── */
.bx-censura{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:600;color:var(--bx-texto);white-space:nowrap}
.bx-censura b{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 4px;border-radius:5px;font-size:11px;font-weight:800;line-height:1}

/* ── FILTROS DO CATÁLOGO: o botão ao lado do "Perto de mim" e a modal ─────
   (site._filtros). No computador a modal fica no centro; no celular abre de
   baixo, como folha, com o botão "Ver eventos" sempre à mão. */
.bx-perto-rotulo{max-width:12rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bx-botao-filtros{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 16px;border-radius:999px;border:1px solid #E5E7EB;background:#fff;font-size:14px;font-weight:600;color:var(--bx-tinta);transition:border-color .15s ease}
.bx-botao-filtros:hover{border-color:#D1D5DB}
.bx-botao-filtros:focus-visible{outline:3px solid var(--bx-azul);outline-offset:2px}
.bx-botao-filtros svg{color:var(--bx-azul)}
.bx-botao-filtros b{min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:var(--bx-azul);color:#fff;font-size:11px;display:inline-grid;place-items:center}
@media (max-width:640px){.bx-botao-filtros span{display:none}.bx-botao-filtros{padding:0 12px}}

[x-cloak]{display:none!important}
.bx-modal-fundo{position:fixed;inset:0;background:rgba(8,15,36,.5);z-index:10000}   /* acima do aviso de cookies (9999) */
.bx-modal{position:fixed;z-index:10001;left:50%;top:50%;transform:translate(-50%,-50%);width:min(640px,calc(100vw - 32px));max-height:min(86vh,820px);display:flex;background:#fff;border-radius:20px;box-shadow:0 30px 80px -30px rgba(8,15,36,.6)}
.bx-modal-corpo{display:flex;flex-direction:column;width:100%;min-height:0}
.bx-modal-topo{display:flex;align-items:center;justify-content:space-between;padding:18px 22px;border-bottom:1px solid var(--bx-linha)}
.bx-modal-topo h2{font-size:17px;font-weight:700;color:var(--bx-tinta)}
.bx-modal-x{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;color:var(--bx-suave)}
.bx-modal-x:hover{background:var(--bx-papel);color:var(--bx-tinta)}
.bx-modal-rolar{overflow-y:auto;padding:6px 22px 18px;flex:1;min-height:0;overscroll-behavior:contain}
.bx-modal-rodape{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 22px;border-top:1px solid var(--bx-linha);background:#fff;border-radius:0 0 20px 20px}
.bx-modal-limpar{font-size:14px;font-weight:600;color:var(--bx-texto);text-decoration:underline;text-underline-offset:3px}
.bx-modal-ver{height:44px;padding:0 24px;border-radius:999px;background:var(--bx-azul);color:#fff;font-size:14px;font-weight:700}
.bx-modal-ver:hover{background:var(--bx-azul-fundo)}
.bx-modal-ver:focus-visible,.bx-modal-limpar:focus-visible{outline:3px solid var(--bx-azul);outline-offset:2px}
@media (max-width:640px){
  .bx-modal{left:0;right:0;bottom:0;top:auto;transform:none;width:100%;max-height:90vh;border-radius:20px 20px 0 0}
  .bx-modal-rodape{border-radius:0;padding-bottom:calc(14px + env(safe-area-inset-bottom,0px))}
}
.bx-filtro{padding:16px 0;border-bottom:1px solid var(--bx-linha)}
.bx-filtro:last-child{border-bottom:0}
.bx-filtro h3{font-size:14px;font-weight:700;color:var(--bx-tinta);margin-bottom:10px}
.bx-filtro-sub{margin:14px 0 8px;font-size:12px;font-weight:600;color:var(--bx-suave)}
.bx-filtro-linha{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end}
.bx-filtro-linha+.bx-filtro-linha{margin-top:10px}
.bx-filtro-aviso{margin-top:8px;font-size:12.5px;color:#B45309}
.bx-campo{display:flex;flex-direction:column;gap:5px;flex:1 1 140px;min-width:0}
.bx-campo-largo{flex:2 1 220px}
.bx-campo span{font-size:12px;font-weight:600;color:var(--bx-suave)}
.bx-campo select,.bx-campo input{height:42px;width:100%;padding:0 12px;border:1px solid #E2E6EE;border-radius:10px;background:#fff;font-size:14px;color:var(--bx-tinta)}
.bx-campo select:disabled{background:var(--bx-papel);color:var(--bx-suave)}
.bx-campo select:focus,.bx-campo input:focus{outline:none;border-color:var(--bx-azul);box-shadow:0 0 0 3px rgba(37,99,255,.15)}
.bx-chips{display:flex;flex-wrap:wrap;gap:8px}
.bx-chip{position:relative;cursor:pointer}
.bx-chip input{position:absolute;opacity:0;pointer-events:none}
.bx-chip span{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:999px;border:1px solid #E2E6EE;background:#fff;font-size:13px;font-weight:500;color:var(--bx-texto);transition:all .12s ease}
.bx-chip:hover span{border-color:#C9CED8}
.bx-chip input:checked+span{background:#EEF3FF;border-color:var(--bx-azul);color:var(--bx-azul);font-weight:600}
.bx-chip input:focus-visible+span{outline:3px solid var(--bx-azul);outline-offset:2px}
.bx-marcar{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--bx-tinta);cursor:pointer}
.bx-marcar input{width:18px;height:18px;accent-color:var(--bx-azul)}
.bx-botao-local{height:42px;display:inline-flex;align-items:center;gap:8px;padding:0 14px;border-radius:10px;border:1px dashed var(--bx-azul);color:var(--bx-azul);font-size:13px;font-weight:600;background:#F5F8FF}
.bx-perto-ativo{display:flex;align-items:center;gap:8px;padding:10px 12px;border-radius:12px;background:#EEF3FF;color:var(--bx-azul);font-size:14px;font-weight:600;margin-bottom:10px}
.bx-perto-ativo button{margin-left:auto;font-size:13px;text-decoration:underline;color:var(--bx-texto)}
[dir="rtl"] .bx-perto-ativo button{margin-left:0;margin-right:auto}

/* Utilitários que as telas novas usam e o Tailwind compilado do site não tem
   (ele só gera o que existia quando foi compilado). */
.self-center{align-self:center}
.ml-12{margin-left:3rem}
.text-amber-600{color:#D97706}
[dir="rtl"] .ml-12{margin-left:0;margin-right:3rem}

/* O balão quebra linha SEMPRE: dentro de algo com nowrap (o selo da censura)
   ele herdava o "não quebre", saía numa linha só e o cartão o cortava. */
.bx-dica>[role="tooltip"]{white-space:normal;text-transform:none;letter-spacing:normal}

/* ── INGRESSOS POR ÁREA: as pills (aprovado na prévia de 21/09/2026) ─────── */
.bx-areas{display:flex;flex-wrap:wrap;gap:8px}
.bx-area-pill{display:flex;align-items:flex-start;gap:8px;padding:8px 12px 8px 10px;border-radius:12px;border:1px solid var(--bx-linha);background:#fff;max-width:100%;text-align:left;transition:border-color .15s,background .15s}
.bx-area-pill:hover{border-color:#C9CED8}
.bx-area-pill:focus-visible{outline:3px solid var(--bx-azul);outline-offset:2px}
.bx-area-pill[aria-selected="true"]{border-color:var(--bx-azul);background:#EEF3FF;box-shadow:inset 0 0 0 1px var(--bx-azul)}
.bx-area-censura{flex:none;display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 4px;border-radius:5px;font-size:11px;font-weight:800;margin-top:1px}
.bx-area-nome{display:block;font-size:13px;font-weight:600;color:var(--bx-tinta);line-height:1.25}
.bx-area-pill[aria-selected="true"] .bx-area-nome{color:var(--bx-azul-fundo)}
.bx-area-sub{display:block;font-size:11.5px;color:var(--bx-suave);margin-top:1px;font-variant-numeric:tabular-nums}
.bx-area-esgotada{color:#9CA3AF}
[dir="rtl"] .bx-area-pill{text-align:right}

/* ── O PAVIO DO LOTE (PavioDoLote): os últimos 3 dias de um lote, com o
   próximo já marcado. A corda encolhe em tempo real e a faísca brilha na
   ponta; nas últimas 24 h a corda vira coral e a faísca pulsa. */
.bx-pavio{margin-top:12px;padding-top:10px;border-top:1px dashed #E5E7EB}
.bx-pavio-trilha{position:relative;height:5px;border-radius:999px;background:#EEF0F4;overflow:visible}
.bx-pavio-corda{position:absolute;left:0;top:0;bottom:0;border-radius:999px;background:linear-gradient(90deg,var(--bx-azul),var(--bx-roxo));transition:width 1s linear}
.bx-pavio-faisca{position:absolute;right:-5px;top:50%;width:11px;height:11px;margin-top:-5.5px;border-radius:50%;background:radial-gradient(circle,#fff 0 22%,#FFC94A 23% 48%,rgba(255,138,0,.45) 49% 100%);box-shadow:0 0 8px 2px rgba(255,170,40,.65);animation:bx-faisca 1.1s ease-in-out infinite}
@keyframes bx-faisca{0%,100%{transform:scale(1)}50%{transform:scale(1.25)}}
.bx-pavio-texto{margin-top:8px;font-size:12.5px;color:var(--bx-texto);display:flex;flex-wrap:wrap;gap:6px;align-items:baseline}
.bx-pavio-relogio{font-weight:700;color:var(--bx-tinta);font-variant-numeric:tabular-nums;letter-spacing:.01em}
.bx-pavio-depois{margin-top:2px;font-size:12px;color:var(--bx-suave)}
.bx-pavio-dif{color:#C2410C;font-weight:600}
.bx-pavio-urgente .bx-pavio-corda{background:linear-gradient(90deg,var(--bx-coral),#FF2D8F)}
.bx-pavio-urgente .bx-pavio-faisca{animation-duration:.55s}
.bx-pavio-urgente .bx-pavio-relogio{color:#D93A30}
.bx-pavio-fim .bx-pavio-faisca{display:none}
@media (prefers-reduced-motion:reduce){.bx-pavio-faisca{animation:none}.bx-pavio-corda{transition:none}}
[dir="rtl"] .bx-pavio-corda{left:auto;right:0}
[dir="rtl"] .bx-pavio-faisca{right:auto;left:-5px}

/* ── EVENTO DE TESTE (produtos.sandbox) ─────────────────────────────────── */
.bx-teste{position:absolute;right:10px;bottom:10px;padding:4px 10px;border-radius:999px;background:var(--bx-coral);color:#fff;font-size:10.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;box-shadow:0 4px 10px -4px rgba(255,90,79,.7)}
[dir="rtl"] .bx-teste{right:auto;left:10px}
.bx-faixa-teste{background:repeating-linear-gradient(135deg,#FFF1F0 0 14px,#FFE4E1 14px 28px);border-bottom:1px solid #FFD2CC;color:#9F1D14;font-size:13px;padding:10px 0}
.bx-faixa-teste b{color:#D93A30;text-transform:uppercase;letter-spacing:.06em;font-size:12px}
.bx-compra-teste{display:flex;flex-wrap:wrap;align-items:center;gap:14px;justify-content:space-between;padding:18px 20px;border-radius:16px;border:2px dashed var(--bx-coral);background:#FFF6F5}
.bx-compra-teste-titulo{font-weight:700;color:#D93A30}
.bx-compra-teste-texto{font-size:13px;color:var(--bx-texto);margin-top:2px;max-width:46ch}
.bx-compra-teste-botao{height:44px;padding:0 20px;border-radius:999px;background:var(--bx-coral);color:#fff;font-weight:700;font-size:14px}
.bx-compra-teste-botao:hover{background:var(--bx-coral-fundo)}
.bx-compra-teste-botao:focus-visible{outline:3px solid var(--bx-coral);outline-offset:2px}

/* A dica do mapa pisca quando a pessoa rola sem Ctrl (o zoom pede a tecla). */
.bx-planta-dica-alerta{color:var(--bx-tinta);border-color:var(--bx-azul);background:#fff;font-weight:600}

/* ── SERVIÇO ADICIONAL DISCRIMINADO (PrecoDoLote) ──────────────────────── */
.bx-preco-partes{display:block;margin-top:2px;font-size:11px;color:var(--bx-suave);text-align:right;line-height:1.35;max-width:210px}
.bx-resumo-partes{display:grid;grid-template-columns:1fr auto;gap:2px 10px;margin:2px 0 6px 12px;font-size:12px;color:var(--bx-suave);font-variant-numeric:tabular-nums}
.bx-resumo-partes span:nth-child(2n){text-align:right}
[dir="rtl"] .bx-preco-partes{text-align:left}
[dir="rtl"] .bx-resumo-partes{margin:2px 12px 6px 0}

/* ── INTEIRA / MEIA EM PILLS, dentro da área ────────────────────────────── */
.bx-tipos{display:flex;gap:6px;padding:3px;border-radius:12px;background:var(--bx-papel);border:1px solid var(--bx-linha)}
.bx-tipo-pill{flex:1;padding:7px 10px;border-radius:9px;font-size:12.5px;font-weight:600;color:var(--bx-texto);transition:background .15s,color .15s}
.bx-tipo-pill:hover{color:var(--bx-tinta)}
.bx-tipo-pill[aria-selected="true"]{background:#fff;color:var(--bx-azul-fundo);box-shadow:0 1px 3px rgba(11,18,32,.12)}
.bx-tipo-pill:focus-visible{outline:3px solid var(--bx-azul);outline-offset:2px}

/* ── SERVIÇO ADICIONAL da área (pago, discriminado) e a composição do valor ── */
.bx-adicionais{margin:0 0 10px;padding:10px 12px;border-radius:12px;background:#FFF8EC;border:1px solid #F5D9A8}
.bx-adicional{padding:6px 0;border-top:1px dashed #F0D3A0}
.bx-adicional:first-of-type{border-top:0}
.bx-adicional-linha{display:flex;justify-content:space-between;gap:10px;font-size:13px}
.bx-adicional-linha b{color:var(--bx-tinta);font-weight:600}
.bx-adicional-linha span{color:#B45309;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.bx-adicional-desc{margin-top:2px;font-size:12px;color:var(--bx-texto);line-height:1.4}
.bx-adicional-nota{margin-top:6px;font-size:11px;color:var(--bx-suave);line-height:1.35}
.bx-preco{display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
.bx-preco .bx-dica{font-weight:400}
.bx-composicao{display:grid!important;gap:4px;min-width:200px;font-weight:400}
.bx-composicao>b{font-weight:700;margin-bottom:2px}
.bx-composicao>span{display:flex;justify-content:space-between;gap:12px}
.bx-composicao i{font-style:normal;opacity:.85}
.bx-composicao em{font-style:normal;font-variant-numeric:tabular-nums}
.bx-composicao-total{margin-top:2px;padding-top:4px;border-top:1px solid rgba(255,255,255,.25);font-weight:700}
.bx-composicao small{display:block;margin-top:4px;font-size:11px;opacity:.8;line-height:1.3}

/* Pavio de ESTOQUE: sem transição de largura (não é relógio) e o número em destaque. */
.bx-pavio-estoque .bx-pavio-corda{transition:none}
.bx-pavio-estoque .bx-pavio-texto b{font-weight:800;color:#D93A30;font-variant-numeric:tabular-nums}

/* Lugares marcados na planta e o foco do teclado. */
.bx-planta-lugar{cursor:pointer}
.bx-planta-lugar.ocupado{cursor:not-allowed}
/* o lugar é um <g> (bolinha + X): a cor precisa chegar no <circle> de dentro */
/* o clicado e o confirmado são pintados pelo JS (verde, maiores); aqui só o brilho */
.bx-planta-lugar.escolhido circle,.bx-planta-lugar.meu circle{filter:drop-shadow(0 0 .4px rgba(101,163,13,.8))}
.bx-planta-lugar.meu circle{cursor:pointer}
/* A TELA DE MARCAÇÃO e a confirmação do lugar */
/* faixa acima do mapa: qual ingresso está sendo marcado */
.bx-planta-marcar{display:flex;flex-direction:column;gap:1px;background:var(--bx-tinta);color:#fff;padding:9px 14px;border-radius:10px;margin-bottom:10px;font-size:12.5px;line-height:1.35}
.bx-planta-marcar b{font-size:13px}
.bx-planta-marcar span{color:rgba(255,255,255,.78)}
/* faixa abaixo do mapa: o lugar clicado, para confirmar ou trocar */
.bx-planta-confirma{display:flex;align-items:center;gap:4px 14px;flex-wrap:wrap;background:#fff;border:1px solid var(--bx-azul);border-radius:12px;padding:12px 14px;margin-top:10px;font-size:13px}
.bx-planta-confirma b{font-size:15px;color:var(--bx-tinta)}
.bx-planta-confirma span{color:var(--bx-suave);font-size:12px}
.bx-planta-botoes{display:flex;gap:8px;margin-left:auto;flex-wrap:wrap}
.bx-planta-botoes button{font-size:12.5px;font-weight:600;border:1px solid var(--bx-linha);background:#fff;color:var(--bx-tinta);border-radius:9px;padding:7px 14px;cursor:pointer}
.bx-planta-botoes button:hover{border-color:#C9CED8}
.bx-planta-botoes button.principal{background:var(--bx-azul);border-color:var(--bx-azul);color:#fff}
@media (max-width:560px){.bx-planta-botoes{margin-left:0;width:100%}.bx-planta-botoes button{flex:1}}
.bx-planta-botoes button[disabled]{opacity:.6;cursor:progress}
.bx-planta:focus{outline:none}
.bx-planta:focus-visible{outline:3px solid var(--bx-azul);outline-offset:2px}
.bx-planta[data-mouse]:focus-visible{outline:none}

/* Lugar marcado no cartão de ingressos. */
.bx-lugar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0 0 10px;padding:9px 12px;border-radius:12px;background:#EEF3FF;border:1px solid #C7D5FF;font-size:12.5px;color:var(--bx-tinta)}
.bx-lugar svg{color:var(--bx-azul);flex:none}
.bx-lugar b{font-weight:700}
.bx-lugar-ir{margin-left:auto;font-weight:600;color:var(--bx-azul);text-decoration:underline;text-underline-offset:2px}

/* ── O SELO VIVO do ingresso: relógio com milissegundos + a palavra em movimento ── */
.bx-vivo{margin-top:12px;display:flex;align-items:center;justify-content:center;gap:14px;padding:8px 14px;border-radius:999px;background:var(--bx-tinta);color:#fff;user-select:none}
.bx-vivo-marca{display:inline-flex;font-family:Poppins,sans-serif;font-weight:800;font-size:18px;letter-spacing:.02em;line-height:1}
.bx-vivo-marca i{font-style:normal;display:inline-block;transition:transform .35s cubic-bezier(.2,.8,.2,1),color .35s}
.bx-vivo-marca i.onda{color:var(--bx-azul)}
.bx-vivo-marca i.vira{transform:rotate(180deg)}
.bx-vivo-marca i.cresce{transform:scale(1.5)}
.bx-vivo-marca i.salta{transform:translateY(-6px)}
.bx-vivo-marca i.rosa{color:#FF2D8F}
.bx-vivo-marca i.azul{color:#22D3EE}
.bx-vivo-relogio{font-family:ui-monospace,Menlo,monospace;font-size:13px;font-variant-numeric:tabular-nums;color:rgba(255,255,255,.85);letter-spacing:.04em}
@media (prefers-reduced-motion:reduce){.bx-vivo-marca i{transition:none}}