/* ============================================================
   CALDAS PARADISE · Réveillon 2027
   Identidade lida do PSD "KV CALDAS PARADISE27" (1080×1920):
   branco + índigo + teal, aquarela de folhas, arara, sol ondulado.
   Gramática de site de festival: blocos chunky, tickers, menu
   gigante, contagem, stickers, barra fixa.
   ============================================================ */

@font-face { font-family:'Outfit';  src:url('assets/fonts/outfit-500.woff2') format('woff2'); font-weight:500; font-display:swap }
@font-face { font-family:'Outfit';  src:url('assets/fonts/outfit-800.woff2') format('woff2'); font-weight:800; font-display:swap }
@font-face { font-family:'Locatro'; src:url('assets/fonts/locatro.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap }
@font-face { font-family:'Locatro'; src:url('assets/fonts/locatro-italic.woff2') format('woff2'); font-weight:400; font-style:italic; font-display:swap }

:root {
  /* cores como aparecem no KV achatado (nominais entre parênteses) */
  --branco:     #ffffff;
  --creme:      #ffeade;   /* camada BG oculta do arquivo */
  --indigo:     #223d73;   /* data   (#01326c) */
  --indigo-2:   #364679;   /* local  (#203e73) */
  --indigo-3:   #394e7d;   /* frase */
  --indigo-p:   #12234a;   /* fundo profundo: o índigo do KV, escurecido */
  --teal:       #13dbc9;   /* sol ondulado (Color Overlay #00d1c0) */
  --teal-claro: #1debd8;
  --azul:       #61a7fa;   /* hibisco */
  --azul-claro: #a3ddf5;
  --verde:      #305e50;

  --texto:   var(--indigo-2);
  --texto-2: rgba(32, 62, 115, .66);
  --linha:   rgba(32, 62, 115, .14);

  --f:  'Outfit', 'Avenir Next', system-ui, sans-serif;
  --fd: 'Locatro', 'Didot', 'Bodoni MT', serif;

  --kv-w: 1080; --kv-h: 1920;
  --curva: cubic-bezier(.16, 1, .3, 1);
  --pad: 18px;
  --topo-h: 62px;
  --r: 22px;
  --r-p: 999px;
  --maxw: 1240px;
}

* { box-sizing: border-box }
html { -webkit-text-size-adjust: 100% }
/* rolagem suave só para quem não pediu menos movimento no sistema */
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth } }
body {
  margin: 0;
  background: var(--indigo-p);
  color: var(--texto);
  font-family: var(--f);
  font-weight: 500;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block }
a { color: inherit; text-decoration: none }
button { font: inherit; color: inherit }
:focus-visible { outline: 3px solid var(--teal); outline-offset: 3px; border-radius: 6px }
::selection { background: var(--teal); color: var(--indigo-p) }
.sr { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap }

/* fundo profundo liso (o padrão de sóis repetidos foi removido a pedido) */
.padrao { background-color: var(--indigo-p) }

/* rótulo pequeno em caixa alta, o registro do KV ("CALDAS NOVAS - GO") */
.kicker {
  margin: 0 0 14px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .42em;
  text-indent: .42em;
  text-transform: uppercase;
  color: var(--teal);
}
.kicker--creme { color: var(--creme) }

