div#container {
   margin: 0 auto 0 auto;
   position: relative;
   text-align: left;
   width: 994px;
}
body {
   color: #000000;
   font-family: Arial;
   font-size: 16px;
   font-weight: normal;
   line-height: 1.1875;
   margin: 0;
   text-align: center;
   background-color: #FFFFFF;
}

/* ====================================================================== */
/* ===== CÓDIGO CSS DEFINITIVO Y CONSISTENTE PARA LA CABECERA ===== */
/* ====================================================================== */

/* --- CONTENEDOR DE LA CABECERA --- */
#header-container {
    background-color: #191970;
    padding: 10px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-align: left; /* Asegura la alineación a la izquierda en todas las páginas */
}
#logo img {
    max-width: 180px;
    height: auto;
    display: block;
}

/* --- MENÚ DE NAVEGACIÓN --- */
.navbar { position: relative; }
.navbar-nav { margin: 0; padding: 0; list-style: none; display: flex; }
.nav-item { position: relative; }
.nav-link {
    display: block; padding: 10px 15px; font-size: 19px; text-decoration: none;
    color: white; background-color: #191970; transition: background-color 0.3s, color 0.3s;
    cursor: pointer;
}
.nav-link .arrow {
    display: inline-block; margin-left: 5px; vertical-align: middle;
    border-top: 5px solid white; border-right: 5px solid transparent; border-left: 5px solid transparent;
    transition: border-top-color 0.3s;
}

/* --- SUBMENÚ --- */
.dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0 !important; /* <-- CORRECCIÓN FORZADA: Obliga la alineación a la izquierda */
    background-color: #ffffff;
    border: 1px solid #191970;
    z-index: 1000;
    min-width: 100%;
    list-style: none;
    padding: 5px 0;
    margin: 0;
    border-radius: 4px;
    text-align: left !important; /* <-- CORRECCIÓN FORZADA: Obliga la alineación del texto */
}
.dropdown-menu a {
    padding: 12px 20px; font-size: 19px; color: #191970;
    white-space: nowrap; background-color: transparent;
}

/* --- HAMBURGER TOGGLE (BOTÓN MÓVIL) --- */
.navbar-toggle { display: none; }
.submenu-toggle { display: none; }

/* --- ESTILOS PARA ESCRITORIO (min-width: 768px) --- */
@media (min-width: 768px) {
    .nav-item:hover .dropdown-menu { display: block; }
    .nav-link:hover { background-color: white; color: #191970; }
    .nav-link:hover .arrow { border-top-color: #191970; }
    .dropdown-menu a:hover { background-color: #191970; color: white; }
}

/* --- ESTILOS RESPONSIVOS PARA MÓVIL (max-width: 767px) --- */
@media (max-width: 767px) {
    #header-container { flex-wrap: wrap; }
    .navbar { width: 100%; }
    .navbar-toggle {
        display: block; background: none; border: none; padding: 10px; cursor: pointer;
        position: absolute; top: -45px; right: 0; z-index: 1100;
    }
    .icon-bar { background-color: white; display: block; width: 22px; height: 2px; margin-top: 4px; }
    
    .navbar-nav {
        display: none; position: absolute; top: calc(100% - 35px); right: 0; width: max-content;
        flex-direction: column; background-color: #f0f8ff; border: 1px solid #ddd;
        border-radius: 5px; box-shadow: 0 4px 8px rgba(0,0,0,0.1); z-index: 1100;
    }
    .navbar-nav.open { display: flex; }
    .nav-link { color: #191970; background-color: transparent; text-align: left; }
    .nav-link .arrow { border-top-color: #191970; }
    
    .dropdown-menu {
        position: static;
        width: 100%;
        box-shadow: inset 0 3px 5px -5px #555;
        background-color: #e9e9e9;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease-out;
        padding: 0;
        border-radius: 0;
    }
    #submenu-toggle:checked ~ .dropdown-menu { display: block; max-height: 500px; }
    .dropdown-menu a { padding-left: 40px; }
}

/* --- AJUSTE FINAL DE ALTURA PARA LA BARRA DE NAVEGACIÓN EN ESCRITORIO --- */
@media (min-width: 768px) {
    #header-container { padding-top: 5px; padding-bottom: 5px; transition: padding 0.3s ease; }
    #logo img { max-height: 40px; transition: max-height 0.3s ease; }
}


#wb_AcercaDeLayoutGrid3 {
   background-color: transparent;
   background-image: none;
   border-radius: 0px;
   border: 0px solid #000000;
   box-sizing: border-box;
   display: table;
   margin: 0;
   position: relative;
   table-layout: fixed;
   text-align: center;
   width: 100%;
   clear: both;
}
#AcercaDeLayoutGrid3 {
   margin-left: auto;
   margin-right: auto;
   padding: 0px 0px 0px 0px;
   box-sizing: border-box;
}
#AcercaDeLayoutGrid3 > .row {
   margin-left: 0;
   margin-right: 0;
}
#AcercaDeLayoutGrid3 > .row > .col-1 {
   font-size: 0;
   min-height: 1px;
   padding-left: 0px;
   padding-right: 0px;
   position: relative;
   box-sizing: border-box;
}
#AcercaDeLayoutGrid3 > .row > .col-1 {
   float: left;
}
#AcercaDeLayoutGrid3 > .row > .col-1 {
   background-image: none;
   text-align: left;
   width: 100%;
   background-color: transparent;
}
#AcercaDeLayoutGrid3:before,
#AcercaDeLayoutGrid3:after,
#AcercaDeLayoutGrid3 .row:before,
#AcercaDeLayoutGrid3 .row:after {
   content: " ";
   display: table;
}
#AcercaDeLayoutGrid3:after,
#AcercaDeLayoutGrid3 .row:after {
   clear: both;
}

