/* Familia Documento de design.md · macroestructura 02 · Long Document.
 *
 * Prosa continua con encabezados en línea. Solo tipografía: ni ilustración,
 * ni iconos decorativos, ni cajas de colores. Lo que había antes eran dos
 * manchas verdes en degradado fijas en las esquinas, cabeceras dentro de
 * tarjetas con degradado y párrafos a 13 px. Un documento legal se lee, no
 * se decora, y se lee a un tamaño digno.
 *
 * Páginas: privacidad, privacy, terminos, terms, eliminar-cuenta.
 * Depende de tokens.css y sitio.css, en ese orden.
 */

.doc { max-width: 70ch; margin: 0 auto; }

/* ── Cabecera del documento ───────────────────────────────────── */
/* Ritmo: la cabecera abre con --space-2xl y el cuerpo respira con
   --space-xl entre apartados. design.md prohíbe que todo lleve el mismo
   aire, que es lo que hace que una página parezca generada. */
.doc-cabecera {
  padding: var(--space-2xl) 0 var(--space-lg);
  border-bottom: var(--rule) solid var(--color-rule);
  margin-bottom: var(--space-xl);
}
.doc-cabecera h1 { font-size: var(--text-2xl); line-height: 1.1; }
.doc-fecha {
  font: 400 var(--text-xs)/1 var(--font-mono);
  color: var(--color-ink-2); margin-top: var(--space-2xs);
}
.doc-lede {
  font-size: var(--text-md); line-height: 1.6; color: var(--color-ink-2);
  margin-top: var(--space-sm);
}

/* ── Índice ───────────────────────────────────────────────────── */
.indice { margin-bottom: var(--space-2xl); }
.indice h2 {
  font: 600 var(--text-xs)/1 var(--font-mono);
  color: var(--color-accent-ink); letter-spacing: .04em;
  margin-bottom: var(--space-2xs);
}
.indice ol {
  list-style: none; counter-reset: idx;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2px var(--space-md);
}
.indice li { counter-increment: idx; }
.indice a {
  display: block; padding: 3px 0;
  font-size: var(--text-sm); color: var(--color-ink-2); text-decoration: none;
  transition: color var(--dur-short) var(--ease-out);
}
.indice a:hover { color: var(--color-accent-ink); text-decoration: underline; }

/* ── Cuerpo ───────────────────────────────────────────────────── */
.doc-apartado { margin-bottom: var(--space-xl); }
.doc-apartado h2 {
  font-size: var(--text-lg); line-height: 1.25;
  margin-bottom: var(--space-2xs);
  /* El ancla del índice no puede quedar debajo de nada; aunque la nav no
     sea pegajosa aquí, deja aire para que el titular no toque el borde. */
  scroll-margin-top: var(--space-md);
}
.doc-apartado p {
  font-size: var(--text-sm); line-height: 1.75; color: var(--color-ink-2);
  /* El texto legal viene con sus saltos de línea y sus viñetas escritas a
     mano. Se respetan tal cual: reescribirlo a <ul> es tocar el texto de un
     documento con valor legal. */
  white-space: pre-line;
}
/* :not(.btn) no es un adorno. Sin él, un botón primario metido dentro de un
   apartado se lleva el verde de este selector como color de TEXTO y queda
   verde sobre verde, ilegible. Pasó en eliminar-cuenta.html. */
.doc-apartado a:not(.btn), .doc-cierre a:not(.btn) {
  color: var(--color-accent-ink); font-weight: 600;
  text-decoration: underline; text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

/* ── Bloque de contacto, al final ─────────────────────────────── */
.doc-cierre {
  border-top: var(--rule) solid var(--color-rule);
  padding-top: var(--space-md); margin-bottom: var(--space-2xl);
}
.doc-cierre h2 { font-size: var(--text-md); margin-bottom: var(--space-2xs); }
.doc-cierre p { font-size: var(--text-sm); line-height: 1.75; color: var(--color-ink-2); }

@media (max-width: 560px) {
  .indice ol { grid-template-columns: minmax(0, 1fr); }
  .doc-cabecera { padding-top: var(--space-lg); }
}