/* === FUENTE MORSE NK === */
@font-face{
  font-family:'Morse NK';
  src:url('../fonts/morsenkv2cli.ttf') format('truetype');
}

/* === PALETA === */
:root{
  --primary:#ff0066;
  --secondary:#00d0ff;
  --dark:#0d0d0d;
  --light:#ffffff;
  --card:#181818;
}

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

/* GLOBAL */
body{
  font-family:'Lora',serif;
  background:var(--dark);
  color:var(--light);
}
.hero{
  height:50vh;
  background:url('../images/banner.webp') center/cover no-repeat;
  display:flex;align-items:center;justify-content:center
}
.overlay{
  background:rgba(0,0,0,.55);padding:2rem;border-radius:20px;text-align:center
}
.logo{
  font-family:'Morse NK',sans-serif;font-size:clamp(2.5rem,7vw,5.5rem);
  letter-spacing:4px;color:var(--secondary);text-shadow:0 0 8px var(--primary)
}
.tagline{margin-top:.5rem;font-size:1.2rem}

/* PLAYER CARD */
.player-card{
  max-width:800px;margin:-4rem auto 2rem;background:var(--card);
  border-radius:16px;padding:1.5rem;box-shadow:0 0 15px #000;
  display:grid;grid-template-columns:160px 1fr;gap:1.5rem
}
.player-card img{width:160px;height:160px;border-radius:12px;object-fit:cover}
.meta{display:flex;flex-direction:column;justify-content:center;gap:.6rem}
.meta h3{font-size:1.2rem;font-weight:700}
.meta p{font-size:1rem;color:#ccc}

/* barra de progreso */
.progress{width:100%;height:6px;background:#333;border-radius:3px;overflow:hidden}
#progressBar{width:0;height:100%;background:var(--primary)}

/* controles */
.controls{
  grid-column:1/3;margin-top:1.2rem;display:flex;justify-content:center;gap:1rem
}
.controls button{
  background:var(--primary);border:none;color:var(--light);
  width:3rem;height:3rem;border-radius:8px;font-size:1.3rem;cursor:pointer;
  transition:transform .15s
}
.controls button:hover{transform:scale(1.1)}
#volume{width:120px;cursor:pointer}

/* oyentes */
.listeners{text-align:center;margin-top:1rem;font-size:.95rem}

/* INFO + FOOTER */
.about{padding:3rem 1rem;max-width:800px;margin:auto;text-align:center}
footer{background:#111;padding:1rem;text-align:center;font-size:.9rem}

/* RESPONSIVE */
@media(max-width:640px){
  .player-card{grid-template-columns:1fr}
  .player-card img{margin:auto}
  .controls{flex-wrap:wrap}
}