/* botões */
.botao {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 52px; padding: 0 24px;
  border: 0; border-radius: var(--r-p);
  font: 800 13px/1 var(--f);
  letter-spacing: .2em; text-indent: .2em; text-transform: uppercase;
  cursor: pointer; white-space: nowrap;
  transition: transform .5s var(--curva), background .4s var(--curva), box-shadow .5s var(--curva);
}
.botao:hover { transform: translateY(-2px) }
.botao:active { transform: translateY(0) }
.botao[disabled] { opacity: .6; cursor: default; transform: none }
.botao--g { height: 62px; padding: 0 34px; font-size: 15px }
.botao--indigo { background: var(--indigo-p); color: var(--branco); box-shadow: 0 14px 30px -12px rgba(18,35,74,.6) }
.botao--indigo:hover { background: var(--indigo) }
.botao--creme  { background: var(--creme); color: var(--indigo-p); box-shadow: 0 18px 40px -14px rgba(255,234,222,.5) }
.botao--creme:hover  { background: #fff }
.botao--whats { background: var(--teal); color: var(--indigo-p); box-shadow: 0 16px 34px -14px rgba(19,219,201,.6) }
.botao--whats:hover { background: var(--teal-claro) }
.botao svg { width: 1.45em; height: 1.45em; flex: none; margin-left: -.2em }
.botao--branco { background: var(--branco); color: var(--indigo-p) }
.botao--branco:hover { background: var(--creme) }

/* ---------- TOPO ---------- */
/* faixa sólida desde o início: fica no fluxo (o KV começa abaixo dela) e gruda ao rolar */
.topo {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; justify-content: space-between;
  height: var(--topo-h); padding: 0 var(--pad);
  background: var(--indigo-p); color: var(--branco);
  border-bottom: 3px solid var(--teal);
}
.topo__marca { display: flex; align-items: center; gap: 10px; font: 400 15px/1 var(--fd); letter-spacing: .12em; text-transform: uppercase }
.topo__marca img { width: 36px }
.topo__nav { display: none; gap: 28px; font-size: 12px; font-weight: 800; letter-spacing: .22em; text-transform: uppercase }
.topo__nav a { position: relative; padding: 6px 0 }
.topo__nav a::after { content: ''; position: absolute; left: 0; right: 100%; bottom: 0; height: 2px; background: var(--teal); transition: right .5s var(--curva) }
.topo__nav a:hover::after { right: 0 }
.topo__menu {
  display: inline-flex; align-items: center; gap: 12px; height: 42px; padding: 0 8px;
  border: 0; border-radius: 12px; background: none; color: inherit; cursor: pointer;
}
.topo__menu-txt { display: none; font-size: 12px; font-weight: 800; letter-spacing: .22em; text-transform: uppercase }
.topo__menu-ico { display: grid; gap: 5px; width: 24px }
.topo__menu-ico i { display: block; height: 2.5px; background: currentColor; border-radius: 2px; transition: transform .45s var(--curva), width .45s var(--curva) }
.topo__menu-ico i:nth-child(2) { width: 70%; margin-left: auto }
.topo__menu:hover .topo__menu-ico i:nth-child(2) { width: 100% }
/* seções não ficam escondidas atrás do topo fixo quando o menu leva até elas */
#lineup, #data, #local, #ingressos { scroll-margin-top: calc(var(--topo-h) + 8px) }

/* ---------- 1. HERO — o KV remontado ---------- */
.kv {
  position: relative; width: 100%; height: calc(100svh - var(--topo-h)); min-height: 520px;
  overflow: hidden; background: var(--branco); isolation: isolate;
}
.kv__stage {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  aspect-ratio: var(--kv-w) / var(--kv-h);
  width: max(100%, calc((100svh - var(--topo-h)) * var(--kv-w) / var(--kv-h)));
  container-type: inline-size;
}
.kv__cena { position: absolute; inset: 0 }
.kv__el {
  position: absolute;
  left: calc(var(--mx) * 1%); top: calc(var(--my) * 1%); width: calc(var(--mw) * 1%);
  will-change: transform; pointer-events: none; user-select: none; -webkit-user-drag: none;
}
.kv__el img { width: 100%; height: auto }
.kv__el[data-z="1"] { z-index: 1 } .kv__el[data-z="2"] { z-index: 2 } .kv__el[data-z="3"] { z-index: 3 }
.kv__el[data-z="4"] { z-index: 4 } .kv__el[data-z="5"] { z-index: 5 }
.kv__sol {
  position: absolute; left: calc(var(--mx) * 1%); top: calc(var(--my) * 1%); width: calc(var(--mw) * 1%);
  color: var(--teal); z-index: 0; pointer-events: none;
}
.kv__sol svg { width: 100%; height: auto; display: block }
.kv__texto { position: absolute; inset: 0; z-index: 3; text-align: center; color: var(--indigo); pointer-events: none }
.kv__texto > * { position: absolute; left: 0; right: 0; pointer-events: auto }
.kv__frase {
  top: calc(var(--my) * 1%); margin: 0; padding: 0 4%;
  font-weight: 800; font-size: calc(var(--kv-fs) * 1cqw); line-height: 1.32;
  letter-spacing: .2em; text-transform: uppercase; color: var(--indigo-3);
}
.kv__logo { top: calc(var(--my) * 1%); left: calc(var(--mx) * 1%); width: calc(var(--mw) * 1%); right: auto }
.kv__logo img { width: 100% }
.kv__data {
  top: calc(var(--my) * 1%); margin: 0;
  font-weight: 500; font-size: calc(var(--kv-fs) * 1cqw); line-height: 1;
  text-transform: uppercase; color: var(--indigo);
}
.kv__data b { font-weight: 800 }
.kv__local {
  top: calc(var(--my) * 1%); margin: 0;
  font-weight: 800; font-size: calc(var(--kv-fs) * 1cqw); line-height: 1;
  letter-spacing: .62em; text-indent: .62em; text-transform: uppercase; color: var(--indigo-2);
}
.kv__desce {
  position: absolute; left: 50%; bottom: 18px; z-index: 6; transform: translateX(-50%);
  width: 34px; height: 34px; border-radius: 50%; background: var(--indigo-p);
  display: grid; place-items: center; opacity: .9;
}
.kv__desce span { width: 8px; height: 8px; border-right: 2px solid var(--teal); border-bottom: 2px solid var(--teal); transform: translateY(-2px) rotate(45deg) }
@media (prefers-reduced-motion: no-preference) {
  .kv__desce { animation: desce 2.4s ease-in-out infinite }
  @keyframes desce { 0%,100% { transform: translate(-50%, 0) } 50% { transform: translate(-50%, 6px) } }
}

.is-estatico .kv * , .is-estatico .ticker__t { animation: none !important; transition: none !important }

@media (prefers-reduced-motion: no-preference) {
  .kv__el, .kv__sol, .kv__texto { animation: kv-in 1.6s var(--curva) both }
  .kv__el { animation-delay: calc(var(--i, 0) * 55ms) }
  .kv__sol { animation-delay: .35s }
  .kv__texto { animation-delay: .55s; animation-duration: 1.4s }
  @keyframes kv-in { from { opacity: 0; transform: translate3d(0, 24px, 0) scale(.96) } to { opacity: 1; transform: none } }
  .kv.is-ready .kv__el {
    animation: kv-respira calc(9s + var(--i, 0) * .7s) ease-in-out infinite alternate;
    animation-delay: calc(var(--i, 0) * -1.3s);
  }
  @keyframes kv-respira {
    from { transform: translate3d(var(--px, 0px), var(--py, 0px), 0) rotate(-.6deg) }
    to   { transform: translate3d(var(--px, 0px), var(--py, 0px), 0) rotate(.6deg) }
  }
}

/* ---------- 2. Ticker (a faixa de fotos foi removida a pedido) ---------- */
@keyframes rola { to { transform: translateX(-50%) } }

.ticker {
  overflow: hidden; background: var(--indigo-p); color: var(--teal);
  border-top: 1px solid rgba(255,255,255,.08); border-bottom: 1px solid rgba(255,255,255,.08);
  padding: 9px 0;
  font-size: 13px; font-weight: 800; letter-spacing: .28em; text-transform: uppercase; white-space: nowrap;
}
.ticker__t { display: flex; width: max-content; animation: rola 28s linear infinite }
.ticker__t--volta { animation-direction: reverse }
.ticker__t span { padding-right: .6em }
.ticker--verde { background: var(--teal); color: var(--indigo-p); border-color: var(--indigo-p) }

/* ---------- 3. Menu gigante ---------- */
/* ---------- 3. Menu (abre por cima da página) ---------- */
html.menu-aberto { overflow: hidden }
.menu-dlg {
  position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none;
  margin: 0; padding: 0; border: 0; overflow-y: auto; overscroll-behavior: contain;
  background: var(--indigo-p); color: var(--branco);
  display: none; flex-direction: column;
}
.menu-dlg[open] { display: flex }
.menu-dlg::backdrop { background: transparent }
.menu-dlg__topo {
  position: sticky; top: 0; z-index: 2; flex: none;
  display: flex; align-items: center; justify-content: space-between;
  height: var(--topo-h); padding: 0 var(--pad);
  background: var(--indigo-p); border-bottom: 3px solid var(--teal);
}
.menu-dlg__fecha { position: relative; width: 42px; height: 42px; border: 0; border-radius: 12px; background: none; color: var(--branco); cursor: pointer }
.menu-dlg__fecha span, .menu-dlg__fecha span::after {
  position: absolute; left: 9px; right: 9px; top: 50%; height: 2.5px; margin-top: -1px;
  background: currentColor; border-radius: 2px; transform: rotate(45deg);
}
.menu-dlg__fecha span::after { content: ''; left: 0; right: 0; transform: rotate(-90deg) }
.menu-dlg__pe {
  flex: none; margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 18px var(--pad) 24px; border-top: 1px solid rgba(255,255,255,.1);
}
.menu-dlg__pe p { margin: 0; display: grid; gap: 4px }
.menu-dlg__pe b { font: 400 26px/1 var(--fd); text-transform: uppercase; color: var(--teal) }
.menu-dlg__pe span { font-size: 11px; font-weight: 800; letter-spacing: .24em; text-transform: uppercase; color: rgba(255,255,255,.62) }
.menu-dlg__pe .botao { height: 48px; padding: 0 18px; font-size: 12px }
.menu { padding: 22px var(--pad) 26px; color: var(--branco); flex: none }
.menu__item {
  position: relative;
  display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; align-items: center; gap: 14px;
  padding: 14px 18px 14px 10px; margin: 0 0 4px;
  border-bottom: 2px solid var(--teal);
  transition: background .4s var(--curva), color .4s var(--curva);
}
.menu__item[aria-current] { background: var(--creme); color: var(--indigo-p); border-radius: var(--r); border-bottom-color: transparent }
.menu__item:hover, .menu__item:focus-visible { background: var(--creme); color: var(--indigo-p); border-radius: var(--r); border-bottom-color: transparent }
/* "Ingressos" é a palavra mais longa (4,6× o tamanho da letra): o tamanho sai da
   largura que sobra depois do ícone, dos respiros e da seta */
.menu__txt { min-width: 0; font: 400 clamp(36px, calc((100vw - 180px) / 4.75), 96px)/.92 var(--fd); letter-spacing: -.01em; text-transform: uppercase }
.menu__seta { font: 800 clamp(34px, 8vw, 54px)/1 var(--f); transition: transform .5s var(--curva) }
.menu__item:hover .menu__seta { transform: translate(6px, -6px) }
.menu__fig { width: 52px; height: 52px; display: grid; place-items: center }
.menu__fig svg { width: 48px; height: 48px; overflow: visible }
.menu__fig--hibisco { --acento: var(--azul); --fundo: var(--indigo-p) }
.menu__fig--sol { color: var(--teal) }
.menu__fig--onda { --acento: var(--teal); --fundo: var(--azul-claro) }
.menu__fig--taca { --acento: var(--creme); --fundo: var(--teal) }
.menu__item[aria-current] .menu__fig--taca, .menu__item:hover .menu__fig--taca { --acento: var(--indigo-p) }
.menu__item[aria-current] .menu__fig--onda, .menu__item:hover .menu__fig--onda { --fundo: var(--indigo-p) }

/* ---------- 4. Data e local (o bloco verde) ---------- */
.verde { background: var(--teal); color: var(--indigo-p) }
.verde__in { padding: 18px var(--pad) 26px; display: grid; gap: 12px }
.card {
  background: var(--indigo-p); color: var(--branco);
  border-radius: var(--r); padding: 18px 20px;
  position: relative; overflow: hidden;
}
.card__rot { display: block; font-size: 12px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: var(--creme); margin-bottom: 8px }
.card__num { display: block; font: 400 clamp(26px, 7.4vw, 52px)/1 var(--fd); text-transform: uppercase; white-space: nowrap }
.card--link { display: block }
.card__seta { position: absolute; right: 16px; top: 14px; font: 800 30px/1 var(--f); color: var(--teal); transition: transform .5s var(--curva) }
.card--link:hover .card__seta { transform: translate(4px, -4px) }
.stats { display: grid; grid-template-columns: 1fr 1.25fr; gap: 12px }
/* virada open bar: ocupa a linha inteira no celular; número em teal para destacar */
.card--openbar { grid-column: 1 / -1 }
.card--openbar .card__num { color: var(--teal) }
.card__nota { display: block; margin-top: 10px; font-size: 13px; line-height: 1.4; color: rgba(255,255,255,.7) }

.mapa { padding: 12px }
.mapa__tela { position: relative; border-radius: 14px; overflow: hidden; aspect-ratio: 4 / 3; background: var(--azul-claro) }
.mapa__tela iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; filter: saturate(.7) }
.mapa__aqui {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -60%) rotate(-8deg);
  background: var(--azul); color: var(--branco);
  padding: 12px 18px 10px; font: 400 26px/1 var(--fd); text-transform: uppercase;
  box-shadow: 0 16px 30px -10px rgba(18,35,74,.5);
}
.mapa__aqui::before { content: ''; position: absolute; left: 50%; top: -9px; width: 14px; height: 14px; border-radius: 50%; background: var(--creme); transform: translateX(-50%) }
.mapa__sticker { position: absolute; right: -6px; top: -8px; width: 82px; --acento: var(--teal); --fundo: var(--indigo-p); transform: rotate(12deg) }
.mapa__sticker svg { width: 100%; height: auto; overflow: visible }
.mapa__pe { display: grid; grid-template-columns: 44px 1fr 1fr 40px; gap: 10px; align-items: center; padding: 14px 6px 6px }
.mapa__pe strong { display: block; font-size: 16px; font-weight: 800; letter-spacing: .04em }
.mapa__pe span { display: block; font-size: 12px; color: rgba(255,255,255,.62); margin-top: 3px }
.mapa__fig { --acento: var(--teal); --fundo: var(--creme); width: 44px }
.mapa__fig svg { width: 100%; height: auto; overflow: visible }
.mapa__seta { font: 800 30px/1 var(--f); color: var(--teal); text-align: right; transition: transform .5s var(--curva) }
.mapa__seta:hover { transform: translate(3px, -3px) }

