/* =========================================================
   Caio Presley as ELVIS — Opção 8 ('68 Comeback)
   O especial de TV de 1968, montado como site de hoje:
   preto profundo, vermelho de sinal, branco duro de luz de
   estúdio e cromo. Letreiro de lâmpadas (acesas, paradas),
   molduras de monitor com cantos arredondados, legendas de
   rodapé de TV, e o final de terno branco como única parte
   clara da página (o rodapé).
   Display: Anton (sans condensada e pesada, como os créditos
   de TV do fim dos anos 60). Rótulos e texto: Archivo
   (largura variável: condensada nos rótulos, normal no texto).
   Movimento: só transform/opacity. Nada pisca.
   ========================================================= */

:root {
  --bg: #0a0a0b;
  --bg-2: #101012;
  --bg-3: #18181b;
  --ink: #f6f4f0;
  --ink-2: #c9c6c0;
  --ink-3: #8b8883;
  --red: #e5202b;
  --red-2: #ff3b45;
  --red-deep: #9c1118;
  /* "amarelo alaranjado": todo texto que era vermelho. Sobre o preto, 10,9:1 (--amber) e 9,7:1 (--amber-2).
     Sobre as superfícies brancas (ingresso, faixa, rodapé) o âmbar claro não passa no contraste, então lá
     entram as versões escuras: --amber-ink para texto pequeno (5,0:1) e --amber-ink-2 para display (3,7:1). */
  --amber: #ffb02e;
  --amber-2: #f5a623;
  --amber-ink: #9a5a00;
  --amber-ink-2: #b86e00;
  --bulb: #ffe9b8;
  --white: #f6f4f0;
  --white-2: #e9e7e2;
  --black: #0a0a0b;
  --black-2: #4a4845;
  --black-3: #6f6c68;
  --chrome: linear-gradient(180deg, #f1f1f3 0%, #b9babf 38%, #7a7b80 52%, #d2d3d7 100%);

  --font-display: 'Anton', Impact, 'Arial Narrow', sans-serif;
  --font-ui: 'Archivo', 'Helvetica Neue', Arial, sans-serif;

  --container: 1240px;
  --gutter: clamp(1.25rem, 5vw, 3.5rem);
  --header-h: 72px;
  --radius: 22px;
  --radius-sm: 12px;
  --hair: rgba(246, 244, 240, .14);
  --ease: cubic-bezier(.2, .7, .2, 1);
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 1rem);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
@media (min-width: 768px) { body { font-size: 1.125rem; } }

/* Chuvisco de TV, parado e bem leve, sobre tudo */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 100;
  pointer-events: none;
  opacity: .045;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
[hidden] { display: none !important; }
p { margin: 0 0 1em; }
::selection { background: var(--red); color: #fff; }

:focus-visible {
  outline: 3px solid var(--amber);
  outline-offset: 3px;
  border-radius: 4px;
}
.btn--red:focus-visible, .ticket__stub :focus-visible { outline-color: var(--ink); }
.ticket :focus-visible, .site-footer :focus-visible { outline-color: var(--black); }

.container {
  width: min(100% - 2 * var(--gutter), var(--container));
  margin-inline: auto;
}

.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;
}

.skip-link {
  position: absolute;
  left: 1rem;
  top: -100px;
  z-index: 200;
  background: var(--white);
  color: var(--black);
  padding: .7rem 1.1rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  text-decoration: none;
  border-radius: 6px;
}
.skip-link:focus { top: 1rem; }

/* ---------- Tipografia ---------- */
/* Anton: título de TV, sempre em caixa alta */
.h2, .hero__pre, .wordmark__elvis, .era__title, .era__num,
.ticket__title, .tile__num, .venue__time-num, .venue__feature-num, .ticker, .eyebrow__num, .tier__price {
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
}

/* Rótulos: Archivo condensada, caixa alta, espaçada (legenda de rodapé de TV) */
.label,
.eyebrow, .facts dt, .countdown__status, .tile__label, .site-nav a, .wordmark__pre,
.era__sub, .ticket__kicker, .ticket__status, .ticket__stub-text, .ticket__stub-date,
.site-footer__links a, .sticky-bar__info strong, .vbtn, .btn, .tvset__label {
  font-family: var(--font-ui);
  font-weight: 700;
  font-stretch: 82%;
  text-transform: uppercase;
  letter-spacing: .14em;
}

.eyebrow {
  display: flex;
  align-items: center;
  gap: .9em;
  margin: 0 0 1rem;
  font-size: .92rem;
  letter-spacing: .24em;
  color: var(--amber);
}
/* número da seção: bloco vermelho com o número branco, como a vinheta de canal */
.eyebrow__num {
  display: inline-grid;
  place-items: center;
  min-width: 2.3em;
  height: 2.3em;
  padding: 0 .4em;
  border-radius: 4px;
  background: var(--red);
  color: #fff;
  letter-spacing: .04em;
  font-size: .95em;
}
/* ponto vermelho aceso (parado) antes da linha do hero */
.onair {
  width: .6em; height: .6em;
  border-radius: 50%;
  background: var(--red-2);
  box-shadow: 0 0 10px 2px rgba(255, 59, 69, .55);
}

.h2 {
  margin: 0;
  font-size: clamp(2.9rem, 6vw, 5.4rem);
  line-height: .92;
  letter-spacing: .01em;
  color: var(--ink);
  text-wrap: balance;
}

.link-accent {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: .22em;
  text-decoration-thickness: 1.5px;
  text-decoration-color: rgba(255, 176, 46, .7);
  transition: color .2s, text-decoration-color .2s;
}
.link-accent:hover { color: var(--amber); text-decoration-color: currentColor; }

/* ---------- Botões: blocos de cantos pouco arredondados, texto condensado ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5em;
  font-size: 1rem;
  font-stretch: 88%;
  letter-spacing: .1em;
  line-height: 1;
  padding: 1.05em 1.6em;
  border-radius: 6px;
  text-decoration: none;
  border: 1.5px solid transparent;
  white-space: nowrap;
  max-width: 100%;
  cursor: pointer;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), background-color .2s, color .2s, border-color .2s;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0) scale(.98); transition-duration: .08s; }

.btn--red {
  background: var(--red);
  color: #fff;
  box-shadow: 0 16px 36px -16px rgba(229, 32, 43, .9);
}
.btn--red:hover { background: var(--red-2); box-shadow: 0 22px 44px -16px rgba(229, 32, 43, 1); }

.btn--black {
  background: var(--black);
  color: var(--ink);
  box-shadow: 0 16px 36px -16px rgba(0, 0, 0, .8);
}
.btn--black:hover { background: #242427; }

.btn--ghost {
  color: var(--ink);
  border-color: rgba(246, 244, 240, .35);
  background: rgba(10, 10, 11, .35);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.btn--ghost:hover { border-color: var(--ink); }

.btn--lg { font-size: 1.08rem; padding: 1.15em 1.9em; }
.btn--sm { font-size: .88rem; padding: .9em 1.35em; }

/* ---------- Cabeçalho ---------- */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  height: var(--header-h);
  border-bottom: 1px solid transparent;
  transition: background-color .35s, border-color .35s;
}
.site-header.is-scrolled {
  background: rgba(10, 10, 11, .86);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-color: var(--hair);
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  height: 100%;
}
.site-header .btn { display: none; }

