/* Weekend Festival 2027 · ingressos.css
   Estilos só desta página. Tokens e componentes vêm de /assets/css/base.css (não edite a base aqui).
   Contrato: pesquisa/11-contrato-front.md. Especificação: pesquisa/09-direcao-design.md §13;
   mídia, copy e acabamento premium: pesquisa/13-midia-lgbt.md §4 e §6.5 (v2, 19/10/2026).
   Dono: página ingressos.

   A bilheteria do beach club: laranja cheio, um objeto (o ingresso), um botão. Desde a v2 o laranja
   cheio é só o herói; desde 21/10 (pesquisa/15) o resto é azul-claro, com o pink-claro em blocos de
   assunto (#preco e a prova), e o papel sol do line-up é a segunda área de cor, a pedido da cliente.
   O laranja fica como acento (botão, fio do painel, nome do produto). Termina em grafite.
   Página curta e rápida: sem GSAP. Movimento só em CSS (o ingresso assenta, a etiqueta carimba)
   e por IntersectionObserver (a pulseira acende), tudo desligado com movimento reduzido ou pausa. */

/* ================================================================ 0. faixa de oferta (09 §13.0) */
/* Só existe quando o ingressos.js acha /assets/data/oferta.json ligado e no prazo.
   Fica fixa acima da nav; o JS mede a altura real e escreve --oferta-h no <html>.
   Com a oferta ligada na hora do build, o bloco ing-oferta já marca o <html> com .tem-oferta
   antes da primeira pintura (44 px reservados): a faixa entra no espaço guardado, sem empurrar. */
.oferta {
  position: fixed;
  inset: 0 0 auto;
  z-index: var(--z-nav);
  background: var(--wk-grafite);
  color: var(--wk-branco);
  --foco: var(--wk-azul);
}
.oferta__in {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0 18px;
  min-height: 44px;
  max-width: calc(var(--max) + 2 * var(--margem));
  margin-inline: auto;
  padding: 2px var(--margem);
}
.oferta__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  color: inherit;
  font-weight: 600;
  line-height: 1.25;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}