/* ---------- 5. Contagem + aviso ---------- */
.virada { position: relative; overflow: hidden; padding: 56px var(--pad) 120px; text-align: center; color: var(--branco); border-top: 6px solid var(--creme) }
.virada__in { position: relative; z-index: 2; max-width: 720px; margin: 0 auto }
.contagem {
  display: flex; align-items: baseline; justify-content: center; gap: 6px; flex-wrap: wrap;
  margin: 0 0 22px; color: var(--teal);
  font: 400 clamp(44px, 12vw, 84px)/1 var(--fd);
  font-variant-numeric: tabular-nums;
}
@media (min-width: 900px) { .contagem { flex-wrap: nowrap; gap: 14px } }
.contagem > span { display: inline-flex; align-items: baseline; gap: 2px }
.contagem i { font: 800 .32em/1 var(--f); letter-spacing: .05em; text-transform: uppercase; color: var(--creme) }
.contagem em { font-style: normal; opacity: .55; transform: translateY(-.06em) }
.contagem__fig { --acento: var(--creme); width: .9em; height: .9em; align-self: center; margin-right: 6px }
.contagem__fig svg { width: 100%; height: 100%; overflow: visible }
.contagem.is-over { display: none }
.virada__virou { display: none; margin: 0 0 22px; font: 400 40px/1 var(--fd); color: var(--teal) }
.virada__virou.is-on { display: block }
.virada__nota { margin: 0 auto 26px; max-width: 34ch; font-size: 15px; line-height: 1.5; color: rgba(255,255,255,.72) }
.virada__sol { position: absolute; bottom: -38%; width: 78%; color: var(--teal); opacity: .95; z-index: 1; pointer-events: none }
.virada__sol svg { width: 100%; height: auto }
.virada__sol--e { left: -36% }
.virada__sol--d { right: -36%; color: var(--azul) ; opacity: .8 }

