/*=========================================
    COLEGIO DE ABOGADOS
==========================================*/

:root{

    --amarillo:#F4C400;
    --amarillo-hover:#FFD84A;

    --negro:#1F1F1F;

    --gris:#f5f5f5;

    --gris-borde:#e5e5e5;

    --blanco:#FFFFFF;

    --texto:#555;

}

*{

    margin:0;
    padding:0;
    box-sizing:border-box;

}

body{

    font-family:'Poppins',sans-serif;

    background:#fafafa;

    color:var(--texto);

}

/*=========================================
    CABECERA GENERAL
==========================================*/

.cabecera-sitio{
    height:124px;
    background:#fff;
}

.cabecera-sitio #logo{
    display:block;
    width:123px;
    height:124px;
    margin-left:10px;
    background:url("../../img/logo-nuevo.jpg") no-repeat center;
    background-size:contain;
}


/*=========================================
    HERO
==========================================*/

.hero{

    background:var(--negro);

    color:#fff;

    text-align:center;

    padding:70px 20px;

    border-bottom:6px solid var(--amarillo);

}

.hero h1{

    font-size:46px;

    font-weight:700;

    margin-bottom:10px;

}

.hero p{

    font-size:18px;

    opacity:.9;

}


/*=========================================
    CATEGORIAS
==========================================*/

.categorias{

    display:flex;

    justify-content:center;

    flex-wrap:wrap;

    gap:12px;

}

.categoria-btn{

    border:2px solid var(--amarillo);

    background:#fff;

    color:var(--negro);

    padding:10px 22px;

    border-radius:50px;

    transition:.30s;

    font-weight:500;

    cursor:pointer;

}

.categoria-btn:hover{

    background:var(--negro);

    color:#fff;

}

.categoria-btn.active{

    background:var(--amarillo);

    color:#000;

    border-color:var(--amarillo);

}


/*=========================================
    CONTADOR
==========================================*/

.resultado{

    text-align:center;

    font-weight:600;

    color:#777;

}


/*=========================================
    TARJETAS
==========================================*/

.card-beneficio{
    cursor:pointer;
}

.card-beneficio:hover{

    transform:translateY(-8px);

    box-shadow:0 18px 35px rgba(0,0,0,.10);

}


/* Línea superior */

.card-beneficio::before{

    content:"";

    display:block;

    height:5px;

    width:100%;

    background:var(--amarillo);

}


.logo-beneficio{

    width:190px;

    height:110px;

    object-fit:contain;

    margin:auto;

    display:block;

    padding:20px 0;

}


.card-body{

    padding:25px;

    text-align:center;

}


.card-body h5{

    color:var(--negro);

    font-weight:600;

}


.card-body p{

    color:#666;

    font-size:15px;

}


.badge-categoria{

    background:var(--amarillo);

    color:#000;

    border-radius:20px;

    padding:8px 14px;

    font-weight:600;

    font-size:13px;

}


.btn-info-beneficio{

    margin-top:18px;

    width:100%;

    border:none;

    background:var(--negro);

    color:#fff;

    padding:12px;

    border-radius:8px;

    transition:.30s;

}

.btn-info-beneficio:hover{

    background:var(--amarillo);

    color:#000;

}


/*=========================================
    MODAL
==========================================*/

.modal-content{

    border:none;

    border-radius:18px;

    overflow:hidden;

}

.modal-header{

    background:var(--negro);

    color:#fff;

    border:none;

}

.modal-header .btn-close{

    filter:invert(1);

}

.logo-modal{

    max-width:180px;

    margin-bottom:20px;

}

.categoria-modal{

    background:var(--amarillo);

    color:#000;

    font-size:14px;

    padding:8px 16px;

    border-radius:50px;

}

.modal-body h5{

    color:var(--negro);

    margin-top:15px;

    font-weight:600;

}

.modal-body p{

    line-height:1.7;

}

.modal-body hr{

    margin:20px 0;

}

.modal-footer{

    border:none;

    padding:20px;

}


/*=========================================
    FOOTER
==========================================*/

.footer{

    margin-top:80px;

    background:var(--negro);

    color:#ddd;

    text-align:center;

    padding:30px;

}


/*=========================================
    ANIMACION
==========================================*/

.card-beneficio{

    animation:fade .45s;

}

@keyframes fade{

    from{

        opacity:0;

        transform:translateY(20px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}


/*=========================================
    RESPONSIVE
==========================================*/

@media(max-width:768px){

.hero{

padding:50px 20px;

}

.hero h1{

font-size:34px;

}

.hero p{

font-size:16px;

}

.logo-beneficio{

width:150px;

height:100px;

}

.card-body{

padding:20px;

}

}