*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{

    background:#ffffff;

    font-family:Arial, Helvetica, sans-serif;

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

    min-height:100vh;

    overflow:hidden;
}

.player{

    width:100%;
    max-width:960px;
    height:160px;

    margin:0 auto;

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

    gap:30px;

    background:#ffffff;

    border-top:4px solid #d7ae78;

    padding:10px 20px;
}

/* ESCUCHÁ */

.listen img{

    height:70px;
    width:auto;
}

/* LOGO */

.logo img{

    height:90px;
    width:auto;
}

/* PLAY / PAUSA */

.play-btn{

    width:60px;
    height:60px;

    border:none;
    background:transparent;

    cursor:pointer;

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

.play-btn img{

    width:60px;
    height:60px;

    object-fit:contain;
}

/* EN VIVO */

.live{

    display:flex;
    align-items:center;

    gap:8px;

    color:#d7ae78;

    font-size:14px;
    font-weight:bold;

    letter-spacing:1px;
}

.live-dot{

    width:12px;
    height:12px;

    border-radius:50%;

    background:#d7ae78;
}

.live.playing .live-dot{

    animation:pulse 1s infinite;
}

/* VISUALIZADOR */

.visualizer{

    display:flex;
    align-items:flex-end;

    gap:4px;

    height:25px;
}

.bar{

    width:4px;
    height:8px;

    background:#d7ae78;

    border-radius:2px;
}

.playing .bar:nth-child(1){ animation:eq .8s infinite; }
.playing .bar:nth-child(2){ animation:eq 1s infinite; }
.playing .bar:nth-child(3){ animation:eq .6s infinite; }
.playing .bar:nth-child(4){ animation:eq .9s infinite; }
.playing .bar:nth-child(5){ animation:eq .7s infinite; }
.playing .bar:nth-child(6){ animation:eq .85s infinite; }
.playing .bar:nth-child(7){ animation:eq .65s infinite; }
.playing .bar:nth-child(8){ animation:eq .95s infinite; }

@keyframes eq{

    0%{
        height:8px;
    }

    50%{
        height:25px;
    }

    100%{
        height:8px;
    }
}

@keyframes pulse{

    0%{
        opacity:1;
        transform:scale(1);
    }

    50%{
        opacity:.3;
        transform:scale(1.5);
    }

    100%{
        opacity:1;
        transform:scale(1);
    }
}

audio{
    display:none;
}