/* compra (Ingresse): canal principal de venda */
.compra { margin: 0 auto 56px }
.compra__t { margin: 0 0 12px; font: 400 clamp(40px, 11vw, 76px)/.95 var(--fd); text-transform: uppercase; color: var(--branco) }
.compra__sub { margin: 0 auto 26px; max-width: 36ch; font-size: 15px; line-height: 1.5; color: rgba(255,255,255,.74) }
.compra__setores { list-style: none; margin: 0 0 26px; padding: 0; display: grid; gap: 12px }
.setor {
  position: relative; display: grid; gap: 6px; padding: 22px 22px 20px; text-align: left;
  border-radius: 20px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.16);
  transition: background .4s var(--curva), border-color .4s var(--curva), transform .5s var(--curva);
}
.setor:hover { background: rgba(19,219,201,.12); border-color: var(--teal); transform: translateY(-2px) }
.setor:focus-visible { outline-offset: 4px }
.setor__rot { font-size: 12px; font-weight: 800; letter-spacing: .3em; text-transform: uppercase; color: var(--creme) }
.setor__nome { font: 400 clamp(34px, 9vw, 50px)/1 var(--fd); text-transform: uppercase; color: var(--branco) }
.setor__info { font-size: 14px; color: rgba(255,255,255,.66) }
.setor__acao { margin-top: 8px; font-size: 12px; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; color: var(--teal) }
.compra__nota { margin: 18px auto 0; max-width: 40ch; font-size: 13px; line-height: 1.5; color: rgba(255,255,255,.62) }
.compra__nota a { color: var(--teal); text-decoration: underline; text-underline-offset: 3px }
.virada__conta { padding-top: 44px; border-top: 1px solid rgba(255,255,255,.12) }
@media (min-width: 640px) { .compra__setores { grid-template-columns: 1fr 1fr } }

