/* ---------- tokens ---------- */
:root{
  --bg: #0a0908;
  --paper: #f2ede2;
  --ink: #171310;

  --card-accent: #b31217;
  --card-accent-dim: #4a0d0f;
  --card-glow: 179,18,23;

  --cidade-accent: #8b6fd1;
  --cidade-accent-dim: #2c2340;
  --cidade-glow: 139,111,209;

  --accent: var(--card-accent);
  --accent-glow: var(--card-glow);
  --accent-dim: var(--card-accent-dim);

  --font-display: 'Anton', sans-serif;
  --font-mark: 'Permanent Marker', cursive;
  --font-script: 'Mrs Saint Delafield', cursive;
  --font-mono: 'JetBrains Mono', monospace;

  --ease: cubic-bezier(.16,1,.3,1);
}

*{box-sizing:border-box; margin:0; padding:0;}
html{background:var(--bg); scroll-behavior:auto;}
body{
  background:var(--bg);
  color:var(--paper);
  font-family:var(--font-mono);
  overflow-x:hidden;
  cursor:default;
}
img{max-width:100%; display:block;}
a{color:inherit; text-decoration:none;}
section{position:relative;}

::selection{background:var(--accent); color:var(--bg);}

/* ---------- grain + cursor ---------- */
/* fallback estático. sem mix-blend-mode pelo mesmo motivo do .grain-gl abaixo:
   blend que lê backdrop desenha retângulo sobre elemento com opacity parcial. */
.grain{
  position:fixed; inset:0; z-index:9998; pointer-events:none;
  opacity:.07;
  background-image: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='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* grão vivo em WebGL (js/webgl-fx.js): ruído animado por tempo em vez do SVG
   estático. fica escondido até o JS confirmar que o WebGL rodou — se falhar
   ou reduced-motion, o .grain acima segue sozinho, sem buraco visual.

   ⚠️ SEM mix-blend-mode (v10.2). `overlay`/`soft-light` LEEM O BACKDROP, e
   qualquer elemento com `opacity` intermediária vira camada de composição
   isolada — o blend resolve diferente dentro dela e desenha um RETÂNGULO
   visível com o bounding box exato do elemento. Foi o que aconteceu com o
   `.hero-content`, que fica travado em opacity ~0.08 durante todo o pin da
   hero. Só aparece com GPU real (headless usa software e mascara o defeito),
   então foi preciso medir no Chrome do Pedro.
   Blend normal com alpha baixo não lê backdrop e não tem esse acoplamento. */
.grain-gl{
  position:fixed; inset:0; z-index:9998; pointer-events:none;
  width:100%; height:100%;
  display:none;
}
html.grain-gl-active .grain{ display:none; }
html.grain-gl-active .grain-gl{ display:block; }

.cursor{
  position:fixed; top:0; left:0; width:26px; height:26px;
  border:1.5px solid var(--paper); border-radius:50%;
  transform:translate(-50%,-50%);
  pointer-events:none; z-index:9999;
  mix-blend-mode:difference;
  transition:width .25s var(--ease), height .25s var(--ease), border-color .25s var(--ease);
  display:none;
}
@media (hover:hover) and (pointer:fine){
  .cursor{display:block;}
  body.cursor-active, body.cursor-active a, body.cursor-active button{ cursor:none; }
}
.cursor.is-active{ width:54px; height:54px; }

/* ---------- foco de teclado ---------- */
a:focus-visible,
button:focus-visible{
  outline:2px solid var(--paper);
  outline-offset:3px;
  border-radius:2px;
}
.nav a:focus-visible{ outline-color:var(--paper); }
.size-chip:focus-visible{ outline-color:var(--accent); }
.buy-cta:focus-visible, .extra-cta:focus-visible, .outro-cta:focus-visible{
  outline-color:var(--paper); outline-offset:4px;
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  .scroll-cue i::after{ animation:none; top:0; }
  .reveal{ transition:opacity .4s ease; }
  .size-row.is-shake{ animation:none; }
  .room-flip{ display:none; }
  .sound-pill .eq i{ animation:none; }
}

/* ---------- preloader ---------- */
#preloader{
  position:fixed; inset:0; z-index:10000;
  background:var(--bg);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1.5rem;
}
.preloader-tag{
  font-family:var(--font-display);
  font-size:clamp(3rem,10vw,6rem);
  letter-spacing:.05em;
  color:var(--paper);
}
.preloader-bar{
  width:min(240px,60vw); height:2px; background:rgba(242,237,226,.15); overflow:hidden;
}
.preloader-bar span{
  display:block; height:100%; width:0%; background:var(--card-accent);
  transition:width 1.15s cubic-bezier(.45,0,.2,1);
}
#preloader{ transition:opacity .6s ease; }
#preloader.is-done{ opacity:0; pointer-events:none; }

