body{ background-color: #EFF4FB;
}

/*================================*/
/*       #region: BANNER          */
/*================================*/

.banner{ min-height: 330px; padding: 0 0 100px 0; background: #023F75 no-repeat center; background-size: cover; position: relative; z-index: 0; display:flex; /*align-items:end;*/
}
.banner::before{ content: ''; display: block; z-index: -1; position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(2, 63, 117, 0.75); 
    /*background: linear-gradient(0deg, rgba(2, 63, 117, 0.65) 70%, rgba(2, 63, 117, 1) 100% );*/
}
    .banner.banner-logros{ background-image: url("../img/banners/bnr-logros.jpg");
    }
    .banner.banner-eventos{   background-image: url("../img/banners/bnr-eventos.jpg");
    }
    .banner.banner-noticias{   background-image: url("../img/banners/bnr-noticias.jpg");
    }

/**/
.titulo-pagina{ position: relative; display: inline-block; align-self: flex-end; padding-right: 18px; color: #fff; font-size: 2rem; font-weight: 300;
}
.titulo-pagina span{ font-size: 2.25rem; font-weight: 800; display: block; text-transform: uppercase;
}
.titulo-pagina:after{ content: ''; display: block; width: 12px; height: 12px; background-color: #E32726; border-radius: 30px; position: absolute; bottom: 8px; right: 0;
}

@media(min-width:576px){
    .titulo-pagina{ padding-right: 25px; font-size: 2.5rem;
    }
    .titulo-pagina span{ font-size: 2.8rem;
    }
    .titulo-pagina:after{ width: 15px; height: 15px; bottom: 10px; 
    }
}
@media(min-width:992px){
    .banner{ min-height: 650px; padding: 100px 0 150px 0;
    }
    /*.banner::before{ background: linear-gradient(0deg, rgba(2, 63, 117, 0.75) 70%, rgba(2, 63, 117, 0.9) 90%, rgba(2, 63, 117, .9) 100% );
    }*/
    /**/
    /**/
    .titulo-pagina{ font-size: 2.8rem; align-self: center; padding-right: 35px;
    }
    .titulo-pagina span{ font-size: 3.3rem;
    }
    .titulo-pagina:after{ width: 20px; height: 20px; bottom: 10px; 
    }
    .texto-intro{ position: relative; align-self: center; color: #fff; font-weight: 700; font-style: italic; font-size: 1.25rem; padding: 38px;
    }
    .texto-intro p{ margin: 0;
    }
    .texto-intro::before{ content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url('../img/general/texto-intro-superior.svg') no-repeat top left; background-size: auto 60px;
    }
    .texto-intro::after{ content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url('../img/general/texto-intro-inferior.svg') no-repeat bottom right; background-size: auto 130px;
    }
}
@media(min-width:1200px){
    .banner{ min-height: 700px; padding: 100px 0 250px 0;
    }
}
@media(min-width:1400px){
    /**/
    .titulo-pagina{ padding-right: 35px; font-size: 3.5rem;
    }
    .titulo-pagina span{ font-size: 4rem;
    }
    .titulo-pagina:after{ width: 20px; height: 20px; bottom: 12px; 
    }
    /**/
    .texto-intro{ font-size: 1.35rem; padding: 50px;
    }
    .texto-intro::before{ background-size: auto 70px;
    }
    .texto-intro::after{ background-size: auto 150px;
    }
}
@media(min-width:1600px){
    .banner{ min-height: 1000px; padding: 100px 0 300px 0;
    }
    /**/
    .titulo-pagina{ padding-right: 40px; font-size: 4.375rem;
    }
    .titulo-pagina span{ font-size: 5rem;
    }
    .titulo-pagina:after{ width: 25px; height: 25px; bottom: 15px; 
    }
    /**/
    .texto-intro{ font-size: 1.625rem; padding: 50px 65px;
    }
    .texto-intro::before{ background-size: auto 90px;
    }
}
/*#endregion*/


/*================================*/
/*       #region: CUERPO          */
/*================================*/

.cuerpo{ position: relative; margin: -70px 0 70px 0;
}
.peninsula-cuerpo{ position: relative; margin: 0 0 0 -100%; padding:50px 15px 25px 100%; border-radius: 0 0 30px 0; background-color: #fff;
}
.contenido{ position: relative;
}
.enc-contenido{ position: relative; font-size: 1.6rem; text-transform: uppercase; padding-left: 10px; margin-bottom: 1.5rem;
}
.enc-contenido span{ font-weight: 800;
}
.enc-contenido::before{ content: ''; display: block; width: 4px; height: 100%; position: absolute; left: 0; top: 0; background-color: #E32726; border-radius: 4px 0 4px 0;
}

