/* ==========================================================================
   Weekend Festival 2027 · base compartilhada das 3 páginas
   "Primeiro o lugar, logo depois a conta inteira, sem asterisco."
   Tokens, fontes, base e componentes. Cada página soma o próprio
   /assets/css/<pagina>.css. Especificação: pesquisa/09-direcao-design.md
   (resumo em DESIGN.md). Contrato dos componentes: pesquisa/11-contrato-front.md.
   Acabamento premium (13-midia-lgbt §6.2, 19/10/2026): contenção, menos e maior, respiro.
   Tokens de título, lead, seção e margem maiores; H2 em 700; botão sem escurecer no hover;
   nome de produto com fio (.produto--fio); fila justificada de fotos (.mosaico) e faixa de
   foto sangrada (.faixa-foto).
   Feedback da cliente de 21/10/2026 (pesquisa/15): nenhuma área de leitura branca (azul-claro ou
   pink-claro pela cor da página, --fundo-pagina e --fundo-alterno, e .fundo-azul-claro /
   .fundo-pink-claro), nome de produto em campo cheio (.produto--cheio), marcas de festa (.selo-selva,
   .festa-idade) e o cartaz do line-up (.cartaz, .lineup-arte).
   Dono: sistema compartilhado. Página não edita este arquivo: pede ao dono.
   ========================================================================== */

/* ---------------------------------------------------------------- fontes (09 §6.1) */
/* Baloo 2 é a voz (títulos, preço, etiquetas, botões); Jost é o trabalho (texto, listas).
   Sem itálico no site: o jost-italic não é carregado. Preload só da baloo2-latin (no <head>). */
@font-face {
  font-family: "Baloo 2";
  src: url("/assets/fonts/baloo2-latin.woff2") format("woff2");
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Baloo 2";
  src: url("/assets/fonts/baloo2-latin-ext.woff2") format("woff2");
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Jost";
  src: url("/assets/fonts/jost-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Jost";
  src: url("/assets/fonts/jost-latin-ext.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* reservas métricas sobre a Arial: a troca de fonte não empurra o herói */
@font-face {
  font-family: "Baloo 2 Reserva";
  src: local("Arial Bold"), local("Arial-BoldMT");
  size-adjust: 94%;
  ascent-override: 114.6%;
  descent-override: 55.7%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Jost Reserva";
  src: local("Arial"), local("ArialMT");
  size-adjust: 95.2%;
  ascent-override: 112.4%;
  descent-override: 39.4%;
  line-gap-override: 0%;
}

/* ---------------------------------------------------------------- tokens (09 §5.1, §6.3, §8) */
:root {
  /* marca, HEX escritos no manual [M p.4]; se o designer oficializar os exportados, troca aqui */
  --wk-azul: #41BBFA;
  --wk-laranja: #FA8F41;
  --wk-pink: #FB2E80;
  --wk-grafite: #26241F;
  --wk-teal: #014655;
  /* derivadas funcionais: mesmo matiz, 4,5:1 sobre branco */
  --wk-pink-forte: #E7045F;
  --wk-azul-forte: #057DBC;
  --wk-laranja-forte: #C35505;
  /* neutros: névoa de croma zero, nunca bege. Desde 21/10/2026 (pesquisa/15 §01) nenhuma área de
     leitura é branca nem névoa: branco fica para texto e controle sobre cor; névoa, só no styleguide */
  --wk-branco: #FFFFFF;
  --wk-nevoa: #F4F4F4;
  /* claros da marca (pesquisa/15 §01): as superfícies que eram brancas ou névoa. Grafite, grafite-2 e
     teal passam em todos; texto pink ou laranja pequeno usa os -escuro abaixo, e só nos claros base.
     Definidos só aqui (as tintas da frente pacotes são os mesmos tokens, consolidado C14) */
  --wk-azul-claro: #E2F5FE;     /* azul #41BBFA a 15% */
  --wk-azul-claro-2: #C6EBFE;   /* azul a 30%: realce sobre azul-claro (hover). Sem texto colorido */
  --wk-pink-claro: #FDE6EF;     /* pink #FB2E80 a 12%: o "rosa" da cliente e a tinta do Next Level */
  --wk-pink-claro-2: #FED1E3;   /* pink a 22%: realce sobre pink-claro (linha aberta). Sem texto colorido */
  --wk-laranja-claro: #FEEFE4;  /* laranja a 10%: a tinta do Party Pass (coluna e painel do dock) */
  /* texto pequeno de produto sobre os claros (o -forte só passa 4,5:1 no branco puro) */
  --wk-pink-escuro: #D00455;    /* 4,89 no azul-claro, 4,63 no pink-claro, 4,88 no laranja-claro */
  --wk-laranja-escuro: #B04C05; /* 4,82 no azul-claro, 4,57 no pink-claro, 4,81 no laranja-claro */
  --wk-grafite-2: #57554F;
  --wk-cinza-noite: #D6D3CD;
  --wk-linha: rgb(38 36 31 / .12);
  /* o pôr do sol: só na maré de sol, na crista da noite, no canhoto do ingresso e no papel do cartaz
     do line-up (pesquisa/15 §06) */
  --wk-sol: linear-gradient(165deg, var(--wk-laranja) 0%, var(--wk-pink) 100%);

  /* cor da página: a base e a alternada (body[data-page="hospedagem"] inverte). Home, /ingressos e 404
     no azul-claro; /hospedagem no pink-claro (Next Level). --contorno-azul: ver .etiqueta--azul */
  --fundo-pagina: var(--wk-azul-claro);
  --fundo-alterno: var(--wk-pink-claro);
  --contorno-azul: var(--wk-azul-forte);
  /* superfície atual (as classes .fundo-* trocam estes cinco) */
  --fundo: var(--fundo-pagina);
  --texto: var(--wk-grafite);
  --texto-2: var(--wk-grafite-2);
  --foco: var(--wk-azul-forte);
  --link: var(--wk-teal);
  --divisa: var(--wk-linha);

  /* tipo */
  --f-voz: "Baloo 2", "Baloo 2 Reserva", system-ui, sans-serif;
  --f-texto: "Jost", "Jost Reserva", system-ui, sans-serif;
  --t-h1: clamp(2.5rem, 1.5rem + 4.4vw, 5.5rem);            /* 40 a 88: com a janela maior, é o teto */
  --t-h2: clamp(2.125rem, 1.4rem + 3vw, 4rem);              /* 34 a 64 (13 §6.2; era 32 a 56) */
  --t-h3: clamp(1.375rem, 1.2rem + 0.75vw, 1.75rem);
  --t-preco: clamp(2.25rem, 1.7rem + 2.2vw, 3.5rem);
  --t-lead: clamp(1.1875rem, 1.08rem + 0.45vw, 1.4375rem);  /* 19 a 23 (era 19 a 22) */
  --t-corpo: clamp(1.0625rem, 1.03rem + 0.15vw, 1.125rem);
  --t-preco-lista: clamp(1.375rem, 1.3rem + 0.3vw, 1.5rem);
  --t-produto: clamp(1.25rem, 1.15rem + 0.4vw, 1.5rem);
  --t-botao: 1.0625rem;
  --t-faq: 1.25rem;
  --t-etiqueta: 0.9375rem;
  --t-legenda: 0.9375rem;
  --t-nav: 0.9375rem;                     /* links da nav, Jost 500 15 px (era 16) */

  /* forma e espaço */
  --r-etiqueta: 8px;
  --r-controle: 14px;
  --r-midia: 20px;
  --r-foto: 12px;                          /* foto de galeria, card de foto e faixa (13 §6.2) */
  --inclina-marca: -8deg;
  --inclina-leve: -4deg;
  --inclina-objeto: -2deg;
  --margem: clamp(20px, 5vw, 72px);        /* era até 64 */
  --secao: clamp(88px, 11vw, 176px);       /* era 72 a 144: seções mais altas */
  --secao-curta: clamp(56px, 7vw, 96px);   /* passos, faixas finas, fila de 3 fotos */
  --respiro-cab: clamp(32px, 4vw, 64px);   /* do bloco de título (.cab) ao conteúdo */
  --max-texto: 38rem;                      /* lead e texto de seção */
  --max: 1280px;
  --vao: clamp(16px, 2vw, 24px);
  --nav-h: 64px;
  --barra-h: 72px;
  --sombra-fixa: 0 -8px 24px rgb(38 36 31 / .12);

  /* movimento */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);

  /* camadas, em ordem: nada de 999 */
  --z-sobre: 1;      /* crista da maré, etiqueta montada na janela */
  --z-selo: 5;       /* selo "a validar" do ?revisao=1: acima do conteúdo, abaixo do trilho e da nav */
  --z-trilho: 10;    /* trilho fixo do seletor e cabeçalhos sticky */
  --z-nav: 20;
  --z-buybar: 25;
  --z-toast: 30;
  --z-menu: 35;
  --z-pular: 40;
  --z-revisao: 45;

  color-scheme: light;
}
@media (min-width: 980px) {
  :root { --nav-h: 72px; }
}
/* celular deitado (568x320, zoom de 200%): nav mais baixa para sobrar tela de leitura */
@media (orientation: landscape) and (max-height: 500px) and (max-width: 979px) {
  :root { --nav-h: 52px; }
}
/* /hospedagem é a página rosa. Custom property herda o valor já calculado no :root: o body redeclara
   --fundo, senão ele chega azul */
body[data-page="hospedagem"] {
  --fundo-pagina: var(--wk-pink-claro);
  --fundo-alterno: var(--wk-azul-claro);
  --fundo: var(--fundo-pagina);
  --contorno-azul: transparent;
}

/* ---------------------------------------------------------------- base */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--nav-h) + 16px);
  background: var(--fundo-pagina);
}
/* o html não lê variável do body: a /hospedagem pinta o fundo de fora (rolagem elástica) pelo :has.
   Sem :has, fica azul-claro, que também não é branco */
html:has(body[data-page="hospedagem"]) { background: var(--wk-pink-claro); }
/* foco nunca escondido (WCAG 2.4.11): o Tab rola o elemento para fora da barra fixa do celular
   e de baixo do trilho preso do seletor de /hospedagem */
@media (max-width: 979px) {
  html:has(.barra.is-on) { scroll-padding-bottom: calc(var(--barra-h) + env(safe-area-inset-bottom) + 16px); }
}
html:has(.ocupa-trilho.is-preso) { scroll-padding-top: calc(var(--nav-h) + 56px + 16px); }
/* Lenis (só com mouse, ver core.js) */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: clip; }