/* ---------- progress rail ---------- */
.progress-rail{
  position:fixed; top:0; left:0; right:0; height:2px; z-index:200;
  background:rgba(242,237,226,.08);
}
.progress-rail span{
  display:block; height:100%; width:0%;
  background:var(--accent);
  transition:background-color .5s var(--ease);
}

/* ---------- nav ---------- */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:180;
  display:flex; align-items:center; justify-content:space-between;
  padding:1.4rem clamp(1.2rem,4vw,3rem);
  mix-blend-mode:difference;
}
.nav-tag{
  font-family:var(--font-mark);
  font-size:1.3rem;
  color:var(--paper);
}
.nav-links{display:flex; gap:clamp(1rem,2vw,2rem); font-size:.7rem; letter-spacing:.12em;}
.nav-links a{opacity:.7; transition:opacity .3s var(--ease);}
.nav-links a:hover{opacity:1;}

/* ---------- hero ---------- */
.hero{
  height:100svh; display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}
.hero-bg{
  position:absolute; inset:0;
  background-size:cover;
  /* enquadra um pouco abaixo do centro: é onde ficam as ESTAMPAS nas peças
     (o centro puro pegava só os rostos) */
  background-position:center 62%;
  transform:scale(1.08);
  /* a foto é noturna e sai chapada da câmera; brilho+contraste dão o corpo que
     ela não tem de origem, sem precisar de véu pesado por cima */
  filter:saturate(1.08) contrast(1.12) brightness(1.18);
}
/* ⚠️ REGRA (v10.1): a luminância aqui tem que variar de forma MONOTÔNICA e
   contínua. A versão anterior empilhava 3 gradientes — véu central escuro +
   vinheta + linear com um PLATÔ `transparent 30% → transparent 62%`. A soma
   subia e descia (escuro no centro, clara logo abaixo, escura de novo) e
   desenhava um HALO horizontal claro atravessando a hero — medido no print do
   Pedro: 46 → 63 → 43 de luminância na faixa que ele marcou.
   Platô transparente entre duas transições = banda visível. Nunca voltar a
   empilhar gradientes que "sobem e descem" no mesmo eixo: o contraste do texto
   se resolve no text-shadow, não em mais uma camada de véu. */
.hero-overlay{
  position:absolute; inset:0;
  background:
    /* vinheta única, só escurecendo do miolo pra borda (monotônica) */
    radial-gradient(ellipse 82% 78% at 50% 50%,
      rgba(10,9,8,.12) 0%, rgba(10,9,8,.34) 52%, rgba(10,9,8,.72) 100%),
    /* topo e base, com passagem contínua — sem platô, sem `transparent` cru */
    linear-gradient(180deg,
      rgba(10,9,8,.62) 0%,
      rgba(10,9,8,.26) 20%,
      rgba(10,9,8,.2) 46%,
      rgba(10,9,8,.44) 76%,
      rgba(10,9,8,.95) 100%);
}
/* (v10) o canvas de aberração cromática que ficava aqui foi removido — o
   motivo está documentado no topo de js/webgl-fx.js */
/* IRIS — o preto entra por MÁSCARA que fecha, não por escurecimento.
   escurecer a foto (brightness) faz o branco das camisas atravessar toda a
   escala de cinza: é a transição "lavada/suja" que o Pedro reprovou. aqui um
   disco gigante de gradiente encolhe por scale (interpola liso, é só transform):
   cada região da tela salta de imagem cheia p/ preto quando a borda passa, sem
   ficar parada num meio-tom. */
/* o elemento cobre a tela e é o BURACO que encolhe (--iris, animado pelo GSAP).
   escalar o elemento não serve: encolhe a área preta junto e vira um quadrado
   preto no meio da tela em vez do preto avançar. */
.hero-iris{
  position:absolute; inset:0; pointer-events:none;
  /* v10: com a foto de rua o centro deixou de ser problema (o X das camisas
     recortadas do mockup não existe mais), então a iris fecha no meio-baixo,
     sobre as estampas — que é pra onde o zoom leva. */
  background:radial-gradient(circle at 50% 56%,
    transparent var(--iris,85vmax),
    var(--bg) calc(var(--iris,85vmax) + 20vmax));
}
/* fecha o pontinho central que sobra quando a iris chega no fim do curso */
.hero-blackout{
  position:absolute; inset:0; background:var(--bg); opacity:0; pointer-events:none;
}
.hero-content{
  position:relative; z-index:2; text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:.8rem;
  padding:0 1.5rem;
}
/* estado inicial dos FILHOS (o container nunca — ver nota em main.js sobre os
   dois tweens brigando). o fallback devolve tudo se GSAP/CDN falhar. */
