html {
    scroll-behavior: smooth;
}

#movil-empresa {
    position: relative;
    height: 100%;
}

.swiper {
    width: 100%;
    padding-top: 50px;
    padding-bottom: 50px;
}

.swiper-slide {
    background-position: center;
    background-size: cover;
    width: 300px;
    height: 300px;
}

.swiper-slide img {
    display: block;
    width: 100%;
}

.logo {
    animation: rotate 1s linear infinite;
    animation-play-state: paused;
    animation-delay: calc(var(--scroll) * -1s);

    animation-iteration-count: 1;
    animation-fill-mode: both;
}

.logo-derecha {
    animation: rotate 1s linear infinite;
    animation-play-state: paused;
    animation-delay: calc(var(--scroll) * -1s);

    animation-iteration-count: 1;
    animation-fill-mode: both;
}

.bg-izquierda-derecha {
    animation: translate-bg 2s linear infinite;
    animation-play-state: paused;
    animation-delay: calc(var(--scroll) * -1s);

    animation-iteration-count: 1;

}

@keyframes translate-bg {
    to {
        /*transform: translate(-100px, 0px);*/
        border-radius: 50%;
        scale: 3.5;
    }
}

@keyframes rotate {
    to {
        transform: translate(150px, 0px);
    }
}

@keyframes rotate-derecha {
    to {
        transform: translate(-1000px, 0px);
    }
}

.cursor {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: var(--width);
    height: var(--height);
    transform: translate(calc(var(--x) - var(--width) / 2), calc(var(--y) - var(--height) / 2));
    /* transition-duration: 125ms;
transition-timing-function: cubic-bezier(0.39, 0.575, 0.565, 1);
transition-property: width, height, transform; */
    transition: 150ms width cubic-bezier(0.39, 0.575, 0.565, 1),
        150ms height cubic-bezier(0.39, 0.575, 0.565, 1),
        150ms transform cubic-bezier(0.39, 0.575, 0.565, 1);
    z-index: 1;
    pointer-events: none;
    will-change: transform;
}

@media (pointer: fine) {
    .cursor {
        display: block;
    }
}

.cursor::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: var(--radius);
    border: 2px solid #023F85;
    opacity: var(--scale);
    -webkit-transform: scale(var(--scale));
    transform: scale(var(--scale));
    transition: 300ms opacity cubic-bezier(0.39, 0.575, 0.565, 1),
        300ms transform cubic-bezier(0.39, 0.575, 0.565, 1),
        150ms border-radius cubic-bezier(0.39, 0.575, 0.565, 1);
}

html:not(html:hover) .cursor::after {
    opacity: 0;
    transform: scale(0);
}

.link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    background: none;
    border-radius: 50%;
}

.btn {
    appearance: none;
    border: none;
    color: #eee;
    font-size: 1rem;
    line-height: 1.5rem;
    cursor: inherit;
    margin: -0.125rem -0.375rem;
    padding: 0.125rem 0.375rem;
    background: none;
    border-radius: 0.25rem;
    text-decoration-line: underline;
    text-decoration-style: dotted;
}

.btn:hover {
    text-decoration-line: none;
}