.site-nav { display: none; gap: 2rem; }
.site-nav a {
  font-size: .86rem;
  letter-spacing: .16em;
  color: var(--ink-2);
  text-decoration: none;
  transition: color .2s;
}
.site-nav a:hover { color: var(--ink); }

@media (min-width: 768px) { .site-header .btn { display: inline-flex; } }
@media (min-width: 1024px) { .site-nav { display: flex; } }

/* Marca pequena */
.wordmark {
  display: inline-flex;
  align-items: baseline;
  gap: .5em;
  text-decoration: none;
  color: var(--ink);
}
.wordmark__pre {
  font-size: .8rem;
  letter-spacing: .18em;
  color: var(--ink-2);
}
.wordmark__pre em,
.ticket__title em,
.ticker em,
.tvset__label em {
  font-family: var(--font-ui);
  font-stretch: 100%;
  font-style: italic;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--amber);
}
.wordmark__pre em { font-size: 1.4em; }
.wordmark__elvis {
  font-size: 1.95rem;
  line-height: 1;
  letter-spacing: .03em;
  color: var(--amber-2);
}
.wordmark--lg .wordmark__elvis { font-size: 3rem; }
.wordmark--lg .wordmark__pre { font-size: .95rem; }

/* ---------- Hero: foto inteira + faixa de texto que encosta na plateia ---------- */
.hero { position: relative; background: var(--bg); }

.hero__banner {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5; /* reserva o espaço (e serve de fallback em gradiente) até a foto chegar */
  background:
    radial-gradient(60% 50% at 50% 35%, rgba(229, 32, 43, .35), transparent 70%),
    radial-gradient(45% 40% at 20% 95%, rgba(229, 32, 43, .12), transparent 70%),
    var(--bg);
}
.hero__banner picture, .hero__banner img {
  display: block;
  width: 100%;
  height: auto; /* imagem inteira, sem recorte */
}
.hero__banner.img-missing picture { display: none; }
/* legibilidade do cabeçalho fixo sobre o topo da foto */
.hero__banner::before {
  content: '';
  position: absolute;
  z-index: 1;
  inset: 0 0 auto;
  height: 160px;
  background: linear-gradient(180deg, rgba(10, 10, 11, .8) 0%, rgba(10, 10, 11, .35) 50%, rgba(10, 10, 11, 0) 100%);
  pointer-events: none;
}

/* A faixa sobe um pouco sobre a plateia (a parte escura embaixo da foto), nunca sobre as figuras ou o letreiro.
   Nesta foto os pés do macacão branco terminam a ~81% da altura; a faixa começa a ~83-84% (celular: ~87%). */
.hero__band {
  position: relative;
  z-index: 2;
  margin-top: clamp(-150px, -7vw, -56px);
  padding-top: clamp(3.5rem, 7vw, 6.5rem);
  background: linear-gradient(180deg, rgba(10, 10, 11, 0) 0, rgba(10, 10, 11, .74) 70px, var(--bg) 170px);
}

.hero__info {
  display: grid;
  gap: 2rem;
  padding-bottom: clamp(2.5rem, 5vw, 4rem);
}
/* nada de conteúdo (botões largos) alargando as colunas além do contêiner */
.hero__info, .hero__id, .hero__cta, .live__text, .tickets__main, .venue__text { min-width: 0; }
.hero__eyebrow { margin-bottom: 1.1rem; }
.hero__title {
  margin: 0;
  display: grid;
  gap: 0;
  font-weight: 400;
  line-height: .9;
}
.hero__pre {
  font-size: clamp(2.3rem, 4.4vw, 3.7rem);
  letter-spacing: .03em;
  color: var(--ink);
}
.hero__lock {
  display: flex;
  align-items: flex-end;
  gap: .45rem;
  margin-top: .4rem;
}
.hero__lock em {
  font-family: var(--font-ui);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.8rem, 3vw, 2.8rem);
  line-height: 1;
  color: var(--amber);
  padding-bottom: clamp(.2rem, .5vw, .45rem);
}

/* O letreiro: imagem do mesmo letreiro de lâmpadas da foto, sobre preto. "screen" faz o preto sumir
   sobre a página escura (a faixa do hero já é preto sólido onde o título fica). Lâmpadas acesas e paradas. */
.hero__name {
  display: block;
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  max-width: clamp(16rem, 34vw, 30rem);
  height: auto;
  mix-blend-mode: screen;
}

