@import url("https://fonts.googleapis.com/css2?family=Albert+Sans:wght@400;500;600;700;800&display=swap");

@font-face {
  font-family: "Garet";
  src: url("../fonts/Garet-Regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Garet";
  src: url("../fonts/Garet-Medium.woff") format("woff");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Garet";
  src: url("../fonts/Garet-Bold.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

.font-albert {
  font-family: "Albert Sans", sans-serif;
}

.font-garet {
  font-family: "Garet", sans-serif;
}

.hero-bg {
  position: relative;
  overflow: hidden;
}

.hero-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    102.56deg,
    #d6c6ff 9.87%,
    #c2efff 80.06%
  );
  z-index: -2;
}

@media (min-width: 768px) {
  .hero-bg::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 68%;
    height: 100%;
    background-image: url("../img/portada-descarga.webp");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    z-index: -1;
  }
}