#wb_AcercaDeText1 {
   background-image: none;
   border-radius: 0px;
   border: 0px solid #C0C0C0;
   margin: 20px 0px 0px 0px;
   padding: 0;
   text-align: center;
   background-color: transparent;
}
#wb_AcercaDeText1 div {
   text-align: center;
}
#wb_AcercaDeText1 {
   box-sizing: border-box;
   width: 100%;
   display: block;
}
#wb_AcercaDeLayoutGrid8 {
   background-color: transparent;
   background-image: none;
   border-radius: 0px;
   border: 0px solid #000000;
   box-sizing: border-box;
   display: table;
   margin: 0;
   position: relative;
   table-layout: fixed;
   text-align: center;
   width: 100%;
   clear: both;
}
#AcercaDeLayoutGrid8 {
   margin-left: auto;
   margin-right: auto;
   padding: 0px 0px 0px 0px;
   box-sizing: border-box;
}
#AcercaDeLayoutGrid8 > .row {
   margin-left: 0;
   margin-right: 0;
}
#AcercaDeLayoutGrid8 > .row > .col-1 {
   font-size: 0;
   min-height: 1px;
   padding-left: 0px;
   padding-right: 0px;
   position: relative;
   box-sizing: border-box;
}
#AcercaDeLayoutGrid8 > .row > .col-1 {
   float: left;
}
#AcercaDeLayoutGrid8 > .row > .col-1 {
   background-image: none;
   text-align: left;
   width: 100%;
   background-color: transparent;
}
#AcercaDeLayoutGrid8:before,
#AcercaDeLayoutGrid8:after,
#AcercaDeLayoutGrid8 .row:before,
#AcercaDeLayoutGrid8 .row:after {
   content: " ";
   display: table;
}
#AcercaDeLayoutGrid8:after,
#AcercaDeLayoutGrid8 .row:after {
   clear: both;
}

#wb_AcercaDeLayoutGrid10 {
   background-color: transparent;
   background-image: none;
   border-radius: 0px;
   border: 0px solid #000000;
   box-sizing: border-box;
   display: table;
   margin: 0;
   position: relative;
   table-layout: fixed;
   text-align: center;
   width: 100%;
   clear: both;
}
#AcercaDeLayoutGrid10 {
   margin-left: auto;
   margin-right: auto;
   padding: 0px 15px 0px 15px;
   box-sizing: border-box;
}
#AcercaDeLayoutGrid10 > .row {
   margin-left: -15px;
   margin-right: -15px;
}
#AcercaDeLayoutGrid10 > .row > .col-1 {
   font-size: 0;
   min-height: 1px;
   padding-left: 15px;
   padding-right: 15px;
   position: relative;
   box-sizing: border-box;
}
#AcercaDeLayoutGrid10 > .row > .col-1 {
   float: left;
}
#AcercaDeLayoutGrid10 > .row > .col-1 {
   background-image: none;
   text-align: left;
   width: 100%;
   background-color: transparent;
}
#AcercaDeLayoutGrid10:before,
#AcercaDeLayoutGrid10:after,
#AcercaDeLayoutGrid10 .row:before,
#AcercaDeLayoutGrid10 .row:after {
   content: " ";
   display: table;
}
#AcercaDeLayoutGrid10:after,
#AcercaDeLayoutGrid10 .row:after {
   clear: both;
}

