.content-swiper {
    width: 100%;
    max-width: 1280px;
    min-height: auto;
    padding: 0 16px;
    gap: 32px;
}

.swiper-blur {
    display: none;
}

.swiper-3d {
    perspective: 400px;
}

.swiper-common {
    width: 100vw;
    height: 400px;
}

    .swiper-common .swiper-wrapper .swiper-slide {
        height: 0px;
        transform: translate3d(0px, -15px, -120px) rotateX(25deg) rotateY(0deg) scale(2) !important;
    }

    .swiper-common .swiper-wrapper .swiper-slide-next {
        transform: translate3d(-75px, 9px, 0px) rotateX(0deg) rotateY(0deg) scale(2) !important;
    }

    .swiper-common .swiper-wrapper .swiper-slide-prev {
        transform: translate3d(60px, 9px, 0px) rotateX(0deg) rotateY(0deg) scale(2) !important;
    }

    .swiper-common .swiper-wrapper .swiper-slide-active .card .card-body {
        display: initial !important;
    }

    .swiper-common .swiper-wrapper .swiper-slide-active .card {
        border-radius: 40px;
        border-width: 0px;
        box-shadow: 0px 6.46px 12.93px 6.46px rgba(0, 0, 0, 0.05);
    }

        .swiper-common .swiper-wrapper .swiper-slide-active .card .card-img-top {
            border-radius: 40px;
        }

    .swiper-common .swiper-wrapper .swiper-slide-active {
        transform: translate3d(-90px, 0px, 0px) rotateX(0deg) rotateY(0deg) scale(1) !important;
    }

        .swiper-common .swiper-wrapper .swiper-slide-active .card {
            width: 250px;
        }

            .swiper-common .swiper-wrapper .swiper-slide-active .card .card-img-top {
                max-height: 156px;
                height: auto;
                border-radius: 40px 40px 0 0;
            }

            .swiper-common .swiper-wrapper .swiper-slide-active .card .card-body {
                max-height: 206px;
                height: auto;
            }

    .swiper-common .swiper-wrapper .swiper-slide .card .card-body {
        display: none;
    }

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

.gradient-overlay {
    position: fixed;
    left: 0;
    width: 100%;
    height: 400px;
    pointer-events: none; /* permite clics sobre el contenido */
    background: linear-gradient(to right, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, 0) 60%, rgba(255, 255, 255, 1) 100%);
    z-index: 11;
}

.contenido-swiper-principal {
    position: relative;
    z-index: 10; /* para quedar por encima del fondo */
    display: flex;
    justify-content: center;
    align-items: center;
}

