/* Weekend Festival 2027 · home.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 §11 e §16.4;
   mídia, copy e acabamento premium: pesquisa/13-midia-lgbt.md §2 e §6.3 (vale sobre o 09).
   Dono: página home.

   A página é o dia que vira noite uma vez: herói, comparador e lugar em azul-claro (a cor da
   página), a maré de sol com o dock entre o herói e o comparador, e a galeria "É a nossa praia."
   em pink-claro; a maré da noite abre a metade grafite (programação, line-up, edições, escolha final e dúvidas). Só transform,
   opacity e o clip-path da crista se mexem (e o letreiro do line-up, que para com a pausa).

   Contenção (13 §6.1), com as exceções do feedback de 21/10 (pesquisa/15 §02 e §06): uma etiqueta
   de display (a data do H1). Campos de cor cheia: a maré de sol, as cabeças das colunas do
   comparador e o nome em campo cheio do dock (tintas pink-claro e laranja-claro no corpo), o papel
   sol do line-up e as metades finais em pink-forte e laranja. O resto termina em grafite.

   Ritmo: o respiro cheio (--secao) fica só nas trocas de assunto. Seções ligadas (dock e
   comparador, comparador e lugar) usam menos, e a seção que vem antes de uma maré não tem padding
   de pé além do que a maré já cobre e um respiro curto. */

/* ---------------------------------------------------------------- 1. herói */
/* No celular a maré sobe 44 px sobre o pé do herói: o texto (z-index 1) não pode ficar embaixo dela. */
.heroi--home .heroi__texto { padding-bottom: 50px; }
.heroi--home .heroi__frase { display: block; }
/* "Weekend Festival." fica numa linha só (  no HTML) e não pode passar da coluna do texto: a frase
   encolhe com a coluna (12cqi, cerca de 96% dela para a linha mais longa) e nunca passa do --t-h1. Sem
   container query (navegador antigo), o celular usa a conta em vw; no desktop fica o --t-h1. */
.heroi--home .heroi__texto { container-type: inline-size; }
@media (max-width: 979px) {
  .heroi--home .heroi__frase { font-size: min(var(--t-h1), calc(12vw - 5px)); }
}
.heroi--home .heroi__frase { font-size: min(var(--t-h1), 12cqi); }
/* para quem é, dentro do H1, entre a data e a frase (Davi, 21/10: o LGBTQIA+ na primeira tela sem mexer no
   texto da cliente). Texto, não etiqueta: a única etiqueta de display continua a data (13 §6.1). */
.heroi--home .heroi__publico {
  display: block;
  font-family: var(--f-texto);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--texto);
}
@media (max-width: 979px) {
  /* o apoio da cliente (18 palavras) tem o dobro do lead antigo: 18 px em vez de 19, a faixa um pouco mais
     baixa e menos vão, para o Next Level e o Party Pass do dock seguirem na primeira tela de 360x740 a 430x932 */
  .heroi--home .heroi__lead { font-size: 1.125rem; }
  .heroi--home .heroi__texto { gap: 12px; padding-bottom: 40px; }
  .heroi--home .heroi__titulo { gap: 10px; }
  .heroi--home .heroi__titulo .heroi__publico { margin-block: -4px; }
}
@media (max-width: 639px) and (min-height: 700px) {
  .heroi--home .heroi__janela .janela { height: clamp(180px, 26svh, 230px); }
}
@media (min-width: 980px) {
  .heroi--home .heroi__publico { font-size: 0.9375rem; }
}
/* celular em pé: a janela da base (13 §6.2, 200 a 260 px) já deixa o dock na primeira tela em
   390x700. Abaixo de 700 px de altura ela encolhe um pouco para os dois produtos caberem. */
@media (max-width: 979px) and (min-height: 601px) and (max-height: 699px) {
  .heroi--home .heroi__janela .janela { height: clamp(150px, 23svh, 170px); }
}
/* 320 px de pé com 601 a 700 px de altura: o H1 e o lead quebram em mais linhas; a faixa e o vão
   até a maré encolhem para os dois produtos aparecerem inteiros */
@media (max-width: 359px) and (min-height: 601px) and (max-height: 700px) and (orientation: portrait) {
  .heroi--home .heroi__janela .janela { height: 136px; }
  .heroi--home .heroi__texto { gap: 12px; padding-bottom: 34px; }
}
/* tablet em pé: a faixa de 260 px num quadro de 768 cortava os rostos na testa e no queixo.
   Ela cresce até perto do 16:9 do vídeo, e o dock continua na primeira tela */
@media (min-width: 640px) and (max-width: 979px) and (min-height: 800px) {
  .heroi--home .heroi__janela .janela { height: min(56.25vw, 36svh); }
}
/* celular baixo em pé (iPhone SE, 320x568): faixa mais fina, menos espaço entre o lead e a maré
   e o dock mais perto da onda, para o Next Level e o Party Pass aparecerem inteiros na primeira tela */
