#view {
    position: relative;
    width: 100vw;
    height: calc(100vh - 53px);
    overflow: hidden;
    isolation: isolate;
}

.page {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    will-change: transform, opacity;
    z-index: 1;
}

/* estado normal */
.page-current {
    z-index: 2;
}

/* página nueva entrando */
[class*="page-enter-"] {
    z-index: 4;
}

/* página vieja saliendo */
[class*="page-leave-"] {
    z-index: 3;
}


/* === TRANSICIONES === */
/* Slide */
.page-enter-slide-forward {
    transform: translateX(100%);
    opacity: 0.9;
}

.page-enter-slide-forward-active {
    transition: transform .3s ease, opacity .3s ease;
    transform: translateX(0);
    opacity: 1;
}

.page-leave-slide-forward-active {
    transition: transform .3s ease, opacity .3s ease;
    transform: translateX(-25%);
    opacity: 0.4;
}

.page-enter-slide-back {
    transform: translateX(-25%);
    opacity: 0.4;
}

.page-enter-slide-back-active {
    transition: transform .3s ease, opacity .3s ease;
    transform: translateX(0);
    opacity: 1;
}

.page-leave-slide-back-active {
    transition: transform .3s ease, opacity .3s ease;
    transform: translateX(100%);
    opacity: 0.8;
}
/* Fade */
.page-enter-fade-forward,
.page-enter-fade-back {
    opacity: 0;
}

.page-enter-fade-forward-active,
.page-enter-fade-back-active {
    transition: opacity .3s ease;
    opacity: 1;
}

.page-leave-fade-forward-active,
.page-leave-fade-back-active {
    transition: opacity .3s ease;
    opacity: 0;
}
/* Push */
.page-enter-push-forward {
    transform: translateX(100%);
}

.page-enter-push-forward-active {
    transition: transform .3s ease;
    transform: translateX(0);
}

.page-leave-push-forward-active {
    transition: transform .3s ease;
    transform: translateX(-30%);
    opacity: 0.4;
}

.page-enter-push-back {
    transform: translateX(-30%);
}

.page-enter-push-back-active {
    transition: transform .3s ease;
    transform: translateX(0);
    opacity: 1;
}

.page-leave-push-back-active {
    transition: transform .3s ease;
    transform: translateX(100%);
    opacity: 0.8;
}
/* Circle */
.page-enter-circle-forward,
.page-enter-circle-back {
    transform: scale(0);
    opacity: 0;
    border-radius: 50%;
}

.page-enter-circle-forward-active,
.page-enter-circle-back-active {
    transition: transform .4s ease, opacity .4s ease, border-radius .4s ease;
    transform: scale(1);
    opacity: 1;
    border-radius: 0;
}

.page-leave-circle-forward-active,
.page-leave-circle-back-active {
    transition: transform .4s ease, opacity .4s ease, border-radius .4s ease;
    transform: scale(2);
    opacity: 0;
    border-radius: 50%;
}


/* preloader */
.apf-preloader-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.4);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.25s ease;
    z-index: 9999;
}