body {
      font-family: "Fira Sans", serif;

    }

    footer{
      background: #3fa5a5;
    }
    a{
      text-decoration: none !important;
    }

    .diagnostico-body ul li {
      display: block; /* Asegura que cada elemento de la lista ocupe toda la línea */
      width: 100%;
    }

    

    .reduccionTm{
      font-size: 17px
    }
    .diagnostico-body ul li {
      display: block; /* Asegura que cada elemento de la lista ocupe toda la línea */
      width: 100%;
    }

    .tituloPrincipal{
      color:#DD5542;
    }

    
    ul {
      margin-left: 20px;
      list-style: disc;
    }
    table {
      border-collapse: collapse;
      width: 100%;
      margin-top: 20px;
    }
    table, th, td {
      border: 1px solid #ddd;
    }
    th, td {
      padding: 8px;
      text-align: center;
    }
    .tabla-mx-60{
      max-width: 40%;
      text-align: center;
    }
    body {
      text-align: justify !important;
      font-weight: 300;
 font-style: normal;
 font-size: 20px;
 text-align: center;
    }

    nav {
      text-align: justify !important;
      font-weight: 100 !important;
 font-style: normal;
 font-size: 15px;
 text-align: left;
    }
    ul{
      text-align: justify
    }
    .textocentrado{
      text-align: center !important;
    }

    .contenedorPresentacion2 label {
      display: inline-block;
      width: 250px; /* Ajusta el ancho según sea necesario */
      text-align: center;
    }


    
      @media only screen and (max-width: 1228px) {
     .contenedorPresentacion2 label {
      display: inline-block;
      width: 80%; /* Ajusta el ancho según sea necesario */
      text-align: center;
      margin-top: 10px;
    }
  }
 @media only screen and (max-width: 887px) {
     .contenedorPresentacion2 label {
      display: inline-block;
      width: 100%; /* Ajusta el ancho según sea necesario */
      text-align: center;
    }
  }




    .letter-small{
      font-size: 15px;
    }
    .btn-creMate{
      padding: 20px;
      background: #ffffff;
      border: 2px solid #003941;
    }

    .btn-creMate:hover{
      padding: 20px;
      background: #003941 !important;
      border: 2px solid #003941;
      color: #FFF;
    }
    .font-weight-bold{
      font-weight: bold;
      font-size: 1111px;
    }
    .cuadroNaranja{
      background: #dd551e;
      color: #ffffff;
      padding: 10px;
      border-radius: 10px;
    }
    #zone-name {
      margin-top: -55px; 
      margin-left: 15px; 
      color: #FFF; 
      padding: 6px; 
      width: 130px; 
      background: #555; 
      font-family:verdana; 
      font-size: 12px; 
      text-shadow: 0 2px 3px #000; 
      color: #FFF;
      border-radius: 6px; -webkit-border-radius: 6px; -moz-border-radius: 6px;
    }
    /* Contenedor del encabezado */
    .header {

      background-color: #6BA4A5;
      color: #ffffff;
      text-align: center;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 10px 40px;
      font-weight: 700;
      font-style: normal;
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: 1000;
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
      overflow: hidden;

    }

    /* Efecto de estrellas */
    .header::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: transparent;
      pointer-events: none;
      z-index: 1;
      animation: sparkle 10s infinite;
    }

    /* Crear estrellas con pseudo-elementos */
    .header .stars {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
      overflow: hidden;
      z-index: 1;
    }

    .header .stars span {
      position: absolute;
      display: block;
      width: 8px;
      height: 8px;
      background: white;
      border-radius: 50%;
      box-shadow: 0 0 10px 5px rgba(255, 255, 255, 0.5);
      animation: sparkle 3s infinite ease-in-out;
      opacity: 0.6;
    }

    /* Ubicación aleatoria de las estrellas */
    .header .stars span:nth-child(1) {
      top: 10%;
      left: 20%;
      animation-delay: 0s;
    }
    .header .stars span:nth-child(2) {
      top: 30%;
      left: 50%;
      animation-delay: 2s;
    }
    .header .stars span:nth-child(3) {
      top: 70%;
      left: 80%;
      animation-delay: 3s;
    }
    .header .stars span:nth-child(4) {
      top: 50%;
      left: 10%;
      animation-delay: 1s;
    }
    .header .stars span:nth-child(5) {
      top: 90%;
      left: 40%;
      animation-delay: 4s;
    }



    /* Ajuste del tamaño de los logos */
    .header .logo-left,
    .header .logo-right {
      width: 180px;
    }

    /* Estilo de los títulos */
    .header h1 {
      font-size: 2.5rem;
      font-weight: bold;
      margin: 0;
    }

    .header .text-center {
      flex: 1;
      text-align: center;
    }

    /* Responsividad para pantallas más pequeñas */
    @media (max-width: 768px) {
      .header {
        flex-direction: column; /* Cambia la disposición a vertical */
        text-align: center; /* Asegura que el texto esté centrado */
        padding: 10px 20px; /* Reduce el padding */
      }

      .header .logo-left,
      .header .logo-right {
        width: 120px; /* Reduce el tamaño de los logos */
        margin-bottom: 10px; /* Agrega un poco de espacio */
      }

      .header h1 {
        font-size: 1.8rem; /* Reduce el tamaño del texto */
      }
    }

    /* Responsividad para pantallas muy pequeñas (como móviles) */
    @media (max-width: 480px) {
      .header h1 {
        font-size: 1.4rem; /* Reduce aún más el tamaño del texto */
      }

      .header {
        padding: 10px 10px; /* Reduce el padding lateral */
      }

      .header .logo-left,
      .header .logo-right {
        width: 100px; /* Ajusta aún más el tamaño de los logos */
      }
    }



    /* Estilos necesarios */
    .menu-icons {
      position: fixed;
      top: 40%;
      left: 0;
      transform: translateY(-50%);
      background-color: #004d4d;
      padding: 1px;
      border-radius: 0 5px 10px 0;
      box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.3);
      max-width: 40px;
      border-top-right-radius: 20px;
      border-bottom-right-radius: 20px;
      z-index: 9999999;

    }

    .menu-button {
      background-color: #004D4D;
      color: white;
      border: none;
      padding: 10px;
      font-size: 1.2rem;
      border-radius: 5px;
      cursor: pointer;
      transition: background-color 0.3s ease;
    }

    .menu-button:hover {
     color: #EFB810;
   }
   /* Contenedor del menú */
   #menu-container {
    border-radius: 10px;
    padding: 0;
    margin-top: 10px;
    width: 230px;
    color: #111111;
    max-height: 0; /* Oculto inicialmente */
    overflow: hidden;
    opacity: 0; /* Transparente inicialmente */
    transition: max-height 0.1s ease, opacity 0.5s ease, padding 0.5s ease; /* Transición fluida */

  }

  #menu-container.hidden {
    max-height: 0; /* Ocultar el contenido */
    opacity: 0; /* Totalmente transparente */
    padding: 0; /* Elimina el espacio adicional */
  }

  #menu-container.visible {
    max-height: 500px; /* Altura máxima cuando se muestra */
    opacity: 1; /* Totalmente visible */
    padding: 10px; /* Restauramos el padding */
  }

  /* Botón de hamburguesa y "X" */
  .menu-button {
    border: none;
    background-color: transparent;
    font-size: 1.2rem;
    cursor: pointer;
    margin-top: 10px;
    transition: transform 0.3s ease; /* Transición de rotación */
  }

  .menu-button.open {
    transform: rotate(90deg); /* Girar ligeramente el ícono de "X" para destacar */
  }

  /* Estilo del contenido del menú */
  #menu-content {
    max-height: 250px;
    overflow-y: scroll;
    scrollbar-width: none; /* Oculta el scrollbar en Firefox */
    -ms-overflow-style: none; /* Oculta el scrollbar en Internet Explorer */
  }

  #menu-content::-webkit-scrollbar {
    display: none; /* Oculta el scrollbar en Chrome, Safari y Edge */
  }

  #menu-content a {
    display: flex;
    align-items: center;
    color: black;
    text-decoration: none;
    margin: 10px 0;
    padding: 5px;
    border-radius: 5px;
    font-weight: bold;

  }
  /* Botones de desplazamiento */
  .arrow {
    border: none;
    padding: 10px;
    font-size: 1.2rem;
    cursor: pointer;
    margin: 5px 0;
    background: no-repeat;
    color: #ffffff;
  }

  .arrow:hover {
    color: #EFB810;
  }

  .contenedor-mapa{
    height: 500px; 
    width: 100%; 
    margin-top: 10%;
  }
  .container{
    max-width: 80%;
  }
  @media only screen and (max-width: 1728px) {
    #menu-container.visible  {
      background: #fcfcfc;
      opacity: 0.9;
    }
    .arrow {
      color: #111111;
    }
  }

  @media only screen and (max-width: 1658px) {
    .contenedor-mapa{

      margin-top: 15%;
    }
  }

  .img-estados{
     transform: scale(1.2);
     z-index: 1 !important;
  }