@media (max-width: 767px) and (max-height: 600px) and (orientation: portrait) {
  .heroi--home .heroi__janela .janela { height: 72px; }
  .heroi--home .heroi__lead { font-size: 1rem; }
  .heroi--home .heroi__texto { gap: 8px; padding-bottom: 20px; }
  .heroi--home .heroi__titulo { gap: 10px; }
  .heroi--home + .mare-bloco--sol .dock { padding-top: 8px; }
  .heroi--home + .mare-bloco--sol .dock__painel { min-height: 0; gap: 4px; padding-block: 10px; }
  .heroi--home + .mare-bloco--sol .dock__produto { padding-block: 4px 2px; }
  /* com a faixa de 72 px, a data girada sobe até o canto direito e cobria a pausa: a pausa vai para o
     canto de cima à esquerda, onde a etiqueta está mais baixa (integração de 21/10, 320x568) */
  .heroi--home .heroi__janela .janela__pausa { top: 6px; right: auto; left: 12px; }
}
@media (min-width: 980px) {
  /* o texto fica no meio da parte da janela que a maré não cobre: sem o vão de 130 px embaixo do lead */
  .heroi--home .heroi__texto { align-self: center; padding-bottom: 24px; }
  .heroi--home .heroi__titulo { gap: 26px; }
  /* o lead chega à coluna 7 e fecha o vão até a janela */
  .heroi--home .heroi__lead { max-width: 30em; }
  /* a maré sobe sobre o pé da janela (e o scrub a afunda mais um pouco): a pausa fica no canto de cima */
  .heroi--home .heroi__janela .janela__pausa { top: 12px; bottom: auto; }
}

/* carimbo da etiqueta de data: de -16° e 1,06 para -8° e 1 (09 §16.4). O H1 não anima (LCP). */
@keyframes home-carimbo {
  from { opacity: 0; transform: rotate(-8deg) scale(1.06); }
}
@keyframes home-sobe {
  from { opacity: 0; translate: 0 16px; }
}
@keyframes home-sobe-dock {
  from { opacity: 0; translate: 0 24px; }
}
@keyframes home-crista {
  from { clip-path: inset(0 100% 0 0); }
  to { clip-path: inset(0 0 0 0); }
}
.anima .heroi--home .heroi__titulo .etiqueta { animation: home-carimbo 420ms var(--ease-expo) 300ms both; }
.anima .heroi--home .heroi__lead { animation: home-sobe 600ms var(--ease-expo) 60ms both; }

/* scrub leve da janela: desce 8% e encolhe para 0,97 enquanto o herói sai pelo topo (09 §16.4).
   Sem GSAP: animation-timeline ligada à saída do herói. Sem suporte (Safari até o 18, Firefox),
   com movimento reduzido ou com a pausa, a janela fica parada. Sem pin e sem sequestro de rolagem. */
@keyframes home-scrub {
  to { translate: 0 8%; scale: 0.97; }
}
@supports (animation-timeline: view()) {
  @media (min-width: 980px) and (prefers-reduced-motion: no-preference) {
    /* inset 0: sem ele a linha do tempo desconta o scroll-padding-top da nav e a janela já sai torta na carga */
    .heroi--home { view-timeline: --home-heroi block; view-timeline-inset: 0; }
    html:not(.is-pausado) .heroi--home .heroi__janela .janela {
      animation: home-scrub linear both;
      animation-timeline: --home-heroi;
      animation-range: exit 0% exit 100%;
    }
  }
}

/* ---------------------------------------------------------------- 2. maré de sol e dock */
.mare-bloco--sol .mare { padding-bottom: 40px; }
.anima .mare-bloco--sol .mare__crista { animation: home-crista 900ms var(--ease-out) 300ms both; }

/* celular: um painel branco só, com as duas linhas (09 §11.1, linha de 76 px) */
.dock { display: grid; padding-top: 20px; }
.dock__painel {
  position: relative;
  display: grid;
  justify-items: start;
  align-content: center;
  gap: 6px;
  min-height: 76px;
  padding: 14px 72px 14px 18px;
  background: var(--wk-branco);
  color: var(--wk-grafite);
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  transition: transform 120ms var(--ease-out);
}
.dock__painel:first-child { border-radius: var(--r-midia) var(--r-midia) 0 0; }
.dock__painel:last-child { border-radius: 0 0 var(--r-midia) var(--r-midia); }
/* cores distintas (15 §02): cada painel na tinta do produto. Texto grafite (13,1:1 e 13,8:1) e
   grafite-2 (6,3:1 e 6,6:1); o nome do produto em campo cheio (.produto--cheio, base) */
.dock__painel--nl { background: var(--wk-pink-claro); }
.dock__painel--pp { background: var(--wk-laranja-claro); }
.dock__painel:active { transform: scale(0.985); }
.dock__painel:focus-visible { outline-color: var(--wk-grafite); z-index: 1; }
/* nome de produto em campo cheio, 17 px dentro do painel (15 §02: a cor separa os dois produtos) */
.dock__produto { font-size: 1.0625rem; letter-spacing: 0.03em; }
.dock__inclui { font-size: var(--t-legenda); font-weight: 500; line-height: 1.3; color: var(--wk-grafite-2); text-wrap: pretty; }
.dock__preco { font-size: 1.0625rem; font-weight: 600; line-height: 1.25; text-wrap: balance; }
.dock__preco b { font-weight: 700; }
.dock__seta {
  position: absolute;
  right: 16px;
  top: 50%;
  translate: 0 -50%;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
}
.dock__seta .i { width: 22px; height: 22px; transition: translate 200ms var(--ease-out); }
.dock__painel--nl .dock__seta { background: var(--wk-pink-forte); color: var(--wk-branco); }
.dock__painel--pp .dock__seta { background: var(--wk-laranja); color: var(--wk-grafite); }
@media (hover: hover) and (pointer: fine) {
  .dock__painel:hover .dock__seta .i { translate: 3px 0; }
}
/* celular baixo (navegador do Instagram, cerca de 700 px úteis): a linha do que inclui sai do dock
   para os dois produtos caberem na primeira tela; o comparador logo abaixo explica tudo */
