/* ============================================================
   ZARTTE BRASÍLIA — produtos.css
   ============================================================ */

/* ---- FILTROS ---- */
.filtros-wrap {
  border-bottom:1px solid var(--linha);
  background:rgba(0,0,0,0.7);
  backdrop-filter:blur(16px);
  position:sticky; top:80px; z-index:100;
}
.filtros {
  display:flex; gap:0; overflow-x:auto; scrollbar-width:none;
}
.filtros::-webkit-scrollbar { display:none; }
.filtro {
  background:none; border:none; border-right:1px solid var(--linha);
  color:var(--cinza); font-family:'DM Sans',sans-serif;
  font-size:0.65rem; letter-spacing:3px;
  text-transform:uppercase; padding:20px 28px;
  cursor:pointer; white-space:nowrap; transition:all 0.2s;
}
.filtro:hover { color:var(--branco); background:rgba(255,255,255,0.04); }
.filtro.ativo  { color:var(--branco); border-bottom:1px solid var(--branco); }

/* ---- GRID DE PRODUTOS ---- */
.produtos-pg { padding:72px 0 0; }

.prod-pg-grid {
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:1px; background:var(--linha);
  border:1px solid var(--linha);
}
.prod-pg-item {
  background:var(--preto); padding:44px 38px;
  transition:background 0.3s; position:relative; overflow:hidden;
  display:flex; flex-direction:column;
}
.prod-pg-item::after {
  content:''; position:absolute;
  top:0; left:0; right:0; height:2px;
  background:var(--branco); transform:scaleX(0);
  transform-origin:left; transition:transform 0.45s ease;
}
.prod-pg-item:hover { background:var(--preto3); }
.prod-pg-item:hover::after { transform:scaleX(1); }
.prod-pg-item:hover .prod-pg-item__cta { color:var(--branco); letter-spacing:4px; }

.prod-pg-item__cat {
  font-size:0.58rem; letter-spacing:3px;
  text-transform:uppercase; color:var(--cinza); margin-bottom:16px;
}
.prod-pg-item__nome {
  font-size:clamp(2rem,3vw,2.8rem);
  line-height:0.92; margin-bottom:18px;
}
.prod-pg-item p {
  font-size:0.83rem; color:var(--cinza);
  line-height:1.7; margin-bottom:28px; flex:1;
}
.prod-pg-item__cta {
  font-size:0.65rem; letter-spacing:3px;
  text-transform:uppercase; color:rgba(255,255,255,0.3);
  transition:color 0.3s, letter-spacing 0.3s;
  margin-top:auto;
}

/* ---- BANNER REVENDEDOR ---- */
.prod-revendedor {
  border:1px solid var(--linha); border-top:none;
  background:var(--branco); padding:80px 72px;
  display:grid; grid-template-columns:1fr auto;
  align-items:center; gap:60px;
}
.prod-revendedor h2 {
  font-size:clamp(3rem,6vw,6rem);
  line-height:0.88; color:var(--preto);
}
.prod-revendedor p {
  font-size:0.9rem; color:rgba(0,0,0,0.5);
  margin-top:14px; max-width:400px;
}
.prod-revendedor .btn-preto-solido {
  display:inline-flex; align-items:center; gap:10px;
  background:var(--preto); color:var(--branco);
  padding:18px 40px; font-size:0.7rem;
  font-weight:600; letter-spacing:3px; text-transform:uppercase;
  white-space:nowrap; transition:background 0.3s;
  flex-shrink:0;
}
.prod-revendedor .btn-preto-solido:hover { background:#1a1a1a; }

@media (max-width:1024px) {
  .prod-pg-grid { grid-template-columns:repeat(2,1fr); }
  .prod-revendedor { grid-template-columns:1fr; padding:60px 40px; }
}
@media (max-width:640px) {
  .prod-pg-grid { grid-template-columns:1fr; }
  .prod-revendedor { padding:48px 28px; }
}

/* ---- REVEAL ANIMAÇÃO ---- */
[data-reveal] {
  opacity:0 !important;
  transform:translateY(24px);
  transition:opacity 0.6s cubic-bezier(0.25,0.46,0.45,0.94),
             transform 0.6s cubic-bezier(0.25,0.46,0.45,0.94);
}
[data-reveal].visivel {
  opacity:1 !important;
  transform:translateY(0);
}