:root{

    --color-fama:#A80000;

    --color-bi:#162742;

    --color-erp:#b00c0a;

    --color-creditos:#1D4ED8;

    --color-cheques:#A80000;

}

body{
    background:#f5f6f8;
    min-height:100vh;
    font-family:'Segoe UI',sans-serif;
}

.bg-top{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:80px;
    background:
        linear-gradient(
            135deg,
            #9f0000,
            #c80000
        );
    border-radius:0 0 80px 80px;
    z-index:-1;
}

.logo{
    max-height:140px;
    margin-top:0px;
}

.titulo{
    color:#a80000;
    font-weight:300;
    font-size:50px;
}

.subtitulo{
    color:#495057;
    margin-bottom:0px;
}

.top-user{
    display:flex;
    justify-content:space-between;
    align-items:center;
    color:#fff;
    margin-bottom:0px;
}

.top-user a{
    color:#fff;
    text-decoration:none;
}

.welcome-box{
    background:#fff;
    border-radius:50px;
    padding:10px 35px;
    display:flex;
    justify-content:space-between;
    box-shadow:0 5px 20px rgba(0,0,0,.10);
    margin:5px auto;
    max-width:600px;
}

.app-card{
    background:#fff;
    border-radius:25px;
    padding:30px 20px;
    text-align:center;
    height:95%;
    box-shadow:0 10px 30px rgba(0,0,0,.08);
    transition:.30s;
}

.app-card:hover{
    transform:translateY(-10px);
    box-shadow:0 20px 30px rgba(0,0,0,.15);
}

/* ============================
   COLORES CORPORATIVOS
============================ */

.bi-color{
    background:var(--color-bi);
    color:white;
}

.bi-text{
    color:var(--color-bi);
}

.erp-color{
    background:var(--color-erp);
    color:white;
}

.erp-text{
    color:var(--color-erp);
}

.creditos-color{
    background:var(--color-creditos);
    color:white;
}

.creditos-text{
    color:var(--color-creditos);
}

.cheques-color{
    background:var(--color-cheques);
    color:white;
}

.cheques-text{
    color:var(--color-cheques);
}


.icon-circle{
    width:100px;
    height:100px;
    border-radius:50%;
    display:flex;
    justify-content:center;
    align-items:center;
    margin:auto;
    color:#fff;
    font-size:50px;
    margin-bottom:25px;
}

.app-card h3{
    font-weight:400;
    margin-bottom:20px;
}

.app-card p{
    min-height:50px;
    color:#6c757d;
}

.btn-app{
    border-radius:30px;
    padding:10px 35px;
    color:#fff !important;
}

.features{
    margin-top:0px;
    background:#fff;
    border-radius:20px;
    padding:35px;
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:30px;
    box-shadow:0 10px 30px rgba(0,0,0,.08);
}

.features div{
    text-align:center;
}

.features i{
    font-size:35px;
    color:#a80000;
    margin-bottom:15px;
}

.features strong{
    display:block;
}

.features small{
    display:block;
    color:#6c757d;
}

.footer-bar{
    background:#a80000;
    color:#fff;
    text-align:center;
    padding:18px;
    margin-top:0px;
}

@media(max-width:992px){

    .features{
        grid-template-columns:1fr;
    }

    .welcome-box{
        flex-direction:column;
        gap:15px;
        border-radius:20px;
    }

    .titulo{
        font-size:38px;
    }
}

/*==================================================
        FAMA LAYOUT GRID
==================================================*/

.fama-layout{

    display:flex;

    min-height:100vh;

    background:#F5F6FA;

}

.fama-sidebar{

    width:280px;

    flex-shrink:0;

}

.fama-main{

    flex:1;

    display:flex;

    flex-direction:column;

    overflow-x:hidden;

}

.fama-content{

    padding:30px;

    flex:1;

}