/* Canastrium · landing page. Noite de boteco: preto quente, luz de lâmpada dourada, Cascalho azul e Brasa vermelha.
   Títulos na fonte pixel do jogo; animações ligadas ao scroll em js/site.js. Só caminhos relativos. */
@font-face{font-family:'m6x11plus';src:url(../fonts/m6x11plus.ttf) format('truetype');font-display:swap}

:root{
  --noite:#0c0806;--madeira:#160e09;--madeira-2:#21150d;--borda:#3a2616;
  --texto:#f4ead8;--suave:#bfae93;--ouro:#ffc94a;--ouro-2:#ff9f1c;--brasa:#ff4b2b;--cascalho:#3c8dff;--mata:#5be38a;
  --pixel:'m6x11plus',system-ui,sans-serif;
  --sans:system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  --m:clamp(20px,4vw,64px);
  --sai:cubic-bezier(.16,1,.3,1);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--noite);color:var(--texto);font:400 17px/1.6 var(--sans);overflow-x:hidden}
img{display:block;max-width:100%;height:auto}
.px,.sprite{image-rendering:pixelated}
a{color:inherit}
h1,h2,h3,p{margin:0}
:focus-visible{outline:3px solid var(--ouro);outline-offset:3px}
::selection{background:var(--ouro);color:#111}
.pular{position:absolute;left:-999px;top:8px;background:var(--ouro);color:#111;padding:10px 14px;z-index:100}
.pular:focus{left:8px}

/* barra de progresso da leitura */
.progresso{position:fixed;inset:0 0 auto;height:3px;z-index:60;pointer-events:none}
.progresso span{display:block;height:100%;background:linear-gradient(90deg,var(--cascalho),var(--ouro),var(--brasa));transform-origin:left;transform:scaleX(0)}

/* ---------- elementos comuns ---------- */
.btn{display:inline-flex;align-items:center;gap:10px;min-height:52px;padding:0 24px;border-radius:4px;font:400 22px/1 var(--pixel);text-decoration:none;cursor:pointer;
  border:2px solid transparent;transition:transform .18s var(--sai),box-shadow .2s,background-color .2s,color .2s}
.btn img{width:24px;height:auto}
.btn-ouro{background:var(--ouro);color:#1a0f05;box-shadow:0 6px 0 #a8681a}
.btn-ouro:hover{transform:translateY(-3px);box-shadow:0 0 28px rgba(255,201,74,.45),0 9px 0 #a8681a}
.btn-ouro:active{transform:translateY(3px);box-shadow:0 2px 0 #a8681a}
.btn-linha{background:rgba(12,8,6,.4);color:var(--texto);border-color:rgba(244,234,216,.45)}
.btn-linha:hover{border-color:var(--ouro);color:var(--ouro);transform:translateY(-3px)}
.btn-p{min-height:40px;padding:0 16px;font-size:18px;box-shadow:0 4px 0 #a8681a}

.secao{position:relative;padding:clamp(96px,14vh,160px) var(--m)}
.rotulo{display:inline-flex;align-items:center;gap:12px;font:400 18px/1 var(--pixel);color:var(--ouro);letter-spacing:.08em;text-transform:uppercase}
.rotulo::before,.rotulo::after{content:"";width:28px;height:4px;background:repeating-linear-gradient(90deg,currentColor 0 4px,transparent 4px 8px)}
.titulo{font:400 clamp(40px,5.6vw,84px)/.95 var(--pixel);text-transform:uppercase;margin-top:18px;letter-spacing:.01em;text-shadow:0 4px 0 rgba(0,0,0,.45)}
.titulo em{font-style:normal;color:var(--ouro);text-shadow:0 0 24px rgba(255,201,74,.35),0 4px 0 rgba(0,0,0,.45)}
.lead{margin-top:18px;font-size:clamp(17px,1.3vw,19px);color:var(--suave);max-width:52ch}
.cabeca.centro{text-align:center;display:flex;flex-direction:column;align-items:center}
.cabeca.centro .lead{margin-inline:auto}

/* ---------- topo ---------- */
.topo{position:fixed;inset:0 0 auto;z-index:50;display:flex;align-items:center;gap:24px;padding:16px var(--m);transition:background-color .3s,padding .3s,box-shadow .3s}
.topo.solido{background:rgba(12,8,6,.92);padding-block:10px;box-shadow:0 1px 0 var(--borda)}
.topo-marca img{width:150px}
.topo-nav{display:flex;gap:28px;margin-left:auto;font-size:15px}
.topo-nav a{text-decoration:none;color:var(--suave);transition:color .2s;position:relative;padding:6px 0}
.topo-nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--ouro);transform:scaleX(0);transition:transform .25s var(--sai)}
.topo-nav a:hover{color:var(--texto)}
.topo-nav a:hover::after,.topo-nav a.ativo::after{transform:scaleX(1)}
.topo-nav a.ativo{color:var(--ouro)}

/* ---------- herói ---------- */
.heroi{position:relative;min-height:100svh;display:flex;align-items:center;overflow:hidden;padding:120px var(--m) 100px}
.heroi-fundo{position:absolute;inset:-8% 0 -8%;will-change:transform}
.heroi-fundo img{width:100%;height:100%;object-fit:cover;object-position:60% 50%}
.heroi-veu{position:absolute;inset:0;background:
  linear-gradient(90deg,rgba(12,8,6,.96) 0%,rgba(12,8,6,.82) 30%,rgba(12,8,6,.25) 62%,rgba(12,8,6,.35) 100%),
  linear-gradient(0deg,var(--noite) 0%,rgba(12,8,6,0) 30%),
  linear-gradient(180deg,rgba(12,8,6,.7) 0%,rgba(12,8,6,0) 22%)}
.heroi-conteudo{position:relative;z-index:3;max-width:600px;will-change:transform}
.heroi-logo{width:min(560px,100%);filter:drop-shadow(0 10px 30px rgba(255,159,28,.25))}
.heroi-titulo{margin-top:24px;font:400 clamp(26px,2.6vw,38px)/1.1 var(--pixel);text-transform:uppercase}
.heroi-titulo span{color:var(--ouro)}
.heroi-texto{margin-top:16px;color:var(--suave);max-width:46ch}
.heroi-acoes{display:flex;flex-wrap:wrap;gap:14px;margin-top:30px}
.heroi-plataformas{margin-top:20px;font-size:14px;color:var(--suave)}
.heroi-plataformas span{margin-left:10px;padding:3px 8px;border:1px solid var(--borda);border-radius:3px;color:var(--ouro);font:400 14px/1 var(--pixel)}
.selos{list-style:none;padding:0;margin:34px 0 0;display:flex;gap:14px;flex-wrap:wrap}
.selos li{display:flex;flex-direction:column;align-items:center;justify-content:center;width:96px;height:96px;border-radius:50%;
  background:rgba(22,14,9,.75);border:2px solid var(--borda);box-shadow:inset 0 0 0 4px rgba(255,201,74,.08)}
.selos b{font:400 34px/1 var(--pixel);color:var(--ouro)}
.selos span{font-size:12px;color:var(--suave);text-transform:uppercase;letter-spacing:.08em;margin-top:2px}

/* trailer na moldura de madeira das caixas do jogo (caixa-madeira.png em 9 fatias, cantos inteiros); o vídeo fica sempre em 16:9 */
.heroi{gap:clamp(24px,4vw,64px)}
.heroi-video{position:relative;z-index:3;flex:0 1 min(48vw,820px);margin:0 0 0 auto;will-change:transform}
.moldura{position:relative;border:22px solid transparent;border-image:url(../img/ui/caixa-madeira.png) 30 fill / 22px / 0 round;image-rendering:pixelated;
  filter:drop-shadow(0 22px 34px rgba(0,0,0,.65))}
.moldura video{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:contain;background:#000;image-rendering:auto}
.som{padding:8px 12px 9px;font:400 16px/1 var(--pixel);color:var(--texto);cursor:pointer;
  background:rgba(22,14,9,.85);border:2px solid var(--borda);border-radius:3px;transition:background .2s,color .2s}
.som:hover,.som:focus-visible{background:var(--madeira-2);color:var(--ouro)}
.som[aria-pressed=true]{color:var(--ouro)}
.heroi-video figcaption{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:12px;font:400 15px/1 var(--pixel);color:var(--suave);letter-spacing:.06em}
@keyframes boia{50%{transform:translateY(-14px)}}

.vagalumes{position:absolute;inset:0;z-index:2;pointer-events:none}
.vagalumes i{position:absolute;bottom:-10px;width:4px;height:4px;background:var(--ouro);box-shadow:0 0 10px 2px rgba(255,201,74,.7);opacity:0;animation:sobe 9s linear infinite}
.vagalumes i:nth-child(1){left:8%;animation-delay:0s}.vagalumes i:nth-child(2){left:18%;animation-delay:-2s;animation-duration:11s}
.vagalumes i:nth-child(3){left:29%;animation-delay:-5s}.vagalumes i:nth-child(4){left:41%;animation-delay:-1s;animation-duration:12s}
.vagalumes i:nth-child(5){left:52%;animation-delay:-7s}.vagalumes i:nth-child(6){left:61%;animation-delay:-3s;animation-duration:10s}
.vagalumes i:nth-child(7){left:70%;animation-delay:-6s}.vagalumes i:nth-child(8){left:78%;animation-delay:-4s;animation-duration:13s}
.vagalumes i:nth-child(9){left:86%;animation-delay:-8s}.vagalumes i:nth-child(10){left:93%;animation-delay:-2.5s}
.vagalumes i:nth-child(11){left:35%;animation-delay:-9s;animation-duration:14s}.vagalumes i:nth-child(12){left:66%;animation-delay:-10s;animation-duration:15s}
@keyframes sobe{0%{opacity:0;transform:translate(0,0)}10%{opacity:.9}80%{opacity:.6}100%{opacity:0;transform:translate(30px,-90vh)}}

.sprite{position:absolute;display:block;background-repeat:no-repeat;pointer-events:none;z-index:3}
.garcom{width:64px;height:64px;bottom:22px;left:0;background-image:url(../img/menu/garcom.png);background-size:576px 64px;scale:1.8;transform-origin:bottom left;
  animation:garcomPasso .9s steps(8) infinite,garcomAnda 26s linear infinite}
@keyframes garcomPasso{from{background-position:-64px 0}to{background-position:-576px 0}}
@keyframes garcomAnda{from{translate:-140px 0}to{translate:calc(100vw + 60px) 0}}
.rolar{position:absolute;left:50%;bottom:26px;translate:-50% 0;width:28px;height:44px;border:2px solid rgba(244,234,216,.5);border-radius:14px;z-index:4}
.rolar span{position:absolute;left:50%;top:8px;width:4px;height:8px;margin-left:-2px;background:var(--ouro);animation:rolar 1.6s ease-in-out infinite}
@keyframes rolar{60%{transform:translateY(14px);opacity:0}100%{opacity:0}}

/* entrada do herói */
.entra{opacity:0;transform:translateY(26px);animation:entra .9s var(--sai) forwards}
.entra:nth-child(2){animation-delay:.12s}.entra:nth-child(3){animation-delay:.24s}.entra:nth-child(4){animation-delay:.36s}
.entra:nth-child(5){animation-delay:.48s}.entra:nth-child(6){animation-delay:.6s}
@keyframes entra{to{opacity:1;transform:none}}
.heroi-video .entra{animation-delay:.4s}

/* Trunfo emoldurado como no jogo */
.jk{position:relative;display:block;aspect-ratio:300/451}
/* a arte foi desenhada para a carta inteira (a margem transparente dela é a janela da moldura): vai em 100% e é recortada na janela,
   para encostar na moldura sem sobrar espaço e sem vazar pelos cantos */
.jk>img{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;clip-path:inset(6.5% 9% 7.5% 9%)}
.jk::after{content:"";position:absolute;inset:0;background:center/100% 100% no-repeat}
.jk.tier-jei::after{background-image:url(../img/trunfos/borda-jei.webp)}
.jk.tier-tru::after{background-image:url(../img/trunfos/borda-tru.webp)}
.jk.tier-mal::after{background-image:url(../img/trunfos/borda-mal.webp)}
.jk.tier-man::after{background-image:url(../img/trunfos/borda-man.webp)}
.jk.lendvivo::after{display:none}

/* ---------- jogabilidade ---------- */
.jogo{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,6fr);gap:clamp(32px,5vw,90px);align-items:center;background:
  radial-gradient(60% 50% at 80% 50%,rgba(255,159,28,.10),transparent 70%),var(--noite)}
.passos{list-style:none;padding:0;margin:36px 0 0;display:grid;gap:12px}
.passos li{display:grid;grid-template-columns:52px 1fr;gap:16px;align-items:center;padding:14px 16px;background:var(--madeira);border:1px solid var(--borda);border-radius:6px;
  transition:transform .2s var(--sai),border-color .2s,background-color .2s,opacity .8s var(--sai)}
.passos li:hover{transform:translateX(8px);border-color:var(--ouro-2);background:var(--madeira-2)}
.passos img{width:44px;justify-self:center}
.passos b{display:block;font:400 20px/1.1 var(--pixel);color:var(--texto)}
.passos span{display:block;font-size:15px;color:var(--suave);margin-top:2px;line-height:1.45}

/* a mesa do jogo: o cenário do boteco ao fundo, a mesa de madeira com pernas (mesa-nova.webp) e, no tampo, as cartas e os itens do canto
   direito nas posições do gabarito do jogo (convertidas para % do tampo) */
.jogo-mesa{position:relative;container-type:inline-size;aspect-ratio:16/12;border-radius:10px;overflow:hidden;box-shadow:0 30px 70px rgba(0,0,0,.55)}
.cena{position:absolute;inset:0}
.cena img{width:100%;height:100%;object-fit:cover;object-position:50% 100%;filter:brightness(.62) saturate(.9)}
.cena::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(12,8,6,.75) 0%,rgba(12,8,6,.2) 45%,rgba(12,8,6,.35) 100%)}
.madeira{position:absolute;left:-3cqw;right:-3cqw;bottom:-1cqw;z-index:2}
.madeira-img{width:100%;image-rendering:pixelated;filter:drop-shadow(0 1.2cqw 0 rgba(0,0,0,.35))}
.tampo{position:absolute;left:3%;top:5.4%;width:93.9%;height:77.1%}
.mesa-cartas{position:absolute;left:40%;bottom:40%;width:0;height:0}
.mesa-cartas img{position:absolute;left:0;bottom:0;width:10cqw;max-width:none;border-radius:.6cqw;filter:drop-shadow(0 .8cqw 1cqw rgba(0,0,0,.45));transform-origin:50% 130%;
  transform:translateX(calc(-50% + (var(--i) - 3) * var(--abre,0) * 44%)) rotate(calc((var(--i) - 3) * var(--abre,0) * 9deg))}
.tampo .item{position:absolute;height:auto;filter:drop-shadow(0 .5cqw 0 rgba(0,0,0,.35))}
.tampo .caneca{left:81.1%;top:20%;width:6.2%}
.tampo .garrafa{left:87.3%;top:5%;width:5.1%;z-index:2}
.tampo .tabua{left:82.2%;top:46%;width:14.7%;rotate:-17deg;z-index:1}
.tampo .tabua img{width:100%;height:auto}
.tampo .tabua .pic{position:absolute;left:8%;top:7%;width:52%}
.placar{position:absolute;z-index:3;top:4cqw;left:50%;translate:-50% 0;width:min(320px,56cqw);margin:0;background:rgba(22,12,6,.92);border:3px solid #6b3a1e;border-radius:8px;padding:14px 16px;font-family:var(--pixel)}
.placar-mao{display:flex;justify-content:space-between;font-size:20px;color:var(--ouro)}
.placar-mao span{color:var(--suave)}
.placar-conta{display:flex;justify-content:center;align-items:center;gap:10px;margin-top:10px}
.ficha{display:flex;align-items:center;gap:6px;padding:6px 12px 6px 6px;border-radius:4px;font-size:30px}
.ficha img{width:30px}
.f-cas{background:#1b4bb8;box-shadow:0 0 18px rgba(60,141,255,.45)}.f-bra{background:#b81b1b;box-shadow:0 0 18px rgba(255,75,43,.45)}
.vezes{font-size:28px}
.placar-total{display:flex;justify-content:space-between;align-items:baseline;margin-top:10px;background:#0d0603;padding:8px 12px;border-radius:4px;font-size:18px;color:var(--suave)}
.placar-total b{font-size:44px;font-weight:400;color:var(--ouro);text-shadow:0 0 16px rgba(255,201,74,.5)}
.placar-meta{margin-top:10px;font-size:15px;color:var(--suave)}
.placar-meta i{display:block;height:10px;margin-top:6px;background:#0d0603;border-radius:3px;overflow:hidden}
.placar-meta s{display:block;height:100%;background:var(--mata);transform-origin:left;transform:scaleX(0);transition:transform 1.2s var(--sai)}

/* ---------- o boteco: panorama ---------- */
.boteco{position:relative;height:260vh;background:var(--noite)}
.boteco-palco{position:sticky;top:0;height:100svh;overflow:hidden}
.boteco-pano{position:absolute;top:0;left:0;height:100%;will-change:transform}
.boteco-pano img{height:100%;width:auto;max-width:none;image-rendering:pixelated}
.boteco-veu{position:absolute;inset:0;background:linear-gradient(90deg,rgba(12,8,6,.92) 0%,rgba(12,8,6,.55) 34%,rgba(12,8,6,0) 60%),linear-gradient(0deg,var(--noite) 0%,transparent 18%),linear-gradient(180deg,var(--noite) 0%,transparent 14%)}
.boteco-texto{position:absolute;left:var(--m);top:50%;translate:0 -50%;max-width:440px;z-index:2}
.locais{list-style:none;padding:0;margin:30px 0 0;display:grid;gap:10px}
.locais li{padding:12px 16px;border-left:4px solid var(--borda);background:rgba(22,14,9,.6);opacity:.55;transition:opacity .3s,border-color .3s,transform .3s var(--sai)}
.locais li.ativo{opacity:1;border-color:var(--ouro);transform:translateX(8px)}
.locais b{display:block;font:400 22px/1.1 var(--pixel)}
.locais span{display:block;font-size:15px;color:var(--suave)}

/* ---------- trunfos ---------- */
.trunfos{background:radial-gradient(50% 40% at 30% 55%,rgba(60,141,255,.10),transparent 70%),var(--noite);overflow:hidden}
.destaque{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(32px,6vw,100px);align-items:center;max-width:1180px;margin:clamp(48px,8vh,90px) auto 0}
.destaque-carta{position:relative;justify-self:center;width:min(340px,70vw);perspective:900px}
.destaque-carta .jk{filter:drop-shadow(0 30px 40px rgba(0,0,0,.6))}
.aura{position:absolute;inset:-18%;border-radius:50%;background:radial-gradient(circle,var(--cor-aura,rgba(170,170,170,.35)) 0%,transparent 62%);animation:pulsa 3.5s ease-in-out infinite;z-index:-1}
@keyframes pulsa{50%{transform:scale(1.08);opacity:.75}}
.destaque-tier{display:inline-block;padding:5px 12px;border-radius:3px;font:400 18px/1 var(--pixel);background:#555;color:#fff}
.destaque-tier.t-tru{background:#2a52c9}.destaque-tier.t-mal{background:#7a2bb8}.destaque-tier.t-man{background:#c99a12;color:#111}
.destaque-nome{margin-top:14px;font:400 clamp(36px,4.2vw,64px)/1 var(--pixel);text-transform:uppercase}
.destaque-efeito{margin-top:14px;font-size:19px;max-width:40ch;min-height:3.2em}
.barras{margin:22px 0 0;display:grid;gap:12px;max-width:420px}
.barras div{display:grid;grid-template-columns:130px 1fr;align-items:center;gap:12px}
.barras dt{font:400 17px/1 var(--pixel);color:var(--suave)}
.barras dd{margin:0;display:flex;align-items:center;gap:10px}
.barras i{flex:1;height:12px;background:repeating-linear-gradient(90deg,#2a1b10 0 10px,#160e09 10px 12px);border-radius:2px;position:relative;overflow:hidden}
.barras i::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,var(--ouro) 0 10px,transparent 10px 12px);transform-origin:left;transform:scaleX(var(--v));transition:transform .6s var(--sai)}
.barras span{font:400 17px/1 var(--pixel);color:var(--ouro);min-width:40px}
.destaque-escolha{display:flex;flex-wrap:wrap;gap:8px;margin:26px 0 22px}
.destaque-escolha button{width:58px;padding:0;border:2px solid transparent;border-radius:4px;background:none;cursor:pointer;transition:transform .2s var(--sai),border-color .2s,opacity .2s;opacity:.65}
.destaque-escolha button:hover{transform:translateY(-4px);opacity:1}
.destaque-escolha button[aria-selected="true"]{border-color:var(--ouro);opacity:1}
.destaque-escolha .jk{pointer-events:none}
[data-pacote] img{width:20px}

.desfile{margin:clamp(70px,10vh,120px) calc(var(--m) * -1) 0;overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.desfile-trilho{display:flex;gap:18px;width:max-content;animation:desfila 90s linear infinite}
.desfile:hover .desfile-trilho{animation-play-state:paused}
.desfile .jk{width:130px;transition:transform .25s var(--sai)}
.desfile .jk:hover{transform:translateY(-12px) rotate(-3deg)}
@keyframes desfila{to{transform:translateX(-50%)}}

/* ---------- chefões: corredor horizontal ---------- */
.chefoes{position:relative;height:320vh;background:linear-gradient(180deg,var(--noite),#140806 50%,var(--noite))}
.chefoes-palco{position:sticky;top:0;height:100svh;overflow:hidden;display:flex;flex-direction:column;justify-content:center;padding:80px 0 40px}
.chefoes-cabeca{padding:0 var(--m);max-width:760px}
.chefoes-trilho{display:flex;gap:22px;margin-top:clamp(28px,5vh,56px);padding:0 var(--m);width:max-content;will-change:transform}
.chefe{position:relative;flex:0 0 auto;width:clamp(240px,22vw,300px);min-height:300px;padding:26px 22px 22px;border-radius:8px;background:var(--madeira);border:2px solid var(--borda);
  overflow:hidden;transition:transform .25s var(--sai),border-color .25s}
.chefe::before{content:"";position:absolute;inset:0 0 auto;height:6px;background:var(--cor)}
.chefe::after{content:"";position:absolute;right:-40px;top:-40px;width:160px;height:160px;border-radius:50%;background:var(--cor);opacity:.12;filter:blur(10px)}
.chefe:hover{border-color:var(--cor)}
.chefe-rodada{font:400 15px/1 var(--pixel);color:var(--cor)}
.chefe-nome{margin-top:12px;font:400 30px/1 var(--pixel);text-transform:uppercase}
.chefe-regra{margin-top:14px;font-size:16px;color:var(--suave);line-height:1.5}
.chefe-selo{position:absolute;right:16px;bottom:14px;width:42px;height:42px;border-radius:50%;border:3px solid var(--cor);display:grid;place-items:center;font:400 22px/1 var(--pixel);color:var(--cor)}

/* ---------- o bar: cartazes ---------- */
.bar{background:var(--noite)}
.linha-cabeca{display:flex;justify-content:space-between;align-items:flex-end;gap:24px}
.setas{display:flex;gap:10px}
.seta{width:52px;height:52px;border-radius:4px;border:2px solid var(--borda);background:var(--madeira);color:var(--texto);font:400 32px/1 var(--pixel);cursor:pointer;transition:border-color .2s,color .2s,transform .15s}
.seta:hover{border-color:var(--ouro);color:var(--ouro)}.seta:active{transform:scale(.92)}
.cartazes{list-style:none;padding:12px var(--m) 20px;margin:32px calc(var(--m) * -1) 0;display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;scroll-padding:0 var(--m)}
.cartazes::-webkit-scrollbar{display:none}
.cartaz{flex:0 0 clamp(250px,24vw,330px);scroll-snap-align:start;background:var(--madeira);border:2px solid var(--borda);border-radius:8px;overflow:hidden;transition:transform .3s var(--sai),border-color .3s,opacity .8s var(--sai)}
.cartaz:hover{transform:translateY(-8px);border-color:var(--ouro-2)}
.cartaz-arte{position:relative;aspect-ratio:4/4.4;overflow:hidden;background:#1d120a}
.cartaz-arte>img:first-child{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--sai)}
.cartaz:hover .cartaz-arte>img:first-child{transform:scale(1.08)}
.cartaz-arte::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(22,14,9,1) 0%,rgba(22,14,9,0) 45%);pointer-events:none}
.cartaz-arte .sobre{position:absolute;left:50%;bottom:10%;translate:-50% 0;width:46%;height:auto;z-index:2;filter:drop-shadow(0 10px 16px rgba(0,0,0,.6));transition:transform .4s var(--sai)}
.cartaz:hover .sobre{transform:translateY(-10px) rotate(-4deg) scale(1.05)}
.cartaz-arte .sobre.pac{width:38%}
.cartaz-arte .sobre.caneca{width:40%}
.c-bebedeira{display:grid;place-items:center;background:radial-gradient(circle at 50% 45%,#5a2a0a,#1d120a 70%)}
.c-bebedeira>img{width:52%!important;height:auto!important;object-fit:contain!important;grid-area:1/1;transition:opacity .5s,transform .5s var(--sai)!important}
.c-bebedeira .b2{opacity:0;transform:rotate(-12deg) scale(.9)}
.cartaz:hover .c-bebedeira>img:first-child{opacity:0;transform:scale(1.1)}
.cartaz:hover .c-bebedeira .b2{opacity:1;transform:rotate(-6deg) scale(1.05)}
.c-baralhos{background:radial-gradient(circle at 50% 50%,#2a1a0c,#120b06 75%)}
.c-baralhos img{position:absolute;left:50%;top:40%;width:34%;border-radius:5px;filter:drop-shadow(0 6px 8px rgba(0,0,0,.5));transform-origin:50% 140%;
  translate:-50% -50%;rotate:calc((var(--i) - 5.5) * 7deg);transition:rotate .5s var(--sai)}
.cartaz:hover .c-baralhos img{rotate:calc((var(--i) - 5.5) * 11deg)}
.c-medalhas{display:grid;grid-template-columns:repeat(3,1fr);gap:8%;padding:12% 14% 22%;background:radial-gradient(circle,#3a2510,#140c06 75%)}
.c-medalhas img{width:100%;transition:transform .35s var(--sai)}
.cartaz:hover .c-medalhas img{transform:scale(1.12)}
.cartaz:hover .c-medalhas img:nth-child(even){transform:scale(1.12) rotate(8deg)}
.cartaz-texto{padding:18px 20px 22px}
.cartaz-texto b{display:block;font:400 26px/1 var(--pixel);text-transform:uppercase}
.cartaz-texto span{display:block;margin-top:8px;font-size:15px;color:var(--suave);line-height:1.5}

/* ---------- chamada final ---------- */
.baixar{position:relative;min-height:100svh;display:grid;place-items:center;padding:120px var(--m);overflow:hidden}
.baixar-fundo{position:absolute;inset:-10% 0;will-change:transform}
.baixar-fundo img{width:100%;height:100%;object-fit:cover}
.baixar-veu{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 50%,rgba(12,8,6,.55),rgba(12,8,6,.9) 70%),linear-gradient(180deg,var(--noite) 0%,transparent 20%,transparent 80%,var(--noite) 100%)}
.baixar-caixa{position:relative;z-index:2;text-align:center;max-width:860px;display:flex;flex-direction:column;align-items:center}
.baixar-logo{width:min(420px,80vw);filter:drop-shadow(0 10px 30px rgba(255,159,28,.3))}
.baixar .lead{margin-inline:auto;color:var(--texto)}
.plataformas{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;margin-top:34px}
.plat{display:flex;align-items:center;gap:14px;min-width:230px;padding:14px 22px;border-radius:6px;background:rgba(22,14,9,.9);border:2px solid var(--borda);text-decoration:none;text-align:left;
  transition:transform .2s var(--sai),border-color .2s,box-shadow .2s}
.plat svg{width:30px;height:30px;fill:var(--ouro);flex:none}
.plat span{font:400 26px/1 var(--pixel)}
.plat small{display:block;font:400 13px/1.3 var(--sans);color:var(--suave);margin-bottom:4px}
.plat:hover{transform:translateY(-5px);border-color:var(--ouro);box-shadow:0 0 30px rgba(255,201,74,.25)}
.plat:active{transform:translateY(1px)}
.baixar-nota{margin-top:22px;font-size:14px;color:var(--suave);max-width:52ch}

/* ---------- rodapé ---------- */
.rodape{position:relative;padding:80px var(--m) 30px;background:#080503;border-top:1px solid var(--borda);overflow:hidden}
.rodape-linha{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:24px}
.rodape-logo{width:200px}
.rodape nav{display:flex;flex-wrap:wrap;gap:22px;font-size:15px}
.rodape nav a{color:var(--suave);text-decoration:none;transition:color .2s}
.rodape nav a:hover{color:var(--ouro)}
.rodape-pe{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;margin-top:40px;padding-top:20px;border-top:1px solid var(--borda);font-size:14px;color:var(--suave)}
.rodape-pe p{display:flex;align-items:center;gap:8px}
.rodape-pe img{height:24px;width:auto}
.nick{width:44px;height:64px;right:calc(var(--m) + 80px);top:8px;background-image:url(../img/menu/nick.png);background-size:352px 64px;animation:nickRabo .9s steps(8) infinite}
@keyframes nickRabo{to{background-position:-352px 0}}
.rodape .felix{width:64px;height:57px;right:var(--m);top:14px;background-image:url(../img/menu/felix.png);background-size:512px 57px;animation:felixRabo 1.2s steps(8) infinite}
@keyframes felixRabo{to{background-position:-512px 0}}

/* ---------- revelar ao rolar ---------- */
.js .revela{opacity:0;translate:0 34px;transition:opacity .8s var(--sai),translate .9s var(--sai),transform .25s var(--sai),border-color .25s;transition-delay:var(--atraso,0ms),var(--atraso,0ms),0s,0s}
.js .revela.visto{opacity:1;translate:none}
.js .chefe{opacity:0;translate:0 40px;rotate:3deg;transition:opacity .6s,translate .7s var(--sai),rotate .7s var(--sai),transform .25s var(--sai),border-color .25s}
.js .chefe.visto{opacity:1;translate:none;rotate:0deg}
.chefe:hover{transform:translateY(-8px) rotate(-1deg)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition-duration:.01ms!important;transition-delay:0s!important}
  .entra,.js .revela,.js .chefe{opacity:1!important;transform:none!important;translate:none!important;rotate:none}
  .garcom{left:12%;background-position:0 0}
  .rolar span,.vagalumes{display:none}
  .boteco,.chefoes{height:auto}
  .boteco-palco,.chefoes-palco{position:relative;height:auto}
  .boteco-palco{min-height:80svh}
  .chefoes-trilho{width:auto;flex-wrap:nowrap;overflow-x:auto;padding-bottom:16px}
  .desfile{overflow-x:auto}
  .mesa-cartas img{--abre:1}
  .locais li{opacity:1}
}

/* ---------- tablet ---------- */
@media (max-width:1024px){
  .topo-nav{display:none}
  .topo .btn-p{margin-left:auto}
  .heroi{flex-direction:column;align-items:flex-start}
  .heroi-video{flex:none;order:-1;width:min(100%,720px);margin:0 0 4px}
  .jogo,.destaque{grid-template-columns:1fr}
  .jogo-mesa{max-width:640px;width:100%;margin:0 auto}
  .boteco-veu{background:linear-gradient(0deg,rgba(12,8,6,.95) 0%,rgba(12,8,6,.6) 45%,rgba(12,8,6,.1) 75%),linear-gradient(180deg,var(--noite) 0%,transparent 14%)}
  .boteco-texto{top:auto;bottom:6svh;translate:none;right:var(--m)}
}

/* ---------- celular ---------- */
@media (max-width:640px){
  body{font-size:16px}
  .topo-marca img{width:120px}
  .heroi{flex-direction:column;align-items:stretch;padding:84px 20px 90px}
  .heroi-veu{background:linear-gradient(0deg,var(--noite) 0%,rgba(12,8,6,.9) 45%,rgba(12,8,6,.35) 75%,rgba(12,8,6,.6) 100%)}
  .heroi-fundo img{object-position:70% 50%}
  .heroi-video{order:-1;width:100%;margin:0 0 6px}
  .moldura{border-width:14px;border-image-width:14px}
  .som{font-size:14px;padding:6px 9px 7px}
  .heroi-titulo{font-size:24px}
  .heroi-acoes .btn{flex:1 1 100%;justify-content:center}
  .selos li{width:80px;height:80px}
  .selos b{font-size:28px}
  .garcom{scale:1.3;bottom:18px}
  .rolar{display:none}
  .titulo{font-size:clamp(36px,10.5vw,48px)}
  .passos li{grid-template-columns:40px 1fr;padding:12px}
  .passos img{width:36px}
  .jogo-mesa{aspect-ratio:4/5}
  .placar{padding:10px 12px;top:4cqw;width:78cqw}
  .boteco{height:220vh}
  .boteco-texto{left:20px;right:20px}
  .locais li{padding:10px 12px}
  .barras div{grid-template-columns:110px 1fr}
  .destaque-escolha button{width:calc((100% - 48px)/7)}
  .chefoes{height:420vh}
  .chefoes-palco{padding:70px 0 24px}
  .chefe{width:76vw;min-height:250px}
  .chefoes .lead{font-size:16px}
  .linha-cabeca{flex-direction:column;align-items:flex-start}
  .setas{display:none}
  .cartaz{flex-basis:78vw}
  .plat{min-width:0;width:100%}
  .rodape-logo{width:160px}
}