.card-3d {
    width: 300px;
    height: 200px;
    border-radius: 16px;
    /*background: linear-gradient(135deg, #1e293b, #0f172a);*/
    color: #fff;
    position: relative;
    transform-style: preserve-3d;
    transition: transform 0.15s ease-out;
    overflow: hidden;
    cursor: pointer;

    /* variáveis */
    --rx: 0deg;
    --ry: 0deg;
    --mx: 50%;
    --my: 50%;

    transform: rotateX(var(--rx)) rotateY(var(--ry));
    /*-webkit-box-shadow: 9px 9px 14px 1px rgba(0,0,0,0.3); 
    box-shadow: 9px 9px 14px 1px rgba(0,0,0,0.3);*/
}

/* brilho que segue o mouse */
.card-3d::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(
        circle at var(--mx) var(--my),
        rgba(255,255,255,0.25),
        transparent 40%
    );
    opacity: 0;
    transition: opacity 0.2s;
    pointer-events: none;
}

.card-3d:hover::before {
    opacity: 1;
}

/* conteúdo com profundidade */
.card-3d .card-content {
    position: relative;
    z-index: 2;
    transform: translateZ(30px);
    padding: 20px;
}