/* ========================================
   MENÚ
======================================== */

.menu{
  position:sticky;
  top:0;
  z-index:1000;

  background:#000000;
  border-bottom:none;
}

/* ========================================
   CONTENEDOR
======================================== */

.menu-container{
  max-width:1200px;
  margin:0 auto;

  min-height:64px;

  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;

  gap:40px;

  padding:0 24px;
}

/* ========================================
   LOGO
======================================== */

.menu-logo{
  display:flex;
  align-items:center;

  margin-left:-18px;
}

.menu-logo img{
  width:158px;
  height:auto;
}

/* ========================================
   NAVEGACIÓN
======================================== */

.menu-nav{
  display:flex;
  align-items:center;
  justify-content:center;

  gap:48px;
}

.menu-nav a{
  position:relative;

  color:#f4f1ea;
  font-size:11px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.6px;

  padding:20px 0;

  transition:.3s;
}

.menu-nav a:hover,
.menu-nav a.active{
  color:#b89b63;
}

.menu-nav a.active::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:14px;

  width:34px;
  height:2px;

  background:#b89b63;

  transform:translateX(-50%);
}

.menu-cart{
  display:flex;
  align-items:center;
  gap:7px;

  color:#f4f1ea;
}

.menu-cart-icon{
  position:relative;
  font-size:22px;
  line-height:1;
}

.cart-count{
  position:absolute;

  top:-8px;
  right:-10px;

  width:18px;
  height:18px;

  border-radius:50%;

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

  background:#b89b63;
  color:#0d0d0d;

  font-size:10px;
  font-weight:700;
}

.cart-text{
  font-size:10px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.5px;
  opacity:.88;
}

/* ========================================
   ACCIONES
======================================== */

.menu-actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;

  gap:18px;
}

/* ========================================
   BOTÓN HAMBURGUESA
======================================== */

.menu-toggle{
  display:none;

  background:none;
  border:none;
  color:#f4f1ea;

  font-size:34px;
  cursor:pointer;
}

/* ========================================
   MENU - RESPONSIVE
======================================== */

@media (max-width:768px){

  .menu-container{
    min-height:58px;
    padding:0 16px;
    gap:14px;

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

  .menu-logo{
    margin-left:0;
  }

  .menu-logo img{
    width:125px;
  }

  .menu-nav{
    position:absolute;
    top:58px;
    left:0;

    width:100%;

    display:none;
    flex-direction:column;
    align-items:center;

    gap:0;

    background:#000000;
    padding:14px 0 16px;
  }

  .menu-nav.active{
    display:flex;
  }

  .menu-nav a{
    width:100%;
    text-align:center;

    font-size:12px;
    padding:12px 0;
  }

  .menu-nav a.active::after{
    display:none;
  }

  .menu-cart{
    gap:0;
    transform:scale(.9);
  }

  .cart-text{
    display:none;
  }

  .menu-toggle{
    display:block;
    transform:scale(.9);
  }

}