.categoria-hero{
  background:var(--verde);
  color:#fff;
  padding:48px 0 40px;
  position:relative;
  padding-bottom:64px;
}
.categoria-hero::after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:0;
  height:26px;
  background-image:var(--zigzag);
  background-repeat:repeat-x;
  background-size:36px 26px;
  background-position:left bottom;
}
.categoria-hero h1{
  font-size:clamp(34px,4.6vw,58px);
  line-height:1.06;
  margin:14px 0 14px;
  letter-spacing:-.005em;
  font-weight:400;
}
.categoria-hero p{
  font-size:17px;
  line-height:1.55;
  max-width:680px;
  margin:0;
  color:rgba(255,255,255,.92);
}

.categoria-secao{padding-top:44px}

.visualizer-callout{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  background:var(--verde-escuro);
  color:#fff;
  border-radius:var(--raio);
  padding:28px 32px;
  margin-bottom:16px;
}
.visualizer-callout-texto h2{
  margin:0 0 8px;
  font-size:22px;
  color:#fff;
}
.visualizer-callout-texto p{
  margin:0;
  color:rgba(255,255,255,.9);
  line-height:1.55;
  max-width:560px;
}
.visualizer-callout .btn{white-space:nowrap}

.disponibilidade-nota{
  text-align:center;
  font-size:13px;
  color:var(--muted);
  line-height:1.5;
  margin:0 0 28px;
}
.disponibilidade-nota a{color:var(--verde);font-weight:800}

.linha-tinta{
  background:#fff;
  border:1px solid var(--borda);
  border-radius:var(--raio);
  padding:28px;
  box-shadow:none;
  margin-bottom:24px;
}
.linha-tinta-cabecalho{
  display:flex;
  flex-wrap:wrap;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  margin-bottom:18px;
}
.linha-tinta h2{
  margin:0 0 6px;
  color:var(--verde);
  font-size:26px;
}
.linha-tinta-marca{
  display:inline-block;
  font-size:12px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.06em;
  color:var(--muted);
  margin-bottom:8px;
}
.linha-tinta-desc{
  color:var(--muted);
  line-height:1.55;
  max-width:640px;
  margin:0 0 10px;
}
.linha-tinta-specs{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  max-width:640px;
}
.spec-badge{
  display:inline-flex;
  align-items:center;
  background:#eefaf0;
  color:var(--verde-escuro);
  border:1px solid #d8f0dc;
  font-size:12px;
  font-weight:800;
  padding:5px 11px;
  border-radius:3px;
}
.linha-tinta-cta{
  display:inline-flex;
  align-items:center;
  gap:8px;
  background:#25d366;
  color:#fff;
  font-weight:900;
  padding:12px 18px;
  border-radius:3px;
  white-space:nowrap;
}
.linha-tinta-cta:hover{background:#1fb959}

.linha-tinta-corpo{
  display:grid;
  grid-template-columns:180px 1fr;
  gap:24px;
  align-items:start;
  margin-top:8px;
}
/* Todas as latas são exportadas na mesma tela (360x324, fundo transparente),
   então ocupam exatamente o mesmo espaço e aparecem com a mesma altura. */
.linha-tinta-corpo--sem-lata{
  grid-template-columns:1fr;
}
/* Grade das linhas tintométricas: cada item mostra o galão + nome + acabamento */
#paleta-tintometricas{
  grid-template-columns:repeat(auto-fill,minmax(140px,1fr));
  gap:18px;
}
.tinto-item{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  text-align:center;
}
.tinto-lata{display:block;width:100%;max-width:120px}
.tinto-lata img{width:100%;height:auto;display:block}
.lata-produto{
  display:block;
  position:sticky;
  top:110px;
}
.lata-produto img{
  width:100%;
  height:auto;
  display:block;
}

