.underline-animation {
        position: relative;
    }
    .underline-animation::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: 0;
        width: 0;
        height: 2px;
        background-color: rgb(225 218 187 / var(--tw-bg-opacity));
        transition: width 0.3s ease;
    }
    .underline-animation:hover::after {
        width: 100%;
    }
    
    .modal {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(0, 0, 0, 0.8);
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 50;
        opacity: 0;
        transition: opacity 0.4s ease; /* Transici¨Žn para el efecto de fade */
        pointer-events: none; /* Desactiva los clics cuando est¨˘ oculto */
    }

    .modal.modal-visible {
        opacity: 1; /* Hace visible el modal */
        pointer-events: auto; /* Permite los clics cuando el modal es visible */
    }
    
    /* Estilo para el bot¨Žn de cerrar */
    .modal-close {
        position: absolute;
        top: 20px;
        right: 20px;
        color: white;
        font-size: 2rem;
        cursor: pointer;
    }

    /* Estilos para la imagen dentro del modal */
    .modal-image {
        max-width: 100%;
        max-height: 100%;
        object-fit: cover;
        border-radius: 0.5rem;
    }