body {
  color: #000000;
  font-family: Arial;
  font-size: 13px;
  font-weight: normal;
  line-height: 1.1875;
  margin: 0;
  padding: 0;
  background-color: #ffffff;
}

/* ====================================================================== */
/* ===== CÓDIGO CSS DEFINITIVO PARA LA CABECERA Y MENÚ ===== */
/* ====================================================================== */

/* --- CONTENEDOR DE LA CABECERA --- */
#header-container {
    background-color: #191970;
    padding: 10px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
#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; /* Menú horizontal por defecto */
}
.nav-item {
    position: relative; /* Clave para el posicionamiento del submenú */
}
.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; /* Oculto por defecto */
    position: absolute;
    top: 100%;
    left: 0;
    background-color: #ffffff;
    border: 1px solid #191970;
    min-width: 100%; /* Ocupa al menos el ancho de su padre */
    z-index: 1000;
    list-style: none;
    padding: 5px 0;
    margin: 0;
    border-radius: 4px;
}
.dropdown-menu a {
    padding: 12px 20px;
    font-size: 19px;
    color: #191970;
    white-space: nowrap;
    background-color: transparent;
}

/* --- EFECTOS HOVER PARA ESCRITORIO --- */
@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;
    }
}

/* --- HAMBURGER TOGGLE (BOTÓN MÓVIL) --- */
.navbar-toggle { display: none; }
.submenu-toggle { display: none; }

/* --- ESTILOS RESPONSIVOS PARA MÓVIL --- */
@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;
        border: none;
        box-shadow: inset 0 3px 5px -5px #555;
        background-color: #e9e9e9;
        width: 100%;
        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: 30px;
    }
}

#wb_Heading1 {
  background-image: none;
  border-radius: 0px;
  border: 0px solid #191970;
  margin: 0;
  padding: 0px 0px 0px 0px;
  text-align: center;
  background-color: transparent;
}
#Heading1 {
  font-family: Arial;
  font-size: 32px;
  font-style: normal;
  font-weight: bold;
  margin: 0;
  text-align: center;
  text-transform: none;
  color: #191970;
}
#wb_Text1 {
  background-image: none;
  border-radius: 0px;
  border: 0px solid #c0c0c0;
  margin: 0;
  padding: 0;
  text-align: left;
  background-color: transparent;
}
#wb_Text1 {
  font-family: Arial;
  font-size: 21px;
  font-weight: normal;
  line-height: 24px;
  color: #191970;
}
#wb_Text1 div {
  text-align: left;
}
#wb_indexHeading1 {
  background-image: none;
  border-radius: 0px;
  border: 0px solid #000000;
  margin: 0;
  padding: 0px 0px 0px 0px;
  text-align: left;
  background-color: transparent;
}
#indexHeading1 {
  font-family: Arial;
  font-size: 32px;
  font-style: normal;
  font-weight: bold;
  margin: 0;
  text-align: left;
  text-transform: none;
  color: #87ceeb;
}
#wb_indexText1 {
  background-image: none;
  border-radius: 0px;
  border: 0px solid #c0c0c0;
  margin: 0;
  padding: 0;
  text-align: left;
  background-color: transparent;
}
#wb_indexText1 div {
  text-align: left;
}
#wb_indexHeading2 {
  background-image: none;
  border-radius: 0px;
  border: 0px solid #000000;
  margin: 0;
  padding: 0px 0px 0px 0px;
  text-align: center;
  background-color: transparent;
}
#indexHeading2 {
  font-family: Arial;
  font-size: 32px;
  font-style: normal;
  font-weight: bold;
  margin: 0;
  text-align: center;
  text-transform: none;
  color: #191970;
}
#wb_indexHeading3 {
  background-image: none;
  border-radius: 0px;
  border: 0px solid #000000;
  margin: 0;
  padding: 0px 0px 0px 0px;
  text-align: center;
  background-color: transparent;
}
#indexHeading3 {
  font-family: Arial;
  font-size: 32px;
  font-style: normal;
  font-weight: bold;
  margin: 0;
  text-align: center;
  text-transform: none;
  color: #87ceeb;
}
#wb_indexLayoutGrid1 {
  background-color: #ffffff;
  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;
}
#indexLayoutGrid1 {
  margin-left: auto;
  margin-right: auto;
  padding: 28px 15px 10px 15px;
  box-sizing: border-box;
}
#indexLayoutGrid1 > .row {
  margin-left: -15px;
  margin-right: -15px;
}
#indexLayoutGrid1 > .row > .col-1 {
  font-size: 0;
  min-height: 1px;
  padding-left: 15px;
  padding-right: 15px;
  position: relative;
  box-sizing: border-box;
}
#indexLayoutGrid1 > .row > .col-1 {
  float: left;
}
#indexLayoutGrid1 > .row > .col-1 {
  background-image: none;
  text-align: left;
  width: 100%;
  background-color: transparent;
}
#indexLayoutGrid1:before,
#indexLayoutGrid1:after,
#indexLayoutGrid1 .row:before,
#indexLayoutGrid1 .row:after {
  content: " ";
  display: table;
}
#indexLayoutGrid1:after,
#indexLayoutGrid1 .row:after {
  clear: both;
}

#wb_indexHeading4 {
  background-image: none;
  border-radius: 0px;
  border: 0px solid #000000;
  box-sizing: border-box;
  margin: 0;
  padding: 0px 0px 0px 0px;
  text-align: center;
  vertical-align: top;
  background-color: transparent;
}
#indexHeading4 {
  font-family: Arial;
  font-size: 17px;
  font-style: normal;
  font-weight: bold;
  margin: 0;
  text-align: center;
  text-transform: none;
  color: #191970;
}
#wb_indexHeading5 {
  background-image: none;
  border-radius: 0px;
  border: 0px solid #000000;
  box-sizing: border-box;
  margin: 0;
  padding: 0px 0px 0px 0px;
  text-align: center;
  vertical-align: top;
  background-color: transparent;
}
#indexHeading5 {
  font-family: Arial;
  font-size: 27px;
  font-style: normal;
  font-weight: bold;
  margin: 0;
  text-align: center;
  text-transform: none;
  color: #191970;
}
#wb_indexLayoutGrid2 {
  background-color: #ffffff;
  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;
}
#indexLayoutGrid2 {
  margin-left: auto;
  margin-right: auto;
  padding: 12px 15px 0px 15px;
  box-sizing: border-box;
}
#indexLayoutGrid2 > .row {
  margin-left: -15px;
  margin-right: -15px;
}
#indexLayoutGrid2 > .row > .col-1 {
  font-size: 0;
  min-height: 1px;
  padding-left: 15px;
  padding-right: 15px;
  position: relative;
  box-sizing: border-box;
}
#indexLayoutGrid2 > .row > .col-1 {
  float: left;
}
#indexLayoutGrid2 > .row > .col-1 {
  background-image: none;
  text-align: left;
  width: 100%;
  background-color: transparent;
}
#indexLayoutGrid2:before,
#indexLayoutGrid2:after,
#indexLayoutGrid2 .row:before,
#indexLayoutGrid2 .row:after {
  content: " ";
  display: table;
}
#indexLayoutGrid2:after,
#indexLayoutGrid2 .row:after {
  clear: both;
}

#wb_indexText2 {
  background-image: none;
  border-radius: 0px;
  border: 0px solid #c0c0c0;
  margin: 0;
  padding: 0;
  text-align: center;
  background-color: transparent;
}
#wb_indexText2 div {
  text-align: center;
}
#wb_indexText2 {
  box-sizing: border-box;
  width: 100%;
  display: block;
}

/* ====================================================================== */
/* ===== CÓDIGO FINAL PARA TARJETAS DE SERVICIOS RESPONSIVAS v2 ===== */
/* ====================================================================== */

/* --- Contenedor Principal de las Cards --- */
#indexCardRepeater1 {
    display: flex;
    gap: 30px; /* Separación entre tarjetas */
    padding: 30px; /* Espacio exterior alrededor de las tres tarjetas */
    box-sizing: border-box;
    width: 100%;
}

/* --- Estilo Unificado para Todas las Cards --- */
.card {
    background-color: #f0f8ff;
    border: 1px solid #dddddd;
    border-radius: 15px;
    box-shadow: 4px 4px 10px #191970;
    text-align: center;
    padding: 20px;
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease;

    /* CORRECCIÓN: Usa la propiedad flex para distribuir el espacio equitativamente */
    flex: 1 1 0;
}

