/* «About» con contadores vivos (2026-10-22; en vivo desde el 2026-10-23).
   Todo con prefijo `ab-` y en su propia hoja: solo la carga esta página.
   Hubo tres diseños en la vista previa; el usuario eligió este y los otros
   dos se borraron con su CSS. Cifras grandes contadas en vivo, una idea por
   tarjeta, nada de texto largo. Solo tokens de `blockboard.css`: se ve igual
   en los dos temas. */
.ab { max-width: 1120px; margin: 0 auto; }
/* El índice de las seis páginas, igual que en `.doc` (esta página no es `.doc`
   porque es más ancha que la medida de lectura). */
.ab > .doc-nav { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); font-size: var(--size-sm);
  padding-bottom: var(--s4); border-bottom: 1px solid var(--line); }
.ab > .doc-nav a { color: var(--text-muted); }
.ab > .doc-nav a.on { color: var(--text); font-weight: 600; }
.ab-hero { padding: var(--s6) 0 var(--s5); }
.ab-hero h1 { font-size: var(--size-3xl); line-height: 1.08; letter-spacing: -.02em; max-width: 18ch; margin: var(--s2) 0 var(--s3); }
.ab-lede { color: var(--text-muted); font-size: var(--size-md); max-width: 60ch; margin: 0; }
.ab-n { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--text); }
.ab-ico { width: 20px; height: 20px; flex: none; }
.ab-icon { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 10px;
  background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); flex: none; }

/* Ahora mismo: ocho contadores, cuatro por fila (dos en el móvil). */
.ab-counters { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s3); margin-bottom: var(--s3); }
.ab-cell { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--s4); display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ab-cell .ab-n { font-size: var(--size-3xl); line-height: 1.05; }
.ab-cell > span:last-child { color: var(--text-muted); font-size: var(--size-sm); }
.ab-live, .ab-tag { display: inline-flex; align-items: center; gap: 6px; font-size: var(--size-2xs); text-transform: uppercase; letter-spacing: .1em; }
.ab-live { color: var(--up); }
.ab-tag { color: var(--text-faint); }
.ab-live i { width: 7px; height: 7px; border-radius: 50%; background: var(--up); animation: ab-pulse 2s infinite; }
@keyframes ab-pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--up) 55%, transparent); } 70%, 100% { box-shadow: 0 0 0 7px transparent; } }
@media (prefers-reduced-motion: reduce) { .ab-live i { animation: none; } }

/* Lo que se recibe. Diez tarjetas: cinco por fila, o dos, o una. Nunca un hueco al final. */
.ab-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--s3); }
.ab-feat { display: flex; flex-direction: column; gap: var(--s2); color: inherit; transition: border-color .15s, transform .15s; }
.ab-feat:hover { border-color: var(--accent); transform: translateY(-2px); text-decoration: none; }
.ab-feat h3 { font-size: var(--size-md); margin: var(--s1) 0 0; color: var(--text); }
.ab-feat p { color: var(--text-muted); font-size: var(--size-sm); margin: 0; flex: 1; }
.ab-chip { align-self: flex-start; font-size: var(--size-xs); color: var(--text-muted); background: var(--surface-sunken); border-radius: 999px; padding: 3px 10px; }

/* Todo lo que seguimos (2026-10-23). Ocho bloques: cuatro por fila, dos o uno.
   Cada fila, la cifra a la izquierda y lo que es a su lado. */
.ab-track { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s3); }
.ab-box { display: flex; flex-direction: column; gap: var(--s3); min-width: 0; }
.ab-box header { display: flex; align-items: center; gap: var(--s2); }
.ab-box h3 { font-size: var(--size-md); margin: 0; }
.ab-box ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.ab-box li { display: grid; grid-template-columns: minmax(0, auto) minmax(0, 1fr); align-items: baseline; gap: var(--s2); font-size: var(--size-sm); }
.ab-box li .ab-n { font-size: var(--size-lg); white-space: nowrap; }
.ab-box li span { color: var(--text-muted); }
.ab-box li.sub { padding-left: var(--s3); }
.ab-box li.sub .ab-n { font-size: var(--size-sm); font-weight: 600; }
.ab-box li.sub span { font-size: var(--size-xs); }
.ab-go { font-weight: 600; font-size: var(--size-sm); }

/* El texto de `trust_texts/about.md`, a la medida de lectura. */
.ab-doc { margin-top: var(--s5); }
.ab-foot { margin-top: var(--s6); font-size: var(--size-sm); }

@media (max-width: 1180px) {
  .ab-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ab-track { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .ab-hero { padding: var(--s4) 0; }
  .ab-hero h1 { font-size: var(--size-2xl); }
  .ab-counters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ab-cell { padding: var(--s3); }
  .ab-cell .ab-n { font-size: var(--size-2xl); }
  .ab-grid, .ab-track { grid-template-columns: minmax(0, 1fr); }
}