/* =============== Lio's 3D House — estilo quadrinho =============== */
:root{
  --ink:#111; --paper:#FFF8E7; --white:#fff;
  --yellow:#FFD60A; --red:#E63946; --cyan:#00B4D8; --pink:#FF5DA2; --green:#2ECC71;
  --line:4px; --shadow:6px 6px 0 var(--ink); --shadow-sm:3px 3px 0 var(--ink);
  --radius:14px; --title:"Bangers", Impact, system-ui, sans-serif;
  --body:"Nunito", system-ui, sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:80px}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--body);font-weight:700;line-height:1.45;overflow-x:hidden}
img,svg{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3{font-family:var(--title);font-weight:400;letter-spacing:1px;margin:0;line-height:1}
button{font:inherit;cursor:pointer}

/* Retícula (pontinhos de HQ) */
.halftone{background-image:radial-gradient(rgba(0,0,0,.13) 1.6px, transparent 1.8px);background-size:14px 14px}
.section--dots{background-image:radial-gradient(rgba(0,0,0,.08) 1.4px, transparent 1.6px);background-size:12px 12px}

/* ---------- Ticker ---------- */
.ticker{background:var(--ink);color:var(--yellow);overflow:hidden;border-bottom:var(--line) solid var(--ink);font-family:var(--title);font-size:18px;letter-spacing:1px}
.ticker__track{display:flex;gap:48px;width:max-content;padding:7px 0;animation:ticker 28s linear infinite}
.ticker__track span{white-space:nowrap}
@keyframes ticker{to{transform:translateX(-50%)}}

/* ---------- Topbar ---------- */
.topbar{position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:16px;padding:10px 16px;background:var(--white);border-bottom:var(--line) solid var(--ink)}
.logo{display:flex;align-items:center;gap:4px;text-decoration:none;font-family:var(--title);font-size:30px;transform:rotate(-3deg)}
.logo__burst{background:var(--yellow);border:3px solid var(--ink);padding:0 8px;box-shadow:var(--shadow-sm);-webkit-text-stroke:1px var(--ink);color:var(--red)}
.logo__3d{background:var(--cyan);color:var(--white);border:3px solid var(--ink);padding:0 6px;box-shadow:var(--shadow-sm);-webkit-text-stroke:1px var(--ink)}
.logo:hover{animation:wobble .5s}
.nav{display:flex;gap:4px;margin-left:auto}
.nav a{text-decoration:none;font-weight:900;padding:6px 12px;border-radius:999px;border:3px solid transparent;transition:transform .15s}
.nav a:hover{border-color:var(--ink);background:var(--yellow);transform:rotate(-2deg)}
.cart-btn{position:relative;border:3px solid var(--ink);background:var(--red);color:var(--white);width:48px;height:48px;border-radius:12px;display:grid;place-items:center;box-shadow:var(--shadow-sm);transition:transform .1s, box-shadow .1s}
.cart-btn:active{transform:translate(3px,3px);box-shadow:none}
.cart-btn__count{position:absolute;top:-10px;right:-10px;background:var(--yellow);color:var(--ink);border:3px solid var(--ink);border-radius:999px;min-width:26px;height:26px;font-size:13px;display:grid;place-items:center;font-weight:900}
.cart-btn.shake{animation:shake .5s}
.menu-btn{display:none;border:3px solid var(--ink);background:var(--yellow);width:48px;height:48px;border-radius:12px;padding:10px;box-shadow:var(--shadow-sm)}
.menu-btn span{display:block;height:3px;background:var(--ink);margin:4px 0;border-radius:2px}

/* ---------- Botões ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;text-decoration:none;font-family:var(--title);font-size:22px;letter-spacing:1px;padding:10px 22px;border:var(--line) solid var(--ink);border-radius:12px;box-shadow:var(--shadow);transition:transform .12s, box-shadow .12s;background:var(--white);color:var(--ink)}
.btn:hover{transform:translate(-2px,-2px) rotate(-1deg);box-shadow:8px 8px 0 var(--ink)}
.btn:active{transform:translate(6px,6px);box-shadow:0 0 0 var(--ink)}
.btn--red{background:var(--red);color:var(--white);-webkit-text-stroke:.5px var(--ink)}
.btn--white{background:var(--white)}
.btn--yellow{background:var(--yellow)}
.btn--block{width:100%}
.btn--sm{font-size:17px;padding:6px 14px;box-shadow:var(--shadow-sm)}
.icon-btn{border:3px solid var(--ink);background:var(--white);width:40px;height:40px;border-radius:10px;font-weight:900;box-shadow:var(--shadow-sm)}

/* ---------- Destaques de texto ---------- */
.hl{display:inline-block;padding:0 8px;border:var(--line) solid var(--ink);box-shadow:var(--shadow-sm);transform:rotate(-2deg)}
.hl--yellow{background:var(--yellow)} .hl--red{background:var(--red);color:var(--white)}
.hl--cyan{background:var(--cyan);color:var(--white)} .hl--white{background:var(--white)}

/* Balão de fala */
.bubble{position:relative;display:inline-block;background:var(--white);border:var(--line) solid var(--ink);border-radius:20px;padding:8px 14px;font-weight:900;box-shadow:var(--shadow-sm)}
.bubble::after{content:"";position:absolute;left:24px;bottom:-16px;border:8px solid transparent;border-top:12px solid var(--ink);border-left:8px solid var(--ink);transform:skewX(-10deg)}
.bubble--small{font-size:15px;margin-bottom:18px;transform:rotate(-2deg)}

/* Explosões de HQ */
.burst{display:inline-grid;place-items:center;font-family:var(--title);letter-spacing:1px;color:var(--ink);background:var(--yellow);border:var(--line) solid var(--ink);clip-path:polygon(50% 0,61% 22%,85% 8%,78% 33%,100% 38%,80% 55%,95% 78%,68% 72%,60% 100%,47% 77%,25% 95%,27% 68%,0 70%,18% 50%,3% 28%,28% 30%,22% 6%,42% 22%);filter:drop-shadow(4px 4px 0 var(--ink))}
.burst--small{position:absolute;top:-28px;right:-14px;width:96px;height:96px;font-size:20px;animation:pulse 2s ease-in-out infinite}
.burst--cyan{background:var(--cyan);color:var(--white)} .burst--red{background:var(--red);color:var(--white)}
.burst--big{width:150px;height:150px;font-size:32px;margin:-80px auto 6px;animation:spinpop .8s cubic-bezier(.2,1.6,.4,1) both}

/* Tags */
.tag{display:inline-block;font-family:var(--title);letter-spacing:1px;font-size:17px;padding:2px 10px;border:3px solid var(--ink);border-radius:8px;background:var(--yellow);box-shadow:var(--shadow-sm)}
.tag--red{background:var(--red);color:var(--white)} .tag--cyan{background:var(--cyan);color:var(--white)}
.tag--green{background:var(--green)} .tag--pink{background:var(--pink);color:var(--white)}
.tag--ink{background:var(--ink);color:var(--yellow)}

/* ---------- Hero ---------- */
.hero{display:grid;grid-template-columns:1.1fr 1fr;gap:24px;align-items:center;padding:48px 32px 56px;border-bottom:var(--line) solid var(--ink);background-color:var(--paper);overflow:hidden}
.hero__title{font-size:clamp(48px,7vw,92px);-webkit-text-stroke:1px var(--ink);margin-bottom:18px}
.hero__title .hl{margin:6px 0}
.hero__sub{font-size:18px;max-width:520px;margin:0 0 24px}
.hero__cta{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:22px}
.hero__perks{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:10px}
.hero__perks li{background:var(--white);border:3px solid var(--ink);border-radius:999px;padding:4px 12px;font-size:14px}
.hero__art{position:relative;min-height:380px;display:grid;place-items:center}
.burst--pow{position:absolute;top:2%;left:4%;width:120px;height:120px;font-size:34px;color:var(--white);background:var(--red);animation:popin 3.6s ease-in-out infinite}
.burst--zap{position:absolute;bottom:6%;right:2%;width:110px;height:110px;font-size:30px;background:var(--cyan);color:var(--white);animation:popin 3.6s 1.8s ease-in-out infinite}
.bubble--hero{position:absolute;top:6%;right:0;font-size:15px;text-align:center;transform:rotate(4deg);animation:float 4s ease-in-out infinite}

/* Impressora animada */
.printer{position:relative;width:min(300px,78vw);aspect-ratio:1/1.08}
.printer__frame{position:absolute;inset:0;border:var(--line) solid var(--ink);border-radius:18px;background:linear-gradient(#fff,#f1f1f1);box-shadow:var(--shadow)}
.printer__frame::before,.printer__frame::after{content:"";position:absolute;top:12px;bottom:12px;width:10px;background:var(--ink);border-radius:5px}
.printer__frame::before{left:12px}.printer__frame::after{right:12px}
.printer__bed{position:absolute;left:12%;right:12%;bottom:8%;height:14px;background:var(--ink);border-radius:4px}
.printer__piece{position:absolute;left:22%;right:22%;bottom:calc(8% + 14px);top:16%}
.piece-svg{width:100%;height:100%;clip-path:inset(100% 0 0 0);animation:print 6s steps(28,end) infinite}
.printer__layers{position:absolute;inset:0;background:repeating-linear-gradient(transparent 0 5px, rgba(0,0,0,.12) 5px 6px);clip-path:inset(100% 0 0 0);animation:print 6s steps(28,end) infinite;pointer-events:none}
.printer__gantry{position:absolute;left:12px;right:12px;height:12px;background:var(--ink);border-radius:6px;bottom:calc(8% + 14px);animation:gantry 6s steps(28,end) infinite;z-index:2}
.printer__nozzle{position:absolute;top:-6px;width:34px;height:30px;background:var(--red);border:3px solid var(--ink);border-radius:6px 6px 12px 12px;animation:nozzle .45s ease-in-out infinite alternate}
.printer__nozzle::after{content:"";position:absolute;left:50%;bottom:-10px;width:10px;height:10px;background:var(--yellow);border:3px solid var(--ink);transform:translateX(-50%) rotate(45deg)}
@keyframes print{0%{clip-path:inset(100% 0 0 0)}80%,100%{clip-path:inset(0 0 0 0)}}
@keyframes gantry{0%{bottom:calc(8% + 14px)}80%{bottom:84%}81%,100%{bottom:88%;opacity:.0}}
@keyframes nozzle{from{left:18%}to{left:calc(82% - 34px)}}

/* ---------- Trust ---------- */
.trust{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-bottom:var(--line) solid var(--ink);background:var(--white)}
.trust__item{display:flex;gap:10px;align-items:center;padding:16px;border-right:3px dashed var(--ink)}
.trust__item:last-child{border-right:0}
.trust__item b{display:block;font-weight:900}
.trust__item small{font-weight:700;opacity:.75}
.trust__ico{font-size:28px;width:48px;height:48px;display:grid;place-items:center;background:var(--yellow);border:3px solid var(--ink);border-radius:50%;flex:none}

/* ---------- Seções ---------- */
.section{padding:56px 24px;border-bottom:var(--line) solid var(--ink)}
.section--yellow{background-color:var(--yellow)}
.section__title{font-size:clamp(38px,5.5vw,64px);text-align:center;margin-bottom:12px;-webkit-text-stroke:.5px var(--ink)}
.section__sub{text-align:center;max-width:560px;margin:0 auto 28px}

/* ---------- Oferta do dia ---------- */
.deal{padding:40px 24px;border-bottom:var(--line) solid var(--ink);background:var(--red);background-image:repeating-conic-gradient(from 0deg at 50% 50%, rgba(255,255,255,.09) 0 10deg, transparent 10deg 20deg)}
.deal__panel{max-width:960px;margin:0 auto;background:var(--white);border:var(--line) solid var(--ink);border-radius:var(--radius);box-shadow:10px 10px 0 var(--ink);padding:20px}
.deal__head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;margin-bottom:16px}
.countdown{display:flex;gap:8px}
.countdown div{background:var(--ink);color:var(--yellow);border-radius:10px;padding:4px 10px;text-align:center;min-width:56px}
.countdown b{font-family:var(--title);font-size:30px;display:block;line-height:1}
.countdown small{font-size:11px;color:#fff}
.deal__body{display:grid;grid-template-columns:200px 1fr;gap:20px;align-items:center}
.deal__art{aspect-ratio:1;border:var(--line) solid var(--ink);border-radius:var(--radius);display:grid;place-items:center;font-size:96px;box-shadow:var(--shadow-sm);animation:float 3.5s ease-in-out infinite}
.deal__body h3{font-size:38px;margin:6px 0}
.deal__body .btn{margin-top:12px}

/* ---------- Categorias ---------- */
.cats{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:18px;max-width:1100px;margin:28px auto 0}
.cat{position:relative;text-align:left;border:var(--line) solid var(--ink);border-radius:var(--radius);padding:16px;background:var(--c);box-shadow:var(--shadow);transition:transform .18s, box-shadow .18s;overflow:hidden;color:var(--ink)}
.cat:nth-child(odd){transform:rotate(-1.2deg)} .cat:nth-child(even){transform:rotate(1.2deg)}
.cat::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(0,0,0,.18) 1.5px, transparent 1.7px);background-size:10px 10px;opacity:.5}
.cat:hover{transform:rotate(0) scale(1.05);box-shadow:10px 10px 0 var(--ink);z-index:1}
.cat > *{position:relative}
.cat__emoji{font-size:44px;display:block;margin-bottom:8px;transition:transform .3s}
.cat:hover .cat__emoji{transform:scale(1.25) rotate(-12deg)}
.cat__name{font-family:var(--title);font-size:26px;letter-spacing:1px;display:block;background:var(--white);border:3px solid var(--ink);border-radius:8px;padding:0 8px;width:max-content;max-width:100%}
.cat__desc{display:block;font-size:13px;margin-top:8px;background:rgba(255,255,255,.85);border-radius:6px;padding:2px 6px}
.cat__count{position:absolute;top:10px;right:10px;background:var(--ink);color:var(--white);border-radius:999px;font-size:12px;padding:2px 8px}

/* ---------- Toolbar / filtros ---------- */
.toolbar{max-width:1100px;margin:24px auto 8px;display:grid;gap:14px}
.chips{display:flex;gap:8px;overflow-x:auto;padding:4px 4px 10px;scrollbar-width:thin}
.chip{flex:none;border:3px solid var(--ink);background:var(--white);border-radius:999px;padding:6px 14px;font-weight:900;box-shadow:var(--shadow-sm);transition:transform .12s}
.chip:hover{transform:translateY(-2px)}
.chip[aria-selected="true"]{background:var(--ink);color:var(--yellow)}
.toolbar__row{display:grid;grid-template-columns:1fr 220px;gap:12px}
.input{width:100%;font:inherit;font-weight:700;border:3px solid var(--ink);border-radius:12px;padding:10px 14px;background:var(--white);color:var(--ink);box-shadow:var(--shadow-sm)}
.input:focus{outline:3px solid var(--cyan);outline-offset:2px}
.result-count{max-width:1100px;margin:6px auto 16px;font-size:14px;opacity:.75}

/* ---------- Cards de produto ---------- */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:22px;max-width:1100px;margin:0 auto}
.card{position:relative;display:flex;flex-direction:column;background:var(--white);border:var(--line) solid var(--ink);border-radius:var(--radius);box-shadow:var(--shadow);transform-style:preserve-3d;transition:box-shadow .2s;will-change:transform;animation:cardin .5s cubic-bezier(.2,1.4,.4,1) both;animation-delay:calc(var(--i,0) * 45ms)}
.card:hover{box-shadow:10px 10px 0 var(--ink)}
.card__art{position:relative;aspect-ratio:1;margin:10px;border:3px solid var(--ink);border-radius:10px;background:var(--c);display:grid;place-items:center;overflow:hidden}
.card__art::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(0,0,0,.2) 1.5px, transparent 1.7px);background-size:10px 10px;opacity:.45}
.card__art img{position:relative;width:100%;height:100%;object-fit:cover}
.card__emoji{position:relative;font-size:84px;filter:drop-shadow(4px 4px 0 rgba(0,0,0,.35));transition:transform .35s cubic-bezier(.2,1.6,.4,1)}
.card:hover .card__emoji{transform:scale(1.15) rotate(-8deg) translateZ(30px)}
.card__tags{position:absolute;top:18px;left:18px;display:flex;flex-direction:column;gap:6px;align-items:flex-start;z-index:2}
.card__off{position:absolute;top:2px;right:2px;width:74px;height:74px;font-size:22px;background:var(--red);color:var(--white);z-index:2;transform:rotate(12deg)}
.card__body{padding:4px 14px 14px;display:flex;flex-direction:column;flex:1}
.card__name{font-size:17px;font-weight:900;margin:2px 0}
.card__info{font-size:13px;opacity:.7;margin:0 0 6px}
.card__stock{font-size:13px;color:var(--red);font-weight:900;margin-bottom:4px}
.card__stock .bar{display:block;height:8px;border:2px solid var(--ink);border-radius:999px;margin-top:3px;background:#fff;overflow:hidden}
.card__stock .bar i{display:block;height:100%;background:var(--red)}
.price{margin-top:auto}
.price__old{font-size:14px;text-decoration:line-through;opacity:.6}
.price__now{font-family:var(--title);font-size:34px;letter-spacing:1px;line-height:1;color:var(--ink)}
.price__now small{font-size:18px}
.price__pix{display:inline-block;font-size:13px;background:var(--green);border:2px solid var(--ink);border-radius:6px;padding:0 6px;margin:4px 0 2px}
.price__inst{font-size:12px;opacity:.75;display:block}
.card .btn{margin-top:12px;font-size:20px;padding:8px 14px}
.empty{grid-column:1/-1;text-align:center;padding:40px 0}

/* ---------- Tamanhos (chamariz) ---------- */
.sizes{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;max-width:900px;margin:0 auto;align-items:end}
.size{position:relative;background:var(--white);border:var(--line) solid var(--ink);border-radius:var(--radius);padding:20px;text-align:center;box-shadow:var(--shadow)}
.size--best{background:var(--yellow);transform:scale(1.06);box-shadow:10px 10px 0 var(--ink)}
.size--best .tag{position:absolute;top:-16px;left:50%;transform:translateX(-50%) rotate(-3deg);white-space:nowrap}
.size h3{font-size:32px}
.size__h{font-size:14px;opacity:.75}
.size__fig{font-size:var(--fs);line-height:1.1;margin:10px 0}
.size__price{font-family:var(--title);font-size:36px;margin:6px 0}
.size ul{list-style:none;padding:0;margin:0 0 14px;font-size:14px}
.size li::before{content:"✔ ";color:var(--green);-webkit-text-stroke:.5px var(--ink)}
.size__note{font-size:12px;margin-top:-6px;margin-bottom:10px}

/* ---------- Combos ---------- */
.combos{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;max-width:1100px;margin:36px auto 0}
.combo{position:relative;background:var(--white);border:var(--line) solid var(--ink);border-radius:var(--radius);padding:24px 20px;box-shadow:var(--shadow)}
.combo h3{font-size:28px;margin-bottom:8px;padding-right:56px}
.combo p{margin:0 0 16px}
.coupon{font-family:var(--title);letter-spacing:2px;background:var(--yellow);border:3px dashed var(--ink);border-radius:8px;padding:2px 8px}
.coupon--big{font-size:34px;padding:8px 22px;display:block;margin:10px auto 4px;cursor:copy}

/* ---------- Encomenda ---------- */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;max-width:1000px;margin:30px auto}
.step{position:relative;background:var(--white);border:var(--line) solid var(--ink);border-radius:var(--radius);padding:30px 18px 18px;box-shadow:var(--shadow)}
.step__n{position:absolute;top:-22px;left:16px;width:46px;height:46px;display:grid;place-items:center;font-family:var(--title);font-size:28px;background:var(--cyan);color:var(--white);border:3px solid var(--ink);border-radius:50%;box-shadow:var(--shadow-sm)}
.step h3{font-size:26px;margin-bottom:6px} .step p{margin:0;font-size:15px}
.order-form{max-width:700px;margin:0 auto;display:grid;gap:14px;background:var(--white);border:var(--line) solid var(--ink);border-radius:var(--radius);padding:20px;box-shadow:var(--shadow)}
.order-form label{display:grid;gap:6px;font-weight:900}
.order-form__row{display:grid;grid-template-columns:1fr 1fr;gap:14px}

