html,
body {
    width: 100% !important;
    min-height: 100% !important;
    height: auto !important;

    overflow-x: hidden !important;
    overflow-y: auto !important;
}


#cd-primary-nav,
#cd-primary-nav ul,
#cd-primary-nav li {
    box-sizing: border-box !important;
}

#cd-primary-nav li > a::before,
#cd-primary-nav li > a::after {
    content: none !important;
    display: none !important;
}

#cd-primary-nav .go-back,
#cd-primary-nav .back,
#cd-primary-nav .menu-back,
#cd-primary-nav [data-back],
#cd-primary-nav li.go-back,
#cd-primary-nav li.back,
#cd-primary-nav li.menu-back {
    display: none !important;
}


/* =========================================================
   1. BARRA SUPERIOR
   ========================================================= */

.geresa-topbar {
    min-height: 38px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 15px;

    padding: 0 44px;

    background: #eef7fd;

    color: #17314d;

    font-family: "Open Sans", sans-serif;
    font-size: 12px;
}


.geresa-topbar-info {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 24px;
}


.geresa-topbar-info span {
    display: inline-flex;
    align-items: center;

    gap: 7px;
}


.geresa-topbar-social {
    display: flex;
    align-items: stretch;

    align-self: stretch;
}


.geresa-topbar-social a {
    width: 38px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    color: #083d74;

    text-decoration: none;

    border-left: 1px solid rgba(0,0,0,.08);
}


.geresa-topbar-social a:hover {
    background: rgba(0,0,0,.05);
}


/* =========================================================
   2. CABECERA INSTITUCIONAL
   ========================================================= */

.geresa-brandbar {
    min-height: 102px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 25px;

    padding: 10px 24px;

    background: #575354;
}


.geresa-brand-logo {
    flex: 0 0 auto;
}


.geresa-brand-logo a {
    display: inline-flex;
    align-items: center;
}


.geresa-brand-logo img {
    display: block;

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

    height: auto;
    max-height: 82px;

    object-fit: contain;
}


.geresa-header-accesses {
    min-width: 0;

    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: nowrap;

    gap: 10px;
}


.geresa-header-accesses a {
    min-width: 82px;
    min-height: 56px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 4px 5px;

    text-decoration: none;
}


.geresa-header-accesses img {
    display: block;

    width: auto;
    max-width: 132px;

    height: 48px;
    max-height: 48px;

    object-fit: contain;
}


.geresa-header-accesses span {
    color: #fff;
    font-size: 11px;
    text-align: center;
}


/* =========================================================
   3. MENÚ PRINCIPAL
   ========================================================= */

.geresa-mainnav {
    position: relative;
    z-index: 100;
    width: 100%;
    background: #fff;
    box-shadow:
        0 1px 0
        rgba(0,0,0,.07);
}


.geresa-nav-inner {
    position: relative;

    width: min(1220px, calc(100% - 30px));
    min-height: 64px;

    display: flex;
    align-items: center;

    margin: 0 auto;
}


.geresa-home-link {
    width: 68px;
    min-width: 68px;
    height: 64px;

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

    margin-right: auto;

    text-decoration: none;
}


.geresa-home-link img {
    width: 45px;
    height: 45px;

    object-fit: contain;
}


.geresa-menu-panel {
    position: static;

    display: block;

    min-width: 0;
}


.geresa-menu {
    display: flex !important;
    align-items: stretch !important;

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

    list-style: none !important;
}