.paleta-cores{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(96px,1fr));
  gap:14px;
  margin-top:8px;
}
.cor-swatch{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  text-align:center;
}
.cor-amostra{
  width:100%;
  aspect-ratio:1;
  border-radius:var(--raio);
  border:1px solid rgba(0,0,0,.08);
  box-shadow:0 4px 10px rgba(0,0,0,.06);
}
.cor-nome{
  font-size:12px;
  font-weight:700;
  color:var(--texto);
  line-height:1.3;
}
.cor-codigo{
  font-size:11px;
  color:var(--muted);
}
.cor-amostra-incolor{
  background:repeating-linear-gradient(135deg,#f4f7f5,#f4f7f5 6px,#e4ece7 6px,#e4ece7 12px);
  border-style:dashed;
}
.paleta-unica{
  grid-template-columns:minmax(96px,140px);
}
.linha-tinta-lista{
  color:var(--muted);
  line-height:1.7;
  margin:0 0 10px;
  padding-left:18px;
}

.leque-badge{
  display:inline-flex;
  align-items:center;
  gap:14px;
  background:#f6fbff;
  border:1px solid var(--borda);
  border-radius:var(--raio);
  padding:10px 16px 10px 10px;
  margin:4px 0 10px;
  transition:.18s ease;
}
.leque-badge:hover{border-color:var(--verde-vivo);background:#eefaf0}
.leque-badge-icone{width:56px;height:48px;flex:0 0 auto}
.leque-badge-texto{
  font-size:13px;
  font-weight:700;
  color:var(--verde-escuro);
  line-height:1.35;
}
.leque-badge-texto strong{color:var(--verde);font-size:14px}
.linha-tinta-nota{
  margin-top:16px;
  font-size:13px;
  color:var(--muted);
  line-height:1.5;
  background:#f6fbff;
  border:1px solid var(--borda);
  border-radius:var(--raio);
  padding:12px 16px;
}

/* ---------------------------------------------------------------
   Grade de produtos — usada pelas categorias que listam itens em
   cards (ferramentas, elétrica...).
   --------------------------------------------------------------- */

.produto-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(160px,1fr));
  gap:16px;
  margin-top:8px;
}
.produto-card{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  text-align:center;
  text-decoration:none;
  color:inherit;
  transition:transform .18s ease;
}
.produto-card:hover{transform:translateY(-3px)}
.produto-card:hover .produto-foto{
  border-color:var(--verde-vivo);
  box-shadow:0 8px 18px rgba(0,0,0,.12);
}
.produto-foto{
  width:100%;
  aspect-ratio:1;
  border-radius:var(--raio);
  border:1px solid rgba(0,0,0,.08);
  box-shadow:0 4px 10px rgba(0,0,0,.06);
  object-fit:cover;
  background:#f4f7f5;
}
.produto-foto-placeholder{
  display:flex;
  align-items:center;
  justify-content:center;
  background:repeating-linear-gradient(135deg,#f4f7f5,#f4f7f5 6px,#e4ece7 6px,#e4ece7 12px);
  border-style:dashed;
}
.produto-foto-placeholder span{
  font-size:11px;
  font-weight:700;
  color:var(--muted);
  padding:0 8px;
}
/* Enquanto não há foto real de cada item, o card usa um ícone dentro do
   mesmo quadro das fotos — fica proposital, e não "foto faltando". Assim
   que houver a foto, basta preencher "imagem" no JS da categoria que o
   card passa a mostrar a foto no lugar do ícone. */
.produto-icone{
  display:flex;
  align-items:center;
  justify-content:center;
  background:#eef3ee;
  color:var(--verde);
  transition:color .18s ease;
}
.produto-icone svg{width:46%;height:46%}
.produto-card:hover .produto-icone{color:var(--verde-escuro)}
.produto-nome{
  font-size:13px;
  font-weight:700;
  color:var(--texto);
  line-height:1.3;
}
.produto-marcas{
  font-size:11px;
  font-weight:600;
  color:var(--verde-escuro);
  line-height:1.35;
}
/* Onde o card mostra fábrica e descrição, a fábrica fica em destaque
   (.produto-marcas) e o texto explicativo vem abaixo, mais discreto. */
.produto-descricao{
  font-size:11px;
  color:var(--muted);
  line-height:1.35;
}
.produto-tipo{
  display:inline-flex;
  align-items:center;
  background:#eefaf0;
  color:var(--verde-escuro);
  border:1px solid #d8f0dc;
  font-size:10px;
  font-weight:800;
  letter-spacing:.02em;
  padding:3px 10px;
  border-radius:3px;
}
/* O que a peça é e para que serve. Fica em cinza para não disputar com a
   linha das fábricas, que é o que o cliente confere primeiro no card. */
.produto-descricao{
  font-size:11px;
  color:var(--muted);
  line-height:1.4;
}
.produto-tamanhos{
  font-size:11px;
  color:var(--muted);
}
.produto-tamanhos + .produto-tamanhos{margin-top:-5px}
/* Dentro da caixa de medidas o espaçamento já vem do gap do flex. */
.galeria-medidas .produto-tamanhos + .produto-tamanhos{margin-top:0}
.produto-pedir{
  margin-top:auto;
  padding-top:2px;
  font-size:11px;
  font-weight:800;
  color:#1fa855;
}
.produto-card:hover .produto-pedir{color:#12833f;text-decoration:underline}

.produto-cta-foto{
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--verde-escuro);
  border-color:transparent;
}
.produto-cta-foto svg{width:38%;height:38%;color:var(--amarelo)}
.produto-card-cta .produto-marcas{color:var(--verde-escuro)}

/* ---------------------------------------------------------------
   Card com galeria — usado pelas categorias em que um mesmo produto
   tem vários modelos (elétrica, hidráulica...). As fotos ficam
   empilhadas no mesmo quadro e as bolinhas trocam qual está visível.
   --------------------------------------------------------------- */

/* Card com galeria: as fotos ficam empilhadas no mesmo quadro e as
   bolinhas trocam qual está visível. */

.galeria-midia{
  position:relative;
  width:100%;
  aspect-ratio:1;
}
.galeria-foto{
  display:block;
  width:100%;
  height:100%;
}
.galeria-midia .produto-foto{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  opacity:0;
  transition:opacity .25s ease;
}
.galeria-midia .produto-foto.ativa{opacity:1}

/* Último slide de uma galeria pode ser um recado, e não uma foto: usa o
   mesmo verde do card de "+ opções" para se ler como convite, não produto. */
.galeria-chamada{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:14px 16px 26px;
  text-align:center;
  background:var(--verde-escuro);
  border-color:transparent;
  color:#fff;
}
.galeria-chamada svg{width:30%;height:auto;color:var(--amarelo);flex:0 0 auto}
.galeria-chamada-texto{
  font-size:11px;
  font-weight:700;
  line-height:1.4;
}

.galeria-bolinhas{
  position:absolute;
  left:0;
  right:0;
  bottom:9px;
  display:flex;
  justify-content:center;
  gap:7px;
}
/* Com muitos modelos as bolinhas encostariam nas bordas da foto,
   então encolhem para sobrar respiro dos dois lados. */
.galeria-bolinhas-densa{gap:5px}
.galeria-bolinhas-densa .galeria-bolinha{width:7px;height:7px}

.galeria-bolinha{
  position:relative;
  width:9px;
  height:9px;
  padding:0;
  border-radius:50%;
  border:1px solid rgba(0,0,0,.22);
  background:rgba(255,255,255,.9);
  cursor:pointer;
  transition:.18s ease;
}
/* No dedo, 9px é um alvo pequeno demais — e errar a bolinha abre o WhatsApp,
   porque a foto atrás dela é um link. Esta área invisível estende o toque na
   vertical (faixa vazia da foto) e só até a metade do vão na horizontal, para
   uma bolinha não roubar o toque da vizinha. */
.galeria-bolinha::after{
  content:"";
  position:absolute;
  inset:-9px -3px;
}
.galeria-bolinha:hover{transform:scale(1.25)}
.galeria-bolinha.ativa{
  background:var(--verde);
  border-color:var(--verde);
}
.galeria-bolinha:focus-visible{
  outline:2px solid var(--verde);
  outline-offset:2px;
}

/* Seletor de montagem: embutir ou sobrepor. Cada opção troca a galeria
   inteira, com os seus três modelos. */
.montagem-troca{
  display:flex;
  width:100%;
  background:#eef4f0;
  border:1px solid var(--borda);
  border-radius:3px;
  padding:2px;
  gap:2px;
}
.montagem-opcao{
  flex:1;
  padding:5px 4px;
  border:0;
  border-radius:3px;
  background:transparent;
  color:var(--muted);
  font:inherit;
  font-size:11px;
  font-weight:800;
  cursor:pointer;
  transition:.18s ease;
}
/* Com três opções cada uma fica com um terço da largura do card, então
   o texto precisa encolher para não estourar. */
.montagem-troca-compacta .montagem-opcao{
  font-size:10px;
  padding-left:2px;
  padding-right:2px;
}
.montagem-opcao:hover{color:var(--verde-escuro)}
.montagem-opcao.ativa{
  background:var(--verde);
  color:#fff;
  box-shadow:0 2px 6px rgba(0,0,0,.12);
}
.montagem-opcao:focus-visible{
  outline:2px solid var(--verde);
  outline-offset:2px;
}

/* O selo do modelo muda de texto a cada bolinha e os rótulos mais longos
   quebram em duas linhas nos cards estreitos. A caixa reserva a altura de
   duas linhas para a grade não pular quando o modelo troca. */
.galeria-rotulo-caixa{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:32px;
}

.galeria-texto{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  text-decoration:none;
  color:inherit;
  /* Estica até o fim do card. Sem isto o "Pedir pelo WhatsApp" para logo
     abaixo do texto, e não no rodapé do card como nos cards sem galeria —
     os dois tipos convivem na mesma linha da grade. */
  flex:1;
}
/* As medidas ficam num bloco só porque trocam junto com a montagem.
   O gap menor reproduz o espaçamento que elas têm soltas no card. */
.galeria-medidas{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:3px;
}
.produto-card-galeria:hover .produto-pedir{color:#12833f;text-decoration:underline}
.produto-card-galeria:hover .produto-foto.ativa{
  border-color:var(--verde-vivo);
  box-shadow:0 8px 18px rgba(0,0,0,.12);
}

/* ---------------------------------------------------------------
   Bloco "como escolher" — dúvidas frequentes da categoria.
   --------------------------------------------------------------- */

.guia-escolha{
  background:#fff;
  border:1px solid var(--borda);
  border-radius:var(--raio);
  padding:28px;
  box-shadow:none;
  margin-bottom:24px;
}
.guia-escolha > h2{
  margin:0 0 18px;
  color:var(--verde);
  font-size:26px;
}
.guia-escolha-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:18px;
}
.guia-item{
  background:#f6fbff;
  border:1px solid var(--borda);
  border-radius:var(--raio);
  padding:16px 18px;
}
.guia-item h3{
  margin:0 0 6px;
  font-size:15px;
  color:var(--verde-escuro);
}
.guia-item p{
  margin:0;
  font-size:13px;
  line-height:1.55;
  color:var(--muted);
}
.guia-item strong{color:var(--texto)}
.guia-escolha-nota{
  margin:18px 0 0;
  font-size:13px;
  line-height:1.5;
  color:var(--muted);
}
.guia-escolha-nota a{color:var(--verde);font-weight:800}

@media (max-width:900px){
  .linha-tinta-corpo{grid-template-columns:1fr;gap:16px}
  .lata-produto{position:static;max-width:150px;margin:0 auto}
}

@media (max-width:600px){
  .paleta-cores{grid-template-columns:repeat(auto-fill,minmax(76px,1fr))}
  .linha-tinta{padding:20px}
  .produto-grid{grid-template-columns:repeat(auto-fill,minmax(110px,1fr))}
  .guia-escolha{padding:20px}
}