/* Loader container */
    .louder {
        width: 100%;
        min-height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
        background: #00000079;
        position: fixed;
        /* Fixed to cover the entire viewport */
        top: 0;
        left: 0;
        z-index: 9999;
        /* Ensure it's above other content */
    }

    .heartbeatloader {
        position: relative;
        /* Position relative for inner positioning */
        width: 10vmin;
        height: 10vmin;
    }

    .svgdraw {
        top: 30%;
        left: 26%;
        position: absolute;
        width: 50%;
        height: 50%;
        color: #fff;
        transform: scale(1.4);
        z-index: 3;
    }

    .path {
        stroke: rgba(255, 255, 255, 0.95);
        stroke-width: 4;
        stroke-dasharray: 1000px;
        stroke-dashoffset: 1000px;
        animation: draw 1.5s infinite forwards normal linear;
        animation-delay: 0.1s;
        position: relative;
    }

    @keyframes draw {
        to {
            stroke-dashoffset: 0;
        }
    }

    .innercircle {
        position: absolute;
        top: 17%;
        left: 100.5%;
        transform: translate(-50%, -50%) scale(1.2);
        width: 160%;
        height: auto;
        z-index: 1;
        opacity: 0.97;
        animation: innerbeat 1.5s infinite linear forwards;
    }

    .innercircle:before,
    .innercircle:after {
        position: absolute;
        content: "";
        left: 25%;
        top: 0;
        width: 25%;
        height: auto;
        padding-bottom: 40%;
        background: rgb(225, 95, 95);
        border-radius: 50px 50px 0 0;
        transform: rotate(-45deg);
        transform-origin: 0 100%;
    }

    .innercircle:after {
        left: 0;
        transform: rotate(45deg);
        transform-origin: 100% 100%;
    }

    @keyframes innerbeat {
        0% {
            transform: translate(-50%, -50%) scale(1.2);
        }

        10% {
            transform: translate(-50%, -50%) scale(1.2);
        }

        50% {
            transform: translate(-50%, -50%) scale(1.3);
        }

        60% {
            transform: translate(-50%, -50%) scale(1.25);
        }

        75% {
            transform: translate(-50%, -50%) scale(1.3);
        }
    }

    .outercircle {
        width: 100%;
        height: 100%;
        border-radius: 50%;
        background-color: rgba(238, 92, 92, 0.9);
        box-shadow: 0 0 30px 0px #fff;
        position: absolute;
        z-index: -1;
        opacity: 0.7;
        top: 0;
        left: 0;
        transform: scale(1.2);
        animation: outerbeat 1.5s infinite linear forwards;
    }

    @keyframes outerbeat {
        0% {
            transform: scale(1.2);
        }

        10% {
            transform: scale(1.2);
        }

        50% {
            transform: scale(1.3);
        }

        60% {
            transform: scale(1.25);
        }

        75% {
            transform: scale(1.3);
        }
    }

    /* Hide loader after page load */
    body.loaded .louder {
        display: none;
    }


    /* START CONTENIDO AND SCROLL*/

    aside {
        display: flex;
        align-items: center;
        justify-content: center;
        overflow-x: hidden;
    }

    aside .animateL {
        opacity: 0;
        transition: 1s;
        filter: blur(5px);
    }

    aside.show-animate .animateL {
        opacity: 1;
        filter: blur(0);
    }

    aside .animateR {
        opacity: 0;
        transition: 1s;
        filter: blur(5px);
    }

    aside.show-animate .animateR {
        opacity: 1;
        filter: blur(0);
    }

    /* Animaciones generales */
    aside .animateZ {
        opacity: 0;
        transform: scale(0.5);
        transition: opacity 1s ease, transform 1s ease;
        /* Suaviza tanto opacidad como escala */
    }

    aside.show-animate .animateZ {
        opacity: 1;
        transform: scale(1);
    }

    aside .servicios {
        opacity: 0;
        transition: 1s;
        filter: blur(5px);
    }

    aside.show-animate .servicios {
        opacity: 1;
        filter: blur(0);
    }

    /*-------sectiones-----*/

    .sec-1 aside .animateL,
    .sec-3 aside .animateL,
    .sec-4 aside .animateL,
    .sec-5 aside .animateL,
    .sec-6 aside .animateL,
    .sec-9 aside .animateL,
    .sec-10 aside .animateL,
    .sec-16 aside .animateL,
     aside20animateL {
        transform: translateX(-100%);

    }

    .sec-1 aside.show-animate .animateL,
    .sec-3 aside.show-animate .animateL,
    .sec-4 aside.show-animate .animateL,
    .sec-5 aside.show-animate .animateL,
    .sec-6 aside.show-animate .animateL,
    .sec-9 aside.show-animate .animateL,
    .sec-10 aside.show-animate .animateL,
    .sec-16 aside.show-animate .animateL,
    .sec-20 aside.show-animate .animateL {
        transform: translateX(0);
    }

    .sec-1 aside .animateR,
    .sec-3 aside .animateR,
    .sec-4 aside .animateR,
    .sec-5 aside .animateR,
    .sec-6 aside .animateR,
    .sec-9 aside .animateR,
    .sec-10 aside .animateR,
    .sec-16 aside .animateR,
    .sec-20 aside .animateR {
        transform: translateX(100%);

    }

    .sec-1 aside.show-animate .animateR,
    .sec-3 aside.show-animate .animateR,
    .sec-4 aside.show-animate .animateR,
    .sec-5 aside.show-animate .animateR,
    .sec-6 aside.show-animate .animateR,
    .sec-9 aside.show-animate .animateR,
    .sec-10 aside.show-animate .animateR,
    .sec-16 aside.show-animate .animateR,
    .sec-20 aside.show-animate .animateR {
        transform: translateX(0);
    }

    /*SOMBRA DE DERECHA A IZQUIERDA*/

    .sec-2 aside .showRight-animate {
        position: absolute;
        top: 0;
        right: 0;
        width: 100%;
        height: 100%;
        background: #1F242D;
        transition: 1s;
        transition-delay: calc(.2s * var(--i));

    }

    .sec-2 aside.show-animate .showRight-animate {
        width: 0;
    }


    /*SEC-3*/

    .sec-3 aside .servicios {
        transform: translateX(-100%);
        transition: transform 0.5s ease-in-out;
        transition-delay: calc(.2s * var(--i));
    }
    
    .sec-3 aside.show-animate .servicios {
        transform: translateX(0);
    }