/* ============================================================
   Página de Contato — estilos específicos.
   Tudo o que é genérico (header, footer, seção, container,
   nav móvel, partículas etc.) já vem de base.css.
   ============================================================ */

/* Garante que o rodapé encoste na base da tela quando o conteúdo é curto. */
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

main {
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* --- Seção Contato --- */
#contato {
  background-color: var(--cor-preto-principal);
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Grid para os cards de contato. */
.contact-grid {
  display: flex;
  justify-content: center;
  gap: 40px;
  text-align: center;
}

/* Estilo de cada card de contato. */
.contact-card {
  background: linear-gradient(var(--cor-preto-principal), #151515);
  padding: 40px;
  border-radius: 15px;
  transition: all var(--transition-fast);
  border: 5px solid var(--cor-borda-sutil);
  max-width: 500px;
  width: 100%;
}

/* Efeito de elevação no card no hover. */
.contact-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 15px 40px rgba(21, 21, 21, 0.5);
  border-color: var(--cor-laranja-destaque);
}

/* Título pequeno do card (ex.: "Contato do Capitão da Equipe"). */
.contact-card h4 {
  font-size: 0.9rem;
  letter-spacing: 1px;
  color: var(--cor-laranja-destaque);
  margin-bottom: 5px;
  font-weight: 600;
}

/* Nome em destaque dentro do card. */
.contact-card p {
  font-size: 2rem;
  font-weight: 700;
  color: var(--cor-branco-texto);
  margin-top: 0;
  margin-bottom: 25px;
  line-height: 1.1;
}

/* Links de contato (telefone e e-mail). */
.contact-link {
  color: var(--cor-laranja-destaque);
  font-family: var(--fonte-titulo);
  font-weight: 500;
  transition: all var(--transition-fast);
}

.contact-link i {
  color: var(--cor-laranja-destaque);
  margin-right: 8px;
}

.contact-link:hover {
  color: var(--cor-laranja-destaque);
  text-shadow: 0 0 10px rgba(208, 102, 61, 0.8);
}