/* --- seccion-estandares.css --- */
.estandares {
    background-color: #ffffff; /* Fondo blanco */
    color: #3c3c3c; /* Texto oscuro */
    /* padding ya viene de .seccion-padding */
    text-align: center;
    /*border: solid 3px red;*/
}

.estandares .subtitulo-estandares {
    font-size: 1.2rem;
    font-weight: 500; /* Poppins Medium */
    color: #455a64;
    margin-bottom: 8px;
    max-width: 750px;
    margin-left: auto;
    margin-right: auto;
}

.estandares .texto-estandares {
    font-size: 0.95rem;
    line-height: 1.6;
    color: #607d8b;
    margin-bottom: 50px;
    max-width: 90%;
    margin-left: auto;
    margin-right: auto;
    font-weight: 400; /* Poppins Regular */
}

.estandares .logos-certificaciones {
    display: flex;
    width: 100%;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 30px 10px; /* Espacio vertical y horizontal */
    
    /*border: solid 3px aqua;*/
}

.estandares .logos-certificaciones img {
    height: 150px; /* Un poco más pequeñas */
    width: auto;
    opacity: 0.7;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.estandares .logos-certificaciones img:hover {
    opacity: 1;
    transform: scale(1.1);
}

@media (max-width: 768px) {
    .estandares .logos-certificaciones img {
        max-height: 35px;
        gap: 25px 35px;
    }
}


/*-----------------------------------Animaciones para los logos, pulsos aleatorios------------------------------------*/

.estandares .logos-certificaciones img {
    max-height: 100px; /* O tu valor original */
    width: auto;
    opacity: 0.5; /* Opacidad base */
    /* Quitamos la transición de opacidad de aquí si la vamos a controlar solo con animación */
    /* transition: opacity 0.4s ease-in-out, transform 0.3s ease; */
    transition: transform 2s ease; /* Mantenemos la transición para el hover del scale */

    /* Aplicamos la animación de pulso a todas las imágenes */
    animation-name: pulseOpacity;
    animation-duration: 8s; /* Duración total de UN ciclo de animación para TODOS los logos (ajustar) */
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
}

/* Definimos la animación de pulso */
@keyframes pulseOpacity {
    0%, 100% { /* Estado base y final del ciclo de un logo */
        opacity: 0.5;
    }
    10% { /* Punto donde el logo alcanza opacidad máxima (ej. 10% de la duración total) */
        opacity: 1;
    }
    20% { /* Punto donde vuelve a la opacidad base (ej. 10% más para bajar) */
        opacity: 0.5;
    }
    /* El resto del tiempo (20% a 100%) el logo permanece en opacidad 0.5
       hasta que su ciclo individual de animación comience de nuevo. */
}

/* Ahora aplicamos delays escalonados y en un orden no adyacente */
/* Asumamos que tenemos al menos 5 logos para este ejemplo.
   La duración total de la animación es 5s. Dividimos esto entre el número de "pasos"
   que queremos en nuestro orden. Si queremos que 5 logos pulsen secuencialmente
   dentro de esos 5s, cada "paso" principal es de 1s.
   Ajusta la duración total y los delays según cuántos logos tengas.
*/

/* Orden de ejemplo: 1º, 3º, 5º, 2º, 4º */

/* Logo 1 (el primero) */
.estandares .logos-certificaciones img:nth-child(1) {
    animation-delay: 0s;
}

/* Logo 3 */
.estandares .logos-certificaciones img:nth-child(3) {
    animation-delay: 1s; /* Pulsa 1 segundo después del primero */
}

/* Logo 5 */
.estandares .logos-certificaciones img:nth-child(5) {
    animation-delay: 2s; /* Pulsa 2 segundos después del primero */
}

/* Logo 2 */
.estandares .logos-certificaciones img:nth-child(2) {
    animation-delay: 3s; /* Pulsa 3 segundos después del primero */
}

/* Logo 4 */
.estandares .logos-certificaciones img:nth-child(4) {
    animation-delay: 4s; /* Pulsa 4 segundos después del primero */
}

/* Si tienes más logos, continúa el patrón o crea uno nuevo */
/* Ejemplo para un sexto logo: */
/* .estandares .logos-certificaciones img:nth-child(6) {
    animation-delay: 0.5s; /* Podrías intercalarlo, por ejemplo
} */


/* Mantenemos el hover por si el usuario pasa el mouse,
   esto sobrescribirá la opacidad de la animación mientras el mouse esté encima. */
.estandares .logos-certificaciones img:hover {
    opacity: 1 !important; /* !important para asegurar que el hover gane a la animación */
    transform: scale(1.1);
    animation-play-state: paused; /* Opcional: pausar la animación al hacer hover */
}