@media (max-width: 767px) and (max-height: 780px) {
  .dock { padding-top: 12px; }
  .dock__inclui { display: none; }
  .dock__painel { min-height: 72px; gap: 6px; padding-block: 12px; }
}
/* 320 px: "NEXT LEVEL EXPERIENCE" fica numa linha com a seta mais perto da borda */
@media (max-width: 359px) {
  .dock__painel { padding-right: 60px; padding-left: 16px; }
  .dock__seta { right: 10px; }
  /* "R$ 1.299 + taxa · lote atual" cabe numa linha, sem quebrar depois do "+" */
  .dock__preco { font-size: 0.9375rem; }
  /* o nome em campo cheio numa linha só: "NEXT LEVEL EXPERIENCE" em 15 px com 8 px de lado */
  .dock__produto { font-size: 0.9375rem; letter-spacing: 0.02em; padding-inline: 8px; }
}
@media (min-width: 768px) {
  .dock { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--vao); padding-top: 32px; }
  .dock__painel,
  .dock__painel:first-child,
  .dock__painel:last-child { border: 0; border-radius: var(--r-midia); }
  /* os dois nomes de produto na mesma altura, mesmo quando um painel quebra mais linhas */
  .dock__painel { align-content: start; gap: 12px; min-height: 156px; padding: 28px 100px 28px 28px; }
  /* no tablet o preço quebra: sem a quebra depois do "+" e sem palavra sozinha na última linha */
  .dock__preco { text-wrap: pretty; }
  .dock__inclui { font-size: 1.0625rem; color: var(--wk-grafite); }
  .dock__preco { font-size: var(--t-preco-lista); }
  .dock__seta { right: 28px; width: 52px; height: 52px; }
}
@media (min-width: 768px) and (max-width: 979px) {
  .dock__painel { padding-right: 84px; }
  .dock__preco { font-size: 1.25rem; }
  .dock__seta { right: 22px; width: 48px; height: 48px; }
}
.anima .dock__painel { animation: home-sobe-dock 400ms var(--ease-out) 180ms both; }
.anima .dock__painel + .dock__painel { animation-delay: 240ms; }

/* ---------------------------------------------------------------- 3. #escolha, o comparador */
/* ligado ao dock (em cima) e ao lugar (embaixo): respiro menor que o de troca de assunto */
.escolha { padding-block: calc(var(--secao) * 0.75) calc(var(--secao) * 0.5); }
.escolha__topo {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px 16px;
}
.escolha__cab { grid-column: 1 / -1; display: grid; gap: 14px; max-width: 760px; }
.escolha__foto { margin: 0; min-width: 0; }
.escolha__foto img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: var(--r-foto);
  background: var(--fundo-alterno);
}
.comparador {
  width: 100%;
  margin-top: 16px;
  border-collapse: collapse;
  text-align: left;
  font-size: 1.0625rem;
  line-height: 1.45;
}
.comparador th,
.comparador td { vertical-align: top; font-weight: 400; }
.comparador tbody th { font-weight: 600; }
.comparador__preco { font-weight: 600; }
.comparador__preco b { font-weight: 700; }
.comparador .produto { display: block; white-space: normal; text-align: left; }
.comparador__inteiro { white-space: nowrap; }
/* o que o Party Pass não inclui: cinza e com x, sem o peso do que o Next Level inclui */
.comparador__nao {
  display: inline-flex;
  align-items: flex-start;
  gap: 8px;
  color: var(--wk-grafite-2);
}
.comparador__nao .i { flex: none; width: 16px; height: 16px; margin-top: 0.22em; }
/* "Para quem é" abre a tabela um pouco maior: é a primeira coisa que separa os dois */
.comparador tr[data-linha="quem"] td { font-size: 1.125rem; font-weight: 500; }
/* colunas de cor (15 §02): a cabeça em campo cheio e o corpo na tinta do produto. Pink-forte com
   branco (4,58:1), laranja com grafite (6,70:1); na tinta, grafite (13,1 e 13,8:1) e grafite-2 (6,3 e
   6,6:1). Texto pink-forte ou laranja-forte não entra na tinta */
.comparador__produto.comparador__nl { background: var(--wk-pink-forte); color: var(--wk-branco); }
.comparador__produto.comparador__pp { background: var(--wk-laranja); color: var(--wk-grafite); }
.comparador__produto .produto { color: inherit; }
.comparador tbody .comparador__nl { background: var(--wk-pink-claro); }
.comparador tbody .comparador__pp { background: var(--wk-laranja-claro); }
/* um benefício por linha (15 §02); a nota da quinta festa embaixo do número */
.comparador__itens { display: grid; gap: 4px; }
.comparador__extra { display: block; margin-top: 4px; font-size: var(--t-legenda); line-height: 1.4; color: var(--wk-grafite-2); }
/* o rótulo dentro da célula é só do celular */
.comparador__rotulo { display: none; }
.escolha__nota { margin-top: 20px; max-width: 72ch; }

/* celular: as duas colunas correm inteiras, lado a lado, do nome ao "Como compra" (15 §02). O rótulo
   da linha sai da largura total (o <th> fica só para o leitor de tela) e entra no alto de cada célula
   (.comparador__rotulo, aria-hidden). O fio entre blocos fica dentro da coluna, na cor do produto. */
