/* =========================================================
   CAPITAL DJs — css/manifiesto.css · /manifiesto/ (2-oct-2026)
   El manifiesto consolidado de Alan, completo y sin cambiar una coma,
   como una revista: cada capítulo con su número romano y su título en
   Bodoni versales, las negritas como remates grandes y una Línea con
   folio entre capítulo y capítulo («— I · Todo el mundo quiere ser DJ»).
   - Lectura cómoda en el celular: Bodoni a 19 px o más, renglones de
     ~34 em y mucho aire (el token --sec-y de styles.css).
   - Movimiento con la API de motion.js (data-split, data-reveal, Líneas):
     un reveal por párrafo; con movimiento reducido, el modo suave (fundidos).
   - Temas: papel (portada), blanco, tinta, papel, blanco, tinta, papel y
     tinta (el cierre «PONEMOS ROLAS», gigante, con un vinilo que gira detrás);
     luego el footer, con su Línea (js/chrome.js).
   Depende de css/styles.css (tokens, .label, .display, .lc) y css/motion.css.
   ========================================================= */

/* ---------- portada ---------- */
.mani-hero {
  position: relative;
  padding: calc(clamp(40px, 9vh, 110px)) var(--gutter) calc(var(--sec-y) * .62);
  overflow: clip;
}
.mani-hero__in { position: relative; z-index: 1; max-width: var(--max); margin: 0 auto; }
.mani-hero__label { color: var(--fg-3); }
.mani-hero__title {
  /* «MANIFIESTO» cabe en un renglón de 320 a 1440 px (mide ~6.5 em de ancho en Bodoni versales) */
  font-size: min(14.2vw, 196px);
  line-height: .86; letter-spacing: -.012em;
  margin: 16px 0 0 -.04em;
}
/* índice: los seis capítulos */
.mani-toc { margin-top: clamp(44px, 6vw, 84px); max-width: 980px; }
.mani-toc__list {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(28px, 4vw, 64px);
  border-top: 1px solid var(--fg);
}
.mani-toc__list li { border-bottom: 1px solid var(--rule); }
.mani-toc__list a {
  display: flex; align-items: baseline; gap: 16px;
  padding: 16px 0 15px;
  text-decoration: none; color: var(--fg);
  font: 400 clamp(17px, 1.35vw, 20px)/1.3 var(--serif);
  transition: transform .5s var(--ease-out), color .3s ease;
}
.mani-toc__n { flex: none; min-width: 2.6em; font: 400 11px/1 var(--mono); letter-spacing: .08em; color: var(--fg-3); }
.mani-toc__list a:hover, .mani-toc__list a:focus-visible { transform: translateX(6px); font-style: italic; }

/* ---------- capítulos ---------- */
.mani-cap { padding: var(--sec-y) 0 var(--sec-b); overflow: clip; }
.mani-cap__in { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
/* número romano grande en itálica + título en versales, en dos columnas (en el celular, apilados) */
.mani-cap__h {
  display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr);
  column-gap: 28px; align-items: end;
  margin: 0; font-weight: 400;
}
.mani-cap__n {
  display: block;
  font: italic 400 clamp(84px, 11vw, 176px)/.78 var(--serif);
  letter-spacing: -.02em;
  color: var(--fg);
}
.mani-cap__t { display: block; font-size: clamp(40px, 5.6vw, 88px); line-height: .96; }
/* la columna de lectura: alineada con el título */
.mani-cap__body {
  margin: clamp(46px, 5.4vw, 80px) 0 0 calc((100% - 28px) * .25 + 28px);
  max-width: 34em;
}
.mani-cap__body p {
  font: 400 clamp(19px, .55vw + 14px, 23px)/1.6 var(--serif);
  color: var(--fg-2);
  hanging-punctuation: first;
}
.mani-cap__body p + p { margin-top: 1.05em; }
/* los remates (las negritas de Alan): display, a todo lo ancho, con un filete corto antes */
.mani-remate {
  position: relative;
  margin: clamp(64px, 7vw, 116px) 0 0;
  padding-top: clamp(26px, 2.6vw, 40px);
  font: 400 clamp(36px, 5.6vw, 92px)/1 var(--serif);
  letter-spacing: -.005em;
  text-transform: uppercase;
  color: var(--fg);
  text-wrap: balance;
}
.mani-remate strong { font-weight: inherit; }
.mani-remate::before {
  content: ""; position: absolute; left: 0; top: 0;
  width: clamp(48px, 5vw, 84px); height: 1px; background: currentColor;
}
.mani-remate--larga { font-size: clamp(30px, 4.1vw, 66px); line-height: 1.04; }
/* el remate sigue al texto: mismo margen que la columna de lectura en pantallas anchas */
@media (min-width: 861px) {
  .mani-remate { margin-left: calc((100% - 28px) * .25 + 28px); }
}

