@charset "utf-8";

#quemsomos { padding: 21px 0;}
#resultados { padding: 21px 0;}
#planos { padding: 21px 0;}
#beneficios { padding: 51px 0;}
#contato { padding: 31px 0;}

#resultados .item { width: 16.66%;}
#resultados .tab .numero { font-size: 1.5em;}
#resultados .tab .cidade { margin: 5px 0;}

#planos .listar { flex-wrap: wrap; justify-content: center;}
#planos .listar .item { width: 33%; padding: 5px;}
#planos .listar .tab h2 { padding: 10px 10px 8px; font-size: 1.1em;}
#planos .listar .tab h3 { font-size: 1.2em;}
#planos .listar .tab h4 { font-size: 0.9em;}
#planos .listar .tab h4 i { text-decoration: line-through; font-style: normal;}
#planos .listar .tab h5 { font-size: 1em;}
#planos .listar .tab h5 li { padding: 2px 0;}

#beneficios .nomesi h2 { font-size: 1.5em;}
#beneficios .nomesi h3 { font-size: 2em;}
#beneficios .pontos { margin: 21px 0;}
#beneficios .tab { padding: 20px 40px 20px 15px; margin: 10px;}
#beneficios .tab h2 { font-size: 1.5em; line-height: 1;}
#beneficios .tab h3 { font-size: 1.1em; opacity: 0.7;}
#beneficios .ok { background-image: url('../../imagens/site/main-beneficios-ok.png?v1'); background-position: 50%; background-repeat: no-repeat;}
#beneficios .cadastrar { padding: 15px 20px; font-size: 1.3em;}

#contato .frase { margin: 0 0 31px; font-size: 1.1em;}
#contato .detalhes { float: right; width: 50%; padding: 0 5%;}
#contato .form { float: left; width: 50%; padding: 20px;}
#contato .tab { margin: 8px 0;}
#contato .nomesi { font-size: 1.1em;}
#contato .sociais { width: 45px; height: 45px; background: rgb(58 72 65) 50% no-repeat;}
#contato .sociais.whatsapp { background-image: url('../../imagens/site/footer-sociais-whatsapp.png?v1');}
#contato .sociais.instagram { background-image: url('../../imagens/site/footer-sociais-instagram.png?v1');}
#contato .sociais.tiktok { background-image: url('../../imagens/site/footer-sociais-tiktok.png?v1');}
#contato .sociais.facebook { background-image: url('../../imagens/site/footer-sociais-facebook.png?v1');}
#contato .sociais:hover { background-color: rgb(5 5 5);}

#empresas .coluna1 { padding: 20px;}
#empresas .coluna2 { padding: 20px;}
#empresas .submenu .categorias { border-top: 1px solid rgb(90 90 90 / 20%);}
#empresas .submenu .limpar { border-top: 1px solid rgb(90 90 90 / 20%);}
#empresas .submenu .um:hover { text-decoration: underline;}
#empresas .submenu .um.ativo { font-weight: bold; color: rgb(230 171 0);}
#empresas .mapa { padding: 0 5px;}
#empresas .mapa h1 { float: left; font-size: 1em;}
#empresas .mapa h2 { float: left; font-size: 1em;}
#empresas .mapa span { float: left; padding: 0 3px;}
#empresas .listar { flex-wrap: wrap;}
#empresas .listar .item { width: 25%; padding: 5px;}
#empresas .listar .logo .img { height: 120px;}
#empresas .listar .detalhes h2 { font-size: 1.1em;}
#empresas .listar .detalhes h3 { font-size: 1em;}
#empresas .listar .detalhes button { font-size: 1em;}

@media only screen and (max-width: 1200px){
  #resultados .item { width: 25%;}
}
@media only screen and (max-width: 1000px){
  #planos .listar .item { width: 50%;}

  #empresas .coluna1 { padding: 11px 3%;}
  #empresas .coluna2 { padding: 11px 3%;}
}
@media only screen and (max-width: 800px){
  #quemsomos { padding: 11px 0;}
  #resultados { padding: 11px 0;}
  #planos { padding: 11px 0;}
  #beneficios { padding: 11px 0;}
  #contato { padding: 11px 0;}

  #beneficios .nomesi h2 { font-size: 1.1em;}
  #beneficios .nomesi h3 { font-size: 1.5em;}

  #empresas .mapa { padding: 0 2px;}
  #empresas .listar .item { width: 50%; padding: 2px;}
}
@media only screen and (max-width: 700px){
  #resultados .item { width: 33.33%;}

  #contato .detalhes { width: 100%; padding: 0;}
  #contato .form { width: 100%; padding: 20px; margin: 11px 0 0;}
}
@media only screen and (max-width: 500px){
  #planos .listar .item { width: 100%; padding: 5px 0;}
  #resultados .item { width: 50%;}
}