/* botão de compra no topo (só desktop; no celular a barra fixa cumpre o papel) */
.topo__comprar { display: none }

/* ---------- 6. Line-up ---------- */
.lineup__cabeca { position: relative; overflow: hidden; padding: 84px var(--pad) 92px; text-align: center; color: var(--branco); border-top: 6px solid var(--teal) }
.lineup__nomes {
  position: absolute; inset: -20% -30%; display: grid; align-content: center; gap: 12px;
  transform: rotate(-7deg); opacity: .16; pointer-events: none;
  font: 400 clamp(28px, 7vw, 54px)/1 var(--fd); text-transform: uppercase; white-space: nowrap;
}
.lineup__nomes .ticker__t { animation-duration: 60s }
.lineup__nomes .ticker__t--volta { animation-duration: 75s }
.lineup__t { position: relative; z-index: 2; margin: 0; font: 400 clamp(72px, 20vw, 150px)/.9 var(--fd); text-transform: uppercase; letter-spacing: -.01em }
.lineup__t span { position: relative; display: inline-block }
.lineup__t span::after {
  content: ''; position: absolute; left: 4%; right: 4%; bottom: -.08em; height: .12em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 12' preserveAspectRatio='none'%3E%3Cpath d='M2 8c8-6 12 4 20 0s12-6 20 0 12 4 20 0 12-6 20 0 12 4 20 0 12-6 16 0' fill='none' stroke='%2313dbc9' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}
.lineup__sol { position: absolute; right: -18%; bottom: -30%; width: 46%; color: var(--teal); opacity: .9; z-index: 1 }
.lineup__sol svg { width: 100%; height: auto }
/* atrações: foto da cabeça à cintura, mesma altura de cabeça para todos; o
   corte da foto encosta na base do card (ninguém flutua). Duos mais largos que o
   card perdem só um pouco das laterais, nunca o rosto. */
.atracoes { list-style: none; margin: 0; padding: 18px var(--pad) 8px; display: grid; gap: 14px }
.art {
  position: relative; margin: 0; aspect-ratio: 3 / 2; overflow: hidden;
  border-radius: var(--r); background: var(--branco);
  box-shadow: 0 22px 40px -24px rgba(18,35,74,.6);
}
.art__sol { position: absolute; left: 50%; top: 4%; width: 78%; transform: translateX(-50%); color: var(--teal) }
.art__sol svg { display: block; width: 100%; height: auto }
.art img {
  position: absolute; left: 50%; bottom: 0; height: 92%; width: auto; max-width: none;   /* 8% de respiro acima da cabeça */
  transform: translateX(-50%);
  transition: transform .9s var(--curva);
}
.art:hover img { transform: translateX(-50%) scale(1.025); transform-origin: 50% 100% }
.art__nome {
  position: absolute; left: 50%; bottom: 6%; transform: translateX(-50%);
  margin: 0; padding: 10px 20px 9px; white-space: nowrap;
  background: var(--indigo-p); color: var(--branco);
  border: 2px solid var(--branco); border-radius: var(--r-p);
  font: 800 clamp(13px, 3.7vw, 19px)/1 var(--f); letter-spacing: .06em; text-transform: uppercase;
  box-shadow: 0 10px 22px -12px rgba(18,35,74,.7);
}
/* etiqueta no canto do card: "Confirmado" no revelado, "Próxima atração" no mistério */
.art__tag {
  position: absolute; left: 14px; top: 14px; z-index: 2;
  padding: 7px 12px 6px; border-radius: var(--r-p);
  font: 800 10px/1 var(--f); letter-spacing: .2em; text-transform: uppercase;
  background: var(--indigo-p); color: var(--teal);
}
.art__tag--ok { background: var(--teal); color: var(--indigo-p) }
.art__tag--ok::before { content: '✓ ' }

/* bloco de mistério: nada que identifique quem é — nem nome, nem foto, nem silhueta */
.art--misterio { background: var(--indigo-p); box-shadow: inset 0 0 0 2px rgba(19,219,201,.28), 0 22px 40px -24px rgba(18,35,74,.6) }
.art--misterio .art__sol { color: var(--teal); opacity: .2; top: 8% }
.art--misterio .art__tag { background: rgba(255,255,255,.08); color: var(--creme) }
.art__interroga {
  position: absolute; inset: 0 0 14% 0; display: grid; place-items: center;
  font: 400 clamp(120px, 34vw, 230px)/1 var(--fd); color: var(--creme);
  text-shadow: 0 0 34px rgba(19,219,201,.55), 0 0 2px rgba(255,234,222,.9);
}
.art--misterio .art__nome { background: transparent; border-color: var(--teal); color: var(--teal); box-shadow: none }
@media (prefers-reduced-motion: no-preference) {
  .art--misterio .art__sol svg { animation: sol-gira 60s linear infinite }
  .art__interroga { animation: interroga 3.2s ease-in-out infinite }
  .art--misterio:nth-child(3) .art__interroga { animation-delay: -1.1s }
  .art--misterio:nth-child(4) .art__interroga { animation-delay: -2.2s }
  .art--misterio:hover .art__interroga { animation-duration: .9s }
  @keyframes sol-gira { to { transform: rotate(360deg) } }
  @keyframes interroga {
    0%, 100% { transform: translateY(0) rotate(-4deg); opacity: .92 }
    50% { transform: translateY(-8px) rotate(4deg); opacity: 1; text-shadow: 0 0 56px rgba(19,219,201,.85), 0 0 2px rgba(255,234,222,.9) }
  }
}
.is-estatico .art__interroga, .is-estatico .art--misterio .art__sol svg { animation: none !important }

.lineup__pe { padding: 14px var(--pad) 32px; display: grid; gap: 14px; justify-items: center; text-align: center }
.lineup__pe p { margin: 0; max-width: 38ch; font-size: 15px; font-weight: 800; line-height: 1.45; color: var(--indigo-p) }

/* ---------- Rodapé ---------- */
.rodape { padding: 48px var(--pad) 120px; text-align: center; color: var(--branco); border-top: 1px solid rgba(255,255,255,.1) }
.rodape img { width: 150px; margin: 0 auto 20px; filter: brightness(0) invert(1) }
.rodape p { margin: 0; font-size: 12px; font-weight: 800; letter-spacing: .3em; text-indent: .3em; text-transform: uppercase; color: rgba(255,255,255,.7) }
.rodape p + p { margin-top: 10px; font-weight: 500; letter-spacing: .1em; text-indent: .1em; text-transform: none; color: rgba(255,255,255,.45) }

/* ---------- Barra fixa (celular) ---------- */
.barra {
  position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 30;
  display: grid; grid-template-columns: 40px 1fr auto; align-items: center; gap: 10px;
  padding: 8px 8px 8px 14px;
  background: var(--creme); color: var(--indigo-p); border-radius: 18px;
  box-shadow: 0 20px 40px -16px rgba(0,0,0,.55);
  transform: translateY(130%); opacity: 0;
  transition: transform .7s var(--curva), opacity .5s var(--curva);
}
.barra.is-on { transform: none; opacity: 1 }
.barra__fig { --acento: var(--teal); --fundo: var(--indigo-p); width: 40px }
.barra__fig svg { width: 100%; height: auto; overflow: visible }
.barra__data { display: flex; align-items: center; gap: 10px }
.barra__data b { font: 400 30px/1 var(--fd) }
.barra__data small { font-size: 11px; font-weight: 800; letter-spacing: .06em; line-height: 1.2; text-transform: uppercase; color: var(--indigo-2) }
.barra .botao { height: 46px; padding: 0 16px; font-size: 12px; letter-spacing: .14em; text-indent: .14em }
.barra__data b, .barra__data small { white-space: nowrap }
/* em telas estreitas a folhinha sai para a data e o botão caberem numa linha */
@media (max-width: 400px) { .barra { grid-template-columns: 1fr auto } .barra__fig { display: none } }

/* ---------- Grupo VIP (popup) ---------- */
.vip { border: 0; padding: 0; background: transparent; width: min(92vw, 500px); max-width: none; max-height: 94svh; overflow: auto }
.vip::backdrop { background: rgba(18,35,74,.74); backdrop-filter: blur(6px) }
.vip__caixa { position: relative; overflow: hidden; border-radius: 26px; background: var(--indigo-p); color: var(--branco); box-shadow: 0 40px 80px -30px rgba(0,0,0,.65) }
.vip__fecha {
  position: absolute; right: 12px; top: 12px; z-index: 3; width: 40px; height: 40px;
  border: 0; border-radius: 50%; background: rgba(18,35,74,.88); color: var(--branco);
  font-weight: 800; cursor: pointer;
}
.vip__topo { position: relative; overflow: hidden; background: var(--branco); padding-top: 26px }
.vip__sol { position: absolute; left: 50%; top: 10%; width: 70%; transform: translateX(-50%); color: var(--teal); opacity: .95 }
.vip__sol svg { display: block; width: 100%; height: auto }
.vip__topo img { position: relative; display: block; width: 100%; height: auto; color: transparent }   /* sem texto alternativo piscando enquanto carrega */
/* com as atrações ocultas, o topo do popup mostra o lockup no branco do KV */
.vip__topo:has(.vip__logo) { padding: 30px 0 24px; border-bottom: 3px solid var(--teal) }
.vip__topo:has(.vip__logo) .vip__sol { display: none }
.vip__topo .vip__logo { width: min(56%, 230px); margin: 0 auto }
.vip__topo:has(.vip__logo) + .vip__corpo { padding-top: 22px }
.vip__corpo { padding: 0 22px 22px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; justify-items: center; text-align: center }
.vip__lista {
  position: relative; justify-self: stretch; margin: -2px -22px 10px; padding: 11px 14px 10px;
  background: #0d1a3a; border-top: 3px solid var(--teal);
  font: 800 11px/1.45 var(--f); letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.9);
}
.vip__lista i { font-style: normal; color: var(--teal); padding: 0 .3em }
.vip__corpo .kicker { margin: 4px 0 0 }
.vip__corpo h2 { margin: 0; font: 400 clamp(30px, 8.4vw, 44px)/.95 var(--fd); text-transform: uppercase }
.vip__txt { margin: 0 0 6px; max-width: 34ch; font-size: 15px; line-height: 1.5; color: rgba(255,255,255,.74) }
.vip .botao--g { width: 100%; padding: 0 16px; font-size: clamp(12px, 3.6vw, 15px); letter-spacing: .14em; text-indent: .14em }
.vip__depois {
  border: 0; background: none; padding: 6px 10px; cursor: pointer;
  font: 600 13px/1 var(--f); color: rgba(255,255,255,.6); text-decoration: underline; text-underline-offset: 3px;
}
.vip__depois:hover { color: var(--branco) }
.vip__secundario { display: inline-flex; align-items: center; gap: 8px; padding: 6px 4px; font-size: 13px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--teal) }
.vip__secundario svg { width: 1.4em; height: 1.4em }
@media (prefers-reduced-motion: no-preference) {
  .vip[open] .vip__caixa { animation: vip-in .7s var(--curva) both }
  .vip[open]::backdrop { animation: vip-fundo .5s ease both }
  @keyframes vip-in { from { opacity: 0; transform: translateY(26px) scale(.96) } to { opacity: 1; transform: none } }
  @keyframes vip-fundo { from { opacity: 0 } to { opacity: 1 } }
}

