/* ===========================================================================
   Páginas legales.

   Un documento legal que no se puede leer no protege a nadie. La medida de
   línea se queda cerca de los 70 caracteres, la jerarquía es de dos niveles y
   no hay adornos: quien llega aquí viene a buscar un dato concreto —cómo pedir
   que borren sus datos, hasta cuándo puede facturar, si le devuelven el dinero—
   y tiene que encontrarlo sin leerlo todo.

   Hereda los tokens de landing.css, así que sigue el tema claro y oscuro del
   sitio sin definir un solo color propio.
   =========================================================================== */

.legal {
  max-width: 74ch;
  margin: 0 auto;
  padding: 0 24px 96px;
}

.legal-head {
  padding: 56px 0 32px;
  border-bottom: 1px solid var(--hairline);
  margin-bottom: 40px;
}
.legal-head h1 {
  margin: 14px 0 12px;
  font-family: var(--display, inherit);
  font-size: clamp(30px, 5vw, 44px);
  line-height: 1.08;
  letter-spacing: -.03em;
  text-wrap: balance;
}
.legal-head .lede { margin: 0; font-size: 16px; line-height: 1.6; color: var(--ink-2); }

/* Fecha de vigencia: en un documento legal no es un detalle, es lo que dice
   qué versión aceptó la persona. */
.legal-meta {
  display: flex; flex-wrap: wrap; gap: 8px 18px;
  margin-top: 20px; font-size: 13px; color: var(--ink-3);
}
.legal-meta b { color: var(--ink-2); font-weight: 600; }

.legal h2 {
  margin: 44px 0 14px;
  font-size: 21px;
  letter-spacing: -.02em;
  scroll-margin-top: 90px;
}
.legal h3 { margin: 28px 0 10px; font-size: 16px; }

.legal p, .legal li {
  font-size: 15.5px;
  line-height: 1.68;
  color: var(--ink-2);
}
.legal p { margin: 0 0 16px; }
.legal strong { color: var(--ink); font-weight: 600; }

.legal ul, .legal ol { margin: 0 0 18px; padding-left: 22px; }
.legal li { margin-bottom: 9px; }
.legal li::marker { color: var(--ink-3); }

.legal a { color: var(--accent-text); text-underline-offset: 3px; }

/* Índice de la propia página. En un texto largo es la diferencia entre
   encontrar la cláusula y rendirse. */
.legal-toc {
  margin: 0 0 44px;
  padding: 20px 22px;
  border: 1px solid var(--hairline);
  border-radius: 16px;
  background: var(--surface);
}
.legal-toc h2 {
  margin: 0 0 12px;
  font-size: 11px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-3);
}
.legal-toc ol { margin: 0; padding-left: 20px; }
.legal-toc li { margin-bottom: 7px; font-size: 14.5px; }

/* Tablas de datos: derechos ARCO, plazos, qué se guarda. */
.legal-tabla { width: 100%; border-collapse: collapse; margin: 0 0 22px; font-size: 14.5px; }
.legal-tabla th, .legal-tabla td {
  text-align: left; padding: 11px 12px; border-bottom: 1px solid var(--hairline);
  vertical-align: top; line-height: 1.55;
}
.legal-tabla th { color: var(--ink); font-weight: 600; }
.legal-tabla td { color: var(--ink-2); }
.legal-tabla thead th {
  font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3);
}
.legal-tabla-wrap { overflow-x: auto; }

/* Lo que el dueño del negocio TIENE que rellenar antes de publicar. Se ve
   deliberadamente mal: si pasa desapercibido, se publica un documento con
   huecos y eso es peor que no tenerlo. */
.pendiente {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 5px;
  background: var(--accent-soft);
  border: 1px dashed var(--accent);
  /* Token propio y no --accent-text: sobre el fondo de este marcador aquel da
     4.29:1. Ademas el fondo cambia con el tema, asi que un color fijo seria
     legible en uno e ilegible en el otro. */
  color: var(--pendiente-fg);
  font-family: var(--mono, ui-monospace, monospace);
  font-size: .88em;
  font-weight: 600;
  white-space: nowrap;
}

.aviso-borrador {
  margin: 0 0 36px;
  padding: 18px 20px;
  border: 1px solid var(--accent);
  border-left-width: 4px;
  border-radius: 12px;
  background: var(--accent-soft);
}
.aviso-borrador p { margin: 0; color: var(--ink); font-size: 14.5px; }
.aviso-borrador p + p { margin-top: 10px; }

.legal-nav {
  display: flex; flex-wrap: wrap; gap: 8px;
  padding: 28px 0 0; margin-top: 48px; border-top: 1px solid var(--hairline);
}
.legal-nav a {
  padding: 8px 14px; border: 1px solid var(--hairline); border-radius: 999px;
  font-size: 13.5px; text-decoration: none; color: var(--ink-2);
}
.legal-nav a:hover { border-color: var(--accent); color: var(--accent-text); }
.legal-nav a[aria-current="page"] {
  border-color: var(--accent); color: var(--accent-text); font-weight: 600;
}

@media (max-width: 560px) {
  .legal { padding: 0 16px 72px; }
  .legal-head { padding-top: 36px; }
}