body {
    margin: 0;
    font-family: Arial, sans-serif;
}
.menu-redes { 
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: space-around;
  align-items: center;
  background: #f8f9fa;
  z-index: 1000;
  padding: 10px 75px;

}
.top-bar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background: #f8f9fa;
    border-bottom: 1px solid #ccc;
    gap: 2px;
    padding: 10px 75px;
    z-index: 1000;
}
.logo_esru img {
    height: 80px;
    padding: 10px;
}
.redes_esru a {
    margin-left: 10px;
}
.iconos-sociales {
    display: flex;
    justify-content: center;
    gap: 3px;
    /* flex-wrap: wrap; */
}
.iconos-sociales img {
  filter: grayscale(1);
  transition: all 0.3s ease;
  border-radius: 50%;
  padding: 3px;
}
.icono.facebook img:hover {
  filter: grayscale(0);
  background-color: #1877F2; /* Azul Facebook */
}

.icono.twitter img:hover {
  filter: grayscale(0);
  background-color: #1DA1F2; /* Azul cielo Twitter */
}

.icono.instagram img:hover {
  filter: grayscale(0);
  background: radial-gradient(circle at 30% 30%, #feda75, #d62976, #962fbf); /* Degradado Insta */
}

.icono.youtube img:hover {
  filter: grayscale(0);
  background-color: #FF0000; /* Rojo YouTube */
}

.icono.blog img:hover {
  filter: grayscale(0);
  background-color: #f76707; /* Color neutro para blog */
}

.icono.espanol img:hover {
  filter: grayscale(0);
  background-color: #006847; /* Verde bandera mexicana */
}

.icono.english img:hover {
  filter: grayscale(0);
  background-color: #1864ab; /* Azul bandera USA */
}
.icono.active img {
  filter: grayscale(0);
  box-shadow: 0 0 5px 2px #00a651; /* efecto para idioma activo */
}





  .menu-principal {
    background-color: #eee;
    padding: 10px;
    text-align: center;
    font-weight: bold;
    position: fixed;
    width: 100%;
    top: 100px;
    left: 0;
    z-index: 999;
    text-transform: uppercase;
  }

  .menu-links {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap:2rem;
  }

  .menu-links a {
    margin: 0 10px;
    text-decoration: none;
    color: #003752;;
    font-weight:300;
  }

  .hamburger {
    display: none;
    font-size: 24px;
    cursor: pointer;
  }

  .Submenu {
    background-color: #003752;
    color: #fff;
    padding: 10px 15px;
    display: flex;
    justify-content: center;
    list-style-type: none;
    overflow-x: auto;
    white-space: nowrap;
    scrollbar-width: none;
    transition: all 0.3s ease-in-out;
    /* text-transform: uppercase; */
    position: fixed;
    top: 140px;
    left: 0;
    right: 0;
    z-index: 998;
    overflow: scroll;
  }

  .Submenu::-webkit-scrollbar {
    display: none;
  }

  .Submenu li a {
    font-size: 13px;
    color: white;
    text-decoration: none;
    padding: 3px 10px;
  }

  .Submenu li a:hover {
    cursor: pointer;
  }

  .hidden {
    display: none;
  }

  .contenido {
    margin-top: 180px;
    padding: 20px;
  }
  .menu-links > a,
  .menu-links > a:focus,
  .menu-links > a:active {
    text-decoration: none;
    outline: none;
  }
  .menu-links > a {
    text-decoration: none;
  }
  .menu-links a.active {
    text-decoration: underline;
    text-decoration-color:#003752;        /* Color opcional */
    text-decoration-thickness: 3px;     /* Grosor de la línea */
    text-underline-offset: 4px;         /* Distancia entre texto y línea */
    font-weight: bold;                  /* Opcional */
  }


  /* Responsive */
  @media (max-width: 1024px) {
    .menu-links > a,
    .menu-links > a:focus,
    .menu-links > a:active {
      text-decoration: none;
      outline: none;
    }
    .logo_esru img {
      height: 80px;
  }
    .menu-redes { 
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      background: #f8f9fa;
      z-index: 1000;
    }
    .menu-links {
      display: none;
      flex-direction: column;
      background-color: #003752; /* Fondo azul igual que submenu */
      padding: 0; /* quitamos padding para que líneas no se desalineen */
      align-items: flex-start;
      width: 100%;
    }
    .menu-links.show {
      display: flex;
    }
    .menu-links > a {
      color: white; /* texto blanco */
      padding: 5px 5px;
      width: 100%;
      border-top: 1px solid #ffffff33; /* línea separadora translúcida */
      text-transform: uppercase;
      font-weight: bold;
      text-decoration: none;
  }
  #toggleSubmenu {
    color: white;
  }
    
  .hamburger {
      display: block;
      position: absolute;
      right: 20px;
      top: 10px;
      z-index: 1001;
      color:white;
  }

    .menu-principal {
      padding-top: 40px;
      text-align: left;
      background-color: #003752; 
      top:120px;
    }

    .Submenu {
      position: static;
    flex-direction: column;
    gap: 0;
    padding: 0;
    background-color: #003752;
    width: 100%;
    margin-top: 5px;
    white-space: normal;
    }

    .Submenu li a {
      display: block;
      padding: 5px 10px;
      font-size: 14px;
      border-top: 1px solid #ffffff33;
    }
  }