/* =================== animações e componentes extras =================== */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); }
.reveal.in { opacity: 1; transform: none; }
.pop-in { animation: popIn .5s cubic-bezier(.2,.8,.2,1) both; }
@keyframes popIn { from { opacity: 0; transform: translateY(16px) scale(.97); } to { opacity: 1; transform: none; } }

/* header compacto ao rolar */
.header-in, .logo img { transition: height .25s ease; }
body.scrolled .header-in { height: 64px; }
body.scrolled .logo img { height: 44px; }
body.lock { overflow: hidden; }

/* badges */
.badge.bump { animation: bump .5s cubic-bezier(.3,1.6,.5,1); }
@keyframes bump { 0% { transform: scale(1); } 40% { transform: scale(1.6); } 100% { transform: scale(1); } }
.flyer { position: fixed; z-index: 200; object-fit: contain; background: #fff; border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,.25); pointer-events: none; }

/* etiquetas e botões */
.tag.queimao { animation: pulse 2s infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(255,106,0,.6); } 70% { box-shadow: 0 0 0 10px rgba(255,106,0,0); } 100% { box-shadow: 0 0 0 0 rgba(255,106,0,0); } }
.btn-fire { position: relative; overflow: hidden; }
.btn-fire::after { content: ""; position: absolute; top: 0; left: -60%; width: 40%; height: 100%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.45), transparent); transform: skewX(-20deg); }
.btn-fire:hover::after { animation: shine .8s ease; }
@keyframes shine { to { left: 130%; } }

/* hero */
.slide.on img, .slide.on video { animation: kenburns 9s ease-out both; }
@keyframes kenburns { from { transform: scale(1.08); } to { transform: scale(1); } }
.slide video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.slide.on .slide-txt > * { animation: heroIn .8s cubic-bezier(.2,.8,.2,1) both; }
.slide.on .slide-txt > *:nth-child(2) { animation-delay: .12s; }
.slide.on .slide-txt > *:nth-child(3) { animation-delay: .24s; }
.slide.on .slide-txt > *:nth-child(4) { animation-delay: .36s; }
@keyframes heroIn { from { opacity: 0; transform: translateX(-40px); } to { opacity: 1; transform: none; } }
.slide-txt h2 b { display: inline-block; animation: flicker 3s infinite; }
@keyframes flicker { 0%, 100% { text-shadow: 0 0 24px rgba(255,138,31,.55); } 50% { text-shadow: 0 0 38px rgba(255,90,0,.9), 0 0 6px rgba(255,220,120,.8); } }
.hero-progress { position: absolute; z-index: 3; left: 0; right: 0; bottom: 0; height: 4px; background: rgba(255,255,255,.15); }
.hero-progress i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--gold), var(--orange)); }
/* banner em vídeo com o texto já animado: no desktop esconde o texto HTML, mantém só o botão */
.slide-link { display: none; }
@media (min-width: 641px) {
  .slide-txt.baked { visibility: hidden; }
  .slide.has-video::after { display: none; }
  .slide-link { display: block; position: absolute; inset: 0; z-index: 2; }
  .slide.on video { animation: none; }
}

/* ícones de categoria */
.cat-chip .ic img { transition: transform .35s cubic-bezier(.3,1.5,.5,1); }
.cat-chip:hover .ic img { transform: scale(1.12) rotate(-6deg); }
.cat-chip.hot .ic img { animation: wobble 2.4s ease-in-out infinite; }
@keyframes wobble { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(-8deg) scale(1.06); } 40% { transform: rotate(6deg); } 60% { transform: rotate(0) scale(1); } }

