/* ============================================================
   Loja · direção visual "concreto e névoa"
   Cinza frio da foto, grafite profundo, um único acento cobalto.
   Elemento assinatura: a LENTE (círculo que revela outro look).
   ============================================================ */
:root{
  --ink:#111518; --ink2:#1B2226; --ink3:#2A3237;
  --stone:#E4E6E5; --stone2:#D3D7D7; --fog:#A9B2B6; --mist:#C9CFD1;
  --bone:#F1F0EC; --muted:#5C676D; --muted-d:#97A2A8;
  --accent:#2A4FD6; --accent-hi:#8EA3FF;
  --ease:cubic-bezier(.22,.8,.24,1); --ease-in:cubic-bezier(.6,0,.4,1);
  --display:"Bricolage Grotesque",ui-sans-serif,system-ui,sans-serif;
  --body:"Manrope",ui-sans-serif,system-ui,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,Menlo,monospace;
  --gutter:clamp(16px,4vw,56px);
  --nav-h:64px;
  --tshadow:0 1px 2px rgba(5,5,10,.9),0 3px 12px rgba(5,5,10,.7),0 10px 44px rgba(5,5,10,.7);
}
*,*::before,*::after{box-sizing:border-box}
html{overflow-x:hidden;overflow-x:clip;-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;overflow-x:hidden;overflow-x:clip;background:var(--stone);color:var(--ink);font:16px/1.6 var(--body);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{max-width:100%;display:block}
a{color:inherit}
button{font:inherit;color:inherit}
h1,h2,h3{font-family:var(--display);font-weight:800;letter-spacing:-.035em;line-height:.95;margin:0}
p{margin:0 0 1em}
.mono{font:400 12px/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase}
.skip{position:absolute;left:-9999px;top:8px;z-index:200;background:var(--bone);color:var(--ink);padding:10px 14px;border-radius:8px}
.skip:focus{left:8px}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
main{outline:none}
[hidden]{display:none!important}

/* Ambiente fixo: grão + névoa lenta atrás de tudo */
.env{position:fixed;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(60% 50% at 70% 20%,rgba(255,255,255,.55),transparent 70%),radial-gradient(50% 60% at 10% 90%,rgba(169,178,182,.45),transparent 70%),var(--stone);animation:drift 70s ease-in-out infinite alternate}
.env::after{content:"";position:absolute;inset:-50%;opacity:.07;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'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");animation:grain 1.2s steps(4) infinite}
@keyframes drift{to{transform:translate3d(-2%,1.5%,0) scale(1.04)}}
@keyframes grain{25%{transform:translate(3%,-2%)}50%{transform:translate(-2%,3%)}75%{transform:translate(2%,2%)}}

/* Botões */
.btn{--b:var(--ink);--t:var(--bone);position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 28px;border-radius:999px;border:1px solid var(--b);background:var(--b);color:var(--t);font:600 15px/1 var(--body);letter-spacing:.01em;text-decoration:none;cursor:pointer;overflow:hidden;isolation:isolate;transition:transform .5s var(--ease),color .4s var(--ease),border-color .4s var(--ease)}
.btn::before{content:"";position:absolute;left:var(--mx,50%);top:var(--my,50%);width:10px;height:10px;margin:-5px;border-radius:50%;background:var(--accent);transform:scale(0);transition:transform .6s var(--ease);z-index:-1}
.btn:hover::before{transform:scale(60)}
.btn:hover{border-color:var(--accent);color:#F4F5FF}
.btn:active{transform:scale(.97)}
.btn.ghost{--b:transparent;--t:var(--ink);border-color:rgba(17,21,24,.35)}
.btn.light{--b:var(--bone);--t:var(--ink)}
.btn.full{width:100%}
.btn[disabled]{opacity:.45;pointer-events:none}
.chip{min-height:40px;padding:0 18px;border-radius:999px;border:1px solid rgba(17,21,24,.25);background:transparent;cursor:pointer;font-weight:600;font-size:14px;transition:background .35s var(--ease),color .35s var(--ease),border-color .35s var(--ease)}
.chip:hover{border-color:var(--ink)}
.chip.on{background:var(--ink);color:var(--bone);border-color:var(--ink)}

/* Faixa de aviso + navegação */
.announce{position:relative;z-index:41;background:var(--ink);color:var(--bone);text-align:center;font:500 12.5px/1 var(--body);letter-spacing:.04em;padding:10px var(--gutter)}
.nav{position:sticky;top:0;z-index:40;height:var(--nav-h);display:flex;align-items:center;gap:28px;padding:0 var(--gutter);color:var(--ink);transition:color .5s var(--ease),background .5s var(--ease),transform .5s var(--ease)}
.home .nav{position:fixed;left:0;right:0;top:var(--ann-h,34px)}
.nav.scrolled{top:0}
.nav::before{content:"";position:absolute;inset:0;z-index:-1;background:rgba(228,230,229,.72);backdrop-filter:blur(14px) saturate(1.2);-webkit-backdrop-filter:blur(14px);opacity:0;transition:opacity .5s var(--ease)}
.nav.scrolled::before{opacity:1}
.nav.on-dark{color:var(--bone)}
.nav.on-dark::before{background:rgba(17,21,24,.6)}
.nav.hide{transform:translateY(-110%)}
.logo{display:inline-flex;align-items:center;gap:12px;min-height:44px;text-decoration:none;font:400 12px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase}
.logo svg{width:30px;height:30px;fill:none;stroke:currentColor;stroke-width:2;transition:transform .8s var(--ease)}
.logo:hover svg{transform:rotate(90deg) scale(1.08)}
.logo:hover svg circle:last-child{transform:scale(1.5);transform-origin:center}
.logo svg circle:last-child{transition:transform .6s var(--ease)}
.nav-links{display:flex;gap:24px}
.nav-links a,.nav-wa{position:relative;font-weight:600;font-size:14px;text-decoration:none;padding:6px 0}
.nav-links a::after,.nav-wa::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .5s var(--ease)}
.nav-links a:hover::after,.nav-wa:hover::after{transform:scaleX(1);transform-origin:left}
.nav-right{margin-left:auto;display:flex;align-items:center;gap:22px}
.cart-btn{display:inline-flex;align-items:center;gap:8px;min-height:44px;background:none;border:0;cursor:pointer;font-weight:700;font-size:14px}
.cart-count{display:inline-grid;place-items:center;min-width:24px;height:24px;padding:0 6px;border-radius:99px;background:var(--ink);color:var(--bone);font-size:12px;transition:background .5s var(--ease),color .5s var(--ease)}
.nav.on-dark .cart-count{background:var(--bone);color:var(--ink)}
.cart-count.bump{animation:bump .6s var(--ease)}
@keyframes bump{40%{transform:scale(1.35)}}
.burger{display:none;width:44px;height:44px;border:0;background:none;cursor:pointer;position:relative}
.burger i{position:absolute;left:11px;right:11px;height:2px;background:currentColor;transition:transform .4s var(--ease)}
.burger i:first-child{top:17px}.burger i:last-child{top:25px}
.burger[aria-expanded=true] i:first-child{transform:translateY(4px) rotate(45deg)}
.burger[aria-expanded=true] i:last-child{transform:translateY(-4px) rotate(-45deg)}
.mnav{position:fixed;inset:0;z-index:39;background:var(--ink);color:var(--bone);display:flex;align-items:flex-end;padding:calc(var(--nav-h) + 40px) var(--gutter) 48px;clip-path:circle(0 at calc(100% - 38px) 32px);transition:clip-path .8s var(--ease)}
.mnav.open{clip-path:circle(150% at calc(100% - 38px) 32px)}
.mnav nav{display:flex;flex-direction:column;gap:6px}
.mnav a{font:800 clamp(34px,10vw,56px)/1.05 var(--display);letter-spacing:-.03em;text-decoration:none}
.mnav a:last-child{font:500 16px/1.4 var(--body);margin-top:24px;color:var(--muted-d)}

/* Carregamento */
.loader{position:fixed;inset:0;z-index:100;background:var(--ink);color:var(--bone);display:grid;place-items:center;transition:transform 1.1s var(--ease-in)}
.loader.done{transform:translateY(-100%)}
.loader-lens{width:min(34vw,170px);height:auto;fill:none;stroke:var(--bone);stroke-width:1.5}
.loader-lens circle{stroke-dasharray:1;stroke-dashoffset:1;animation:draw 1.2s var(--ease) forwards}
.loader-lens circle:last-child{animation-delay:.25s;stroke:var(--accent-hi)}
@keyframes draw{to{stroke-dashoffset:0}}
.loader-count{position:absolute;right:var(--gutter);bottom:28px;color:var(--muted-d)}
.no-js .loader{display:none}

/* ===================== ABERTURA ===================== */
.hero{position:relative;height:100vh;height:100svh;min-height:560px;overflow:hidden;background:var(--mist);touch-action:pan-y}
.hero-media{position:absolute;inset:0}
.hero-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:72% 50%;transform:scale(1.04);transition:transform 2.4s var(--ease)}
.is-ready .hero-media img{transform:none}
.hero-b{clip-path:circle(var(--r,0px) at var(--x,75%) var(--y,45%));will-change:clip-path}
.hero.swapped .hero-b{clip-path:circle(150% at var(--x,75%) var(--y,45%))}
.hero-scrim{position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(228,230,229,.78) 0%,rgba(228,230,229,.4) 34%,rgba(228,230,229,0) 55%),linear-gradient(0deg,rgba(228,230,229,.6),transparent 30%)}
.hero-copy{position:absolute;left:var(--gutter);bottom:clamp(36px,7vh,80px);width:min(620px,52vw);z-index:3}
.kicker{margin-bottom:22px;color:var(--ink2)}
.hero-title{font-size:clamp(64px,10.5vw,176px);line-height:.86;margin:0 0 26px;letter-spacing:-.05em}
.hero-sub{font-size:clamp(16px,1.35vw,19px);max-width:38ch;color:var(--ink2);margin-bottom:30px}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap}
.hero-meta{display:flex;flex-wrap:wrap;align-items:center;gap:14px 28px;margin-top:clamp(28px,5vh,48px);padding-top:18px;border-top:1px solid rgba(17,21,24,.18)}
.hero-hint{display:flex;align-items:center;gap:10px;color:var(--ink2);margin:0}
.hero-hint::before{content:"";width:18px;height:18px;border-radius:50%;border:1.5px solid currentColor;animation:pulse 2.6s var(--ease) infinite}
@keyframes pulse{50%{transform:scale(.6);opacity:.5}}
.hero-looks{list-style:none;margin:0;padding:0;display:flex;gap:18px;color:var(--muted)}
.hero-looks li{position:relative;padding-left:18px;transition:color .4s var(--ease)}
.hero-looks li::before{content:"";position:absolute;left:0;top:50%;width:9px;height:9px;margin-top:-5px;border-radius:50%;border:1.5px solid currentColor;transition:background .4s var(--ease)}
.hero-looks li.on{color:var(--ink)}
.hero-looks li.on::before{background:currentColor}
.only-touch{display:none}
@media (hover:none),(pointer:coarse){.only-fine{display:none}.only-touch{display:inline}}

