/* ============================================================
   FlouCards — manifiesto.css
   Hoja del documento largo. Comparte tokens y primitivas con la
   landing (tokens.css + base.css) pero se comporta como documento:
   una sola columna de lectura, medida cómoda, jerarquía profunda.

   Reglas de color heredadas y respetadas:
   · mint = SOLO FlouCards (aquí: un único bloque)
   · --violeta-claro = solo grafismo sobre violeta, nunca texto
   · fondos violetas: portada, principio 04 y cierre. El resto papel.
   ============================================================ */

.doc {
  /* Métrica propia del documento */
  --doc-t:       clamp(1.0625rem, 0.42vw + 0.98rem, 1.1875rem);
  --doc-lh:      1.68;
  --doc-maxw:    74rem;
  --col:         40rem;          /* ~72 caracteres */
  --idx-w:       13rem;
  --idx-gap:     2.75rem;
  --gutter:      max(var(--pad), calc((100vw - var(--doc-maxw)) / 2 + var(--pad)));
  --sec-py:      clamp(3.25rem, 7vw, 6.5rem);
  --p-gap:       1.05em;
  font-size: var(--doc-t);
  line-height: var(--doc-lh);
}

.vh {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ============================================================
   ARMAZÓN
   ============================================================ */
.sh {
  width: 100%;
  max-width: var(--doc-maxw);
  margin-inline: auto;
  padding-inline: var(--pad);
}
.col { max-width: var(--col); }

.d-sec {
  background: var(--bg);
  color: var(--fg);
  padding-block: var(--sec-py);
}
.d-sec--open { padding-bottom: 0; }
.d-sec--fuentes { padding-bottom: clamp(3rem, 6vw, 5rem); }
section[id] { scroll-margin-top: 1.5rem; }

/* Cuerpo de lectura */
.col p { font-size: var(--doc-t); line-height: var(--doc-lh); }
.col > p + p,
.col > h3 + p { margin-top: var(--p-gap); }
.col > * + h3 { margin-top: calc(var(--p-gap) * 2); }
.col > h2 + p { margin-top: var(--stack-2); }
/* Subtítulo que abre un bloque de datos tras una pieza ancha */
.d-h3--spaced { margin-top: var(--stack-3); }

.d-first { margin-top: var(--stack-2); }
.d-em { font-weight: var(--w-semi); color: var(--acento); }

/* ============================================================
   TIPOGRAFÍA DEL DOCUMENTO
   ============================================================ */
.d-h2 {
  font-size: clamp(1.75rem, 3.5vw, 3rem);
  font-weight: var(--w-bold);
  line-height: 1.05;
  letter-spacing: var(--tr-tight);
  text-wrap: balance;
  max-width: 20ch;
}
.d-h3 {
  font-size: clamp(1.2rem, 1.8vw, 1.55rem);
  font-weight: var(--w-semi);
  line-height: 1.18;
  letter-spacing: -0.02em;
}
.d-h4 {
  font-size: clamp(1.05rem, 1.3vw, 1.2rem);
  font-weight: var(--w-semi);
  line-height: 1.25;
  letter-spacing: -0.015em;
}
.d-lead {
  margin-top: var(--stack-2);
  font-size: clamp(1.15rem, 1.8vw, 1.45rem);
  font-weight: var(--w-light);
  line-height: 1.42;
  letter-spacing: -0.012em;
  max-width: 46ch;
}
.d-src {
  display: block;
  margin-top: 0.4rem;
  font-size: var(--t-small);
  line-height: 1.5;
  color: var(--fg-soft);
}
.d-salu { margin-top: var(--stack-2); }
.d-firma { margin-top: var(--stack-2); line-height: 1.75; }
.d-firma b { font-weight: var(--w-semi); }

/* Cierre de sección: desplazado, nunca centrado */
.d-out {
  margin-top: var(--stack-3);
  margin-left: clamp(0rem, 8vw, 7rem);
  max-width: 44ch;
  font-size: clamp(1.15rem, 1.8vw, 1.45rem);
  font-weight: var(--w-medium);
  line-height: 1.32;
  letter-spacing: -0.015em;
}
.d-out--flush { margin-left: 0; max-width: var(--col); }

/* ============================================================
   BARRA DE PROGRESO — cuánto documento queda
   ============================================================ */
.doc-prog {
  position: fixed;
  inset: 0 0 auto 0;
  height: 3px;
  z-index: 60;
  background: var(--pista);
}
.doc-prog__fill {
  display: block;
  height: 100%;
  background: var(--violeta);
  transform: scaleX(0);
  transform-origin: 0 50%;
}
.over-violeta .doc-prog { background: var(--pista); }
.over-violeta .doc-prog__fill { background: var(--blanco); }

/* ============================================================
   ÍNDICE — los kickers del documento, convertidos en navegación
   Móvil: sumario en flujo, justo después de la portada.
   Escritorio: columna fija en el margen, con la sección en curso.
   ============================================================ */
.doc-idx {
  padding: var(--stack-3) var(--pad) 0;
  max-width: var(--doc-maxw);
  margin-inline: auto;
}
.doc-idx__t {
  font-size: var(--t-small);
  font-weight: var(--w-semi);
  color: var(--fg-soft);
  margin-bottom: 0.65rem;
}
.doc-idx__list { display: grid; }
.doc-idx__list a {
  display: grid;
  grid-template-columns: 2.1rem minmax(0, 1fr);
  align-items: baseline;
  gap: 0.35rem;
  min-height: 34px;
  padding-block: 0.28rem;
  font-size: var(--t-small);
  line-height: 1.3;
  text-decoration: none;
  color: var(--fg-soft);
  transition: color var(--dur-ui) var(--ease-out);
}
.doc-idx__n { font-weight: var(--w-semi); font-variant-numeric: tabular-nums; }
.doc-idx__list a:hover { color: var(--fg); }
.doc-idx__list a.is-past { color: var(--fg); }
.doc-idx__list a.is-now {
  color: var(--acento);
  font-weight: var(--w-semi);
}
.doc-idx__list a.is-now .doc-idx__l {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

@media (min-width: 1180px) and (min-height: 620px) {
  .doc-idx {
    position: fixed;
    top: 50%;
    left: var(--gutter);
    width: var(--idx-w);
    max-height: 76vh;
    overflow-y: auto;
    padding: 0;
    margin: 0;
    transform: translateY(-50%);
    z-index: 40;
  }
  .sh { padding-left: calc(var(--pad) + var(--idx-w) + var(--idx-gap)); }
  /* El índice vive sobre el fondo de la sección que estés leyendo */
  .over-violeta .doc-idx {
    --fg: var(--blanco);
    --fg-soft: color-mix(in srgb, var(--c-over) 72%, transparent);
    --acento: var(--blanco);
    --focus: var(--blanco);
  }
}

/* ============================================================
   PORTADA
   ============================================================ */
.d-cover {
  display: flex;
  flex-direction: column;
  min-height: 92svh;
  padding-block: clamp(1.5rem, 3vw, 2.5rem) clamp(2.5rem, 5vw, 4rem);
}
.d-cover > .sh { display: flex; flex-direction: column; flex: 1; }
.d-cover__t {
  margin-top: auto;
  font-size: var(--t-hero);
  font-weight: var(--w-black);
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-tight);
  max-width: 16ch;
}
.d-cover__s {
  margin-top: var(--stack-2);
  font-size: clamp(1.15rem, 2vw, 1.6rem);
  font-weight: var(--w-light);
  line-height: 1.32;
  max-width: 32ch;
  color: var(--fg-soft);
}
.d-cover__f {
  margin-top: var(--stack-4);
  font-size: var(--t-small);
  line-height: 1.7;
  color: var(--fg-soft);
}

.d-back {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  padding-right: 0.25rem;
  font-size: var(--t-small);
  font-weight: var(--w-semi);
  text-decoration: none;
  color: var(--fg);
}
.d-back:hover { text-decoration: underline; text-underline-offset: 5px; }

/* ============================================================
   TURN · las frases que giran el argumento
   Un bloque lleno. El color dice de quién es el giro:
   papel/violeta = del argumento · mint = de FlouCards.
   ============================================================ */
.turn {
  margin-top: var(--stack-3);
  padding: clamp(1.35rem, 3vw, 2.5rem);
  border-radius: var(--r-node);
  max-width: calc(var(--col) + 6rem);
}
.turn p {
  font-size: clamp(1.3rem, 2.6vw, 2rem);
  font-weight: var(--w-semi);
  line-height: 1.2;
  letter-spacing: -0.025em;
  text-wrap: balance;
}
.turn--violeta { background: var(--violeta); color: var(--blanco); }
.turn--papel   { background: var(--papel);  color: var(--violeta); }
.turn--mint    { background: var(--mint);   color: var(--tinta); }
.turn--wide    { max-width: calc(var(--col) + 12rem); }
.turn--wide p  { font-size: clamp(1.5rem, 3.4vw, 2.6rem); }

/* ============================================================
   03 · TRES FUERZAS
   ============================================================ */
.forces { display: grid; gap: var(--stack-3); margin-top: var(--stack-3); }
.force__n {
  color: var(--acento);
  font-weight: var(--w-semi);
  font-variant-numeric: tabular-nums;
  margin-right: 0.35rem;
}
.force p { margin-top: 0.6rem; }

/* ============================================================
   04 · LA EVIDENCIA
   Cuatro consultoras, cuatro naturalezas de cifra:
   masa realizada (sólida) · proporción (ligera) · múltiplo ·
   masa en riesgo (contorno: dinero que aún no se movió).
   Las magnitudes absolutas van a ras del margen; las medidas
   relativas cuelgan de él, porque describen una relación.
   ============================================================ */
.ev { display: grid; gap: clamp(2.75rem, 6vw, 5rem); margin-top: var(--stack-3); }
.ev__what {
  margin-top: 0.35rem;
  color: var(--acento);
  font-weight: var(--w-medium);
  font-size: var(--t-3);
  letter-spacing: -0.015em;
}
.ev__fig {
  margin-top: 0.55rem;
  margin-bottom: 0.75rem;
  line-height: 0.92;
  letter-spacing: -0.045em;
  font-variant-numeric: tabular-nums;
}
.ev__fig--mass  { font-size: clamp(2.5rem, 6.2vw, 5rem);   font-weight: var(--w-black); color: var(--acento); }
.ev__fig--share { font-size: clamp(2.1rem, 4.4vw, 3.4rem); font-weight: var(--w-light); color: var(--acento); }
.ev__fig--mult  { font-size: clamp(2.3rem, 5.2vw, 4.2rem); font-weight: var(--w-bold);  color: var(--acento); }
.ev__fig--risk  { font-size: clamp(2.5rem, 6.2vw, 5rem);   font-weight: var(--w-black); color: var(--acento); }
.ev__dash { font-weight: var(--w-light); padding-inline: 0.06em; }
.ev__unit { font-weight: var(--w-light); }
/* En Bain el signo es un operador, no parte de la cifra */
.ev__fig--mult .ev__unit { color: var(--fg-soft); }
@supports (-webkit-text-stroke: 2px currentColor) {
  .ev__fig--risk {
    color: transparent;
    -webkit-text-stroke: clamp(1.5px, 0.22vw, 3px) var(--violeta);
  }
}
.ev__row--rel { margin-left: clamp(0rem, 6vw, 5rem); }

/* ============================================================
   05 · EL DATO QUE IMPORTA — el tratamiento más fuerte
   El campo de cien no ilustra la cifra: es la cifra.
   ============================================================ */
/* Único bloque que rompe la columna de lectura. Se rompe una sola
   vez, y es aquí: es el dato más fuerte del manifiesto. */
.ratio {
  margin-top: var(--stack-3);
  max-width: min(44rem, 100%);
}
.ratio .hundred { --u: 100%; margin-block: var(--stack-2); }
.ratio__line { display: block; }
.ratio__n {
  display: block;
  font-size: clamp(1.6rem, 3.6vw, 2.6rem);
  font-weight: var(--w-bold);
  line-height: 1.02;
  letter-spacing: -0.035em;
  color: var(--fg-soft);
}
.ratio__d {
  display: block;
  margin-top: 0.35rem;
  font-size: var(--t-small);
  line-height: 1.5;
  color: var(--fg-soft);
  max-width: 44ch;
}
.ratio__line--real .ratio__n { color: var(--acento); }
.ratio__line--real .ratio__d { color: var(--fg); }

/* Desglose proporcional */
.bars { display: grid; gap: var(--stack-2); margin-top: var(--stack-2); max-width: var(--col); }
.bars li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 0 1rem;
}
.bars__k { font-size: var(--t-small); }
.bars__v { font-size: var(--t-small); font-weight: var(--w-semi); font-variant-numeric: tabular-nums; }
.bars__b {
  grid-column: 1 / -1;
  position: relative;
  height: 10px;
  margin-top: 0.45rem;
  border-radius: var(--r-unit);
  background: var(--slot);
}
.bars__b::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--w);
  border-radius: var(--r-unit);
  background: var(--acento);
}

