.animation {
    transition: 1s;

}

.animation {
    transform: translateX(-100%);
    visibility: hidden;
}

.animation.show-animate {
    transform: translateX(0);
    visibility: visible;
}

.tarj2.animation {
    transform: translateY(100%);
    visibility: hidden;
}

.animation.show-animate {
    transform: translateY(0);
    visibility: visible;
}

.tarj3.animation {
    transform: translateY(-100%);
    visibility: hidden;
}

.animation.show-animate {
    transform: translateY(0);
    visibility: visible;
}

.imgDerecha.animation {
    transform: translateX(50%);
    visibility: hidden;
}

.animation.show-animate {
    transform: translateX(0);
    visibility: visible;
}

.imgIzquierda.animation {
    transform: translateX(-50%);
    visibility: hidden;
}

.animation.show-animate {
    transform: translateX(0);
    visibility: visible;
}

.hero-figure {
    position: relative;
    overflow: hidden; /* Para asegurarnos de que el texto no salga de los bordes de la imagen */
}

.hero-figure img {
    display: block;
    width: 100%;
    border-radius: 3px; /* Opcional: redondear las esquinas */
    transition: border-color 0.3s ease; /* Transición suave para el cambio de color del borde */
}

.hero-figure figcaption {
    position: absolute;
    bottom: 0;
    width: 100%;
    background: rgba(0, 0, 0, 0.5); /* Fondo negro difuminado */
    color: white;
    text-align: center;
    padding: 10px;
    transition: background 0.3s ease; /* Transición suave para el fondo */
}

.hero-figure img:hover {
    border: 2px solid; /* Borde inicial */

    border-color: gold; /* Color del borde cuando se pasa el cursor por encima */
}

.hero-figure:hover figcaption {
    background: rgba(0, 0, 0, 0.7); /* Intensificar el fondo negro difuminado cuando se pasa el cursor por encima */
}