#wb_AcercaDeLayoutGrid2 {
   background-color: transparent;
   background-image: none;
   border-radius: 0px;
   border: 0px solid #000000;
   box-sizing: border-box;
   display: table;
   margin: 0;
   position: relative;
   table-layout: fixed;
   text-align: center;
   width: 100%;
   clear: both;
}
#AcercaDeLayoutGrid2 {
   margin-left: auto;
   margin-right: auto;
   padding: 0px 15px 0px 15px;
   box-sizing: border-box;
}
#AcercaDeLayoutGrid2 > .row {
   margin-left: -15px;
   margin-right: -15px;
}
#AcercaDeLayoutGrid2 > .row > .col-1,
#AcercaDeLayoutGrid2 > .row > .col-2 {
   font-size: 0;
   min-height: 1px;
   padding-left: 15px;
   padding-right: 15px;
   position: relative;
   box-sizing: border-box;
}
#AcercaDeLayoutGrid2 > .row > .col-1,
#AcercaDeLayoutGrid2 > .row > .col-2 {
   float: left;
}
#AcercaDeLayoutGrid2 > .row > .col-1 {
   background-image: none;
   text-align: left;
   width:20%;
   background-color: transparent;
}
#AcercaDeLayoutGrid2 > .row > .col-2 {
   background-image: none;
   text-align: left;
   width: 80%;
   background-color: transparent;
}
#AcercaDeLayoutGrid2:before,
#AcercaDeLayoutGrid2:after,
#AcercaDeLayoutGrid2 .row:before,
#AcercaDeLayoutGrid2 .row:after {
   content: " ";
   display: table;
}
#AcercaDeLayoutGrid2:after,
#AcercaDeLayoutGrid2 .row:after {
   clear: both;
}

#wb_AcercaDeText2 {
   background-image: none;
   border-radius: 0px;
   border: 0px solid #C0C0C0;
   margin: 20px 0px 0px 0px;
   padding: 0;
   text-align: center;
   background-color: transparent;
}
#wb_AcercaDeText2 div {
   text-align: center;
}
#wb_AcercaDeText2 {
   box-sizing: border-box;
   width: 100%;
   display: block;
}
#wb_AcercaDeText3 {
   background-image: none;
   border-radius: 0px;
   border: 0px solid #C0C0C0;
   margin: 20px 0px 0px 0px;
   padding: 0;
   text-align: left;
   background-color: transparent;
}
#wb_AcercaDeText3 div {
   text-align: left;
}
#wb_AcercaDeText3 {
   box-sizing: border-box;
   width: 100%;
   display: block;
}
#wb_AcercaDeSection2 {
   background-color: #FFFFFF;
   background-image: radial-gradient(circle, #FFFFFF 0%, #FFFFFF 100%);
   border-radius: 3px;
   border: 0px solid #DDDDDD;
   box-sizing: border-box;
   display: flex;
   flex-direction: column;
   margin-left: auto  !important;
   margin-right: auto  !important;
   margin: 0;
   max-width: 1216px;
   position: relative;
   text-align: center;
   height: 651px;
}

.card {
  height: 100%;
  display: flex;
  flex-direction: column;
}