@media (prefers-reduced-motion: no-preference) {
  .menu-dlg[open] { animation: menu-abre .75s var(--curva) both }
  .menu-dlg.is-fechando { animation: menu-fecha .45s cubic-bezier(.7, 0, .84, 0) both }
  .menu-dlg[open] .menu__item { animation: item-entra .8s var(--curva) both; animation-delay: calc(.14s + var(--n, 0) * .07s) }
  .menu-dlg[open] .menu-dlg__pe { animation: item-entra .8s var(--curva) .45s both }
  .menu-dlg.is-fechando .menu__item, .menu-dlg.is-fechando .menu-dlg__pe { animation: none }
  @keyframes menu-abre  { from { clip-path: circle(0 at calc(100% - 44px) 31px) } to { clip-path: circle(150% at calc(100% - 44px) 31px) } }
  @keyframes menu-fecha { from { clip-path: circle(150% at calc(100% - 44px) 31px) } to { clip-path: circle(0 at calc(100% - 44px) 31px) } }
  @keyframes item-entra { from { opacity: 0; transform: translateY(26px) } to { opacity: 1; transform: none } }
}

/* ---------- Revelar ao rolar ---------- */
@media (prefers-reduced-motion: no-preference) {
  .revela { opacity: 0; transform: translateY(22px); transition: opacity .9s var(--curva), transform .9s var(--curva) }
  .revela.is-in { opacity: 1; transform: none }
  .art.revela:nth-child(2) { transition-delay: .08s } .art.revela:nth-child(3) { transition-delay: .16s } .art.revela:nth-child(4) { transition-delay: .24s }
}