body {
  margin: 0;
  background: var(--fundo-pagina);
  color: var(--wk-grafite);
  font-family: var(--f-texto);
  font-size: var(--t-corpo);
  font-weight: 400;
  line-height: 1.55;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
html.menu-aberto { overflow: hidden; }

[hidden] { display: none !important; }
/* etiqueta girada e maré não criam rolagem lateral; clip (e não hidden) mantém o sticky */
main { display: block; overflow-x: clip; }

img, video, svg, canvas, picture { display: block; max-width: 100%; }
img, video { height: auto; }
a { color: inherit; }
p, figure, blockquote, dl, dd { margin: 0; }
ul, ol { margin: 0; padding-left: 1.2em; }
ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
button { font: inherit; color: inherit; }
input, select, textarea { font: inherit; color: inherit; }
fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
b, strong { font-weight: 600; }
table { border-collapse: collapse; }
::selection { background: var(--wk-pink-forte); color: var(--wk-branco); }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ---------------------------------------------------------------- tipografia (09 §6) */
h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--f-voz);
  text-wrap: balance;
  hyphens: manual;
  overflow-wrap: normal;
}
/* H1 e preço em 800 (a voz da marca); H2 em 700, que respira mais (13 §6.2) */
h1, .t-h1 { font-size: var(--t-h1); font-weight: 800; line-height: 1.05; letter-spacing: -0.015em; }
h2, .t-h2 { font-size: var(--t-h2); font-weight: 700; line-height: 1.06; letter-spacing: -0.01em; max-width: 20ch; }
h3, .t-h3 { font-size: var(--t-h3); font-weight: 700; line-height: 1.15; }
.lead { font-size: var(--t-lead); line-height: 1.45; color: var(--texto-2); max-width: var(--max-texto); text-wrap: pretty; }
.texto { max-width: 65ch; text-wrap: pretty; }
.texto > * + * { margin-top: 0.75em; }
/* bloco de título da seção: H2 + lead curto, com respiro até o conteúdo */
.cab { display: grid; gap: 20px; max-width: var(--max-texto); margin-bottom: var(--respiro-cab); }
.legenda,
.nota {
  font-family: var(--f-texto);
  font-size: var(--t-legenda);
  font-weight: 500;
  line-height: 1.4;
  color: var(--texto-2);
  text-wrap: pretty;
}
.legenda { font-weight: 400; letter-spacing: 0.01em; margin-top: 12px; }
/* nome de produto: sempre NEXT LEVEL EXPERIENCE e PARTY PASS */
.produto {
  font-family: var(--f-voz);
  font-size: var(--t-produto);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}
/* nome de produto como título de coluna (dock, comparador, finais): tira a etiqueta e põe um fio
   de 3 px na cor do produto. Cor do texto (pesquisa/15 §01, sem branco nas superfícies): pink-escuro
   4,63 a 4,89:1 e laranja-escuro 4,57 a 4,82:1 nos claros base; o fio continua pink-forte e laranja.
   No grafite o texto vira branco e o fio fica na cor */
.produto--fio {
  --cor-produto: currentColor;
  display: inline-block;
  padding-bottom: 8px;
  border-bottom: 3px solid var(--cor-produto);
}
.produto--nl { --cor-produto: var(--wk-pink-forte); color: var(--wk-pink-escuro); }
.produto--pp { --cor-produto: var(--wk-laranja); color: var(--wk-laranja-escuro); }
/* nome de produto em campo cheio (pesquisa/15 §02): no dock, painel na tinta clara. Pink-forte com
   branco (4,58:1) e laranja com grafite (6,70:1). Plano, sem giro: não é a etiqueta de display do H1.
   Nunca dentro de .fundo-grafite: a regra .fundo-grafite .produto--pp, logo abaixo, pintaria o texto
   de branco sobre o laranja (2,32:1) */
.produto--cheio {
  display: inline-block;
  padding: 0.3em 0.6em 0.18em;
  border-radius: var(--r-etiqueta);
  background: var(--cor-produto);
}
.produto--cheio.produto--nl { color: var(--wk-branco); }
.produto--cheio.produto--pp { color: var(--wk-grafite); }
.fundo-grafite .produto--nl,
.fundo-grafite .produto--pp,
.mare-bloco--noite .produto--nl,
.mare-bloco--noite .produto--pp { color: var(--wk-branco); }

/* preço em destaque: "R$" pequeno no topo, base colada embaixo */
.preco {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  column-gap: 0.12em;
  font-family: var(--f-voz);
  font-size: var(--t-preco);
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.preco__moeda { font-size: 0.45em; font-weight: 700; margin-top: 0.22em; }
.preco__cent { font-size: 0.5em; margin-top: 0.1em; }
.preco__base {
  flex-basis: 100%;
  margin-top: 6px;
  font-family: var(--f-texto);
  font-size: var(--t-legenda);
  font-weight: 500;
  line-height: 1.3;
}
/* preço em lista: linha de quarto, comparador, régua de lotes */
.preco-lista {
  font-family: var(--f-texto);
  font-size: var(--t-preco-lista);
  font-weight: 600;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}
.preco-linha { font-weight: 500; }
.preco-linha b { font-weight: 700; }

/* ---------------------------------------------------------------- superfícies (09 §5.2 e §5.3) */
/* Cada fundo troca texto, foco, link e a exceção do botão da mesma cor (09 §5.3).
   Fundo de seção numa página: nenhuma classe (fica a cor da página) ou .fundo-azul-claro /
   .fundo-pink-claro. Nunca var(--wk-branco) nem var(--wk-nevoa) como fundo (pesquisa/15 §01). */
/* .fundo-branco e .fundo-nevoa ficam só para o styleguide: nenhuma página usa desde 21/10/2026 */
.fundo-branco { --fundo: var(--wk-branco); }
.fundo-nevoa { --fundo: var(--wk-nevoa); }
/* os claros (pesquisa/15 §01): texto grafite, foco azul-forte e link teal, como no branco. Cada um
   aponta o outro como alternado (placeholder de foto, caixa de apoio dentro da seção) */
.fundo-azul-claro { --fundo: var(--wk-azul-claro); --fundo-alterno: var(--wk-pink-claro); --contorno-azul: var(--wk-azul-forte); }
.fundo-pink-claro { --fundo: var(--wk-pink-claro); --fundo-alterno: var(--wk-azul-claro); --contorno-azul: transparent; }
.fundo-grafite {
  --fundo: var(--wk-grafite);
  --texto: var(--wk-branco);
  --texto-2: var(--wk-cinza-noite);
  --foco: var(--wk-azul);
  --link: var(--wk-azul);
  --divisa: rgb(255 255 255 / .16);
}
.fundo-pink {
  --fundo: var(--wk-pink-forte);
  --texto: var(--wk-branco);
  --texto-2: var(--wk-branco);
  --foco: var(--wk-branco);
  --link: var(--wk-branco);
  --divisa: rgb(255 255 255 / .3);
}
.fundo-laranja {
  --fundo: var(--wk-laranja);
  --texto: var(--wk-grafite);
  --texto-2: var(--wk-grafite);
  --foco: var(--wk-grafite);
  --link: var(--wk-grafite);
  --divisa: rgb(38 36 31 / .2);
}
.fundo-teal {
  --fundo: var(--wk-teal);
  --texto: var(--wk-branco);
  --texto-2: var(--wk-branco);
  --foco: var(--wk-azul);
  --link: var(--wk-azul);
  --divisa: rgb(255 255 255 / .18);
}
.fundo-sol {
  --texto: var(--wk-grafite);
  --texto-2: var(--wk-grafite);
  --foco: var(--wk-grafite);
  background: var(--wk-sol);
}
.fundo-branco, .fundo-nevoa, .fundo-azul-claro, .fundo-pink-claro, .fundo-grafite, .fundo-pink, .fundo-laranja, .fundo-azul, .fundo-teal {
  background-color: var(--fundo);
  color: var(--texto);
}
.fundo-sol { color: var(--texto); }
/* o contorno azul-forte da etiqueta azul só existe sobre azul-claro */
.fundo-branco, .fundo-nevoa, .fundo-grafite, .fundo-pink, .fundo-laranja, .fundo-teal, .fundo-sol,
.mare-bloco, .rodape, .ocupa-trilho { --contorno-azul: transparent; }

/* ---------------------------------------------------------------- layout */
.miolo {
  width: 100%;
  max-width: calc(var(--max) + 2 * var(--margem));
  margin-inline: auto;
  padding-inline: var(--margem);
}
.secao { padding-block: var(--secao); }
.secao--curta { padding-block: var(--secao-curta); }
.grade {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--vao);
}
.pos-nav { padding-top: var(--nav-h); }

/* ---------------------------------------------------------------- foco, pular, leitor de tela (09 §5.5) */
:focus-visible {
  outline: 3px solid var(--foco);
  outline-offset: 3px;
}
:focus:not(:focus-visible) { outline: none; }
[tabindex="-1"]:focus { outline: none; }

.pular {
  position: fixed;
  left: 12px;
  top: calc(12px + env(safe-area-inset-top));
  z-index: var(--z-pular);
  padding: 12px 18px;
  border-radius: var(--r-controle);
  background: var(--wk-grafite);
  color: var(--wk-branco);
  font-weight: 600;
  text-decoration: none;
}
/* escondido fora da tela não basta: o Safari do iPhone mostra o que fica atrás da barra de status */
.pular:not(:focus) {
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------------------------------------------------------------- ícones (Tabler outline, sprite) */
.i {
  width: 1.25em;
  height: 1.25em;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.logo {
  width: 100%;
  height: auto;
  aspect-ratio: 3214 / 1514;
  fill: currentColor;
}

/* ---------------------------------------------------------------- links (terciário, 09 §15.1) */
.link {
  color: var(--link);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}
.link--claro { --link: var(--wk-branco); }
.link--solo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
}
/* link com a seta no fim (o secundário do herói, "Ver quartos e preços" da faixa): só a seta anda */
.link--seta .i:last-child { transition: translate 200ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .link:hover { text-decoration-thickness: 3px; }
  .link--seta:hover .i:last-child { translate: 4px 0; }
}

/* ---------------------------------------------------------------- botões (09 §15.1) */
/* A cor do botão é a cor do destino: pink-forte leva ao hotel e ao WhatsApp da reserva,
   laranja ao Party Pass e ao checkout, grafite só navega. Nunca botão desabilitado. */
.btn {
  --cor: var(--wk-grafite);
  --cor-texto: var(--wk-branco);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 56px;
  padding: 0.22em 32px 0.12em;
  border: 2px solid transparent;
  border-radius: var(--r-controle);
  background-color: var(--cor);
  color: var(--cor-texto);
  font-family: var(--f-voz);
  font-size: var(--t-botao);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: 0.01em;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition:
    transform 120ms var(--ease-out),
    background-color 180ms var(--ease-out),
    border-color 180ms var(--ease-out),
    color 180ms var(--ease-out);
}
.btn .i { width: 1.3em; height: 1.3em; margin-top: -0.1em; transition: translate 200ms var(--ease-out); }
.btn:active { transform: scale(0.97); }
.btn--pink { --cor: var(--wk-pink-forte); --cor-texto: var(--wk-branco); }
.btn--laranja { --cor: var(--wk-laranja); --cor-texto: var(--wk-grafite); }
.btn--azul { --cor: var(--wk-azul); --cor-texto: var(--wk-grafite); }
.btn--grafite { --cor: var(--wk-grafite); --cor-texto: var(--wk-branco); }
.btn--branco { --cor: var(--wk-branco); --cor-texto: var(--wk-grafite); }
.btn--contorno {
  --cor: transparent;
  --cor-texto: currentColor;
  border-color: currentColor;
}
.btn--p { min-height: 48px; padding-inline: 22px; }
/* exceções de superfície (09 §5.3) */
.fundo-pink .btn--pink, .mare-bloco--rosa .btn--pink { --cor: var(--wk-branco); --cor-texto: var(--wk-pink-forte); }
.fundo-laranja .btn--laranja, .mare--laranja .btn--laranja { --cor: var(--wk-grafite); --cor-texto: var(--wk-branco); }
.fundo-grafite .btn--grafite { --cor: var(--wk-branco); --cor-texto: var(--wk-grafite); }
.fundo-laranja .btn--laranja:focus-visible { outline-color: var(--wk-grafite); }

/* hover com ponteiro fino (13 §6.2): o botão não sobe nem escurece o fundo; só a seta anda.
   A cor do botão é a cor do destino e fica igual do repouso ao clique; a pressão é o scale.
   Botão sem seta ("Comprar Party Pass", "Escolher minha experiência"): o rótulo ganha sublinhado,
   na cor do próprio texto, para o mouse ter resposta sem mexer na cor (revisão de 21/10). */
@media (hover: hover) and (pointer: fine) {
  .btn--seta:hover .i { translate: 4px 0; }
  .btn:not(.btn--seta):hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
}
/* celular: largura total; desktop: uma linha só */
@media (max-width: 979px) {
  .btn:not(.btn--auto):not(.btn--p) { width: 100%; }
}
@media (min-width: 980px) {
  .btn { white-space: nowrap; }
}
.acoes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 16px;
}
/* no celular os botões das ações ocupam a largura toda, mesmo num pai com justify-items: start */
@media (max-width: 979px) {
  .acoes { justify-self: stretch; width: 100%; }
}