/* ============================================================
   06 · LOS PRINCIPIOS — el orden carga significado
   ============================================================ */
.pr { display: grid; gap: clamp(2.5rem, 5.5vw, 4.5rem); margin-top: var(--stack-3); padding-bottom: var(--sec-py); }
.pr__item { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); gap: 0 1.25rem; align-items: start; }
.pr__n {
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  font-weight: var(--w-black);
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--acento);
  font-variant-numeric: tabular-nums;
}
.pr__claim {
  margin-top: 0.7rem;
  font-size: clamp(1.15rem, 1.75vw, 1.4rem);
  font-weight: var(--w-medium);
  line-height: 1.32;
  letter-spacing: -0.015em;
}
.pr__more { margin-top: 0.85rem; color: var(--fg-soft); }

/* Las dos páginas completas: 04 (bisagra) y 07 (el que ordena) */
.pr__full { padding-block: clamp(3.5rem, 9vw, 8rem); }
.pr__full--papel { background: var(--papel); }
.pr__big {
  font-size: clamp(5rem, 17vw, 14rem);
  font-weight: var(--w-black);
  line-height: 0.8;
  letter-spacing: -0.06em;
  color: var(--violeta-claro);
  margin-bottom: clamp(1rem, 2vw, 2rem);
}
.pr__full--papel .pr__big { color: var(--acento); }
.pr__title {
  font-size: clamp(1.85rem, 4vw, 3.4rem);
  font-weight: var(--w-bold);
  line-height: 1.04;
  letter-spacing: var(--tr-tight);
  max-width: 20ch;
}

