/* Las páginas legales. Mismo diseño que el resto del sitio (theme.css +
   landing.css); esto solo añade lo que un texto largo necesita: una columna
   legible, numeración de apartados y el rojo de los datos que faltan. */

.legal-doc {
  max-width: 46rem;
}

.legal-doc h2 {
  margin-top: var(--sp-7);
  scroll-margin-top: 5rem;
}

.legal-doc h3 {
  margin-top: var(--sp-5);
  font-size: 1.02rem;
}

.legal-doc p,
.legal-doc li {
  line-height: 1.62;
}

.legal-doc ul,
.legal-doc ol {
  margin: 0 0 var(--sp-4);
  padding-left: 1.2rem;
}

.legal-doc li {
  margin-bottom: .4rem;
}

.legal-fecha {
  opacity: .72;
  font-size: .9rem;
}

/* El aviso de arriba: esta página está publicada con huecos a propósito. */
.legal-alerta {
  border: 1px solid rgba(214, 69, 69, .45);
  background: rgba(214, 69, 69, .07);
  border-radius: var(--r-3, 12px);
  padding: var(--sp-4) var(--sp-5);
  margin: var(--sp-5) 0 var(--sp-6);
}

.legal-alerta p {
  margin: 0 0 .5rem;
}

.legal-alerta p:last-child {
  margin-bottom: 0;
}

/* Cada dato que falta, señalado. Si alguien publica esto en serio sin
   rellenarlo, se ve desde la otra punta de la pantalla. */
.legal-pendiente,
.legal-doc [data-pendiente] {
  color: #b3261e;
  background: rgba(214, 69, 69, .1);
  border-bottom: 1px dashed rgba(179, 38, 30, .6);
  padding: 0 .2em;
  border-radius: 3px;
  font-weight: 600;
  white-space: nowrap;
}

.legal-indice {
  border: 1px solid var(--linea, rgba(0, 0, 0, .12));
  border-radius: var(--r-3, 12px);
  padding: var(--sp-4) var(--sp-5);
  margin: var(--sp-5) 0;
}

.legal-indice ol {
  margin: 0;
  columns: 2;
  column-gap: var(--sp-6);
}

@media (max-width: 640px) {
  .legal-indice ol { columns: 1; }
  .legal-pendiente { white-space: normal; }
}

.legal-tabla {
  width: 100%;
  border-collapse: collapse;
  margin: var(--sp-4) 0 var(--sp-5);
  font-size: .94rem;
}

.legal-tabla th,
.legal-tabla td {
  text-align: left;
  vertical-align: top;
  padding: .55rem .6rem;
  border-bottom: 1px solid var(--linea, rgba(0, 0, 0, .12));
}

.legal-tabla th {
  font-weight: 650;
  white-space: nowrap;
}

.legal-firma {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-6);
  margin-top: var(--sp-6);
}

.legal-firma div {
  border-top: 1px solid var(--linea, rgba(0, 0, 0, .3));
  padding-top: .6rem;
  font-size: .9rem;
}

@media (max-width: 640px) {
  .legal-firma { grid-template-columns: 1fr; }
}