/* ==============================
   Pantalla de carga
============================== */

#loader{

    position:fixed;
    inset:0;

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

    background:
    linear-gradient(135deg,#0b3b75,#0d6efd);

    z-index:99999;

    transition:
        opacity .8s ease,
        visibility .8s ease;

}

.loader-hidden{

    opacity:0;
    visibility:hidden;

}

.loader-content{

    text-align:center;

    animation:
    aparecer 1s ease;

}

.loader-logo{

    width:170px;

    animation:
    flotar 2.5s ease-in-out infinite;

    filter:
    drop-shadow(0 10px 20px rgba(0,0,0,.35));

}

.loader-content h2{

    color:#fff;

    margin-top:25px;

    font-size:2rem;

    font-weight:bold;

}

.loader-content p{

    color:#dfefff;

    margin-top:10px;

    margin-bottom:25px;

    font-size:1rem;

}

/* ==============================
   Puntos
============================== */

.loader-dots{

    display:flex;
    justify-content:center;
    gap:10px;

}

.loader-dots span{

    width:12px;
    height:12px;

    border-radius:50%;

    background:white;

    animation:
    puntos 1.2s infinite;

}

.loader-dots span:nth-child(2){

    animation-delay:.2s;

}

.loader-dots span:nth-child(3){

    animation-delay:.4s;

}

/* ==============================
   Animaciones
============================== */

@keyframes puntos{

    0%{

        transform:translateY(0);
        opacity:.4;

    }

    50%{

        transform:translateY(-10px);
        opacity:1;

    }

    100%{

        transform:translateY(0);
        opacity:.4;

    }

}

@keyframes aparecer{

    from{

        opacity:0;
        transform:scale(.8);

    }

    to{

        opacity:1;
        transform:scale(1);

    }

}

@keyframes flotar{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-12px);

    }

    100%{

        transform:translateY(0);

    }

}