/* 1. La tarjeta: Efecto de elevación y suavidad */
.pricing-column {
    transition: transform 0.4s ease, box-shadow 0.4s ease;
    cursor: pointer;
}

/* 2. El efecto Hover sobre la tarjeta */
.pricing-column:hover {
    transform: translateY(-15px) !important;
    /* Fuerza la elevación */
    z-index: 10;
}

/* 3. Asegurar la sombra y el fondo blanco/claro al subir */
.pricing-column:hover .bg-light,
.pricing-column:hover .bg-white {
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1) !important;
    border: 1px solid #007bff;
    /* Opcional: un borde sutil azul */
}

/* 4. EL BOTÓN: Mantenerlo azul y legible al pasar el cursor sobre la tarjeta */
.pricing-column:hover .btn-primary {
    background-color: #007bff !important;
    /* Cambia al azul de tu marca */
    border-color: #007bff !important;
    color: white !important;
    box-shadow: 0 5px 15px rgba(0, 123, 255, 0.4);
}

/* 5. Efecto extra cuando el mouse toca directamente el botón */
.pricing-column .btn-primary:hover {
    background-color: #0056b3 !important;
    /* Azul más oscuro */
    transform: scale(1.1);
    /* Crece un poquito */
}