/* RESET */

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

html{
scroll-behavior:smooth;
}

body{
font-family:'Space Grotesk', sans-serif;
background-color:#050505;
color:white;
line-height:1.7;
}

/* CONTAINER */

.container{
max-width:1100px;
margin:auto;
padding:80px 20px;
}

/* HERO */

.hero{

position:relative;

height:100vh;

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

text-align:center;

background:
linear-gradient(
rgba(0,0,0,0.5),
rgba(0,0,0,0.7)
),
url("../img/yoow_tigas.png");

background-size:cover;
background-position:center;
background-repeat:no-repeat;
}

.hero h1{
font-size:72px;
letter-spacing:4px;
margin-bottom:10px;

text-shadow:0 0 20px rgba(140,44,255,0.7);
}

.hero p{
max-width:500px;
opacity:0.85;
margin-bottom:30px;
}

/* fade inferior */

.hero::after{
content:"";
position:absolute;
bottom:0;
left:0;

width:100%;
height:120px;

background:linear-gradient(
transparent,
#050505
);
}

.hero::before{
content:"";
position:absolute;
inset:0;

background:radial-gradient(circle,
rgba(140,44,255,0.15),
transparent 25%);


}


/* desktop */

@media (min-width:900px){

.hero{
background-size:contain;
background-position:center;
background-repeat:no-repeat;
}

}
/* BOTÃO */
.btn{

display:inline-block;

padding:16px 32px;

background:#8c2cff;

color:white;

text-decoration:none;

border-radius:30px;

font-weight:600;

transition:0.3s;

position:relative;
z-index:2;

}

.btn:hover{

background:#a855ff;

transform:translateY(-2px);

}
/* TITULOS */

h2{
font-size:32px;
margin-bottom:25px;
letter-spacing:1px;
}

/* BIO */

.bio{
display:flex;
gap:50px;
align-items:center;
}

.bio img{
width:300px;
border-radius:14px;

border:2px solid #8c2cff;

box-shadow:0 0 15px rgba(140,44,255,0.5);
}

/* MANIFESTO */

.manifesto{
background:#0b0b0b;
padding:80px 20px;

text-align:center;
}

.manifesto p{
max-width:800px;
margin:auto;
margin-bottom:20px;
opacity:0.9;
}

/* DISCOGRAFIA */
.discografia-grid{

display:grid;
grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
gap:30px;
margin-top:40px;

}

.album{

text-decoration:none;
color:white;

display:block;

background:#0f0f0f;
padding:30px;

border-radius:12px;

transition:all 0.3s ease;

}
.album img{

width:180px;
height:180px;

object-fit:cover;

margin:20px auto;

display:block;

border-radius:8px;

}

.album:hover{

transform:translateY(-6px);

box-shadow:0 10px 30px rgba(140,44,255,0.4);

}

.discografia h2{
    text-align: center;
}
/* LISTA */

ul{
margin-top:20px;
padding-left:20px;
}

li{
margin-bottom:10px;
}

/* RESPONSIVO */

@media (max-width:768px){

.hero h1{
font-size:42px;
}

.container{
padding:60px 20px;
}

.bio{
flex-direction:column;
text-align:center;
}

.bio img{
width:100%;
max-width:320px;
}

}

/* MENU */

.menu{
position:fixed;
top:0;
width:100%;

display:flex;
justify-content:center;
gap:30px;

padding:18px;

background:rgba(0,0,0,0.6);
backdrop-filter:blur(10px);

z-index:999;
}

.menu a{
text-decoration:none;
color:white;
font-size:14px;
letter-spacing:1px;

transition:0.25s;
}

.menu a:hover{
color:#8c2cff;
}

/* PLATAFORMAS */

.plataformas{
text-align:center;
}

.platform-links{

display:flex;
justify-content:center;
gap:25px;
margin-top:30px;

flex-wrap:wrap;
}

.platform-links a{

width:70px;
height:70px;

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

font-size:28px;

color:white;

background:#111;

border-radius:16px;

border:1px solid #8c2cff;

transition:0.25s;

box-shadow:0 0 10px rgba(140,44,255,0.3);

}

.platform-links a:hover{

transform:translateY(-4px) scale(1.05);

box-shadow:
0 0 15px #8c2cff,
0 0 35px rgba(140,44,255,0.7);

background:#151515;

}

.menu{

position:fixed;
top:0;
left:0;

width:100%;

display:flex;
justify-content:center;
gap:40px;

padding:20px;

background:transparent;

z-index:1000;

transition:all 0.3s ease;

}

.menu.scrolled{
background:#050505;
box-shadow:0 5px 20px rgba(0,0,0,0.6);
}

/* singles */

.singles-grid{

display:grid;
grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
gap:35px;
margin-top:40px;

}

.single{

display:block;

background:#0f0f0f;

padding:20px;

border-radius:12px;

text-align:center;

text-decoration:none;

color:white;

transition:all 0.3s ease;

}

.single img{

width:160px;
height:160px;

object-fit:cover;

margin:10px auto 20px;

display:block;

border-radius:8px;

box-shadow:0 10px 25px rgba(0,0,0,0.6);

}

.single h3{

font-size:18px;
margin-bottom:5px;

}

.single p{

opacity:0.7;
font-size:14px;

}

.single:hover{

transform:translateY(-6px);

box-shadow:0 10px 30px rgba(140,44,255,0.4);

}

/* CONTATO */
.contato {
  text-align: center;
  margin: 60px 0;
}

.contato h2 {
  font-size: 32px;
  margin-bottom: 20px;
  color: #fff;
}

.contato p {
  font-size: 16px;
  margin-bottom: 20px;
  color: #aaa;
}

.email-btn {
  display: inline-block;
  padding: 12px 24px;
  border-radius: 12px;
  background: #8c2cff;
  color: #fff;
  font-weight: 600;
  text-decoration: none;
  transition: 0.3s;
}

.email-btn i {
  margin-right: 8px;
}

.email-btn:hover {
  background: #6a00ff;
  box-shadow: 0 8px 20px rgba(140,44,255,0.5);
  transform: translateY(-2px);
}

/* Rodapé discreto */
.footer-credits{
  text-align:center;
  font-size:12px;
  color:#aaa;
  margin:40px 0 20px;
  font-family:'Space Grotesk', sans-serif;
}

.footer-credits a{
  color:#8c2cff; /* roxo do tema */
  text-decoration:none;
  transition:0.3s;
}

.footer-credits a:hover{
  color:#fff;
}

.footer-credits i{
  margin-right:5px; /* espaçamento entre ícone e nome */
}

.wikipedia-top-img {
  width: 100%;       /* ocupa toda a largura do container */
  max-width: 400px;  /* ou ajuste para o tamanho que quiser */
  display: block;
  margin: 20px auto; /* centraliza e dá espaço acima e abaixo */

}

.btn-download {
  display: inline-block;
  margin-top: 6px; /* distancia do texto */
  padding: 4px 10px;
  background: #2a2a2a; /* mais discreto */
  color: #ccc; /* cor clara, suave */
  font-size: 13px;
  border-radius: 6px;
  text-decoration: none;
  transition: all 0.2s;
}

.btn-download:hover {
  background: #3c3c3c; /* leve efeito ao passar o mouse */
  color: white;
}