.music-player{
    position:fixed;

    right:18px;
    bottom:18px;

    z-index:9999;
}

.music-button{

    display:flex;
    align-items:center;
    gap:12px;

    padding:7px 16px 7px 7px;

    border:1px solid rgba(200,204,211,.35);
    border-radius:999px;

    background:rgba(248,245,239,.74);

    box-shadow:
        0 8px 22px rgba(71,19,31,.10);

    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);

    cursor:pointer;

    opacity:.82;

    transition:
        opacity .3s ease,
        transform .3s ease,
        box-shadow .3s ease,
        background .3s ease;

}

.music-button:hover,
.music-button:focus-visible,
.music-button.is-playing{

    opacity:1;

    background:rgba(248,245,239,.92);

    box-shadow:
        0 12px 28px rgba(71,19,31,.13);

}

.music-button:hover{

    transform:translateY(-2px);

}

/*=========================================================
    DISCO
=========================================================*/

.music-disc{

    position:relative;

    width:40px;
    height:40px;

    flex-shrink:0;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:50%;

    border:1px solid rgba(106,36,52,.18);

    background:

        repeating-radial-gradient(

            circle at center,

            rgba(106,36,52,.10) 0 1px,

            transparent 1px 3px

        ),

        linear-gradient(

            145deg,

            #fffdf9 0%,

            #f8f5ef 60%,

            #ece5da 100%

        );

    box-shadow:

        inset 0 1px 2px rgba(255,255,255,.95),

        inset 0 -2px 5px rgba(81,69,63,.08),

        0 3px 8px rgba(71,19,31,.10);

}

/* Centro del disco */

.music-disc::after{

    content:"";

    position:absolute;

    width:14px;
    height:14px;

    border-radius:50%;

    background:rgba(106,36,52,.10);

    border:1px solid rgba(106,36,52,.18);

}

/* Nota musical */

.music-note{

    position:relative;

    z-index:2;

    color:var(--vino);

    font-size:18px;

    line-height:1;

    transform:translateY(-1px);

    user-select:none;

}

/* Solo gira mientras reproduce */

.music-button.is-playing .music-disc{

    animation:musicDiscSpin 8s linear infinite;

}

@keyframes musicDiscSpin{

    to{

        transform:rotate(360deg);

    }

}

.music-text{

    color:var(--texto);

    font-family:"Cormorant Garamond",serif;

    font-size:17px;
    font-weight:500;

    line-height:1;

    white-space:nowrap;

}

@media (max-width:700px){

    .music-player{

        right:12px;
        bottom:12px;

    }

    .music-button{

        gap:10px;

        padding:6px 12px 6px 6px;

        opacity:.76;

    }

    .music-disc{

        width:36px;
        height:36px;

    }

    .music-disc::after{

        width:12px;
        height:12px;

    }

    .music-note{

        font-size:16px;

    }

    .music-text{

        font-size:15px;

    }

}