/* quien.css - Corregido para 4 imágenes */
#o_content { 
    padding: 30px; 
    text-align: center; 
    background: #111; 
}

.q-slider {
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
    position: relative;
    overflow: hidden; 
    border-radius: 15px;
    border: 2px solid #333;
    background: #000;
}

.q-slides {
    display: flex; 
    width: 400%; /* 100% por cada imagen */
    animation: slide-animation 50s infinite; /* Más lento para que se aprecien */
}

.q-slide {
    width: 25%; /* Cada slide ocupa 1/4 del contenedor de 400% */
    flex-shrink: 0;
}

.q-slide img {
    width: 100%;
    height: 450px; 
    object-fit: contain; 
    background: #000;
}

/* Animación ajustada para 4 paradas exactas */
@keyframes slide-animation {
    0%   { transform: translateX(0); }         /* Imagen 1 */
    20%  { transform: translateX(0); }
    25%  { transform: translateX(-25%); }    /* Imagen 2 */
    45%  { transform: translateX(-25%); }
    50%  { transform: translateX(-50%); }    /* Imagen 3 */
    70%  { transform: translateX(-50%); }
    75%  { transform: translateX(-75%); }    /* Imagen 4 */
    95%  { transform: translateX(-75%); }
    100% { transform: translateX(0); }       /* Regreso fluido al inicio */
}