html{color-scheme:dark}
:root{
  --paper:#050507; --paper-2:#0b0c10; --card:#0e0f13; --field:rgba(255,255,255,.05);
  --ink:#ffffff; --ink-soft:#a9adb9; --ink-faint:#6c707c;
  --line:rgba(255,255,255,.09); --btn:#5aa9ff; --btn-ink:#04070d; --btn-line:#5aa9ff; --btn-hover:#86c0ff;
  --cyan:#5aa9ff; --teal:#2f6fd6; --taupe:#5aa9ff;
  --ok:#ffffff; --danger:#ff7a6b;
  --shadow:0 22px 44px -26px rgba(90,169,255,.4);
  --serif:"Cormorant Garamond",Garamond,Georgia,"Times New Roman",serif;
  --sans:"Jost","Futura","Century Gothic",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:var(--sans);
  /* Vidro fosco */
  --vidro:rgba(255,255,255,.055); --vidro-forte:rgba(255,255,255,.08); --vidro-borda:rgba(255,255,255,.11);
  --vidro-blur:blur(20px) saturate(160%);
  --vidro-sombra:0 1px 0 rgba(255,255,255,.08) inset,0 16px 40px -24px rgba(0,0,0,.9);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{margin:0}
body{background:var(--paper);position:relative;isolation:isolate;color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%}
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(36% 30% at 4% 70%,rgba(70,140,255,.16),transparent 70%),radial-gradient(32% 28% at 98% 35%,rgba(90,169,255,.14),transparent 70%),radial-gradient(30% 24% at 60% 100%,rgba(40,90,220,.14),transparent 70%)}
a{color:inherit}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,label:focus-within{outline:2px solid var(--taupe);outline-offset:3px}
.wrap{max-width:1080px;margin:0 auto;padding:0 28px}
.serif{font-family:var(--serif);font-weight:500;letter-spacing:-.01em}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid var(--btn-line);border-radius:999px;padding:14px 26px;font:400 15px/1 var(--sans);letter-spacing:.01em;background:var(--btn);color:var(--btn-ink);text-decoration:none;cursor:pointer;transition:transform .08s}
.btn:hover{background:var(--btn-hover);border-color:var(--btn-hover)}
.btn:active{transform:scale(.97)}
.btn{position:relative;overflow:hidden;transition:box-shadow .3s}
.btn::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.55) 50%,transparent 70%);transform:translateX(-120%);pointer-events:none}
.btn:hover::after{transition:transform .7s ease;transform:translateX(120%)}
.btn:hover{box-shadow:0 8px 24px -10px rgba(90,169,255,.7)}
.btn.small{padding:11px 18px;font-size:14px}

