/* =========================================================================
   propuesta-hibrida.css — Empalme entre la cabecera "Disrupción" y el paseo
   "Fable" (Impacto). NO redefine estética: solo resuelve la convivencia de
   ambos sistemas (header fijo de Disrupción + anclas + visor sticky del paseo).
   Carga DESPUÉS de propuesta-disrupcion.css y propuesta-impacto.css.
   ========================================================================= */

/* 1 · El header de Disrupción es position:fixed (~88px de alto). Al saltar a
   una ancla desde el raíl o desde "Empieza el paseo", el destino debe quedar
   por debajo del header y no oculto tras él. */
.v-hibrida section[id],
.v-hibrida [id^="modulo-"] { scroll-margin-top: 96px; }

/* 2 · Visor fijo del paseo (solo escritorio): bajarlo bajo el header fijo para
   que la barra de título de la "ventana" no quede tapada. */
@media (min-width: 981px) {
  .v-hibrida .i-paseo-visor { top: 96px; height: calc(100vh - 96px); }
}

/* 3 · ENC-NUE-3 (Nai): enlace "¿Cómo instalar una demo?" bajo el botón de
   descarga del hero. Discreto, sobre el fondo oscuro de la zona Disrupción.
   El margen negativo lo acerca a los botones (el .d-hero__cta deja 30px). */
.v-hibrida .d-hero__howto {
  margin: -16px 0 26px;
  font-size: .96rem;
  color: var(--d-on-dark-soft);
}
.v-hibrida .d-hero__howto a {
  color: var(--d-cyan-300, #8fd6f2);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: color var(--t-fast);
}
.v-hibrida .d-hero__howto a:hover { color: #fff; }
.v-hibrida .d-hero__howto a:focus-visible {
  outline: 3px solid var(--d-cyan-300, #8fd6f2); outline-offset: 3px; border-radius: 4px;
}