/* Edén — páginas legales.
   ------------------------------------------------------------------
   Un solo fichero para las páginas de /legal/. No toca nada de
   `styles.css`: hereda sus variables (--verde, --crema-papel, --sans,
   --serif, --ancho) y solo añade lo que un texto largo necesita y el
   resto del sitio no tiene: una columna estrecha, jerarquía de
   epígrafes y un bloque para las notas dirigidas a Gabriela.

   La columna va a 74 caracteres. Es el ancho de lectura cómoda: más
   allá, el ojo pierde el renglón al volver a la izquierda.

   Sin media queries de color: el sitio entero es un solo tema. */

.legal {
  background: var(--crema-papel);
  color: var(--tinta);
  padding-bottom: 90px;
}

.legal__int {
  max-width: 760px;
  margin: 0 auto;
  padding: 40px 20px 0;
}

.legal__titulo {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(30px, 6vw, 44px);
  line-height: 1.14;
  color: var(--verde);
  margin: 10px 0 14px;
  letter-spacing: .005em;
}

.legal__fecha {
  font-size: 13px;
  color: var(--gris);
  margin: 0 0 36px;
  padding-bottom: 22px;
  border-bottom: 1px solid rgba(187, 148, 89, .35);
}

/* ---------- Texto ---------- */

.legal h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(21px, 3.4vw, 26px);
  line-height: 1.22;
  color: var(--verde);
  margin: 48px 0 14px;
}

.legal h3 {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 16px;
  line-height: 1.35;
  color: var(--verde);
  margin: 30px 0 10px;
}

.legal p,
.legal li {
  font-size: 16px;
  line-height: 1.72;
  color: var(--tinta);
}

.legal p { margin: 0 0 16px; }

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

.legal strong { font-weight: 600; }

.legal a {
  color: var(--verde);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-color: rgba(187, 148, 89, .8);
}
.legal a:hover { text-decoration-color: var(--verde); }

/* La norma citada, en versalitas de color, para que se distinga del
   texto corrido sin gritar. */
.legal__norma {
  display: block;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--gris);
  margin: -6px 0 18px;
  padding-left: 14px;
  border-left: 2px solid rgba(187, 148, 89, .5);
}

/* ---------- Lo que Gabriela tiene que decidir ----------
   Va marcado y no escondido: si queda un hueco sin rellenar, tiene que
   verse desde el otro lado de la habitación. */

.legal__gabriela {
  background: rgba(187, 148, 89, .12);
  border: 1px solid var(--oro);
  border-radius: var(--radio);
  padding: 16px 18px;
  margin: 0 0 20px;
  font-size: 15px;
  line-height: 1.62;
  color: var(--tinta);
}

.legal__gabriela::before {
  content: "Pendiente de Gabriela";
  display: block;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--oro-texto);
  margin-bottom: 7px;
}

/* ---------- Aviso duro ---------- */

.legal__aviso {
  background: rgba(1, 67, 63, .06);
  border-left: 3px solid var(--verde);
  border-radius: 0 var(--radio) var(--radio) 0;
  padding: 16px 18px;
  margin: 0 0 22px;
}
.legal__aviso p:last-child { margin-bottom: 0; }

/* ---------- Tabla de datos ---------- */

.legal__tabla {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 24px;
  font-size: 15px;
}
.legal__tabla th,
.legal__tabla td {
  text-align: left;
  vertical-align: top;
  padding: 11px 12px 11px 0;
  border-bottom: 1px solid rgba(107, 107, 99, .22);
  line-height: 1.6;
}
.legal__tabla th {
  font-weight: 600;
  color: var(--verde);
  width: 38%;
}

/* ---------- Índice de las demás páginas legales ---------- */

.legal__otras {
  margin-top: 54px;
  padding-top: 24px;
  border-top: 1px solid rgba(187, 148, 89, .35);
}
.legal__otras h2 { margin-top: 0; font-size: 19px; }
.legal__otras ul { list-style: none; padding: 0; margin: 0; }
.legal__otras li { margin-bottom: 7px; }

@media (min-width: 900px) {
  .legal__int { padding-top: 56px; }
  .legal { padding-bottom: 110px; }
}

/* El hueco de un dato que todavia no esta. Discreto y en cursiva: tiene que
   leerse como "falta", no como "no aplica", y no debe robarle atencion al
   texto legal que lo rodea. Se va en cuanto Gabriela entregue los datos. */
.legal__falta {
  font-style: italic;
  color: var(--gris);
}