/* ==========================================================
   LOJA DO KOREANO · estilos
   Identidade: preto + verde do logo, com acentos vibrantes.
   ========================================================== */
:root{
  --ink:#0E0F0E; --ink-2:#1b1d1b;
  --green:#0B6B3A; --green-2:#17a35a;
  --lime:#C8F031;           /* acento principal (CTA) */
  --coral:#FF5A3C;          /* acento quente (ofertas) */
  --paper:#F6F4EE; --white:#fff;
  --muted:#6b6f6b;
  --r:20px; --ease:cubic-bezier(.2,.8,.2,1);
  --f-display:"Bricolage Grotesque",system-ui,sans-serif;
  --f-body:"Inter",system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-padding-top:80px}
body{font-family:var(--f-body);background:var(--paper);color:var(--ink);line-height:1.5;overflow-x:hidden;-webkit-font-smoothing:antialiased}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
ul{list-style:none}
:focus-visible{outline:3px solid var(--green-2);outline-offset:3px;border-radius:6px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.skip{position:absolute;left:-999px;top:8px;background:var(--lime);padding:8px 14px;border-radius:8px;z-index:200}
.skip:focus{left:8px}

.progress{position:fixed;top:0;left:0;height:3px;width:0;background:linear-gradient(90deg,var(--green-2),var(--lime));z-index:150}

/* ---------- Header ---------- */
.header{position:fixed;inset:0 0 auto 0;z-index:100;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px clamp(16px,4vw,48px);transition:background .3s,box-shadow .3s,transform .4s var(--ease)}
.header.scrolled{background:rgba(246,244,238,.85);backdrop-filter:blur(14px);box-shadow:0 1px 0 rgba(0,0,0,.08)}
.header.hide{transform:translateY(-100%)}
.brand{display:flex;align-items:center;gap:10px}
.logo-k{width:38px;height:38px;color:var(--ink)}
.brand-text{display:flex;flex-direction:column;line-height:1}
.brand-text b{font-family:var(--f-display);font-weight:800;letter-spacing:.18em;font-size:1rem}
.brand-text small{font-size:.65rem;color:var(--muted);letter-spacing:.08em;margin-top:3px}
.brand.light{color:#fff}.brand.light .logo-k{color:#fff}.brand.light small{color:#9aa}
.nav{display:flex;gap:28px;font-weight:500;font-size:.95rem}
.nav a{position:relative;padding:6px 0}
.nav a::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:100%;background:var(--green);transform:scaleX(0);transform-origin:right;transition:transform .35s var(--ease)}
.nav a:hover::after{transform:scaleX(1);transform-origin:left}
.actions{display:flex;gap:6px}
.icon-btn{position:relative;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;transition:background .2s,transform .2s}
.icon-btn:hover{background:rgba(0,0,0,.07);transform:scale(1.08)}
.icon-btn svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.badge{position:absolute;top:2px;right:0;min-width:20px;height:20px;padding:0 5px;border-radius:10px;background:var(--green);color:#fff;font-size:.7rem;font-weight:700;display:grid;place-items:center;transition:transform .3s}
.badge.pop{animation:pop .5s var(--ease)}
@keyframes pop{40%{transform:scale(1.6)}}
.burger{display:none}
.burger span{position:absolute;width:20px;height:2px;background:currentColor;transition:transform .3s}
.burger span:first-child{transform:translateY(-4px)}.burger span:last-child{transform:translateY(4px)}
.burger[aria-expanded=true] span:first-child{transform:rotate(45deg)}
.burger[aria-expanded=true] span:last-child{transform:rotate(-45deg)}

/* ---------- Busca ---------- */
.search-overlay{position:fixed;inset:0;background:rgba(14,15,14,.7);backdrop-filter:blur(8px);z-index:300;display:flex;justify-content:center;padding:12vh 16px;animation:fade .25s}
.search-overlay[hidden]{display:none}
.search-box{position:relative;width:min(640px,100%);align-self:flex-start;background:var(--paper);border-radius:var(--r);padding:16px;box-shadow:0 30px 80px rgba(0,0,0,.4);animation:rise .35s var(--ease)}
.search-box input{width:calc(100% - 52px);font-size:1.2rem;padding:14px 16px;border-radius:14px;border:2px solid var(--ink);background:#fff}
.search-box #searchClose{position:absolute;top:20px;right:16px}
.search-results{margin-top:10px;max-height:46vh;overflow:auto}
.search-results li button{display:flex;align-items:center;gap:12px;width:100%;text-align:left;padding:10px;border-radius:12px}
.search-results li button:hover,.search-results li button:focus-visible{background:#fff}
.search-results .em{font-size:1.6rem;width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:#eee}
.search-results small{color:var(--muted);display:block}
.search-results .pr{margin-left:auto;font-weight:700}
.search-results mark{background:var(--lime);border-radius:3px}
.search-hint{margin-top:10px;font-size:.85rem;color:var(--muted)}
.search-hint button{margin-right:6px;padding:3px 10px;border-radius:99px;background:#fff;border:1px solid #ddd}
@keyframes fade{from{opacity:0}}
@keyframes rise{from{opacity:0;transform:translateY(24px) scale(.98)}}

/* ---------- Botões ---------- */
.btn{display:inline-flex;align-items:center;gap:10px;padding:15px 26px;border-radius:99px;font-weight:600;transition:transform .25s var(--ease),box-shadow .25s,background .25s}
.btn span{transition:transform .3s var(--ease)}
.btn:hover span{transform:translateX(5px)}
.btn-primary{background:var(--lime);color:var(--ink);box-shadow:0 6px 0 var(--ink)}
.btn-primary:hover{box-shadow:0 8px 0 var(--ink)}
.btn-primary:active{transform:translateY(4px)!important;box-shadow:0 2px 0 var(--ink)}
.btn-ghost{border:2px solid var(--ink)}
.btn-ghost:hover{background:var(--ink);color:#fff}
.btn.full{width:100%;justify-content:center}

/* ---------- Hero ---------- */
.eyebrow{display:inline-flex;align-items:center;gap:10px;font-weight:600;font-size:.88rem;padding:7px 14px;border-radius:99px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);margin-bottom:clamp(14px,2.4vh,22px)}
.eyebrow.light{background:rgba(255,255,255,.12)}
.dot{width:9px;height:9px;border-radius:50%;background:#35e07a;animation:ping 2.2s ease-out infinite}
.status.closed .dot{background:var(--coral);animation:none}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(53,224,122,.6)}80%,100%{box-shadow:0 0 0 9px rgba(53,224,122,0)}}

.hero{position:relative;isolation:isolate;min-height:100svh;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);align-items:center;gap:clamp(24px,4vw,64px);padding:clamp(88px,12vh,128px) clamp(16px,5vw,72px) clamp(56px,9vh,96px);overflow:hidden;background:var(--ink);color:#fff}
.hero-bg{position:absolute;inset:0;z-index:-1;pointer-events:none}
.blob{position:absolute;border-radius:50%;opacity:.55;translate:0 calc(var(--p,0) * 90px)}
.b1{width:min(520px,70vw);aspect-ratio:1;background:radial-gradient(circle,var(--green) 0%,transparent 68%);top:-140px;right:-100px;animation:drift 14s ease-in-out infinite alternate}
.b2{width:min(380px,60vw);aspect-ratio:1;background:radial-gradient(circle,#3f6a0e 0%,transparent 68%);bottom:-120px;left:15%;animation:drift 18s ease-in-out infinite alternate-reverse}
@keyframes drift{to{transform:translate(50px,36px) scale(1.12)}}
.grid-lines{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:56px 56px;-webkit-mask-image:radial-gradient(ellipse at 72% 40%,#000 5%,transparent 70%);mask-image:radial-gradient(ellipse at 72% 40%,#000 5%,transparent 70%)}
.hero-k{position:absolute;right:-4vw;bottom:-14vw;font:800 min(62vw,52rem)/1 var(--f-display);color:transparent;-webkit-text-stroke:2px rgba(255,255,255,.06);translate:0 calc(var(--p,0) * -60px);user-select:none}

.hero-copy{position:relative;z-index:2;min-width:0;translate:0 calc(var(--p,0) * 40px);opacity:calc(1 - var(--p,0) * .6)}
.hero-title{font-family:var(--f-display);font-weight:800;font-size:clamp(2.2rem,5.4vw + .5rem,5rem);line-height:.98;letter-spacing:-.03em}
.line{display:block;overflow:hidden;padding-bottom:.1em}
.line>span{display:inline-block;transform:translateY(110%);animation:lineUp .6s var(--ease) forwards}
.line:nth-child(2)>span{animation-delay:.06s}.line:nth-child(3)>span{animation-delay:.12s}
@keyframes lineUp{to{transform:none}}

/* Palavra que alterna (todas ocupam a mesma célula; a ativa sobe) */
.line>.swap{display:inline-grid;overflow:hidden;vertical-align:bottom;padding-bottom:.04em}
.swap>span{grid-area:1/1;justify-self:start;background:var(--lime);color:var(--ink);padding:0 .16em;border-radius:.12em;opacity:0;transform:translateY(100%);transition:transform .5s var(--ease),opacity .35s}
.swap>span.on{opacity:1;transform:none}
.swap>span.out{opacity:0;transform:translateY(-100%)}

.hero-sub{max-width:34rem;margin:clamp(14px,2.6vh,24px) 0 clamp(18px,3vh,28px);font-size:clamp(1rem,.4vw + .92rem,1.15rem);color:#cfd3cf}
.hero-cta{display:flex;flex-wrap:wrap;gap:14px 16px}
.hero .btn-ghost{border-color:#fff;color:#fff}.hero .btn-ghost:hover{background:#fff;color:var(--ink)}
.hero .btn-primary{box-shadow:0 6px 0 var(--green-2)}

.shopby{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:clamp(18px,3vh,28px)}
.shopby-label{font-size:.82rem;color:#9aa09a;margin-right:4px}
.pill{min-height:40px;padding:8px 14px;border-radius:99px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.2);font-size:.88rem;transition:background .25s,color .25s,transform .25s var(--ease)}
.pill:hover,.pill:focus-visible{background:var(--lime);color:var(--ink);transform:translateY(-2px)}
.stats{display:flex;flex-wrap:wrap;gap:14px clamp(20px,3.4vw,40px);margin-top:clamp(20px,3.4vh,32px);padding-top:20px;border-top:1px solid rgba(255,255,255,.14)}
.stats b{display:block;font:800 clamp(1.3rem,2.4vw,1.9rem)/1.1 var(--f-display);color:var(--lime)}
.stats small{font-size:.78rem;color:#9aa09a}

/* Vitrine */
.hero-stage{position:relative;z-index:2;display:grid;justify-items:center;min-width:0}
.showcase{position:relative;width:min(420px,100%);transform-style:preserve-3d;transition:transform .25s ease-out}
.sc-track{position:relative;aspect-ratio:1/1.12;min-height:340px}
/* cartas empilhadas atrás, só decoração */
.sc-track::before,.sc-track::after{content:"";position:absolute;inset:0;border-radius:28px;background:#2a2d2a;border:2px solid rgba(255,255,255,.12)}
.sc-track::before{rotate:-6deg;translate:-14px 6px}
.sc-track::after{rotate:4deg;translate:12px 4px;background:var(--green)}
.slide{position:absolute;inset:0;z-index:1;display:flex;flex-direction:column;gap:12px;padding:16px;border-radius:28px;background:#fff;color:var(--ink);box-shadow:0 30px 70px rgba(0,0,0,.5),8px 8px 0 var(--lime);opacity:0;visibility:hidden;transform:translateX(18%) rotate(6deg) scale(.94);transition:transform .6s var(--ease),opacity .45s,visibility 0s .6s}
.slide[data-state=before]{transform:translateX(-18%) rotate(-6deg) scale(.94)}
.slide[data-state=active]{opacity:1;visibility:visible;transform:none;transition:transform .6s var(--ease),opacity .45s,visibility 0s}
.sl-art{position:relative;flex:1;min-height:0;display:grid;place-items:center;overflow:hidden;border-radius:20px;background:var(--c)}
@supports (background:color-mix(in srgb,red,white)){.sl-art{background:color-mix(in srgb,var(--c) 38%,#fff)}}
.sl-em{font-size:clamp(5rem,15vw,8.5rem);line-height:1;animation:bob 4.5s ease-in-out infinite;filter:drop-shadow(0 14px 14px rgba(0,0,0,.18))}
.ring{position:absolute;border:2px dashed rgba(0,0,0,.16);border-radius:50%;animation:spin 30s linear infinite}
.r1{width:62%;aspect-ratio:1}.r2{width:92%;aspect-ratio:1;animation-direction:reverse;animation-duration:44s}
@keyframes spin{to{rotate:360deg}}
@keyframes bob{50%{translate:0 -12px}}
.sl-tag{position:absolute;top:12px;left:12px;z-index:2;padding:5px 12px;border-radius:99px;background:var(--ink);color:#fff;font-size:.7rem;font-weight:800;text-transform:uppercase;letter-spacing:.04em}
.sl-tag.Oferta{background:var(--coral)}.sl-tag.Novo{background:var(--green)}
.sl-name{font-family:var(--f-display);font-size:clamp(1.05rem,2vw,1.25rem);line-height:1.15;padding:0 4px}
.sl-cat{font-size:.78rem;color:var(--muted);padding:0 4px;margin-top:-8px}
.sl-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:0 4px 2px}
.sl-foot .price{margin:0}
.sl-foot .add{margin:0;padding:12px 16px;border-radius:99px;white-space:nowrap}
.sc-ui{position:relative;z-index:2;display:flex;align-items:center;justify-content:center;gap:10px;margin-top:22px}
.sc-btn{width:44px;height:44px;border-radius:50%;border:2px solid rgba(255,255,255,.4);color:#fff;display:grid;place-items:center;font-size:.9rem;transition:background .25s,color .25s,transform .25s var(--ease)}
.sc-btn:hover{background:var(--lime);color:var(--ink);border-color:var(--lime);transform:scale(1.08)}
.sc-dots{display:flex}
.sc-dots button{width:26px;height:44px;display:grid;place-items:center}
.sc-dots button::before{content:"";width:9px;height:9px;border-radius:99px;background:rgba(255,255,255,.35);transition:width .35s var(--ease),background .25s}
.sc-dots button[aria-current=true]::before{width:26px;background:var(--lime)}

.float{position:absolute;z-index:3;padding:9px 14px;border-radius:99px;background:rgba(255,255,255,.96);color:var(--ink);font-size:.78rem;font-weight:700;white-space:nowrap;box-shadow:0 14px 30px rgba(0,0,0,.35);animation:bobm 5s ease-in-out infinite}
@keyframes bobm{50%{margin-top:-10px}}
.f1{top:24%;left:-12%}.f2{top:7%;right:-8%;animation-delay:-1.5s}.f3{top:38%;right:-7%;animation-delay:-3s}

.scroll-cue{position:absolute;left:50%;bottom:16px;translate:-50% 0;display:flex;flex-direction:column;align-items:center;gap:6px;font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:#9aa09a}
.scroll-cue i{width:2px;height:28px;background:linear-gradient(var(--lime),transparent);animation:cue 1.8s ease-in-out infinite;transform-origin:top}
@keyframes cue{0%{transform:scaleY(0)}50%{transform:scaleY(1)}100%{transform:scaleY(1);opacity:0}}

/* Responsivo: quebra quando o conteúdo deixa de caber, não por aparelho */
@media (max-width:960px){
  .hero{grid-template-columns:minmax(0,1fr);padding-top:92px;padding-bottom:56px}
  .hero-copy{translate:none;opacity:1}
  .hero-stage{margin-top:12px}
  .scroll-cue{display:none}
  .f1{left:-2%}.f2{right:-2%}.f3{right:-2%}
}
@media (max-width:520px){
  .f3,.f1{display:none}
  .shopby-label{flex-basis:100%}
  .sc-track{min-height:320px}
}
@media (max-height:600px) and (orientation:landscape){
  .hero{min-height:auto;padding-top:84px}
  .scroll-cue{display:none}
}

/* ---------- Marquee ---------- */
.marquee{position:relative;background:var(--lime);color:var(--ink);overflow:hidden;white-space:nowrap;padding:14px 0;border-block:3px solid var(--ink);rotate:-1deg;margin:-14px -10px 0;position:relative;z-index:5}
.marquee-track{display:inline-flex;animation:marq 28s linear infinite}
.marquee-track span{font-family:var(--f-display);font-weight:800;font-size:1.3rem;letter-spacing:.05em;padding-right:1ch}
@keyframes marq{to{transform:translateX(-50%)}}

/* ---------- Seções ---------- */
.section{padding:clamp(64px,10vw,120px) clamp(16px,5vw,64px)}
.section.paper{background:#fff;position:relative}
.section.paper::before{content:"";position:absolute;left:0;right:0;top:-1px;height:18px;background:var(--paper);clip-path:polygon(0 0,100% 0,100% 40%,96% 90%,90% 30%,84% 100%,76% 40%,68% 90%,60% 20%,52% 100%,44% 40%,36% 90%,28% 30%,20% 100%,12% 40%,6% 90%,0 30%)}
.section-head{display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:16px;margin-bottom:36px}
.title{font-family:var(--f-display);font-weight:800;font-size:clamp(2rem,5vw,3.6rem);letter-spacing:-.02em;line-height:1}
.title em{font-style:normal;background:linear-gradient(transparent 62%,var(--lime) 62%)}
.section-head p{color:var(--muted)}

/* Revelação ao rolar */
.reveal{opacity:0;transform:translateY(40px);transition:opacity .9s var(--ease),transform .9s var(--ease);transition-delay:var(--d,0s)}
.reveal.in{opacity:1;transform:none}

/* Categorias */
.cat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:18px}
.cat{position:relative;aspect-ratio:1/1.05;border-radius:var(--r);padding:20px;display:flex;flex-direction:column;justify-content:space-between;text-align:left;overflow:hidden;background:var(--c);color:var(--ink);transition:transform .4s var(--ease),box-shadow .4s;transform-style:preserve-3d}
.cat:hover{box-shadow:0 22px 40px rgba(0,0,0,.18)}
.cat .big{font-size:5.5rem;align-self:center;transition:transform .5s var(--ease)}
.cat:hover .big{transform:scale(1.2) rotate(-8deg)}
.cat b{font-family:var(--f-display);font-size:1.3rem}
.cat small{font-weight:500;opacity:.7}
.cat::after{content:"↗";position:absolute;top:16px;right:18px;width:36px;height:36px;border-radius:50%;background:var(--ink);color:#fff;display:grid;place-items:center;transition:transform .3s var(--ease)}
.cat:hover::after{transform:rotate(45deg)}

/* Filtros */
.tools{display:flex;gap:10px;flex-wrap:wrap}
.field input,.field select{padding:12px 16px;border-radius:99px;border:2px solid var(--ink);background:#fff;font:inherit;min-width:180px}
.chips{display:flex;gap:10px;overflow-x:auto;padding:4px 0 14px;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chip{white-space:nowrap;min-height:44px;padding:10px 18px;border-radius:99px;border:2px solid var(--ink);font-weight:600;font-size:.92rem;transition:background .25s,color .25s,transform .25s var(--ease)}
.chip:hover{transform:translateY(-2px)}
.chip[aria-pressed=true]{background:var(--ink);color:#fff}
.count{color:var(--muted);font-size:.9rem;margin:6px 0 18px}

/* Produtos */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:22px}
.card{position:relative;background:var(--paper);border-radius:var(--r);padding:12px;display:flex;flex-direction:column;border:2px solid transparent;transition:transform .4s var(--ease),border-color .3s,box-shadow .4s;animation:cardIn .6s var(--ease) backwards;animation-delay:var(--d,0s)}
.card:hover{transform:translateY(-8px) rotate(-.6deg);border-color:var(--ink);box-shadow:8px 8px 0 var(--ink)}
@keyframes cardIn{from{opacity:0;transform:translateY(30px) scale(.96)}}
.thumb{position:relative;aspect-ratio:1;border-radius:14px;background:var(--c);display:grid;place-items:center;overflow:hidden}
.thumb .em{font-size:5rem;transition:transform .5s var(--ease)}
.card:hover .thumb .em{transform:scale(1.18) rotate(6deg)}
.tag{position:absolute;top:0;left:0;padding:6px 14px 6px 10px;font-size:.7rem;font-weight:800;text-transform:uppercase;background:var(--ink);color:#fff;clip-path:polygon(0 0,100% 0,85% 100%,0 100%)}
.tag.Oferta{background:var(--coral)}.tag.Novo{background:var(--green)}
.card h3{font-size:.98rem;font-weight:600;margin:14px 4px 4px;min-height:2.6em}
.card .cat-name{margin:0 4px;font-size:.78rem;color:var(--muted)}
.price{margin:8px 4px 12px;display:flex;align-items:baseline;gap:8px}
.price b{font-family:var(--f-display);font-size:1.4rem}
.price s{color:var(--muted);font-size:.85rem}
.add{margin-top:auto;display:flex;align-items:center;justify-content:center;gap:8px;padding:12px;border-radius:12px;background:var(--ink);color:#fff;font-weight:600;transition:background .25s,color .25s,transform .2s}
.add:hover{background:var(--green)}
.add:active{transform:scale(.96)}
.add.ok{background:var(--lime);color:var(--ink)}
.empty{text-align:center;padding:40px;color:var(--muted)}

/* Oferta */
.deal{background:var(--ink);color:#fff;padding:clamp(56px,9vw,110px) clamp(16px,5vw,64px);position:relative;overflow:hidden}
.deal::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 80% 20%,rgba(23,163,90,.35),transparent 50%)}
.deal-inner{position:relative;display:grid;grid-template-columns:1.2fr 1fr;gap:40px;align-items:center;max-width:1200px;margin:auto}
.deal h2{font-family:var(--f-display);font-weight:800;font-size:clamp(2.2rem,6vw,4.6rem);line-height:.98;margin:10px 0 16px}
.deal h2 em{font-style:normal;color:var(--lime)}
.deal p{color:#c4c9c4;max-width:460px}
.countdown{display:flex;gap:12px;margin:26px 0}
.countdown div{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.2);border-radius:14px;padding:12px 18px;text-align:center;min-width:76px}
.countdown b{font:800 2rem var(--f-display);display:block;font-variant-numeric:tabular-nums}
.countdown small{font-size:.7rem;text-transform:uppercase;color:#aab}
.deal .btn-primary{box-shadow:0 6px 0 var(--green-2)}
.deal-art{position:relative;height:340px}
.polaroid{position:absolute;width:170px;aspect-ratio:.85;background:#fff;border-radius:6px;display:grid;place-items:center;font-size:5rem;box-shadow:0 20px 40px rgba(0,0,0,.5);transition:transform .5s var(--ease)}
.p1{left:4%;top:10%;rotate:-8deg;background:#ffd9d9}
.p2{left:34%;top:30%;rotate:5deg;background:#d9f5df;z-index:2}
.p3{right:0;top:2%;rotate:11deg;background:#fff1c9}
.deal-art:hover .p1{transform:translateX(-14px) rotate(-6deg)}.deal-art:hover .p3{transform:translateX(14px) rotate(6deg)}.deal-art:hover .p2{transform:translateY(-12px) scale(1.05)}

/* Confiança */
.trust{padding-block:70px}
.trust-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:18px;max-width:1200px;margin:auto}
.trust article{padding:24px;border-radius:var(--r);background:#fff;border:2px solid var(--ink);transition:transform .3s var(--ease),box-shadow .3s}
.trust article:hover{transform:translate(-4px,-4px);box-shadow:6px 6px 0 var(--green)}
.trust span{font-size:2rem}.trust h3{font-family:var(--f-display);margin:8px 0 4px}.trust p{color:var(--muted);font-size:.92rem}

/* Depoimentos */
.testi{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px;max-width:1200px;margin:auto}
.testi figure{background:#fff;padding:26px;border-radius:var(--r);box-shadow:0 10px 30px rgba(0,0,0,.06)}
.testi figure:nth-child(2){background:var(--green);color:#fff;transform:translateY(-12px)}
html.js .testi figure:nth-child(2).reveal:not(.in){transform:translateY(24px)}
.stars{color:#f5b301;letter-spacing:3px;margin-bottom:10px}
.testi blockquote{font-size:1.05rem;font-weight:500;margin-bottom:18px}
.testi figcaption{display:flex;align-items:center;gap:10px;font-size:.88rem;opacity:.85}
.testi i{font-style:normal;font-weight:800;width:34px;height:34px;border-radius:50%;background:var(--lime);color:var(--ink);display:grid;place-items:center}

.cta-band{margin:0 clamp(16px,5vw,64px) 80px;padding:clamp(32px,6vw,64px);border-radius:28px;background:var(--lime);display:flex;flex-wrap:wrap;gap:20px;align-items:center;justify-content:space-between;border:3px solid var(--ink)}
.cta-band h2{font-family:var(--f-display);font-weight:800;font-size:clamp(1.8rem,4.5vw,3rem);line-height:1}
.cta-band h2 em{font-style:normal;text-decoration:underline wavy var(--green);text-underline-offset:6px}
.cta-band .btn-primary{background:var(--ink);color:#fff;box-shadow:0 6px 0 var(--green)}

/* Footer */
.footer{background:var(--ink);color:#d7dbd7;padding:64px clamp(16px,5vw,64px) 28px}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:32px;max-width:1200px;margin:auto}
.footer h2{font-size:1rem;font-family:var(--f-display);color:#fff;margin-bottom:12px}
.footer li{margin-bottom:8px;font-size:.92rem}
.footer a:hover{color:var(--lime)}
.footer .muted{margin-top:14px;color:#8d928d;font-size:.9rem;max-width:300px}
.copy{text-align:center;margin-top:44px;font-size:.8rem;color:#7a7f7a}

/* Carrinho */
.scrim{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:400;animation:fade .3s}
.scrim[hidden]{display:none}
.drawer{visibility:hidden;position:fixed;top:0;right:0;height:100%;width:min(420px,100%);background:var(--paper);z-index:500;display:flex;flex-direction:column;transform:translateX(100%);transition:transform .5s var(--ease);box-shadow:-20px 0 60px rgba(0,0,0,.3)}
.drawer.open{transform:none;visibility:visible}
.drawer{transition:transform .45s var(--ease),visibility 0s .45s}.drawer.open{transition:transform .45s var(--ease),visibility 0s}
.drawer>header{display:flex;justify-content:space-between;align-items:center;padding:18px 20px;border-bottom:2px solid var(--ink)}
.drawer h2{font-family:var(--f-display);font-size:1.4rem}
.free-ship{padding:14px 20px;font-size:.85rem;background:#fff}
.bar{height:8px;border-radius:9px;background:#e5e5e0;margin-top:8px;overflow:hidden}
.bar i{display:block;height:100%;background:linear-gradient(90deg,var(--green-2),var(--lime));transition:width .6s var(--ease)}
.cart-list{flex:1;overflow:auto;padding:12px 20px}
.cart-empty{text-align:center;color:var(--muted);padding:50px 10px}
.ci{display:grid;grid-template-columns:56px 1fr auto;gap:12px;align-items:center;padding:12px 0;border-bottom:1px dashed #cfcfc8;animation:rise .4s var(--ease)}
.ci .em{width:56px;height:56px;border-radius:12px;display:grid;place-items:center;font-size:1.9rem;background:var(--c)}
.ci h3{font-size:.9rem;font-weight:600}
.ci .p{font-size:.85rem;color:var(--muted)}
.qty{display:inline-flex;align-items:center;gap:2px;margin-top:6px;border:2px solid var(--ink);border-radius:99px}
.qty button{width:36px;height:36px;font-weight:700}
.qty span{min-width:22px;text-align:center;font-weight:600;font-size:.9rem}
.ci .rm{color:var(--coral);font-size:.8rem;text-decoration:underline}
.drawer>footer{padding:18px 20px;border-top:2px solid var(--ink);background:#fff}
.total{display:flex;justify-content:space-between;font-size:1.1rem;margin-bottom:14px}
.total b{font-family:var(--f-display);font-size:1.6rem}
.link{display:block;margin:12px auto 0;font-size:.82rem;color:var(--muted);text-decoration:underline}
.toast{position:fixed;left:50%;bottom:24px;translate:-50% 120px;background:var(--ink);color:#fff;padding:12px 20px;border-radius:99px;z-index:600;font-weight:500;transition:translate .5s var(--ease);box-shadow:0 10px 30px rgba(0,0,0,.3)}
.toast.show{translate:-50% 0}

/* ---------- Responsivo (mobile-first ajustes) ---------- */
@media (max-width:960px){
  .deal-inner{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:760px){
  .burger{display:grid}
  .nav{position:fixed;inset:64px 0 auto 0;flex-direction:column;gap:0;background:var(--paper);padding:8px 20px 20px;border-bottom:2px solid var(--ink);transform:translateY(-130%);transition:transform .5s var(--ease);z-index:-1}
  .nav{visibility:hidden}.nav.open{transform:none;visibility:visible}
  .nav a{padding:14px 0;font-size:1.2rem;border-bottom:1px solid #ddd}
  .grid{grid-template-columns:repeat(2,1fr);gap:12px}
  .card h3{font-size:.88rem}
  .thumb .em{font-size:3.6rem}
  .cat-grid{grid-template-columns:repeat(2,1fr)}
  .cat .big{font-size:4rem}
  .field input,.field select{min-width:0;width:100%}
  .tools,.field{width:100%}
  .testi figure:nth-child(2){transform:none}
  .footer-grid{grid-template-columns:1fr}
}

/* Acessibilidade: movimento reduzido = fade curto / estado final */
.marquee.paused .marquee-track{animation-play-state:paused}
.mq-toggle{position:absolute;right:10px;top:50%;translate:0 -50%;z-index:6;width:32px;height:32px;border-radius:50%;background:var(--ink);color:var(--lime);font-size:.75rem;display:grid;place-items:center}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;scroll-behavior:auto!important}
  html.js .reveal{transform:none;transition:opacity .15s linear}
  .line>span{transform:none}
  .float,.card:hover,.btn,.cat:hover .big{transform:none!important}
  .marquee-track{animation:none!important}
}

/* Hero: movimento reduzido = só fade, sem deslocamentos nem parallax */
@media (prefers-reduced-motion:reduce){
  .slide,.slide[data-state=before],.slide[data-state=active]{transform:none!important;transition:opacity .15s linear,visibility 0s!important}
  .swap>span,.swap>span.out{transform:none!important;transition:opacity .15s linear!important}
  .hero-copy,.hero-k,.blob{translate:none!important;opacity:1}
  .hero-copy{opacity:1!important}
}

/* Header claro sobre o hero escuro; volta ao normal ao rolar */
.header:not(.scrolled){color:#fff}
.header:not(.scrolled) .logo-k{color:#fff}
.header:not(.scrolled) .brand-text small{color:#aab0aa}
.header:not(.scrolled) .icon-btn:hover{background:rgba(255,255,255,.14)}
.header:not(.scrolled) .nav a::after{background:var(--lime)}
.eyebrow{max-width:100%}
@media (max-width:760px){.nav a{color:var(--ink)}}

/* Hero invertido no desktop: vitrine à esquerda, texto à direita */
.hero{grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr)}
.hero-stage{grid-column:1;grid-row:1}
.hero-copy{grid-column:2;grid-row:1}
.grid-lines{-webkit-mask-image:radial-gradient(ellipse at 28% 40%,#000 5%,transparent 70%);mask-image:radial-gradient(ellipse at 28% 40%,#000 5%,transparent 70%)}
.hero-k{right:auto;left:-4vw}
.b1{right:auto;left:-100px}
.b2{left:auto;right:12%}
.f1{left:auto;right:-9%}.f2{right:auto;left:-8%}.f3{right:auto;left:-7%}
@media (max-width:960px){
  .hero{grid-template-columns:minmax(0,1fr)}
  .hero-stage,.hero-copy{grid-column:auto;grid-row:auto}
  .f1{right:-2%}.f2{left:-2%}.f3{left:-2%}
}

/* ---------- Hero: fundo em camadas ---------- */
.bg-glow{position:absolute;left:26%;top:52%;width:min(760px,90vw);aspect-ratio:1;translate:-50% -50%;border-radius:50%;background:radial-gradient(circle,rgba(23,163,90,.55) 0%,rgba(200,240,49,.14) 38%,transparent 68%);animation:breathe 7s ease-in-out infinite}
@keyframes breathe{50%{transform:scale(1.08);opacity:.85}}
.bg-rings{position:absolute;left:26%;top:52%;width:min(900px,95vw);aspect-ratio:1;translate:-50% -50%}
.bg-rings .rg1,.bg-rings .rg2,.bg-rings .dotA,.bg-rings .dotB{transform-origin:400px 400px;transform-box:view-box}
.rg1{animation:spin 90s linear infinite}
.rg2{animation:spin 140s linear infinite reverse}
.dotA{animation:spin 30s linear infinite}
.dotB{animation:spin 46s linear infinite reverse}
.bg-icon{position:absolute;font-size:var(--s,2.6rem);opacity:.13;animation:iconFloat var(--t,14s) ease-in-out var(--dl,0s) infinite alternate;user-select:none}
.i1{top:14%;left:4%;--s:3rem;--t:13s}
.i2{top:70%;left:3%;--s:2.4rem;--b:1.5px;--t:16s;--dl:-4s}
.i3{top:10%;left:44%;--s:3.4rem;--b:2px;--t:18s;--dl:-8s}
.i4{top:82%;left:40%;--s:2.8rem;--t:15s;--dl:-2s}
.i5{top:26%;right:6%;--s:2.6rem;--t:12s;--dl:-6s}
.i6{top:76%;right:5%;--s:3.2rem;--b:1.5px;--t:17s;--dl:-9s}
.i7{top:88%;left:58%;--s:2.2rem;--t:14s;--dl:-5s}
.i8{top:6%;right:26%;--s:2.8rem;--b:2px;--t:19s;--dl:-3s}
.i9{top:84%;right:22%;--s:2.2rem;--t:13s;--dl:-7s}
@keyframes iconFloat{from{transform:translate(0,0) rotate(-8deg)}to{transform:translate(18px,-26px) rotate(10deg)}}
.bg-spot{position:absolute;left:0;top:0;width:560px;aspect-ratio:1;margin:-280px 0 0 -280px;border-radius:50%;background:radial-gradient(circle,rgba(200,240,49,.16),transparent 62%);opacity:0;transition:opacity .5s}
.hero.spot-on .bg-spot{opacity:1}
.bg-vignette{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 45%,transparent 45%,rgba(0,0,0,.55) 100%)}
.bg-grain{position:absolute;inset:0;opacity:.05;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
@media (max-width:960px){
  .bg-glow,.bg-rings{left:50%;top:78%}
  .bg-icon{opacity:.1}
  .i3,.i7,.i8,.i9{display:none}
}
@media (prefers-reduced-motion:reduce){
  .bg-glow,.bg-icon,.rg1,.rg2,.dotA,.dotB{animation:none!important}
  .bg-spot{display:none}
}


/* ---------- Ajustes das skills: a11y, performance, copy ---------- */
.hero :focus-visible,.footer :focus-visible,.deal :focus-visible{outline-color:var(--lime)}
.hero.off *,.hero.off *::before,.hero.off *::after{animation-play-state:paused!important}
.fine{font-size:.78rem;color:var(--muted);text-align:center;margin-top:10px}
.empty p{margin-bottom:14px}
.empty .btn{border-color:var(--ink)}
.free-ship[hidden]{display:none}
.footer li a{display:inline-block;padding:4px 0}


/* ---------- Vitrine 3D ---------- */
.showcase{width:min(540px,100%);transform:none!important}
.stage3d{position:relative;width:100%;height:clamp(290px,46vh,450px)}
.stage3d canvas{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:pan-y;cursor:grab;outline:none}
.stage3d canvas.grabbing{cursor:grabbing}
.sc-fallback{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:10px;text-align:center}
.sc-emoji{font-size:clamp(6rem,16vw,9rem);line-height:1;filter:drop-shadow(0 18px 18px rgba(0,0,0,.35))}
.sc-note{max-width:15rem;font-size:.8rem;color:#b9beb9;background:rgba(255,255,255,.08);padding:8px 12px;border-radius:12px}
.sc-note[hidden]{display:none}
.showcase.has3d .sc-fallback{display:none}
.sc-loading{position:absolute;left:50%;bottom:8px;translate:-50% 0;font-size:.78rem;color:#b9beb9;background:rgba(0,0,0,.35);padding:5px 12px;border-radius:99px}
.sc-loading[hidden],.showcase:not(.has3d) .sc-loading{display:none}
.sc-hint{position:absolute;right:6px;top:4px;font-size:.74rem;color:#cfd3cf;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);padding:5px 12px;border-radius:99px;pointer-events:none}
.sc-hint span{color:var(--lime);margin-right:4px}
.showcase:not(.has3d) .sc-hint{display:none}

.sc-caption{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:6px;padding:12px 14px;border-radius:20px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);color:#fff}
.sc-info{min-width:0}
.sc-caption .sl-name{font-size:clamp(1rem,1.7vw,1.2rem);padding:0;color:#fff}
.sc-caption .sl-cat{color:#aab0aa;padding:0;margin:2px 0 0}
.sc-caption .sl-foot{padding:0;flex-shrink:0}
.sc-caption .price b{color:#fff}
.sc-caption .price s{color:#9aa09a}
.sc-caption .add{background:var(--lime);color:var(--ink)}
.sc-caption .add:hover{background:#fff}
.sc-ui{margin-top:16px}
.credits{max-width:1200px;margin:34px auto 0;font-size:.72rem;line-height:1.6;color:#7a7f7a;text-align:center}
.credits a{text-decoration:underline}
@media (max-width:520px){
  .stage3d{height:clamp(250px,40vh,340px)}
  .sc-caption{flex-wrap:wrap}
  .sc-caption .sl-foot{width:100%;justify-content:space-between}
}

/* Legenda com altura fixa: trocar de modelo não faz o layout pular */
.sc-caption{min-height:84px}
.sc-caption .sl-name{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
@media (max-width:520px){.sc-caption{min-height:0}}

/* ---------- Vitrine 3D maior; o modelo surge de baixo, por trás da legenda ---------- */
.showcase{width:min(660px,100%)}
.stage3d{--sh:clamp(380px,66vh,640px);height:var(--sh);margin-bottom:calc(var(--sh) * -.1)}
.sc-caption{background:rgba(16,18,16,.96);border-color:rgba(255,255,255,.14);z-index:3}
@media (max-width:520px){.stage3d{--sh:clamp(340px,54vh,460px)}}
@media (max-height:600px) and (orientation:landscape){.stage3d{--sh:clamp(280px,70vh,420px)}}

/* Título do hero cabe na coluna depois que a vitrine ficou maior */
.hero-title{font-size:clamp(2.2rem,4.4vw + .5rem,4.4rem)}
@media (min-width:961px){.hero{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}

/* ==========================================================
   Fundo do hero: iluminação cinematográfica (só gradientes; nenhum elemento novo)
   - base em degradê esmeralda profundo (não mais preto chapado)
   - foco de luz limpo atrás do produto + raios suaves
   - verdes sem mistura com lima (tirava o tom marrom-oliva)
   - bordas e lado do texto mais escuros (contraste e profundidade)
   ========================================================== */
.hero{
  background:
    radial-gradient(70% 85% at 27% 50%, rgba(20,120,78,.55) 0%, rgba(11,70,46,.38) 38%, transparent 72%),
    radial-gradient(60% 70% at 100% 100%, rgba(8,64,56,.55) 0%, transparent 65%),
    linear-gradient(135deg, #0c2a1d 0%, #07120d 46%, #050907 100%);
}
.blob{opacity:.5}
.b1{background:radial-gradient(circle,rgba(34,197,120,.55) 0%,transparent 66%)}
.b2{background:radial-gradient(circle,rgba(8,110,92,.5) 0%,transparent 66%)}

/* foco de luz atrás do produto: núcleo claro e frio -> verde -> nada; mais raios de luz suaves */
.bg-glow{
  left:27%;top:47%;width:min(900px,105vw);
  background:
    conic-gradient(from 190deg at 50% 50%, transparent 0deg, rgba(190,255,225,.07) 18deg, transparent 38deg, transparent 150deg, rgba(190,255,225,.05) 168deg, transparent 190deg, transparent 360deg),
    radial-gradient(circle, rgba(170,255,215,.30) 0%, rgba(52,211,140,.24) 20%, rgba(18,130,84,.16) 42%, rgba(8,70,48,.07) 60%, transparent 72%);
  -webkit-mask-image:radial-gradient(circle,#000 35%,transparent 70%);mask-image:radial-gradient(circle,#000 35%,transparent 70%);
}
.bg-rings{left:27%;top:47%}

/* grade: some nas bordas, só aparece onde a luz bate */
.grid-lines{
  background-image:linear-gradient(rgba(190,255,225,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(190,255,225,.05) 1px,transparent 1px);
  -webkit-mask-image:radial-gradient(ellipse at 27% 52%,#000 0%,transparent 62%);mask-image:radial-gradient(ellipse at 27% 52%,#000 0%,transparent 62%);
}

/* luz do mouse: mais suave e esverdeada */
.bg-spot{background:radial-gradient(circle,rgba(150,255,210,.13),transparent 62%)}

/* bordas escuras (vinheta) concentradas no produto; lado do texto mais escuro p/ contraste */
.bg-vignette{
  background:
    radial-gradient(ellipse at 27% 50%, transparent 38%, rgba(0,0,0,.62) 100%),
    linear-gradient(90deg, transparent 38%, rgba(3,8,5,.5) 100%);
}
.bg-grain{opacity:.07}
.bg-icon{opacity:.08}
.hero-k{-webkit-text-stroke:2px rgba(190,255,225,.05)}
@media (max-width:960px){
  .hero{background:
    radial-gradient(90% 55% at 50% 78%, rgba(20,120,78,.5) 0%, rgba(11,70,46,.3) 45%, transparent 75%),
    linear-gradient(170deg, #0c2a1d 0%, #07120d 50%, #050907 100%)}
  .bg-glow,.bg-rings{left:50%;top:78%}
  .bg-vignette{background:radial-gradient(ellipse at 50% 70%, transparent 40%, rgba(0,0,0,.6) 100%)}
}

/* ---------- Faixa de categorias: loop infinito, espaçamento maior ---------- */
.marquee-track{animation:marq var(--mq-dur,40s) linear infinite}
.mq-half{display:flex;flex-shrink:0;align-items:center}
.mq-item,.mq-sep{padding:0!important}
.mq-sep{margin:0 clamp(2.2rem,5vw,5rem);font-size:.85em}

/* ---------- Navbar: ícone em cada aba + "Início" ---------- */
.nav a{display:inline-flex;align-items:center;gap:8px}
.nav svg{width:18px;height:18px;flex-shrink:0;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;color:var(--green);transition:transform .3s var(--ease)}
.header:not(.scrolled) .nav svg{color:var(--lime)}
.nav a:hover svg,.nav a:focus-visible svg{transform:translateY(-2px) scale(1.12)}
@media (max-width:1100px){.nav{gap:20px}}
/* com 5 abas + ícones, o menu vira hambúrguer um pouco antes */
@media (max-width:900px){
  .burger{display:grid}
  .nav{position:fixed;inset:64px 0 auto 0;flex-direction:column;align-items:stretch;gap:0;background:var(--paper);padding:8px 20px 20px;border-bottom:2px solid var(--ink);transform:translateY(-130%);transition:transform .5s var(--ease);z-index:-1;visibility:hidden}
  .nav.open{transform:none;visibility:visible}
  .nav a{padding:14px 0;font-size:1.2rem;border-bottom:1px solid #ddd;color:var(--ink);gap:14px}
  .nav svg,.header:not(.scrolled) .nav svg{width:22px;height:22px;color:var(--green)}
}

/* ==========================================================
   ANIMAÇÕES · só transform/opacity; tudo respeita prefers-reduced-motion
   ========================================================== */

/* ---- Revelação ao rolar: variantes (data-anim) ---- */
html.js .reveal[data-anim=left]:not(.in){transform:translateX(-64px)}
html.js .reveal[data-anim=right]:not(.in){transform:translateX(64px)}
html.js .reveal[data-anim=zoom]:not(.in){transform:scale(.86)}
html.js .reveal[data-anim=pop]:not(.in){transform:translateY(34px) scale(.9)}
html.js .reveal[data-anim=flip]:not(.in){transform:perspective(900px) rotateX(-24deg) translateY(40px) scale(.95);transform-origin:50% 100%}
/* depois de revelado, devolve a transição rápida do hover (sem o atraso do stagger) */
html.js .card.reveal.done{transition:transform .4s var(--ease),border-color .3s,box-shadow .4s}
html.js .cat.reveal.done{transition:transform .4s var(--ease),box-shadow .4s}
html.js .trust article.reveal.done{transition:transform .3s var(--ease),box-shadow .3s}
html.js .card{animation:none}

/* ---- Hero: entrada coreografada ---- */
@keyframes heroRise{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
@keyframes stageIn{from{opacity:0;transform:scale(.9) translateY(30px)}to{opacity:1;transform:none}}
html.js .hero-copy .eyebrow{animation:heroRise .7s var(--ease) .05s backwards}
html.js .hero-sub{animation:heroRise .8s var(--ease) .45s backwards}
html.js .hero-cta{animation:heroRise .8s var(--ease) .6s backwards}
html.js .stats{animation:heroRise .8s var(--ease) .75s backwards}
html.js .hero-stage{animation:stageIn 1.2s var(--ease) .15s backwards}

/* ---- Título das seções: o sublinhado lima "se desenha" ---- */
.title em{background-repeat:no-repeat;background-position:0 100%;transition:background-size .9s var(--ease) .35s}
html.js .title em{background-size:0% 100%}
html.js .in .title em,html.js .title.in em{background-size:100% 100%}

/* ---- Categorias: emoji pula ao aparecer ---- */
.cat .big{transition:transform .85s cubic-bezier(.34,1.56,.64,1) calc(var(--d,0s) + .2s)}
html.js .cat.reveal:not(.in) .big{transform:scale(.3) rotate(-30deg)}
.cat.done .big{transition:transform .5s var(--ease)}

/* ---- Presentes: polaroids se abrem em leque + parallax no scroll ---- */
.polaroid{transition:transform 1s cubic-bezier(.34,1.3,.64,1) var(--pd,0s),opacity .6s var(--pd,0s)}
html.js .deal-art:not(.in) .polaroid{transform:translateY(90px) scale(.5);opacity:0}
.p1{--pd:.15s;translate:0 calc((var(--dp,.5) - .5) * -70px)}
.p2{--pd:.3s;translate:0 calc((var(--dp,.5) - .5) * 40px)}
.p3{--pd:.45s;translate:0 calc((var(--dp,.5) - .5) * -110px)}
.deal-art.done .polaroid{transition:transform .5s var(--ease)}

/* ---- Como comprar: ícones "pulam" ---- */
.trust article span{display:inline-block;transition:transform .85s cubic-bezier(.34,1.56,.64,1) calc(var(--d,0s) + .25s),opacity .4s calc(var(--d,0s) + .25s)}
html.js .trust article.reveal:not(.in) span{transform:scale(.3) rotate(-25deg);opacity:0}

/* ---- Botões: brilho que atravessa ---- */
.btn-primary{position:relative;overflow:hidden}
.btn-primary::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(110deg,transparent 35%,rgba(255,255,255,.7) 50%,transparent 65%);transform:translateX(-130%)}
.btn-primary:hover::after{transform:translateX(130%);transition:transform .8s var(--ease)}
.hero .btn-primary::after{animation:shine 5.5s ease-in-out 2.4s infinite}
@keyframes shine{0%,68%{transform:translateX(-130%)}100%{transform:translateX(130%)}}

/* ---- Cards de produto: brilho que segue o mouse + inclinação 3D ---- */
.card{isolation:isolate;overflow:hidden}
.card::before{content:"";position:absolute;inset:0;z-index:2;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .3s;background:radial-gradient(240px circle at var(--mx,50%) var(--my,50%),rgba(200,240,49,.28),transparent 62%)}
.card:hover::before{opacity:1}
.card:hover{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(-8px)}

/* ---- Carrinho: item voa até o ícone + balanço ---- */
.fly{position:fixed;left:0;top:0;z-index:700;font-size:2rem;line-height:1;pointer-events:none;will-change:transform}
.cart-btn.wiggle{animation:wiggle .7s var(--ease)}
@keyframes wiggle{20%{transform:rotate(-16deg) scale(1.18)}40%{transform:rotate(12deg) scale(1.18)}60%{transform:rotate(-7deg) scale(1.08)}80%{transform:rotate(3deg)}}

/* ---- Movimento reduzido: tudo aparece direto, sem deslocamento ---- */
@media (prefers-reduced-motion:reduce){
  html.js .reveal[data-anim]:not(.in){transform:none}
  html.js .deal-art:not(.in) .polaroid{transform:none;opacity:1}
  html.js .trust article.reveal:not(.in) span,html.js .cat.reveal:not(.in) .big{transform:none;opacity:1}
  html.js .title em{background-size:100% 100%}
  .btn-primary::after,.fly{display:none}
  .card:hover{transform:none}
}

/* ==========================================================
   Transições entre seções: ondas curvas que flutuam devagar
   (cada onda é pintada na cor da seção vizinha: a emenda some)
   ========================================================== */
:root{
  --wave-h:clamp(52px,7vw,100px);
  /* região ACIMA da curva preenchida (cor da seção de cima) */
  --wave-up-white:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 80' preserveAspectRatio='none'%3E%3Cpath fill='%23fff' d='M0 40C200 0 400 0 600 40S1000 80 1200 40V0H0Z'/%3E%3C/svg%3E");
  /* região ABAIXO da curva preenchida (cor da seção de baixo) */
  --wave-down-paper:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 80' preserveAspectRatio='none'%3E%3Cpath fill='%23F6F4EE' d='M0 40C200 0 400 0 600 40S1000 80 1200 40V80H0Z'/%3E%3C/svg%3E");
  --wave-down-ink:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 80' preserveAspectRatio='none'%3E%3Cpath fill='%230E0F0E' d='M0 40C200 0 400 0 600 40S1000 80 1200 40V80H0Z'/%3E%3C/svg%3E");
}
@keyframes waveDrift{to{transform:translateX(-1200px)}}

/* catálogo (branco) -> Presentes (escuro): onda branca no topo da seção escura */
.deal::after{content:"";position:absolute;left:0;top:-1px;z-index:1;width:calc(100% + 1200px);height:var(--wave-h);pointer-events:none;
  background:var(--wave-up-white) repeat-x 0 0/1200px 100%;animation:waveDrift 20s linear infinite}
.deal{padding-top:calc(clamp(56px,9vw,110px) + 20px)}

/* Presentes (escuro) -> Como comprar (papel): onda cor de papel no topo da seção de baixo */
.section.trust{position:relative;overflow-x:clip}
.section.trust::before{content:"";position:absolute;left:0;top:calc(1px - var(--wave-h));z-index:2;width:calc(100% + 1200px);height:var(--wave-h);pointer-events:none;
  background:var(--wave-down-paper) repeat-x 0 100%/1200px 100%;animation:waveDrift 24s linear infinite reverse}

/* faixa final (papel) -> rodapé (escuro): onda escura no topo do rodapé */
.footer{position:relative;overflow-x:clip}
.footer::before{content:"";position:absolute;left:0;top:calc(1px - var(--wave-h));width:calc(100% + 1200px);height:var(--wave-h);pointer-events:none;
  background:var(--wave-down-ink) repeat-x 0 100%/1200px 100%;animation:waveDrift 26s linear infinite}

/* espaço para a onda do rodapé não encostar na faixa final */
.cta-band{margin-bottom:calc(var(--wave-h) + 40px)}

/* Presentes: mais respiro entre título, texto, botão e a onda de baixo */
.deal h2{margin:14px 0 22px}
.deal p{line-height:1.65}
.deal-copy .btn{margin-top:clamp(28px,3.5vw,40px)}
.deal{padding-bottom:calc(clamp(56px,9vw,110px) + 40px)}

/* Legendas dos números do hero em maiúsculas */
.stats small{text-transform:uppercase;letter-spacing:.09em;font-size:.7rem;font-weight:500}

/* ==========================================================
   Chips com emoji + card clicável + PÁGINA DO PRODUTO
   ========================================================== */
.chip{display:inline-flex;align-items:center;gap:8px}
.chip span{font-size:1.1em;line-height:1}
.card{cursor:pointer}
.card h3 a{color:inherit;text-decoration:none}
.card-link::after{content:"";position:absolute;inset:0;z-index:1}      /* o card inteiro é clicável */
.card .add{position:relative;z-index:3}
.card-link:focus-visible{outline:none}
.card:has(.card-link:focus-visible){outline:3px solid var(--green-2);outline-offset:3px}

.pdp{position:fixed;inset:0;z-index:350;overflow-y:auto;overscroll-behavior:contain;background:var(--paper);opacity:0;transform:translateY(40px);transition:opacity .35s var(--ease),transform .55s var(--ease)}
.pdp[hidden]{display:none}
.pdp.open{opacity:1;transform:none}
.pdp-bar{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:14px;padding:12px clamp(16px,4vw,48px);background:rgba(246,244,238,.9);backdrop-filter:blur(12px);border-bottom:1px solid rgba(0,0,0,.08)}
.pdp-back{display:inline-flex;gap:8px;align-items:center;min-height:44px;padding:0 18px;border-radius:99px;border:2px solid var(--ink);font-weight:600;flex-shrink:0;transition:background .25s,color .25s}
.pdp-back:hover{background:var(--ink);color:#fff}
.crumbs{flex:1;min-width:0;font-size:.85rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.crumbs b{color:var(--ink);font-weight:600}
.pdp-actions{display:flex;gap:4px;flex-shrink:0}
.pdp-body{max-width:1200px;margin:0 auto;padding:clamp(20px,4vw,48px) clamp(16px,4vw,48px) 36px}
.pdp-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(24px,4.5vw,72px);align-items:start}
.pdp-media{position:sticky;top:96px}
.pdp-stage{position:relative;aspect-ratio:1/1;border-radius:28px;background:var(--c);overflow:hidden;isolation:isolate;display:grid;place-items:center;border:2px solid var(--ink);box-shadow:8px 8px 0 var(--ink)}
@supports (background:color-mix(in srgb,red,white)){.pdp-stage{background:radial-gradient(circle at 50% 38%,#fff 0%,color-mix(in srgb,var(--c) 55%,#fff) 70%)}}
.pdp-stage canvas{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:pan-y;cursor:grab}
.pdp-stage canvas.grabbing{cursor:grabbing}
.pdp-stage canvas[hidden]{display:none}
.pdp-emoji{font-size:clamp(7rem,20vw,13rem);line-height:1;filter:drop-shadow(0 22px 20px rgba(0,0,0,.2));animation:bob 5s ease-in-out infinite}
.pdp-stage.has3d .pdp-emoji{display:none}
.pdp-stage .tag{z-index:2}
.pdp-hint{position:absolute;right:12px;bottom:12px;z-index:2;font-size:.76rem;font-weight:600;background:rgba(14,15,14,.82);color:#fff;padding:6px 12px;border-radius:99px;pointer-events:none}
.pdp-hint[hidden],.pdp-stage:not(.has3d) .pdp-hint{display:none}
.pdp-note{font-size:.78rem;color:var(--muted);margin-top:14px}
.pdp-info h2{font-family:var(--f-display);font-weight:800;font-size:clamp(1.9rem,3.6vw,3rem);line-height:1.04;letter-spacing:-.02em;margin:10px 0 6px}
.pdp-cat{display:inline-flex;align-items:center;gap:8px;font-size:.82rem;font-weight:600;padding:5px 14px;border-radius:99px;background:#fff;border:1px solid #d9d7cf}
.pdp-sku{font-size:.82rem;color:var(--muted)}
.pdp-price{display:flex;align-items:baseline;flex-wrap:wrap;gap:12px;margin:18px 0 6px}
.pdp-price b{font:800 clamp(2.2rem,4.4vw,3.2rem) var(--f-display);letter-spacing:-.02em}
.pdp-price s{color:var(--muted);font-size:1.05rem}
.pdp-save{background:var(--coral);color:#fff;font-weight:800;font-size:.8rem;padding:4px 11px;border-radius:99px}
.pdp-lead{font-size:1.06rem;line-height:1.65;color:#2a2d2a;margin:14px 0 4px;max-width:36rem}
.pdp-hl{list-style:none;display:grid;gap:9px;margin:16px 0 24px}
.pdp-hl li{display:flex;gap:11px;align-items:flex-start;font-weight:500}
.pdp-hl li::before{content:"✓";flex-shrink:0;width:22px;height:22px;border-radius:50%;background:var(--green);color:#fff;font-size:.75rem;font-weight:800;display:grid;place-items:center;margin-top:1px}
.pdp-buy{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin:6px 0 22px}
.qty.big{margin:0}
.qty.big button{width:44px;height:44px;font-size:1.2rem}
.qty.big output{min-width:34px;text-align:center;font-weight:700;font-size:1.05rem}
.pdp-perks{list-style:none;border:2px solid var(--ink);border-radius:20px;background:#fff;padding:4px 18px;margin-bottom:26px}
.pdp-perks li{display:flex;gap:14px;align-items:center;padding:12px 0;border-bottom:1px dashed #d4d2ca;font-size:.92rem}
.pdp-perks li:last-child{border-bottom:0}
.pdp-perks span{font-size:1.4rem}
.pdp-info details{border-top:2px solid var(--ink)}
.pdp-info details:last-of-type{border-bottom:2px solid var(--ink)}
.pdp-info summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;padding:17px 0;font-family:var(--f-display);font-weight:700;font-size:1.15rem}
.pdp-info summary::-webkit-details-marker{display:none}
.pdp-info summary::after{content:"+";font-size:1.5rem;font-weight:500;transition:transform .3s var(--ease)}
.pdp-info details[open] summary::after{transform:rotate(45deg)}
.pdp-info .det{padding:0 0 20px;line-height:1.65;color:#2f332f}
.pdp-specs{width:100%;border-collapse:collapse;font-size:.95rem}
.pdp-specs th,.pdp-specs td{padding:11px 0;border-bottom:1px solid #e3e1da;text-align:left;vertical-align:top}
.pdp-specs th{width:42%;color:var(--muted);font-weight:600}
.pdp-specs tr:last-child th,.pdp-specs tr:last-child td{border-bottom:0}
.pdp-steps{padding-left:1.2rem;display:grid;gap:8px}
.pdp-related{max-width:1200px;margin:0 auto;padding:14px clamp(16px,4vw,48px) 130px}
.pdp-related h2{font-family:var(--f-display);font-weight:800;font-size:clamp(1.5rem,3vw,2.1rem);margin-bottom:18px}
.rel-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:16px}
.rel{display:flex;flex-direction:column;gap:6px;text-align:left;background:#fff;border-radius:20px;padding:10px;border:2px solid transparent;transition:transform .35s var(--ease),border-color .3s,box-shadow .35s}
.rel:hover,.rel:focus-visible{transform:translateY(-6px);border-color:var(--ink);box-shadow:6px 6px 0 var(--ink)}
.rel .th{aspect-ratio:1;border-radius:14px;display:grid;place-items:center;font-size:3.6rem;background:var(--c)}
.rel strong{font-size:.95rem;margin:6px 4px 0;font-weight:600}
.rel .pr{margin:0 4px 6px;font-family:var(--f-display);font-weight:800;font-size:1.15rem}
.pdp-sticky{display:none}
@media (max-width:900px){
  .pdp-grid{grid-template-columns:minmax(0,1fr)}
  .pdp-media{position:static}
  .pdp-buy .btn{flex:1 1 100%;justify-content:center}
  .pdp-sticky{position:fixed;left:0;right:0;bottom:0;z-index:6;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px calc(12px + env(safe-area-inset-bottom));background:#fff;border-top:2px solid var(--ink)}
  .pdp-sticky div{min-width:0}
  .pdp-sticky small{display:block;font-size:.76rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:48vw}
  .pdp-sticky b{font:800 1.25rem var(--f-display)}
  .pdp-sticky .btn{padding:13px 22px}
}
@media (prefers-reduced-motion:reduce){.pdp{transition:opacity .15s linear;transform:none}.pdp-emoji{animation:none}}

/* Vitrine 3D maior (modelos ampliados) */
.stage3d{--sh:clamp(420px,68vh,680px)}
@media (max-width:520px){.stage3d{--sh:clamp(360px,58vh,500px)}}

/* Tarja de nome/preço mais estreita e centralizada */
.sc-caption{width:min(100%,500px);margin-left:auto;margin-right:auto}

/* ==========================================================
   REMAKE DO HERO · direção de arte "vitrine premium"
   Base quase preta, verde só como profundidade atrás do produto,
   lima apenas como destaque (sem neon, sem halos, sem brilhos espalhados).
   ========================================================== */

/* ---- Fundo: degradê discreto + poça de luz suave atrás do produto + curvas nas extremidades ---- */
.hero{background:linear-gradient(120deg,#0b2619 0%,#071510 34%,#050a08 62%,#040706 100%)}
.bg-pool{position:absolute;left:26%;top:50%;width:min(820px,100vw);aspect-ratio:1.05;translate:-50% -50%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(26,122,80,.38) 0%,rgba(14,78,52,.2) 52%,transparent 100%)}
.bg-rings{position:absolute;left:26%;top:50%;width:min(860px,98vw);aspect-ratio:1;translate:-50% -50%}
.bg-curves{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.cv-tl{animation:cvDriftA 26s ease-in-out infinite alternate}
.cv-br{animation:cvDriftB 30s ease-in-out infinite alternate}
@keyframes cvDriftA{to{transform:translate(14px,10px)}}
@keyframes cvDriftB{to{transform:translate(-16px,-10px)}}
.bg-vignette{background:radial-gradient(ellipse at 26% 52%,transparent 42%,rgba(0,0,0,.5) 100%),linear-gradient(90deg,transparent 48%,rgba(2,5,3,.45) 100%)}
.bg-grain{opacity:.045}

/* ---- Painéis de ícones (presentes, compras, produtos): poucos, translúcidos, atrás do modelo ---- */
.deco{position:absolute;inset:0;pointer-events:none}
.panel{position:absolute;width:clamp(50px,5.2vw,68px);aspect-ratio:1;border-radius:20px;display:grid;place-items:center;color:var(--lime);
  background:linear-gradient(145deg,rgba(255,255,255,.07),rgba(255,255,255,.015));border:1px solid rgba(200,240,49,.2);box-shadow:0 12px 26px rgba(0,0,0,.32);
  animation:panelFloat 8s ease-in-out infinite}
.panel svg{width:46%;height:46%;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.p-bag{top:7%;right:8%;rotate:8deg}
.p-gift{top:40%;left:1%;rotate:-8deg;animation-delay:-2.5s}
.p-box{bottom:27%;right:2%;rotate:10deg;animation-delay:-5s}
@keyframes panelFloat{50%{transform:translateY(-8px)}}

/* ---- Texto descritivo mais curto e secundário ---- */
.hero-sub{font-size:clamp(.95rem,.3vw + .9rem,1.08rem);color:#b5bbb5;max-width:30rem}

/* ---- Botões: hover, foco e clique mais refinados ---- */
.hero .btn{transition:transform .25s var(--ease),box-shadow .25s,background .25s,color .25s,border-color .25s}
.hero .btn-primary:hover{box-shadow:0 8px 0 var(--green-2)}
.hero .btn-primary:active{box-shadow:0 2px 0 var(--green-2)}
.hero .btn-ghost{border-color:rgba(255,255,255,.7)}
.hero .btn-ghost:hover{border-color:#fff}
.hero .btn:focus-visible{outline:3px solid var(--lime);outline-offset:4px}

/* ---- Indicadores: separadores finos e alinhamento ---- */
.stats{gap:14px 0;padding-top:22px}
.stats li{padding-right:clamp(16px,2.6vw,36px)}
.stats li + li{padding-left:clamp(16px,2.6vw,36px);border-left:1px solid rgba(255,255,255,.12)}

/* ---- Tarja do produto: preto semitransparente, borda fina, raio consistente ---- */
.sc-caption{background:rgba(8,11,9,.7);border:1px solid rgba(255,255,255,.12);border-radius:20px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);padding:13px 16px}
.sc-caption .add{transition:transform .25s var(--ease),background .25s,box-shadow .25s}
.sc-caption .add:hover{background:#fff;transform:translateY(-2px)}
.sc-caption .add:active{transform:scale(.97)}

/* ---- Controles do carrossel: microinterações ---- */
.sc-btn{border-color:rgba(255,255,255,.28)}
.sc-btn:active{transform:scale(.92)}
.sc-dots button:hover::before{background:rgba(255,255,255,.7)}

/* ---- Celular: menos elementos decorativos, sem sobreposição ---- */
@media (max-width:960px){
  .hero{background:linear-gradient(165deg,#0b2619 0%,#071510 45%,#040706 100%)}
  .bg-pool,.bg-rings{left:50%;top:80%}
  .bg-vignette{background:radial-gradient(ellipse at 50% 72%,transparent 40%,rgba(0,0,0,.55) 100%)}
}
@media (max-width:520px){
  .p-box{display:none}
  .p-bag{right:4%;top:4%}.p-gift{left:0}
  .stats li + li{border-left:0;padding-left:0}
  .stats li{padding-right:20px}
}
@media (prefers-reduced-motion:reduce){.panel,.cv-tl,.cv-br{animation:none}}

/* retoques finais do hero */
.hero-sub{max-width:34rem}
.hero .btn-primary::after{background:linear-gradient(110deg,transparent 38%,rgba(255,255,255,.4) 50%,transparent 62%)}

/* ==========================================================
   AJUSTE FINO · fidelidade à referência (cores, elementos de fundo, painéis)
   ========================================================== */
/* base: esmeralda profundo atrás do produto, preto na direita, leve verde no canto inferior direito */
.hero{background:
  radial-gradient(60% 70% at 100% 100%,rgba(12,70,48,.5) 0%,transparent 70%),
  radial-gradient(75% 95% at 27% 50%,#0d5a3a 0%,#0a4129 34%,#07241a 62%,#050f0b 86%),
  #040806}
.bg-pool{background:radial-gradient(closest-side,rgba(28,140,92,.55) 0%,rgba(16,92,60,.3) 48%,transparent 100%)}
.bg-rings{left:27%;top:50%}
.bg-pool{left:27%}
.bg-vignette{background:radial-gradient(ellipse at 27% 52%,transparent 46%,rgba(0,0,0,.42) 100%),linear-gradient(90deg,transparent 50%,rgba(2,5,3,.55) 100%)}

/* painéis de vidro maiores, com leve tom verde */
.panel{width:clamp(60px,6.2vw,90px);border-radius:24px;color:#d8f56a;
  background:linear-gradient(150deg,rgba(120,230,170,.13),rgba(255,255,255,.02));border:1px solid rgba(190,240,170,.22);
  box-shadow:0 14px 30px rgba(0,0,0,.32),inset 0 1px 0 rgba(255,255,255,.1)}
.panel svg{stroke-width:1.4}
.p-bag{top:6%;right:9%;rotate:8deg}
.p-gift{top:38%;left:0;rotate:-9deg}
.p-box{bottom:28%;right:3%;rotate:8deg}
@media (max-width:960px){.bg-pool,.bg-rings{left:50%;top:80%}.hero{background:radial-gradient(90% 55% at 50% 78%,#0d5a3a 0%,#0a3a27 40%,transparent 78%),linear-gradient(170deg,#0a2a1c 0%,#06120d 50%,#040806 100%)}}
@media (max-width:520px){.panel{width:54px;border-radius:18px}}

/* a borda de baixo do quadro 3D se dissolve (some atrás da tarja), sem corte reto */
.stage3d canvas{-webkit-mask-image:linear-gradient(to bottom,#000 0,#000 86%,transparent 100%);mask-image:linear-gradient(to bottom,#000 0,#000 86%,transparent 100%)}

/* ==========================================================
   FUNDO IGUAL À REFERÊNCIA · cores medidas pixel a pixel na imagem
   borda esquerda #082116 · núcleo atrás do produto #0D4225–#154726 · junto ao texto #031712
   · direita #060F0B–#0B1A13 · canto inferior direito #112417 (verde discreto)
   ========================================================== */
.hero{background:
  radial-gradient(42% 46% at 100% 100%,rgba(22,52,28,.78) 0%,rgba(14,34,20,.4) 45%,transparent 100%),
  linear-gradient(90deg,transparent 0%,transparent 38%,rgba(4,11,8,.82) 49%,rgba(5,12,9,.86) 100%),
  radial-gradient(ellipse 40% 68% at 27% 53%,#124c2a 0%,#0e4125 26%,#0b3220 50%,#082318 72%,#07180f 90%,rgba(6,15,11,0) 100%),
  #060f0b}
.bg-pool{background:radial-gradient(closest-side,rgba(20,86,46,.22) 0%,transparent 100%)}   /* só um reforço bem leve no núcleo */
.bg-vignette{background:linear-gradient(180deg,rgba(0,0,0,.18) 0%,transparent 14%,transparent 86%,rgba(0,0,0,.2) 100%)}
.bg-grain{opacity:.03}
@media (max-width:960px){
  .hero{background:
    radial-gradient(90% 52% at 50% 78%,#124c2a 0%,#0e4125 30%,#0b3220 55%,#082318 78%,rgba(6,15,11,0) 100%),
    linear-gradient(170deg,#082318 0%,#060f0b 48%,#050c09 100%)}
}

/* ajuste medido: o verde da referência cai mais rápido para os lados */
.hero{background:
  radial-gradient(42% 46% at 100% 100%,rgba(22,52,28,.7) 0%,rgba(14,34,20,.36) 45%,transparent 100%),
  linear-gradient(90deg,transparent 0%,transparent 36%,rgba(4,11,8,.82) 47%,rgba(5,12,9,.86) 100%),
  radial-gradient(ellipse 33% 66% at 27% 53%,#124c2a 0%,#0e4125 24%,#0a301e 50%,#07201a 74%,#061510 92%,rgba(6,15,11,0) 100%),
  #060f0b}
.bg-pool{background:radial-gradient(closest-side,rgba(20,86,46,.14) 0%,transparent 100%)}
@media (max-width:960px){
  .hero{background:
    radial-gradient(90% 52% at 50% 78%,#124c2a 0%,#0e4125 30%,#0b3220 55%,#082318 78%,rgba(6,15,11,0) 100%),
    linear-gradient(170deg,#082318 0%,#060f0b 48%,#050c09 100%)}
}

/* Brilho verde ao redor da plataforma (como na referência): elipse suave atrás do canvas, centrada onde fica o disco
   (50% / 74% do quadro). Em CSS não há corte reto nas bordas. */
.stage3d::before{content:"";position:absolute;left:50%;top:75%;width:104%;height:42%;translate:-50% -50%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(130,235,90,.30) 0%,rgba(80,215,105,.22) 42%,rgba(40,170,100,.09) 72%,transparent 100%)}
@media (max-width:520px){.stage3d::before{width:112%;height:38%}}

/* ==========================================================
   FUNDO DO HERO = arte enviada (K em linhas, círculos, curvas lima), animada junto com os elementos
   ========================================================== */
.hero{background:#030c08}
.bg-art{position:absolute;inset:-2%;width:104%;height:104%;display:block;pointer-events:none;
  translate:calc(var(--mx,0) * -12px) calc(var(--my,0) * -8px);transition:translate .5s var(--ease)}
.bg-photo{position:absolute;inset:-2%;width:104%;height:104%;object-fit:cover;object-position:left center;pointer-events:none;
  translate:calc(var(--mx,0) * -12px) calc(var(--my,0) * -8px);transition:translate .5s var(--ease);animation:photoBreath 40s ease-in-out infinite alternate}
.bg-photo[hidden]{display:none}
.hero.has-photo .bg-art{display:none}
@keyframes photoBreath{to{transform:scale(1.04)}}
.bg-vignette{background:linear-gradient(180deg,rgba(0,0,0,.2) 0%,transparent 14%,transparent 86%,rgba(0,0,0,.22) 100%)}
.bg-grain{opacity:.05}

/* luz verde principal: respira devagar */
.glow-main{transform-origin:430px 400px;animation:glowPulse 11s ease-in-out infinite alternate}
@keyframes glowPulse{from{opacity:.82;transform:scale(1)}to{opacity:1;transform:scale(1.06)}}

/* círculos: o tracejado gira devagar, o interno gira ao contrário */
.ring-dash{transform-origin:425px 445px;animation:ringSpin 160s linear infinite}
.ring-in{transform-origin:425px 445px;animation:ringSpin 220s linear infinite reverse}
@keyframes ringSpin{to{transform:rotate(360deg)}}

/* K: se desenha ao carregar; depois um brilho percorre o contorno */
.k-line{stroke-dasharray:1;stroke-dashoffset:1;animation:kDraw 2.8s .3s var(--ease) forwards}
.k-line:nth-of-type(2){animation-delay:.7s}.k-line:nth-of-type(3){animation-delay:1.1s}
@keyframes kDraw{to{stroke-dashoffset:0}}
.k-sweep{stroke-dasharray:.09 .91;stroke-dashoffset:.09;opacity:0;animation:kSweep 8s 4s linear infinite}
@keyframes kSweep{0%{opacity:0;stroke-dashoffset:.09}6%{opacity:.9}55%{opacity:.9}62%{opacity:0;stroke-dashoffset:-.91}100%{opacity:0;stroke-dashoffset:-.91}}

/* curvas: uma faixa de luz percorre cada uma, em tempos diferentes */
.sw{stroke:#F4FFC2;stroke-width:2.4;stroke-dasharray:70 930;stroke-dashoffset:70;opacity:.85}
.sw1{animation:swRun 9s 1.2s linear infinite}
.sw2{animation:swRun 11s 3.4s linear infinite}
.sw3{animation:swRun 10s 5.6s linear infinite}
.sw4{animation:swRun 12s 2.2s linear infinite}
@keyframes swRun{0%{stroke-dashoffset:70}70%,100%{stroke-dashoffset:-1000}}

/* pontos de luz nos trechos mais brilhantes */
.spark{transform-box:fill-box;transform-origin:center;animation:sparkPulse 4.5s ease-in-out infinite}
.spark.s2{animation-delay:-1.2s}.spark.s3{animation-delay:-2.4s}.spark.s4{animation-delay:-3.4s}
@keyframes sparkPulse{0%,100%{opacity:.35;transform:scale(.8)}50%{opacity:1;transform:scale(1.9)}}

/* painéis e elementos acompanham o mouse (parallax leve) junto com o fundo */
.deco .panel{translate:calc(var(--mx,0) * 16px) calc(var(--my,0) * 12px);transition:translate .5s var(--ease)}

/* celular: o desenho fica atrás da vitrine (embaixo), menor e mais discreto */
@media (max-width:960px){
  .bg-art,.bg-photo{inset:auto auto -2% 0;width:200%;height:74%;translate:none;opacity:.8}
  .bg-photo{object-position:left center}
  .deco .panel{translate:none}
}
@media (prefers-reduced-motion:reduce){
  .k-line{stroke-dasharray:none;stroke-dashoffset:0;animation:none}
  .k-sweep,.sw{display:none}
  .glow-main,.ring-dash,.ring-in,.spark,.bg-photo{animation:none}
  .bg-art,.bg-photo,.deco .panel{translate:none}
}

/* ==========================================================
   Fundo = arte enviada + animações alinhadas à imagem
   ========================================================== */
.bg-art{transform-origin:26% 48%;animation:artBreath 38s ease-in-out infinite alternate}
@keyframes artBreath{to{transform:scale(1.035)}}
.bg-grain{opacity:.02}
/* luz verde atrás do produto pulsa por cima da imagem */
.pulse-over{transform-origin:430px 410px;animation:pulseOver 10s ease-in-out infinite alternate}
@keyframes pulseOver{from{opacity:0;transform:scale(.96)}to{opacity:.85;transform:scale(1.08)}}
/* contorno do K: brilha e apaga devagar; uma faixa de luz percorre o desenho */
.k-glow{opacity:0;animation:kGlow 7s ease-in-out 1s infinite alternate}
@keyframes kGlow{from{opacity:0}to{opacity:.55}}
.k-sweep{stroke-dasharray:.1 .9;stroke-dashoffset:.1;opacity:0;animation:kSweep2 8s 3s linear infinite}
@keyframes kSweep2{0%{opacity:0;stroke-dashoffset:.1}8%{opacity:.95}55%{opacity:.95}64%{opacity:0;stroke-dashoffset:-.9}100%{opacity:0;stroke-dashoffset:-.9}}
/* pontinhos orbitando o anel tracejado (centro do anel na imagem: 425,445) */
.orbit{transform-origin:425px 445px;animation:ringSpin 46s linear infinite}
.orbit.o2{animation-duration:62s;animation-direction:reverse}
@media (max-width:960px){.bg-art{transform-origin:0 50%}}
@media (prefers-reduced-motion:reduce){.bg-art,.pulse-over,.k-glow,.orbit{animation:none}.pulse-over{opacity:.5}.k-glow{opacity:.3}}

/* celular: a arte cobre a altura toda e desce, para o K e os círculos ficarem atrás da vitrine (embaixo);
   o topo se dissolve, então a curva do canto não aparece atrás do texto e não há borda reta */
@media (max-width:960px){
  .bg-art{inset:auto auto -30% 0;width:210%;height:100%;opacity:1;
    -webkit-mask-image:linear-gradient(to bottom,transparent 0,transparent 34%,#000 58%);mask-image:linear-gradient(to bottom,transparent 0,transparent 34%,#000 58%)}
}

/* ==========================================================
   Linhas vetoriais nítidas (K, círculos, curvas) sobre a base de luz
   ========================================================== */
.bg-grain{opacity:.05}
.ring-dash,.ring-in,.orbit{transform-origin:423px 445px}
/* curvas: se desenham ao carregar; o halo aparece depois */
.cv-line{stroke-dasharray:1000;stroke-dashoffset:1000;animation:cvDraw 2.6s .2s var(--ease) forwards}
.curves g .cv-line:nth-of-type(odd){animation-delay:.2s}
@keyframes cvDraw{to{stroke-dashoffset:0}}
.cv-glow{opacity:0;animation:cvFade 1.6s 1.2s ease-out forwards}
@keyframes cvFade{to{opacity:1}}
.k-line{stroke-dasharray:1;stroke-dashoffset:1;animation:kDraw 2.8s .3s var(--ease) forwards}
.k-glow{opacity:0;animation:kGlow 7s 3s ease-in-out infinite alternate}
@media (prefers-reduced-motion:reduce){
  .cv-line,.k-line{stroke-dasharray:none;stroke-dashoffset:0;animation:none}
  .cv-glow{opacity:1;animation:none}
}

/* celular: o centro dos círculos fica atrás do produto. A vitrine é a última coisa do hero, então ancoro pela base:
   centro da arte = base do hero - ~460px (meia vitrine + tarja + controles). % de "top" e de "height" usam a mesma altura do hero. */
@media (max-width:960px){
  .bg-art{inset:auto;left:0;top:calc(100% - 460px - 47%);width:210%;height:100%}
}

/* CORREÇÃO: a regra global "svg{max-width:100%}" limitava a arte a 100% da largura (ela começa em -2%), deixando uma faixa sem fundo à direita */
.bg-art{max-width:none}

/* celular: a posição vertical da arte vem de --art-top (calculada em JS a partir de onde a vitrine realmente está) */
@media (max-width:960px){
  .bg-art{inset:auto;left:0;top:var(--art-top,0px);width:210%;height:100%}
}

/* CELULAR (versão final): a arte cobre o hero inteiro e mostra as curvas lima das laterais; o brilho esmeralda atrás do produto
   vem da própria vitrine (sempre alinhado), em vez de depender de onde a arte cai numa tela estreita */
@media (max-width:960px){
  .bg-art{inset:-2%;left:-2%;top:-2%;width:104%;height:104%;opacity:1;-webkit-mask-image:none;mask-image:none}
  .hero-stage{position:relative}
  .hero-stage::before{content:"";position:absolute;left:50%;top:46%;width:150%;aspect-ratio:1;translate:-50% -50%;pointer-events:none;border-radius:50%;
    background:radial-gradient(closest-side,rgba(18,86,44,.85) 0%,rgba(12,60,32,.55) 40%,rgba(8,36,20,.2) 70%,transparent 100%)}
}



/* ==========================================================
   HERO CENTRALIZADO (desktop): produto grande no centro, título em cima, destaque à esquerda,
   preço/ação à direita, controles embaixo e faixa inferior com botões e indicadores.
   Celular (<= 960px) continua em coluna, como antes.
   ========================================================== */
.sc-kicker,.sc-more{display:none}
.eyebrow svg{width:16px;height:16px;flex-shrink:0;fill:none;stroke:var(--lime);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.glow-base{opacity:1}
@media (max-width:960px){.art-center,.glow-base{display:none}}   /* no celular o brilho vem da vitrine */
@media (min-width:961px){
  .hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,780px) minmax(0,1fr);grid-template-rows:auto auto auto minmax(0,1fr) auto auto;
    column-gap:clamp(20px,3vw,56px);row-gap:0;align-content:start;justify-items:center;text-align:center;
    padding:clamp(86px,10.5vh,106px) clamp(20px,5vw,76px) clamp(18px,3vh,30px)}
  .hero-copy,.hero-stage,.showcase,.sc-caption{display:contents}
  .scroll-cue{display:none}

  /* topo: selo, título em 2 linhas e subtítulo, tudo centralizado */
  .eyebrow{grid-area:1 / 1 / 2 / -1;background:none;border:0;padding:0;margin:0 0 10px;font-size:.78rem;letter-spacing:.2em;text-transform:uppercase;color:#d5ddd5}
  .hero-title{grid-area:2 / 1 / 3 / -1;text-align:center;font-size:clamp(2.3rem,3.7vw + .5rem,4.6rem);line-height:1;margin:0}
  .hero-title .line:first-child{display:block}
  .hero-title .line:nth-child(n+2){display:inline-block;margin:0 .1em}
  .hero-sub{grid-area:3 / 1 / 4 / -1;margin:12px auto 0;max-width:36rem;font-size:clamp(1rem,.5vw + .9rem,1.2rem);color:#cdd6cd}

  /* centro: o produto */
  .stage3d{grid-area:4 / 2 / 5 / 3;width:100%;--sh:clamp(320px,calc(100vh - 560px),560px);height:var(--sh);margin:4px 0 0}
  .deco{inset:0 auto;left:50%;width:min(100%,660px);translate:-50% 0}

  /* esquerda: "em destaque" com barra lima */
  .sc-info{grid-area:4 / 1 / 5 / 2;justify-self:start;align-self:center;text-align:left;border-left:3px solid var(--lime);padding-left:18px;max-width:20rem}
  .sc-kicker{display:block;font-size:.72rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#d8f56a;margin-bottom:8px}
  .sc-caption .sl-name{font-size:clamp(1.5rem,1.9vw + .4rem,2.3rem);line-height:1.1;-webkit-line-clamp:3;margin:0 0 6px}
  .sc-caption .sl-cat{font-size:1rem;color:#aab4aa;margin:0}

  /* direita: preço, botão original "Adicionar +" e link */
  .sl-foot{grid-area:4 / 3 / 5 / 4;justify-self:end;align-self:center;display:flex;flex-direction:column;align-items:flex-start;gap:14px;text-align:left;min-width:14rem}
  .sc-caption .price{margin:0}
  .sc-caption .price b{font-size:clamp(1.8rem,1.7vw + .8rem,2.6rem)}
  .sc-more{display:inline-flex;align-items:center;gap:6px;font-weight:600;color:#fff;border-bottom:1px solid rgba(255,255,255,.7);padding-bottom:2px;transition:color .2s,border-color .2s,gap .25s var(--ease)}
  .sc-more:hover,.sc-more:focus-visible{color:var(--lime);border-color:var(--lime);gap:10px}

  /* controles do carrossel, centralizados abaixo do produto */
  .sc-ui{grid-area:5 / 1 / 6 / -1;margin:10px 0 14px}

  /* faixa inferior: indicadores à esquerda, botões originais à direita */
  .hero-bar{grid-area:6 / 1 / 7 / -1;width:100%;display:flex;align-items:center;justify-content:space-between;gap:24px;border-top:1px solid rgba(255,255,255,.14);padding-top:16px}
  .hero-bar .stats{order:1;margin:0;padding:0;border:0}
  .hero-bar .hero-cta{order:2;margin:0}
  .hero-bar .stats b{font-size:clamp(1.15rem,1.2vw + .5rem,1.6rem)}
}

/* ---- Menos informação na tela (desktop): como na referência ---- */
.swap{transition:width .55s var(--ease)}
.swap>span{white-space:nowrap}
@media (min-width:961px){
  .deco{display:none}                                      /* sem os painéis de ícones */
  .hero-bar .stats{display:none}                           /* indicadores saem do hero (continuam no código) */
  .hero-bar{justify-content:center;padding-top:14px}
  .hero-title{font-size:clamp(2.2rem,3.2vw + .4rem,4.2rem)}
  .hero-sub{margin-top:10px}
  .stage3d{--sh:clamp(340px,calc(100vh - 500px),620px)}
}

/* a caixa da palavra ajusta a largura rápido, antes de a palavra nova ficar visível (sem corte) */
.swap{transition:width .28s var(--ease)}

/* ---- Blocos laterais junto do produto; preço + botão + link agrupados num cartão (desktop) ---- */
@media (min-width:961px){
  .sc-info{justify-self:end;max-width:17rem}                    /* esquerda: encosta no produto */
  .sl-foot{justify-self:start;align-self:center;width:15.5rem;min-width:0;align-items:stretch;gap:14px;padding:20px 22px;
    background:rgba(8,12,10,.62);border:1px solid rgba(255,255,255,.13);border-radius:22px}
  .sl-foot .price{flex-wrap:wrap;align-items:baseline;gap:4px 10px}
  .sl-foot .add{justify-content:center;width:100%}
  .sl-foot .sc-more{align-self:center}
}

/* ---- Contraste: logo e cabeçalho sobre o fundo verde ---- */
.header:not(.scrolled){background:linear-gradient(180deg,rgba(3,10,7,.78) 0%,rgba(3,10,7,.35) 70%,transparent 100%)}
.header:not(.scrolled) .brand-text b{color:#fff;text-shadow:0 1px 8px rgba(0,0,0,.6)}
.header:not(.scrolled) .brand-text small{color:#eef3ee;font-size:.72rem;font-weight:500;text-shadow:0 1px 6px rgba(0,0,0,.7)}
.header:not(.scrolled) .nav a{color:#fff;text-shadow:0 1px 6px rgba(0,0,0,.55)}
/* textos secundários do hero mais claros */
.hero-sub{color:#e3eae3}
.sc-caption .sl-cat{color:#d3dbd3}
.sc-kicker{color:#e4ff7a}
.stats small{color:#cdd5cd}

/* cartão de preço: o padding estava sendo zerado por uma regra mais específica */
@media (min-width:961px){
  .sc-caption .sl-foot{padding:20px 22px;background:rgba(6,10,8,.8);border-color:rgba(255,255,255,.2)}
  .sc-caption .sl-foot .price s{color:#b9c2b9}
}

/* ---- Transição de valor no hero ---- */
.sc-price,#scPrice{font-variant-numeric:tabular-nums}
#scPrice b{display:inline-block}
.val-flash b{animation:valPop .8s var(--ease)}
@keyframes valPop{0%{color:var(--lime);transform:translateY(6px) scale(1.12)}60%{color:var(--lime)}100%{color:inherit;transform:none}}
.val-flash s{animation:valFade .6s .15s var(--ease) backwards}
@keyframes valFade{from{opacity:0;transform:translateY(-6px)}}
.sc-info.val-in{animation:valSlide .6s var(--ease)}
.sl-foot.val-in .add{animation:valSlide .6s .08s var(--ease) backwards}
@keyframes valSlide{from{opacity:0;transform:translateY(14px)}}
@media (prefers-reduced-motion:reduce){.val-flash b,.val-flash s,.sc-info.val-in,.sl-foot.val-in .add{animation:none}}

/* ---- Barra de rolagem personalizada (identidade Koreano) ---- */
::-webkit-scrollbar{width:12px;height:12px}
::-webkit-scrollbar-track{background:#07120d;border-left:1px solid rgba(255,255,255,.06)}
::-webkit-scrollbar-thumb{background:linear-gradient(180deg,#c8f031 0%,#17a35a 100%);border-radius:99px;border:3px solid #07120d;min-height:48px}
::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,#d9ff5a 0%,#22c56e 100%)}
::-webkit-scrollbar-thumb:active{background:#c8f031}
::-webkit-scrollbar-corner{background:#07120d}
/* áreas internas (carrinho, página do produto, filtros) usam uma versão clara/fina */
.pdp::-webkit-scrollbar,.cart-list::-webkit-scrollbar,.search-results::-webkit-scrollbar{width:9px}
.pdp::-webkit-scrollbar-track,.cart-list::-webkit-scrollbar-track,.search-results::-webkit-scrollbar-track{background:transparent;border:0}
.pdp::-webkit-scrollbar-thumb,.cart-list::-webkit-scrollbar-thumb,.search-results::-webkit-scrollbar-thumb{border:2px solid transparent;background-clip:padding-box;background-color:#17a35a;background-image:none}

/* Firefox (não tem ::-webkit-scrollbar): usa a propriedade padrão só lá, para não anular o estilo do Edge/Chrome */
@supports not selector(::-webkit-scrollbar){
  html{scrollbar-width:thin;scrollbar-color:#17a35a #07120d}
  .pdp,.cart-list,.search-results{scrollbar-color:#17a35a transparent}
}
/* fundo da raiz escuro: qualquer sobra ao lado da barra não aparece como faixa clara */
html{background:#07120d}

/* ---- Ícones das categorias: SVG grande sobre um disco claro ---- */
.cat .big{position:relative;display:grid;place-items:center;align-self:center;width:clamp(104px,62%,150px);aspect-ratio:1;font-size:0;margin-top:6px}
.cat .big::before{content:"";position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle at 35% 30%,rgba(255,255,255,.75),rgba(255,255,255,.25) 70%);box-shadow:inset 0 0 0 2px rgba(14,15,14,.08)}
.cat .big svg{position:relative;width:74%;height:74%;filter:drop-shadow(0 6px 6px rgba(14,15,14,.18));transition:transform .5s var(--ease)}
.cat:hover .big{transform:none}
.cat:hover .big svg{transform:scale(1.1) rotate(-6deg)}
html.js .cat.reveal:not(.in) .big{transform:scale(.4) rotate(-20deg)}
@media (max-width:760px){.cat .big{width:clamp(84px,60%,112px)}}

/* ---- Emojis das categorias de volta: centralizados, com sombra suave no chão ---- */
.cat{padding:20px 20px 18px}
.cat .big{flex:1;width:100%;align-self:stretch;display:flex;align-items:center;justify-content:center;font-size:clamp(4.4rem,7.2vw,6.2rem);line-height:1;margin:14px 0 8px;position:relative;transform:none}
.cat .big::before{content:none}
.cat .big::after{content:"";position:absolute;left:50%;bottom:6%;width:46%;height:12%;translate:-50% 0;border-radius:50%;background:radial-gradient(closest-side,rgba(14,15,14,.32),transparent 100%);transition:transform .5s var(--ease),opacity .5s;z-index:0}
.cat .big{filter:none}
.cat .big>*{position:relative;z-index:1}
.cat:hover .big::after{transform:scale(.8);opacity:.7}
@media (max-width:760px){.cat .big{font-size:3.8rem;margin:8px 0 6px}}

/* a sombra do chão fica ATRÁS do emoji (o emoji é texto, então a sombra precisa de z-index negativo) */
.cat .big{isolation:isolate;filter:drop-shadow(0 8px 8px rgba(14,15,14,.22))}
.cat .big::after{z-index:-1}

/* CORREÇÃO: sem a elipse de chão (ficava solta, longe do emoji); só a sombra no próprio emoji. Tamanho contido para o título não cortar */
.cat .big::after{content:none}
.cat .big{font-size:clamp(3.6rem,5.6vw,5.2rem);margin:10px 0 10px;filter:drop-shadow(0 10px 7px rgba(14,15,14,.28))}
@media (max-width:760px){.cat .big{font-size:3.4rem;margin:6px 0}}

/* ==========================================================
   Balão de preço: chamativo (lima, estilo adesivo) e colado no produto, com a "ponta" apontando para ele
   ========================================================== */
@media (min-width:961px){
  .sc-caption .sl-foot{position:relative;justify-self:start;margin-left:-110px;rotate:-2.5deg;width:15rem;padding:16px 20px 18px;gap:10px;
    background:var(--lime);border:2px solid var(--ink);border-radius:26px;box-shadow:6px 6px 0 var(--ink);color:var(--ink);
    animation:balloonIn .7s var(--ease) both, balloonFloat 5s 1s ease-in-out infinite}
  .sc-caption .sl-foot::before{content:"";position:absolute;left:-17px;top:46px;width:30px;height:30px;background:var(--lime);border-left:2px solid var(--ink);border-bottom:2px solid var(--ink);border-radius:0 0 0 8px;rotate:45deg}
  .sc-caption .sl-foot .price::before{content:"Preço";display:block;width:100%;font-size:.7rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;opacity:.7}
  .sc-caption .sl-foot .price b{color:var(--ink);font-size:clamp(2.1rem,2vw + 1rem,3rem);line-height:1}
  .sc-caption .sl-foot .price s{color:rgba(14,15,14,.62)}
  .sc-caption .sl-foot .add{background:var(--ink);color:#fff;box-shadow:none}
  .sc-caption .sl-foot .add:hover{background:#fff;color:var(--ink)}
  .sc-caption .sl-foot .sc-more{color:var(--ink);border-color:rgba(14,15,14,.6)}
  .sc-caption .sl-foot .sc-more:hover,.sc-caption .sl-foot .sc-more:focus-visible{color:var(--green);border-color:var(--green)}
}
@keyframes balloonIn{from{opacity:0;transform:translateX(-24px) scale(.9)}}
@keyframes balloonFloat{50%{transform:translateY(-6px)}}
.val-flash b{color:var(--ink)}
@keyframes valPop{0%{transform:translateY(6px) scale(1.14)}100%{transform:none}}
@media (prefers-reduced-motion:reduce){.sc-caption .sl-foot{animation:none}}

/* ==========================================================
   Hero mais limpo e focado (revisão de design)
   1) ~20% menos efeitos decorativos  2) produto maior, fundo atrás mais suave  3) botões junto do conteúdo
   ========================================================== */
/* 1) efeitos decorativos reduzidos, identidade neon mantida */
.rings{opacity:.72}
.k{opacity:.7}
.k-glow{display:none}
.curves{opacity:.78}
.spark.s2,.spark.s3{display:none}
.orbit.o2{display:none}
.bg-grain{opacity:.035}
/* 2) menos luz competindo atrás do produto */
.pulse-over{opacity:.55}
.glow-base{opacity:.8}

@media (min-width:961px){
  /* 2) produto maior */
  .stage3d{--sh:clamp(360px,calc(100vh - 520px),640px)}
  /* 3) o bloco todo fica junto, centrado na altura da tela; botões logo abaixo dos controles do carrossel */
  .hero{grid-template-rows:auto auto auto auto auto auto;align-content:center;padding-top:clamp(78px,9vh,100px);padding-bottom:clamp(20px,4vh,40px)}
  .hero-bar{border-top:0;padding-top:6px;margin-top:2px}
  .sc-ui{margin:6px 0 10px}
}
/* telas baixas (notebooks): comprime para os botões caberem na primeira visualização */
@media (min-width:961px) and (max-height:820px){
  .hero-title{font-size:clamp(2rem,2.6vw + .4rem,3.3rem)}
  .hero-sub{margin-top:6px;font-size:1rem}
  .stage3d{--sh:clamp(320px,calc(100vh - 470px),520px)}
}

/* o texto do hero sempre fica por cima do quadro 3D (o arco do fone nunca cobre o subtítulo) */
@media (min-width:961px){
  .hero-sub,.hero-title,.eyebrow{position:relative;z-index:3}
  .stage3d{z-index:1}
}

/* palavra rotativa: transições com a mesma duração da troca (sem sobreposição) */
.swap>span{transition:transform .45s var(--ease),opacity .3s;will-change:transform,opacity}
.swap{transition:width .3s var(--ease)}

/* CORREÇÃO: o card tinha proporção fixa e o emoji maior empurrava o título para fora (cortado).
   Agora a altura se ajusta ao conteúdo: emoji no meio, título sempre inteiro embaixo. */
.cat{aspect-ratio:auto;min-height:clamp(210px,17vw,270px);justify-content:flex-start;overflow:hidden}
.cat .big{flex:1 1 auto;min-height:88px;margin:8px 0 6px}
.cat>span:last-child{flex:0 0 auto;display:block;padding-top:4px;line-height:1.25}
.cat>span:last-child b{display:block}
@media (max-width:760px){.cat{min-height:190px;padding:16px 14px 14px}.cat .big{min-height:72px}}

/* ==========================================================
   SEÇÃO PRESENTES: molduras de foto (polaroid) que aceitam fotos reais depois
   ========================================================== */
.deal-art{height:clamp(320px,34vw,400px)}
.polaroid{display:block;font-size:0;width:clamp(150px,15vw,196px);aspect-ratio:.8;padding:0;background:#fbfaf6;border-radius:6px;
  box-shadow:0 26px 44px rgba(0,0,0,.5),0 2px 0 rgba(255,255,255,.4) inset}
.polaroid .ph,.polaroid img{position:absolute;left:9px;right:9px;top:9px;bottom:44px;border-radius:3px;width:calc(100% - 18px);height:calc(100% - 53px)}
.polaroid .ph{display:grid;place-items:center;font-size:clamp(3.2rem,4.6vw,4.8rem);background:var(--c);box-shadow:inset 0 0 0 1px rgba(14,15,14,.06)}
.polaroid img{object-fit:cover;display:block}
.polaroid figcaption{position:absolute;left:0;right:0;bottom:11px;text-align:center;font:700 .86rem var(--f-display);letter-spacing:.04em;color:var(--ink)}
.p1{left:2%;top:12%;rotate:-9deg}
.p2{left:32%;top:30%;rotate:4deg;z-index:2}
.p3{right:0;top:4%;rotate:11deg}
.deal-art:hover .p1{transform:translateX(-14px) rotate(-4deg)}.deal-art:hover .p3{transform:translateX(14px) rotate(4deg)}.deal-art:hover .p2{transform:translateY(-12px) scale(1.04)}
@media (max-width:960px){.deal-art{height:300px}.p1{left:6%}.p2{left:34%}.p3{right:4%}}

/* ==========================================================
   PERFORMANCE
   ========================================================== */
/* seções abaixo da dobra só são pintadas quando se aproximam da tela */
.deal,.trust,#depoimentos,.cta-band,.footer{content-visibility:auto;contain-intrinsic-size:auto 560px}
/* a "respiração" da arte inteira redesenhava uma camada enorme; o fundo já tem vida suficiente */
.bg-art{animation:none}
/* a faixa de categorias e as ondas só animam quando estão na tela */
@media (prefers-reduced-motion:no-preference){.marquee,.deal::after,.section.trust::before,.footer::before{will-change:transform}}
.off-screen,.off-screen *,.off-screen::before,.off-screen::after{animation-play-state:paused!important}

/* ---- Presentes: mesmo fundo do hero (arte + círculos + curvas), círculos centrados nos polaroids ---- */
.deal{background:#030c08}
.deal::before{display:none}
.deal-bg{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.deal-bg svg{position:absolute;inset:0;width:100%;height:100%;max-width:none;display:block}
.deal-inner{z-index:1}
.dring{transform-box:fill-box;transform-origin:center}
.dring-dash{animation:ringSpin 160s linear infinite}
.dring-rev{animation:ringSpin 220s linear infinite reverse}
.deal-curves{opacity:.7}
.deal::after{z-index:2}
@media (max-width:960px){.deal-bg svg{object-position:center}.dring-dash,.dring-rev{animation:none}}
@media (prefers-reduced-motion:reduce){.dring-dash,.dring-rev{animation:none}}

/* contato no rodapé: ícone alinhado ao texto de várias linhas */
.contact-list li{display:flex;gap:10px;align-items:flex-start;line-height:1.5}
.contact-list li>span:first-child{flex:0 0 1.4rem}

/* Lenis (regras oficiais): sem scroll-behavior nativo no mesmo contêiner */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-stopped{overflow:clip}
.lenis [data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-smooth iframe{pointer-events:none}

/* sem a luz verde que seguia o mouse nos cards de produto */
.card::before,.card:hover::before{content:none;display:none}

/* ==========================================================
   FADE IN / FADE OUT
   ========================================================== */
/* página: fade in ao carregar */
@keyframes pageFade{from{opacity:0}}
html.js body{animation:pageFade .8s ease-out}
/* seções e cards: saem com fade mais rápido (e descem um pouco) quando deixam a tela; voltam com o fade de entrada */
html.js .reveal:not(.in){transition:opacity .4s ease-in,transform .4s ease-in;transition-delay:0s}
/* busca e fundo do carrinho: fade out ao fechar */
@keyframes fadeOut{to{opacity:0}}
.search-overlay.closing,.scrim.closing{animation:fadeOut .26s ease-in forwards;pointer-events:none}
.search-overlay.closing .search-box{animation:riseOut .26s ease-in forwards}
@keyframes riseOut{to{opacity:0;transform:translateY(16px) scale(.98)}}
@media (prefers-reduced-motion:reduce){html.js body{animation:none}.search-overlay.closing,.scrim.closing,.search-overlay.closing .search-box{animation:none}}

/* ==========================================================
   Cards de categoria no estilo da referência: preto, borda lima, ícone de traço branco com detalhes lima
   ========================================================== */
.cat{background:#0a0b0a;color:#fff;border:2.5px solid #c8f031;border-radius:26px;box-shadow:0 14px 28px rgba(14,15,14,.16);transition:transform .4s var(--ease),box-shadow .4s,border-color .3s}
.cat:hover{box-shadow:0 0 0 4px rgba(200,240,49,.22),0 20px 36px rgba(14,15,14,.28)}
.cat b{color:#fff}
.cat small{color:#c4cbc4;opacity:1;font-weight:500}
.cat::after{background:transparent;border:1.6px solid #c8f031;color:#c8f031}
.cat .big{filter:none}
.cat .big svg{width:clamp(76px,58%,112px);height:auto;aspect-ratio:1;transition:transform .5s var(--ease)}
.cat:hover .big{transform:none}
.cat:hover .big svg{transform:translateY(-4px) scale(1.08)}

/* ==========================================================
   MINIATURAS DOS PRODUTOS com ícones SVG (mesmo estilo das categorias): fundo escuro, borda lima, traço branco
   ========================================================== */
.thumb{background:radial-gradient(circle at 50% 38%,#18231c 0%,#0a0b0a 78%);border:1.5px solid rgba(200,240,49,.4)}
.thumb .em{font-size:0;display:grid;place-items:center;width:100%;height:100%}
.thumb .em svg,.sc-emoji svg{width:58%;height:auto;aspect-ratio:1}
.sc-emoji{font-size:0;filter:none}
.sc-emoji svg{width:clamp(120px,14vw,190px)}
.ci .em{background:radial-gradient(circle at 50% 38%,#18231c,#0a0b0a)!important;border:1.5px solid rgba(200,240,49,.4);font-size:0}
.ci .em svg{width:68%;height:auto}
.search-results .em{background:radial-gradient(circle at 50% 38%,#18231c,#0a0b0a)!important;border:1.5px solid rgba(200,240,49,.4);font-size:0}
.search-results .em svg{width:70%;height:auto}
.rel .th{background:radial-gradient(circle at 50% 38%,#18231c,#0a0b0a)!important;border:1.5px solid rgba(200,240,49,.4);font-size:0}
.rel .th svg{width:56%;height:auto}
.pdp-stage:not(:has(canvas)){background:radial-gradient(circle at 50% 38%,#1b2a21 0%,#0a0b0a 80%)!important;border-color:#c8f031}
.pdp-emoji{font-size:0;filter:none;animation:none}
.pdp-emoji svg{width:clamp(150px,30vw,250px);height:auto}
.fly{font-size:0;padding:7px;background:#0a0b0a;border:2px solid #c8f031;border-radius:14px}
.fly svg{width:34px;height:34px;display:block}

/* ==========================================================
   TEMA CLARO / ESCURO · botão no cabeçalho; o tema escuro redefine fundos, bordas e textos
   ========================================================== */
.theme-btn .i-sun{display:none}
html[data-theme="dark"] .theme-btn .i-moon{display:none}
html[data-theme="dark"] .theme-btn .i-sun{display:block}
html.theme-anim,html.theme-anim *{transition:background-color .35s ease,color .35s ease,border-color .35s ease,box-shadow .35s ease!important}

html[data-theme="dark"]{
  color-scheme:dark;
  --paper:#0a0f0c;--surface:#111813;--surface2:#18211b;--text:#edf2ed;--muted:#9ba69d;--line:rgba(255,255,255,.16);
  --wave-up-white:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 80' preserveAspectRatio='none'%3E%3Cpath fill='%23111813' d='M0 40C200 0 400 0 600 40S1000 80 1200 40V0H0Z'/%3E%3C/svg%3E");
  --wave-down-paper:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 80' preserveAspectRatio='none'%3E%3Cpath fill='%230a0f0c' d='M0 40C200 0 400 0 600 40S1000 80 1200 40V80H0Z'/%3E%3C/svg%3E");
}
html[data-theme="dark"] body{background:var(--paper);color:var(--text)}
html[data-theme="dark"] .header.scrolled{background:rgba(10,15,12,.86);box-shadow:0 1px 0 var(--line)}
html[data-theme="dark"] .header.scrolled .logo-k{color:var(--text)}
html[data-theme="dark"] .header.scrolled .brand-text small{color:var(--muted)}
html[data-theme="dark"] .icon-btn:hover{background:rgba(255,255,255,.1)}
html[data-theme="dark"] .nav a::after{background:#c8f031}
html[data-theme="dark"] .section.paper{background:var(--surface)}
html[data-theme="dark"] .title em{background-image:linear-gradient(transparent 82%,#c8f031 82%)}
html[data-theme="dark"] .field input,html[data-theme="dark"] .field select{background:var(--surface2);color:var(--text);border-color:var(--line)}
html[data-theme="dark"] .chip{border-color:var(--line);color:var(--text)}
html[data-theme="dark"] .chip[aria-pressed=true]{background:#c8f031;color:#0e0f0e;border-color:#c8f031}
html[data-theme="dark"] .card{background:var(--surface2)}
html[data-theme="dark"] .card:hover{border-color:#c8f031;box-shadow:8px 8px 0 rgba(200,240,49,.4)}
html[data-theme="dark"] .card .add{background:#c8f031;color:#0e0f0e}
html[data-theme="dark"] .card .add:hover{background:#fff}
html[data-theme="dark"] .card .add.ok{background:var(--green-2);color:#fff}
html[data-theme="dark"] .tag{color:#fff}
html[data-theme="dark"] .btn-ghost{border-color:rgba(255,255,255,.6);color:var(--text)}
html[data-theme="dark"] .btn-ghost:hover{background:#c8f031;color:#0e0f0e;border-color:#c8f031}
html[data-theme="dark"] .hero .btn-ghost{color:#fff}
html[data-theme="dark"] .trust article{background:var(--surface);border-color:var(--line)}
html[data-theme="dark"] .trust article:hover{box-shadow:6px 6px 0 rgba(200,240,49,.45)}
html[data-theme="dark"] .testi figure{background:var(--surface);box-shadow:none;border:1px solid var(--line)}
html[data-theme="dark"] .testi figure:nth-child(2){background:var(--green)}
html[data-theme="dark"] .cta-band{color:#0e0f0e}
html[data-theme="dark"] .drawer{background:var(--paper);box-shadow:-20px 0 60px rgba(0,0,0,.6)}
html[data-theme="dark"] .drawer>header,html[data-theme="dark"] .drawer>footer{border-color:var(--line)}
html[data-theme="dark"] .drawer>footer,html[data-theme="dark"] .free-ship{background:var(--surface)}
html[data-theme="dark"] .ci{border-bottom-color:var(--line)}
html[data-theme="dark"] .qty{border-color:var(--line)}
html[data-theme="dark"] .qty button{color:var(--text)}
html[data-theme="dark"] .bar{background:rgba(255,255,255,.12)}
html[data-theme="dark"] .search-box{background:var(--surface)}
html[data-theme="dark"] .search-box input{background:var(--paper);color:var(--text);border-color:var(--line)}
html[data-theme="dark"] .search-results li button:hover,html[data-theme="dark"] .search-results li button:focus-visible{background:var(--surface2)}
html[data-theme="dark"] .search-hint button{background:var(--surface2);border-color:var(--line);color:var(--text)}
html[data-theme="dark"] .pdp{background:var(--paper)}
html[data-theme="dark"] .pdp-bar{background:rgba(10,15,12,.9);border-bottom-color:var(--line)}
html[data-theme="dark"] .pdp-back{border-color:var(--line);color:var(--text)}
html[data-theme="dark"] .pdp-back:hover{background:#c8f031;color:#0e0f0e}
html[data-theme="dark"] .crumbs b{color:var(--text)}
html[data-theme="dark"] .pdp-cat{background:var(--surface);border-color:var(--line)}
html[data-theme="dark"] .pdp-lead,html[data-theme="dark"] .pdp-info .det{color:#d3dbd4}
html[data-theme="dark"] .pdp-perks{background:var(--surface);border-color:var(--line)}
html[data-theme="dark"] .pdp-perks li{border-bottom-color:var(--line)}
html[data-theme="dark"] .pdp-info details{border-top-color:var(--line)}
html[data-theme="dark"] .pdp-info details:last-of-type{border-bottom-color:var(--line)}
html[data-theme="dark"] .pdp-specs th,html[data-theme="dark"] .pdp-specs td{border-bottom-color:var(--line)}
html[data-theme="dark"] .pdp-stage{box-shadow:8px 8px 0 rgba(200,240,49,.35);border-color:rgba(200,240,49,.7)}
html[data-theme="dark"] .rel{background:var(--surface)}
html[data-theme="dark"] .rel:hover,html[data-theme="dark"] .rel:focus-visible{border-color:#c8f031;box-shadow:6px 6px 0 rgba(200,240,49,.4)}
html[data-theme="dark"] .pdp-sticky{background:var(--surface);border-top-color:var(--line)}
html[data-theme="dark"] .pdp .btn-primary,html[data-theme="dark"] .pdp-buy .btn-primary{box-shadow:0 6px 0 var(--green-2)}
html[data-theme="dark"] .btn-primary{box-shadow:0 6px 0 var(--green-2)}
html[data-theme="dark"] .skip{color:#0e0f0e}
html[data-theme="dark"] .toast{background:#c8f031;color:#0e0f0e}
html[data-theme="dark"] .empty{color:var(--muted)}
@media (max-width:900px){
  html[data-theme="dark"] .nav{background:var(--paper);border-bottom-color:var(--line)}
  html[data-theme="dark"] .nav a{color:var(--text);border-bottom-color:var(--line)}
}


/* ==========================================================
   FADE IN na troca de tema (fade cruzado) e TEMA ESCURO refinado
   ========================================================== */
::view-transition-old(root),::view-transition-new(root){animation-duration:.55s;animation-timing-function:ease}
@media (prefers-reduced-motion:reduce){::view-transition-old(root),::view-transition-new(root){animation:none}}
.theme-btn svg{transition:transform .5s var(--ease),opacity .3s}
.theme-btn:active svg{transform:rotate(90deg) scale(.85)}

html[data-theme="dark"]{--surface:#121a15;--surface2:#1a251e;--line:rgba(200,240,49,.14);--muted:#a3afa5}
html[data-theme="dark"] body{background:
  radial-gradient(60% 40% at 15% 0%,rgba(23,163,90,.10),transparent 70%),
  radial-gradient(50% 40% at 100% 55%,rgba(200,240,49,.05),transparent 70%),
  var(--paper);background-attachment:fixed}
html[data-theme="dark"] ::selection{background:#c8f031;color:#0e0f0e}
html[data-theme="dark"] .section.paper{background:linear-gradient(180deg,var(--surface),#0f1612)}
html[data-theme="dark"] .section-head p,html[data-theme="dark"] .count{color:var(--muted)}
html[data-theme="dark"] .card{background:linear-gradient(180deg,#1c2820,#151e18);border:1px solid var(--line);box-shadow:0 10px 24px rgba(0,0,0,.35)}
html[data-theme="dark"] .card h3{color:#f3f7f3}
html[data-theme="dark"] .card .price s,html[data-theme="dark"] .card .cat-name{color:var(--muted)}
html[data-theme="dark"] .card:hover{border-color:#c8f031;transform:translateY(-8px);box-shadow:0 0 0 1px #c8f031,0 18px 36px rgba(0,0,0,.5),0 0 28px rgba(200,240,49,.12)}
html[data-theme="dark"] .card .add{box-shadow:0 3px 0 var(--green-2)}
html[data-theme="dark"] .trust article{background:linear-gradient(180deg,#17211b,#111a14);border:1px solid var(--line)}
html[data-theme="dark"] .trust h3{color:#f3f7f3}
html[data-theme="dark"] .trust article:hover{transform:translateY(-4px);box-shadow:0 14px 28px rgba(0,0,0,.45),0 0 0 1px rgba(200,240,49,.4)}
html[data-theme="dark"] .testi figure{background:linear-gradient(180deg,#17211b,#111a14)}
html[data-theme="dark"] .field input:focus,html[data-theme="dark"] .field select:focus,html[data-theme="dark"] .search-box input:focus{outline:2px solid #c8f031;outline-offset:2px}
html[data-theme="dark"] .field input::placeholder,html[data-theme="dark"] .search-box input::placeholder{color:#7f8b81}
html[data-theme="dark"] .chip:hover{border-color:#c8f031}
html[data-theme="dark"] .drawer{border-left:1px solid var(--line)}
html[data-theme="dark"] .search-box,html[data-theme="dark"] .pdp-perks,html[data-theme="dark"] .rel,html[data-theme="dark"] .pdp-cat{box-shadow:0 10px 30px rgba(0,0,0,.35)}
html[data-theme="dark"] .pdp-price b,html[data-theme="dark"] .pdp-info h2{color:#f6faf6}
html[data-theme="dark"] .pdp-save{box-shadow:0 0 0 2px rgba(255,90,60,.25)}
html[data-theme="dark"] .footer{background:#060a08}
html[data-theme="dark"] .footer::before{background:var(--wave-down-ink)}
html[data-theme="dark"] .cta-band{border-color:#c8f031;box-shadow:0 0 40px rgba(200,240,49,.15)}
html[data-theme="dark"] .marquee{border-color:#c8f031}
html[data-theme="dark"] .progress{box-shadow:0 0 10px rgba(200,240,49,.5)}

/* ---- Faixa "Ficou com dúvida?": compacta, com o horário de atendimento ---- */
.cta-band{padding:clamp(16px,2.2vw,26px) clamp(20px,3vw,40px);margin:0 clamp(16px,5vw,64px) calc(var(--wave-h) + 10px);border-radius:22px;gap:14px 24px}
.cta-text{display:flex;flex-direction:column;gap:2px;min-width:0}
.cta-band h2{font-size:clamp(1.35rem,2.4vw,1.9rem);line-height:1.1}
.cta-band h2 em{text-underline-offset:4px}
.cta-text p{font-size:.88rem;font-weight:500;opacity:.78;margin:0}
.cta-band .btn{padding:12px 22px;white-space:nowrap}
.section.trust{padding-bottom:clamp(28px,4vw,48px)}

/* ---- Tema escuro: a onda entre Catálogo e Presentes tem exatamente a cor da seção (sem faixa cinza) ---- */
html[data-theme="dark"] .section.paper{background:#111813}
html[data-theme="dark"] .section.paper::before{background:var(--paper)}
html[data-theme="dark"] .deal{background:#030c08}

/* ==========================================================
   SEÇÃO DE DÚVIDAS (FAQ) com acordeão animado
   ========================================================== */
.faq{padding-top:clamp(56px,8vw,96px);padding-bottom:calc(var(--wave-h) + clamp(36px,5vw,64px))}
.faq-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(28px,5vw,80px);max-width:1180px;margin:0 auto;align-items:start}
.faq-side{position:sticky;top:110px}
.faq-kicker{display:inline-block;font-size:.76rem;font-weight:800;letter-spacing:.18em;text-transform:uppercase;padding:6px 14px;border-radius:99px;background:var(--lime);color:var(--ink);margin-bottom:16px}
.faq-lead{margin:16px 0 24px;color:var(--muted);max-width:26rem;font-size:1.04rem}
.faq-hours{margin-top:16px;font-size:.86rem;color:var(--muted)}
.faq-list{display:grid;gap:12px}
.faq-item{background:#fff;border:2px solid var(--ink);border-radius:20px;overflow:hidden;transition:transform .35s var(--ease),box-shadow .35s var(--ease),background-color .3s}
.faq-item:hover{transform:translateX(4px);box-shadow:-5px 5px 0 var(--green)}
.faq-item.open{box-shadow:-6px 6px 0 var(--lime);background:#fff}
.faq-item h3{margin:0;font-size:inherit}
.faq-q{display:flex;align-items:center;gap:16px;width:100%;min-height:68px;padding:16px 20px;text-align:left;font-family:var(--f-display);font-weight:700;font-size:clamp(1rem,1.1vw + .7rem,1.2rem);line-height:1.25;color:inherit}
.faq-n{flex:0 0 auto;font-size:.8rem;font-weight:800;color:var(--green);letter-spacing:.08em;transition:color .3s}
.faq-t{flex:1}
.faq-i{position:relative;flex:0 0 auto;width:34px;height:34px;border-radius:50%;background:var(--ink);transition:transform .45s var(--ease),background-color .3s}
.faq-i::before,.faq-i::after{content:"";position:absolute;left:50%;top:50%;width:14px;height:2px;margin:-1px 0 0 -7px;background:#c8f031;border-radius:2px;transition:transform .45s var(--ease)}
.faq-i::after{transform:rotate(90deg)}
.faq-q[aria-expanded=true] .faq-i{transform:rotate(180deg);background:var(--lime)}
.faq-q[aria-expanded=true] .faq-i::before,.faq-q[aria-expanded=true] .faq-i::after{background:var(--ink)}
.faq-q[aria-expanded=true] .faq-i::after{transform:rotate(0)}
.faq-q[aria-expanded=true] .faq-n{color:var(--ink)}
/* altura animada sem medir nada: a linha do grid vai de 0fr a 1fr */
.faq-a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s var(--ease)}
.faq-a>div{overflow:hidden;min-height:0}
.faq-a p{padding:0 20px 20px 66px;margin:0;color:#3a3f3a;line-height:1.65;opacity:0;transform:translateY(-8px);transition:opacity .35s ease,transform .5s var(--ease)}
.faq-item.open .faq-a{grid-template-rows:1fr}
.faq-item.open .faq-a p{opacity:1;transform:none;transition-delay:.12s}
@media (max-width:860px){
  .faq-grid{grid-template-columns:minmax(0,1fr)}
  .faq-side{position:static}
  .faq-a p{padding-left:20px}
  .faq-n{display:none}
}
@media (prefers-reduced-motion:reduce){
  .faq-a,.faq-a p,.faq-i,.faq-i::before,.faq-i::after,.faq-item{transition:none}
  .faq-item:hover{transform:none}
}
/* tema escuro */
html[data-theme="dark"] .faq-item{background:linear-gradient(180deg,#17211b,#111a14);border:1px solid var(--line)}
html[data-theme="dark"] .faq-item:hover{border-color:rgba(200,240,49,.5);box-shadow:0 12px 26px rgba(0,0,0,.4)}
html[data-theme="dark"] .faq-item.open{border-color:#c8f031;box-shadow:0 0 0 1px #c8f031,0 14px 30px rgba(0,0,0,.45),0 0 26px rgba(200,240,49,.1)}
html[data-theme="dark"] .faq-q{color:#f3f7f3}
html[data-theme="dark"] .faq-n{color:#c8f031}
html[data-theme="dark"] .faq-i{background:#0a0f0c;border:1px solid rgba(200,240,49,.5)}
html[data-theme="dark"] .faq-a p{color:#cfd8d0}

/* CORREÇÃO: content-visibility cortava a onda que fica acima do rodapé e de "Como comprar" (por isso o corte reto) */
.footer,.section.trust{content-visibility:visible;contain-intrinsic-size:none}
/* menos vazio entre as dúvidas e o rodapé */
.faq{padding-bottom:calc(var(--wave-h) + clamp(8px,1.5vw,20px))}

/* ==========================================================
   REVISÃO MOBILE (code-responsive)
   - overflow horizontal: a faixa de categorias (girada, com margem negativa) passava da tela e alargava a página
   - menu aberto com letras brancas sobre fundo claro (ilegível)
   - hero: o produto ficava depois de textos e números (hero de ~1350px); agora título, texto, produto e botões
   - alvos de toque e custo de animação em telas pequenas
   ========================================================== */
main{overflow-x:clip}
@media (max-width:960px){
  /* hero em coluna: selo, título, texto, produto, botões */
  .hero{display:flex;flex-direction:column;align-items:stretch;gap:0;min-height:0;padding:88px 18px 36px}
  .hero-copy{display:contents}
  .eyebrow{order:1;align-self:flex-start;margin-bottom:14px}
  .hero-title{order:2;font-size:clamp(2rem,9.5vw,3rem);margin:0}
  .hero-sub{order:3;margin:12px 0 4px;max-width:30rem}
  .hero-stage{order:4;margin:6px 0 0}
  .hero-bar{order:5;margin-top:10px}
  .hero-bar .stats{display:none}
  .hero-cta{display:flex;flex-direction:column;gap:12px}
  .hero-cta .btn{width:100%;justify-content:center;min-height:52px}
  .stage3d{--sh:clamp(300px,52svh,430px)}
  .sc-caption{width:100%}
  /* menos animação contínua (bateria e CPU) */
  .sw,.k-sweep,.spark,.orbit,.panel{animation:none!important}
  .sw,.k-sweep{display:none}
  /* área de toque */
  .footer li a{padding:9px 0}
  .faq-q{min-height:60px}
  .chip{min-height:44px}
  .icon-btn,.sc-btn{min-width:44px;min-height:44px}
}
/* menu aberto: letras escuras sobre o fundo claro do menu (antes ficavam brancas) */
@media (max-width:900px){
  .header:not(.scrolled) .nav.open a{color:var(--ink);text-shadow:none}
  html[data-theme="dark"] .header:not(.scrolled) .nav.open a,html[data-theme="dark"] .nav.open a{color:var(--text)}
  .header:not(.scrolled) .nav.open svg{color:var(--green)}
}
@media (max-width:380px){
  .hero-title{font-size:clamp(1.8rem,10vw,2.3rem)}
  .sc-caption{padding:12px}
  .faq-q{padding:14px 14px}
  .cta-text p{font-size:.8rem}
}

/* cabeçalho em telas estreitas: logo + 4 botões precisam caber sem quebrar "Loja do Koreano" em duas linhas */
.brand-text small{white-space:nowrap}
@media (max-width:430px){
  .header{gap:8px;padding-inline:14px}
  .actions{gap:0}
  .icon-btn{width:42px;height:42px;min-width:42px;min-height:42px}
}
@media (max-width:400px){.brand-text small{display:none}.logo-k{width:34px;height:34px}}