/* ═══════════════════════════════════════════════════════════════════════════
   documento.css · Dream Life · plataforma — LA SEGUNDA SUPERFICIE DEL SISTEMA

   ⭐`base.css` es superficie de PRODUCTO: marino SIEMPRE, porque la galería
   depende del velo y el velo necesita fondo oscuro. Esto es superficie de
   DOCUMENTO —las cuatro legales, el comprobante, la puerta— y **sigue al tema
   del sistema**, que es lo que §10 legisla. Por eso `color-scheme:light dark` y
   no `dark`, al revés que en el producto. Las dos superficies no se mezclan: una
   pieza consume `base.css` o consume esto, nunca las dos.

   ⚠️EXTRAÍDO de `puerta.html`, la pieza que lo pagó (D32–D41, aprobada), con sus
   comentarios enteros. **El comentario es el defecto que ya no hay que volver a
   encontrar**: si se recorta para «limpiar», el siguiente lo reintroduce.

   🔴Y una advertencia que hay que leer: esto sale de UNA sola pieza, así que hoy
   **no está medido como idéntico en varias** — lo estará cuando las cuatro
   legales lo consuman y `npm run divergencias` las compare. `puerta.html` sigue
   con su copia inline **porque está APROBADA y no se toca sin autorización**: la
   divergencia queda escrita en `docs/divergencias.md`, asignada a su próxima
   vuelta. Escrita, no perdida — que es la diferencia que este repo existe para
   sostener.

   ⚠️Lo que NO está acá: `html`/`body` (la puerta centra a pantalla completa; un
   documento largo fluye) ni la composición propia de la puerta. Cada pieza pone
   su flujo.
   ═══════════════════════════════════════════════════════════════════════════ */

:root{
  color-scheme:light dark;
  /* ── Superficies oscuras (§2.1) ───────────────────────────────────────── */
  --marino-hondo:#0A1524; --marino:#0F1D33; --marino-alto:#16294A;
  --borde:#22354F; --borde-vivo:#33496B;
  /* ── Superficies claras (§2.2) ────────────────────────────────────────── */
  --papel:#F4F2ED; --papel-alto:#FFFFFF; --borde-papel:#DCD6C9;
  /* D35 · Sobre papel faltaba una línea CON CUERPO: `--borde-papel` da 1,17:1 contra
     los 2,01 que `--borde-vivo` tiene en oscuro, así que el tema claro quedaba sin el
     equivalente del borde vivo. Se tomó prestado `#9AA7BC`, que es **filete del
     logo-claro** y §2.3 lo reserva para pintar el logo — nunca para interfaz.
     Este se DERIVA de los marinos, como manda §2.5: 35 % de `--marino-alto` sobre
     `--papel` = #A6ACB4, que mide **2,04:1**, el mismo peso que su gemelo oscuro. */
  --borde-vivo-papel:#A6ACB4;
  /* ── Marca (§2.3) ─────────────────────────────────────────────────────── */
  --platino:#D8D2C6; --metal:#8F897D;
  /* ── Texto (§2.4) ─────────────────────────────────────────────────────── */
  --texto:#EDE9E2; --texto-2:#B4BECE; --texto-3:#78859C;
  --tinta:#0F1D33; --tinta-2:#3D4B62; --tinta-3:#6B7788;
  /* ── Tipografía (§3) ──────────────────────────────────────────────────── */
  --serif:Optima,'Palatino Linotype',Palatino,Georgia,serif;
  --ui:system-ui,-apple-system,'Segoe UI',sans-serif;
  /* ── Movimiento y forma (§4) ──────────────────────────────────────────── */
  --curva:cubic-bezier(.22,.8,.28,1);
  --radio:4px;
  --canaleta:20px;

  /* ── Los cinco papeles que cambian con el tema ─────────────────────────
     Se declaran como ROLES y no como colores para que el resto de la hoja no
     tenga una sola bifurcación de tema: la bifurcación ocurre una vez, acá. */
  --fondo:var(--papel);
  --letra:var(--tinta);
  --letra-2:var(--tinta-2);
  --letra-3:var(--tinta-3);
  --filete:var(--borde-papel);
  --solido-fondo:var(--tinta);
  --solido-letra:var(--papel);
  --linea-borde:var(--borde-vivo-papel);
}