.hero__tagline {
  margin: 1.5rem 0 1.6rem;
  font-size: clamp(1.15rem, 1.5vw, 1.4rem);
  line-height: 1.45;
  color: var(--ink-2);
  max-width: 34ch;
}

/* Quando/Onde: tarja de rodapé de TV, com a barra vermelha à esquerda */
.facts {
  display: grid;
  gap: .7rem;
  margin: 0;
}
.facts__item {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  padding-left: .9rem;
  border-left: 3px solid var(--red);
}
.facts dt {
  font-size: .72rem;
  letter-spacing: .22em;
  color: var(--amber);
  min-width: 5.2ch;
}
.facts dd {
  margin: 0;
  font-size: clamp(1.25rem, 1.8vw, 1.6rem);
  font-weight: 500;
  color: var(--ink-2);
}
.facts dd strong { color: var(--ink); font-weight: 800; }

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
}
/* celular estreito: botões grandes em toda a largura e um pouco menores; "Como chegar" vira link */
@media (max-width: 479px) {
  .btn--lg { font-size: .95rem; padding: 1.2em 1.4em; letter-spacing: .08em; }
  .hero__actions .btn--lg, .live__actions .btn--lg { width: 100%; }
  .hero__eyebrow { font-size: .8rem; letter-spacing: .18em; }
  .hero__actions { flex-direction: column; align-items: stretch; gap: .25rem; }
  .hero__actions .btn--ghost {
    align-self: flex-start;
    border: 0;
    background: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    padding: .9em .1em .5em;
    font-size: .95rem;
    letter-spacing: .14em;
    color: var(--ink);
    text-decoration: underline;
    text-underline-offset: .3em;
    text-decoration-color: rgba(255, 176, 46, .7);
  }
  .hero__actions .btn--ghost:hover { color: var(--amber); text-decoration-color: currentColor; }
}

/* Contagem regressiva: relógio de estúdio */
.countdown { margin-top: 1.75rem; }
.countdown__status {
  margin: 0 0 .6rem;
  font-size: .78rem;
  letter-spacing: .24em;
  color: var(--ink-3);
}
.countdown.is-today .countdown__status,
.countdown.is-live .countdown__status { color: var(--amber); font-size: 1.05rem; }
.countdown.is-over .countdown__status { color: var(--ink-2); font-size: 1rem; letter-spacing: .12em; }
.countdown__tiles {
  display: flex;
  gap: .5rem;
}
.countdown.is-live .countdown__tiles,
.countdown.is-over .countdown__tiles { display: none; }
.tile {
  min-width: 4.6rem;
  padding: .7rem .55rem .6rem;
  text-align: center;
  background: #050506;
  border: 1px solid var(--hair);
  border-radius: 8px;
  box-shadow: inset 0 1px 0 rgba(246, 244, 240, .07), 0 14px 34px -20px rgba(0, 0, 0, .9);
}
.tile__num {
  display: block;
  font-size: 2.6rem;
  line-height: 1;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  letter-spacing: .02em;
}
.tile__label {
  display: block;
  margin-top: .3rem;
  font-size: .62rem;
  letter-spacing: .2em;
  color: var(--amber);
}
.countdown__agenda {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin: 1rem 0 0;
  font-size: .92rem;
  color: var(--ink-3);
}

/* painel de ação: botões + contagem */
.hero__cta { display: grid; gap: 1rem; justify-items: start; }
.hero__cta .countdown { margin-top: .25rem; }

@media (min-width: 768px) {
  .hero__banner { aspect-ratio: 1916 / 821; } /* proporção real do banner, evita salto de layout */
  .facts { grid-template-columns: auto auto; gap: .6rem 2.5rem; justify-content: start; }
  .tile { min-width: 5.1rem; }
  .tile__num { font-size: 2.9rem; }
}

@media (min-width: 960px) {
  .hero__info {
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    align-items: center;
    gap: 3rem;
  }
  .hero__id .facts { grid-template-columns: 1fr; gap: .5rem; } /* na coluna, Quando/Onde um por linha */
  /* o painel vira um monitor de estúdio: moldura escura com fio cromado */
  .hero__cta {
    justify-self: end;
    width: 100%;
    max-width: 520px;
    padding: 1.75rem 1.75rem 1.85rem;
    border: 1px solid rgba(246, 244, 240, .12);
    border-radius: 18px;
    background: linear-gradient(180deg, #161618, #0d0d0f);
    box-shadow:
      0 0 0 5px #121214,
      0 0 0 6px rgba(246, 244, 240, .1),
      0 40px 80px -40px rgba(0, 0, 0, .95);
  }
}

/* Entrada do hero: cada bloco sobe e aparece, em cascata. Uma vez só, no carregamento.
   O título anima pelos filhos (e não pelo h1): um ancestral animado viraria contexto de empilhamento
   e o "screen" do letreiro passaria a misturar com o nada, mostrando o fundo preto da imagem. */
.hero__id > :not(.hero__title), .hero__cta, .hero__pre, .hero__lock > * {
  animation: rise .9s var(--ease) both;
}
.hero__eyebrow { animation-delay: .05s; }
.hero__pre { animation-delay: .12s; }
.hero__lock > * { animation-delay: .18s; }
.hero__tagline { animation-delay: .22s; }
.hero__id .facts { animation-delay: .3s; }
.hero__cta { animation-delay: .38s; }
@keyframes rise {
  from { opacity: 0; transform: translateY(26px); }
  to { opacity: 1; transform: none; }
}

/* Ao rolar, a foto sobe um pouco mais devagar que a página (paralaxe), só onde o navegador
   suporta animação por rolagem; sem suporte, fica parada. */
@supports (animation-timeline: view()) {
  .hero__banner picture {
    animation: banner-drift linear both;
    animation-timeline: view(block 0px); /* 0px: ignora o scroll-padding do cabeçalho, senão a foto já nasce deslocada */
    animation-range: exit 0% exit 100%;
  }
  @keyframes banner-drift {
    to { transform: translateY(16%); }
  }
}

/* ---------- Faixa (ticker): branco duro de luz de estúdio, letra de título, bem devagar ---------- */
.ticker {
  position: relative;
  overflow: hidden;
  padding: 1.15rem 0;
  background: var(--white);
  color: var(--black);
  font-size: clamp(1.45rem, 2.3vw, 2rem);
  letter-spacing: .05em;
  line-height: 1;
  border-top: 4px solid var(--red);
  border-bottom: 4px solid var(--red);
}
.ticker__track {
  display: flex;
  width: max-content;
  animation: ticker 70s linear infinite;
}
.ticker__group {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding-right: 1.5rem;
  white-space: nowrap;
}
/* separador: uma lâmpada vermelha */
.ticker__group i {
  width: .42em; height: .42em;
  border-radius: 50%;
  background: var(--red);
}
.ticker em { font-size: .9em; color: var(--amber-ink); } /* sobre o branco: âmbar escuro */
@keyframes ticker { to { transform: translateX(-50%); } }

/* ---------- Seções ---------- */
.section {
  position: relative;
  padding-block: clamp(5rem, 10vw, 8.5rem);
}

/* ---------- O show ---------- */
.show__intro {
  display: grid;
  gap: 2rem;
  margin-bottom: clamp(3rem, 6vw, 5rem);
}
.show__text p {
  font-size: clamp(1.1rem, 1.35vw, 1.3rem);
  line-height: 1.6;
  color: var(--ink-2);
  max-width: 50ch;
}
.show__text p:last-child { margin-bottom: 0; }
.show__text em { color: var(--ink); font-style: italic; }

.eras {
  list-style: none;
  margin: 0 calc(-1 * var(--gutter));
  padding: .75rem var(--gutter) 1.25rem;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: min(80vw, 360px);
  gap: 1.25rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--gutter);
  scrollbar-width: none;
}
.eras::-webkit-scrollbar { display: none; }

