/* Visual "cinema" da vitrine: palco de abertura, menu lateral (tablet/PC), cartões grandes e lanche que se monta.
   Só vale com body.cinema; as cores e fontes vêm do tema da loja (variáveis). */
body.cinema{--rail:0px;font-synthesis:none;background:var(--page)}
.cinema h1,.cinema h2,.cinema h3{font-synthesis:none}

/* ---------- palco ---------- */
.stage{position:relative;overflow:hidden;isolation:isolate;color:#fff7ec;min-height:560px;display:grid;align-items:center;
  padding:74px 20px 74px;background:radial-gradient(120% 95% at 78% 42%,#4a1f0a 0%,#1b0e08 46%,#090605 100%)}
.stage::before{content:"";position:absolute;inset:0;z-index:-2;background:var(--capa,none) center/cover;opacity:.2;filter:saturate(1.25) blur(3px);transform:scale(1.06)}
.stage::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,#0009,#0000 22%,#0000 70%,var(--page) 100%),
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%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 .5 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
  background-blend-mode:normal,soft-light}
.st-bg{position:absolute;inset:0;z-index:-1;pointer-events:none}
.st-glow{position:absolute;right:6%;top:50%;width:min(78vmin,760px);height:min(78vmin,760px);translate:0 -50%;border-radius:50%;
  background:radial-gradient(circle,#ff7a1a66 0%,#ff7a1a22 38%,#ff7a1a00 68%);filter:blur(6px);animation:respira 6s ease-in-out infinite}
@keyframes respira{50%{opacity:.7;scale:1.06}}
.embers{position:absolute;inset:0;overflow:hidden}
.embers i{position:absolute;bottom:-12px;width:var(--s);height:var(--s);border-radius:50%;background:#ffc04d;box-shadow:0 0 9px 2px #ff7a1a;opacity:0;animation:brasa var(--d) linear var(--w) infinite}
@keyframes brasa{0%{transform:translate(0,0);opacity:0}8%{opacity:.95}70%{opacity:.6}100%{transform:translate(var(--x),-640px) scale(.4);opacity:0}}
.stage .open{position:absolute;left:20px;top:70px;z-index:3}
.stage .lang{top:68px;right:20px}
.st-main{display:grid;gap:10px;align-items:center;max-width:1240px;width:100%;margin:0 auto;position:relative;z-index:2}
.st-txt,.st-art{transition:opacity .32s ease,transform .32s ease}
.troca .st-txt,.troca .st-art{opacity:0;transform:translateY(14px)}
.eyebrow{margin:0 0 6px;display:flex;align-items:center;gap:12px;font:400 20px/1 var(--f1);letter-spacing:.24em;text-transform:uppercase;color:var(--ac2)}
.eyebrow::before{content:"";width:34px;height:3px;border-radius:3px;background:linear-gradient(90deg,var(--ac),var(--ac2))}
.st-h{margin:0;font:400 clamp(54px,11vw,120px)/.9 var(--f1);letter-spacing:.012em;text-transform:uppercase;
  background:linear-gradient(180deg,#fff 20%,#ffd7a1 100%);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:none;filter:drop-shadow(0 6px 22px #0008);overflow-wrap:anywhere}
.st-d{margin:12px 0 0;max-width:44ch;color:#e3d2bf;font-size:clamp(15px,2vw,18px);line-height:1.5;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.st-cta{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:22px}
.st-p{font:400 clamp(38px,6vw,56px)/1 var(--f1);color:var(--ac2);letter-spacing:.02em}
.btn.st-btn{flex:none;font:400 22px/1 var(--f1);letter-spacing:.1em;text-transform:uppercase;padding:17px 30px;justify-content:center;box-shadow:0 12px 34px #ff6a1355}
.st-ghost{color:#fff;font-weight:700;text-decoration:none;padding:12px 6px;border-bottom:2px solid #fff4;transition:border-color .2s}
.st-ghost:hover{border-color:var(--ac2)}
.st-art{position:relative;width:min(100%,520px);aspect-ratio:1/1;margin:0 auto;order:-1;max-width:min(78vw,340px)}
.st-art .lanche{width:100%;height:100%;display:block;overflow:visible;filter:drop-shadow(0 26px 30px #000a);animation:flutua 6s ease-in-out calc(var(--n,6)*.17s + 1s) infinite}
@keyframes flutua{50%{transform:translateY(-9px)}}
.st-art .prato{display:grid;place-items:center;width:84%;height:84%;margin:8%;border-radius:50%;font-size:clamp(90px,18vw,190px);background:radial-gradient(circle at 35% 30%,#fff,#ffffffd0 60%,#ffffff90);box-shadow:inset 0 -14px 30px #0003,0 30px 60px #000a;animation:flutua 7s ease-in-out infinite}
.st-art img{width:86%;height:86%;margin:7%;border-radius:50%;object-fit:cover;box-shadow:0 0 0 6px #ffffff14,0 0 0 7px #ffb02055,0 30px 60px #000b;animation:zoom 10s ease-out both}
@keyframes zoom{from{transform:scale(1.14) rotate(-3deg)}to{transform:none}}
.st-dots{position:absolute;left:20px;bottom:30px;z-index:3;display:flex;gap:8px}
.st-dots button{width:48px;height:5px;border:0;border-radius:9px;background:#ffffff30;overflow:hidden;padding:0}
.st-dots button:focus-visible{outline-offset:4px}
.st-dots i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--ac),var(--ac2))}
.st-dots .on i{animation:prog 7.5s linear forwards}
.stage.pausa .st-dots .on i{animation-play-state:paused}
@keyframes prog{to{width:100%}}
.stage.sem-slides .st-p,.stage.sem-slides .st-btn{display:none}

/* o lanche cai camada por camada */
.lanche .ly{animation:cai .78s cubic-bezier(.34,1.5,.55,1) calc(var(--i)*.17s + .15s) both}
@keyframes cai{0%{opacity:0;transform:translateY(-330px)}22%{opacity:1}100%{opacity:1;transform:none}}
.st-art:not(.on) .lanche .ly,.mini:not(.on) .lanche .ly{animation-play-state:paused}
.lanche .som{animation:som .6s ease both}
@keyframes som{from{opacity:0}}

/* ---------- topo, resumo e destaques ---------- */
.cinema .col-main{background:transparent;max-width:1240px;margin:0 auto;padding:0 18px 120px}
.cinema .shell{max-width:none;margin:0;padding:0}
.cinema .hero,.cinema .side{display:none}
.cinema .layout{display:block;margin:0}
.cinema .st-card{margin:-30px 0 0;padding:14px;border-radius:22px;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(12px);z-index:4}
.cinema .st-card .lg,.cinema .st-card .nm,.cinema .st-card .tg{display:none}
.cinema .meta{margin:0}
.cinema .meta li{background:var(--card)}
.cinema .meta b{font:400 20px/1.1 var(--f1);letter-spacing:.04em}
.cinema .links{margin-top:12px}
.cinema .mesa-ban{margin-top:14px}
.cinema .modo{margin:14px 0 0}
.cinema .busca{margin:16px 0 0}
.cinema .busca input{border-radius:16px;padding:15px 16px 15px 46px;background:var(--card)}
.cinema .dest{margin-top:6px}
.cinema .dest .cat{padding-left:0}
.cinema .trilho{padding:6px 2px 16px;gap:16px}
.cinema .dc{width:clamp(210px,62vw,290px);padding:0;overflow:hidden;border-radius:20px;background:linear-gradient(180deg,var(--card),var(--bg))}
.cinema .dart{position:relative;height:176px;border-radius:0;margin:0;background:radial-gradient(70% 70% at 50% 62%,#ff6a1330,transparent 72%),#130e0b}
.cinema .dart img{transition:transform .8s}.cinema .dc:hover .dart img{transform:scale(1.08)}
.cinema .dc b{font:400 22px/1.05 var(--f1);letter-spacing:.03em;text-transform:uppercase;padding:12px 14px 0;min-height:0}
.cinema .dc .p{padding:2px 14px 14px;font:400 26px var(--f1);letter-spacing:.03em}
.mini{position:absolute;inset:6% 8% 2%;display:block}
.mini .lanche{width:100%;height:100%;display:block;overflow:visible;filter:drop-shadow(0 12px 14px #0008)}
.sh-arte.mini{position:relative;inset:auto;height:230px;padding:10px 0;background:radial-gradient(60% 70% at 50% 60%,#ff6a1333,transparent 70%),#110c09}

/* ---------- cardápio ---------- */
.cinema .cat{font:400 clamp(34px,5vw,50px)/1 var(--f1);letter-spacing:.03em;text-transform:uppercase;padding:34px 0 8px;display:flex;align-items:center;gap:14px}
.cinema .cat::after{content:"";flex:1;height:3px;border-radius:3px;background:linear-gradient(90deg,var(--ac),#0000)}
.cinema .grupo{scroll-margin-top:84px}
.cinema .items{padding:10px 0 4px;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:18px}
.cinema .it{grid-template-columns:1fr;grid-template-areas:"art" "tx";gap:0;padding:0;overflow:hidden;border-radius:20px;min-height:0;background:linear-gradient(180deg,var(--card),var(--bg))}
.cinema .it:hover{border-color:color-mix(in srgb,var(--ac) 60%,var(--line));box-shadow:0 18px 40px #000a,0 0 0 1px color-mix(in srgb,var(--ac) 30%,transparent)}
.cinema .it .art{grid-area:art;width:100%;height:auto;aspect-ratio:5/4;border-radius:0;overflow:visible;background:radial-gradient(70% 70% at 50% 62%,#ff6a1330,transparent 72%),#130e0b;font-size:76px}
.cinema .it .art img{border-radius:0}
.cinema .it .tx{grid-area:tx;padding:20px 16px 16px;padding-right:72px}
.cinema .tx b{font:400 25px/1.02 var(--f1);letter-spacing:.03em;text-transform:uppercase}
.cinema .tx .d{font-size:13.5px;margin:6px 0 12px}
.cinema .tx .p{font:400 28px/1 var(--f1);letter-spacing:.03em}
.cinema .tx .p small{font:700 11px var(--f2);letter-spacing:0}
.cinema .ad{right:14px;bottom:-23px;min-width:46px;height:46px;z-index:4;font-size:24px;border:0;box-shadow:0 10px 24px #000b;background:linear-gradient(135deg,var(--ac),var(--ac2));color:var(--acink)}
.cinema .ad.on{min-width:112px}
.cinema .ad.tem{background:var(--ink);color:var(--bg)}
.cinema .bg{left:12px;top:12px;font:400 15px/1 var(--f1);letter-spacing:.1em;padding:6px 11px;z-index:3}
.cinema .esg{left:12px;bottom:auto;top:12px}
.cinema .cbar{font:400 20px var(--f1);letter-spacing:.06em;text-transform:uppercase;background:linear-gradient(135deg,var(--ac),var(--ac2));color:var(--acink);box-shadow:0 18px 44px #ff6a1344,0 14px 40px #000a}
.cinema .cbar b{background:var(--acink);color:var(--ac2);font-family:var(--f2)}
.cinema .sobre{padding:0}
.cinema .bx{background:var(--card)}

/* ---------- menu lateral / categorias ---------- */
.rail-brand{display:none}
.cinema .chips{padding:14px 16px 10px;background:linear-gradient(var(--page) 85%,#0000)}
.cinema .chip{font:400 18px/1 var(--f1);letter-spacing:.07em;text-transform:uppercase;padding:10px 16px;display:inline-flex;align-items:center;gap:8px}
.cinema .chip .ce{font-size:19px;line-height:1}
.cinema .chip.on{background:linear-gradient(135deg,var(--ac),var(--ac2));color:var(--acink);border-color:transparent}
.cinema .bar{background:color-mix(in srgb,var(--bg) 70%,transparent)}
.cinema .bar-nm{font:400 22px var(--f1);letter-spacing:.06em;text-transform:uppercase}
.mesa-pill{background:linear-gradient(135deg,var(--ac),var(--ac2));color:var(--acink);font:400 18px/1 var(--f1);letter-spacing:.08em;padding:7px 14px;border-radius:99px;white-space:nowrap}

@media(min-width:900px){
  body.cinema{--rail:180px}
  .cinema .shell{margin-left:var(--rail)}
  .cinema .chips{position:fixed;left:0;top:0;bottom:0;width:var(--rail);flex-direction:column;align-items:stretch;gap:6px;
    padding:14px 12px 20px;overflow-y:auto;background:linear-gradient(180deg,#140f0c,#0a0706);border-right:1px solid var(--line);z-index:26}
  .cinema .bar.on ~ .shell .chips{top:0}
  .rail-brand{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;padding:6px 4px 14px;margin-bottom:6px;border-bottom:1px solid var(--line)}
  .rail-brand .lg2{width:62px;height:62px;border-radius:18px;background:linear-gradient(135deg,var(--ac),var(--ac2));color:var(--acink);display:grid;place-items:center;font-size:30px;overflow:hidden;box-shadow:0 10px 24px #ff6a1344}
  .rail-brand .lg2 img{width:100%;height:100%;object-fit:cover}
  .rail-brand b{font:400 22px/1 var(--f1);letter-spacing:.08em;text-transform:uppercase}
  .cinema .chip{flex-direction:column;justify-content:center;gap:5px;border-radius:16px;padding:13px 6px;text-align:center;font-size:17px;line-height:1.05}
  .cinema .chip .ce{font-size:28px}
  .cinema .bar{left:var(--rail);transform:none}
  .cinema .bar-lg{display:none}
  .cinema .cbar:not([hidden]){display:flex!important;left:calc(50% + var(--rail)/2)}
  .stage{padding:96px 40px 80px;min-height:min(86vh,720px)}
  .stage .open{display:none}.stage .lang{top:78px;right:40px}
  .st-main{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:30px}
  .st-art{order:2;max-width:min(52vw,620px)}
  .st-dots{left:40px;bottom:38px}
  .cinema .col-main{padding:0 40px 120px}
  .cinema .st-card{margin-top:-34px}
}
@media(min-width:900px) and (max-height:620px){.stage{min-height:520px}}
@media(max-width:899px){.cinema .bar.on{transform:none}.stage .open{top:66px}.stage .lang{top:64px}}
@media(max-width:560px){
  .stage{padding:92px 18px 64px;min-height:0}
  .st-art{max-width:min(62vw,260px)}
  .stage .open{top:62px}.stage .lang{top:60px}
  .st-cta{margin-top:16px;gap:12px}
  .btn.st-btn{padding:14px 24px;font-size:20px}
  .st-h{font-size:clamp(46px,15vw,70px)}
  .cinema .items{grid-template-columns:1fr 1fr;gap:12px}
  .cinema .it .tx{padding:20px 12px 12px}
  .cinema .tx b{font-size:21px}
  .cinema .tx .d{display:none}
  .cinema .tx .p{font-size:24px}
  .cinema .ad{right:10px;bottom:-21px;min-width:42px;height:42px}
  .cinema .it .tx{padding-right:12px}
  .cinema .tx .p{padding-right:48px}
  .cinema .ad.on{min-width:100px}
}
@media(prefers-reduced-motion:reduce){.lanche .ly,.lanche .som,.st-art .lanche,.st-glow,.embers i,.st-art img,.st-art .prato{animation:none!important}.st-txt,.st-art{transition:none}}