.geresa-menu > li {
    position: relative !important;

    display: block !important;

    float: none !important;

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


.geresa-menu li > a {
    text-decoration: none !important;
}


.geresa-menu > li > a {
    min-height: 64px;

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

    padding: 0 17px !important;

    color: #34383d !important;

    font-family: "Open Sans", sans-serif;
    font-size: 13px !important;
    font-weight: 600;

    line-height: 1.2 !important;

    white-space: nowrap;
}


.geresa-menu > li > a:hover,
.geresa-menu > li:hover > a {
    color: #00519b !important;

    background: #f5f8fb;
}


/* Flecha SOLO la nuestra */

.geresa-menu > .menu-item-has-children > a .geresa-arrow {
    margin-left: 8px;
}


/* =========================================================
   4. DROPDOWN ESCRITORIO
   ========================================================= */

.geresa-menu .sub-menu {
    position: absolute !important;

    top: 100% !important;
    left: 0 !important;

    z-index: 6000 !important;

    display: none !important;

    width: 300px !important;
    min-width: 300px !important;
    max-width: 300px !important;

    height: auto !important;
    max-height: none !important;

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

    list-style: none !important;

    overflow: visible !important;

    background: #fff !important;

    border: 1px solid #e3e7ec !important;
    border-radius: 0 0 8px 8px !important;

    box-shadow:
        0 12px 28px
        rgba(0,0,0,.15) !important;
}


.geresa-menu li:hover > .sub-menu {
    display: block !important;
}


.geresa-menu .sub-menu .sub-menu {
    top: -7px !important;
    left: calc(100% - 1px) !important;

    border-radius: 8px !important;
}


.geresa-menu .sub-menu > li {
    position: relative !important;

    display: block !important;

    width: 100% !important;

    float: none !important;

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


.geresa-menu .sub-menu > li > a {
    position: relative;

    width: 100% !important;
    min-height: 42px;

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

    padding: 10px 36px 10px 14px !important;

    color: #41464d !important;

    font-family: "Open Sans", sans-serif;
    font-size: 12.5px !important;
    font-weight: 500;

    line-height: 1.35 !important;

    white-space: normal !important;

    border-bottom:
        1px solid
        rgba(0,0,0,.055);
}


.geresa-menu .sub-menu > li:last-child > a {
    border-bottom: 0;
}


.geresa-menu .sub-menu > li:hover > a {
    color: #00519b !important;

    background: #f2f6fa !important;
}

.geresa-menu .sub-menu >
.menu-item-has-children > a::after {
    content: "›" !important;

    position: absolute;

    top: 50%;
    right: 14px;

    display: block !important;

    transform: translateY(-50%);

    color: #687587;

    font-size: 20px;
    line-height: 1;
}

.geresa-menu >
.menu-item-has-children > a::after {
    content: "" !important;

    position: static;

    display: inline-block !important;

    width: 7px;
    height: 7px;

    margin-left: 8px;

    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;

    transform: translateY(-2px) rotate(45deg);
}


/* =========================================================
   5. HAMBURGUESA / MÓVIL
   ========================================================= */

.geresa-hamburger,
.geresa-mobile-header,
.geresa-mobile-extra,
.geresa-menu-overlay {
    display: none;
}


/* =========================================================
   6. TABLET
   ========================================================= */

@media (max-width: 1199.98px) and (min-width: 992px) {

    .geresa-brand-logo img {
        width: 215px;
    }


    .geresa-header-accesses {
        gap: 5px;
    }


    .geresa-header-accesses a {
        min-width: 64px;
    }


    .geresa-header-accesses img {
        max-width: 100px;
        height: 42px;
        max-height: 42px;
    }


    .geresa-menu > li > a {
        padding: 0 10px !important;

        font-size: 11.8px !important;
    }

}


/* =========================================================
   7. RESPONSIVE REAL
   ========================================================= */

@media (max-width: 991.98px) {


    /* TOP */

    .geresa-topbar {
        display: none;
    }


    /* BRAND */

    .geresa-brandbar {
        min-height: 78px;

        justify-content: center;

        padding: 7px 12px;
    }


    .geresa-brand-logo img {
        width: 220px;
        max-height: 64px;
    }


    .geresa-header-accesses {
        display: none;
    }



    /* NAV */

    .geresa-nav-inner {
        width: 100%;
        min-height: 62px;
        padding: 0 14px;
    }


    .geresa-home-link {
        width: 54px;
        min-width: 54px;
        height: 58px;

        margin-right: auto;
    }


    .geresa-home-link img {
        width: 40px;
        height: 40px;
    }



    /* HAMBURGUESA */

    .geresa-hamburger {
        width: 46px;
        height: 46px;

        display: flex;

        flex-direction: column;
        align-items: center;
        justify-content: center;

        gap: 5px;

        padding: 0;

        border: 0;
        border-radius: 6px;

        background: transparent;
    }


    .geresa-hamburger span {
        width: 25px;
        height: 2px;

        display: block;

        background: #26384d;

        transition: .2s ease;
    }



    /* PANEL LATERAL */

    .geresa-menu-panel {
        position: fixed !important;
        top: 0 !important;
        right: -100% !important;
        bottom: 0 !important;
        z-index: 10020 !important;
        width: min(390px, 88vw) !important;
        display: block !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        background: #fff !important;
        box-shadow:
            -12px 0 32px
            rgba(0,0,0,.2);

        transition:
            right .25s ease !important;

        -webkit-overflow-scrolling: touch;
    }


    body.geresa-menu-open
    .geresa-menu-panel {
        right: 0 !important;
    }


    body.geresa-menu-open {
        overflow: hidden !important;
    }



    /* CABECERA DEL PANEL */

    .geresa-mobile-header {
        position: sticky;
        top: 0;
        z-index: 5;
        min-height: 58px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 17px;
        background: #0b2c58;
        color: #fff;
    }


    .geresa-mobile-header strong {
        font-size: 14px;
        letter-spacing: .05em;
    }


    .geresa-mobile-header button {
        width: 42px;
        height: 42px;

        border: 0;

        background: transparent;

        color: #fff;

        font-size: 31px;
        line-height: 1;
    }



    /* OVERLAY */

    .geresa-menu-overlay {
        position: fixed;

        inset: 0;
        z-index: 10010;
        display: block;
        visibility: hidden;
        background:
            rgba(0,0,0,.48);

        opacity: 0;

        transition:
            opacity .2s ease,
            visibility .2s ease;
    }


    body.geresa-menu-open
    .geresa-menu-overlay {
        visibility: visible;
        opacity: 1;
    }



    /* MENÚ VERTICAL */

    .geresa-menu {
        display: block !important;

        width: 100% !important;
    }


    .geresa-menu li {
        position: relative !important;

        display: block !important;

        width: 100% !important;

        float: none !important;
    }


    .geresa-menu li > a {
        position: relative;

        width: 100% !important;
        min-height: 49px;

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

        padding:
            12px 50px
            12px 18px !important;

        color: #354052 !important;

        font-size: 13px !important;
        line-height: 1.35 !important;

        white-space: normal !important;

        background: #fff !important;

        border-bottom:
            1px solid #e9edf2 !important;
    }



    /* SUBMENÚ MÓVIL */

    .geresa-menu .sub-menu,
    .geresa-menu .sub-menu .sub-menu {
        position: static !important;

        top: auto !important;
        left: auto !important;

        display: none !important;

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

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

        overflow: visible !important;

        border: 0 !important;
        border-radius: 0 !important;

        box-shadow: none !important;
    }


    .geresa-menu li.mobile-open >
    .sub-menu {
        display: block !important;
    }


    .geresa-menu .sub-menu > li > a {
        padding-left: 31px !important;

        background: #f7f9fc !important;
    }


    .geresa-menu .sub-menu
    .sub-menu > li > a {
        padding-left: 45px !important;

        background: #f2f6f9 !important;
    }


    .geresa-menu .sub-menu
    .sub-menu
    .sub-menu > li > a {
        padding-left: 59px !important;

        background: #edf3f7 !important;
    }



    /*
     * Anulamos por completo las flechas de escritorio.
     */
    .geresa-menu >
    .menu-item-has-children > a::after,
    .geresa-menu .sub-menu >
    .menu-item-has-children > a::after {
        content: "" !important;

        position: absolute;

        top: 50%;
        right: 20px;

        width: 8px;
        height: 8px;

        display: block !important;

        margin: 0;

        border: 0;
        border-right: 1.5px solid #708094;
        border-bottom: 1.5px solid #708094;

        transform:
            translateY(-65%)
            rotate(45deg);

        transition:
            transform .18s ease;
    }


    .geresa-menu
    .menu-item-has-children.mobile-open >
    a::after {
        transform:
            translateY(-20%)
            rotate(225deg);
    }



    /* EXTRAS MÓVILES */

    .geresa-mobile-extra {
        display: block;

        padding-bottom: 22px;

        background: #fff;
    }


    .geresa-mobile-access-grid {
        display: grid;

        grid-template-columns:
            repeat(2, minmax(0,1fr));

        gap: 8px;

        padding: 15px 14px 8px;
    }


    .geresa-mobile-access-grid a {
        min-height: 58px;

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

        padding: 7px;

        border: 1px solid #e2e7ed;
        border-radius: 8px;

        background: #fff;

        text-decoration: none;
    }


    .geresa-mobile-access-grid img {
        width: auto;
        max-width: 100%;

        height: auto;
        max-height: 42px;

        object-fit: contain;
    }


    .geresa-mobile-access-grid span {
        color: #334155;

        font-size: 11px;
        text-align: center;
    }


    .geresa-mobile-socials {
        display: flex;
        flex-wrap: wrap;

        gap: 8px;

        padding: 10px 14px;
    }


    .geresa-mobile-socials a {
        width: 39px;
        height: 39px;

        display: inline-flex;
        align-items: center;
        justify-content: center;

        border-radius: 50%;

        background: #eef3f8;

        color: #0b3b6f;

        text-decoration: none;
    }


    .geresa-mobile-contact {
        padding: 8px 14px;

        color: #566274;

        font-size: 12px;
    }


    .geresa-mobile-contact p {
        display: flex;

        gap: 8px;

        margin: 0 0 8px;
    }

}


/* =========================================================
   8. CELULAR PEQUEÑO
   ========================================================= */

@media (max-width: 575.98px) {

    .geresa-brand-logo img {
        width: 195px;
    }


    .geresa-menu-panel {
        width: 90vw !important;
    }


    .geresa-mobile-access-grid {
        grid-template-columns:
            repeat(2, minmax(0,1fr));
    }

}

/* =========================================================
   9. AJUSTES V4 CORREGIDOS
   ========================================================= */


/* =========================================================
   ICONOS DE SUBMENÚ
   ========================================================= */

.geresa-submenu-toggle-icon {
    flex: 0 0 auto;

    width: 18px;
    height: 18px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    margin-left: auto;

    color: #6b7788;

    font-size: 16px;
    line-height: 1;

    transition:
        transform .18s ease,
        color .18s ease;
}



/* =========================================================
   ESCRITORIO
   ========================================================= */

@media (min-width: 992px) {

    /*
     * Eliminar completamente las flechas antiguas
     * de pseudo-elementos.
     */

    .geresa-menu >
    .menu-item-has-children > a::after,

    .geresa-menu .sub-menu >
    .menu-item-has-children > a::after {

        content: none !important;

        display: none !important;

    }


    /*
     * Flecha menú principal
     */

    .geresa-menu >
    .menu-item-has-children >
    a
    .geresa-submenu-toggle-icon {

        margin-left: 8px;

        font-size: 12px;

        transform: rotate(90deg);

    }


    /*
     * Flecha de submenús
     */

    .geresa-menu .sub-menu >
    .menu-item-has-children >
    a
    .geresa-submenu-toggle-icon {

        margin-left: auto;

        font-size: 18px;

        transform: none;

    }


    /*
     * Si un nivel no cabe hacia la derecha,
     * JS agrega submenu-open-left.
     */

    .geresa-menu
    .sub-menu
    .submenu-open-left >
    .sub-menu {

        left: auto !important;

        right: calc(100% - 1px) !important;

    }


    /*
     * Primer dropdown pegado al borde derecho.
     */

    .geresa-menu >
    .submenu-root-align-right >
    .sub-menu {

        left: auto !important;

        right: 0 !important;

    }

}



/* =========================================================
   RESPONSIVE - ACORDEÓN
   ========================================================= */

@media (max-width: 991.98px) {


    /*
     * Todos los submenús cerrados por defecto.
     */

    #cd-primary-nav .sub-menu {

        display: none !important;

    }


    /*
     * Solamente la rama abierta se muestra.
     */

    #cd-primary-nav
    li.mobile-open >
    .sub-menu {

        display: block !important;

    }


    /*
     * Elemento abierto resaltado.
     */

    #cd-primary-nav
    li.mobile-open >
    a {

        color: #0b4f8f !important;

        background: #eef5fb !important;

        font-weight: 600 !important;

    }


    /*
     * Eliminar flechas antiguas.
     */

    .geresa-menu >
    .menu-item-has-children > a::after,

    .geresa-menu .sub-menu >
    .menu-item-has-children > a::after {

        content: none !important;

        display: none !important;

    }


    /*
     * Dar espacio al icono.
     */

    .geresa-menu
    .menu-item-has-children >
    a {

        padding-right: 50px !important;

    }


    /*
     * Flecha cerrada.
     */

    .geresa-menu
    .menu-item-has-children >
    a
    .geresa-submenu-toggle-icon {

        position: absolute;

        top: 50%;
        right: 18px;

        width: 24px;
        height: 24px;

        margin: 0;

        transform:
            translateY(-50%)
            rotate(0deg);

        color: #5e6d80;

        font-size: 20px;

    }


    /*
     * Flecha abierta.
     */

    .geresa-menu
    .menu-item-has-children.mobile-open >
    a
    .geresa-submenu-toggle-icon {

        transform:
            translateY(-50%)
            rotate(90deg);

        color: #0b4f8f;

    }


    /*
     * Panel móvil.
     */

    .geresa-menu-panel {

        overflow-x: hidden !important;

        overflow-y: auto !important;

        overscroll-behavior: contain;

    }


    .geresa-menu-panel,
    .geresa-menu,
    .geresa-menu li,
    .geresa-menu .sub-menu {

        max-width: 100% !important;

    }



    /* =====================================================
       ACCESOS SUPERIORES EN RESPONSIVE
       ===================================================== */

    /*
     * Tus imágenes originales son blancas,
     * por eso no se veían sobre fondo blanco.
     */

    .geresa-mobile-access-grid a {

        background: #575354 !important;

        border-color: #686466 !important;

        overflow: hidden;

    }


    .geresa-mobile-access-grid img {

        opacity: 1 !important;

        visibility: visible !important;

        width: auto !important;

        max-width: 92% !important;

        height: auto !important;

        max-height: 45px !important;

        object-fit: contain !important;

    }


    .geresa-mobile-access-grid span {

        color: #fff !important;

    }


    /*
     * Gob.pe tiene fondo propio.
     */

    .geresa-mobile-access-grid a:last-child {

        background: #fff !important;

    }

}



/* =========================================================
   CELULAR MUY ANGOSTO
   ========================================================= */

@media (max-width: 420px) {

    .geresa-mobile-access-grid {

        grid-template-columns:
            1fr !important;

    }

}



/* =========================================================
   10. MODAL RESPONSIVE
   ========================================================= */

#welcome-user {

    padding-right: 0 !important;

}


