﻿.section-banners {
    background-color: #f2f2f2;
    padding: 24px 0;
}

#carouselHome .splide__track,
#carouselHome .splide__slide,
#carouselHome .splide__slide img {
    border-radius: 32px;
}

#carouselHome .splide__arrow {
    border-radius: 8px;
    padding: 16px 8px;
    height: auto;
}

#carouselHome .splide__arrow--prev {
    left: 0;
}

#carouselHome .splide__arrow--next {
    right: 0;
}

#carouselHome .splide__pagination {
    position: relative;
    bottom: 0;
    padding: 12px 0 0 0;
    gap: 8px;
}

    #carouselHome .splide__pagination li {
        line-height: 0;
    }

#carouselHome .splide__pagination__page {
    background-color: rgba(192, 192, 192, 1);
    width: 25px;
    height: 5px;
    padding: 0;
    border-radius: 2px;
    border: 0;
    opacity: 1;
    margin: 0;
}

    #carouselHome .splide__pagination__page.is-active {
        transform: none;
        background-color: #28a745;
    }


#divSeccionCards,
#divSeccionCards2 {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

    #divSeccionCards2 .card {
        width: calc(33% - 8px);
    }

        #divSeccionCards2 .card .card-body {
            padding: 0;
        }

    #divSeccionCards2 .card {
        border-radius: 24px;
    }

        #divSeccionCards2 .card .card-body img {
            width: 100%;
            border-radius: 24px;
        }

#carouselHome .splide__pagination {
    z-index: -1;
}

.modal-popup {
    max-width: 400px;
    width: calc(100% - 48px);
    margin: 0 auto;
}

    .modal-popup img {
        width: 100%;
    }

    .modal-popup .cerrar-modal {
        position: absolute;
        border-radius: 50%;
        height: 35px;
        width: 35px;
        right: -6px;
        top: -13px;
    }

@media(max-width: 991px) {
    #divSeccionCards .card, #divSeccionCards2 .card {
        width: calc(50% - 8px);
    }
}

@media(max-width: 767px) {
    .section-hero {
        /*padding-top: 24px;*/
    }

    #carouselHome .splide__track,
    #carouselHome .splide__slide,
    #carouselHome .splide__slide img {
        border-radius: 24px;
    }
}

@media(max-width: 575px) {
    #divSeccionCards .card,
    #divSeccionCards2 .card {
        width: 100%;
    }
}