.oferta__link .i { width: 18px; height: 18px; }
.oferta__tempo {
  font-weight: 600;
  line-height: 1.25;
  color: var(--wk-laranja);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
/* altura guardada antes do fetch: uma linha no desktop (44 + 4 px); no celular o texto e a contagem
   ficam em duas linhas. O JS troca pela altura medida assim que a faixa entra. */
html.oferta-reservada { --oferta-h: 48px; }
@media (max-width: 767px) { html.oferta-reservada { --oferta-h: 69px; } }
html.tem-oferta { scroll-padding-top: calc(var(--nav-h) + var(--oferta-h, 44px) + 16px); }
html.tem-oferta .nav { top: var(--oferta-h, 44px); }
html.tem-oferta .heroi--ingresso { padding-top: calc(var(--nav-h) + var(--oferta-h, 44px)); }
@media (min-width: 980px) {
  html.tem-oferta .heroi--ingresso { padding-top: calc(var(--nav-h) + var(--oferta-h, 44px) + 24px); }
}

/* ================================================================ 1. herói: o ingresso (09 §13.1, §15.6) */
.heroi--ingresso { padding-bottom: calc(var(--mare-h, 72px) + 4px); }
.heroi--ingresso .heroi__texto { justify-items: stretch; }

/* o ingresso: retângulo azul-claro de raio 20, -2°, recortes semicirculares por mask na linha do picote,
   canhoto com o gradiente sol (terceiro e último uso do gradiente no site).
   O papel (azul-claro, canhoto, picote e recortes) é o ::before. No celular o objeto inteiro gira
   (tela densa, o texto não serrilha); a partir de 980 px só o papel gira e o texto fica a 0°:
   o microcopy de 15 px girado serrilhava em tela comum. */
.ingresso {
  --canhoto: 92px;
  --furo: 13px;
  /* o papel do ingresso em azul-claro (pesquisa/15 §01); o picote continua branco, sobre o gradiente do
     canhoto. O papel é azul-claro dentro do campo laranja: o contorno da etiqueta azul volta aqui */
  --picote: var(--wk-branco);
  --fundo: var(--wk-azul-claro);
  --contorno-azul: var(--wk-azul-forte);
  --texto: var(--wk-grafite);
  --texto-2: var(--wk-grafite-2);
  --foco: var(--wk-azul-forte);
  --link: var(--wk-teal);
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--canhoto);
  width: 100%;
  color: var(--wk-grafite);
  rotate: var(--inclina-objeto);
}
.ingresso::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: var(--r-midia);
  /* picote vertical (entre os recortes), canhoto em gradiente sol, papel azul-claro */
  background:
    repeating-linear-gradient(to bottom, var(--picote) 0 7px, transparent 7px 13px)
      right calc(var(--canhoto) - 2px) center / 3px calc(100% - 2 * (var(--furo) + 8px)) no-repeat,
    var(--wk-sol) right top / var(--canhoto) 100% no-repeat,
    var(--fundo);
  /* recortes no topo e no pé, alinhados ao picote vertical do canhoto */
  -webkit-mask:
    radial-gradient(circle var(--furo) at calc(100% - var(--canhoto)) 0, #0000 98%, #000) top / 100% 51% no-repeat,
    radial-gradient(circle var(--furo) at calc(100% - var(--canhoto)) 100%, #0000 98%, #000) bottom / 100% 51% no-repeat;
  mask:
    radial-gradient(circle var(--furo) at calc(100% - var(--canhoto)) 0, #0000 98%, #000) top / 100% 51% no-repeat,
    radial-gradient(circle var(--furo) at calc(100% - var(--canhoto)) 100%, #0000 98%, #000) bottom / 100% 51% no-repeat;
}
/* dentro do papel azul-claro o botão de compra volta a ser laranja com texto grafite (09 §13.1),
   apesar da exceção de superfície do campo laranja em volta */
.ingresso .btn--laranja { --cor: var(--wk-laranja); --cor-texto: var(--wk-grafite); }
.ingresso .btn--laranja:focus-visible { outline-color: var(--wk-azul-forte); }

.ingresso__corpo {
  display: grid;
  justify-items: start;
  align-content: start;
  gap: 14px;
  min-width: 0;
  padding: clamp(18px, 2.6vw, 40px) clamp(20px, 2.8vw, 44px) clamp(22px, 2.6vw, 36px);
  container-type: inline-size;
}
.ingresso__titulo {
  display: grid;
  justify-items: start;
  gap: 14px;
  /* duas linhas no desktop (09 §6.3): a frase acompanha a largura do papel, 40 px no mínimo */
  font-size: clamp(2.5rem, 1.9rem + 1.9vw, 3.5rem);
  font-size: clamp(2.5rem, 9cqi, 3.5rem);
  line-height: 1.04;
  text-wrap: balance;
}
.ingresso__frase { display: block; }
/* a etiqueta fica a -8° na tela: o ingresso já gira -2°, então ela gira só a diferença */
.ingresso__etiqueta { rotate: calc(var(--inclina-marca) - var(--inclina-objeto)); margin-bottom: 2px; }
.ingresso__lead {
  max-width: 34ch;
  font-size: var(--t-lead);
  line-height: 1.4;
  text-wrap: pretty;
}
.ingresso__acoes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 22px;
  width: 100%;
  margin-top: 4px;
}
.ingresso__micro {
  max-width: 44ch;
  color: var(--wk-grafite-2);
  font-size: var(--t-legenda);
  font-weight: 500;
  line-height: 1.4;
}

/* preço do herói (bloco preco-party-pass, variante heroi) */
.pp-preco { display: grid; justify-items: start; gap: 4px; }
.pp-preco .preco { color: var(--wk-grafite); }
.pp-preco__conta { font-weight: 600; font-size: 1.0625rem; font-size: clamp(0.9375rem, 4.8cqi, 1.0625rem); line-height: 1.35; }
.pp-preco__conta b { font-weight: 700; white-space: nowrap; }
/* reserva (09 §4, produção sem preço validado): diz onde o preço está; quem age é o botão logo abaixo */
.pp-preco__reserva { max-width: 22ch; font-family: var(--f-voz); font-size: var(--t-h3); font-weight: 800; line-height: 1.15; text-wrap: balance; }

/* canhoto: o gradiente sol vem do papel (::before); "LOTE ATUAL" em Baloo 800 grafite de 24 px girada 90° */
.ingresso__canhoto {
  display: grid;
  place-items: center;
  min-width: 0;
}
.ingresso__canhoto span {
  writing-mode: vertical-rl;
  rotate: 180deg;
  color: var(--wk-grafite);
  font-family: var(--f-voz);
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* celular: faixa de vídeo no topo (170 a 200 px), o ingresso sobe 24 px sobre a borda, canhoto embaixo
   com picote horizontal. A 390x664 ficam cerca de 150 px de festa visíveis e o "Comprar Party Pass"
   inteiro na primeira tela. A legenda fica logo depois do ingresso, à direita, como no desktop. */
@media (max-width: 979px) {
  .heroi--ingresso .heroi__grade { grid-template-areas: "janela" "texto" "legenda"; }
  .heroi--ingresso .heroi__janela { display: contents; }
  .heroi--ingresso .heroi__janela .janela {
    grid-area: janela;
    margin-inline: calc(var(--margem) * -1);
    height: clamp(170px, 26svh, 200px);
  }
  /* o recorte 16:9 numa faixa mais larga que 16:9: um pouco abaixo do meio, onde ficam os rostos */
  .heroi--ingresso .janela > picture > img,
  .heroi--ingresso .janela > video { object-position: 50% 58%; }
  .heroi--ingresso .heroi__janela .legenda { grid-area: legenda; justify-self: end; padding-inline: 0; margin-top: 12px; text-align: right; }
  .heroi--ingresso .heroi__texto { margin-top: -24px; padding-bottom: 0; }

  .ingresso {
    --canhoto-h: 56px;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto var(--canhoto-h);
    max-width: 620px;
  }
  .ingresso::before {
    background:
      repeating-linear-gradient(to right, var(--picote) 0 7px, transparent 7px 13px)
        center bottom calc(var(--canhoto-h) - 2px) / calc(100% - 2 * (var(--furo) + 8px)) 3px no-repeat,
      var(--wk-sol) left bottom / 100% var(--canhoto-h) no-repeat,
      var(--fundo);
    -webkit-mask:
      radial-gradient(circle var(--furo) at 0 calc(100% - var(--canhoto-h)), #0000 98%, #000) left / 51% 100% no-repeat,
      radial-gradient(circle var(--furo) at 100% calc(100% - var(--canhoto-h)), #0000 98%, #000) right / 51% 100% no-repeat;
    mask:
      radial-gradient(circle var(--furo) at 0 calc(100% - var(--canhoto-h)), #0000 98%, #000) left / 51% 100% no-repeat,
      radial-gradient(circle var(--furo) at 100% calc(100% - var(--canhoto-h)), #0000 98%, #000) right / 51% 100% no-repeat;
  }
  .ingresso__corpo { gap: 8px; padding-top: 16px; }
  .ingresso__titulo { gap: 10px; line-height: 1.02; }
  .ingresso__canhoto span { writing-mode: horizontal-tb; rotate: none; padding-top: 0.12em; }
  .ingresso__acoes { gap: 0 20px; margin-top: 2px; }
}
/* celular deitado: vale a janela baixa da base (a regra acima, mais específica, passaria por cima) */
@media (orientation: landscape) and (max-height: 500px) and (max-width: 979px) {
  .heroi--ingresso .heroi__janela .janela { height: clamp(96px, 30svh, 140px); }
}
/* tablet: o ingresso fica no meio do campo laranja, com a legenda alinhada a ele */
@media (min-width: 640px) and (max-width: 979px) {
  .heroi--ingresso .heroi__texto { justify-items: center; }
  .heroi--ingresso .heroi__janela .legenda { justify-self: center; width: min(100%, 620px); }
}
/* 320 a 359 px: o H1 caberia só em 4 linhas a 40 px; o 09 §6.4 manda baixar o mínimo (3 linhas a 36 px) */
@media (max-width: 359px) {
  .ingresso__corpo { padding-inline: 16px; }
  .ingresso__titulo { font-size: 2.25rem; }
}
@media (min-width: 980px) {
  /* só o papel gira; o conteúdo fica reto e a etiqueta faz os -8° inteiros */
  .ingresso { rotate: none; --assenta-de: -4deg; }
  .ingresso::before { rotate: var(--inclina-objeto); }
  .ingresso__etiqueta { rotate: var(--inclina-marca); }
  .heroi--ingresso .heroi__grade { align-items: start; }
  .heroi--ingresso .heroi__texto { grid-column: 1 / 8; padding-top: 6px; }
  .heroi--ingresso .heroi__janela { grid-column: 8 / 13; }
  .heroi--ingresso .heroi__janela .janela { height: min(560px, 62svh); }
  .ingresso__acoes .btn { min-height: 56px; }
}

/* o ingresso assenta de -6° para -2° na carga, com opacidade (09 §16.4). Começa visível (0,4):
   o H1 dentro dele é o LCP e não pode nascer transparente. A etiqueta faz o carimbo. */
.anima .ingresso { animation: wk-assenta 500ms var(--ease-expo) both; }
.anima .ingresso__etiqueta { animation: wk-carimbo 420ms var(--ease-out) 300ms both; }
@keyframes wk-assenta {
  from { rotate: var(--assenta-de, -6deg); opacity: 0.4; translate: 0 14px; }
}
@keyframes wk-carimbo {
  from { rotate: -14deg; scale: 1.06; opacity: 0; }
}

/* ================================================================ 2. o que o passe libera: cards de festa e pulseira */
/* 13 §4.2 e 09 §13.2. A maré já separa do herói: a primeira linha desta seção aparece inteira em
   1440x900 (09 §9.1). Desktop: H2 e lead nas colunas 1 a 4, card de dia nas 5 a 8, de noite nas 9 a 12
   (fotos 4:5 de 410x513 no miolo de 1280); a pulseira, na largura toda, 64 px abaixo. Tablet: o texto
   em cima e os cards 6 e 6. Celular: o texto, os dois cards lado a lado (vão de 12 px), os canhotos. */
@media (min-width: 980px) { .passe { padding-top: 56px; } }
.passe__grade {
  display: grid;
  gap: var(--respiro-cab);
  margin-bottom: clamp(48px, 5vw, 64px);
}
.passe__grade > * { min-width: 0; }
.passe__topo { display: grid; gap: 20px; align-content: start; max-width: var(--max-texto); }
.passe__lead { max-width: 30ch; }

.festas-foto {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.festa-foto { min-width: 0; }
.festa-foto__fig { margin: 0; }
.festa-foto__img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--r-foto);
  background: var(--fundo-alterno);
}
.festa-foto__cap { display: grid; justify-items: start; gap: 2px; margin-top: 14px; }
/* título do card: Baloo 700 com o ícone do turno, sem etiqueta (13 §4.2); 17 px no celular, 22 px a
   partir de 768. O ícone segue a cor da pulseira: sol azul, lua grafite. */
.festa-foto__titulo {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.15;
}
.festa-foto__titulo .i { flex: none; width: 20px; height: 20px; }
.festa-foto--dia .festa-foto__titulo .i { color: var(--wk-azul-forte); }
.festa-foto--noite .festa-foto__titulo .i { color: var(--wk-grafite); }
.festa-foto__cap .legenda { margin-top: 0; }
@media (min-width: 768px) {
  .festas-foto { gap: var(--vao); }
  .festa-foto__cap { gap: 4px; margin-top: 16px; }
  .festa-foto__titulo { gap: 10px; font-size: 1.375rem; }
  .festa-foto__titulo .i { width: 24px; height: 24px; }
}
@media (min-width: 980px) {
  .passe__grade {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--vao);
    align-items: start;
  }
  .passe__topo { grid-column: 1 / 5; }
  .festas-foto { grid-column: 5 / 13; }
}

/* A pulseira com a programação (pesquisa/15 §02). Celular: 5 canhotos empilhados, sem inclinação, cor
   por turno, picote entre eles; em cada um, ícone do turno à esquerda, dia e período, nome, destaque e
   local; as marcas (selo da SELVA, +18 da HEAT) à direita. As pontas arredondam no primeiro e no último
   canhoto (e não no <ol>), para o selo poder sair da borda como carimbo no desktop. */
.pulseira {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
}
.pulseira__seg {
  position: relative;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  grid-template-areas:
    "icone dia      marcas"
    "icone nome     marcas"
    "icone destaque marcas"
    "icone local    marcas";
  align-content: center;
  align-items: start;
  column-gap: 14px;
  row-gap: 3px;
  min-height: 72px;
  padding: 16px 18px 18px 20px;
  transition: opacity 420ms var(--ease-out);
}
.pulseira__seg:first-child { border-radius: var(--r-midia) var(--r-midia) 0 0; }
.pulseira__seg:last-child { border-radius: 0 0 var(--r-midia) var(--r-midia); }
.pulseira__seg--dia { background: var(--wk-azul); color: var(--wk-grafite); }
.pulseira__seg--noite { background: var(--wk-grafite); color: var(--wk-branco); }
/* pesquisa/15 §01: a seção do passe fica azul-claro e o segmento azul ficaria a 1,93:1 do fundo. O
   contorno azul-forte (4,01:1) vem de --contorno-azul (base.css), que é transparent fora do azul-claro */
.pulseira__seg--dia { box-shadow: inset 0 0 0 2px var(--contorno-azul, transparent); }
.pulseira__seg + .pulseira__seg::before {
  content: "";
  position: absolute;
  left: 18px;
  right: 18px;
  top: -1px;
  height: 2px;
  background: repeating-linear-gradient(to right, var(--wk-branco) 0 8px, transparent 8px 14px);
}
.pulseira__icone { grid-area: icone; width: 28px; height: 28px; margin-top: 2px; }
.pulseira__dia {
  grid-area: dia;
  font-family: var(--f-voz);
  font-size: var(--t-etiqueta);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: 0.04em;
}
.pulseira__nome {
  grid-area: nome;
  padding-top: 0.12em;
  font-family: var(--f-voz);
  font-size: 1.375rem;
  font-weight: 800;
  line-height: 1.1;
}
.pulseira__marcas { grid-area: marcas; align-self: center; display: flex; align-items: center; }
.pulseira__marcas .selo-selva { --selo: 60px; }
.pulseira__destaque { grid-area: destaque; font-size: var(--t-legenda); font-weight: 600; line-height: 1.3; }
.pulseira__local {
  grid-area: local;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--t-legenda);
  font-weight: 400;
  line-height: 1.3;
}
.pulseira__local .i { flex: none; width: 15px; height: 15px; }
/* sem programação (reserva): "Festa de dia" e "Praia Mole", como antes */
.pulseira__seg:not(:has(.pulseira__dia)) { grid-template-areas: "icone nome marcas" "icone local marcas"; }

/* desktop: a pulseira na largura do miolo, pontas de raio total, -2°, picote vertical. O selo da SELVA
   sai pela borda de cima, como carimbo; o +18 fica na linha do ícone */
@media (min-width: 980px) {
  .pulseira {
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    min-height: 136px;
    margin-top: 28px;
    rotate: var(--inclina-objeto);
  }
  .pulseira__seg {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "icone marcas" "dia dia" "nome nome" "destaque destaque" "local local";
    align-content: start;
    row-gap: 6px;
    padding: 28px 20px 30px;
  }
  .pulseira__seg:first-child { padding-left: 44px; border-radius: 80px 0 0 80px; }
  .pulseira__seg:last-child { padding-right: 36px; border-radius: 0 80px 80px 0; }
  .pulseira__seg + .pulseira__seg::before {
    left: -1px;
    right: auto;
    top: 16px;
    bottom: 16px;
    width: 2px;
    height: auto;
    background: repeating-linear-gradient(to bottom, var(--wk-branco) 0 8px, transparent 8px 14px);
  }
  .pulseira__icone { margin: 0 0 4px; }
  .pulseira__marcas { align-self: start; }
  .pulseira__marcas .selo-selva { --selo: 84px; position: absolute; top: -34px; right: 6px; }
  .pulseira__nome { padding-top: 2px; }
}
/* 980 a 1199: cada canhoto tem cerca de 185 px. Letra um pouco menor e o pino do local mais perto, para
   nome e local quebrarem menos (revisão de 21/10: "Beach Club Praia / Mole" em 1024) */
@media (min-width: 980px) and (max-width: 1199px) {
  .pulseira__seg { padding-inline: 12px; row-gap: 4px; }
  .pulseira__seg:first-child { padding-left: 26px; }
  .pulseira__seg:last-child { padding-right: 22px; }
  .pulseira__nome { font-size: 1.125rem; }
  .pulseira__dia { font-size: 0.8125rem; letter-spacing: 0.03em; }
  .pulseira__destaque, .pulseira__local { font-size: 0.875rem; }
  .pulseira__local { gap: 4px; }
}
/* os segmentos acendem da esquerda para a direita, 50 ms de intervalo, uma vez (o JS liga e acende
   assim que 20% da pulseira entra na tela). Apagada, nunca some: quem para de rolar na borda de baixo
   lê o passe, não um passe indisponível. */
.pulseira.is-apagada .pulseira__seg { opacity: 0.45; }
.pulseira.is-acesa .pulseira__seg:nth-child(2) { transition-delay: 50ms; }
.pulseira.is-acesa .pulseira__seg:nth-child(3) { transition-delay: 100ms; }
.pulseira.is-acesa .pulseira__seg:nth-child(4) { transition-delay: 150ms; }
.pulseira.is-acesa .pulseira__seg:nth-child(5) { transition-delay: 200ms; }

.passe__pe {
  display: grid;
  justify-items: start;
  gap: 6px;
  margin-top: clamp(28px, 4vw, 52px);
}
@media (min-width: 980px) {
  .passe__pe {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 32px;
  }
}
.passe__pe .link { text-wrap: balance; }
/* a linha que nunca cai (09 §19) */
.nao-inclui {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: var(--t-lead);
  font-weight: 600;
  line-height: 1.35;
}
.nao-inclui .i {
  flex: none;
  width: 32px;
  height: 32px;
  padding: 6px;
  border-radius: 50%;
  background: var(--wk-grafite);
  color: var(--wk-branco);
}

/* ================================================================ 3. #preco, preço e lote (09 §13.3, 13 §6.5) */
/* em pink-claro (pesquisa/15 §01): o painel do lote atual em azul-claro com o fio laranja de 6 px no
   topo, e os lotes anteriores (só com dado real) ficam em contorno grafite. A única área laranja da
   página é o herói. */
.lote-secao__grade { display: grid; gap: 36px; }
/* com o texto a 200%, filho de grade não alarga a coluna */
.lote-secao__grade > * { min-width: 0; }
.lote-secao__texto { display: grid; gap: 14px; align-content: start; }
.lote-secao__texto .lead { max-width: 30ch; }
@media (min-width: 980px) {
  .lote-secao__grade {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--vao);
    row-gap: 56px;
    align-items: start;
  }
  .lote-secao__texto { grid-column: 1 / 6; }
  .lote-secao__lotes { grid-column: 7 / 13; grid-row: 1 / span 2; }
  .meia { grid-column: 1 / 6; grid-row: 2; }
  /* com mais de um lote, a régua deita na largura toda (09 §13.3) */
  .lote-secao__grade:has(.lotes--regua) .lote-secao__lotes { grid-column: 1 / -1; grid-row: auto; }
  .lote-secao__grade:has(.lotes--regua) .meia { grid-row: auto; }
}

.lotes { list-style: none; margin: 0; padding: 0; }
.lotes--um { display: block; }
.lote__painel {
  /* o painel em azul-claro dentro da seção pink-claro (pesquisa/15 §01); o fio laranja de 6 px fica */
  --fundo: var(--wk-azul-claro);
  --fundo-alterno: var(--wk-pink-claro);
  --contorno-azul: var(--wk-azul-forte);
  --texto: var(--wk-grafite);
  --texto-2: var(--wk-grafite-2);
  --foco: var(--wk-azul-forte);
  --link: var(--wk-teal);
  --divisa: var(--wk-linha);
  display: grid;
  justify-items: start;
  gap: 18px;
  padding: clamp(24px, 3vw, 44px);
  border-top: 6px solid var(--wk-laranja);
  border-radius: var(--r-midia);
  background: var(--fundo);
  color: var(--wk-grafite);
}
.lote__painel .btn--laranja { --cor: var(--wk-laranja); --cor-texto: var(--wk-grafite); }
.lote__painel .btn--laranja:focus-visible { outline-color: var(--wk-azul-forte); }
/* "Lote atual" como nome do painel, sem etiqueta (13 §6.1: nenhuma etiqueta em painel) */
.lote__nome {
  font-family: var(--f-voz);
  font-size: var(--t-h3);
  font-weight: 700;
  line-height: 1.15;
}
.lote__btn { margin-top: 6px; }
/* 320 a 359 px: com 24 px de lado a conta caía no layout empilhado do texto ampliado (14em);
   18 px devolvem a tabela de duas colunas */
@media (max-width: 359px) { .lote__painel { padding-inline: 18px; } }
@media (min-width: 980px) { .lote__btn { width: 100%; } }

/* a conta transparente: Inteira, Taxa, Total (bloco preco-party-pass, variante tabela) */
.pp-tabela { display: grid; gap: 10px; width: 100%; container-type: inline-size; }
.pp-conta { width: 100%; font-variant-numeric: tabular-nums; }
.pp-conta th,
.pp-conta td { padding: 12px 0; vertical-align: baseline; }
.pp-conta th { text-align: left; font-weight: 500; padding-right: 12px; }
/* o percentual vira uma linha de apoio embaixo do rótulo: o total largo define a coluna dos valores,
   e "Taxa de serviço (2,5%)" numa linha só não cabe ao lado dele no celular */
.pp-conta__pct { display: block; color: var(--wk-grafite-2); font-size: var(--t-legenda); line-height: 1.3; white-space: nowrap; }
.pp-conta td {
  text-align: right;
  font-size: var(--t-preco-lista);
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
}
/* fio opaco por célula: o --wk-linha é translúcido e, no encontro das células, a borda dobrava
   e deixava um tique escuro */
.pp-conta tr + tr > * {
  border-top: 1px solid var(--wk-linha);
  border-top-color: color-mix(in srgb, var(--wk-grafite) 14%, var(--fundo));
}
.pp-conta__total th {
  font-family: var(--f-voz);
  font-size: var(--t-preco-lista);
  font-weight: 800;
  padding-top: 18px;
}
.pp-conta__total td {
  font-family: var(--f-voz);
  font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.75rem);
  font-weight: 800;
  line-height: 1;
  padding-top: 18px;
}

/* texto ampliado (150 a 200%): o total largo não cabe ao lado do rótulo; cada linha empilha o rótulo
   e o valor, em vez de a tabela vazar do painel. Em em: a condição acompanha o tamanho do texto. */
@container (max-width: 14em) {
  .pp-conta,
  .pp-conta tbody,
  .pp-conta tr,
  .pp-conta th,
  .pp-conta td { display: block; }
  .pp-conta th { padding: 12px 0 0; }
  .pp-conta td { padding: 2px 0 12px; text-align: left; white-space: normal; }
  .pp-conta tr + tr { border-top: 1px solid var(--wk-linha); }
  .pp-conta tr + tr > * { border-top: 0; }
  .pp-conta__total td { padding-top: 4px; }
}

/* régua com mais de um lote (só com dado real): anteriores em contorno grafite, próximo com valor e data */
.lotes--regua.linha-ponto--h > li { min-width: 0; }
.lote--esgotado,
.lote--proximo {
  display: grid;
  justify-items: start;
  align-content: start;
  gap: 6px;
}
.lote--esgotado { padding: 16px 18px; border: 2px solid var(--wk-grafite); border-radius: var(--r-midia); }
.lote--esgotado .lote__preco s { color: var(--wk-grafite); text-decoration-thickness: 2px; }
.lote--proximo .lote__miolo { display: grid; gap: 4px; }

/* #meia: quem tem direito e o documento; o valor só depois do C11. Fio fino de grafite (sobre o pink-claro) */
.meia {
  display: grid;
  align-content: start;
  gap: 12px;
  padding-top: 28px;
  border-top: 1px solid color-mix(in srgb, var(--wk-grafite) 28%, transparent);
}
.meia h3 { font-size: var(--t-h3); }
.meia__miolo { display: grid; gap: 12px; max-width: 52ch; }
.meia__miolo[data-so-producao] { font-size: var(--t-lead); line-height: 1.45; }
.meia__lista { display: grid; gap: 8px; padding-left: 1.1em; }
.meia__lista li::marker { color: var(--wk-grafite); }
.meia__lista b { font-weight: 600; }

/* ================================================================ 4. da compra à pulseira (09 §13.4) */
/* celular: H2, passos e a nota embaixo. Desktop: o H2 e a nota ficam juntos na coluna da esquerda,
   presos ao rolar, sem coluna vazia. A nota existe duas vezes e só uma aparece por largura
   (display: none tira a outra também do leitor de tela): a ordem do DOM é a ordem da tela. */
.passos__grade { display: grid; gap: 36px; }
.passos__ol { --lp-num: var(--wk-laranja-forte); max-width: 46ch; }
.passos__titulo { font-size: var(--t-h3); margin-bottom: 4px; }
.passos__ol p + p { margin-top: 4px; }
.passos__nota { margin-top: 32px; max-width: 52ch; }
.passos__nota--lado { display: none; }
@media (min-width: 980px) {
  .passos__grade { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--vao); align-items: start; }
  .passos__lado {
    display: grid;
    gap: 24px;
    grid-column: 1 / 6;
    min-width: 0;
    position: sticky;
    top: calc(var(--nav-h) + 40px);
  }
  .passos__nota--lado { display: block; margin-top: 0; max-width: 34ch; }
  .passos__nota--pe { display: none; }
  .passos__lista { grid-column: 7 / 13; min-width: 0; }
}

/* ================================================================ 5. prova em vídeo (09 §13.5, 13 §4.3 e §6.5) */
/* celular: H2, lead, o vídeo e o botão embaixo dele (a ordem do DOM). Desktop: vídeo nas colunas 1 a 8
   (era 7), e título, lead e botão nas 9 a 12, centrados na altura do vídeo pelas linhas 1fr das pontas. */
.prova__grade { display: grid; gap: var(--respiro-cab); }
.prova__grade > * { min-width: 0; }
.prova__texto { display: grid; justify-items: start; gap: 20px; container-type: inline-size; }
/* "Weekend Festival." numa linha só (Weekend&nbsp;Festival no HTML, revisão de 21/10). Na coluna estreita do
   desktop a letra encolhe com ela (12cqi deixa os 8,1 em da marca em 97% da coluna) e nunca passa do --t-h2 */
@supports (font-size: 1cqi) {
  .prova__texto h2 { font-size: min(var(--t-h2), 12cqi); }
}
.prova__lead { max-width: 30ch; }
.prova__video { margin: 0; }
.prova__acao { margin-top: -8px; }
@media (min-width: 980px) {
  .prova__grade {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-template-rows: 1fr auto auto 1fr;
    column-gap: var(--vao);
    row-gap: 0;
  }
  .prova__video { grid-column: 1 / 9; grid-row: 1 / 5; align-self: center; }
  .prova__texto { grid-column: 9 / 13; grid-row: 2; }
  .prova__acao { grid-column: 9 / 13; grid-row: 3; margin-top: 28px; }
}
/* pôster, fade e botão vêm do componente da base (.video-sob); aqui só a proporção */
.prova .video-sob { aspect-ratio: 16 / 9; }
@media (hover: hover) and (pointer: fine) {
  .prova .video-sob__tocar { transition: scale 180ms var(--ease-out); }
  .prova .video-sob__tocar:hover { scale: 1.06; }
}

/* ================================================================ 6. line-up compacto (09 §13.6) */
/* O cartaz e a arte do line-up moram no base.css (variante=compacto do bloco lineup). A seção fica sem
   classe de fundo, no azul-claro da página: rosa não (o papel sol termina em pink). */
/* line-up e dúvidas são o mesmo campo azul-claro: sem o padding de cima das dúvidas, o vão entre o
   cartaz e o H2 é um respiro só (eram dois, 316 px em 1440), como em .hosp-complexo */
.lineup + .duvidas { padding-top: 0; }

/* ================================================================ 7. dúvidas */
/* celular: H2, perguntas e o WhatsApp embaixo. Desktop: o H2 e o WhatsApp juntos na coluna da
   esquerda, presos ao rolar (quem não acha a pergunta tem a saída sempre à mão). Como na nota dos
   passos, o link existe duas vezes e só um aparece por largura: o Tab segue a ordem da tela. */
.duvidas__grade { display: grid; gap: 28px; }
.duvidas__wa { margin-top: 28px; }
/* com o texto a 200%, a palavra do H2 quebra em vez de vazar da coluna */
.duvidas__lado h2,
.passos__lado h2 { overflow-wrap: break-word; }
.duvidas__wa--lado { display: none; }
/* 320 a 359 px: o rótulo do WhatsApp cabe numa linha com 18 px de lado (a base usa 32) */
@media (max-width: 359px) { .duvidas__wa { padding-inline: 18px; } }
@media (min-width: 980px) {
  .duvidas__grade { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--vao); align-items: start; }
  .duvidas__lado {
    display: grid;
    justify-items: start;
    gap: 28px;
    grid-column: 1 / 5;
    min-width: 0;
    position: sticky;
    top: calc(var(--nav-h) + 40px);
  }
  .duvidas__wa--lado { display: inline-flex; margin-top: 0; max-width: 100%; white-space: normal; }
  .duvidas__wa--pe { display: none; }
  .duvidas__lista { grid-column: 5 / 13; min-width: 0; }
}