@media(min-width:576px){
    .peninsula-cuerpo{ padding:50px 50px 25px 100%;
    }
    .enc-contenido{ font-size: 2rem;
    }
}
@media(min-width:992px){
    .cuerpo{ margin: -150px 0 100px 0;
    }
    .peninsula-cuerpo{ padding:50px 50px 50px 100%; border-radius: 0 0 50px 0;
    }
}
@media(min-width:1200px){
    .cuerpo{ margin: -200px 0 100px 0;
    }
    .peninsula-cuerpo{ padding:75px 50px 75px 100%;
    }
    .enc-contenido{ font-size: 2.3rem; padding-left: 15px; margin-bottom: 2rem;
    }
    .enc-contenido::before{ width: 6px; border-radius: 6px 0 6px 0;
    }
}
@media(min-width:1400px){
    .cuerpo{ margin: -250px 0 100px 0;
    }
    .enc-contenido{ font-size: 2.7rem;
    }
}
@media(min-width:1600px){
    .cuerpo{ margin: -300px 0 100px 0;
    }
    .peninsula-cuerpo{ padding:100px 100px 100px 100%;
    }
    .enc-contenido{ font-size: 2.875rem; padding-left: 25px; margin-bottom: 2.5rem;
    }
    .enc-contenido::before{ width: 8px; border-radius: 8px 0 8px 0;
    }
}
/*#endregion*/


/*#region: Menu interno */
.menu-interno-moviles{ border-top: 1px solid #999; border-bottom: 1px solid #999; padding: 10px 0 20px 0; margin-bottom: 50px;
}
.menu-interno-moviles .btn.btn-azul{ border-radius: 5px; padding: 10px;
}
.label-nav-interna{ font-weight: bold;
}

/**/
ul.menu-interno-desktop{ border-left: 5px solid #0058A6; list-style: none; font-size: 1rem;
}
ul.menu-interno-desktop > li > a{ text-decoration: none; color: #212529; font-weight: 700; padding: 16px 8px 16px 8px; margin: 1px 0 1px 0.5rem;
}
ul.menu-interno-desktop > li > a:hover, .menu-interno-desktop > li > a.active { background-color: #F4F7FC; color: #0058A6;
}
ul.menu-interno-desktop > li > a.submenu-visible{ color: #0058A6;
}
ul.menu-interno-desktop > li > a.submenu-visible + .submenu{ visibility: visible; display: block; position: relative; width: auto; height: auto;
}
ul.menu-interno-desktop ul.submenu{ position: absolute; width: 1px; height: 1px; visibility: hidden; margin: 5px 0 0 18px; padding: 0; list-style: none;
}
ul.menu-interno-desktop ul.submenu > li{  margin: 0 0 0 -3px;
}
ul.menu-interno-desktop ul.submenu > li a{ display: block; padding: 7px 7px 7px 13px; text-decoration: none; color: #444; border-left: 2px solid #F4F7FC;
}
ul.menu-interno-desktop ul.submenu > li:first-child a{ padding-top: 0;
}
ul.menu-interno-desktop ul.submenu > li:last-child a{ padding-bottom: 0;
}
ul.menu-interno-desktop ul.submenu > li a:hover{  border-left-color: #dae3f5;
}
ul.menu-interno-desktop ul.submenu > li a.active{  border-left-color: #E32726; background-color: #0058A6;
}
ul.menu-interno-desktop ul.submenu > li a:hover, ul.menu-interno-desktop ul.submenu > li a.active{ color:#0058A6;
}

@media( min-width: 1200px ){
  ul.menu-interno-desktop{ font-size: 1.125rem;
  }
  ul.menu-interno-desktop ul.submenu > li a{ font-size: 1rem !important;
  }
}
@media(min-width: 1400px){
  ul.menu-interno-desktop > li > a{ padding: 24px 16px 24px 32px; 
  }
  ul.menu-interno-desktop ul.submenu{ margin-left: 45px;
  }
}
@media( min-width: 1600px ){
  .gx-personalizado { /* para alteral el gap entre el contenido y la columna lateral*/
    --bs-gutter-x: 6rem;
  }
  ul.menu-interno-desktop{ font-size: 1.25rem; border-left-width: 8px;
  }
}
/*#endregion*/