header {
  position: fixed; /* <--- AQUÍ ESTÁ EL CAMBIO CLAVE */
  top: 0;
  left: 0;
  width: 100%; /* Obligatorio para que no se encoja */
  box-sizing: border-box; /* Para que el padding no rompa el ancho */
  background-color: rgba(24, 26, 28, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.3);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  padding: 0px 7%;
  display: flex;
  align-items: center;
  justify-content: space-around;
  z-index: 999;
}
header label { cursor: pointer; display: none; }
header .logo { font-weight: bolder; font-size: 25px; color: rgb(254, 206, 26); }
header .logo img { width: 150px; }
header .main__navbar ul { list-style: none; margin: 0; }
header .main__navbar ul li { position: relative; float: left; padding: 15px 10px 15px 10px; }
header .main__navbar ul li a {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  position: relative;
  text-decoration: none;
  text-transform: uppercase;
  font-size: 15px;
  color: white;
  padding: 7px 13px;
  display: flex;
  transition: 0.3s;
  border-width: 1px;
  border-style: solid;
  border-color: transparent;
}
header .main__navbar ul li a:hover { border-style: solid; border-color: rgb(254, 206, 26); }
header .main__navbar ul li a:active { background-color: rgb(254, 206, 26); color: #181a1c; }
header .main__navbar ul li a img { margin-left: 5px; padding: 0; }
header .main__navbar ul li .languaje-icon { border: 1px solid transparent; }
header .main__navbar ul li .languaje-icon:hover { border-style: solid; border-color: #181a1c; }
header .main__navbar ul li .languaje-icon:active { background-color: #181a1c; }
header .main__navbar ul li .languaje-icon img { position: relative; width: 25px; height: auto; vertical-align: middle; }
header .main__navbar ul li ul {
  display: none;
  position: absolute;
  left: 0;
  padding: 0;
  padding-bottom: 2px;
  margin: 0;
  width: 190px;
  background-color: rgba(24, 26, 28, 0.95);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-top: none;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}
header .main__navbar ul li ul li { width: 88%; display: flex; flex-direction: column; align-content: center; justify-content: center; align-items: center; padding-top: 3px; padding-bottom: 3px; }
header .main__navbar ul li ul li a { width: 90%; }
header .main__navbar ul li:hover > ul, header .main__navbar ul li:focus-within > ul { display: initial; }

#menu_bar { display: none; }

@media screen and (max-width: 1020px) {
  header { padding: 10px 20px; }
  header label { display: initial; font-size: 30px; }
  header .main__navbar {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    
    background-color: rgba(24, 26, 28, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    display: none;
  }
  header .main__navbar ul li { width: 90%; }
  header .main__navbar ul li ul { position: relative; width: 100%; box-shadow: none; border: none; background-color: transparent;}
  header .main__navbar ul li ul li ul { width: 100%; left: 0; }
  #menu_bar:checked ~ .main__navbar { display: initial; transition: 0.5s; }
}
.hidden { display: none; }

.chatbot { position: fixed; height: 20%; z-index: 10; right: 0; bottom: 0; width: auto; height: auto; }
.chatbot-button { height: 90%; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-end; }
.chatbot-button img { transition: all ease 0.5s; background-color: #fff; border-radius: 100%; height: 70px; width: 70px; border: 5px solid #fff; margin-right: 10px; }
.chatbot-button img:hover { cursor: pointer; transform: scale(1.1); filter: brightness(0.8); }

@media screen and (max-width: 1046px) { .chatbot { width: 35%; } }
@media screen and (max-width: 850px) { .chatbot { width: 40%; } }
@media screen and (max-width: 750px) { .chatbot { width: 45%; } }
@media screen and (max-width: 600px) { .chatbot { width: 55%; } }
@media screen and (max-width: 500px) { .chatbot { width: 90%; } }