/* ═══════════════════════════════════════════════════════════════════════════
   LA PORTADA K2 · `/` y `/producto` (app/templates/landing.html y sus
   parciales _landing_*.html)

   Porte de la maqueta aprobada por José el 13-oct-2026: la ronda 7 con la
   portada «b» (design/landing-k2/ronda7, rama claude/landing-k2), con los
   marcos de vidrio opacos que recibió ese día por el lag al desplazar (§3).
   Esta hoja es, en orden, su arte/arte.css, su pagina.css y su ronda7.css,
   con los nombres de clase intactos para que sus arreglos se apliquen sin
   traducirlos. La arma scripts/portada_k2_hojas.py desde la maqueta: un
   arreglo de la maqueta se trae corriéndolo de nuevo, no a mano. Lo que
   cambió al portarla:
     · sin los interruptores de medición (?portada, ?titular, ?escena, ?cupo,
       ?programa, ?arte, ?desenfoque, ?vidrio) ni la portada «a» desde 1101:
       el cupo y el programa los decide el servidor, y ninguna regla los
       esconde;
     · sin las piezas de la ronda 5 que la página ya no usa (el conector viejo,
       la tabla, la respuesta);
     · la baldosa se llama --b-baldosa-*, como en /j/; el arte va con la huella
       de su archivo (?v=), porque Cloudflare guarda /static 4 horas;
     · las entradas que esperan a verse quedan en pausa bajo html.m-anima,
       que pone landing.js, y no bajo html.js: si el guion no carga, todo se
       ve entero y quieto (en la maqueta quedaba invisible).
     · al final, §8: los arreglos que pidieron las revisiones del porte, que
       la maqueta no tiene (el panel en pantallas bajas, el titular que
       reserva sus renglones, el pie con los números anteriores…).
   Va después de k2_tokens.css y k2_base.css, y DESPUÉS de landing-piezas.css
   (las piezas de Documentos y del conector, que no bloquean la primera
   pintura): el mismo orden de la maqueta, así que gana en los empates.

   Reglas que la guardan (tests/test_k2_base_jinja.py, test_landing_k2.py y
   test_diseno_paleta.py): ningún color literal fuera de la baldosa; nada
   apagado con opacity (solo en @keyframes); ningún :has() sobre html o body;
   todo var(--x) definido en k2_tokens.css, k2_base.css o aquí.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ═══ El arte de fondo (arte/arte.css de la maqueta) ═══════════════════════
   Líneas de flujo estáticas (familia del Vol. II del boletín) y un grano fino.
   Los archivos los escribe arte/generar.py de la maqueta, ya coloreados con
   --logo-ink de cada tema (una imagen de fondo no lee variables; anotado en
   docs/DISENO.md §4 y atado por tests/test_landing_k2.py). Aquí, el lugar.
   · El anfitrión (la sección) queda `position: relative; isolation: isolate`;
     el arte va con `z-index: -1` dentro de él: el contenido no necesita
     z-index propio.
   · Imagen de fondo y no máscara: una imagen que todavía no llega no pinta
     nada; una máscara que no llegaba dejaba la capa entera de color. Costo:
     cambiar de tema baja la otra versión de las piezas a la vista. */
.arte-anfitrion { position: relative; isolation: isolate; }
.arte {
  position: absolute; inset: 0; z-index: -1;
  pointer-events: none; overflow: hidden;
  contain: strict;            /* nada de lo de adentro cambia el diseño de afuera */
}
.arte::before {
  content: ""; position: absolute; inset: 0;
  background-repeat: no-repeat;
}

/* ── El grano: UNO por página, fijo y detrás de todo ─────────────────────
   <div class="arte-grano" aria-hidden="true"></div> como primer hijo de
   <body>. Por página y no por pieza: el grano corre el tono medio del fondo
   (en claro, de #f8f8f8 a ≈#f3f3f3), y por pieza se vería el canto donde
   empieza cada sección. Fijo: se rasteriza una vez al tamaño de la ventana y
   el desplazamiento no lo repinta (medido en medir_costo.py).
   La baldosa es de 128 px a 64 px de CSS: un píxel de pantalla en retina.
   Ruido blanco: se repite sin costura. */
/* pointer-events: auto A PROPÓSITO: con z-index -1 queda debajo de todo y no
   le quita un clic a nadie, pero scripts/auditar_contraste.py da por ENCIMA
   toda capa fija que no responde al puntero (no la puede ordenar) y con
   `none` declaraba los 119 textos de la muestra «tapados sin medir». */
/* Ronda 7: imagen de fondo ya coloreada (grano.claro.png / grano.oscuro.png,
   de generar.py), no máscara: una máscara que todavía no llega dejaba pasar
   la capa entera, un velo de --arte-grano sobre toda la página. */
.arte-grano {
  position: fixed; inset: 0; z-index: -1; pointer-events: auto;
  background: url("arte/grano.claro.png?v=9db8676f") 0 0 / 64px 64px repeat;
}
[data-theme="dark"] .arte-grano { background-image: url("arte/grano.oscuro.png?v=6f6ad95a"); }
@media (prefers-color-scheme: dark) { :root:not([data-theme]) .arte-grano { background-image: url("arte/grano.oscuro.png?v=6f6ad95a"); } }

/* ═══ La página (pagina.css de la maqueta: la ronda 6, Attio × K2) ═════════
   Composición sobre el kit (k2_tokens.css + k2_base.css). Todo color sale de
   var(--…) del gestor; las transparencias se arman con color-mix() SOBRE esos
   tokens. Única isla: la baldosa de la marca (--b-baldosa-*, la misma de /j/).
   m- la página · r- piezas de la ronda 5 (conversemos, editorial, pie) ·
   c- la portada de capas.
   Rendimiento: el desenfoque vive en la barra, en el panel (solo abierto) y
   en las tres tarjetas de la portada; los marcos de vidrio son opacos (§3 de
   la ronda 7, más abajo); nada se repinta en reposo; ningún :has(). */

/* ── ISLA DE COLOR DECLARADA · la baldosa de la marca ─────────────────────
   La misma de /j/ (resultados_j.css), con el mismo nombre: en claro, baldosa
   --sup-baldosa y hoja --logo-ink; en oscuro, #2c3f5d y #e0ded7, leídos de
   favicon-dark-180.png. Solo la usa .r-baldosa-marca (docs/DISENO.md §4). */
:root,
[data-theme="light"] {
  --b-baldosa-fondo: var(--sup-baldosa);
  --b-baldosa-canto: var(--border-in);
  --b-baldosa-hoja:  var(--logo-ink);
}
[data-theme="dark"] {
  --b-baldosa-fondo: #2c3f5d;
  --b-baldosa-canto: var(--border-in);
  --b-baldosa-hoja:  #e0ded7;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --b-baldosa-fondo: #2c3f5d;
    --b-baldosa-canto: var(--border-in);
    --b-baldosa-hoja:  #e0ded7;
  }
}

/* ── 0 · Medidas ─────────────────────────────────────────────────────────── */
:root {
  --m-marco: 1392px;                       /* a 1440: los filetes en x=24 y x=1416 */
  --m-pad: clamp(16px, 4vw, 56px);         /* aire dentro del marco: 16 a 390, 56 a 1440 */
  --m-alto-barra: 60px;
  --m-seccion: clamp(56px, 5vw + 28px, 112px);
}
html { scroll-padding-top: calc(var(--m-alto-barra) + 16px); }
/* El índice y los enlaces internos se desplazan en vez de saltar (un clic en
   «¿Quién se encarga?» llevaba de y=1300 a y=3523 de golpe). Solo si el
   sistema no pide movimiento reducido. */
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