/* ---------------------------------------------------------------- etiquetas (09 §15.2) */
/* A tag FESTIVAL do logo virando etiqueta. Caixa alta só aqui, nos nomes de produto e nos selos. */
.etiqueta {
  --et-fundo: var(--wk-azul);
  --et-texto: var(--wk-grafite);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 0.22em 12px 0.12em;
  border: 2px solid transparent;
  border-radius: var(--r-etiqueta);
  background: var(--et-fundo);
  color: var(--et-texto);
  font-family: var(--f-voz);
  font-size: var(--t-etiqueta);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  /* uma linha no tamanho normal; com o texto ampliado a 200% quebra em vez de alargar a coluna
     e cortar o herói (WCAG 1.4.4). A conta do quarto mantém nowrap (.conta__partes). */
  max-width: 100%;
  text-wrap: balance;
  vertical-align: middle;
}
.etiqueta .i { width: 1.15em; height: 1.15em; margin-top: -0.12em; }
/* sobre azul-claro o azul cheio fica a 1,93:1 do fundo: o contorno azul-forte (4,01:1) na borda de 2 px
   que já existe devolve a forma. Nos outros fundos --contorno-azul é transparent. No grafite, a regra
   .fundo-grafite .etiqueta--estreia (mais forte) continua pondo o contorno azul */
.etiqueta--azul, .etiqueta--data, .etiqueta--dia, .etiqueta--estreia { --et-fundo: var(--wk-azul); --et-texto: var(--wk-grafite); border-color: var(--contorno-azul, transparent); }
.etiqueta--pink { --et-fundo: var(--wk-pink-forte); --et-texto: var(--wk-branco); }
.etiqueta--laranja, .etiqueta--ultimas { --et-fundo: var(--wk-laranja); --et-texto: var(--wk-grafite); }
.etiqueta--noite { --et-fundo: var(--wk-grafite); --et-texto: var(--wk-branco); }
.fundo-grafite .etiqueta--noite { --et-fundo: transparent; border-color: var(--wk-branco); }
.etiqueta--esgotado { --et-fundo: transparent; --et-texto: var(--wk-grafite); border-color: var(--wk-grafite); }
.fundo-grafite .etiqueta--esgotado { --et-texto: var(--wk-branco); border-color: var(--wk-branco); }
/* estreia no grafite (calendário e line-up da home): contorno azul, azul sobre grafite 7,17:1.
   Campo de cor cheia só um por página (13 §6.1); no claro continua cheia */
.fundo-grafite .etiqueta--estreia { --et-fundo: transparent; --et-texto: var(--wk-azul); border-color: var(--wk-azul); }
/* de display: só no H1 (.heroi__titulo e .ingresso__titulo), uma por página (13 §6.1).
   O build avisa se aparecer fora do herói */
.etiqueta--display { rotate: var(--inclina-marca); transform-origin: 0 50%; }
.etiqueta--heroi { min-height: 40px; font-size: 1.0625rem; padding-inline: 16px; }
/* grande, da conta do quarto */
.etiqueta--pink-g {
  --et-fundo: var(--wk-pink-forte);
  --et-texto: var(--wk-branco);
  min-height: 48px;
  padding-inline: 18px;
  font-size: 1.125rem;
  rotate: var(--inclina-leve);
  transform-origin: 0 50%;
}
.etiqueta--pink-g b { font-weight: 800; font-size: 1.2em; margin-left: 0.25em; }

/* a conta dividida (09 §10.1 e §10.7): uma etiqueta por pessoa, ângulos alternados e negativos */
.conta { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; justify-items: start; }
.conta__partes { display: flex; flex-wrap: wrap; gap: 14px 10px; padding: 4px 0 0; }
.conta__partes > .etiqueta {
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  min-height: 0;
  padding: 10px 14px 8px;
  white-space: nowrap;
}
.conta__partes > .etiqueta b { font-size: 1.25rem; font-weight: 800; letter-spacing: 0; text-transform: none; }
/* rótulo de cada parte ("você", "+1") no mínimo de legenda, 15 px (pedido da /hospedagem) */
.conta__partes > .etiqueta small { font-size: 0.9375rem; font-weight: 700; letter-spacing: 0.02em; }
.conta--sem-valor .conta__partes > .etiqueta { padding-block: 12px 10px; }
.conta__partes > li:nth-child(6n+1) { rotate: -8deg; }
.conta__partes > li:nth-child(6n+2) { rotate: -4deg; }
.conta__partes > li:nth-child(6n+3) { rotate: -6deg; }
.conta__partes > li:nth-child(6n+4) { rotate: -3deg; }
.conta__partes > li:nth-child(6n+5) { rotate: -7deg; }
.conta__partes > li:nth-child(6n+6) { rotate: -5deg; }
.conta__nota { font-size: var(--t-legenda); font-weight: 500; line-height: 1.4; color: var(--texto-2); max-width: 46ch; }

/* ---------------------------------------------------------------- chips do seletor (09 §10.5, §15.3) */
/* Radiogroup nativo. Um estado escolhido só, em todas as larguras e no trilho preso: fundo
   branco, texto pink-forte (4,58:1) e um check no canto, para a escolha não depender só da
   inversão de cor. Sem transição de cor: no WebKit o :has() às vezes demora a repintar, e o
   chip ficava parado no meio da troca (texto pink claro sobre rosa claro, ilegível). */
