/* Página de error del portal — unidad P2 del pulido
 * (docs/design/pulido/paginas-de-error.md).
 *
 * Antes, `docs.veriko.mx/es/lo-que-sea` devolvía nueve bytes: `Not Found` en
 * `text/plain`. No era una página, era la ausencia de una.
 *
 * P-ERR-2: sin ilustración. El número en mono es la única figura —el mismo
 * tratamiento que el `v1.0.0` de una entrada de lanzamiento, que ya es la
 * figura tipográfica de esta casa. Lo eligió el owner sobre render el
 * 2026-09-10 (`docs/design/bakeoff/errores/`).
 *
 * Todo cuelga de `.docs-error`: esta hoja se enlaza en TODAS las páginas del
 * portal (el layout es uno solo), así que ni un selector puede salir de su
 * clase raíz o se filtraría a la prosa. Lo comprueba el candado.
 */

/* La caja llega a 48rem y la prosa se queda en 34: son dos medidas distintas
   porque hacen dos cosas distintas. A 34rem las cuatro salidas no caben en una
   fila y «Contacto» se descolgaba solo a una segunda línea, que es la forma que
   tiene una fila de botones de parecer un descuido. */
.docs-error {
  max-width: 48rem;
  padding-block: var(--space-10) var(--space-16);
}

.docs-error .docs-error__code {
  margin: 0 0 var(--space-5);
  font-family: var(--font-display);
  font-variant-numeric: tabular-nums;
  font-size: clamp(72px, 20vw, 128px);
  font-weight: var(--weight-bold);
  line-height: 0.9;
  letter-spacing: -0.04em;
  color: var(--color-text);
}

.docs-error .docs-error__title {
  margin: 0 0 var(--space-3);
  max-width: 34rem;
  font-size: var(--text-3xl);
  line-height: var(--leading-tight);
  letter-spacing: -0.02em;
  font-weight: var(--weight-bold);
  color: var(--color-text);
}

.docs-error .docs-error__lead {
  margin: 0;
  max-width: 34rem;
  color: var(--color-text-muted);
}

.docs-error .docs-error__exits {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin: var(--space-8) 0 0;
  padding: 0;
  list-style: none;
}

.docs-error .docs-error__exits a {
  display: inline-flex;
  align-items: center;
  padding: 0.65rem 1.1rem;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  font-size: 0.95rem;
  font-weight: var(--weight-semibold);
  color: var(--color-text);
  text-decoration: none;
}

.docs-error .docs-error__exits a:hover {
  background: var(--color-bg-hover);
  border-color: var(--color-link);
}