html, body {
    margin: 0;
    height: 100%;
    overflow: hidden;
    background: transparent;
}

/* contenedor general: recorta todo lo que no sea el slide activo */
.carousel-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: transparent;
}

.carousel-track {
    display: flex;
    height: 100%;
    transition: transform 0.6s ease;
}

/* el ancho de .carousel-track y de cada .carousel-item se fija por JS
   (depende del número de slides), para que cada uno ocupe el 100%
   del contenedor sin importar cuántos haya */
.carousel-item {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

    .carousel-item img {
        max-width: 90%;
        max-height: 90%;
        object-fit: contain;
        border-radius: 12px;
    }