/* ==========================================================================
   ACTION CARD
   ========================================================================== */


.action-card{

    width:100%;
    max-width:320px;

    padding:14px;

    border-radius:18px;

    background:
    linear-gradient(
        145deg,
        rgba(255,255,255,.08),
        rgba(255,255,255,.03)
    );

    border:1px solid rgba(255,255,255,.12);

    backdrop-filter:blur(12px);

    box-shadow:
    0 12px 30px rgba(0,0,0,.35);

    color:#fff;

    overflow:hidden;

    position:relative;

}




/* REFLEJO */

.action-card::before{

    content:"";

    position:absolute;

    inset:0;

    background:
    linear-gradient(
        120deg,
        transparent,
        rgba(255,255,255,.12),
        transparent
    );

    transform:translateX(-120%);

    transition:.6s ease;

}



.action-card:hover::before{

    transform:translateX(120%);

}





.action-card-image{

    width:100%;
    height:125px;

    overflow:hidden;
    border-radius:12px;
    margin-bottom:12px;

}


.action-card-image img{

    width:100%;
    height:100%;
    object-fit:contain;
    display:block;

}


.action-card-title{

    position:relative;

    font-size:1.05rem;

    font-weight:700;

    margin-bottom:5px;

    text-align:center;

}




.action-card-description{

    position:relative;

    font-size:.82rem;

    line-height:1.35;

    opacity:.85;

    margin-bottom:12px;

    text-align:center;

}





/* BOTONES */

.action-card-buttons{

    position:relative;

    display:flex;

    justify-content:center;

    align-items:center;

    gap:8px;

    flex-wrap:nowrap;

}



.action-card-button{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    flex:1;

    padding:7px 10px;

    border-radius:20px;

    background:

    var(--accent-color,#c19937);

    color:#fff;

    text-decoration:none;

    font-size:.78rem;

    font-weight:600;

    white-space:nowrap;

    transition:.25s ease;

}



.action-card-button:hover{

    transform:translateY(-2px);

    filter:brightness(1.15);

}





/* MOBILE */

@media(max-width:768px){


    #action-card-container{

        justify-content:center;

    }



    .action-card{

        max-width:100%;

    }



    .action-card-image{

        height:90px;

    }


}