.card:hover {
    transform: scale(1.05);
}

/* --- Contenido Interno de la Card --- */
.card > div {
    display: flex;
    flex-direction: column;
    height: 100%;
}
.card [id$="-card-item0"] {
    color: #191970;
    font-family: Arial;
    font-size: 21px;
    font-weight: bold;
    padding: 10px;
}
.card [id$="-card-item1"] {
    color: #191970;
    font-family: Arial;
    font-size: 19px;
    padding: 15px 0;
    flex-grow: 1; /* Empuja el botón hacia abajo */
}
.card [id$="-card-item2"] a {
    display: inline-block;
    padding: 10px 16px;
    background-color: #f8f8ff;
    border: 1px solid #e6e6fa;
    border-radius: 4px;
    color: #191970;
    font-family: Arial;
    font-size: 15px;
    font-weight: bold;
    text-decoration: none;
}

/* --- Ajuste para Móviles (Las cards se apilan) --- */
@media (max-width: 992px) {
    #indexCardRepeater1 {
        flex-direction: column;
        align-items: center;
    }
    .card {
        width: 90%;
        max-width: 400px;
    }
}
/* ===== FIN DEL CÓDIGO PARA TARJETAS DE SERVICIOS v2 ===== */


#wb_indexLayoutGrid13 {
  background-color: #d3d3d3;
  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;
}
#indexLayoutGrid13 {
  margin-left: auto;
  margin-right: auto;
  padding: 0px 15px 0px 15px;
  box-sizing: border-box;
}
#indexLayoutGrid13 > .row {
  margin-left: -15px;
  margin-right: -15px;
}
#indexLayoutGrid13 > .row > .col-1 {
  font-size: 0;
  min-height: 1px;
  padding-left: 15px;
  padding-right: 15px;
  position: relative;
  box-sizing: border-box;
}
#indexLayoutGrid13 > .row > .col-1 {
  float: left;
}
#indexLayoutGrid13 > .row > .col-1 {
  background-image: none;
  text-align: left;
  width: 100%;
  background-color: transparent;
}
#indexLayoutGrid13:before,
#indexLayoutGrid13:after,
#indexLayoutGrid13 .row:before,
#indexLayoutGrid13 .row:after {
  content: " ";
  display: table;
}
#indexLayoutGrid13:after,
#indexLayoutGrid13 .row:after {
  clear: both;
}

#wb_indexHeading10 {
  background-image: none;
  border-radius: 0px;
  border: 0px solid #000000;
  box-sizing: border-box;
  margin: 15px 10px 0px 10px;
  padding: 20px 0px 20px 0px;
  text-align: center;
  vertical-align: top;
  background-color: transparent;
}
#indexHeading10 {
  font-family: Arial;
  font-size: 27px;
  font-style: normal;
  font-weight: bold;
  margin: 0;
  text-align: center;
  text-transform: none;
  color: #191970;
}
#indexFlexGrid1 {
  background-color: #d3d3d3;
  background-image: none;
  border: 0px solid #000000;
  box-sizing: border-box;
  font-size: 0;
  grid-column-gap: 5px;
  grid-row-gap: 5px;
  grid-template-areas: "section1 section1 section3" "section2 section2 section3";
  grid-template-columns: 30% 40% 30%;
  grid-template-rows: 50% 50%;
  margin: 0;
  padding: 0px 0px 0px 0px;
  display: grid;
}
#indexFlexGrid1 .section1 {
  align-content: flex-start;
  align-items: flex-start;
  background-color: transparent;
  background-image: none;
  flex-direction: row;
  flex-wrap: wrap;
  grid-area: section1;
  justify-content: flex-start;
  padding: 0px 0px 0px 0px;
  display: flex;
}
#indexFlexGrid1 .section3 {
  align-content: flex-start;
  align-items: flex-start;
  background-color: transparent;
  background-image: none;
  flex-direction: row;
  flex-wrap: wrap;
  grid-area: section3;
  justify-content: flex-start;
  padding: 0px 10px 0px 0px;
  display: flex;
}
#indexFlexGrid1 .section2 {
  align-content: flex-start;
  align-items: flex-start;
  background-color: transparent;
  background-image: none;
  flex-direction: row;
  flex-wrap: wrap;
  grid-area: section2;
  justify-content: flex-start;
  padding: 0px 0px 0px 0px;
  display: flex;
}
#wb_LayoutGrid1 {
  background-color: transparent;
  background-image: none;
  border-radius: 0px;
  border: 0px solid #cccccc;
  box-sizing: border-box;
  display: table;
  margin-left: auto;
  margin-right: auto;
  margin: 0;
  max-width: 970px;
  position: relative;
  table-layout: fixed;
  text-align: center;
  width: 100%;
  clear: both;
}
#LayoutGrid1 {
  margin-left: auto;
  margin-right: auto;
  padding: 10px 15px 10px 15px;
  box-sizing: border-box;
}
#LayoutGrid1 > .row {
  margin-left: -15px;
  margin-right: -15px;
}
#LayoutGrid1 > .row > .col-1 {
  font-size: 0;
  min-height: 1px;
  padding-left: 15px;
  padding-right: 15px;
  position: relative;
  box-sizing: border-box;
}
#LayoutGrid1 > .row > .col-1 {
  float: left;
}
#LayoutGrid1 > .row > .col-1 {
  background-image: none;
  text-align: left;
  width: 100%;
  background-color: transparent;
}
#LayoutGrid1:before,
#LayoutGrid1:after,
#LayoutGrid1 .row:before,
#LayoutGrid1 .row:after {
  content: " ";
  display: table;
}
#LayoutGrid1:after,
#LayoutGrid1 .row:after {
  clear: both;
}

#wb_indexHeading7 {
  background-image: none;
  border-radius: 0px;
  border: 0px solid #000000;
  box-sizing: border-box;
  margin: 0;
  padding: 0px 0px 0px 0px;
  text-align: center;
  vertical-align: top;
  background-color: transparent;
}
#indexHeading7 {
  font-family: Arial;
  font-size: 24px;
  font-style: normal;
  font-weight: bold;
  margin: 0;
  text-align: center;
  text-transform: none;
  color: #191970;
}
#Line1 {
  border-bottom-width: 1px;
  border-left: 0;
  border-right: 0;
  border-style: solid;
  border-top: 0;
  height: 0 !important;
  line-height: 0 !important;
  margin: 10px 0px 10px 0px;
  padding: 0;
  border-color: rgba(238, 238, 238, 1);
}
#Editbox4 {
  background-color: #ffffff;
  background-image: none;
  border-radius: 0px;
  border: 0px solid #cccccc;
  color: #555555;
  font-family: Arial;
  font-size: 21px;
  font-style: normal;
  font-weight: normal;
  line-height: 24px;
  margin: 0;
  padding: 4px 4px 4px 4px;
  text-align: left;
  box-sizing: border-box;
}
#Editbox4:focus {
  outline: 0;
}
#Line2 {
  border-bottom-width: 1px;
  border-left: 0;
  border-right: 0;
  border-style: solid;
  border-top: 0;
  height: 0 !important;
  line-height: 0 !important;
  margin: 10px 0px 10px 0px;
  padding: 0;
  border-color: rgba(238, 238, 238, 1);
}
#Editbox5 {
  background-color: #ffffff;
  background-image: none;
  border-radius: 0px;
  border: 0px solid #cccccc;
  color: #555555;
  font-family: Arial;
  font-size: 21px;
  font-style: normal;
  font-weight: normal;
  line-height: 24px;
  margin: 0;
  padding: 4px 4px 4px 4px;
  text-align: left;
  box-sizing: border-box;
}
#Editbox5:focus {
  outline: 0;
}
#Line3 {
  border-bottom-width: 1px;
  border-left: 0;
  border-right: 0;
  border-style: solid;
  border-top: 0;
  height: 0 !important;
  line-height: 0 !important;
  margin: 10px 0px 10px 0px;
  padding: 0;
  border-color: rgba(238, 238, 238, 1);
}
#Editbox6 {
  background-color: #ffffff;
  background-image: none;
  border-radius: 0px;
  border: 0px solid #cccccc;
  color: #555555;
  font-family: Arial;
  font-size: 21px;
  font-style: normal;
  font-weight: normal;
  line-height: 24px;
  margin: 0;
  padding: 4px 4px 4px 4px;
  text-align: left;
  box-sizing: border-box;
}
#Editbox6:focus {
  outline: 0;
}
#Line4 {
  border-bottom-width: 1px;
  border-left: 0;
  border-right: 0;
  border-style: solid;
  border-top: 0;
  height: 0 !important;
  line-height: 0 !important;
  margin: 10px 0px 10px 0px;
  padding: 0;
  border-color: rgba(238, 238, 238, 1);
}
#TextArea2 {
  background-color: #ffffff;
  background-image: none;
  border: 0px solid #cccccc;
  color: #555555;
  font-family: Arial;
  font-size: 21px;
  font-style: normal;
  font-weight: normal;
  margin: 0;
  overflow: auto;
  padding: 4px 4px 4px 4px;
  resize: none;
  text-align: left;
  box-sizing: border-box;
}
#TextArea2:focus {
  outline: 0;
}
#TextArea2::placeholder {
  opacity: 1;
  color: #000000;
}
#TextArea2::-ms-input-placeholder {
  color: #000000;
}
#Line5 {
  border-bottom-width: 1px;
  border-left: 0;
  border-right: 0;
  border-style: solid;
  border-top: 0;
  height: 0 !important;
  line-height: 0 !important;
  margin: 10px 0px 10px 0px;
  padding: 0;
  border-color: rgba(238, 238, 238, 1);
}
#Button2 {
  -webkit-appearance: none;
  background-color: #18bc9c;
  background-image: none;
  border-radius: 4px;
  color: #ffffff;
  font-family: Arial;
  font-size: 19px;
  font-style: normal;
  font-weight: normal;
  margin: 0;
  padding: 0px 0px 0px 0px;
  text-align: center;
  text-decoration: none;
  border: 1px solid #18bc9c;
}
#Button2:focus {
  outline: 0;
}
#wb_indexLayoutGrid10 {
  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;
}
#indexLayoutGrid10 {
  margin-left: auto;
  margin-right: auto;
  padding: 0px 5px 0px 5px;
  box-sizing: border-box;
}
#indexLayoutGrid10 > .row {
  margin-left: -5px;
  margin-right: -5px;
}
#indexLayoutGrid10 > .row > .col-1 {
  font-size: 0;
  min-height: 1px;
  padding-left: 5px;
  padding-right: 5px;
  position: relative;
  box-sizing: border-box;
}
#indexLayoutGrid10 > .row > .col-1 {
  float: left;
}
#indexLayoutGrid10 > .row > .col-1 {
  background-image: none;
  text-align: left;
  width: 100%;
  background-color: transparent;
}
#indexLayoutGrid10:before,
#indexLayoutGrid10:after,
#indexLayoutGrid10 .row:before,
#indexLayoutGrid10 .row:after {
  content: " ";
  display: table;
}
#indexLayoutGrid10:after,
#indexLayoutGrid10 .row:after {
  clear: both;
}

