#cat_packs{
    .encabezado_cat{
        margin-top:40px;
        float:left;
        width:100%;
        text-align:left;
        color: var(--azul_def);
        h2{
            font-size:40px;
            margin:0;
        }
        p{
            font-size:20px;
            line-height:1.5em;
        }
    }
    > .lista{
        float:left;
        width:100%;
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        gap:30px;
        > a.pack{
            background-size: cover;
            background-position: center;
            height: 160px;
            background-color:#333;
            border-radius:16px;
            position: relative;
            overflow: hidden;
            color:#fff;
            width: 100%;
            text-decoration: none;
            transition: all .3s ease;
            padding: 15px 24px;
            box-sizing: border-box;
            gap:0;
            display:grid;
            align-items: end;
            user-select:none;
            .fa-lock{
                position:absolute;
                right:26px;
                top:20px;
                font-size:20px;
            }
            &:has(.fa-lock){
                pointer-events:none;
                &::before{
                    background: linear-gradient(90deg, rgba(120, 120, 120, 0.7) 0%, rgba(120,120,120,0.9) 100%);
                }
                button{
                    background-color:transparent !important;
                    border:1px solid #fff !important;
                    color:#fff !important;
                }
            }
            &::before{
                content: "";
                position: absolute;
                inset: 0;
                background: linear-gradient(90deg, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.3) 100%);
                pointer-events: none;
            }
            > div{
                position: relative;
                z-index: 1;
                display:grid;
                align-items: end;
                justify-content: start;
                justify-items: start;
                grid-template-rows: auto auto auto auto;
                > h3{
                    text-transform:uppercase;
                    margin:0;
                    float:left;
                    clear:both;
                    font-size: 20px;
                    font-weight: bold;
                }
                > h4{
                    text-transform:uppercase;
                    margin:0;
                    float:left;
                    clear:both;
                    font-size: 16px;
                    font-weight: normal;
                }
                > p{
                    margin:6px 0 0;
                    text-align:left;
                    float:left;
                    clear:both;
                    font-size: 14px;
                    font-weight: normal;
                }
                button{
                    background-color:#fff !important;
                    cursor:pointer;
                    padding: 6px 20px;
                    border: 0 solid #fff;
                    color:#1B2D56 !important;
                    font-weight:bold;
                    border-radius:16px;
                    margin-top:12px;
                }
            }
        }
    }
}