/* ================================================================ 8. CTA final em grafite (09 §13.8, 13 §6.5) */
/* as três páginas terminam em grafite: H2 branco, o nome do produto em branco com o fio laranja,
   o botão laranja com texto grafite (6,70:1) e o WhatsApp como link azul (o link do grafite) */
.final__grade { display: grid; gap: var(--respiro-cab); }
.final__grade > * { min-width: 0; }
.final__titulo { overflow-wrap: break-word; }
.final__titulo { font-size: var(--t-h1); font-weight: 800; line-height: 1.04; max-width: 12ch; }
.final__acao { display: grid; gap: 24px; align-content: end; }
.final__preco {
  display: grid;
  justify-items: start;
  gap: 14px;
  color: var(--texto-2);
  font-size: var(--t-lead);
  font-weight: 500;
  line-height: 1.35;
}
.final__preco b { color: var(--texto); font-weight: 700; }
.final__produto { font-size: var(--t-produto); }
.final__wa .i { width: 22px; height: 22px; }
@media (min-width: 980px) {
  .final__grade { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--vao); align-items: end; }
  .final__titulo { grid-column: 1 / 8; }
  .final__acao { grid-column: 8 / 13; justify-items: start; }
}

/* ================================================================ movimento reduzido e pausa */
@media (prefers-reduced-motion: reduce) {
  .anima .ingresso,
  .anima .ingresso__etiqueta { animation: none; }
  .pulseira__seg { transition: none; }
}
html.is-pausado .ingresso,
html.is-pausado .ingresso__etiqueta { animation: none; }

/* ================================================================ modo revisão (?revisao=1, só a prévia interna) */
/* .janela e .video-sob cortam o que sai da caixa (overflow hidden): o selo "a validar" da autorização
   de imagem entra no canto de cima, à esquerda, para a Mari ver. Fora do ?revisao=1 nada disso existe. */
html.revisao .janela[data-validar]::before,
html.revisao .video-sob[data-validar]::before {
  top: 8px;
  left: 8px;
  right: auto;
  bottom: auto;
  z-index: 3;
}

.pulseira__idade { margin-top: 1.25rem; }