/* ───────────────────────────────────────────────────────────────────────────
   Páginas de documento: privacidad y términos.

   Van en un archivo aparte de estilo.css y no dentro de él por una razón
   práctica: la landing se toca durante una campaña y estos textos no. Separados,
   se puede rehacer la portada entera sin riesgo de descolocar un documento que
   alguien puede estar leyendo por obligación legal.

   Los tokens de color son los del sitio (--tinta, --texto, --apagado…), que van
   en castellano como el resto del proyecto y NO son los mismos nombres que usa
   la aplicación. Copiarlos de allá deja la página sin color y sin aviso.

   La composición es la de un impreso: una columna angosta, serif para el cuerpo,
   sans para los títulos, y filetes en vez de cajas. Lo mismo que el resto del
   sitio, sin nada nuevo que aprender.
   ─────────────────────────────────────────────────────────────────────────── */

.documento {
  max-width: 44rem;
  margin: 0 auto;
  padding: 4rem 1.5rem 6rem;
}

.documento__volver {
  display: inline-block;
  margin-bottom: 2.5rem;
  font-size: .875rem;
  color: var(--apagado);
  text-decoration: none;
}
.documento__volver:hover { color: var(--acento); }

.documento h1 {
  font-size: clamp(1.9rem, 4vw, 2.6rem);
  line-height: 1.12;
  letter-spacing: -.02em;
  margin: 0 0 .5rem;
}

/* La fecha de vigencia va arriba y visible: un documento de estos sin fecha no
   permite saber qué versión aceptó cada persona. */
.documento__fecha {
  font-size: .875rem;
  color: var(--tenue);
  margin-bottom: 2.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--filete);
}

/* El resumen de arriba. Existe porque nadie lee estos documentos enteros: si lo
   importante solo está en el párrafo catorce, no está. */
.documento__resumen {
  border-left: 3px solid var(--anillo);
  padding: 0 0 0 1.25rem;
  margin: 0 0 3rem;
}
.documento__resumen p { margin: 0 0 .75rem; }
.documento__resumen p:last-child { margin-bottom: 0; }

.documento h2 {
  font-size: 1.25rem;
  letter-spacing: -.011em;
  margin: 3rem 0 .875rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--filete);
}
.documento h3 {
  font-size: 1rem;
  margin: 2rem 0 .5rem;
}

.documento p, .documento li {
  font-family: var(--serif);
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--texto);
}
.documento p { margin: 0 0 1rem; }
.documento ul { margin: 0 0 1.25rem; padding-left: 1.25rem; }
.documento li { margin-bottom: .5rem; }

.documento strong { color: var(--tinta); font-weight: 600; }
.documento a { color: var(--acento); }

/* Una tabla que en el teléfono se lee, en vez de desbordarse. */
.documento__tabla { width: 100%; overflow-x: auto; margin: 0 0 1.5rem; }
.documento table { width: 100%; border-collapse: collapse; font-size: .9375rem; }
.documento th, .documento td {
  text-align: left;
  padding: .625rem .75rem .625rem 0;
  border-bottom: 1px solid var(--filete);
  vertical-align: top;
}
.documento th {
  font-family: inherit;
  font-size: .8125rem;
  font-weight: 600;
  color: var(--apagado);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.documento td { font-family: var(--serif); color: var(--texto); }

/* Lo que hay que leer aunque se lea en diagonal. */
.documento__nota {
  background: var(--hueco);
  border-radius: 12px;
  padding: 1.125rem 1.25rem;
  margin: 0 0 1.5rem;
}
.documento__nota p:last-child { margin-bottom: 0; }