/* ══════════════════════════════════════════════════════════════════════════════
   pasos.css — MÓDULO 4 · "Cómo funciona" · Home D
   ──────────────────────────────────────────────────────────────────────────────
   Patrón aprobado (diseno/direccion-visual.md §5): split storytelling anclado —
   visual fija a la izquierda, los tres pasos scrollean a la derecha.

   La columna fija es LA MÁQUINA contando: el número de paso se rehace por dither
   cada vez que cambia, y tres celdas de 24px marcan dónde vas. Los pasos, a la
   derecha, son voz humana. Es la misma tensión del hero a otra escala.

   PANEL DE TINTA (frame "Ajustado", 25/ago)
   La mitad izquierda del módulo es un panel negro a sangre, del alto completo
   del módulo, y encima se ve LA RETÍCULA: celdas de 24px en gris, con opacidad
   dispar. Es la memoria del lienzo —el gris que dejan las pasadas del cursor—
   congelada y hecha textura. En el resto de la home la retícula solo existe al
   pasar; aquí se queda quieta, porque este módulo es la máquina explicando.

   La textura NO son 4.000 nodos: es un canvas que js/pasos.js pinta UNA vez
   (y otra al redimensionar). Cero coste por frame — regla 14.
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── La escena ─────────────────────────────────────────────────────────────
   El módulo es una ESCENA A PANTALLA COMPLETA partida por la mitad: tinta a la
   izquierda, papel a la derecha. La mitad de tinta se queda pegada arriba
   mientras los tres pasos suben por la derecha.

   Antes esto era un panel de alto fijo (2.307px, la medida del frame) con la
   columna de texto anclada dentro. No funcionaba: el panel se acababa antes que
   la columna, la columna seguía pegada arriba y el texto blanco se quedaba
   flotando sobre el fondo blanco, invisible. El frame medía ese alto porque en
   Figma no hay sticky que valga — era el dibujo de una escena, no su medida.

   Sin padding lateral en la sección: las dos mitades van a sangre y cada una se
   mete su propio margen por dentro. */

.pasos {
  position: relative;
  z-index: 1;
}

.pasos__interior {
  display: grid;
  grid-template-columns: 1fr 1fr;   /* mitad y mitad, exacto */
  align-items: start;
}

/* ── Mitad de tinta ────────────────────────────────────────────────────────
   `sticky` en vez del pin de ScrollTrigger: da el mismo patrón sin sacar nada
   del flujo ni recalcular alturas en cada scroll. Es CSS nativo, no tiene coste
   por frame y no puede desincronizarse.

   `align-self: start` es lo que hace que funcione: sin él, el grid estira la
   celda hasta el alto de la columna de pasos y `height: 100vh` no significa
   nada. */
.pasos__fijo {
  position: sticky;
  top: 0;
  align-self: start;
  height: 100svh;
  display: grid;
  align-content: center;            /* el texto, centrado en la escena */
  /* El texto arranca donde arrancaría en la columna de contenido de 1240. */
  padding-left: max(var(--margen-hero), calc((100vw - 1240px) / 2));
  padding-right: clamp(28px, 3.4vw, 64px);
  background: var(--superficie-tinta);
  overflow: hidden;                 /* la retícula no se sale de la mitad */
}

/* La textura, detrás de todo lo demás. */
.pasos__reticula { position: absolute; inset: 0; width: 100%; height: 100%; }
.pasos__fijo > :not(.pasos__reticula) { position: relative; z-index: 1; }

/* ── Mitad de papel ────────────────────────────────────────────────────────
   Los pasos arrancan 90px dentro de su mitad: en 1440 eso los pone en x=810,
   que es la medida del frame ajustado. */
.pasos__columna {
  padding-left: clamp(28px, 6.25vw, 90px);
  padding-right: max(var(--margen-hero), calc((100vw - 1240px) / 2));
}

/* Sobre el panel, la columna fija se pinta en blanco. */
.pasos__titulo {
  margin: 0 0 22px;
  font-family: var(--tipografia-display);
  font-weight: 400;
  font-size: clamp(32px, 3.61vw, 52px);   /* normalizado a Display/Titular (era 53) */
  line-height: .93;
  letter-spacing: -.018em;
  color: var(--texto-sobre-tinta);
  /* En el frame ajustado TODOS los títulos de módulo van en caja alta:
     es la voz del cartel, y rima con el display del hero. */
  text-transform: uppercase;
}

.pasos__bajada {
  max-width: 500px;
  margin: 0 0 clamp(28px, 4.6vh, 48px);
  font-size: clamp(16px, 1.35vw, 19px);
  line-height: 1.58;
  color: var(--texto-sobre-tinta-secundario);
}

