/* Rodape do site.
 *
 * Antes eram dois quadrados escuros com icone branco, soltos no meio, e duas
 * linhas cinzas. Os quadrados pareciam caixas vazias porque a borda era
 * rgba(255,255,255,.18) sobre um fundo quase da mesma cor.
 *
 * Agora ha hierarquia: marca, uma linha dizendo onde a empresa fica e ate
 * onde atende, as redes em circulo, um filete e a linha legal com CNPJ,
 * politica e termos. Os dois documentos legais nao tinham link em lugar
 * nenhum do site.
 *
 * Carrega depois de modern.css, que estiliza .redes e footer com !important
 * em quase toda regra. Sem !important aqui, nada disto vale.
 */
footer { padding: 54px 0 40px !important; background: #0d0c11 !important; border-top: 1px solid rgba(255, 255, 255, .07) !important; }

.rodape { display: flex; flex-direction: column; align-items: center; text-align: center; }

.rodape-marca { display: block; margin-bottom: 18px; opacity: .92; transition: opacity .25s ease; }
.rodape-marca:hover { opacity: 1; }
.rodape-marca img { display: block; width: 132px; height: auto; }

.rodape-frase { max-width: 46ch; margin: 0 0 26px; color: #8b8c96; font-size: 13.5px; line-height: 1.7; }

footer .redes { justify-content: center !important; margin: 0 0 30px !important; gap: 14px !important; }
footer .redes a .centralizador { width: 46px !important; height: 46px !important; border-radius: 50% !important; border: 1px solid rgba(255, 255, 255, .13) !important; background: rgba(255, 255, 255, .05) !important; }
footer .redes a:hover .centralizador { background: #a42648 !important; border-color: #a42648 !important; transform: translateY(-2px); }
footer .redes a .centralizador .icon { max-width: 19px !important; }

.rodape-filete { width: 100%; max-width: 760px; height: 1px; margin: 0 0 24px; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .12), transparent); }

.rodape-legal { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 22px; }
.rodape-legal p { margin: 0 !important; color: #6e6f78 !important; font-size: 12.5px !important; letter-spacing: .02em; }
.rodape-legal nav { display: flex; gap: 22px; }
.rodape-legal nav a { color: #8b8c96 !important; font-size: 12.5px !important; text-decoration: none; transition: color .25s ease; }
.rodape-legal nav a:hover { color: #ffd9e3 !important; }

@media (max-width: 700px) {
  footer { padding: 42px 0 34px !important; }
  .rodape-frase { margin-bottom: 22px; font-size: 13px; }
  .rodape-legal { flex-direction: column; gap: 12px; }
}