/*
 * step-stack.css — la piel MÍNIMA de la pila de pasos.
 *
 * Aquí vive sólo el MECANISMO: qué pantalla ocupa la caja, cómo entra, cómo sale
 * y qué pasa cuando el sistema pide menos movimiento. Ni un color, ni un tamaño
 * de letra, ni un espaciado: eso es del tema (`reglas/contrato-base.md` §14).
 *
 * Por qué `visibility` y no sólo `opacity`: una pantalla oculta no puede seguir
 * siendo tabulable ni la puede leer un lector de pantalla. `visibility: hidden`
 * la saca de las dos cosas.
 *
 * ⚠️ Y por qué NO va dentro de la transición, que es el defecto que tuvo esta
 * hoja durante media hora: se declaró `visibility 0s linear <duración>` para no
 * cortar la salida a la mitad, y ese retardo se aplica **también a la vuelta**.
 * Resultado: la pantalla que salía terminaba su viaje y se quedaba **visible
 * 320 ms de más, a la derecha y fuera de la tarjeta**. Se veía en una captura y
 * el banco de móvil decía OK las dos veces, porque mide desbordamiento y aquello
 * era un elemento absoluto tapado por su propio contenedor... salvo que no lo
 * tapaba. La visibilidad la manda la CLASE, y la clase la quita el JavaScript
 * justo cuando la transición termina: un solo dueño, sin retardos que adivinar.
 *
 * Por qué NO hay `opacity` en la transición: el desplazamiento es la señal. Un
 * fundido encima la debilita — y con fundido cruzado las dos preguntas se ven a
 * la vez, que es justo el defecto que esta pieza cierra.
 */

/*
 * 🔴 EL COLCHÓN, y sale de un defecto que Adán vio usando el producto.
 *
 * El recorte es imprescindible —es lo que hace que una pantalla entre desde fuera
 * sin ensanchar la página— pero recorta TODO lo que sobresalga, incluido lo que
 * un tema pinte legítimamente al borde: un `:hover` que crece, una sombra, el
 * anillo de foco del navegador.
 *
 * Medido el 2026-08-26 en producción, forzando el estado hover: con
 * `transform: scale(1.02)` la primera tarjeta de la fila empezaba en x 51 con su
 * contenedor en x 53, y la última acababa en 717 con el contenedor en 715. **Dos
 * píxeles por cada lado, cortados.** En palabras de Adán: *«el efecto hover hace
 * que se oculte parte del card»*.
 *
 * ⚠️ Y el banco de móvil decía OK: mide lo que se sale de la PANTALLA, no lo que
 * un ancestro recorta cuando el elemento sigue dentro del viewport. Segundo hueco
 * del instrumento en el mismo día, y otra vez lo encontró mirar, no medir.
 *
 * El arreglo es un colchón dentro del área recortada, compensado con margen
 * negativo para que el ancho visible no cambie ni un píxel. `position: absolute`
 * se resuelve contra el *padding box*, así que las pantallas siguen ocupando
 * exactamente el mismo sitio y `translateX(100%)` sigue sacándolas enteras.
 *
 * No se resuelve quitando el `overflow` fuera de la transición: las pantallas que
 * esperan viven en `translateX(100%)` y, sin recorte, ensancharían el documento
 * — cambiaríamos un borde cortado por scroll horizontal en toda la página.
 *
 * `--step-stack-bleed` lo ajusta un tema cuyo efecto sobresalga más.
 */
.step-stack {
    position: relative;
    overflow: hidden;
    padding-inline: var(--step-stack-bleed, 4px);
    margin-inline: calc(-1 * var(--step-stack-bleed, 4px));
    transition: height var(--step-stack-duration, 320ms) var(--step-stack-ease, cubic-bezier(.16, 1, .3, 1));
}

.step-stack__screen {
    position: absolute;
    inset: 0 0 auto 0;
    width: 100%;
    visibility: hidden;
    transform: translateX(100%);
    pointer-events: none;
    transition: transform var(--step-stack-duration, 320ms) var(--step-stack-ease, cubic-bezier(.16, 1, .3, 1));
}

/* La actual es la única en el flujo: es ella quien da su altura al contenedor. */
.step-stack__screen.is-current {
    position: relative;
    visibility: visible;
    transform: none;
    pointer-events: auto;
}

/* La que sale sigue visible mientras se va — el ancho ENTERO, así que en ningún
   instante se ven dos preguntas a la vez. */
.step-stack__screen.is-leaving {
    visibility: visible;
}

/* El instante en que se coloca la que entra en su punto de partida: sin
   transición, o el navegador funde los dos estados en un fotograma y no hay nada
   que animar. */
.step-stack__screen.is-priming {
    transition: none;
}

/*
 * Quien pide menos movimiento no recibe menos producto: recibe el mismo cambio
 * de pantalla, instantáneo. Se anula también la altura, porque una caja que
 * crece animada es exactamente el tipo de movimiento que molesta a quien lo pide
 * (WCAG 2.3.3).
 */
@media (prefers-reduced-motion: reduce) {
    .step-stack,
    .step-stack__screen {
        transition: none;
    }
    .step-stack__screen {
        transform: none;
    }
}