/* ============================================================
   CADENA · el mismo componente, dos configuraciones
   ============================================================ */
.chain {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 0.6rem 0;
  margin-top: var(--stack-3);
}
.chain li {
  position: relative;
  margin-right: 2.4rem;
  padding: 0.7rem 1rem;
  border-radius: var(--r-node);
  box-shadow: inset 0 0 0 2px var(--linea);
  font-size: var(--t-small);
  font-weight: var(--w-semi);
  letter-spacing: -0.01em;
}
.chain li:last-child { margin-right: 0; }
.chain li:not(:last-child)::after {
  content: "→";
  position: absolute;
  left: 100%;
  top: 50%;
  width: 2.4rem;
  text-align: center;
  transform: translateY(-50%);
  color: var(--acento);
  font-weight: var(--w-book);
}
/* Sobre violeta la flecha va en blanco atenuado (5.1:1), no en
   violeta claro: es información direccional, no ornamento. */
.on-violeta .chain li:not(:last-child)::after { color: var(--fg-soft); }

/* Vertical: la cadena de FlouCards, y todas en pantalla estrecha */
.chain--down { flex-direction: column; align-items: flex-start; gap: 0; }
.chain--down li { margin-right: 0; margin-bottom: 2.4rem; }
.chain--down li:last-child { margin-bottom: 0; }
.chain--down li:not(:last-child)::after {
  content: "↓";
  left: 1.6rem;          /* espina recta: el descenso no zigzaguea */
  top: 100%;
  width: auto;
  height: 2.4rem;
  display: grid;
  place-items: center;
  transform: none;
}
.chain--wide li:not(:last-child)::after { left: 50%; transform: translateX(-50%); }
/* Configuración A · la última milla: bandas anchas que descienden
   hasta la persona. Cada paso ocupa todo el ancho: son capas. */
