/* ==========================================
   HEADER
========================================== */

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

  background:#fff;

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

  padding:14px 40px;

  border-bottom:1px solid #eee;
}


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

.header__logo a{
  display:flex;
  align-items:center;
}

.header__logo img{
  height:60px;
  width:auto;
  display:block;
  object-fit:contain;
}


/* ==========================================
   NAV
========================================== */

.header__nav{
  display:flex;
  align-items:center;
  gap:28px;
  
}

.header__nav a{
  text-decoration:none;
  font-size:15px;
  color:#222;

  position:relative;

  transition:color .2s ease;
  font-weight: 800;
}

.header__nav a:hover{
  color:var(--color-primario);
}


.header__nav a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px;

  width: 0%;
  height: 2px;
  background: var(--color-primario);

  transition: width 0.25s ease;
}

.header__nav a:hover::after {
  width: 100%;
}


/* ==========================================
   CARRITO
========================================== */

.nav-carrito{
  display:flex;
  align-items:center;
  gap:6px;
}

#contadorCarrito{
  background:var(--color-primario);
  color:#fff;

  font-size:12px;
  font-weight:600;

  padding:2px 7px;

  border-radius:20px;
}


/* ==========================================
   MOBILE
========================================== */

@media (max-width:768px){

  .header{
    padding:12px 20px;
  }

  .header__logo img{
    height:34px;
  }

  .header__nav{
    gap:16px;
  }

  .header__nav a{
    font-size:14px;
  }

}