/* ==========================================================================
   Hero — base compartida por la home (.hero--full) y las subpáginas (.hero--page)
   ========================================================================== */

.hero {
  position: relative;
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 100%);
  color: var(--color-white);
  padding-bottom: 56px;
}

/* Remate inferior: curva orgánica en vez de un corte recto.
   bottom negativo para solapar la sección siguiente y tapar cualquier
   costura de subpíxel; por eso .hero ya no lleva overflow:hidden (lo
   recortaba y anulaba el solape). */
.hero__wave {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  width: 100%;
  height: 56px;
  pointer-events: none;
}

.hero__wave path {
  fill: var(--color-bg);
}

/* En la home, la curva entrega directo a la sección de áreas (fondo tintado) */
.hero--full .hero__wave path {
  fill: var(--color-bg-alt);
}

.hero__eyebrow {
  color: var(--color-accent);
}

.hero__title {
  color: var(--color-white);
  font-size: var(--fs-3xl);
}

.hero__subtitle {
  color: rgba(255, 255, 255, 0.86);
  font-size: var(--fs-md);
  max-width: 46ch;
  margin-top: var(--space-md);
}

.hero__actions {
  display: flex;
  gap: var(--space-sm);
  margin-top: var(--space-lg);
  flex-wrap: wrap;
}

/* ==========================================================================
   Hero full-bleed (home) — imagen de fondo a todo el ancho + texto superpuesto
   ========================================================================== */

.hero--full {
  display: flex;
  align-items: center;
  min-height: 640px;
}

.hero--full .container {
  position: relative;
  z-index: 1;
}

.hero--full .hero__content {
  max-width: 65%;
  padding-block: var(--space-2xl);
}

.hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

/* Sin background propio: si el PNG tiene zonas transparentes, se ve el
   degradé de .hero por debajo (sirve de fallback / refuerzo de marca). */
.hero__bg-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 75% center;
}

.hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--color-primary-dark) 92%, transparent) 0%,
    color-mix(in srgb, var(--color-primary) 60%, transparent) 45%,
    transparent 85%
  );
}

@media (max-width: 700px) {
  /* .hero__title es un <h1>, pero el font-size fijo de acá (fs-3xl) tiene
     más especificidad que el "h1 { font-size }" de typography.css — sin
     este override, el h1 del hero ignoraba por completo la reducción de
     tamaño mobile que sí aplica a cualquier otro h1 del sitio. */
  .hero__title {
    font-size: var(--fs-2xl);
  }

  .hero--full {
    min-height: 520px;
  }

  .hero--full .hero__content {
    max-width: 100%;
    padding-block: var(--space-xl);
  }

  .hero__overlay {
    background: linear-gradient(
      90deg,
      color-mix(in srgb, var(--color-primary-dark) 92%, transparent) 0%,
      color-mix(in srgb, var(--color-primary) 80%, transparent) 60%,
      color-mix(in srgb, var(--color-primary) 55%, transparent) 100%
    );
  }
}

/* ==========================================================================
   Hero de subpáginas (.hero--page) — bloque corto, centrado, sin imagen
   ========================================================================== */

.hero__grid {
  display: grid;
  grid-template-columns: 1fr;
  text-align: center;
  padding-block: var(--space-lg);
}

.hero--page {
  padding-block: var(--space-xl);
}

.hero--page .hero__title {
  margin-inline: auto;
}

.hero--page .hero__subtitle {
  margin-inline: auto;
}

.hero--page .hero__actions {
  justify-content: center;
}