.ocupa {
  --check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5L20 7'/%3E%3C/svg%3E");
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.ocupa__chip {
  position: relative;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 2px;
  min-height: 72px;
  padding: 8px 4px 6px;
  border: 2px solid var(--wk-branco);
  border-radius: var(--r-controle);
  color: var(--wk-branco);
  text-align: center;
  cursor: pointer;
  rotate: var(--inclina-leve);
  -webkit-tap-highlight-color: transparent;
  transition: transform 120ms var(--ease-out);
}
.ocupa__chip:active { transform: scale(0.96); }
.ocupa__chip input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.ocupa__n { font-family: var(--f-voz); font-size: 1.75rem; font-weight: 800; line-height: 1; padding-top: 0.12em; }
.ocupa__desde { font-size: var(--t-legenda); font-weight: 500; line-height: 1.15; }
@media (min-width: 768px) { .ocupa__desde { white-space: nowrap; } }
.ocupa__longo,
.ocupa__curto { font-family: var(--f-voz); font-size: 1.0625rem; font-weight: 700; line-height: 1.1; padding-top: 0.12em; }
.ocupa__curto { display: none; }
/* escolhido: no celular a caixa é o chip inteiro */
.ocupa__chip:has(input:checked) { background: var(--wk-branco); color: var(--wk-pink-forte); }
.ocupa__chip:has(input:checked)::after {
  content: "";
  position: absolute;
  top: 6px;
  right: 6px;
  width: 14px;
  height: 14px;
  background: currentColor;
  -webkit-mask: var(--check) center / contain no-repeat;
  mask: var(--check) center / contain no-repeat;
  pointer-events: none;
}
/* foco por :focus, e não :focus-visible: no WebKit o rádio trocado pelas setas perde o
   :focus-visible e o anel some. Rádio não ganha foco por clique no Safari; no Chrome, o anel
   depois do toque é aceitável */
.ocupa__chip:has(input:focus) { outline: 3px solid var(--wk-branco); outline-offset: 4px; }
@media (hover: hover) and (pointer: fine) {
  .ocupa__chip:not(:has(input:checked)):hover { background: rgb(255 255 255 / .12); }
}
@media (min-width: 768px) {
  .ocupa { display: flex; flex-wrap: wrap; gap: 16px 20px; align-items: flex-start; }
  .ocupa__chip {
    border: 0;
    padding: 0;
    min-height: 0;
    rotate: none;
    place-content: start;
    gap: 8px;
  }
  /* a partir de 768 px a caixa é o quadrado do número (e a pílula do "Ainda não sei") */
  .ocupa__n,
  .ocupa__chip--todos .ocupa__longo {
    position: relative;
    display: grid;
    place-items: center;
    min-width: 64px;
    height: 64px;
    border: 2px solid var(--wk-branco);
    border-radius: var(--r-controle);
    rotate: var(--inclina-leve);
  }
  .ocupa__chip--todos .ocupa__longo { padding: 0.12em 18px 0; }
  .ocupa__chip:has(input:checked) { background: none; color: var(--wk-branco); }
  .ocupa__chip:has(input:checked)::after { content: none; }
  .ocupa__chip:has(input:checked) .ocupa__n,
  .ocupa__chip--todos:has(input:checked) .ocupa__longo { background: var(--wk-branco); color: var(--wk-pink-forte); }
  .ocupa__chip:has(input:checked) .ocupa__n::after,
  .ocupa__chip--todos:has(input:checked) .ocupa__longo::after {
    content: "";
    position: absolute;
    top: 4px;
    right: 4px;
    width: 12px;
    height: 12px;
    background: currentColor;
    -webkit-mask: var(--check) center / contain no-repeat;
    mask: var(--check) center / contain no-repeat;
  }
  .ocupa__chip:has(input:focus) { outline: none; }
  .ocupa__chip:has(input:focus) .ocupa__n,
  .ocupa__chip--todos:has(input:focus) .ocupa__longo { outline: 3px solid var(--wk-branco); outline-offset: 4px; }
}
@media (min-width: 768px) and (hover: hover) and (pointer: fine) {
  .ocupa__chip:not(:has(input:checked)):hover { background: none; }
  .ocupa__chip:not(:has(input:checked)):hover .ocupa__n,
  .ocupa__chip--todos:not(:has(input:checked)):hover .ocupa__longo { background: rgb(255 255 255 / .12); }
}
/* trilho que gruda embaixo da nav enquanto a lista está na tela (o JS da página põe .is-preso).
   Na /hospedagem o trilho do bloco quartos fica no fluxo (position: static no hospedagem.css) e quem
   gruda é a camada fixa .ocupa-trilho.hosp-atalho, criada pelo hospedagem.js com os estilos .is-preso
   daqui: o trilho original nunca muda de tamanho, então não há CLS (contrato §4.1). */
.ocupa-trilho {
  position: sticky;
  top: var(--nav-h);
  z-index: var(--z-trilho);
  background: var(--wk-pink-forte);
  color: var(--wk-branco);
  --foco: var(--wk-branco);
  margin-top: -1px; /* cobre a costura de 1 px com a maré de cima */
  padding-block: 8px 24px;
}
/* preso: a fileira compacta de 56 px (44 de chip e 6 de respiro), chips centralizados */
.ocupa-trilho.is-preso { padding-block: 6px; box-shadow: 0 8px 24px rgb(38 36 31 / .12); }
.ocupa-trilho.is-preso .ocupa { display: flex; align-items: center; gap: 8px; }
.ocupa-trilho.is-preso .ocupa__chip {
  flex: 1 1 0;
  place-content: center;
  align-items: center;
  min-height: 44px;
  min-width: 44px;
  padding: 0 10px;
  rotate: none;
  border: 2px solid var(--wk-branco);
}
.ocupa-trilho.is-preso .ocupa__chip--todos { flex-grow: 1.5; }
.ocupa-trilho.is-preso .ocupa__n { font-size: 1.25rem; min-width: 0; height: auto; border: 0; rotate: none; }
/* o "desde" e o "Ainda não sei" saem da tela, não da leitura: o rádio continua com nome
   ("2 pessoas, desde R$ 2.599"; "Ainda não sei"), e o "Todos" visível fica aria-hidden */
.ocupa-trilho.is-preso .ocupa__desde,
.ocupa-trilho.is-preso .ocupa__chip--todos .ocupa__longo {
  position: absolute;
  width: 1px;
  height: 1px;
  min-width: 0;
  padding: 0;
  margin: -1px;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}
.ocupa-trilho.is-preso .ocupa__chip--todos .ocupa__curto { display: block; }
.ocupa-trilho.is-preso .ocupa__chip:has(input:checked) { background: var(--wk-branco); color: var(--wk-pink-forte); }
.ocupa-trilho.is-preso .ocupa__chip:has(input:checked) .ocupa__n,
.ocupa-trilho.is-preso .ocupa__chip--todos:has(input:checked) .ocupa__longo { background: none; color: inherit; }
.ocupa-trilho.is-preso .ocupa__chip:has(input:checked)::after {
  content: "";
  top: 3px;
  right: 3px;
  width: 10px;
  height: 10px;
}
.ocupa-trilho.is-preso .ocupa__chip:has(input:checked) .ocupa__n::after,
.ocupa-trilho.is-preso .ocupa__chip--todos:has(input:checked) .ocupa__longo::after { content: none; }
.ocupa-trilho.is-preso .ocupa__chip:has(input:focus) { outline: 3px solid var(--wk-branco); outline-offset: 2px; }
.ocupa-trilho.is-preso .ocupa__chip:has(input:focus) .ocupa__n,
.ocupa-trilho.is-preso .ocupa__chip--todos:has(input:focus) .ocupa__longo { outline: none; }
@media (min-width: 768px) {
  .ocupa-trilho.is-preso .ocupa { flex-wrap: nowrap; gap: 10px; }
  .ocupa-trilho.is-preso .ocupa__chip { flex: 0 0 auto; min-width: 56px; justify-content: center; }
  .ocupa-trilho.is-preso .ocupa__chip--todos { padding-inline: 18px; }
}
@media (min-width: 768px) and (hover: hover) and (pointer: fine) {
  .ocupa-trilho.is-preso .ocupa__chip:not(:has(input:checked)):hover { background: rgb(255 255 255 / .12); }
  .ocupa-trilho.is-preso .ocupa__chip:not(:has(input:checked)):hover .ocupa__n { background: none; }
}
/* 320 a 359 px: seis alvos de 44 px cabem com margem e vão menores */
@media (max-width: 359px) {
  .ocupa-trilho.is-preso > .miolo { padding-inline: 12px; }
  .ocupa-trilho.is-preso .ocupa { gap: 4px; }
  .ocupa-trilho.is-preso .ocupa__chip { padding-inline: 4px; }
  .ocupa-trilho.is-preso .ocupa__curto { font-size: 0.9375rem; }
}

/* ---------------------------------------------------------------- caixa de seleção (diária extra) */
.caixa {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  cursor: pointer;
}
/* a caixa desenhada: no Safari do iPhone a nativa desmarcada era branca com borda cinza-claro sobre o
   pink-claro-2 do quarto aberto (1,1:1) e a diária extra passava despercebida (WCAG 1.4.11 pede 3:1) */
.caixa input {
  flex: none;
  appearance: none;
  -webkit-appearance: none;
  display: grid;
  place-content: center;
  width: 22px;
  height: 22px;
  margin: 0;
  border: 2px solid var(--wk-grafite-2);
  border-radius: 6px;
  background: var(--wk-branco);
  cursor: pointer;
  transition: background-color 120ms var(--ease-out), border-color 120ms var(--ease-out);
}
.caixa input::before {
  content: "";
  width: 12px;
  height: 12px;
  background: var(--wk-branco);
  clip-path: polygon(14% 44%, 0 59%, 40% 100%, 100% 22%, 86% 9%, 39% 70%);
  scale: 0;
  transition: scale 120ms var(--ease-out);
}
.caixa input:checked { border-color: var(--wk-pink-forte); background: var(--wk-pink-forte); }
.caixa input:checked::before { scale: 1; }
@media (forced-colors: active) {
  .caixa input { appearance: auto; -webkit-appearance: auto; }
  .caixa input::before { content: none; }
}

/* ---------------------------------------------------------------- linha com ponto (09 §15.7) */
/* Só em sequência real. Teal no claro, azul no escuro, grafite sobre laranja. */
.linha-ponto {
  --lp-cor: var(--wk-teal);
  --lp-num: currentColor;
  display: grid;
  gap: 0;
  counter-reset: lp;
}
.fundo-grafite .linha-ponto, .linha-ponto--escuro { --lp-cor: var(--wk-azul); }
.fundo-laranja .linha-ponto { --lp-cor: var(--wk-grafite); }
.linha-ponto > li {
  position: relative;
  padding: 0 0 32px 36px;
  text-wrap: pretty;
}
.linha-ponto > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.45em;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--lp-cor);
}
.linha-ponto > li:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 5px;
  top: calc(0.45em + 12px);
  bottom: 0;
  width: 2px;
  background: var(--lp-cor);
}
.linha-ponto > li:last-child { padding-bottom: 0; }
.linha-ponto__n {
  display: block;
  margin-bottom: 6px;
  font-family: var(--f-voz);
  font-size: 2.5rem;
  font-weight: 800;
  line-height: 1;
  color: var(--lp-num);
}
.linha-ponto--com-n > li::before { top: 0.95rem; }
.linha-ponto--com-n > li:not(:last-child)::after { top: calc(0.95rem + 12px); }
@media (min-width: 980px) {
  .linha-ponto--h {
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    column-gap: var(--vao);
  }
  .linha-ponto--h > li { padding: 32px 0 0; }
  .linha-ponto--h > li::before { top: 0; left: 0; }
  .linha-ponto--h > li:not(:last-child)::after {
    top: 5px;
    left: 12px;
    right: calc(var(--vao) * -1);
    bottom: auto;
    width: auto;
    height: 2px;
  }
}

/* ---------------------------------------------------------------- abertura de <details> (FAQ, quartos) */
/* Sem JS o <details> abre seco, e funciona. Com JS (core.js, details[data-abre]) a abertura
   anima grid-template-rows de 0fr a 1fr em 240 ms. O espaçamento vai DENTRO do filho do .abre,
   nunca nele mesmo, senão a linha não fecha até zero. */
.abre { display: grid; grid-template-rows: 1fr; }
.abre > * { min-height: 0; }
.js details[data-abre] > .abre { transition: grid-template-rows 240ms var(--ease-out); }
.js details[data-abre]:not(.is-aberto) > .abre { grid-template-rows: 0fr; }
.js details[data-abre]:not(.is-aberto) > .abre > *,
.js details[data-abre].is-animando > .abre > * { overflow: hidden; }

/* ---------------------------------------------------------------- FAQ (09 §15.8) */
.faq { border-top: 1px solid var(--divisa); }
.faq__grupo + .faq__grupo { margin-top: 48px; }
.faq__grupo > h3 { margin-bottom: 8px; }
.faq__item { border-bottom: 1px solid var(--divisa); }
.faq__pergunta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 64px;
  padding: 18px 0 16px;
  font-family: var(--f-voz);
  font-size: var(--t-faq);
  font-weight: 700;
  line-height: 1.25;
  cursor: pointer;
  list-style: none;
  -webkit-tap-highlight-color: transparent;
}
.faq__pergunta::-webkit-details-marker { display: none; }
.faq__sinal { width: 24px; height: 24px; transition: rotate 200ms var(--ease-out); }
.faq__item[open] .faq__sinal { rotate: 45deg; }
/* com mouse, a pergunta sublinha (sem mudar cor nem fundo, como os botões) */
@media (hover: hover) and (pointer: fine) {
  .faq__pergunta:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; }
}
.faq__resposta { font-size: 1.0625rem; line-height: 1.55; }
.faq__resposta > div > * { max-width: 65ch; }
.faq__resposta > div > * + * { margin-top: 0.75em; }
.faq__resposta > div > :last-child { margin-bottom: 22px; }
.faq__resposta a:not(.btn) { color: var(--link); font-weight: 600; text-underline-offset: 3px; }
.fundo-grafite .faq__resposta { color: var(--wk-cinza-noite); }

/* ---------------------------------------------------------------- marcas de festa (pesquisa/15 §02) */
/* Coladas ao nome da festa nas três páginas (agenda da home, pulseira de /ingressos, FAQ da hospedagem).
   Selo da SELVA: SVG redondo do _comum.selo_svg. Anel e letras em currentColor (branco no grafite,
   grafite no azul); o disco azul #0039A6, a estrela branca e os dois pontos vermelhos #D52B1E são da
   bandeira do Chile e não mudam com o fundo. Inclinado como carimbo: não é etiqueta (13 §6.1 conta
   etiquetas), é a ilustração que a cliente pediu. Decorativo (aria-hidden): o destaque ao lado diz
   "Selo internacional do Chile" em texto.
   +18 da HEAT: contorno de 2 px em currentColor, Baloo 800; a frase inteira vai no sr-only ao lado. */
