/* BOTON HAMBURGUESA PREMIUM SIN RECUADRO */

.menu-toggle{
  position:fixed;
  top:14px;
  left:14px;
  width:40px;
  height:40px;
  border:none;
  background:transparent;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:6px;
  cursor:pointer;
  z-index:2000;
  box-shadow:none;
  padding:0;
  transition:transform .2s ease, opacity .2s ease;
}

.menu-toggle:hover{
  transform:scale(1.04);
}

.menu-toggle span{
  width:28px;
  height:2px;
  background:#d4af37;
  border-radius:999px;
  display:block;
  box-shadow:0 0 6px rgba(212,175,55,.25);
  transition:all .25s ease;
}

/* MENU LATERAL */

.side-menu{
  position:fixed;
  top:0;
  left:-340px;
  width:320px;
  max-width:88%;
  height:100%;
  background:rgba(10,10,10,.78);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  color:#fff;
  z-index:2200;
  transition:left .35s ease;
  overflow:auto;
  box-shadow:10px 0 30px rgba(0,0,0,.32);
  border-right:1px solid rgba(212,175,55,.18);
}

.side-menu.active{
  left:0;
}

.side-menu-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:18px;
  background:linear-gradient(135deg,rgba(212,175,55,.18),rgba(116,76,0,.10));
  position:sticky;
  top:0;
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(255,255,255,.08);
}

.side-menu-header-left{
  display:flex;
  align-items:center;
  gap:10px;
}

.side-menu-header h3{
  font-size:1.08rem;
  color:#f3d77a;
  letter-spacing:.4px;
  margin:0;
}

.close-menu{
  background:transparent;
  border:none;
  color:#fff;
  font-size:30px;
  cursor:pointer;
  line-height:1;
  transition:transform .2s ease, color .2s ease, opacity .2s ease;
}

.close-menu:hover{
  color:#d4af37;
  transform:scale(1.08);
}

/* BUSCADOR */

.menu-search-wrap{
  padding:14px 16px;
  border-bottom:1px solid rgba(255,255,255,.08);
  background:rgba(21,21,21,.72);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}

.menu-search{
  width:100%;
  padding:12px 14px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(34,34,34,.86);
  color:#fff;
  font-size:.92rem;
  outline:none;
  transition:border-color .2s ease, box-shadow .2s ease, background .2s ease;
}

.menu-search::placeholder{
  color:rgba(255,255,255,.55);
}

.menu-search:focus{
  border-color:#d4af37;
  box-shadow:0 0 0 3px rgba(212,175,55,.12);
  background:rgba(40,40,40,.95);
}

/* NAVEGACION */

.side-menu-nav,
.side-menu nav{
  padding-bottom:18px;
}

.side-menu nav a,
.side-menu-nav a{
  display:block;
  padding:14px 18px;
  border-bottom:1px solid rgba(255,255,255,.07);
  font-weight:700;
  color:#f5f5f5;
  transition:background .2s ease, color .2s ease, padding-left .2s ease;
}

.side-menu nav a:hover,
.side-menu-nav a:hover{
  background:rgba(255,255,255,.06);
  color:#d4af37;
  padding-left:22px;
}

.side-menu nav a.submenu-link,
.side-menu-nav a.submenu-link{
  color:rgba(255,255,255,.82);
  font-weight:600;
  font-size:.95rem;
}

/* FONDO OSCURO */

.menu-overlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.46);
  backdrop-filter:blur(2px);
  -webkit-backdrop-filter:blur(2px);
  opacity:0;
  visibility:hidden;
  transition:.3s ease;
  z-index:2100;
}

.menu-overlay.active{
  opacity:1;
  visibility:visible;
}

/* SCROLL DEL MENU */

.side-menu::-webkit-scrollbar{
  width:8px;
}

.side-menu::-webkit-scrollbar-thumb{
  background:rgba(212,175,55,.35);
  border-radius:999px;
}

.side-menu::-webkit-scrollbar-track{
  background:rgba(255,255,255,.04);
}

/* RESPONSIVE */

@media (max-width:768px){

  .menu-toggle{
    width:36px;
    height:36px;
    top:10px;
    left:10px;
    gap:5px;
  }

  .menu-toggle span{
    width:26px;
    height:2px;
  }

  .side-menu{
    width:300px;
    left:-320px;
  }

}