.nuestro-trabajo {
    padding: 50px 15px; /* Espacio superior e inferior */
    display: flex;
    flex-direction: column; /* Asegura que el título y las imágenes estén en columna */
    align-items: center; /* Centra horizontalmente el contenido */
}

.imagenes {
    display: flex;
    height: auto;
    width: 100%;
    gap: 0px; /* Espacio entre las imágenes */
    overflow: hidden;
}

.imagen {
    flex: 1; /* Todas las imágenes tienen el mismo ancho inicialmente */
    transition: flex 0.5s ease; /* Transición suave en el tamaño */
    overflow: hidden; /* Oculta el desbordamiento de las imágenes */
}

.imagen img {
    width: 100%;
    height: auto;
    transition: transform 1s ease; /* Transición suave para el agrandado */
}

@media (max-width: 768px) {
    .imagenes {
        flex-direction: column; /* Las imágenes se apilan verticalmente */
        gap: 20px; /* Aumenta el espacio entre las imágenes */
    }

    .imagen {
        flex: none;
        width: 100%;
    }
}

/* Pantallas pequeñas (móviles) */
@media (max-width: 480px) {
    .imagenes {
        display: grid;
        grid-template-columns: repeat(2, 1fr); /* 2 columnas */
        gap: 10px; /* Espacio entre las imágenes */
    }

    .imagen {
        width: 100%;
        transition: transform 0.3s ease; /* Transición más rápida en móviles */
    }

    .imagen img {
        width: 100%;
        height: auto;
        transition: transform 0.3s ease;
    }

    .imagen:hover {
        transform: scale(1.05); /* Agranda ligeramente al tocar */
    }
}

.titulo-es,  .titulo-en {

    text-align: center; /* Centra el texto */
    font-size: 5em; /* Tamaño del texto */
    margin-bottom: 20px; /* Espacio debajo del título */
    animation: colorChange 1s infinite; /* Animación de cambio de color */
}

.titulo-es, .titulo-en, span {
    display: inline-block; /* Permite aplicar animación a cada letra */
    transition: color 0.2s ease; /* Transición suave del color */
    font-family: 'Playfair Display', serif;
    font-style: normal;
}

.hidden {
    display: none;
}


/* Animación para cambiar el color de las letras */
@keyframes colorChange {
    0%, 100% {
        color: #ffffff; /* Blanco */
    }
    25% {
        color: #d0d0d0; /* Gris muy claro */
    }
    50% {
        color: #cccccc; /* Gris claro */
    }
    75% {
        color: #727272; /* Gris medio */
    }
}

@media (max-width: 480px) {

    .titulo-en, .titulo-es{
        font-size: 25px;
    }

}

@media (max-width: 380px) {

    .titulo-en, .titulo-es{
        font-size: 22px;
    }

}

@media (max-width: 365px) {

    .titulo-en, .titulo-es{
        font-size: 20px;
    }

}