/* Entradas */
[data-rise]{opacity:0;transform:translateY(24px);transition:opacity 1s var(--ease),transform 1.2s var(--ease)}
.is-ready [data-rise]{opacity:1;transform:none}
.is-ready .hero-copy [data-rise]:nth-child(3){transition-delay:.45s}
.is-ready .hero-copy [data-rise]:nth-child(4){transition-delay:.6s}
.is-ready .hero-copy .hero-meta{transition-delay:.8s}
.split-line{display:block;overflow:hidden;padding:.08em 0 .14em;margin:-.08em 0 -.14em}
.split-word{display:inline-block;white-space:nowrap}
.split-char{display:inline-block;transform:translateY(110%) rotate(6deg);transform-origin:0 100%;transition:transform 1.1s var(--ease);transition-delay:calc(var(--ci) * 28ms)}
.in .split-char,.is-ready .hero-title .split-char{transform:none}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Cursor + lente (só em computador) */
.cursor{display:none}
@media (hover:hover) and (pointer:fine){
  .has-cursor,.has-cursor a,.has-cursor button{cursor:none}
  .has-cursor input,.has-cursor textarea,.has-cursor select{cursor:text}
  .cursor{display:block;position:fixed;inset:0;z-index:90;pointer-events:none}
  .cursor-dot,.cursor-ring{position:absolute;left:0;top:0;border-radius:50%;will-change:transform}
  .cursor-dot{width:6px;height:6px;margin:-3px;background:var(--ink);mix-blend-mode:difference;filter:invert(1)}
  .cursor-ring{width:44px;height:44px;margin:-22px;border:1px solid rgba(17,21,24,.5);display:grid;place-items:center;transition:width .5s var(--ease),height .5s var(--ease),margin .5s var(--ease),border-color .4s,background .4s}
  .cursor.on-dark .cursor-ring{border-color:rgba(241,240,236,.6)}
  .cursor.on-dark .cursor-dot{background:var(--bone);filter:none;mix-blend-mode:normal}
  .cursor.hover .cursor-ring{width:72px;height:72px;margin:-36px;background:rgba(42,79,214,.08);border-color:var(--accent)}
  .cursor.lens .cursor-ring{width:var(--lens,280px);height:var(--lens,280px);margin:calc(var(--lens,280px) / -2);border-color:rgba(241,240,236,.85);box-shadow:0 0 0 1px rgba(17,21,24,.12)}
  .cursor-label{font:400 10px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--bone);opacity:0;transform:translateY(calc(var(--lens,280px) / 2 + 16px));transition:opacity .4s;white-space:nowrap;text-shadow:0 1px 6px rgba(0,0,0,.4)}
  .cursor.lens .cursor-label{opacity:1}
  .cursor.hidden{opacity:0}
}

