/* AFA Tecnologia — hotfix visual v3.3
   Corrige os passos/ícones das secções "Como funciona" em todas as páginas clássicas.
   O afa-premium.css aplicava fundo branco global a .step, tornando o número branco invisível.
*/

/* Cartão de cada etapa: mantém o conteúdo limpo sobre o navy. */
.section-bg-dark [class^="processo-"][class*="-item"]{
  position:relative!important;
  padding:28px 20px!important;
  text-align:center!important;
}

/* Número da etapa — volta a ser claramente visível. */
.section-bg-dark [class^="processo-"][class*="-item"] .step{
  width:64px!important;
  height:64px!important;
  min-width:64px!important;
  min-height:64px!important;
  margin:0 auto 16px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  border-radius:50%!important;
  border:1px solid rgba(91,221,255,.34)!important;
  background:linear-gradient(135deg,#0787d8 0%,#10c7e8 100%)!important;
  color:#ffffff!important;
  font-size:1.35rem!important;
  font-weight:900!important;
  line-height:1!important;
  box-shadow:0 12px 32px rgba(7,135,216,.28)!important;
}

/* Ícone da etapa — deixa de ocupar uma barra inteira e passa a ser um tile compacto. */
.section-bg-dark [class^="processo-"][class*="-item"] .process-icon{
  width:54px!important;
  height:54px!important;
  min-width:54px!important;
  margin:0 auto 18px!important;
  padding:0!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  border-radius:15px!important;
  background:rgba(16,199,232,.09)!important;
  border:1px solid rgba(16,199,232,.22)!important;
  color:#22ccef!important;
  font-size:1.45rem!important;
  line-height:1!important;
  box-shadow:none!important;
}
.section-bg-dark [class^="processo-"][class*="-item"] .process-icon i{
  color:#22ccef!important;
  background:transparent!important;
}
.section-bg-dark [class^="processo-"][class*="-item"] h4{
  color:#f7fbff!important;
  margin-top:0!important;
}
.section-bg-dark [class^="processo-"][class*="-item"] p{
  color:#c2d3e3!important;
}

@media(max-width:680px){
  .section-bg-dark [class^="processo-"][class*="-item"]{padding:22px 16px!important}
  .section-bg-dark [class^="processo-"][class*="-item"] .step{width:58px!important;height:58px!important;min-width:58px!important;min-height:58px!important}
}