.chain--wide { max-width: calc(var(--col) + 6rem); }
.chain--wide li { width: 100%; margin-bottom: 1.9rem; padding: 0.85rem 1.1rem; }
.chain--wide li:not(:last-child)::after { height: 1.9rem; }

/* Configuración B · FlouCards: cajas compactas, contorno mint.
   El mint no aparece en ningún otro punto del documento. */
.chain--flou li { box-shadow: inset 0 0 0 2px var(--mint); }

@media (max-width: 720px) {
  .chain { flex-direction: column; align-items: flex-start; gap: 0; }
  .chain li { margin-right: 0; margin-bottom: 2.2rem; }
  .chain li:last-child { margin-bottom: 0; }
  .chain li:not(:last-child)::after {
    content: "↓";
    left: 1.5rem;
    top: 100%;
    width: auto;
    height: 2.2rem;
    display: grid;
    place-items: center;
    transform: none;
  }
}

/* ============================================================
   DATOS · figura + lectura (principio 07 y contexto regional)
   ============================================================ */
.data { display: grid; gap: var(--stack-2); margin-top: var(--stack-3); max-width: calc(var(--col) + 6rem); }
.data li {
  display: grid;
  grid-template-columns: minmax(7rem, 12.5rem) minmax(0, 1fr);
  gap: 0.35rem 1.5rem;
  align-items: baseline;
}
.data__n {
  font-size: clamp(1.35rem, 2.4vw, 1.9rem);
  font-weight: var(--w-bold);
  line-height: 1.05;
  letter-spacing: -0.035em;
  color: var(--acento);
  font-variant-numeric: tabular-nums;
}
.data__t { font-size: var(--doc-t); line-height: 1.55; }