/* ===================== HISTÓRIA EM ROLAGEM ===================== */
.story{position:relative;height:460vh;background:var(--ink);color:var(--bone)}
.story-stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
.story-frame{position:absolute;inset:0;clip-path:inset(var(--ct,0px) var(--cr,0px) var(--cb,0px) var(--cl,0px) round var(--crad,0px));will-change:clip-path}
.story-frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:72% 50%;transform-origin:75% 58%;transform:scale(var(--zoom,1));will-change:transform}
.story-b{clip-path:circle(var(--lr,0%) at 75% 45%)}
.story-scrim{position:absolute;inset:0;background:radial-gradient(ellipse 80% 70% at 30% 55%,rgba(5,5,10,.55),rgba(5,5,10,.15) 60%,transparent 80%);opacity:var(--so,1);pointer-events:none}
.story-slot{position:absolute;right:var(--gutter);top:calc(var(--nav-h) + 24px);bottom:48px;width:46%;pointer-events:none}
.band{position:absolute;left:var(--gutter);top:50%;width:min(620px,48vw);opacity:0;transform:translateY(-50%);pointer-events:none;text-shadow:var(--tshadow)}
.band.live{pointer-events:auto}
.band::before{content:"";position:absolute;inset:-30% -20%;z-index:-1;pointer-events:none;opacity:calc(.3 + .7 * var(--k,1));background:radial-gradient(ellipse 70% 60% at 40% 50%,rgba(5,5,10,.6) 0%,rgba(5,5,10,.35) 50%,transparent 76%)}
.band .mono{color:var(--accent-hi);margin-bottom:18px}
.band h2{font-size:clamp(44px,6.4vw,104px);margin-bottom:22px}
.band p{font-size:clamp(16px,1.3vw,19px);max-width:40ch;color:#D9DCDA}
.band .btn{text-shadow:none;margin-top:8px}
.band.side h2{font-size:clamp(40px,4.6vw,76px)}
.band.side::before{opacity:0}
.band .split-char{transform:translateY(calc((1 - var(--k,0)) * 110%)) rotate(calc((1 - var(--k,0)) * 6deg));transition:none}
.big-price{font:800 clamp(26px,2.4vw,36px)/1 var(--display);color:var(--bone)!important;letter-spacing:-.02em}
.big-price small{font:500 14px var(--body);color:var(--muted-d)}
.story-progress{position:absolute;left:var(--gutter);right:var(--gutter);bottom:24px;height:1px;background:rgba(241,240,236,.18)}
.story-progress i{display:block;height:100%;background:var(--bone);transform-origin:left;transform:scaleX(var(--sp,0))}

/* ===================== FAIXA ===================== */
.ticker{overflow:hidden;background:var(--ink);color:var(--bone);border-top:1px solid var(--ink3);padding:30px 0}
.ticker-track{display:flex;align-items:center;gap:40px;width:max-content;will-change:transform}
.ticker span{font:800 clamp(40px,6vw,92px)/1 var(--display);letter-spacing:-.03em;white-space:nowrap}
.ticker span:nth-of-type(even){color:transparent;-webkit-text-stroke:1px rgba(241,240,236,.6)}
.ticker i{font-style:normal;font-size:28px;color:var(--accent-hi)}

/* ===================== COLEÇÃO ===================== */
.shop{padding:clamp(80px,12vw,160px) var(--gutter) clamp(60px,8vw,120px)}
.shop-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-bottom:clamp(36px,5vw,64px)}
.shop-head .mono{color:var(--muted);margin-bottom:14px}
.section-title{font-size:clamp(52px,8.4vw,136px);letter-spacing:-.045em}
.filters{display:flex;gap:8px;flex-wrap:wrap}
.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,2vw,28px) clamp(14px,1.6vw,24px)}
.card{position:relative;opacity:0;transform:translateY(40px);transition:opacity .9s var(--ease),transform 1.1s var(--ease);transition-delay:calc(var(--i,0) * 110ms)}
.card.in{opacity:1;transform:none}
.card.in.settled{transition-delay:0s}
.card.gone{display:none}
.card-media{position:relative;display:block;aspect-ratio:4/5;overflow:hidden;border-radius:6px;background:var(--stone2)}
.card-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.card-media .alt{clip-path:circle(0 at var(--x,50%) var(--y,50%));transition:clip-path .8s var(--ease),transform 1.2s var(--ease)}
.card-media.has-alt:hover .alt,.card-media.has-alt:focus-visible .alt{clip-path:circle(150% at var(--x,50%) var(--y,50%))}
.card-media:not(.has-alt):hover img{transform:scale(1.04)}
.badge{position:absolute;left:12px;top:12px;z-index:2;background:var(--bone);color:var(--ink);font:400 11px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;padding:7px 10px;border-radius:99px}
.badge.acc{background:var(--accent);color:#F4F5FF}
.card-info{display:flex;justify-content:space-between;gap:12px;align-items:baseline;padding:16px 2px 0}
.card-info h3{font:600 16px/1.3 var(--body);letter-spacing:0}
.brand-l{display:block;color:var(--muted);margin-bottom:4px;font-size:11px}
.filter-groups{display:flex;flex-direction:column;align-items:flex-end;gap:10px}
.filters.brands{align-items:center}
.filters.brands .mono{color:var(--muted);margin-right:6px}
.card.gone-b{display:none}
.card-info h3 a{text-decoration:none}
.card-info h3 a::after{content:"";position:absolute;inset:0 0 auto 0;aspect-ratio:4/5}
.price{margin:0;font-weight:700;white-space:nowrap}
.price s{color:var(--muted);font-weight:500;margin-right:6px}
.quick{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:12px;position:relative;z-index:2}
.quick .mono{color:var(--muted);margin-right:4px}
.quick button{min-width:44px;min-height:36px;padding:0 10px;border-radius:99px;border:1px solid rgba(17,21,24,.22);background:transparent;cursor:pointer;font-weight:600;font-size:13px;transition:background .3s var(--ease),color .3s var(--ease),border-color .3s}
.quick button:hover{background:var(--ink);color:var(--bone);border-color:var(--ink)}
.quick button:disabled{opacity:.35;text-decoration:line-through;pointer-events:none}
@media (hover:hover) and (pointer:fine){
  .quick{opacity:0;transform:translateY(8px);transition:opacity .4s var(--ease),transform .5s var(--ease)}
  .card:hover .quick,.card:focus-within .quick{opacity:1;transform:none}
}
.empty{font-size:20px;color:var(--muted)}

/* ===================== PROMESSA ===================== */
.promise{background:var(--ink);color:var(--bone);padding:clamp(80px,11vw,150px) var(--gutter);border-radius:clamp(24px,4vw,48px) clamp(24px,4vw,48px) 0 0}
.promise .section-title{max-width:10ch;margin-bottom:clamp(48px,6vw,90px)}
.promise-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--ink3)}
.promise-list li{padding:34px 28px 10px 0;border-right:1px solid var(--ink3);margin-right:28px;opacity:0;transform:translateY(30px);transition:opacity .9s var(--ease),transform 1s var(--ease)}
.promise-list li:nth-child(2){transition-delay:.1s}.promise-list li:nth-child(3){transition-delay:.2s}.promise-list li:nth-child(4){transition-delay:.3s;border-right:0;margin-right:0}
.promise-list li.in{opacity:1;transform:none}
.promise svg{width:48px;height:48px;fill:none;stroke:var(--accent-hi);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;margin-bottom:26px}
.promise svg path{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.8s var(--ease) .3s}
.promise li.in svg path{stroke-dashoffset:0}
.promise h3{font-size:24px;letter-spacing:-.02em;margin-bottom:12px;line-height:1.1}
.promise p{color:var(--muted-d);font-size:15px;max-width:28ch}

