.kb-slider {
    position: relative;
    overflow: hidden;
    height: 60vh;
    background-color: black;
}

@media (max-width: 768px) {
    .kb-slider {
        height: 40vh;
    }
}

.kb-slider .kb-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 2s linear;
    z-index: 1;
}

.kb-slider .kb-slide.is-active {
    opacity: 1;
    z-index: 2;
}

.kb-slider .kb-slide figure {
    margin: 0;
    height: 100%;
}

.kb-slider .kb-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center; /* centra la imagen */
    animation: kb-zoom 12s linear infinite;
    transform-origin: center center;
}

@keyframes kb-zoom {
    from {
        transform: scale(1);
    }
    to {
        transform: scale(1.2);
    }
}

/* ===== Overlay dentro de cada slide ===== */

.kb-slide .kb-slide-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    padding: 1rem;
    pointer-events: none; /* opcional: que no bloquee clics en la imagen */
}

/* El contenido dentro del overlay sí puede interactuar */
.kb-slide .kb-slide-overlay > * {
    pointer-events: auto;
    width: 100%;
}

/* Posiciones del overlay */
.kb-slide .kb-overlay--top {
    align-items: flex-start;
    justify-content: center;
}

.kb-slide .kb-overlay--center {
    align-items: center;
    justify-content: center;
}

.kb-slide .kb-overlay--bottom {
    align-items: flex-end;
    justify-content: center;
}

/* Estilos opcionales de texto */
.kb-slide .kb-slide-overlay {
    color: #fff;
    text-align: center;
}

/* Si usas fondo en el Group del overlay */
.kb-slide .kb-slide-overlay .has-background {
    opacity: 0.9;
}

/* ==== ESTILOS SOLO PARA EL EDITOR ==== */

.editor-styles-wrapper .kb-slider {
    position: relative;
    height: 60vh;
    overflow-x: auto;      /* scroll horizontal */
    overflow-y: hidden;
    white-space: nowrap;
}

/* Cada slide ocupa el ancho completo del contenedor */
.editor-styles-wrapper .kb-slider .kb-slide {
    display: inline-block;
    width: 100%;
    height: 100%;
    position: relative;
    opacity: 1;
    z-index: 1;
    transition: none;
    vertical-align: top;
}

.editor-styles-wrapper .kb-slider div[data-title="Ken Burns Slide"]{
    height: 100%;
}

/* Imagen a tamaño completo, sin animación en editor */
.editor-styles-wrapper .kb-slider .kb-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    animation: none;
    transform: none;
}