footer {
    height: 10vh;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: "figtree", sans-serif;
    padding: 3.478vh 8vw;
    background: #000;
    flex-wrap: wrap; 
}

.logo-footer {
  height: 6vh;
}


#footer_link_content {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}


.footer-list {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 50px;
  list-style: none;
  padding: 0;
  margin: 0;
}

/* ícones */
.footer_link i {
  color: #fff;
  font-size: 4.3vh;
  transition: color 0.3s;
}

.footer_link:hover i {
  color: #ae752d; /* dourado do logo */
}

/* Coloque isso no final do seu arquivo CSS */

@media (max-width: 768px) {
  
  footer {
    /* 1. Mudar layout para coluna (logo em cima, links embaixo) */
    flex-direction: column;

    /* 2. Deixar a altura ser automática para caber tudo */
    height: auto;

    /* 3. Centralizar os itens que agora estão empilhados */
    justify-content: center; 
    
    /* 4. Adicionar um espaçamento vertical entre o logo e os links */
    gap: 20px;

    /* 5. Usar um padding mais estável */
    padding: 25px 0;
  }

  .logo-footer {
    /* 6. Definir uma altura fixa e razoável para o logo */
    height: 40px; 
    /* 6vh era muito instável */
  }

  #footer_link_content {
    /* 7. Garantir que o container dos links esteja centrado */
    justify-content: center;
    width: 100%; /* Ocupa a largura para centralizar a lista */
  }

  .footer-list {
    /* 8. Reduzir o espaço entre os ícones */
    gap: 35px;
  }

  .footer_link i {
    /* 9. A MUDANÇA MAIS IMPORTANTE: */
    /* Trocar 'vh' por 'rem' para um tamanho de ícone legível */
    font-size: 2rem;  /* (Aprox. 32px, ajuste se preferir) */
  }
}
/* --- CORREÇÃO DO RODAPÉ FLUTUANTE --- */
/* Adicione isso no final do seu footer.css */
html {
  height: 100%;
}

body {
  min-height: 100vh; /* Força o body a ter 100% da altura da tela */
  display: flex;
  flex-direction: column;
}

main {
  flex-grow: 1; /* Faz o <main> "crescer" e empurrar o footer para baixo */
}