:root{--ink:#1d1f3b;--ink2:#5b5e78;--bg:#fff;--soft:#fff8f2;--line:#efe7df;--pink:#ff4f8b;--pink2:#ffe3ec;--yellow:#ffd23f;--sky:#3c9cff;--mint:#22c58b;--wa:#25d366;--red:#e2232f;--green:#0d7a47;--gold:#ffc83d;--r:16px;--max:1180px}
*{box-sizing:border-box}html{-webkit-text-size-adjust:100%}
body{margin:0;font:16px/1.55 system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;color:var(--ink);background:var(--bg)}
img{max-width:100%;display:block}a{color:inherit;text-decoration:none}
h1,h2,h3{line-height:1.15;margin:0 0 12px;letter-spacing:-.02em}
h1{font-size:clamp(2rem,5vw,3.1rem);font-weight:900}h2{font-size:clamp(1.5rem,4vw,2.3rem);font-weight:900}h3{font-size:1.05rem;font-weight:800}
p{margin:0 0 12px}.muted{color:var(--ink2)}
.wrap{max-width:var(--max);margin:0 auto;padding:0 20px}
.sec{padding:48px 0}.sec-h{display:flex;justify-content:space-between;align-items:end;gap:16px;margin-bottom:24px;flex-wrap:wrap}.sec-h p{margin:0}
.eyebrow{display:inline-block;font-weight:800;font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;color:var(--pink);margin-bottom:8px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:12px 22px;border-radius:999px;font-weight:800;border:2px solid var(--ink);background:var(--ink);color:#fff;cursor:pointer;font-size:1rem;transition:transform .15s}
.btn:hover{transform:translateY(-2px)}.btn.alt{background:#fff;color:var(--ink)}.btn.pink{background:var(--pink);border-color:var(--pink)}.btn.wa{background:var(--wa);border-color:var(--wa);color:#fff}.btn.block{width:100%}
.btn svg{width:20px;height:20px;fill:currentColor}
/* top bar & header */
.topbar{background:var(--ink);color:#fff;font-size:.85rem;text-align:center;padding:8px 16px;font-weight:600}.topbar b{color:var(--yellow)}
header.site{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.96);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;height:64px;gap:16px}
.logo{display:flex;align-items:center}.logo img{height:40px;width:auto}
.logo i{width:34px;height:34px;border-radius:10px;background:conic-gradient(var(--pink) 0 25%,var(--yellow) 0 50%,var(--sky) 0 75%,var(--mint) 0);display:block;transform:rotate(-8deg)}
.menu{display:none;gap:4px}.menu a{padding:10px 12px;border-radius:999px;font-weight:700;font-size:.95rem}.menu a:hover,.menu a.on{background:var(--pink2)}
.menu a.xm{color:var(--red)}
.nav-cta{display:none}
.burger{width:44px;height:44px;border:0;background:var(--soft);border-radius:12px;cursor:pointer;display:grid;place-items:center;color:var(--ink)}
.mnav{display:none;border-top:1px solid var(--line);padding:8px 20px 16px}.mnav.open{display:block}.mnav a{display:block;padding:12px 0;font-weight:800;border-bottom:1px solid var(--line)}
@media(min-width:960px){.menu,.nav-cta{display:flex}.burger,.mnav{display:none!important}}
/* hero */
.hero{background:linear-gradient(180deg,#fff6e6,#fff);overflow:hidden}
.hero-in{display:grid;gap:24px;padding-top:32px;padding-bottom:40px;align-items:center}
.hero h1 span{background:linear-gradient(90deg,var(--pink),#ff8a3d);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero .lead{font-size:1.15rem;color:var(--ink2);max-width:520px}
.hero .ctas{display:flex;gap:12px;flex-wrap:wrap;margin:20px 0}
.hero-img{border-radius:24px;overflow:hidden;aspect-ratio:16/10;background:#fbefdc}.hero-img img{width:100%;height:100%;object-fit:cover;object-position:70% 50%}
.trust{display:flex;flex-wrap:wrap;gap:8px 18px;font-size:.9rem;font-weight:700;color:var(--ink2)}.trust span:before{content:"✓ ";color:var(--mint)}
@media(min-width:900px){.hero-in{grid-template-columns:1fr 1.1fr;padding-top:56px;padding-bottom:64px}}
/* categories */
.cats{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.cat{border-radius:var(--r);padding:14px;display:flex;flex-direction:column;gap:8px;position:relative;overflow:hidden;transition:transform .15s;min-height:190px}
.cat:hover{transform:translateY(-3px)}.cat img{width:100%;height:auto;aspect-ratio:1;object-fit:cover;border-radius:12px;mix-blend-mode:multiply}
.cat b{font-size:1rem}.cat small{color:var(--ink2);font-size:.82rem;line-height:1.3}
.cat.xmas{background:var(--red)!important;color:#fff}.cat.xmas small{color:#ffe3e3}.cat.xmas img{mix-blend-mode:normal}
@media(min-width:700px){.cats{grid-template-columns:repeat(4,1fr)}}
@media(min-width:1100px){.cats{grid-template-columns:repeat(7,1fr)}}
/* cards */
.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
@media(min-width:700px){.grid{grid-template-columns:repeat(3,1fr)}}@media(min-width:1000px){.grid{grid-template-columns:repeat(4,1fr);gap:20px}}
.card{display:flex;flex-direction:column;border-radius:var(--r);background:#fff;border:1px solid var(--line);overflow:hidden;position:relative;transition:box-shadow .15s,transform .15s}
.card:hover{transform:translateY(-3px);box-shadow:0 10px 28px rgba(29,31,59,.08)}
.card .ph{aspect-ratio:1;overflow:hidden}.card .ph img{width:100%;height:100%;object-fit:cover}
.card .bd{padding:12px 14px 16px;display:flex;flex-direction:column;gap:6px;flex:1}
.card h3{margin:0;font-size:.98rem}.card p{margin:0;font-size:.85rem;color:var(--ink2);line-height:1.4}
.card .moq{margin-top:auto;font-size:.78rem;font-weight:800;color:var(--ink);background:var(--soft);border-radius:8px;padding:6px 8px;align-self:flex-start}
.badges{position:absolute;top:10px;left:10px;display:flex;gap:6px;flex-wrap:wrap}
.badge{font-size:.7rem;font-weight:900;padding:4px 8px;border-radius:999px;background:var(--ink);color:#fff;text-transform:uppercase;letter-spacing:.04em}
.badge.hot{background:var(--pink)}.badge.trend{background:var(--sky)}.badge.christmas{background:var(--red)}
/* process */
.steps{display:grid;gap:14px;counter-reset:s}@media(min-width:800px){.steps{grid-template-columns:repeat(4,1fr)}}
.step{background:#fff;border-radius:var(--r);padding:20px;border:2px solid var(--ink);position:relative}
.step:before{counter-increment:s;content:counter(s);display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--yellow);font-weight:900;margin-bottom:12px}
.step p{font-size:.92rem;color:var(--ink2);margin:0}
.bg-soft{background:var(--soft)}.bg-yellow{background:#fff3c4}
/* features */
.feats{display:grid;gap:14px}@media(min-width:800px){.feats{grid-template-columns:repeat(3,1fr)}}
.feat{padding:20px;border-radius:var(--r);background:#fff;border:1px solid var(--line)}.feat .ic{font-size:28px;margin-bottom:8px}
/* CTA band */
.band{background:var(--ink);color:#fff;border-radius:24px;padding:32px 24px;display:grid;gap:16px;align-items:center}
.band p{color:#c9cbe0}@media(min-width:800px){.band{grid-template-columns:1fr auto;padding:40px 48px}}
/* christmas */
.xm-banner{position:relative;border-radius:24px;overflow:hidden;background:var(--red);color:#fff;min-height:300px;display:flex;align-items:flex-end}
.xm-banner .img{position:absolute;inset:0;background-size:cover;background-position:right center}
.xm-banner:before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(176,10,24,.15) 0%,rgba(176,10,24,.92) 70%)}
.xm-banner .txt{position:relative;z-index:2;padding:28px 24px;max-width:560px}
.xm-banner h2{font-size:clamp(1.8rem,5vw,3rem)}.xm-banner p{color:#ffe1e1;font-size:1.05rem}
.xm-banner .eyebrow{color:var(--gold)}.xm-banner .btn{background:var(--gold);border-color:var(--gold);color:var(--ink)}
.xm-banner .stripe{position:absolute;left:0;right:0;top:0;height:10px;z-index:3;background:repeating-linear-gradient(-45deg,#fff 0 12px,var(--red) 12px 24px)}
@media(min-width:800px){.xm-banner{min-height:380px;align-items:center}.xm-banner:before{background:linear-gradient(90deg,#c4101e 0%,#c4101e 38%,rgba(196,16,30,.6) 55%,rgba(196,16,30,0) 75%)}.xm-banner .txt{padding:48px}}
.snow{background-color:var(--red);background-image:radial-gradient(rgba(255,255,255,.45) 1.4px,transparent 1.6px),radial-gradient(rgba(255,255,255,.25) 1px,transparent 1.2px);background-size:46px 46px,23px 23px;background-position:0 0,11px 17px}
.xm-hero{color:#fff;padding:40px 0 48px;position:relative}
.xm-hero .in{display:grid;gap:24px;align-items:center}@media(min-width:900px){.xm-hero .in{grid-template-columns:1fr 1fr}}
.xm-hero h1{text-shadow:0 2px 0 rgba(0,0,0,.12)}.xm-hero .lead{font-size:1.15rem;color:#fff}
.xm-hero .eyebrow{color:var(--gold)}.xm-hero .pic{border-radius:24px;overflow:hidden;border:6px solid #fff;box-shadow:0 18px 40px rgba(0,0,0,.25)}
.xm-hero .btn.gold{background:var(--gold);border-color:var(--gold);color:var(--ink)}.xm-hero .btn.alt{border-color:#fff}
.candy{height:14px;background:repeating-linear-gradient(-45deg,#fff 0 14px,var(--red) 14px 28px)}
.xm-sec{background:#fff7ef}
.xm-time{display:grid;gap:12px}@media(min-width:800px){.xm-time{grid-template-columns:repeat(4,1fr)}}
.xm-time div{background:#fff;border-radius:var(--r);padding:18px;border-top:6px solid var(--green)}.xm-time div:nth-child(2n){border-top-color:var(--red)}
.xm-time b{display:block;color:var(--red);font-size:1.1rem}
.chips.xm button.on{background:var(--red);border-color:var(--red)}
.greenband{background:var(--green);color:#fff}.greenband p{color:#d9f2e4}
/* shop */
.toolbar{position:sticky;top:64px;z-index:20;background:#fff;padding:12px 0;border-bottom:1px solid var(--line)}
.search{display:flex;gap:8px}.search input{flex:1;min-height:48px;border-radius:999px;border:2px solid var(--line);padding:0 18px;font-size:1rem}.search input:focus{outline:none;border-color:var(--pink)}
.chips{display:flex;gap:8px;overflow-x:auto;padding:12px 0 2px;scrollbar-width:none}.chips::-webkit-scrollbar{display:none}
.chips button{flex:none;min-height:40px;padding:8px 16px;border-radius:999px;border:2px solid var(--line);background:#fff;font-weight:800;cursor:pointer;font-size:.9rem;color:var(--ink)}
.chips button.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.count{font-size:.9rem;color:var(--ink2);margin:16px 0}
.empty{padding:48px;text-align:center;color:var(--ink2)}
/* product */
.crumbs{font-size:.85rem;color:var(--ink2);padding:16px 0}.crumbs a{text-decoration:underline}
.pd{display:grid;gap:24px}@media(min-width:900px){.pd{grid-template-columns:1.1fr 1fr;gap:48px}}
.gal .main{border-radius:20px;overflow:hidden;aspect-ratio:1}.gal .main img{width:100%;height:100%;object-fit:cover}
.thumbs{display:flex;gap:8px;margin-top:10px}.thumbs img{width:72px;height:72px;border-radius:10px;object-fit:cover;cursor:pointer;border:2px solid transparent}.thumbs img.on{border-color:var(--ink)}
.pd h1{font-size:clamp(1.7rem,4vw,2.4rem)}
.moqbox{display:flex;gap:12px;align-items:flex-start;background:#fff3c4;border-radius:14px;padding:14px 16px;margin:16px 0}.moqbox b{display:block}
.noprice{font-size:.85rem;color:var(--ink2);margin:6px 0 16px}
table.specs{width:100%;border-collapse:collapse;margin:8px 0 16px;font-size:.95rem}table.specs td{padding:10px 0;border-bottom:1px solid var(--line);vertical-align:top}table.specs td:first-child{color:var(--ink2);width:42%}
.acts{display:grid;gap:10px;margin:16px 0}@media(min-width:520px){.acts{grid-template-columns:1fr 1fr}}
.pack{background:var(--soft);border-radius:14px;padding:16px;font-size:.95rem}
/* forms */
.form{display:grid;gap:12px;background:#fff;border:1px solid var(--line);border-radius:20px;padding:20px}
.form .row{display:grid;gap:12px}@media(min-width:620px){.form .row{grid-template-columns:1fr 1fr}}
.form label{display:grid;gap:6px;font-weight:700;font-size:.9rem}
.form input,.form textarea,.form select{min-height:48px;border-radius:12px;border:2px solid var(--line);padding:10px 14px;font:inherit;width:100%;background:#fff}
.form textarea{min-height:110px}.form input:focus,.form textarea:focus,.form select:focus{outline:none;border-color:var(--sky)}
.hp{display:none}.ok{background:#e4f8ee;color:#0d6b40;border-radius:12px;padding:14px;font-weight:700}
/* faq & content */
.prose{max-width:760px}.prose h2{margin-top:36px}.prose ul{padding-left:20px}.prose li{margin:6px 0}
details{border:1px solid var(--line);border-radius:14px;padding:4px 16px;margin:10px 0;background:#fff}summary{cursor:pointer;font-weight:800;padding:12px 0;list-style:none}summary:after{content:"+";float:right;font-size:1.3rem;line-height:1}details[open] summary:after{content:"–"}
.page-hero{background:linear-gradient(180deg,#ffeef4,#fff);padding:40px 0 24px}
.cards3{display:grid;gap:14px}@media(min-width:800px){.cards3{grid-template-columns:repeat(3,1fr)}}
.info{padding:20px;border-radius:var(--r);background:var(--soft)}.info b{display:block;font-size:1.05rem;margin-bottom:6px}
/* footer */
footer.site{background:#15172e;color:#c9cbe0;padding:48px 0 100px;margin-top:48px;font-size:.92rem}
footer .cols{display:grid;gap:24px}@media(min-width:800px){footer .cols{grid-template-columns:1.4fr 1fr 1fr 1fr}}
footer h4{color:#fff;margin:0 0 10px}footer a{display:block;padding:4px 0}footer a:hover{color:#fff}footer .logo{color:#fff;margin-bottom:10px}
footer .legal{border-top:1px solid #2b2e4a;margin-top:32px;padding-top:16px;font-size:.82rem}
/* whatsapp float */
.wa-float{position:fixed;right:16px;bottom:72px;z-index:90;display:flex;align-items:center;gap:8px;background:var(--wa);color:#fff;border-radius:999px;padding:0 18px 0 14px;height:56px;font-weight:800;box-shadow:0 8px 24px rgba(37,211,102,.45)}
.wa-float svg{width:28px;height:28px;fill:#fff}.wa-float span{display:none}@media(min-width:700px){.wa-float span{display:inline}}
:focus-visible{outline:3px solid var(--sky);outline-offset:2px}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}
.sk{background:linear-gradient(90deg,#f4efe9,#fbf8f5,#f4efe9);border-radius:var(--r);aspect-ratio:3/4}
/* ---- Animated product media ---- */
.card .ph{position:relative;isolation:isolate}
.card .ph img.l{position:absolute;inset:0;opacity:0;animation:kfX 9s ease-in-out infinite;animation-delay:var(--d,0s)}
.card:hover .ph img.l{animation:none;opacity:1;transition:opacity .35s}
@keyframes kfX{0%,38%{opacity:0}48%,88%{opacity:1}98%,100%{opacity:0}}
.mv{transform-origin:50% 85%;will-change:transform}
.a-squeeze .mv{animation:kfSq 2.6s ease-in-out infinite}
@keyframes kfSq{0%,55%,100%{transform:scale(1,1)}62%{transform:scale(1.1,.86)}70%{transform:scale(.95,1.06)}80%{transform:scale(1.02,.98)}}
.a-wobble .mv{animation:kfWb 3.2s ease-in-out infinite}
@keyframes kfWb{0%,100%{transform:rotate(0)}20%{transform:rotate(-4deg) translateY(-2%)}40%{transform:rotate(3deg)}60%{transform:rotate(-2deg) translateY(-1%)}80%{transform:rotate(1deg)}}
.a-float .mv{animation:kfFl 3.6s ease-in-out infinite;transform-origin:50% 50%}
@keyframes kfFl{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-4%) rotate(1.5deg)}}
.a-glow .mv{animation:kfGl 3s ease-in-out infinite;transform-origin:50% 50%}
@keyframes kfGl{0%,100%{filter:brightness(1) saturate(1);transform:scale(1)}50%{filter:brightness(1.12) saturate(1.15);transform:scale(1.03)}}
.a-glow .ph::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 50% 42%,rgba(255,214,120,.45),transparent 55%);animation:kfHalo 3s ease-in-out infinite;mix-blend-mode:screen;z-index:1}
@keyframes kfHalo{0%,100%{opacity:.15}50%{opacity:.8}}
.a-tilt .mv{animation:kfTl 3.4s ease-in-out infinite;transform-origin:50% 60%}
@keyframes kfTl{0%,100%{transform:rotate(0) scale(1)}25%{transform:rotate(-5deg) scale(1.03)}50%{transform:rotate(0) scale(1.05)}75%{transform:rotate(4deg) scale(1.03)}}
.a-bounce .mv{animation:kfBo 2.4s cubic-bezier(.3,.7,.4,1) infinite}
@keyframes kfBo{0%,60%,100%{transform:translateY(0) scale(1,1)}70%{transform:translateY(-6%) scale(.97,1.03)}80%{transform:translateY(0) scale(1.04,.96)}88%{transform:translateY(-2%)}}
.ph .shine{position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.55) 50%,transparent 65%);transform:translateX(-120%);animation:kfSh 5s ease-in-out infinite;animation-delay:var(--d,0s)}
@keyframes kfSh{0%,70%{transform:translateX(-120%)}85%,100%{transform:translateX(120%)}}
.paused .mv,.paused img.l,.paused .shine,.paused.ph::after{animation-play-state:paused!important}
.badge.urg{background:#FFD23F;color:var(--ink)}
.card .why1{font-size:.78rem;font-weight:800;color:#C2185B;display:flex;gap:4px;align-items:flex-start}
.whybox{margin:16px 0;padding:16px 18px;border-radius:16px;background:linear-gradient(135deg,#FFF0F5,#FFF8E1);border:1px solid #FFD6E4}
.whybox h3{margin:0 0 8px;font-size:1rem}.whybox ul{margin:0;padding-left:0;list-style:none;display:grid;gap:6px}
.whybox li{display:flex;gap:8px;font-size:.95rem}.whybox li::before{content:"✓";flex:none;width:20px;height:20px;border-radius:50%;background:var(--pink);color:#fff;font-size:.72rem;font-weight:900;display:grid;place-items:center;margin-top:2px}
.gal .main{position:relative;isolation:isolate}.gal .main .mv{position:relative}
@media (prefers-reduced-motion:reduce){.mv,.card .ph img.l,.ph .shine,.a-glow .ph::after{animation:none!important}.card .ph img.l{opacity:0}.card:hover .ph img.l{opacity:1}}
/* simpler product UI */
.card .bd p{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pts{list-style:none;padding:0;margin:18px 0 20px;display:grid;gap:9px}
.pts li{position:relative;padding-left:28px;line-height:1.45;color:var(--ink2)}
.pts li::before{content:'✓';position:absolute;left:0;top:1px;width:19px;height:19px;border-radius:50%;background:var(--pink);color:#fff;font-size:.72rem;font-weight:800;display:grid;place-items:center}
.specs{margin-top:18px}