/*
 * 1. Estilos base para el contenedor (para centrar y espaciar)
 */
.social-buttons {
    margin-top: 20px;
    display: flex; /* Habilita Flexbox */
    justify-content: center; /* Centra los botones horizontalmente */
    gap: 20px; /* **Espaciado** entre los iconos (ajústalo a tu gusto) */
    height: 41px;
}

/*
 * 2. Estilos base para cada botón social (el elemento <a>)
 */
.social-button {
    /* Define el tamaño del área donde se verá la imagen */
    display: block; 
    width: 48px; 
    height: 48px;
    z-index:1;
    
    /* Propiedades para la imagen de fondo */
    background-size: contain; /* Asegura que la imagen de 96x96 se ajuste al área de 48x48 */
    background-repeat: no-repeat; /* Evita que la imagen se repita */
    background-position: center; /* Centra la imagen dentro del botón */
    
    /* Opcional: Transición suave para efectos hover */
    transition: opacity 0.3s ease;
}

/* * 3. Estilos específicos para cada red social, usando la ruta de la imagen
 */

.social-button--facebook {
    /* **Ruta de la imagen de Facebook** */
    background-image: url('../img/social/icons8-facebook-96.png');
}

.social-button--instagram {
    /* **Ruta de la imagen de Instagram** */
    background-image: url('../img/social/icons8-instagram-96.png');
}

/* Opcional: Efecto al pasar el mouse */
.social-button:hover {
    opacity: 0.8; /* Hace el icono un poco transparente */
}