/* ═══════════════════════════════════════════════════════════════════════════
   legal.css · Dream Life · plataforma — LA PROSA DE LOS DOCUMENTOS

   Va SOBRE `documento.css`, que trae la superficie (los dos temas, el botón, el
   filete, el pie y los legales). Esto es lo que un documento LARGO necesita y la
   puerta no tenía, porque la puerta es una pantalla de decisión y no un texto.

   ⚠️A diferencia de `documento.css`, esto **NO está extraído de una pieza
   aprobada**: es vocabulario nuevo, escrito la primera vez que la plataforma
   dibuja un documento de lectura. Se dice para que nadie lo lea como si tuviera
   vueltas de compuerta encima — todavía no tiene ninguna.

   ⭐El criterio: un documento legal se lee, no se recorre. Medida de línea corta
   (65ch), interlínea alta, y **jerarquía por espacio antes que por tamaño** — un
   texto que un revisor de cumplimiento va a leer entero no puede gritar.
   ═══════════════════════════════════════════════════════════════════════════ */

/* El documento fluye; no centra a pantalla completa como la puerta. */
body{
  margin:0;
  background:var(--fondo); color:var(--letra-2);
  font-family:var(--ui); font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
  padding-inline:max(var(--canaleta), env(safe-area-inset-left));
}

/* ── La cabecera: isotipo y la salida ─────────────────────────────────────
   §5 · acá se VUELVE, no se cierra: no hay nada a medio pagar que abandonar.
   Y no es barra fija — un documento que se lee no necesita que su salida lo
   persiga; por eso tampoco hay `scroll-padding` que reservar. */
/* 🔴D241 · **LA SALIDA SE ALINEA CON LAS ONCE DE PRODUCTO.** Con
   `padding-block:24px` la flecha caia en **y = 24,00** contra los **y = 14,00** de
   las otras once, y el fan que llega a «Reembolsos» desde el pie **no sabe que
   cambio de superficie**: para el es la misma aplicacion, y la flecha se le movia
   10 px. La barra de producto es una fila de **72 px** con todo centrado, y un
   control de 44 cae por tanto en 14; aqui se reproduce esa altura en vez de copiar
   un numero, para que siga cuadrando el dia que la barra cambie.
   ⚠️Y NO es barra fija: un documento que se lee no necesita que su salida lo
   persiga, asi que sigue sin `position` ni `scroll-padding`. Lo que se unifica es
   DONDE esta la salida, no la superficie (65ch, no la columna de 360). */
.cabecera-legal{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  max-width:65ch; margin-inline:auto;
  min-height:72px;
  padding-block:calc(0px + env(safe-area-inset-top)) 0;
}
/* 🔴D142 · **EL ENLACE DEL ISOTIPO ES UN DESTINO DE NAVEGACIÓN**, y medía 29,64 px
   de alto contra los 44,00 que este mismo repositorio le da en las siete pantallas
   de producto — y contra los 44 que `.volver-legal`, su vecino de esta misma
   cabecera, ya llevaba tres líneas más abajo. **Dos controles hermanos, uno a 44 y
   otro a 29,64.**
   ⚠️Es **D26 reabierto en la otra superficie**: `base.css` lo cerró con
   `padding-block:8px` (28+16=44), pero esta hoja se extrajo de `puerta.html`, que
   **no tiene enlace de isotipo**, así que la regla se escribió de cero y el
   arreglo no viajó. ⭐Es el patrón que este repositorio existe para matar: un
   defecto cerrado sólo en la superficie que lo denunció.
   ⭐Y no es cosmético: D141 convirtió este control en la salida hacia la
   verificación de edad, y §14 lo elevó a regla.
   ⚠️El azul `#0000EE` del navegador vivía en este `<a>` —hoy sin pintar un píxel,
   porque el SVG usa su degradado, pero es un color fuera de paleta en el elemento
   de marca—: se cierra acá, con `color` y `text-decoration` explícitos. */
.cabecera-legal > a:first-child{
  display:inline-flex; align-items:center; flex:none;
  padding-block:8px; margin-block:-8px;
  color:var(--letra-2); text-decoration:none;
}
.cabecera-legal .isotipo{width:48px; height:auto; display:block}
.volver-legal{
  display:inline-flex; align-items:center; gap:6px;
  min-height:44px; margin-inline-end:-8px; padding:8px;
  color:var(--letra-2); text-decoration:none;
  font-family:var(--ui); font-weight:650; font-size:14px; line-height:1.2;
}
.volver-legal svg{width:24px; height:24px; fill:none; stroke:currentColor;
                  stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round}

/* ── El cuerpo del documento ─────────────────────────────────────────────
   65ch y no la columna de 360: un documento de lectura tiene su propia medida,
   y la de la puerta está calibrada para una decisión de dos botones. */
