body{
margin:0;
font-family:'Cormorant Garamond', serif;
color:white;
background:
radial-gradient(circle at top, rgba(20,78,102,0.96) 0%, rgba(7,26,40,0.97) 42%, rgba(2,10,18,1) 100%);
text-align:center;
overflow-x:hidden;
min-height:100vh;
}

canvas{
position:fixed;
top:0;
left:0;
z-index:-1;
}

.container{
max-width:760px;
margin:auto;
padding:20px 16px 36px;
}

/* portada */

.cover{
width:220px;
border-radius:12px;
box-shadow:0 0 40px rgba(120,180,255,0.22);
animation:float 6s ease-in-out infinite;
}

@keyframes float{
0%{transform:translateY(0px)}
50%{transform:translateY(-10px)}
100%{transform:translateY(0px)}
}

/* titulo */

h1{
font-weight:400;
font-size:56px;
letter-spacing:1px;
margin-top:18px;
margin-bottom:4px;
}

/* artista */

.artist{
font-family:'Inter', sans-serif;
font-size:13px;
font-weight:300;
letter-spacing:5px;
opacity:0.72;
margin-bottom:18px;
}

/* botones spotify e instagram */

.links{
margin:20px 0 18px 0;
display:flex;
justify-content:center;
align-items:center;
gap:10px;
flex-wrap:wrap;
}

.links a{
display:inline-flex;
align-items:center;
justify-content:center;
margin:0;
padding:12px 18px;
border:1px solid rgba(255,255,255,0.7);
border-radius:30px;
text-decoration:none;
color:white;
font-family:'Inter', sans-serif;
font-size:13px;
letter-spacing:0.8px;
transition:0.3s;
background:rgba(255,255,255,0.04);
white-space:nowrap;
min-width:140px;
box-sizing:border-box;
}

.links a:hover{
background:white;
color:black;
}

/* reproductor */

#player{
margin:22px auto 26px auto;
max-width:420px;
position:sticky;
top:20px;
z-index:10;
padding:12px;
border-radius:20px;
background:rgba(120,180,200,0.08);
backdrop-filter:blur(10px);
box-shadow:
0 0 20px rgba(80,150,180,0.18),
inset 0 0 12px rgba(120,200,220,0.08);
}

.player-buttons{
display:flex;
justify-content:center;
gap:10px;
margin-bottom:10px;
}

.player-buttons button{
border:none;
background:rgba(80,190,220,0.18);
color:white;
border:1px solid rgba(120,220,255,0.45);
box-shadow:0 0 18px rgba(80,190,220,0.18);
border-radius:999px;
min-width:42px;
height:42px;
font-size:18px;
cursor:pointer;
transition:0.25s ease;
font-family:'Inter', sans-serif;
}

.player-buttons button:hover{
background:rgba(80,190,220,0.32);
border-color:rgba(160,240,255,0.8);
box-shadow:0 0 24px rgba(80,190,220,0.35);
transform:scale(1.06);
}

.now-playing{
font-family:'Inter', sans-serif;
font-size:13px;
letter-spacing:0.3px;
color:rgba(210,245,245,0.92);
margin-bottom:10px;
text-shadow:0 0 10px rgba(80,220,220,0.16);
}

audio{
width:100%;
}

/* separador bonus */

.bonus-separator{
display:flex;
align-items:center;
gap:14px;
margin:34px 0 18px 0;
opacity:0.88;
}

.bonus-line{
flex:1;
height:1px;
background:linear-gradient(
90deg,
rgba(255,255,255,0.05) 0%,
rgba(110,230,230,0.45) 50%,
rgba(255,255,255,0.05) 100%
);
box-shadow:0 0 10px rgba(90,220,220,0.18);
}

.bonus-text{
font-family:'Inter', sans-serif;
letter-spacing:4px;
font-size:12px;
color:rgba(200,245,245,0.88);
text-shadow:0 0 10px rgba(80,220,220,0.18);
white-space:nowrap;
}

/* lista canciones */

.track{
display:flex;
justify-content:space-between;
align-items:center;
gap:16px;
padding:16px 6px;
border-bottom:1px solid rgba(255,255,255,0.12);
background:transparent;
transition:0.25s ease;
}

.track:hover{
background:rgba(255,255,255,0.03);
}

.active-track{
background:rgba(70,180,210,0.12);
box-shadow:0 0 22px rgba(80,210,220,0.12);
border-bottom:1px solid rgba(140,235,240,0.32);
border-radius:14px;
}

.active-track .track-title{
color:rgba(220,255,255,0.98) !important;
text-shadow:0 0 10px rgba(80,220,220,0.18);
}

