/* Catalogo completo (catalogo.html, 28/09/2026). Usa estilo.css (tipografia, lista com abas, selo, carga) e so
   acrescenta o que e desta pagina. Um produto por tela: o documento tem uma secao de 100svh por produto, com snap. */
html.cat-html{scroll-snap-type:y mandatory}
body.cat{cursor:auto;background:var(--borda)}
.cat .ver-pilula,.cat .lista-produtos button{cursor:pointer}

/* (28/09/2026) o fundo cosmico e o DNA agora sao desenhados na propria cena 3D (canvas opaco: o vidro fica transparente) */
.cat #cena{z-index:1}
.cat-veu{display:none}

.cat-topo{position:fixed;left:var(--gutter);right:var(--gutter);top:clamp(20px,2.6vw,34px);z-index:5;display:flex;justify-content:space-between;align-items:center}
.cat-topo .logo{height:clamp(22px,2.2vw,30px);width:auto;display:block;opacity:.95}
.cat-topo .ver-pilula{text-decoration:none}
.cat-topo .ver-pilula svg{width:14px;height:14px;stroke:var(--tinta);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

.cat-painel{position:fixed;left:var(--gutter);top:clamp(96px,15vh,150px);max-width:min(34vw,500px);z-index:4}
.cat-painel .lista-produtos{max-height:calc(100vh - clamp(96px,15vh,150px) - 260px);max-height:calc(100svh - clamp(96px,15vh,150px) - 260px);overflow-y:auto;scrollbar-width:none;padding-right:8px}
.cat-painel .lista-produtos::-webkit-scrollbar{display:none}

.cat-dica{position:fixed;left:var(--gutter);bottom:clamp(58px,8vh,70px);z-index:4;margin:0;font-size:12px;letter-spacing:.24em;
          text-transform:uppercase;color:var(--fraco);transition:opacity .5s}
.cat-dica.sumiu{opacity:0}

#trilho{position:relative;z-index:2}
#trilho section{height:100vh;height:100svh;scroll-snap-align:start;scroll-snap-stop:always}

.cat-carga-texto{display:block;margin-top:-6px}

@media (max-width:900px){
  /* o painel desce para o pe da tela, com um veu escuro por tras; na lista ficam so as abas (o dedo passa produto a produto) */
  .cat-veu{display:block;position:fixed;left:0;right:0;bottom:0;height:46%;z-index:3;pointer-events:none;
           background:linear-gradient(to top,rgba(2,3,8,.92),rgba(2,3,8,.6) 55%,rgba(2,3,8,0))}
  .cat-painel{top:auto;bottom:clamp(56px,9vh,86px);right:var(--gutter);max-width:none}
  .cat .lista-produtos{display:flex;margin-top:16px;max-height:none;overflow:visible}
  .cat .lista-produtos li:not(.abas){display:none}
  .cat .lista-produtos .abas{margin-bottom:0;padding-bottom:0;border-bottom:0}
  .cat .lista-produtos .aba{font-size:12px;padding:6px 0}
  .cat-dica{left:50%;transform:translateX(-50%);white-space:nowrap;bottom:clamp(16px,3vh,28px)}
}

/* a mesma seta de "da para rolar" da experiencia, embaixo do aviso; some junto com ele */
.cat-seta{position:fixed;left:var(--gutter);bottom:clamp(4px,1.2vh,12px);z-index:4;transition:opacity .5s;pointer-events:none}
.cat-seta .seta-rolar{margin:0}
.cat-seta.sumiu{opacity:0}
@media (max-width:900px){ .cat-seta{left:50%;transform:translateX(-50%)} .cat-dica{bottom:clamp(40px,6vh,56px)} }