/* RESET */

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

body{
font-family:'Poppins',sans-serif;
background:#020617;
color:#e2e8f0;
line-height:1.6;
}

/* HEADER */

header{
display:flex;
justify-content:space-between;
align-items:center;
padding:18px 40px;
background:rgba(2,6,23,0.85);
backdrop-filter:blur(12px);
border-bottom:1px solid #1e293b;
position:sticky;
top:0;
z-index:100;
}

header h1{
font-weight:700;
color:#38bdf8;
letter-spacing:1px;
}

nav a{
margin:0 14px;
color:#cbd5f5;
text-decoration:none;
font-size:15px;
transition:0.3s;
position:relative;
}

nav a:hover{
color:#38bdf8;
}

/* HERO */

.hero{
height:85vh;
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
text-align:center;
padding:20px;
background:
radial-gradient(circle at top,#0ea5e933,transparent),
linear-gradient(140deg,#020617,#0f172a,#1e293b);
}

.hero h2{
font-size:3.5em;
margin-bottom:20px;
font-weight:700;
color:white;
}

.hero p{
max-width:650px;
margin-bottom:35px;
color:#94a3b8;
font-size:17px;
}

.hero button{
padding:15px 34px;
border:none;
background:linear-gradient(90deg,#38bdf8,#0ea5e9);
color:white;
font-size:16px;
cursor:pointer;
border-radius:30px;
transition:0.3s;
box-shadow:0 10px 30px rgba(56,189,248,0.3);
}

.hero button:hover{
transform:translateY(-3px);
box-shadow:0 15px 40px rgba(56,189,248,0.45);
}

/* RADIO PLAYER */

.radio-player{
padding:90px 20px;
text-align:center;
}

.radio-player h2{
margin-bottom:15px;
font-size:28px;
}

.live-indicator{
margin-top:10px;
color:#ef4444;
font-weight:600;
font-size:15px;
animation:pulse 1.5s infinite;
}

@keyframes pulse{
0%{opacity:1}
50%{opacity:0.4}
100%{opacity:1}
}

#nowPlaying{
margin-top:25px;
color:#38bdf8;
font-weight:500;
}

#listeners{
color:#94a3b8;
}

/* EVENTOS */

.eventos{
padding:90px 20px;
text-align:center;
background:linear-gradient(180deg,#020617,#0f172a);
}

.event-grid{
display:flex;
justify-content:center;
gap:30px;
margin-top:45px;
flex-wrap:wrap;
}

.event-card{
background:rgba(15,23,42,0.8);
padding:28px;
border-radius:16px;
width:230px;
border:1px solid #1e293b;
transition:0.35s;
backdrop-filter:blur(6px);
}

.event-card:hover{
transform:translateY(-8px);
box-shadow:0 15px 40px rgba(0,0,0,0.6);
border-color:#38bdf8;
}

.event-card h3{
margin-bottom:10px;
color:#38bdf8;
}

/* COMUNIDAD */

.comunidad{
padding:90px 20px;
text-align:center;
}

.comunidad p{
max-width:650px;
margin:auto;
color:#94a3b8;
font-size:16px;
}

/* CHAT */

.chat{
padding:90px 20px;
background:#020617;
text-align:center;
}

.chat-box{
height:270px;
background:#0f172a;
margin:25px auto;
width:85%;
max-width:650px;
overflow-y:auto;
padding:15px;
border-radius:12px;
border:1px solid #1e293b;
box-shadow:0 10px 30px rgba(0,0,0,0.5);
}

.chat-box p{
margin-bottom:8px;
font-size:14px;
}

.chat-input{
display:flex;
justify-content:center;
gap:12px;
flex-wrap:wrap;
}

.chat-input input{
padding:13px;
width:270px;
border:none;
border-radius:8px;
background:#1e293b;
color:white;
}

.chat-input button{
padding:13px 20px;
background:linear-gradient(90deg,#38bdf8,#0ea5e9);
border:none;
border-radius:8px;
color:white;
cursor:pointer;
transition:0.3s;
}

.chat-input button:hover{
transform:translateY(-2px);
}

/* ARTISTAS */

.artistas{
padding:100px 20px;
text-align:center;
background:linear-gradient(180deg,#020617,#020617);
}

.artist-slider{
position:relative;
max-width:520px;
margin:auto;
height:480px;
margin-top:50px;
}

.artist-card{
position:absolute;
width:100%;
opacity:0;
transition:opacity 1.6s ease;
padding:20px;
}

.artist-card.active{
opacity:1;
}

.artist-card img{
width:100%;
border-radius:16px;
margin-bottom:20px;
box-shadow:0 15px 40px rgba(0,0,0,0.7);
}

.artist-card h3{
color:#38bdf8;
margin-bottom:10px;
font-size:24px;
}

.artist-card p{
color:#94a3b8;
font-size:14px;
line-height:1.5;
}

/* FOOTER */

footer{
text-align:center;
padding:30px;
background:#020617;
border-top:1px solid #1e293b;
color:#94a3b8;
margin-top:70px;
font-size:14px;
}

/* RESPONSIVE */

@media (max-width:768px){

.hero h2{
font-size:2.4em;
}

header{
flex-direction:column;
gap:10px;
}

nav{
display:flex;
flex-wrap:wrap;
justify-content:center;
}

.artist-slider{
height:420px;
}

}