/* =====================================================================
   TEIA STORE — design system
   ===================================================================== */
:root{
  --red:#e3191f; --red-dark:#b80f14; --red-soft:#fdebec;
  --blue:#1747a6; --blue-dark:#0d2c6e; --blue-soft:#eaf0fc;
  --navy:#0a1433; --navy-2:#13224f;
  --yellow:#ffd23f; --yellow-dark:#f2b705;
  --green:#0e9f5a; --green-dark:#0a7d46; --green-soft:#e6f6ee;
  --ink:#121829; --muted:#5d6680; --muted-2:#98a0b6;
  --bg:#f3f5fa; --surface:#fff; --line:#e3e7f0; --line-strong:#cfd5e3;
  --star:#f5a623;
  --r:12px; --r-sm:8px; --r-lg:20px;
  --shadow:0 4px 18px rgba(16,24,48,.08);
  --shadow-lg:0 14px 40px rgba(16,24,48,.16);
  --maxw:1200px;
  --font:"Nunito",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  --display:"Bangers","Impact",system-ui,sans-serif;
  --web:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cg fill='none' stroke='white' stroke-opacity='.16' stroke-width='1.2'%3E%3Cpath d='M0 0L200 200M0 0L200 100M0 0L100 200M0 0L200 0M0 0L0 200M0 0L200 45M0 0L45 200M0 0L200 150M0 0L150 200'/%3E%3Cpath d='M40 0Q34 34 0 40M80 0Q68 68 0 80M120 0Q102 102 0 120M160 0Q136 136 0 160M200 0Q170 170 0 200'/%3E%3C/g%3E%3C/svg%3E");
  /* A teia nasce do canto de cima à esquerda; estas são a mesma teia nascendo dos outros cantos. */
  --web-cd:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cg transform='translate(200 0) scale(-1 1)' fill='none' stroke='white' stroke-opacity='.16' stroke-width='1.2'%3E%3Cpath d='M0 0L200 200M0 0L200 100M0 0L100 200M0 0L200 0M0 0L0 200M0 0L200 45M0 0L45 200M0 0L200 150M0 0L150 200'/%3E%3Cpath d='M40 0Q34 34 0 40M80 0Q68 68 0 80M120 0Q102 102 0 120M160 0Q136 136 0 160M200 0Q170 170 0 200'/%3E%3C/g%3E%3C/svg%3E");
  --web-bd:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cg transform='translate(200 200) scale(-1 -1)' fill='none' stroke='white' stroke-opacity='.16' stroke-width='1.2'%3E%3Cpath d='M0 0L200 200M0 0L200 100M0 0L100 200M0 0L200 0M0 0L0 200M0 0L200 45M0 0L45 200M0 0L200 150M0 0L150 200'/%3E%3Cpath d='M40 0Q34 34 0 40M80 0Q68 68 0 80M120 0Q102 102 0 120M160 0Q136 136 0 160M200 0Q170 170 0 200'/%3E%3C/g%3E%3C/svg%3E");
  /* Teia grande do rodapé: mais fios e voltas, nasce do canto de baixo à direita e cobre tudo (fio fino em qualquer tamanho). */
  --web-rodape:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 400'%3E%3Cg fill='none' stroke='white' stroke-opacity='.13' stroke-width='1.2' vector-effect='non-scaling-stroke'%3E%3Cpath vector-effect='non-scaling-stroke' d='M400 400L-240 400M400 400L-232.1 299.9M400 400L-208.7 202.2M400 400L-170.2 109.4M400 400L-117.8 23.8M400 400L-52.5 -52.5M400 400L23.8 -117.8M400 400L109.4 -170.2M400 400L202.2 -208.7M400 400L299.9 -232.1M400 400L400 -240'/%3E%3Cpath vector-effect='non-scaling-stroke' d='M366 400Q369.6 397.6 366.4 394.7Q370.3 392.9 367.7 389.5Q371.8 388.3 369.7 384.6Q374 384.1 372.5 380Q376.8 380.2 376 376Q380.2 376.8 380 372.5Q384.1 374 384.6 369.7Q388.3 371.8 389.5 367.7Q392.9 370.3 394.7 366.4Q397.6 369.6 400 366M326 400Q333.8 394.8 326.9 388.4Q335.4 384.5 329.6 377.1Q338.7 374.6 334.1 366.4Q343.4 365.3 340.1 356.5Q349.5 356.9 347.7 347.7Q356.9 349.5 356.5 340.1Q365.3 343.4 366.4 334.1Q374.6 338.7 377.1 329.6Q384.5 335.4 388.4 326.9Q394.8 333.8 400 326M280 400Q292.7 391.6 281.5 381.2Q295.3 374.9 285.9 362.9Q300.5 358.8 293.1 345.5Q308.2 343.7 302.9 329.5Q318.1 330.1 315.1 315.1Q330.1 318.1 329.5 302.9Q343.7 308.2 345.5 293.1Q358.8 300.5 362.9 285.9Q374.9 295.3 381.2 281.5Q391.6 292.7 400 280M228 400Q246.2 387.9 230.1 373.1Q249.9 364 236.4 346.8Q257.4 340.9 246.7 321.9Q268.4 319.4 260.8 298.9Q282.7 299.8 278.4 278.4Q299.8 282.7 298.9 260.8Q319.4 268.4 321.9 246.7Q340.9 257.4 346.8 236.4Q364 249.9 373.1 230.1Q387.9 246.2 400 228M170 400Q194.3 383.8 172.8 364Q199.3 351.8 181.3 328.9Q209.3 321 195.1 295.6Q224 292.2 213.9 264.8Q243.1 266 237.4 237.4Q266 243.1 264.8 213.9Q292.2 224 295.6 195.1Q321 209.3 328.9 181.3Q351.8 199.3 364 172.8Q383.8 194.3 400 170M106 400Q137 379.3 109.6 354Q143.5 338.4 120.4 309.1Q156.3 299.1 138 266.5Q175.1 262.2 162.1 227.2Q199.4 228.7 192.1 192.1Q228.7 199.4 227.2 162.1Q262.2 175.1 266.5 138Q299.1 156.3 309.1 120.4Q338.4 143.5 354 109.6Q379.3 137 400 106M36 400Q74.4 374.4 40.5 343.1Q82.4 323.8 53.8 287.5Q98.3 275 75.7 234.7Q121.5 229.4 105.5 186Q151.7 187.9 142.6 142.6Q187.9 151.7 186 105.5Q229.4 121.5 234.7 75.7Q275 98.3 287.5 53.8Q323.8 82.4 343.1 40.5Q374.4 74.4 400 36M-40 400Q6.4 369 -34.6 331.2Q16.1 307.8 -18.5 264Q35.3 248.9 8 200.2Q63.4 193.7 44 141.4Q99.8 143.6 88.9 88.9Q143.6 99.8 141.4 44Q193.7 63.4 200.2 8Q248.9 35.3 264 -18.5Q307.8 16.1 331.2 -34.6Q369 6.4 400 -40M-122 400Q-66.9 363.3 -115.6 318.3Q-55.4 290.7 -96.5 238.7Q-32.7 220.8 -65.1 163Q0.7 155.3 -22.3 93.2Q43.9 95.8 30.9 30.9Q95.8 43.9 93.2 -22.3Q155.3 0.7 163 -65.1Q220.8 -32.7 238.7 -96.5Q290.7 -55.4 318.3 -115.6Q363.3 -66.9 400 -122'/%3E%3C/g%3E%3C/svg%3E");
  --dots:radial-gradient(rgba(255,255,255,.14) 1.2px,transparent 1.3px);
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font-family:inherit;font-size:inherit;color:inherit}
button{cursor:pointer}
.container{max-width:var(--maxw);margin:0 auto;padding:0 16px}
.icon{width:20px;height:20px;flex:0 0 auto;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.display{font-family:var(--display);letter-spacing:.5px;font-weight:400;line-height:1}
:focus-visible{outline:3px solid var(--yellow);outline-offset:2px}

/* ---------- Botões ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:999px;padding:14px 26px;font-weight:800;font-size:15px;line-height:1.1;transition:transform .12s,box-shadow .15s,background .15s;text-align:center}
.btn:active{transform:scale(.97)}
.btn-red{background:var(--red);color:#fff;box-shadow:0 6px 0 var(--red-dark),0 10px 20px rgba(227,25,31,.3)}
.btn-red:hover{background:#f0262c}
.btn-red:active{box-shadow:0 2px 0 var(--red-dark)}
.btn-blue{background:var(--blue);color:#fff;box-shadow:0 6px 0 var(--blue-dark)}
.btn-green{background:var(--green);color:#fff;box-shadow:0 6px 0 var(--green-dark),0 10px 20px rgba(14,159,90,.25)}
.btn-green:hover{background:#10b064}
.btn-yellow{background:var(--yellow);color:var(--navy);box-shadow:0 6px 0 var(--yellow-dark)}
.btn-ghost{background:#fff;color:var(--blue-dark);border:2px solid var(--line-strong)}
.btn-ghost:hover{border-color:var(--blue)}
.btn-block{width:100%}
.btn-lg{padding:18px 28px;font-size:17px}
.btn-sm{padding:9px 16px;font-size:13px}
.btn[disabled]{opacity:.55;pointer-events:none}

/* ---------- Barra de anúncios ---------- */
.announce{background:var(--navy);color:#fff;font-size:13px;font-weight:700;text-align:center;height:36px;overflow:hidden;position:relative}
.announce-track{display:flex;flex-direction:column;transition:transform .5s ease}
.announce-item{height:36px;display:flex;align-items:center;justify-content:center;gap:8px;padding:0 12px}
.announce b{color:var(--yellow)}

/* ---------- Header ---------- */
.header{position:sticky;top:0;z-index:60;background:var(--red);background-image:var(--web);background-size:220px;background-position:left top;color:#fff;box-shadow:0 2px 0 var(--red-dark)}
.header-inner{display:flex;align-items:center;gap:16px;height:68px}
.logo{display:flex;align-items:center;gap:8px;flex:0 0 auto}
.logo-mark{width:40px;height:40px;border-radius:50%;background:#fff;color:var(--red);display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 3px var(--navy)}
.logo-mark svg{width:28px;height:28px}
.logo-text{font-family:var(--display);font-size:30px;letter-spacing:1px;line-height:1;text-shadow:2px 2px 0 var(--navy)}
.logo-text small{display:block;font-family:var(--font);font-size:10px;font-weight:800;letter-spacing:1.6px;text-shadow:none;opacity:.9;margin-top:2px}
.search{flex:1;max-width:520px;position:relative}
.search input{width:100%;border:0;border-radius:999px;padding:12px 46px 12px 18px;background:#fff;color:var(--ink);font-weight:600}
.search button{position:absolute;right:4px;top:4px;bottom:4px;width:40px;border:0;border-radius:50%;background:var(--navy);color:#fff;display:flex;align-items:center;justify-content:center}
.header-actions{display:flex;align-items:center;gap:6px;margin-left:auto}
.hbtn{position:relative;display:flex;flex-direction:column;align-items:center;gap:2px;background:none;border:0;color:#fff;font-size:11px;font-weight:800;padding:6px 8px;border-radius:10px}
.hbtn:hover{background:rgba(0,0,0,.12)}
.hbtn .icon{width:24px;height:24px}
.cart-count{position:absolute;top:0;right:2px;min-width:20px;height:20px;border-radius:10px;background:var(--yellow);color:var(--navy);font-size:11px;font-weight:900;display:flex;align-items:center;justify-content:center;padding:0 5px;box-shadow:0 0 0 2px var(--red)}
.cart-count.bump{animation:bump .4s}
@keyframes bump{50%{transform:scale(1.4)}}
.menu-btn{display:none}
.nav{background:var(--navy);color:#fff}
.nav ul{list-style:none;margin:0;padding:0;display:flex;gap:4px;overflow-x:auto;scrollbar-width:none}
.nav ul::-webkit-scrollbar{display:none}
.nav a{display:flex;align-items:center;gap:6px;padding:11px 14px;font-weight:800;font-size:14px;white-space:nowrap;border-bottom:3px solid transparent}
.nav a:hover,.nav a.active{border-color:var(--yellow);color:var(--yellow)}
.nav a.hot{color:var(--yellow)}

/* ---------- Hero ---------- */
.hero{position:relative;background:var(--blue-dark);background-image:var(--web),linear-gradient(135deg,var(--blue) 0%,var(--blue-dark) 55%,var(--navy) 100%);background-size:420px,cover;background-repeat:no-repeat;color:#fff;overflow:hidden}
.hero::after{content:"";position:absolute;inset:0;background-image:var(--dots);background-size:14px 14px;mask-image:linear-gradient(90deg,transparent 40%,#000);pointer-events:none}
.hero-inner{position:relative;z-index:1;display:grid;grid-template-columns:1.1fr .9fr;gap:30px;align-items:center;padding:52px 16px 60px}
.hero-kicker{display:inline-flex;align-items:center;gap:8px;background:var(--yellow);color:var(--navy);font-weight:900;font-size:13px;padding:6px 14px;border-radius:999px;transform:rotate(-2deg);box-shadow:3px 3px 0 var(--navy)}
.hero h1{font-family:var(--display);font-weight:400;font-size:clamp(44px,6.4vw,82px);line-height:.95;margin:16px 0 14px;letter-spacing:1px;text-shadow:4px 4px 0 var(--red)}
.hero h1 em,.hero h1 .hl{font-style:normal;color:var(--yellow)}
.hero p.lead{font-size:18px;max-width:520px;margin:0 0 22px;opacity:.95}
.hero-ctas{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.hero-trust{display:flex;gap:18px;flex-wrap:wrap;margin-top:24px;font-size:13px;font-weight:700;opacity:.95}
.hero-trust span{display:flex;align-items:center;gap:6px}
.hero-trust .icon{color:var(--yellow);width:18px;height:18px}
.hero-art{position:relative;aspect-ratio:1/1;max-width:440px;justify-self:center;width:100%}
.hero-burst{position:absolute;inset:6%;background:var(--red);clip-path:polygon(50% 0,61% 13%,77% 5%,79% 22%,96% 22%,88% 38%,100% 50%,88% 62%,96% 78%,79% 78%,77% 95%,61% 87%,50% 100%,39% 87%,23% 95%,21% 78%,4% 78%,12% 62%,0 50%,12% 38%,4% 22%,21% 22%,23% 5%,39% 13%);animation:spin 40s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.hero-spider{position:absolute;inset:22%;color:#fff;filter:drop-shadow(6px 6px 0 var(--navy))}
.hero-tag{position:absolute;background:#fff;color:var(--navy);font-weight:900;border-radius:14px;padding:10px 14px;box-shadow:4px 4px 0 var(--navy);font-size:14px;line-height:1.2}
.hero-tag b{display:block;font-family:var(--display);font-weight:400;font-size:26px;color:var(--red);letter-spacing:.5px}
.hero-tag.t1{top:4%;right:0;transform:rotate(4deg)}
.hero-tag.t2{bottom:8%;left:-2%;transform:rotate(-4deg)}

/* Countdown */
.countdown{display:inline-flex;align-items:center;gap:10px;background:rgba(0,0,0,.25);border:1px solid rgba(255,255,255,.2);border-radius:14px;padding:8px 12px;margin-top:22px;flex-wrap:wrap}
.countdown-label{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.5px}
.cd-boxes{display:flex;gap:6px}
.cd-box{background:#fff;color:var(--navy);border-radius:8px;min-width:44px;text-align:center;padding:4px 6px}
.cd-box b{display:block;font-family:var(--display);font-size:24px;font-weight:400;line-height:1}
.cd-box small{font-size:9px;font-weight:800;text-transform:uppercase;color:var(--muted)}

/* ---------- Faixa de benefícios ---------- */
.perks{background:#fff;border-bottom:1px solid var(--line)}
.perks-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;padding:16px}
.perk{display:flex;align-items:center;gap:10px}
.perk-ic{width:42px;height:42px;border-radius:50%;background:var(--red-soft);color:var(--red);display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.perk b{display:block;font-size:14px;line-height:1.2}
.perk span{font-size:12px;color:var(--muted)}

/* ---------- Seções ---------- */
.section{padding:48px 0}
[data-sec]:has(> .section)+[data-sec]>.section{padding-top:0}
.hero-img{position:relative;z-index:1;width:100%;height:100%;object-fit:cover;border-radius:28px;box-shadow:8px 8px 0 var(--navy)}
.img-banner img{width:100%;border-radius:var(--r-lg);display:block}
.img-banner.full img{border-radius:0}
.img-ph{border:3px dashed var(--line-strong);border-radius:var(--r-lg);padding:50px 20px;text-align:center;color:var(--muted);font-weight:800}
.rich{max-width:760px;margin:0 auto;text-align:center}
.rich.left{text-align:left;margin:0}
.rich p{color:var(--muted);font-size:16px}
.newsletter .hl,.guarantee .hl{color:var(--red)}
.promo-media img{width:100%;border-radius:var(--r-lg)}
.section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:22px}
.section-title{font-family:var(--display);font-weight:400;font-size:clamp(30px,4vw,44px);letter-spacing:.8px;line-height:1;margin:0;color:var(--navy)}
.section-title .hl{color:var(--red)}
.section-sub{color:var(--muted);margin:6px 0 0;font-size:15px}
.link-more{font-weight:800;color:var(--blue);display:flex;align-items:center;gap:4px;white-space:nowrap}
.link-more:hover{color:var(--red)}

/* Categorias */
.cats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.cat-card{position:relative;border-radius:var(--r-lg);overflow:hidden;aspect-ratio:4/5;color:#fff;display:flex;flex-direction:column;justify-content:flex-end;padding:18px;background:var(--blue);background-image:var(--web),linear-gradient(160deg,var(--c1),var(--c2));background-size:260px,cover;background-repeat:no-repeat;box-shadow:var(--shadow);transition:transform .2s,box-shadow .2s}
.cat-card:hover{transform:translateY(-4px) rotate(-.5deg);box-shadow:var(--shadow-lg)}
.cat-card .cat-emoji{position:absolute;top:14%;left:50%;transform:translateX(-50%);font-size:clamp(64px,9vw,96px);filter:drop-shadow(4px 6px 0 rgba(0,0,0,.25));transition:transform .3s}
.cat-card:hover .cat-emoji{transform:translateX(-50%) scale(1.1) rotate(-6deg)}
/* Imagem do cartão: ocupa só o espaço que sobra acima do texto (nunca cobre o título). */
.cat-card .cat-img{flex:1 1 0;min-height:0;width:100%;object-fit:contain;margin:-6px 0 6px;transition:transform .3s}
.cat-card:hover .cat-img{transform:scale(1.05) rotate(-2deg)}
.cat-card h3{font-family:var(--display);font-weight:400;font-size:32px;line-height:1.05;margin:0;letter-spacing:.8px;text-shadow:3px 3px 0 rgba(0,0,0,.3)}
.cat-card p{margin:2px 0 10px;font-size:13px;font-weight:700;opacity:.92}
.cat-card .chip{align-self:flex-start;background:#fff;color:var(--navy);font-weight:900;font-size:12px;padding:6px 12px;border-radius:999px}
.t-red{--c1:#ff3b3f;--c2:#a50d12}
.t-blue{--c1:#2f6be0;--c2:#0d2c6e}
.t-navy{--c1:#23387a;--c2:#070e26}
.t-yellow{--c1:#ffd23f;--c2:#f08a00}

/* ---------- Card de produto ---------- */
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.pcard{position:relative;background:#fff;border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column;box-shadow:0 1px 0 var(--line),0 2px 10px rgba(16,24,48,.04);transition:transform .18s,box-shadow .18s}
.pcard:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg)}
.pcard-media{position:relative;aspect-ratio:1/1;overflow:hidden;display:block}
.pcard-media img{width:100%;height:100%;object-fit:cover;transition:transform .4s}
.pcard:hover .pcard-media img,.pcard:hover .art-emoji{transform:scale(1.06)}
.pbadges{position:absolute;top:10px;left:10px;display:flex;flex-direction:column;gap:5px;z-index:2;align-items:flex-start}
.pbadge{font-size:11px;font-weight:900;padding:4px 9px;border-radius:999px;background:var(--navy);color:#fff;line-height:1.3}
.pbadge.off{background:var(--yellow);color:var(--navy);transform:rotate(-3deg)}
.pbadge.hot{background:var(--red)}
.pbadge.promo{background:var(--green);color:#fff}
.pcard-body{padding:12px 14px 14px;display:flex;flex-direction:column;gap:4px;flex:1}
.pcard-name{font-weight:700;font-size:14px;line-height:1.3;margin:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:36px}
.stars{display:flex;align-items:center;gap:4px;font-size:12px;color:var(--muted)}
.stars-ic{color:var(--star);letter-spacing:-1px;font-size:13px}
.price-old{color:var(--muted-2);text-decoration:line-through;font-size:13px}
.price-now{font-weight:900;font-size:21px;color:var(--ink);line-height:1.1}
.price-pix{font-size:12.5px;color:var(--green-dark);font-weight:800}
.price-inst{font-size:12px;color:var(--muted)}
.pcard .btn{margin-top:10px;padding:11px 14px;font-size:14px}
.pcard-low{font-size:11.5px;font-weight:800;color:var(--red);display:flex;align-items:center;gap:4px}

/* Arte automática (quando não há foto) */
.art{position:relative;width:100%;height:100%;display:flex;align-items:center;justify-content:center;background-image:var(--web),linear-gradient(150deg,var(--c1),var(--c2));background-size:75%,cover;background-repeat:no-repeat;overflow:hidden}
.art::before{content:"";position:absolute;inset:0;background-image:var(--dots);background-size:12px 12px;opacity:.6}
.art-emoji{position:relative;font-size:min(42cqw,110px);filter:drop-shadow(5px 7px 0 rgba(0,0,0,.25));transition:transform .4s;line-height:1}
.art{container-type:inline-size}
.art-spider{position:absolute;right:8%;bottom:8%;width:16%;color:rgba(255,255,255,.85)}
.art-label{position:absolute;left:10px;bottom:10px;background:rgba(0,0,0,.35);color:#fff;font-size:10px;font-weight:800;padding:3px 8px;border-radius:999px;letter-spacing:.3px}

/* ---------- Banner kits ---------- */
.promo-banner{position:relative;border-radius:var(--r-lg);overflow:hidden;color:#fff;background:var(--navy);background-image:var(--web),linear-gradient(120deg,var(--navy),var(--blue-dark) 60%,var(--red));background-size:380px,cover;background-repeat:no-repeat;display:grid;grid-template-columns:1.2fr 1fr;align-items:center;gap:20px;padding:36px}
.promo-banner h2{font-family:var(--display);font-weight:400;font-size:clamp(34px,4.6vw,56px);line-height:.95;margin:10px 0;letter-spacing:1px}
.promo-banner h2 em,.promo-banner h2 .hl{color:var(--yellow);font-style:normal}
.promo-banner p{opacity:.92;margin:0 0 18px;max-width:460px}
.kit-stack{display:flex;justify-content:center;gap:10px;flex-wrap:wrap}
.kit-stack span{width:92px;height:92px;border-radius:22px;background:rgba(255,255,255,.12);border:2px solid rgba(255,255,255,.25);display:flex;align-items:center;justify-content:center;font-size:48px}
.kit-stack span:nth-child(2){transform:translateY(-14px) rotate(4deg)}
.kit-stack .plus{width:auto;background:none;border:0;font-family:var(--display);font-size:40px;color:var(--yellow)}

/* ---------- Garantia ---------- */
.guarantee{display:grid;grid-template-columns:auto 1fr;gap:24px;align-items:center;background:#fff;border-radius:var(--r-lg);padding:28px;box-shadow:var(--shadow);border:3px dashed var(--line-strong)}
.seal{width:130px;height:130px;border-radius:50%;background:var(--green);color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;box-shadow:0 0 0 6px #fff,0 0 0 9px var(--green);transform:rotate(-8deg)}
.seal b{font-family:var(--display);font-size:46px;font-weight:400;line-height:.9}
.seal span{font-size:11px;font-weight:900;text-transform:uppercase;letter-spacing:.5px}
.guarantee h3{margin:0 0 6px;font-size:22px}
.guarantee p{margin:0;color:var(--muted)}

/* ---------- Depoimentos ---------- */
.reviews-summary{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.big-rating{font-family:var(--display);font-size:56px;line-height:1;color:var(--navy)}
.rv-track{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding:6px 2px 16px;scrollbar-width:none}
.rv-track::-webkit-scrollbar{display:none}
.rv-card{flex:0 0 min(340px,84%);scroll-snap-align:start;background:#fff;border-radius:var(--r-lg);padding:18px;box-shadow:var(--shadow);border:1px solid var(--line)}
.rv-head{display:flex;align-items:center;gap:11px;margin-bottom:10px}
.rv-av{width:44px;height:44px;border-radius:50%;background:var(--red);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:17px;flex:0 0 auto}
.rv-name{font-weight:800;font-size:14.5px;line-height:1.2}
.rv-meta{font-size:12px;color:var(--muted)}
.rv-verified{display:inline-flex;align-items:center;gap:3px;color:var(--green-dark);font-weight:800;font-size:11.5px}
.rv-text{font-size:14px;margin:0;color:#2e3448}
.rv-prod{margin-top:10px;font-size:12px;color:var(--blue);font-weight:800}
.rv-nav{display:flex;gap:8px}
.circle-btn{width:42px;height:42px;border-radius:50%;border:2px solid var(--line-strong);background:#fff;display:flex;align-items:center;justify-content:center;color:var(--navy)}
.circle-btn:hover{border-color:var(--red);color:var(--red)}

/* ---------- FAQ ---------- */
.faq{max-width:820px;margin:0 auto}
.faq-item{background:#fff;border-radius:var(--r);margin-bottom:10px;border:1px solid var(--line);overflow:hidden}
.faq-q{width:100%;background:none;border:0;padding:16px 18px;display:flex;justify-content:space-between;align-items:center;gap:14px;font-size:15px;font-weight:800;text-align:left}
.faq-q .icon{color:var(--muted);transition:transform .25s}
.faq-item.open .faq-q .icon{transform:rotate(180deg);color:var(--red)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .3s ease}
.faq-a p{margin:0;padding:0 18px 16px;color:var(--muted);font-size:14px}

/* ---------- Newsletter ---------- */
.newsletter{background:var(--yellow);background-image:radial-gradient(rgba(0,0,0,.07) 1.5px,transparent 1.6px);background-size:14px 14px;border-radius:var(--r-lg);padding:32px;display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:center;color:var(--navy);border:3px solid var(--navy);box-shadow:6px 6px 0 var(--navy)}
.newsletter h2{font-family:var(--display);font-weight:400;font-size:clamp(30px,4vw,44px);margin:0;line-height:1;letter-spacing:.8px}
.newsletter p{margin:6px 0 0;font-weight:700}
.nl-form{display:flex;gap:8px;flex-wrap:wrap}
.nl-form input{flex:1;min-width:200px;border:2px solid var(--navy);border-radius:999px;padding:14px 18px;font-weight:700;background:#fff}

/* ---------- Footer ---------- */
.footer{background:var(--navy);background-image:var(--web-rodape);background-size:cover;background-repeat:no-repeat;background-position:right bottom;color:#c9d0e4;margin-top:56px;padding:44px 0 20px;font-size:14px}
.footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:28px}
.footer h4{color:#fff;margin:0 0 12px;font-size:15px}
.footer ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.footer a:hover{color:var(--yellow)}
.footer .logo-text{color:#fff}
.pay-icons{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}
.pay-icons span{background:#fff;color:var(--navy);font-size:11px;font-weight:900;padding:5px 9px;border-radius:6px}
.footer-bottom{border-top:1px solid rgba(255,255,255,.12);margin-top:30px;padding-top:16px;font-size:12px;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;color:#8f99b8}
.security{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:12px}
.security span{display:flex;align-items:center;gap:5px;font-size:12px;font-weight:800;color:#fff;border:1px solid rgba(255,255,255,.25);padding:6px 10px;border-radius:8px}

/* ---------- WhatsApp flutuante ---------- */
.wa-float{position:fixed;right:18px;bottom:18px;z-index:70;width:58px;height:58px;border-radius:50%;background:#25d366;color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 24px rgba(37,211,102,.45);transition:transform .2s}
.wa-float:hover{transform:scale(1.08)}
.wa-float svg{width:32px;height:32px;fill:#fff}
.wa-float .wa-tip{position:absolute;right:68px;background:#fff;color:var(--ink);font-size:13px;font-weight:800;padding:8px 12px;border-radius:12px;white-space:nowrap;box-shadow:var(--shadow)}

/* ---------- Drawer (carrinho / menu / filtros) ---------- */
.overlay{position:fixed;inset:0;background:rgba(8,12,30,.55);z-index:90;opacity:0;pointer-events:none;transition:opacity .25s}
.overlay.show{opacity:1;pointer-events:auto}
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(420px,100%);background:#fff;z-index:100;transform:translateX(100%);transition:transform .3s ease;display:flex;flex-direction:column;box-shadow:var(--shadow-lg)}
.drawer.left{right:auto;left:0;transform:translateX(-100%)}
.drawer.open{transform:none}
.drawer-head{display:flex;align-items:center;justify-content:space-between;padding:16px 18px;border-bottom:1px solid var(--line);background:var(--red);background-image:var(--web);background-size:200px;color:#fff}
.drawer-head h3{margin:0;font-family:var(--display);font-weight:400;font-size:26px;letter-spacing:.8px}
.x-btn{background:rgba(0,0,0,.15);border:0;width:36px;height:36px;border-radius:50%;color:#fff;display:flex;align-items:center;justify-content:center}
.drawer-body{flex:1;overflow-y:auto;padding:14px 18px}
.drawer-foot{border-top:1px solid var(--line);padding:14px 18px 18px;background:#fff}

.ship-progress{background:var(--blue-soft);border-radius:var(--r-sm);padding:10px 12px;margin-bottom:12px;font-size:13px;font-weight:700}
.ship-progress.done{background:var(--green-soft);color:var(--green-dark)}
.bar{height:8px;background:#fff;border-radius:999px;overflow:hidden;margin-top:7px}
.bar i{display:block;height:100%;background:linear-gradient(90deg,var(--red),var(--yellow));border-radius:999px;transition:width .4s}
.ship-progress.done .bar i{background:var(--green)}
/* Promoção "leve N por R$ X" da categoria (aviso no carrinho) */
.promo-aviso{background:#fff7d6;border:2px dashed var(--yellow-dark);border-radius:var(--r-sm);padding:10px 12px;margin-bottom:12px;font-size:13px;font-weight:700;color:var(--navy)}
.promo-aviso a{color:var(--red);font-weight:900;text-decoration:underline;white-space:nowrap}
.promo-aviso.ok{background:var(--green-soft);border-color:var(--green);color:var(--green-dark)}

.citem{display:grid;grid-template-columns:72px 1fr auto;gap:12px;padding:12px 0;border-bottom:1px solid var(--line);align-items:start}
.citem-media{width:72px;height:72px;border-radius:10px;overflow:hidden}
.citem-media .art-emoji{font-size:34px}
.citem-media img{width:100%;height:100%;object-fit:cover}
.citem-name{font-weight:800;font-size:13.5px;line-height:1.3}
.citem-var{font-size:12px;color:var(--muted)}
.citem-price{font-weight:900;font-size:15px;text-align:right}
.qty{display:inline-flex;align-items:center;border:1.5px solid var(--line-strong);border-radius:999px;margin-top:6px;background:#fff}
.qty button{width:30px;height:30px;border:0;background:none;font-weight:900;font-size:16px;color:var(--navy)}
.qty input{width:30px;text-align:center;border:0;font-weight:800;padding:0;background:none;-moz-appearance:textfield}
.qty input::-webkit-inner-spin-button{-webkit-appearance:none}
.rm-btn{background:none;border:0;color:var(--muted-2);font-size:12px;font-weight:700;padding:4px 0;margin-top:4px;text-decoration:underline}
.rm-btn:hover{color:var(--red)}
.cart-empty{text-align:center;padding:40px 10px;color:var(--muted)}
.cart-empty .big{font-size:64px}
.upsell{margin-top:16px}
.upsell h4{margin:0 0 8px;font-size:14px}
.upsell-item{display:grid;grid-template-columns:52px 1fr auto;gap:10px;align-items:center;border:1.5px dashed var(--line-strong);border-radius:var(--r-sm);padding:8px;margin-bottom:8px}
.upsell-item .citem-media{width:52px;height:52px}
.upsell-item .citem-media .art-emoji{font-size:26px}
.sum-row{display:flex;justify-content:space-between;font-size:14px;padding:3px 0}
.sum-row.total{font-size:18px;font-weight:900;padding-top:8px;border-top:1px solid var(--line);margin-top:6px}
.sum-row .green{color:var(--green-dark);font-weight:800}
.sum-pix{background:var(--green-soft);color:var(--green-dark);border-radius:var(--r-sm);padding:8px 10px;font-size:13px;font-weight:800;margin:8px 0 12px;text-align:center}
.coupon{display:flex;gap:6px;margin:10px 0}
.coupon input{flex:1;border:1.5px solid var(--line-strong);border-radius:var(--r-sm);padding:10px 12px;text-transform:uppercase;font-weight:800;min-width:0}
.coupon button{border:0;background:var(--navy);color:#fff;border-radius:var(--r-sm);padding:0 16px;font-weight:800}
.coupon-msg{font-size:12.5px;font-weight:700;margin-top:-4px;margin-bottom:6px}
.coupon-msg.ok{color:var(--green-dark)} .coupon-msg.err{color:var(--red)}
.trust-mini{display:flex;justify-content:center;gap:12px;margin-top:10px;font-size:11.5px;color:var(--muted);font-weight:700;flex-wrap:wrap}
.trust-mini span{display:flex;align-items:center;gap:4px}
.trust-mini .icon{width:14px;height:14px;color:var(--green)}

/* Menu mobile */
.mnav a{display:flex;align-items:center;gap:12px;padding:14px 4px;border-bottom:1px solid var(--line);font-weight:800;font-size:16px}
.mnav a span{font-size:22px}

/* ---------- Toast ---------- */
.toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,140%);z-index:120;background:var(--navy);color:#fff;padding:12px 18px;border-radius:999px;font-weight:800;font-size:14px;box-shadow:var(--shadow-lg);transition:transform .3s;display:flex;align-items:center;gap:8px;max-width:calc(100% - 32px)}
.toast.show{transform:translate(-50%,0)}

/* ---------- Modal ---------- */
.modal{position:fixed;inset:0;z-index:110;display:flex;align-items:center;justify-content:center;padding:16px;background:rgba(8,12,30,.6);opacity:0;pointer-events:none;transition:opacity .25s}
.modal.show{opacity:1;pointer-events:auto}
.modal-box{background:#fff;border-radius:var(--r-lg);max-width:480px;width:100%;max-height:90vh;overflow:auto;position:relative;transform:scale(.94);transition:transform .25s}
.modal.show .modal-box{transform:none}
.modal-close{position:absolute;top:10px;right:10px;width:36px;height:36px;border-radius:50%;border:0;background:rgba(0,0,0,.08);display:flex;align-items:center;justify-content:center;z-index:2}
.modal-pad{padding:24px}
.popup-hero{background:var(--red);background-image:var(--web),linear-gradient(135deg,var(--red),var(--red-dark));background-size:260px,cover;background-repeat:no-repeat;color:#fff;text-align:center;padding:30px 24px 22px}
.popup-hero .pct{font-family:var(--display);font-size:84px;line-height:.9;text-shadow:4px 4px 0 var(--navy)}
.popup-hero h3{margin:6px 0 0;font-size:20px}
.size-table{width:100%;border-collapse:collapse;font-size:14px;margin-top:10px}
.size-table th{background:var(--navy);color:#fff;padding:9px;text-align:left;font-size:13px}
.size-table td{padding:9px;border-bottom:1px solid var(--line)}
.size-table tr:nth-child(even) td{background:var(--bg)}

/* ---------- Formulários ---------- */
.field{display:flex;flex-direction:column;gap:5px;margin-bottom:12px}
.field label{font-size:13px;font-weight:800;color:var(--navy)}
.field input,.field select,.field textarea{border:1.5px solid var(--line-strong);border-radius:var(--r-sm);padding:12px 13px;background:#fff;font-weight:600;width:100%}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--blue);outline:none;box-shadow:0 0 0 3px var(--blue-soft)}
.field.err input,.field.err select{border-color:var(--red);box-shadow:0 0 0 3px var(--red-soft)}
.field .hint{font-size:12px;color:var(--muted)}
.field .emsg{font-size:12px;color:var(--red);font-weight:700;display:none}
.field.err .emsg{display:block}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.row3{display:grid;grid-template-columns:2fr 1fr;gap:10px}

/* Breadcrumb */
.crumbs{font-size:13px;color:var(--muted);padding:14px 0;display:flex;gap:6px;flex-wrap:wrap}
.crumbs a:hover{color:var(--red)}

/* ---------- Responsivo ---------- */
@media (max-width:1024px){
  .grid{grid-template-columns:repeat(3,1fr)}
  .footer-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:820px){
  .hero-inner{grid-template-columns:1fr;padding:30px 16px 40px;text-align:center}
  .hero p.lead{margin-left:auto;margin-right:auto}
  .hero-ctas,.hero-trust{justify-content:center}
  .hero-art{max-width:280px;order:-1}
  .countdown{justify-content:center}
  .perks-grid{grid-template-columns:1fr 1fr;gap:14px}
  .cats{grid-template-columns:1fr 1fr;gap:12px}
  .cat-card{padding:12px}
  .cat-card h3{font-size:24px}
  .cat-card p{display:none}
  .cat-card .chip{margin-top:8px}
  .cat-card .cat-emoji{top:12%;font-size:56px}
  .promo-banner{grid-template-columns:1fr;padding:26px;text-align:center}
  .promo-banner p{margin-left:auto;margin-right:auto}
  .newsletter{grid-template-columns:1fr;padding:24px;text-align:center}
  .guarantee{grid-template-columns:1fr;text-align:center;justify-items:center}
}
@media (max-width:720px){
  body{font-size:14.5px}
  .header-inner{height:auto;gap:6px;flex-wrap:wrap;padding:8px 0 10px}
  .search{order:3;flex:0 0 100%;max-width:none}
  .search input{padding:10px 46px 10px 16px}
  .menu-btn{display:flex}
  .logo-text{font-size:25px}
  .logo-text small{display:none}
  .logo-mark{width:34px;height:34px}
  .logo-mark svg{width:24px;height:24px}
  .hbtn span.lbl{display:none}
  .nav{display:none}
  .grid{grid-template-columns:1fr 1fr;gap:10px}
  .pcard-body{padding:10px 10px 12px}
  .pcard-name{font-size:13px}
  .price-now{font-size:18px}
  .pcard .btn{font-size:13px;padding:10px}
  .section{padding:34px 0}
  .section-head{flex-direction:column;align-items:flex-start;gap:6px}
  .footer-grid{grid-template-columns:1fr}
  .wa-float{width:52px;height:52px;bottom:14px;right:14px}
  .wa-float .wa-tip{display:none}
  .row2{grid-template-columns:1fr}
  .kit-stack span{width:72px;height:72px;font-size:38px}
  .countdown{gap:6px;padding:8px 10px}
  .cd-box{min-width:38px}
  .cd-box b{font-size:20px}
  .co-secure-txt{display:none}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* Celular: o iPhone dá zoom sozinho ao tocar em campo com letra menor que 16px e a página fica
   "fora de proporção" (sobra dos lados). Campos com 16px no toque e nada passa da largura da tela. */
html, body { overflow-x: clip; }
@media (max-width: 900px), (pointer: coarse) {
  input, select, textarea { font-size: 16px !important; }
}