/* HEADER */
body {
    padding-top: 70px;
}

header{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  background:#0a0a0a;
  border-bottom:1px solid #1f1f1f;
  z-index:1000;
  height: 70px;
  align-items: center;
}

/* NAV */
nav{
  max-width:1200px;
  margin:0 auto;
  height:100%;
  padding:0 20px;

  display:flex;
  align-items:center;
  justify-content:space-between;

  position:relative; /* 🔥 IMPORTANTE */
}

/* LOGO */
.logo{
  font-size:22px;
  color:#de3902;
  font-weight:bold;
}

/* MENU */
.nav-right{
  position:absolute;
  left:50%;
  transform:translateX(-50%);
}

.nav-right ul{
  display:flex;
  gap:25px;
  list-style:none;
}

.nav-right a{
  color:#fff;
  text-decoration:none;
  font-size:15px;
  display:flex;
  align-items:center;
  gap:6px;
  transition:0.2s;
}

.nav-right a:hover{
  color:#de3902;
}

/* AÇÕES DIREITA */
.nav-actions{
  display:flex;
  align-items:center;
  gap:16px;
}
@media(min-width:901px){
  .nav-left{
    display:none;
  }
}

/* BOTÃO SACOLA */
.btn-fav{
  color:#fff;
  font-size:18px;
  transition:0.2s;
}

.btn-fav:hover{
  color:#de3902;
}

/* LOGIN */
.btn-login{
  background:#de3902;
  color:#ffffff;
  padding:8px 14px;
  border-radius:8px;
  text-decoration:none;
  font-weight:bold;
  font-size:14px;
  transition:0.2s;
}

.btn-login:hover{
  transform:scale(1.05);
}

/* USER */
#userArea{
  color:#fff;
  font-size:14px;
}

/* MENU MOBILE BTN */
.menu-toggle{
  display:none;
  background:none;
  border:none;
  color:#fff;
  font-size:20px;
  cursor:pointer;
}

/* OVERLAY */
#menuOverlay{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background:rgba(0,0,0,0.6);
  opacity:0;
  pointer-events:none;
  transition:0.3s;
  z-index:900;
}

#menuOverlay.active{
  opacity:1;
  pointer-events:all;
}

/* MENU DESKTOP */
.menu-desktop{
  display:flex;
  gap:40px;
  list-style:none;
}

.menu-desktop li a{
  display:flex;
  align-items:center;
  gap:6px;
}

/* ativo */
.menu-desktop a.active {
    color: red;
}

.menu-desktop a.active i {
    color: red;
}