/* ---------- el cierre: «Por esto y muchas otras razones… PONEMOS ROLAS» ---------- */
.mani-fin {
  position: relative;
  /* Mide por lo menos una pantalla, con el texto centrado. Más corta (en el iPhone medía 510 px), su borde
     de abajo se veía mientras su Línea «— Outro» todavía la abría y, debajo, la capa de la Línea del
     footer (.ln__under, motion.js) ya pintaba tinta: tinta, una franja de papel y otra vez tinta. Con una
     pantalla de alto, su borde de abajo entra cuando la Línea ya terminó (2-oct-2026). */
  min-height: 100vh;
  min-height: 100svh;
  display: flex; flex-direction: column; justify-content: center;
  padding: var(--sec-y) var(--gutter) var(--sec-b);
  text-align: center;
  overflow: clip;
}
.mani-fin__txt { position: relative; z-index: 1; margin: 0; }
.mani-fin__pre {
  display: block;
  font: italic 400 clamp(22px, 2.4vw, 36px)/1.3 var(--serif);
  color: var(--fg-2);
}
.mani-fin__big {
  display: block;
  margin-top: .22em;
  /* «PONEMOS» llena el ancho en dos renglones: PONEMOS / ROLAS */
  font: 400 min(17.6vw, 300px)/.84 var(--serif);
  letter-spacing: -.02em;
  text-transform: uppercase;
}
/* un vinilo sin etiqueta gira detrás de «PONEMOS ROLAS», centrado (con márgenes: el transform es de
   motion.js, que lo gira con el scroll). Sin la etiqueta blanca: debajo de las letras solo quedan los surcos */
.mani-fin__vinyl {
  --v: min(80vw, 600px);
  position: absolute; z-index: 0; left: 50%; top: 50%;
  width: var(--v);
  margin: calc(var(--v) / -2) 0 0 calc(var(--v) / -2);
  background:
    radial-gradient(circle, #0b0b0b 0 14%, rgba(255, 255, 255, .16) 14.3% 14.6%, transparent 15%),
    conic-gradient(from 20deg, rgba(255, 255, 255, 0) 0deg, rgba(255, 255, 255, .16) 30deg, rgba(255, 255, 255, 0) 70deg, rgba(255, 255, 255, 0) 180deg, rgba(255, 255, 255, .12) 215deg, rgba(255, 255, 255, 0) 250deg),
    repeating-radial-gradient(circle, #121212 0 1px, #1d1d1d 1.5px 3px),
    #0b0b0b;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .05);
  opacity: .9;
}
.mani-fin__vinyl::before, .mani-fin__vinyl::after { content: none; }

/* ---------- celular ---------- */
@media (max-width: 860px) {
  .mani-toc__list { grid-template-columns: 1fr; }
  .mani-cap__h { grid-template-columns: 1fr; row-gap: 18px; }
  .mani-cap__n { font-size: clamp(76px, 24vw, 120px); }
  .mani-cap__t { font-size: clamp(34px, 9.6vw, 60px); }
  .mani-cap__body { margin-left: 0; }
  .mani-remate { font-size: clamp(30px, 8.6vw, 54px); line-height: 1.02; }
  .mani-remate--larga { font-size: clamp(26px, 7.2vw, 44px); line-height: 1.08; }
}
@media print {
  .mani-fin { min-height: 0; }
  .mani-fin__vinyl { display: none; }
}