/* Solo para lectores de pantalla (la cabecera de cada escena, desde 1101). */
.m-solo-lector {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* Sin guion: «Producto» es un enlace; con guion, el botón del panel. */
html.js .m-solo-sinjs { display: none !important; }
html:not(.js) .m-solo-js { display: none !important; }

/* La captura del tema que toca (las dos van en la página). */
:root .m-tema-claro, :root .m-tema-oscuro { display: contents; }
:root .m-tema-oscuro, :root .m-tema-oscuro-img { display: none; }
:root[data-theme="dark"] .m-tema-claro, :root[data-theme="dark"] .m-tema-claro-img { display: none; }
:root[data-theme="dark"] .m-tema-oscuro { display: contents; }
:root[data-theme="dark"] .m-tema-oscuro-img { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .m-tema-claro, :root:not([data-theme]) .m-tema-claro-img { display: none; }
  :root:not([data-theme]) .m-tema-oscuro { display: contents; }
  :root:not([data-theme]) .m-tema-oscuro-img { display: block; }
}
picture source { display: none; }

/* ── El marco: dos filetes verticales que enmarcan la página ─────────────
   Cada sección es una fila del marco, con un filete arriba (Attio). En el
   teléfono no hay verticales: con 16 px de margen no hay dónde ponerlos. */
.m-marco { position: relative; width: 100%; max-width: var(--m-marco); margin-inline: auto; }
@media (min-width: 761px) {
  .m-marco {
    width: calc(100% - 48px);
    border-left: 0.8px solid var(--border); border-right: 0.8px solid var(--border);
  }
}
.m-seccion { padding: var(--m-seccion) var(--m-pad); border-top: 0.8px solid var(--border); }

/* La baldosa de la marca (ronda 5). */
.r-marca { font-size: 18px; gap: 10px; }
.r-baldosa-marca {
  display: inline-grid; place-items: center; flex: none;
  width: 34px; height: 34px; border-radius: 8.5px;
  background: var(--b-baldosa-fondo); color: var(--b-baldosa-hoja);
  box-shadow: inset 0 0 0 0.8px var(--b-baldosa-canto), var(--luz-borde);
}
.r-baldosa-marca .r-hoja { display: block; width: 80%; height: 80%; }
.r-baldosa-marca--pie { width: 44px; height: 44px; border-radius: 11px; }
.r-marca--pie { font-size: 20px; gap: 12px; }
@media (max-resolution: 1.49dppx) {
  .r-hoja--barra path { stroke-width: 2.9px; }
  .r-hoja--barra line { stroke-width: 1.9px; }
}

/* ── 1 · Barra y panel «Producto» ──────────────────────────────────────── */
.m-barra-dentro {
  display: flex; align-items: center; gap: 12px; min-height: var(--m-alto-barra);
  width: 100%; max-width: var(--m-marco); margin-inline: auto; padding-inline: 16px;
}
@media (min-width: 761px) { .m-barra-dentro { width: calc(100% - 48px); padding-inline: 20px; } }
.m-nav { display: none; align-items: center; gap: 2px; margin-left: 12px; min-width: 0; }
@media (min-width: 761px) { .m-nav { display: flex; } }
.m-nav-enlace {
  display: inline-flex; align-items: center; gap: 4px; height: 32px; padding: 0 10px;
  border: 0; border-radius: var(--radius); background: transparent; cursor: pointer;
  font: inherit; font-size: 13px; line-height: 1; color: var(--text-2); white-space: nowrap;
  transition: background 150ms, color 150ms;
}
.m-nav-enlace:hover { background: var(--bg-hover); color: var(--text); }
.m-nav-enlace[aria-current]:not([aria-current='false']) { color: var(--text); background: var(--bg-active); }
.m-nav-boton svg { width: 14px; height: 14px; transition: transform 200ms var(--e-out); }
.m-nav-boton[aria-expanded="true"] { background: var(--bg-active); color: var(--text); }
.m-nav-boton[aria-expanded="true"] svg { transform: rotate(180deg); }
@media (max-width: 920px) { .m-nav-conector { display: none; } }

.m-barra-acciones { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.m-barra-ingreso {
  position: relative; display: inline-flex; align-items: center; height: 32px; padding: 0 10px;
  border-radius: var(--radius); font-size: 13px; line-height: 1; color: var(--text-2); white-space: nowrap;
  transition: background 150ms, color 150ms;
}
.m-barra-ingreso:hover { background: var(--bg-hover); color: var(--text); }
@media (max-width: 519px) { .m-barra-ingreso { display: none; } }
/* Una tinta por pantalla: la de la barra se aparta (sin mover nada) mientras
   la de «Conversemos» está a la vista (landing.js §3). */
body[data-tinta-barra="no"] .m-barra-tinta { visibility: hidden; }

/* El panel: translúcido y acotado. */
.m-panel { position: fixed; z-index: 49; left: 0; right: 0; top: var(--m-alto-barra); padding: 8px 16px 0; pointer-events: none; }
.m-panel[hidden] { display: none; }
.m-panel-dentro {
  pointer-events: auto;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(200px, 0.85fr);
  width: min(1120px, 100%); margin-inline: auto;
  padding: 8px; border-radius: 16px;
  /* Translúcido, pero sin que el titular de atrás compita con la lectura:
     dentro de la barra el desenfoque no alcanzaba la página y el titular se
     leía nítido entre las líneas del panel (ver index.html). */
  background: color-mix(in srgb, var(--bg-1) 88%, transparent);
  -webkit-backdrop-filter: blur(28px) saturate(1.5); backdrop-filter: blur(28px) saturate(1.5);
  box-shadow: inset 0 0 0 0.8px var(--border), var(--sombra-menu);
  animation: m-baja 180ms var(--e-out) both;
}
/* Bajo «Producto» si cabe (landing.js §2 pone --m-panel-x); si no, centrado. */
.m-panel-dentro[style*="--m-panel-x"] { margin-left: var(--m-panel-x); margin-right: 0; }
.m-panel-col { display: flex; flex-direction: column; gap: 2px; padding: 14px 14px 16px; min-width: 0; }
.m-panel-rot {
  margin: 0 0 8px; padding-left: 10px;
  font-size: 12px; font-weight: 500; line-height: 1.4; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-3);
}
.m-panel-rot--2 { margin-top: 18px; }
.m-panel-item {
  display: flex; flex-direction: column; gap: 2px; padding: 9px 10px 10px; border-radius: var(--radius);
  transition: background 150ms;
}
.m-panel-item:hover { background: var(--bg-hover); }
.m-panel-tit { font-size: 14px; font-weight: 500; line-height: 1.35; color: var(--text); }
.m-panel-linea { font-size: 13px; line-height: 1.45; color: var(--text-2); text-wrap: pretty; }
.m-panel-lado {
  display: flex; flex-direction: column; gap: 2px; padding: 14px 10px 16px; border-radius: 12px;
  background-color: var(--bandeja); background-image: var(--rayado);
  box-shadow: inset 0 0 0 0.8px var(--border);
}
.m-panel-lado-item {
  display: flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 10px; border-radius: var(--radius);
  font-size: 14px; line-height: 1.3; color: var(--text); transition: background 150ms;
}
.m-panel-lado-item:hover { background: var(--bg-hover); }
.m-panel-lado-item svg { width: 13px; height: 13px; color: var(--text-3); }
@media (max-width: 1100px) {
  .m-panel-dentro { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@keyframes m-baja { from { opacity: 0; transform: translateY(-6px); } }

/* ── 2 · Portada ─────────────────────────────────────────────────────────
   Teléfono y tableta: titular, arte, bajada. Desde 1101: texto a la
   izquierda, arte a la derecha, centrados en alto. */
.m-portada { position: relative; padding: clamp(32px, 4vw + 8px, 80px) var(--m-pad) clamp(48px, 4vw + 24px, 96px); }
/* Teléfono y tableta: titular, bajada y botón PRIMERO; el arte, después.
   Antes el arte iba en medio y empujaba la bajada y el botón fuera de la
   primera pantalla (a 1024×768 el botón terminaba en y=1007 con «ventana»;
   a 390, bajo la barra de Safari). */
.m-portada-rejilla {
  display: grid; grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "titular" "lado" "arte"; gap: 28px;
}
@media (max-width: 1100px) { .m-portada-rejilla { row-gap: 24px; } .m-arte { margin-top: 12px; } }
.m-titular { grid-area: titular; max-width: 14em; }
.m-titular-2 { color: var(--text-3); white-space: nowrap; }   /* texto grande: --text-3 pasa 4,9:1 */
.m-portada-lado { grid-area: lado; display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.m-bajada { max-width: 34em; }
.m-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.m-acciones-nota { margin: 0; font-size: 13px; line-height: 1.45; color: var(--text-2); }
.m-portada-accion svg { width: 14px; height: 14px; }
.m-ingreso { display: none; color: var(--text-2); }
@media (max-width: 519px) { .m-ingreso { display: block; } }
@media (max-width: 760px) {
  .m-portada-lado { gap: 16px; }
  .m-acciones { flex-direction: column; align-items: flex-start; gap: 8px; }
}
@media (min-width: 1101px) {
  .m-portada-rejilla {
    grid-template-columns: minmax(0, 11fr) minmax(0, 12fr);
    grid-template-rows: 1fr auto auto 1fr;
    grid-template-areas: ". arte" "titular arte" "lado arte" ". arte";
    column-gap: clamp(40px, 5vw, 96px); row-gap: 28px;
    min-height: min(640px, calc(100vh - var(--m-alto-barra) - 140px));
  }
  .m-titular { max-width: none; }
}

/* El arte de la portada (las piezas de capas): más abajo, «La portada de capas». */
.m-arte { grid-area: arte; position: relative; width: 100%; justify-self: start; align-self: center; }
@media (min-width: 1101px) { .m-arte { justify-self: center; } }

/* ── Cabeceras de sección (Attio: píldora + titular en dos tintas) ────── */
.m-sec-cab { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; max-width: 820px; margin-bottom: clamp(32px, 3vw + 16px, 64px); }
.m-pildora {
  display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: 999px;
  font-size: 12px; font-weight: 500; line-height: 1; color: var(--text-2);
  background: var(--pildora); box-shadow: inset 0 0 0 0.8px var(--border), var(--sombra-reposo);
}
.m-h2-doble {
  font-size: clamp(28px, 1.53vw + 22px, 44px); font-weight: 500; line-height: 1.12; letter-spacing: -0.022em;
  color: var(--text); text-wrap: balance;
}
.m-h2-doble span { color: var(--text-3); }   /* texto grande: pasa con holgura */
.m-aviso { font-size: 13px; line-height: 1.45; color: var(--text-2); text-wrap: pretty; }
.m-aviso strong { font-weight: 500; color: var(--text); }

/* ── 3 · El scroll ───────────────────────────────────────────────────────
   Desde 1101 px: la lista fija (340 px) | filete | las escenas. Cada escena
   lleva su pregunta, su pantalla sobre un lienzo de puntos (el de Attio, con
   tokens K2) y dos celdas abajo. Menos de 1101: bloques apilados. */
.m-escenas { padding-left: 0; padding-right: 0; padding-bottom: 0; }
.m-escenas > .m-sec-cab { padding-inline: var(--m-pad); }
.m-escenas-rejilla { display: grid; grid-template-columns: minmax(0, 1fr); border-top: 0.8px solid var(--border); }
.m-indice { display: none; }
@media (min-width: 1101px) {
  .m-escenas-rejilla { grid-template-columns: 340px minmax(0, 1fr); }
  .m-indice { display: block; position: relative; border-right: 0.8px solid var(--border); }
}
.m-indice-fijo { position: sticky; top: calc(var(--m-alto-barra) + 24px); padding: 48px 24px 48px 0; }
.m-indice-lista { display: flex; flex-direction: column; gap: 4px; }
.m-indice-item {
  display: flex; flex-direction: column; gap: 6px; padding: 14px 24px 14px var(--m-pad);
  border-radius: 0 var(--radius) var(--radius) 0; transition: background 200ms;
}
.m-indice-item:hover { background: var(--bg-hover); }
.m-indice-q { font-size: 19px; font-weight: 500; line-height: 1.3; letter-spacing: -0.012em; color: var(--text-3); transition: color 300ms; text-wrap: balance; }
/* El producto y lo que hace: SOLO en la activa. Aparecen sin animar el alto
   (la lista se reacomoda de una vez y la línea de la marca la sigue); el
   texto entra por opacidad, una vez por cambio. */
.m-indice-p, .m-indice-d { display: none; }
.m-indice-p { align-items: center; gap: 6px; font-size: 13px; font-weight: 500; line-height: 1.35; color: var(--text-2); }
.m-indice-p svg { width: 15px; height: 15px; flex: none; }
.m-indice-d { font-size: 15px; line-height: 1.5; color: var(--text-2); text-wrap: pretty; }
.m-indice-item[aria-current="true"] { padding-block: 18px 20px; }
.m-indice-item[aria-current="true"] .m-indice-q { color: var(--text); font-size: 21px; }
.m-indice-item[aria-current="true"] .m-indice-p { display: flex; animation: m-aparece .35s var(--e-out) both; }
.m-indice-item[aria-current="true"] .m-indice-d { display: block; animation: m-aparece .45s var(--e-out) .05s both; }
/* Lo elegido se marca con una LÍNEA (nunca con tinta), montada sobre el
   filete del marco, como en Attio. La mueve landing.js §4. */
.m-indice-marca {
  position: absolute; left: -1.4px; top: 0; width: 2px; height: 0; border-radius: 2px;
  background: var(--text); transform: translateY(var(--m-marca-y, 0px));
  transition: transform 450ms var(--e-out-expo), height 450ms var(--e-out-expo);
}

.m-escena { padding: clamp(40px, 3vw + 24px, 72px) var(--m-pad) clamp(48px, 4vw + 24px, 96px); scroll-margin-top: calc(var(--m-alto-barra) - 1px); }
.m-escena + .m-escena { border-top: 0.8px solid var(--border); }
/* Desde 1101: a la derecha, SOLO la pantalla (y sus dos celdas). La pregunta y
   lo que hace viven en el ítem activo de la lista; la cabecera de la escena
   queda para lectores de pantalla. A 1440×900 la pantalla entra entera. */
@media (min-width: 1101px) {
  .m-escena { padding-top: 0; }
  .m-escena-cab {
    position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
    clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
  }
  .m-escena-visual { border-top: 0; }
}
.m-escena-cab { max-width: 660px; margin-bottom: clamp(24px, 2vw + 12px, 40px); }
.m-escena-prod { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 12px; font-size: 13px; font-weight: 500; color: var(--text-2); }
.m-escena-prod svg { width: 16px; height: 16px; }
.m-escena-q { font-size: clamp(21px, 0.48vw + 19px, 26px); font-weight: 500; line-height: 1.25; letter-spacing: -0.016em; color: var(--text); text-wrap: pretty; }
.m-escena-q span { color: var(--text-3); }

/* El lienzo de la pantalla: a lo ancho de la columna, entre filetes, con una
   trama de puntos en --border-md (Attio, con un token). */
.m-escena-visual {
  margin-inline: calc(var(--m-pad) * -1); padding: clamp(24px, 2.5vw + 8px, 56px) var(--m-pad);
  border-block: 0.8px solid var(--border);
  /* r7: sin la trama de puntos ni fondo propio: el campo de líneas de la
     escena (§2 de la ronda 7, más abajo) y el grano de la página se ven a través. */
}
.m-pantalla { max-width: 960px; margin-inline: auto; box-shadow: inset 0 0 0 0.8px var(--border), var(--sombra-menu); }
.m-pantalla-marco {
  display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr);
  place-items: center; overflow: hidden; height: var(--m-alto-pantalla, auto);
}
@media (min-width: 761px) { :root { --m-alto-pantalla: clamp(440px, 36vw + 80px, 620px); } }
.m-marco-hoja { background: var(--hoja); }
.m-marco-correo { position: relative; background: var(--bg); place-items: start center; }
.m-captura { display: block; max-width: 100%; height: auto; user-select: none; -webkit-user-drag: none; }
@media (min-width: 761px) {
  .m-marco-hoja .m-captura { width: 100%; height: 100%; object-fit: contain; }
}
/* r7: el correo va solo (sin el teléfono al lado): a su ancho de 680 px. */
@media (min-width: 761px) { .m-marco-correo .m-captura { width: 680px; } }
.m-marco-correo::after {
  content: ''; position: absolute; inset: auto 0 0; height: 72px; pointer-events: none;
  background: linear-gradient(to bottom, transparent, var(--bg));
}
.m-pantalla .k2-bandeja-pie { flex-wrap: wrap; gap: 2px 16px; padding: 8px 8px 4px; }
@media (max-width: 1100px) { .m-solo-ancho { display: none !important; } }

/* Entra UNA vez, cuando la escena llega a la vista (landing.js §4). En
   reposo, el estado final: sin guion, con el auditor o con movimiento
   reducido, la pantalla está quieta y entera. */
/* r7: cada pieza que entra lleva .m-entra y se observa SOLA (landing.js §4):
   en Documentos la carpeta entra cuando llega, no junto con la novedad. */
html.m-anima .m-entra { animation: m-entra .9s var(--e-out-expo) both paused; }
html.m-anima .m-entra.m-visto { animation-play-state: running; }
@keyframes m-entra { from { opacity: 0; transform: translateY(32px) scale(0.985); } }

.m-escena-pie { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 24px 0; margin-top: clamp(24px, 2vw + 12px, 40px); }
.m-escena-celda { display: flex; flex-direction: column; gap: 10px; min-width: 0; padding-right: 32px; }
.m-escena-celda + .m-escena-celda { padding: 0 0 0 32px; border-left: 0.8px solid var(--border); }
.m-escena-celda-rot { font-size: 12px; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-3); }
.m-guiones { display: flex; flex-direction: column; gap: 6px; }
.m-guiones li { position: relative; padding-left: 18px; font-size: 15px; line-height: 1.55; color: var(--text-2); text-wrap: pretty; }
.m-guiones li::before { content: ''; position: absolute; left: 2px; top: 0.78em; width: 8px; border-top: 0.8px solid var(--text-3); }
.m-escena-para { font-size: 15px; line-height: 1.55; color: var(--text-2); text-wrap: pretty; }
@media (max-width: 760px) {
  .m-escena-pie { grid-template-columns: minmax(0, 1fr); }
  .m-escena-celda { padding-right: 0; }
  .m-escena-celda + .m-escena-celda { padding: 16px 0 0; border-left: 0; border-top: 0.8px dashed var(--border); }
  .m-marco-correo { max-height: 600px; }
  .m-marco-hoja { max-height: 720px; place-items: start center; }
  .m-marco-hoja::after {
    content: ''; position: absolute; inset: auto 0 0; height: 72px; pointer-events: none;
    background: linear-gradient(to bottom, transparent, var(--hoja));
  }
  .m-marco-hoja { position: relative; }
  .m-captura { width: 100%; }
}

/* ── 4 · Mosaicos ───────────────────────────────────────────────────────
   Celdas con filetes compartidos que van de filete a filete del marco. */
.m-mosaico { padding-bottom: 0; }
.m-celdas {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
  margin-inline: calc(var(--m-pad) * -1); border-top: 0.8px solid var(--border);
}
.m-celda { grid-column: span 12; display: flex; flex-direction: column; min-width: 0; border-bottom: 0.8px solid var(--border); }
.m-celdas > .m-celda:last-child { border-bottom: 0; }
@media (min-width: 761px) {
  .m-celda { grid-column: span 6; }
  .m-celda:nth-child(even) { border-left: 0.8px solid var(--border); }
  .m-celdas > .m-celda:nth-last-child(-n + 2) { border-bottom: 0; }
}
@media (min-width: 1101px) {
  .m-celda--novedad, .m-celda--cifras { grid-column: span 7; }
  .m-celda--cita, .m-celda--docs { grid-column: span 5; }
}
.m-celda-txt { display: flex; flex-direction: column; gap: 6px; padding: clamp(28px, 1.5vw + 20px, 40px) var(--m-pad) 0; }
.m-celda-tit { font-size: 19px; font-weight: 500; line-height: 1.3; letter-spacing: -0.012em; color: var(--text); }
.m-celda-linea { font-size: 15px; line-height: 1.5; color: var(--text-2); max-width: 36em; text-wrap: pretty; }
.m-celda-escena { flex: 1; display: grid; place-items: center; padding: clamp(24px, 2vw + 12px, 40px) var(--m-pad) clamp(32px, 2vw + 20px, 48px); min-height: 300px; }
.m-frag { width: 100%; box-shadow: inset 0 0 0 0.8px var(--border), var(--sombra-menu); }
.m-frag--lista { max-width: 560px; }
.m-frag--cita  { max-width: 440px; }
.m-frag .k2-bandeja-tit h4 { color: var(--text); }
.m-frag-tarjeta { overflow: hidden; }

/* A · la novedad que llega: la fila nueva entra arriba y empuja a las otras;
   su punto de novedad se enciende una vez y queda con su halo. */
.m-llegan { display: flex; flex-direction: column; }
.m-llega { padding-inline: 2px; }
.m-chip { align-self: center; margin-left: 8px; white-space: nowrap; }
.m-punto { margin-right: 2px; }
html.m-anima .m-celda--novedad .m-llega--nueva { animation: m-llega .8s var(--e-out-expo) .25s both paused; }
html.m-anima .m-celda--novedad .m-llega:not(.m-llega--nueva) { animation: m-empuja .8s var(--e-out-expo) .25s both paused; }
html.m-anima .m-celda--novedad .m-punto { animation: m-halo 1.3s var(--e-out) .9s both paused; }
html.m-anima .m-celda--novedad .m-chip { animation: m-aparece .5s var(--e-out) 1.1s both paused; }
@keyframes m-llega { from { opacity: 0; transform: translateY(-14px); } }
@keyframes m-empuja { from { transform: translateY(calc(-100% - 1px)); } }
@keyframes m-halo { 0% { box-shadow: 0 0 0 0 var(--novedad-halo); } 45% { box-shadow: 0 0 0 7px var(--novedad-halo); } }

/* B · la cita: el resaltador pasa una vez sobre el pasaje. */
.m-cita { display: flex; flex-direction: column; gap: 14px; padding: 18px 18px 16px; }
.m-cita-texto { margin: 0; font-size: 17px; line-height: 1.55; color: var(--text); text-wrap: pretty; }
.m-resalta {
  color: inherit; background-color: transparent; border-radius: 2px;
  background-image: linear-gradient(var(--resaltador), var(--resaltador));
  background-repeat: no-repeat; background-size: 100% 100%;
  -webkit-box-decoration-break: clone; box-decoration-break: clone; padding: 0 1px;
}
.m-cita-ref { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; font-size: 13px; line-height: 1.45; color: var(--text-2); }
.m-cita-pie { display: inline-flex; align-items: center; gap: 6px; }
.m-cita-pie svg { width: 13px; height: 13px; }
html.m-anima .m-celda--cita .m-resalta { animation: m-resalta 1.2s cubic-bezier(.4, 0, .2, 1) .45s both paused; }
@keyframes m-resalta { from { background-size: 0% 100%; } }

/* C · la resolución en su carpeta (r7, en lugar de «los dos clics», que
   repetían la sección del conector): más abajo, §6. */

/* D · lo que cubre: cuatro cifras en una rejilla de filetes. */
.m-cifras { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; padding: clamp(20px, 1.5vw + 10px, 32px) var(--m-pad) clamp(28px, 2vw + 16px, 48px); gap: 0; flex: 1; align-content: center; }
.m-cifra { display: flex; flex-direction: column; gap: 8px; padding: 18px 20px 20px 0; }
.m-cifra:nth-child(even) { padding-left: 24px; border-left: 0.8px solid var(--border); }
.m-cifra:nth-child(n + 3) { border-top: 0.8px solid var(--border); }
.m-cifra-n {
  display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap;
  font-size: clamp(32px, 1.14vw + 27.5px, 44px); font-weight: 500; line-height: 1.05; letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums; color: var(--text);
}
.m-cifra-n small { font-size: 13px; font-weight: 400; letter-spacing: 0; color: var(--text-2); }
.m-cifra-def { margin: 0; font-size: 13px; line-height: 1.5; color: var(--text-2); text-wrap: pretty; }
html.m-anima .m-celda--cifras .m-cifra { animation: m-sube .8s var(--e-out-expo) both paused; }
html.m-anima .m-celda--cifras .m-cifra:nth-child(2) { animation-delay: .1s; }
html.m-anima .m-celda--cifras .m-cifra:nth-child(3) { animation-delay: .2s; }
html.m-anima .m-celda--cifras .m-cifra:nth-child(4) { animation-delay: .3s; }
html.m-anima .m-anima-grupo.m-visto * { animation-play-state: running !important; }
@media (max-width: 520px) {
  .m-cifras { grid-template-columns: minmax(0, 1fr); }
  .m-cifra:nth-child(even) { padding-left: 0; border-left: 0; }
  .m-cifra:nth-child(n + 2) { border-top: 0.8px solid var(--border); }
  .k2-fila-sub > :last-child { white-space: nowrap; }
}

/* ═══ Piezas de la ronda 5, copiadas de ../ronda5/base/base.css ═══════════
   Sin cambios salvo lo marcado «r6» (el pie y las secciones viven ahora
   dentro del marco: sin margen propio ni filete arriba duplicado). */
.r-paso-n {
  display: grid; place-items: center; width: 28px; height: 28px; border-radius: var(--radius);
  background: var(--sup-baldosa); border: 0.8px solid var(--border-in); box-shadow: var(--luz-borde);
  font-size: 12px; font-weight: 500; color: var(--text-2); font-variant-numeric: tabular-nums;
}
.r-paso-tit { font-size: 15px; font-weight: 500; line-height: 1.35; color: var(--text); }
.r-paso-accion { margin-top: 6px; }
.r-clics {
  display: flex; flex-direction: column; gap: 8px; counter-reset: clic;
  font-size: 13px; line-height: 1.5; color: var(--text-2);
}
.r-clics li { position: relative; padding-left: 20px; counter-increment: clic; }
.r-clics li::before {
  content: counter(clic) "."; position: absolute; left: 0; top: 0;
  color: var(--text-3); font-variant-numeric: tabular-nums;
}
.r-clics b { font-weight: 600; color: var(--text); }
.r-clics a { color: var(--text); text-decoration: underline; text-decoration-color: var(--deco); text-underline-offset: 3px; }
.r-clics a:hover { text-decoration-color: var(--text-3); }
.r-donde-nota {
  margin-top: auto; padding-top: 9px; border-top: 0.8px dashed var(--border);
  font-size: 12px; line-height: 1.45; color: var(--text-2);
}
.r-donde-nota b { font-weight: 600; color: var(--text); }

/* ── 3 · Conversemos ───────────────────────────────────────────────────── */
.r-conversemos { position: relative; }
.r-conversemos-tarjeta {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 24px 56px; align-items: end;
  padding: clamp(24px, 2.3vw + 15px, 48px);
}
.r-conversemos-texto { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.r-conversemos-acciones { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; min-width: 0; }
.r-conversemos-prueba { color: var(--text-2); }
@media (max-width: 900px) {
  .r-conversemos-tarjeta { grid-template-columns: minmax(0, 1fr); align-items: start; }
}
@media (max-width: 760px) {
  .r-conversemos-acciones { align-items: stretch; }
}

/* ── 6 · Editorial ─────────────────────────────────────────────────────── */
.r-editorial-rejilla {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 32px clamp(32px, 4vw, 72px); align-items: start;
}
@media (max-width: 1100px) { .r-editorial-rejilla { grid-template-columns: minmax(0, 1fr); } }
.r-editorial-texto { display: flex; flex-direction: column; min-width: 0; }
.r-editorial-texto .r-cab { margin-bottom: 24px; }
.r-series { padding: 4px 14px; }
.r-serie {
  display: grid; grid-template-columns: 128px minmax(0, 1fr) auto; gap: 2px 12px; align-items: baseline;
  padding: 12px 0; font-size: 14px; line-height: 1.4;
}
.r-serie-marca { font-weight: 500; color: var(--text); }
.r-serie-desc { color: var(--text-2); }
.r-serie-n { font-size: 13px; color: var(--text-3); white-space: nowrap; font-variant-numeric: tabular-nums; }
@media (max-width: 760px) {
  .r-serie { grid-template-columns: minmax(0, 1fr) auto; }
  .r-serie-desc { grid-column: 1 / -1; grid-row: 2; }
}
.r-editorial-piezas { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.r-informe { display: flex; flex-direction: column; gap: 10px; color: inherit; }
.r-informe-meta {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 4px;
  font-size: 12px; color: var(--text-3);
}
a.r-informe:hover .k2-enlace { color: var(--text); text-decoration-color: var(--text-3); }
a.r-informe:hover .k2-enlace svg { transform: translateX(2px); }
.r-pie-red { color: var(--text); text-decoration: underline; text-decoration-color: var(--deco); text-underline-offset: 3px; }
.r-pie-red:hover { text-decoration-color: var(--text-3); }
.r-piezas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; }
.r-pieza { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px 15px; color: inherit; }
.r-pieza-tit { font-size: 15px; font-weight: 500; line-height: 1.35; letter-spacing: -0.006em; color: var(--text); }
.r-pieza-meta { margin-top: auto; padding-top: 6px; font-size: 12px; color: var(--text-3); }
@media (max-width: 560px) { .r-piezas { grid-template-columns: minmax(0, 1fr); } }

/* ── 7 · Pie ───────────────────────────────────────────────────────────── */
.r-pie { padding-top: clamp(40px, 1.5vw + 34px, 56px); padding-bottom: 32px; }   /* r6: el filete y el margen los pone .m-seccion */
.r-pie-rejilla { display: grid; grid-template-columns: minmax(0, 2fr) repeat(4, minmax(0, 1fr)); gap: 32px 24px; }
.r-pie-marca { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; max-width: 320px; }
.r-pie-col { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; }
.r-pie-col h2 { margin-bottom: 8px; }
.r-pie-col a {
  display: inline-flex; align-items: center; min-height: 30px; border-radius: var(--radius-sm);
  font-size: 13px; line-height: 1.35; color: var(--text-2);
}
.r-pie-col a:hover { color: var(--text); }
.r-pie-base {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-top: 40px; padding-top: 16px;
  border-top: 0.8px solid var(--border); font-size: 12px; color: var(--text-3);
}
.r-pie-redes { display: flex; gap: 4px; margin-left: -8px; }
.r-pie-dominio { margin-left: auto; font-weight: 500; color: var(--text-2); }
@media (max-width: 1100px) {
  .r-pie-rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .r-pie-marca { grid-column: 1 / -1; }
}
@media (pointer: coarse) {
  .r-pie-col a { min-height: 44px; }
  .r-pie-redes { gap: 8px; }
}
@media (max-width: 760px) {
  .r-pie-redes { order: -1; width: 100%; }
  .r-pie-dominio { margin-left: 0; }
}

/* ── Con el dedo: los enlaces dentro de un texto alcanzan 44 px ──────────
   Con un ::after transparente, como el kit: el renglón no se mueve y el
   anillo de foco sigue ceñido a la palabra (con relleno, el anillo crecía
   hasta montarse sobre el texto vecino y bajaba a 2,25:1, medido). */
@media (pointer: coarse) {
  .m-ingreso a, .r-clics a, .r-conversemos-prueba a, .r-pie-red, .m-cita-pie { position: relative; white-space: nowrap; }
  .m-ingreso a::after, .r-clics a::after, .r-conversemos-prueba a::after, .r-pie-red::after, .m-cita-pie::after {
    content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 44px; transform: translateY(-50%);
  }
  /* Renglones de 23 px en los pasos: el área de 44 de un enlace no alcanza el
     centro del renglón vecino (con 19,5 px tapaba el «Conectar» de abajo). */
  .r-clics { line-height: 1.78; gap: 10px; }
}

/* ── r6 · ajustes de las piezas copiadas ────────────────────────────────── */
.r-cab { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; max-width: 760px; margin-bottom: clamp(28px, 2.3vw + 19px, 52px); }
.r-conversemos-bandeja { box-shadow: inset 0 0 0 0.8px var(--border); }

/* ── Movimiento reducido: todo en su estado final ─────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .m-trazo, .m-aguada, .c-capa-dentro, .m-entra,
  .m-pantalla, .m-llega, .m-punto, .m-chip, .m-resalta, .m-cifra,
  .m-panel-dentro, .m-indice-p, .m-indice-d { animation: none !important; }
  .m-indice-marca, .m-indice-q { transition: none; }
}

/* r6 · «LinkedIn» del pie medía 43,6 px de ancho con el dedo: el ::after de
   la ronda 5 toma el ancho de la palabra. Ahora, al menos 44. */
@media (pointer: coarse) {
  .r-pie-red::after { left: 50%; right: auto; width: max(100%, 44px); transform: translate(-50%, -50%); }
}

/* ═══ La ronda 7 (ronda7.css de la maqueta), sobre la página ═══════════════
   Todo color sale de un token; las transparencias son color-mix() sobre
   --bandeja, --bg o --pildora (ningún color nuevo).

   §0 animaciones compartidas      §4 la escena de Documentos
   §1 la portada de capas («b»)    §5 el conector
   §2 el arte de fondo             §6 mosaicos y editorial
   §3 el vidrio                    §7 movimiento reducido

   EL VIDRIO (ronda 7, tras la crítica: «lo importante sigue sin estar en
   vidrio»; el velo de la primera versión tapaba el arte con un hijo opaco en
   el 93-100 % del marco y no desenfocaba):
   · .m-vidrio — un marco de 10 a 20 px (--m-vidrio-pad) del color que dejaba
     el vidrio: 62 % de --bandeja sobre --bg, OPACO y sin desenfoque (13-oct,
     NOTAS «Lag»). El desenfoque de 12 px en vivo era lo que hacía sentir la
     página lenta al desplazar (la GPU lo recalculaba en cada cuadro) y no se
     veía: sobre el arte desenfocado a 12 px queda un color casi plano, el
     mismo de este velo (medido, ±1 nivel). El texto de 15 px o más va DIRECTO
     sobre el marco (los sellos, el título de «Lo que le puedes pedir», las
     cifras); la tarjeta opaca queda para lo de 12-14 px y para las pantallas
     del producto, que son opacas.
   · las tres tarjetas de la portada — su vidrio de siempre (70 %, 10 px).
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── §0 · Animaciones que antes vivían con las portadas de la ronda 6 ──── */
@keyframes m-traza  { from { stroke-dasharray: 1 1.3; stroke-dashoffset: 1.02; } to { stroke-dasharray: 1 1.3; stroke-dashoffset: 0; } }
@keyframes m-aparece { from { opacity: 0; } }
@keyframes m-sube   { from { opacity: 0; transform: translateY(18px); } }
.m-trazo { stroke-dasharray: none; }

/* ═══ §1 · La portada de capas ════════════════════════════════════════════
   Cuatro piezas (la hoja y tres tarjetas) que NO se tocan en ningún ancho.
   Entre 761 y 1100 px: una ÓRBITA en un PLANO que escala entero. El
   plano mide 100 × 112 unidades de su ancho (1 u = 1cqw):

        x 0 ──────── 52     60 ──────── 100
     y  0  ┌ chat ──────┐ (0-53)
          │            │
     26,6 └────────────┘     ┌ Biblioteca ┐ 28,2
     31,6      ┌ hoja ──┐     │  (60-100)  │
               │ 21-55  │     │            │
               │        │     │            │
     69,0      └────────┘     │            │
                              └────────────┘ 72,4
     74,0 ┌ correo ───────┐
          │   (0-55)      │
    111,6 └───────────────┘

   La hoja (34 u) al centro de la órbita; el chat arriba a la izquierda, la
   Biblioteca a la derecha y el correo abajo a la izquierda (ángulos medidos
   en NOTAS §1). Entre piezas, 4,6 u o más: ≥ 25,8 px a 1101 (el plano más
   angosto, 560 px). Como todo (márgenes, letra del título, rellenos) se mide
   en u, la proporción no cambia con el ancho; las alturas salen de las
   proporciones de cada recorte (r7-medidas.json) y del título de 5 u.
   Bajo la letra del título hay un piso de 12 px: a 1101 pesa más que 2,1 u,
   pero la fila sigue midiendo 5 u (su min-height), así que nada se mueve. */
.c-plano {
  --c-u: 1cqw;
  position: relative; width: 100%; max-width: 680px; aspect-ratio: 100 / 112;
  container-type: inline-size;
}
.c-pieza { position: absolute; }
.c-hoja          { left: 21cqw; top: 31.6cqw; width: 34cqw; }
.c-capa--chat    { left: 0;     top: 0;       width: 53cqw; }
.c-capa--fallo   { left: 60cqw; top: 28.2cqw; width: 40cqw; }
.c-capa--novedad { left: 0;     top: 74cqw;   width: 55cqw; }

/* La hoja: tinta del logo sobre el papel (la calma del arte la rodea), con la
   pluma de la ronda 6. Se traza UNA vez; en reposo, entera. En oscuro, la
   crema del logo era lo más brillante de la portada y le competía al botón
   pintado (crítica): la tinta baja hacia el fondo. */
.c-hoja { color: var(--logo-ink); }
:root[data-theme="dark"] .c-hoja { color: color-mix(in srgb, var(--logo-ink) 74%, var(--bg)); }
@media (prefers-color-scheme: dark) { :root:not([data-theme]) .c-hoja { color: color-mix(in srgb, var(--logo-ink) 74%, var(--bg)); } }
.c-hoja-tinta { display: block; width: 100%; height: auto; aspect-ratio: 40 / 44; overflow: visible; }
.c-hoja .m-aguada { fill: color-mix(in srgb, var(--logo-ink) 5%, transparent); animation: m-aparece 1.6s var(--e-out) 1.8s both; }
.c-hoja .m-trazo--contorno { animation: m-traza 1.7s cubic-bezier(.45, .05, .3, 1) .25s backwards; }
.c-hoja .m-trazo--nervio   { animation: m-traza .6s var(--e-out) 1.85s backwards; }
.c-hoja .m-trazo--n1       { animation: m-traza .38s var(--e-out) 2.35s backwards; }
.c-hoja .m-trazo--n2       { animation: m-traza .38s var(--e-out) 2.6s backwards; }
.c-hoja .m-trazo--n3       { animation: m-traza .38s var(--e-out) 2.85s backwards; }

/* Las tarjetas: el doble marco del producto, con la bandeja en vidrio y la
   tarjeta de adentro opaca e intacta. Medidas en u. */
.c-capa-dentro.k2-bandeja {
  padding: calc(var(--c-u) * .6); border-radius: calc(var(--c-u) * 2);
  background-color: color-mix(in srgb, var(--bandeja) 70%, transparent); background-image: none;
  -webkit-backdrop-filter: blur(10px) saturate(1.2); backdrop-filter: blur(10px) saturate(1.2);
}
.c-capa .k2-bandeja-tit {
  min-height: calc(var(--c-u) * 5); padding: 0 calc(var(--c-u) * 1.2); gap: calc(var(--c-u) * 1);
  font-size: max(12px, calc(var(--c-u) * 2.1)); white-space: nowrap;
}
.c-capa .k2-bandeja-tit .k2-der { font-size: max(12px, calc(var(--c-u) * 1.8)); }
.c-capa .k2-bandeja-tit svg { width: calc(var(--c-u) * 2.3); height: calc(var(--c-u) * 2.3); }
.c-tarjeta { position: relative; padding: calc(var(--c-u) * 1.2) calc(var(--c-u) * .9); border-radius: calc(var(--c-u) * 1.5); background: var(--bg-1); }
.c-tarjeta img { display: block; width: 100%; height: auto; user-select: none; -webkit-user-drag: none; }
/* La Biblioteca llega hasta el segundo renglón de su pasaje: lo que sigue se
   funde en la tarjeta (menos palabras, a su tamaño). */
.c-capa--fallo .c-tarjeta::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: calc(var(--c-u) * 3.4);
  border-radius: inherit; pointer-events: none;
  background: linear-gradient(to bottom, transparent, var(--bg-1) 85%);
}
.c-capa--chat .c-capa-dentro    { box-shadow: inset 0 0 0 0.8px var(--border), var(--sombra-reposo); }
.c-capa--fallo .c-capa-dentro   { box-shadow: inset 0 0 0 0.8px var(--border), var(--sombra-menu); }
.c-capa--novedad .c-capa-dentro { box-shadow: inset 0 0 0 0.8px var(--border), var(--shadow-lg); }
/* Entran una vez (la entrada en la de adentro: el paralaje mueve la de
   afuera) y desde AFUERA de la órbita: el chat baja, la Biblioteca llega por
   la derecha y el correo sube. Mientras entran, los espacios solo son
   mayores (la ronda 7 las hacía subir 18 px: el chat se acercaba a la hoja). */
@keyframes c-desde-arriba { from { opacity: 0; transform: translateY(-18px); } }
@keyframes c-desde-der    { from { opacity: 0; transform: translateX(18px); } }
@keyframes c-desde-abajo  { from { opacity: 0; transform: translateY(18px); } }
.c-capa--chat .c-capa-dentro    { animation: c-desde-arriba .9s var(--e-out-expo) .5s both; }
.c-capa--fallo .c-capa-dentro   { animation: c-desde-der .9s var(--e-out-expo) .7s both; }
.c-capa--novedad .c-capa-dentro { animation: c-desde-abajo .9s var(--e-out-expo) .9s both; }

/* Entre 1101 y 1279 la letra del titular baja 2 px (se midió con ella). */
@media (min-width: 1101px) and (max-width: 1279px) {
  .m-titular { font-size: calc(2.29vw + 25px); }
}

/* La portada «b» · franja (desde 1101 px; la aprobada): la hoja junto al titular y las
   tres tarjetas en una fila debajo, más grandes (≈ 400 px a 1440), en el
   orden de la página: el correo, la Biblioteca, el chat. Cada pieza tiene su
   celda de la rejilla, así que no hay cómo se toquen; el paralaje mueve la
   hoja hacia arriba y deja las tarjetas atrás (más lentas que la página). */
@media (min-width: 1101px) {
  html[data-portada="b"] .m-portada-rejilla {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: auto auto auto;
    grid-template-areas: "titular titular hoja" "lado lado hoja" "c1 c2 c3";
    column-gap: clamp(24px, 2.4vw, 40px); row-gap: 24px; min-height: 0;
    align-items: start;
  }
  html[data-portada="b"] .m-titular { align-self: end; }
  html[data-portada="b"] .m-portada-lado { padding-bottom: 8px; }
  html[data-portada="b"] .m-bajada { max-width: 40em; }
  html[data-portada="b"] .c-plano { display: contents; }
  html[data-portada="b"] .c-pieza { position: relative; left: auto; top: auto; --c-u: 6.4px; }
  /* Los recortes nuevos son más angostos: en la franja van a su tamaño
     (sin agrandarlos), centrados en su tarjeta. */
  html[data-portada="b"] .c-tarjeta img { margin-inline: auto; }
  html[data-portada="b"] .c-capa--chat .c-tarjeta img    { width: min(100%, 328px); }
  html[data-portada="b"] .c-capa--fallo .c-tarjeta img   { width: min(100%, 242px); }
  html[data-portada="b"] .c-capa--novedad .c-tarjeta img { width: min(100%, 342px); }
  html[data-portada="b"] .c-hoja { grid-area: hoja; justify-self: center; align-self: center; width: min(78%, 250px); }
  html[data-portada="b"] .c-capa { align-self: start; width: auto; margin-top: 28px; }
  html[data-portada="b"] .c-capa--novedad { grid-area: c1; }
  html[data-portada="b"] .c-capa--fallo   { grid-area: c2; margin-top: 64px; }
  html[data-portada="b"] .c-capa--chat    { grid-area: c3; margin-top: 44px; }
  /* En la franja todas entran desde ABAJO: la Biblioteca, que en la órbita
     llega por la derecha, aquí se acercaba al chat (8,4 px, medido). */
  html[data-portada="b"] .c-capa .c-capa-dentro { animation-name: c-desde-abajo; }
}

/* Tableta (761-1100): el plano «a», debajo del botón. */
@media (max-width: 1100px) {
  .c-plano { max-width: 620px; }
}
/* Teléfono: la hoja y UNA tarjeta (el correo), apiladas y sin tocarse. */
@media (max-width: 760px) {
  .c-plano {
    --c-u: 6.2px;
    aspect-ratio: auto; container-type: normal;
    display: flex; flex-direction: column; align-items: center; gap: 28px;
  }
  .c-pieza { position: relative; left: auto; top: auto; }
  .c-hoja { width: 164px; }
  .c-capa--chat, .c-capa--fallo { display: none; }
  .c-capa--novedad { width: min(100%, 400px); }
  .c-capa .k2-bandeja-tit { font-size: 13px; }
  .c-capa .k2-bandeja-tit .k2-der { font-size: 12px; }
}

/* ═══ §2 · El arte de fondo (arte/arte.css lo dibuja; aquí, dónde va) ═════
   Ronda 7, tras la crítica: IMAGEN DE FONDO, no máscara. Con la máquina
   cargada, la capa se pintaba como un bloque de color mientras llegaba la
   máscara (1,27:1 bajo los rótulos de Documentos y las cifras); una imagen de
   fondo que todavía no llega no pinta nada. Qué pieza va en cada lugar y en
   cada tema: el bloque ARTE:fondos (montaje/arte_css.py). Aquí, el tamaño y
   la posición, que no dependen del tema. */
.arte--portada { top: 0; }
/* La portada: dentro del marco, desde el borde de la portada (no sube bajo la
   barra). Desde 761, a cubrir y centrada; en el teléfono, a cubrir y arriba. */
.arte--portada::before { background-size: cover; background-position: 50% 50%; }
@media (max-width: 760px) { .arte--portada::before { background-position: 50% 0; } }

/* Las secciones: arriba, a todo el ancho; en el teléfono, la franja central
   de 1100 px. Con la cabecera a todo el ancho (tableta y teléfono), el campo
   empieza DEBAJO de ella (--arte-baja). */
.arte--seccion::before { background-size: 100% auto; background-position: 50% 0; }
@media (max-width: 760px) { .arte--seccion::before { background-size: 1100px auto; } }
@media (max-width: 1100px) {
  .arte--conector::before, .arte--editorial::before { background-position: 50% var(--arte-baja, 0px); }
  /* Medido: la cabecera del conector termina a 289-327 px del borde de la
     sección (761-1100) y a 344 en el teléfono; la del editorial, a 235-281.
     Los sellos, debajo, son vidrio: el campo puede pasar bajo ellos. */
  .arte--conector  { --arte-baja: 340px; }
  .arte--editorial { --arte-baja: 290px; }
}
@media (max-width: 760px) {
  .arte--conector  { --arte-baja: 360px; }
  .arte--editorial { --arte-baja: 300px; }
}

/* Las bandas de las escenas: cada una su campo, a cubrir. */
.arte--banda::before { background-size: cover; background-position: 50% 50%; }

/* Los mosaicos: UNA pieza (una descarga) recortada en cuatro lugares, que
   nace suave bajo el texto de la celda (esa máscara es un degradado: no se
   descarga, así que no hay nada que esperar). */
.arte--mosaico {
  -webkit-mask-image: linear-gradient(to bottom, transparent, black 30%);
          mask-image: linear-gradient(to bottom, transparent, black 30%);
}
.arte--mosaico::before { background-size: 1300px auto; }
.arte--mosaico-1::before { background-position: 0% 10%; }
.arte--mosaico-2::before { background-position: 100% 30%; }
.arte--mosaico-3::before { background-position: 30% 90%; }
.arte--mosaico-4::before { background-position: 85% 70%; }

/* ARTE:fondos — lo escribe montaje/arte_css.py de la maqueta (aquí, con la
   portada «b» desde 1101 y la huella de cada archivo). */
@media (max-width: 760px) {
  .arte--portada::before { background-image: url("arte/portada-alta.claro.svg?v=75b9253f"); }
  :root[data-theme="dark"] .arte--portada::before { background-image: url("arte/portada-alta.oscuro.svg?v=a671d85f"); }
}
@media (max-width: 760px) and (prefers-color-scheme: dark) { :root:not([data-theme]) .arte--portada::before { background-image: url("arte/portada-alta.oscuro.svg?v=a671d85f"); } }
@media (min-width: 761px) and (max-width: 1100px) {
  .arte--portada::before { background-image: url("arte/portada-media.claro.svg?v=14fb95bc"); }
  :root[data-theme="dark"] .arte--portada::before { background-image: url("arte/portada-media.oscuro.svg?v=3f136842"); }
}
@media (min-width: 761px) and (max-width: 1100px) and (prefers-color-scheme: dark) { :root:not([data-theme]) .arte--portada::before { background-image: url("arte/portada-media.oscuro.svg?v=3f136842"); } }
@media (min-width: 1101px) {
  .arte--portada::before { background-image: url("arte/portada-b.claro.svg?v=5faf8b93"); }
  :root[data-theme="dark"] .arte--portada::before { background-image: url("arte/portada-b.oscuro.svg?v=f09c4ccf"); }
}
@media (min-width: 1101px) and (prefers-color-scheme: dark) { :root:not([data-theme]) .arte--portada::before { background-image: url("arte/portada-b.oscuro.svg?v=f09c4ccf"); } }
.arte--conector::before { background-image: url("arte/seccion-conector.claro.svg?v=4e75aee0"); }
:root[data-theme="dark"] .arte--conector::before { background-image: url("arte/seccion-conector.oscuro.svg?v=620da336"); }
@media (prefers-color-scheme: dark) { :root:not([data-theme]) .arte--conector::before { background-image: url("arte/seccion-conector.oscuro.svg?v=620da336"); } }
.arte--editorial::before { background-image: url("arte/seccion-editorial.claro.svg?v=ed3f1531"); }
:root[data-theme="dark"] .arte--editorial::before { background-image: url("arte/seccion-editorial.oscuro.svg?v=5a288212"); }
@media (prefers-color-scheme: dark) { :root:not([data-theme]) .arte--editorial::before { background-image: url("arte/seccion-editorial.oscuro.svg?v=5a288212"); } }
.arte--e-correo::before { background-image: url("arte/escena-correo.claro.svg?v=e0f7fb28"); }
:root[data-theme="dark"] .arte--e-correo::before { background-image: url("arte/escena-correo.oscuro.svg?v=64725372"); }
@media (prefers-color-scheme: dark) { :root:not([data-theme]) .arte--e-correo::before { background-image: url("arte/escena-correo.oscuro.svg?v=64725372"); } }
.arte--e-documentos::before { background-image: url("arte/escena-documentos.claro.svg?v=b095f518"); }
:root[data-theme="dark"] .arte--e-documentos::before { background-image: url("arte/escena-documentos.oscuro.svg?v=56c8e4e1"); }
@media (prefers-color-scheme: dark) { :root:not([data-theme]) .arte--e-documentos::before { background-image: url("arte/escena-documentos.oscuro.svg?v=56c8e4e1"); } }
.arte--e-biblioteca::before { background-image: url("arte/escena-biblioteca.claro.svg?v=51403fd8"); }
:root[data-theme="dark"] .arte--e-biblioteca::before { background-image: url("arte/escena-biblioteca.oscuro.svg?v=d13e1d72"); }
@media (prefers-color-scheme: dark) { :root:not([data-theme]) .arte--e-biblioteca::before { background-image: url("arte/escena-biblioteca.oscuro.svg?v=d13e1d72"); } }
.arte--e-equipo::before { background-image: url("arte/escena-equipo.claro.svg?v=580a645e"); }
:root[data-theme="dark"] .arte--e-equipo::before { background-image: url("arte/escena-equipo.oscuro.svg?v=fb031bc8"); }
@media (prefers-color-scheme: dark) { :root:not([data-theme]) .arte--e-equipo::before { background-image: url("arte/escena-equipo.oscuro.svg?v=fb031bc8"); } }
.arte--mosaico::before { background-image: url("arte/mosaico.claro.svg?v=de7f9fa9"); }
:root[data-theme="dark"] .arte--mosaico::before { background-image: url("arte/mosaico.oscuro.svg?v=b63f6fec"); }
@media (prefers-color-scheme: dark) { :root:not([data-theme]) .arte--mosaico::before { background-image: url("arte/mosaico.oscuro.svg?v=b63f6fec"); } }
/* /ARTE:fondos */

/* Carga diferida: cada campo se pide cuando su sección está a 1,5 pantallas
   (landing.js §12). Sin guion, todos de entrada. El de la portada viene con
   .arte-lista puesto. Lo que no se dibuja no se descarga ni se lee. */
html.js .arte:not(.arte-lista)::before { display: none; }

/* El papel: el grano es fijo y está detrás de todo; las secciones no pintan
   fondo propio para que se vea parejo (la banda de la ronda 6 tenía --bg). */

/* El correo va solo y a su ancho (680 px + el marco de vidrio): el campo
   asoma a los lados (en la ronda 6 el marco medía 960 para el correo y el
   teléfono). */
.m-pantalla--correo { max-width: calc(680px + 2 * var(--m-vidrio-pad) + 2px); }

/* ═══ §3 · El vidrio ═══════════════════════════════════════════════════════
   Un marco (16-20 px en el escritorio, 10 en el teléfono) en las pantallas,
   las piezas de Documentos y del conector, los mosaicos, las cifras, los
   sellos, «Lo que le puedes pedir» y el editorial. El radio de afuera es el
   de adentro más el marco: los dos cantos quedan concéntricos.
   13-oct («se siente laggy», NOTAS «Lag»): hasta aquí era vidrio con
   desenfoque de 12 px EN VIVO. Como la página se mueve debajo, la GPU lo
   recalculaba en cada cuadro sobre ~40 % de la ventana, y al bajar rápido
   aparecían zonas sin pintar (11-27 cuadros por pasada). Ahora es el color
   que ese vidrio dejaba, OPACO: el arte desenfocado a 12 px es casi plano, y
   la resta píxel a píxel del anillo da ±1 nivel de 255 (medido). No hay nada
   que recalcular, y por eso tampoco hace falta la guarda sin GPU (landing.js
   §14 y html.m-vidrio-quieto, retiradas): el marco es el mismo con o sin GPU
   y con «reducir transparencia» (ya es opaco). */
:root { --m-vidrio-pad: clamp(10px, 0.95vw + 6px, 20px); }
.m-vidrio,
.k2-bandeja.m-vidrio {
  background-color: color-mix(in srgb, var(--bandeja) 62%, var(--bg));
  background-image: none;
  box-shadow: inset 0 0 0 0.8px var(--border), var(--sombra-menu);
}
.k2-bandeja.m-vidrio {
  padding: var(--m-vidrio-pad);
  border-radius: calc(var(--radius-lg) + var(--m-vidrio-pad));
}
/* El título y el pie del marco van sobre el vidrio, sin el margen de 4 px del
   kit (el marco ya lo da). */
.k2-bandeja.m-vidrio > .k2-bandeja-tit { padding: 0 4px 10px; min-height: 0; }
.k2-bandeja.m-vidrio > .k2-bandeja-pie { padding: 12px 4px 0; min-height: 0; }
.m-pantalla .k2-bandeja-pie { padding: 12px 4px 0; }
/* La «página» de folium.cl en la pieza /j/: su rótulo es --text-3 de 12 px,
   que sobre un velo necesita 88 % o más sin desenfoque (insumo §4): 90 %. */
.cxr-pagina.m-vidrio-pagina { background-color: color-mix(in srgb, var(--bg) 90%, transparent); }

/* ═══ §4 · La escena de Documentos ═════════════════════════════════════════
   Dos pasos que no se tapan: arriba a la izquierda la novedad en la ficha de
   la causa (528 px, como en el producto, más su marco de vidrio); abajo a la
   derecha, la carpeta. Un hilo los une (landing.js §13). */
.m-docs { display: grid; grid-template-columns: minmax(0, 1fr); gap: 36px; }
.m-docs-paso { display: flex; flex-direction: column; gap: 10px; min-width: 0; margin: 0; }
.m-docs-paso--causa { width: min(100%, calc(528px + 2 * var(--m-vidrio-pad) + 2px)); justify-self: start; }
.m-docs-paso--carpeta { width: min(100%, 860px); justify-self: end; }
@media (min-width: 1101px) { .m-docs-paso--causa { margin-left: clamp(16px, 4vw - 24px, 40px); } }
@media (min-width: 761px) and (max-width: 1100px) { .m-docs-paso--causa { margin-left: 28px; } }
.m-docs-rot {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 8px;
  min-height: 28px; padding: 0 12px 0 5px; border-radius: 999px;
  font-size: 13px; font-weight: 500; line-height: 1.3; color: var(--text);
  background: color-mix(in srgb, var(--pildora) 92%, transparent);
  box-shadow: inset 0 0 0 0.8px var(--border), var(--sombra-reposo);
}
.m-docs-n {
  display: grid; place-items: center; flex: none; width: 19px; height: 19px; border-radius: 50%;
  background: var(--bg-2); box-shadow: inset 0 0 0 0.8px var(--border);
  font-size: 11px; font-weight: 500; color: var(--text-2); font-variant-numeric: tabular-nums;
}
/* Los dos marcos llenan su paso (en una columna flex, el margen automático
   de .m-pantalla los encogía al ancho de su contenido). */
.m-docs-paso .m-pantalla { margin-inline: 0; width: 100%; max-width: none; }
/* La carpeta, recortada como el correo: arriba lo que importa (la causa, la
   resolución «Nuevo») y un fundido hacia abajo. */
.m-docs-recorte { position: relative; max-height: 452px; overflow: hidden; border-radius: var(--radius-lg); }
.m-docs-recorte::after {
  content: ''; position: absolute; inset: auto 0 0; height: 72px; pointer-events: none;
  background: linear-gradient(to bottom, transparent, var(--bg-1));
}
.m-docs .frag-docs { border: 0.8px solid var(--border-in); border-radius: var(--radius-lg); overflow: hidden; }
/* Fuera del recorte, solo como presentación (la pieza no se edita): el
   «3 guardados» de Movimientos (son los movimientos que Folium tiene de la
   causa; junto a «Se guarda sola» se leía como tres documentos en la
   carpeta). La línea de la carpeta SÍ se ve: con el guardado automático
   encendido dice desde cuándo se guarda sola y que solo cuando trae su
   documento (textos.ts, lineaDeCausa). */
.m-docs .frag-mov .k-cj-movs > .k-bandeja-tit .k-der { display: none; }
/* La misma resolución en las dos piezas; en la carpeta, marcada con una
   LÍNEA (nunca con tinta). También en la celda de los mosaicos. */
.m-docs .frag-docs .k-docs-fila.nuevo::before,
.m-celda--docs .frag-docs .k-docs-fila.nuevo::before {
  content: ''; position: absolute; left: -6px; top: 10px; bottom: 10px; width: 2px; border-radius: 2px;
  background: var(--text);
}
/* Los títulos de las piezas pasaron de h1-h3 a <p class="frag-hN">
   (montaje/incrustar.py): aquí, el estilo que tenían (fragmentos/*.css). */
.frag-docs .k-docs-cab .frag-h1 { margin: 0; font-weight: 500; font-size: 24px; line-height: 1; letter-spacing: -0.01em; color: var(--text); }
.frag-docs .k-docs-cen-cab .frag-h2 { margin: 0; font-weight: 500; font-size: 20px; line-height: 1.25; letter-spacing: -0.015em; color: var(--text); }
.frag-docs .k-bandeja-tit .frag-h3,
.frag-mov .k-bandeja-tit .frag-h2 {
  display: inline-flex; align-items: center; gap: 8px; min-width: 0; margin: 0;
  font-weight: 500; font-size: 14px; line-height: 1.2; letter-spacing: -0.01em; color: var(--text-2);
}
@container frag-docs (max-width: 760px) { .frag-docs .k-docs-bandeja > .k-bandeja-tit .frag-h3 { flex-wrap: wrap; } }

/* El hilo (Attio): de la novedad en la causa a la fila «Nuevo», por FUERA de
   las piezas (a la izquierda de los dos marcos). landing.js §13 lo traza con
   las medidas reales; se dibuja UNA vez, cuando entra la carpeta. En el
   teléfono, apiladas a 16 px del borde, no hay por dónde pasarlo. */
/* El tamaño lo ponen width/height (landing.js): con 100 % el <svg> de un
   hijo absoluto de la rejilla quedaba en 0 × 0 en Chromium. */
.m-docs-hilo { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; }
.m-docs-hilo-l { fill: none; stroke: var(--text-3); stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; }
.m-docs-hilo-p { fill: var(--bg-1); stroke: var(--text-3); stroke-width: 1.2; }
html.m-anima .m-docs-hilo-l { stroke-dasharray: 1 1; stroke-dashoffset: 1; animation: m-hilo 1.2s var(--e-out) .45s forwards paused; }
html.m-anima .m-docs-hilo-p--b { animation: m-aparece .35s var(--e-out) 1.5s both paused; }
html.m-anima .m-docs-paso--carpeta.m-visto ~ .m-docs-hilo .m-docs-hilo-l,
html.m-anima .m-docs-paso--carpeta.m-visto ~ .m-docs-hilo .m-docs-hilo-p--b { animation-play-state: running; }
@keyframes m-hilo { to { stroke-dashoffset: 0; } }
.m-docs-hilo:not([viewBox]) { display: none; }
@media (max-width: 760px) {
  .m-docs { gap: 24px; }
  .m-docs-recorte { max-height: 640px; }
  .m-docs-hilo { display: none; }
}

/* ═══ §5 · El conector ═════════════════════════════════════════════════════ */
.m-sec-cab--sin-pie { margin-bottom: 0; }
/* La cabecera: el titular y, a su lado, los dos sellos (crítica: el titular
   medía 44 px y los sellos 15 y 13, «como nota al pie»). */
.m-con-cabecera {
  display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: 32px clamp(32px, 4vw, 72px); align-items: end;
}
@media (max-width: 1100px) { .m-con-cabecera { grid-template-columns: minmax(0, 1fr); align-items: start; } }
.m-con-entradilla { max-width: 32em; }

/* Dónde está: dos celdas de vidrio con el texto DIRECTO sobre el vidrio
   (22 px y 15 px), enlazadas a las dos fichas. Solo texto y ↗. */
ul.m-sellos { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 0; list-style: none; min-width: 0; }
.m-sello-celda { border-radius: calc(var(--radius-lg) + 10px); }
.m-sello {
  display: flex; flex-direction: column; gap: 6px; margin: 0;
  padding: clamp(18px, 0.8vw + 12px, 24px) clamp(18px, 1vw + 12px, 28px);
  border-radius: inherit; color: var(--text);
}
/* El ↗ va pegado a la última palabra (en el teléfono el título parte en dos
   renglones y, como elemento flex, el ícono se iba al otro borde). */
.m-sello-tit {
  display: block;
  font-size: clamp(19px, 0.29vw + 17.8px, 22px); font-weight: 500; line-height: 1.25; letter-spacing: -0.014em;
  color: var(--text); text-wrap: balance;
}
.m-sello-ir { display: inline-block; width: 16px; height: 16px; margin-left: 8px; vertical-align: -1px; color: var(--text-2); transition: transform 150ms; }
a.m-sello:hover .m-sello-ir { transform: translate(1px, -1px); }
a.m-sello:hover .m-sello-tit { text-decoration: underline; text-decoration-color: var(--deco); text-underline-offset: 4px; }
.m-sello-sub { font-size: 15px; line-height: 1.45; color: var(--text-2); }

/* Lo que le puedes pedir: un panel de vidrio a lo ancho; adentro, las dos
   cuentas lado a lado, cada una en su tarjeta (su texto es de 13-14,5 px). */
.m-pedir {
  display: flex; flex-direction: column; gap: 10px; min-width: 0;
  margin-top: clamp(40px, 3vw + 16px, 64px); padding: var(--m-vidrio-pad);
  border-radius: calc(var(--radius-lg) + var(--m-vidrio-pad));
}
.m-pedir-cab { display: flex; flex-direction: column; gap: 4px; padding: 2px 4px 4px; }
.m-pedir-tit { font-size: 19px; font-weight: 500; line-height: 1.3; letter-spacing: -0.012em; color: var(--text); }
.m-pedir-sub { font-size: 15px; line-height: 1.45; color: var(--text-2); }
.m-pedir-grupos { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px 20px; align-items: start; }
@media (max-width: 900px) { .m-pedir-grupos { grid-template-columns: minmax(0, 1fr); } }
.m-pedir-col { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.m-pedir-grupo { margin: 0; padding: 0 4px; font-size: 15px; font-weight: 500; line-height: 1.35; color: var(--text); }
.m-pedir-grupo span { font-weight: 400; color: var(--text-2); }
ul.m-pedir-lista {
  margin: 0; padding: 4px 16px; list-style: none;
  background: var(--bg-1); border: 0.8px solid var(--border-in); border-radius: var(--radius-lg); box-shadow: var(--luz-borde);
}
.m-pedir-item {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "q donde" "r r";
  gap: 4px 16px; padding: 13px 0;
}
.m-pedir-item + .m-pedir-item { border-top: 0.8px solid var(--border-in); }
.m-pedir-q { grid-area: q; margin: 0; font-size: 14.5px; font-weight: 500; line-height: 1.45; letter-spacing: -0.004em; color: var(--text); text-wrap: pretty; }
.m-pedir-r { grid-area: r; margin: 0; font-size: 13px; line-height: 1.5; color: var(--text-2); text-wrap: pretty; }
.m-pedir-donde { grid-area: donde; margin: 2px 0 0; font-size: 12px; line-height: 1.35; color: var(--text-2); white-space: nowrap; }
@media (max-width: 520px) {
  .m-pedir-item { grid-template-columns: minmax(0, 1fr); grid-template-areas: "q" "r" "donde"; }
  .m-pedir-donde { margin-top: 2px; }
}

/* Las piezas reales, quietas, en una fila escalonada. */
.m-con-piezas {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 28px;
  align-items: start; margin-top: clamp(56px, 4vw + 24px, 96px);
}
.m-con-piezas .cxc { max-width: none; }
.m-con-piezas .cxr { max-width: none; margin-top: 88px; }
@media (max-width: 1100px) {
  .m-con-piezas { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .m-con-piezas .cxc { max-width: 640px; }
  .m-con-piezas .cxr { max-width: 760px; margin-top: 0; justify-self: end; width: 100%; }
}

/* Cómo empezar: tres celdas entre filetes, de filete a filete del marco. */
ol.m-pasos {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: clamp(56px, 4vw + 24px, 96px) calc(var(--m-pad) * -1) 0; padding: 0;
  border-block: 0.8px solid var(--border); list-style: none;
}
.m-paso { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 14px; padding: 28px var(--m-pad) 32px; min-width: 0; }
.m-paso + .m-paso { border-left: 0.8px solid var(--border); }
.m-paso-cuerpo { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; min-width: 0; padding-top: 3px; }
.m-paso-cuerpo .r-clics { margin: 2px 0 0; padding: 0; }
.m-paso-cuerpo .r-donde-nota { margin-top: 4px; }
@media (max-width: 900px) {
  ol.m-pasos { grid-template-columns: minmax(0, 1fr); }
  .m-paso + .m-paso { border-left: 0; border-top: 0.8px solid var(--border); }
}
/* Paso 2: los dos destinos en dos filas de bloque (crítica técnica §3: a 360
   y 390 el área de 44 px de uno se comía un tercio del otro). */
.m-destinos { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; margin-top: 6px; }
.r-clics .m-destinos a { display: inline-flex; align-items: center; gap: 6px; min-height: 30px; white-space: normal; }
.m-destinos a svg { width: 13px; height: 13px; flex: none; color: var(--text-2); }
@media (pointer: coarse) {
  .r-clics .m-destinos a { min-height: 44px; }
  .r-clics .m-destinos a::after { content: none; }
}
.m-con-nota { margin-top: 24px; color: var(--text-2); }
.m-con-nota a { color: var(--text); text-decoration: underline; text-decoration-color: var(--deco); text-underline-offset: 3px; }
@media (pointer: coarse) {
  .m-con-nota a { position: relative; white-space: nowrap; }
  .m-con-nota a::after { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 44px; transform: translateY(-50%); }
}

/* ═══ §6 · Mosaicos y editorial ═════════════════════════════════════════════ */
.m-celda-escena { position: relative; }
@media (min-width: 1101px) { .m-celda--docs { grid-column: span 5; } }
/* Las cifras, en su panel de vidrio dentro de la banda de arte. */
.m-celda-escena--cifras { place-items: stretch; align-content: center; }
.m-cifras.m-vidrio { border-radius: calc(var(--radius-lg) + 8px); padding: 8px 24px 10px; flex: none; }
@media (max-width: 520px) { .m-cifras.m-vidrio { padding: 4px 16px 6px; } }
/* C · la resolución en su carpeta: la bandeja «Del tribunal» de la pieza. */
.m-frag--docs { max-width: 500px; }
.m-frag--docs .frag-docs { background: transparent; }
.m-frag--docs .frag-docs > .k-bandeja { box-shadow: inset 0 0 0 0.8px var(--border); }
.m-frag .k2-bandeja-tit .k2-rol { font-size: 12px; }
html.m-anima .m-celda--docs .k-docs-fila.nuevo { animation: m-llega .8s var(--e-out-expo) .25s both paused; }
html.m-anima .m-celda--docs .k-docs-fila.nuevo::before { transform-origin: 50% 0; animation: m-linea .6s var(--e-out) .9s both paused; }
html.m-anima .m-celda--docs.m-visto .k-docs-fila.nuevo::before { animation-play-state: running; }
@keyframes m-linea { from { transform: scaleY(0); } }
/* El editorial: sus marcos son vidrio (la tarjeta de adentro sigue opaca). */
.r-editorial .k2-bandeja.m-vidrio { box-shadow: inset 0 0 0 0.8px var(--border), var(--sombra-reposo); }

/* ═══ §6b · La portada: credenciales, y lo chico ═══════════════════════════ */
/* Las credenciales bajo el botón (crítica: «en la portada no hay ninguna
   credencial»). Texto sobre la calma del arte, en --text. */
.m-credenciales {
  display: flex; flex-wrap: wrap; align-items: center; gap: 2px 22px;
  margin: 2px 0 0; padding: 12px 0 0; list-style: none;
  border-top: 0.8px solid var(--border); max-width: 34em;
  font-size: 14px; line-height: 1.4; color: var(--text-2);
}
.m-credenciales li { display: inline-flex; align-items: center; gap: 8px; }
.m-credenciales a {
  display: inline-flex; align-items: center; gap: 6px; min-height: 32px; color: var(--text);
  text-decoration: underline; text-decoration-color: var(--deco); text-underline-offset: 4px;
}
.m-credenciales a:hover { text-decoration-color: var(--text-3); }
.m-credenciales a svg { width: 13px; height: 13px; flex: none; color: var(--text-2); }
@media (pointer: coarse) { .m-credenciales a { min-height: 44px; } }

/* Saltar al contenido (crítica técnica §10: 7 paradas de Tab antes de <main>). */
.m-saltar {
  position: absolute; left: 16px; top: 10px; z-index: 100;
  padding: 10px 14px; border-radius: var(--radius); background: var(--bg-1); color: var(--text);
  font-size: 14px; font-weight: 500; box-shadow: inset 0 0 0 0.8px var(--border), var(--sombra-menu);
}
/* Fuera de la vista hasta que recibe el foco (el patrón de «solo lector»). */
.m-saltar:not(:focus) {
  width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; white-space: nowrap;
  clip: rect(0 0 0 0); clip-path: inset(50%); box-shadow: none;
}
/* A 320 px la barra desbordaba 16 px (crítica técnica §2): bajo 360, «Agendar». */
@media (max-width: 359px) { .m-barra-tinta-resto { display: none; } }

/* ═══ §7 · Movimiento reducido: todo en su estado final ════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .c-hoja .m-trazo, .c-hoja .m-aguada, .c-capa-dentro,
  .m-celda--docs .k-docs-fila.nuevo, .m-celda--docs .k-docs-fila.nuevo::before,
  .m-docs-hilo-p--b { animation: none !important; }
  .m-docs-hilo-l { animation: none !important; stroke-dashoffset: 0 !important; }
}

/* ═══ §8 · Los arreglos del porte (revisiones del 13-oct-2026) ══════════════
   No vienen de la maqueta: los escribe scripts/portada_k2_hojas.py aparte, al
   final, para que volver a traer la maqueta no los borre. */

/* El panel «Producto» cabe en una pantalla baja: a 844×390 (un teléfono
   apaisado) terminaba en y=633 y sus seis últimos enlaces quedaban fuera, sin
   forma de alcanzarlos (desplazar movía la página, no el panel). */
.m-panel-dentro {
  max-height: calc(100vh - var(--m-alto-barra) - 16px);
  max-height: calc(100dvh - var(--m-alto-barra) - 16px);
  overflow-y: auto; overscroll-behavior: contain;
}

/* El titular reserva sus cuatro renglones hasta 391 px. Con Inter siempre son
   cuatro entre 320 y 391 (medido); con la letra del sistema, entre 386 y 391
   eran tres, y al llegar Inter la página bajaba (CLS 0,107 a 390, el ancho de
   iPhone más común). El dibujo final no cambia. */
@media (max-width: 391px) { .m-titular { min-height: 4lh; } }

/* Mientras llega Inter, una letra del sistema con las MEDIDAS de Inter. Al
   entrar desde fuera por un ancla (folium.cl/#conector) en un teléfono, la
   página se dibujaba con la letra del sistema, que corta los renglones en
   otro lugar, y al llegar Inter todo lo de arriba crecía y la pantalla
   saltaba: CLS 0,24 en #conector y 0,43 en #editorial (390 px, red lenta,
   CPU 4x, n=3), y 0 con Inter bloqueada; con esta letra, 0 y 0,003 (13-oct,
   Chromium; Safari sin medir). Aquí la letra provisional es Arial (Roboto
   en Android, que no la trae) escalada a lo que mide Inter con su tamaño
   óptico 32 sobre el texto de esta página, peso por peso (Inter/Arial: 400
   0,9652 · 500 0,9836 · 600 0,9445 contra Arial Bold; Inter/Roboto: 0,9760 ·
   0,9869 · 1,0014 contra Roboto Bold), con la altura de Inter (1984 y 494
   sobre 2048). Lo que se ve una vez cargada no cambia: Inter cubre todos los
   caracteres de la página, así que esta letra no aparece nunca a su lado.
   Medirlo de nuevo si cambia mucho el texto. */
@font-face { font-family: 'Inter respaldo'; font-weight: 400; src: local('Arial'), local('ArialMT');
  size-adjust: 96.52%; ascent-override: 100.37%; descent-override: 24.99%; line-gap-override: 0%; }
@font-face { font-family: 'Inter respaldo'; font-weight: 500; src: local('Arial'), local('ArialMT');
  size-adjust: 98.36%; ascent-override: 98.49%; descent-override: 24.52%; line-gap-override: 0%; }
@font-face { font-family: 'Inter respaldo'; font-weight: 600 700; src: local('Arial Bold'), local('Arial-BoldMT');
  size-adjust: 94.45%; ascent-override: 102.57%; descent-override: 25.54%; line-gap-override: 0%; }
@font-face { font-family: 'Inter respaldo Android'; font-weight: 400; src: local('Roboto'), local('Roboto-Regular');
  size-adjust: 97.60%; ascent-override: 99.26%; descent-override: 24.71%; line-gap-override: 0%; }
@font-face { font-family: 'Inter respaldo Android'; font-weight: 500; src: local('Roboto Medium'), local('Roboto-Medium');
  size-adjust: 98.69%; ascent-override: 98.16%; descent-override: 24.44%; line-gap-override: 0%; }
@font-face { font-family: 'Inter respaldo Android'; font-weight: 600 700; src: local('Roboto Bold'), local('Roboto-Bold');
  size-adjust: 100.14%; ascent-override: 96.74%; descent-override: 24.09%; line-gap-override: 0%; }
:root { --sans: 'Inter', 'Inter respaldo', 'Inter respaldo Android', system-ui, -apple-system, 'Segoe UI', sans-serif; }

/* «Saltar al contenido» deja el foco en <main> (tabindex="-1"), sin anillo
   alrededor de la página entera. */
#contenido:focus { outline: none; }

/* La guía del conector: con el dedo, 44 px como sus pares (§ «Con el dedo»).
   Es el último renglón de su nota: el área no tapa otro enlace. */
@media (pointer: coarse) {
  .r-donde-nota a { position: relative; white-space: nowrap; }
  .r-donde-nota a::after {
    content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 44px; transform: translateY(-50%);
  }
}

/* «Lo que cubre»: las dos cifras de una fila comparten su renglón. A 1024 el
   «Más de» de 50.000 bajaba a su propio renglón y el número quedaba ~20 px más
   abajo que 79.440, a su lado. Con subgrid, la cifra (dt) y su definición (dd)
   ocupan la misma fila en las dos celdas, y el número se apoya abajo: el «Más
   de» que sobra queda encima. Donde caben en un renglón, nada cambia. */
@supports (grid-template-rows: subgrid) {
  .m-cifra { display: grid; grid-template-rows: subgrid; grid-row: span 2; row-gap: 8px; align-content: start; }
  .m-cifra-n { align-self: end; }
}
/* Pero entre 761 y 1100 eso no bastaba: el «Más de» seguía solo en su renglón,
   encima de 50.000 (lo pidió José el 13-oct). Ahí el panel mide 294-436 px y
   cada columna 123-194, y «Más de 50.000» pide unos 180 a su letra (a 761 la
   columna deja 79 para el número). Así que, como en el teléfono, una cifra por
   renglón: cada «Más de» va junto a su número en 761, 820, 900, 960, 1024 y
   1100 (medido en Chromium). Cuesta 54-85 px de alto en la fila de la cita. */
@media (min-width: 761px) and (max-width: 1100px) {
  .m-cifras { grid-template-columns: minmax(0, 1fr); }
  .m-cifra { grid-row: auto; grid-template-rows: none; padding: 14px 0 16px; }
  .m-cifra-n { align-self: auto; }
  .m-cifra:nth-child(even) { padding-left: 0; border-left: 0; }
  .m-cifra:nth-child(n + 2) { border-top: 0.8px solid var(--border); }
}

/* El pie: los números anteriores del Informe y los primeros de Atlas y Lupa,
   en filas (cada enlace con el alto de los demás del pie). */
.r-pie-fila { display: flex; flex-wrap: wrap; align-items: center; column-gap: 12px; }
.r-pie-fila-rot { font-size: 13px; line-height: 1.35; color: var(--text-3); }