/* ── El contador: la máquina lleva la cuenta ─────────────────────────────── */

.pasos__numero {
  position: relative;
  display: block;
  font-family: var(--tipografia-display);
  font-weight: 400;
  font-size: clamp(64px, 9vw, 128px);
  line-height: .92;
  letter-spacing: -.03em;
  color: var(--texto-sobre-tinta);
}
/* Tile de 32px (píxel de 8px): a este cuerpo, el grano del hero se pierde y el
   del manifiesto se ve sucio. */
.pasos__numero .linea__capa {
  -webkit-mask-size: 32px 32px;
          mask-size: 32px 32px;
}

.pasos__marcas {
  display: flex;
  gap: var(--pixel-paso);    /* paso de 48px = dos celdas del lienzo */
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
}

/* Cada marca es una celda del lienzo, del tamaño exacto de la retícula. */
.pasos__marca {
  position: relative;
  width: var(--pixel-paso);
  height: var(--pixel-paso);
  background: var(--pixel-marca-apagada);       /* gris de celda apagada sobre el panel */
}
.pasos__marca::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--acento-base);
  opacity: 0;
  transition: opacity .28s ease;
}
.pasos__marca[data-activa]::after { opacity: 1; }


/* ── Los pasos ─────────────────────────────────────────────────────────────
   Alto generoso a propósito: si los tres caben de golpe en pantalla, la
   columna fija no tiene contra qué quedarse quieta y el patrón no se lee. */

.pasos__lista {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Un paso por pantalla: cada uno ocupa el alto de la escena y se lee centrado
   frente a la mitad de tinta, que no se mueve. Es lo que hace que el contador
   de la izquierda cambie de uno en uno en vez de saltar. */
.paso {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100svh;
  padding: 0;
}

.paso__indice {
  margin: 0 0 6px;
  font-family: var(--tipografia-pixel);
  font-size: clamp(17px, 1.6vw, 21px);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--texto-terciario);
}

.paso__nombre {
  margin: 0 0 16px;
  font-family: var(--tipografia-display);
  font-weight: 400;
  font-size: clamp(30px, 3.6vw, 52px);
  line-height: .95;
  letter-spacing: -.02em;
  color: var(--texto-principal);
}

.paso__texto {
  max-width: 46ch;
  margin: 0;
  font-size: clamp(16px, 1.35vw, 19px);
  line-height: 1.58;   /* normalizado a Texto/Lectura 19/30 */
  color: var(--texto-secundario);
}
/* La garantía del anonimato va en negrita dentro del paso 3 (frame 9/sep). */
.paso__texto b { font-weight: 600; color: var(--texto-principal); }




/* ── Responsive ────────────────────────────────────────────────────────────
   Bajo 900px el split no cabe: se apila y el contador deja de tener sentido
   (no hay nada fijo contra lo que contar), así que cada paso lleva su número. */

@media (max-width: 900px) {
  /* Apilado no hay dos mitades que partir: la escena se deshace. La mitad de
     tinta se convierte en una banda normal arriba, con su textura, y los pasos
     van debajo sobre papel. Sin sticky: no hay contra qué quedarse quieto, y sin
     contador: no hay nada contra lo que contar. */
  .pasos           { padding: 0 0 clamp(64px, 10vh, 112px); }
  .pasos__interior { grid-template-columns: 1fr; }
  .pasos__fijo {
    position: relative;   /* relative, no static: el canvas de la textura se
                             posiciona contra este nodo */
    top: auto;
    height: auto;
    padding: clamp(56px, 9vh, 96px) var(--margen-hero) clamp(48px, 8vh, 80px);
  }
  .pasos__contador { display: none; }
  /* El margen de la bajada existía para separarla del contador; sin contador
     solo deja un hueco. */
  .pasos__bajada   { max-width: 46ch; margin-bottom: 0; }
  .pasos__columna  { padding: clamp(40px, 7vh, 72px) var(--margen-hero) 0; }
  .paso {
    min-height: 0;
    padding: clamp(26px, 4.5vh, 44px) 0;
    border-top: var(--trazo-filete) solid var(--borde-sutil);
  }
  .paso:first-child { border-top: 0; padding-top: 0; }
  .paso__indice::before {
    content: attr(data-numero) ' · ';
    color: var(--texto-acento-sobre-claro);
  }
}

@media (max-width: 620px) {
  .paso { padding: clamp(26px, 4.5vh, 40px) 0; }
}

/* Regla 14: sin motion, todo está en su sitio y la marca activa es la primera. */
@media (prefers-reduced-motion: reduce) {
  .pasos__numero .linea__capa { display: none; }
  .pasos__marca::after { transition: none; }
}