@media only screen and (max-width: 1618px) {
    .img-estados{

     transform: scale(1.4);
     margin-top: 50px;
    }
  }



  @media only screen and (max-width: 1152px) {
    .contenedor-mapa{
      margin-top: 25%;
    }
  }
  @media only screen and (max-width: 940px) {
    .contenedor-mapa{
      margin-top: 30%;
    }
  }
  @media only screen and (max-width: 812px) {
    .contenedor-mapa{
      margin-top: 38%;
    }
  }
  @media only screen and (max-width: 705px) {
    .contenedor-mapa{
      margin-top: 38%;
    }
  }
  @media only screen and (max-width: 633px) {
    .contenedor-mapa{
      margin-top: 40%;
    }
  }
  @media only screen and (max-width: 599px) {
    .contenedor-mapa{
      display: none;
    }
  }

  @media only screen and (max-width: 599px) {
    .contendor-movil-margin{
      margin-top: 46%
    }
  }

  @media only screen and (max-width: 532px) {
    .contendor-movil-margin{
      margin-top: 56%
    }
  }

  @media only screen and (max-width: 442px) {
    .contendor-movil-margin{
      margin-top: 60%
    }
  }
  @media only screen and (max-width: 402px) {
    .contendor-movil-margin{
      margin-top: 65%
    }
  }

  @media only screen and (max-width: 326px) {
    .contendor-movil-margin{
      margin-top: 75%
    }
  }

  @media only screen and (max-width: 1629px) {
    .menu-icons {
      position: fixed;
      top: 50%;
    }
  }

  @media only screen and (max-width: 705px) {
    .menu-icons {
      position: fixed;
      top: 70%;
    }
  }

  #menu-content a:hover {
   color: #EFB810;
 }

 #menu-content img {
  margin-right: 10px;
  border-radius: 5px;
}



