.cc-banner {
    --cc-banner-alto: 50vh;
    --cc-banner-alto-movil: 40vh;
    --cc-banner-ancho: 100%;
    --cc-banner-difuminado: 32px;
    --cc-banner-transicion: 600ms;
    position: relative;
    width: 100%;
    overflow: hidden;
}

.cc-banner-viewport {
    overflow: hidden;
    width: 100%;
}


.cc-banner-capas {
    position: relative;
    width: 100%;
    height: var(--cc-banner-alto);
}


.cc-banner-slide {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--cc-banner-transicion) ease;
}

.cc-banner-slide.is-activa {
    opacity: 1;
    pointer-events: auto;
    z-index: 1;
}


.cc-banner-slide--difuminado::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background-image: var(--cc-banner-fondo, none);
    background-position: center;
    background-size: cover;
    filter: blur(var(--cc-banner-difuminado, 32px));
    transform: scale(1.15);
}

.cc-banner-marco {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: var(--cc-banner-ancho) !important;
    height: 100%;
    margin: 0 auto;
}

.cc-banner .cc-banner-picture {
    display: block;
    width: 100%;
    height: 100%;
}

.cc-banner .cc-banner-medio {
    display: block;
    width: 100%;
    height: 100%;
    object-position: center;
}


.cc-banner .cc-banner-slide--cover .cc-banner-medio {
    object-fit: cover;
}

.cc-banner .cc-banner-slide--contain .cc-banner-medio {
    object-fit: contain;/*cover*/
}

.cc-banner-enlace {
    display: block;
    width: 100%;
    height: 100%;
    text-decoration: none;
}

.cc-banner-video {
    background-color: transparent;
}

.cc-banner-puntos {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 16px;
    z-index: 2;
    display: flex;
    justify-content: center;
    gap: 10px;
}

.cc-banner .cc-banner-punto {
    width: 10px;
    height: 10px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    flex: 0 0 auto;
    background: rgba(255, 255, 255, 0.9);

    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35);
    cursor: pointer;
    transition: background-color 200ms ease, width 200ms ease;
}
.cc-banner .cc-banner-punto.is-activo {
    width: 26px;
    border-radius: 5px;
    background: var(--e-global-color-primary, #6600FF);
}
.cc-banner .cc-banner-punto:hover,
.cc-banner .cc-banner-punto:focus-visible {
    background: var(--e-global-color-primary, #6600FF);
}
.cc-banner .cc-banner-punto:focus-visible {
    outline: 2px solid var(--e-global-color-primary, #6600FF);
    outline-offset: 3px;
}

@media (max-width: 767px) {
    .cc-banner-capas {
        height: var(--cc-banner-alto-movil);
    }
    .cc-banner-slide--difuminado::before {
        background-image: var(--cc-banner-fondo-movil, none);
    }
    .cc-banner-puntos {
        bottom: 10px;
    }
}


@media (prefers-reduced-motion: reduce) {
    .cc-banner-slide {
        transition: none;
    }
    .cc-banner .cc-banner-punto {
        transition: none;
    }
}