/* cartões com cantos de tela de TV */
.era {
  position: relative;
  scroll-snap-align: start;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--bg-3);
  isolation: isolate;
  box-shadow: 0 0 0 1px rgba(246, 244, 240, .1), 0 40px 70px -40px rgba(0, 0, 0, .95);
  transition: transform .6s var(--ease);
}
/* o cartão de 68 (o tema da página) ganha o aro vermelho */
.era--68 {
  box-shadow:
    0 0 0 1px rgba(246, 244, 240, .12),
    0 0 0 6px var(--bg),
    0 0 0 7px var(--red),
    0 30px 90px -30px rgba(229, 32, 43, .5);
}
.era__media {
  position: absolute;
  inset: 0;
  margin: 0;
  background:
    radial-gradient(80% 55% at 50% 0%, rgba(229, 32, 43, .25), transparent 70%),
    linear-gradient(180deg, #1c1c1f 0%, #0a0a0b 100%);
}
.era__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 20%;
  transition: transform .9s var(--ease);
}
.era.img-missing .era__media img { display: none; }
.era::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10, 10, 11, .15) 0%, rgba(10, 10, 11, 0) 28%, rgba(10, 10, 11, .55) 60%, rgba(10, 10, 11, .97) 100%);
  z-index: 1;
}
/* o ano fica no canto superior direito do cartão (fora do bloco de texto, para não bater no título) */
.era__num {
  position: absolute;
  top: 1rem; right: 1.2rem;
  z-index: 2;
  font-size: 4.4rem;
  line-height: 1;
  color: var(--amber);
  letter-spacing: .01em;
  text-shadow: 0 0 24px rgba(255, 176, 46, .45);
  transition: transform .6s var(--ease);
}
.era__body {
  position: absolute;
  inset: auto 0 0;
  z-index: 2;
  padding: 1.6rem;
}
.era__title {
  margin: 0;
  font-size: 2.5rem;
  line-height: .95;
  letter-spacing: .02em;
  color: var(--ink);
}
.era__sub {
  margin: .5rem 0 .7rem;
  font-size: .78rem;
  letter-spacing: .2em;
  color: var(--amber);
}
.era__text {
  margin: 0;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--ink-2);
}
@media (hover: hover) {
  .era:hover { transform: translateY(-6px); }
  .era:hover .era__media img { transform: scale(1.05); }
  .era:hover .era__num { transform: translateY(-4px); }
}

@media (min-width: 900px) {
  .show__intro { grid-template-columns: 1fr 1fr; align-items: end; gap: 4rem; }
  .eras {
    grid-auto-flow: row;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-columns: auto;
    gap: 1.75rem;
    margin: 0;
    padding: 0 0 2.5rem;
    overflow: visible;
  }
  .era:nth-child(2) { translate: 0 2.75rem; }
  .era__body { padding: 1.9rem; }
  .era__title { font-size: 2.8rem; }
}

/* ---------- Ao vivo: o vídeo num monitor de estúdio, em cima do palco quadrado ---------- */
.live {
  background: var(--bg-2);
  border-top: 1px solid var(--hair);
  overflow: hidden;
}
/* linhas de varredura paradas, quase invisíveis: textura de estúdio no fundo da seção, não sobre o vídeo */
.live::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(0deg, rgba(246, 244, 240, .022) 0 1px, transparent 1px 4px);
  pointer-events: none;
}
.live__grid {
  position: relative;
  display: grid;
  gap: 3rem;
}
.live__lead {
  margin: 1.2rem 0 1.8rem;
  font-size: clamp(1.1rem, 1.35vw, 1.3rem);
  line-height: 1.55;
  color: var(--ink-2);
  max-width: 36ch;
}
.live__actions { display: flex; flex-wrap: wrap; gap: .75rem; }
.live__text { position: relative; z-index: 1; }