.hero-content > *{ opacity:0; }
.no-motion-fallback .hero-content > *{ opacity:1 !important; transform:none !important; }
.eyebrow{
  font-size:.72rem; letter-spacing:.25em; opacity:.75;
  text-shadow:0 2px 12px rgba(10,9,8,.9);
}
.hero-title{
  font-family:var(--font-display);
  font-size:clamp(4.5rem,18vw,11rem);
  line-height:.85;
  letter-spacing:.02em;
  color:var(--paper);
  /* duas camadas: o glow colorido dá o clima, a sombra escura curta é o que
     garante leitura contra a parte clara do mockup */
  text-shadow:0 0 60px rgba(var(--card-glow),.35), 0 4px 26px rgba(10,9,8,.85);
}
.hero-sub{
  font-family:var(--font-script);
  font-size:clamp(1.6rem,4vw,2.4rem);
  color:var(--paper);
  opacity:.9;
  text-shadow:0 2px 18px rgba(10,9,8,.9);
}
.scroll-cue{
  margin-top:2.5rem; display:flex; flex-direction:column; align-items:center; gap:.6rem;
  font-size:.65rem; letter-spacing:.2em; opacity:.65;
}
.scroll-cue i{
  width:1px; height:34px; background:var(--paper);
  position:relative; overflow:hidden;
}
.scroll-cue i::after{
  content:''; position:absolute; top:-100%; left:0; width:100%; height:100%;
  background:var(--accent);
  animation:scrollcue 1.8s ease-in-out infinite;
}
@keyframes scrollcue{
  0%{top:-100%;} 60%{top:100%;} 100%{top:100%;}
}

/* ---------- flip C.A.R.D → CIDADE ---------- */
/* cartela de virada: cor + wordmark, SEM foto. a versão anterior usava a foto
   em scale(1.45) rotate(6deg) com clip-path — entrava gigante e cortada ao meio,
   desenhando uma emenda dura contra a seção escura de cima. */
.room-flip{
  position:relative; height:100vh; overflow:hidden; background:var(--bg);
}
.room-flip-wash{
  position:absolute; inset:0;
  background:radial-gradient(ellipse at 50% 45%, rgba(139,111,209,.28), transparent 70%);
  opacity:0;
}
.room-flip-word{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display);
  /* era clamp(4rem,16vw,12rem) pra uma palavra só (CIDADE); com a frase
     do Thigas ("Cidade Grande, Eu Maior") nesse tamanho estourava a tela.
     padding (não max-width) pra não perder o centro: um max-width num
     elemento com inset:0 fica colado na borda esquerda em vez de centralizar. */
  font-size:clamp(1.5rem,7vw,4.8rem);
  color:var(--paper);
  letter-spacing:.02em;
  text-align:center;
  padding-inline:6vw;
  text-wrap:balance;
  opacity:0;
  text-shadow:0 0 80px rgba(139,111,209,.5);
}
.no-motion-fallback .room-flip{ display:none; }

/* ---------- rooms ---------- */
.room{
  min-height:100vh;
  display:flex; align-items:center;
  padding:clamp(4rem,8vw,7rem) clamp(1.2rem,5vw,4rem);
}
.room-bg{
  position:absolute; inset:0;
  background-size:cover; background-position:center;
  opacity:.16; filter:blur(1px) saturate(1.2);
}
.room-wash{
  position:absolute; inset:0;
  /* a cor do wash é FIXA POR SALA (ver regras abaixo), nunca a var global
     --accent-glow: como a global muda quando o tema vira, a sala ainda em tela
     pulava de vermelho pra roxo num flash. a mudança de ambiente tem que vir de
     rolar de uma seção pra outra, não de repintar a seção atual.
     o linear-gradient do topo faz a sala NASCER do escuro: sem ele, o glow
     colorido encosta na hero preta e desenha uma linha dura na emenda. */
  background:
    linear-gradient(180deg, var(--bg) 0%, rgba(10,9,8,.6) 12%, transparent 28%),
    radial-gradient(ellipse at 30% 20%, rgba(var(--room-glow),.22), transparent 60%),
    var(--bg);
}
#card{ --room-glow:var(--card-glow); }
#cidade{ --room-glow:var(--cidade-glow); }
/* kicker + nome do modelo (usados no topo da vitrine) */
.room-kicker{
  font-size:.72rem; letter-spacing:.25em; color:var(--accent);
  transition:color .6s var(--ease);
}
.room-name{
  font-family:var(--font-display);
  font-size:clamp(2.8rem,7vw,5.2rem);
  line-height:.9;
}