.active-track .track-link{
background:rgba(80,190,220,0.26);
border-color:rgba(160,240,255,0.75);
box-shadow:0 0 22px rgba(80,190,220,0.20);
}

.active-track .track-dot{
opacity:1;
transform:scale(1);
box-shadow:0 0 12px rgba(95,235,228,0.65);
}

/* titulo cancion */

.track-title{
flex:1;
display:flex;
align-items:center;
gap:10px;
width:100%;
text-align:left;
font-size:28px;
background:none !important;
background-color:transparent !important;
border:none !important;
outline:none !important;
box-shadow:none !important;
appearance:none !important;
-webkit-appearance:none !important;
-moz-appearance:none !important;
color:white !important;
cursor:pointer;
padding:0;
margin:0;
font-family:'Inter', sans-serif;
font-weight:400;
line-height:1.2;
border-radius:0 !important;
}

.track-title:hover{
opacity:0.86;
}

.track-title::-moz-focus-inner{
border:0;
padding:0;
}

.track-title-text{
display:inline-block;
}

.track-dot{
width:8px;
height:8px;
border-radius:999px;
background:rgba(95,235,228,0.95);
opacity:0.18;
transform:scale(0.8);
transition:0.25s ease;
flex-shrink:0;
animation:pulseDot 1.8s ease-in-out infinite;
}

@keyframes pulseDot{
0%{
opacity:0.28;
box-shadow:0 0 0 rgba(95,235,228,0);
}
50%{
opacity:1;
box-shadow:0 0 12px rgba(95,235,228,0.45);
}
100%{
opacity:0.28;
box-shadow:0 0 0 rgba(95,235,228,0);
}
}

/* acciones derecha */

.track-actions{
display:flex;
gap:10px;
align-items:center;
flex-shrink:0;
}

/* botones circulares */

.track-link{
display:inline-flex;
align-items:center;
justify-content:center;
width:46px;
height:46px;
border-radius:999px;
text-decoration:none;
color:#ffffff;
background:rgba(80,190,220,0.16);
border:1px solid rgba(120,220,255,0.45);
box-shadow:0 0 18px rgba(80,190,220,0.12);
transition:0.25s ease;
cursor:pointer;
font-family:'Inter', sans-serif;
padding:0;
}

.track-link:hover{
background:rgba(80,190,220,0.28);
border-color:rgba(160,240,255,0.8);
box-shadow:0 0 24px rgba(80,190,220,0.25);
transform:scale(1.06);
}

/* boton + */

.plus-btn{
font-size:28px;
font-weight:300;
line-height:1;
}

/* icono letra */

.icon-btn{
position:relative;
}

.icon-lines{
display:block;
width:16px;
height:12px;
position:relative;
}

.icon-lines::before,
.icon-lines::after{
content:"";
position:absolute;
left:0;
width:16px;
height:2px;
background:white;
border-radius:2px;
}

.icon-lines::before{
top:0;
box-shadow:0 5px 0 white, 0 10px 0 white;
}

/* accesibilidad */

.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;
}

/* letra */

.lyrics{
display:none;
white-space:pre-line;
padding:20px 8px 28px 8px;
line-height:1.8;
color:rgba(232,241,245,0.9);
text-align:center;
font-size:24px;
max-width:760px;
margin:0 auto;
}

/* volver */

.back{
display:inline-block;
margin-bottom:20px;
color:white;
text-decoration:none;
opacity:0.78;
font-family:'Inter', sans-serif;
}

.back:hover{
opacity:1;
}

/* normalizar botones */

button{
font:inherit;
}

/* móvil */

@media (max-width:700px){

.cover{
width:180px;
}

h1{
font-size:44px;
}

.artist{
font-size:12px;
letter-spacing:4px;
}

.links{
gap:8px;
flex-wrap:nowrap;
}

.links a{
min-width:auto;
flex:1 1 0;
padding:11px 10px;
font-size:11px;
letter-spacing:0.4px;
}

.track-title{
font-size:18px;
gap:8px;
}

.track-actions{
gap:8px;
}

.track-link{
width:42px;
height:42px;
}

.plus-btn{
font-size:24px;
}

.lyrics{
font-size:19px;
line-height:1.75;
padding:18px 4px 24px;
}

.bonus-separator{
gap:10px;
margin:28px 0 16px 0;
}

.bonus-text{
font-size:11px;
letter-spacing:3px;
}

.now-playing{
font-size:12px;
}

.track-dot{
width:7px;
height:7px;
}
}