/* ══════════════════════════════════════════════════════════════════════════════
   manifiesto.css — MÓDULO 3 · Home D "Collage + píxel"
   ──────────────────────────────────────────────────────────────────────────────
   Es el módulo que desarma el miedo (producto/copy.md). Por eso aquí la piel se
   contiene: el lienzo sigue vivo detrás, pero no hay stickers, ni física, ni
   nada que compita con la lectura. El único gesto píxel es el mismo del hero —
   las frases se condensan por dither— y una regla de trama que abre el bloque.

   Fondo blanco a propósito: el lienzo de celdas no se interrumpe entre módulos.
   El "hueso" queda para un módulo que sí quiera despegarse del suelo.

   LOS TRES SELLOS (frame ajustado, 9/sep)
   La tercera frase ya no es una línea: son tres sellos negros que CAEN con el
   scroll, uno a uno, y se apilan encima del bloque — como quien estampa un
   documento tres veces. La escena se queda pegada arriba mientras caen; cuando
   el tercero ha caído, la página sigue. Medidas y giros de los sellos, del
   frame: T1 871×215 a 3,6° · T2 998×293 a −7,7° · T3 841×185 a 1,6°.

   El mecanismo es el mismo que el módulo 4: `position: sticky` para el anclado
   (CSS, sin coste), y ScrollTrigger solo para LEER el scroll y llevar los
   sellos (scrub). Nada de pin de ScrollTrigger.
   ══════════════════════════════════════════════════════════════════════════════ */

.manifiesto {
  position: relative;
  z-index: 1;
  /* ⚠️ EL PADDING SUPERIOR TIENE QUE LIBRAR LA CARD DEL HERO.
     La card está en `position: absolute` dentro del hero y se sale por abajo a
     propósito. Lo que sobresale es (alto − lo que asoma dentro del hero), y esa
     cuenta se hace con las mismas variables que usa la card (css/hero.css), no
     con un número copiado: si la card cambia de tamaño, este padding la sigue.
     Antes era un 153px fijo y el zigzag caía DENTRO de la card. */
  padding: calc(var(--card-alto) - var(--card-asoma) + clamp(96px, 14vh, 168px))
           var(--margen-hero)
           0;
  margin-bottom: clamp(96px, 15vh, 140px);   /* el aire hasta el módulo 4 */
  text-align: center;

  /* Cuánto scroll dura la caída de los tres sellos, con su pausa de lectura
     entre uno y otro (js/manifiesto.js reparte: cae, descansa, cae…). */
  --recorrido: 260vh;
}

/* ── La pista y la escena ──────────────────────────────────────────────────
   La pista mide una pantalla más el recorrido; la escena mide una pantalla y
   se queda pegada arriba mientras la pista pasa por debajo. Sin motion
   (.manifiesto--estatico) las dos miden lo que mide el contenido. */
.manifiesto__pista  { height: calc(100svh + var(--recorrido)); }
.manifiesto__escena {
  position: sticky;
  top: 0;
  height: 100svh;
  display: grid;
  align-content: center;
  justify-items: center;
  row-gap: clamp(28px, 4vh, 40px);   /* zigzag → pila de sellos */
  /* ⚠️ Los sellos arrancan a 2,6×: el T2 mide 2.600px de ancho mientras cae, y
     un transform SÍ cuenta para el desbordamiento de la página — daba scroll
     horizontal hasta que los tres estaban a 1×. Se recorta aquí, en el propio
     nodo pegado: `clip` no crea contexto de scroll, así que el sticky no se
     entera (un `overflow: hidden` en un ANCESTRO sí lo rompería). */
  overflow-x: clip;
}

.manifiesto--estatico .manifiesto__pista  { height: auto; }
.manifiesto--estatico .manifiesto__escena { position: static; height: auto; }
.manifiesto--estatico { padding-bottom: clamp(136px, 22vh, 248px); }

/* El bloque de info: fuera de la pista, con aire arriba. Cuando la escena se
   suelta, este bloque sube y empuja la pila de sellos hacia arriba. */
.manifiesto__cuerpo {
  max-width: 900px;
  margin: clamp(64px, 10vh, 120px) auto 0;
  padding-bottom: clamp(136px, 22vh, 248px);
}

/* Zigzag de píxel: doce cuadrados de 8px en damero, 96×16 (eran dieciséis de 6:
   el píxel pasó a 8 por la rejilla de 4; el ancho de 96 se conserva). Abre y CIERRA
   el bloque —uno arriba y otro abajo— como los corchetes de una cita. Era una
   regla de trama Bayer; en el frame ajustado es esto, y es mejor: la trama
   citaba al dither del display y competía con él, el zigzag no.

   Damero de 16px con las dos capas desfasadas media celda. Sin nodos. */
