/* Efectos 3D para la cronología */
.perspective {
        perspective: 1000px;
      }
.card-3d {
        transform-style: preserve-3d;
        transition: transform 0.7s ease-in-out;
      }
.group:hover .card-3d {
        transform: rotateY(180deg);
      }
.card-front, .card-back {
        backface-visibility: hidden;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border-radius: 0.5rem;
      }
      .perspective {
        perspective: 1000px;
    }
    
    .card-3d {
        width: 100%;
        height: 100%;
        transform-style: preserve-3d;
        transition: transform 0.7s;
    }
    
    .group:hover .card-3d {
        transform: rotateY(180deg);
    }
    
    .card-front,
    .card-back {
        width: 100%;
        height: 100%;
        position: absolute;
        backface-visibility: hidden;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    
    .card-back {
        transform: rotateY(180deg);
    }
    
    /* Ajuste de imágenes para que se vean correctamente */
    .card-front img {
        width: 100%;
        max-height: 100%;
        object-fit: cover; /* Evita que la imagen se deforme */
    }