*::-webkit-scrollbar-track {
    -webkit-box-shadow: inset -5px -5px 8px -1px black, 5px 5px 8px -1px black;
    box-shadow: inset -5px -5px 8px -1px black, 5px 5px 8px -1px black;
    background-color: black;
}

*::-webkit-scrollbar {
    width: 6px;
    background-color: black;
}

*::-webkit-scrollbar-button {
    background-color: #029cd9;
}

*::-webkit-scrollbar-thumb {
    background-color: #029cd9;
}

.scroll-link.active {
    color: #029cd9;
}

@keyframes bg-slide {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }
}
.bg-slide {
    animation: bg-slide 130s linear infinite;
}
@media (max-width: 640px) {
    .bg-slide {
        animation: bg-slide 35s linear infinite;
    }
}


@keyframes slide-proyect {
    from {
        transform: translateY(0);
    }

    to {
        transform: translateY(-50%);
    }
}
@keyframes slide-proyect-invert {
    from {
        transform: translateY(-50%);
    }

    to {
        transform: translateY(0);
    }
}
.slide-proyect {

    animation: slide-proyect 10s infinite linear;
}
.slide-proyect-invert {
    animation: slide-proyect-invert 20s infinite linear;
}

.shadow-interna {
    position: relative;
    padding: 20px;
    background-color: #ffffff00;
}

.shadow-interna::before {
    content: "";
    width: 100%;
    height: 165px;
    background: linear-gradient(
        180deg,
        #020912 26.56%,
        rgba(30, 36, 51, 0) 100%
    );
    position: absolute;
    top: -25px;
    left: 0;
    z-index: 2;
}
.shadow-interna::after {
    content: "";
    width: 100%;
    height: 165px;
    background: linear-gradient(0deg, #020912 26.56%, rgba(30, 36, 51, 0) 100%);
    position: absolute;
    bottom: -25px;
    left: 0;
}

@media (max-width: 327px) {
    .fold {
        font-size: 33px !important;
        line-height: 35px !important;
    }
}

.btn-wsp {
    position: fixed;
    bottom: 15px;
    left: 15px;
    font-size: 14px;
    transition: bottom 0.2s;
}

.btn-wsp .btn-wsp-button {
    position: relative;
    border-radius: 50%;
    box-shadow: 1px 1px 4px rgba(60, 60, 60, 0.4);
    transition: box-shadow 0.2s;
    cursor: pointer;
    overflow: hidden;
}

.btn-wsp .btn-wsp-button img,
.btn-wsp .btn-wsp-button svg {
    position: absolute;
    width: 100%;
    height: auto;
    object-fit: cover;
    top: 50%;
    left: 50%;
    transform: translate3d(-50%, -50%, 0);
    border-radius: 50%;
}

.btn-wsp:hover {
    bottom: 17px;
}

.btn-wsp:hover .btn-wsp-button {
    box-shadow: 1px 2px 8px rgba(60, 60, 60, 0.4);
}

.btn-wsp .btn-wsp-popup {
    /*border: 2px solid white;*/
    border-radius: 6px;
    background-color: #e5ddd5;
    position: absolute;
    overflow: hidden;
    padding: 0;
    box-shadow: 1px 2px 8px rgba(60, 60, 60, 0.25);
    width: 0px;
    height: 0px;
    bottom: 0;
    opacity: 0;
    transition: bottom 0.1s ease-out, opacity 0.2s ease-out;
    transform-origin: bottom;
}

.btn-wsp .btn-wsp-popup.active {
    padding: 0 12px 12px 12px;
    width: 260px;
    height: auto;
    bottom: 82px;
    opacity: 1;
}

.btn-wsp .btn-wsp-popup .btn-wsp-message {
    background-color: white;
    padding: 8px;
    border-radius: 0px 5px 5px 5px;
    box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.15);
    opacity: 0;
    transition: opacity 0.2s;
    color: black;
}

.btn-wsp .btn-wsp-popup.active .btn-wsp-message {
    opacity: 1;
    transition-delay: 0.2s;
    padding: 14px;
}

.btn-wsp .btn-wsp-popup .btn-wsp-head {
    text-align: right;
    color: white;
    margin: 0 -15px 10px -15px;
    padding: 6px 12px;
    display: flex;
    justify-content: space-between;
    cursor: pointer;
}

.btn-wsp .btn-wsp-input-message {
    background-color: white;
    margin: 10px -15px -15px -15px;
    padding: 0 15px;
    display: flex;
    align-items: center;
}

.btn-wsp .btn-wsp-input-message input {
    border: 1px solid #ccc;
    border-radius: 4px;
    box-shadow: none;
    padding: 8px;
    margin: 10px 0;
    width: 100%;
    max-width: 100%;
    font-family: inherit;
    font-size: inherit;
    resize: none;
    height: 50px;
}

.btn-wsp .btn-wsp-btn-send {
    margin-left: 12px;
    font-size: 0;
    cursor: pointer;
}

.scrollToTop {
    position: fixed;
    right: 30px;
    bottom: -10px;
    width: 45px;
    height: 45px;
    line-height: var(--body-line-height);
    border-radius: 5px;
    background-color: #029cd9;
    box-shadow: 0px 16px 32px rgba(0, 0, 0, 0.3);
    font-size: 20px;
    text-align: center;
    z-index: 100;
    cursor: pointer;
    color: #ffffff !important;
    transition: 0.3s;
    transform: translateY(100%);
    display: flex;
    justify-content: center;
    align-items: center;
}
.scrollToTop:hover {
    color: #ffffff !important;
    box-shadow: 0px 16px 32px rgba(0, 0, 0, 0.5);
}
.scrollToTop:focus {
    color: #ffffff !important;
}

.topActive {
    right: 90px;
    bottom: 20px;
    transform: translateY(0%);
}
@media (max-width: 1599px) {
    .topActive {
        right: 90px;
        bottom: 20px;
    }
}


dialog::backdrop{
    background: rgba(0, 0, 0, 0.759);
    backdrop-filter: blur(2px);
}