/*==================================================
                ARCHIVO PRINCIPAL CSS
==================================================*/


@import url("variables.css");

@import url("reset.css");

@import url("navbar.css");

@import url("hero.css");

@import url("sections.css");

@import url("footer.css");


/* ========== SCROLLBAR PERSONALIZADO ========== */
::-webkit-scrollbar {
    width: 12px;
}

::-webkit-scrollbar-track {
    background: rgba(15, 15, 25, 0.5);
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, #ff2d8d, #ff6ba6);
    border-radius: 10px;
    box-shadow: 0 0 15px rgba(255, 45, 141, 0.4);
}

::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(135deg, #ff6ba6, #ff2d8d);
    box-shadow: 0 0 25px rgba(255, 45, 141, 0.6);
}

/* Firefox */
* {
    scrollbar-color: #ff2d8d rgba(15, 15, 25, 0.5);
    scrollbar-width: thin;
}


/*==================================================
                EFECTOS GLOBALES
==================================================*/


::selection{

    background:var(--primary);

    color:white;

}





body{

    background:

    radial-gradient(

        circle at top right,

        rgba(255,45,141,.08),

        transparent 30%

    ),

    #050505;

}





/*==================================================
                TITULOS GLOW
==================================================*/


h1,h2{

    text-wrap:balance;

}




/*==================================================
                EFECTO GLASS GLOBAL
==================================================*/


.glass{

    background:rgba(255,255,255,.05);

    backdrop-filter:blur(15px);

    border:1px solid rgba(255,255,255,.08);

}





/*==================================================
                ANIMACIONES
==================================================*/


@keyframes fadeUp{


    from{

        opacity:0;

        transform:translateY(40px);

    }


    to{

        opacity:1;

        transform:translateY(0);

    }


}



.fadeUp{

    animation:fadeUp .8s ease forwards;

}