/* Estilo general del banner */
.banner {
    width: 800px;  /* Ancho fijo */
    height: 349px; /* Alto fijo */
    overflow: hidden;
    position: relative;
    margin: 0 auto; /* Centra el banner en la página */
}

/* Estilo del contenedor de las imágenes */
.slider {
    display: flex;
    width: 2400px; /* 3 imágenes de 800px cada una (800 * 3) */
    animation: slide 18s infinite; /* 18s: 6 segundos por imagen (4s detenida + 2s de transición) */
}

/* Estilo para cada imagen con tamaño específico */
.slider img {
    width: 800px;
    height: 349px;
    object-fit: cover; /* Asegura que la imagen se ajuste a las dimensiones sin distorsionarse */
}

/* Animación para mover las imágenes de derecha a izquierda */
@keyframes slide {
    0% { transform: translateX(0); }            /* Primera imagen (1.png) detenida */
    22.22% { transform: translateX(0); }        /* Pausa en la primera imagen */
    
    27.77% { transform: translateX(-800px); }   /* Desplazamiento hacia la segunda imagen */
    50% { transform: translateX(-800px); }      /* Pausa en la segunda imagen */
    
    55.55% { transform: translateX(-1600px); }  /* Desplazamiento hacia la tercera imagen */
    77.77% { transform: translateX(-1600px); }  /* Pausa en la tercera imagen */
    
    83.33% { transform: translateX(0); }        /* Reinicio, vuelve a la primera imagen */
    100% { transform: translateX(0); }          /* Ciclo se repite */
}