/* Páginas legales (/privacidad y /terminos): la tipografía de la landing en una columna de lectura.
   Van después de tokens.css, styles.css y pages.css (.sheet). */

.legal-text {
  display: flex;
  flex-direction: column;
  gap: var(--space-s4);
  padding-top: var(--space-s4);
}

/* El título en display, como los de la landing; los de los textos son largos y se parten en varias líneas. */
.legal-title {
  margin-bottom: var(--space-s4);
  font-size: min(64px, calc((100vw - 2 * var(--space-margin)) / 6.2));
  line-height: 0.9;
  white-space: normal;
  overflow-wrap: anywhere;
  text-wrap: balance;
}

.legal-text h2 {
  padding-top: var(--space-s6);
  font-size: var(--type-headline-size);
  line-height: var(--type-headline-line);
  font-weight: var(--type-headline-weight);
}

.legal-text h3 {
  padding-top: var(--space-s2);
  font-size: var(--type-body-size);
  line-height: var(--type-body-line);
  font-weight: 600;
}

.legal-text p,
.legal-text li {
  text-wrap: pretty;
}

.legal-text ul {
  padding-left: 1.25em;
  list-style: disc;
  display: flex;
  flex-direction: column;
  gap: var(--space-s2);
}

.legal-text li > ul {
  margin-top: var(--space-s2);
  list-style: circle;
}

.legal-text strong {
  font-weight: 600;
}

.legal-text code {
  font: inherit;
}

.legal-text blockquote {
  margin: 0;
  padding: var(--space-s4);
  border-radius: 16px;
  background: var(--s1);
  color: var(--t2);
}

/* Las tablas se desplazan dentro de su caja en celulares angostos: la página nunca. */
.legal-table {
  overflow-x: auto;
}

.legal-text table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--type-callout-size);
  line-height: var(--type-callout-line);
}

.legal-text th,
.legal-text td {
  padding: var(--space-s2) var(--space-s3) var(--space-s2) 0;
  border-bottom: 1px solid var(--bd);
  text-align: left;
  vertical-align: top;
}

.legal-text th {
  font-weight: 600;
  color: var(--t2);
}

.legal-draft {
  align-self: flex-start;
  padding: var(--space-s1) var(--space-s3);
  border-radius: var(--radius-full);
  background: var(--errs);
  color: var(--err);
  font-size: var(--type-caption-size);
  line-height: var(--type-caption-line);
  font-weight: 600;
}

@media (min-width: 768px) and (min-height: 600px) {
  .legal-title {
    font-size: var(--display-xl-size);
  }
}