@media (max-width: 767px) {
  .comparador,
  .comparador thead,
  .comparador tbody,
  .comparador tfoot,
  .comparador tr,
  .comparador th,
  .comparador td { display: block; }
  .comparador { font-size: 1rem; }
  .comparador__canto { display: none !important; }
  .comparador .comparador__so-largo { display: none; }
  .comparador thead {
    position: sticky;
    top: var(--nav-h);
    z-index: var(--z-trilho);
    padding-top: 8px;
    background: var(--fundo);
  }
  .comparador thead tr,
  .comparador tbody tr {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 8px;
  }
  /* os dois nomes alinhados por baixo: "NEXT LEVEL EXPERIENCE" quebra em duas linhas, "PARTY PASS" não */
  .comparador__produto { display: flex; align-items: flex-end; padding: 14px 12px 10px; border-radius: 14px 14px 0 0; }
  .comparador thead .produto { font-size: 1rem; letter-spacing: 0.03em; }
  .comparador tbody th {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  .comparador__rotulo { display: block; margin-bottom: 4px; font-size: var(--t-legenda); font-weight: 600; line-height: 1.3; color: var(--wk-grafite-2); }
  .comparador tbody td { padding: 8px 12px; }
  .comparador__bloco > tr:first-child > td { padding-top: 16px; }
  .comparador__bloco > tr:last-child > td { padding-bottom: 16px; }
  .comparador__bloco + .comparador__bloco > tr:first-child > .comparador__nl { box-shadow: inset 0 1px rgb(231 4 95 / .22); }
  .comparador__bloco + .comparador__bloco > tr:first-child > .comparador__pp { box-shadow: inset 0 1px rgb(195 85 5 / .22); }
  .comparador__bloco--compra td { border-radius: 0 0 14px 14px; }
  .comparador tr[data-linha="quem"] td { font-size: 1rem; }
  .comparador tfoot tr { display: grid; gap: 12px; padding-top: 24px; }
}
/* tablet e desktop: rótulos em 3 das 12 colunas, Next Level e Party Pass com 4,5 cada, mesmo peso.
   As fotos do topo seguem as mesmas proporções (2fr 3fr 3fr) para ficar em cima de cada coluna.
   Colunas de cor (15 §02): a tabela vira "separate" para cada coluna ter o próprio campo e o raio;
   o vão entre elas é o border-spacing, e a margem negativa devolve a largura de antes. */
@media (min-width: 768px) {
  /* o vão entre as fotos é o mesmo da tabela: cada foto fica exatamente em cima da sua coluna de cor */
  .escolha__topo { grid-template-columns: 2fr 3fr 3fr; gap: 40px var(--vao); }
  .escolha__foto--nl { grid-column: 2; }
  .escolha__foto img { border-radius: var(--r-midia); }
  .comparador {
    table-layout: fixed;
    border-collapse: separate;
    border-spacing: var(--vao) 0;
    width: calc(100% + 2 * var(--vao));
    margin: 8px calc(-1 * var(--vao)) 0;
  }
  .comparador .comparador__so-celular { display: none; }
  .comparador th,
  .comparador td { width: 37.5%; padding: 12px 24px; }
  .comparador tbody th,
  .comparador .comparador__canto { width: 25%; padding-inline: 0; }
  /* fio só entre blocos: no rótulo em grafite 12%; dentro da coluna, na cor do produto */
  .comparador__bloco + .comparador__bloco > tr:first-child > * { border-top: 1px solid var(--wk-linha); }
  .comparador__bloco + .comparador__bloco > tr:first-child > .comparador__nl { border-top-color: rgb(231 4 95 / .22); }
  .comparador__bloco + .comparador__bloco > tr:first-child > .comparador__pp { border-top-color: rgb(195 85 5 / .22); }
  .comparador__bloco tr:first-child > * { padding-top: 28px; }
  .comparador__bloco tr:last-child > * { padding-bottom: 28px; }
  .comparador tr[data-linha="preco"] > * { padding-block: 28px 14px; vertical-align: baseline; }
  .comparador tr[data-linha="preco"] th { vertical-align: baseline; }
  /* a cabeça (nomes, sem as fotos) fica presa embaixo da nav enquanto as linhas rolam */
  .comparador thead th,
  .comparador thead td {
    position: sticky;
    top: var(--nav-h);
    z-index: var(--z-trilho);
    padding-block: 20px 16px;
    background-color: var(--fundo);
  }
  .comparador thead .comparador__produto { border-radius: var(--r-midia) var(--r-midia) 0 0; }
  .comparador thead .produto { font-size: var(--t-produto); }
  .comparador__preco { font-size: var(--t-preco-lista); line-height: 1.25; }
  /* o pé fecha cada coluna na tinta, com o raio embaixo e o botão dentro */
  .comparador tfoot td { padding-block: 28px; }
  .comparador tfoot .comparador__nl { background: var(--wk-pink-claro); box-shadow: inset 0 1px rgb(231 4 95 / .22); border-radius: 0 0 var(--r-midia) var(--r-midia); }
  .comparador tfoot .comparador__pp { background: var(--wk-laranja-claro); box-shadow: inset 0 1px rgb(195 85 5 / .22); border-radius: 0 0 var(--r-midia) var(--r-midia); }
  .comparador tfoot .btn { width: 100%; max-width: 380px; white-space: normal; }
}
/* desktop largo: o título ocupa a coluna dos rótulos, ao lado das fotos, e não deixa um vão em branco.
   "Weekend Festival." fica numa linha só (Weekend&nbsp;Festival no HTML, revisão de 21/10): a letra encolhe
   com a coluna (12cqi deixa os 8,1 em da marca em 97% dela) e o título fica em 3 linhas. De 980 a 1279 a
   coluna é estreita demais para isso (a letra cairia a 26 px): o título fica em cima, na largura toda,
   como no tablet. */
@media (min-width: 1280px) {
  .escolha__cab { grid-column: 1; grid-row: 1; align-self: end; container-type: inline-size; }
  .escolha__cab h2 { font-size: clamp(2rem, 0.5rem + 2.6vw, 3rem); }
  @supports (font-size: 1cqi) {
    .escolha__cab h2 { font-size: min(clamp(2rem, 0.5rem + 2.6vw, 3rem), 12cqi); }
  }
  .escolha__foto--nl { grid-row: 1; }
  .escolha__foto--pp { grid-row: 1; }
}

/* ---------------------------------------------------------------- 4. #lugar */
/* a galeria logo abaixo traz o respiro cheio no topo dela: aqui o pé fica sem padding */
.lugar { padding-bottom: 0; }
.lugar__foto { max-width: 1600px; margin-inline: auto; background: var(--fundo-alterno); }
.lugar__foto img { width: 100%; height: auto; }
@media (min-width: 768px) {
  /* 13 §6.3: a foto sangrada não passa de 720 px de altura em tela larga */
  .lugar__foto img { max-height: 720px; object-fit: cover; }
}
.lugar__trilho { display: grid; justify-items: start; gap: 18px; }
.lugar__legenda { margin-top: 10px; margin-bottom: 6px; text-wrap: balance; }
/* feedback de 21/10: a foto do desktop (a Praia Mole de cima) e a do celular (o complexo com a Lagoa)
   são quadros diferentes, cada um com a sua legenda. O corte é o mesmo do <source> do <picture> (768 px). */
.lugar__legenda-larga { display: none; }
@media (min-width: 768px) {
  .lugar__legenda-larga { display: inline; }
  .lugar__legenda-celular { display: none; }
}
.lugar__texto { max-width: 52ch; font-size: var(--t-lead); line-height: 1.45; text-wrap: pretty; }
.lugar__fatos { display: grid; gap: 12px; margin-top: 4px; }
.lugar__fatos li { display: flex; align-items: flex-start; gap: 12px; font-weight: 500; line-height: 1.4; }
.lugar__fatos .i { flex: none; width: 24px; height: 24px; margin-top: -1px; color: var(--wk-azul-forte); }
@media (min-width: 980px) {
  /* o trilho, na cor da página, ocupa a largura toda e sobe 48 px sobre o pé da foto. A legenda abre o trilho,
     logo abaixo da foto e na coluna do texto; os três fatos ficam em linha à direita do título. */
  .lugar__trilho {
    position: relative;
    z-index: var(--z-sobre);
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--vao);
    row-gap: 18px;
    margin: -64px -48px 0;
    padding: 20px 48px 8px;
    border-radius: var(--r-midia);
    background: var(--fundo);
  }
  .lugar__legenda { grid-column: 1 / -1; margin: 0 0 14px; }
  .lugar__trilho > h2,
  .lugar__texto,
  .lugar__link { grid-column: 1 / 8; }
  .lugar__fatos {
    grid-column: 8 / 13;
    grid-row: 2 / 5;
    align-self: center;
    gap: 18px;
    margin: 0;
    padding-left: calc(var(--vao) * 1.5);
    border-left: 1px solid var(--wk-linha);
  }
  .lugar__fatos li { font-size: 1.125rem; }
}

