/* =========================================================
   MENU FAC - VERSION RESPONSIVE
   ========================================================= */


/* =========================================================
   ESCRITORIO
   ESTA PARTE SE MANTIENE IGUAL
   ========================================================= */

nav.fac-menu-incorporacion {
    position: relative !important;

    width: 100vw !important;
    max-width: 100vw !important;

    left: 50% !important;
    transform: translateX(-50%) !important;

    margin: 0 !important;
    padding: 0 !important;

    height: 76px !important;

    display: flex !important;
    align-items: stretch !important;
    justify-content: center !important;

    background: #f8f9fa !important;
    border-bottom: 1px solid #d6dce2 !important;

    box-sizing: border-box !important;
    z-index: 50 !important;
}


/* =========================================================
   BOTONES - ESCRITORIO
   ========================================================= */

nav.fac-menu-incorporacion > a.fac-menu-item {
    position: relative !important;

    flex: 1 1 0 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    height: 76px !important;

    padding: 0 20px !important;
    margin: 0 !important;

    color: #173653 !important;

    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 14px !important;
    font-weight: 700 !important;

    line-height: 1 !important;
    text-decoration: none !important;
    text-transform: uppercase !important;

    white-space: nowrap !important;

    box-sizing: border-box !important;
}


/* =========================================================
   SEPARADORES - ESCRITORIO
   ========================================================= */

nav.fac-menu-incorporacion > a.fac-menu-item:not(:last-child)::after {
    content: "" !important;

    position: absolute !important;

    right: 0 !important;
    top: 22px !important;

    width: 1px !important;
    height: 26px !important;

    background: #aeb9c5 !important;
}


/* =========================================================
   LINEA DORADA - ESCRITORIO
   ========================================================= */

nav.fac-menu-incorporacion > a.fac-menu-item::before {
    content: "" !important;

    position: absolute !important;

    bottom: 10px !important;
    left: 12% !important;

    width: 76% !important;
    height: 2px !important;

    background: #d4a72c !important;

    transform: scaleX(0) !important;

    transition: transform .25s ease !important;
}


/* =========================================================
   ACTIVO - ESCRITORIO
   ========================================================= */

nav.fac-menu-incorporacion > a.fac-menu-item.activo::before {
    transform: scaleX(1) !important;
}


/* =========================================================
   HOVER - ESCRITORIO
   ========================================================= */

nav.fac-menu-incorporacion > a.fac-menu-item:hover {
    color: #b58a16 !important;
}

nav.fac-menu-incorporacion > a.fac-menu-item:hover::before {
    transform: scaleX(1) !important;
}


/* =========================================================
   =========================================================
   CELULAR
   =========================================================
   ========================================================= */

@media only screen and (max-width: 767px) {

    /* -----------------------------------------------------
       CONTENEDOR DEL MENU
       ----------------------------------------------------- */

    nav.fac-menu-incorporacion {

        position: relative !important;

        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        left: 0 !important;
        transform: none !important;

        margin: 0 !important;
        padding: 0 !important;

        height: auto !important;
        min-height: 0 !important;

        display: grid !important;

        grid-template-columns: repeat(3, 1fr) !important;

        overflow: hidden !important;

        background: #f8f9fa !important;

        border-bottom: 1px solid #d6dce2 !important;

        box-sizing: border-box !important;
    }


    /* -----------------------------------------------------
       BOTONES EN CELULAR
       ----------------------------------------------------- */

    nav.fac-menu-incorporacion > a.fac-menu-item {

        position: relative !important;

        display: flex !important;

        width: auto !important;
        max-width: none !important;
        min-width: 0 !important;

        height: 60px !important;
        min-height: 60px !important;

        padding: 0 5px !important;
        margin: 0 !important;

        align-items: center !important;
        justify-content: center !important;

        color: #173653 !important;

        font-family: Arial, Helvetica, sans-serif !important;

        font-size: 11px !important;
        font-weight: 700 !important;

        line-height: 1.2 !important;

        text-align: center !important;

        text-decoration: none !important;
        text-transform: uppercase !important;

        white-space: normal !important;

        box-sizing: border-box !important;

        overflow: hidden !important;
    }


    /* -----------------------------------------------------
       RUTA DE INCORPORACION
       OCUPA DOS COLUMNAS
       ----------------------------------------------------- */

    nav.fac-menu-incorporacion > a.fac-menu-item:nth-child(4) {

        grid-column: span 2 !important;
    }


    /* -----------------------------------------------------
       SEPARADORES EN CELULAR
       ----------------------------------------------------- */

    nav.fac-menu-incorporacion > a.fac-menu-item::after {

        content: "" !important;

        position: absolute !important;

        right: 0 !important;
        top: 16px !important;

        width: 1px !important;
        height: 28px !important;

        background: #aeb9c5 !important;
    }


    /* -----------------------------------------------------
       COSTOS: SIN SEPARADOR A LA DERECHA
       ----------------------------------------------------- */

    nav.fac-menu-incorporacion > a.fac-menu-item:last-child::after {

        display: none !important;
    }


    /* -----------------------------------------------------
       LINEA DORADA EN CELULAR
       ----------------------------------------------------- */

    nav.fac-menu-incorporacion > a.fac-menu-item::before {

        content: "" !important;

        position: absolute !important;

        bottom: 6px !important;

        left: 10% !important;

        width: 80% !important;

        height: 2px !important;

        background: #d4a72c !important;

        transform: scaleX(0) !important;

        transition: transform .25s ease !important;
    }


    /* -----------------------------------------------------
       ELEMENTO ACTIVO
       ----------------------------------------------------- */

    nav.fac-menu-incorporacion > a.fac-menu-item.activo::before {

        transform: scaleX(1) !important;
    }


    /* -----------------------------------------------------
       HOVER EN CELULAR
       ----------------------------------------------------- */

    nav.fac-menu-incorporacion > a.fac-menu-item:hover {

        color: #b58a16 !important;
    }


    nav.fac-menu-incorporacion > a.fac-menu-item:hover::before {

        transform: scaleX(1) !important;
    }

}


/* =========================================================
   CELULARES MUY PEQUEÑOS
   ========================================================= */

@media only screen and (max-width: 400px) {

    nav.fac-menu-incorporacion > a.fac-menu-item {

        height: 56px !important;
        min-height: 56px !important;

        padding-left: 3px !important;
        padding-right: 3px !important;

        font-size: 10px !important;
    }


    nav.fac-menu-incorporacion > a.fac-menu-item::before {

        bottom: 5px !important;

        left: 12% !important;

        width: 76% !important;
    }

}


/* =========================================================
   EVITAR DESBORDAMIENTO GENERAL
   ========================================================= */

html {
    overflow-x: hidden !important;
}

body {
    overflow-x: hidden !important;
}