#AcercaDeSection2-card-body {
   font-size: 0;
   flex: 1 1 auto;
}
#AcercaDeSection2-card-item0 {
   height: 631px;
   left: 0%;
   margin: 0;
   max-width: 1200px;
   padding: 0px 0px 0px 0px;
   position: absolute;
   top: 0px;
   width: 99.9%;
   box-sizing: border-box;
}
#AcercaDeSection2-card-item0 img {
   border-radius: 0px;
   border: 0px solid transparent;
   height: 100%;
   left: 0;
   object-fit: cover;
   position: absolute;
   top: 0;
   width: 100%;
   box-sizing: border-box;
}
#AcercaDeSection2-card-item1 {
   animation: transform-pulse 1000ms linear 0ms infinite normal;
   color: #191970;
   font-family: Arial;
   font-size: 48px;
   font-style: normal;
   font-weight: bold;
   height: 112px;
   left: auto;
   margin: 0;
   padding: 0px 0px 0px 0px;
   position: absolute;
   right: 400px;
   top: 90px;
   width: 64px;
   box-sizing: border-box;
}
#wb_AcercaDeSection5 {
   background-color: #FFFFFF;
   background-image: none;
   border-radius: 3px;
   border: 0px solid #DDDDDD;
   box-sizing: border-box;
   display: flex;
   flex-direction: column;
   margin: 0;
   position: relative;
   text-align: center;
   height: 356px;
}
#AcercaDeSection5-card-body {
   font-size: 0;
   flex: 1 1 auto;
}
#AcercaDeSection5-card-item0 {
   height: 51.4%;
   left: 0%;
   margin: 0;
   padding: 0px 0px 0px 0px;
   position: absolute;
   top: 23.3%;
   width: 95.7%;
   box-sizing: border-box;
}
#AcercaDeSection5-card-item0 > div {
   -webkit-clip-path: url(#AcercaDeSection5-card-item0-clippath);
   background-color: #F0F8FF;
   background-image: none;
   clip-path: url(#AcercaDeSection5-card-item0-clippath);
   height: 100%;
   left: 0;
   padding: 0;
   top: 0;
   width: 100%;
   position: absolute;
}
#AcercaDeSection5-card-item1 {
   color: #191970;
   font-family: Arial;
   font-size: 44px;
   font-style: normal;
   font-weight: bold;
   height: 18%;
   left:20%;
   margin: 0;
   padding: 0px 0px 0px 0px;
   position: absolute;
   top: 50.3%;
   width: 21.1%;
   box-sizing: border-box;
}
#wb_AcercaDeSection6 {
   background-color: #FFFFFF;
   background-image: none;
   border-radius: 3px;
   border: 0px solid #DDDDDD;
   box-sizing: border-box;
   display: flex;
   flex-direction: column;
   margin: 0;
   position: relative;
   text-align: center;
   height: 246px;
}
#AcercaDeSection6-card-body {
   font-size: 0;
   flex: 1 1 auto;
   position: relative; /* Necesario para posicionar "IMPORTÂNCIA" */
   display: flex;
   align-items: center; /* Centra verticalmente */
   justify-content: center; /* Centra horizontalmente */
}
#AcercaDeSection6-card-item0 {
   height: 91.2%;
   left: 18.5%;
   margin: 0;
   padding: 0px 0px 0px 0px;
   position: absolute;
   top: 3.7%;
   width: 55.3%;
   box-sizing: border-box;
}
#AcercaDeSection6-card-item0 > div {
   -webkit-clip-path: url(#AcercaDeSection6-card-item0-clippath);
   background-color: #F0F8FF;
   background-image: none;
   clip-path: url(#AcercaDeSection6-card-item0-clippath);
   height: 100%;
   left: 0;
   padding: 0;
   top: 0;
   width: 100%;
   position: absolute;
}
#AcercaDeSection6-card-item1 {
   color: #191970;
   font-family: Arial;
   font-size: 44px;
   font-style: normal;
   font-weight: bold;
   height: 52.6%;
   left: 15%;
   margin: 0;
   padding: 0px 0px 0px 0px;
   position: absolute;
   top: 80%;
   width: 16.4%;
   box-sizing: border-box;
   text-align: left;
}
#wb_AcercaDeSection7 {
   background-color: #FFFFFF;
   background-image: none;
   border-radius: 3px;
   border: 0px solid #DDDDDD;
   box-sizing: border-box;
   display: flex;
   flex-direction: column;
   margin: 0;
   position: relative;
   text-align: center;
   height: 254px;
}
#AcercaDeSection7-card-body {
   font-size: 0;
   flex: 1 1 auto;
}
#AcercaDeSection7-card-item0 {
   height: 93.8%;
   left: 18.5%;
   margin: 0;
   padding: 0px 0px 0px 0px;
   position: absolute;
   top: 5.6%;
   width: 71.9%;
   box-sizing: border-box;
}
#AcercaDeSection7-card-item0 > div {
   -webkit-clip-path: url(#AcercaDeSection7-card-item0-clippath);
   background-color: #F0F8FF;
   background-image: none;
   clip-path: url(#AcercaDeSection7-card-item0-clippath);
   height: 100%;
   left: 0;
   padding: 0;
   top: 0;
   width: 100%;
   position: absolute;
}
#AcercaDeSection7-card-item1 {
   color: #191970;
   font-family: Arial;
   font-size: 44px;
   font-style: normal;
   font-weight: bold;
   height: 23.6%;
   left: 20%;/*35.7%;*/
   margin: 0;
   padding: 0px 0px 0px 0px;
   position: absolute;
   top: 60%;
   width: 50%; /*15.7%;*/
   box-sizing: border-box;
}
#wb_AcercaDeLayoutGrid4 {
   background-color: transparent;
   background-image: none;
   border-radius: 0px;
   border: 0px solid #000000;
   box-sizing: border-box;
   display: table;
   margin: 0;
   position: relative;
   table-layout: fixed;
   text-align: center;
   width: 100%;
   clear: both;
}
#AcercaDeLayoutGrid4 {
   margin-left: auto;
   margin-right: auto;
   padding: 0px 0px 0px 0px;
   box-sizing: border-box;
}
#AcercaDeLayoutGrid4 > .row {
   margin-left: 0;
   margin-right: 0;
}
#AcercaDeLayoutGrid4 > .row > .col-1 {
   font-size: 0;
   min-height: 1px;
   padding-left: 0px;
   padding-right: 0px;
   position: relative;
   box-sizing: border-box;
}
#AcercaDeLayoutGrid4 > .row > .col-1 {
   float: left;
}
#AcercaDeLayoutGrid4 > .row > .col-1 {
   background-image: none;
   text-align: left;
   width: 100%;
   background-color: transparent;
}
#AcercaDeLayoutGrid4:before,
#AcercaDeLayoutGrid4:after,
#AcercaDeLayoutGrid4 .row:before,
#AcercaDeLayoutGrid4 .row:after {
   content: " ";
   display: table;
}
#AcercaDeLayoutGrid4:after,
#AcercaDeLayoutGrid4 .row:after {
   clear: both;
}

