/* ============================================================================
   Mattes 2.0 — Landing de propietario (maqueta 2.2 · FP1·01b)
   Reutiliza de home.css: hero (.mts-hero), banda oscura (.mts-props),
   razones (.mts-razones) y tres pasos (.mts-pasos). Aquí solo lo propio.
   ========================================================================== */

/* Hero: sin buscador, dos botones y señales del propietario */
.mts-hero--landing {
  min-height: 560px;
}

.mts-hero--landing .mts-hero__contenido {
  max-width: 640px;
  padding-bottom: 120px;
}

.mts-hero--landing .mts-hero__sub {
  max-width: 560px;
}

.mts-hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 30px;
}

/* Botón secundario sobre foto: borde blanco (mts-btn--secundario es negro) */
.mts-hero__cta .mts-btn--claro {
  border: 1.5px solid rgba(255, 255, 255, 0.85);
  color: var(--gris-0);
}

.mts-hero__cta .mts-btn--claro:hover {
  background: rgba(255, 255, 255, 0.14);
}

/* Banda oscura: en la landing va pegada al hero */
.mts-landing__banda {
  padding-top: 56px;
}

/* Razones sobre banda gris */
.mts-landing__razones {
  margin-top: 56px;
  padding: 48px 0 40px;
  background: var(--surface-alt);
}

.mts-landing__razones .mts-razones {
  padding-top: 0;
}

/* Tres pasos: nota bajo la tarjeta (además de la del encabezado) */
.mts-landing__pasos {
  margin-top: 40px;
  padding-bottom: 56px;
}

.mts-landing__pasos .mts-pasos__nota--pie {
  margin-top: 18px;
  max-width: none;
  text-align: left;
}

@media (max-width: 760px) {
  .mts-hero--landing {
    min-height: 0;
  }

  .mts-hero--landing .mts-hero__contenido {
    padding-bottom: 30px;
  }

  /* El salto fijo del título es para escritorio; en móvil fluye */
  .mts-hero--landing .mts-hero__titulo br {
    display: none;
  }

  .mts-hero__cta {
    flex-direction: column;
    align-items: stretch;
  }

  .mts-landing__razones {
    margin-top: 44px;
    padding: 40px 0 32px;
  }

  .mts-landing__pasos {
    margin-top: 32px;
    padding-bottom: 44px;
  }
}