#wb_indexSection1 {
  background-color: #f2f5f7;
  background-image: none;
  border-radius: 10px;
  border: 1px solid #dddddd;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  margin: 0;
  position: relative;
  text-align: right;
  height: 170px;
}
#indexSection1-card-body {
  font-size: 0;
  flex: 1 1 auto;
}
#indexSection1-card-item0 {
  color: #191970;
  font-family: Arial;
  font-size: 19px;
  font-style: normal;
  font-weight: bold;
  height: 15.2%;
  left: 50%;
  margin: 0;
  padding: 0px 0px 0px 0px;
  position: absolute;
  top: 11%;
  transform: translateX(-50%);
  width: 145px;
  box-sizing: border-box;
}
#indexSection1-card-item1 {
  height: 55%;
  left: 3%;
  margin: 0;
  padding: 0px 0px 0px 0px;
  position: absolute;
  top: 20.8%;
  width: 11.7%;
  box-sizing: border-box;
}
#indexSection1-card-item1 img {
  border-radius: 5px;
  border: 0px solid #000000;
  height: 100%;
  left: 0;
  object-fit: cover;
  position: absolute;
  top: 0;
  width: 100%;
  box-sizing: border-box;
}
#indexSection1-card-item2 {
  color: #362b36;
  font-family: Arial;
  font-size: 13px;
  font-style: normal;
  font-weight: normal;
  height: 19.5%;
  left: 16.1%;
  margin: 0;
  padding: 0px 0px 0px 0px;
  position: absolute;
  top: 31.5%;
  width: 80.2%;
  box-sizing: border-box;
}
#indexSection1-card-item3 {
  align-items: center;
  background-color: #d7ebf9;
  background-image: none;
  border-radius: 20px;
  border: 0px solid #aed0ea;
  box-sizing: border-box;
  color: #191970;
  font-family: Arial;
  font-size: 17px;
  font-style: normal;
  font-weight: bold;
  height: 22.4%;
  justify-content: center;
  left: 50%;
  margin: 0;
  position: absolute;
  text-align: center;
  top: 60%;
  transform: translateX(-50%);
  width: 243px;
  display: inline-flex;
}
#indexSection1-card-item3 a {
  display: block;
  padding: 8px 0px 8px 0px;
  text-decoration: none;
  width: 100%;
  color: inherit;
}
#wb_indexLayoutGrid11 {
  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;
}
#indexLayoutGrid11 {
  margin-left: auto;
  margin-right: auto;
  padding: 0px 5px 0px 5px;
  box-sizing: border-box;
}
#indexLayoutGrid11 > .row {
  margin-left: -5px;
  margin-right: -5px;
}
#indexLayoutGrid11 > .row > .col-1 {
  font-size: 0;
  min-height: 1px;
  padding-left: 5px;
  padding-right: 5px;
  position: relative;
  box-sizing: border-box;
}
#indexLayoutGrid11 > .row > .col-1 {
  float: left;
}
#indexLayoutGrid11 > .row > .col-1 {
  background-image: none;
  text-align: left;
  width: 100%;
  background-color: transparent;
}
#indexLayoutGrid11:before,
#indexLayoutGrid11:after,
#indexLayoutGrid11 .row:before,
#indexLayoutGrid11 .row:after {
  content: " ";
  display: table;
}
#indexLayoutGrid11:after,
#indexLayoutGrid11 .row:after {
  clear: both;
}

#wb_indexSection2 {
  background-color: #f2f5f7;
  background-image: none;
  border-radius: 10px;
  border: 1px solid #dddddd;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  margin: 0;
  position: relative;
  text-align: center;
  height: 170px;
}
#indexSection2-card-body {
  font-size: 0;
  flex: 1 1 auto;
}
#indexSection2-card-item0 {
  color: #191970;
  font-family: Arial;
  font-size: 19px;
  font-style: normal;
  font-weight: bold;
  height: 14.9%;
  left: 50%;
  margin: 0;
  padding: 0px 0px 0px 0px;
  position: absolute;
  top: 9.5%;
  transform: translateX(-50%);
  width: 145px;
  box-sizing: border-box;
}
#indexSection2-card-item1 {
  height: 55%;
  left: 3%;
  margin: 0;
  padding: 0px 0px 0px 0px;
  position: absolute;
  top: 20.8%;
  width: 11.7%;
  box-sizing: border-box;
}
#indexSection2-card-item1 img {
  border-radius: 5px;
  border: 0px solid #000000;
  height: 100%;
  left: 0;
  object-fit: cover;
  position: absolute;
  top: 0;
  width: 100%;
  box-sizing: border-box;
}
#indexSection2-card-item2 {
  color: #362b36;
  font-family: Arial;
  font-size: 13px;
  font-style: normal;
  font-weight: normal;
  height: 19.4%;
  left: 15.9%;
  margin: 0;
  padding: 0px 0px 0px 0px;
  position: absolute;
  top: 27.1%;
  width: 80.1%;
  box-sizing: border-box;
}
#indexSection2-card-item3 {
  align-items: center;
  background-color: #d7ebf9;
  background-image: none;
  border-radius: 20px;
  border: 0px solid #aed0ea;
  box-sizing: border-box;
  color: #191970;
  font-family: Arial;
  font-size: 17px;
  font-style: normal;
  font-weight: bold;
  height: 22.4%;
  justify-content: center;
  left: 50%;
  margin: 0;
  position: absolute;
  text-align: center;
  top: 59.4%;
  transform: translateX(-50%);
  width: 243px;
  display: inline-flex;
}
#indexSection2-card-item3 a {
  display: block;
  padding: 8px 0px 8px 0px;
  text-decoration: none;
  width: 100%;
  color: inherit;
}
#wb_indexLayoutGrid12 {
  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;
}
#indexLayoutGrid12 {
  margin-left: auto;
  margin-right: auto;
  padding: 0px 5px 0px 5px;
  box-sizing: border-box;
}
#indexLayoutGrid12 > .row {
  margin-left: -5px;
  margin-right: -5px;
}
#indexLayoutGrid12 > .row > .col-1 {
  font-size: 0;
  min-height: 1px;
  padding-left: 5px;
  padding-right: 5px;
  position: relative;
  box-sizing: border-box;
}
#indexLayoutGrid12 > .row > .col-1 {
  float: left;
}
#indexLayoutGrid12 > .row > .col-1 {
  background-image: none;
  text-align: left;
  width: 100%;
  background-color: transparent;
}
#indexLayoutGrid12:before,
#indexLayoutGrid12:after,
#indexLayoutGrid12 .row:before,
#indexLayoutGrid12 .row:after {
  content: " ";
  display: table;
}
#indexLayoutGrid12:after,
#indexLayoutGrid12 .row:after {
  clear: both;
}