#wb_AcercaDeLayoutGrid5 {
   background-color: transparent;
   background-image: none;
   border-radius: 0px;
   border: 0px solid #000000;
   box-sizing: border-box;
   display: table;
   margin: 0;
   position: relative;
   table-layout: fixed;
   text-align: center;
   width: 100%;
   clear: both;
}
#AcercaDeLayoutGrid5 {
   margin-left: auto;
   margin-right: auto;
   padding: 0px 15px 0px 15px;
   box-sizing: border-box;
}
#AcercaDeLayoutGrid5 > .row {
   margin-left: -15px;
   margin-right: -15px;
}
#AcercaDeLayoutGrid5 > .row > .col-1,
#AcercaDeLayoutGrid5 > .row > .col-2 {
   font-size: 0;
   min-height: 1px;
   padding-left: 15px;
   padding-right: 15px;
   position: relative;
   box-sizing: border-box;
}
#AcercaDeLayoutGrid5 > .row > .col-1,
#AcercaDeLayoutGrid5 > .row > .col-2 {
   float: left;
}
#AcercaDeLayoutGrid5 > .row > .col-1 {
   background-image: none;
   text-align: left;
   width: 60%;
   background-color: transparent;
}
#AcercaDeLayoutGrid5 > .row > .col-2 {
   background-image: none;
   text-align: left;
   width: 40%;
   background-color: transparent;
}
#AcercaDeLayoutGrid5:before,
#AcercaDeLayoutGrid5:after,
#AcercaDeLayoutGrid5 .row:before,
#AcercaDeLayoutGrid5 .row:after {
   content: " ";
   display: table;
}
#AcercaDeLayoutGrid5:after,
#AcercaDeLayoutGrid5 .row:after {
   clear: both;
}

#wb_indexText16 {
   background-image: none;
   border-radius: 0px;
   border: 0px solid #C0C0C0;
   margin: 0;
   padding: 20px 0px 10px 0px;
   text-align: left;
   background-color: transparent;
}
#wb_indexText16 div {
   text-align: left;
}
#wb_indexText16 {
   box-sizing: border-box;
   width: 100%;
   display: block;
}
#wb_AcercaDeLayoutGrid6 {
   background-color: transparent;
   background-image: none;
   border-radius: 0px;
   border: 0px solid #000000;
   box-sizing: border-box;
   display: table;
   margin: 0;
   position: relative;
   table-layout: fixed;
   text-align: center;
   width: 100%;
   clear: both;
}
#AcercaDeLayoutGrid6 {
   margin-left: auto;
   margin-right: auto;
   padding: 0px 0px 0px 0px;
   box-sizing: border-box;
}
#AcercaDeLayoutGrid6 > .row {
   margin-left: 0;
   margin-right: 0;
}
#AcercaDeLayoutGrid6 > .row > .col-1 {
   font-size: 0;
   min-height: 1px;
   padding-left: 0px;
   padding-right: 0px;
   position: relative;
   box-sizing: border-box;
}
#AcercaDeLayoutGrid6 > .row > .col-1 {
   float: left;
}
#AcercaDeLayoutGrid6 > .row > .col-1 {
   background-image: none;
   text-align: left;
   width: 100%;
   background-color: transparent;
}
#AcercaDeLayoutGrid6:before,
#AcercaDeLayoutGrid6:after,
#AcercaDeLayoutGrid6 .row:before,
#AcercaDeLayoutGrid6 .row:after {
   content: " ";
   display: table;
}
#AcercaDeLayoutGrid6:after,
#AcercaDeLayoutGrid6 .row:after {
   clear: both;
}

