/* === Reset e Base ======================================================= */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
:root { --bg:#010a13; --text:#fff; --muted:#ccc; --accent-blue:#42a5f5; --br-yellow:#FFDF00; }
body { padding-top:50px; font-family:Arial, Helvetica, sans-serif; background:var(--bg); color:var(--text); min-height:100vh; line-height:1.4; }

/* Acessibilidade */
:focus-visible { outline:2px solid var(--accent-blue); outline-offset:2px; }
.sr-only { position:absolute!important; width:1px!important; height:1px!important; padding:0!important; margin:-1px!important; overflow:hidden!important; clip:rect(0,0,0,0)!important; white-space:nowrap!important; border:0!important; }

/* === Navegação ========================================================== */
.site-nav { position:fixed; top:0; left:0; width:100%; background:#fff; z-index:1000; padding:8px 0; display:flex; justify-content:center; height:44px; overflow:hidden; }
.nav-list { display:flex; justify-content:center; align-items:center; gap:14px; list-style:none; flex-wrap:nowrap; }
.nav-list li a { display:flex; align-items:center; color:#000; text-decoration:none; }
.nav-list li img { display:block; width:32px; height:32px; object-fit:contain; }

/* Ajuste visual: Apple/Spotify têm “respiro” interno diferente */
.nav-list li img[alt="Apple Music"],
.nav-list li img[alt="Spotify"]{
  transform: scale(1.12);
  transform-origin: center;
  margin-inline: -2px;
}

/* === Logo e Títulos ===================================================== */
.logo-img { display:block; margin:30px auto 24px; width:215px; max-width:100%; height:auto; aspect-ratio:540/510; }
.track-title { text-align:center; font-size:1.9rem; font-weight:800; margin:24px 0 18px; letter-spacing:.2px; }
.track-title .feat { font-size:.62em; font-weight:400; color:var(--muted); font-style:italic; }

/* === Vídeo (desktop) ==================================================== */
.video-wrapper { max-width:1200px; margin:0 auto; }
.responsive-video { width:75%; max-width:875px; margin:0 auto 32px; aspect-ratio:16/9; border-radius:20px; overflow:hidden; content-visibility:auto; contain-intrinsic-size:540px 304px; }
.video-wrapper--small { max-width:1100px; }
.responsive-video--small { width:50%; max-width:625px; margin:0 auto 24px; }
.video-separator { width:80%; max-width:800px; height:2px; background:rgba(255,255,255,.3); margin:48px auto 36px; border:0; }

/* === Tracks ============================================================= */
.track { text-align:center; margin-bottom:48px; padding-inline:20px; }
.track + .track { margin-top:26px !important; }
.album > .track-title { margin-bottom:36px; }
#brazilian-experience .track-title { color: var(--br-yellow); }

/* Ajuste específico: reduzir distância entre o download de AQECAE e o vídeo de Sheila */
#ate-que-essa-cancao { margin-bottom:24px !important; }
#ate-que-essa-cancao .audio-actions { margin-top:6px; }
#sheila { margin-top:10px !important; }

/* === Logos de streaming (tiles) ======================================== */
/* Desktop: botões menores + logos um pouco maiores */
.streaming-logos {
  display:flex; justify-content:center; align-items:center; gap:14px; flex-wrap:wrap; margin-top:12px;
  max-width:940px; margin-left:auto; margin-right:auto;
}
.streaming-logos a {
  display:inline-flex; align-items:center; justify-content:center;
  flex:0 0 auto; height:68px; min-width:150px; padding:6px 12px;
  background:#fff; border:2px solid #000; border-radius:12px;
}
.streaming-logos img {
  max-height:100%; max-width:100%; width:auto; height:auto; object-fit:contain; border:0;
  transform:scale(1.22); transform-origin:center;
}

/* === Player de Áudio ==================================================== */
.audio-block { display:inline-block; text-align:center; margin-bottom:4px; }
.audio-player { display:block; max-width:300px; width:90%; margin:10px auto 0; }
.audio-actions { margin-top:6px; display:flex; justify-content:center; gap:10px; }
.audio-actions .btn-download, .audio-actions .btn-lyrics {
  display:inline-block; padding:8px 12px; border-radius:8px; text-decoration:none; background:#111; color:#fff; font-weight:600;
}

/* === Sobre a Banda ====================================================== */
.history { max-width:800px; margin:56px auto; padding:20px; background:rgba(255,255,255,.05); border-radius:12px; }
.history img { width:100%; height:auto; display:block; margin:20px 0; }
.history-title { font-size:1.6rem; margin-bottom:18px; text-align:center; }
.history-news { display:inline-block; background:#fff; color:#000; padding:6px 12px; border-radius:6px; font-weight:700; }
.history-news:hover { transform:translateY(-1px); }
.history-content p { background:rgba(255,255,255,.9); color:#000; padding:14px; border-radius:8px; margin-bottom:16px; line-height:1.55; }

/* === Álbum ============================================================== */
.album { max-width:900px; margin:36px auto 0; }

/* === Playlists (desktop) =============================================== */
.playlist-box { background:transparent; margin-top:6px; text-align:center; padding:12px 0 8px; }
.spotify-playlists-button { display:inline-block; padding:10px 15px; background:#fff; color:green; border-radius:10px; text-decoration:none; font-weight:bold; }
.playlist-items { display:flex; flex-wrap:wrap; justify-content:center; align-items:flex-start; gap:18px; margin-top:8px; padding:0 10px; }
.playlist-items--stack { flex-direction:row; }
.playlist-card { flex:1 1 360px; max-width:420px; text-align:center; margin-bottom:6px; }
.playlist-card h3 { color:#fff; margin:8px 0 10px; font-size:1.35em; }
/* imagens ~33% menores no desktop */
.playlist-card img {
  display:block;
  width:63%;
  max-width:280px;
  height:auto;
  border-radius:12px;
  margin:0 auto;
}

/* === Rodapé ============================================================= */
footer{
  display:flex !important; justify-content:center !important; align-items:center !important;
  text-align:center !important; width:100%;
  background:rgba(0,0,0,.5); color:#fff; padding:20px;
}
footer p{ margin:0 !important; width:100%; text-align:center !important; }

/* === Responsivo (Mobile) =============================================== */
/* Break principal — manter no fim do arquivo para ganhar da cascata */
@media only screen and (max-width:768px){
  .nav-list li img { width:26px !important; height:26px !important; object-fit:contain; }

  /* Títulos das músicas: +leve */
  .track-title { font-size:1.45rem !important; margin:18px 0 12px !important; }

  /* Vídeos (small e normal com largura cheia no mobile) */
  .responsive-video{ width:94% !important; max-width:none !important; margin:0 auto 22px !important; }
  .responsive-video--small{ width:94% !important; max-width:none !important; margin:0 auto 18px !important; }

  /* Logo menor */
  .logo-img { width:130px !important; margin-bottom:18px !important; }

  /* Botões de streaming: manter tamanho, logos um pouco menores para não “vazar” */
  .streaming-logos a { height:64px !important; min-width:150px !important; padding:6px 12px !important; border-radius:14px !important; }
  .streaming-logos img { transform:scale(1.18) !important; } /* era 1.22 no desktop */

  /* Playlists empilhadas + imagens maiores e menos gap */
  .playlist-items { gap:6px !important; margin-top:2px !important; }
  .playlist-items--stack { flex-direction:column !important; align-items:center !important; }
  .playlist-items--stack .playlist-card { flex:0 0 auto !important; }
  .playlist-card { max-width:380px !important; margin-bottom:2px !important; }
  .playlist-card h3 { margin:6px 0 6px !important; }
  .playlist-card img { width:96% !important; max-width:380px !important; }

  .history-content p { font-size:.95rem !important; padding:10px !important; }
  .audio-player { max-width:260px !important; width:95% !important; }
}

/* Fallback extra para cobrir alguns dispositivos touch com DPR alto (iOS/Android) */
@media (pointer: coarse) and (max-width:1024px){
  .responsive-video,
  .responsive-video--small{ width:94% !important; max-width:none !important; }
  .track-title { font-size:1.45rem !important; }
  .playlist-items { gap:6px !important; }
  .playlist-card img { width:96% !important; max-width:380px !important; }
}

/* === Movimento reduzido ================================================ */
@media (prefers-reduced-motion: reduce){
  * { animation:none!important; transition:none!important; }
}
/* v=23 */