/* ==========================
   DAREFRETH RADIO
========================== */

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

html{
    scroll-behavior:smooth;
}

body{
    background:#050816;
    color:white;
    font-family:'Segoe UI',sans-serif;
    overflow-x:hidden;
}

/* ==========================
   NAVBAR
========================== */

.navbar{
    background:rgba(5,8,22,.90);
    backdrop-filter:blur(15px);
    padding:15px 0;
}

.navbar-brand{
    color:#00e5ff !important;
    font-weight:900;
    font-size:24px;
}

.nav-link{
    color:white !important;
    margin-left:15px;
}

.nav-link:hover{
    color:#00e5ff !important;
}

/* ==========================
   HERO
========================== */

.hero{

position:relative;

min-height:100vh;

display:flex;

align-items:center;

justify-content:center;

overflow:hidden;

background:
linear-gradient(
135deg,
#050816,
#0f172a,
#111827
);

}
.hero h1{
    font-size:90px;
    font-weight:900;

    background:linear-gradient(
        90deg,
        #00e5ff,
        #7c3aed
    );

    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
}

.hero p{
    font-size:24px;
    color:#cbd5e1;
    margin-top:15px;
}

.btn-radio{

    margin-top:30px;

    border:none;

    padding:18px 40px;

    border-radius:50px;

    background:linear-gradient(
        90deg,
        #00e5ff,
        #7c3aed
    );

    color:white;

    font-size:18px;

    font-weight:bold;

    cursor:pointer;

    transition:.3s;
}

.btn-radio:hover{
    transform:translateY(-3px);
}

/* ==========================
   NOTICIAS
========================== */

.noticias{
    padding:100px 0;
}

.noticias h2{
    text-align:center;
    margin-bottom:50px;
    font-size:50px;
    font-weight:800;
}

.news-card{

    background:#0f172a;

    border-radius:20px;

    padding:25px;

    height:100%;
}

.news-card h3{
    font-size:20px;
}

.news-card a{
    margin-top:15px;
}

/* ==========================
   RADIO
========================== */

.radio-player{
    padding:100px 0;
    text-align:center;
}

.radio-player h2{
    margin-bottom:30px;
}

.radio-player audio{
    width:100%;
    max-width:700px;
}

/* ==========================
   MOBILE
========================== */

@media(max-width:768px){

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

.hero p{
    font-size:18px;
}

.noticias h2{
    font-size:35px;
}

}
/* ==========================
   STATUS BAR
========================== */

.status-bar{
padding:50px 0;
background:#0b1120;
}

.status-card{
background:rgba(255,255,255,.04);
padding:30px;
border-radius:20px;
border:1px solid rgba(255,255,255,.08);
transition:.3s;
}

.status-card:hover{
transform:translateY(-5px);
border-color:#00e5ff;
}

.status-card h3{
font-size:28px;
font-weight:800;
color:#00e5ff;
}

.status-card p{
margin-top:10px;
color:#94a3b8;
}
/* ==========================
   PROGRAMACION
========================== */

.programacion-hoy{
padding:100px 0;
}

.section-title{
text-align:center;
margin-bottom:60px;
}

.section-title h2{
font-size:50px;
font-weight:800;
}

.section-title p{
color:#94a3b8;
}

.programa-box{

background:rgba(255,255,255,.04);

border:1px solid rgba(255,255,255,.08);

padding:30px;

border-radius:20px;

height:100%;

transition:.3s;
}

.programa-box:hover{

transform:translateY(-5px);

border-color:#00e5ff;

}

.programa-box span{

color:#00e5ff;

font-size:14px;

font-weight:700;

}

.programa-box h4{

margin-top:15px;

font-size:24px;

font-weight:700;

}
/* ==========================
   REDES FLOTANTES
========================== */

.social-floating{

position:fixed;

right:20px;

top:50%;

transform:translateY(-50%);

z-index:9999;

display:flex;

flex-direction:column;

gap:12px;

}