#wb_AcercaDeImage2 {
   margin: 0;
   vertical-align: top;
   height: 100%;
}
/*#AcercaDeImage2 {
   box-sizing: border-box;
   display: inline-block;
   height: 100%;
   object-fit: cover;
   padding: 0px 0px 0px 0px;
   vertical-align: top;
   width: 100%;
   border: 0px solid #000000;
}*/

#AcercaDeImage2 {
  box-sizing: border-box;
  display: block;   /* Es mejor usar block para un control total del ancho */
  width: 100%;      /* La imagen ocupará el 100% del ancho de su contenedor (.col-1) */
  height: auto;     /* El navegador calculará la altura para no deformar la imagen */
  max-width: 100%;  /* Buena práctica para asegurar que no se desborde */
  border: 0px solid #000000;
  padding: 0px 0px 0px 0px;
}

#wb_AcercaDeLayoutGrid7 {
   background-color: transparent;
   background-image: none;
   border-radius: 0px;
   border: 0px solid #000000;
   box-sizing: border-box;
   display: table;
   margin: 0;
   position: relative;
   table-layout: fixed;
   text-align: center;
   width: 100%;
   clear: both;
}
#AcercaDeLayoutGrid7 {
   margin-left: auto;
   margin-right: auto;
   padding: 0px 15px 0px 15px;
   box-sizing: border-box;
}
#AcercaDeLayoutGrid7 > .row {
   margin-left: -15px;
   margin-right: -15px;
}
#AcercaDeLayoutGrid7 > .row > .col-1,
#AcercaDeLayoutGrid7 > .row > .col-2 {
   font-size: 0;
   min-height: 1px;
   padding-left: 15px;
   padding-right: 15px;
   position: relative;
   box-sizing: border-box;
}
#AcercaDeLayoutGrid7 > .row > .col-1,
#AcercaDeLayoutGrid7 > .row > .col-2 {
   float: left;
}
#AcercaDeLayoutGrid7 > .row > .col-1 {
   background-image: none;
   text-align: left;
   width: 50%;
   background-color: transparent;
}
#AcercaDeLayoutGrid7 > .row > .col-2 {
   background-image: none;
   text-align: left;
   width: 50%;
   background-color: transparent;
}
#AcercaDeLayoutGrid7:before,
#AcercaDeLayoutGrid7:after,
#AcercaDeLayoutGrid7 .row:before,
#AcercaDeLayoutGrid7 .row:after {
   content: " ";
   display: table;
}
#AcercaDeLayoutGrid7:after,
#AcercaDeLayoutGrid7 .row:after {
   clear: both;
}

#AcercaDeLine1 {
   border-bottom-width: 39px;
   border-left: 0;
   border-right: 0;
   border-style: solid;
   border-top: 0;
   height: 0  !important;
   line-height: 0  !important;
   margin: 0;
   padding: 0;
   border-color: transparent;
}
#wb_AcercaDeLayoutGrid9 {
   background-color: transparent;
   background-image: none;
   border-radius: 0px;
   border: 0px solid #000000;
   box-sizing: border-box;
   display: table;
   margin: 0;
   position: relative;
   table-layout: fixed;
   text-align: center;
   width: 100%;
   clear: both;
}
#AcercaDeLayoutGrid9 {
   margin-left: auto;
   margin-right: auto;
   padding: 0px 0px 0px 0px;
   box-sizing: border-box;
}
#AcercaDeLayoutGrid9 > .row {
   margin-left: 0;
   margin-right: 0;
}
#AcercaDeLayoutGrid9 > .row > .col-1 {
   font-size: 0;
   min-height: 1px;
   padding-left: 0px;
   padding-right: 0px;
   position: relative;
   box-sizing: border-box;
}
#AcercaDeLayoutGrid9 > .row > .col-1 {
   float: left;
}
#AcercaDeLayoutGrid9 > .row > .col-1 {
   background-image: none;
   text-align: left;
   width: 100%;
   background-color: transparent;
}
#AcercaDeLayoutGrid9:before,
#AcercaDeLayoutGrid9:after,
#AcercaDeLayoutGrid9 .row:before,
#AcercaDeLayoutGrid9 .row:after {
   content: " ";
   display: table;
}
#AcercaDeLayoutGrid9:after,
#AcercaDeLayoutGrid9 .row:after {
   clear: both;
}