.manifiesto__zigzag {
  width: calc(var(--pixel-pixel) * 12);
  height: calc(var(--pixel-pixel) * 2);
  margin: 0 auto clamp(40px, 6vh, 64px);
  background-image:
    linear-gradient(45deg, var(--acento-base) 25%, transparent 25% 75%, var(--acento-base) 75%),
    linear-gradient(45deg, var(--acento-base) 25%, transparent 25% 75%, var(--acento-base) 75%);
  background-size: calc(var(--pixel-pixel) * 2) calc(var(--pixel-pixel) * 2);
  background-position: 0 0, var(--pixel-pixel) var(--pixel-pixel);
}
.manifiesto__escena > .manifiesto__zigzag { margin: 0; }
/* El de abajo cierra: mismo gesto, el margen al otro lado. */
.manifiesto__cuerpo > .manifiesto__zigzag:last-child {
  margin: clamp(40px, 6vh, 64px) auto 0;
}

/* ── Las tres frases ───────────────────────────────────────────────────────
   1 y 3 en Archivo Black: son las que rematan. La 2, larga y explicativa, en
   Inter — a tamaño de display sería un muro y sonaría a campaña.            */

.manifiesto__frase { margin: 0; }

.manifiesto__frase--display {
  font-family: var(--tipografia-display);
  font-weight: 400;              /* Archivo Black solo existe en Regular */
  line-height: 1.06;
  letter-spacing: -.02em;
  color: var(--texto-principal);
  /* Sin uppercase: en el hero grita porque es un titular; aquí es una voz. */
}

.manifiesto__frase--uno { font-size: clamp(26px, 3.9vw, 56px); }

.manifiesto__frase--cuerpo {
  max-width: 46ch;
  margin: clamp(28px, 4.4vh, 44px) auto;
  font-size: clamp(17px, 1.55vw, 22px);
  line-height: 1.6;
  color: var(--texto-secundario);
}

/* ── Los sellos ────────────────────────────────────────────────────────────
   Cada sello es un bloque de tinta con la frase en blanco, girado. En reposo
   los tres ocupan la misma celda de un grid (grid-area 1/1): se apilan solos,
   el último encima, sin posicionar nada a mano.

   Con motion, el contenedor se sale del flujo y se centra sobre la escena
   entera: es donde caen. Sin motion, se queda en el flujo entre la segunda
   frase y el CTA, y los tres se leen apilados — es texto real. */
.manifiesto__sellos {
  display: grid;
  place-items: center;
  margin: 0 auto;
  pointer-events: none;
}

.sello {
  grid-area: 1 / 1;
  display: grid;
  place-items: center;
  width: min(var(--ancho), 92vw);
  min-height: var(--alto);
  margin: 0;
  padding: 40px 56px;
  background: var(--superficie-tinta);
  color: var(--texto-sobre-tinta);
  font-family: var(--tipografia-display);
  font-weight: 400;
  font-size: clamp(26px, 3.61vw, 52px);   /* normalizado a Display/Titular (era 53.7) */
  line-height: 1.06;
  letter-spacing: -.01em;
  text-align: center;
  rotate: var(--giro);
  will-change: transform, opacity;
}
.sello--1 { --ancho: 871px; --alto: 215px; --giro: 3.6deg; }
.sello--2 { --ancho: 998px; --alto: 293px; --giro: -7.7deg; }
.sello--3 { --ancho: 841px; --alto: 185px; --giro: 1.6deg; }

/* El dither de este módulo va a 24px de tile (píxel de 6px): a 48px, como en
   el hero, el grano se comería una tipografía tres veces más pequeña. */
.manifiesto .linea__capa {
  -webkit-mask-size: 24px 24px;
          mask-size: 24px 24px;
}

/* ── Enlace al manifiesto completo ─────────────────────────────────────────
   Era un garabato; en el frame ajustado es el mismo botón sólido con sombra
   dura que el hero, el módulo 6 y la galería. Los estilos vienen de .cta
   (css/hero.css) — aquí solo su sitio. Sigue sin ser un CTA de participación:
   el copy avisa de que este módulo no apura. */
.manifiesto__cta { margin-top: clamp(36px, 5.5vh, 56px); }


@media (max-width: 620px) {
  .manifiesto { text-align: left; }        /* a este ancho, centrar parte la lectura */
  .manifiesto__zigzag { margin-left: 0; }
  .manifiesto__frase--cuerpo { margin-left: 0; margin-right: 0; }
  .sello { --alto: auto; padding: 22px 24px; text-align: center; }
  .manifiesto .linea__capa {
    -webkit-mask-size: 16px 16px;
            mask-size: 16px 16px;
  }
}

/* Regla 14: sin motion, las tres frases ya están ahí y sólidas. */
@media (prefers-reduced-motion: reduce) {
  .manifiesto .linea__capa { display: none; }
}