:root{
  --tinta:#17130e; --amarelo:#ffc21a; --tomate:#d3300f; --papel:#fbf6ea; --branco:#fff; --cinza:#5d554a;
  --titulo:"Anton",Impact,sans-serif; --texto:"DM Sans",system-ui,sans-serif; --mono:"Space Mono",ui-monospace,monospace;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{overflow-x:clip}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font:400 17px/1.5 var(--texto);color:var(--tinta);background:var(--papel);padding-bottom:76px}
img{display:block;max-width:100%;height:auto}
[hidden]{display:none!important}
.wrap{width:min(1120px,100%);margin:0 auto;padding:0 20px}
.estreito{max-width:760px}
section{padding:64px 0}
h1,h2,h3{font-weight:400}
h1,h2{font-family:var(--titulo);text-transform:uppercase;line-height:1.04;letter-spacing:.005em}
h1{font-size:clamp(3.2rem,15.5vw,6.4rem)}
h2{font-size:clamp(2.2rem,9.4vw,4rem);margin-bottom:18px}
h1 em,h2 em{font-style:normal;color:var(--tomate)}
h3{font-weight:800;font-size:1.12rem;line-height:1.25}
.kicker,.tag{font:700 .8rem/1.3 var(--mono);text-transform:uppercase;letter-spacing:.04em;margin-bottom:12px}
.lead{max-width:600px;margin-bottom:26px}

