/* Cargar la fuente Neuron Regular */
    @font-face {
      font-family: 'neuron';
      src: url('fonts/neuron.ttf') format('truetype');
      font-weight: normal;
      font-style: normal;
    }

    /* Cargar la fuente Neuron Extra Bold */
    @font-face {
      font-family: 'neuron';
      src: url('fonts/neuronextrabold.ttf') format('truetype');
      font-weight: bolder; /* Peso de la fuente en negrita */
      font-style: normal;
    }

    /* Cargar la fuente Neuron Demi Bold */
    @font-face {
      font-family: 'neuron';
      src: url('fonts/neurondemibold.ttf') format('truetype');
      font-weight: bold;
      font-style: normal;
    }

    @font-face {
      font-family: 'neuron';
      src: url('fonts/neuronlight.ttf') format('truetype');
      font-weight: 100;
      font-style: normal;
    }
    /* Estilos generales */
    body, html {
      margin: 0;
      padding: 0;
      width: 100%; /* Asegurar que el ancho no exceda la ventana */
      height: 100%;
      font-family: 'Neuron', Arial, sans-serif; /* Aplicar la fuente Neuron */
      overflow-x: hidden; /* Evitar desbordamiento horizontal */
    }

    body {
      background-image: url('images/background.png'); /* Ruta de la imagen de fondo */
      background-size: cover; /* Cubrir toda la página sin perder relación de aspecto */
      background-position: left top; /* Centrar la imagen */
      background-repeat: no-repeat; /* Evitar que la imagen se repita */
      background-attachment: fixed; /* Fijar la imagen de fondo */
       margin: 0;
      padding: 0;
      width: 100%;
      height: 100%;
      font-family: 'Neuron', Arial, sans-serif;
      overflow-x: hidden;
    }

    @media (max-width: 768px) {
      body {
        background-position: -300px top; /* Desplazar 500px hacia la derecha */
      }
    }
    header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 10px 20px; /* Padding para evitar que toque los bordes */
      background-color: rgba(255, 255, 255, 0.6); /* Opacidad reducida a 0.6 */
      position: fixed; /* Menú fijo en la parte superior */
      top: 0;
      left: 0;
      width: 100%;
      z-index: 1000; /* Asegurar que esté por encima del contenido */
      box-sizing: border-box; /* Incluir padding en el ancho total */
    }

    .logo img {
      height: 150px;
    }

    @media (max-width: 768px) {
      .logo img {
        height: 100px; /* Reducir el tamaño del logo a 100px */
      }
    }
    /* Botón de menú para móviles */
    .menu-toggle {
      display: none; /* Oculto por defecto */
      background: none;
      border: none;
      font-size: 24px;
      color: #555555;
      cursor: pointer;
      z-index: 1001; /* Asegurar que esté por encima del menú */
    }

    /* Estilos del menú */
    .nav-menu {
      display: flex;
      justify-content: flex-end;
      padding-left: 20px; /* Padding para evitar que toque el borde izquierdo */
      box-sizing: border-box; /* Incluir padding en el ancho total */
    }

    .menu {
      list-style: none;
      margin: 0;
      padding: 0;
      display: flex;
      align-items: center;
    }

    .menu li {
      position: relative;
      margin-left: 20px;
    }

    .menu li a {
      text-decoration: none;
      color: #555555;
      font-weight: bold;
      padding: 10px;
      display: block;
      font-family: 'Neuron', Arial, sans-serif; /* Aplicar la fuente Neuron */
    }

    .menu li a:hover {
      background-color: #E5B22E; /* Amarillo quemado */
    }

    .menu li a img {
                transition: filter 0.3s ease;
            }

    .menu li a:hover img{
      filter: brightness(3.0);
    }

    /* Submenús */
    .submenu {
      display: none;
      position: absolute;
      top: 100%;
      left: 0;
      background-color: rgb(255, 255, 255);
      list-style: none;
      padding: 0;
      margin: 0;
      min-width: 200px;
      z-index: 1000;
    }

    .submenu .submenu {
      top: 0;
      left: 100%;
    }

    .submenu li a {
      padding: 10px;
      color: #555555;
      font-family: 'Neuron', Arial, sans-serif; /* Aplicar la fuente Neuron */
    }

    .submenu-parent:hover > .submenu {
      display: block;
    }

    /* Estilos responsivos */
    @media (max-width: 768px) {
      .menu-toggle {
        display: block; /* Mostrar botón de menú en móviles */
      }

      .nav-menu {
        display: none; /* Ocultar menú en móviles */
        position: fixed; /* Menú fijo en móviles */
        top: 124px; /* Ajusta según la altura del header */
        right: 0;
        background-color: rgb(255, 255, 255);
        width: 100%;
        text-align: center;
        z-index: 1000;
        padding-left: 0; /* Eliminar padding en móviles */
      }

      .nav-menu.active {
        display: block; /* Mostrar menú al hacer clic en el botón */
      }

      .menu {
        flex-direction: column;
      }

      .menu li {
        margin: 10px 0;
      }

      .submenu {
        position: static;
        display: none;
      }

      .submenu.active {
        display: block; /* Mostrar submenú al hacer clic */
      }

      /* Desplazar el contenido hacia abajo cuando el menú está abierto */
     /* main.menu-open,
      footer.menu-open {
        margin-top: 200px; /* Ajusta este valor según la altura del menú */
      /*}*/
    }

    /* Icono de WhatsApp */
    .whatsapp-icon {
      height: 24px;
      vertical-align: middle;
    }

    /* Contenido principal */
    main {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      height: 94vh; /* estaba en 100vh, cambiado a 94 para eliminar barra de desplazamiento vertical*/
      text-align: center;
      color: #333; /* Color de texto oscuro */
      transition: margin-top 0.3s; /* Transición suave */
      box-sizing: border-box; /* Incluir padding y border en el tamaño total */
      position: relative; /* Cambiado a relativo */
      padding-top: 60px; /* Espacio para el menú fijo */
      width: 100%; /* Asegurar que no exceda el ancho de la ventana */
    }

    /* Encabezados */
    .headers-container {
      text-align: center;
      width: 100%; /* Asegurar que no exceda el ancho de la ventana */
    }

    h1 {
      font-size: 3.5rem;
      color: white;
      text-shadow: 2px 2px rgba(0, 0, 0, 0.2);
      margin-bottom: 10px;
      font-family: 'neuron', Arial, sans-serif; /* Aplicar la fuente Neuron */
      font-weight: bold; /* Usar la versión bold de la fuente */
    }

    h2 {
      font-size: 2.5rem;
      color: white; /* Color de texto gris oscuro */
      text-shadow: 2px 2px rgba(0, 0, 0, 0.2);
      font-family: 'neuron', Arial, sans-serif; /* Aplicar la fuente Neuron */
      font-weight: bold; /* Usar la versión bold de la fuente */
    }

    @media (max-width: 768px) {
      .headers-container h1 {
        font-size: 2rem; /* Reducir el tamaño del h1 */
        margin-top: 30px; /* Ajustar el margen superior si es necesario */
      }

      .headers-container h2 {
        font-size: 1.5rem; /* Reducir el tamaño del h2 */
        margin-top: 10px; /* Ajustar el margen superior si es necesario */
      }
    }

    .buttons-container {
      display: flex;
      flex-direction: column;
      gap: 20px;
      align-items: center;
    }

    /* Fila de botones */
    .button-row {
      display: flex;
      gap: 20px;
      justify-content: center;
    }

    /* Estilos responsivos para pantallas pequeñas */


    .custom-button {
      text-decoration: none;
      color: #555; /* Texto gris */
      padding: 10px 20px;
      background-color:white; /* amarillo institucional*/
      transition: background-color 0.3s, color 0.3s; /* Transición suave */
      width: 150px; /* Mismo tamaño para ambos botones */
      text-align: center;
      line-height: 1.5; /* Centrar texto verticalmente */
      white-space: nowrap; /* Evitar que el texto ocupe más de una línea */
      font-family: 'Neuron', Arial, sans-serif; /* Aplicar la fuente Neuron */
    }

    .custom-button:hover {
      background-color: #E5B22E; /* Fondo amarillo al pasar el mouse */
      color: white; /* Texto blanco al pasar el mouse*/
    }

    .custom-button img {
      vertical-align: middle;
      margin-right: 8px;
    }

    /* Estilos responsivos para pantallas pequeñas */
    /* Estilos responsivos para pantallas pequeñas */
    @media (max-width: 768px) {
      .buttons-container {
        display: grid; /* Cambiar a grid en móviles */
        grid-template-columns: repeat(2, 1fr); /* Dos columnas de igual ancho */
        gap: 10px; /* Espacio entre botones */
        width: 100%; /* Ocupar todo el ancho disponible */
        padding: 0 10px; /* Añadir padding para evitar que toquen los bordes */
        box-sizing: border-box; /* Incluir padding en el ancho total */
      }

      .button-row {
        display: contents; /* Eliminar la fila para que los botones se ajusten al grid */
      }

      .custom-button {
        width: 100%; /* Ocupar todo el ancho de la celda */
        max-width: none; /* Eliminar el límite de ancho máximo */
        box-sizing: border-box; /* Incluir padding en el ancho total */
        text-align: center; /* Centrar el texto dentro del botón */
      }
    }

    /* Pie de página */
    footer {
      width: 80%; /* Ancho del 100% para evitar desbordamiento */
      margin: 0 auto; /* Centrar el pie de página */
      border: 1px solid white; /* Borde blanco de 1 píxel */
      padding: 10px;
      text-align: center;
      background-color: rgba(27,30,152,0.4);
      color: white;
      transition: margin-top 0.3s; /* Transición suave */
      box-sizing: border-box; /* Incluir padding y border en el tamaño total */
      position: relative; /* Cambiado a relativo */
    }

    .footer-content {
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
    }

    .footer-section {
      flex: 1;
      margin: 5px;
      white-space: nowrap; /* Evitar que el texto ocupe más de una línea */
      font-family: 'Neuron', Arial, sans-serif; /* Aplicar la fuente Neuron */
    }

    .footer-label {
      color: #E5B22E; /* Amarillo quemado */
    }

    /* Estilos responsivos para el pie de página */
    @media (max-width: 768px) {
      /*footer {
        width: 100%; /* Ancho del 100% para móviles */
      /*}*/
    footer {
        position: fixed; /* Fijar el footer en la parte inferior */
        bottom: 0; /* Pegar al borde inferior */
        left: 0;
        width: 100%; /* Ocupar todo el ancho */
        background-color: rgba(27, 30, 152, 0.4); /* Color de fondo */
        z-index: 999; /* Asegurar que esté por encima del contenido */
        padding: 10px; /* Espaciado interno */
        box-sizing: border-box; /* Incluir padding en el ancho total */
      }
      .footer-content {
        flex-direction: column;
        align-items: center;
      }

      .footer-section {
        margin: 5px 0;
      }
    }

    /* Estilos para la ventana emergente (modal) */
    .modal {
      display: none; /* Oculto por defecto */
      position: fixed;
      z-index: 1002; /* Asegurar que esté por encima de todo */
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.8); /* Fondo oscuro semi-transparente */
      /*display: flex; /* Flexbox para centrar el contenido */
      justify-content: center; /* Centrar horizontalmente */
      align-items: center; /* Centrar verticalmente */
    }

    .modal-content {
      background-color: white;
      padding: 20px;
      border-radius: 10px;
      position: relative;
      width: 90%;
      max-width: 800px; /* Ancho máximo del modal */
      text-align: center; /* Centrar el contenido */
    }

    /* Estilos específicos para la ventana modal del video */
  .video-modal-content {
    background-color: transparent; /* Fondo transparente */
    padding: 0; /* Eliminar el padding */
    box-shadow: none; /* Eliminar la sombra */
  }

    .close-modal {
  position: absolute;
  top: 10px;
  right: 15px;
  width: 30px;
  height: 30px;
  background-color: #555; /* Color de fondo del círculo */
  border-radius: 50%; /* Hace que el botón sea circular */
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  z-index: 1002; /* Asegurar que esté por encima de otros elementos */
}

