body {
    background-image: url('/area-salto-2024/img/bg1.png');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center var(--background-top);
}

@media (max-width: 1440px) {
  body {
    background-position: center 0;
  }
}

.hero {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 35px;
  font-weight: 700;
  position: relative;
  top: calc(70vh);
  text-align: center;
  padding-bottom: 20px;
  top: calc(45vh);
  padding-inline: 1.5rem;
}

@media (min-width: 793px) {
  .hero {
    top: calc(45vh);
  }
}

@media (min-width: 936px) {
  .hero {
    top: calc(50vh);
  }
}

@media (min-width: 1200px) {
  .hero {
    top: calc(60vh);
  }
}

@media (min-width: 1500px) {
  .hero {
    top: calc(70vh);
  }
}

.hero img {
  max-width: 100%;
  user-select: none;
  pointer-events: none;
}
.hero * {
  font-size: var(--font-size-hero);
}

.hero__p1,
.hero__p2 span {
  color: var(--primary);
}

.hero__p2 {
  font-family: 'CervoNeue-BoldNeueItalic', sans-serif;
}

.hero section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  font-weight: 700;
}

.hero__section-2 p h1 {
  font-size: var(--font-size-hero-2);
}

@media (min-width: 1200px) {
  :root {
    --font-size-hero: 22px;
    --font-size-hero-2: 14px;
    --font-size-button: 18px;
  }
}

@media (min-width: 1440px) {
  :root {
    --font-size-hero: 25px;
    --font-size-hero-2: 16px;
    --font-size-button: 20px;
  }
}

@media (min-width: 1500px) {
  :root {
    --font-size-hero: 29px;
    --font-size-hero-2: 18.2px;
    --font-size-button: 22px;
  }
}