.social-btn{

width:55px;

height:55px;

display:flex;

align-items:center;

justify-content:center;

border-radius:50%;

font-size:24px;

color:white;

text-decoration:none;

transition:.3s;

box-shadow:0 5px 20px rgba(0,0,0,.3);

}

.social-btn:hover{

transform:scale(1.15);

color:white;

}

.whatsapp{
background:#25D366;
}

.facebook{
background:#1877F2;
}

.instagram{
background:linear-gradient(
45deg,
#f58529,
#dd2a7b,
#8134af
);
}

.tiktok{
background:#000;
}

@media(max-width:768px){

.social-floating{

right:10px;

bottom:90px;

top:auto;

transform:none;

}

}
/* ==========================
   EQUALIZER
========================== */

.equalizer{

display:flex;

justify-content:center;

align-items:flex-end;

gap:5px;

margin-top:40px;

height:50px;

}

.equalizer span{

width:6px;

background:#00e5ff;

border-radius:10px;

animation:equalizer 1s infinite ease-in-out;

}

.equalizer span:nth-child(1){
animation-delay:.1s;
}

.equalizer span:nth-child(2){
animation-delay:.2s;
}

.equalizer span:nth-child(3){
animation-delay:.3s;
}

.equalizer span:nth-child(4){
animation-delay:.4s;
}

.equalizer span:nth-child(5){
animation-delay:.5s;
}

@keyframes equalizer{

0%{
height:10px;
}

50%{
height:50px;
}

100%{
height:15px;
}

}
/* ==========================
   WELCOME PLAYER
========================== */

.welcome-box{

max-width:500px;

margin:40px auto 0;

padding:30px;

background:rgba(255,255,255,.05);

border:1px solid rgba(255,255,255,.08);

border-radius:25px;

backdrop-filter:blur(15px);

}

.welcome-box h3{

color:#ff2d75;

margin-bottom:15px;

font-weight:800;

}

.welcome-box p{

color:#cbd5e1;

margin-bottom:20px;

}
/* ==========================
   HERO PREMIUM
========================== */

.hero{

height:100vh;

background:
linear-gradient(
rgba(0,0,0,.65),
rgba(0,0,0,.75)
),
url('../img/hero.jpg');

background-size:cover;
background-position:center;

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

position:relative;

text-align:center;

}

.hero-content{

position:relative;
z-index:5;

}

.live-badge{

display:inline-block;

padding:10px 25px;

background:#ff1744;

border-radius:50px;

font-weight:700;

margin-bottom:30px;

box-shadow:
0 0 25px rgba(255,23,68,.5);

}

.hero h1{

font-size:90px;

font-weight:900;

letter-spacing:3px;

margin-bottom:20px;

background:
linear-gradient(
90deg,
#00e5ff,
#7c4dff
);

-webkit-background-clip:text;
-webkit-text-fill-color:transparent;

}

.hero p{

font-size:24px;

color:#ddd;

margin-bottom:40px;

}

.hero-buttons{

display:flex;

justify-content:center;

gap:20px;

flex-wrap:wrap;

}

.btn-live-big{

background:
linear-gradient(
90deg,
#00e5ff,
#7c4dff
);

border:none;

padding:18px 40px;

border-radius:50px;

font-size:18px;

font-weight:700;

color:white;

transition:.3s;

}

.btn-live-big:hover{

transform:translateY(-4px);

box-shadow:
0 10px 30px rgba(0,229,255,.4);

}

.btn-outline-radio{

padding:18px 40px;

border:2px solid #00e5ff;

border-radius:50px;

text-decoration:none;

color:white;

font-weight:700;

}

.btn-outline-radio:hover{

background:#00e5ff;

color:#000;

}

@media(max-width:768px){

.hero h1{

font-size:50px;

}

.hero p{

font-size:18px;

}

}
.live-bar{

margin-top:-60px;
position:relative;
z-index:20;

}