/* ===================== DÚVIDAS ===================== */
.faq{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:clamp(32px,6vw,100px);padding:clamp(80px,11vw,150px) var(--gutter);background:var(--bone)}
.faq-side .mono{color:var(--muted);margin-bottom:14px}
.faq-side .section-title{font-size:clamp(48px,6vw,100px);margin-bottom:28px}
.faq-side p{color:var(--muted);max-width:34ch}
.faq-side a{color:var(--accent);font-weight:600}
details{border-top:1px solid rgba(17,21,24,.15)}
details:last-child{border-bottom:1px solid rgba(17,21,24,.15)}
summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:26px 0;font:600 clamp(18px,1.6vw,22px)/1.3 var(--body)}
summary::-webkit-details-marker{display:none}
summary::after{content:"";flex:none;width:30px;height:30px;border-radius:50%;border:1px solid rgba(17,21,24,.3);background:linear-gradient(currentColor,currentColor) center/12px 1.5px no-repeat,linear-gradient(currentColor,currentColor) center/1.5px 12px no-repeat;transition:transform .5s var(--ease),background-color .3s}
details[open] summary::after{transform:rotate(135deg);background-color:var(--ink);color:var(--bone)}
details>div{overflow:hidden}
details p{color:var(--muted);max-width:62ch;padding-bottom:26px;margin:0}

