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

html, body { height:100%; font-family:'Segoe UI', system-ui, sans-serif; overflow:hidden; }

body {
  background: linear-gradient(rgba(0,0,0,0.72), rgba(0,0,0,0.85)), url('icon/fondo.jpg');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:env(safe-area-inset-top, 20px) 15px env(safe-area-inset-bottom,20px) 15px;
}

.container { width:100%; max-width:440px; height:100dvh; display:flex; align-items:center; justify-content:center; }

.card {
  width:100%;
  max-height:95dvh;
  background:rgba(255,255,255,0.17);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  border-radius:32px;
  padding:36px 20px;
  text-align:center;
  box-shadow:0 25px 60px rgba(0,0,0,0.6);
  border:1px solid rgba(255,255,255,0.2);
  display:flex;
  flex-direction:column;
  gap:16px;
}

/* Header Logo */
.header-logo {
  display:flex;
  align-items:center;
  gap:16px;
  flex-wrap:wrap;
  justify-content:center;
}

.logo { width:120px; height:auto; border-radius:50%; object-fit:cover; border:5px solid #fff; box-shadow:0 10px 30px rgba(0,0,0,0.5); }

.title-text h1 {
  font-size:clamp(1.8rem,6.5vw,2.8rem);
  font-weight:800;
  background:linear-gradient(to right,#fff,#fde047);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  margin-bottom:4px;
}

.title-text .slogan { font-size:clamp(1rem,4vw,1.4rem); opacity:0.9; }

.verse { background:rgba(255,255,255,0.2); padding:clamp(14px,4vw,20px); border-radius:16px; font-style:italic; font-size:clamp(0.95rem,3.8vw,1.1rem); line-height:1.5; border-left:5px solid #fbbf24; }

.verse small { display:block; margin-top:8px; color:#fde047; font-weight:700; }

.album-art-round { width:clamp(140px,40vw,220px); height:clamp(140px,40vw,220px); border-radius:50%; object-fit:cover; border:7px solid #fff; box-shadow:0 15px 45px rgba(0,0,0,0.7); }

.song { font-size:clamp(1.3rem,5.5vw,2rem); font-weight:700; margin:14px 0 6px; }

.artist { font-size:clamp(1.1rem,4.5vw,1.5rem); opacity:0.9; }

.play-button {
  position:relative;
  background:#fff;
  color:#6366f1;
  border:none;
  width:clamp(86px,24vw,120px);
  height:clamp(86px,24vw,120px);
  border-radius:50%;
  cursor:pointer;
  box-shadow:0 15px 45px rgba(0,0,0,0.6);
  margin:20px auto;
}

.play-button:hover { transform:scale(1.08); }

.play-button.playing { color:#ec4899; }

.play-button svg {
  width:50px;
  height:50px;
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%, -50%);
  transition:opacity 0.3s ease;
}

.play-icon { opacity:1; }
.pause-icon { opacity:0; }

.play-button.playing .play-icon { opacity:0; }
.play-button.playing .pause-icon { opacity:1; }

.status { font-size:clamp(1rem,4vw,1.3rem); margin-top:10px; opacity:0.9; font-weight:600; }

.copyright { font-size:clamp(0.8rem,3.2vw,1rem); opacity:0.8; margin-top:auto; padding-top:10px; }

/* Menu hamburguesa */
.menu-btn { position:fixed; top:max(env(safe-area-inset-top),20px); left:20px; background:rgba(255,255,255,0.25); backdrop-filter:blur(15px); border:none; width:64px; height:64px; border-radius:50%; z-index:9999; display:flex; align-items:center; justify-content:center; cursor:pointer; box-shadow:0 12px 35px rgba(0,0,0,0.6); }

.menu-btn:hover { background:rgba(255,255,255,0.4); transform:scale(1.1); }

.menu-btn .bar { transition: fill 0.3s; }

.menu-btn:hover .bar { fill:#fde047; }

/* Sidebar */
.sidebar { position:fixed; top:0; left:-100%; width:280px; height:100%; background:rgba(20,20,40,0.98); backdrop-filter:blur(20px); transition:left 0.4s ease; z-index:9999; padding:20px; color:#fff; }

.sidebar.active { left:0; }

.sidebar-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:30px; }

.sidebar-header h3 { font-size:20px; }

.close-sidebar { background:none; border:none; color:#fff; font-size:32px; cursor:pointer; }

.sidebar-links a { display:block; padding:18px 0; color:#fff; text-decoration:none; font-size:18px; border-bottom:1px solid rgba(255,255,255,0.1); transition:padding-left 0.3s; }

.sidebar-links a:hover { padding-left:15px; color:#fde047; }

.overlay-sidebar { position:fixed; inset:0; background:rgba(0,0,0,0.7); opacity:0; pointer-events:none; transition:opacity 0.4s; z-index:9998; }

.overlay-sidebar.active { opacity:1; pointer-events:all; }