.live__stage {
  position: relative;
  display: grid;
  justify-items: center;
  padding: clamp(2rem, 6vw, 3rem) 0 clamp(2.5rem, 7vw, 4rem);
}
/* luz vermelha de estúdio atrás do monitor */
.live__glow {
  position: absolute;
  left: 50%; top: 50%;
  width: min(140vw, 780px);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgba(229, 32, 43, .55), rgba(229, 32, 43, .2) 45%, transparent 72%);
  pointer-events: none;
}
/* o palco quadrado, visto de cima e em perspectiva, embaixo do monitor */
.live__ring {
  position: absolute;
  left: 50%; bottom: 0;
  width: min(120vw, 640px);
  aspect-ratio: 1;
  transform: translateX(-50%) perspective(900px) rotateX(70deg);
  transform-origin: 50% 100%;
  border: 2px solid rgba(255, 59, 69, .65);
  border-radius: 6px;
  background: radial-gradient(60% 60% at 50% 50%, rgba(229, 32, 43, .22), transparent 70%);
  box-shadow: 0 0 60px rgba(229, 32, 43, .3), inset 0 0 70px rgba(229, 32, 43, .22);
  pointer-events: none;
}

/* O aparelho: moldura escura com fio cromado, tela de cantos arredondados, painel com etiqueta, botões e luz */
.tvset {
  position: relative;
  z-index: 1;
  width: min(100%, 400px);
  padding: 12px;
  border-radius: 36px;
  background: linear-gradient(165deg, #2c2c31 0%, #141416 42%, #1d1d21 60%, #0e0e10 100%);
  box-shadow:
    inset 0 1px 0 rgba(246, 244, 240, .16),
    0 0 0 1px rgba(246, 244, 240, .14),
    0 0 0 3px #0a0a0b,
    0 0 0 4px rgba(246, 244, 240, .06),
    0 60px 90px -40px rgba(0, 0, 0, .95);
}
.live__player {
  position: relative;
  margin: 0;
  width: 100%;
  aspect-ratio: 478 / 680;
  border-radius: 26px;
  overflow: hidden;
  background: #000 url('assets/video/show-poster.jpg') center / cover no-repeat;
  box-shadow: inset 0 0 0 1px rgba(246, 244, 240, .08);
}
.live__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  background: transparent;
}
/* sombra na base, só onde ficam os botões */
.live__player::after {
  content: '';
  position: absolute;
  inset: auto 0 0;
  height: 38%;
  background: linear-gradient(180deg, rgba(10, 10, 11, 0), rgba(10, 10, 11, .78));
  pointer-events: none;
}
.tvset__panel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .95rem .6rem .35rem;
}
.tvset__label {
  font-size: .66rem;
  letter-spacing: .2em;
  color: var(--ink-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tvset__label em { font-size: 1.25em; }
.tvset__knobs { display: flex; gap: .5rem; flex: none; }
.tvset__knobs i {
  width: 14px; height: 14px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #f4f4f6, #96979c 55%, #4f5055 100%);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .9), inset 0 0 0 1px rgba(0, 0, 0, .35);
}
/* luz de "ligado": acesa, parada */
.tvset__led {
  flex: none;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--red-2);
  box-shadow: 0 0 8px 2px rgba(255, 59, 69, .65);
}

.live__controls {
  position: absolute;
  z-index: 3;
  left: 1rem; right: 1rem; bottom: 1rem;
  display: flex;
  justify-content: space-between;
  gap: .5rem;
}
.vbtn {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  padding: .8em 1.05em;
  font-size: .8rem;
  letter-spacing: .12em;
  line-height: 1;
  color: var(--black);
  background: var(--white);
  border: 0;
  border-radius: 6px;
  cursor: pointer;
  box-shadow: 0 10px 24px -10px rgba(0, 0, 0, .8);
  transition: transform .25s var(--ease), background-color .2s, color .2s;
}
.vbtn:hover { background: #fff; transform: translateY(-1px); }
.vbtn:active { transform: scale(.97); }
.vbtn--icon { padding: .8em; }
.vbtn__icon { flex: none; }
.vbtn__icon--sound, .vbtn__icon--play { display: none; }
.js-video-sound[aria-pressed="true"] { background: var(--red); color: #fff; }
.js-video-sound[aria-pressed="true"]:hover { background: var(--red-2); }
.js-video-sound[aria-pressed="true"] .vbtn__icon--sound { display: block; }
.js-video-sound[aria-pressed="true"] .vbtn__icon--muted { display: none; }
.js-video-play[aria-pressed="false"] .vbtn__icon--play { display: block; }
.js-video-play[aria-pressed="false"] .vbtn__icon--pause { display: none; }

/* botão grande de play: só com o vídeo parado (movimento reduzido ou pausa do usuário) */
.live__bigplay {
  display: none;
  position: absolute;
  z-index: 3;
  left: 50%; top: 50%;
  width: 88px; height: 88px;
  transform: translate(-50%, -50%);
  align-items: center;
  justify-content: center;
  padding: 0 0 0 5px;
  color: #fff;
  background: var(--red);
  border: 0;
  border-radius: 50%;
  box-shadow: 0 24px 50px -16px rgba(0, 0, 0, .9), 0 0 0 1px rgba(246, 244, 240, .15);
  cursor: pointer;
  transition: transform .3s var(--ease), background-color .2s;
}
.live__bigplay:hover { background: var(--red-2); transform: translate(-50%, -50%) scale(1.06); }
.live__stage.is-paused .live__bigplay { display: flex; }
/* movimento reduzido ou vídeo ainda não iniciado: o pôster fica à mostra até a pessoa dar play */
.live__stage.is-still:not(.is-playing) .live__video { opacity: 0; }
/* vídeo que não carregou: fica o pôster, sem controles. Sem JS, ficam os controles nativos do navegador. */
.live__stage.is-unavailable .live__controls,
.live__stage.is-unavailable .live__bigplay,
.no-js .live__controls,
.no-js .live__bigplay { display: none; }
.no-js .live__player::after { display: none; }

/* Faixa de fotos reais: telas pequenas, cantos de monitor */
.fotos {
  list-style: none;
  margin: clamp(3rem, 6vw, 5rem) auto 0;
  padding: 0;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: min(78vw, 340px);
  gap: 1rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--gutter);
  scrollbar-width: none;
  position: relative;
}
.fotos::-webkit-scrollbar { display: none; }
.fotos__item {
  scroll-snap-align: start;
  aspect-ratio: 4 / 3;
  border-radius: 16px;
  overflow: hidden;
  background: var(--bg-3);
  box-shadow: 0 0 0 1px rgba(246, 244, 240, .1), 0 30px 60px -36px rgba(0, 0, 0, .9);
}
.fotos__item img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .9s var(--ease);
}
.fotos__item.img-missing img { display: none; }
@media (hover: hover) { .fotos__item:hover img { transform: scale(1.04); } }

@media (max-width: 767px) {
  .fotos { width: auto; margin-inline: 0; padding-inline: var(--gutter); }
}
@media (min-width: 768px) {
  .fotos {
    grid-auto-flow: row;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-columns: auto;
    gap: 1.25rem;
    overflow: visible;
  }
  .fotos__item:nth-child(even) { translate: 0 1.5rem; }
}
@media (min-width: 900px) {
  .live__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 500px);
    align-items: center;
    gap: 4rem;
  }
}