/* ===================== FINAL ===================== */
.final{position:relative;overflow:hidden;background:var(--ink);color:var(--bone);text-align:center;padding:clamp(120px,16vw,220px) var(--gutter)}
.final-lens{position:absolute;left:50%;top:50%;width:min(64vw,640px);aspect-ratio:1;border-radius:50%;overflow:hidden;transform:translate(-50%,-50%) scale(var(--fs,.6));opacity:.55}
.final-lens img{width:100%;height:100%;object-fit:cover;object-position:72% 40%;transform:scale(1.6);transform-origin:72% 40%}
.final-lens::after{content:"";position:absolute;inset:0;background:radial-gradient(circle,transparent 30%,rgba(17,21,24,.85) 75%)}
.final-title{position:relative;font-size:clamp(56px,10vw,170px);margin-bottom:40px;text-shadow:var(--tshadow)}
.final .btn{position:relative}

/* ===================== RODAPÉ ===================== */
.foot{background:var(--ink);color:var(--bone);padding:clamp(60px,8vw,100px) var(--gutter) 28px;border-top:1px solid var(--ink3)}
.foot-top{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px}
.foot .mono{color:var(--muted-d);margin-bottom:18px}
.foot a{display:block;text-decoration:none;margin-bottom:10px;font-weight:600;width:fit-content}
.foot a:hover{color:var(--accent-hi)}
.foot p{color:var(--muted-d);font-size:14px;max-width:34ch}
.foot-word{font:800 clamp(48px,10vw,190px)/.9 var(--display);letter-spacing:-.04em;text-align:center;margin:clamp(40px,7vw,100px) 0 20px;color:transparent;-webkit-text-stroke:1px rgba(241,240,236,.22);user-select:none;white-space:nowrap;overflow:hidden}
.foot-bottom{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:13px;color:var(--muted-d)}