/* ---------- vitrine pinada da estampa (scrollytelling) ---------- */
/* duas zonas em flex que não se cruzam: nome no topo, estampa protagonista no
   centro. as estampas (frente/costas) e a foto da peça ocupam a MESMA célula
   central e fazem cross-fade — centralizadas por grid (grid-area:1/1), o que
   deixa o transform livre pro GSAP (scale) sem brigar com translate do CSS.
   as frases ("O Inimigo tentando…", "a cidade é grande…") já vivem dentro da
   arte, então NÃO há legenda repetida. estático (fallback) vem no fim. */
.room.showcase{ padding:0; min-height:100svh; display:block; } /* anula o flex do .room base */
.showcase-stage{ position:relative; }

.showcase-stage.is-live{
  height:100svh; overflow:hidden;
  display:flex; flex-direction:column; align-items:center;
  gap:clamp(1.2rem,4vh,2.6rem);
  padding:clamp(4.5rem,11vh,7rem) clamp(1.5rem,5vw,3rem) clamp(3rem,8vh,5rem);
}
.is-live .stage-top{ flex:0 0 auto; text-align:center; }
.is-live .stage-view{
  flex:1 1 auto; width:100%; max-width:920px; min-height:0;
  /* a célula precisa ser 1fr pra PREENCHER a altura: place-items sozinho
     centraliza dentro de uma célula do tamanho do conteúdo, que fica colada no
     topo — era o que empurrava a estampa pra baixo e cortava. */
  display:grid; grid-template:1fr / 1fr; place-items:center;
}
.is-live .stage-view > *{ grid-area:1/1; }

.stage-top .room-kicker{ display:block; margin-bottom:.55rem; }
.stage-top .room-name{
  font-family:var(--font-display); line-height:.88;
  font-size:clamp(2.6rem,7vw,4.6rem);
  /* nomes mais longos (frases do Thigas) podem quebrar em 2 linhas no mobile;
     balanceia em vez de deixar uma palavra solta grudada na linha de cima */
  text-wrap:balance;
}

/* C.A.R.D: máscara é traço preto → precisa de "papel" claro. o papel abraça a
   arte (a estampa já foi recortada, então preenche o quadro). */
/* dimensionamento: dentro de uma célula de grid, height:100% + aspect-ratio
   deriva a largura da altura e ESTOURA a tela. por isso a medida é travada em
   min(altura disponível, largura disponível ajustada pela proporção). */
.stage-plate{
  height:min(54vh, 45vw); aspect-ratio:4/3;
  background:#f4f1ea; border-radius:12px; padding:clamp(1.4rem,3vh,2.4rem);
  box-shadow:0 40px 90px rgba(0,0,0,.55), inset 0 0 0 1px rgba(23,19,16,.06);
  /* trilha 1fr (não auto): com trilha auto, o height:100% da imagem é cíclico e
     o browser cai no tamanho INTRÍNSECO do PNG, que vaza pra fora do papel. */
  display:grid; grid-template:1fr / 1fr; place-items:center;
}
/* CIDADE: estampa colorida lê no escuro, sem papel. a arte é RETRATO (~0.88),
   então a altura é quem manda — daí a trava menor que a da C.A.R.D. */
.stage-plate-bare{
  background:transparent; box-shadow:none; padding:0;
  /* proporção definida (as duas artes da CIDADE são retrato ~0.87): sem ela,
     width:auto + arte width:100% é cíclico e volta ao tamanho intrínseco. */
  height:min(54vh, 48vw); aspect-ratio:.87;
}
.stage-art{
  grid-area:1/1; width:100%; height:100%; object-fit:contain;
  min-width:0; min-height:0; /* item de grid não encolhe abaixo do conteúdo sem isto */
  filter:drop-shadow(0 12px 30px rgba(0,0,0,.22));
}
.stage-plate-bare .stage-art{
  width:100%; height:100%;
  filter:drop-shadow(0 20px 50px rgba(0,0,0,.6));
}
/* foto da peça (mockup) — mostra frente+costas inteiras, sem corte */
.stage-look{
  height:min(54vh, 45vw); width:auto; max-width:100%;
  object-fit:contain; border-radius:10px;
  box-shadow:0 40px 90px rgba(0,0,0,.6);
}

