:root{
  --catsi-black:   #1F1F1F;
  --catsi-vanilla: #EDE6D6;
  --catsi-white:   #FFFFFF;
}

/* Wrapper del header */
.hp-header{
  padding-top: 18px;
  position: relative;
  z-index: 50;
}

.hp-header .container{
  max-width: 1400px;        /* o 1320px */
  padding-left: 120px;
  padding-right: 120px;
}


/* Pastilla */
.hp-header__pill{
  position: relative;
  z-index: 51;
  background: var(--catsi-black);
  backdrop-filter: blur(6px);
  border-radius: 10px;

  height: 80px;
  padding: 0 5px;

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

}

/* Logo */
.hp-header__brand{
  display: flex;
  align-items: center;
  text-decoration: none;
}

.hp-header__brand img{
  height: 50px;
  width: auto;
  display: block;
}

/* Botó Accedir */
.hp-header__btn{
  border-radius: 999px;
  margin-right: 10px;
  padding: 0.35rem 1.8rem;
  font-weight: 600;
  font-size: .95rem;
  line-height: 1.1;

  color: var(--catsi-white);                      /* text (white) */
  border: 2px solid var(--catsi-white);           /* contorn (una mica més fort) */
  background: transparent;
  text-decoration: none;
}

.hp-header__btn:hover{
  background: rgba(237,230,214,.08);
  color: rgba(237,230,214,.98);
}

/* Responsive */
@media (max-width: 576px){
  .hp-header__pill{
    height: 56px;
    padding: 0 16px;
  }

  .hp-header__brand img{
    height: 22px;
  }

  .hp-header__btn{
    padding: .3rem 1.2rem;
    font-size: 13px;
  }
}