/* ===================== SACOLA ===================== */
.drawer{position:fixed;inset:0;z-index:80;pointer-events:none}
.drawer.open{pointer-events:auto}
.drawer-bg{position:absolute;inset:0;background:rgba(17,21,24,.45);opacity:0;transition:opacity .5s var(--ease)}
.drawer.open .drawer-bg{opacity:1}
.drawer-panel{position:absolute;top:0;right:0;bottom:0;width:min(460px,100%);background:var(--bone);display:flex;flex-direction:column;transform:translateX(102%);transition:transform .7s var(--ease)}
.drawer.open .drawer-panel{transform:none}
.drawer-head{display:flex;justify-content:space-between;align-items:center;padding:22px 24px;border-bottom:1px solid rgba(17,21,24,.1)}
.drawer-head h2{font-size:28px}
.x{background:none;border:0;cursor:pointer;font-weight:600;min-height:44px;padding:0 4px;text-decoration:underline;text-underline-offset:4px}
.drawer-body{flex:1;overflow:auto;padding:8px 24px}
.drawer-foot{padding:20px 24px 24px;border-top:1px solid rgba(17,21,24,.1)}
.sum{display:flex;justify-content:space-between;align-items:baseline;margin:6px 0 16px;font-size:17px}
.sum b{font:800 24px var(--display)}
.tiny{font-size:12.5px;color:var(--muted);text-align:center;margin:10px 0 0}
.line{display:grid;grid-template-columns:76px 1fr auto;gap:14px;padding:16px 0;border-bottom:1px solid rgba(17,21,24,.08);animation:fadeIn .5s var(--ease)}
@keyframes fadeIn{from{opacity:0;transform:translateX(20px)}}
.line img{width:76px;aspect-ratio:4/5;object-fit:cover;border-radius:4px;background:var(--stone2)}
.line h4{margin:0 0 4px;font:600 15px/1.3 var(--body)}
.line h4 a{text-decoration:none}
.line .meta{font-size:13px;color:var(--muted);margin:0 0 10px}
.stepper{display:inline-flex;align-items:center;border:1px solid rgba(17,21,24,.2);border-radius:99px}
.stepper button{width:36px;height:36px;border:0;background:none;cursor:pointer;font-size:18px}
.stepper span{min-width:24px;text-align:center;font-weight:700;font-size:14px}
.line .lp{font-weight:700;text-align:right}
.line .rm{display:block;font-size:12.5px;color:var(--muted);background:none;border:0;cursor:pointer;margin-top:8px;margin-left:auto;text-decoration:underline;min-height:32px}
.cart-empty{text-align:center;padding:60px 0;color:var(--muted)}
.cart-empty .lens-i{width:72px;height:72px;margin:0 auto 18px;border-radius:50%;border:1px solid rgba(17,21,24,.3)}
.free-bar{font-size:13px;color:var(--muted);margin-bottom:8px}
.free-bar i{display:block;height:3px;background:rgba(17,21,24,.1);border-radius:3px;margin-top:8px;overflow:hidden}
.free-bar b{display:block;height:100%;background:var(--accent);transform-origin:left;transform:scaleX(var(--fp,0));transition:transform .6s var(--ease)}
.toast{position:fixed;left:50%;bottom:24px;z-index:95;transform:translate(-50%,40px);opacity:0;background:var(--ink);color:var(--bone);padding:14px 20px;border-radius:99px;font-weight:600;font-size:14px;transition:transform .5s var(--ease),opacity .5s var(--ease);max-width:calc(100% - 32px);text-align:center}
.toast.show{transform:translate(-50%,0);opacity:1}