/* ---------- bloco de compra (fora da vitrine, layout limpo) ---------- */
.buy-strip{
  display:flex; justify-content:center;
  padding:clamp(2rem,4vw,3rem) clamp(1.2rem,5vw,4rem) clamp(3rem,7vw,5rem);
}
.buy-strip .buy-card{ width:min(460px,100%); margin:0; }

/* ---------- modo estático: fallback sem GSAP + reduced-motion ---------- */
.showcase-stage:not(.is-live){
  max-width:1100px; margin:0 auto;
  padding:clamp(4rem,8vw,7rem) clamp(1.2rem,5vw,4rem);
  display:flex; flex-direction:column; align-items:center; gap:1.8rem; text-align:center;
}
.showcase-stage:not(.is-live) .stage-view{
  width:100%; display:flex; flex-direction:column; align-items:center; gap:1.6rem;
}
.showcase-stage:not(.is-live) .stage-plate{
  height:auto; aspect-ratio:auto; width:min(520px,86vw);
}
.showcase-stage:not(.is-live) .stage-plate-bare{ width:min(420px,80vw); }
.showcase-stage:not(.is-live) .stage-art{ width:100%; height:auto; }
.showcase-stage:not(.is-live) .stage-plate-bare .stage-art{ height:auto; }
.showcase-stage:not(.is-live) .stage-look{ width:min(640px,90vw); height:auto; }

/* ---------- buy card ---------- */
.buy-card{
  grid-column:1 / -1;
  background:rgba(23,19,16,.7);
  backdrop-filter:blur(6px);
  border:1px solid rgba(242,237,226,.12);
  border-radius:6px;
  padding:clamp(1.2rem,3vw,1.8rem);
  display:flex; flex-direction:column; gap:1rem;
  margin-top:1rem;
}
.buy-head{ display:flex; align-items:baseline; justify-content:space-between; }
.buy-name{ font-family:var(--font-mark); font-size:1.1rem; }
.buy-price{ font-size:1.3rem; font-weight:700; color:var(--accent); transition:color .6s var(--ease); }

.buy-stock{ display:flex; flex-direction:column; gap:.4rem; }
.buy-stock span{ font-size:.68rem; letter-spacing:.08em; opacity:.7; }
.buy-stock.is-low span{ opacity:1; color:var(--accent); font-weight:700; }
.stock-bar{ height:3px; background:rgba(242,237,226,.12); border-radius:2px; overflow:hidden; }
.stock-bar span{
  display:block; height:100%; background:var(--accent);
  transition:width .8s var(--ease), background-color .6s var(--ease);
}
.stock-bar.is-low{ animation:stockPulse 1.6s ease-in-out infinite; border-radius:2px; }
@keyframes stockPulse{
  0%,100%{ box-shadow:0 0 0 0 rgba(var(--accent-glow),.55); }
  50%{ box-shadow:0 0 14px 2px rgba(var(--accent-glow),.9); }
}

.buy-card.is-sold-out .size-chip{ pointer-events:none; opacity:.35; }
.buy-card.is-sold-out .buy-cta{
  pointer-events:none; background:var(--accent-dim); color:rgba(242,237,226,.5);
}

.size-row{ display:flex; gap:.6rem; flex-wrap:wrap; }
.size-chip{
  border:1px solid rgba(242,237,226,.25);
  padding:.5rem 1rem; font-size:.75rem; letter-spacing:.06em;
  border-radius:3px; cursor:pointer; background:transparent; color:var(--paper);
  transition:all .25s var(--ease); font-family:var(--font-mono);
}
.size-chip:hover{ border-color:var(--accent); }
.size-chip.is-selected{ background:var(--accent); border-color:var(--accent); color:var(--bg); font-weight:700; }

.buy-cta{
  margin-top:.4rem;
  display:inline-flex; align-items:center; justify-content:center;
  padding:1rem 1.4rem;
  background:var(--accent); color:var(--bg);
  font-family:var(--font-mono); font-weight:700; letter-spacing:.08em; font-size:.85rem;
  border-radius:4px;
  transition:background-color .6s var(--ease), transform .3s var(--ease);
}
.buy-cta:hover{ transform:translateY(-2px); }
/* pendente: espera a escolha do tamanho (mantém clicável p/ feedback) */
.buy-cta[aria-disabled="true"]{
  pointer-events:auto;
  background:var(--accent-dim);
  color:rgba(242,237,226,.5);
  cursor:not-allowed;
}
/* pulsa a fileira de tamanhos quando alguém clica no CTA sem escolher */
@keyframes shake{
  10%,90%{ transform:translateX(-1px); }
  20%,80%{ transform:translateX(2px); }
  30%,50%,70%{ transform:translateX(-4px); }
  40%,60%{ transform:translateX(4px); }
}
.size-row.is-shake{ animation:shake .5s var(--ease); }

