.card-style {
    background-color: #ffffff;
    border-radius: 0.75rem;
    /* rounded-xl */
    box-shadow: 0 4px 24px 0 rgb(34 41 47 / 10%);
    /* Vuexy shadow */
    padding: 2rem;
}

.card-style {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card-style:hover {
    transform: translateY(-8px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
    background-color: #f9f9ff;
    border-left: 4px solid #7367f0; /* acento tipo Vuexy */
    cursor: pointer;
}

/* Cambiar color del h3 cuando se hace hover en .card */
.card-style:hover h3 {
    color: #7367f0; /* el morado primario tipo Vuexy */
}

.img-modal{
    max-height: 300px;
    object-fit: cover;
}

.text-primary{
    color: #7367f0;
}