*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;background:#050506;color-scheme:dark;min-height:100%;scrollbar-color:#42444a #050506}
body{min-height:100vh;min-height:100dvh}
html::-webkit-scrollbar{width:12px;height:12px}
html::-webkit-scrollbar-track,html::-webkit-scrollbar-corner{background:#050506}
html::-webkit-scrollbar-thumb{background:#42444a;border:3px solid #050506;border-radius:12px}
body{font-family:'Inter',-apple-system,'Helvetica Neue',sans-serif;background:#050506;color:#f5f5f7;-webkit-font-smoothing:antialiased}
a{text-decoration:none;color:inherit}

/* ── tipografia utilitária ── */
.blue{color:#2997ff;font-size:14px}
.blue::after{content:" ›"}
.blue:hover{text-decoration:underline}
.pill{
  display:inline-block;background:#f5f5f7;color:#0a0a0c;font-size:14px;font-weight:500;
  padding:12px 24px;border-radius:980px;transition:transform .25s,background .25s;
}
.pill:hover{background:#fff;transform:scale(1.03)}

/* ── logo titânio (gradiente + varredura especular) ── */
.ti{
  font-family:'Space Grotesk',sans-serif;font-weight:700;letter-spacing:-.02em;line-height:1;
  background:
    linear-gradient(115deg,transparent 32%,rgba(255,255,255,.85) 47%,rgba(180,200,255,.5) 50%,transparent 62%),
    linear-gradient(180deg,#a7abb4 0%,#e9ebef 22%,#787d87 48%,#c9ccd3 74%,#5d626c 100%);
  background-size:280% 100%,100% 100%;
  background-position:120% 0,0 0;
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.ti.varre{animation:varre-ti 5.2s cubic-bezier(.6,.05,.3,1) infinite}
@keyframes varre-ti{0%,55%{background-position:120% 0,0 0}95%,100%{background-position:-60% 0,0 0}}

/* ── nav: escondida na abertura, desliza ao rolar ── */
.anav{
  position:fixed;top:0;left:0;right:0;z-index:40;height:48px;
  display:flex;align-items:center;justify-content:space-between;padding:0 max(22px,5vw);
  background:rgba(5,5,6,.65);backdrop-filter:saturate(1.8) blur(20px);-webkit-backdrop-filter:saturate(1.8) blur(20px);
  border-bottom:1px solid rgba(255,255,255,.08);font-size:12px;
  transform:translateY(-100%);opacity:0;
  transition:transform .45s cubic-bezier(.3,.7,.2,1),opacity .35s ease;
}
.anav.vis{transform:none;opacity:1}
.anav .ti{font-size:17px}
.anav .links{display:flex;gap:28px;color:rgba(245,245,247,.72)}
.anav .links a:hover{color:#fff}

/* ── revelação no scroll ── */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .8s cubic-bezier(.2,.6,.2,1),transform .8s cubic-bezier(.2,.6,.2,1)}
.reveal.in{opacity:1;transform:none}

/* ── HERO: marca no centro, como página de evento ── */
.hero{
  min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;position:relative;overflow:hidden;padding:40px 6vw 70px;
  /* unidade-mestra: tudo no hero escala junto com o tamanho do logo */
  --logo:min(clamp(64px,13vw,180px),24vh);
}
.hero::before{content:"";position:absolute;inset:0;
  background:radial-gradient(56% 44% at 50% 44%,rgba(126,136,158,.20),transparent 70%);}
.hero::after{content:"";position:absolute;left:50%;top:64%;transform:translateX(-50%);
  width:70vmin;height:16vmin;border-radius:50%;
  background:radial-gradient(50% 50% at 50% 50%,rgba(160,175,205,.14),transparent 70%);filter:blur(10px);}
/* ═══ POSIÇÕES ANCORADAS EM % DA ALTURA DA TELA (arquitetura definitiva) ═══
   O hero mede sempre 100% da altura da janela; cada elemento é ancorado num
   percentual fixo dessa altura. A composição vertical é IDÊNTICA em qualquer
   resolução — a largura só muda o tamanho das fontes, nunca as posições. */
.hero .ti,.hero h1,.hero .sub,.hero .ctas{position:absolute;left:0;right:0}
.hero .ti{font-size:var(--logo);top:calc(43.1% - var(--logo)*.5);filter:drop-shadow(0 10px 34px rgba(0,0,0,.7))}
.hero h1{
  font-size:clamp(17px,2.4vw,27px);font-weight:600;letter-spacing:-.012em;line-height:1.3;
  top:56.4%;margin:0;
}
.hero h1 .ate{white-space:nowrap}
@media(max-width:680px){.hero h1 .ate{display:block}}
.hero .sub{color:#86868b;font-size:clamp(14px,1.6vw,18px);max-width:46ch;top:59.4%;margin:0 auto}
.hero .ctas{display:flex;gap:26px;align-items:center;justify-content:center;top:69.3%;margin:0}
/* entrada orquestrada */
.hero .ti,.hero .ctas{
  opacity:0;transform:translateY(18px);
  animation:entra .9s cubic-bezier(.2,.7,.2,1) forwards;
}
.hero .ctas{animation-delay:.6s}
@keyframes entra{to{opacity:1;transform:none}}
/* anim 03 · cortina: slogan e subtítulo revelados da esquerda p/ direita */
.hero h1,.hero .sub{
  opacity:0;
  clip-path:inset(-4% 100% -4% 0);
  animation:cortina 1.1s cubic-bezier(.65,.05,.3,1) forwards;
}
.hero h1{animation-delay:.3s}
.hero .sub{animation-delay:.55s}
@keyframes cortina{to{opacity:1;clip-path:inset(-4% -2% -4% 0)}}
.hero .dica{
  position:absolute;bottom:22px;left:50%;transform:translateX(-50%);
  color:#6e6e73;font-size:11px;letter-spacing:.18em;opacity:0;animation:entra-dica 1s ease 1.2s forwards;
}
@keyframes entra-dica{to{opacity:1}}

/* ── CATÁLOGO: painel, busca e cartões de categoria ── */
.catalogo{max-width:1120px;margin:0 auto;padding:70px 22px 90px}
.painel{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px}
.stat{background:#101113;border:1px solid rgba(255,255,255,.07);border-radius:22px;padding:26px 30px}
.stat b{display:block;font-size:46px;line-height:1.1;font-variant-numeric:tabular-nums}
.stat span{font-size:11px;letter-spacing:.22em;color:#86868b}
.busca{
  display:flex;align-items:center;gap:12px;background:#101113;border:1px solid rgba(255,255,255,.09);
  border-radius:980px;padding:6px 6px 6px 24px;margin-bottom:14px;transition:border-color .3s;
}
.busca:focus-within{border-color:rgba(255,255,255,.3)}
.busca input{flex:1;background:none;border:0;outline:0;color:#f5f5f7;font-size:16px;font-family:inherit;padding:12px 0}
.busca input::placeholder{color:#6e6e73}
.busca .lupa{width:46px;height:46px;border-radius:50%;background:#f5f5f7;color:#0a0a0c;display:flex;align-items:center;justify-content:center;flex:none;font-size:17px}
.cats{display:flex;flex-direction:column;gap:14px}
.cat{
  position:relative;border-radius:26px;overflow:hidden;
  padding:clamp(28px,4.5vw,52px);min-height:300px;
  display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-start;gap:6px;
  background:linear-gradient(135deg,#1c1e23 0%,#111216 55%,#0b0c0e 100%);
  border:1px solid rgba(255,255,255,.07);
  transition:transform .35s cubic-bezier(.2,.7,.2,1),border-color .35s,box-shadow .35s;
}
.cat::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.28),transparent)}
.cat::after{content:"";position:absolute;top:-40%;right:-10%;width:60%;height:120%;
  background:radial-gradient(50% 50% at 50% 50%,rgba(150,165,195,.10),transparent 70%);pointer-events:none}
.cat:hover{transform:translateY(-4px);border-color:rgba(255,255,255,.18);box-shadow:0 34px 70px -34px rgba(120,140,180,.3)}
.cat .qtd{font-size:12px;letter-spacing:.24em;color:#86868b;position:relative}
.cat h2{
  text-transform:uppercase;font-size:clamp(30px,4.6vw,58px);letter-spacing:-.01em;line-height:1.05;position:relative;
}
.cat .subs{color:#a1a1a6;font-size:15px;margin:4px 0 18px;position:relative;max-width:52ch}
.cat .pill{font-size:13px;padding:11px 22px;position:relative}
/* anim 02 · varredura especular no título quando o cartão entra */
.cat.in h2{animation:varre-uma 1.5s cubic-bezier(.6,.05,.3,1) .35s forwards}
@keyframes varre-uma{to{background-position:-60% 0,0 0}}
/* anim 07 · fio de luz percorre a borda superior ao revelar */
.cat .fio{
  position:absolute;top:-1px;height:3px;width:24%;left:-28%;border-radius:3px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.9),transparent);
  filter:blur(1px);opacity:0;pointer-events:none;
}
.cat.in .fio{animation:fio-corre 1.5s cubic-bezier(.5,.1,.4,1) calc(var(--cd,0s) + .3s) forwards}
@keyframes fio-corre{0%{left:-28%;opacity:1}85%{opacity:1}100%{left:104%;opacity:0}}
/* anim 10 · brilho que segue o cursor */
.cat .lume{
  position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .35s;
  background:radial-gradient(340px 240px at var(--mx,50%) var(--my,40%),rgba(160,180,215,.12),transparent 70%);
}
.cat:hover .lume{opacity:1}
/* anim 09 · cascata: painel e cartões entram em sequência */
.painel.reveal{opacity:1;transform:none}
.painel.reveal .stat{opacity:0;transform:translateY(18px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
.painel.reveal.in .stat{opacity:1;transform:none}
.painel.reveal.in .stat:nth-child(2){transition-delay:.15s}
.cats .cat.reveal{opacity:1;transform:none;transition:transform .35s cubic-bezier(.2,.7,.2,1),border-color .35s,box-shadow .35s}
.cats .cat.reveal:not(.in){opacity:0}
.cats .cat.reveal.in{animation:sobe-cat .7s cubic-bezier(.2,.7,.2,1) var(--cd,0s) backwards}
@keyframes sobe-cat{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
.cat.in h2{animation-delay:calc(var(--cd,0s) + .45s)}
.prods{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px}
.prod{background:#101113;border:1px solid rgba(255,255,255,.08);border-radius:22px;overflow:hidden;transition:transform .3s,border-color .3s,box-shadow .3s}
.prod:hover{transform:translateY(-4px);border-color:rgba(255,255,255,.2);box-shadow:0 30px 60px -32px rgba(120,140,180,.3)}
.prod img{width:100%;height:220px;object-fit:cover;display:block;background:#0b0c0e}
.prod .preco-prod{margin-top:7px;font-size:15px;font-weight:500;color:#c9ccd3;font-variant-numeric:tabular-nums;letter-spacing:.01em}
.cat-bloco{margin-top:38px}
.cat-tit{
  text-transform:uppercase;font-size:clamp(21px,2.8vw,30px);letter-spacing:0;
  display:flex;align-items:baseline;gap:12px;margin-bottom:16px;
}
.qtd-cat{font-family:'Inter',sans-serif;font-size:11px;letter-spacing:.2em;color:#86868b;-webkit-text-fill-color:#86868b}
/* produtos entram em cascata como os cartões */
.prods .prod.reveal{opacity:1;transform:none}
.prods .prod.reveal:not(.in){opacity:0}
.prods .prod.reveal.in{animation:sobe-cat .7s cubic-bezier(.2,.7,.2,1) var(--cd,0s) backwards}
.prod .info{padding:16px 18px 18px}
.prod .selo{font-size:10px;letter-spacing:.2em;color:#c9ccd3;border:1px solid rgba(255,255,255,.2);border-radius:980px;padding:4px 10px;display:inline-block;margin-bottom:10px}
.prod h3{font-size:17px;font-weight:600;letter-spacing:-.01em;line-height:1.35}
.prod .specs{color:#86868b;font-size:13px;margin-top:5px;line-height:1.55}
.prod .status{margin-top:14px;font-size:12px;color:#30d158}
.prod.breve .status{color:#86868b}
.prod .ph{height:200px;display:flex;align-items:center;justify-content:center;color:#5f6167;font-size:12px;letter-spacing:.18em;background:linear-gradient(135deg,#17181c,#0e0f12)}
.vazio{display:none;text-align:center;color:#86868b;padding:56px 0;font-size:15px}
.vazio.mostra{display:block}
@media(max-width:640px){.painel{grid-template-columns:1fr}.cat{min-height:240px}}

footer{
  border-top:1px solid rgba(255,255,255,.08);padding:28px max(22px,5vw);
  display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;
  color:#6e6e73;font-size:11px;letter-spacing:.14em;
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important;transition:none !important}
  .reveal{opacity:1;transform:none}
  .hero .ti,.hero h1,.hero .sub,.hero .ctas{opacity:1;transform:none;clip-path:none}
  .hero .dica{opacity:1}
  .painel.reveal .stat{opacity:1;transform:none}
  .cats .cat.reveal:not(.in){opacity:1}
}

/* Navegação do catálogo por função */
.catalogo-intro{margin:34px 0 22px}
.catalogo-intro h2{font-size:clamp(26px,4vw,42px);line-height:1.15}
.catalogo-intro p,.funcao-desc{color:#a1a1a6;font-size:14px;line-height:1.6;margin-top:10px}
.funcao-desc{margin:-5px 0 20px}
.filtros{display:flex;flex-wrap:wrap;gap:8px;margin:20px 0 14px}
.filtro{border:1px solid #34363d;border-radius:980px;background:#101113;color:#c9ccd3;padding:12px 18px;font:500 13px 'Inter',sans-serif;cursor:pointer;min-height:44px;transition:background .2s,color .2s}
.filtro span{margin-left:8px;opacity:.6;font-variant-numeric:tabular-nums}
.filtro:hover{border-color:#858a96}
.filtro[aria-pressed="true"]{background:#f5f5f7;color:#101113;border-color:#f5f5f7}
.filtro:focus-visible{outline:2px solid #2997ff;outline-offset:3px}
.resultado{font-size:12px;color:#86868b}
.cat-tit{flex-wrap:wrap;row-gap:6px}
.cat-bloco[hidden],.prod[hidden]{display:none!important}
.busca input{min-width:0}
@media(max-width:640px){.prods{grid-template-columns:minmax(0,1fr)}.filtro{padding:11px 14px}.anav .links{gap:14px}.cat-bloco{margin-top:26px}}
@media(prefers-reduced-motion:reduce){.prods .prod.reveal:not(.in){opacity:1}}

/* Camadas decorativas não bloqueiam os links da abertura. */
.hero::before,.hero::after{pointer-events:none}
#destaques{scroll-margin-top:48px}
#filtros{scroll-margin-top:70px}
.hero .sub{top:calc(56.4% + clamp(17px,2.4vw,27px)*1.3 + 12px)}
@media(max-width:680px){.hero .sub{top:calc(56.4% + clamp(17px,2.4vw,27px)*2.6 + 10px);padding:0 18px}.hero .ctas{top:max(76%,calc(56.4% + 116px))}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}


.prods .prod:nth-child(3n+2){--cd:.1s}.prods .prod:nth-child(3n){--cd:.2s}
.produto-descricao{font-size:13px;line-height:1.5;color:#9ba1ab;margin:8px 0 12px;overflow-wrap:anywhere}.produto-descricao:empty{display:none}