.live-card{

background:rgba(10,15,30,.95);

border:1px solid rgba(255,255,255,.08);

backdrop-filter:blur(20px);

padding:25px;

border-radius:25px;

display:flex;

justify-content:space-between;

align-items:center;

box-shadow:
0 10px 40px rgba(0,0,0,.4);

}

.live-left{

display:flex;

align-items:center;

gap:15px;

}

.live-dot{

width:14px;
height:14px;

background:#ff1744;

border-radius:50%;

animation:pulse 1s infinite;

}

@keyframes pulse{

0%{
transform:scale(1);
}

50%{
transform:scale(1.4);
}

100%{
transform:scale(1);
}

}

.live-right{

font-weight:700;

color:#00e5ff;

}
/* ==========================
   PUBLICIDAD
========================== */

.ads-banner{

padding:60px 0;

}

.ad-box{

background:
linear-gradient(
135deg,
#0f172a,
#1e293b
);

border:1px solid rgba(255,255,255,.08);

border-radius:30px;

padding:50px;

text-align:center;

position:relative;

overflow:hidden;

}

.ad-label{

position:absolute;

top:15px;

right:15px;

background:#ff1744;

padding:5px 15px;

border-radius:20px;

font-size:12px;

font-weight:700;

}

.ad-box h3{

font-size:32px;

font-weight:800;

margin-bottom:15px;

color:#00e5ff;

}

.ad-box p{

font-size:18px;

color:#cbd5e1;

margin-bottom:25px;

}

.btn-ad{

display:inline-block;

padding:15px 35px;

border-radius:50px;

background:
linear-gradient(
90deg,
#00e5ff,
#7c4dff
);

color:white;

font-weight:700;

text-decoration:none;

}

.btn-ad:hover{

color:white;

transform:translateY(-3px);

}
/* ==========================
   NOW PLAYING
========================== */

.now-playing{

padding:60px 0;

}

.now-playing-card{

background:rgba(15,23,42,.9);

border:1px solid rgba(255,255,255,.08);

border-radius:30px;

padding:30px;

display:flex;

align-items:center;

justify-content:space-between;

gap:30px;

backdrop-filter:blur(20px);

}

.song-cover img{

width:120px;

height:120px;

border-radius:20px;

object-fit:cover;

}

.song-info{

flex:1;

}

.song-info span{

color:#00e5ff;

font-size:14px;

font-weight:700;

}

.song-info h2{

margin:10px 0;

font-size:32px;

font-weight:800;

}

.song-info p{

color:#94a3b8;

margin:0;

}

.song-live{

background:#ff1744;

padding:12px 25px;

border-radius:50px;

font-weight:700;

}
/* HERO TITLE */

.hero-title{

font-size:110px;

font-weight:900;

line-height:.9;

text-transform:uppercase;

}

.hero-title span{

display:block;

background:
linear-gradient(
90deg,
#00e5ff,
#7c4dff,
#ff00ff
);

-webkit-background-clip:text;
-webkit-text-fill-color:transparent;

}

/* LIVE BAR */

.live-bar{

margin-top:-40px;

position:relative;

z-index:20;

}

.live-card{

background:#0f172a;

padding:25px;

border-radius:25px;

display:flex;

justify-content:space-between;

align-items:center;

border:1px solid rgba(255,255,255,.08);

}

.live-left{

display:flex;

align-items:center;

gap:15px;

}

.live-dot{

width:14px;

height:14px;

background:#ff1744;

border-radius:50%;

animation:pulse 1s infinite;

}

@keyframes pulse{

0%{transform:scale(1);}
50%{transform:scale(1.4);}
100%{transform:scale(1);}

}

.live-right{

color:#00e5ff;

font-weight:700;

}

/* TRACKS */

.top-tracks{

padding:80px 0;

}

.track-list{

max-width:800px;

margin:auto;

}

.track-item{

background:#0f172a;

padding:20px;

margin-bottom:15px;

border-radius:15px;

border:1px solid rgba(255,255,255,.08);

font-size:18px;

font-weight:600;

}

.track-item span{

color:#00e5ff;

margin-right:15px;

}