.swiper-button-pause {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 10;
    width: 40px;
    height: 40px;
    background: var(--Gray-00);
    border: 2px solid var(--Primary-50);
    color: white;
    border-radius: 50%;
    font-size: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

.swiper-common-buttons .swiper-pagination-bullets .swiper-pagination-bullet {
    background-color: var(--Primary-2);
    opacity: 0.5;
    border: 1.5px solid var(--Primary-50);
}

.swiper-common-buttons .swiper-pagination-bullets .swiper-pagination-bullet-active {
    opacity: 1;
    background-color: var(--Primary-50);
}

.bg-badge-commom-section {
    background-color: var(--Gray-30);
    padding: 9px;
    width: fit-content;
    border-radius: 0 16px 0 16px;
    margin-bottom: 10px;
}

.badge-commom-section {
    color: var(--Primary-Gradient-04);
    background: var(--Primary-Gradient-03);
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
    margin: 0px;
    font-weight: 600;
}

.swiper-common-buttons .swiper-btn-prev::after,
.swiper-common-buttons .swiper-btn-next::after {
    content: none !important;
}

.swiper-common > .swiper-common-buttons .swiper-pagination-bullets,
.swiper-common-buttons .swiper-pagination-bullets.swiper-pagination-horizontal,
.swiper-common-buttons .swiper-pagination-custom,
.swiper-common-buttons .swiper-pagination-fraction {
    bottom: var(--swiper-pagination-bottom, -20px);
}

/*.swiper-common-buttons .swiper-btn-prev, 
        .swiper-common-buttons .swiper-btn-next {
            width: 40px !important;
            height: 30px !important;
            z-index: 10 !important;
            border-radius: 99px;
        }*/

.swiper-common-buttons {
    position: absolute; /* esto ubica todo el grupo */
    bottom: 0; /* o top, según necesidad */
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    z-index: 10;
}

    .swiper-common-buttons .swiper-pagination {
        margin: 0 0 20px 0;
    }
    /* quitar position absolute de los botones individuales */
    .swiper-common-buttons .swiper-btn-prev,
    .swiper-common-buttons .swiper-btn-next,
    .swiper-common-buttons .swiper-pagination {
        position: static; /* o no declarar position en absoluto */
        display: flex;
        align-items: center;
        justify-content: center;
    }

        .swiper-common-buttons .swiper-btn-prev:active,
        .swiper-common-buttons .swiper-btn-prev:focus,
        .swiper-common-buttons .swiper-btn-prev:hover,
        .swiper-common-buttons .swiper-btn-next:active,
        .swiper-common-buttons .swiper-btn-next:focus,
        .swiper-common-buttons .swiper-btn-next:hover {
            border: 2px solid var(--Primary-50);
        }

@media (min-width: 360px) {
    .swiper-common .swiper-wrapper .swiper-slide-active {
        transform: translate3d(clamp(-80px, -8vw, -200px), 0px, 0px) rotateX(0deg) rotateY(0deg) scale(1) !important;
    }

    .swiper-blur {
        display: initial;
    }
}

/*@media (min-width: 390px) {
    .swiper-common .swiper-wrapper .swiper-slide-active {
        transform: translate3d(clamp(-80px, -8vw, -200px), 0px, 0px) rotateX(0deg) rotateY(0deg) scale(1) !important;
    }

        .swiper-common .swiper-wrapper .swiper-slide-active .card {*/
/*width: 290px;*/
/*}
}*/
@media (min-width: 430px) {
    .swiper-common .swiper-wrapper .swiper-slide-active {
        transform: translate3d(clamp(-100px, -8vw, -200px), 0px, 0px) rotateX(0deg) rotateY(0deg) scale(1) !important;
    }

        .swiper-common .swiper-wrapper .swiper-slide-active .card {
            width: 312px;
        }

    .swiper-common .swiper-wrapper .swiper-slide-next {
        transform: translate3d(-100px, 9px, 0px) rotateX(0deg) rotateY(0deg) scale(2) !important;
    }

    .swiper-common .swiper-wrapper .swiper-slide-prev {
        transform: translate3d(85px, 9px, 0px) rotateX(0deg) rotateY(0deg) scale(2) !important;
    }
}

@media (min-width: 570px) {

    /*   .swiper-common .swiper-wrapper .swiper-slide-active {
        transform: translate3d(clamp(-120px, -8vw, -200px), 0px, 0px) rotateX(0deg) rotateY(0deg) scale(1) !important;
    }*/

    .swiper-common .swiper-wrapper .swiper-slide-active .card {
        width: calc(100vw - 40vw);
    }

    .swiper-common .swiper-wrapper .swiper-slide-next {
        transform: translate3d(-115px, 9px, 0px) rotateX(0deg) rotateY(0deg) scale(2) !important;
    }

    .swiper-common .swiper-wrapper .swiper-slide-prev {
        transform: translate3d(100px, 9px, 0px) rotateX(0deg) rotateY(0deg) scale(2) !important;
    }
}

@media (min-width: 600px) {
    .swiper-common {
        height: 450px;
    }

        .swiper-common .swiper-wrapper .swiper-slide-active .card .card-img-top {
            height: auto;
            max-height: 225px;
        }

        .swiper-common .swiper-wrapper .swiper-slide-active .card .card-body {
            height: auto;
            max-height: 145px;
        }

        .swiper-common .swiper-wrapper .swiper-slide-active {
            transform: translate3d(-19vw, 0px, 0px) rotateX(0deg) rotateY(0deg) scale(1) !important;
        }

        .swiper-common .swiper-wrapper .swiper-slide .card .card-body .btn-secondary {
            width: auto !important;
            justify-self: flex-end;
        }
}

@media (min-width: 767px) {
    .swiper-common .swiper-wrapper .swiper-slide-active .card {
        max-width: 500px;
        width: calc(93vw - 36vw);
    }

    .swiper-common .swiper-wrapper .swiper-slide-active {
        transform: translate3d(-18vw, 0px, 0px) rotateX(0deg) rotateY(0deg) scale(1) !important;
    }

    .btn-common-section {
        width: auto !important;
        justify-self: flex-start;
    }
}

@media (min-width: 834px) {
    .swiper-common {
        height: 480px;
    }

        .swiper-common .swiper-wrapper .swiper-slide {
            transform: translate3d(5px, 40px, -80px) rotateX(0deg) rotateY(0deg) scale(1) !important;
        }

        .swiper-common .swiper-wrapper .swiper-slide-next {
            transform: translate3d(-15px, 50px, -10px) rotateX(0deg) rotateY(0deg) scale(1) !important;
        }

        .swiper-common .swiper-wrapper .swiper-slide-prev {
            transform: translate3d(15px, 50px, -10px) rotateX(0deg) rotateY(0deg) scale(1) !important;
        }

        .swiper-common .swiper-wrapper .swiper-slide-active .card {
            max-width: 650px;
            width: calc(93vw - 36vw);
        }

        .swiper-common .swiper-wrapper .swiper-slide-active {
            transform: translate3d(-15vw, 0px, 0px) rotateX(0deg) rotateY(0deg) scale(1) !important;
        }

            .swiper-common .swiper-wrapper .swiper-slide-active .card .card-img-top {
                min-height: 300px;
                max-height: 325px;
            }

            .swiper-common .swiper-wrapper .swiper-slide-active .card .card-body {
                height: 123px;
            }

                .swiper-common .swiper-wrapper .swiper-slide-active .card .card-body p {
                    margin-bottom: 0;
                }

        .swiper-common .swiper-wrapper .swiper-slide .card .card-img-top {
            height: 218px;
        }
}

@media (min-width: 1100px) {
    .swiper-common {
        height: 500px;
    }

        .swiper-common .swiper-wrapper .swiper-slide {
            transform: translate3d(-10px, 20px, -80px) rotateX(0deg) rotateY(0deg) scale(1) !important;
        }

        .swiper-common .swiper-wrapper .swiper-slide-next {
            transform: translate3d(-280px, 30px, -10px) rotateX(0deg) rotateY(0deg) scale(1) !important;
        }

        .swiper-common .swiper-wrapper .swiper-slide-prev {
            transform: translate3d(40px, 30px, -10px) rotateX(0deg) rotateY(0deg) scale(1) !important;
        }

        .swiper-common .swiper-wrapper .swiper-slide-active {
            transform: translate3d(clamp(-175px, -8vw, -200px), 0px, 0px) rotateX(0deg) rotateY(0deg) scale(1) !important;
        }

        .swiper-common .swiper-wrapper .swiper-slide .card {
            width: 650px;
            border-radius: 40px;
            border-width: 0px;
        }

        .swiper-common .swiper-wrapper .swiper-slide-active .card .card-body {
            height: 150px;
            width: 650px;
        }

        .swiper-common .swiper-wrapper .swiper-slide-active .card .card-img-top {
            width: 650px;
        }

        .swiper-common .swiper-wrapper .swiper-slide .card .card-img-top {
            height: 270px;
            
            border-radius: 40px;
            border-width: 0px;
            box-shadow: 0px 6.46px 12.93px 6.46px rgba(0, 0, 0, 0.05);
        }

    .gradient-overlay {
        background: linear-gradient(to right, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, 0) 70%, rgba(255, 255, 255, 1) 100%);
    }
}

@media (min-width: 1200px) {
    /*   .swiper-common {
                height: 70vh;
            }*/

    .swiper-common .swiper-wrapper .swiper-slide-active {
        transform: translate3d(clamp(-110px, -8vw, -200px), 0px, 0px) rotateX(0deg) rotateY(0deg) scale(1) !important;
    }
}