/* =========================================================
   BRAZIL DAY ATX — ARTIST REVEAL
   Seção cinematográfica de revelação do lineup.

   Tudo aqui é escopado em `.ar` — nada vaza pro resto da
   página (styles.css / invitation-embed.css continuam intactos).

   Três estados, nessa ordem de segurança:
     .ar            → base: TUDO revelado (sem JS, sem IO, crawler)
     .ar--static    → prefers-reduced-motion: crossfade silhueta→foto
     .ar--ready     → JS assumiu: trilho de scroll + reveal scrubbed

   O motor todo é dirigido por custom properties que o JS escreve
   em cada .ar-act (--p, --rev, --name, --q, --hint, --beam, --flash).
   O que anima por frame é transform/opacity (composto na GPU) e um
   clip-path retangular; nenhum filtro é recalculado por frame.
   ========================================================= */

.ar{
  --ar-ink:#04070f;
  --ar-ink-2:#0a1226;
  --ar-gold:#F4C430;
  --ar-gold-soft:#ffe9a8;
  --ar-green:#41C96B;
  --ar-line:rgba(255,255,255,.14);
  --ar-track:165vh;           /* altura do trilho de scroll de cada ato */
  --ar-top:calc(var(--header-h, 74px) + 12px);
  --ar-bottom:96px;           /* espaço reservado pra barra fixa "Buy Tickets" */

  position:relative;
  background:var(--ar-ink);
  color:#fff;
  isolation:isolate;
}
/* Custom property não valida o valor: `--ar-track:165svh` seria aceito e
   depois quebraria no `height` do Safari < 15.4. O @supports é o único
   jeito de dar fallback pra uma variável. */