/* banners de categoria animados */
.promo2 { margin: 28px 0; }
.cbanner { position: relative; overflow: hidden; border-radius: 14px; min-height: 168px; display: flex; align-items: center; padding: 20px 24px; color: #fff; isolation: isolate; }
.cbanner.red { background: linear-gradient(115deg, #8E0A10 0%, var(--red) 45%, #FF4A12 100%); }
.cbanner.dark { background: linear-gradient(115deg, #0E0606 0%, #2A0D0B 50%, #5A140F 100%); }
.cbanner.kids { background: linear-gradient(115deg, #E8191F 0%, #FF6A00 55%, #FFC21A 100%); }
.cbanner::before { content: ""; position: absolute; inset: -40%; z-index: -1; background: conic-gradient(from 0deg at 70% 60%, transparent 0 20deg, rgba(255,194,26,.13) 20deg 30deg, transparent 30deg 60deg, rgba(255,194,26,.10) 60deg 72deg, transparent 72deg 110deg, rgba(255,194,26,.12) 110deg 120deg, transparent 120deg 360deg); animation: rays 18s linear infinite; }
@keyframes rays { to { transform: rotate(360deg); } }
.cbanner::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.12) 45%, transparent 60%); transform: translateX(-100%); animation: sweep 5s ease-in-out infinite; }
@keyframes sweep { 0%, 55% { transform: translateX(-100%); } 85%, 100% { transform: translateX(100%); } }
.cb-txt { position: relative; z-index: 2; max-width: 56%; display: flex; flex-direction: column; align-items: flex-start; }
.cb-pre { font-size: clamp(15px, 1.6vw, 22px); font-weight: 500; line-height: 1.1; }
.cb-name { font-size: clamp(32px, 4vw, 54px); font-weight: 900; font-style: italic; font-stretch: 70%; line-height: 1; padding-right: .1em; text-transform: uppercase; background: linear-gradient(180deg, #FFE27A, var(--gold) 45%, var(--orange)); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 3px 0 rgba(0,0,0,.25)); }
.cbanner.kids .cb-name { background: linear-gradient(180deg, #fff, #FFF1C4); -webkit-background-clip: text; background-clip: text; }
.cb-sub { font-size: 14px; opacity: .85; margin-top: 4px; }
.cb-pill { margin-top: 10px; display: inline-flex; align-items: center; gap: 6px; background: #fff; color: var(--red); border-radius: 40px; padding: 4px 16px; box-shadow: 0 6px 18px rgba(0,0,0,.25); }
.cbanner.in .cb-pill { animation: pillPulse 2.2s ease-in-out 1s infinite; }
.cb-pill small { font-size: 11px; font-weight: 800; line-height: 1; max-width: 50px; }
.cb-pill b { font-size: 28px; font-weight: 900; font-style: italic; font-stretch: 75%; line-height: 1.1; }
@keyframes pillPulse { 0%, 100% { scale: 1; } 50% { scale: 1.07; } }
.cb-prods { position: absolute; right: 0; top: 0; bottom: 0; width: 50%; z-index: 1; }
.cb-prods img { position: absolute; object-fit: contain; filter: drop-shadow(0 12px 14px rgba(0,0,0,.35)); max-width: 62%; }
.cb-prods .c0 { height: 82%; right: 30%; bottom: 6%; animation: float 4.2s ease-in-out infinite; z-index: 2; }
.cb-prods .c1 { height: 70%; right: 6%; top: 8%; animation: float 5s ease-in-out -1.2s infinite; }
.cb-prods .c2 { height: 46%; right: 2%; bottom: 4%; animation: float 3.6s ease-in-out -2s infinite; z-index: 3; }
@keyframes float { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-10px) rotate(2deg); } }
.cbanner .cb-txt > * { opacity: 0; transform: translateX(-24px); transition: opacity .6s, transform .6s cubic-bezier(.2,.8,.2,1); }
.cbanner.in .cb-txt > * { opacity: 1; transform: none; }
.cbanner.in .cb-txt > *:nth-child(2) { transition-delay: .12s; }
.cbanner.in .cb-txt > *:nth-child(3) { transition-delay: .24s; }
.cbanner.in .cb-txt > *:nth-child(4) { transition-delay: .36s; }
.cb-prods img { opacity: 0; translate: 40px 0; transition: opacity .7s .2s, translate .8s .2s cubic-bezier(.2,.8,.2,1), scale .3s; }
.cbanner.in .cb-prods img { opacity: 1; translate: 0 0; }
.cbanner.in .cb-prods .c1 { transition-delay: .35s; }
.cbanner.in .cb-prods .c2 { transition-delay: .5s; }
.cbanner:hover .cb-prods .c0 { scale: 1.06; }
.cb-note { position: absolute; right: 8px; top: 50%; transform: translateY(-50%) rotate(-90deg); transform-origin: right center; font-size: 9px; opacity: .5; white-space: nowrap; }
.cb-sparks i { position: absolute; bottom: -10px; width: 5px; height: 5px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 8px 2px rgba(255,140,0,.8); animation: spark 4s linear infinite; z-index: 0; }
.cb-sparks i:nth-child(1) { left: 55%; }
.cb-sparks i:nth-child(2) { left: 68%; animation-delay: 1.2s; animation-duration: 3.4s; }
.cb-sparks i:nth-child(3) { left: 80%; animation-delay: 2.1s; }
.cb-sparks i:nth-child(4) { left: 90%; animation-delay: .6s; animation-duration: 5s; }
.cb-sparks i:nth-child(5) { left: 40%; animation-delay: 2.8s; animation-duration: 4.4s; }
@keyframes spark { 0% { transform: translate(0,0); opacity: 0; } 10% { opacity: 1; } 100% { transform: translate(-30px,-200px); opacity: 0; } }
.cat-hero { margin-bottom: 16px; }
.cat-hero .cbanner { min-height: 200px; }

/* banner largo das lojas */
.wbanner { position: relative; display: grid; grid-template-columns: 200px 1fr auto; align-items: center; gap: 20px; min-height: 160px; border-radius: 14px; overflow: hidden; color: #fff; padding: 0 28px 0 0; margin: 28px 0; background: linear-gradient(100deg, #0E0606 0%, #1D0A09 50%, #3B0F0C 100%); isolation: isolate; }
.wbanner::before { content: ""; position: absolute; right: 18%; top: 14px; width: 110px; height: 12px; background: repeating-linear-gradient(-60deg, #fff 0 5px, transparent 5px 13px); opacity: .85; }
.wbanner::after { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(60% 120% at 85% 100%, rgba(255,106,0,.4), transparent 60%); animation: glow 3s ease-in-out infinite alternate; }
@keyframes glow { from { opacity: .6; } to { opacity: 1; } }
.wb-left { align-self: stretch; display: flex; align-items: center; justify-content: center; padding-left: 16px; }
.wb-torrao { height: 140px; width: auto; filter: drop-shadow(0 6px 12px rgba(0,0,0,.4)); animation: drive 3s ease-in-out infinite; border-radius: 14px; }
@keyframes drive { 0%, 100% { transform: translateX(0) rotate(0); } 50% { transform: translateX(8px) rotate(1deg); } }
.wb-mid strong { display: block; font-size: clamp(22px, 2.6vw, 34px); line-height: 1.05; font-weight: 800; }
.wb-mid em { color: var(--gold); font-style: italic; font-weight: 900; }
.wb-k { font-size: 13px; text-transform: uppercase; letter-spacing: .1em; color: var(--orange-2); font-weight: 700; }
.wb-cities { position: absolute; left: 200px; right: 0; bottom: 8px; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); opacity: .45; font-size: 12px; text-transform: uppercase; letter-spacing: .08em; }
.wb-cities div { display: flex; gap: 22px; width: max-content; animation: marquee 30s linear infinite; }
.wb-cities span::before { content: "🔥 "; }
.wb-cta { background: #fff; color: var(--ink); font-weight: 800; padding: 12px 18px; border-radius: 6px; text-transform: uppercase; font-size: 14px; white-space: nowrap; box-shadow: 0 6px 18px rgba(0,0,0,.3); transition: transform .2s; }
.wbanner:hover .wb-cta { transform: translateY(-2px); }

/* instagram marquee */
.ig-marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.ig-track { display: flex; gap: 8px; width: max-content; animation: marquee 50s linear infinite; }
.ig-marquee:hover .ig-track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* carrinho extras */
.freebar { background: #FFF6EC; border-radius: 8px; padding: 10px 12px; font-size: 13px; margin-bottom: 6px; }
.freebar .bar { height: 6px; background: #F5DCC6; border-radius: 3px; overflow: hidden; margin-top: 6px; }
.freebar .bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--gold), var(--orange)); transition: width .6s; }
.freebar.ok { background: #EAF7EF; color: var(--pix); }
.form-err { color: var(--red); font-size: 13px; font-weight: 600; min-height: 18px; margin: 4px 0 8px; }
.shake { animation: shake .4s; }
@keyframes shake { 20%, 60% { transform: translateX(-8px); } 40%, 80% { transform: translateX(8px); } }

/* login */
.auth { display: grid; grid-template-columns: 1fr 1fr; margin: 24px auto; max-width: 940px; border-radius: 16px; overflow: hidden; box-shadow: 0 20px 50px rgba(20,9,10,.15); background: #fff; }
.auth-side { background: radial-gradient(120% 120% at 20% 0%, #4A1310, var(--ink) 65%); color: #fff; padding: 32px; display: flex; flex-direction: column; justify-content: center; }
.auth-side img { width: 190px; border-radius: 16px; animation: float 4s ease-in-out infinite; }
.auth-side h2 { font-size: 30px; font-style: italic; font-stretch: 75%; text-transform: uppercase; line-height: 1; margin: 16px 0 10px; }
.auth-side h2 b { color: var(--gold); }
.auth-side ul { margin: 0; padding-left: 18px; opacity: .85; display: grid; gap: 6px; font-size: 14px; }
.auth-box { padding: 28px; }
.auth-box form { animation: popIn .35s both; }
.pw { position: relative; display: block; }
.pw input { width: 100%; padding-right: 44px !important; }
.eye { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 34px; height: 34px; opacity: .6; }
.field input:focus, .field select:focus { outline: 2px solid var(--orange); border-color: transparent; }

/* conta */
.order { display: grid; grid-template-columns: 1.2fr 1fr 1.2fr auto; gap: 12px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.order small { display: block; color: var(--muted); font-size: 12px; }
.o-imgs { display: flex; }
.o-imgs img { width: 40px; height: 40px; object-fit: contain; background: #fff; border: 1px solid var(--line); border-radius: 6px; margin-right: -8px; }
.o-st { display: inline-block; background: #FFF1D6; color: #9A5B00; font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: 10px; }
.o-tot { color: var(--red); font-size: 17px; }

.m-acc { display: none; }
.confetti { position: fixed; inset: 0; pointer-events: none; z-index: 300; overflow: hidden; }
.confetti i { position: absolute; top: -20px; width: 9px; height: 14px; border-radius: 2px; animation: fall linear forwards; }
@keyframes fall { to { top: 110vh; transform: rotate(720deg) translateX(60px); } }

.gallery .tag { top: 26px; left: 26px; }
.gallery .fav { top: 20px; right: 20px; }
.ship h4 { display: flex; align-items: center; gap: 6px; }
.ship h4 svg { width: 20px; height: 20px; color: var(--red); }

@media (max-width: 900px) {
  .wbanner { grid-template-columns: 120px 1fr; padding-right: 16px; }
  .wb-cta { grid-column: 2; justify-self: start; margin-bottom: 30px; padding: 9px 14px; font-size: 12px; }
  .wb-torrao { height: 110px; }
  .wb-cities { left: 0; }
  .auth { grid-template-columns: 1fr; }
  .auth-side { padding: 22px; flex-direction: row; align-items: center; gap: 16px; }
  .auth-side img { width: 90px; }
  .auth-side h2 { font-size: 24px; margin: 0; flex: 1; }
  .auth-side ul { display: none; }
  .order { grid-template-columns: 1fr auto; }
  .order .o-imgs { display: none; }
}
@media (max-width: 640px) {
  .m-acc { display: flex; gap: 8px; padding: 12px 0 0; flex-wrap: wrap; }
  .m-acc a { display: flex; align-items: center; gap: 6px; font-weight: 700; font-size: 14px; padding: 8px 12px; border-radius: 8px; background: #FFF1E8; color: var(--red); }
  .m-acc svg { width: 18px; height: 18px; }
  .dept-menu { max-height: calc(100vh - 120px); max-height: calc(100dvh - 120px); overflow-y: auto; }
  .nav.on .nav-in { display: none; }
  .cbanner { min-height: 150px; padding: 16px; }
  .cb-txt { max-width: 60%; }
  .cb-name { font-size: 34px; }
  .cb-pill b { font-size: 22px; }
  .cb-prods { width: 48%; }
  .promo2 { gap: 10px; margin: 20px 0; }
  .wbanner { grid-template-columns: 96px 1fr; gap: 10px; min-height: 140px; }
  .wb-left { padding-left: 10px; }
  .wb-torrao { height: 86px; }
  .wb-mid strong { font-size: 19px; }
  .wbanner::before { display: none; }
  .auth { margin: 12px 0; border-radius: 12px; }
  .auth-box { padding: 18px; }
  body.scrolled .header-in { height: auto; }
  body.scrolled .logo img { height: 36px; }
  .section { margin: 22px 0; }
  .toast { bottom: 16px; font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal, .cbanner .cb-txt > *, .cb-prods img { opacity: 1 !important; transform: none !important; translate: none !important; }
}

/* ---------- mobile: barra inferior, compra fixa, categorias ---------- */
.tabbar, .mbuy { display: none; }
.dept-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin-bottom: 20px; }
.dcard { background: #fff; border-radius: 12px; box-shadow: var(--shadow); padding: 14px 10px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.dcard img { width: 72px; height: 72px; object-fit: contain; }
.dcard b { font-size: 14px; line-height: 1.2; }
.dcard small { color: var(--muted); font-size: 12px; }
@media (max-width: 640px) {
  body { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
  .tabbar { display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; z-index: 60; left: 0; right: 0; bottom: 0; height: calc(62px + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom); background: #fff; border-top: 1px solid var(--line); box-shadow: 0 -4px 16px rgba(20,9,10,.08); }
  .tabbar a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; font-size: 11px; font-weight: 600; color: var(--muted); }
  .tabbar svg { width: 23px; height: 23px; }
  .tabbar a.on { color: var(--red); }
  .tb-fire span { width: 46px; height: 46px; margin-top: -22px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(180deg, var(--orange-2), var(--red)); color: #fff; box-shadow: 0 6px 16px rgba(215,20,30,.4); border: 3px solid #fff; animation: pulse 2.4s infinite; }
  .tb-fire { color: var(--red) !important; }
  body.on-pdp .mbuy { display: flex; position: fixed; z-index: 59; left: 0; right: 0; bottom: calc(62px + env(safe-area-inset-bottom)); background: #fff; border-top: 1px solid var(--line); padding: 8px 16px; gap: 12px; align-items: center; justify-content: space-between; box-shadow: 0 -6px 16px rgba(20,9,10,.08); animation: popIn .4s both; }
  body.on-pdp { padding-bottom: calc(130px + env(safe-area-inset-bottom)); }
  .mbuy > div { display: flex; flex-direction: column; line-height: 1.15; }
  .mbuy b { color: var(--red); font-size: 22px; font-weight: 900; font-stretch: 85%; }
  .mbuy small { color: var(--pix); font-size: 12px; font-weight: 700; }
  .mbuy .old { font-size: 11px; }
  .mbuy .btn { height: 46px; flex: none; }
  .toast { bottom: calc(76px + env(safe-area-inset-bottom)); }
  body.on-pdp .toast { bottom: calc(140px + env(safe-area-inset-bottom)); }
  .perks { grid-template-columns: 1fr 1fr; gap: 8px; }
  .perk { flex-direction: column; align-items: flex-start; gap: 4px; padding: 10px 12px; }
  .perk svg { width: 24px; height: 24px; }
  .perk b { font-size: 13px; }
  .perk span { font-size: 12px; line-height: 1.25; display: block; }
  .slide video { display: none; }
  .slide img { object-position: 64% 40%; }
  .hero { height: 360px; }
  .buybox .bb-actions { display: none; }
  .dept-cards { grid-template-columns: 1fr 1fr; }
}