/* paralaxe leve da luz vermelha ao rolar (só com suporte a animação por rolagem) */
@supports (animation-timeline: view()) {
  .live__glow {
    animation: glow-drift linear both;
    animation-timeline: view(block 0px);
    animation-range: entry 0% exit 100%;
  }
  @keyframes glow-drift {
    from { transform: translate(-50%, -42%); }
    to { transform: translate(-50%, -58%); }
  }
}

/* ---------- Ingressos ---------- */
.tickets {
  background: var(--bg);
  overflow: hidden;
  border-top: 1px solid var(--hair);
}
/* um canhão de luz vermelha, bem apagado, vindo de cima à direita */
.tickets::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(45% 55% at 85% 8%, rgba(229, 32, 43, .2), transparent 70%);
  pointer-events: none;
}
.tickets__grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2.5rem;
}
/* foto de couro, em moldura de monitor alta */
.tickets__photo {
  display: none;
  margin: 0;
  aspect-ratio: 4 / 5;
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  background: radial-gradient(60% 50% at 50% 40%, rgba(229, 32, 43, .25), transparent 70%), var(--bg-3);
  box-shadow: 0 0 0 1px rgba(246, 244, 240, .12), 0 50px 90px -40px rgba(0, 0, 0, .95);
}
.tickets__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }
.tickets__photo.img-missing img { display: none; }
.tickets__lead {
  margin: 1.2rem 0 2.2rem;
  font-size: clamp(1.1rem, 1.35vw, 1.3rem);
  line-height: 1.55;
  color: var(--ink-2);
  max-width: 42ch;
}

/* O ingresso: branco duro, texto preto, canhoto vermelho */
.ticket {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  background: var(--white);
  color: var(--black);
  border-radius: 14px;
  box-shadow: 0 50px 90px -40px rgba(0, 0, 0, .95), 0 0 0 1px rgba(246, 244, 240, .2);
  background-image:
    linear-gradient(135deg, rgba(255, 255, 255, .6), transparent 40%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.06'/%3E%3C/svg%3E");
}
.ticket__main { padding: clamp(1.6rem, 4vw, 2.75rem); }
.ticket__head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: .75rem 1rem;
  margin-bottom: 1.1rem;
}
.ticket__kicker {
  font-size: .82rem;
  letter-spacing: .2em;
  color: var(--amber-ink);
}
.ticket__status {
  display: inline-flex;
  align-items: center;
  gap: .55em;
  font-size: .7rem;
  letter-spacing: .14em;
  padding: .55em .9em;
  border: 1.5px solid currentColor;
  border-radius: 4px;
  color: var(--black-2);
}
.ticket__status.is-open { color: var(--black); }
.ticket__status.is-open::before {
  content: '';
  width: .55em; height: .55em;
  border-radius: 50%;
  background: var(--red);
}
.ticket__title {
  margin: 0;
  font-size: clamp(2.3rem, 4.2vw, 3.4rem);
  line-height: .95;
  letter-spacing: .02em;
}
.ticket__title em { color: var(--amber-ink-2); font-size: .55em; }
.ticket__title span { color: var(--amber-ink-2); }
.ticket__venue {
  margin: .8rem 0 1.6rem;
  font-size: .98rem;
  color: var(--black-2);
}

.tiers {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1.5px dashed rgba(10, 10, 11, .3);
}
.tier {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 1rem 0;
  border-bottom: 1.5px dashed rgba(10, 10, 11, .3);
}
.tier__name { display: block; font-weight: 700; font-size: 1.05rem; }
.tier__note { display: block; font-size: .9rem; color: var(--black-2); }
.tier__price {
  font-size: 2.6rem;
  line-height: 1;
  letter-spacing: .01em;
  color: var(--black);
  white-space: nowrap;
}
.tier__price small {
  font-family: var(--font-ui);
  font-weight: 700;
  font-stretch: 88%;
  font-size: .45em; /* >= 18,7px em negrito: conta como texto grande, 3,7:1 basta */
  letter-spacing: .08em;
  vertical-align: .55em;
  margin-right: .25em;
  color: var(--amber-ink-2);
}
.tier__price--soon {
  font-family: var(--font-ui);
  font-style: italic;
  font-weight: 500;
  font-size: 1.1rem;
  text-transform: none;
  color: var(--black-2);
}
.ticket__actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .9rem;
  margin-top: 1.6rem;
}
.ticket__hint {
  margin: 0;
  font-size: .95rem;
  line-height: 1.5;
  color: var(--black-2);
  max-width: 40ch;
}

