:root{
    --bar-bg: #2D2E81;      /* verde */
    --bar-bg-2: #1C79BE;
    --item-size: 52px;
    --radius: 10px;
}

/* Contenedor del menú */
.social-menu{
    position: fixed;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 2px;
    z-index: 9999;
    background: var(--bar-bg);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: 0 10px 25px rgba(0,0,0,.18);
    left: auto !important;
}

/* Botones */
.social-menu a{
    width: var(--item-size);
    height: var(--item-size);
    display: grid;
    place-items: center;
    color: #fff;
    text-decoration: none;
    background: var(--bar-bg);
    transition: transform .15s ease, background .15s ease;
    border-bottom: 1px solid rgba(255,255,255,.15);  
}
.social-menu a:last-child{ border-bottom: 0; }

.social-menu a:hover{
    background: var(--bar-bg-2);
    transform: translateX(-1px);
}

.social-menu i{ font-size: 20px; }

/* Texto accesible (solo lectores de pantalla) */
.sr-only{
    position:absolute; width:1px; height:1px; padding:0; margin:-1px;
    overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* ===== Responsive: en móvil pasa a barra inferior ===== */
@media (max-width: 768px){
    .social-menu{
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    flex-direction: column;
    left: auto !important;
    }
    .social-menu a:hover{
    transform: translateY(-1px);
    }
}