.close-modal:hover {
  background-color: #333; /* Color más oscuro al pasar el mouse */
}

.close-icon {
  color: white; /* Color de la "X" */
  font-size: 16px;
  font-weight: bold;
}

    #about-modal .modal-content {
      background-color: rgba(255, 255, 255, 0.9); /* Fondo blanco con 70% de opacidad */
      padding: 30px;
      border-radius: 10px;
      position: relative;
      width: 90%;
      max-width: 800px;
      max-height: 80vh; /* Altura máxima del modal (80% del viewport) */
      overflow-y: auto; /* Habilitar barra de desplazamiento vertical */
      text-align: left; /* Alinear el texto a la izquierda */
    }

    #about-modal h2 {
      color: #333; /* Color del título */
      margin-bottom: 20px; /* Espacio debajo del título */
    }

    #about-modal h3 {
      color: #555; /* Color de los subtítulos */
      margin-top: 20px; /* Espacio encima de los subtítulos */
    }

    #about-modal p {
      font-family: 'neuron';
      font-weight: 100;
      color: #666; /* Color del texto */
      line-height: 1.6; /* Espaciado entre líneas */
    }
    /* Ajustes para dispositivos móviles */
    @media (max-width: 768px) {
      #about-modal .modal-content {
        padding: 20px; /* Reducir el padding en móviles si es necesario */
      }
    }


    iframe {
      width: 100%;
      height: 400px; /* Altura del iframe */
      border: none;
      border-radius: 5px;
    }

    video {
    width: 100%;
    height: auto;
    max-width: 560px; /* Ajustar el tamaño del video */
  }

  #activate-sound {
    display: block;
    margin: 10px auto;
    padding: 10px 20px;
    background-color: #E5B22E; /* Amarillo quemado */
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-family: 'Neuron', Arial, sans-serif;
  }

  #activate-sound:hover {
    background-color: #d49c1e; /* Color más oscuro al pasar el mouse */
  }