#wb_indexSection3 {
  background-color: #f2f5f7;
  background-image: none;
  border-radius: 10px;
  border: 1px solid #dddddd;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  margin: 0;
  position: relative;
  text-align: center;
  height: 350px;
}
#indexSection3-card-body {
  font-size: 0;
  flex: 1 1 auto;
}
#indexSection3-card-item0 {
  color: #191970;
  font-family: Arial;
  font-size: 19px;
  font-style: normal;
  font-weight: bold;
  height: 25.6%;
  left: 50%;
  margin: 0;
  padding: 0px 0px 0px 0px;
  position: absolute;
  top: 8.8%;
  transform: translateX(-50%);
  width: 800px;
  box-sizing: border-box;
}
#indexSection3-card-item1 {
  height: 50%;
  left: 4.2%;
  margin: 0;
  padding: 0px 0px 0px 0px;
  position: absolute;
  top: 22.7%;
  width: 33.7%;
  box-sizing: border-box;
}
#indexSection3-card-item1 img {
  border-radius: 5px;
  border: 0px solid #000000;
  height: 100%;
  left: 0;
  object-fit: cover;
  position: absolute;
  top: 0;
  width: 100%;
  box-sizing: border-box;
}
#indexSection3-card-item2 {
  color: #362b36;
  font-family: Arial;
  font-size: 13px;
  font-style: normal;
  font-weight: normal;
  height: 50%;
  left: 45.4%;
  margin: 0;
  padding: 0px 0px 0px 0px;
  position: absolute;
  top: 21.1%;
  width: 49.6%;
  box-sizing: border-box;
}
#indexSection3-card-item3 {
  align-items: center;
  background-color: #d7ebf9;
  background-image: none;
  border-radius: 20px;
  border: 0px solid #aed0ea;
  box-sizing: border-box;
  color: #191970;
  font-family: Arial;
  font-size: 17px;
  font-style: normal;
  font-weight: bold;
  height: 12.1%;
  justify-content: center;
  left: 47.3%;
  margin: 0;
  position: absolute;
  text-align: center;
  top: 76.9%;
  width: 46.7%;
  display: inline-flex;
}
#indexSection3-card-item3 a {
  display: block;
  padding: 8px 0px 8px 0px;
  text-decoration: none;
  width: 100%;
  color: inherit;
}
#wb_indexLayoutGrid15 {
  background-color: #d3d3d3;
  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;
}
#indexLayoutGrid15 {
  margin-left: auto;
  margin-right: auto;
  padding: 0px 15px 0px 15px;
  box-sizing: border-box;
}
#indexLayoutGrid15 > .row {
  margin-left: -15px;
  margin-right: -15px;
}
#indexLayoutGrid15 > .row > .col-1 {
  font-size: 0;
  min-height: 1px;
  padding-left: 15px;
  padding-right: 15px;
  position: relative;
  box-sizing: border-box;
}
#indexLayoutGrid15 > .row > .col-1 {
  float: left;
}
#indexLayoutGrid15 > .row > .col-1 {
  background-image: none;
  text-align: left;
  width: 100%;
  background-color: transparent;
}
#indexLayoutGrid15:before,
#indexLayoutGrid15:after,
#indexLayoutGrid15 .row:before,
#indexLayoutGrid15 .row:after {
  content: " ";
  display: table;
}
#indexLayoutGrid15:after,
#indexLayoutGrid15 .row:after {
  clear: both;
}

#wb_indexHeading9 {
  background-image: none;
  border-radius: 0px;
  border: 0px solid #000000;
  box-sizing: border-box;
  margin: 10px 0px 0px 0px;
  padding: 20px 0px 20px 0px;
  text-align: center;
  vertical-align: top;
  background-color: transparent;
}
#indexHeading9 {
  font-family: Arial;
  font-size: 27px;
  font-style: normal;
  font-weight: bold;
  margin: 0;
  text-align: center;
  text-transform: none;
  color: #191970;
}
#indexFlexGrid4 {
  background-color: #d3d3d3;
  background-image: none;
  border: 0px solid #000000;
  box-sizing: border-box;
  font-size: 0;
  grid-template-areas: "contato map_etiq icon_contact" "email map address";
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 20% auto;
  margin: 0;
  padding: 0px 0px 0px 0px;
  display: grid;
}
#indexFlexGrid4 .contato {
  align-content: center;
  align-items: center;
  background-color: transparent;
  background-image: none;
  flex-direction: row;
  flex-wrap: wrap;
  grid-area: contato;
  justify-content: space-around;
  padding: 0px 0px 0px 0px;
  display: flex;
}
#indexFlexGrid4 .map_etiq {
  align-content: center;
  align-items: center;
  background-color: transparent;
  background-image: none;
  flex-direction: row;
  flex-wrap: wrap;
  grid-area: map_etiq;
  justify-content: space-around;
  padding: 0px 0px 0px 0px;
  display: flex;
}
#indexFlexGrid4 .icon_contact {
  align-content: center;
  align-items: center;
  background-color: transparent;
  background-image: none;
  flex-direction: row;
  flex-wrap: wrap;
  grid-area: icon_contact;
  justify-content: space-around;
  padding: 0px 0px 0px 0px;
  display: flex;
}
#indexFlexGrid4 .email {
  align-content: flex-start;
  align-items: flex-start;
  background-color: transparent;
  background-image: none;
  flex-direction: row;
  flex-wrap: wrap;
  grid-area: email;
  justify-content: flex-start;
  padding: 0px 0px 0px 0px;
  display: flex;
}
#indexFlexGrid4 .map {
  align-content: flex-start;
  align-items: flex-start;
  background-color: transparent;
  background-image: none;
  flex-direction: row;
  flex-wrap: wrap;
  grid-area: map;
  justify-content: center;
  padding: 0px 0px 0px 0px;
  display: flex;
}

#wb_indexText3 {
  background-image: none;
  border-radius: 0px;
  border: 0px solid #c0c0c0;
  margin: 0;
  padding: 10px 0px 10px 0px;
  text-align: center;
  background-color: transparent;
}
#wb_indexText3 div {
  text-align: center;
}
#wb_indexText3 {
  box-sizing: border-box;
  width: 100%;
  display: block;
}
#wb_indexLayoutGrid4 {
  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;
}
#indexLayoutGrid4 {
  margin-left: auto;
  margin-right: auto;
  padding: 5px 15px 5px 15px;
  box-sizing: border-box;
}
#indexLayoutGrid4 > .row {
  margin-left: -15px;
  margin-right: -15px;
}
#indexLayoutGrid4 > .row > .col-1 {
  font-size: 0;
  min-height: 1px;
  padding-left: 15px;
  padding-right: 15px;
  position: relative;
  box-sizing: border-box;
}
#indexLayoutGrid4 > .row > .col-1 {
  float: left;
}
#indexLayoutGrid4 > .row > .col-1 {
  background-image: none;
  text-align: left;
  width: 100%;
  background-color: transparent;
}
#indexLayoutGrid4:before,
#indexLayoutGrid4:after,
#indexLayoutGrid4 .row:before,
#indexLayoutGrid4 .row:after {
  content: " ";
  display: table;
}
#indexLayoutGrid4:after,
#indexLayoutGrid4 .row:after {
  clear: both;
}

