.card { 
    backdrop-filter: blur(20px);
    background: var(--glass-bg); 
    border: 1px solid var(--glass-border); 
    border-radius: 20px; 
    padding: 30px; 
    margin: 25px auto;
    max-width: 500px;
    box-shadow: 0 8px 32px rgba(0,255,65,0.1);
    transition: all 0.4s ease;
    position: relative;
    overflow: hidden;
}

.card::before {
    content: ''; 
    position: absolute; 
    top: -50%; 
    left: -50%;
    width: 200%; 
    height: 200%; 
    background: linear-gradient(45deg, transparent 30%, rgba(0,255,65,0.1) 50%, transparent 70%);
    transform: rotate(30deg); 
    transition: 0.6s;
    pointer-events: none;  /* ← ¡ESTO DESBLOQUEA LOS CLICS! */
}

.card:hover::before { 
    transform: rotate(30deg) translate(20px, 20px); 
}

.card:hover { 
    transform: translateY(-10px) scale(1.02);
    box-shadow: 0 20px 40px rgba(0,255,65,0.3);
}