.btn{display:flex;align-items:center;justify-content:center;min-height:60px;padding:14px 22px;width:100%;max-width:440px;background:var(--tomate);color:#fff;border:3px solid var(--tinta);box-shadow:5px 5px 0 var(--tinta);font:800 1.05rem/1.2 var(--texto);text-align:center;text-decoration:none;text-transform:uppercase;transition:transform .12s,box-shadow .12s}
.btn:hover{transform:translate(2px,2px);box-shadow:3px 3px 0 var(--tinta)}
.btn:focus-visible,summary:focus-visible,.trilho:focus-visible{outline:3px solid var(--tomate);outline-offset:3px}
.btn-escuro{background:var(--tinta);box-shadow:5px 5px 0 var(--tomate)}
.btn-escuro:hover{box-shadow:3px 3px 0 var(--tomate)}

.topo{background:var(--tinta);color:#fff;text-align:center;padding:9px 12px;font:400 .76rem/1.3 var(--mono)}
.topo b{color:var(--amarelo)}
.topo span::before{content:"/";margin:0 6px;opacity:.5}

.hero{background:var(--amarelo);padding:34px 0 40px}
.hero-grid{display:grid;gap:26px}
.sub{margin:16px 0 22px;font-size:1.1rem;max-width:540px}
.prova{display:flex;align-items:center;gap:12px;margin-top:24px;font-size:.92rem;line-height:1.3}
.prova img{width:112px;flex:none;mix-blend-mode:multiply}
.hero-img{width:100%;max-width:520px;margin:0 auto;mix-blend-mode:multiply}

.faixa{background:var(--tomate);color:#fff;overflow:hidden;border-block:3px solid var(--tinta)}
.faixa-in{display:flex;width:max-content;animation:corre 34s linear infinite}
.faixa span{font:400 1.2rem/1 var(--titulo);text-transform:uppercase;padding:13px 22px;white-space:nowrap}
@keyframes corre{to{transform:translateX(-50%)}}

.noite{background:var(--tinta);color:#fff}
.noite .kicker{color:var(--amarelo)}
.roteiro{list-style:none;margin:28px 0 34px;max-width:640px}
.roteiro li{display:grid;grid-template-columns:76px 1fr;gap:12px;padding:15px 0;border-top:1px solid #4a4238}
.roteiro time{font:700 1.02rem/1.5 var(--mono);color:var(--amarelo)}
.soco{font-size:1.18rem;max-width:640px}
.soco strong{color:var(--amarelo)}

.receitas{padding-bottom:48px}
.trilho{display:flex;gap:14px;overflow-x:auto;padding:6px 20px 18px;scroll-snap-type:x mandatory;scrollbar-width:thin}
.trilho img{flex:0 0 min(74vw,300px);width:min(74vw,300px);scroll-snap-align:center;border:3px solid var(--tinta);background:#fff}
@media(min-width:1160px){.trilho{justify-content:center}.trilho img{flex-basis:210px;width:210px}.prints{justify-content:flex-start}.prints img{flex-basis:300px;width:300px}}

.metodo{background:var(--amarelo);border-block:3px solid var(--tinta)}
.tres{display:grid;gap:0;margin:20px 0 32px}
.tres article{display:grid;grid-template-columns:62px 1fr;column-gap:10px;padding:18px 0;border-top:3px solid var(--tinta)}
.tres span{grid-row:span 2;font:400 3.4rem/1 var(--titulo)}
.tres p{margin-top:4px}

.bonus{background:var(--papel)}
.grade{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:26px}
.grade article{background:#fff;border:3px solid var(--tinta);padding:12px}
.grade img{width:100%;aspect-ratio:4/5;object-fit:contain;margin-bottom:10px}
.grade p{font-size:.93rem;line-height:1.35;margin-top:5px;color:var(--cinza)}
.grade .largo{grid-column:1/-1;display:grid;grid-template-columns:38% 1fr;gap:14px;align-items:center;background:var(--amarelo)}
.grade .largo img{margin:0}
.grade .largo p{color:var(--tinta)}

.depo{background:var(--tinta);color:#fff;padding-bottom:48px}
.depo .kicker{color:var(--amarelo)}
.prints{align-items:center}
.prints img{border:0;border-radius:6px}

.oferta{background:var(--tomate)}
.oferta h2{color:#fff;text-align:center}
.cupom{background:#fff;max-width:440px;margin:0 auto;padding:26px 20px 24px;font-family:var(--mono);box-shadow:8px 8px 0 var(--tinta);--d:10px;-webkit-mask:conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) bottom/calc(var(--d)*2) 51% repeat-x,linear-gradient(#000 0 0) top/100% 51% no-repeat;mask:conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) bottom/calc(var(--d)*2) 51% repeat-x,linear-gradient(#000 0 0) top/100% 51% no-repeat;padding-bottom:40px}
.cupom-marca{font:400 2.1rem/1 var(--titulo);text-align:center}
.cupom-sub{text-align:center;font-size:.76rem;margin:6px 0 14px}
.cupom ul{list-style:none;border-block:2px dashed var(--tinta);padding:8px 0}
.cupom li{display:flex;justify-content:space-between;gap:10px;padding:6px 0;font-size:.82rem;line-height:1.3}
.cupom li b{white-space:nowrap}
.de{text-align:center;margin-top:16px;font-size:.92rem;text-decoration:line-through;color:var(--cinza)}
.total{text-align:center;font:400 4rem/1.05 var(--titulo);color:var(--tomate)}
.total small{display:block;font:700 .76rem/1.5 var(--mono);color:var(--tinta)}
.conta{text-align:center;font-size:.8rem;margin:4px 0 18px}
.cupom .btn{font-family:var(--texto);max-width:none}
.selos{text-align:center;font-size:.74rem;line-height:1.5;margin-top:16px}
.fecho{color:#fff;text-align:center;margin-top:30px;font:400 1.6rem/1.2 var(--titulo);text-transform:uppercase}

.garantia{background:var(--papel)}
.garantia .wrap{display:grid;gap:20px;align-items:center}
.selo30{width:124px;height:124px;display:grid;place-content:center;text-align:center;border:3px solid var(--tinta);background:var(--amarelo);font:700 .8rem/1 var(--mono);text-transform:uppercase;transform:rotate(-4deg)}
.selo30 b{display:block;font:400 3.5rem/1 var(--titulo)}

.chef{background:#fff;border-block:3px solid var(--tinta)}
.chef .wrap{display:grid;gap:22px;align-items:center}
.chef img{width:100%;max-width:340px;border:3px solid var(--tinta)}
.chef p+p{margin-top:12px}

summary{cursor:pointer;font-weight:800;padding:16px 30px 16px 0;position:relative;list-style:none}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";position:absolute;right:2px;top:9px;font:400 1.7rem/1.3 var(--titulo);color:var(--tomate)}
details[open] summary::after{content:"-"}
details{border-top:2px solid var(--tinta)}
details:last-child{border-bottom:2px solid var(--tinta)}
details p{padding:0 0 16px}

.final{background:var(--amarelo);border-top:3px solid var(--tinta);text-align:center}
.final p{max-width:540px;margin:0 auto 24px;font-size:1.1rem}
.final .btn{margin:0 auto}

footer{background:var(--tinta);color:#cfc8bb;padding:30px 20px;text-align:center;font-size:.8rem}
footer p+p{margin-top:8px}

.fixo{position:fixed;inset:auto 0 0 0;z-index:20;display:flex;align-items:center;gap:12px;padding:9px 14px calc(9px + env(safe-area-inset-bottom));background:#fff;border-top:3px solid var(--tinta);font-size:.74rem;line-height:1.2;transition:transform .2s}
.fixo.some{transform:translateY(110%)}
.fixo p{flex:none}
.fixo b{display:block;font:400 1.35rem/1.1 var(--titulo)}
.fixo .btn{min-height:48px;padding:8px 12px;box-shadow:none;font-size:.92rem;border-width:2px}

@media(min-width:860px){
  body{padding-bottom:0}
  section{padding:96px 0}
  .fixo{display:none}
  .hero{padding:56px 0 64px}
  .hero-grid{grid-template-columns:1.08fr .92fr;align-items:center}
  .tres{grid-template-columns:repeat(3,1fr);gap:28px}
  .grade{grid-template-columns:repeat(3,1fr)}
  .garantia .wrap{grid-template-columns:auto 1fr;gap:48px}
  .chef .wrap{grid-template-columns:340px 1fr;gap:56px}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}
@media(min-width:860px){.grade .largo{grid-template-columns:200px 1fr;gap:28px}}