/* ==================================
        CONFIGURACIÓN GENERAL
================================== */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700;900&display=swap');


* {

    margin: 0;
    padding: 0;
    box-sizing: border-box;

}


html {

    scroll-behavior: smooth;

}


body {

    min-height: 100vh;
    font-family: 'Montserrat', sans-serif;
    color: white;
    overflow-x: hidden;

    background:

    linear-gradient(
        rgba(0,0,0,0.55),
        rgba(0,0,0,0.75)
    ),

    url("img/background.jpg");

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

}


/* ==================================
        FONDO ANIMADO
================================== */


.background-overlay {

    position: fixed;

    width: 100%;
    height: 100%;

    top:0;
    left:0;

    background:

    radial-gradient(
        circle at center,
        rgba(255,0,153,0.25),
        transparent 45%
    );

    z-index: -1;

    animation: pulseBackground 5s infinite alternate;

}



@keyframes pulseBackground {


    from {

        opacity: .5;

    }


    to {

        opacity: 1;

    }


}


/* ==================================
        CONTENEDOR PRINCIPAL
================================== */


.container {


    width: 100%;

    min-height: 100vh;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    padding:40px 20px;


}



/* ==================================
        LOGO
================================== */


.logo-container {

    margin-bottom:25px;

    animation: logoEntrance 1.5s ease;

}



