@font-face {
font-family: 'Bauhaus93';
src: url('fonts/bauhs93.TTF') format('truetype');
font-weight: normal;
font-style: normal;
}

body{

margin:0;
font-family:'Inter',
system-ui,
-apple-system,
"Segoe UI",
"Apple Color Emoji",
"Segoe UI Emoji",
sans-serif;
background:#fafafa;
color:black;

}


.hero{

text-align:center;
padding:40px 20px;

}


.hero h1{

font-family:'Bauhaus93', sans-serif;
font-size:50px;
color:#7D5AFC;
margin-bottom:10px;

}


.hero p{

font-size:18px;
opacity:0.7;

}


.playlist-section{

width:90%;
max-width:1200px;
margin:auto;
padding-bottom:80px;

}


.playlist-grid{

display:grid;
grid-template-columns:repeat(4,1fr);
gap:30px;

}

.section-title{

font-family:'Inter', sans-serif;
font-size:20px;
font-weight:500;

color:#555;

margin-bottom:22px;
margin-left:4px;

letter-spacing:0.3px;

}

.flag{

width:18px;
height:13px;

margin-right:6px;

vertical-align:middle;

border-radius:2px;

}

/* CARD */

.playlist-card{
text-decoration:none;
color:black;
display:flex;
flex-direction:column;
border-radius:18px;

opacity:0;
transform:translateY(40px);

transition:transform .4s ease, opacity .4s ease, box-shadow .25s ease;

will-change:transform;

cursor:pointer;
}

.playlist-card.show{
opacity:1;
transform:translateY(0);
}

.playlist-cover{

width:100%;
display:block;

border-radius:18px;

}

.playlist-card:hover{

transform:translateY(-6px) scale(1.08);

box-shadow:0 18px 35px rgba(0,0,0,0.15);

}


.playlist-meta{

margin-top:12px;
padding:0 8px 14px 8px;

}

.playlist-meta h3{

font-size:17px;
margin:0;

line-height:1.2;

}


.playlist-meta p{

margin:3px 0 0;
font-size:14px;
opacity:0.6;

}

.playlist-card:active{

transform:scale(0.97);

}



/* HOVER ESCUCHA EN SPOTIFY */

.playlist-media{

position:relative;
overflow:hidden;
border-radius:18px;

}

.spotify-overlay{

position:absolute;

top:0;
left:0;
right:0;
bottom:0;

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

background:rgba(0,0,0,0.45);

color:white;

font-weight:600;
font-size:18px;

opacity:0;

transition:opacity .2s ease;

border-radius:18px;

}

@media (hover: hover) {
  .playlist-card:hover .spotify-overlay{
    opacity:1;
  }
}


/* FOOTER */

footer{

text-align:center;
padding:30px;
opacity:0.6;
font-size:14px;

}

.social-links{

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

}

.social-links a{

width:45px;
height:45px;

color:#666;

transition:color .2s ease, transform .2s ease;

}

.social-links svg{

width:100%;
height:100%;

}

.social-links a:hover{

color:#7D5AFC;
transform:scale(1.15);

}



/* TABLET */

@media (max-width:900px){

.playlist-grid{

grid-template-columns:repeat(2,1fr);

}

}


/* MOBILE */

@media (max-width:520px){

.hero{
padding:35px 20px 22px;
}

.hero h1{
font-size: 50px;
margin: 0 0 4px 0;
line-height: 1.05;
}

.hero p{
margin-bottom:16px;
margin: 0 0 12px 0;

}

.section-title{
  font-size: 20px;
margin-bottom:18px;
}

.playlist-grid{

grid-template-columns:1fr;

gap:18px;

}

.playlist-section{
width:84%;
padding-bottom:40px;
}

.playlist-card:hover{
transform:translateY(-4px) scale(1.04);
}


}