/* ============================================================
   07 · LA OBJECIÓN
   ============================================================ */
.frentes { display: grid; gap: var(--stack-2); margin-top: var(--stack-3); }
.frente__n {
  color: var(--acento);
  font-weight: var(--w-semi);
  font-variant-numeric: tabular-nums;
  margin-right: 0.3rem;
}
.frente p { margin-top: 0.4rem; color: var(--fg-soft); }
.resp { margin-top: var(--stack-4); margin-left: clamp(0rem, 8vw, 7rem); }

/* ============================================================
   08 · LA REGIÓN
   ============================================================ */
.rg { display: grid; gap: clamp(2rem, 4vw, 3.25rem); margin-top: var(--stack-3); }
.rg__row {
  display: grid;
  grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
  grid-template-rows: auto 1fr;   /* el motor se pega al nombre, no al fondo */
  gap: 0.4rem clamp(1.5rem, 4vw, 3rem);
  align-items: start;
  max-width: calc(var(--col) + 15rem);
}
.rg__name {
  font-size: clamp(1.35rem, 2.4vw, 1.9rem);
  font-weight: var(--w-bold);
  line-height: 1.08;
  letter-spacing: -0.03em;
}
.rg__motor { align-self: start; color: var(--acento); font-weight: var(--w-medium); font-size: var(--t-small); }
.rg__txt { grid-column: 2; grid-row: 1 / span 2; line-height: var(--doc-lh); }

/* ============================================================
   09 · FLOUCARDS — el único lugar donde vive el mint
   ============================================================ */
.fc__mark {
  font-size: clamp(1.5rem, 3vw, 2.2rem);
  font-weight: var(--w-black);
  letter-spacing: var(--tr-tight);
  color: var(--acento);
  margin-bottom: var(--stack-1);
}

/* ============================================================
   CIERRE
   ============================================================ */
.d-close { padding-block: clamp(4rem, 10vw, 9rem); }
.d-close__t {
  font-size: clamp(2rem, 5.4vw, 4.6rem);
  font-weight: var(--w-black);
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-tight);
  max-width: 18ch;
}
.d-close .col { margin-top: var(--stack-3); }

.reads { display: grid; gap: var(--stack-2); margin-top: var(--stack-4); max-width: calc(var(--col) + 13rem); }
.reads li {
  display: grid;
  grid-template-columns: minmax(8rem, 14rem) minmax(0, 1fr);
  gap: 0.3rem 1.5rem;
  align-items: baseline;
}
.reads__who { font-weight: var(--w-semi); font-size: var(--t-3); letter-spacing: -0.015em; }
.reads__t { color: var(--fg-soft); line-height: 1.55; }
.d-firma--end {
  margin-top: var(--stack-4);
  font-size: var(--t-3);
  font-weight: var(--w-semi);
  color: var(--fg-soft);
}

/* ============================================================
   FUENTES
   ============================================================ */
.biblio { display: grid; gap: var(--stack-3); margin-top: var(--stack-3); max-width: calc(var(--col) + 8rem); }
.biblio__g ul { display: grid; gap: 0.55rem; margin-top: 0.85rem; }
.biblio__g li {
  font-size: var(--t-small);
  line-height: 1.55;
  color: var(--fg-soft);
  padding-left: 1.1rem;
  text-indent: -1.1rem;
}

/* ============================================================
   PIE
   ============================================================ */
.d-foot {
  background: var(--violeta);
  color: var(--blanco);
  padding-block: var(--stack-3);
}
.d-foot__in {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--stack-2);
}
.d-foot a { color: inherit; }
.d-back--foot { color: var(--blanco); }
.d-foot :focus-visible { outline-color: var(--blanco); }

/* ============================================================
   ESTRECHO
   ============================================================ */
@media (max-width: 859px) {
  .doc { --p-gap: 1rem; }
  /* En móvil la portada no puede abrir con media pantalla vacía:
     el título sube y el pie se ancla abajo. */
  .d-cover { min-height: 80svh; }
  .d-cover__t { margin-top: var(--stack-3); }
  .d-cover__f { margin-top: auto; padding-top: var(--stack-4); }
  .pr__item { grid-template-columns: 1fr; gap: 0.35rem; }
  .rg__row { grid-template-columns: 1fr; }
  .rg__txt { grid-column: 1; grid-row: auto; margin-top: 0.55rem; }
  .data li,
  .reads li { grid-template-columns: 1fr; }
  .d-out { margin-left: 0; }
  .resp { margin-left: 0; }
  .ev__row--rel { margin-left: 0; }
}