.selo-selva {
  flex: none;
  width: var(--selo, 72px);
  height: var(--selo, 72px);
  rotate: var(--inclina-marca);
  overflow: visible;
}
.selo-selva text {
  fill: currentColor;
  font-family: var(--f-voz);
  font-weight: 800;
  text-anchor: middle;
}
.selo-selva__cima { font-size: 18px; letter-spacing: 2.5px; }
.selo-selva__baixo { font-size: 15px; letter-spacing: 3px; }
.festa-idade {
  flex: none;
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0.2em 8px 0.06em;
  border: 2px solid currentColor;
  border-radius: var(--r-etiqueta);
  font-family: var(--f-voz);
  font-size: 0.9375rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------- nav (09 §11.0, §15.9) */
.nav {
  position: fixed;
  inset: 0 0 auto;
  z-index: var(--z-nav);
  height: var(--nav-h);
  background: var(--fundo-pagina);
  color: var(--wk-grafite);
  border-bottom: 1px solid var(--wk-linha);
  transition: background-color 200ms var(--ease-out), color 200ms var(--ease-out), border-color 200ms var(--ease-out);
}
/* sobre o herói a nav não tem fio; o core.js põe .is-solida depois dele e o fio volta (13 §6.2) */
.nav:not(.is-solida) { border-bottom-color: transparent; }
.nav__in {
  display: flex;
  align-items: center;
  gap: 24px;
  height: 100%;
  max-width: calc(var(--max) + 2 * var(--margem));
  margin-inline: auto;
  padding-inline: var(--margem);
}
.nav__logo { display: flex; align-items: center; flex: none; width: 92px; min-height: 44px; color: inherit; }
.nav__links { display: none; }
.nav__acoes { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.nav__wa {
  display: none;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  color: inherit;
}
.nav__wa .i { width: 26px; height: 26px; }
.nav__cta { display: none; }
.nav__menu {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0.22em 18px 0.12em;
  border: 2px solid currentColor;
  border-radius: var(--r-controle);
  background: transparent;
  font-family: var(--f-voz);
  font-size: var(--t-botao);
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.nav__menu:active { transform: scale(0.97); }
/* sem JS o botão Menu não abre nada: no lugar dele, um link para #menu, que abre por :target */
.nav__menu--sem-js { display: none; text-decoration: none; }
@media (max-width: 979px) {
  html:not(.js) button.nav__menu { display: none; }
  html:not(.js) .nav__menu--sem-js { display: inline-flex; }
}
@media (min-width: 980px) {
  .nav__logo { width: 112px; }
  /* 13 §6.2: links em Jost 500 15 px, com 28 px de ar entre eles (o alvo de 44 px fica na altura;
     a largura é a da palavra, nenhuma abaixo de 44 px) */
  .nav__links {
    display: flex;
    align-items: center;
    gap: 28px;
    margin-left: auto;
  }
  .nav__links a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0;
    font-size: var(--t-nav);
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0.02em;
    white-space: nowrap; /* "O festival", "Party Pass" e "Line-up" nunca em duas linhas */
    text-decoration: none;
    text-decoration-thickness: 2px;
    text-underline-offset: 8px;
  }
  .nav__links a[aria-current="page"] { text-decoration-line: underline; text-decoration-color: var(--cor-pagina, currentColor); }
  .nav__acoes { margin-left: 16px; }
  .nav__wa { display: grid; }
  .nav__cta { display: inline-flex; min-height: 44px; padding-inline: 20px; font-size: 1rem; }
  .nav__menu { display: none; }
}
/* 980 a 1199 px (iPad deitado, notebook pequeno): a nav cabe numa linha mesmo com o botão longo da
   home. Links mais juntos e em 15 px, logo de 96 px e sem o ícone de WhatsApp (ele continua no
   rodapé, no menu e em cada seção de dúvidas) */
@media (min-width: 980px) and (max-width: 1199px) {
  .nav__in { gap: 12px; }
  .nav__logo { width: 96px; }
  .nav__links { gap: 16px; }
  .nav__links a { letter-spacing: 0.01em; }
  .nav__acoes { margin-left: 8px; }
  .nav__wa { display: none; }
  .nav__cta { padding-inline: 16px; }
}
@media (min-width: 980px) and (hover: hover) and (pointer: fine) {
  .nav__links a:hover { text-decoration-line: underline; }
  .nav__wa:hover { background: color-mix(in oklab, currentColor 8%, transparent); }
}
/* cor da página no sublinhado do link atual */
body[data-page="home"] { --cor-pagina: var(--wk-grafite); }
body[data-page="hospedagem"] { --cor-pagina: var(--wk-pink-forte); }
body[data-page="ingressos"] { --cor-pagina: var(--wk-laranja); }
/* /ingressos: transparente sobre o laranja do herói, na cor da página depois dele (core.js põe .is-solida) */
body[data-nav-estilo="transparente"] .nav:not(.is-solida) {
  background: transparent;
  border-bottom-color: transparent;
  --foco: var(--wk-grafite);
}
body[data-nav-estilo="transparente"] .nav:not(.is-solida) .btn--laranja { --cor: var(--wk-grafite); --cor-texto: var(--wk-branco); }
body[data-nav-estilo="transparente"] .nav:not(.is-solida) .nav__links a[aria-current="page"] { text-decoration-color: var(--wk-grafite); }
/* home: a noite começa na maré da noite (core.js troca body[data-ceu]) */
body[data-ceu="noite"] .nav {
  background: var(--wk-grafite);
  color: var(--wk-branco);
  border-bottom-color: rgb(255 255 255 / .12);
  --foco: var(--wk-azul);
  --cor-pagina: var(--wk-branco);
}
body[data-ceu="noite"] .nav .btn--grafite { --cor: var(--wk-branco); --cor-texto: var(--wk-grafite); }

/* ---------------------------------------------------------------- menu do celular (09 §15.9, padrão DBX) */
.menu {
  position: fixed;
  inset: 0;
  z-index: var(--z-menu);
  display: grid;
  grid-template-rows: auto 1fr auto auto;
  gap: 8px;
  padding:
    env(safe-area-inset-top)
    max(var(--margem), env(safe-area-inset-right))
    calc(24px + env(safe-area-inset-bottom))
    max(var(--margem), env(safe-area-inset-left));
  background: var(--fundo-pagina);
  color: var(--wk-grafite);
  overflow-y: auto;
  overscroll-behavior: contain;
  opacity: 0;
  visibility: hidden;
  transition: opacity 200ms var(--ease-out), visibility 0s linear 200ms;
}
.menu.is-aberto {
  opacity: 1;
  visibility: visible;
  transition: opacity 320ms var(--ease-out), visibility 0s;
}
.menu:focus { outline: none; }

.menu__topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--nav-h);
}
.menu__logo { width: 92px; }
.menu__fechar {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin-right: -8px;
  border: 0;
  border-radius: 50%;
  background: none;
  cursor: pointer;
}
.menu__fechar .i { width: 28px; height: 28px; }
/* sem JS: o link "Menu" leva a #menu e o :target mostra o menu; o X vira link de volta */
.menu__fechar.menu__fechar--sem-js { display: none; }
html:not(.js) .menu:target { display: grid !important; opacity: 1; visibility: visible; }
html:not(.js) .menu:target .menu__item { opacity: 1; translate: none; }
html:not(.js) .menu__fechar.menu__fechar--sem-js { display: grid; }
html:not(.js) button.menu__fechar { display: none; }
.menu__escolha { display: grid; align-content: center; gap: 4px; padding-block: 8px; }
.menu__pagina {
  display: grid;
  justify-items: start;
  gap: 6px;
  padding: 14px 0;
  border-bottom: 1px solid var(--wk-linha);
  text-decoration: none;
}
.menu__nome { font-family: var(--f-voz); font-size: 2rem; font-weight: 800; line-height: 1.05; }
.menu__pagina[aria-current="page"] .menu__nome { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 6px; text-decoration-color: var(--cor-pagina, currentColor); }
.menu__linha { font-weight: 600; font-size: 1rem; line-height: 1.35; color: var(--wk-grafite-2); }
.menu__linha b { color: var(--wk-grafite); }
.menu__links { display: flex; flex-wrap: wrap; gap: 4px 24px; padding-top: 4px; }
.menu__links a {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  font-size: 1.25rem;
  font-weight: 500;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
  text-decoration-color: var(--wk-linha);
}
.menu__pe { display: grid; gap: 4px; padding-top: 12px; }
.menu__item {
  opacity: 0;
  translate: 0 12px;
  transition: opacity 200ms var(--ease-out), translate 320ms var(--ease-expo);
}
.menu.is-aberto .menu__item { opacity: 1; translate: none; }
.menu.is-aberto .menu__escolha .menu__item:nth-child(1) { transition-delay: 40ms; }
.menu.is-aberto .menu__escolha .menu__item:nth-child(2) { transition-delay: 80ms; }
.menu.is-aberto .menu__escolha .menu__item:nth-child(3) { transition-delay: 120ms; }
.menu.is-aberto .menu__links .menu__item { transition-delay: 160ms; }
.menu.is-aberto .menu__pe { transition-delay: 200ms; }
/* tablet em pé (640 a 979, com altura): o bloco das três páginas centrado no 1fr deixava 230 px vazios
   embaixo do logo e outros 200 antes dos links. As três páginas sobem, maiores, e o resto vem logo depois */
@media (min-width: 640px) and (min-height: 700px) {
  .menu { grid-template-rows: auto auto auto auto; align-content: start; }
  .menu__escolha { align-content: start; padding-top: 40px; }
  .menu__nome { font-size: 2.5rem; }
  .menu__links { padding-top: 16px; }
  .menu__pe { padding-top: 20px; max-width: 520px; }
}
@media (min-width: 980px) { .menu { display: none !important; } }
@media (orientation: landscape) and (max-height: 520px) {
  .menu { grid-template-rows: auto auto auto auto; }
  .menu__escolha { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
  .menu__nome { font-size: 1.5rem; }
}

/* ---------------------------------------------------------------- botão pausar (WCAG 2.2.2) */
.pausa {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: none;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  cursor: pointer;
}

/* ---------------------------------------------------------------- barra fixa (celular, 09 §15.10, padrão DBX) */
.barra {
  position: fixed;
  inset: auto 0 0;
  z-index: var(--z-buybar);
  min-height: calc(var(--barra-h) + env(safe-area-inset-bottom));
  padding: 10px max(var(--margem), env(safe-area-inset-right)) calc(10px + env(safe-area-inset-bottom)) max(var(--margem), env(safe-area-inset-left));
  background: var(--fundo-pagina);
  color: var(--wk-grafite);
  border-top: 1px solid var(--wk-linha);
  box-shadow: var(--sombra-fixa);
  transform: translateY(calc(100% + 8px));
  visibility: hidden;
  transition: transform 180ms var(--ease-out), visibility 0s linear 180ms;
}
.barra.is-on {
  transform: none;
  visibility: visible;
  transition: transform 260ms var(--ease-out), visibility 0s;
}
.barra__in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  max-width: 640px;
  min-height: 52px;
  margin-inline: auto;
}
.barra__resumo { display: grid; min-width: 0; line-height: 1.25; }
.barra__titulo { font-weight: 600; font-size: 1rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.barra__linha { font-weight: 600; font-size: 0.9375rem; color: var(--wk-grafite-2); }
.barra__linha b { color: var(--wk-grafite); }
.barra__btn { flex: none; }
.barra__in--dupla { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; gap: 8px; }
.barra__metade {
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 2px;
  min-height: 52px;
  padding: 6px;
  border-radius: var(--r-controle);
  text-align: center;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  transition: transform 120ms var(--ease-out);
}
.barra__metade:active { transform: scale(0.97); }
.barra__metade--pink { background: var(--wk-pink-forte); color: var(--wk-branco); }
.barra__metade--laranja { background: var(--wk-laranja); color: var(--wk-grafite); }
.barra__metade--laranja:focus-visible { outline-color: var(--wk-grafite); }
.barra__rotulo { font-family: var(--f-voz); font-size: var(--t-botao); font-weight: 700; line-height: 1.1; padding-top: 0.12em; }
.barra__micro { font-size: 0.875rem; font-weight: 600; line-height: 1.2; text-wrap: balance; }
.barra__micro b { font-weight: 700; }
@media (min-width: 980px) { .barra { display: none; } }
/* celular deitado: a nav já mostra o caminho e a altura não comporta a barra */
@media (orientation: landscape) and (max-height: 500px) { .barra { display: none; } }

/* ---------------------------------------------------------------- rodapé teal (09 §15.11) */
.rodape {
  --texto: var(--wk-branco);
  --texto-2: var(--wk-branco);
  --foco: var(--wk-azul);
  --link: var(--wk-azul);
  background: var(--wk-teal);
  color: var(--wk-branco);
  padding-block: clamp(80px, 10vw, 128px) 40px;
}
.rodape__in { display: grid; gap: 40px; }
.rodape__logo { display: block; width: min(240px, 56vw); color: var(--wk-branco); }
.rodape__titulo { max-width: none; margin-bottom: 12px; font-family: var(--f-voz); font-size: 1.125rem; font-weight: 700; line-height: 1.2; letter-spacing: 0; }
.rodape__bloco p { line-height: 1.6; }
.rodape__lista { display: grid; gap: 2px; }
.rodape__lista li { line-height: 1.45; }
.rodape a:not(.btn) {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  color: var(--wk-azul);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}
.rodape__bloco p, .rodape__lista li, .rodape__legal { text-wrap: pretty; }
/* o logo é um link, mas não é cor de link: branco (09 §15.11). Seletor 0,3,1, depois da regra
   de link do rodapé (0,2,1), para ganhar dela em qualquer página */
.rodape a.rodape__logo:not(.btn) { display: block; min-height: 0; color: var(--wk-branco); text-decoration: none; }
.rodape .pausa { margin-top: 12px; color: var(--wk-branco); }
.rodape__legal { font-size: var(--t-legenda); line-height: 1.4; padding-top: 24px; border-top: 1px solid rgb(255 255 255 / .18); }
.rodape__inteiro { white-space: nowrap; }
.rodape .pausa { text-align: left; }
@media (min-width: 980px) {
  /* de 980 a 1279: logo e canais em cima, quem vende e antes de comprar embaixo (em quatro colunas o
     CNPJ e o telefone partiam no meio em 1024). A partir de 1280, logo e os três blocos numa linha.
     O texto legal fica embaixo, na largura toda */
  .rodape__in { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--vao); }
  .rodape__legal { grid-column: 1 / -1; }
}
@media (min-width: 1280px) {
  /* o logo cede um pouco para os canais caberem numa linha ("WhatsApp (11) 94992-0810" tem 265 px) */
  .rodape__in { grid-template-columns: minmax(0, 1fr) repeat(3, minmax(0, 1.1fr)); }
}
/* reserva o espaço da barra fixa no celular */
@media (max-width: 979px) {
  .rodape { padding-bottom: calc(var(--barra-h) + 40px + env(safe-area-inset-bottom)); }
}

