.help-hero {
  position: relative;
  display: flex;
  min-height: 660px;
  align-items: center;
  padding: 86px 8vw;
  overflow: hidden;
  isolation: isolate;
  background: #ead7b5;
}

.help-hero::before,
.help-hero::after {
  position: absolute;
  z-index: -1;
  content: "";
  inset: 0;
}

.help-hero::before {
  background: url("/assets/como-ayudar-hero.webp") center / cover no-repeat;
}

.help-hero::after {
  background: linear-gradient(90deg, #f6f2e9ed 0%, #f6f2e9df 35%, #f6f2e9b8 56%, #f6f2e935 100%),
    linear-gradient(0deg, #183c381a, #f6f2e911);
}

.help-hero-copy {
  width: min(100%, 920px);
  padding: 34px 42px 40px;
  border-radius: 8px;
  background: linear-gradient(90deg, #f6f2e9e8 0%, #f6f2e9d9 78%, #f6f2e900 100%);
}

.help-hero h1 {
  max-width: 900px;
  margin: 0 0 25px;
  font-family: 'Playfair Display', serif;
  font-size: clamp(3rem, 6vw, 6rem);
  font-weight: 500;
  letter-spacing: -.04em;
  line-height: 1.02;
}

.help-hero .lead {
  max-width: 650px;
  margin: 0;
}

/* Toda la tarjeta activa el mismo enlace visible, no solo el texto inferior. */
.help-grid article {
  position: relative;
  cursor: pointer;
  transition: transform .25s, box-shadow .25s;
}

.help-grid article:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px #183c3815;
}

.help-grid article:focus-within {
  outline: 2px solid var(--green);
  outline-offset: 3px;
}

.help-grid article > .text-link::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

.help-grid h2 {
  margin-top: 0;
}

@media (max-width: 850px) {
  .help-hero {
    min-height: 720px;
    align-items: flex-start;
    padding: 68px 7vw 76px;
  }

  .help-hero::before {
    background-position: 58% center;
  }

  .help-hero::after {
    background: linear-gradient(180deg, #f6f2e9f2 0%, #f6f2e9e4 47%, #f6f2e95c 100%),
      linear-gradient(0deg, #183c381a, #f6f2e911);
  }

  .help-hero-copy {
    padding: 20px 24px 34px;
    background: linear-gradient(180deg, #f6f2e9e8 0%, #f6f2e9d9 78%, #f6f2e900 100%);
  }

  .help-hero h1 {
    font-size: clamp(2.7rem, 12vw, 4rem);
  }
}