#welcome-user .modal-dialog {

    width:
        min(
            760px,
            calc(100vw - 40px)
        ) !important;

    max-width:
        min(
            760px,
            calc(100vw - 40px)
        ) !important;

    margin:
        20px auto !important;

}


#welcome-user .modal-content {

    max-height:
        calc(
            100vh - 40px
        ) !important;

    display: flex !important;

    flex-direction:
        column !important;

    overflow:
        hidden !important;

    border-radius:
        10px !important;

}


#welcome-user .modal-header {

    flex:
        0 0 auto !important;

    min-height:
        48px !important;

}


#welcome-user .modal-body {

    flex:
        1 1 auto !important;

    min-height:
        0 !important;

    overflow-y:
        auto !important;

    overflow-x:
        hidden !important;

    padding:
        0 !important;

    -webkit-overflow-scrolling:
        touch;

}


#welcome-user
.geresa-modal-slide {

    width:
        100% !important;

}


#welcome-user
.geresa-modal-image {

    display:
        block !important;

    width:
        100% !important;

    height:
        auto !important;

    max-height:
        calc(
            100vh - 140px
        ) !important;

    margin:
        0 auto !important;

    object-fit:
        contain !important;

    background:
        #fff !important;

}


#welcome-user
.geresa-modal-content {

    padding:
        12px 18px 16px !important;

}


