/* Boton flotante de musica para la portada */
.musica-btn {
    position: fixed;
    bottom: 22px;
    right: 22px;
    z-index: 9998;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 6px 22px rgba(0, 0, 0, 0.28);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
    -webkit-tap-highlight-color: transparent;
}
.musica-btn:hover { transform: scale(1.08); }
.musica-btn:active { transform: scale(0.94); }
.musica-btn svg { width: 24px; height: 24px; fill: #6b4a3a; transition: fill 0.25s ease; }

/* Estado: reproduciendo -> nota con pulsos */
.musica-btn.sonando {
    background: rgba(255, 255, 255, 0.97);
    box-shadow: 0 6px 26px rgba(0, 0, 0, 0.34), 0 0 0 4px rgba(107, 74, 58, 0.14);
}
.musica-btn.sonando svg { fill: #6b4a3a; }
.musica-btn:not(.sonando) svg { fill: #9a8c84; }

@media (max-width: 768px) {
    .musica-btn {
        width: 50px; height: 50px;
        bottom: 16px; right: 16px;
    }
    .musica-btn svg { width: 21px; height: 21px; }
}