/* ---------------------------------------------------------------- herói com janela (09 §9.1) */
/* Texto num campo sólido e uma janela de vídeo vertical. Nada de texto sobre vídeo:
   o H1 é texto puro e vira o LCP. No celular a janela é uma faixa sangrada sob a nav,
   e a etiqueta do H1 fica montada na borda de baixo dela. */
.heroi {
  position: relative;
  padding-top: var(--nav-h);
  background: var(--fundo);
  color: var(--texto);
}
.heroi__grade {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "janela" "texto";
  max-width: calc(var(--max) + 2 * var(--margem));
  margin-inline: auto;
  padding-inline: var(--margem);
}
.heroi__janela { grid-area: janela; margin-inline: calc(var(--margem) * -1); }
/* 13 §6.2: janela maior (era 180 a 240 px); o dock da home continua na primeira tela em 390x700 */
.heroi__janela .janela {
  height: clamp(200px, 30svh, 260px);
  border-radius: 0 0 var(--r-midia) var(--r-midia);
}
.heroi__janela .legenda { padding-inline: var(--margem); }
/* no celular a borda de baixo é da etiqueta de data: a pausa sobe para o canto de cima */
.heroi__janela .janela__pausa { top: 12px; bottom: auto; }
.heroi__texto {
  grid-area: texto;
  position: relative;
  z-index: var(--z-sobre);
  display: grid;
  grid-template-columns: minmax(0, 1fr); /* com o texto ampliado, a coluna não passa da tela */
  min-width: 0;
  justify-items: start;
  gap: 16px;
  padding-bottom: 28px;
}
.heroi__titulo { display: grid; grid-template-columns: minmax(0, 1fr); min-width: 0; justify-items: start; gap: 14px; }
.heroi__titulo .etiqueta { margin-top: -20px; }
.heroi__lead { max-width: 34ch; }
/* celular deitado (568x320): a janela encolhe para o H1 e o preço aparecerem na primeira tela */
@media (orientation: landscape) and (max-height: 500px) and (max-width: 979px) {
  .heroi__janela .janela { height: clamp(96px, 30svh, 140px); }
}
@media (min-width: 980px) {
  .heroi { padding-top: calc(var(--nav-h) + 24px); }
  .heroi__grade {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-template-areas: none;
    column-gap: var(--vao);
    align-items: center;
  }
  .heroi__texto { grid-column: 1 / 8; grid-row: 1; gap: 24px; padding-bottom: 0; }
  .heroi__janela { grid-column: 8 / 13; grid-row: 1; margin: 0; align-self: start; }
  /* 13 §6.2: até 640 px (era 600 e 66svh); em 1440x900 dá 504x630, dentro das 5 colunas */
  .heroi__janela .janela {
    height: min(640px, 70svh);
    aspect-ratio: 4 / 5;
    width: auto;
    max-width: 100%;
    margin-left: auto;
    border-radius: var(--r-midia);
  }
  .heroi__janela .legenda { padding-inline: 0; text-align: right; }
  .heroi__janela .janela__pausa { top: auto; bottom: 12px; }
  .heroi__titulo { gap: 22px; }
  .heroi__titulo .etiqueta { margin-top: 0; }
  .heroi__lead { max-width: 40ch; }
}

/* a janela de vídeo (herói e qualquer vídeo mudo em loop): pôster já na tela, vídeo por cima */
.janela {
  position: relative;
  overflow: hidden;
  background: var(--fundo-alterno);
  isolation: isolate;
}
.janela > picture,
.janela > img,
.janela > video,
.janela > picture > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.janela > video { opacity: 0; transition: opacity 400ms var(--ease-out); }
.janela.is-tocando > video { opacity: 1; }
.janela__pausa {
  position: absolute;
  right: 12px;
  bottom: 12px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--wk-grafite);
  color: var(--wk-branco);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.janela__pausa .i { width: 20px; height: 20px; }
.janela__pausa:focus-visible { outline: 3px solid var(--wk-branco); outline-offset: 2px; box-shadow: 0 0 0 7px var(--wk-grafite); }
.janela__pausa:active { transform: scale(0.94); }

/* vídeo sob demanda: só ganha src no toque (trilho de edições da home, prova de /ingressos).
   O pôster é uma <img loading="lazy"> por cima do vídeo (o atributo poster baixaria antes da hora):
   sai em fade quando o vídeo começa a tocar (o core põe .is-rodando no "playing"). O botão fica
   por cima de tudo e some no toque (.is-tocando). A caixa precisa de proporção (aspect-ratio). */
.video-sob {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  border-radius: var(--r-midia);
  background: var(--wk-grafite);
  isolation: isolate;
}
.video-sob > video,
.video-sob > img,
.video-sob > picture,
.video-sob > picture > img,
.video-sob__poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.video-sob > img,
.video-sob > picture,
.video-sob__poster { z-index: 1; pointer-events: none; transition: opacity 240ms var(--ease-out); }
.video-sob.is-rodando > img,
.video-sob.is-rodando > picture,
.video-sob.is-rodando > .video-sob__poster { opacity: 0; }
.video-sob__tocar {
  z-index: 2;
  position: absolute;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--wk-branco);
  color: var(--wk-grafite);
  cursor: pointer;
}
.video-sob__tocar .i { width: 26px; height: 26px; margin-left: 3px; }
.video-sob__tocar:focus-visible { outline: 3px solid var(--wk-branco); outline-offset: 3px; box-shadow: 0 0 0 8px var(--wk-grafite); }
.video-sob.is-tocando .video-sob__tocar { display: none; }

/* ---------------------------------------------------------------- fila justificada de fotos (13 §2.5 e §3.3) */
/* .mosaico > .mosaico__fila > figure.mosaico__item[style="--r: 0.8"]. Cada foto cresce na proporção
   do próprio formato (--r = largura / altura: 4:5 0.8, 1:1 1, 4:3 1.3333), então as fotos da fila
   ficam com a mesma altura e larguras diferentes. Nada de grade de cards iguais. Sem efeito de
   passar o mouse. Toda <img> com width e height reais e loading="lazy" (CLS).
   Abaixo de 768 px o formato é o do celular (--rm, senão --r), e:
   - sem modificador, a fila continua fila; .mosaico__item--abre ocupa a linha toda, vem primeiro,
     e as outras dividem a linha de baixo (ex.: /hospedagem, C 4:3 em cima, B e E 1:1 lado a lado);
   - com .mosaico--trilho, as filas viram um trilho horizontal com scroll-snap, todas da mesma
     largura (min(78vw, 340px)), alinhadas pela base. */
