/*
 * AldeOn — Sección "Funciones" como scroll storytelling (fase
 * "storytelling", 2026-09-07). Solo se usa en index.html. Reutiliza
 * las clases .phone3d-* ya definidas en hero.css (mismo mockup de
 * móvil, cargar hero.css SIEMPRE antes que este archivo).
 */

/* position: relative — necesario para que el .mesh-bg (position:
   absolute, ver effects.css) de la pasada de pulido quede anclado a
   esta sección y no a todo el body. */
.story { position: relative; padding: 0; margin-top: var(--section-gap); }

.story-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: 56px;
}

.story-steps {
  display: flex;
  flex-direction: column;
}

.story-step {
  /* Reducido de 62vh — desde 2026-09-13 esta columna es solo el
     índice de capítulos (icono + título corto, sin párrafo, ver
     index.html), le sobraba alto pensado para cuando llevaba también
     el párrafo explicativo. */
  min-height: 40vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.story-step h3 { font-family: 'Nunito'; font-weight: 800; font-size: 1.5rem; margin: 2px 0 0; }

.story-phone-col { position: relative; }

.story-phone-sticky {
  position: sticky;
  /* Debajo de la barra de navegación sticky (68px de alto) + un poco
     de aire. */
  top: 96px;
  display: flex;
  justify-content: center;
}

@media (max-width: 900px) {
  /* En móvil no tiene sentido el sticky LATERAL (petición del
     usuario, 2026-09-07) — pasa a ser vertical: el móvil se queda
     centrado arriba mientras los bloques de texto pasan por scroll
     normal debajo. Para que el sticky tenga sitio donde "engancharse"
     hace falta que su columna sea tan alta como la de texto — en una
     sola columna eso ya no sale gratis con el stretch del grid (cada
     una pasaría a su propia fila), así que las dos comparten la MISMA
     celda (misma columna Y fila) superpuestas, y el texto empieza más
     abajo con padding-top para no quedar tapado por el móvil.
     Mismo motivo por el que esto NO funcionaba con un simple
     order:-1: sin celda compartida, la columna del móvil solo medía
     lo que el propio móvil ocupa (~430px) y el sticky no tenía scroll
     de sobra donde quedarse — se despegaba casi al instante. */
  .story-grid { grid-template-columns: 1fr; grid-template-rows: 1fr; gap: 0; }
  .story-phone-col,
  .story-steps { grid-column: 1; grid-row: 1; }
  .story-phone-col { z-index: 2; }
  .story-steps { padding-top: 520px; }
  .story-step { min-height: 30vh; }
}