.contacto-hero {
  position: relative;
  isolation: isolate;
  min-height: 560px;
  display: flex;
  align-items: center;
  overflow: hidden;
  background-color: #d6dfd2;
}

.contacto-hero::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  background: linear-gradient(90deg, #f6f2e9e8 0%, #f6f2e9d4 35%, #f6f2e995 56%, #f6f2e908 100%),
    linear-gradient(0deg, #183c3820, #f6f2e910),
    url("/assets/contacto-hero.webp") center 50% / cover no-repeat;
}

.contacto-hero-copy {
  position: relative;
  z-index: 1;
  width: min(880px, 100%);
  padding: 34px 42px 40px;
  border-radius: 8px;
  background: linear-gradient(90deg, #f6f2e9e9 0%, #f6f2e9dc 78%, #f6f2e900 100%);
}

.contacto-hero h1 {
  max-width: 820px;
}

@media (max-width: 850px) {
  .contacto-hero {
    min-height: 650px;
    align-items: flex-start;
  }

  .contacto-hero::before {
    background: linear-gradient(180deg, #f6f2e9f2 0%, #f6f2e9e6 48%, #f6f2e956 100%),
      url("/assets/contacto-hero.webp") 69% center / cover no-repeat;
  }

  .contacto-hero-copy {
    padding: 22px 24px 34px;
    background: linear-gradient(180deg, #f6f2e9ec 0%, #f6f2e9d8 82%, #f6f2e900 100%);
  }
}