/* ---------- extras ---------- */
.extras, .regras{
  padding:clamp(4rem,8vw,7rem) clamp(1.2rem,5vw,4rem);
  max-width:1180px; margin:0 auto;
}
.section-kicker{
  display:block; font-size:.72rem; letter-spacing:.25em; opacity:.6; margin-bottom:2rem;
}
.extras-grid{
  display:grid; grid-template-columns:repeat(2,1fr); gap:1.2rem;
  perspective:1200px; /* profundidade pro tilt 3D do card ao mouse (ver initCursor) */
}
.extra-card{
  background:rgba(242,237,226,.04);
  border:1px solid rgba(242,237,226,.14);
  border-radius:6px; padding:clamp(1.6rem,3vw,2.2rem);
  display:flex; flex-direction:column; gap:.7rem; align-items:flex-start;
  position:relative;
  transition:border-color .3s var(--ease), transform .3s var(--ease);
}
.extra-card:hover{ border-color:rgba(var(--accent-glow),.55); transform:translateY(-4px); }
.extra-tag{ font-size:.65rem; letter-spacing:.18em; opacity:.55; }
.extra-card h3{ font-family:var(--font-display); font-size:clamp(1.6rem,2.6vw,2.1rem); font-weight:400; }
.extra-price{ font-size:1.5rem; font-weight:700; color:var(--accent); transition:color .6s var(--ease); }
.extra-cta{
  margin-top:.6rem; width:100%;
  display:inline-flex; align-items:center; justify-content:center;
  padding:.9rem 1.2rem;
  background:var(--accent); color:var(--bg);
  font-size:.78rem; letter-spacing:.1em; font-weight:700;
  border-radius:4px;
  transition:background-color .6s var(--ease), transform .3s var(--ease);
}
.extra-cta:hover{ transform:translateY(-2px); }

/* preview dos designs reais (recortados da arte de divulgação do Thigas).
   ⚠️ os adesivos entram como UMA composição, não 7 PNGs recortados: eles foram
   desenhados sobre o fundo de graffiti roxo, que varia demais pra chroma-key ou
   floodfill separar limpo — as duas tentativas saíram com borda suja e recorte
   comendo pedaço do desenho. O fundo é parte da arte; respeitar isso ficou
   melhor do que extrair mal. */
.sticker-preview{ width:100%; border-radius:6px; overflow:hidden; }
.sticker-preview img{
  width:100%; height:auto; display:block;
  box-shadow:0 8px 24px rgba(0,0,0,.45);
}
.poster-preview{
  display:grid; grid-template-columns:1fr 1fr; gap:.6rem; width:100%;
}
.poster-preview img{
  width:100%; aspect-ratio:1; object-fit:cover; border-radius:6px;
  filter:drop-shadow(0 8px 20px rgba(0,0,0,.5));
}

/* ---------- pergunta de cidade (substitui cálculo de frete) ---------- */
/* quem responde fora da cidade-base do Thigas cai no WhatsApp com o pedido já
   descrito, em vez de seguir pro pagamento — sem precisar calcular frete. */
.location-row{ display:flex; flex-direction:column; gap:.5rem; }
.location-label{ font-size:.68rem; letter-spacing:.08em; opacity:.7; }
.location-chips{ display:flex; gap:.6rem; flex-wrap:wrap; }
.loc-chip{
  border:1px solid rgba(242,237,226,.25);
  padding:.5rem 1rem; font-size:.72rem; letter-spacing:.05em;
  border-radius:3px; cursor:pointer; background:transparent; color:var(--paper);
  transition:all .25s var(--ease); font-family:var(--font-mono);
}
.loc-chip:hover{ border-color:var(--accent); }
.loc-chip.is-selected{ background:var(--accent); border-color:var(--accent); color:var(--bg); font-weight:700; }
.location-city-input{
  background:rgba(242,237,226,.06); border:1px solid rgba(242,237,226,.2);
  border-radius:3px; padding:.6rem .8rem; font-size:.78rem;
  color:var(--paper); font-family:var(--font-mono); width:100%;
}
.location-city-input::placeholder{ color:rgba(242,237,226,.4); }
.location-city-input:focus{ outline:none; border-color:var(--accent); }
.location-row.is-shake{ animation:shake .5s var(--ease); }