#name {
  background-color: #f2f5f7;
  background-image: none;
  border-radius: 4px;
  border: 1px solid #dddddd;
  color: #362b36;
  font-family: Arial;
  font-size: 16px;
  font-style: normal;
  font-weight: normal;
  line-height: 39px;
  margin: 5px 0px 0px 0px;
  padding: 4px 4px 4px 4px;
  text-align: left;
  box-sizing: border-box;
}
#name:focus {
  box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.075),
    0px 0px 8px rgba(102, 175, 233, 0.6);
  outline: 0;
  border-color: #66afe9;
}
#name::placeholder {
  opacity: 1;
  color: #d3d3d3;
}
#name::-ms-input-placeholder {
  color: #d3d3d3;
}
#email {
  background-color: #f2f5f7;
  background-image: none;
  border-radius: 4px;
  border: 1px solid #dddddd;
  color: #362b36;
  font-family: Arial;
  font-size: 16px;
  font-style: normal;
  font-weight: normal;
  line-height: 39px;
  margin: 5px 0px 0px 0px;
  padding: 4px 4px 4px 4px;
  text-align: left;
  box-sizing: border-box;
}
#email:focus {
  box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.075),
    0px 0px 8px rgba(102, 175, 233, 0.6);
  outline: 0;
  border-color: #66afe9;
}
#email::placeholder {
  opacity: 1;
  color: #d3d3d3;
}
#email::-ms-input-placeholder {
  color: #d3d3d3;
}
#Mensagem {
  background-color: #f2f5f7;
  background-image: none;
  border-radius: 4px;
  border: 1px solid #dddddd;
  color: #362b36;
  font-family: Arial;
  font-size: 16px;
  font-style: normal;
  font-weight: normal;
  margin: 5px 0px 0px 0px;
  overflow: auto;
  padding: 4px 4px 4px 4px;
  resize: none;
  text-align: left;
  box-sizing: border-box;
}
#Mensagem:focus {
  box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.075),
    0px 0px 8px rgba(102, 175, 233, 0.6);
  outline: 0;
  border-color: #66afe9;
}
#Mensagem::placeholder {
  opacity: 1;
  color: #d3d3d3;
}
#Mensagem::-ms-input-placeholder {
  color: #d3d3d3;
}
#indexButton1 {
  -webkit-appearance: none;
  background-color: #d7ebf9;
  background-image: none;
  border-radius: 10px;
  color: #191970;
  font-family: Arial;
  font-size: 16px;
  font-style: normal;
  font-weight: bold;
  margin: 5px 0px 0px 0px;
  padding: 0px 0px 0px 0px;
  text-align: center;
  text-decoration: none;
  border: 1px solid #aed0ea;
}
#indexButton1:focus {
  outline: 0;
}
#wb_indexText4 {
  background-image: none;
  border-radius: 0px;
  border: 0px solid #c0c0c0;
  margin: 0;
  padding: 10px 0px 10px 0px;
  text-align: center;
  background-color: transparent;
}
#wb_indexText4 div {
  text-align: center;
}
#wb_indexText4 {
  box-sizing: border-box;
  width: 100%;
  display: block;
}
#wb_indexText5 {
  background-image: none;
  border-radius: 0px;
  border: 0px solid #c0c0c0;
  margin: 0;
  padding: 10px 0px 10px 0px;
  text-align: center;
  background-color: transparent;
}
#wb_indexText5 div {
  text-align: center;
}
#wb_indexText5 {
  box-sizing: border-box;
  width: 100%;
  display: block;
}
#wb_indexLayoutGrid3 {
  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;
}
#indexLayoutGrid3 {
  margin-left: auto;
  margin-right: auto;
  padding: 0px 15px 0px 15px;
  box-sizing: border-box;
}
#indexLayoutGrid3 > .row {
  margin-left: -15px;
  margin-right: -15px;
}
#indexLayoutGrid3 > .row > .col-1 {
  font-size: 0;
  min-height: 1px;
  padding-left: 15px;
  padding-right: 15px;
  position: relative;
  box-sizing: border-box;
}
#indexLayoutGrid3 > .row > .col-1 {
  float: left;
}
#indexLayoutGrid3 > .row > .col-1 {
  background-image: none;
  text-align: left;
  width: 100%;
  background-color: transparent;
}
#indexLayoutGrid3:before,
#indexLayoutGrid3:after,
#indexLayoutGrid3 .row:before,
#indexLayoutGrid3 .row:after {
  content: " ";
  display: table;
}
#indexLayoutGrid3:after,
#indexLayoutGrid3 .row:after {
  clear: both;
}


#indexLine2 {
  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;
  width: 100%;
  display: block;
  visibility: visible;
  border-bottom-width: 31px;
  border-color: transparent;
}

#indexFlexGrid3_1 {
  background-color: transparent;
  padding: 0 40px; /* Margen lateral */
  box-sizing: border-box;
}

.header_1 {
  display: flex;
  flex-direction: column;
  align-items: center; /* Centra el título y las filas horizontalmente */
  gap: 10px; /* Espacio entre filas */
}

/* Título */
#indexHeading8_1 {
  font-family: Arial;
  font-size: 27px;
  font-weight: bold;
  color: #191970;
  text-align: center;
  margin: 0;
  padding: 20px 0; /* Espacio extra arriba/abajo */
}

/* ====================================================================== */
/* == ESTILOS UNIFICADOS Y RESPONSIVOS PARA LOGOS DE PARCEIROS == */
/* ====================================================================== */

/* 1. Estilo para AMBAS filas de logos */
#indexFlexGrid3_1 .row_1,
#indexFlexGrid3_1 .row_2 {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap; /* Permite que los logos se apilen en móviles */
    gap: 40px;       /* Espacio consistente entre logos */
    width: 100%;
    max-width: 1000px;
    margin: 0 auto 20px; /* Centra las filas y añade espacio debajo */
}

/* 2. Estilo para TODOS los contenedores de los logos */
#indexFlexGrid3_1 [class^="col-1_"] {
    flex: 1 1 150px;  /* Base de 150px, pueden crecer y encogerse */
    max-width: 200px; /* Límite para que no se hagan enormes */
    display: flex;
    justify-content: center;
    align-items: center;
}

/* 3. Estilo para TODAS las imágenes de los logos */
#indexFlexGrid3_1 img {
    max-width: 100%; /* La imagen se adapta al 100% de su contenedor */
    height: auto;    /* Mantiene la proporción correcta */
    object-fit: contain;
}


#indexFlexGrid3 {
  background-color: transparent;
  background-image: none;
  border: 0px solid #000000;
  box-sizing: border-box;
  font-size: 0;
  grid-column-gap: 5px;
  grid-row-gap: 5px;
  grid-template-areas: "header header header header header header" "site1 site2 site3 site4 site5 site6" "legend1 legend2 legend3 legend4 legend5 legend6";
  grid-template-columns: 16% 16% 17% 17% 17% 17%;
  grid-template-rows: 20% 65% 15%;
  margin: 0;
  padding: 0px 0px 0px 0px;
  display: grid;
}

#indexFlexGrid3 [onclick] {
    cursor: pointer;
}