@media (prefers-color-scheme:dark){
  :root{
    --fondo:var(--marino-hondo);
    --letra:var(--texto);
    --letra-2:var(--texto-2);
    --letra-3:var(--texto-3);
    --filete:var(--borde);
    --solido-fondo:var(--platino);
    --solido-letra:var(--marino);
    --linea-borde:var(--borde-vivo);
  }
}

*{box-sizing:border-box; -webkit-tap-highlight-color:transparent}

h1{margin:0; font-family:var(--serif); font-weight:600; color:var(--letra);
   letter-spacing:.02em; text-wrap:balance;
   /* Mismo criterio que el display de la portada (§3, obligación 5): fluido con piso,
      para que una traducción larga no lo parta en pantallas angostas. */
   font-size:clamp(28px, 8.2vw, 32px); line-height:1.18}

p{margin:0}

a:focus-visible,button:focus-visible{outline:2px solid var(--solido-fondo); outline-offset:3px}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important; transition:none!important}
}

.columna{width:100%; max-width:360px}

/* Golpeo mínimo de §4: 44 px en las dos dimensiones. El relleno de 12+12 más la
   línea de 19,2 da 43,2, o sea se queda a 0,8 — el mismo medio píxel que ya nos
   costó un defecto en los botones que mueven plata. Por eso va `min-height`. */
.boton{
  display:inline-flex; align-items:center; justify-content:center; min-height:44px;
  font-family:var(--ui); font-weight:650; font-size:15px; line-height:1.2;
  background:var(--solido-fondo); color:var(--solido-letra);
  border:1px solid var(--solido-fondo); border-radius:var(--radio);
  padding:12px 16px; cursor:pointer; text-decoration:none; width:100%;
  transition:filter .25s var(--curva);
}

.boton:active{transform:translateY(1px)}

.boton.linea{background:transparent; color:var(--letra); border-color:var(--linea-borde)}

.filete{border:0; border-top:1px solid var(--filete); margin:32px 0 0}

/* ⚠️El texto de 12 px va en `--letra-2`, NO en `--letra-3`, y es un hallazgo del
   token y no de esta pieza: **`--tinta-3` (#6B7788) sobre `--papel` da 4,06:1** y
   §10 exige 4,5 como mínimo. En oscuro `--texto-3` da 4,92 y pasa, pero apenas.
   A 12 px WCAG pide 4,5 —el umbral relajado de 3,0 es solo para texto grande—, así
   que el terciario **no sirve para texto chico sobre papel**. Se usa el secundario,
   que da 7,88, en vez de inventar un color fuera del manual (§5). */
.pie{margin-top:16px; font-size:12px; line-height:1.6; color:var(--letra-2)}

/* D32 · `gap` en los DOS ejes. Con el eje vertical en 0, al partirse la fila dos áreas
   de toque de 44 px compartían borde: separación 0,00 px contra los 8 que pide §4. Y no
   era un caso de borde — se partía en cinco de los seis idiomas, en alemán en TODOS los
   anchos de 320 a 440. Va en 16, que también está en la escala y deja los cuatro
   destinos más aireados ahora que no hay punto entre ellos.

   D34 · D37 · SIN SEPARADOR, y esta es la tercera versión. El `·` estaba primero como
   elemento suelto y colgaba al FINAL del renglón; se movió a `::before` del enlace
   siguiente y pasó a colgar al PRINCIPIO del renglón nuevo. Es el mismo defecto
   espejado, y no es casualidad: **flexbox no sabe dónde va a cortar la fila**, así que
   un separador visible siempre queda huérfano por alguna punta. Medido: se partía en
   22 de 60 casos (6 idiomas × 5 anchos × 2 temas), en francés, alemán y ruso.
   Con 16 px de separación y cada palabra subrayada, los cuatro se leen como cuatro
   destinos sin necesidad del punto — y desaparece el único elemento que se rompía al
   envolver. La lección: **lo que se rompe al envolver es lo que sobra.** */
.legales{margin-top:8px; display:flex; flex-wrap:wrap; justify-content:center; gap:16px}

.legales a{display:inline-flex; align-items:center; min-height:44px;
           color:var(--letra-2); font-size:12px; text-decoration:none}

/* D33 · el filete va sobre la PALABRA, no sobre la caja de golpeo. Con el borde en el
   `<a>` de 44 px de alto y el texto centrado dentro, el subrayado quedaba flotando
   14,4 px bajo la palabra —casi una línea entera— y se leía como error de maquetación,
   en la pantalla que tiene que decir «serio». El área de toque sigue siendo 44. */
.legales a span{border-bottom:1px solid var(--linea-borde)}