#AcercaDeLine2 {
   border-bottom-width: 31px;
   border-left: 0;
   border-right: 0;
   border-style: solid;
   border-top: 0;
   height: 0  !important;
   line-height: 0  !important;
   margin: 0;
   padding: 0;
   border-color: transparent;
}
#wb_indexLayoutGrid20 {
   background-color: #191970;
   background-image: none;
   border-radius: 0px;
   border: 0px solid #000000;
   box-sizing: border-box;
   display: table;
   margin: 0;
   position: relative;
   table-layout: fixed;
   text-align: center;
   width: 100%;
   clear: both;
}
#indexLayoutGrid20 {
   margin-left: auto;
   margin-right: auto;
   padding: 0px 15px 0px 15px;
   box-sizing: border-box;
}
#indexLayoutGrid20 > .row {
   margin-left: -15px;
   margin-right: -15px;
}
#indexLayoutGrid20 > .row > .col-1 {
   font-size: 0;
   min-height: 1px;
   padding-left: 15px;
   padding-right: 15px;
   position: relative;
   box-sizing: border-box;
}
#indexLayoutGrid20 > .row > .col-1 {
   float: left;
}
#indexLayoutGrid20 > .row > .col-1 {
   background-image: none;
   text-align: left;
   width: 100%;
   background-color: transparent;
}
#indexLayoutGrid20:before,
#indexLayoutGrid20:after,
#indexLayoutGrid20 .row:before,
#indexLayoutGrid20 .row:after {
   content: " ";
   display: table;
}
#indexLayoutGrid20:after,
#indexLayoutGrid20 .row:after {
   clear: both;
}


#AcercaDeLine3 {
   border-bottom-width: 39px;
   border-left: 0;
   border-right: 0;
   border-style: solid;
   border-top: 0;
   height: 0  !important;
   line-height: 0  !important;
   margin: 0;
   padding: 0;
   border-color: rgba(255, 255, 255, 1.00);
}
#AcercaDeLine4 {
   border-bottom-width: 40px;
   border-left: 0;
   border-right: 0;
   border-style: solid;
   border-top: 0;
   height: 0  !important;
   line-height: 0  !important;
   margin: 0;
   padding: 0;
   border-color: rgba(255, 255, 255, 1.00);
}
#AcercaDeLine5 {
   border-bottom-width: 43px;
   border-left: 0;
   border-right: 0;
   border-style: solid;
   border-top: 0;
   height: 0  !important;
   line-height: 0  !important;
   margin: 0;
   padding: 0;
   border-color: rgba(255, 255, 255, 1.00);
}
#AcercaDeLine5 {
   width: 100%;
   z-index: 10;
   display: block;
}
#wb_AcercaDeSection6 {
   text-align: center;
   width: 100%;
   z-index: 9;
   display: flex;
}
#wb_AcercaDeSection7 {
   text-align: center;
   width: 100%;
   z-index: 12;
   display: flex;
}
#wb_AcercaDeSection2 {
   text-align: center;
   width: 100%;
   z-index: 3;
   display: flex;
}

#AcercaDeLine2 {
   width: 100%;
   z-index: 14;
   display: block;
}

#AcercaDeLine4 {
   width: 100%;
   z-index: 7;
   display: block;
}
#wb_AcercaDeSection5 {
   text-align: center;
   width: 100%;
   z-index: 5;
   display: flex;
}
#AcercaDeLine3 {
   width: 100%;
   z-index: 4;
   display: block;
}
#AcercaDeLine1 {
   width: 100%;
   z-index: 2;
   display: block;
}

/* ====================================================================== */
/* ===== BOTÓN FLOTANTE "SUBIR" (REEMPLAZO MODERNO DE STICKYLAYER) ===== */
/* ====================================================================== */