#indexFlexGrid3 .header {
  align-content: center;
  align-items: center;
  background-color: transparent;
  background-image: none;
  flex-direction: row;
  flex-wrap: wrap;
  grid-area: header;
  justify-content: center;
  padding: 0px 0px 0px 0px;
  display: flex;
}
#indexFlexGrid3 .site1 {
  align-content: flex-start;
  align-items: flex-start;
  background-color: transparent;
  background-image: none;
  flex-direction: row;
  flex-wrap: wrap;
  grid-area: site1;
  justify-content: center;
  padding: 0px 0px 0px 0px;
  display: flex;
}
#indexFlexGrid3 .site2 {
  align-content: flex-start;
  align-items: flex-start;
  background-color: transparent;
  background-image: none;
  flex-direction: row;
  flex-wrap: wrap;
  grid-area: site2;
  justify-content: center;
  padding: 0px 0px 0px 0px;
  display: flex;
}
#indexFlexGrid3 .site3 {
  align-content: flex-start;
  align-items: flex-start;
  background-color: transparent;
  background-image: none;
  flex-direction: row;
  flex-wrap: wrap;
  grid-area: site3;
  justify-content: center;
  padding: 0px 0px 0px 0px;
  display: flex;
}
#indexFlexGrid3 .site4 {
  align-content: flex-start;
  align-items: flex-start;
  background-color: transparent;
  background-image: none;
  flex-direction: row;
  flex-wrap: wrap;
  grid-area: site4;
  justify-content: center;
  padding: 0px 0px 0px 0px;
  display: flex;
}
#indexFlexGrid3 .site5 {
  align-content: flex-start;
  align-items: flex-start;
  background-color: transparent;
  background-image: none;
  flex-direction: row;
  flex-wrap: wrap;
  grid-area: site5;
  justify-content: center;
  padding: 0px 0px 0px 0px;
  display: flex;
}
#indexFlexGrid3 .site6 {
  align-content: flex-start;
  align-items: flex-start;
  background-color: transparent;
  background-image: none;
  flex-direction: row;
  flex-wrap: wrap;
  grid-area: site6;
  justify-content: center;
  padding: 0px 0px 0px 0px;
  display: flex;
}
#indexFlexGrid3 .legend1 {
  align-content: flex-start;
  align-items: flex-start;
  background-color: transparent;
  background-image: none;
  flex-direction: row;
  flex-wrap: wrap;
  grid-area: legend1;
  justify-content: center;
  padding: 0px 0px 0px 0px;
  display: flex;
}
#indexFlexGrid3 .legend2 {
  align-content: flex-start;
  align-items: flex-start;
  background-color: transparent;
  background-image: none;
  flex-direction: row;
  flex-wrap: wrap;
  grid-area: legend2;
  justify-content: center;
  padding: 0px 0px 0px 0px;
  display: flex;
}
#indexFlexGrid3 .legend3 {
  align-content: flex-start;
  align-items: flex-start;
  background-color: transparent;
  background-image: none;
  flex-direction: row;
  flex-wrap: wrap;
  grid-area: legend3;
  justify-content: center;
  padding: 0px 0px 0px 0px;
  display: flex;
}
#indexFlexGrid3 .legend4 {
  align-content: flex-start;
  align-items: flex-start;
  background-color: transparent;
  background-image: none;
  flex-direction: row;
  flex-wrap: wrap;
  grid-area: legend4;
  justify-content: center;
  padding: 0px 0px 0px 0px;
  display: flex;
}
#indexFlexGrid3 .legend5 {
  align-content: flex-start;
  align-items: flex-start;
  background-color: transparent;
  background-image: none;
  flex-direction: row;
  flex-wrap: wrap;
  grid-area: legend5;
  justify-content: center;
  padding: 0px 0px 0px 0px;
  display: flex;
}
#indexFlexGrid3 .legend6 {
  align-content: flex-start;
  align-items: flex-start;
  background-color: transparent;
  background-image: none;
  flex-direction: row;
  flex-wrap: wrap;
  grid-area: legend6;
  justify-content: center;
  padding: 0px 0px 0px 0px;
  display: flex;
}
#wb_indexHeading8 {
  background-image: none;
  border-radius: 0px;
  border: 0px solid #000000;
  box-sizing: border-box;
  margin: 10px 0px 0px 0px;
  padding: 0px 0px 0px 0px;
  text-align: center;
  vertical-align: top;
  background-color: transparent;
}

#indexHeading8 {
  font-family: Arial;
  font-size: 27px;
  font-style: normal;
  font-weight: bold;
  margin: 0;
  text-align: center;
  text-transform: none;
  color: #191970;
}

#wb_indexText10 {
  background-image: none;
  border-radius: 0px;
  border: 0px solid #c0c0c0;
  margin: 0;
  padding: 10px 0px 0px 0px;
  text-align: center;
  background-color: transparent;
}
#wb_indexText10 div {
  text-align: center;
}
#wb_indexText10 {
  box-sizing: border-box;
  width: 100%;
  display: block;
}
#wb_indexText11 {
  background-image: none;
  border-radius: 0px;
  border: 0px solid #c0c0c0;
  margin: 0;
  padding: 10px 0px 0px 0px;
  text-align: center;
  background-color: transparent;
}
#wb_indexText11 div {
  text-align: center;
}
#wb_indexText11 {
  box-sizing: border-box;
  width: 100%;
  display: block;
}
#wb_indexText12 {
  background-image: none;
  border-radius: 0px;
  border: 0px solid #c0c0c0;
  margin: 0;
  padding: 10px 0px 0px 0px;
  text-align: center;
  background-color: transparent;
}
#wb_indexText12 div {
  text-align: center;
}
#wb_indexText12 {
  box-sizing: border-box;
  width: 100%;
  display: block;
}
#wb_indexText13 {
  background-image: none;
  border-radius: 0px;
  border: 0px solid #c0c0c0;
  margin: 0;
  padding: 10px 0px 0px 0px;
  text-align: center;
  background-color: transparent;
}
#wb_indexText13 div {
  text-align: center;
}
#wb_indexText13 {
  box-sizing: border-box;
  width: 100%;
  display: block;
}
#wb_indexText14 {
  background-image: none;
  border-radius: 0px;
  border: 0px solid #c0c0c0;
  margin: 0;
  padding: 10px 0px 0px 0px;
  text-align: center;
  background-color: transparent;
}
#wb_indexText14 div {
  text-align: center;
}
#wb_indexText14 {
  box-sizing: border-box;
  width: 100%;
  display: block;
}
#wb_indexText15 {
  background-image: none;
  border-radius: 0px;
  border: 0px solid #c0c0c0;
  margin: 0;
  padding: 10px 0px 0px 0px;
  text-align: center;
  background-color: transparent;
}
#wb_indexText15 div {
  text-align: center;
}
#wb_indexText15 {
  box-sizing: border-box;
  width: 100%;
  display: block;
}
#wb_indexLayoutGrid5 {
  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;
}
#indexLayoutGrid5 {
  margin-left: auto;
  margin-right: auto;
  padding: 0px 15px 0px 15px;
  box-sizing: border-box;
}
#indexLayoutGrid5 > .row {
  margin-left: -15px;
  margin-right: -15px;
}
#indexLayoutGrid5 > .row > .col-1 {
  font-size: 0;
  min-height: 1px;
  padding-left: 15px;
  padding-right: 15px;
  position: relative;
  box-sizing: border-box;
}
#indexLayoutGrid5 > .row > .col-1 {
  float: left;
}
#indexLayoutGrid5 > .row > .col-1 {
  background-image: none;
  text-align: center;
  width: 100%;
  background-color: transparent;
}
#indexLayoutGrid5:before,
#indexLayoutGrid5:after,
#indexLayoutGrid5 .row:before,
#indexLayoutGrid5 .row:after {
  content: " ";
  display: table;
}
#indexLayoutGrid5:after,
#indexLayoutGrid5 .row:after {
  clear: both;
}

#wb_indexLayoutGrid6 {
  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;
}
#indexLayoutGrid6 {
  margin-left: auto;
  margin-right: auto;
  padding: 0px 15px 0px 15px;
  box-sizing: border-box;
}
#indexLayoutGrid6 > .row {
  margin-left: -15px;
  margin-right: -15px;
}
#indexLayoutGrid6 > .row > .col-1 {
  font-size: 0;
  min-height: 1px;
  padding-left: 15px;
  padding-right: 15px;
  position: relative;
  box-sizing: border-box;
}
#indexLayoutGrid6 > .row > .col-1 {
  float: left;
}
#indexLayoutGrid6 > .row > .col-1 {
  background-image: none;
  text-align: center;
  width: 100%;
  background-color: transparent;
}
#indexLayoutGrid6:before,
#indexLayoutGrid6:after,
#indexLayoutGrid6 .row:before,
#indexLayoutGrid6 .row:after {
  content: " ";
  display: table;
}
#indexLayoutGrid6:after,
#indexLayoutGrid6 .row:after {
  clear: both;
}

#wb_indexLayoutGrid7 {
  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;
}
#indexLayoutGrid7 {
  margin-left: auto;
  margin-right: auto;
  padding: 0px 15px 0px 15px;
  box-sizing: border-box;
}
#indexLayoutGrid7 > .row {
  margin-left: -15px;
  margin-right: -15px;
}
#indexLayoutGrid7 > .row > .col-1 {
  font-size: 0;
  min-height: 1px;
  padding-left: 15px;
  padding-right: 15px;
  position: relative;
  box-sizing: border-box;
}
#indexLayoutGrid7 > .row > .col-1 {
  float: left;
}
#indexLayoutGrid7 > .row > .col-1 {
  background-image: none;
  text-align: center;
  width: 100%;
  background-color: transparent;
}
#indexLayoutGrid7:before,
#indexLayoutGrid7:after,
#indexLayoutGrid7 .row:before,
#indexLayoutGrid7 .row:after {
  content: " ";
  display: table;
}
#indexLayoutGrid7:after,
#indexLayoutGrid7 .row:after {
  clear: both;
}

