/*
  PÁGINAS DE TEXTO · el aviso de privacidad y las que vengan.

  NI UN COLOR, NI UN TAMAÑO, NI UN ESPACIO PROPIO: todo sale de `sistema.css`.
  Una hoja que inventa un valor es una hoja que se separa del manual sin que
  nadie lo note — es justo lo que le pasó al blog, que copió a mano las razones
  de contraste y acabó afirmando «4.51:1 sobre blanco» siendo su fondo gris.
  Aquí no hay nada que inventar porque no hay ningún literal.

  LOS COLORES SIGUEN AL TEMA. `--papel` y la rampa `--n500/--n700` son valores
  FIJOS del manual, no superficies: usados aquí dejaban la caja de nota blanca
  sobre el fondo oscuro y el texto secundario en azul marino ilegible. Se vio
  abriendo la página en el navegador, no leyendo el HTML. Los que siguen al tema
  son `--superficie`, `--texto` y `--texto-suave`.

  El ancho lo pone `.contenedor-texto` (`--ancho-texto`), que es la medida que
  el sistema ya tiene para leer párrafos largos.
*/

.pagina-texto {
  padding-block: var(--e4);
}

.pagina-texto .encabezado {
  margin-bottom: var(--e4);
  padding-bottom: var(--e0);
  border-bottom: 1px solid var(--borde);
}

.pagina-texto h1 {
  font-family: var(--fuente-titulo);
  margin-bottom: var(--e0);
}

.pagina-texto .bajada {
  color: var(--texto-suave);
  max-width: var(--ancho-texto);
}

.pagina-texto h2 {
  font-family: var(--fuente-titulo);
  margin-top: var(--e4);
  margin-bottom: var(--e0);
  scroll-margin-top: var(--e4);
}

.pagina-texto h3 {
  font-family: var(--fuente-titulo);
  margin-top: var(--e0);
  margin-bottom: calc(var(--e0) / 2);
  color: var(--texto);
}

.pagina-texto p,
.pagina-texto li {
  line-height: var(--renglon-cuerpo);
}

.pagina-texto p {
  margin-bottom: var(--e0);
  max-width: var(--ancho-texto);
}

.pagina-texto ul {
  margin: 0 0 var(--e0);
  padding-left: 1.25em;
  max-width: var(--ancho-texto);
}

.pagina-texto li {
  margin-bottom: calc(var(--e0) / 3);
}

.pagina-texto blockquote {
  margin: var(--e0) 0;
  padding-left: var(--e0);
  /* El filo como luz en el canto, que es la doctrina de material 05.6. */
  border-left: 2px solid var(--acento);
  color: var(--texto-suave);
  max-width: var(--ancho-texto);
}

/* La nota es la caja de aviso: el mismo vidrio de las capas flotantes. */
.pagina-texto .nota {
  margin: var(--e0) 0 var(--e4);
  padding: var(--e0);
  border: 1px solid var(--borde);
  border-radius: var(--radio-caja);
  background: var(--superficie);
  color: var(--texto-suave);
  max-width: var(--ancho-texto);
}

.pagina-texto a {
  color: var(--acento);
}