/* ---------- Responsivo ---------- */
@media (min-width: 900px) {
  :root { --pad: 40px; --topo-h: 74px }
  .topo { padding: 0 40px }
  .topo__marca img { width: 44px }
  .topo__nav { display: flex }
  .topo__nav { margin-left: auto; margin-right: 26px }
  .topo__comprar { display: inline-flex; height: 42px; padding: 0 18px; margin-right: 18px; font-size: 11px; letter-spacing: .16em; text-indent: .16em }
  .topo__menu-txt { display: inline }
  .topo__menu { padding: 0 4px 0 18px; border-left: 1px solid rgba(255,255,255,.18); border-radius: 0 }

  .kv { --kv-w: 1920; --kv-h: 1080; min-height: 640px }
  .kv__el, .kv__sol, .kv__logo { left: calc(var(--dx) * 1%); top: calc(var(--dy) * 1%); width: calc(var(--dw) * 1%) }
  .kv__frase, .kv__data, .kv__local { top: calc(var(--dy) * 1%) }
  .kv__frase { font-size: calc(var(--kv-fsd) * 1cqw) }
  .kv__data  { font-size: calc(var(--kv-fsd) * 1cqw) }
  .kv__local { font-size: calc(var(--kv-fsd) * 1cqw) }

  .ticker { font-size: 14px; padding: 12px 0 }

  .menu { padding: 34px 40px 30px; width: 100%; max-width: var(--maxw); margin: 0 auto; display: grid; gap: 6px }
  .menu-dlg__pe { padding: 22px 40px 30px }
  .menu__item { grid-template-columns: 96px minmax(0, 1fr) auto; padding: clamp(12px, 2vh, 22px) 34px clamp(12px, 2vh, 22px) 18px }
  /* limitado também pela altura: os quatro itens + topo + rodapé cabem numa tela de notebook */
  .menu__txt { font-size: clamp(60px, min(7.6vw, 10.5vh), 128px) }
  .menu__fig, .menu__fig svg { width: clamp(64px, 9vh, 88px); height: clamp(64px, 9vh, 88px) }
  .menu__seta { font-size: clamp(48px, 7vh, 72px) }

  .verde__in { max-width: var(--maxw); margin: 0 auto; padding: 28px 40px 40px; grid-template-columns: 1fr 1.4fr; align-items: stretch }
  .stats { grid-template-columns: 1fr; align-content: stretch }
  .card { padding: 26px 28px }
  .card__num { font-size: clamp(48px, 5vw, 80px) }
  .mapa { padding: 14px; display: grid; grid-template-rows: 1fr auto }
  .mapa__tela { aspect-ratio: auto; min-height: 380px }
  .mapa__aqui { font-size: 38px; padding: 16px 26px 14px }
  .mapa__sticker { width: 120px; right: 8px; top: 8px }
  .mapa__pe { grid-template-columns: 52px 1fr 1fr 44px; padding: 18px 10px 8px }

  .virada { padding: 90px 40px 190px }
  .virada__sol { width: 40% ; bottom: -46% }
  .virada__sol--e { left: -14% } .virada__sol--d { right: -14% }
  .contagem { gap: 12px }

  .lineup__cabeca { padding: 130px 40px 150px }
  .lineup__nomes { gap: 20px; font-size: clamp(40px, 4.4vw, 76px) }
  .lineup__sol { width: 28%; right: -8%; bottom: -36% }
  .atracoes { max-width: var(--maxw); margin: 0 auto; grid-template-columns: repeat(2, 1fr); gap: 18px; padding: 30px 40px 12px }
  .art__nome { font-size: clamp(16px, 1.5vw, 22px); padding: 13px 26px 12px }
  .lineup__pe { padding: 18px 40px 48px }

  .rodape { padding: 64px 40px 80px }
  .barra { display: none }
  .vip__corpo { padding: 0 34px 28px }
  .vip__lista { margin: -2px -34px 12px; font-size: 12px }
}