/* ==========================================================================
   IRON ROUTE — EL ONBOARDING CABE SIEMPRE, EN CUALQUIER PANTALLA

   MEDIDO EN 1440×900:

     .ob-step   y 91..1083   →  992 px de contenido en 829 px de hueco
     .ob-cta-row  y 913..953  →  **13 px POR DEBAJO DEL BORDE**

   O sea que en un portátil normal el botón «Comenzar» está fuera de la
   pantalla. `elementFromPoint` sobre él devuelve `null`, que es la firma de
   «esto no existe para el ratón».

   Y ES LA TERCERA VEZ QUE ARREGLO ESTO. Primero fueron 1.122 px en 1.014.
   Después el teléfono, 1.683 px en 571. Ahora 992 en 829. Cada vez ajusté
   números para UNA pantalla y cada vez volvió en otra.

   Así que esta vez no se ajustan números: **se cambia la estructura.**

     · El cuerpo desplaza si hace falta. Nada queda inalcanzable, nunca,
       tenga la pantalla el alto que tenga.
     · La fila de acciones va PEGADA ABAJO (`position: sticky`). El botón
       principal está siempre a la vista aunque el texto de arriba no quepa.
       Es lo que hace cualquier onboarding comercial, y por esto: la salida
       no puede depender de que el contenido quepa.
     · Y encima se aprieta el aire, para que en la mayoría de pantallas no
       haga falta desplazar nada.

   La diferencia entre ajustar y estructurar: lo primero funciona en las
   pantallas que probé; lo segundo funciona también en las que no.

   NO TOCA EL TELÉFONO. Todo cuelga de `min-width: 481px`; el camino de
   `html.ir-ob-corto` —medido 5/5 en los cinco tamaños de móvil— se queda
   exactamente como está.
   ========================================================================== */

@media (min-width: 481px) {

  /* ── El cuerpo desplaza, y el paso deja de desbordar ────────────────── */
  .ob-body {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    /* `min-height: 0` es la parte que casi siempre se olvida: sin ella, un
       hijo de un contenedor flex NO puede encoger por debajo de su contenido
       y `overflow` no llega a activarse nunca. */
    min-height: 0;
  }

  .ob-step {
    /* `100dvh` y no `100vh`: en Safari `vh` incluye el trozo que tapa la
       barra de direcciones, y el último elemento queda debajo de ella. */
    max-height: calc(100dvh - var(--ob-header-h, 72px));
    box-sizing: border-box;
    padding-bottom: 4px;
  }

  /* ── La salida, siempre a la vista ──────────────────────────────────── */
  .ob-step .ob-cta-row {
    position: sticky;
    bottom: 0;
    z-index: 2;
    padding: 10px 0 8px;
    margin-bottom: 0;
    /* Un velo del propio fondo para que el texto que pasa por detrás no se
       lea a través de los botones. `transparent` no vale aquí: en Safari un
       degradado a `transparent` se interpola pasando por negro. */
    background: linear-gradient(to bottom,
                rgba(255, 255, 255, 0) 0%,
                var(--ob-cream, #F4F1EA) 22%,
                var(--ob-cream, #F4F1EA) 100%);
  }
  html[data-theme="dark"] .ob-step .ob-cta-row {
    background: linear-gradient(to bottom,
                rgba(3, 13, 28, 0) 0%,
                var(--ob-navy, #030D1C) 22%,
                var(--ob-navy, #030D1C) 100%);
  }

  /* ── Y el aire, apretado, para que casi nunca haga falta desplazar ──── */
  .ob-logo-wrap { margin-bottom: 6px; }
  .ob-h1        { line-height: 1.12; margin: 4px 0 6px; }
  .ob-lead      { margin: 0 0 10px; }
  .ob-caps      { margin: 0 0 10px; }
  .ob-caps > li { margin-bottom: 8px; }
  .ob-priv      { margin: 0 0 8px; }
  .ob-ver-nota  { margin: 4px 0 0; }
  .ob-trust     { margin-top: 10px; }
}

/* ── Portátiles bajos: ahí sí hace falta bajar la escala ──────────────────
   Un 1440×900 con la barra del navegador deja ~780 px reales. Se recorta la
   tipografía de exhibición, que es la que más alto ocupa por carácter, y no
   se toca el cuerpo — el suelo sigue siendo 12 px. */
@media (min-width: 481px) and (max-height: 960px) {
  .ob-h1        { font-size: clamp(22px, 3.2vh, 34px); }
  .ob-lead      { font-size: clamp(14px, 1.9vh, 17px); }
  .ob-logo-wrap img,
  .ob-logo-wrap svg { max-height: 64px; }
  .ob-caps > li { margin-bottom: 6px; }
}