.container-loader2 {
    height: 100vh;
    width: 100%;
    background: #000;
    position: fixed;
    z-index: 100;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    opacity: 0.5;
}

.container-loader2.off {
    animation: outSiteLoader .5s ease forwards;
    animation-delay: .25s;
    z-index: 1;
}

.container-loader {
    height: 100vh;
    width: 100%;
    background: rgba(255, 255, 255, 0.75);
    position: fixed;
    z-index: 100;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.container-loader.off {
    animation: outSiteLoader .5s ease forwards;
    animation-delay: .25s;
    z-index: 1;
}

.loaderpag {
    position: relative;
    /* Esto permite posicionar el ::after relativo a este contenedor */
    display: flex;
    flex-direction: column;
    align-items: center;
    /* O flex, block, según tu necesidad */
}

.loaderpag::after {
    content: 'Cargando...';
    color: #768592;
    font-family: Inter, sans-serif;
    /* Asegúrate de tener la fuente Inter cargada o incluye una de respaldo */
    font-size: 1rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1.5rem;
    position: absolute;
    /* Posiciona el texto respecto al contenedor */
    bottom: -30px;
    /* Ajusta la posición según necesites */
    left: 50%;
    transform: translateX(-50%);
    /* Centra el texto horizontalmente */
    opacity: 0;
}

#closeLoader{
    opacity: 0;
}

.letter {
    opacity: 0.5;
}

.circle,
.letter2,
.letter.servipag {
    opacity: 0;
}

@keyframes fadeInOutLeters {

    0%,
    25% {
        opacity: 0.5;
    }

    12.5% {
        opacity: 1;
    }

    25.01%,
    100% {
        opacity: 0.5;
    }
}

@keyframes highlightAll {

    0%,
    50% {
        opacity: 0;
    }

    10% {
        opacity: 1;
    }

    50.1%,
    100% {
        opacity: 0;
    }
}


@keyframes highlightCircle {

    0%,
    25% {
        opacity: 0.5;
    }

    12.5% {
        opacity: 1;
    }

    25.01%,
    100% {
        opacity: 0.5;
    }
}



@keyframes outSiteLoader {
    0% {
        opacity: 0.5;
    }

    99% {
        opacity: 0;
        visibility: hidden;
    }

    100% {
        opacity: 0;
        visibility: hidden;
        max-height: 0;
    }
}


@keyframes FadeInButtonClose {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 0.5;
    }

}





.letter2,
.loaderpag::after,
.letter.servipag,
.circle {
    animation: highlightAll 3s ease-in-out 0s infinite;
}

.letter.p {
    animation: fadeInOutLeters 3s ease-in-out 1.5s infinite;
}

.letter.a {
    animation: fadeInOutLeters 3s ease-in-out 1.75s infinite;
}

.letter.g {
    animation: fadeInOutLeters 3s ease-in-out 2s infinite;
}


#closeLoader{
    animation: FadeInButtonClose 1s ease-in-out 0s forwards;
}