/* ===================== PÁGINA DE PRODUTO ===================== */
.pdp{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:clamp(24px,4vw,72px);padding:calc(var(--nav-h) + 12px) var(--gutter) 80px}
.gallery{display:grid;gap:10px}
.gallery figure{margin:0;border-radius:6px;overflow:hidden;background:var(--stone2);aspect-ratio:4/5}
.gallery img{width:100%;height:100%;object-fit:cover}
.gallery figure:first-child{grid-column:1/-1}
.gallery.multi{grid-template-columns:1fr 1fr}
.dots{display:none}
.buy{position:sticky;top:calc(var(--nav-h) + 20px);align-self:start;padding-top:12px}
.crumbs{font:400 12px/1.4 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:22px}
.crumbs a{text-decoration:none}
.pdp-brand{margin:-8px 0 10px;font-size:13px}
.pdp-brand a{text-decoration:none;border-bottom:1px solid currentColor}
.buy h1{font-size:clamp(38px,4.4vw,68px);margin-bottom:18px}
.buy .price{font:800 28px var(--display);letter-spacing:-.02em;margin-bottom:6px}
.inst{color:var(--muted);font-size:14px;margin-bottom:24px}
.buy .lead{font-size:17px;color:var(--ink2);margin-bottom:28px;max-width:44ch}
.size-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:12px}
.size-head button{background:none;border:0;padding:0;cursor:pointer;text-decoration:underline;text-underline-offset:4px;font-size:14px;color:var(--muted);min-height:32px}
.sizes{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:10px}
.sizes label{position:relative}
.sizes input{position:absolute;opacity:0;width:1px;height:1px}
.sizes span{display:grid;place-items:center;min-width:58px;height:50px;padding:0 14px;border-radius:10px;border:1px solid rgba(17,21,24,.22);font-weight:700;cursor:pointer;transition:background .3s var(--ease),color .3s,border-color .3s}
.sizes span:hover{border-color:var(--ink)}
.sizes input:checked+span{background:var(--ink);color:var(--bone);border-color:var(--ink)}
.sizes input:focus-visible+span{outline:2px solid var(--accent);outline-offset:2px}
.sizes input:disabled+span{opacity:.35;text-decoration:line-through;cursor:not-allowed}
.stock-note{min-height:22px;font-size:13.5px;color:var(--accent);font-weight:600;margin-bottom:16px}
.buy-row{display:flex;gap:10px;margin-bottom:14px}
.buy-row .btn{flex:1}
.ask{font-size:14px;color:var(--muted)}
.ask a{color:var(--accent);font-weight:600}
.acc{margin-top:32px}
.acc dl{display:grid;grid-template-columns:auto 1fr;gap:10px 20px;margin:0 0 26px;font-size:15px}
.acc dt{color:var(--muted)}
.acc dd{margin:0;font-weight:600}
.acc .txt{white-space:pre-line;color:var(--ink2);padding-bottom:26px}
.related{padding:0 var(--gutter) clamp(80px,10vw,140px)}
.related h2{font-size:clamp(40px,5vw,72px);margin-bottom:36px}
.modal{position:fixed;inset:0;z-index:85;display:grid;place-items:center;padding:16px;background:rgba(17,21,24,.5);opacity:0;pointer-events:none;transition:opacity .4s var(--ease)}
.modal.open{opacity:1;pointer-events:auto}
.modal-box{width:min(620px,100%);max-height:90vh;overflow:auto;background:var(--bone);border-radius:16px;padding:28px;transform:translateY(20px);transition:transform .5s var(--ease)}
.modal.open .modal-box{transform:none}
.modal-box h2{font-size:32px;margin-bottom:8px}
.size-tbl{width:100%;border-collapse:collapse;margin:18px 0;font-size:15px}
.size-tbl th,.size-tbl td{padding:10px;border-bottom:1px solid rgba(17,21,24,.1);text-align:center}
.size-tbl th{font:400 11px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}