#wb_indexLayoutGrid9 {
  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;
}
#indexLayoutGrid9 {
  margin-left: auto;
  margin-right: auto;
  padding: 0px 15px 0px 15px;
  box-sizing: border-box;
}
#indexLayoutGrid9 > .row {
  margin-left: -15px;
  margin-right: -15px;
}
#indexLayoutGrid9 > .row > .col-1 {
  font-size: 0;
  min-height: 1px;
  padding-left: 15px;
  padding-right: 15px;
  position: relative;
  box-sizing: border-box;
}
#indexLayoutGrid9 > .row > .col-1 {
  float: left;
}
#indexLayoutGrid9 > .row > .col-1 {
  background-image: none;
  text-align: center;
  width: 100%;
  background-color: transparent;
}
#indexLayoutGrid9:before,
#indexLayoutGrid9:after,
#indexLayoutGrid9 .row:before,
#indexLayoutGrid9 .row:after {
  content: " ";
  display: table;
}
#indexLayoutGrid9:after,
#indexLayoutGrid9 .row:after {
  clear: both;
}

#wb_indexLayoutGrid8 {
  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;
}
#indexLayoutGrid8 {
  margin-left: auto;
  margin-right: auto;
  padding: 0px 15px 0px 15px;
  box-sizing: border-box;
}
#indexLayoutGrid8 > .row {
  margin-left: -15px;
  margin-right: -15px;
}
#indexLayoutGrid8 > .row > .col-1 {
  font-size: 0;
  min-height: 1px;
  padding-left: 15px;
  padding-right: 15px;
  position: relative;
  box-sizing: border-box;
}
#indexLayoutGrid8 > .row > .col-1 {
  float: left;
}
#indexLayoutGrid8 > .row > .col-1 {
  background-image: none;
  text-align: center;
  width: 100%;
  background-color: transparent;
}
#indexLayoutGrid8:before,
#indexLayoutGrid8:after,
#indexLayoutGrid8 .row:before,
#indexLayoutGrid8 .row:after {
  content: " ";
  display: table;
}
#indexLayoutGrid8:after,
#indexLayoutGrid8 .row:after {
  clear: both;
}

#wb_indexLayoutGrid19 {
  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;
}
#indexLayoutGrid19 {
  margin-left: auto;
  margin-right: auto;
  padding: 0px 15px 0px 15px;
  box-sizing: border-box;
}
#indexLayoutGrid19 > .row {
  margin-left: -15px;
  margin-right: -15px;
}
#indexLayoutGrid19 > .row > .col-1 {
  font-size: 0;
  min-height: 1px;
  padding-left: 15px;
  padding-right: 15px;
  position: relative;
  box-sizing: border-box;
}
#indexLayoutGrid19 > .row > .col-1 {
  float: left;
}
#indexLayoutGrid19 > .row > .col-1 {
  background-image: none;
  text-align: center;
  width: 100%;
  background-color: transparent;
}
#indexLayoutGrid19:before,
#indexLayoutGrid19:after,
#indexLayoutGrid19 .row:before,
#indexLayoutGrid19 .row:after {
  content: " ";
  display: table;
}
#indexLayoutGrid19:after,
#indexLayoutGrid19 .row:after {
  clear: both;
}


#wb_indexIcon1 {
  background-image: none;
  border-radius: 0px;
  border: 0px solid #245580;
  line-height: 35px;
  margin: 0;
  padding: 0px 0px 0px 0px;
  text-align: center;
  vertical-align: top;
  background-color: transparent;
}
#wb_indexIcon1 a::after {
  bottom: 0;
  content: "";
  left: 0;
  pointer-events: auto;
  right: 0;
  top: 0;
  z-index: 1;
  position: absolute;
}
#indexIcon1 {
  height: 100%;
  vertical-align: top;
  width: 100%;
  overflow: visible;
}
#indexIcon1 g {
  display: inline-block;
  font-size: 30px;
  vertical-align: middle;
  width: 30px;
  fill: #191970;
}
#wb_indexIcon1:hover g {
  fill: #191970;
}
#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;
}

#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;
}


/* ====================================================================== */
/* ===== CÓDIGO FINAL Y RESPONSIVO PARA TARJETAS DE NOTICIAS ===== */
/* ====================================================================== */

/* --- Contenedor Principal de las Cards de Noticias --- */
#indexCardRepeater2 {
    display: flex;
    flex-wrap: wrap; /* Permite que las tarjetas bajen a la siguiente línea si no caben */
    justify-content: center; /* Centra las tarjetas en la fila, ideal para la última línea si está incompleta */
    gap: 30px; /* Espacio uniforme entre tarjetas */
    padding: 30px;
    background-color: #d3d3d3;
}

/* --- Estilo Unificado para Todas las Cards de Noticias --- */
.news-card {
    background-color: #ffffff;
    border: 1px solid #cccccc;
    border-radius: 8px;
    box-shadow: 4px 4px 10px #191970;
    padding: 15px;
    display: flex;
    flex-direction: column;
    
    /* EFECTO: Transición suave para el hover */
    transition: transform 0.3s ease;

    /* RESPONSIVIDAD: Define cómo se comportan las tarjetas */
    flex: 1 1 0; /* Permite que las tarjetas crezcan y se distribuyan equitativamente */
}

/* EFECTO: Aumento al pasar el mouse por encima (se mantiene) */
.news-card:hover {
    transform: scale(1.05);
}

/* --- Contenido Interno de la Card --- */
.news-card .news-header h2 {
    font-size: 1.1rem;
    color: #191970;
    font-weight: bold;
    min-height: 3.3em; /* Espacio para hasta 3 líneas de título, ayuda a alinear */
    margin: 0 0 10px 0;
}

.news-card .news-body {
    flex-grow: 1; /* Empuja el footer (botón) hacia abajo */
}

.news-card .news-body img {
    width: 100%;
    height: 150px;
    object-fit: cover; /* Recorta la imagen para que llene el espacio sin deformarse */
    border-radius: 5px;
    margin-bottom: 15px;
}

.news-card .news-body p {
    font-size: 0.9rem;
    color: #454545;
    line-height: 1.4;
}

.news-card .news-footer {
    margin-top: 15px; /* Espacio entre la descripción y el botón */
    text-align: center;
}

.news-card .news-footer a {
    display: inline-block;
    padding: 10px 15px;
    background-color: #191970;
    color: white;
    text-decoration: none;
    border-radius: 5px;
    transition: background-color 0.3s ease;
}
.news-card .news-footer a:hover {
    background-color: #4682B4; /* Un azul más claro para el hover */
}

/* --- AJUSTE PARA MÓVILES (Pone las cards de noticias en una sola columna) --- */
@media (max-width: 767px) {
    .news-card {
        /* Fuerza a la tarjeta a ocupar casi todo el ancho disponible */
        flex-basis: 90%; 
    }
}

/* ===== FIN DEL CÓDIGO PARA TARJETAS DE NOTICIAS ===== */




/* ====================================================================== */
/* ===== AJUSTE FINAL: ALTURA DE LA BARRA DE NAVEGACIÓN ESCRITORIO ===== */
/* ====================================================================== */

@media (min-width: 768px) {
    
    /* 1. Reducimos el espaciado vertical de toda la barra de navegación */
    #header-container {
        padding-top: 5px;
        padding-bottom: 5px;
        transition: padding 0.3s ease; /* Pequeña animación para suavidad */
    }

    /* 2. Limitamos la altura máxima del logo para que se ajuste a la nueva barra */
    #logo img {
        max-height: 40px; /* Puedes ajustar este valor (ej: 45px) si lo quieres un poco más alto */
        transition: max-height 0.3s ease; /* Pequeña animación para suavidad */
    }
}

/* ====================================================================== */
/* ===== ESTILOS DEFINITIVOS Y COMPLETOS PARA EL CARRUSEL v3.0 ===== */
/* ====================================================================== */

/* --- Contenedor Principal --- */
#hero-carousel {
    position: relative;
    width: 100%;
    height: 60vh;
    min-height: 400px;
    overflow: hidden;
}

/* --- Slides (Frames) --- */
#hero-carousel .carousel-inner {
    width: 100%;
    height: 100%;
}
#hero-carousel .carousel-item {
    display: none;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    transition: opacity 0.6s ease-in-out; /* Velocidad de transición unificada */
    opacity: 0;
}
#hero-carousel .carousel-item.active {
    display: block;
    opacity: 1;
}

