/* --- BARRA LATERAL DE REDES SOCIALES --- */

/* Contenedor Principal */
/* Nota: En el HTML refactorizado usamos la clase .red-social-sidebar */
.red-social-sidebar {
    position: fixed;
    top: 50%; /* Centrado verticalmente */
    transform: translateY(-50%); /* Ajuste fino del centro */
    left: 0;
    z-index: 900; /* Debajo del menú móvil (1000) pero sobre el contenido */
    display: flex;
    flex-direction: column;
}

/* --- ESTILOS COMPARTIDOS (DRY - Don't Repeat Yourself) --- */
/* Aplicamos esto a TODOS los enlaces dentro de la barra */
.red-social-sidebar div a {
    display: block;
    width: 55px;
    height: 55px;
    line-height: 55px; /* Centra el icono verticalmente */
    text-align: center; /* Centra el icono horizontalmente */
    color: #fff;
    text-decoration: none;
    font-size: 24px; /* Tamaño del icono */
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* Efecto rebote suave */
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
}

/* Efecto Hover Unificado */
.red-social-sidebar div a:hover {
    width: 90px; /* Se estira hacia la derecha */
    background-color: #000; /* Color al pasar el mouse (opcional) */
    padding-left: 20px; /* Desplaza el icono un poco */
}

/* --- COLORES ESPECÍFICOS DE MARCA --- */

#youtube a {
    background: #FF0000; /* Rojo oficial de YouTube */
}
/* Mantenemos el hover negro o podemos dejar el color original */
#youtube a:hover { background: #cc0000; }

#whatsapp a {
    background: #25D366; /* Verde oficial WhatsApp */
}
#whatsapp a:hover { background: #128C7E; }

#instagram a {
    /* Degradado oficial de Instagram */
    background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
}
#instagram a:hover { background: #C13584; }

#linkedin a {
    background: #0077b5; /* Azul oficial LinkedIn */
}
#linkedin a:hover { background: #005582; }

#correo a {
    background: #EA4335; /* Rojo Gmail */
}
#correo a:hover { background: #c0392b; }


/* --- RESPONSIVE (MÓVILES) --- */
/* En celulares, esta barra tapa el contenido y molesta. Es mejor ocultarla 
   o moverla al pie de página (como ya lo tienes en el footer). */
@media (max-width: 768px) {
    .red-social-sidebar {
        display: none;
    }
}