﻿.rotador {
    position: relative;
    /* Ajustá la altura a lo que necesites */
    min-height: 100px;
    overflow: hidden;
}

    /* Todos los slides apilados uno encima del otro */
    .rotador .slide {
        position: absolute;
        inset: 0;
        opacity: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        /* Duración total del ciclo (3 elementos x 2s = 6s) */
        animation-name: rotarSlides;
        animation-duration: 32s;
        animation-iteration-count: infinite;
    }

        /* Slide 1: empieza en 0s */
        .rotador .slide:nth-child(1) {
            animation-delay: 0s;
        }

        /* Slide 2: empieza 2s después */
        .rotador .slide:nth-child(2) {
            animation-delay: 8s;
        }

        /* Slide 3: empieza 4s después */
        .rotador .slide:nth-child(3) {
            animation-delay: 16s;
        }

        /* Slide 3: empieza 4s después */
        .rotador .slide:nth-child(4) {
            animation-delay: 24s;
        }

/* Animación: visible ~2s, luego se apaga */
@keyframes rotarSlides {
    /* Arranca visible */
    0% {
        opacity: 1;
    }
    /* Se mantiene visible un rato (≈ 2s de 6s = 33%) */
    20% {
        opacity: 1;
    }
    /* Se apaga y queda apagado hasta que le toque de nuevo */
    23% {
        opacity: 0;
    }

    100% {
        opacity: 0;
    }
}
