/* hero.css — el contenedor de la escena y el texto encima. El texto va arriba, sobre el cielo,
   para no competir con el césped por contraste. */
.hero {
  position: relative;
  /* El encabezado es pegajoso y transparente: el hero se mete debajo para que el cielo llegue al borde */
  margin-top: calc(var(--encabezado-alto) * -1);
  padding-top: var(--encabezado-alto);
  min-height: min(92svh, 880px);
  display: grid;
  align-items: start;
  overflow: hidden;
  background: var(--kv-amanecer);
  border-radius: 0 0 var(--radio-xl) var(--radio-xl);
}
.hero__escena { position: absolute; inset: 0; pointer-events: none; }
/* La foto de estilo de vida llena el hero; la familia va a la derecha y el titular a la
   izquierda, así que el encuadre se ancla a la derecha para que al recortar en teléfono
   se conserve la gente y se pierda pared. */
.hero__foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 72% center; }

/* Velo entre la escena y el texto.
   Sin esto el titular cae justo encima de la casa y del follaje, y en pantalla
   ancha "Elegidos uno por uno" se leía sobre el tejado. Un velo del color del
   fondo —no una caja— deja que la escena siga viéndose y devuelve el contraste
   donde hace falta. En teléfono baja desde arriba, porque el texto va arriba y
   la casa abajo; desde 900 px entra desde la izquierda, que es donde vive el
   texto mientras la escena se ensancha. */
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(250, 248, 245, .92) 0%,
    rgba(250, 248, 245, .74) 38%,
    rgba(250, 248, 245, 0) 76%);
}
.hero__contenido {
  position: relative;
  z-index: 1;
  display: grid;
  gap: var(--esp-5);
  justify-items: start;
  padding-block: var(--esp-7) var(--esp-9);
}
.hero__titulo {
  font-size: var(--txt-4xl);
  letter-spacing: -.02em;
  /* En teléfono ocupa todo el ancho: con 18ch el bloque se hacía más ancho que la pantalla
     y la segunda línea se salía por la derecha. */
  max-width: 100%;
  display: grid;
  gap: var(--esp-4);
}
/* Segunda línea del titular: más chica y en acento, con el precio de entrada */
.hero__titulo-2 {
  font-size: var(--txt-2xl);
  font-weight: 500;
  letter-spacing: -.01em;
  color: var(--kv-lavanda-profunda);
}
.hero__apoyo {
  font-size: var(--txt-lg);
  color: var(--kv-tinta-suave);
  max-width: 36ch;
}
.hero__cta { margin-top: var(--esp-2); }

@media (min-width: 900px) {
  .hero__contenido { padding-block: var(--esp-9) var(--esp-10); }
  .hero__titulo { max-width: 18ch; }
  .hero::after {
    background: linear-gradient(
      100deg,
      rgba(250, 248, 245, .96) 0%,
      rgba(250, 248, 245, .88) 24%,
      rgba(250, 248, 245, .55) 44%,
      rgba(250, 248, 245, 0) 66%);
  }
}