/* Ícones pequenos e suas animações */
.ico{width:1.1em;height:1.1em;flex:none;vertical-align:-.18em;transition:transform .3s cubic-bezier(.34,1.56,.64,1)}
.btn:hover .i-mais{transform:rotate(90deg) scale(1.1)}
.btn:hover .i-seta{animation:quica .7s ease infinite}
.btn[type="submit"]:hover .ico{transform:scale(1.2) rotate(-8deg)}
@keyframes quica{0%,100%{transform:translateY(0)}50%{transform:translateY(3px)}}
@keyframes balanca{0%,100%{transform:rotate(0)}25%{transform:rotate(-14deg)}75%{transform:rotate(12deg)}}
@keyframes estoura{0%{transform:scale(.4) rotate(-20deg);opacity:0}60%{transform:scale(1.25) rotate(6deg);opacity:1}100%{transform:scale(1) rotate(0)}}
@keyframes flutua{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@keyframes sobe{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

/* Nav */
nav{position:relative;z-index:5;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:24px 0}
.brand{font-family:var(--serif);font-weight:500;font-size:32px;line-height:1;text-decoration:none}

/* Hero */
/* Só o fundo (manchas) desbota embaixo, sem emenda com a página; o texto não é afetado */
.hero{position:relative;text-align:center;margin-top:-96px;padding:190px 0 80px;overflow:hidden;isolation:isolate}
.fundo{position:absolute;inset:0;z-index:0;pointer-events:none;-webkit-mask-image:linear-gradient(#000 55%,transparent);mask-image:linear-gradient(#000 55%,transparent)}
.hero > .wrap{z-index:2}
.hero > .wrap{position:relative}
.hero h1{font-size:clamp(42px,5.4vw,70px);line-height:1.04;margin:0 auto 22px;max-width:26ch;font-weight:500;text-wrap:balance}
.destaque{color:#7cbcff;text-shadow:0 0 48px rgba(90,169,255,.45)}
.hero p{text-wrap:balance;color:var(--ink-soft);max-width:52ch;margin:0 auto;font-size:18px}
.hero > .wrap{will-change:transform,opacity}
.hero b{font-weight:500;color:var(--ink)}
.passos{list-style:none;font-weight:400;display:flex;justify-content:center;flex-wrap:wrap;gap:10px 22px;margin:26px auto 0;padding:0;font-size:15px;color:var(--ink)}
.passos li{display:flex;align-items:center;gap:9px}
.passos li{background:var(--vidro);-webkit-backdrop-filter:var(--vidro-blur);backdrop-filter:var(--vidro-blur);border:1px solid var(--vidro-borda);box-shadow:var(--vidro-sombra);padding:6px 14px 6px 6px;border-radius:999px}
.pontos{display:none}
.passos span{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--cyan);color:var(--btn-ink);font:500 12px/1 var(--sans)}
/* Manchas do topo: degradê radial já suave (mais leve que filter: blur) e movimento só com transform.
   "translate" segue o mouse (variáveis --mx/--my do animacoes.js); "transform" faz a deriva contínua. */
.blob{position:absolute;border-radius:50%;pointer-events:none;z-index:0;will-change:transform;background:radial-gradient(closest-side,var(--c),transparent);
  translate:calc(var(--mx,0) * var(--f,60px)) calc(var(--my,0) * var(--f,60px));transition:translate 1.4s cubic-bezier(.2,.7,.2,1)}
.b1{--c:#187988;--f:60px;width:52%;height:120%;left:-2%;top:-10%;opacity:.55;animation:deriva1 16s ease-in-out infinite alternate}
.b2{--c:#22d3ee;--f:-40px;width:50%;height:130%;left:25%;top:-20%;opacity:.22;animation:deriva2 19s ease-in-out infinite alternate}
.b3{--c:#187988;--f:90px;width:50%;height:120%;left:50%;top:-5%;opacity:.5;animation:deriva3 17s ease-in-out infinite alternate}
.b4{--c:#2563eb;--f:-110px;width:40%;height:100%;left:30%;top:10%;opacity:.4;animation:deriva4 14s ease-in-out infinite alternate}
@keyframes deriva1{to{transform:translate3d(18%,10%,0) scale(1.15)}}
@keyframes deriva2{to{transform:translate3d(-15%,12%,0) scale(.9)}}
@keyframes deriva3{to{transform:translate3d(-12%,-10%,0) scale(1.2)}}
@keyframes deriva4{0%{transform:translate3d(-10%,0,0) scale(1)}100%{transform:translate3d(14%,-8%,0) scale(1.25);opacity:.25}}

.sec{padding-top:96px}
#colecao.sec{padding-top:24px}
.head{text-align:center;margin:0 auto 28px;max-width:680px}
.head h2{font-size:clamp(36px,5vw,60px);line-height:1;margin:0 0 12px}
.head p{color:var(--ink-soft);margin:0 auto;font:400 13px/1.4 var(--mono);letter-spacing:.14em;text-transform:uppercase;max-width:54ch}

/* Cadastro (só para quem está logado) */
.cadastro{background:var(--vidro);border:1px solid var(--vidro-borda);border-radius:26px;padding:32px;box-shadow:var(--shadow)}
.cadastro h2{font-family:var(--serif);font-weight:500;font-size:34px;line-height:1.1;margin:0 0 4px}
.cadastro > p{margin:0 0 24px;color:var(--ink-soft);font-size:15px}
.form{display:grid;grid-template-columns:200px 1fr;gap:28px}
.drop > span{display:flex;flex-direction:column;align-items:center;gap:10px}
.drop .ico{width:28px;height:28px;color:var(--cyan)}
.ico-flutua{animation:flutua 2.6s ease-in-out infinite}
.drop{position:relative;aspect-ratio:1/1;border:1.5px dashed var(--teal);border-radius:20px;display:flex;align-items:center;justify-content:center;text-align:center;font-size:14px;color:var(--ink-soft);cursor:pointer;overflow:hidden;padding:12px;background:var(--paper)}
.drop img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#fff}
.drop input{position:absolute;width:1px;height:1px;opacity:0}
.fields{display:grid;grid-template-columns:1fr 1fr;gap:14px 16px}
.f{display:flex;flex-direction:column;gap:5px}
.f.full{grid-column:1/-1}
.f label{font-size:14px;font-weight:500}
.f label small{font-weight:400;color:var(--ink-faint)}
.f input,.f textarea{width:100%;font:inherit;font-size:15px;padding:12px 16px;border:1px solid var(--line);border-radius:14px;background:var(--field);color:var(--ink)}
.f input::placeholder,.f textarea::placeholder{color:var(--ink-faint)}
.f textarea{resize:vertical;min-height:72px}
.send{grid-column:1/-1;display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.aviso{margin:0 0 20px;padding:12px 16px;border-radius:14px;font-size:15px;background:rgba(90,169,255,.1);color:var(--cyan)}
.aviso.erro{background:rgba(255,122,107,.1);color:var(--danger)}

/* Coleção */
/* Barra de busca e filtros: gruda no topo ao rolar */
.barra{position:sticky;top:0;z-index:20;margin:0 -28px 40px;padding:12px 28px;background:transparent;border-bottom:1px solid transparent;transition:border-color .2s,box-shadow .2s}
.barra.grudada{background:rgba(5,5,7,.6);-webkit-backdrop-filter:var(--vidro-blur);backdrop-filter:var(--vidro-blur);border-bottom-color:var(--line);box-shadow:0 14px 30px -20px rgba(0,0,0,.9)}
.linha-busca{display:flex;gap:8px;max-width:560px;margin:0 auto 12px}
.busca{position:relative;display:flex;align-items:center;flex:1;min-width:0}
.abre-cat,.veu,.gaveta-topo,.dica-cat{display:none}
.busca > .ico{position:absolute;z-index:1;left:18px;width:18px;height:18px;color:var(--ink-faint);pointer-events:none}
.busca input{width:100%;font:inherit;font-size:16px;padding:14px 48px;border:1px solid var(--vidro-borda);border-radius:999px;background:var(--vidro-forte);box-shadow:var(--vidro-sombra);color:var(--ink);-webkit-appearance:none;appearance:none}
.busca input::placeholder{color:var(--ink-faint)}
.busca input::-webkit-search-cancel-button{display:none}
.busca input:focus{outline:none;border-color:var(--cyan)}
.busca:focus-within{outline:none}
.busca:focus-within > .ico{color:var(--cyan)}
.limpar{position:absolute;z-index:1;right:6px;display:grid;place-items:center;width:38px;height:38px;border:0;border-radius:50%;background:transparent;color:var(--ink-soft);cursor:pointer}
.limpar:hover{background:rgba(255,255,255,.06);color:var(--ink)}
.limpar[hidden]{display:none}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.chips{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding:2px 0;-webkit-mask-image:linear-gradient(90deg,transparent,#000 16px,#000 calc(100% - 16px),transparent);mask-image:linear-gradient(90deg,transparent,#000 16px,#000 calc(100% - 16px),transparent);padding-inline:16px}
.chips::-webkit-scrollbar{display:none}
@media (min-width:721px){
  .chips{flex-wrap:wrap;justify-content:center;overflow:visible;-webkit-mask-image:none;mask-image:none;padding-inline:0}
}
.chip{display:inline-flex;align-items:center;gap:7px;flex:none;white-space:nowrap;border:1px solid var(--line);border-radius:999px;padding:9px 14px;font:400 14.5px/1 var(--sans);background:var(--vidro);border-color:var(--vidro-borda);box-shadow:var(--vidro-sombra);color:var(--ink-soft);cursor:pointer}
.chip .n{font:400 11.5px/1 var(--mono);color:var(--ink-faint);margin-left:1px}
.chip[aria-pressed="true"]{border-color:var(--btn)}
.chip[aria-pressed="true"] .n{color:var(--btn-ink);opacity:.75}
.nada{text-align:center;color:var(--ink-soft);padding:40px 16px;border:1.5px dashed var(--line);border-radius:22px;margin:0 0 40px}
.nada[hidden]{display:none}
.nada button{background:none;border:0;padding:0;font:inherit;color:var(--cyan);text-decoration:underline;cursor:pointer}
.item[hidden]{display:none}
.chip[aria-pressed="true"]{background:var(--btn);color:var(--btn-ink);font-weight:500}
.chip:hover .ico{animation:balanca .5s ease}
.chip[aria-pressed="true"] .ico{animation:estoura .45s ease}
.chip{transition:background .2s,color .2s}
.chip:hover:not([aria-pressed="true"]){color:var(--ink);background:rgba(90,169,255,.07)}

/* Grupos por tipo de produto */
.grupo + .grupo{margin-top:72px}
.grupo[hidden]{display:none}
.grupo{content-visibility:auto;contain-intrinsic-size:auto 1100px}
.grupo-tit{display:flex;align-items:center;gap:12px;margin:0 0 22px;scroll-margin-top:150px;padding-bottom:14px;border-bottom:1px solid var(--line);font-family:var(--serif);font-weight:500;font-size:34px;line-height:1.1}
.bolha{display:inline-grid;place-items:center;width:42px;height:42px;border-radius:50%;background:var(--cyan);color:var(--btn-ink);flex:none}
.bolha .ico{width:20px;height:20px}
.grupo-tit:hover .bolha .ico{animation:balanca .55s ease}
.qtd{font:400 12.5px/1 var(--sans);background:var(--vidro);border-color:var(--vidro-borda)!important;color:var(--ink-faint);border:1px solid var(--line);border-radius:999px;padding:5px 10px}
.auto{display:inline-flex;align-items:center;gap:5px;margin-left:auto;font:400 12.5px/1 var(--sans);color:var(--ink-faint)}
.auto .ico{color:var(--cyan);width:13px;height:13px}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:40px 22px}
.art{position:relative;display:block;aspect-ratio:1/1;border-radius:16px;overflow:hidden;border:1px solid var(--line);background-image:var(--grad);transition:transform .35s ease,box-shadow .35s ease}
.art::before{content:"";position:absolute;width:90%;height:75%;left:var(--ox,10%);top:var(--oy,8%);border-radius:50%;background:radial-gradient(closest-side,var(--orb),transparent);opacity:.45;pointer-events:none}
.art.has-img{background:#fff}
.art.has-img::before{display:none}
.art img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.item:hover .art{box-shadow:var(--shadow)}
a.art{cursor:pointer}
.art{transition:box-shadow .35s ease}
.art img{transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.item:hover .art img{transform:scale(1.05)}
.art-ico{position:absolute;inset:0;z-index:1;display:grid;place-items:center;color:var(--cyan);opacity:.8}
.art-ico .ico{width:46px;height:46px;stroke-width:1.3;animation:flutua 3.4s ease-in-out infinite}
.item:hover .art-ico .ico{animation:balanca .6s ease}
.meta .cat{font-size:13.5px;color:var(--ink-faint);margin:0 0 4px}
.item{display:flex;flex-direction:column;padding:10px 10px 6px;border-radius:24px;background:var(--vidro);border:1px solid var(--vidro-borda);box-shadow:var(--vidro-sombra)}
.meta{padding:14px 6px 0}
.meta{display:flex;flex-direction:column;flex:1}
.meta h4{font-family:var(--sans);font-weight:400;font-size:16.5px;line-height:1.35;margin:0 0 6px;overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.meta p{font-size:14.5px;color:var(--ink-soft);margin:0 0 8px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.price{font-size:17px;font-weight:500;color:var(--ink)}
.acoes{display:flex;flex-direction:column;gap:4px;margin-top:auto;padding-top:14px}
.acoes .comprar{width:100%;padding:14px 16px;font-size:15px;font-weight:500;text-align:center;line-height:1.2}
.acoes .copy{display:flex;align-items:center;justify-content:center;gap:6px;padding:10px 8px;border:0;background:none;font:inherit;font-size:14px;color:var(--ink-soft);cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.acoes .copy:hover{color:var(--ink)}
.falta{font-size:13.5px;color:var(--danger);border:1px dashed var(--danger);border-radius:999px;padding:9px 14px}
.copy.done{color:var(--cyan);text-decoration:none}
.troca{position:relative;display:inline-grid;width:1.1em;height:1.1em}
.troca .ico{grid-area:1/1;transition:transform .3s cubic-bezier(.34,1.56,.64,1),opacity .2s}
.copy .i-ok{opacity:0;transform:scale(.3)}
.copy:hover .i-copiar{transform:translate(-1px,-1px) rotate(-6deg)}
.copy.done .i-copiar{opacity:0;transform:scale(.3)}
.copy.done .i-ok{opacity:1;transform:scale(1);animation:estoura .45s ease}


.manual{display:none;font-size:14px;color:var(--ink-soft);margin-top:14px}
.manual input{width:100%;font:inherit;font-size:14px;padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:var(--field);color:var(--ink);margin-top:6px}
.item.show-manual .manual{display:block}
.rm{margin-top:12px}
.rm{font-size:13.5px;color:var(--ink-faint)}
.rm button,.rm a{background:none;border:0;padding:0;font:inherit;font-size:13.5px;color:var(--ink-faint);text-decoration:underline;cursor:pointer}
.rm button.armed{color:var(--danger);font-weight:500}
.empty{border:1.5px dashed var(--teal);border-radius:22px;padding:48px 20px;text-align:center;color:var(--ink-soft);margin:0}

/* Fundo dos produtos sem foto: preto com brilho ciano/verde-azulado */
.p-areia{--grad:linear-gradient(160deg,#121620,#08090c);--orb:#4f9dff}
.p-linho{--grad:linear-gradient(170deg,#10131a,#07080b);--orb:#5aa9ff;--ox:25%}
.p-pedra{--grad:linear-gradient(165deg,#131823,#08090c);--orb:#3a7bff;--ox:5%}
.p-taupe{--grad:linear-gradient(170deg,#10131a,#07080b);--orb:#4f9dff;--ox:22%;--oy:4%}
.p-argila{--grad:linear-gradient(160deg,#121620,#08090c);--orb:#9fd0ff}
.p-salvia{--grad:linear-gradient(170deg,#131823,#07080b);--orb:#3a7bff;--ox:20%}

.toast{font-family:var(--sans);position:fixed;left:50%;bottom:24px;z-index:50;max-width:calc(100% - 32px);transform:translate(-50%,20px);opacity:0;pointer-events:none;background:rgba(255,255,255,.1);-webkit-backdrop-filter:var(--vidro-blur);backdrop-filter:var(--vidro-blur);border:1px solid rgba(255,255,255,.16);color:#fff;font-size:15px;font-weight:500;padding:13px 20px;border-radius:999px;box-shadow:0 14px 30px -12px rgba(0,0,0,.8);transition:opacity .25s,transform .25s;text-align:center}
.toast.on{opacity:1;transform:translate(-50%,0)}

footer{border-top:1px solid var(--line);margin-top:112px}
.legal{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:24px 28px 36px;font:400 12px/1.4 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-faint)}

@media (max-width:960px){
  .grid{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:720px){
  .wrap{padding:0 16px}
  .legal{padding:24px 16px 32px}
  .hero{margin-top:-84px;padding:130px 0 44px}
  .hero h1{font-size:39px;margin-bottom:12px}
  .hero p{font-size:16px}
  .passos{flex-direction:column;align-items:center;max-width:100%;gap:8px;margin:20px auto 0;font-size:14px}
  /* Passos um de cada vez, no mesmo lugar (main.js troca 1 → 2 → 3) */
  .passos.giro{display:grid;justify-items:center}
  .passos.giro li{grid-area:1/1;opacity:0;transform:translateY(14px) scale(.96);pointer-events:none}
  .passos.giro.pronto li{transition:opacity .25s ease,transform .3s ease}
  .passos.giro li.ativo{opacity:1;transform:none;pointer-events:auto}
  /* O próximo só entra depois que o anterior saiu */
  .passos.giro.pronto li.ativo{transition:opacity .45s ease .25s,transform .55s cubic-bezier(.2,.7,.2,1) .25s}
  .passos.giro li.sai{opacity:0;transform:translateY(-14px) scale(.96)}
  .passos.giro.pronto li.ativo span{animation:estoura .5s ease .25s both}
  .pontos{display:flex;justify-content:center;gap:6px;margin-top:14px}
  .pontos i{width:6px;height:6px;border-radius:999px;background:rgba(255,255,255,.22);transition:width .4s ease,background .4s ease}
  .pontos i.ativo{width:20px;background:var(--cyan)}
  .sec{padding-top:56px}
  #colecao.sec{padding-top:12px}
  .head{margin-bottom:12px}
  .head h2{font-size:36px;margin-bottom:6px}
  .head p{font-size:11.5px}
  .barra{margin:0 -16px 28px;padding:10px 0}
  .linha-busca{margin:0 16px}
  /* Celular: sem busca; o botão de categorias ocupa a linha toda */
  .busca{display:none}
  .linha-busca{justify-content:center}
  .linha-busca .abre-cat{flex:none;max-width:100%;min-height:46px;gap:10px;padding:0 14px 0 16px}
  .linha-busca .abre-cat .abre-seta{margin-left:4px}
  .abre-cat{display:inline-flex;align-items:center;gap:7px;flex:none;max-width:42%;padding:0 14px;border-radius:999px;border:1px solid var(--vidro-borda);background:var(--vidro-forte);box-shadow:var(--vidro-sombra);color:var(--ink);font:500 14.5px/1 var(--sans);cursor:pointer}
  .abre-cat.filtrado{background:var(--btn);border-color:var(--btn);color:var(--btn-ink)}
  .abre-cat{position:relative;padding:0 12px 0 14px;text-align:left}
  .abre-rot{display:flex;flex-direction:column;gap:3px;min-width:0}
  .abre-leg{font:400 10.5px/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft)}
  .abre-cat.filtrado .abre-leg{color:inherit;opacity:.7}
  .abre-txt{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .abre-cat .ico{width:16px;height:16px}
  .abre-seta{margin-left:2px;opacity:.8;transition:transform .3s}
  .abre-cat[aria-expanded="true"] .abre-seta{transform:rotate(180deg)}
  /* Chama atenção: um anel pulsa algumas vezes em volta do botão */
  .abre-cat::after{content:"";position:absolute;inset:-1px;border-radius:inherit;border:2px solid var(--cyan);opacity:0;pointer-events:none}
  .anima .abre-cat:not(.usado)::after{animation:chama 1.8s ease-out 1.2s 3}
  @keyframes chama{0%{opacity:.9;transform:scale(1)}100%{opacity:0;transform:scale(1.18,1.35)}}
  /* Dica embaixo da busca, até a pessoa usar o botão pela primeira vez */
  .dica-cat{display:flex;align-items:center;justify-content:center;gap:6px;margin:8px 16px 0;font-size:12.5px;line-height:1.3;color:var(--ink-soft)}
  .dica-cat b{color:var(--cyan);font-weight:500}
  .dica-cat .ico{width:16px;height:16px;color:var(--cyan);flex:none;animation:cutuca 1.2s ease-in-out infinite}
  .dica-cat[hidden]{display:none}
  @keyframes cutuca{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
  /* Sem desfoque no celular: ele faria a gaveta (position:fixed) ficar presa dentro da barra */
  .barra.grudada{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(5,5,7,.94)}
  .veu{display:block;position:fixed;inset:0;z-index:60;background:rgba(0,0,0,.55);opacity:0;transition:opacity .3s}
  .veu[hidden]{display:block;pointer-events:none}
  .barra.cat-aberta .veu{opacity:1}
  .chips{position:fixed;left:0;right:0;bottom:0;z-index:61;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:auto;max-width:none;gap:8px;max-height:78vh;overflow-y:auto;overscroll-behavior:contain;padding:0 14px calc(18px + env(safe-area-inset-bottom));border-radius:24px 24px 0 0;border-top:1px solid var(--vidro-borda);background:rgba(16,18,24,.97);box-shadow:0 -20px 50px -10px rgba(0,0,0,.8);-webkit-mask-image:none;mask-image:none;transform:translateY(105%);visibility:hidden;transition:transform .35s cubic-bezier(.2,.8,.2,1),visibility 0s .35s}
  .barra.cat-aberta .chips{transform:none;visibility:visible;transition:transform .35s cubic-bezier(.2,.8,.2,1)}
  .gaveta-topo{grid-column:1/-1;position:sticky;top:0;display:flex;align-items:center;justify-content:space-between;padding:16px 2px 10px;background:rgba(16,18,24,.97);font:500 16px/1 var(--sans);color:var(--ink)}
  .gaveta-topo::before{content:"";position:absolute;top:7px;left:50%;width:38px;height:4px;margin-left:-19px;border-radius:9px;background:rgba(255,255,255,.2)}
  .gaveta-topo button{display:grid;place-items:center;width:36px;height:36px;border:0;border-radius:50%;background:rgba(255,255,255,.08);color:var(--ink);cursor:pointer}
  .chips .chip{min-width:0;width:100%;white-space:normal;text-align:left;line-height:1.25;padding:12px;border-radius:14px;font-size:14px;align-items:center}
  .chips .chip .rot{min-width:0}
  .chips .chip .n{margin-left:auto;padding-left:6px;flex:none;white-space:nowrap}
  .busca input{padding:13px 46px}
  .cadastro{padding:22px 18px;border-radius:22px}
  .form{grid-template-columns:1fr}
  .drop{max-width:220px;width:100%;margin:0 auto}
  .fields{grid-template-columns:1fr}
  .grid{grid-template-columns:repeat(2,1fr);gap:28px 12px}
  .art{border-radius:13px}
  .item{padding:6px 6px 2px;border-radius:18px}
  .meta{padding:10px 4px 0}
  .brand{font-size:28px}
  .meta h4{font-size:14.5px}
  .meta p{display:none}
  .price{font-size:15px}
  .acoes{padding-top:10px}
  .acoes .comprar{padding:12px 4px;font-size:13px;white-space:nowrap}
  .acoes .comprar .ico{display:none}
  .acoes .copy{font-size:13px;padding:8px 2px}
  .grupo-tit{font-size:25px;gap:10px;margin-bottom:16px}
  .bolha{width:36px;height:36px}
  .grupo + .grupo{margin-top:44px}
  .toast{font-family:var(--sans);bottom:16px}
}
/* Animações de entrada (o animacoes.js põe .anima, .revela e .visto) */
.anima nav > *{animation:desce .7s cubic-bezier(.2,.8,.2,1) both}
.anima nav > *:last-child{animation-delay:.1s}
.anima .palavra{display:inline-block;animation:sobe-palavra .9s cubic-bezier(.2,.8,.2,1) calc(var(--i) * 70ms + .15s) both}
.anima .hero p{animation:sobe .9s ease .5s both}
.anima .passos,.anima .pontos{animation:sobe .9s ease .65s both}
.anima .head,.anima .cadastro,.anima .empty,.revela{opacity:0;transform:translate3d(0,40px,0);transition:opacity .8s ease,transform .9s cubic-bezier(.2,.7,.2,1)}
.anima .visto{opacity:1;transform:none}
.item.revela{transform:translate3d(0,60px,0) scale(.96)}
.item.revela.visto{transform:none}
.copy.pulo{animation:pulo .5s cubic-bezier(.3,1.6,.5,1)}
@keyframes desce{from{opacity:0;transform:translate3d(0,-24px,0)}}
@keyframes sobe-palavra{from{opacity:0;transform:translate3d(0,.55em,0) rotate(4deg)}}
@keyframes pulo{0%{transform:scale(.88)}100%{transform:none}}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .blob,.art-ico .ico,.ico-flutua{animation:none}
}

.nav-link{margin-left:auto;font-size:14px;color:var(--ink-soft);text-decoration:none}
.nav-link:hover{color:var(--cyan)}