/* ═══════════════════════════════════════════════ Templum — Legal ══
   Términos y condiciones y aviso de privacidad. Es texto que se lee de
   corrido, no una pieza de venta: aquí manda la lectura y el ornamento se
   retira a los bordes. Sigue siendo la misma casa —tinta, oro, Playfair—
   pero sin nada que compita con el párrafo.                            */

.cabecera-legal {
  position: relative;
  padding: calc(var(--barra) + var(--s-6)) 0 var(--s-5);
  border-bottom: 1px solid var(--oro-linea);
}
.cabecera-legal::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(120% 90% at 50% 0%,
    rgba(201, 162, 75, .11) 0%, rgba(201, 162, 75, 0) 60%);
}
.cabecera-legal .titulo { margin-top: var(--s-3); }
.cabecera-legal .actualizado {
  margin-top: var(--s-4);
  font-family: var(--sans); font-size: var(--t-cejilla); font-weight: 600;
  letter-spacing: var(--track-cejilla); text-transform: uppercase;
  color: var(--marfil-2);
}

/* ------------------------------------------------------------ Documento
   Medida de 68 caracteres. Un texto legal a todo el ancho de la pantalla no
   lo lee nadie: el ojo pierde el renglón al volver y se abandona en el
   segundo apartado.                                                      */
.documento {
  padding-block: var(--s-7);
  max-width: 68ch;
  margin-inline: auto;
}
.documento > * + * { margin-top: var(--s-4); }

.documento h2 {
  font-family: var(--serif); font-size: var(--t-h2);
  line-height: var(--lh-titulo); font-weight: 600;
  color: var(--marfil);
  margin-top: var(--s-7);
  display: flex; align-items: baseline; gap: 16px;
}
/* El número del apartado en oro, fuera de la columna de texto en pantallas
   anchas: numera sin meterse en la lectura. */
.documento h2 .n {
  font-size: .62em; color: var(--oro); font-weight: 400;
  font-variant-numeric: tabular-nums;
  flex: none;
}
.documento h2 + * { margin-top: var(--s-4); }
.documento h2:first-of-type { margin-top: 0; }

.documento p,
.documento li {
  font-family: var(--serif); font-size: var(--t-cuerpo);
  line-height: var(--lh-cuerpo); color: var(--marfil-2);
}
.documento strong { color: var(--marfil); font-weight: 600; }

/* Las listas del documento llevan rombo de oro, el mismo ornamento que los
   numerales de sección. No hay viñeta de sistema en toda la página. */
.documento ul { list-style: none; display: grid; gap: var(--s-3); }
.documento li { position: relative; padding-left: 26px; }
.documento li::before {
  content: ""; position: absolute; left: 2px; top: .62em;
  width: 6px; height: 6px; transform: rotate(45deg);
  background: var(--oro);
}
.documento li b {
  display: block; color: var(--oro-claro);
  font-family: var(--sans); font-size: var(--t-ui); font-weight: 600;
  letter-spacing: .04em;
  margin-bottom: 4px;
}

.documento a { color: var(--oro-claro); text-underline-offset: 3px; }
.documento a:hover { color: var(--oro); }

/* Bloque de contacto al cierre del documento, con el marco de la casa. */
.contacto-legal {
  margin-top: var(--s-7);
  padding: var(--s-5);
  border: 1px solid var(--oro-linea);
  background: var(--negro-3);
  position: relative;
}
.contacto-legal h3 {
  font-family: var(--serif); font-size: var(--t-h3); font-weight: 600;
  color: var(--marfil);
}
.contacto-legal ul {
  list-style: none; display: grid; gap: 10px; margin-top: var(--s-3);
}
.contacto-legal li { padding-left: 0; }
.contacto-legal li::before { display: none; }

/* Aviso de discrepancia con el documento original. No se maquilla ni se
   corrige por cuenta propia un texto jurídico: se replica fiel y se señala
   para que lo resuelva quien lleva lo legal. */
.nota-revision {
  margin-top: var(--s-6);
  padding: var(--s-4);
  border-left: 2px solid var(--alerta-linea);
  background: rgba(224, 138, 95, .05);
}
.nota-revision p {
  font-family: var(--sans); font-size: .84rem; line-height: 1.6;
  color: var(--marfil-2);
}
.nota-revision b { color: var(--alerta); font-weight: 600; }

@media (max-width: 640px) {
  .documento { padding-block: var(--s-6); }
  .documento h2 { margin-top: var(--s-6); flex-direction: column; gap: 4px; }
  .contacto-legal { padding: var(--s-4); }
}