.ticket__stub {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.6rem;
  background: var(--red);
  color: #fff;
  border-top: 2px dashed rgba(10, 10, 11, .4);
  border-radius: 0 0 14px 14px;
}
/* recortes (picote) nas pontas da linha tracejada */
.ticket__stub::before, .ticket__stub::after {
  content: '';
  position: absolute;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--bg);
  box-shadow: inset 0 0 0 1px rgba(246, 244, 240, .2);
  top: -14px;
}
.ticket__stub::before { left: -13px; }
.ticket__stub::after { right: -13px; }
.ticket__stub-text {
  font-size: .9rem;
  letter-spacing: .34em;
  color: #fff;
}
.ticket__barcode {
  flex: 1;
  height: 28px;
  max-width: 150px;
  opacity: .9;
  background: repeating-linear-gradient(90deg,
    #fff 0 2px, transparent 2px 4px,
    #fff 4px 5px, transparent 5px 8px,
    #fff 8px 11px, transparent 11px 13px,
    #fff 13px 14px, transparent 14px 17px);
}
.ticket__stub-date {
  font-size: 1rem;
  letter-spacing: .12em;
}

/* celular estreito: ingresso com margens menores, lote numa linha só, botão em toda a largura
   (fica depois das regras do ingresso de propósito: mesma especificidade, a última vence) */
@media (max-width: 479px) {
  .ticket__main { padding: 1.4rem 1rem; }
  .tier__info { flex: 1 1 auto; min-width: 0; }
  .tier__price { flex: none; font-size: 2.2rem; }
  .tier__name { font-size: .95rem; }
  .tier__note { font-size: .85rem; }
  .tier__price--soon { font-size: .9rem; }
  .ticket__actions .btn { width: 100%; font-size: .9rem; padding: 1.25em 1em; letter-spacing: .06em; }
}

@media (min-width: 640px) {
  .ticket { grid-template-columns: 1fr 112px; }
  .ticket__stub {
    flex-direction: column;
    justify-content: space-between;
    padding: 1.6rem .75rem;
    border-top: 0;
    border-left: 2px dashed rgba(10, 10, 11, .4);
    border-radius: 0 14px 14px 0;
  }
  .ticket__stub::before, .ticket__stub::after { top: auto; left: -14px; right: auto; }
  .ticket__stub::before { top: -13px; }
  .ticket__stub::after { bottom: -13px; }
  .ticket__stub-text { writing-mode: vertical-rl; transform: rotate(180deg); }
  .ticket__barcode {
    width: 28px;
    height: 100%;
    max-width: none;
    max-height: 150px;
    background: repeating-linear-gradient(180deg,
      #fff 0 2px, transparent 2px 4px,
      #fff 4px 5px, transparent 5px 8px,
      #fff 8px 11px, transparent 11px 13px,
      #fff 13px 14px, transparent 14px 17px);
  }
  .ticket__stub-date { writing-mode: vertical-rl; transform: rotate(180deg); }
}

@media (min-width: 1000px) {
  .tickets__grid { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); align-items: center; gap: 4.5rem; }
  .tickets__photo { display: block; }
}

/* ---------- O local ---------- */
.venue { background: var(--bg-2); border-top: 1px solid var(--hair); }
.venue__grid { display: grid; gap: 2.5rem; }
.venue__lead {
  margin: 1.2rem 0 1.8rem;
  font-size: clamp(1.1rem, 1.35vw, 1.3rem);
  line-height: 1.55;
  color: var(--ink-2);
  max-width: 40ch;
}
.venue__features {
  list-style: none;
  margin: 0 0 2rem;
  padding: 0;
  display: grid;
  gap: .7rem;
}
.venue__features li {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-size: 1.1rem;
  color: var(--ink);
}
.venue__feature-num {
  font-size: 2.4rem;
  line-height: 1;
  color: var(--amber);
  min-width: 2.6rem;
  letter-spacing: .01em;
}
.venue__feature-icon {
  min-width: 2.6rem;
  display: flex;
  align-items: center;
  padding-left: .55rem;
}
.venue__feature-icon::before {
  content: '';
  width: 8px; height: 8px;
  background: var(--amber); /* marcadores da lista acompanham o "12" âmbar */
  border-radius: 2px;
}
.venue__address {
  margin: 0 0 1.6rem;
  padding-left: 1.1rem;
  border-left: 3px solid var(--red);
  font-style: normal;
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--ink-2);
}
.venue__address strong { color: var(--ink); font-size: 1.15em; }
.venue__time {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  margin-bottom: 2rem;
}
.venue__time-num {
  font-size: 4.6rem;
  line-height: .9;
  letter-spacing: .01em;
  color: var(--amber-2);
  text-shadow: 0 0 30px rgba(255, 176, 46, .4);
}
.venue__time-text {
  font-size: 1rem;
  line-height: 1.45;
  color: var(--ink-2);
}
.venue__photo {
  margin: 0;
  position: relative;
  aspect-ratio: 16 / 11;
  border-radius: var(--radius);
  overflow: hidden;
  background:
    radial-gradient(70% 60% at 50% 20%, rgba(229, 32, 43, .2), transparent 70%),
    linear-gradient(180deg, #1c1c1f 0%, #0a0a0b 100%);
  box-shadow: 0 0 0 1px rgba(246, 244, 240, .12), 0 50px 90px -40px rgba(0, 0, 0, .95);
}
.venue__photo img { width: 100%; height: 100%; object-fit: cover; }
.venue__photo.img-missing img { display: none; }
.venue__map {
  margin-top: clamp(3rem, 6vw, 4.5rem);
  aspect-ratio: 4 / 3;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--hair);
  background: var(--bg-3);
}
.venue__map iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  /* mapa claro do Google virado para o tema preto e branco; o pino continua vermelho */
  filter: invert(.92) hue-rotate(180deg) grayscale(.6) brightness(.9) contrast(.95);
}