/* ===================== CHECKOUT ===================== */
.co{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:clamp(24px,4vw,64px);padding:calc(var(--nav-h) + 20px) var(--gutter) 100px;max-width:1320px;margin:0 auto}
.co h1{font-size:clamp(44px,6vw,88px);margin-bottom:30px}
.co fieldset{border:0;padding:0;margin:0 0 30px}
.co legend{font:400 12px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:16px;padding:0}
.fgrid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}
.f{display:block;grid-column:span 6}
.f.h{grid-column:span 3}.f.t{grid-column:span 2}.f.q{grid-column:span 4}
.f span{display:block;font-size:13px;font-weight:600;margin-bottom:6px;color:var(--ink2)}
.f input,.f select{width:100%;min-height:52px;padding:0 16px;border-radius:10px;border:1px solid rgba(17,21,24,.22);background:#FAFAF8;font:500 16px var(--body);color:var(--ink);transition:border-color .3s,box-shadow .3s}
.f input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(42,79,214,.15)}
.f input[aria-invalid=true]{border-color:#B3261E}
.ship-opt{display:flex;align-items:center;gap:14px;padding:16px 18px;border:1px solid rgba(17,21,24,.22);border-radius:12px;margin-bottom:10px;cursor:pointer;transition:border-color .3s,background .3s}
.ship-opt:has(input:checked){border-color:var(--ink);background:#FAFAF8}
.ship-opt input{accent-color:var(--ink);width:18px;height:18px}
.ship-opt b{margin-left:auto}
.coupon{display:flex;gap:8px}
.coupon input{flex:1}
.coupon .btn{min-height:52px;padding:0 20px}
.summary{position:sticky;top:calc(var(--nav-h) + 20px);align-self:start;background:var(--bone);border-radius:18px;padding:26px}
.summary h2{font-size:28px;margin-bottom:12px}
.summary .line{grid-template-columns:60px 1fr auto}
.summary .line img{width:60px}
.totals{margin:16px 0 20px;font-size:15px}
.totals div{display:flex;justify-content:space-between;padding:6px 0}
.totals .grand{border-top:1px solid rgba(17,21,24,.15);margin-top:8px;padding-top:14px;font-size:18px}
.totals .grand b{font:800 28px var(--display)}
.co-err{background:#FBE4E1;color:#8E1F18;border-radius:10px;padding:12px 14px;font-weight:600;font-size:14px;margin-bottom:14px}
.secure{display:flex;gap:10px;align-items:center;font-size:13px;color:var(--muted);margin-top:14px}
.secure svg{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8}
.thanks{min-height:80vh;display:grid;place-items:center;text-align:center;padding:calc(var(--nav-h) + 40px) var(--gutter) 80px}
.thanks h1{font-size:clamp(48px,8vw,120px);margin:20px 0}
.thanks p{color:var(--muted);max-width:46ch;margin:0 auto 26px}
.thanks .ring{width:96px;height:96px;margin:0 auto;border-radius:50%;border:1.5px solid var(--ink);display:grid;place-items:center}
.thanks .ring svg{width:42px;height:42px;fill:none;stroke:var(--ink);stroke-width:2}

/* ===================== RESPONSIVO ===================== */
@media (max-width:1024px){
  .grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .promise-list{grid-template-columns:repeat(2,minmax(0,1fr))}
  .promise-list li:nth-child(2){border-right:0;margin-right:0}
  .nav-links{display:none}
  .burger{display:block}
}
@media (max-width:820px){
  :root{--nav-h:58px}
  .nav-wa{display:none}
  .hero{height:auto;min-height:100vh;min-height:100svh;display:flex;flex-direction:column;background:var(--stone)}
  .hero-media{position:relative;inset:auto;height:62vh;height:62svh;min-height:380px;flex:none}
  .hero-media img{object-position:93% 30%}
  .hero-scrim{background:linear-gradient(0deg,var(--stone) 0%,rgba(228,230,229,0) 22%)}
  .hero-copy{position:relative;left:auto;bottom:auto;width:auto;padding:4px var(--gutter) 28px;margin-top:-28px}
  .kicker{margin-bottom:12px}
  .hero-title{font-size:clamp(52px,15vw,92px);margin-bottom:14px}
  .hero-sub{font-size:15px;margin-bottom:20px}
  .hero-cta .btn{min-height:48px;padding:0 22px}
  .hero-meta{margin-top:20px;padding-top:12px;gap:8px 16px}
  .hero-looks{gap:14px;font-size:10.5px}
  .story{height:420vh}
  .story-frame img{object-position:93% 35%;transform-origin:50% 55%}
  .story-b{clip-path:circle(var(--lr,0%) at 50% 40%)}
  .story-slot{left:var(--gutter);right:var(--gutter);top:calc(var(--nav-h) + 12px);bottom:auto;height:48%;width:auto}
  .band{left:var(--gutter);right:var(--gutter);width:auto;top:auto;bottom:56px;transform:none}
  .band h2{font-size:clamp(38px,11vw,64px);margin-bottom:14px}
  .band.side h2{font-size:clamp(32px,9vw,48px)}
  .band p{font-size:15px}
  .band::before{inset:-40% -10% -20%;background:radial-gradient(ellipse 90% 70% at 50% 60%,rgba(5,5,10,.7),rgba(5,5,10,.4) 55%,transparent 80%)}
  .faq{grid-template-columns:1fr}
  .foot-top{grid-template-columns:1fr 1fr}
  .pdp,.co{grid-template-columns:1fr}
  .pdp{padding-top:calc(var(--nav-h) + 4px)}
  .gallery,.gallery.multi{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:8px;margin:0 calc(var(--gutter) * -1);padding:0 var(--gutter);scrollbar-width:none}
  .gallery::-webkit-scrollbar{display:none}
  .gallery figure{flex:0 0 86%;scroll-snap-align:center}
  .dots{display:flex;justify-content:center;gap:6px;margin-top:12px}
  .dots i{width:6px;height:6px;border-radius:50%;background:rgba(17,21,24,.2);transition:background .3s,transform .3s}
  .dots i.on{background:var(--ink);transform:scale(1.3)}
  .buy,.summary{position:static}
  .summary{order:-1}
  .buy-row{position:sticky;bottom:12px;z-index:5}
}
@media (max-width:560px){
  .grid{gap:22px 12px}
  .card-info{flex-direction:column;gap:2px;padding-top:12px}
  .card-info h3{font-size:14px}
  .price{font-size:14px}
  .quick .mono{display:none}
  .quick button{min-width:38px;min-height:34px;font-size:12px;padding:0 8px}
  .promise-list{grid-template-columns:1fr}
  .promise-list li{border-right:0;margin-right:0;border-bottom:1px solid var(--ink3);padding-bottom:28px}
  .foot-top{grid-template-columns:1fr}
  .fgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .f,.f.h,.f.q{grid-column:span 2}.f.t{grid-column:span 1}
  .shop-head{align-items:flex-start;flex-direction:column}
  .filter-groups{align-items:flex-start;width:100%}
  .filters{flex-wrap:nowrap;overflow-x:auto;width:calc(100% + var(--gutter) * 2);margin:0 calc(var(--gutter) * -1);padding:0 var(--gutter);scrollbar-width:none}
  .filters .chip{flex:none}
}
@media (max-height:640px) and (min-width:821px){.hero-meta{display:none}.hero-copy{bottom:40px}.hero-title{font-size:clamp(56px,8vw,120px)}}
@media (pointer:coarse){.btn,.chip,.cart-btn{min-height:44px}}

body.paused *,body.paused *::before,body.paused *::after{animation-play-state:paused!important}
.btn-off{opacity:.45}

/* "Reduzir movimento" ligado no sistema: a rolagem continua animando (é o visitante quem controla),
   só os enfeites automáticos param e o rolar suave das âncoras é desligado. */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .env,.env::after,.hero-hint::before{animation:none!important}
}