/* =========================
   UTILIDADES PROPIAS
========================= */

.text-center{
    text-align:center;
}

.mb-10{
    margin-bottom:2.5rem;
}

.mb-12{
    margin-bottom:3rem;
}

.mt-2{
    margin-top:.5rem;
}

.mt-4{
    margin-top:1rem;
}

.px-8{
    padding-left:2rem;
    padding-right:2rem;
}

.pb-12{
    padding-bottom:3rem;
}

.flex{
    display:flex;
}

.justify-center{
    justify-content:center;
}

.justify-between{
    justify-content:space-between;
}

.items-center{
    align-items:center;
}

.gap-3{
    gap:.75rem;
}

.gap-10{
    gap:2.5rem;
}

.w-full{
    width:100%;
}

.h-52{
    height:13rem;
}

.text-xl{
    font-size:1.25rem;
}

.text-3xl{
    font-size:2rem;
}

.font-bold{
    font-weight:700;
}

.uppercase{
    text-transform:uppercase;
}

.relative{
    position:relative;
}

.overflow-hidden{
    overflow:hidden;
}

.rounded-lg{
    border-radius:12px;
}

/* HERO */

.hero{
    padding:0 2rem;
    text-align:center;
    margin-bottom:2.5rem;
}

/* SOCIALS */

.socials{
    display:flex;
    justify-content:center;
    gap:2.5rem;
    margin-bottom:3rem;
}

.music-player{
    margin-bottom:3rem;
    border:1px solid rgba(151, 47, 175, 0.348);
    border-radius:12px;
    overflow:hidden;
}

/* ===== PRELOADER ===== */

body.loading{
    overflow: hidden;
}

#preloader.hide{
    opacity: 0;
    pointer-events: none;
}

#preloader{
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100vh;

    background: #ffffff;

    z-index: 999999999;

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

    transition: opacity 1s ease;
}

#preloader.hide{
    opacity: 0;
    visibility: hidden;
}

.loader-content{
    text-align: center;
}

.loader-logo img{
    width: 150px;
    animation: pulse 2s infinite ease-in-out;
}

.loader-line{
    width: 220px;
    height: 4px;
    margin: 25px auto;
    border-radius: 20px;
    background: rgb(255, 255, 255);
    overflow: hidden;
    position: relative;
}

.loader-line::before{
    content: "";
    position: absolute;
    left: -40%;
    width: 40%;
    height: 100%;
    background: linear-gradient(90deg,#0037ff,#54f937,#aa00ff);
    animation: loading 1.4s infinite;
}

.loading-text{
    color: rgb(4, 4, 4);
    font-family: sans-serif;
    letter-spacing: 3px;
    font-size: 14px;
    opacity: 0.8;
}

/* Animaciones */

@keyframes loading{
    0%{
        left: -40%;
    }

    100%{
        left: 100%;
    }
}

@keyframes pulse{
    0%{
        transform: scale(1);
        opacity: 1;
    }

    50%{
        transform: scale(1.08);
        opacity: .8;
    }

    100%{
        transform: scale(1);
        opacity: 1;
    }
}