/* ---------------------------------------------------------------- 5. galeria "É a nossa praia." */
/* 13 §2.5: uma seção forte de fotos grandes no lugar do bento. As filas justificadas, o trilho do
   celular, o raio e a revelação por fila são da base (.mosaico, .mosaico--trilho). Aqui só o ritmo:
   respiro cheio em cima e, embaixo, a maré da noite, que sobe 44 px (72 no tablet e desktop) sobre
   o pé desta seção, mais um respiro curto até a onda. */
.nossa-praia { padding-bottom: calc(44px + var(--secao-curta)); }
@media (min-width: 768px) { .nossa-praia { padding-bottom: calc(72px + var(--secao-curta)); } }
/* o título curto fica numa linha; o lead até a medida de texto da base */
.nossa-praia__cab h2 { max-width: none; }

/* ---------------------------------------------------------------- 6. maré da noite (sem texto) */
.noite .mare { padding-bottom: 0; }
.noite__pe { height: 32px; }
@media (min-width: 768px) { .noite__pe { height: 48px; } }

/* ---------------------------------------------------------------- metade grafite: respiro entre seções da mesma cor */
/* o calendário e o line-up são o mesmo assunto (o que tem na festa): respiro curto entre os dois */
.festas { padding-top: calc(var(--secao) * 0.5); padding-bottom: calc(var(--secao) * 0.4); }
.lineup,
.edicoes { padding-top: calc(var(--secao) * 0.4); padding-bottom: calc(var(--secao) * 0.6); }
.festas__lead,
.edicoes__lead { color: var(--texto-2); }

/* ---------------------------------------------------------------- 7. #festas, a programação em grafite */
/* pesquisa/15 §02 e §05: a seção marcada como confusa vira agenda. Título e lead em cima; embaixo, um
   grupo por dia (o número do dia grande, à esquerda no desktop e ao lado do dia da semana no celular) e
   uma linha por festa: turno (sol azul ou lua branca, com o período), nome em Baloo 800, as marcas
   coladas ao nome (selo da SELVA, +18 da HEAT), destaque e local. Nenhuma etiqueta: a seção fica no
   grafite da metade noturna (13 §6.3), sem campo de cor. Fecha com o que cada passe inclui, em duas
   colunas com .produto--fio (Next Level pink-forte, Party Pass laranja). */
