/* CSS Document */
@charset "utf-8";

/* --- FUENTES --- */
@font-face {
  font-family: "Roboto";
  src: url("../fonts/Roboto.eot");
  src: url("../fonts/Roboto.eot?#iefix") format("embedded-opentype"), url("../fonts/Roboto.otf") format("opentype"), url("../fonts/Roboto.svg") format("svg"), url("../fonts/Roboto.ttf") format("truetype"), url("../fonts/Roboto.woff") format("woff"), url("../fonts/Roboto.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
}
/* ... (aquí van el resto de tus @font-face) ... */
@font-face {
  font-family: "Comfortaa";
  src: url("../fonts/Comfortaa-Bold.eot");
  src: url("../fonts/Comfortaa-Bold.eot?#iefix") format("embedded-opentype"), url("../fonts/Comfortaa-Bold.otf") format("opentype"), url("../fonts/Comfortaa-Bold.svg") format("svg"), url("../fonts/Comfortaa-Bold.ttf") format("truetype"), url("../fonts/Comfortaa-Bold.woff") format("woff"), url("../fonts/Comfortaa-Bold.woff2") format("woff2");
  font-weight: bold;
  font-style: normal;
}

/* --- ESTILOS GENERALES --- */
* { box-sizing: border-box; }
html, body { margin: 0px; height: 100%; font-family: Roboto; font-size: 14px; }
hr { border: 0.3px solid #bbb; margin: 8px -10px; }
img { width: 100%; }
a { color: white; text-decoration: none; }
.cuerpo_contenido {
  min-height: 500px;
  color: white; /* <<<< REGLA QUE ARREGLA EL COLOR BLANCO DEL TEXTO EN OTRAS PÁGINAS */
}
/* ... (aquí van el resto de tus estilos generales como .bg_blue, .titulo_section, etc.) ... */
.texto_documento { position: absolute; bottom: 5px; right: 0px; color: white; font-size: 18px; text-align: right; }

/* --- CONTACTO, TABLAS, GALERIAS, ETC (SIN CAMBIOS) --- */
form { font-weight: bold; }
/* ... (todos los demás estilos que no son de convenios se quedan igual) ... */
.galerias_det:hover .galeria_img {
  opacity: .6;
}

/*
===================================================================
/* --- ESTILOS ADICIONALES PARA LA SECCIÓN DE CONVENIOS --- */
.pagina-convenios .cuerpo_contenido {
  background-color: #343a40; /* Fondo gris oscuro SOLO para la página de convenios */
  color: white; /* Color de texto blanco por defecto SOLO para esta página */
}
===================================================================
*/

/* --- MEDIA QUERIES (Aquí empiezan los estilos para móviles) --- */
@media only screen and (max-width: 768px) {
  /* HEADER */
  #header {
    height: 75px;
  }
  /* ... etc ... */
}
===================================================================
== INICIA CÓDIGO SEGURO Y AISLADO - SOLO PARA PÁGINA DE CONVENIOS ==
===================================================================
*/
.pagina-convenios .card-convenio {
  display: flex;
  flex-direction: row;
  border-radius: 10px;
  overflow: hidden;
  min-height: 220px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  margin-bottom: 1.5rem;
}
.pagina-convenios .card-convenio-img {
  flex-basis: 35%;
  flex-shrink: 0;
  background-color: white;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  text-align: center;
}
.pagina-convenios .card-convenio-img img {
  max-width: 150px;
  height: auto;
}
.pagina-convenios .card-convenio-body {
  flex-grow: 1;
  padding: 1.5rem;
  background-color: #6c757d;
  color: white;
}
.pagina-convenios .card-convenio-body h4,
.pagina-convenios .card-convenio-body p {
  color: white !important;
  margin-bottom: 0.75rem;
}
.pagina-convenios .asesor {
  margin-top: 1rem;
  font-size: 0.9rem;
  color: #333 !important;
}

@media (max-width: 767px) {
  .pagina-convenios .card-convenio {
    flex-direction: column;
  }
  .pagina-convenios .card-convenio-img {
    flex-basis: auto;
  }
  /* ... (aquí van el resto de tus media queries para header, slider, etc.) ... */
}
/* ... (aquí van el resto de tus @media queries) ... */