@supports (height:1svh){
  .ar{ --ar-track:165svh; }
}
.ar::before,
.ar::after{
  content:""; position:absolute; left:0; right:0; height:2px; z-index:6;
  background:var(--grad-flag, linear-gradient(90deg,#1FA64A,#F4C430,#41C96B));
}
.ar::before{ top:0; }
.ar::after{ bottom:0; }

.ar-wrap{ width:100%; max-width:var(--maxw,1200px); margin:0 auto; padding:0 24px; }

/* ---------------------------------------------------------
   INTRO — curta de propósito
   --------------------------------------------------------- */
.ar-intro{
  position:relative; z-index:2;
  min-height:62vh; min-height:62svh;
  display:flex; align-items:center;
  padding:clamp(72px,12vh,120px) 0 clamp(40px,7vh,72px);
  text-align:center;
  overflow:hidden;
}
.ar-intro__glow{
  position:absolute; inset:-20% -10% auto; height:120%;
  background:
    radial-gradient(46% 38% at 50% 22%, rgba(31,166,74,.20), transparent 70%),
    radial-gradient(40% 34% at 22% 72%, rgba(244,196,48,.14), transparent 72%),
    radial-gradient(44% 36% at 82% 66%, rgba(12,42,107,.55), transparent 74%);
  pointer-events:none; z-index:-1;
}
.ar-eyebrow{
  margin:0 0 18px; font-family:var(--f-head,"Oswald",sans-serif);
  font-size:.78rem; font-weight:600; letter-spacing:.34em; text-transform:uppercase;
  color:var(--ar-gold);
  display:inline-flex; align-items:center; gap:12px;
}
.ar-eyebrow::before,
.ar-eyebrow::after{ content:""; width:34px; height:1px; background:linear-gradient(90deg,transparent,var(--ar-gold)); }
.ar-eyebrow::after{ background:linear-gradient(90deg,var(--ar-gold),transparent); }

/* Anton em caixa alta com acento (ATRAÇÕES / TAMBÉM) empilha til em cima
   de agudo: abaixo de ~1.22 de leading as duas linhas se tocam. */
.ar-intro__title{
  margin:0 auto; max-width:20ch;
  font-family:var(--f-display,"Anton",sans-serif);
  font-size:clamp(2.4rem,8.4vw,5.4rem);
  line-height:1.24;
  letter-spacing:.005em; text-transform:uppercase;
  color:#fff; text-wrap:balance;
}
.ar-intro__lead{
  margin:22px auto 0; max-width:46ch;
  font-size:clamp(1rem,2.3vw,1.16rem); line-height:1.6; color:rgba(255,255,255,.76);
}
.ar-intro__hint{
  margin:30px 0 0; display:inline-flex; align-items:center; gap:12px;
  font-family:var(--f-head,"Oswald",sans-serif); font-size:.76rem; font-weight:600;
  letter-spacing:.26em; text-transform:uppercase; color:rgba(255,255,255,.62);
}
.ar-intro__arrow{
  width:26px; height:26px; border-radius:50%;
  border:1px solid rgba(244,196,48,.55); color:var(--ar-gold);
  display:grid; place-items:center; font-size:.85rem; line-height:1;
}

/* ---------------------------------------------------------
   ATOS
   --------------------------------------------------------- */
.ar-acts{ margin:0; padding:0; list-style:none; position:relative; z-index:1; }

.ar-act{
  /* defaults do estado BASE = tudo revelado (sem JS / crawler) */
  --p:1; --rev:1; --name:1; --bio:1; --q:0; --hint:0; --beam:0; --flash:0;
  position:relative; margin:0; padding:0; list-style:none;
}
.ar-act::marker{ content:""; }

.ar-act__pin{ position:relative; }

.ar-act__stage{
  position:relative;
  min-height:78vh; min-height:78svh;
  background:var(--ar-ink);
  overflow:hidden;
}

/* ---- moldura da foto ---- */
.ar-act__frame{
  position:absolute; inset:0; z-index:0;
  overflow:hidden;
  background:var(--ar-ink);
}
.ar-act__shot,
.ar-act__shot img{ position:absolute; inset:0; width:100%; height:100%; display:block; }
.ar-act__shot img{ object-fit:cover; object-position:50% 24%; }

/* silhueta: MESMA arte, filtro CONSTANTE (a camada fica cacheada no
   compositor) — por frame muda só o clip-path retangular. */
.ar-act__shroud{
  position:absolute; inset:0; z-index:1;
  opacity:0;                    /* base: já revelado */
  pointer-events:none;
}
.ar-act__shroud img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:50% 24%;
  /* escuro o bastante pra ser mistério, claro o bastante pra a SILHUETA
     aparecer — abaixo disso a tela vira preto liso */
  filter:brightness(.34) saturate(.10) contrast(1.32) blur(8px);
  transform:scale(1.06);        /* esconde a borda que o blur deixa transparente */
}
.ar-act__shroud::after{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(60% 44% at 50% 32%, rgba(23,64,150,.42), transparent 74%),
    linear-gradient(180deg, rgba(4,7,15,.62) 0%, rgba(4,7,15,.10) 36%, rgba(4,7,15,.55) 74%, rgba(4,7,15,.9) 100%);
}

/* névoa / luzes de palco desfocadas */
.ar-act__haze{
  position:absolute; inset:-12%; z-index:2; pointer-events:none;
  background:
    radial-gradient(28% 18% at 22% 26%, rgba(65,201,107,.16), transparent 70%),
    radial-gradient(24% 16% at 78% 20%, rgba(244,196,48,.14), transparent 72%),
    radial-gradient(52% 30% at 50% 96%, rgba(7,27,77,.55), transparent 70%);
  mix-blend-mode:screen;
  opacity:calc(.35 + .5 * (1 - var(--rev)));
}

/* faixa de luz que varre a silhueta — puro transform.
   O elemento tem a altura do palco e sobe 15% dele, então a crista do
   gradiente (15%) cai exatamente na borda do clip-path do shroud. */
.ar-act__beam{
  position:absolute; left:0; right:0; top:-15%; height:100%;
  z-index:3; pointer-events:none;
  opacity:var(--beam);
  background:linear-gradient(180deg,
    rgba(244,196,48,0)     0,
    rgba(244,196,48,.10)   9.5%,
    rgba(255,244,208,.58)  13.8%,
    rgba(255,255,255,.92)  15%,
    rgba(255,244,208,.50)  16.2%,
    rgba(65,201,107,.14)   18.5%,
    /* logo abaixo da linha a foto emerge da sombra — é isso que apaga
       a borda dura do clip-path e faz a varredura parecer luz */
    rgba(4,7,15,.55)       21%,
    rgba(4,7,15,.20)       27%,
    rgba(4,7,15,0)         36%);
  transform:translate3d(0, calc((1 - var(--rev)) * 100%), 0);
}

/* clarão curto no momento em que o rosto aparece */
.ar-act__flash{
  position:absolute; inset:0; z-index:4; pointer-events:none;
  opacity:var(--flash);
  background:radial-gradient(46% 34% at 50% 34%, rgba(255,248,226,.42), transparent 72%);
  mix-blend-mode:screen;
}

/* scrim que garante contraste do texto sobre a foto */
.ar-act__scrim{
  position:absolute; inset:0; z-index:5; pointer-events:none;
  background:linear-gradient(180deg,
    rgba(4,7,15,.72) 0, rgba(4,7,15,.18) 22%, rgba(4,7,15,0) 40%,
    rgba(4,7,15,.42) 66%, rgba(4,7,15,.88) 88%, rgba(4,7,15,.96) 100%);
}

/* ---- HUD: contador + progresso ---- */
.ar-act__hud{
  position:absolute; z-index:8; left:0; right:0; top:var(--ar-top);
  padding:0 20px;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  font-family:var(--f-head,"Oswald",sans-serif); text-transform:uppercase;
}
.ar-act__idx{
  margin:0; font-size:.74rem; font-weight:600; letter-spacing:.24em;
  color:rgba(255,255,255,.82);
  display:inline-flex; align-items:baseline; gap:8px;
}
.ar-act__idx b{ color:var(--ar-gold); font-weight:700; letter-spacing:.14em; }
.ar-act__count{
  font-size:.74rem; font-weight:600; letter-spacing:.18em; color:rgba(255,255,255,.5);
  display:inline-flex; align-items:baseline; gap:5px;
}
.ar-act__count b{ color:#fff; font-weight:700; font-size:.92rem; }

.ar-act__prog{
  position:absolute; z-index:8; left:20px; right:20px;
  top:calc(var(--ar-top) + 30px);
  height:2px; border-radius:2px; background:rgba(255,255,255,.13); overflow:hidden;
}
.ar-act__prog i{
  display:block; height:100%; width:100%; border-radius:2px;
  background:linear-gradient(90deg,var(--ar-green),var(--ar-gold));
  transform:scaleX(var(--p)); transform-origin:0 50%;
}

/* ---- painel tipográfico ---- */
/* Os dois blocos (mistério / revelado) dividem a MESMA célula, ancorados
   embaixo: eles trocam de lugar sem mexer no layout. Cada texto carrega a
   própria opacidade — opacidade no contêiner multiplicaria a do filho. */
.ar-act__panel{
  position:absolute; z-index:9; left:0; right:0; bottom:0;
  padding:0 22px calc(var(--ar-bottom) + env(safe-area-inset-bottom,0px));
  display:grid; grid-template-areas:"slot"; align-items:end;
}
.ar-act__slot{ grid-area:slot; align-self:end; min-width:0; }
.ar-act__slot--q{ pointer-events:none; }

/* Scrim do bloco de texto. O "bleed" escuro embutido na arte cobre o
   rodapé, mas um texto de 7–8 linhas sobe além dele e cai em cima da
   parte clara da foto. Como o gradiente é o fundo do PRÓPRIO bloco, ele
   tem exatamente a altura do conteúdo: bio curta, scrim curto. */
.ar-act__slot--n{
  position:relative;
  padding:64px 0 2px;
  margin-top:-64px;                /* o degradê sobe sem empurrar o texto */
  background:linear-gradient(to top,
    rgba(5,7,13,.88) 0%, rgba(5,7,13,.80) 42%, rgba(5,7,13,.55) 72%, rgba(5,7,13,0) 100%);
  opacity:var(--name);
}
.ar-act__q{
  margin:0 0 12px; opacity:var(--q);
  font-family:var(--f-display,"Anton",sans-serif);
  font-size:clamp(1.95rem,9.4vw,3.1rem); line-height:1.2; letter-spacing:.01em;
  text-transform:uppercase; color:rgba(255,255,255,.9);
}
.ar-act__hint{
  margin:0; opacity:var(--hint);
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--f-head,"Oswald",sans-serif); font-size:.72rem; font-weight:600;
  letter-spacing:.2em; text-transform:uppercase; color:rgba(255,255,255,.66);
}
.ar-act__hintDot{
  width:18px; height:26px; border-radius:10px; border:1px solid rgba(255,255,255,.4);
  position:relative; flex:none;
}
.ar-act__hintDot::after{
  content:""; position:absolute; left:50%; top:5px; width:3px; height:6px; border-radius:2px;
  background:var(--ar-gold); transform:translateX(-50%);
  animation:ar-wheel 1.5s var(--ease,cubic-bezier(.2,.7,.2,1)) infinite;
}
@keyframes ar-wheel{
  0%,100%{ transform:translate(-50%,0); opacity:1; }
  55%{ transform:translate(-50%,9px); opacity:.15; }
}

.ar-act__name{
  margin:0; font-family:var(--f-display,"Anton",sans-serif);
  font-size:clamp(2.25rem,10.8vw,4.3rem);
  /* Anton + caixa alta: o circunflexo do "ROGÊ" encosta no topo da caixa
     de linha com leading apertado. 1.22 dá o respiro. */
  line-height:1.22;
  text-transform:uppercase; color:#fff; text-wrap:balance;
  opacity:var(--name);
  letter-spacing:calc(.005em + (1 - var(--name)) * .17em);
  filter:blur(calc((1 - var(--name)) * 6px));
  transform:translate3d(0, calc((1 - var(--name)) * 14px), 0) scale(calc(1 + (1 - var(--name)) * .035));
  transform-origin:0 50%;
}
.ar-act__conf{
  margin:12px 0 0; opacity:var(--name);
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
}
.ar-act__confTag{
  font-family:var(--f-head,"Oswald",sans-serif); font-size:.7rem; font-weight:700;
  letter-spacing:.2em; text-transform:uppercase; color:#04121f;
  background:var(--ar-gold); border-radius:999px; padding:6px 13px;
}
.ar-act__confSub{
  font-family:var(--f-head,"Oswald",sans-serif); font-size:.72rem; font-weight:500;
  letter-spacing:.18em; text-transform:uppercase; color:rgba(255,255,255,.62);
}
/* Texto da atração — entra depois do nome (--bio, não --name).
   Só `opacity` e `transform`: o bloco fica sobre a foto e animar
   qualquer outra coisa aqui repinta a tela inteira a cada frame. */
.ar-act__bio{
  margin:14px 0 0; max-width:46ch;
  font-size:clamp(.92rem,3.4vw,1.02rem); line-height:1.55;
  color:rgba(255,255,255,.82);
  text-shadow:0 1px 14px rgba(0,0,0,.75);
  opacity:var(--bio);
  transform:translate3d(0, calc((1 - var(--bio)) * 10px), 0);
}
.ar-act__rule{
  display:block; width:100%; max-width:230px; height:2px; margin-top:16px;
  background:var(--grad-flag, linear-gradient(90deg,#1FA64A,#F4C430,#41C96B));
  transform:scaleX(var(--name)); transform-origin:0 50%;
}

/* ---------------------------------------------------------
   FINAL — lineup revelado + conversão
   --------------------------------------------------------- */
.ar-finale{
  position:relative; z-index:2;
  min-height:76vh; min-height:76svh; display:flex; align-items:center;
  padding:clamp(72px,12vh,124px) 0 clamp(64px,10vh,104px);
  text-align:center; overflow:hidden;
}
.ar-finale__glow{
  position:absolute; inset:-18% -10%; pointer-events:none; z-index:-1;
  background:
    radial-gradient(42% 34% at 50% 26%, rgba(244,196,48,.18), transparent 70%),
    radial-gradient(46% 36% at 22% 78%, rgba(31,166,74,.20), transparent 72%),
    radial-gradient(46% 36% at 80% 74%, rgba(12,42,107,.6), transparent 74%);
}
.ar-finale__title{
  margin:0 auto; max-width:16ch;
  font-family:var(--f-display,"Anton",sans-serif);
  font-size:clamp(2.5rem,9.4vw,5.8rem); line-height:1.2; text-transform:uppercase; color:#fff;
}
.ar-finale__sub{
  margin:18px auto 0; max-width:34ch;
  font-family:var(--f-head,"Oswald",sans-serif); font-weight:500;
  font-size:clamp(1.15rem,3.4vw,1.6rem); letter-spacing:.02em; color:var(--ar-gold);
}
.ar-finale__row{
  margin-top:34px; display:flex; flex-direction:column; align-items:center; gap:14px;
}
.ar-cta{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:54px; padding:16px 30px; border-radius:14px;
  font-family:var(--f-head,"Oswald",sans-serif); font-weight:700; font-size:1rem;
  letter-spacing:.08em; text-transform:uppercase; text-align:center;
  transition:transform .25s var(--ease,ease), box-shadow .25s var(--ease,ease), background .25s;
}
.ar-cta--primary{
  background:var(--grad-gold, linear-gradient(135deg,#F4C430,#ffd755 50%,#e0ad14));
  color:#071B4D; box-shadow:0 18px 42px -14px rgba(244,196,48,.55);
}
.ar-cta--primary:hover{ transform:translateY(-2px); box-shadow:0 24px 52px -14px rgba(244,196,48,.7); }
.ar-cta--ghost{
  background:transparent; color:#fff; border:1px solid rgba(255,255,255,.3);
}
.ar-cta--ghost:hover{ background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.55); }

/* ---------------------------------------------------------
   LINEUP COMPLETO — grade com a arte oficial inteira
   --------------------------------------------------------- */
.ar-grid-sec{
  position:relative; z-index:2;
  padding:clamp(56px,9vh,96px) 0 clamp(64px,10vh,104px);
  background:linear-gradient(180deg, var(--ar-ink) 0%, var(--ar-ink-2) 55%, var(--ar-ink) 100%);
}
.ar-grid-head{ text-align:center; margin-bottom:clamp(28px,5vh,46px); }
.ar-grid-head h3{
  margin:12px 0 0; font-family:var(--f-display,"Anton",sans-serif);
  font-size:clamp(1.8rem,5.6vw,3.1rem); line-height:1.22; text-transform:uppercase; color:#fff;
}
.ar-grid{
  display:grid; gap:14px;
  grid-template-columns:repeat(2,minmax(0,1fr));
  /* Cada linha da grade se dimensiona pela sua PRÓPRIA linha mais alta —
     com "Samba Percussion Experience" ocupando 3 linhas de texto e os
     outros 1, no celular (2 colunas) as fileiras saíam com 244, 228 e
     211px. `1fr` nas linhas implícitas iguala TODAS pela mais alta. */
  grid-auto-rows:1fr;
}
/* Card quadrado com recorte próprio (…-sq-640): a arte oficial inteira
   deixava a grade parecendo desalinhada mesmo com TODOS os cards do mesmo
   tamanho — cada artista aparece num tamanho e numa altura diferente, e o
   olho não achava linha comum. O recorte usa a largura inteira (ninguém
   cortado de lado) e desliza só na vertical pra pôr os rostos numa faixa. */
.ar-card{
  position:relative; border-radius:14px; overflow:hidden;
  background:#0a1226; border:1px solid var(--ar-line);
  display:flex; flex-direction:column;
  transition:transform .3s var(--ease,ease), border-color .3s, opacity .7s var(--ease,ease);
}
.ar-card:hover{ transform:translateY(-4px); border-color:rgba(244,196,48,.45); }
.ar-card img{
  width:100%; height:auto; display:block; aspect-ratio:1/1; object-fit:cover;
}
/* Coluna flex + `margin-top:auto` no selo: com nomes de 1, 2 e 3 linhas
   convivendo na mesma grade, é isso que deixa todos os "CONFIRMADO"
   na mesma linha em vez de flutuando conforme o nome. */
.ar-card__body{
  padding:11px 12px 13px; border-top:1px solid rgba(255,255,255,.07);
  display:flex; flex-direction:column; flex:1 1 auto;
}
.ar-card__name{
  margin:0; font-family:var(--f-head,"Oswald",sans-serif); font-weight:700;
  font-size:clamp(.86rem,3.4vw,1.05rem); line-height:1.2; letter-spacing:.03em;
  text-transform:uppercase; color:#fff;
}
.ar-card__tag{
  align-self:start; margin-top:auto; padding-top:6px;
  font-family:var(--f-head,"Oswald",sans-serif); font-size:.6rem; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; color:var(--ar-gold);
}

/* ---------------------------------------------------------
   SHARE
   --------------------------------------------------------- */
.ar-share{
  margin-top:clamp(34px,6vh,56px); text-align:center;
  border-top:1px solid var(--ar-line); padding-top:clamp(28px,5vh,44px);
}
.ar-share__q{
  margin:0; font-family:var(--f-head,"Oswald",sans-serif); font-weight:600;
  font-size:clamp(1.05rem,3.2vw,1.35rem); letter-spacing:.02em; color:#fff;
}
.ar-share__sub{ margin:8px 0 20px; color:rgba(255,255,255,.66); font-size:.98rem; }
.ar-share__row{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; }
.ar-share__btn{
  display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:11px 18px;
  border-radius:999px; border:1px solid rgba(255,255,255,.22); background:rgba(255,255,255,.05);
  color:#fff; font-family:var(--f-head,"Oswald",sans-serif); font-size:.78rem; font-weight:600;
  letter-spacing:.12em; text-transform:uppercase;
  transition:background .25s, border-color .25s, transform .25s;
}
.ar-share__btn:hover{ background:rgba(255,255,255,.12); border-color:rgba(244,196,48,.5); transform:translateY(-2px); }
.ar-share__btn svg{ width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }

/* =========================================================
   ESTADO .ar--ready — o JS assumiu o scrub
   ========================================================= */
.ar--ready .ar-act{ height:var(--ar-track); }
.ar--ready .ar-act__pin{
  position:sticky; top:0;
  height:100vh; height:100svh;
}
.ar--ready .ar-act__stage{ height:100%; min-height:0; }
.ar--ready .ar-act__shroud{
  opacity:1;
  clip-path:inset(0 0 calc(var(--rev) * 100%) 0);
}
/* promove só o ato que está perto da tela — `will-change` fixo em 6 atos
   seriam 12 camadas de tela cheia presas na GPU do celular */
.ar--ready .ar-act.is-near .ar-act__shroud{ will-change:clip-path; }
.ar--ready .ar-act.is-near .ar-act__beam,
.ar--ready .ar-act.is-near .ar-act__prog i{ will-change:transform; }

/* =========================================================
   ESTADO .ar--static — prefers-reduced-motion
   silhueta → crossfade → foto + nome (sem trilho, sem scrub)
   ========================================================= */
.ar--static .ar-act__stage{ min-height:74vh; min-height:74svh; }
.ar--static .ar-act__shroud{ opacity:1; transition:opacity .9s ease; }
.ar--static .ar-act.is-lit .ar-act__shroud{ opacity:0; }
.ar--static .ar-act__beam,
.ar--static .ar-act__flash,
.ar--static .ar-act__prog,
.ar--static .ar-act__hint,
.ar--static .ar-act__slot--q{ display:none; }
.ar--static .ar-act__hintDot::after{ animation:none; }
.ar--static .ar-act__name,
.ar--static .ar-act__conf,
.ar--static .ar-act__bio{ opacity:0; transition:opacity .9s ease .25s; }
.ar--static .ar-act.is-lit .ar-act__name,
.ar--static .ar-act.is-lit .ar-act__conf,
.ar--static .ar-act.is-lit .ar-act__bio{ opacity:1; }
.ar--static .ar-act__name{ filter:none; letter-spacing:.005em; transform:none; }
.ar--static .ar-act__bio{ transform:none; }
.ar--static .ar-act__rule{ transform:none; }

/* =========================================================
   BREAKPOINTS — nenhuma regra base depois daqui
   (regra sem media query DEPOIS de um @media mata o mobile)
   ========================================================= */

/* --- telas curtas: sobra menos altura pro nome --- */
@media (max-height:680px){
  .ar{ --ar-bottom:90px; }
  .ar-act__name{ font-size:clamp(2rem,9vw,3.2rem); }
  .ar-act__q{ font-size:clamp(1.7rem,8vw,2.6rem); }
  .ar-act__conf{ margin-top:8px; }
  .ar-act__rule{ margin-top:12px; }
}

/* --- tablet: a barra fixa "Buy Tickets" só some em 861px, então o
       espaço reservado embaixo TEM que continuar aqui --- */
@media (min-width:601px){
  .ar-act__hud{ padding:0 32px; }
  .ar-act__prog{ left:32px; right:32px; }
  .ar-act__panel{ padding-left:32px; padding-right:32px; }
  .ar-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
  .ar-finale__row{ flex-direction:row; justify-content:center; }
  .ar-card__body{ padding:13px 15px 15px; }
}

/* --- a partir daqui a barra fixa de compra some (styles.css, 860px) --- */
@media (min-width:861px){
  .ar{ --ar-bottom:56px; }
}

/* --- composição editorial. A foto ocupa a coluna esquerda e o HUD /
       progresso / tipografia moram na direita — nada sobreposto.
       Vale pro desktop E pro celular DEITADO: numa viewport baixa e larga
       o `cover` da arte retrato mostra uma fatia tão fina que o rosto sai
       inteiro da tela. --- */
@media (min-width:1024px), (min-width:640px) and (max-height:600px){
  .ar{ --ar-track:180vh; --ar-bottom:0px; }

  .ar-act__stage{
    display:grid;
    /* coluna de texto com teto: em 1920 um `1fr` joga o nome pro meio da
       tela e deixa meia viewport morta à direita */
    grid-template-columns:auto minmax(0,34rem);
    justify-content:center;
    grid-template-rows:auto auto minmax(0,1fr);
    grid-template-areas:
      "frame hud"
      "frame prog"
      "frame panel";
    align-content:center;
    column-gap:clamp(40px,5vw,88px);
    /* o header é fixo: sem esse respiro o "ACT #01" e o topo do nome
       nascem DEBAIXO dele */
    padding:calc(var(--header-h,74px) + 26px) clamp(40px,6vw,96px) 40px;
    max-width:1560px; margin:0 auto;
  }

  .ar-act__frame{
    grid-area:frame; position:relative; inset:auto;
    width:min(46vw, 470px); height:min(68vh,720px); height:min(68svh,720px);
    border-radius:20px;
    box-shadow:0 50px 110px -40px rgba(0,0,0,.9), 0 0 0 1px rgba(255,255,255,.07);
  }
  /* mostra a arte a partir do TOPO: é lá que estão o logo e os rostos —
     ancorar no meio corta o logo na borda da moldura */
  .ar-act__shot img,
  .ar-act__shroud img{ object-position:50% 0%; }
  .ar-act__scrim{
    background:linear-gradient(180deg, rgba(4,7,15,.5) 0, rgba(4,7,15,0) 34%, rgba(4,7,15,0) 62%, rgba(4,7,15,.6) 100%);
  }

  .ar-act__hud{ grid-area:hud; position:relative; inset:auto; padding:0; max-width:420px; }
  .ar-act__prog{
    grid-area:prog; position:relative; inset:auto; left:auto; right:auto; top:auto;
    margin-top:14px; max-width:420px;
  }
  .ar-act__panel{
    grid-area:panel; position:relative; inset:auto; z-index:9;
    padding:0; align-self:center; max-width:30rem;
  }
  .ar-act__slot{ align-self:center; }
  .ar-act__q{ font-size:clamp(2.4rem,3.6vw,3.6rem); }
  .ar-act__name{ font-size:clamp(2.8rem,4.2vw,4.8rem); }
  .ar-act__hint{ margin-top:6px; }
  .ar-act__rule{ max-width:280px; }

  .ar-intro__title{ max-width:20ch; }
  .ar-grid{ grid-template-columns:repeat(6,minmax(0,1fr)); gap:16px; }
  .ar-card__body{ padding:12px 13px 14px; }
}

@media (min-width:1440px){
  .ar-act__frame{ width:min(42vw, 520px); height:min(72vh,780px); height:min(72svh,780px); }
}

/* --- viewport baixa e larga (celular deitado): a moldura encolhe pra
       caber entre o header fixo e a barra fixa de compra --- */
@media (min-width:640px) and (max-height:600px){
  .ar-act__stage{
    padding:calc(var(--header-h,74px) + 12px) clamp(20px,4vw,48px) 14px;
    column-gap:clamp(24px,4vw,48px);
  }
  .ar-act__frame{ width:min(32vw,270px); height:min(72vh,300px); border-radius:14px; }
  /* a fatia visível é curta: ancorar no topo mostra só o teto do palco.
     25% centra o recorte na faixa onde os rostos estão nas seis artes. */
  .ar-act__shot img,
  .ar-act__shroud img{ object-position:50% 25%; }
  .ar-act__panel{ max-width:26rem; }
  .ar-act__hud,
  .ar-act__prog{ max-width:340px; }
  .ar-act__prog{ margin-top:10px; }
  .ar-act__q{ font-size:clamp(1.5rem,3.6vw,2.1rem); }
  .ar-act__name{ font-size:clamp(1.8rem,4.2vw,2.6rem); }
  .ar-act__conf{ margin-top:8px; }
  .ar-act__rule{ margin-top:10px; }
  .ar-intro{ min-height:auto; padding:80px 0 44px; }
  .ar-finale{ min-height:auto; padding:80px 0 56px; }
}

/* --- movimento reduzido: nada de animação contínua --- */
@media (prefers-reduced-motion:reduce){
  .ar-act__hintDot::after{ animation:none; }
  .ar-card{ transition:none; }
  .ar-cta{ transition:none; }
}