/* ══════════════════════════════════════════════════════════════════════════════
   manifiesto-pagina.css — PÁGINA · Manifiesto (manifiesto.html) · Home D
   ──────────────────────────────────────────────────────────────────────────────
   Arquitectura §2.2: el texto completo, contado frase a frase con el scroll
   (momento emocional; no se reescribe).

   3/oct, con las referencias (Instrument, Raw Materials, Webflow; W7): seis
   bloques numerados con índice lateral. En cada bloque UNA frase ancla enorme
   (hasta 128 px) y el resto pequeño, con mucho aire. El ritmo nace del
   contraste de tamaño, no de cambiar de fuente. La palabra clave de cada ancla
   lleva el acento como subrayado grueso.
   ══════════════════════════════════════════════════════════════════════════════ */

.manifiesto-pagina__cuerpo {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: var(--espacio-48);
  align-items: start;
  margin-top: clamp(32px, 6vh, 64px);
}

/* ── Índice lateral ───────────────────────────────────────────────────────── */
.manifiesto-indice { position: sticky; top: 136px; }
.manifiesto-indice ol { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--espacio-4); }
.manifiesto-indice a {
  display: inline-block;
  padding: var(--espacio-4) var(--espacio-8);
  font-family: var(--tipografia-pixel);
  font-size: var(--tipo-dato);
  line-height: 1;
  color: var(--texto-terciario);
  text-decoration: none;
  transition: background .12s ease, color .12s ease;
}
.manifiesto-indice a:hover { color: var(--texto-principal); }
.manifiesto-indice a[aria-current] { background: var(--acento-base); color: var(--texto-principal); }
.manifiesto-indice a:focus-visible { outline: var(--trazo-foco) solid var(--acento-foco); outline-offset: 2px; }

/* ── Bloques ──────────────────────────────────────────────────────────────── */
.bloque {
  position: relative;
  padding: clamp(48px, 9vh, 112px) 0;
  border-top: var(--trazo-filete) solid var(--borde-filete);
}
.bloque:first-child { padding-top: 0; border-top: 0; }
.bloque__n {
  display: block;
  margin-bottom: var(--espacio-24);
  font-family: var(--tipografia-pixel);
  font-size: var(--tipo-dato);
  line-height: 1;
  letter-spacing: .04em;
  color: var(--texto-terciario);
}

.frase {
  max-width: 60ch;
  margin: 0 0 clamp(24px, 4vh, 40px);
  font-size: clamp(1.125rem, 1.6vw, 1.375rem);
  line-height: 1.6;
  color: var(--texto-secundario);
}
.frase:last-child { margin-bottom: 0; }

/* La ancla: una por bloque. 4/oct: baja a 72 y en caja alta (Display/Título de
   módulo), como la ajustó Christian. */
.frase--ancla {
  max-width: 22ch;
  margin: 0 0 clamp(32px, 6vh, 64px);
  font-family: var(--tipografia-display);
  font-size: clamp(2.25rem, 5vw, 4.5rem);
  line-height: 1;
  letter-spacing: -.018em;
  text-transform: uppercase;
  color: var(--texto-principal);
}

/* Objetos (4/oct): la gema y los rayos del hero, sueltos entre los bloques, con
   parallax de scroll (js/manifiesto-pagina.js escribe `translate`; solo
   transform). Decorativos: aria-hidden y sin eventos. Con movimiento reducido
   se quedan quietos. */
.manifiesto__objeto {
  position: absolute;
  z-index: 0;
  width: var(--ancho);
  height: auto;
  rotate: var(--rot, 0deg);
  image-rendering: pixelated;
  pointer-events: none;
  will-change: translate;
}
.manifiesto__objeto--gema-1 { right: -4%; top: 0;   --ancho: clamp(120px, 14.6vw, 211px); --rot: 172deg; }
.manifiesto__objeto--rayos-1 { left: clamp(-184px, -13vw, -120px); top: 48%; --ancho: clamp(96px, 9.7vw, 140px); --rot: 142deg; }
.manifiesto__objeto--rayos-2 { right: -6%; top: 22%; --ancho: clamp(120px, 14vw, 202px); --rot: 20deg; }
.manifiesto__objeto--gema-2 { right: 2%;  top: 62%; --ancho: clamp(120px, 14.6vw, 211px); --rot: 8deg; }
.manifiesto__objeto--rayos-3 { right: -2%; top: 46%; --ancho: clamp(96px, 9.7vw, 140px); --rot: 38deg; }
.bloque > :not(.manifiesto__objeto) { position: relative; z-index: 1; }
.frase--ancla em { font-style: normal; box-shadow: inset 0 -.22em 0 0 var(--acento-base); }

/* Remate secundario dentro del bloque: display, pero a la mitad. */
.frase--remate {
  max-width: 24ch;
  margin: clamp(40px, 7vh, 72px) 0 clamp(24px, 4vh, 40px);
  font-family: var(--tipografia-display);
  font-size: clamp(1.75rem, 3.2vw, 2.75rem);
  line-height: 1.05;
  letter-spacing: -.015em;
  color: var(--texto-principal);
}

.frase--lista { padding-left: 0; list-style: none; }
.frase--lista li { position: relative; padding-left: 28px; }
.frase--lista li::before { content: ''; position: absolute; left: 0; top: .62em; width: var(--pixel-pixel); height: var(--pixel-pixel); background: var(--acento-base); }

.frase--verbos {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espacio-12) var(--espacio-24);
  max-width: none;
  margin-bottom: clamp(40px, 6vh, 64px);
  font-family: var(--tipografia-pixel);
  font-size: clamp(28px, 3.4vw, 44px);
  line-height: 1;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--texto-principal);
}
.frase--verbos span { padding: var(--espacio-4) var(--espacio-8) 0; background: var(--acento-base); }

.frase--cierre { margin-top: clamp(64px, 10vh, 112px); }
.bloque .manifiesto__zigzag { margin-top: clamp(40px, 6vh, 64px); }

/* Entrada por scroll: solo transform/opacity (regla 14). Con movimiento reducido, nada. */
.manifiesto-pagina__texto [data-entra] { opacity: 0; translate: 0 18px; transition: opacity .55s ease, translate .55s cubic-bezier(.2, .8, .3, 1); }
.manifiesto-pagina__texto [data-entra][data-visible] { opacity: 1; translate: 0 0; }
.manifiesto-pagina--estatico [data-entra] { opacity: 1; translate: 0 0; transition: none; }

.manifiesto-pagina__cta { margin-top: clamp(56px, 9vh, 112px); display: flex; justify-content: center; }

@media (max-width: 900px) {
  .manifiesto__objeto { display: none; }
  .manifiesto-pagina__cuerpo { grid-template-columns: 1fr; gap: var(--espacio-24); }
  .manifiesto-indice { position: static; }
  .manifiesto-indice ol { grid-template-columns: repeat(6, auto); justify-content: start; gap: var(--espacio-8); }
  .frase--ancla { max-width: none; }
}