.social-container {
  display: flex;
  gap: 20px; /* Esto crea el espacio uniforme entre iconos */
  justify-content: center; /* Centra los iconos (puedes cambiarlo a flex-start para izquierda) */
  align-items: center;
}

.social-container a {
  font-size: 24px; /* Tamaño del icono */
  color: #333; /* Color inicial */
  transition: transform 0.3s ease, color 0.3s ease;
  text-decoration: none;
}

/* Efecto al pasar el ratón (Hover) */
.social-container a:hover {
  transform: scale(1.2); /* Se agranda un poco */
  color: #007bff; /* Cambia al color de tu marca */
}
.social-container a:hover .fa-facebook-f { color: #1877F2; }
.social-container a:hover .fa-instagram { color: #E4405F; }
.social-container a:hover .fa-x-twitter { color: #000000; }
.social-container a:hover .fa-youtube { color: #FF0000; }
.social-container a:hover .fa-linkedin-in { color: #0A66C2; 

/* Estilo específico para el bloque legal en el footer */
.legal-links a {
    text-decoration: none !important; /* Elimina la raya de Cassiopeia */
    border-bottom: none !important;   /* Elimina bordes inferiores */
    color: inherit;                   /* Toma el color del texto del footer */
    padding: 0 5px;
    display: inline-block;
}

.legal-links a:hover {
    text-decoration: underline !important; /* Solo subraya al pasar el mouse */
    color: #ffffff !important;             /* Cambia a blanco puro al hover */
}