:root{
    --grafite:#16181D; --grafite-2:#1c1f26; --grafite-3:#22262f; --grafite-4:#2a2f39;
    --lime:#B6FF1A; --verde:#12A33F; --gold:#FFC53D; --violeta:#6E4CFF; --branco:#FFFFFF; --off:#EDEFF2;
    --cinza:#9AA0A6; --rosa:#F23BC2; --ciano:#18E0C8; --laranja:#FF7A3C;
    --line:rgba(255,255,255,.08); --line-2:rgba(255,255,255,.14);
    --shadow:0 24px 60px -20px rgba(0,0,0,.7);
  }
  *{margin:0;padding:0;box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{font-family:'Inter',sans-serif;background:var(--grafite);color:var(--off);line-height:1.5;overflow-x:hidden;-webkit-font-smoothing:antialiased}
  h1,h2,h3,.display{font-family:'Baloo 2',cursive;font-weight:800;line-height:1.04;letter-spacing:-.01em}
  a{color:inherit;text-decoration:none}
  img{display:block;max-width:100%}
  .wrap{width:min(1280px,93vw);margin-inline:auto}
  .lime{color:var(--lime)} .vio{color:var(--violeta)}

  /* top bar */
  .topbar{background:linear-gradient(90deg,#0e7e32,#12A33F,#0e7e32);color:#fff;font-size:12.5px;font-weight:800;text-align:center;padding:9px 12px;letter-spacing:.04em;display:flex;gap:10px;align-items:center;justify-content:center;text-transform:uppercase}
  .topbar .bolt{color:var(--lime)}

  /* header */
  header{position:sticky;top:0;z-index:60;background:rgba(18,20,25,.86);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
  .nav{display:flex;align-items:center;gap:30px;padding:12px 0}
  .brand{flex-shrink:0;display:flex;align-items:center}
  .brand img{height:50px;width:auto;filter:drop-shadow(0 0 16px rgba(110,76,255,.35))}
  nav.menu{display:flex;gap:24px;margin-left:6px}
  nav.menu a{font-size:13.5px;font-weight:700;letter-spacing:.05em;color:var(--off);transition:color .2s;position:relative;padding:6px 0}
  nav.menu a:hover{color:var(--lime)}
  nav.menu a.active{color:var(--lime)}
  nav.menu a.hot{color:var(--lime)}
  nav.menu a::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:0;background:var(--lime);transition:width .25s}
  nav.menu a:hover::after,nav.menu a.active::after{width:100%}
  .tools{margin-left:auto;display:flex;align-items:center;gap:14px}
  .icbtn{width:40px;height:40px;display:grid;place-items:center;border-radius:11px;border:1px solid var(--line);background:var(--grafite-2);cursor:pointer;transition:.2s;color:var(--off)}
  .icbtn:hover{border-color:var(--lime);color:var(--lime)}
  .cart{position:relative}
  .cart .badge{position:absolute;top:-6px;right:-6px;background:var(--lime);color:#000;font-size:11px;font-weight:800;width:18px;height:18px;border-radius:50%;display:grid;place-items:center;font-family:'Baloo 2'}

  /* hero */
  .hero{position:relative;border-bottom:1px solid var(--line);background:#101218;padding:26px 0 0}
  .hero-banner{position:relative;border-radius:20px;overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow);line-height:0;background:#0e1015}
  .hero-banner img{width:100%;height:auto;max-height:480px;object-fit:cover;object-position:center;display:block}
  .eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:800;letter-spacing:.16em;color:var(--lime);background:rgba(182,255,26,.1);border:1px solid rgba(182,255,26,.32);padding:7px 14px;border-radius:999px;text-transform:uppercase;margin-bottom:14px}
  .hero-cta{display:flex;align-items:center;justify-content:space-between;gap:26px;flex-wrap:wrap;padding:22px 2px 30px}
  .hero-cta .lead{max-width:520px}
  .hero-cta p.sub{color:#c8ccd3;font-size:16px;font-weight:500}
  .hero-cta p.sub b{color:#fff}
  .hero .ctas{display:flex;gap:14px;flex-wrap:wrap;align-items:center;flex-shrink:0}
  .btn{position:relative;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:9px;font-family:'Baloo 2';font-weight:800;font-size:16.5px;padding:15px 26px;border-radius:14px;cursor:pointer;border:0;transition:transform .12s ease,box-shadow .2s ease;letter-spacing:.02em;text-transform:uppercase}
  .btn:active{transform:translateY(1px)}
  .btn-lime{background:linear-gradient(180deg,#33cb60 0%,#11A33F 52%,#0a7e2f 100%);color:#fff;text-shadow:0 1px 1px rgba(0,0,0,.35);box-shadow:0 5px 0 #075f24,0 12px 24px -6px rgba(17,163,63,.55),inset 0 1px 0 rgba(255,255,255,.4)}
  .btn-lime:hover{transform:translateY(-2px);box-shadow:0 7px 0 #075f24,0 18px 34px -6px rgba(17,163,63,.85),inset 0 1px 0 rgba(255,255,255,.45)}
  .btn-lime:active{transform:translateY(3px);box-shadow:0 2px 0 #075f24,0 6px 14px -6px rgba(17,163,63,.5),inset 0 1px 0 rgba(255,255,255,.35)}
  .btn-vio{background:linear-gradient(180deg,#8b6dff 0%,var(--violeta) 55%,#5a38f0 100%);color:#fff;box-shadow:0 5px 0 #3d22b8,0 12px 24px -6px rgba(110,76,255,.6),inset 0 1px 0 rgba(255,255,255,.35)}
  .btn-vio:hover{transform:translateY(-2px);box-shadow:0 7px 0 #3d22b8,0 18px 34px -6px rgba(110,76,255,.85),inset 0 1px 0 rgba(255,255,255,.4)}
  .btn-vio:active{transform:translateY(3px);box-shadow:0 2px 0 #3d22b8,0 6px 14px -6px rgba(110,76,255,.5)}
  .btn-ghost{background:transparent;border:1.6px solid var(--line-2);color:var(--off)}
  .btn-ghost:hover{border-color:var(--lime);color:var(--lime)}
  .btn-vghost{background:rgba(110,76,255,.08);border:1.6px solid rgba(110,76,255,.55);color:#b9a6ff}
  .btn-vghost:hover{transform:translateY(-2px);border-color:var(--violeta);background:rgba(110,76,255,.16);color:#fff}
  /* botão "entrar no grupo": neutro (contorno claro) com só o ícone do Zap em verde — secundário e discreto */
  .btn-wa{background:transparent;border:1.6px solid var(--line-2);color:var(--off)}
  .btn-wa:hover{transform:translateY(-2px);border-color:var(--off);background:rgba(255,255,255,.05);color:#fff}
  .btn-wa svg{color:#25D366}
  /* attention CTA: glow pulse + shine sweep */
  .cta-attn{font-size:17.5px;padding:17px 34px;animation:ctaGlow 1.8s ease-in-out infinite}
  .cta-attn::after{content:"";position:absolute;top:0;left:-130%;width:55%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.65),transparent);transform:skewX(-20deg);animation:ctaShine 2.8s ease-in-out infinite;pointer-events:none}
  @keyframes ctaGlow{0%,100%{filter:drop-shadow(0 0 3px rgba(17,163,63,.45))}50%{filter:drop-shadow(0 0 16px rgba(17,163,63,.95))}}
  @keyframes ctaShine{0%{left:-130%}60%{left:160%}100%{left:160%}}
  @media(prefers-reduced-motion:reduce){.cta-attn{animation:none}.cta-attn::after{display:none}}
  /* benefits strip */
  .benefits{display:grid;grid-template-columns:repeat(4,1fr);gap:0;background:var(--grafite-2);border:1px solid var(--line);border-radius:16px;margin-top:6px;position:relative;z-index:20;overflow:hidden}
  .ben{display:flex;align-items:center;gap:14px;padding:20px 22px;border-right:1px solid var(--line)}
  .ben:last-child{border-right:0}
  .ben .ic{width:44px;height:44px;flex-shrink:0;border-radius:12px;display:grid;place-items:center}
  .ben.l .ic,.ben.v .ic{background:rgba(182,255,26,.12);color:var(--lime)}
  .ben .tx small{display:block;font-size:11px;color:#fff;font-weight:700;letter-spacing:.04em;text-transform:uppercase}
  .ben .tx b{font-family:'Baloo 2';font-weight:800;font-size:14.5px;line-height:1.05}
  .ben.l .tx b,.ben.v .tx b{color:var(--cinza)}

  /* sections */
  .sec{padding:58px 0}
  .sec-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:28px;gap:20px;flex-wrap:wrap}
  .sec-title{position:relative;display:inline-block}
  .sec-title h2{font-size:clamp(26px,3.4vw,40px);text-transform:uppercase;font-style:italic}
  .sec-title::after{content:"";display:block;height:5px;width:70%;background:var(--lime);border-radius:3px;margin-top:6px;transform:skewX(-18deg)}
  .all-btn{font-family:'Baloo 2';font-weight:800;font-size:13px;letter-spacing:.05em;color:#fff;background:var(--grafite-3);border:1px solid var(--line);padding:11px 18px;border-radius:11px;display:inline-flex;gap:8px;align-items:center;text-transform:uppercase;transition:.2s}
  .all-btn:hover{border-color:var(--lime);color:var(--lime)}

  /* product grid */
  .grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
  .card{background:var(--grafite-2);border:1px solid var(--line);border-radius:18px;overflow:hidden;transition:transform .2s,border-color .2s;position:relative;display:flex;flex-direction:column}
  .card:hover{transform:translateY(-6px);border-color:rgba(182,255,26,.4)}
  .card .tag{position:absolute;top:12px;left:12px;z-index:2;font-family:'Baloo 2';font-weight:800;font-size:11px;letter-spacing:.05em;padding:5px 11px;border-radius:999px;text-transform:uppercase}
  /* tags de oferta: cor única = lime (cor de "achado/oferta" da marca). "EM BREVE" fica neutro (não é oferta). */
  .tag.novo{background:var(--grafite-4);color:var(--cinza)}
  .tag.lan{background:var(--lime);color:#000}
  .tag.oferta{background:var(--lime);color:#000}
  .tag.hot{background:var(--lime);color:#000}
  .card .imgwrap{background:#fff;aspect-ratio:1;display:grid;place-items:center;overflow:hidden}
  .card .imgwrap img{width:86%;transition:transform .3s}
  .card:hover .imgwrap img{transform:scale(1.05)}
  .card .body{padding:15px 16px 18px;display:flex;flex-direction:column;flex:1}
  .card .pname{font-size:14px;font-weight:400;color:#fff;line-height:1.3;min-height:36px}
  .card .crate{font-size:12px;color:var(--cinza);margin:7px 0}
  .card .crate b{color:var(--lime)}
  .card .pricerow{margin-top:auto;padding-top:8px}
  .card .pricerow .now{font-family:'Baloo 2';font-weight:800;font-size:21px;color:#fff}
  .card .pricerow .old{font-size:12px;color:var(--cinza);text-decoration:line-through;margin-left:6px}
  .card .inst{font-size:11.5px;color:var(--cinza);margin-top:3px}
  .card .cbtn{margin-top:12px;width:100%;justify-content:center;font-size:14px;padding:12px;position:relative;z-index:2}
  /* link esticado: cobre o card todo (vai pra página do produto); botão/coração/tag ficam por cima (z-index 2) */
  .card-link{position:absolute;inset:0;z-index:1;border-radius:18px}
  .heart{position:absolute;top:11px;right:11px;z-index:2;width:32px;height:32px;border-radius:50%;background:rgba(18,20,25,.7);display:grid;place-items:center;color:#fff;cursor:pointer;transition:.2s;border:1px solid var(--line)}
  .heart:hover{color:var(--rosa);border-color:var(--rosa)}

  /* PDP */
  .breadcrumb{font-size:12.5px;color:var(--cinza);margin-bottom:22px;display:flex;gap:8px;flex-wrap:wrap;align-items:center}
  .breadcrumb a:hover{color:var(--lime)} .breadcrumb .sep{opacity:.5}
  .breadcrumb .cur{color:var(--lime);font-weight:600}
  .pdp-grid{display:grid;grid-template-columns:96px 1fr 1fr;gap:24px;align-items:start}
  .pthumbs{display:flex;flex-direction:column;gap:12px}
  .pthumbs .t{background:#fff;border-radius:12px;border:2px solid var(--line);overflow:hidden;cursor:pointer;aspect-ratio:1;display:grid;place-items:center;transition:.2s}
  .pthumbs .t img{width:84%}
  .pthumbs .t:hover,.pthumbs .t.active{border-color:var(--lime)}
  .pmain{background:#fff;border-radius:20px;overflow:hidden;position:relative;border:1px solid var(--line)}
  .pmain img{width:100%}
  .salve-badge{position:absolute;top:16px;left:16px;background:var(--lime);color:#000;font-family:'Baloo 2';font-weight:800;font-size:13px;padding:7px 14px;border-radius:999px;display:flex;gap:6px;align-items:center;z-index:3;box-shadow:0 8px 20px -6px rgba(0,0,0,.4)}
  .pmain .heart{top:16px;right:16px;width:38px;height:38px}

  .pinfo .ptag{display:inline-flex;align-items:center;gap:6px;background:var(--lime);color:#000;font-family:'Baloo 2';font-weight:800;font-size:11px;padding:5px 12px;border-radius:999px;text-transform:uppercase;margin-bottom:14px}
  .pinfo h1.title{font-family:'Baloo 2';font-weight:800;font-size:30px;color:#fff;line-height:1.08}
  .pinfo .pdesc{color:var(--cinza);font-size:14px;margin:12px 0 18px;max-width:440px}
  .specs{display:flex;flex-direction:column;gap:12px;margin:18px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:18px 0}
  .spec{display:flex;align-items:center;gap:13px}
  .spec .si{width:38px;height:38px;flex-shrink:0;border-radius:10px;background:var(--grafite-3);display:grid;place-items:center;color:var(--lime)}
  .spec small{display:block;font-size:11px;color:var(--cinza);font-weight:700;letter-spacing:.05em;text-transform:uppercase}
  .spec b{font-size:14px;color:#fff;font-weight:600}
  .rating{display:flex;align-items:center;gap:10px;margin:14px 0;flex-wrap:wrap}
  .stars{color:var(--gold);letter-spacing:2px;font-size:15px}
  .card .crate .st{color:var(--gold)}
  .rating .score{font-weight:800;color:#fff;font-family:'Baloo 2'}
  .rating .muted{color:var(--cinza);font-size:13px}
  .price-now{font-family:'Baloo 2';font-weight:800;font-size:34px;color:#fff;line-height:1;margin:0 0 6px;text-shadow:0 2px 12px rgba(0,0,0,.3)}
  .price-old{color:var(--cinza);text-decoration:line-through;font-size:15px;margin-left:8px;-webkit-text-fill-color:var(--cinza)}
  .inst-box{background:var(--grafite-3);border:1px solid var(--line);border-radius:14px;padding:13px 16px;margin:14px 0}
  .inst-box .big{font-weight:600;color:#c2c7cf;font-size:13px}
  .inst-box .pix{color:#e3e6eb;font-size:13px;font-weight:600;margin-top:10px;display:flex;align-items:center;gap:7px;flex-wrap:wrap}
  .inst-box .pix .val{color:#2fd968;font-weight:800}
  .inst-box .pix b{display:inline-block;background:#12a33f;color:#fff;font-weight:800;font-size:11px;letter-spacing:.02em;padding:2px 9px;border-radius:7px;margin-left:2px;vertical-align:middle}
  .opt-label{display:flex;justify-content:space-between;align-items:center;font-size:12px;font-weight:700;letter-spacing:.08em;color:var(--cinza);text-transform:uppercase;margin:18px 0 10px}
  .opt-label a{color:var(--cinza);text-decoration:underline;font-size:11px}
  .opts{display:flex;gap:10px;flex-wrap:wrap}
  .opt{border:1.5px solid var(--line-2);background:var(--grafite-2);color:var(--off);padding:11px 18px;border-radius:11px;font-size:13px;font-weight:700;cursor:pointer;transition:.18s}
  .opt:hover{border-color:var(--cinza)}
  .opt.sel{border-color:#12A33F;color:#3fd17a;background:rgba(18,163,63,.12)}
  .buy-col{display:flex;flex-direction:column;gap:11px;margin-top:20px}
  .buy-col .btn{width:100%;justify-content:center;font-size:17.5px;padding:17px}
  .ship-note{display:flex;align-items:center;gap:10px;margin-top:16px;font-size:13px;color:var(--cinza)}
  .ship-note .free{color:var(--lime);font-weight:800}
  .ship-note .strike{text-decoration:line-through}

  /* values strip */
  .values{display:grid;grid-template-columns:repeat(4,1fr);gap:0;background:var(--grafite-2);border:1px solid var(--line);border-radius:18px;overflow:hidden;margin-top:40px}
  .values .val{text-align:center;padding:30px 20px;border-right:1px solid var(--line)}
  .values .val:last-child{border-right:0}
  .values .val .vi{width:48px;height:48px;margin:0 auto 12px;border-radius:13px;background:var(--grafite-3);display:grid;place-items:center;color:var(--lime)}
  .values .val h4{font-family:'Baloo 2';font-weight:800;font-size:14px;color:#fff;text-transform:uppercase;letter-spacing:.03em}
  .values .val p{font-size:12.5px;color:var(--cinza);margin-top:5px}

  /* reviews */
  .rev-head{display:flex;align-items:center;gap:24px;margin-bottom:26px;flex-wrap:wrap}
  .rev-big{display:flex;align-items:center;gap:14px}
  .rev-big .num{font-family:'Baloo 2';font-weight:800;font-size:54px;color:var(--lime);line-height:1}
  .rev-big .st{color:var(--gold);font-size:18px;letter-spacing:2px}
  .rev-big small{color:var(--cinza);font-size:13px}
  .reviews{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
  .review{background:var(--grafite-2);border:1px solid var(--line);border-radius:16px;padding:22px}
  .review .rtop{display:flex;align-items:center;gap:12px;margin-bottom:12px}
  .review .av{width:46px;height:46px;border-radius:50%;overflow:hidden;border:2px solid var(--lime);flex-shrink:0;background:var(--grafite-3)}
  .review .av img{width:100%;height:100%;object-fit:cover;object-position:top}
  .review .who{font-weight:700;color:#fff;font-size:14px}
  .review .st{color:var(--gold);font-size:13px;letter-spacing:1px}
  .review p{font-size:14px;color:var(--off);line-height:1.55}

  /* newsletter */
  .news{position:relative;overflow:hidden;background:linear-gradient(120deg,var(--grafite-2),var(--grafite));border:1px solid var(--line);border-radius:26px;padding:40px 44px;display:grid;grid-template-columns:1.2fr auto;gap:30px;align-items:center}
  .news::before{content:"";position:absolute;inset:0;background:radial-gradient(50% 120% at 0% 50%,rgba(182,255,26,.12),transparent 55%),radial-gradient(60% 120% at 100% 50%,rgba(110,76,255,.22),transparent 55%);pointer-events:none}
  .news .nt{position:relative;z-index:2}
  .news .kick{font-size:12px;font-weight:800;letter-spacing:.2em;color:var(--lime);text-transform:uppercase}
  .news h2{font-size:clamp(26px,3vw,40px);text-transform:uppercase;font-style:italic;margin:8px 0 6px}
  .news p{color:var(--cinza);font-size:14px;max-width:430px}
  .news form{display:flex;gap:10px;margin-top:20px;flex-wrap:wrap}
  .news input{flex:1;min-width:220px;background:var(--grafite-3);border:1.5px solid var(--line);border-radius:12px;padding:14px 16px;color:#fff;font-family:inherit;font-size:14px}
  .news input:focus{outline:0;border-color:var(--lime)}
  .news .duo-img{position:relative;z-index:2;width:210px;justify-self:end}
  .news .duo-img img{width:100%;border-radius:18px}

  /* footer */
  footer{border-top:1px solid var(--line);margin-top:40px;padding:50px 0 30px;background:var(--grafite-2)}
  .fgrid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:36px;margin-bottom:36px}
  .fcol h5{font-family:'Baloo 2';font-weight:700;font-size:13px;letter-spacing:.12em;color:var(--cinza);text-transform:uppercase;margin-bottom:16px}
  .fcol a{display:block;font-size:14px;color:var(--off);margin-bottom:11px;transition:color .2s}
  .fcol a:hover{color:var(--lime)}
  .fbrand img{height:50px;margin-bottom:14px}
  .fbrand p{font-size:13px;color:var(--cinza);max-width:270px}
  .pays{display:flex;gap:8px;margin-top:16px;flex-wrap:wrap}
  .pay{background:var(--grafite-3);border:1px solid var(--line);border-radius:8px;padding:7px 11px;font-size:11px;font-weight:700;color:var(--cinza)}
  .socials{display:flex;gap:10px}
  .socials a{width:38px;height:38px;border-radius:11px;border:1px solid var(--line);display:grid;place-items:center;color:var(--off);transition:.2s}
  .socials a:hover{border-color:var(--lime);color:var(--lime);transform:translateY(-3px)}
  .fbottom{border-top:1px solid var(--line);padding-top:22px;display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;font-size:12.5px;color:var(--cinza)}
  .fbottom .slogan{color:var(--lime);font-family:'Baloo 2';font-weight:700}

  @media(max-width:1000px){
    nav.menu{display:none}
    .benefits{grid-template-columns:repeat(2,1fr)}
    .ben:nth-child(2){border-right:0}
    .grid{grid-template-columns:repeat(2,1fr)}
    .pdp-grid{grid-template-columns:1fr}
    .pthumbs{flex-direction:row;order:2}
    .values{grid-template-columns:repeat(2,1fr)}
    .values .val:nth-child(2){border-right:0}
    .reviews{grid-template-columns:1fr}
    .news{grid-template-columns:1fr}
    .news .duo-img{justify-self:start;width:170px}
    .fgrid{grid-template-columns:1fr 1fr}
  }
  @media(max-width:640px){
    /* hero: botões empilhados full-width (não vazam mais pra fora) */
    .hero{padding-top:18px}
    .hero-cta{padding:18px 0 26px;gap:16px}
    .hero-cta .lead{max-width:100%}
    .hero-cta p.sub{font-size:14.5px}
    .hero .ctas{width:100%;gap:12px}
    .hero .ctas .btn{width:100%;flex:1 1 100%}
    .cta-attn{font-size:16px;padding:15px 22px}
    .hero-banner img{max-height:250px}
    .eyebrow{font-size:11px;letter-spacing:.1em}
    /* header e topbar compactos */
    .nav{gap:12px}
    .brand img{height:40px}
    header .btn-wa{padding:9px 13px!important;font-size:12px!important}
    header .btn-wa svg{width:15px;height:15px}
    .topbar{font-size:11px;letter-spacing:.02em;padding:8px 10px;gap:7px}
    /* seções e cards mais justos */
    .sec{padding:40px 0}
    .sec-title h2{font-size:28px}
  }
  @media(max-width:560px){
    .benefits{grid-template-columns:1fr}.ben{border-right:0;border-bottom:1px solid var(--line)}
    .grid{grid-template-columns:1fr 1fr;gap:12px}
    .card .tag{font-size:10px;padding:4px 9px;max-width:calc(100% - 56px)}
    .card .body{padding:13px 13px 16px}
    .card .pname{font-size:13px;min-height:34px}
    .card .pricerow .now{font-size:19px}
    .card .cbtn{font-size:13px;padding:11px}
    .values{grid-template-columns:1fr}.values .val{border-right:0;border-bottom:1px solid var(--line)}
    .fgrid{grid-template-columns:1fr}
    .news{padding:30px 24px}
  }