/* ============================================================
   ASTROPÉ — design system (tema CLARO + pegada streetwear)
   Fundo claro = confiança/conversão. Energia via tipografia,
   neon de destaque, animações e marquee.
   ============================================================ */
:root{
  --bg:#ffffff; --bg-2:#f4f4f1; --bg-3:#ffffff;
  --ink:#0c0c0f; --muted:#6b6b73; --line:rgba(12,12,15,.12);
  --neon:#c6f000;       /* volt lime — usado como BLOCO de destaque (texto preto em cima) */
  --neon-2:#ff2d55;     /* urgência */
  --cyan:#0bb5c9;
  --pos:#15a44a;        /* verde "positivo/economia" (alto contraste no branco) */
  --r:16px; --r-lg:24px;
  --shadow:0 16px 40px rgba(12,12,15,.10);
  --shadow-sm:0 6px 18px rgba(12,12,15,.07);
  --display:"Anton", "Arial Narrow", Impact, system-ui, sans-serif;
  --body:"Inter", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--body); line-height:1.5; -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{color:inherit; text-decoration:none}
img{max-width:100%; display:block}
.container{width:min(1180px,92vw); margin-inline:auto}
/* destaque tipo "marca-texto" (highlighter streetwear) */
.hl{background:var(--neon); color:#0c0c0f; padding:0 .14em; border-radius:4px; box-decoration-break:clone; -webkit-box-decoration-break:clone}
.stroke{-webkit-text-stroke:2.5px var(--ink); color:transparent}

/* ---------- Botões ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  font-weight:800; font-size:.95rem; padding:.85rem 1.4rem; border-radius:999px;
  border:0; cursor:pointer; transition:transform .15s ease, box-shadow .15s ease, background .15s;
  letter-spacing:.02em;
}
.btn--neon{background:var(--ink); color:#fff; box-shadow:var(--shadow-sm)}      /* CTA principal: preto (premium, alto contraste) */
.btn--neon:hover{transform:translateY(-2px); background:#000; box-shadow:0 12px 26px rgba(12,12,15,.22)}
.btn--ghost{background:transparent; color:var(--ink); border:1.5px solid var(--line)}
.btn--ghost:hover{border-color:var(--ink); background:var(--bg-2)}
.btn--block{width:100%}
.icon-btn{
  background:transparent; border:0; color:var(--ink); font-size:1.25rem; cursor:pointer;
  width:42px; height:42px; border-radius:12px; display:grid; place-items:center; position:relative;
}
.icon-btn:hover{background:var(--bg-2)}
.badge{display:inline-block; font-weight:800; font-size:.72rem; padding:.3rem .6rem; border-radius:999px; letter-spacing:.04em; text-transform:uppercase}
.badge--neon{background:var(--neon); color:#0c0c0f}

/* ---------- Barra de avisos ---------- */
.announce{background:var(--ink); color:#fff; font-weight:700; font-size:.82rem; text-align:center; padding:.5rem; letter-spacing:.03em}
.announce__track{display:inline-block; transition:opacity .4s}

/* ---------- Header ---------- */
.header{position:sticky; top:0; z-index:40; background:rgba(255,255,255,.88); backdrop-filter:blur(12px); border-bottom:1px solid var(--line)}
.header__row{display:flex; align-items:center; gap:1rem; height:64px}
.header__menu{display:none}
.logo{font-family:var(--display); font-size:1.7rem; letter-spacing:.04em}
.logo--sm{font-size:1.3rem}
.logo__dot{color:var(--neon-2)}
.nav{display:flex; gap:1.4rem; margin-left:1.5rem; font-weight:600; font-size:.95rem}
.nav a{color:var(--muted); transition:color .15s}
.nav a:hover{color:var(--ink)}
.header__actions{margin-left:auto; display:flex; align-items:center; gap:.25rem}
.cart-count{position:absolute; top:2px; right:2px; background:var(--neon-2); color:#fff; font-size:.65rem; font-weight:800; min-width:17px; height:17px; border-radius:999px; display:grid; place-items:center; padding:0 3px}

/* ---------- Hero ---------- */
.hero{position:relative; overflow:hidden; border-bottom:1px solid var(--line); background:linear-gradient(180deg,#fff, #fafaf8)}
.hero__glow{position:absolute; inset:-30% 25% auto -10%; height:560px; background:radial-gradient(circle at 30% 30%, rgba(198,240,0,.30), transparent 62%); filter:blur(10px); pointer-events:none}
.hero__grid{display:grid; grid-template-columns:1.05fr .95fr; gap:2rem; align-items:center; padding:3.5rem 0 2.5rem; position:relative}
.hero__copy{max-width:540px}
.hero__title{font-family:var(--display); font-size:clamp(3.2rem,9vw,6rem); line-height:.9; margin:.8rem 0 1rem; letter-spacing:.01em}
.hero__sub{color:var(--muted); font-size:1.08rem; max-width:460px}
.hero__cta{display:flex; gap:.8rem; margin:1.6rem 0 1.2rem; flex-wrap:wrap}
.hero__countdown{display:flex; align-items:center; gap:.6rem; font-size:.9rem; color:var(--muted)}
.hero__countdown-label{text-transform:uppercase; letter-spacing:.08em; font-size:.72rem}
.clock{font-family:var(--display); font-size:1.5rem; color:var(--neon-2); letter-spacing:.06em}
.hero__art{position:relative; display:grid; place-items:center; min-height:280px}
.hero__art .floatcard{
  background:#fff; border:1px solid var(--line);
  border-radius:var(--r-lg); padding:1.5rem; width:min(420px,90%); box-shadow:var(--shadow);
  transform:rotate(-3deg); animation:floaty 5s ease-in-out infinite;
}
.hero__art .floatcard img{filter:drop-shadow(0 16px 18px rgba(12,12,15,.18))}
.hero__art .floatcard .fc__name{font-weight:800; margin-top:.6rem}
.hero__art .floatcard .fc__price{font-family:var(--display); font-size:1.8rem; color:var(--ink); letter-spacing:.03em}
.hero__art .floatcard .fc__old{color:var(--muted); text-decoration:line-through; font-size:.9rem; margin-left:.5rem}
@keyframes floaty{0%,100%{transform:rotate(-3deg) translateY(0)}50%{transform:rotate(-2deg) translateY(-12px)}}

/* ---------- Marquee ---------- */
.marquee{overflow:hidden; background:var(--neon-2); color:#fff; border-top:2px solid var(--ink); border-bottom:2px solid var(--ink)}
.marquee__track{display:flex; white-space:nowrap; font-family:var(--display); font-size:1rem; letter-spacing:.08em; padding:.5rem 0; animation:scroll 22s linear infinite}
.marquee__track span{padding-right:1rem}
@keyframes scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---------- Trust ---------- */
.trust{border-bottom:1px solid var(--line); background:var(--bg-2)}
.trust__grid{display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; padding:1.4rem 0}
.trust__item{display:flex; flex-direction:column; align-items:center; text-align:center; gap:.15rem}
.trust__item strong{font-family:var(--display); font-size:1.4rem; color:var(--ink)}
.trust__item span{color:var(--muted); font-size:.82rem}

/* ---------- Seções ---------- */
.section{padding:3.5rem 0}
.section--alt{background:var(--bg-2)}
.section__head{margin-bottom:1.8rem}
.section__title{font-family:var(--display); font-size:clamp(2rem,5vw,3rem); margin:0; letter-spacing:.01em}
.section__sub{color:var(--muted); margin:.3rem 0 0}

/* ---------- Grid de produtos ---------- */
.grid{display:grid; grid-template-columns:repeat(4,1fr); gap:1.2rem}
.card{
  background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden;
  display:flex; flex-direction:column; transition:transform .2s ease, box-shadow .2s, border-color .2s; position:relative;
  box-shadow:var(--shadow-sm);
}
.card:hover{transform:translateY(-6px); box-shadow:var(--shadow); border-color:rgba(12,12,15,.2)}
.card__media{position:relative; aspect-ratio:4/3; background:radial-gradient(circle at 50% 120%, rgba(12,12,15,.06), transparent 60%); display:grid; place-items:center; padding:1rem}
.card__media img{transition:transform .3s ease}
.card:hover .card__media img{transform:scale(1.08) rotate(-3deg)}
.card__badges{position:absolute; top:.6rem; left:.6rem; display:flex; flex-direction:column; gap:.3rem}
.tag{font-size:.66rem; font-weight:800; text-transform:uppercase; padding:.22rem .5rem; border-radius:6px; letter-spacing:.03em}
.tag--hot{background:var(--neon-2); color:#fff}
.tag--neon{background:var(--neon); color:#0c0c0f}
.tag--new{background:var(--ink); color:#fff}
.card__stock{position:absolute; top:.6rem; right:.6rem; background:var(--neon-2); color:#fff; font-size:.66rem; font-weight:700; padding:.2rem .45rem; border-radius:6px}
.card__body{padding:.9rem 1rem 1.1rem; display:flex; flex-direction:column; gap:.35rem; flex:1}
.card__brand{color:var(--muted); font-size:.72rem; text-transform:uppercase; letter-spacing:.05em}
.card__name{font-weight:700; font-size:.98rem; line-height:1.25}
.card__rating{font-size:.78rem; color:#e6a700}
.card__rating span{color:var(--muted)}
.card__price{margin-top:auto; display:flex; align-items:baseline; gap:.5rem}
.card__price .now{font-family:var(--display); font-size:1.5rem; color:var(--ink); letter-spacing:.02em}
.card__price .old{color:var(--muted); text-decoration:line-through; font-size:.82rem}
.card__inst{color:var(--muted); font-size:.74rem}
.card__add{margin-top:.6rem}

/* ---------- Kit builder ---------- */
.kit{display:grid; grid-template-columns:1.3fr 1fr; gap:1.5rem; align-items:stretch}
.kit__picker{display:grid; grid-template-columns:repeat(2,1fr); gap:.8rem}
.kit__opt{background:#fff; border:1.5px solid var(--line); border-radius:var(--r); padding:1rem; cursor:pointer; transition:border-color .15s, transform .15s, box-shadow .15s; display:flex; gap:.7rem; align-items:center; box-shadow:var(--shadow-sm)}
.kit__opt:hover{transform:translateY(-3px)}
.kit__opt.is-active{border-color:var(--ink); box-shadow:0 0 0 3px rgba(198,240,0,.5)}
.kit__opt img{width:64px}
.kit__opt .ko__name{font-weight:700; font-size:.85rem}
.kit__opt .ko__price{color:var(--pos); font-weight:700; font-size:.8rem}
.kit__summary{background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); padding:1.5rem; display:flex; flex-direction:column; gap:.6rem; box-shadow:var(--shadow-sm)}
.kit__count{font-family:var(--display); font-size:1.3rem}
.kit__row{display:flex; justify-content:space-between; color:var(--muted); font-size:.9rem}
.kit__save{color:var(--pos); font-weight:800}
.kit__total{display:flex; justify-content:space-between; align-items:baseline; border-top:1px solid var(--line); padding-top:.7rem; margin-top:.3rem}
.kit__total .v{font-family:var(--display); font-size:2rem; color:var(--ink)}

/* ---------- Reviews ---------- */
.reviews{display:grid; grid-template-columns:repeat(4,1fr); gap:1rem}
.review{background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:1.2rem; display:flex; flex-direction:column; gap:.5rem; box-shadow:var(--shadow-sm)}
.review__stars{color:#e6a700; font-size:.9rem}
.review__text{font-size:.92rem}
.review__who{margin-top:auto; font-size:.8rem; color:var(--muted)}
.review__who b{color:var(--ink)}

/* ---------- Cofre ---------- */
.vault{padding:3rem 0; background:linear-gradient(120deg, rgba(198,240,0,.18), rgba(255,45,85,.12))}
.vault__box{display:flex; align-items:center; justify-content:space-between; gap:2rem; flex-wrap:wrap; background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); padding:1.8rem; box-shadow:var(--shadow)}
.vault__title{font-family:var(--display); font-size:2rem; margin:0 0 .3rem}
.vault__sub{color:var(--muted); margin:0; max-width:440px}
.vault__form{display:flex; gap:.6rem; flex:1; min-width:280px}
.vault__form input{flex:1; background:#fff; border:1.5px solid var(--line); color:var(--ink); border-radius:999px; padding:.85rem 1.2rem; font-size:.95rem}
.vault__form input:focus{outline:none; border-color:var(--ink)}

/* ---------- Footer ---------- */
.footer{border-top:1px solid var(--line); background:var(--bg-2); padding-top:2.5rem}
.footer__grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:1.5rem; padding-bottom:2rem}
.footer__grid h4{font-size:.95rem; margin:0 0 .7rem}
.footer__grid a{display:block; color:var(--muted); font-size:.88rem; padding:.2rem 0}
.footer__grid a:hover{color:var(--ink)}
.footer__tag{color:var(--muted); font-size:.88rem; margin:.5rem 0 1rem}
.footer__small{color:var(--muted); font-size:.82rem; line-height:1.6}
.pay{display:flex; gap:.4rem; flex-wrap:wrap}
.pay span{background:#fff; border:1px solid var(--line); border-radius:6px; font-size:.7rem; padding:.25rem .5rem; color:var(--muted)}
.footer__bottom{border-top:1px solid var(--line); padding:1.2rem 0; color:var(--muted); font-size:.8rem}

/* ---------- WhatsApp ---------- */
.wpp{position:fixed; bottom:18px; left:18px; z-index:45; background:#25d366; color:#062e13; font-weight:800; display:flex; align-items:center; gap:.5rem; padding:.7rem 1rem; border-radius:999px; box-shadow:0 10px 24px rgba(37,211,102,.35); transition:transform .15s}
.wpp:hover{transform:translateY(-3px)}
.wpp__icon{font-size:1.1rem}

/* ---------- Overlay + Cart drawer ---------- */
.overlay{position:fixed; inset:0; background:rgba(12,12,15,.5); opacity:0; pointer-events:none; transition:opacity .25s; z-index:48}
.overlay.is-open{opacity:1; pointer-events:auto}
.cart{position:fixed; top:0; right:0; height:100%; width:min(420px,100%); background:#fff; border-left:1px solid var(--line); z-index:50; transform:translateX(100%); transition:transform .3s ease; display:flex; flex-direction:column; box-shadow:var(--shadow)}
.cart.is-open{transform:translateX(0)}
.cart__head{display:flex; align-items:center; justify-content:space-between; padding:1.2rem; border-bottom:1px solid var(--line)}
.cart__head h3{margin:0; font-size:1.1rem}
.freeship{padding:1rem 1.2rem; border-bottom:1px solid var(--line)}
.freeship__bar{height:8px; background:var(--bg-2); border-radius:999px; overflow:hidden; margin-bottom:.5rem}
.freeship__bar span{display:block; height:100%; width:0; background:linear-gradient(90deg,var(--neon),var(--pos)); transition:width .4s}
.freeship p{margin:0; font-size:.82rem; color:var(--muted)}
.cart__items{flex:1; overflow-y:auto; padding:.8rem 1.2rem; display:flex; flex-direction:column; gap:.8rem}
.cart__empty{color:var(--muted); text-align:center; padding:2rem 0; font-size:.9rem}
.citem{display:grid; grid-template-columns:64px 1fr auto; gap:.7rem; align-items:center}
.citem img{background:var(--bg-2); border-radius:10px; padding:.3rem}
.citem__name{font-size:.85rem; font-weight:600; line-height:1.2}
.citem__price{color:var(--ink); font-weight:800; font-size:.85rem}
.qty{display:flex; align-items:center; gap:.4rem; margin-top:.3rem}
.qty button{width:24px; height:24px; border-radius:6px; border:1px solid var(--line); background:var(--bg-2); color:var(--ink); cursor:pointer; font-weight:700}
.citem__rm{background:none; border:0; color:var(--muted); cursor:pointer; font-size:1rem}
.cart__foot{border-top:1px solid var(--line); padding:1.2rem; display:flex; flex-direction:column; gap:.5rem}
.cart__line{display:flex; justify-content:space-between; align-items:baseline}
.cart__line--pix{color:var(--pos); font-size:.9rem; font-weight:700}
.cart__line strong{font-size:1.15rem}
.cart__safe{text-align:center; color:var(--muted); font-size:.78rem; margin:.2rem 0 0}

/* ---------- Modais ---------- */
.modal{position:fixed; inset:0; z-index:60; display:none; place-items:center; padding:1rem; background:rgba(12,12,15,.55)}
.modal.is-open{display:grid}
.modal__box{background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); width:min(520px,100%); padding:1.8rem; position:relative; box-shadow:var(--shadow)}
.modal__box--exit{text-align:center}
.modal__close{position:absolute; top:.8rem; right:.8rem; background:none; border:0; color:var(--muted); font-size:1.2rem; cursor:pointer}
.exit__title{font-family:var(--display); font-size:2rem; margin:.3rem 0}
.exit__sub{color:var(--muted); margin:0 0 1.2rem}
.scratch{width:100%; padding:1.4rem; border-radius:var(--r); border:2px dashed var(--ink); background:repeating-linear-gradient(45deg,#eee,#eee 10px,#f7f7f5 10px,#f7f7f5 20px); color:var(--ink); font-family:var(--display); font-size:1.4rem; letter-spacing:.1em; cursor:pointer; transition:transform .1s}
.scratch:active{transform:scale(.98)}
.scratch.is-revealed{background:var(--neon); color:#0c0c0f; border-style:solid; animation:pop .4s}
@keyframes pop{0%{transform:scale(.9)}60%{transform:scale(1.05)}100%{transform:scale(1)}}
.exit__hint{color:var(--muted); font-size:.8rem; margin:.8rem 0 0}

/* Quiz */
.quiz__step{display:flex; flex-direction:column; gap:.8rem}
.quiz__q{font-family:var(--display); font-size:1.5rem; margin:.2rem 0}
.quiz__opts{display:grid; grid-template-columns:1fr 1fr; gap:.7rem}
.quiz__opt{background:#fff; border:1.5px solid var(--line); border-radius:var(--r); padding:1rem; cursor:pointer; font-weight:600; transition:border-color .15s, transform .15s; text-align:center}
.quiz__opt:hover{border-color:var(--ink); transform:translateY(-2px)}
.quiz__progress{height:6px; background:var(--bg-2); border-radius:999px; overflow:hidden; margin-bottom:.4rem}
.quiz__progress span{display:block; height:100%; background:var(--neon-2); transition:width .3s}
.quiz__result{text-align:center; display:flex; flex-direction:column; align-items:center; gap:.6rem}
.quiz__result img{width:200px}

/* ---------- Live feed toasts ---------- */
.livefeed{position:fixed; bottom:18px; left:18px; z-index:44; display:flex; flex-direction:column; gap:.5rem; max-width:300px}
.toast{background:#fff; border:1px solid var(--line); border-left:3px solid var(--neon-2); border-radius:12px; padding:.7rem .9rem; display:flex; gap:.6rem; align-items:center; box-shadow:var(--shadow); animation:slideIn .35s ease}
.toast img{width:40px; background:var(--bg-2); border-radius:8px; padding:.2rem}
.toast__txt{font-size:.8rem; line-height:1.3}
.toast__txt b{color:var(--ink)}
.toast__txt span{color:var(--muted)}
.toast__time{color:var(--pos); font-size:.7rem; font-weight:700}
@keyframes slideIn{from{transform:translateX(-110%); opacity:0}to{transform:translateX(0); opacity:1}}

/* ---------- Responsivo ---------- */
@media (max-width:1024px){
  .grid,.reviews{grid-template-columns:repeat(2,1fr)}
  .kit{grid-template-columns:1fr}
}
@media (max-width:760px){
  .nav{display:none}
  .header__menu{display:grid}
  .hero__grid{grid-template-columns:1fr; text-align:center; padding-top:2rem}
  .hero__copy{margin-inline:auto}
  .hero__cta,.hero__countdown{justify-content:center}
  .hero__art{order:-1}
  .trust__grid{grid-template-columns:repeat(2,1fr); gap:.8rem 0}
  .footer__grid{grid-template-columns:1fr 1fr}
  .kit__picker{grid-template-columns:1fr}
  .vault__box{flex-direction:column; align-items:flex-start}
  .vault__form{width:100%}
  .wpp__txt{display:none}
}
@media (max-width:460px){
  .grid,.reviews{grid-template-columns:1fr}
}

/* ============================================================
   COMPONENTES NOVOS — logo, cosmos, banners de categoria, promo
   ============================================================ */

/* ---------- Logo (marca com planeta/órbita) ---------- */
.logo{display:inline-flex; align-items:center; gap:.5rem}
.logo__mark{width:34px; height:34px; color:var(--ink); flex:none; transition:transform .4s ease}
.logo:hover .logo__mark{transform:rotate(14deg)}
.logo--sm .logo__mark{width:28px; height:28px}

/* ---------- Herói cósmico ---------- */
#heroCard{position:relative; z-index:2}
.cosmos{position:absolute; inset:0; pointer-events:none}
.cosmos__planet{position:absolute; right:8%; top:0; width:120px; height:120px; border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #f0ffb0, #c6f000 58%, #a4cc00);
  box-shadow:0 14px 36px rgba(198,240,0,.45), inset -8px -10px 20px rgba(0,0,0,.12)}
.cosmos__ring{position:absolute; right:-2%; top:-14%; width:230px; height:230px; border:2px dashed rgba(12,12,15,.16); border-radius:50%; animation:spin 26s linear infinite}
.cosmos__ring--2{width:300px; height:300px; right:-12%; top:-30%; border-color:rgba(255,45,85,.18); animation-duration:40s; animation-direction:reverse}
.cosmos__stars{position:absolute; inset:0; opacity:.55;
  background-image:
    radial-gradient(2px 2px at 18% 32%, var(--ink) 45%, transparent 50%),
    radial-gradient(2px 2px at 72% 62%, var(--neon-2) 45%, transparent 50%),
    radial-gradient(1.6px 1.6px at 42% 82%, var(--ink) 45%, transparent 50%),
    radial-gradient(2px 2px at 88% 22%, var(--ink) 45%, transparent 50%),
    radial-gradient(1.6px 1.6px at 30% 12%, var(--neon-2) 45%, transparent 50%);
  animation:twinkle 3s ease-in-out infinite alternate}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes twinkle{from{opacity:.3}to{opacity:.7}}

/* ---------- Banners de categoria ---------- */
.cats{padding:1.6rem 0 0}
.cats__grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1rem}
.cat{position:relative; overflow:hidden; border-radius:var(--r-lg); padding:1.6rem; min-height:158px; display:flex; flex-direction:column; justify-content:flex-end; gap:.15rem; box-shadow:var(--shadow-sm); transition:transform .2s, box-shadow .2s}
.cat:hover{transform:translateY(-5px); box-shadow:var(--shadow)}
.cat::after{content:""; position:absolute; width:160px; height:160px; border-radius:50%; right:-44px; top:-52px; background:rgba(255,255,255,.16)}
.cat__kicker,.cat__title,.cat__cta{position:relative; z-index:1}
.cat__kicker{font-size:.78rem; font-weight:600; opacity:.9}
.cat__title{font-family:var(--display); font-size:1.9rem; line-height:1}
.cat__cta{font-weight:800; font-size:.85rem; margin-top:.35rem}
.cat--1{background:linear-gradient(135deg,#16161c,#0c0c0f); color:#fff}
.cat--2{background:linear-gradient(135deg,#d4ff3d,#a4cc00); color:#0c0c0f}
.cat--2::after{background:rgba(0,0,0,.10)}
.cat--3{background:linear-gradient(135deg,#ff5b7f,#ff2d55); color:#fff}

/* ---------- Banner promo espacial ---------- */
.promo{padding:2.5rem 0}
.promo__box{position:relative; overflow:hidden; border-radius:var(--r-lg); padding:2.8rem; color:#fff;
  background:radial-gradient(120% 140% at 85% 10%, #2a2a44, #0c0c16 62%);
  display:flex; align-items:center; gap:1.5rem; box-shadow:var(--shadow)}
.promo__stars{position:absolute; inset:0; opacity:.85;
  background-image:
    radial-gradient(1.6px 1.6px at 12% 30%, #fff 45%, transparent 50%),
    radial-gradient(1.6px 1.6px at 28% 70%, #fff 45%, transparent 50%),
    radial-gradient(2px 2px at 55% 20%, var(--neon) 45%, transparent 50%),
    radial-gradient(1.4px 1.4px at 72% 55%, #fff 45%, transparent 50%),
    radial-gradient(1.6px 1.6px at 90% 35%, var(--neon-2) 45%, transparent 50%),
    radial-gradient(1.4px 1.4px at 40% 88%, #fff 45%, transparent 50%);
  animation:twinkle 3.5s ease-in-out infinite alternate}
.promo__rocket{font-size:3.4rem; position:relative; z-index:1; animation:floaty2 4s ease-in-out infinite}
@keyframes floaty2{0%,100%{transform:translateY(0) rotate(-6deg)}50%{transform:translateY(-10px) rotate(-2deg)}}
.promo__copy{position:relative; z-index:1; flex:1}
.promo__title{font-family:var(--display); font-size:clamp(1.7rem,4.2vw,2.7rem); line-height:1; margin:.5rem 0 .4rem; color:#fff}
.promo__sub{color:rgba(255,255,255,.78); margin:0 0 1rem; max-width:430px}
.promo .btn--neon{background:var(--neon); color:#0c0c0f}
.promo .btn--neon:hover{background:#d4ff3d}
.promo__planet{position:absolute; right:-60px; bottom:-72px; width:200px; height:200px; border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #3a3a6a, #15152a 60%); box-shadow:inset -10px -14px 30px rgba(0,0,0,.4); opacity:.9}

/* ---------- Responsivo dos novos componentes ---------- */
@media (max-width:900px){
  .cats__grid{grid-template-columns:1fr 1fr}
}
@media (max-width:760px){
  .cats__grid{grid-template-columns:1fr}
  .promo__box{flex-direction:column; text-align:center; padding:2rem 1.4rem}
  .promo__sub{margin-inline:auto}
  .cosmos__planet{width:92px; height:92px; top:-6%}
}

/* ============================================================
   PÁGINA DE PRODUTO (modal) + variação de tamanho
   ============================================================ */
.card{cursor:pointer}
.citem__size{font-size:.72rem; color:var(--muted); margin:.1rem 0}

.modal__box--product{width:min(860px,100%); padding:1.4rem; max-height:92vh; overflow-y:auto}
.prod{display:grid; grid-template-columns:1fr 1fr; gap:1.5rem}
.prod__gallery{position:relative}
.prod__badges{position:absolute; top:.5rem; left:.5rem; display:flex; gap:.3rem; z-index:1}
.prod__main{background:var(--bg-2); border-radius:var(--r-lg); aspect-ratio:1/1; display:grid; place-items:center; padding:1.5rem; border:1px solid var(--line)}
.prod__main img{filter:drop-shadow(0 18px 22px rgba(12,12,15,.18))}
.prod__thumbs{display:flex; gap:.5rem; margin-top:.6rem}
.prod__thumb{width:64px; height:64px; border-radius:12px; border:1.5px solid var(--line); background:var(--bg-2); cursor:pointer; padding:.3rem; display:grid; place-items:center}
.prod__thumb.is-active{border-color:var(--ink); box-shadow:0 0 0 2px rgba(12,12,15,.12)}
.prod__info{display:flex; flex-direction:column; gap:.5rem}
.prod__name{font-family:var(--display); font-size:1.8rem; line-height:1; margin:.1rem 0}
.prod__price{display:flex; align-items:baseline; gap:.5rem}
.prod__price .now{font-family:var(--display); font-size:2rem; color:var(--ink)}
.prod__price .old{color:var(--muted); text-decoration:line-through; font-size:.9rem}
.prod__pix{font-size:.88rem; color:var(--pos)}
.prod__pix b{color:var(--pos)}
.prod__label{font-weight:700; font-size:.9rem; margin-top:.4rem; display:flex; align-items:center; gap:.5rem; flex-wrap:wrap}
.prod__low{color:var(--neon-2); font-weight:700; font-size:.78rem}
.sizes{display:flex; flex-wrap:wrap; gap:.4rem}
.size{min-width:44px; height:44px; padding:0 .4rem; border-radius:10px; border:1.5px solid var(--line); background:#fff; color:var(--ink); font-weight:700; cursor:pointer; transition:border-color .12s, transform .1s}
.size:hover{border-color:var(--ink); transform:translateY(-1px)}
.size.is-active{background:var(--ink); color:#fff; border-color:var(--ink)}
.prod__add{margin-top:.5rem}
.prod__perks{list-style:none; padding:0; margin:.5rem 0 0; display:flex; flex-direction:column; gap:.3rem; font-size:.84rem; color:var(--muted)}
.prod__desc{font-size:.88rem; color:var(--muted); margin:.4rem 0 0; line-height:1.55}
.shake{animation:shake .45s}
@keyframes shake{0%,100%{transform:translateX(0)}20%,60%{transform:translateX(-6px)}40%,80%{transform:translateX(6px)}}

@media (max-width:680px){
  .prod{grid-template-columns:1fr}
  .modal__box--product{padding:1rem}
}

/* ============================================================
   CATÁLOGO REAL + EFEITOS SURREAIS
   ============================================================ */

/* hero floatcard / preço Pix */
.floatcard{cursor:pointer}
.fc__pix,.prod__pixtag{color:var(--pos); font-weight:800; font-size:.8rem}
.fc__inst{color:var(--muted); font-size:.82rem; margin-top:.2rem}

/* combo (Kit 2) */
.combo{display:grid; grid-template-columns:1fr 1.1fr; gap:1.5rem; align-items:center; background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); padding:1.5rem; box-shadow:var(--shadow-sm)}
.combo__media{background:var(--bg-2); border-radius:var(--r); display:grid; place-items:center; padding:1.5rem}
.combo__media img{filter:drop-shadow(0 16px 20px rgba(12,12,15,.16))}
.combo__name{font-family:var(--display); font-size:1.8rem; margin:.4rem 0 .2rem}
.combo__desc{color:var(--muted); margin:0 0 .4rem; max-width:430px}
.combo__price{display:flex; align-items:baseline; gap:.5rem}
.combo__price .now{font-family:var(--display); font-size:2rem; color:var(--ink)}
.combo__pix{color:var(--pos); font-weight:800; font-size:.85rem}
.combo__cta{display:flex; gap:.6rem; margin-top:.9rem; flex-wrap:wrap}
@media (max-width:760px){ .combo{grid-template-columns:1fr} }

/* card "próximo drop" */
.card--soon{opacity:.94}
.card--soon .card__media{filter:grayscale(.25)}

/* reveal ao rolar */
.reveal{opacity:0; transform:translateY(18px); transition:opacity .5s ease, transform .5s ease}
.reveal.in{opacity:1; transform:none}

/* preserva 3D pro tilt */
.card[data-id]{transform-style:preserve-3d}

/* foguete voando */
.rocketfx{position:fixed; z-index:70; font-size:2rem; pointer-events:none; transition:transform .65s cubic-bezier(.5,-0.3,.3,1), opacity .65s ease; will-change:transform,opacity}

@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1; transform:none; transition:none}
  .marquee__track,.cosmos__ring,.cosmos__stars,.promo__stars,.promo__rocket,.hero__art .floatcard{animation:none !important}
}

/* ============================================================
   COMPAT WOOCOMMERCE — telas nativas na cara da marca
   (vitrine, página de produto, carrinho, checkout)
   ============================================================ */
.woocommerce-Price-amount.amount{font-family:var(--display); color:var(--ink); letter-spacing:.02em}
.card__price{font-family:var(--display); display:block}
.card__price .woocommerce-Price-amount{font-size:1.5rem}
.card__price del{opacity:.5; font-size:.85rem; margin-right:.3rem}
.card__price ins{text-decoration:none}
.fc__price .woocommerce-Price-amount{font-family:var(--display); font-size:1.6rem; color:var(--ink)}
.combo__price .woocommerce-Price-amount{font-size:2rem}

.woocommerce a.button, .woocommerce button.button, .woocommerce input.button,
.woocommerce #respond input#submit, .woocommerce a.button.alt, .woocommerce button.button.alt,
.wc-block-components-button, .wp-block-button__link{
  background:var(--ink) !important; color:#fff !important; border-radius:999px !important;
  font-weight:800 !important; padding:.85rem 1.4rem !important; border:0 !important; box-shadow:var(--shadow-sm);
  transition:transform .15s ease;
}
.woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover,
.woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover, .wc-block-components-button:hover{
  background:#000 !important; transform:translateY(-2px);
}

.single-product div.product{display:grid; grid-template-columns:1fr 1fr; gap:2.2rem; align-items:start}
.single-product div.product .product_title{font-family:var(--display); font-size:2.2rem; line-height:1}
.single-product .price{color:var(--ink)}
.single-product .price .woocommerce-Price-amount{font-size:2rem}
.single-product .woocommerce-product-gallery{border:1px solid var(--line); border-radius:var(--r-lg); padding:1rem; background:#fff}
.woocommerce span.onsale{background:var(--neon-2); color:#fff; border-radius:999px; font-weight:800}
@media (max-width:760px){ .single-product div.product{grid-template-columns:1fr} }

.woocommerce-tabs ul.tabs li.active{border-bottom-color:var(--neon)}
.woocommerce .star-rating span{color:#e6a700}
.woocommerce-message, .woocommerce-info{border-top-color:var(--neon) !important}
.woocommerce-message::before, .woocommerce-info::before{color:var(--neon-2) !important}
.woocommerce-cart .section, .woocommerce-checkout .section{padding-top:2rem}
.woocommerce table.shop_table{border-radius:var(--r); overflow:hidden}

/* ============================================================
   SURREAL v1.1 — starfield, cometa, brilho holográfico, burst
   ============================================================ */
.starfield{position:absolute; inset:0; z-index:0; pointer-events:none}
.hero__grid, .hero .marquee{position:relative; z-index:1}
.comet-dot{position:fixed; width:7px; height:7px; margin:-3px 0 0 -3px; border-radius:50%;
  background:radial-gradient(circle, #ccff00, rgba(204,255,0,0)); pointer-events:none; z-index:55;
  animation:cometfade .6s ease forwards}
@keyframes cometfade{to{transform:scale(.2); opacity:0}}
.burst{position:fixed; z-index:70; font-size:1rem; color:var(--neon-2); pointer-events:none;
  transition:transform .7s cubic-bezier(.2,.7,.2,1), opacity .7s ease; will-change:transform,opacity}
.card{position:relative}
.card::after{content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; opacity:0;
  transition:opacity .25s;
  background:radial-gradient(200px circle at var(--mx,50%) var(--my,50%), rgba(255,255,255,.55), rgba(204,255,0,.10) 40%, transparent 60%);
  mix-blend-mode:screen}
.card:hover::after{opacity:1}
@media (prefers-reduced-motion: reduce){ .starfield,.comet-dot,.burst{display:none !important} .card::after{display:none} }