@media (min-width: 900px) {
  .venue__grid { grid-template-columns: 1fr 1fr; align-items: center; gap: 5rem; }
  .venue__photo { aspect-ratio: 4 / 5; max-height: 680px; }
  .venue__map { aspect-ratio: 16 / 6; }
}

/* ---------- FAQ ---------- */
.faq { background: var(--bg); border-top: 1px solid var(--hair); }
.faq__grid { display: grid; gap: 2rem; }
.faq__item { border-top: 1px solid var(--hair); }
.faq__item:last-child { border-bottom: 1px solid var(--hair); }
.faq__item summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 1.35rem 0;
  font-family: var(--font-ui);
  font-stretch: 92%;
  font-weight: 700;
  font-size: clamp(1.25rem, 1.8vw, 1.55rem);
  letter-spacing: -.005em;
  line-height: 1.2;
  color: var(--ink);
  transition: color .2s;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
  content: '+';
  flex: none;
  display: grid;
  place-items: center;
  width: 2.1rem; height: 2.1rem;
  border-radius: 4px;
  background: var(--red);
  color: #fff;
  font-weight: 400;
  font-stretch: 100%;
  font-size: 1.6rem;
  line-height: 1;
  transition: transform .35s var(--ease), background-color .2s;
}
.faq__item summary:hover { color: var(--amber); }
.faq__item summary:hover::after { background: var(--red-2); }
.faq__item[open] summary::after { transform: rotate(45deg); }
.faq__answer {
  padding: 0 0 1.6rem;
  max-width: 58ch;
  font-size: 1.05rem;
  color: var(--ink-2);
  line-height: 1.6;
}
.faq__answer p { margin: 0 0 .75rem; }
.faq__answer p:last-child { margin-bottom: 0; }
.faq__item[open] .faq__answer { animation: fade .4s var(--ease) both; }
@keyframes fade { from { opacity: 0; transform: translateY(-6px); } }

@media (min-width: 900px) {
  .faq__grid { grid-template-columns: 1fr 2fr; gap: 4rem; align-items: start; }
  .faq__intro { position: sticky; top: calc(var(--header-h) + 2rem); }
}

/* ---------- Rodapé: a página termina em luz branca (o final de terno branco) ---------- */
.site-footer {
  position: relative;
  padding: 0 0 7.5rem;
  background: var(--white);
  color: var(--black);
}
/* escala de cinza do padrão de teste, do preto da página ao branco do rodapé */
.site-footer__wedge {
  height: 14px;
  background: linear-gradient(90deg,
    #0a0a0b 0 10%, #262629 10% 20%, #434347 20% 30%, #616165 30% 40%, #7f7f83 40% 50%,
    #9d9da1 50% 60%, #babac0 60% 70%, #d4d4d7 70% 80%, #e7e6e3 80% 90%, #f6f4f0 90% 100%);
}
.site-footer__inner { display: grid; gap: 2rem; padding-top: 3.25rem; }
.site-footer .wordmark { color: var(--black); }
.site-footer .wordmark__pre { color: var(--black-2); }
.site-footer .wordmark__pre em { color: var(--amber-ink); }
.site-footer .wordmark__elvis { color: var(--amber-ink-2); }
.site-footer__date {
  margin: 1rem 0 0;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--black-3);
}
.site-footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem 1.75rem;
  align-content: start;
}
.site-footer__links a {
  font-size: .86rem;
  letter-spacing: .16em;
  color: var(--black);
  text-decoration: none;
  transition: color .2s;
}
.site-footer__links a:hover { color: var(--amber-ink); }
.site-footer__credit {
  grid-column: 1 / -1;
  margin: 0;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(10, 10, 11, .15);
  font-size: .85rem;
  line-height: 1.6;
  color: var(--black-3);
}
@media (min-width: 768px) {
  .site-footer { padding-bottom: 3.5rem; }
  .site-footer__inner { grid-template-columns: 1fr auto; }
  .site-footer__links { padding-top: .75rem; }
}

/* ---------- Barra fixa (celular) ---------- */
.sticky-bar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .75rem var(--gutter) calc(.75rem + env(safe-area-inset-bottom));
  background: rgba(10, 10, 11, .92);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-top: 1px solid var(--hair);
  transform: translateY(110%);
  transition: transform .4s var(--ease);
}
.sticky-bar.is-visible,
.no-js .sticky-bar { transform: none; }
.sticky-bar__info { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.sticky-bar__info strong {
  font-size: 1rem;
  letter-spacing: .08em;
  color: var(--ink);
  white-space: nowrap;
}
.sticky-bar__info span { font-size: .8rem; color: var(--ink-3); white-space: nowrap; }
.sticky-bar .btn { flex: none; font-size: .85rem; padding: 1em 1.25em; }
@media (min-width: 768px) { .sticky-bar { display: none; } }

/* ---------- Revelação ao rolar ---------- */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .8s ease var(--d, 0s), transform .8s var(--ease) var(--d, 0s);
}
.reveal.in, .no-js .reveal { opacity: 1; transform: none; }

/* ---------- Movimento reduzido: tudo parado e visível ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .ticker__track { animation: none; }
  .reveal { opacity: 1; transform: none; }
  .hero__id > *, .hero__cta, .hero__pre, .hero__lock > * { animation: none; opacity: 1; transform: none; }
  .hero__banner picture, .live__glow { animation: none; }
  .live__glow { transform: translate(-50%, -50%); }
  .era:hover, .era:hover .era__media img, .era:hover .era__num, .fotos__item:hover img { transform: none; }
  .btn:hover, .vbtn:hover { transform: none; }
  /* vídeo: nada toca sozinho; fica o pôster com o botão de play (o main.js também cancela o autoplay) */
  .live__stage .live__bigplay { display: flex; }
  .live__stage.is-playing .live__bigplay { display: none; }
}