header{
  position: fixed;
  width: 90%;
  height: 80px;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: var(--colorNegro);
  color: var(--colorTextoClaro);
  padding: 1rem 5%;
  left: 50%; right: 50%;
  transform: translate(-50%, 15%);
  border-radius: 25px;
  border: solid var(--colorNegro);
  transition: all .50 ease;
  vertical-align: middle;
  font-size: 1.25rem;
}

header .logo{
  display: flex;
  align-items: center;
  vertical-align: middle;
  gap: 1rem;
  /* background-color: var(--colorBlanco);
  color: var(--colorTextoOscuro); */
  padding: .5rem 1rem .5rem 1rem;
  border-radius: 15px;
}

header .logo span{
  font-size: 1.5rem;
}

.logo i{
  /* color: var(--colorTextoClaro);
  background-color: var(--colorRojo); */
  padding: .5rem;
  font-size: 28px;
  border-radius: 12px;
}

.navbar{
  display: flex;
  gap: 1.5rem;
  transition: all .5s ease;
  justify-content: space-between;
}

.navbar a{
  transition: all .5s ease;
}

.navbar a:hover{
  color: var(--colorRojo)
}

.main{
  display: flex;
  align-items: center;
  vertical-align: middle;
  transition: all 1.5 ease-out;
  gap: 1.5rem;
}

.main #menu-nav{
  display: none;
  padding: .5rem .5rem;
  border-radius: 5px;
  border: solid var(--colorTextoClaro);
  cursor: pointer;
  transition: all .5s ease;
}

.main #menu-nav:hover,
.main #menu-nav:active{
  background-color: var(--colorBlanco);
  color: var(--colorTextoOscuro);
  transition: all .5s ease;
}

.main a{
  transition: all .5s ease;
}

.main a:hover{
  transform: translateX(10px);
  transition: .5s ease-in;
}

.main a{
  background-color: var(--colorRojo);
  padding: .5rem 1rem;
  border-radius: 0;
  color: var(--colorTextoClaro);
  border-radius: 5px;
  font-weight: bolder;
}

.main i{
  background-color: var(--colorNegro);
  border-radius: 100%;
  color: var(--colorTextoClaro);
  padding: .7rem;
  margin-right: 1rem;
}

@media screen and (max-width:950px) {

  header{
    top: 90%;
    left: 50%; right: 50%;
  transform: translate(-50%, 0%);
  z-index: 10000;
  }

  header .main #menu-nav{
    display:flex;
    position: relative;
  }

  .navbar{
    overflow: hidden;
    padding: 2rem 2rem;
    height: auto;
    z-index: 1;
    width: 5%;
    color: var(--colorTextoOscuro);
    background-color: var(--colorBlanco);
    border: solid var(--colorNegro);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    border-radius: 25px;
    transition: all .5s ease ;
    position: absolute;
    /* top: -45%; */
    top: 10%; right: -20%;
    transform: translate(0%, -100%);
    transition: all .5s ease;
    filter: blur(5px);
  }

  .navbar.active{
    padding: 2rem 2rem;
    height: auto;
    z-index: 1000;
    right: 0%;
    top: -10%;
    width: 75%;
    flex-direction: column;
    transition: all 1.5 ease;
    filter: blur(0);
  }

  .navbar.active a{
    padding: .5rem 1rem;
    border-radius: 10px;
    border: solid var(--colorBlanco);
  }

  .navbar.active a:hover,
  .navbar.active a:active{
    border: solid var(--colorNegro);
  }  

  .main .cta{
    display: flex;
    position: absolute;
    position: fixed;
    right: 0; left: -15%;
    top: -850%;
    width: fit-content;
    align-items: center;
    transform: translate(0%, -100%);
    transform: none;
    padding: .5rem 0 .5rem 1.5rem;
    font-size: 1rem;
    border: solid var(--colorNegro);
  }

  .main .cta span{
    display: none;
  }

  #btn-bt {
  bottom: 11%; 
  right: 5%; 
  z-index: 99; 
}

.vacio-nav-mob{
  height: 12.5vh;
  width: 100%;
  background-color: var(--colorNegro);
}
}

@media screen and (max-width:950px) {
  .navbar.active{
width: 100%;
}

  .navbar{
right: -140%;
}
}

@media screen and (max-width:450px) {
  .navbar{
width: 100%;
}

.navbar.active{
width: 100%;
}

  .navbar{
right: -120%;
}
}