:root{
    --color_blanco_salmon: #F9F2EC;
    --color_primario_claro: #DDE4D5;
    --color_tinta_oscura: #6A6459;
    --altura_header: 102px;
    --padding_left_right: .8rem;
    --ancho_maximo: 1200px;
}

@import url(styles.css);

.header-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-left: 20%;
  padding-right:16%;
  padding-top: 20px;

  @media screen and (max-width:768px) {
    & {
      position: relative;
      padding-left: 2%;
      justify-content: flex-start;
    }
  }   
}


.logo {
  display: flex;
  gap: 50px;
}

.logo .imagen2-logo {
  margin-top: 12px;
  @media screen and (max-width:768px) {
    & {
      margin-left: -3rem;
      width:90%
    }
  }
}

#abrir {
  
  @media screen and (max-width:768px) {
    & { 
      background-color: transparent;
      }
  }

}

.abrir-menu {
  display: none;
  width: 30px;
  background-color: transparent;
   @media screen and (max-width:768px) {
    & {      
      display: block;
      position: absolute;
      margin-left: 75%;
      padding: 2rem;
      margin-top: -3%;
      
      font-size: 2rem;
      cursor: pointer;
      border-radius: 0;
      box-shadow: 0;
      color: #6A6459;
    }
  }
}

.abrir-menu:hover {
  transform: scale(1.05);
}

.cerrar-menu {
  display: none;
  @media screen and (max-width:768px) {
    & {
      display: flex;
      flex-direction: column;
      align-items: end;
      margin-left: 77%;
      padding: 2rem;
      border: 0;
      font-size: 2rem;
      background-color: transparent;
      cursor: pointer;
      color: var(--color_tinta_oscura);
    }  
  }
}

.cerrar-menu:hover {
  transform: scale(1.05);
}

#servicios_responsive {
  @media screen and (min-width:768px) {
    & {
      display: none;
    }
  }
}

#servicios {
  @media screen and (max-width:768px) {
    & {
      display: none;
    }
  }
}

.nav {
  display: flex;
  padding-top: 20px;
  padding-left: 33%;

  @media screen and (max-width:768px) {
    & {
      opacity: 0;
      visibility: hidden;

      display: flex;
      flex-direction: column;
      align-items: end;
    }
  }
}

.nav.visible{
  @media screen and (max-width:768px) {
    & {
      opacity: 1;
      visibility: visible;
    }
  }
}

nav a {
  font-family: "Montserrat", sans-serif;
  font-size: 16px;
  font-weight: 400;  
}

.nav-list {
  list-style-type: none;
  gap: 1rem;
  display: flex;

  @media screen and (max-width:768px) {
    & {      
      position: absolute;
      display: block;
      text-align: right;
      top: 0;
      right: 0;
      background-color: #DDE4D5;
      width: 100%;
      height: 852px;
      padding: .88rem;
      line-height: 2.5rem;
      z-index: 1000;
    }
  }
}


/* NUEVO CÓDIGO-31 OCT */



/* TERMINA NUEVO CÓDIGO */


.nav-list li a {
  text-decoration: none;
  color: #0D0B07;
  @media screen and (max-width:768px) {
    & {     
      font-weight: 500
    }
  }
}

.nav-list a:hover {
  color: #7BA99E;
}

.nav-link a::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 2px;
  bottom: 0;
  left: 0;
  background-color: #7BA99E;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}

.nav-link:hover a::after{
  opacity: 1;
}