/* ---------- FAQ ---------- */
.faq{max-width:760px;margin:28px auto 0;display:grid;gap:12px}
.faq details{background:var(--white);border:3px solid var(--ink);border-radius:12px;box-shadow:var(--shadow-sm);padding:4px 16px}
.faq summary{cursor:pointer;font-weight:900;padding:10px 0;list-style:none;display:flex;justify-content:space-between;gap:12px}
.faq summary::after{content:"+";font-family:var(--title);font-size:26px;line-height:.8;transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq p{margin:0 0 12px}

/* ---------- Footer ---------- */
.footer{background:var(--ink);color:var(--white);text-align:center;padding:40px 16px}
.logo--footer{justify-content:center;margin-bottom:12px}
.footer__small{opacity:.6;font-size:13px}

/* ---------- Carrinho ---------- */
.overlay{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:90;animation:fade .2s}
.cart{position:fixed;top:0;right:0;bottom:0;width:min(420px,100vw);background:var(--paper);border-left:var(--line) solid var(--ink);z-index:100;display:flex;flex-direction:column;transform:translateX(105%);transition:transform .35s cubic-bezier(.2,1.2,.4,1)}
.cart.open{transform:none}
.cart__head{display:flex;justify-content:space-between;align-items:center;padding:16px;border-bottom:var(--line) solid var(--ink);background:var(--yellow)}
.cart__head h2{font-size:32px}
.cart__progress{padding:12px 16px;border-bottom:3px dashed var(--ink);font-size:14px}
.cart__progress .bar{height:14px;border:3px solid var(--ink);border-radius:999px;background:#fff;margin-top:6px;overflow:hidden}
.cart__progress .bar i{display:block;height:100%;background:repeating-linear-gradient(45deg,var(--green) 0 10px,#27b863 10px 20px);transition:width .5s cubic-bezier(.2,1.2,.4,1)}
.cart__list{list-style:none;margin:0;padding:12px 16px;overflow-y:auto;flex:1;display:grid;gap:10px;align-content:start}
.ci{display:grid;grid-template-columns:52px 1fr auto;gap:10px;align-items:center;background:var(--white);border:3px solid var(--ink);border-radius:12px;padding:8px;animation:cardin .35s both}
.ci__art{width:52px;height:52px;border:3px solid var(--ink);border-radius:8px;display:grid;place-items:center;font-size:28px;background:var(--c)}
.ci__name{font-weight:900;font-size:14px;line-height:1.2}
.ci__price{font-size:13px}
.ci__free{font-size:12px;color:var(--green);font-weight:900;-webkit-text-stroke:.2px var(--ink)}
.qty{display:flex;align-items:center;gap:4px}
.qty button{width:28px;height:28px;border:2px solid var(--ink);background:var(--white);border-radius:8px;font-weight:900}
.qty span{min-width:20px;text-align:center}
.cart__empty{text-align:center;padding:40px 0}
.cart__foot{border-top:var(--line) solid var(--ink);padding:14px 16px;background:var(--white);display:grid;gap:10px}
.coupon-row{display:grid;grid-template-columns:1fr auto;gap:8px}
.totals{display:grid;gap:4px;font-size:14px}
.totals div{display:flex;justify-content:space-between}
.totals .total{font-family:var(--title);font-size:28px;letter-spacing:1px}
.totals .pix{color:#118a43;font-weight:900}

/* ---------- Modal ---------- */
.modal{position:fixed;inset:0;z-index:120;background:rgba(0,0,0,.55);display:grid;place-items:center;padding:16px;animation:fade .2s}
.modal[hidden],.overlay[hidden]{display:none}
.modal__box{position:relative;background:var(--white);border:var(--line) solid var(--ink);border-radius:var(--radius);box-shadow:10px 10px 0 var(--ink);padding:24px;max-width:380px;width:100%;text-align:center;margin-top:60px;animation:slam .5s cubic-bezier(.2,1.6,.4,1) both}
.modal__box h2{font-size:34px}
.modal__close{position:absolute;top:10px;right:10px}

/* ---------- Toast e efeitos ---------- */
.toast{position:fixed;left:50%;bottom:20px;transform:translate(-50%,150%);background:var(--ink);color:var(--yellow);border:3px solid var(--ink);border-radius:12px;padding:10px 18px;font-weight:900;z-index:130;transition:transform .3s cubic-bezier(.2,1.4,.4,1);max-width:calc(100vw - 32px);text-align:center}
.toast.show{transform:translate(-50%,0)}
.fx{position:fixed;z-index:140;pointer-events:none;font-family:var(--title);font-size:30px;width:90px;height:90px;transform:translate(-50%,-50%);animation:fx .8s cubic-bezier(.2,1.6,.4,1) forwards}

/* ---------- Revelar ao rolar ---------- */
[data-reveal]{opacity:0}
[data-reveal].in{opacity:1}
[data-reveal="slam"].in{animation:slam .6s cubic-bezier(.2,1.6,.4,1) both}
[data-reveal="pop"].in{animation:pop .5s cubic-bezier(.2,1.6,.4,1) both;animation-delay:calc(var(--i,0) * 90ms)}
[data-reveal="slide"].in{animation:slide .6s ease-out both}

/* ---------- Keyframes ---------- */
@keyframes slam{0%{opacity:0;transform:scale(2.2) rotate(-6deg)}60%{opacity:1;transform:scale(.94) rotate(1deg)}100%{transform:scale(1) rotate(0)}}
@keyframes pop{0%{opacity:0;transform:scale(.4) rotate(-8deg)}100%{opacity:1;transform:scale(1)}}
@keyframes slide{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:none}}
@keyframes cardin{from{opacity:0;transform:translateY(24px) scale(.92) rotate(-2deg)}to{opacity:1;transform:none}}
@keyframes popin{0%,100%{transform:scale(1) rotate(-8deg)}10%{transform:scale(1.25) rotate(4deg)}20%{transform:scale(1) rotate(-8deg)}}
@keyframes pulse{0%,100%{transform:scale(1) rotate(8deg)}50%{transform:scale(1.12) rotate(-4deg)}}
@keyframes float{0%,100%{transform:translateY(0) rotate(3deg)}50%{transform:translateY(-10px) rotate(-2deg)}}
@keyframes wobble{0%,100%{transform:rotate(-3deg)}25%{transform:rotate(4deg) scale(1.06)}75%{transform:rotate(-6deg)}}
@keyframes shake{0%,100%{transform:none}20%{transform:rotate(-14deg) scale(1.15)}40%{transform:rotate(12deg)}60%{transform:rotate(-8deg)}80%{transform:rotate(5deg)}}
@keyframes spinpop{from{transform:scale(0) rotate(-180deg)}to{transform:scale(1) rotate(-6deg)}}
@keyframes fx{0%{opacity:0;transform:translate(-50%,-50%) scale(.2) rotate(-30deg)}40%{opacity:1;transform:translate(-50%,-90%) scale(1.15) rotate(6deg)}100%{opacity:0;transform:translate(-50%,-170%) scale(.9) rotate(-4deg)}}
@keyframes fade{from{opacity:0}}

/* ---------- Responsivo ---------- */
@media (max-width:900px){
  .hero{grid-template-columns:1fr;padding:32px 16px 40px;text-align:left}
  .hero__art{min-height:330px}
  .trust{grid-template-columns:1fr 1fr}
  .trust__item:nth-child(2){border-right:0}
  .trust__item:nth-child(-n+2){border-bottom:3px dashed var(--ink)}
  .combos,.steps{grid-template-columns:1fr}
  .combos{gap:40px}
  .sizes{grid-template-columns:1fr;gap:28px}
  .size--best{transform:none;order:-1}
  .nav{position:fixed;top:72px;left:0;right:0;flex-direction:column;background:var(--white);border-bottom:var(--line) solid var(--ink);padding:12px 16px;transform:translateY(-140%);transition:transform .3s;margin:0;z-index:40}
  .nav.open{transform:none}
  .menu-btn{display:block}
  .cart-btn{margin-left:auto}
}
@media (max-width:600px){
  .section{padding:44px 16px}
  .deal{padding:28px 16px}
  .deal__body{grid-template-columns:1fr}
  .deal__art{max-width:180px;margin:0 auto;font-size:80px}
  .toolbar__row{grid-template-columns:1fr}
  .order-form__row{grid-template-columns:1fr}
  .grid{grid-template-columns:1fr 1fr;gap:14px}
  .card__emoji{font-size:58px}
  .card__body{padding:2px 10px 10px}
  .card__name{font-size:15px}
  .price__now{font-size:28px}
  .card .btn{font-size:17px;padding:6px 8px}
  .card__off{width:60px;height:60px;font-size:17px}
  .card__tags{top:14px;left:14px}
  .card__tags .tag{font-size:13px;padding:1px 6px}
  .cats{grid-template-columns:1fr 1fr;gap:14px}
  .cat__name{font-size:21px}
  .logo{font-size:24px}
  .trust__item{padding:12px 10px;font-size:14px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  [data-reveal]{opacity:1}
  .piece-svg,.printer__layers{clip-path:none}
}

/* Depois da animação de entrada, libera o transform original (hover/rotação) */
[data-reveal].done{animation:none!important;opacity:1}
.btn[disabled]{opacity:.5;pointer-events:none}
.deal__art img{width:100%;height:100%;object-fit:cover;border-radius:10px}

/* Ajustes de leitura das explosões e nomes longos */
.burst--small{width:118px;height:118px;font-size:17px;top:-38px;right:-22px;line-height:1;text-align:center;padding:0 14px}
.card__off{width:86px;height:86px;font-size:19px;top:-6px;right:-6px}
.cat__name{font-size:22px;overflow-wrap:anywhere;width:auto;display:inline-block}
@media (max-width:600px){
  .card__off{width:68px;height:68px;font-size:16px}
  .cat__name{font-size:19px}
  .burst--small{width:104px;height:104px;font-size:16px;right:-8px}
}
/* Selo de desconto dentro da arte (não briga com as tags) */
.card__art{overflow:visible}
.card__art::before{border-radius:8px}
.card__art img{border-radius:8px}
.card__art .card__off{position:absolute;top:-16px;right:-16px}
@media (max-width:600px){
  .card__art .card__off{top:auto;bottom:-12px;right:-10px}
  .cat__name{font-size:17px;overflow-wrap:normal}
}

/* ===== Checkout: frete, pagamento, WhatsApp (2026-11-09) ===== */
.cart__foot{max-height:62vh;overflow-y:auto}
.ship{display:grid;gap:8px}
.ship[hidden]{display:none}
.ship__opts{display:grid;gap:6px}
.ship__where{font-size:13px;font-weight:800}
.ship__hint{font-size:13px;opacity:.8}
.ship__err{font-size:13px;color:var(--red);font-weight:900}
.ship__opt,.pay__opt{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;border:3px solid var(--ink);border-radius:12px;padding:8px 10px;background:var(--white);cursor:pointer;font-size:14px}
.ship__opt:has(input:checked),.pay__opt:has(input:checked){background:var(--yellow);box-shadow:var(--shadow-sm)}
.ship__opt input,.pay__opt input{accent-color:var(--red);width:18px;height:18px;margin:0}
.ship__opt span,.pay__opt span{display:grid;line-height:1.2}
.ship__opt small,.pay__opt small{font-size:12px;opacity:.8}
.ship__opt s{opacity:.6;font-weight:700}
.link-wa{display:block;text-align:center;font-weight:800;font-size:14px;color:var(--ink);background:none;border:0;cursor:pointer;text-decoration:underline;font-family:inherit;padding:4px;width:100%}
.link-wa[hidden]{display:none}
.modal__box--wide{max-width:560px;text-align:left;max-height:calc(100vh - 32px);overflow-y:auto;margin-top:0}
.modal__box--wide h2{padding-right:48px}
.ck{display:grid;gap:14px;margin-top:8px}
.ck fieldset{border:3px solid var(--ink);border-radius:12px;padding:10px 12px 12px;margin:0;display:grid;gap:10px}
.ck legend{font-family:var(--title);font-size:20px;letter-spacing:1px;padding:0 6px}
.ck label{display:grid;gap:4px;font-size:13px;font-weight:800}
.ck .input{padding:8px 12px}
.ck__row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.ck__row--cep{grid-template-columns:130px 1fr 64px}
.ck__row--num{grid-template-columns:110px 1fr}
.pay{display:grid;gap:8px}
.ck__error{margin:0;background:#ffe3e5;border:3px solid var(--red);border-radius:12px;padding:10px;font-weight:800;font-size:14px}
.ck__error[hidden]{display:none}
.ck__error a{color:var(--ink)}
.ck__safe{margin:0;font-size:12px;text-align:center;opacity:.85}
#resultBody{display:grid;gap:10px;justify-items:center}
#resultBody p{margin:0}
.ci__art img{width:100%;height:100%;object-fit:cover;border-radius:5px}
.wa-float{position:fixed;right:16px;bottom:16px;z-index:90;width:58px;height:58px;border-radius:50%;background:#25D366;color:#fff;border:3px solid var(--ink);box-shadow:var(--shadow-sm);display:grid;place-items:center;transition:transform .15s}
.wa-float:hover{transform:scale(1.08) rotate(-6deg)}
.footer__links a{color:inherit;font-weight:900}
@media (max-width:480px){
  .ck__row{grid-template-columns:1fr}
  .ck__row--cep{grid-template-columns:1fr 64px}
  .ck__row--cep label:first-child{grid-column:1 / -1}
  .ck__row--num{grid-template-columns:100px 1fr}
  .modal__box--wide{padding:18px 14px}
}