/* ==========================================================================
   EXIT RIDDLES — páginas legales
   --------------------------------------------------------------------------
   Esto es un SUPLEMENTO de `/assets/portada.css`, no un archivo autónomo.
   Las páginas legales cargan las dos hojas, en ese orden.

   Por qué, cuando lo obvio parecía escribir una hoja pequeña e independiente:
   quien llega aquí llega casi siempre desde el pie de la portada, así que ya
   tiene `portada.css` y las tipografías en la caché — enlazarlas de nuevo
   cuesta CERO bytes y hereda gratis la paleta, las fuentes autoalojadas, los
   botones y `.wrap`. Duplicar los tokens en un archivo aparte habría costado
   bytes de verdad y, peor, habría creado una segunda marca que se despega de
   la primera al primer retoque.

   Lo único que hay aquí es lo que la portada no necesitaba: un documento
   largo que se lee de arriba abajo.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Barra
   -------------------------------------------------------------------------- */
.lbar {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.6rem 0;
  background: rgb(20 16 14 / 0.94);
  border-bottom: 1px solid rgb(184 147 78 / 0.22);
  backdrop-filter: blur(8px);
}

.lbar__in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
}

.lbar__brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--brass);
  text-decoration: none;
  font-family: var(--font-display);
  font-size: 0.8rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.lbar__brand img {
  width: 26px;
  height: auto;
}

.lbar__brand:hover {
  color: var(--brass-hi);
}

/* --------------------------------------------------------------------------
   El documento
   --------------------------------------------------------------------------
   Ancho de LECTURA, no ancho de página: `--wrap` son 1180 px y una línea de
   esa longitud se pierde al saltar de renglón. 62 caracteres es la medida a
   la que se lee sin esfuerzo.
   -------------------------------------------------------------------------- */
.ldoc {
  width: min(100% - 2.5rem, 62ch);
  margin: 0 auto;
  padding: 3rem 0 4rem;
}

.ldoc__kicker {
  margin: 0 0 0.4rem;
  font-family: var(--font-display);
  font-size: 0.7rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--brass-mid);
}

.ldoc h1 {
  margin: 0 0 0.6rem;
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 1.2rem + 2vw, 2.5rem);
  font-weight: 700;
  line-height: 1.15;
  color: var(--ink);
}

.ldoc h2 {
  margin: 2.6rem 0 0.7rem;
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 0.95rem + 0.5vw, 1.25rem);
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--brass-hi);
}

.ldoc h3 {
  margin: 1.8rem 0 0.4rem;
  font-family: var(--font-display);
  font-size: 0.95rem;
  letter-spacing: 0.04em;
  color: var(--ink);
}

.ldoc p,
.ldoc li {
  margin: 0 0 0.9rem;
}

.ldoc ul,
.ldoc ol {
  margin: 0 0 1.1rem;
  padding-inline-start: 1.25rem;
}

.ldoc li::marker {
  color: var(--brass-mid);
}

.ldoc a {
  color: var(--brass-hi);
  text-decoration-color: rgb(184 147 78 / 0.5);
  text-underline-offset: 3px;
}

.ldoc a:hover {
  text-decoration-color: currentcolor;
}

.ldoc strong {
  color: var(--ink);
  font-weight: 700;
}

/* Fecha y entradilla. */
.ldoc__meta {
  margin: 0 0 2rem;
  color: var(--ink-dim);
  font-size: 0.85rem;
  letter-spacing: 0.04em;
}

.ldoc__lead {
  font-size: 1.1em;
  color: var(--ink);
}

/* --------------------------------------------------------------------------
   Recuadro de aviso — lo que no se puede leer por encima
   -------------------------------------------------------------------------- */
.lnote {
  margin: 1.6rem 0;
  padding: 1rem 1.2rem;
  border: 1px solid rgb(184 147 78 / 0.4);
  border-inline-start: 3px solid var(--brass);
  border-radius: var(--r);
  background: rgb(34 28 24 / 0.7);
}

.lnote > :last-child {
  margin-bottom: 0;
}

/* Un dato que hay que copiar: correo, importe, código. */
.ldato {
  font-family: var(--font-display);
  letter-spacing: 0.06em;
  color: var(--brass-hi);
}

/*
 * Aquí vivía `.lpend`, el recuadro naranja de los marcadores pendientes
 * (`[NOMBRE Y APELLIDOS]`, `[NIP]`…). Ya no hay ninguno: las páginas no
 * publican datos personales, solo la marca y el vendedor legal
 * (`docs/legal/README.md` §2). Si algún día vuelve a hacer falta un marcador,
 * está en el historial — con la nota de por qué no puede llevar
 * `white-space: nowrap`.
 */

/* --------------------------------------------------------------------------
   Pie de las páginas legales
   -------------------------------------------------------------------------- */
.lfoot {
  padding: 2rem 0 3rem;
  border-top: 1px solid rgb(184 147 78 / 0.2);
  background: #0a0807;
}

.lfoot__nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.4rem;
  margin-bottom: 0.9rem;
}

.lfoot__nav a {
  color: var(--ink-dim);
  font-family: var(--font-display);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 0.35rem 0;
}

.lfoot__nav a:hover,
.lfoot__nav a[aria-current="page"] {
  color: var(--brass-hi);
}

.lfoot__c {
  margin: 0;
  color: var(--ink-dim);
  font-size: 0.82rem;
}

@media (pointer: coarse) {
  .lfoot__nav a {
    min-height: var(--touch-min);
    display: inline-flex;
    align-items: center;
  }
}