/* Só o que é exclusivo da hidráulica: a tabela de bitolas e a chamada do
   catálogo. A grade de produtos, o ícone que substitui a foto ausente
   (.produto-icone) e o bloco "dúvidas comuns" ficam em ../categorias.css,
   compartilhados com as outras categorias. */

/* Tabela de bitolas — referência de onde cada diâmetro costuma entrar.
   Usa a mesma caixa branca do bloco de dúvidas (.guia-escolha). */
.bitolas-intro{
  margin:-8px 0 18px;
  font-size:13px;
  line-height:1.55;
  color:var(--muted);
  max-width:720px;
}
.bitolas-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:18px;
}
.bitolas-bloco{
  background:#f6fbff;
  border:1px solid var(--borda);
  border-radius:var(--raio);
  padding:16px 18px;
}
.bitolas-bloco h3{
  margin:0 0 12px;
  font-size:15px;
  color:var(--verde-escuro);
}

/* Em telas estreitas a segunda coluna é texto corrido e não cabe encolhendo
   mais: a tabela rola dentro do próprio bloco em vez de esticar a página. */
.tabela-rolagem{overflow-x:auto}

.tabela-bitolas{
  width:100%;
  border-collapse:collapse;
  font-size:13px;
  line-height:1.45;
}
.tabela-bitolas th,
.tabela-bitolas td{
  text-align:left;
  padding:8px 10px;
  border-bottom:1px solid var(--borda);
  vertical-align:top;
}
.tabela-bitolas tbody tr:last-child th,
.tabela-bitolas tbody tr:last-child td{border-bottom:0}
.tabela-bitolas thead th{
  font-size:11px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.06em;
  color:var(--muted);
  border-bottom-color:#c9dbe8;
}
/* Só a coluna da bitola não pode quebrar — "20mm" partido no meio não se lê.
   A segunda coluna é texto corrido e quebra à vontade, que é o que faz a
   tabela caber no celular sem rolagem. */
.tabela-bitolas thead th:first-child{white-space:nowrap}
.tabela-bitolas tbody th{
  font-weight:800;
  color:var(--verde-escuro);
  white-space:nowrap;
}
/* A equivalência em polegadas é informação secundária: fica na mesma
   célula da bitola, mas sem competir com ela. */
.tabela-bitolas tbody th span{
  display:block;
  font-size:11px;
  font-weight:600;
  color:var(--muted);
}
.tabela-bitolas td{color:var(--muted)}

/* Chamada do catálogo de Incêndio, no fim da página */
.catalogo-callout{margin-top:4px}
.catalogo-callout .visualizer-callout-texto p{max-width:620px}