/* Contenedor principal del slider: cuadrado */
.vis-slider {
    position: relative;
    margin: 0 auto;
    width: 100%;
    max-width: 800px;
    aspect-ratio: 1/1;
    overflow: visible;
    /* Variables personalizables */
    --zoom: 1;               /* Nivel de zoom para la imagen central */
    --side-zoom: 0.9;        /* Nivel de zoom para imágenes superior e inferior */
    --transition-time: 1.2s;  /* Tiempo de transición en segundos */
    --overlap: 30%;          /* Porcentaje de solapamiento de las imágenes traseras */
}

/* Cada slide se centra horizontalmente */
.vis-slide {
    position: absolute;
    left: 50%;
    width: 100%;
    margin-left: -50%;
    will-change: transform, filter;
    transition: transform var(--transition-time) ease, filter var(--transition-time) ease;
    z-index: 1;
}

/* Los slides sin clase de posición no se muestran */
.vis-slide:not(.vis-top):not(.vis-center):not(.vis-bottom) {
    top: 50%;
    transform: translateY(-50%) scale(var(--side-zoom));
    opacity: 0;
}

/* Contenedor interno con proporción 4:3 */
.vis-slide-container {
    position: relative;
    width: 100%;
    aspect-ratio: 16/10;
    overflow: hidden;
}

/* Fondo desenfocado */
.vis-slide-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    transform: scale(1.1);
    z-index: 1;
    transition: filter var(--transition-time) ease;
    /* Por defecto, en slide central solo se aplica el blur */
    filter: blur(8px);
}

/* Capa para la imagen principal centrada */
.vis-slide-content {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.vis-slide-content img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: filter var(--transition-time) ease;
}

/* Slide central: sin filtro, usando el zoom definido en --zoom */
.vis-slide.vis-center {
    top: 50%;
    transform: translateY(-50%) scale(var(--zoom));
    z-index: 3;
    transition: transform calc(var(--transition-time) * 1.5) ease, filter var(--transition-time) ease;
    background-color: white;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.6);
}
.vis-slide.vis-center .vis-slide-content img {
    filter: none;
}
.vis-slide.vis-center .vis-slide-bg {
    filter: blur(8px);
}

/* Slide superior: se desplaza hacia arriba según el porcentaje de solapamiento y se escala con --side-zoom */
.vis-slide.vis-top {
    top: 50%;
    transform: translateY(calc(-50% - var(--overlap))) scale(var(--side-zoom));
    z-index: 1;
}
.vis-slide.vis-top .vis-slide-content img {
    filter: contrast(6%) brightness(160%);
}
.vis-slide.vis-top .vis-slide-bg {
    filter: blur(8px) contrast(6%) brightness(160%);
}

/* Slide inferior: se desplaza hacia abajo según el porcentaje de solapamiento y se escala con --side-zoom */
.vis-slide.vis-bottom {
    top: 50%;
    transform: translateY(calc(-50% + var(--overlap))) scale(var(--side-zoom));
    z-index: 1;
}
.vis-slide.vis-bottom .vis-slide-content img {
    filter: contrast(6%) brightness(160%);
}
.vis-slide.vis-bottom .vis-slide-bg {
    filter: blur(8px) contrast(6%) brightness(160%);
}