ul {
  padding-left: 20px;
}
.contenedorPresentacion1{
 font-weight: 900;
 font-style: normal;
}
.contenedorPresentacion2{
 font-weight: 300;
 font-style: normal;
 font-size: 20px;
 /* text-align: center; */
}

#scrollTopBtn {
  position: fixed;
  bottom: 20px;
  right: 20px;
  display: none; /* Oculto por defecto */
  z-index: 1000;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  justify-content: center;
  align-items: center;
  display: flex;
  background: #003C43;
  color: #ffffff;
}



#scrollTopBtn2 {
  position: fixed;
  bottom: 20px;
  right: 80px;
  display: none; /* Oculto por defecto */
  z-index: 1000;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  justify-content: center;
  align-items: center;
  display: flex;
  background: #003C43;
  color: #ffffff;
}

/* Contenedor principal */
.contenedor-seccion {
  margin-top: 10%; /* Ajusta este valor según la altura del encabezado */
  max-width: 70%;
}

.contenedor-seccion2 {
  max-width: 80%;
}

@media (max-width: 1348px) {
  .contenedor-seccion {
    margin-top: 15%; /* Ajusta este valor según la altura del encabezado */
  }
}

@media (max-width: 1104px) {
  .contenedor-seccion {
    margin-top: 20%; /* Ajusta este valor según la altura del encabezado */
  }
}