.documento{max-width:65ch; margin-inline:auto; padding-block:32px 48px}
/* 🔴§3 · **Título pesa 640**, y estas dos cabeceras nacían mal las dos:
   · el `h1` heredaba el **600** que `documento.css` trae para el h1 de la puerta,
     que es un **Display** (`clamp(28,8.2vw,32)`, §13). Acá no: el título de un
     documento es un encabezado, no una portada.
   · el `h2` iba en **700**, que no es de nadie — era **el default del navegador**,
     porque esta hoja nunca lo declaró. Un peso que no se elige igual se dibuja.
   Lo cantó `npm run bandas` el mismo día: 8 de 8 cabeceras fuera de banda.
   ⚠️Y el tamaño del `h1` baja el techo a 28 para quedar ENTERO dentro de Título
   (22–28): con 30 cruzaba a Display y volvía el hueco de D133 por el otro lado. */
.documento h1{font-size:clamp(24px, 6.4vw, 28px); font-weight:640; line-height:1.2}
/* La fecha de vigencia va PEGADA al título: es parte de la identidad del
   documento, no un dato suelto — un texto legal sin fecha no dice nada. */
.actualizado{margin-top:8px; font-size:13px; color:var(--letra-2)}

/* La jerarquía la hace el ESPACIO. §3 · banda Título: 22 px y **640**.
   Y en serif, como `h1,h2,h3` en toda pantalla de producto: una superficie de
   documento cambia de TEMA, no de tipografía. */
.documento h2{margin-top:40px; font-family:var(--serif); font-size:22px;
              font-weight:640; letter-spacing:.02em; line-height:1.3; color:var(--letra)}
.documento h2 + p, .documento h2 + ul{margin-top:12px}
.documento p + p, .documento p + ul, .documento ul + p{margin-top:12px}
.documento p{font-size:16px; line-height:1.7}
.documento ul{margin:0; padding-left:20px}
.documento li{margin-top:8px; font-size:16px; line-height:1.7}
.documento strong{color:var(--letra); font-weight:650}

/* Los enlaces del cuerpo: el filete SOBRE LA PALABRA (D33/D93), permanente —
   un enlace dentro de una frase sin subrayar es invisible. */
.documento a{color:var(--letra-2); text-decoration:none}
.documento a span{border-bottom:1px solid var(--linea-borde)}
.documento a:hover span{border-bottom-color:var(--solido-fondo)}

/* ── El marcador: lo que TODAVÍA NO EXISTE se ve que no existe ────────────
   Mismo patrón que los datos del comercio (§4 de la enmienda): la sociedad no
   está constituida, así que ni la razón social ni la jurisdicción ni los plazos
   se rellenan con algo parecido al real. **Medio real y medio equis se lee como
   campo sin terminar**, y es lo primero que mira un equipo de cumplimiento.
   ⚠️En un documento legal esto pesa más que en un pie: un plazo inventado es una
   obligación inventada. */
/* ⚠️Ni `inline-block` ni `nowrap`: los dos juntos hacen que un marcador largo
   ocupe el renglón entero y **deje el punto final huérfano en el siguiente** — un
   `inline-block` abre oportunidad de corte después de sí mismo. Visto en el render
   de `privacidad`, no en el código.
   Va `inline` con `box-decoration-break:clone`, que cierra el borde punteado en
   los dos fragmentos cuando envuelve: el marcador se parte como texto y el punto
   se queda con él. */
.marcador{
  display:inline; padding:1px 8px; border-radius:var(--radio);
  border:1px dashed var(--linea-borde);
  -webkit-box-decoration-break:clone; box-decoration-break:clone;
  font-size:.94em; color:var(--letra-2);
}
/* El bloque entero pendiente, cuando lo que falta es una sección y no un dato. */
.pendiente{
  margin-top:12px; padding:16px;
  border:1px dashed var(--linea-borde); border-radius:var(--radio);
}
.pendiente p{font-size:15px; line-height:1.6}
.pendiente .rot{
  display:block; margin-bottom:8px;
  font-size:11px; font-weight:620; letter-spacing:.13em; text-transform:uppercase;
  color:var(--letra-2);
}

/* ── El pie del documento ────────────────────────────────────────────────── */
.pie-legal{
  max-width:65ch; margin-inline:auto;
  padding-block:0 calc(32px + env(safe-area-inset-bottom));
}
/* ⚠️`documento.css` trae `.legales` CENTRADO, porque en la puerta todo se centra.
   Un documento se lee alineado a la izquierda, y ahí el centrado deja «Contacto»
   colgando solo en mitad del renglón siguiente — se vio en el primer render. Se
   alinea con la medida del texto; el `gap:16px` de D32 (los dos ejes) se respeta. */
.pie-legal .legales{justify-content:flex-start}

/* Los datos del comercio, cuando el documento los lleva. Mismo marcador. */
.comercio{font-size:12px; line-height:1.6; color:var(--letra-2);
          font-variant-numeric:tabular-nums}
/* ⚠️Llevaba `white-space:normal`, que desde que `.marcador` dejó de declarar
   `nowrap` sobrescribía el valor por defecto **con el valor por defecto**. Muerta
   desde el arreglo del punto huérfano; fuera. Misma familia que D127. */
.comercio.marcador{display:block; padding:16px; margin-top:12px}
.comercio ul{list-style:none; margin:0; padding:0}
.comercio .rot{display:block; margin-bottom:12px; font-size:11px; font-weight:620;
               letter-spacing:.13em; text-transform:uppercase; color:var(--letra-2)}
.comercio .nota{margin-top:12px; font-size:11px; line-height:1.6; color:var(--letra-2)}