/* Estilos del header */

.header {
  position: fixed;
  top: 0;
  width: 100%;
  background: rgba(255, 255, 255, 0.80);
  box-shadow: 0px 148px 41px 0px rgba(0, 0, 0, 0.00), 0px 95px 38px 0px rgba(0, 0, 0, 0.01), 0px 53px 32px 0px rgba(0, 0, 0, 0.04), 0px 24px 24px 0px rgba(0, 0, 0, 0.06), 0px 6px 13px 0px rgba(0, 0, 0, 0.07);

  -webkit-backdrop-filter: blur(15px);
  backdrop-filter: blur(15px);
  height: 7rem;
  z-index: 1000;
}

.barra-navegacion {
  max-width: 1440px;
  margin: 0 auto;
  padding: 1rem 150px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.barra-navegacion .logo img {
  padding-top: 10px;
}

.menu-principal-class {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;

}

.menu-principal-class a {
  font-family: var(--fuente-principal);
  text-align: center;
  color: #005DFF;
  font-size: 1.2rem;
  font-weight: 700;
  line-height: normal;
  
}

.menu-principal-class li {
  position: relative;
  display: inline-block;
}

.barra-navegacion .menu-principal-class .menu .representamos-marca {
  background: var(--fondo-botones);
  border-radius: 10px;
  line-height: 0;
  padding: 10px 20px;
}

.barra-navegacion .menu-principal-class .menu .representamos-marca a {
  color: var(--blanco);
  letter-spacing: 0.5px;
}

/* Ocultar submenú por defecto */
.menu-principal-class li ul {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  list-style: none;
  padding: 10px;
  margin: 0;
  background: rgba(237, 237, 237, 0.7);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  box-sizing: border-box;
  min-width: 200px;
  z-index: 1000;
}

.menu-principal-class li ul::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  backdrop-filter: blur(15px);
  z-index: -1; /* Coloca el pseudo-elemento detrás del contenido */
  border-radius: 10px; /* Asegura que el borde sea redondeado */
}

/* Mostrar submenú al pasar el ratón sobre el elemento padre */
.menu-principal-class li:hover > ul {
  display: block;
}

.menu-principal-class li ul li {
  display: flex;
  align-items: center;
  padding: 10px;
  font-family: Helvetica;
  font-size: 13px;
  font-style: normal;
  font-weight: 400;
  line-height: 46px;
  color: #7a7a7a;
  white-space: nowrap;
}

.menu-principal-class li ul li a {
  padding: 0;
  color: #7a7a7a;
  text-decoration: none;
  display: flex;
  align-items: center;
}

.menu-principal-class li ul li a:hover {
  background-color: #f0f0f0;
}

.hamburger-menu {
  display: none;
  color: #191919;
}

@media only screen and (max-width: 815px) {
  .menu-principal-class {
    display: none;
  }

  .hamburger-menu {
    display: flex;
    gap: 1rem;
  }
  .barra-navegacion {
    margin: 0 10px;
  }
}

@media only screen and (max-width: 1282px) {
  .barra-navegacion {
    justify-content: space-between;
    padding: 1rem 0;
    margin: 0 20px;
  }
  .menu-principal-class a {
    padding: 0.5rem 5px;
    font-size: 1.2rem;
  }
}

@media only screen and (max-width: 923px) {
  .menu-principal-class a {
    padding: 0.5rem 1px;
    font-size: 1rem;
    gap: 0;
  }
}