/* Responsividad para pantallas más pequeñas */
@media (max-width: 1032px) {
  .contenedor-seccion {
    margin-top: 25%; /* Ajusta este valor según la altura del encabezado */
  }
}
/* Responsividad para pantallas más pequeñas */
@media (max-width: 832px) {
  .contenedor-seccion {
    margin-top: 30%; /* Ajusta este valor según la altura del encabezado */
  }
}
@media (max-width: 800px) {
  .contenedor-seccion {
    margin-top: 40%; /* Ajusta este valor según la altura del encabezado */
  }
}



@media (max-width: 588px) {
  .contenedor-seccion {
    margin-top: 70%; /* Ajusta este valor según la altura del encabezado */
  }
}
@media (max-width: 364px) {
  .contenedor-seccion {
    margin-top: 70%; /* Ajusta este valor según la altura del encabezado */
  }
}
 
@media (max-width: 354px) {
  .contenedor-seccion {
    margin-top: 70%; /* Ajusta este valor según la altura del encabezado */
  }
}
@media (max-width: 332px) {
  .contenedor-seccion {
    margin-top: 80%; /* Ajusta este valor según la altura del encabezado */
  }
}



/* Asegura que las tarjetas tengan el mismo tamaño */
.diagnostico-card {
  display: flex;
  flex-direction: column;
  height: 100%; /* Hace que todas las tarjetas tengan el mismo tamaño */
  border-radius: 10px;
  overflow: hidden;
}

.margen3{
  display: flex;
  align-items: center;
  justify-content: center;
  height: 120px;
  width: 90%; /* Reduce el ancho para "cerrarlo" en los lados */
  margin: 0 auto; /* Centra el header */
  border-top-left-radius: 10px; /* Radio en la esquina superior izquierda */
  border-top-right-radius: 10px; /* Radio en la esquina superior derecha */
  padding: 10px;
  color: #E06938;
  font-weight: bold;
  font-size: 25px;
  border-left: 2px solid #26908D; /* Borde izquierdo */
  border-right: 2px solid #26908D; /* Borde derecho */
  border-top: 2px solid #26908D; /* Borde derecho */

}
/* Mantiene el header fijo en tamaño */
.diagnostico-header {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 120px;
  width: 90%; /* Reduce el ancho para "cerrarlo" en los lados */
  margin: 0 auto; /* Centra el header */
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  padding: 10px;
  color: #E06938;
  font-weight: bold;
  font-size: 25px;
  z-index: -9999;
}
.negritas{
  font-weight: 500;
}
.modalzindex{
  z-index: 9999999;
}

.pUlparen {
  text-align: justify;
  padding-left: 20px;
  text-indent: -20px;
}
.pUlparen2 {
  text-align: justify;
  padding-left: 20px;
  text-indent: -0px;
}

.tabla-pequena {
    transform-origin: top left; /* Ajusta el punto de escala */
  max-width: 70%; /* Ajusta el ancho sin afectar otras tablas */
  margin: auto; /* Mantiene la tabla centrada */
}
.tabla-pequena td, .tabla-pequena th {
  padding: 4px; /* Reduce el espacio interno solo en esta tabla */
  width: 0%; /* Ajusta el ancho sin afectar otras tablas */

}

/* Ajusta la imagen del header */
.diagnostico-header img {
  width: 50px;
  margin-right: 10px;
}
.tabla-pequena td {
  text-align: center; /* Centra horizontalmente */
  vertical-align: middle; /* Centra verticalmente */
}

/* Permite que el contenido del body crezca uniformemente */
.diagnostico-body {
  flex-grow: 1; /* Permite que todos los body se expandan al mismo tamaño */
  background-color: #26908D;
  color: #fff;
  padding: 20px;
  border-radius: 0 0 10px 10px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center; /* Centra el contenido dentro */
  min-height: 200px; /* Evita que se colapse */
  z-index: -9999;
}

