@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap');

.section2frontend {
    position: relative;
    width: 100%;
    min-height: 400px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    background: url('/img/fulltechnexus/fullstack/fondo2.png') no-repeat center center;
    background-size: 100% 100%;
    padding: 50px 20px;
}

.section2frontend-container {
    max-width: 800px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.section2frontend .req-alumno {
    width: 80%;
    max-width: 400px;
    height: auto;
}

.section2frontend .section2frontend-text {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: 1.6;
    color: white;
    margin: 0;
    padding: 0 10px;
}

.section2frontend .descarga-brochure {
    width: 70%;
    max-width: 300px;
    height: auto;
    cursor: pointer;
    transition: transform 0.3s ease;
    padding-top: 70px;
}

.section2frontend .descarga-brochure:hover {
    transform: scale(1.1);
}


@media (max-width: 768px) {
    .section2frontend-container {
        max-width: 90%;
    }

    .section2frontend .req-alumno {
        width: 90%;
    }

    .section2frontend .descarga-brochure {
        width: 80%;
    }

    .section2frontend .section2frontend-text {
        font-size: 16px;
    }
}

.dl-button {
    --duration: 4000;
    --success: #ffffff;
    --grey-light: #99A3BA;
    --grey: #ffffff;
    --grey-dark: #3F4656;
    --light: #ff0000;
    --shadow: rgba(18, 22, 33, .6);
    --shadow-dark: rgba(18, 22, 33, .85);
    display: block;
    text-decoration:  none !important;
    perspective: 500px;


    &>div {
        position: relative;
        background: linear-gradient(to top, #0071bd, #00ffff);
        border-radius: 50px;
        overflow: hidden;
        display: flex;
        font-weight: 700;   
        padding: 16px 24px;
        box-shadow: 0 4px 12px var(--shadow);
        transition: transform 0.4s ease, box-shadow 0.4s ease;
        overflow: hidden !important;
        background: linear-gradient(to top, #0071bd, #00ffff) !important;
        border-radius: 50px !important;


        .icon {
            --color: var(--grey);
            margin-right: 12px;
            position: relative;
            transform: translateZ(8px);

            div {
                overflow: hidden;
                position: relative;
                width: 20px;
                height: 22px;

                &:before,
                &:after {

                    content: '';
                    position: absolute;
                    width: 2px;
                    height: 2px;
                    top: 2px;
                    transition: opacity .3s ease;
                }

                &:before {
                    left: 6px;
                    background-image: radial-gradient(circle at 0 100%, var(--color) 2px, #00ffff00 0px)
                }

                &:after {
                    right: 6px;
                    background-image: radial-gradient(circle at 100% 100%, var(--color) 2px, #ffffff00 0px)
                }

                svg {
                    width: 20px;
                    height: 18px;
                    display: block;
                    margin-top: 2px;
                    position: relative;
                    z-index: 1;


                    &.arrow {
                        color: #00ffff;
                        position: absolute;
                        left: 0;
                        top: 0;
                        z-index: 2;
                        transform: translateY(-1px);
                    }

                    &.shape {
                        color: var(--grey);
                        transition: color .4s ease;
                    }
                }
            }

            span {
                --s: 1;
                position: absolute;
                left: 1px;
                right: 1px;
                bottom: 2px;
                background: var(--color);
                height: 6px;
                border-radius: 50%;
                display: block;
                transform: translateY(0) scale(var(--s));
            }
        }

        .label {
            color: var(--grey) !important;
            font-family: 'Montserrat', sans-serif;
            font-weight: 700;
            font-size: 16px;
            line-height: 22px;
            position: relative;
            transition: color .4s ease;
            transform: translateZ(8px);


            &>div {
                display: flex;
                transition: opacity .25s ease;

                &:not(.show) {
                    position: absolute;
                    left: 0;
                    top: 0;
                    opacity: 0;
                }

                &.hide {
                    opacity: 0;
                }

                .counter {
                    overflow: hidden;
                    display: flex;
                    height: 18px;
                    line-height: 18px;
                    margin: 2px 0;
                    position: relative;
                    transition: opacity .3s ease;

                    &:before,
                    &:after {

                        content: '';
                        display: block;
                        position: absolute;
                        left: 0;
                        right: 0;
                        height: 3px;
                        z-index: 1;
                    }

                    &:before {
                        top: 0;
                        background: linear-gradient(to bottom, rgba(0, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 100%);
                    }

                    &:after {
                        bottom: 0;
                        background: linear-gradient(to top, rgba(0, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 100%);
                    }

                    span {
                        display: inline-block;
                        color: var(--grey) !important;

                        margin: 0 4px 0 2px;
                    }

                    ul {
                        --y: 0;
                        margin: 0;
                        padding: 0;
                        list-style: none;
                        width: 10px;
                        height: 18px;
                        -webkit-backface-visibility: hidden;
                        backface-visibility: hidden;
                        transform: translateY(var(--y)) translateZ(0);

                        &:nth-child(1) {
                            transition: transform calc(var(--duration) * .2ms) ease-in-out;
                        }

                        &:nth-child(2) {
                            transition: transform calc(var(--duration) * .8ms) ease-in-out;
                        }

                        &:nth-child(3) {
                            transition: transform calc(var(--duration) * .8ms) ease-in-out;
                        }

                        li {
                            width: 10px;
                            height: 18px;
                        }
                    }

                    &.hide {
                        opacity: 0;
                    }
                }
            }
        }

        .progress {
            --s: 0;

            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
            height: 3px;
            transform-origin: 50% 100%;
            transform: scaleY(var(--s));
            transition: transform .4s ease;

            &:before,
            &:after {


                --s: 1;
                content: '';
                position: absolute;
                left: 0;
                top: 0;
                bottom: 0;
                right: 0;
                transform-origin: 0 50%;
                transform: scaleX(var(--s));
            }

            &:before {
                opacity: .35;
                opacity: 0;
            }

            &:after {
                --s: 0;
                background: var(--grey);

                transition: transform calc(var(--duration) * .9ms) ease-in-out;
            }
        }
    }

    &.active {
        &>div {
            animation: button calc(var(--duration) * 1ms) linear forwards;
            background: linear-gradient(to top, #0071bd, #00ffff);


            .icon {

                div {

                    &:before,
                    &:after {

                        opacity: 0;
                        transition-delay: .4s;
                    }
                }

                svg {
                    &.arrow {
                        animation: arrow calc(var(--duration) * .18ms) linear 4 calc(var(--duration) * .2ms);



                    }
                }

                span {
                    animation: span calc(var(--duration) * .18ms) linear 4 calc(var(--duration) *.2ms);

                }
            }

            .label {
                &>div {
                    .counter {
                        ul {
                            &:nth-child(1) {
                                --y: -18px;
                                transition-delay: calc(var(--duration) * .72ms);
                            }

                            &:nth-child(2) {
                                --y: -180px;
                                transition-delay: calc(var(--duration) * .09ms);
                                animation: motion calc(var(--duration) * .5ms) linear forwards calc(var(--duration) * .19ms);
                            }

                            &:nth-child(3) {
                                --y: -540px;
                                transition-delay: calc(var(--duration) * .075ms);
                                animation: motion calc(var(--duration) * .8ms) linear forwards calc(var(--duration) * .075ms);
                            }
                        }
                    }
                }
            }

            .progress {
                --s: 1;
                transition-delay: .4s;

                &:after {
                    --s: 1;
                    transition-delay: .4s;
                }
            }
        }
    }

    &.done {
        &>div {
            .icon {
                color: var(--success) !important;
            }
        }

        .label {
            --color: var(--success);

            .counter {
                width: 0;
            }
        }
    }

}


.dl-button .counter span {
    color: var(--success) !important;
}

.dl-button.done .label .state span {
    color: var(--success) !important;
}

.dl-button.done .icon .shape {
    color: var(--success) !important;
}

.dl-button .active {
    box-shadow: none !important;
    background: transparent !important;

}



@keyframes arrow {
    38% {
        transform: translateY(100%);
        opacity: 1;
    }

    39% {
        transform: translateY(100%);
        opacity: 0;
    }

    40% {
        transform: translateY(-100%);
        opacity: 0;
    }

    41% {
        transform: translateY(-100%);
        opacity: 1;
    }

    100% {
        transform: translateY(-1px);
        opacity: 1;
    }
}

@keyframes span {
    25% {
        transform: translateY(2px) scale(var(--s));
    }

    55% {
        transform: translateY(2px) scale(var(--s));
    }

    80%,
    100% {
        transform: translateY(0) scale(var(--s));
    }
}

@keyframes motion {

    20%,
    70% {
        filter: blur(.4px);
    }
}

@keyframes button {
    0% {
        transform: translateX(0) translateZ(0) scale(1) rotateY(0deg);
    }

    10% {
        transform: translateX(0) translateZ(0) scale(.96) rotateY(0deg);
        box-shadow: 0 4px 8px var(--shadow-dark);
    }

    20% {
        transform: translateX(-16px) translateZ(32px) scale(1) rotateY(-16deg);
        box-shadow: 4px 12px 20px var(--shadow-dark);
    }

    85% {
        transform: translateX(16px) translateZ(32px) scale(1) rotateY(16deg);
        box-shadow: -4px 12px 20px var(--shadow-dark);
    }

    95% {
        transform: translateX(0) translateZ(0) scale(1.12) rotateY(0deg);
        box-shadow: 0 8px 24px var(--shadow-dark);
    }

    100% {
        transform: translateX(0) translateZ(0) scale(1) rotateY(0deg);
    }
}

.dl-button {
    &.done {
        &+.restart {
            opacity: 1;
            visibility: visible;
        }
    }
}


a.dl-button.active,
a.dl-button:active {
    background: transparent !important;
    color: inherit !important;

    box-shadow: none !important;
    border: none !important;
}