.mosaico { display: grid; row-gap: clamp(32px, 4vw, 48px); }
.mosaico__fila { display: flex; gap: var(--vao); align-items: flex-start; }
.mosaico__item { flex: var(--r, 1) 1 0%; min-width: 0; margin: 0; }
.mosaico__item > picture { display: block; }
.mosaico__midia,
.mosaico__item picture img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: var(--r, 1);
  object-fit: cover;
  border-radius: var(--r-foto);
  background: var(--fundo-alterno);
}
@media (max-width: 767px) {
  .mosaico__midia,
  .mosaico__item picture img { aspect-ratio: var(--rm, var(--r, 1)); }
  .mosaico__fila { flex-wrap: wrap; }
  .mosaico__item { flex-grow: var(--rm, var(--r, 1)); }
  .mosaico__item--abre { flex: 0 0 100%; order: -1; }
  .mosaico--trilho {
    display: flex;
    align-items: flex-end;
    gap: 12px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    margin-inline: calc(var(--margem) * -1);
    padding-inline: var(--margem);
    scroll-padding-inline: var(--margem);
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .mosaico--trilho::-webkit-scrollbar { display: none; }
  /* a região tem tabindex="0" (rolagem pelo teclado): o anel fica por dentro, a borda é a da tela */
  .mosaico--trilho:focus-visible { outline-offset: -3px; }
  .mosaico--trilho .mosaico__fila { display: contents; }
  .mosaico--trilho .mosaico__item { flex: 0 0 min(78vw, 340px); scroll-snap-align: start; }
}

/* ---------------------------------------------------------------- faixa de foto sangrada (13 §3.2) */
/* figure.faixa-foto > picture (2:1 no desktop, 4:5 no celular) + figcaption.legenda. Foto de borda
   a borda, sem raio, legenda embaixo e à direita, alinhada ao miolo. Nenhum texto sobre a foto:
   H2, lead e link vêm depois, no .miolo. Fora do .miolo (a faixa é a largura da tela). */
.faixa-foto { margin: 0; }
.faixa-foto > picture { display: block; }
.faixa-foto img {
  display: block;
  width: 100%;
  height: clamp(420px, 60svh, 680px);
  object-fit: cover;
  object-position: 50% 40%;
  background: var(--fundo-alterno);
}
.faixa-foto .legenda {
  max-width: calc(var(--max) + 2 * var(--margem));
  margin-inline: auto;
  padding-inline: var(--margem);
  text-align: right;
}
@media (max-width: 767px) {
  .faixa-foto img { height: auto; aspect-ratio: 4 / 5; }
}

/* sem JS: controles que dependem do core.js somem (o vídeo não toca sem ele; o pôster fica) */
html:not(.js) .janela__pausa,
html:not(.js) [data-pausar],
html:not(.js) [data-video-tocar],
html:not(.js) [data-so-js] { display: none !important; }

/* ---------------------------------------------------------------- a maré (09 §9.2) */
/* Onde tem maré, tem escolha ou preço. Quatro usos no site, nenhum outro.
   A crista fica fora do elemento mascarado (senão a máscara a corta).
   Correção sobre o 09 §9.2: a crista branca desce 14 px para DENTRO da cor (top: 14px, e não -14px).
   Acima da onda ela cairia sobre o fundo claro da seção de cima e sumiria. */
.mare-bloco {
  --mare-h: 72px;
  position: relative;
  margin-top: calc(var(--mare-h) * -1);
}
.mare {
  background: var(--mare-fundo, var(--wk-sol));
  color: var(--texto);
  padding-top: var(--mare-h);
  -webkit-mask:
    url("/assets/brand/mare.svg") top / 100% var(--mare-h) no-repeat,
    linear-gradient(#000 0 0) bottom / 100% calc(100% - var(--mare-h) + 1px) no-repeat;
  mask:
    url("/assets/brand/mare.svg") top / 100% var(--mare-h) no-repeat,
    linear-gradient(#000 0 0) bottom / 100% calc(100% - var(--mare-h) + 1px) no-repeat;
}
.mare__crista {
  position: absolute;
  left: 0;
  top: 14px;
  z-index: var(--z-sobre);
  width: 100%;
  height: var(--mare-h);
  overflow: visible;
  pointer-events: none;
}
.mare__crista path {
  fill: none;
  stroke: #fff;
  stroke-opacity: .8;
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
  stroke-linecap: round;
}
/* maré de sol (home §2): gradiente, texto grafite, crista branca */
.mare-bloco--sol { --texto: var(--wk-grafite); --foco: var(--wk-grafite); }
/* maré da noite (home §6): grafite, crista no gradiente sol */
.mare-bloco--noite {
  --mare-fundo: var(--wk-grafite);
  --texto: var(--wk-branco);
  --texto-2: var(--wk-cinza-noite);
  --foco: var(--wk-azul);
  --link: var(--wk-azul);
}
.mare-bloco--noite .mare__crista { top: 0; }
.mare-bloco--noite .mare__crista path { stroke: url(#sol-linha); stroke-opacity: 1; stroke-width: 4; }
/* maré rosa (/hospedagem §4): pink-forte, crista branca */
.mare-bloco--rosa {
  --mare-fundo: var(--wk-pink-forte);
  --texto: var(--wk-branco);
  --texto-2: var(--wk-branco);
  --foco: var(--wk-branco);
  --link: var(--wk-branco);
}
/* maré laranja (/ingressos §1): borda de baixo do herói, camadas invertidas, sem crista */
.mare--baixo {
  --mare-fundo: var(--wk-laranja);
  padding-top: 0;
  padding-bottom: var(--mare-h, 72px);
  -webkit-mask:
    linear-gradient(#000 0 0) top / 100% calc(100% - var(--mare-h, 72px) + 1px) no-repeat,
    url("/assets/brand/mare-baixo.svg") bottom / 100% var(--mare-h, 72px) no-repeat;
  mask:
    linear-gradient(#000 0 0) top / 100% calc(100% - var(--mare-h, 72px) + 1px) no-repeat,
    url("/assets/brand/mare-baixo.svg") bottom / 100% var(--mare-h, 72px) no-repeat;
}
/* herói laranja de /ingressos: .heroi.mare.mare--baixo mantém o espaço da nav por cima */
.heroi.mare--baixo { padding-top: var(--nav-h); }
@media (min-width: 980px) { .heroi.mare--baixo { padding-top: calc(var(--nav-h) + 24px); } }
.mare--laranja { --mare-fundo: var(--wk-laranja); --texto: var(--wk-grafite); --texto-2: var(--wk-grafite); --foco: var(--wk-grafite); --link: var(--wk-grafite); }
@media (max-width: 767px) {
  .mare-bloco, .mare--baixo { --mare-h: 44px; }
  .mare {
    -webkit-mask-image: url("/assets/brand/mare-m.svg"), linear-gradient(#000 0 0);
    mask-image: url("/assets/brand/mare-m.svg"), linear-gradient(#000 0 0);
  }
  .mare.mare--baixo {
    -webkit-mask-image: linear-gradient(#000 0 0), url("/assets/brand/mare-baixo.svg");
    mask-image: linear-gradient(#000 0 0), url("/assets/brand/mare-baixo.svg");
  }
  .mare__crista--d { display: none; }
}
@media (min-width: 768px) { .mare__crista--m { display: none; } }
@supports not ((mask-image: url("x.svg")) or (-webkit-mask-image: url("x.svg"))) {
  .mare { -webkit-mask: none; mask: none; border-radius: 28px 28px 0 0; }
  .mare--baixo { border-radius: 0 0 28px 28px; }
  .mare__crista { display: none; }
}

/* ---------------------------------------------------------------- toast (role status, acima da barra) */
.toast {
  position: fixed;
  left: 50%;
  bottom: calc(var(--barra-h) + 16px + env(safe-area-inset-bottom));
  z-index: var(--z-toast);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 4px 14px;
  width: max-content;
  max-width: min(92vw, 460px);
  padding: 12px 18px;
  border-radius: var(--r-controle);
  background: var(--wk-grafite);
  color: var(--wk-branco);
  font-weight: 500;
  line-height: 1.4;
  text-align: center;
  opacity: 0;
  translate: -50% 12px;
  visibility: hidden; /* fechado, o link e o X saem da ordem do Tab */
  pointer-events: none;
  transition: opacity 180ms var(--ease-out), translate 180ms var(--ease-out), visibility 0s linear 180ms;
}
.toast:empty { display: none; }
.toast.is-on { opacity: 1; translate: -50% 0; visibility: visible; pointer-events: auto; transition-delay: 0s; }
.toast a { color: var(--wk-azul); font-weight: 600; min-height: 44px; display: inline-flex; align-items: center; }
.toast__fechar {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin: -8px -10px -8px 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: inherit;
  cursor: pointer;
}
.toast__fechar .i { width: 20px; height: 20px; }
.toast :focus-visible { outline-color: var(--wk-azul); }
@media (min-width: 980px) { .toast { bottom: 24px; } }

/* ---------------------------------------------------------------- line-up: cartaz e arte oficial (15 §06) */
/* Componente do bloco lineup, na home (variante=cartaz, em grafite) e em /ingressos (variante=compacto,
   no azul-claro da página, sem classe de fundo: rosa não, consolidado C12). Mora aqui porque as duas
   páginas e o styleguide usam.
   O papel do cartaz é o 4º lugar do gradiente sol (09 §7, revisto em 21/10): o mesmo pôr do sol das
   artes do line-up no Instagram. Sobre o sol, texto só grafite: medido no papel de 1440 px, 6,5:1 no
   topo, 5,5:1 no meio e 4,3:1 no canto de baixo. Por isso o texto pequeno (topo e etiqueta branca)
   fica no topo ou em fundo próprio, e do meio para baixo só texto grande. Nada de texto em gradiente.
   Ritmo sem hierarquia: o primeiro nome cheio e o resto do nome em 0,6 e peso 500, igual para todos
   (a arte oficial faz o mesmo contraste). Ordem do weekend.json. */
.lineup__titulo { margin-bottom: clamp(28px, 3.5vw, 48px); }

.cartaz {
  --t-cartaz: clamp(3.25rem, 0.6rem + 13vw, 4.5rem);   /* primeiro nome no celular: 52 a 72 */
  --n2: 0.6;                                           /* o resto do nome, em relação ao primeiro */
  position: relative;
}
.cartaz__papel {
  position: relative;
  display: grid;
  justify-items: center;
  gap: clamp(24px, 3vw, 40px);
  padding: clamp(20px, 3vw, 44px) clamp(16px, 4vw, 64px) clamp(28px, 4vw, 48px);
  border-radius: var(--r-midia);
  background: var(--wk-sol);
  color: var(--wk-grafite);
  text-align: center;
}
/* topo do papel: o único texto pequeno sobre o sol, onde ele ainda é laranja */
.cartaz__topo {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 4px 24px;
  width: 100%;
  padding-bottom: 14px;
  border-bottom: 2px solid rgb(38 36 31 / .9);
  font-family: var(--f-voz);
  font-size: clamp(0.875rem, 0.8rem + 0.3vw, 1.0625rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.cartaz__nomes {
  list-style: none;
  display: grid;
  justify-items: center;
  gap: clamp(18px, 2.4vw, 28px);
  margin: 0;
  padding: 0;
  font-family: var(--f-voz);
  /* no celular a maior palavra (--maior, em letras, vem do bloco) cabe na largura do papel:
     0,68 em por letra em caixa alta, 80 px de margem e respiro */
  font-size: min(var(--t-cartaz), calc((100vw - 80px) / (var(--maior, 7) * 0.68)));
  font-weight: 800;
  line-height: 0.9;
  text-transform: uppercase;
}
.cartaz__item { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.cartaz__nome { display: flex; flex-direction: column; align-items: center; padding-top: 0.08em; }
.cartaz__n1 { letter-spacing: -0.01em; }
/* o resto do nome nunca abaixo de 24 px: no pé do papel o grafite tem 4,3:1, só passa como texto grande */
.cartaz__n2 { font-size: max(calc(var(--n2) * 1em), 1.5rem); font-weight: 500; letter-spacing: 0.02em; }
/* estreia: etiqueta branca com texto pink-forte (4,58:1), acima do nome como na arte oficial.
   No HTML ela vem depois do nome: o leitor de tela lê "Anne Louise, Primeira vez no Weekend Festival" */
.cartaz__papel .etiqueta--estreia {
  --et-fundo: var(--wk-branco);
  --et-texto: var(--wk-pink-forte);
  order: -1;
  border-color: transparent;
  line-height: 1.1;
}
.cartaz__mais {
  font-family: var(--f-voz);
  font-size: clamp(1.375rem, 1.15rem + 0.9vw, 2rem);    /* 22 a 32 em 700: texto grande */
  font-weight: 700;
  line-height: 1.2;
  text-wrap: balance;
}
/* o brilho do letreiro: desenhado em CSS (um caractere de estrela reprovaria no QA de emoji) */
.cartaz__brilho {
  display: inline-block;
  flex: none;
  width: 0.7em;
  height: 0.7em;
  margin-inline: 0.9em;
  background: currentColor;
  clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%);
}
@media (max-width: 767px) {
  .cartaz__topo { flex-direction: column; align-items: center; }
}
/* tablet e desktop: nomes em fileiras centradas, primeiro nome e resto na mesma linha de base.
   A etiqueta fica acima do nome sem alargar o item (posição absoluta, centrada no nome). Ela encosta
   no próprio nome (4 px) e pendura de baixo para cima a partir dele: o item com etiqueta reserva duas
   linhas de etiqueta e o vão que sobra fica em cima, longe da fileira anterior. Em duas linhas ela cabe
   sobre um nome curto (Baez) sem passar por cima dos vizinhos (revisão de 21/10: no vão entre duas
   fileiras, a estreia parecia ser do nome de cima). Sem separador entre os nomes: num texto
   centrado ele sobraria no fim da linha; o contraste entre o cheio e o leve já separa um nome do outro. */
@media (min-width: 768px) {
  .cartaz { --t-cartaz: clamp(3.25rem, 1rem + 4.6vw, 5.5rem); }   /* 52 a 88 */
  .cartaz__nomes { display: block; font-size: var(--t-cartaz); line-height: 0.95; text-wrap: balance; }
  .cartaz__item {
    --reserva-estreia: calc(var(--t-etiqueta) * 2.6 + 28px);   /* duas linhas de etiqueta e o respiro de cima */
    position: relative;
    display: inline-block;
    margin: 0 0.24em 0.14em;
    vertical-align: bottom;
    white-space: nowrap;
  }
  .cartaz__item--estreia { padding-top: var(--reserva-estreia); }
  .cartaz__papel .etiqueta--estreia {
    position: absolute;
    top: var(--reserva-estreia);
    left: 50%;
    translate: -50% calc(-100% - 4px);
    width: max-content;
    max-width: 11.5em;   /* duas linhas, "Primeira vez no / Weekend Festival": um selo do tamanho de um nome curto */
    white-space: normal;
  }
  /* o ?revisao=1 põe position: relative em todo [data-validar]: aqui a etiqueta continua solta */
  html.revisao .cartaz__papel .etiqueta--estreia[data-validar] { position: absolute; }
  .cartaz__nome { display: inline; }
}

/* compacto (/ingressos): o mesmo papel, letra menor e sem letreiro. No celular o nome fica numa
   linha só (a página é curta e o objetivo é o checkout): 7 linhas em vez de 12. O primeiro nome em
   40 px deixa o resto em 24 px, texto grande, porque no pé do papel o grafite tem 4,3:1 */
.cartaz--compacto { --t-cartaz: 2.5rem; }
@media (max-width: 767px) {
  .cartaz--compacto .cartaz__nomes { gap: 14px; }
  .cartaz--compacto .cartaz__nome { flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: baseline; column-gap: 0.22em; }
}
@media (min-width: 768px) {
  .cartaz--compacto { --t-cartaz: clamp(2.75rem, 1.2rem + 3.2vw, 4rem); }   /* 44 a 64 */
}

/* o letreiro: faixa pink-forte (branco sobre ela, 4,58:1) que atravessa a tela no pé do papel,
   inclinada em -4°. Decorativa (aria-hidden): repete o título, o ano, o lugar e as datas. Só anda com
   JS (o botão de pausa depende do core.js), com movimento permitido e sem a pausa: html.is-pausado
   congela pela regra da base. O main já corta o que passa da tela (overflow-x: clip). */
.cartaz__letreiro {
  position: relative;
  z-index: var(--z-sobre);
  width: calc(100vw + 160px);
  margin: calc(-1 * clamp(44px, 5.4vw, 78px)) 0 0 calc(50% - 50vw - 80px);
  padding: 13px 0 9px;
  overflow: hidden;
  rotate: var(--inclina-leve);
  background: var(--wk-pink-forte);
  color: var(--wk-branco);
  font-family: var(--f-voz);
  font-size: clamp(1.0625rem, 0.9rem + 0.6vw, 1.5rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}
.cartaz--letreiro .cartaz__papel { padding-bottom: clamp(64px, 8vw, 116px); }   /* lugar da faixa */
.cartaz__trilha { display: flex; align-items: center; width: max-content; }
.cartaz__trilha > span { padding-top: 0.08em; }
.js .cartaz__trilha { animation: wk-letreiro 80s linear infinite; }
@keyframes wk-letreiro { to { translate: -50% 0; } }

/* pé: Instagram à esquerda, pausa à direita (perto do que se mexe, WCAG 2.2.2) */
.cartaz__pe {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 24px;
  margin-top: clamp(28px, 4vw, 48px);
}
.cartaz--letreiro + .cartaz__pe { margin-top: clamp(40px, 6vw, 72px); }
.cartaz__pausa { color: var(--texto-2); }

/* ---------------------------------------------------------------- line-up com a arte oficial */
/* A arte manda; a lista ao lado (desktop) ou embaixo (celular) é o texto da arte para leitor de
   tela, busca e quem não carrega a imagem. Retrato e quadrada: arte nas colunas 1 a 6, lista de 8 a
   12. Paisagem: arte no miolo inteiro, lista embaixo. */
.lineup-arte { display: grid; gap: clamp(28px, 4vw, 56px); margin: 0; }
.lineup-arte__midia { min-width: 0; }
.lineup-arte__img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--r-midia);
  background: rgb(127 127 127 / .14);
}
.lineup-arte__lado { display: grid; justify-items: start; align-content: center; }
.lineup-arte__nomes { list-style: none; display: grid; gap: clamp(8px, 1vw, 12px); margin: 0; padding: 0; }
.lineup-arte__item { display: grid; justify-items: start; gap: 6px; }
.lineup-arte__nome {
  font-family: var(--f-voz);
  font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.75rem);   /* 24 no celular: a arte já mostra os nomes */
  font-weight: 800;
  line-height: 1.1;
  padding-top: 0.08em;
}
.lineup-arte__mais { margin-top: 22px; color: var(--texto-2); font-size: var(--t-lead); line-height: 1.45; }
.lineup-arte__insta { margin-top: 6px; }
@media (min-width: 980px) {
  .lineup-arte--retrato,
  .lineup-arte--quadrada { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--vao); align-items: center; }
  .lineup-arte--retrato .lineup-arte__midia,
  .lineup-arte--quadrada .lineup-arte__midia { grid-column: 1 / 7; }
  .lineup-arte--retrato .lineup-arte__lado,
  .lineup-arte--quadrada .lineup-arte__lado { grid-column: 8 / 13; }
}
/* compacto: a arte até 400 px e a lista ao lado a partir de 768 */
.lineup-arte--compacto .lineup-arte__midia { max-width: 400px; }
.lineup-arte--compacto .lineup-arte__nome { font-size: clamp(1.5rem, 1.25rem + 0.9vw, 2.25rem); }
@media (min-width: 768px) {
  .lineup-arte--compacto.lineup-arte--retrato,
  .lineup-arte--compacto.lineup-arte--quadrada { grid-template-columns: minmax(0, 400px) minmax(0, 1fr); column-gap: clamp(32px, 5vw, 80px); align-items: center; }
  .lineup-arte--compacto .lineup-arte__midia,
  .lineup-arte--compacto .lineup-arte__lado { grid-column: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .js .cartaz__trilha { animation: none; }
  .cartaz__pausa { display: none; }
}

/* ---------------------------------------------------------------- revelação (o padrão é visível) */
/* .anima só existe com JS e movimento permitido (script no <head>, com fusível de 3,5 s). */
[data-revela] { transition: opacity 500ms var(--ease-out), translate 500ms var(--ease-expo); }
.anima [data-revela]:not(.is-in) { opacity: 0; translate: 0 12px; }
.anima [data-revela="fade"]:not(.is-in) { translate: none; }
[data-revela].is-direto { transition: none; }

/* ---------------------------------------------------------------- modo revisão (?revisao=1) */
/* Contorna o que tem data-validar e põe o selo "a validar" (padrão SYL). O motivo vem no title. */
html.revisao [data-validar],
html.revisao [data-so-previa] {
  position: relative;
  outline: 2px dashed var(--wk-laranja-forte);
  outline-offset: 3px;
  border-radius: 2px;
}
/* o selo fica acima do contorno, sem cobrir o texto marcado, e abaixo do trilho preso e da nav */
html.revisao [data-validar]::before,
html.revisao [data-so-previa]:not([data-validar])::before {
  content: "a validar";
  position: absolute;
  right: -5px;
  bottom: calc(100% + 5px);
  z-index: var(--z-selo);
  padding: 1px 5px 0;
  border-radius: 4px;
  background: var(--wk-laranja-forte);
  color: var(--wk-branco);
  font: 600 10px/1.3 var(--f-texto);
  letter-spacing: 0.02em;
  text-transform: none;
  white-space: nowrap;
  rotate: 0deg;
  pointer-events: none;
}
html.revisao [data-so-previa]:not([data-validar])::before { content: "só na prévia"; }
/* linha esgotada de /hospedagem: etiqueta e preço riscado empilhados, cada um com o seu selo. O vão
   entre eles e acima da etiqueta abre lugar para o selo, que antes cobria o "ESGOTADO" */
html.revisao .quarto__preco--esgotado { row-gap: 24px; margin-top: 22px; }
html.revisao .vitrine__item--esgotado .vitrine__fim { padding-top: 18px; }
/* aviso no topo, logo abaixo da nav; depois de 4 s recolhe num botão de 44 px (core.js) */
.revisao-aviso {
  position: fixed;
  left: 8px;
  top: calc(var(--nav-h) + 8px);
  z-index: var(--z-revisao);
  display: flex;
  align-items: center;
  gap: 4px 12px;
  flex-wrap: wrap;
  max-width: min(calc(100vw - 16px), 420px);
  min-height: 44px;
  padding: 6px 6px 6px 14px;
  border-radius: var(--r-controle);
  background: var(--wk-laranja-forte);
  color: var(--wk-branco);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.35;
  box-shadow: 0 6px 18px rgb(38 36 31 / .18);
}
.revisao-aviso a { color: inherit; display: inline-flex; align-items: center; min-height: 32px; }
.revisao-aviso__botao {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 10px;
  border: 2px solid currentColor;
  border-radius: 10px;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
}
.revisao-aviso :focus-visible { outline-color: var(--wk-branco); }
.revisao-aviso.is-recolhido { padding: 0; background: none; box-shadow: none; }
.revisao-aviso.is-recolhido .revisao-aviso__botao {
  min-height: 44px;
  padding: 0 14px;
  border: 0;
  border-radius: var(--r-controle);
  background: var(--wk-laranja-forte);
  box-shadow: 0 6px 18px rgb(38 36 31 / .18);
}
.revisao-aviso.is-recolhido .revisao-aviso__texto { display: none; }

/* ---------------------------------------------------------------- pausa e movimento reduzido (09 §16.5) */
html.is-pausado *,
html.is-pausado *::before,
html.is-pausado *::after { animation-play-state: paused !important; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  /* aberturas viram crossfade curto; nada desliza */
  .js details[data-abre] > .abre { transition: none; }
  .js details[data-abre].is-aberto > .abre > * { animation: wk-surge 150ms var(--ease-out); }
  .menu, .menu.is-aberto { transition: opacity 150ms var(--ease-out), visibility 0s; }
  .menu__item { translate: none; transition: opacity 150ms var(--ease-out) !important; }
  .barra { transform: none; opacity: 0; transition: opacity 150ms var(--ease-out), visibility 0s linear 150ms; }
  .barra.is-on { opacity: 1; transition: opacity 150ms var(--ease-out), visibility 0s; }
  .janela > video, .video-sob > img, .video-sob > picture, .video-sob__poster { transition: none; }
  .btn, .ocupa__chip, .barra__metade { transition-duration: 150ms; }
  .btn .i, .link--seta .i:last-child { transition: none; }
  .btn:active, .ocupa__chip:active, .barra__metade:active { transform: none; }
  .faq__sinal { transition: none; }
  .toast { translate: -50% 0; }
}
@keyframes wk-surge { from { opacity: 0; } }