/* Asegura que el texto del body ocupe todo el espacio disponible */
.diagnostico-body p {
  flex-grow: 1;
  margin: 0;
  font-size: 1rem;
  color: #fff;
}

/* Estilos para las tarjetas */
.diagnostico-card {
  margin-bottom: 20px;
}

/* Estilos para la línea separadora */
.linea-hr {
  border: 1px solid #212529;
  background-color: #212529;
  opacity: 0.9;
}



.diagnostico-card {
  transition: all 0.3s ease; /* Define la transición para todos los efectos */
}


.diagnostico-card:hover {
  -webkit-box-shadow: 4px 2px 5px 0px rgba(63,165,165,0.75);
  -moz-box-shadow: 4px 2px 5px 0px rgba(63,165,165,0.75);
  transform: scale(1.05); /* Escalado para dar un efecto de aumento */
}

@media (max-width: 768px) {
  /* Reduce el tamaño del título en móviles */
  .diagnostico-title {
    font-size: 18px;
    text-align: center;
  }

  /* Reduce la imagen del header en móviles */
  .diagnostico-header img {
    width: 40px;
    margin-right: 5px;
  }

  /* Asegura que el header no sea demasiado alto en móviles */
  .diagnostico-header {
    height: auto;
    padding: 10px;
  }

  /* Ajusta el margen y el ancho para mejorar el espacio en pantallas pequeñas */
  .margen3 {
    width: 100%;
    height: auto;
    padding: 8px;
    text-align: center;
    flex-direction: column;
  }

  /* Ajusta el tamaño del texto en el cuerpo */
  .diagnostico-body {
    padding: 15px;
    min-height: auto;
  }

  .diagnostico-body p {
    font-size: 14px;
  }
}



@media (max-width: 1187px) {
  /* Reduce el tamaño del título en móviles */
  .diagnostico-title {
    font-size: 22px;
    text-align: center;
  }

  /* Reduce la imagen del header en móviles */
  .diagnostico-header img {
    width: 40px;
    margin-right: 5px;
  }

  /* Asegura que el header no sea demasiado alto en móviles */
  .diagnostico-header {
    height: auto;
    padding: 10px;
  }

  /* Ajusta el margen y el ancho para mejorar el espacio en pantallas pequeñas */
  .margen3 {
    width: 100%;
    height: auto;
    padding: 8px;
    text-align: center;
    flex-direction: column;
  }

  /* Ajusta el tamaño del texto en el cuerpo */
  .diagnostico-body {
    padding: 15px;
    min-height: auto;
  }

  .diagnostico-body p {
    font-size: 14px;
  }
}

.clase-cnaranja{
  max-width: 250px;
}


.section {
  margin-bottom: 20px;
}


.tituloh3 {
  color: #333;
  border-bottom: 2px solid #6ba4a5;
  padding-bottom: 5px;
  margin-bottom: 10px;
}

.ulTablas{
  list-style-type: none;
  padding: 0;
}

.liTablas{
  margin: 5px 0;
}

.borderdis{
  border: 2px solid #000;
  padding: 40px;
/*  text-align: center;
*/}
.contenedorEjemplo {
  width: 100%; /* Asegura que el contenedor ocupe todo el ancho disponible */
  max-width: 50%; /* Limita el ancho máximo al 60% */
  margin: 0 auto; /* Centra el contenedor */
  padding: 10px; /* Opcional: agrega algo de espacio interno */
}

/* Media queries para pantallas pequeñas */
@media (max-width: 1642px) {
  .contenedorEjemplo {
      max-width: 80%; /* Para pantallas medianas, el contenedor ocupa el 90% */
  }
}

/* Media queries para pantallas muy pequeñas */
@media (max-width: 670px) {
  .contenedorEjemplo {
      max-width: 100%; /* Para pantallas pequeñas, el contenedor ocupa el 100% */
  }
}