/* --- Leyenda de Texto (Caption) --- */
#hero-carousel .carousel-caption {
    position: absolute;
    z-index: 10;
    background-color: transparent !important;
    text-align: center !important;
    padding: 20px !important;
    bottom: 15%;
    left: 15%;
    right: 15%;
}
#hero-carousel .carousel-caption h1,
#hero-carousel .carousel-caption p {
    color: #191970 !important;
    text-shadow: 1px 1px 3px rgba(255, 255, 255, 0.9); /* Sombra blanca más fuerte */
}
#hero-carousel .carousel-caption h1 {
    font-size: 2.5rem;
    font-weight: bold;
}
#hero-carousel .carousel-caption p {
    font-size: 1.2rem;
    margin-top: 10px;
}

/* --- Indicadores (Puntos redondos en la parte inferior) --- */
#hero-carousel .carousel-indicators {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 15;
    display: flex;
    padding: 0;
    margin: 0;
    list-style: none;
}
#hero-carousel .carousel-indicators button {
    width: 12px !important;
    height: 12px !important;
    border-radius: 50% !important; /* CORRECCIÓN: Hace los indicadores redondos */
    margin: 0 5px !important;
    background-color: #fff !important;
    opacity: 0.5;
    transition: opacity 0.6s ease;
    border: none;
    padding: 0; /* Limpieza de estilos extra */
}
#hero-carousel .carousel-indicators .active {
    opacity: 1;
}

/* --- Controles de Navegación (< >) --- */
#hero-carousel .carousel-control-prev,
#hero-carousel .carousel-control-next {
    width: 10%;
    opacity: 0.7;
    background: transparent !important; /* CORRECCIÓN: Elimina el área más clara */
}
#hero-carousel .carousel-control-prev:hover,
#hero-carousel .carousel-control-next:hover {
    opacity: 1;
}

/* CORRECCIÓN: Añade los íconos SVG de las flechas */
.carousel-control-prev-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/%3e%3c/svg%3e");
}
.carousel-control-next-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}
#hero-carousel .carousel-control-prev-icon,
#hero-carousel .carousel-control-next-icon {
    width: 2.5rem;
    height: 2.5rem;
}


/* --- AJUSTES RESPONSIVOS --- */
@media (max-width: 767px) {
    #hero-carousel .carousel-caption h1 {
        font-size: 1.5rem !important;
    }
    #hero-carousel .carousel-caption p {
        font-size: 1rem !important;
    }
}

/* ====================================================================== */
/* ===== 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 */
}

/* ====================================================================== */
/* == SOLUCIÓN SIMPLIFICADA PARA ALINEACIÓN DE CONTACTO (ESCRITORIO) == */
/* ====================================================================== */

/* 1. Asegura que la fila de contenido se expanda adecuadamente */
#indexFlexGrid4 {
  grid-template-rows: auto 1fr; 
}

/* 2. Da al mapa y a su contenedor una altura del 100% para que se estiren */
#indexFlexGrid4 .map, 
#indexHtml2, 
#indexHtml2 iframe {
  height: 100%;
  box-sizing: border-box;
}

/* 3. Estructura el formulario para que el botón se vaya al fondo */
#indexLayoutGrid4 > form {
  display: flex;
  flex-direction: column;
  height: 100%; /* El formulario ocupa todo el alto de su celda */
}

#Mensagem {
  flex-grow: 1; /* El área de texto crece, empujando el botón hacia abajo */
}

/* ====================================================================== */
/* == CORRECCIÓN PARA LEYENDAS SUPERPUESTAS (SITES DE PREVISÃO)    == */
/* ====================================================================== */

#indexFlexGrid3 {
  /* Le decimos a las filas que su altura se base en el contenido y no en porcentajes */
  grid-template-rows: auto auto auto;
  
  /* Añadimos espacio inferior para separar claramente del footer */
  padding-bottom: 20px;
}

/* ====================================================================== */
/* ===== AJUSTE RESPONSIVO PARA LOGOS SVG (Copernicus, NOAA, etc.) ===== */
/* ====================================================================== */
.logo-svg {
  max-width: 100%;   /* Asegura que la imagen nunca sea más ancha que su contenedor */
  height: auto;      /* Mantiene la proporción correcta de la imagen al escalar */
  display: block;    /* Mejora el manejo del espaciado */
  margin: 0 auto;
}

/* ====================================================================== */
/* == NUEVOS ESTILOS PARA LA SECCIÓN DE CONTACTO REESTRUCTURADA == */
/* ====================================================================== */

/* Contenedor principal de la sección.
   Lo usamos para centrar y añadir espacio. */
#indexFlexGrid4 .address {
    display: flex;
    flex-direction: column; 
    gap: 20px; /* Espacio entre cada línea de contacto */
    justify-content: center; /* Centra las líneas verticalmente en su celda */
    padding: 0 15px; /* Añade espacio lateral */
}

/* Estilo para cada línea individual (icono + texto).
   Funciona para todas las pantallas. */
.contact-line {
    display: flex;
    align-items: center; /* Centra verticalmente el icono con el texto */
    gap: 15px; /* Espacio entre el icono y el texto */
}

/* Contenedor del icono */
.contact-icon {
    flex-shrink: 0; /* Evita que el icono se encoja */
}

/* Contenedor del texto */
.contact-text {
    flex-grow: 1; /* Permite que el texto ocupe el espacio sobrante */
}

/* Estilo del texto en sí */
.contact-text span {
    font-size: 19px;
    color: #191970;
    font-family: Arial, sans-serif;
    word-break: break-word; /* Asegura que textos largos no rompan el diseño */
}

/* Estilo para los iconos SVG */
.contact-icon svg {
    display: block;
    width: 24px;
    height: 24px;
}

/* ====================================================================== */
/* == 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;
}


/* ====================================================================== */
/* ===== SOLUCIÓN FINAL Y VERIFICADA PARA CONTACTO MÓVIL            ===== */
/* ====================================================================== */

@media (max-width: 767px) {
  
  #indexFlexGrid4 {
    /* 1. Cambia el grid a una sola columna y ajusta las filas al contenido */
    grid-template-columns: 1fr !important;
    grid-template-rows: auto !important;  /* <-- LA CORRECCIÓN CLAVE ESTÁ AQUÍ */
    grid-template-areas:
      "contato"
      "email"
      "map_etiq"
      "map"
      "icon_contact"
      "address" !important;
    
    /* 2. Añade espacio inferior para separar de "Parceiros" */
    padding: 20px 20px 40px 20px !important;
    gap: 15px !important; /* Un poco menos de espacio entre elementos apilados */
  }

  /* Reduce el espacio del título principal "Contato" en móvil */
  #wb_indexHeading9 {
    padding-bottom: 0 !important;
  }

  /* Reduce el espacio de los subtítulos ("Entre em contato", etc.) */
  #wb_indexText3, #wb_indexText4, #wb_indexText5 {
    padding-bottom: 5px !important;
  }

  /* --- Mantiene las correcciones para el formulario y los iconos --- */
  
  #indexButton1 {
    /* Hace que el botón se ajuste al tamaño de su texto */
    width: auto !important;
    /* Mantiene un buen tamaño para ser presionado */
    padding: 10px 30px !important; 
    font-size: 16px !important;
    /* Centra el botón */
    display: block !important;
    margin: 0 auto !important;
  }

  #name, #email, #Mensagem {
      margin-bottom: 15px !important;
  }

 

  /* ====================================================================== */
  /* ===== AJUSTE RESPONSIVO PARA LOS LOGOS (SITES DE PREVISÃO)       ===== */
  /* ====================================================================== */

  /* 1. Cambia el grid a 2 columnas en móvil */
  #indexFlexGrid3 {
    grid-template-columns: 1fr 1fr !important; /* Dos columnas de igual tamaño */
    grid-template-rows: auto !important; /* La altura de las filas será automática */
    grid-template-areas:
      "header header"
      "site1 site2"
      "legend1 legend2"
      "site3 site4"
      "legend3 legend4"
      "site5 site6"
      "legend5 legend6" !important;
    
    gap: 20px 10px !important; /* Espacio vertical y horizontal */
    padding: 20px !important;
  }

  /* 2. Asegura que el título ocupe ambas columnas */
  #indexFlexGrid3 .header {
    grid-area: header !important;
  }

  /* 3. Centra el texto de las leyendas */
  #wb_indexText10,
  #wb_indexText11,
  #wb_indexText12,
  #wb_indexText13,
  #wb_indexText14,
  #wb_indexText15 {
    padding-top: 0 !important;
  }

    /* 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;
  }

}