#indexLayer1 {
    position: fixed;     /* Lo fija en la pantalla */
    bottom: 30px;        /* 30px desde abajo */
    right: 30px;         /* 30px desde la derecha */
    width: 40px;         /* Ancho del botón */
    height: 40px;        /* Alto del botón */
    z-index: 1050;       /* Se asegura que esté por encima de otros elementos */
    
    /* Control de visibilidad */
    opacity: 0;          /* Inicialmente invisible */
    visibility: hidden;  /* Inicialmente oculto */
    transition: opacity 0.4s, visibility 0.4s; /* Animación suave */
    
    background-color: rgba(25, 25, 112, 0.7); /* Fondo azul oscuro semitransparente */
    border-radius: 50%; /* Lo hace redondo */
    cursor: pointer;
}

/* Clase que se añadirá con JavaScript para mostrar el botón */
#indexLayer1.visible {
    opacity: 1;
    visibility: visible;
}

#indexLayer1:hover {
    background-color: rgba(25, 25, 112, 1); /* Se vuelve opaco al pasar el mouse */
}

/* Ajustes para el ícono SVG dentro del botón */
#indexLayer1 #wb_indexIcon1 {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

#indexLayer1 #indexIcon1 g {
    fill: #FFFFFF; /* Color del ícono (flecha) en blanco */
}

/* ====================================================================== */
/* == AJUSTE RESPONSIVO PARA EL TEXTO DEL FOOTER (BARRA INFERIOR) == */
/* ====================================================================== */

/* Por defecto (vista de escritorio), mostramos el texto largo y ocultamos el corto */
.footer-texto-largo {
    display: inline; /* O el valor que corresponda */
}
.footer-texto-corto {
    display: none;
}

/* ====================================================================== */
/* ===== CÓDIGO RESPONSIVO PARA LA PÁGINA "ACERCA DE"               ===== */
/* ====================================================================== */

@media (max-width: 767px) {

  /* 1. Apila las columnas en todos los layouts de 2 columnas */
  #AcercaDeLayoutGrid2 > .row > .col-1,
  #AcercaDeLayoutGrid2 > .row > .col-2,
  #AcercaDeLayoutGrid5 > .row > .col-1,
  #AcercaDeLayoutGrid5 > .row > .col-2,
  #AcercaDeLayoutGrid7 > .row > .col-1,
  #AcercaDeLayoutGrid7 > .row > .col-2 {
    width: 100% !important;
    float: none;
    margin-bottom: 20px; /* Añade espacio entre los elementos apilados */
  }

  /* 2. Reordena las secciones para un mejor flujo en móvil */
  #AcercaDeLayoutGrid2 > .row,
  #AcercaDeLayoutGrid7 > .row {
    display: flex;
    flex-direction: column;
  }
  
  #AcercaDeLayoutGrid5 > .row {
    display: flex;
    flex-direction: column-reverse; /* Pone el cartel "IMPORTÂNCIA" arriba del texto */
  }

  /* 3. Corrige los carteles con texto posicionado de forma absoluta */
  #wb_AcercaDeSection5,
  #wb_AcercaDeSection6,
  #wb_AcercaDeSection7 {
    height: auto; /* Altura automática */
    min-height: 120px; /* Altura mínima para que no colapse */
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #e0e0e0; /* Añade un borde sutil */
    box-shadow: 0 2px 4px rgba(0,0,0,0.05); /* Sombra sutil */
    padding: 15px;
  }

  /* Anula el posicionamiento absoluto del texto y lo formatea */
  #AcercaDeSection5-card-item1,
  #AcercaDeSection6-card-item1,
  #AcercaDeSection7-card-item1 {
    position: static !important; /* LA CORRECCIÓN MÁS IMPORTANTE */
    font-size: 28px !important; /* Reduce el tamaño del texto para móvil */
    text-align: center;
    padding: 10px;
    width: auto !important;
    height: auto !important;
  }
  
  /* Centra el texto de descripción en móvil */
  #wb_AcercaDeText1 div,
  #wb_AcercaDeText2 div {
     text-align: center;
  }

      /* Ocultamos el texto largo */
  .footer-texto-largo {
      display: none;
  }
  /* Y mostramos el texto corto */
  .footer-texto-corto {
      display: inline; /* O el valor que corresponda */
  }

  /* Opcional: Ajustamos el tamaño de la fuente en móvil para que quepa mejor */
  #wb_indexText16 span {
      font-size: 16px !important;
  }
}