#welcome-user
.geresa-modal-title {

    font-size:
        17px !important;

}



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

@media (max-width: 991.98px) {

    #welcome-user
    .modal-dialog {

        width:
            calc(
                100vw - 24px
            ) !important;

        max-width:
            680px !important;

        margin:
            12px auto !important;

    }


    #welcome-user
    .modal-content {

        max-height:
            calc(
                100vh - 24px
            ) !important;

    }


    #welcome-user
    .geresa-modal-image {

        max-height:
            calc(
                100vh - 135px
            ) !important;

    }

}



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

@media (max-width: 575.98px) {

    #welcome-user
    .modal-dialog {

        width:
            calc(
                100vw - 16px
            ) !important;

        max-width:
            calc(
                100vw - 16px
            ) !important;

        margin:
            8px auto !important;

    }


    #welcome-user
    .modal-content {

        max-height:
            calc(
                100vh - 16px
            ) !important;

        border-radius:
            8px !important;

    }


    #welcome-user
    .modal-header {

        min-height:
            44px !important;

    }


    #welcome-user
    .geresa-modal-image {

        max-height:
            calc(
                100vh - 115px
            ) !important;

    }


    #welcome-user
    .geresa-modal-content {

        padding:
            10px 12px 13px !important;

    }


    #welcome-user
    .geresa-modal-title {

        font-size:
            15px !important;

    }


    #welcome-user
    .geresa-modal-text {

        font-size:
            12px !important;

    }


    #welcome-user
    .geresa-slider-arrow {

        width:
            32px !important;

        height:
            42px !important;

        font-size:
            28px !important;

    }

}



/* =========================================================
   PANTALLAS CON POCO ALTO
   ========================================================= */

@media (
    max-height: 700px
)
and
(
    min-width: 576px
) {

    #welcome-user
    .modal-dialog {

        margin:
            8px auto !important;

    }


    #welcome-user
    .modal-content {

        max-height:
            calc(
                100vh - 16px
            ) !important;

    }


    #welcome-user
    .geresa-modal-image {

        max-height:
            calc(
                100vh - 120px
            ) !important;

    }

}