/* Lo propio de las páginas de texto legal.
 *
 * Es una página para leer, no para mirar: columna estrecha, interlineado
 * generoso y nada que distraiga. La cabecera azul y el enlace de vuelta
 * vienen de estilos.css, compartidos con la página del test.
 */

body { background: var(--gris-claro); }

.legal {
  max-width: 44rem;
  margin: 0 auto;
  padding: 2rem 1rem 4rem;
}

.legal__caja {
  background: #fff;
  border-radius: var(--r-grande);
  padding: clamp(1.75rem, 1.25rem + 2.4vw, 3rem);
  box-shadow: var(--sombra);
}

.legal h1 {
  font-size: clamp(1.75rem, 1.4rem + 1.6vw, 2.375rem);
  margin-bottom: .5rem;
}

/* La fecha de la versión. Un aviso de privacidad sin fecha no sirve:
 * no se puede saber cuál estaba vigente cuando alguien dio sus datos. */
.legal__fecha {
  font-size: .9375rem;
  color: var(--texto-suave);
  margin-bottom: 2rem;
}

.legal h2 {
  font-size: clamp(1.125rem, 1.05rem + .4vw, 1.3125rem);
  color: var(--azul-profundo);
  margin: 2.5rem 0 .875rem;
}
.legal h2:first-of-type { margin-top: 2rem; }

.legal p {
  margin-bottom: 1.125rem;
  line-height: 1.75;
}

.legal ul {
  margin: 0 0 1.5rem;
  padding: 0;
  list-style: none;
}

/* La misma cruz de la marca que usan las viñetas del sitio */
.legal li {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  margin-bottom: .5rem;
  line-height: 1.6;
}
.legal li::before {
  content: "";
  width: .75rem; height: .75rem;
  margin-top: .45em;
  flex: 0 0 auto;
  background:
    linear-gradient(var(--ambar) 0 0) center / 100% 34%,
    linear-gradient(var(--ambar) 0 0) center / 34% 100%;
  background-repeat: no-repeat;
}

.legal a { color: var(--azul); }

/* El último apartado, el de la autorización, va destacado: es el que
 * la persona acepta al marcar la casilla de los formularios. */
.legal__autorizacion {
  margin-top: 2.5rem;
  padding: 1.5rem;
  background: var(--azul-tenue);
  border-radius: var(--r-medio);
}
.legal__autorizacion h2 { margin-top: 0; }
.legal__autorizacion p:last-child { margin-bottom: 0; }

.legal__pie {
  margin-top: 2rem;
  text-align: center;
  font-size: .9375rem;
}