/* ============================================================
   FRENTE B — Renders 3D "como funciona" (assets do Canva)
   Figura do corte técnico exibida acima dos passos do processo.
   Acento: lima/verde p/ esgoto · azul p/ água (.agua)
   ============================================================ */
.howto-fig{
  margin:0 auto 38px;
  max-width:840px;
  border-radius:20px;
  overflow:hidden;
  background:#fff;
  border:1px solid rgba(8,42,30,.10);
  box-shadow:0 26px 58px -28px rgba(8,42,30,.42);
}
.howto-fig img{display:block;width:100%;height:auto}
.howto-fig figcaption{
  padding:13px 22px;
  font:500 13.5px/1.55 Poppins,system-ui,sans-serif;
  color:#436b57;
  text-align:center;
  background:#fbfdfb;
  border-top:1px solid rgba(8,42,30,.08);
}
.howto-fig figcaption b{font-weight:700}
.howto-fig.agua figcaption{color:#0A3D66}

@media(max-width:560px){
  .howto-fig{border-radius:14px;margin-bottom:28px}
  .howto-fig figcaption{font-size:12.5px;padding:11px 15px}
}