/* SLIDER API */
.acciones-api {
    background-color: var(--color-terciario);
    padding: 5% 0;
}

.acciones-api-header {
    width: 70%;
    display: flex;
    flex-direction: column;
    gap: 5rem;
    margin: 0 auto;
    margin-bottom: calc(1vw + 1rem);
}

.acciones-api-titulo {
    font-family: var(--font-syne);
    font-size: var(--font-size-58);
    font-weight: 700;
    color: var(--color-blanco-terciario);
    text-align: center;
}

.slider-wrapper {
    overflow: hidden;
    padding: 4% 7% 0 7%;
}

.card-item {
    height: 320px;
    padding: 30px;
    color: #fff;
    user-select: none;
    border-radius: 3.2rem;
    backdrop-filter: blur(30px);
    background-color: var(--color-principal);
}

.card-cont {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.slider-image {
    width: 8rem;
    object-fit: contain;
    margin-bottom: 5rem;
}

.card-p {
    font-family: var(--font-syne);
    font-size: var(--font-size-26);
    font-weight: 500;
    font-style: normal;
    color: var(--color-blanco-terciario);
    text-align: center;
}

.contenedor-paginacion {
    position: relative;
    margin-top: 8rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4rem;
}

.swiper-button-prev, .swiper-button-next {
    position: static;
    font-family: swiper-icons;
    font-size: var(--swiper-navigation-size);
    text-transform: none !important;
    letter-spacing: 0;
    font-variant: initial;
    line-height: 1;
}

.swiper-slide-active {
    background-color: var(--color-gris);
    box-shadow: 0px 3px 20px 3px rgba(34, 34, 34, 0.539);
    transition: all ease .3s;
}

.swiper-slide-active .card-p {
    color: var(--color-texto-negro-principal);
}

.swiper-slide-active .card-active {
    color: var(--color-terciario);
}

@media (max-width: 800px) {
    .card-cont {
        margin-top: 4rem;
        margin-bottom: 4.5rem;
    }
}

@media (max-width: 1100px) {
    .card-item {
        height: 266px;
    }
}

@media (min-width: 600px) and (max-width: 800px) {
    .card-item {
        height: 348px;
    }   
}

@media (max-width: 565px) {
    .card-item {
        height: 315px;
    }
}

@media (min-width: 1380px) and (max-width: 2026px) {
    .card-item {
        height: 350px;
    }
}