/* combo = bônus informativo, sem cara de produto */
.combo-banner{
  margin-top:1.2rem; position:relative;
  border:1px dashed rgba(242,237,226,.28);
  border-radius:6px; padding:clamp(1.4rem,3vw,2rem);
  display:flex; align-items:center; justify-content:space-between; gap:1.5rem; flex-wrap:wrap;
}
.combo-text{ display:flex; flex-direction:column; gap:.4rem; max-width:56ch; }
.combo-text h3{ font-family:var(--font-display); font-size:clamp(1.3rem,2.2vw,1.7rem); font-weight:400; }
.combo-text p{ font-size:.82rem; opacity:.75; line-height:1.5; }
.combo-cta{
  font-size:.75rem; letter-spacing:.1em; font-weight:700; white-space:nowrap;
  border-bottom:1px solid var(--paper); padding-bottom:.2rem;
  transition:color .3s var(--ease), border-color .3s var(--ease);
}
.combo-cta:hover{ color:var(--accent); border-color:var(--accent); }
.sticker{
  position:absolute; top:-.8rem; right:1rem;
  /* acompanha o tema da sala corrente (era fixo no vermelho e destoava no roxo) */
  background:var(--accent); color:var(--paper);
  transition:background-color .6s var(--ease);
  font-size:.62rem; letter-spacing:.06em; font-weight:700;
  padding:.4rem .6rem; border-radius:3px;
  transform:rotate(3deg);
}

/* ---------- regras ---------- */
.regras-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:1.2rem;
}
.regra{
  border-top:1px solid rgba(242,237,226,.18);
  padding-top:1rem;
  display:flex; flex-direction:column; gap:.6rem;
}
.regra-num{ font-family:var(--font-display); font-size:1.6rem; color:var(--accent); transition:color .6s var(--ease); }
.regra p{ font-size:.85rem; opacity:.8; line-height:1.4; }

/* ---------- outro ---------- */
.outro{
  min-height:70vh; display:flex; align-items:center; justify-content:center;
  text-align:center; padding:4rem 1.5rem; overflow:hidden;
}
.outro-bg{
  position:absolute; inset:0;
  background:radial-gradient(ellipse at 50% 30%, rgba(var(--card-glow),.18), transparent 55%),
             radial-gradient(ellipse at 50% 80%, rgba(var(--cidade-glow),.18), transparent 55%);
}
.outro-content{ position:relative; z-index:2; display:flex; flex-direction:column; align-items:center; gap:1.4rem; }
.outro-content h2{
  font-family:var(--font-display); font-size:clamp(2.2rem,7vw,4.5rem); line-height:.95;
}
.outro-cta{
  padding:1.1rem 2.2rem; background:var(--paper); color:var(--bg);
  font-weight:700; letter-spacing:.1em; font-size:.85rem; border-radius:4px;
  transition:transform .3s var(--ease);
}
.outro-cta:hover{ transform:translateY(-3px); }
.outro-sub{ font-size:.8rem; opacity:.7; letter-spacing:.04em; margin-top:-.6rem; }
.outro-playlist{ font-size:.75rem; opacity:.65; letter-spacing:.04em; }
.outro-mark{ margin-top:2rem; font-size:.65rem; opacity:.6; letter-spacing:.1em; }

/* ---------- pill flutuante: som do drop (botão + player expansível) ---------- */
.sound-pill{
  position:fixed; left:1.2rem; bottom:1.2rem; z-index:150;
  display:flex; flex-direction:column-reverse; align-items:flex-start; gap:.7rem;
  opacity:0; transform:translateY(10px); pointer-events:none;
  transition:opacity .4s var(--ease), transform .4s var(--ease);
}
.sound-pill.is-visible{ opacity:1; transform:none; pointer-events:auto; }

.sound-pill-toggle{
  display:flex; align-items:center; gap:.6rem;
  padding:.6rem 1rem;
  background:rgba(10,9,8,.72);
  border:1px solid rgba(242,237,226,.2);
  border-radius:999px;
  backdrop-filter:blur(6px);
  font-size:.68rem; letter-spacing:.14em;
  color:var(--paper); font-family:var(--font-mono); cursor:pointer;
  transition:border-color .3s var(--ease);
}
.sound-pill-toggle:hover{ border-color:rgba(var(--accent-glow),.7); }
.sound-pill-toggle[aria-expanded="true"]{ border-color:var(--accent); }
.sound-pill .eq{ display:flex; align-items:flex-end; gap:2px; height:12px; }
.sound-pill .eq i{
  width:2px; background:var(--accent); border-radius:1px;
  animation:eqbounce 1s ease-in-out infinite;
  transition:background-color .6s var(--ease);
}
.sound-pill .eq i:nth-child(1){ height:60%; animation-delay:0s; }
.sound-pill .eq i:nth-child(2){ height:100%; animation-delay:.25s; }
.sound-pill .eq i:nth-child(3){ height:45%; animation-delay:.5s; }

