/* ===== ESTILOS ESPECÍFICOS PARA LA PÁGINA DE CONTACTO ===== */

.contact-us {
  padding-top: var(--spacing-xxl);
  padding-bottom: var(--spacing-xxl);
  background-color: var(--bg-light);
}

.social-links-contact .social-link-item {
  padding: var(--spacing-md) var(--spacing-lg);
  border-radius: var(--border-radius-lg);
  transition: var(--transition-normal);
  gap: var(--spacing-sm);
  text-decoration: none;
  color: var(--text-primary);
}

.social-links-contact .social-link-item:hover {
  background-color: var(--primary-color);
  color: var(--text-light);
  border-color: var(--primary-color);
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}

.social-links-contact .social-icon-lg {
  font-size: 2.5rem; /* Icono más grande */
  margin-bottom: var(--spacing-sm); /* Espacio entre el icono y el texto */
  transition: var(--transition-normal);
}

.social-links-contact .social-link-item:hover .social-icon-lg {
  color: var(--text-light); /* Color del icono al hacer hover */
}

.contact-item-link {
  color: var(--text-primary) !important;
  transition: var(--transition-normal);
}

.contact-item-link:hover {
  color: var(--primary-color) !important;
}

.contact-item-link i {
  font-size: 1.25rem;
  color: var(--primary-color); /* Color para los iconos de contacto */
}