.hp-hero{
  margin-top: -100px;        /* igual que l'alçada del header més el marge de la pastilla */
  position: relative;
  z-index: 1;
  min-height: 100vh;

  background-image: url("../img/hero-home.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  display: flex;
  align-items: flex-start;     /* important: no centrar verticalment */
  padding-top: 250px;
  padding-bottom: 80px;
}

/* Contingut */
.hp-hero__content{
  color: #fff;
  padding-left: 80px;
}

/* Eyebrow */
.hp-hero__eyebrow{
  font-family: "Montserrat", sans-serif;
  font-size: clamp(3.0rem, 4.6vw, 4.2rem);
  font-weight: 600;
  opacity: .9;
  display: inline-block;
}

/* Títol */
.hp-hero__title{
  font-family: "Montserrat", sans-serif;
  font-size: clamp(3.0rem, 4.6vw, 4.2rem);
  font-weight: 700;
}

.hp-hero__title span{
  font-weight: 700;
  opacity: .92;
}

/* Lead */
.hp-hero__lead{
  font-family: "Montserrat", sans-serif;
  font-size: 24px;
  line-height: 1.6;
  opacity: .92;
  max-width: 52ch;
  margin: 0 0 26px;
}

/* Llegibilitat sense enfosquir foto */
.hp-hero__eyebrow,
.hp-hero__title,
.hp-hero__lead{
  text-shadow: 0 2px 12px rgba(0,0,0,.25);
}

/* Botó */
.hp-hero__btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 0.35rem 3rem;
  border-radius: 999px;

  font-family: "Montserrat", sans-serif;
  font-weight: 700;
  font-size: .95rem;

  background: #ffffff;
  color: #000;
  text-decoration: none;

  box-shadow: 0 12px 30px rgba(0,0,0,.18);
}

.hp-hero__btn:hover{
  background: #f1f1f1;
}

/* Responsive */
@media (max-width: 992px){
  .hp-hero{
    min-height: 70vh;
    padding-top: 90px;
  }
}

@media (max-width: 576px){
  .hp-hero{
    padding-top: 78px;
    padding-bottom: 60px;
  }

  .hp-hero__title{
    font-size: 2.4rem;
  }
}