.festas__cab { display: grid; gap: 20px; max-width: var(--max-texto); margin-bottom: var(--respiro-cab); }
.agenda { border-top: 2px solid var(--wk-branco); }
.agenda__dia { display: grid; padding-top: 22px; border-bottom: 2px solid var(--divisa); }
.agenda__data {
  display: flex;
  align-items: baseline;
  gap: 12px;
  max-width: none;
  line-height: 1;
}
.agenda__num {
  order: -1;
  font-size: clamp(3rem, 2.2rem + 3.4vw, 5.5rem);
  font-weight: 800;
  line-height: 0.85;
  letter-spacing: -0.02em;
  color: var(--wk-branco);
}
.agenda__semana {
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--texto-2);
}
.festa { display: grid; gap: 8px; padding-block: 22px 24px; }
.festa + .festa { border-top: 1px solid var(--divisa); }
.festa__quando {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--f-voz);
  font-size: var(--t-etiqueta);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.festa__quando .i { flex: none; width: 20px; height: 20px; }
.festa--dia .festa__quando { color: var(--wk-azul); }
.festa--noite .festa__quando { color: var(--wk-branco); }
.festa__titulo { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.festa__nome {
  font-size: clamp(1.75rem, 1.35rem + 1.7vw, 2.75rem);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.01em;
  color: var(--wk-branco);
}
.festa__titulo .selo-selva { --selo: 64px; margin-block: -6px; }
.festa__info { display: grid; gap: 4px; }
.festa__destaque { font-size: 1.125rem; font-weight: 500; line-height: 1.35; color: var(--wk-branco); text-wrap: pretty; }
.festa__local {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--t-legenda);
  font-weight: 500;
  line-height: 1.35;
  color: var(--texto-2);
}
.festa__local .i { flex: none; width: 16px; height: 16px; }

/* o que cada passe inclui */
.festas-passes { display: grid; gap: 36px; margin-top: clamp(44px, 5vw, 72px); }
/* as duas colunas com a mesma altura: o nome em cima, o texto no meio e o link no pé, alinhados */
.festas-passes__item { display: grid; grid-template-rows: auto 1fr auto; justify-items: start; align-items: start; gap: 14px; }
.festas-passes__texto { max-width: 34ch; font-size: var(--t-lead); line-height: 1.4; color: var(--wk-branco); text-wrap: pretty; }
@media (min-width: 768px) {
  .festas-passes { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: calc(var(--vao) * 2); }
}

@media (min-width: 980px) {
  .festas__cab {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--vao);
    align-items: end;
    max-width: none;
  }
  .festas__cab h2 { grid-column: 1 / 7; }
  .festas__cab .festas__lead { grid-column: 8 / 13; }
  .agenda__dia {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--vao);
    padding-top: 0;
  }
  .agenda__data {
    grid-column: 1 / 3;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding-top: 30px;
  }
  .agenda__num { order: 0; }
  .agenda__festas { grid-column: 3 / 13; }
  .festa {
    grid-template-columns: repeat(10, minmax(0, 1fr));
    column-gap: var(--vao);
    align-items: center;
    min-height: 128px;
    padding-block: 28px;
  }
  .festa__quando { grid-column: 1 / 3; }
  .festa__titulo { grid-column: 3 / 8; flex-wrap: nowrap; }
  .festa__info { grid-column: 8 / 11; }
  .festa__titulo .selo-selva { --selo: 80px; margin-block: -14px; }
  .festas-passes { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--vao); }
  .festas-passes__item--nl { grid-column: 3 / 8; }
  .festas-passes__item--pp { grid-column: 8 / 13; }
}

/* 980 a 1199 px: o nome da SELVA quebra em duas linhas; selo menor e destaque em 16 px para o selo não
   encostar na coluna do local */
@media (min-width: 980px) and (max-width: 1199px) {
  .festa__titulo .selo-selva { --selo: 64px; margin-block: -6px; }
  .festa__destaque { font-size: 1rem; }
}

/* reserva (sem a programação): os três dias e a contagem por turno, um bloco só */
.festas-cal--reserva { display: grid; gap: 16px; }
.festas-cal__datas { display: flex; flex-wrap: wrap; gap: 8px; }
@media (min-width: 400px) {
  .festas-cal__datas { gap: 10px; }
  .festas-cal__datas .etiqueta { min-height: 40px; padding-inline: 16px; font-size: 1.0625rem; }
}
.festas-cal__resumo { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; }
.festas-cal__falta { font-weight: 500; line-height: 1.4; color: var(--texto-2); }

/* ---------------------------------------------------------------- 8. #lineup */
/* O cartaz e a arte do line-up moram no base.css (o /ingressos usa o mesmo componente). */

