/* =========================================================
   SCIENCEVOLUTION CAROUSEL
   ========================================================= */
.sci-carousel {
    --sci-primary: #f7a800;
    --sci-accent: #f7a800;
    --sci-gap: 20px;
    --slides-visible: 3;
    position: relative;
    width: 100%;
    max-width: 1400px;
    /* margin: 40px auto; 
    padding: 0 65px; */
    box-sizing: border-box;
    user-select: none;
    -webkit-user-select: none;
}

.sci-carousel *,
.sci-carousel *::before,
.sci-carousel *::after {
    box-sizing: border-box;
}

/* =========================================================
   VIEWPORT
   ========================================================= */
.sci-carousel__viewport {
    width: 100%;
    overflow: hidden;
    cursor: grab;
    touch-action: pan-y;
    border-radius: 14px;
}

.sci-carousel.is-dragging
.sci-carousel__viewport {
    cursor: grabbing;
}

/* =========================================================
   TRACK
   ========================================================= */
.sci-carousel__track {
    display: flex;
    gap: var(--sci-gap);
    transform: translate3d(0, 0, 0);
    transition:
        transform
        0.45s
        cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform;
}

/* Durante el arrastre no hay animación */
.sci-carousel.is-dragging
.sci-carousel__track {
    transition: none;
}

/* =========================================================
   SLIDES
   ========================================================= */
.sci-carousel__slide {
    flex: 0 0 calc(
        (
            100% -
            (
                var(--sci-gap) *
                (var(--slides-visible) - 1)
            )
        )
        /
        var(--slides-visible)
    );
    min-width: 0;
    overflow: hidden;
    border-radius: 12px;
}

/* =========================================================
   IMÁGENES
   ========================================================= */
.sci-carousel__slide img {
    display: block;
    width: 100%;
    height: 100%;
    /* height: 280px; */
    /* object-fit: cover; */
    object-fit: contain;
    pointer-events: none;
    user-select: none;
    -webkit-user-select: none;
    -webkit-user-drag: none;
}

/* =========================================================
   BOTONES
   ========================================================= */
.sci-carousel__btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 52px;
    height: 52px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 50%;
    background: var(--sci-primary);
    color: #ffffff;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
    z-index: 10;
    transition:
        background 0.25s ease,
        transform 0.25s ease;
}

.sci-carousel__btn:hover {
    background: var(--sci-accent);
    transform:
        translateY(-50%)
        scale(1.08);
}

.sci-carousel__btn--prev {
    left: 0;
}

.sci-carousel__btn--next {
    right: 0;
}

/* =========================================================
   INDICADORES
   ========================================================= */
.sci-carousel__dots {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 22px;
}

.sci-carousel__dot {
    width: 10px;
    height: 10px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: #b5c8cc;
    cursor: pointer;
    transition:
        width 0.25s ease,
        background 0.25s ease,
        border-radius 0.25s ease;
}

.sci-carousel__dot.is-active {
    width: 30px;
    border-radius: 20px;
    background: var(--sci-accent);
}


/* =========================================================
   TABLET
   ========================================================= */
@media (max-width: 900px) {
    .sci-carousel {
        padding-left: 55px;
        padding-right: 55px;
    }

    /*.sci-carousel__slide img {
        height: 250px;
    } */

}

/* =========================================================
   MÓVIL
   ========================================================= */
@media (max-width: 768px) {
    .sci-carousel {
        padding-left: 42px;
        padding-right: 42px;
    }

    /* .sci-carousel__slide img {
        height: 380px;
    }*/

    .sci-carousel__btn {
        width: 36px;
        height: 36px;
        font-size: 21px;
    }

    .sci-carousel__dots {
        margin-top: 16px;
    }

}