.logo {


    width:260px;

    max-width:80vw;

    filter:

    drop-shadow(0 0 15px #ff0099)

    drop-shadow(0 0 35px #00ffff);


    animation:

    glitch 3s infinite;


}



@keyframes logoEntrance {


    from {

        transform:translateY(-40px);

        opacity:0;

    }


    to {

        transform:translateY(0);

        opacity:1;

    }


}



@keyframes glitch {


    0%,90%,100% {

        transform:none;

    }


    92% {

        transform:

        translateX(-3px);

    }


    94% {

        transform:

        translateX(3px);

    }


    96% {

        transform:none;

    }


}/* ==================================
        CONTENIDO PRINCIPAL
================================== */


.content {

    width:100%;

    max-width:900px;

    text-align:center;

    animation: fadeContent 1.5s ease;

}



@keyframes fadeContent {


    from {

        opacity:0;

        transform:translateY(30px);

    }


    to {

        opacity:1;

        transform:translateY(0);

    }


}



/* ==================================
        TITULOS
================================== */


.content h1 {


    font-size:clamp(2.5rem,6vw,5rem);

    font-weight:900;

    letter-spacing:5px;

    text-transform:uppercase;


    background:

    linear-gradient(

        90deg,

        #ff0099,

        #00ffff

    );


    -webkit-background-clip:text;

    -webkit-text-fill-color:transparent;


    text-shadow:

    0 0 20px rgba(255,0,153,.7);



}



.content h2 {


    margin-top:10px;


    font-size:clamp(1.5rem,4vw,2.8rem);


    font-weight:700;


    letter-spacing:3px;


    color:white;


}




/* ==================================
        DESCRIPCIÓN
================================== */


.description {


    margin:25px auto;


    max-width:650px;


    font-size:1.1rem;


    line-height:1.7;


    color:#ddd;


}




/* ==================================
        CUENTA REGRESIVA
================================== */


.countdown {


    display:flex;


    justify-content:center;


    align-items:center;


    gap:20px;


    margin:40px 0;


    flex-wrap:wrap;


}




.time-box {


    width:130px;


    height:120px;


    display:flex;


    flex-direction:column;


    justify-content:center;


    align-items:center;



    background:


    rgba(255,255,255,.08);



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



    border-radius:20px;



    backdrop-filter:blur(10px);



    box-shadow:


    0 0 20px rgba(255,0,153,.35);



    transition:.4s;



}



.time-box:hover {


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


    box-shadow:


    0 0 35px #ff0099;


}





.time-box span {


    font-size:3rem;


    font-weight:900;


    line-height:1;


    background:


    linear-gradient(

        45deg,

        #ff0099,

        #00ffff

    );


    -webkit-background-clip:text;


    -webkit-text-fill-color:transparent;


}



.time-box small {


    margin-top:10px;


    font-size:.8rem;


    letter-spacing:2px;


    color:white;


}/* ==================================
        REPRODUCTOR RADIO
================================== */


.radio-player {


    position:relative;


    margin:35px auto;


    width:100%;


    max-width:520px;


    padding:30px;



    background:


    rgba(0,0,0,.45);



    border-radius:25px;



    overflow:hidden;



    backdrop-filter:blur(12px);



    box-shadow:


    0 0 30px rgba(255,0,153,.4);



}



/* BORDE NEÓN ANIMADO */


.radio-player::before {


    content:"";


    position:absolute;


    inset:0;


    padding:2px;


    border-radius:25px;


    background:


    linear-gradient(

        90deg,

        #ff0099,

        #00ffff,

        #ff0099

    );



    background-size:300% 300%;


    animation:


    neonBorder 5s linear infinite;



    z-index:-1;



}




@keyframes neonBorder {


    0% {


        background-position:0% 50%;

    }


    50% {


        background-position:100% 50%;

    }


    100% {


        background-position:0% 50%;

    }


}




.player-header {


    display:flex;


    justify-content:center;


    align-items:center;


    gap:12px;


    font-size:1.2rem;


    font-weight:700;


    margin-bottom:25px;


    letter-spacing:2px;



}



.player-header i {


    color:#ff0099;


    font-size:1.5rem;


}





/* ==================================
        BOTONES REPRODUCTOR
================================== */


.play-btn {


    width:80%;


    padding:16px;


    border:none;


    border-radius:50px;


    cursor:pointer;



    font-size:1rem;


    font-weight:800;



    color:white;



    background:


    linear-gradient(

        90deg,

        #ff0099,

        #00ffff

    );



    transition:.4s;



}




.play-btn:hover {


    transform:scale(1.05);


    box-shadow:


    0 0 25px #ff0099;


}





.play-btn i {


    margin-right:10px;


}





.mute-btn {


    margin-left:15px;


    width:50px;


    height:50px;


    border-radius:50%;


    border:none;


    cursor:pointer;



    color:white;



    background:


    rgba(255,255,255,.15);



    font-size:1.2rem;


    transition:.3s;



}




.mute-btn:hover {


    background:#ff0099;


    transform:scale(1.1);


}




/* ==================================
        REDES SOCIALES
================================== */


.social-links {


    margin-top:35px;


    display:flex;


    justify-content:center;


    gap:20px;


}




.social-links a {


    width:50px;


    height:50px;


    display:flex;


    align-items:center;


    justify-content:center;



    border-radius:50%;



    color:white;



    font-size:1.3rem;



    background:


    rgba(255,255,255,.12);



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



    transition:.4s;



}





.social-links a:hover {


    transform:

    translateY(-8px)

    rotate(10deg);



    background:


    linear-gradient(

        45deg,

        #ff0099,

        #00ffff

    );



    box-shadow:


    0 0 20px #ff0099;



}/* ==================================
        FOOTER
================================== */


.footer {


    margin-top:40px;


    text-align:center;


    color:#ccc;


    font-size:.9rem;


    line-height:1.8;



}



.footer a {


    display:inline-block;


    margin-top:10px;



    color:white;



    text-decoration:none;



    font-weight:700;



    letter-spacing:2px;



    transition:.3s;



}



.footer a:hover {


    color:#ff0099;


    text-shadow:


    0 0 15px #ff0099;


}





/* ==================================
        PANTALLA DE CARGA
================================== */


.loader {


    position:fixed;


    width:100%;


    height:100%;


    top:0;


    left:0;



    background:


    #050505;



    display:flex;


    justify-content:center;


    align-items:center;



    z-index:9999;



    transition:.8s;



}





.loader-content {


    width:90%;


    max-width:400px;


    text-align:center;


}





.loader-logo {


    width:180px;



    margin-bottom:35px;



    filter:


    drop-shadow(0 0 20px #ff0099);



    animation:pulseLogo 2s infinite;



}





@keyframes pulseLogo {


    0%,100% {


        transform:scale(1);

    }


    50% {


        transform:scale(1.08);

    }


}





.progress-container {


    width:100%;


    height:12px;


    background:


    rgba(255,255,255,.15);



    border-radius:50px;


    overflow:hidden;


}





.progress-bar {


    height:100%;


    width:0%;



    background:


    linear-gradient(

        90deg,

        #ff0099,

        #00ffff

    );



    border-radius:50px;



    box-shadow:


    0 0 20px #ff0099;



}





#progressText {


    display:block;



    margin-top:15px;



    font-size:1.2rem;



    font-weight:700;



}







/* ==================================
        RESPONSIVE MÓVIL
================================== */


@media(max-width:768px){



    .container {


        padding:30px 15px;


    }




    .logo {


        width:200px;


    }




    .content h1 {


        letter-spacing:2px;


    }





    .description {


        font-size:.95rem;


    }





    .countdown {


        gap:12px;


    }





    .time-box {


        width:100px;


        height:100px;


    }





    .time-box span {


        font-size:2.2rem;


    }





    .radio-player {


        padding:22px;


    }





    .play-btn {


        width:100%;


        font-size:.9rem;


    }





}






@media(max-width:420px){



    .time-box {


        width:85px;


        height:90px;


    }




    .time-box span {


        font-size:1.8rem;


    }




    .social-links {


        gap:12px;


    }




    .social-links a {


        width:42px;


        height:42px;


    }



}