/* painel do player — o iframe só ganha src no clique (ver main.js), fica leve até lá */
.sound-player-panel{
  width:min(280px,72vw);
  background:rgba(10,9,8,.9);
  border:1px solid rgba(242,237,226,.2);
  border-radius:12px;
  backdrop-filter:blur(6px);
  padding:.5rem .5rem .4rem;
  display:flex; flex-direction:column; gap:.3rem;
}
.sound-player-panel[hidden]{ display:none; }
.sound-player-panel iframe{ border-radius:8px; display:block; }
.sound-player-full{
  font-size:.62rem; letter-spacing:.06em; opacity:.6; text-align:right;
  padding:.1rem .3rem 0;
  transition:opacity .3s var(--ease), color .3s var(--ease);
}
.sound-player-full:hover{ opacity:1; color:var(--accent); }
@keyframes eqbounce{
  0%,100%{ transform:scaleY(.45); }
  50%{ transform:scaleY(1); }
}
.sound-pill .eq i{ transform-origin:bottom; }

/* ---------- reveal base ---------- */
.reveal{ opacity:0; visibility:hidden; transform:translateY(28px); }
.buy-card.reveal{ transform:translateX(32px); }

/* se GSAP/CDN falhar, js/main.js força esta classe pra nunca deixar conteúdo preso invisível */
.no-motion-fallback .reveal{ opacity:1 !important; visibility:visible !important; transform:none !important; }
.no-motion-fallback #preloader{ display:none !important; }

/* ---------- nav mobile: hambúrguer + drawer ---------- */
.nav-toggle{
  display:none; flex-direction:column; justify-content:center; gap:5px;
  width:32px; height:28px; background:none; border:none; cursor:pointer;
  padding:0;
}
.nav-toggle span{
  display:block; width:100%; height:2px; background:var(--paper);
  transition:transform .35s var(--ease), opacity .25s var(--ease);
}
.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

.nav-drawer{
  position:fixed; top:0; right:0; height:100dvh; width:min(78vw,320px);
  background:var(--ink); border-left:1px solid rgba(242,237,226,.12);
  z-index:170;
  display:flex; flex-direction:column; justify-content:center; gap:1.6rem;
  padding:2rem clamp(1.5rem,6vw,2.5rem);
  transform:translateX(100%);
  transition:transform .5s var(--ease);
}
.nav-drawer.is-open{ transform:translateX(0); }
.nav-drawer a{
  font-family:var(--font-display); font-size:1.6rem; letter-spacing:.03em;
  color:var(--paper); opacity:.85; transition:opacity .25s var(--ease), color .6s var(--ease);
}
.nav-drawer a:hover, .nav-drawer a:focus-visible{ opacity:1; color:var(--accent); }

.nav-drawer-backdrop{
  position:fixed; inset:0; z-index:160;
  background:rgba(10,9,8,.6);
  opacity:0; pointer-events:none;
  transition:opacity .4s var(--ease);
}
.nav-drawer-backdrop.is-open{ opacity:1; pointer-events:auto; }

html.drawer-open{ overflow:hidden; }

/* ---------- responsive ---------- */
@media (max-width:1100px){
  .regras-grid{ grid-template-columns:1fr 1fr; }
}

@media (max-width:860px){
  .extras-grid{ grid-template-columns:1fr; }
  .nav-links{ display:none; }
  .nav-toggle{ display:flex; }
  .combo-banner{ flex-direction:column; align-items:flex-start; }
  .sound-pill{ left:.9rem; bottom:.9rem; }
  .sound-pill-toggle{ padding:.5rem .85rem; }
  /* em viewport estreito o `cover` come as laterais da foto e sobra a faixa
     central (o telefone público), sem ninguém vestindo as peças. desloca o
     enquadramento pro modelo da esquerda, que é quem mostra a estampa. */
  .hero-bg{ background-position:32% 58%; }
  /* vitrine em telas estreitas: estampa um pouco menor pra caber com o texto */
  .is-live .stage-view{ max-width:88vw; }
  .is-live .stage-plate, .is-live .stage-look{ height:min(100%,360px); }
}