/*
 * carousellBanners: carrusel infinito de banners completos (un banner por
 * vista). Componente propio, independiente de carousellEsferas.css — ver
 * js/carousell/carousellBanners.js e includes/banners/bannerTextoFlotanteCarousel.php.
 */
.carousellBanners {
    position: relative;
    width: 100%;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

.carousellBanners-viewport {
    overflow: hidden;
    width: 100%;
    touch-action: pan-y;
    user-select: none;
}

.carousellBanners-track {
    display: flex;
    width: 100%;
    transition: transform 0.45s ease;
    will-change: transform;
}

.carousellBanners-track.carousellBanners-track--sin-transicion {
    transition: none;
}

.carousellBanners-slide {
    flex: 0 0 100%;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
}

.carousellBanners-slide img {
    -webkit-user-drag: none;
    pointer-events: none;
}

.carousellBanners-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    width: 32px;
    height: 32px;
    padding: 7px;
    border: none;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.35);
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.carousellBanners-arrow svg {
    width: 100%;
    height: 100%;
}

.carousellBanners-arrow--prev {
    left: 10px;
}

.carousellBanners-arrow--prev svg {
    transform: rotate(180deg);
}

.carousellBanners-arrow--next {
    right: 10px;
}

@media only screen and (min-width: 767px) {
    .carousellBanners-arrow {
        width: 40px;
        height: 40px;
        padding: 9px;
    }

    .carousellBanners-arrow--prev {
        left: 16px;
    }

    .carousellBanners-arrow--next {
        right: 16px;
    }
}

.carousellBanners-dots {
    position: absolute;
    z-index: 10;
    left: 50%;
    bottom: 12px;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 8px;
}

.carousellBanners-dot {
    width: 9px;
    height: 9px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: #fff;
    opacity: 0.5;
    cursor: pointer;
    transition: opacity 0.2s ease;
}

.carousellBanners-dot--activo {
    opacity: 1;
}

@media only screen and (min-width: 767px) {
    .carousellBanners-dots {
        bottom: 18px;
        gap: 10px;
    }

    .carousellBanners-dot {
        width: 10px;
        height: 10px;
    }
}