.fondo-popup {
  position: fixed; /* Fija el modal en la pantalla */
  top: 0; /* Posiciona el modal en la parte superior de la pantalla */
  left: 0; /* Posiciona el modal en el lado izquierdo de la pantalla */
  width: 100%; /* Ocupa todo el ancho de la pantalla */
  height: 100%; /* Ocupa todo el alto de la pantalla */
  background-color: rgba(0, 0, 0, 0.5); /* Fondo negro semi-transparente */
  display: flex; /* Utiliza flexbox para centrar el contenido */
  justify-content: center; /* Centra horizontalmente */
  align-items: center; /* Centra verticalmente */
  z-index: 1000; /* Asegura que el modal se superponga sobre otros elementos */
  padding-top: 120px;
}

.pop-up.centro {
  position: relative; /* Posiciona los elementos relativos al modal */
  background-color: #fff; /* Fondo blanco para el contenido del modal */
  /* Espaciado interno del modal */
  border-radius: 5px; /* Esquinas redondeadas */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Sombra para un efecto de elevación */
  width: 90%; /* Ancho del modal, ajustable según tus necesidades */
  max-width: 600px; /* Máximo ancho del modal */
}

.close-modal {
  cursor: pointer; /* Cambia el cursor a pointer para indicar que es un elemento clickeable */
  position: absolute; /* Posiciona el botón de cierre */
  top: 10px; /* Separación desde la parte superior */
  right: 10px; /* Separación desde la derecha */
  z-index: 1001; /* Asegura que el botón de cierre esté encima del contenido */
}

.close-modal img {
  width: 20px; /* Tamaño del icono de cierre */
  height: 20px; /* Tamaño del icono de cierre */
}

.success-message, .error-message {
  display: none; /* Oculta los mensajes de éxito y error inicialmente */
}

.show-success, .show-error {
  display: block; /* Muestra el mensaje correspondiente */
}

.div-block-37.pop-up.centro{
  padding: 20px;
}

@media (max-width: 768px) {
  .fondo-popup {
      padding-top: 60px; /* Ajusta el espacio superior para pantallas más pequeñas */
  }

  .pop-up.centro {
      width: 95%; /* Ajusta el ancho para pantallas más pequeñas */
  }
}
.toast {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 1051;
}

.nav-item-spaced {
  margin: 5px 5px; /* Adjust the margin as needed */
}
#categoryTabs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* Ensure buttons stack on smaller screens */
@media (max-width: 768px) {
  #categoryTabs {
      flex-direction: column;
  }
}

/* Document Blocks */
.div-block-60 {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
}

.document-container {
  flex: 1 1 calc(33.333% - 15px); /* 3 items per row */
  padding: 20px;

  border-radius: 5px;
  margin-bottom: 15px;
  color: #ffffff; /* White text color */

}

.document-container h4,
.document-container .text-block-16,
.document-container .link-8 {
  color: #ffffff; /* Ensure all text is white */
}

@media (max-width: 768px) {
  .document-container {
      flex: 1 1 100%; /* Stack items on smaller screens */
  }
}

.document-container h4 {
  font-size: 1.2em; /* Adjusted font size */
  margin: 10px 0; /* Margin for spacing */
}

.document-container .text-block-16 {
  font-size: 1em; /* Date text */
}

.document-container .link-8 {
  font-size: 0.9em; /* Smaller link text */
  text-decoration: underline; /* Underline the link for clarity */
}

.div-block-14{
  grid-column-gap: 40px;
}

@media (max-width: 767px) {
    .footer-dark .div-block-14.colaboradores {
        margin-right: 0;
        margin-bottom: 10px;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }

    .footer-dark .div-block-14.colaboradores img {
        margin: 5px;
        width: 60px; /* Ajusta el tamaño de las imágenes si es necesario */
    }

}
@media (max-width: 767px) {
    /* Ajustes generales */
    .div-block-43, .div-block-44, .div-block-46, .div-block-47, .section-5, .section-3 {
        padding: 15px;
        width: 100%;
    }

    .div-block-47 {
        height: 300px; /* Reducir la altura de la imagen de fondo en móviles */
        width: 100%; /* Asegurar que ocupe todo el ancho en móviles */
        background-size: cover; /* Ajustar la imagen de fondo */
    }

    .div-block.quienes-somos {
        text-align: center; /* Centrar el texto para mejor legibilidad en móviles */
    }

    /* Títulos */
    h1.heading, h1.heading-7, h1.heading-3 {
        font-size: 24px; /* Reducir el tamaño de fuente para móviles */
        line-height: 1.2;
    }

    .text-block-2 {
        font-size: 16px; /* Ajustar tamaño del subtítulo */
        line-height: 1.4;
    }

    /* Ajuste del contenido principal */
    .div-block-46 {
        font-size: 16px; /* Ajustar el tamaño del texto */
        line-height: 1.6;
    }

    /* Sección "Más programas" */
    .div-block-14.mas-noticias {
        display: flex;
        flex-direction: column; /* Apilar los programas verticalmente en móviles */
        gap: 15px; /* Espacio entre los elementos */
    }

    .link-block.w-inline-block {
        width: 100%; /* Asegurar que los links ocupen todo el ancho en móviles */
        margin-bottom: 15px;
    }

    .div-block-6 {
        flex-direction: column; /* Apilar el contenido dentro de cada programa */
        text-align: center; /* Centrar el contenido */
    }

    .div-block-7 {
        height: 200px; /* Ajustar altura de las imágenes en los programas */
        background-size: cover; /* Asegurar que la imagen cubra bien el contenedor */
    }

    .div-block-8 {
        padding: 10px;
    }

    .text-block-6 {
        font-size: 18px; /* Ajustar tamaño del texto de los títulos en "Más programas" */
        line-height: 1.4;
    }
}