/* ---------------------------------------------------------------- 9. "Quem foi, volta.", trilho de edições */
.edicoes__cab { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 32px; }
.edicoes__titulos { display: grid; gap: 14px; max-width: 760px; }
/* setas só de 768 a 979 px e com mouse: abaixo, o trilho rola no dedo; acima, os 4 cartões cabem */
.edicoes__setas { display: none; flex: none; gap: 12px; }
.edicoes__seta {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  padding: 0;
  border: 2px solid currentColor;
  border-radius: 50%;
  background: none;
  color: var(--wk-branco);
  cursor: pointer;
  transition: background-color 180ms var(--ease-out), transform 120ms var(--ease-out);
}
.edicoes__seta .i { width: 22px; height: 22px; }
.edicoes__seta--antes .i { rotate: 180deg; }
.edicoes__seta:active { transform: scale(0.94); }
@media (min-width: 768px) and (max-width: 979px) and (hover: hover) and (pointer: fine) {
  .edicoes__setas { display: flex; }
  .edicoes__seta:hover { background: rgb(255 255 255 / .12); }
}
.edicoes__trilho {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: max(var(--margem), calc((100vw - var(--max)) / 2));
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.edicoes__trilho::-webkit-scrollbar { display: none; }
.edicoes__trilho:focus-visible { outline-offset: -3px; }
/* .edicoes__trilho na frente: a base zera o padding de ul[role="list"] com mais especificidade */
.edicoes__trilho .edicoes__lista {
  display: flex;
  align-items: flex-start;
  gap: var(--vao);
  width: max-content;
  padding-block: 4px 8px;
  /* vw: o trilho ocupa a largura toda da tela, e o conteúdo começa na mesma linha da grade */
  padding-inline: max(var(--margem), calc((100vw - var(--max)) / 2));
}
.edicoes__item { flex: none; width: min(300px, 70vw); scroll-snap-align: start; }
.edicao .video-sob { aspect-ratio: 9 / 16; }
/* desktop: os 4 cartões cabem na grade, sem rolagem lateral */
@media (min-width: 980px) {
  .edicoes__trilho { overflow: visible; scroll-snap-type: none; }
  .edicoes__trilho .edicoes__lista {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    width: auto;
    max-width: calc(var(--max) + 2 * var(--margem));
    margin-inline: auto;
    padding-inline: var(--margem);
  }
  .edicoes__item { width: auto; }
}
/* o que disse quem foi: bloco à parte, depois do trilho (comentários no Instagram do Weekend) */
.edicoes__citacoes { display: grid; gap: 32px; margin-top: 56px; }
@media (min-width: 768px) {
  .edicoes__citacoes { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(var(--vao) * 2); margin-top: 72px; }
}
.citacao { display: grid; align-content: start; gap: 14px; padding-top: 20px; border-top: 2px solid var(--wk-azul); }
.citacao__texto { margin: 0; }
.citacao__texto p {
  font-family: var(--f-voz);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.25;
  max-width: 22ch;
  text-wrap: pretty;
  color: var(--wk-branco);
}
.citacao__texto p::before { content: "\201C"; color: var(--wk-azul); }
.citacao__texto p::after { content: "\201D"; color: var(--wk-azul); }
.citacao__autor { font-size: var(--t-legenda); font-weight: 500; color: var(--wk-cinza-noite); }

/* ---------------------------------------------------------------- 10. #escolha-final, duas metades na cor do produto */
/* Feedback de 21/10 (15 §02, cores distintas): as metades voltam ao pink-forte e ao laranja cheios do
   09 §11.10 (no HTML, .fundo-pink e .fundo-laranja). Texto branco no pink-forte (4,58:1) e grafite no
   laranja (6,70:1); os botões seguem a exceção de superfície da base (branco com texto pink-forte;
   grafite com texto branco). A contagem e o H2 ficam no grafite, e a página continua terminando no
   grafite das dúvidas. */
.final__cab { padding-block: calc(var(--secao) * 0.4) 48px; }
.final__cab .miolo { display: grid; justify-items: start; gap: 14px; }
.final__contagem {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
  font-family: var(--f-voz);
  font-size: var(--t-h3);
  font-weight: 700;
  line-height: 1.1;
  color: var(--wk-azul);
}
.final__contagem .i { width: 24px; height: 24px; margin-top: -2px; }
.final__contagem span { padding-top: 0.1em; }
.final__metades { display: grid; }
.final__metade { padding: 48px var(--margem) 56px; }
.final__in { display: grid; justify-items: start; gap: 12px; max-width: 540px; }
.final__inclui { max-width: 34ch; font-size: 1.125rem; font-weight: 400; line-height: 1.45; color: var(--texto-2); }
.final__preco { margin-top: 6px; font-size: var(--t-lead); font-weight: 500; line-height: 1.3; text-wrap: pretty; }
.final__preco b {
  font-family: var(--f-voz);
  font-size: 1.75em;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
}
.final__nota { font-size: var(--t-legenda); font-weight: 500; line-height: 1.4; color: var(--texto-2); text-wrap: pretty; }
.final__nota--reserva { font-size: 1.0625rem; max-width: 38ch; }
.final__metade .btn { margin-top: 14px; }
@media (min-width: 980px) {
  .final__metades { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .final__metade { padding-block: clamp(56px, 7vw, 104px); }
  /* o conteúdo de cada metade cai na grade da página, mesmo com a cor sangrada */
  .final__metade--nl { padding-inline: max(var(--margem), calc(50vw - var(--max) / 2)) calc(var(--vao) * 2); }
  .final__metade--pp { padding-inline: calc(var(--vao) * 2) max(var(--margem), calc(50vw - var(--max) / 2)); }
}

/* ---------------------------------------------------------------- 11. #duvidas */
.duvidas { padding-top: calc(var(--secao) * 0.7); }
.duvidas__grade { display: grid; gap: 28px; }
.duvidas__wa { margin-top: 32px; }
@media (min-width: 980px) {
  .duvidas__grade { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--vao); }
  .duvidas__grade > h2 { grid-column: 1 / 5; }
  .duvidas__lista { grid-column: 5 / 13; }
}

/* ---------------------------------------------------------------- pausa e movimento reduzido */
/* .anima some com a pausa e nunca existe com movimento reduzido: as entradas acima viram estado final.
   O scrub do herói só existe com movimento permitido e sem a pausa. O trilho de edições rola seco
   quando a pessoa pede menos movimento. */
@media (prefers-reduced-motion: reduce) {
  .edicoes__trilho { scroll-behavior: auto; }
  .dock__painel, .edicoes__seta { transition: none; }
  .dock__painel:active, .edicoes__seta:active { transform: none; }
}

/* links soltos dentro das respostas do FAQ (parágrafo só com o link, .faq__solo): alvo de 44 px. O
   :only-child não serve, porque não conta o texto: pegava o link no meio da frase e abria um vão entre
   as linhas ("programação", "referência LGBTQ+ no país"). Link dentro da frase fica na linha. */
.duvidas .faq__solo > a { display: inline-flex; align-items: center; min-height: 44px; }

.festas-cal__idade { margin-top: 1.5rem; }

/* Feedback de 23/10 (reunião com a Mari): "um em azul, outro em rosa". Na home, onde os dois produtos
   aparecem lado a lado (dock, comparador, metades finais e passes do #festas), o Party Pass sai em azul
   e o Next Level segue em pink. Grafite sobre o azul #41BBFA passa de 8:1. /ingressos continua laranja. */
.dock__painel--pp { background: var(--wk-azul-claro-2); }
.dock__painel--pp .dock__seta { background: var(--wk-azul); color: var(--wk-grafite); }
.dock .produto--pp, .comparador .produto--pp, .festas-passes .produto--pp { --cor-produto: var(--wk-azul); }
.comparador__produto.comparador__pp { background: var(--wk-azul); color: var(--wk-grafite); }
.comparador tbody .comparador__pp { background: var(--wk-azul-claro-2); }
.comparador tfoot .comparador__pp { background: var(--wk-azul-claro-2); }
.comparador__bloco + .comparador__bloco > tr:first-child > .comparador__pp { box-shadow: inset 0 1px rgb(5 125 188 / .25); border-top-color: rgb(5 125 188 / .25); }
.final__metade--pp.fundo-azul { --fundo: var(--wk-azul); --texto: var(--wk-grafite); --texto-2: var(--wk-grafite); --foco: var(--wk-grafite); --link: var(--wk-grafite); }

/* Weekend Festival on Tour (27/10, ajustado após o feedback da Mari): a seção é clara para quebrar a sequência de blocos
   escuros e cada cartão tem a sua cor (Fortaleza laranja, HEAT pink, Chile azul), em faixa no topo e nos rótulos. */
.tour__cab { display: grid; gap: 12px; margin-bottom: clamp(28px, 4vw, 48px); }
.tour__grade { display: grid; gap: 20px; grid-template-columns: 1fr; padding: 0; margin: 0; list-style: none; }
.tour__item { display: flex; --tc: var(--wk-azul-forte); --tf: var(--wk-azul-claro); }
.tour__item:nth-child(1) { --tc: var(--wk-laranja-escuro); --tf: var(--wk-laranja-claro); --tb: var(--wk-laranja); }
.tour__item:nth-child(2) { --tc: var(--wk-pink-escuro); --tf: var(--wk-pink-claro); --tb: var(--wk-pink); }
.tour__item:nth-child(3) { --tc: var(--wk-azul-forte); --tf: var(--wk-azul-claro); --tb: var(--wk-azul); }
.tour__card {
  display: flex; flex-direction: column; gap: 12px; width: 100%;
  padding: clamp(20px, 2.4vw, 32px); border-radius: 14px;
  background: var(--tf); color: var(--texto);
  border: 1px solid var(--divisa); border-top: 6px solid var(--tb, var(--wk-azul));
  box-shadow: 0 18px 40px -26px rgb(2 50 63 / .35);
}
.tour__quando { margin: 0; font: 600 .8125rem/1.2 var(--f-texto, inherit); letter-spacing: .14em; text-transform: uppercase; color: var(--tc); }
.tour__nome { margin: 0; font-size: clamp(1.5rem, 2.4vw, 2rem); line-height: 1.05; }
.tour__cidade { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--texto-2); }
.tour__cidade .i { width: 1.1em; height: 1.1em; color: var(--tc); flex: none; }
.tour__destaque { margin: 0; font-style: italic; color: var(--texto-2); }
.tour__festas { display: grid; gap: 0; padding: 0; margin: 8px 0 0; list-style: none; border-top: 1px solid var(--divisa); }
.tour__festa { display: grid; gap: 2px; padding: 12px 0; border-bottom: 1px solid var(--divisa); }
.tour__dia { font: 600 .75rem/1.2 var(--f-texto, inherit); letter-spacing: .14em; text-transform: uppercase; color: var(--tc); }
.tour__festa-nome { font-weight: 700; font-size: 1.0625rem; }
.tour__festa-info { color: var(--texto-2); font-size: .9375rem; }
.tour__lineup { margin: 4px 0 0; line-height: 1.5; }
.tour__rotulo { display: block; margin-bottom: 4px; font: 600 .75rem/1.2 var(--f-texto, inherit); letter-spacing: .14em; text-transform: uppercase; color: var(--tc); }
.tour__idade, .tour__nota { margin: 0; font-size: .875rem; color: var(--texto-2); }
.tour__btn { margin-top: auto; align-self: flex-start; }
.tour__card > .tour__btn { margin-top: 12px; }
.tour__item:nth-child(1) .btn { --cor: var(--wk-laranja); --cor-texto: var(--wk-grafite); }
.tour__item:nth-child(2) .btn { --cor: var(--wk-pink-forte); --cor-texto: var(--wk-branco); }
@media (min-width: 900px) { .tour__grade { grid-template-columns: repeat(3, 1fr); } }