/* Mosaico · bloque 1C del artifact «Blog de Navarting bloque a bloque» (elegido el 24-09-2026).
   «Siempre maqueta, el artifact manda»: las fórmulas son las de la maqueta (p01.html) tal cual, con su `cqi` como
   `vw`, porque su marco ES la pantalla (su botón «Ver a 390 px» lo pone a 390): filas a dos mitades con canal
   clamp(30px, 4vw, 48px), aire clamp(30px, 4vw, 46px) y filete #E2E3E5; pieza sobre loseta #F3F3F2, radio 10 y aire
   clamp(20px, 2.6vw, 34px); texto clamp(16.5px, 1.45vw, 19.5px)/1.62; titular 400 clamp(25px, 2.6vw, 34px)/1.14 a
   30 px de su texto; cadena en Newsreader. Por debajo de 760 px (su `@container (width < 760px)`), una columna.
   Donde se aparta de ella, lo mínimo y medido (careo maqueta ↔ entrada, 24-09-2026):
   - sin numerales de apartado (Jesús, 24-09);
   - la entrada animada arranca en opacidad 0,4 y no en 0 (regla de la casa);
   - una lista de frases (más de 40 caracteres por punto) va a una columna en su mitad: a dos, 30 caracteres por
     línea; la maqueta solo dibuja campos cortos, y esos sí van a dos;
   - de 700 a 759 px, a una columna, el texto se queda en 40em: a todo el ancho pasaba de 92 caracteres por línea;
   - las tablas pasan a fichas desde 767 px, el corte que ya tiene el molde, y no desde 759;
   - un titular de tira con introducción larga va encima y la introducción a dos columnas (al lado dejaba 174 px en
     blanco a 1440).
   Solo carga en las entradas con `_nv_molde = mosaico`, detrás de blog-molde.css. */

.nv-mosaico {
  --mos-canal: clamp(30px, 4vw, 48px);
  --mos-aire: clamp(30px, 4vw, 46px);
  --mos-loseta: #f3f3f2;
  --mos-linea: #e2e3e5;
  --mos-senal: var(--molde-senal, #d81820);
  --mos-gris: var(--molde-gris, #5b626b);
  --mos-tinta: var(--molde-tinta, #0b0d10);
  --mos-display: var(--nv-font-display, newsreader, georgia, serif);
  --mos-texto: var(--nv-font-body, "Instrument Sans", system-ui, sans-serif);
  /* Tokens de la maqueta del bloque 2 (`--white`, `--bad`, `--tint` de su núcleo). */
  --mos-blanco: var(--nv-white, #fff);
  --mos-mal: var(--nv-danger, #b42318);
  --mos-tinte: #fcebec;
  /* Tokens de la maqueta del bloque 4 (`--mist`, `--paper`, `--ok` de su núcleo), tomados del kit (verificador en frío,
     28-09-2026: repetían a mano --nv-mist y --nv-paper, y el --ok de la maqueta no es el --nv-success del kit). */
  --mos-niebla: var(--nv-mist, #e9eaec);
  --mos-papel: var(--nv-paper, #fbfbfa);
  --mos-ok: var(--nv-success, #11734f);
}

/* Los enlaces del índice dejaban cada titular debajo de la cabecera pegada (73 px): a 18 px del borde, tapado
   (verificador en frío, 28-09-2026). */
html { scroll-padding-top: 89px; }

/* La columna de lectura de 43 rem no existe en el mosaico: la caja se llena. */
.nv-entrada-compuesta > .nv-entrada__texto.nv-mosaico {
  margin-inline: 0;
  max-width: none;
  width: 100%;
}
/* Ni la medida editorial del tema (49 rem): entre 992 y 1239 px dejaba el artículo entero en 784 px centrados
   (medido con medir-ancho, 24-09-2026). El tema la pone en una capa; esta regla, sin capa, le gana. */
body.nv-molde-mosaico .nv-entry-content.nv-container--editorial { max-inline-size: none; }
/* …y la de sus hijos (`.nv-prose > *`, también 784 px), que el molde solo libera desde 1240. De 900 a 1239 el
   resumen y el índice comparten fila como en escritorio: sueltos, el resumen pasaría de 92 caracteres por línea. */
@media (min-width: 900px) {
  body.nv-molde-mosaico .nv-entrada-compuesta { max-inline-size: none; }
}
/* El índice del molde va en rejilla de dos a 768: con un número impar de apartados, el último quedaba solo en su
   fila al 48 % (gate-huerfanos-rejilla, 24-09-2026). Cruza la fila. En columnas (escritorio) no tiene efecto. */
body.nv-molde-mosaico .nv-toc__lista > li:last-child:nth-child(odd) { grid-column: 1 / -1; }
@media (min-width: 900px) and (max-width: 1239.98px) {
  body.nv-molde-mosaico .nv-entrada-compuesta {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 3rem;
    align-items: start;
  }
  body.nv-molde-mosaico .nv-entrada-compuesta > * { grid-column: 1 / -1; }
  body.nv-molde-mosaico .nv-entrada-compuesta > .nv-resumen:has(+ .nv-toc) { grid-column: 1; }
  body.nv-molde-mosaico .nv-entrada-compuesta > .nv-resumen + .nv-toc {
    grid-column: 2;
    border-top: 0;
    border-bottom: 0;
    padding-top: 0;
  }
}
/* Cabecera sin imagen destacada: la entradilla iba a 153 caracteres por línea en 1440; a dos columnas, como hace el
   molde con las cabeceras sin imagen. Con imagen, la cabecera es la de siempre. */
body.nv-molde-mosaico .nv-hero-maqueta:not(.nv-hero-maqueta--con-imagen) .nv-hero-maqueta__entrada {
  columns: 19em 2;
  column-gap: 48px;
  max-inline-size: none;
}
/* Cabecera CON imagen, apilada (por debajo de 48em): la entradilla conservaba su tope de 46ch (534 px) y, de ~660 a
   767 px, se quedaba en el 74-82 % del ancho útil con el hueco a la derecha (registra-ancho, 28-09-2026). Sin el tope
   llena la caja: a 767 px, unos 68 caracteres por línea. */
@media (max-width: 47.99em) {
  body.nv-molde-mosaico .nv-hero-maqueta--con-imagen .nv-hero-maqueta__entrada { max-inline-size: none; }
}

/* Sin numerales de apartado ni su margen de 3,2 rem: las reglas del molde pesan (0,4,1) y (0,4,2) con el `:has`. */
.nv-entrada-compuesta:has(> .nv-toc) .nv-entrada__texto.nv-mosaico h2[data-nv-orden]::before,
.nv-entrada-compuesta .nv-entrada__texto.nv-mosaico h2::before { content: none; display: none; }

/* 🔴 `minmax(0, 1fr)` y `min-width: 0`, nunca la columna `auto`: con ella, la pieza más ancha que no cabe (un
   `<code>` de 514 px sin punto de corte en plan-medicion-marketing) estiraba la columna a 703 px y arrastraba TODAS
   las secciones fuera de una pantalla de 390 (25-09-2026, el primer artículo con código tras activar el mosaico en los
   29; la 481 no llevaba ninguna). El código, además, parte por donde haga falta, como en la maqueta. */
.nv-mosaico__cuerpo { display: grid; grid-template-columns: minmax(0, 1fr); overflow-x: clip; }
.nv-mosaico__cuerpo > * { min-width: 0; }
/* `overflow-x: clip` (como el marco de la maqueta): las piezas que aún no han entrado esperan con `translateX(30px)`
   y, fuera de pantalla, ensanchaban el documento 10 px a 390 (medido al cargar plan-medicion-marketing). El medidor
   de anchos no lo ve porque baja hasta el final antes de medir y entonces ya han entrado todas. */
.nv-mosaico code { overflow-wrap: anywhere; }
/* Lo mismo en cada rejilla de una columna del mosaico (la tira lo repetía: 562 px por el `<pre>`) y en los hijos de
   todas las rejillas; un `<pre>` se desliza en su caja, que es lo que la casa pide del código. */
.nv-mosaico__tira,
.nv-mosaico__txt,
.nv-mosaico__prosa,
.nv-mosaico__tira-tit,
.nv-mosaico__tira-intro,
.nv-mosaico__pieza,
.nv-mosaico__pregunta,
.nv-mosaico__pasos,
.nv-mosaico__cadena { grid-template-columns: minmax(0, 1fr); }
.nv-mosaico__tira > *,
.nv-mosaico__txt > *,
.nv-mosaico__prosa > *,
.nv-mosaico__pieza > *,
.nv-mosaico__fila > *,
.nv-mosaico__tira-cab > *,
.nv-mosaico__faq > *,
.nv-mosaico__ancha > * { min-width: 0; }
.nv-mosaico pre { overflow-x: auto; max-width: 100%; }

.nv-mosaico__cuerpo > section {
  border-top: 1px solid var(--mos-linea);
  padding-block: var(--mos-aire);
}
.nv-mosaico__cuerpo > section:first-child { border-top: 0; padding-top: 0; }

/* La letra del cuerpo, no la de la firma ni la de la salida a media lectura (bloque 5, que se sustituye aparte):
   esas conservan la del molde. El `:where` deja el peso en (0,1,1), el de siempre. */
.nv-mosaico :is(p, li):where(:not(.nv-autor *, .nv-mosaico__aparte *)) {
  font-size: clamp(16.5px, 1.45vw, 19.5px);
  line-height: 1.62;
}
/* Titular: 14 px de margen y 16 de hueco, 30 hasta su texto, como en la maqueta; sin el numeral, nada encima. */
.nv-entrada-compuesta:has(> .nv-toc) .nv-entrada__texto.nv-mosaico h2[data-nv-orden],
.nv-entrada-compuesta .nv-entrada__texto.nv-mosaico h2 {
  font: 400 clamp(25px, 2.6vw, 34px) / 1.14 var(--mos-display);
  letter-spacing: -0.01em;
  margin: 0 0 14px;
  max-inline-size: none;
  text-wrap: balance;
}
.nv-mosaico h3 {
  font: 500 clamp(19px, 1.5vw, 22px) / 1.25 var(--mos-display);
  margin: 6px 0 0;
}

/* El texto de una mitad: bloques con 16 px entre sí, sin los márgenes del tema (que empujaban 25 px por bloque). */
.nv-mosaico__txt,
.nv-mosaico__prosa,
.nv-mosaico__tira-intro,
.nv-mosaico__tira-tit {
  display: grid;
  gap: 16px;
  align-content: start;
}
.nv-mosaico__txt > *,
.nv-mosaico__tira-intro > *,
.nv-mosaico__cols > *,
.nv-mosaico__continua > *,
.nv-mosaico__cola > * { margin: 0; }

/* FILA: dos mitades iguales; la pieza cambia de lado con `data-lado`. */
.nv-mosaico__fila {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px var(--mos-canal);
  align-items: start;
}
.nv-mosaico__fila[data-lado="izq"] > .nv-mosaico__txt { order: 2; }
.nv-mosaico__fila > .nv-mosaico__continua { grid-column: 1 / -1; order: 3; }

/* PIEZA: loseta con rótulo. */
.nv-mosaico__pieza {
  background: var(--mos-loseta);
  border-radius: 10px;
  padding: clamp(20px, 2.6vw, 34px);
  display: grid;
  gap: 16px;
  margin: 0;
  align-content: start;
}
.nv-mosaico__rotulo,
.nv-mosaico__cita::before {
  display: flex;
  align-items: center;
  gap: 10px;
  font: 600 11px / 1.4 var(--mos-texto);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mos-gris);
}
.nv-mosaico__rotulo::before {
  content: "";
  inline-size: 18px;
  block-size: 2px;
  background: var(--mos-senal);
  flex: none;
}
/* Con el rótulo a dos o tres líneas, la raya encabeza la primera (centrada, caía entre líneas) y no queda una palabra
   sola abajo («LINKEDIN» a 1024 y 320, «FILAS» a 900; verificador en frío, 03-10-2026). En una línea, la raya queda
   donde estaba: 0,7 em es la mitad de la línea de 1,4. */
.nv-mosaico__rotulo { align-items: flex-start; text-wrap: balance; }
.nv-mosaico__rotulo::before { margin-block-start: calc(0.7em - 1px); }

/* IMAGEN DE LA PIEZA (esquemas con datos del blog, 30-09-2026). El esquema se exporta con el fondo de la loseta, así
   que loseta e imagen son una sola superficie. A 27,5 rem como mucho: la imagen pasa de 310 px en el móvil a 440 en
   escritorio (×1,4, como la letra de la página) y no a 552 (×1,8), que ponía su título casi al tamaño del H2. Su rótulo
   hace de título, a la escala de un H3. Lo midió el verificador en frío sobre gobernanza-utm. */
.nv-mosaico__pieza > img {
  display: block;
  inline-size: 100%;
  max-inline-size: 27.5rem;
  block-size: auto;
  justify-self: center;
}
/* En bloque y con la raya en línea: si el título se parte (el móvil), la raya encabeza la primera línea. El rótulo
   ocupa la caja del dibujo y arranca en su borde izquierdo: un solo eje con el dibujo, que está compuesto a la
   izquierda, y con las demás losetas (verificador en frío, 02-10-2026: centrado, la raya caía 40 px a la izquierda
   del dibujo y a 1200 iba a dos líneas centradas sobre un dibujo alineado a la izquierda). */
.nv-mosaico__pieza:has(> img) > .nv-mosaico__rotulo {
  display: block;
  inline-size: 100%;
  max-inline-size: 27.5rem;
  justify-self: center;
  font: 400 clamp(1.1875rem, 1.1rem + 0.25vw, 1.35rem) / 1.25 var(--nv-font-display, Newsreader, Georgia, serif);
  letter-spacing: 0;
  text-transform: none;
  text-align: left;
  text-wrap: balance;
  color: var(--nv-ink, #0b0d10);
}
.nv-mosaico__pieza:has(> img) > .nv-mosaico__rotulo::before {
  display: inline-block;
  vertical-align: middle;
  margin-block-start: 0;
  margin-inline-end: 10px;
}

/* De 760 a 1199 px la fila con imagen no va a dos mitades: a media caja la imagen encogía mientras el texto crecía y
   dejaba hasta 572 px de hueco bajo la loseta (a 760; 263 a 1024). Y apilada con la loseta a todo el ancho (30-09),
   más de la mitad de la loseta era gris vacío: 356 px a cada lado del dibujo a 1199, 268 a 1024 y 140 a 768
   (verificador en frío, 02-10-2026). La loseta se ciñe ahora al dibujo. Solo las filas con imagen: el resto sigue el
   corte de 760 de la maqueta 1C. */
/* De 760 a 899: apilada; el texto a dos columnas y, debajo, la loseta ceñida al dibujo y centrada. */
@media (min-width: 760px) and (max-width: 899.98px) {
  .nv-mosaico__fila:has(> .nv-mosaico__pieza > img) { grid-template-columns: minmax(0, 1fr); }
  .nv-mosaico__fila:has(> .nv-mosaico__pieza > img) > .nv-mosaico__txt {
    display: block;
    columns: 2;
    column-gap: var(--mos-canal);
    order: 0;
  }
  .nv-mosaico__fila:has(> .nv-mosaico__pieza > img) > .nv-mosaico__txt > h2 { column-span: all; }
  /* En columnas ya no hay el hueco de la rejilla: los 16 px entre bloques de siempre, como margen. */
  .nv-mosaico__fila:has(> .nv-mosaico__pieza > img) > .nv-mosaico__txt > * + * { margin-block-start: 16px; }
  .nv-mosaico__fila:has(> .nv-mosaico__pieza > img) > .nv-mosaico__pieza {
    order: 1;
    justify-self: center;
    inline-size: fit-content;
    padding: 28px;
  }
  .nv-mosaico__fila:has(> .nv-mosaico__pieza > img) > .nv-mosaico__continua { order: 2; }
  .nv-mosaico__pieza > img,
  .nv-mosaico__pieza:has(> img) > .nv-mosaico__rotulo { inline-size: 27.5rem; }
}
/* De 900 a 1199: el texto a una columna y la loseta a su derecha (sea cual sea su lado en escritorio), ceñida al
   dibujo. El dibujo a 22,5 rem: su letra (16,6 px) es la del cuerpo (16,5). */
@media (min-width: 900px) and (max-width: 1199.98px) {
  .nv-mosaico__fila:has(> .nv-mosaico__pieza > img) { grid-template-columns: minmax(0, 1fr) auto; }
  .nv-mosaico__fila:has(> .nv-mosaico__pieza > img) > .nv-mosaico__txt { order: 0; }
  .nv-mosaico__fila:has(> .nv-mosaico__pieza > img) > .nv-mosaico__pieza { padding: 26px; }
  .nv-mosaico__pieza > img,
  .nv-mosaico__pieza:has(> img) > .nv-mosaico__rotulo { inline-size: 22.5rem; max-inline-size: 22.5rem; }
}
/* Con el texto a una columna estrecha (404 px a 900) el texto es más alto que la loseta: hasta 233 px vacíos debajo
   de ella. La loseta acompaña a la lectura, bajo la cabecera fija (73 px). Solo si cabe entera con el aviso de media
   lectura abajo: 96 + 568 de loseta + 90 de aviso. */
@media (min-width: 900px) and (max-width: 1199.98px) and (min-height: 760px) {
  .nv-mosaico__fila:has(> .nv-mosaico__pieza > img) > .nv-mosaico__pieza { position: sticky; top: 96px; }
}
/* Móvil: 10 px de aire lateral en la loseta con imagen (eran 20). El dibujo pasa de 310 a 330 px a 390 y de 280 a
   300 a 360, y su letra con él. */
@media (max-width: 479.98px) {
  .nv-mosaico__pieza:has(> img) { padding-inline: 10px; }
}

/* Lista de la pieza: filas con filete y cuadradito de señal. */
.nv-mosaico__lista,
.nv-mosaico__cadena {
  list-style: none;
  margin: 0;
  padding: 0;
}
/* 🔴 Los marcadores van en posición absoluta, NUNCA con `display: flex` o `grid` en el `li`: dentro de un flex,
   un enlace y el texto que le sigue se vuelven dos ítems y la frase se parte en columnas (gate-corte «se sale» a
   390 en la lista de fuentes, 24-09-2026; es el defecto de la casa de los spans dentro de un flex). */
.nv-mosaico__lista li {
  position: relative;
  padding: 9px 0 9px 20px;
  border-top: 1px solid var(--mos-linea);
  font-size: clamp(15px, 1.3vw, 17px);
}
.nv-mosaico__lista li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: calc(9px + 0.81em - 4px);
  inline-size: 8px;
  block-size: 8px;
  background: var(--mos-senal);
}
.nv-mosaico__lista li::marker { content: ""; }
/* Campos cortos («Cada métrica registra» en la maqueta): a dos columnas. Las de frases (`--larga`), a una. */
.nv-mosaico__pieza .nv-mosaico__lista:not(.nv-mosaico__lista--larga) {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 22px;
}
/* Con un número impar de campos, el último cruza las dos columnas: solo en su fila al 49 % lo cazó
   gate-huerfanos-rejilla en caso-exito-evidencia-sin-exagerar (25-09-2026). La maqueta tiene doce, pares. */
.nv-mosaico__pieza .nv-mosaico__lista:not(.nv-mosaico__lista--larga) > li:last-child:nth-child(odd) { grid-column: 1 / -1; }

/* Cadena: una lista numerada de eslabones cortos que se enciende al bajar, en la letra de titulares (maqueta 1C). */
.nv-mosaico__cadena {
  position: relative;
  display: grid;
  gap: 2px;
  --p: 1;
}
.nv-mosaico__cadena::before,
.nv-mosaico__cadena::after {
  content: "";
  position: absolute;
  inset-inline-start: 7px;
  inset-block: 14px;
  inline-size: 2px;
  background: var(--mos-linea);
}
.nv-mosaico__cadena::after {
  background: var(--mos-senal);
  transform-origin: top;
  transform: scaleY(var(--p));
  transition: transform 0.25s linear;
}
.nv-mosaico__cadena li {
  position: relative;
  z-index: 1;
  padding: 4px 0 4px 32px;
  font: 400 clamp(18px, 1.8vw, 23px) / 1.25 var(--mos-display);
  color: var(--mos-gris);
  transition: color 0.3s;
}
.nv-mosaico__cadena li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: calc(4px + 0.625em - 8px);
  inline-size: 16px;
  block-size: 16px;
  box-sizing: border-box;
  border-radius: 50%;
  background: var(--mos-loseta);
  border: 2px solid var(--mos-linea);
  transition: background 0.3s, border-color 0.3s;
}
.nv-mosaico__cadena li::marker { content: ""; }
.nv-mosaico__cadena li.on { color: var(--mos-tinta); }
.nv-mosaico__cadena li.on::before { background: var(--mos-senal); border-color: var(--mos-senal); }

/* Pasos: una lista numerada de frases largas (la cadena es para eslabones cortos). El número, en la señal. */
.nv-mosaico__pasos {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: paso;
  display: grid;
  gap: 0;
}
.nv-mosaico__pasos li {
  counter-increment: paso;
  position: relative;
  padding: 12px 0 12px 2.9em;
  border-top: 1px solid var(--mos-linea);
  font-size: clamp(15.5px, 1.25vw, 18px);
  break-inside: avoid;
}
.nv-mosaico__pasos li::before {
  content: counter(paso, decimal-leading-zero);
  position: absolute;
  inset-inline-start: 0;
  top: 12px;
  font: 400 clamp(20px, 1.7vw, 26px) / 1.25 var(--mos-display);
  color: var(--mos-senal);
  font-variant-numeric: tabular-nums;
}
.nv-mosaico__pasos li::marker { content: ""; }
.nv-mosaico__ancha .nv-mosaico__pasos { display: block; columns: 2; column-gap: var(--mos-canal); }

/* Cita de arrastre (apartado corto sin pieza): repite la negrita del propio texto, grande y a la derecha. */
.nv-entrada__texto.nv-mosaico blockquote.nv-mosaico__cita {
  margin: 0;
  padding: 0 0 0 clamp(18px, 2vw, 28px);
  border-left: 3px solid var(--mos-senal);
  align-self: center;
  font-style: normal;
}
.nv-mosaico__cita p {
  font: 400 clamp(22px, 2vw, 30px) / 1.25 var(--mos-display);
  letter-spacing: -0.01em;
  color: var(--mos-tinta);
  margin: 0;
  text-wrap: balance;
}

/* TIRA: titular en una mitad, introducción en la otra; la pieza ancha debajo, a todo el ancho. */
.nv-mosaico__tira { display: grid; gap: 18px; }
.nv-mosaico__tira-cab {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px var(--mos-canal);
  align-items: end;
}
.nv-mosaico__tira-intro > p { color: var(--mos-gris); }
/* Introducción larga: titular encima y la introducción a dos columnas, en tinta (es texto del artículo). */
.nv-mosaico__tira-cab--larga { grid-template-columns: minmax(0, 1fr); align-items: start; }
.nv-mosaico__tira-cab--larga > .nv-mosaico__tira-intro { display: block; columns: 2; column-gap: var(--mos-canal); }
.nv-mosaico__tira-cab--larga > .nv-mosaico__tira-intro > p { color: inherit; break-inside: avoid; margin-block: 0 16px; }
.nv-mosaico__tira-cab--larga > .nv-mosaico__tira-intro > p:only-child { break-inside: auto; margin: 0; }
.nv-mosaico__tira-intro:empty { display: none; }
.nv-mosaico__tira--intro .nv-mosaico__tira-cab { align-items: start; }
.nv-mosaico__tira--intro .nv-mosaico__tira-intro > p { color: inherit; }

/* Las tablas de la tira las pinta el BLOQUE 2 (al final de esta hoja): escalera (2A) o tabla por filas (2B). Las
   reglas de tabla del 1C se retiraron el 25-09-2026 al encenderlo en todas las entradas. */
/* Una lista en tira se reparte en dos columnas; la cadena sigue en una, que es su forma. */
.nv-mosaico__ancha .nv-mosaico__lista { columns: 2; column-gap: var(--mos-canal); }
.nv-mosaico__ancha .nv-mosaico__lista li { break-inside: avoid; }

/* Texto a dos columnas de lectura: la prosa sin pieza y las continuaciones. */
.nv-mosaico__cols,
.nv-mosaico__continua,
.nv-mosaico__cola {
  columns: 2;
  column-gap: var(--mos-canal);
}
.nv-mosaico__cols > *,
.nv-mosaico__continua > *,
.nv-mosaico__cola > * {
  break-inside: avoid;
  margin-block: 0 16px;
}
.nv-mosaico__cols > :last-child,
.nv-mosaico__continua > :last-child,
.nv-mosaico__cola > :last-child { margin-block-end: 0; }
/* Un solo bloque no se parte en dos con `break-inside: avoid`: se le deja fluir. */
.nv-mosaico__cols--fluye > *,
.nv-mosaico__continua--fluye > *,
.nv-mosaico__cola--fluye > * { break-inside: auto; }
/* Debajo de un esquema, la continuación con una pieza ancha (nv-mosaico__continua--ancha, que pone el tema: una tabla,
   unas fichas, un bloque de código o una lista que va a lo ancho) va a una sola columna, con la pieza a todo el ancho y
   el texto a 40em: a dos, la pieza no se parte, llenaba una columna y la otra quedaba en blanco junto a ella (302-505 px
   en la 36 y 126-305 en la 20, de 768 a 1440; verificador en frío, vuelta 10, 05-10-2026). */
.nv-mosaico__continua--ancha { columns: auto; }
.nv-mosaico .nv-mosaico__continua--ancha > p { max-inline-size: 40em; }
/* Y 16 px bajo la tabla, como entre los demás bloques de la continuación: `.nv-mosaico .nv-tabla__bloque { margin: 0 }`
   pesa más que su `margin-block: 0 16px` y dejaba el párrafo de debajo pegado (0 px en la 36; las fichas ya tenían 16). */
.nv-mosaico .nv-mosaico__continua--ancha > .nv-tabla__bloque:not(:last-child) { margin-block-end: 16px; }
/* Los PÁRRAFOS sí se parten entre columnas (con tres líneas mínimo a cada lado): con `avoid`, tres párrafos en dos
   columnas dejaban 150 px de hueco bajo la primera (medido a 1024). Titulares y puntos de lista no se parten. */
:is(.nv-mosaico__cols, .nv-mosaico__continua, .nv-mosaico__cola, .nv-mosaico__tira-intro) > p {
  break-inside: auto;
  orphans: 3;
  widows: 3;
}
.nv-mosaico h3 { break-after: avoid; }
/* En el texto a dos columnas, el H3 con el aire del texto de rejilla: 16 px hasta su párrafo (estaba pegado, a 0 px,
   porque `.nv-mosaico h3` le quitaba el margen de abajo) y 22 encima si no abre la columna (verificador, 04-10-2026). */
:is(.nv-mosaico__cols, .nv-mosaico__continua, .nv-mosaico__cola) > h3 { margin-block-end: 16px; }
:is(.nv-mosaico__cols, .nv-mosaico__continua, .nv-mosaico__cola) > * + h3 { margin-block-start: 22px; }
/* COLA CORTA CON CITA (decisión 2, 28-09-2026): un párrafo de cinco renglones o menos no se parte a dos columnas y
   dejaba la segunda en blanco (27 colas en 19 entradas). Va en una mitad, debajo del texto de la fila, y la cita de
   arrastre en la otra, como la prosa corta. */
.nv-mosaico__continua--cita,
.nv-mosaico__cola--cita {
  columns: auto;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px var(--mos-canal);
  align-items: start;
}
.nv-mosaico__continua--cita > *,
.nv-mosaico__cola--cita > * { margin: 0; }
.nv-mosaico__continua--cita[data-lado="izq"] > .nv-mosaico__txt { order: 2; }
/* Sin otra frase en el apartado, la cola corta no se repite en una cita (se leía dos veces): va UNA vez a todo el
   ancho, con la letra y el filete de la cita; 36em son unos 80 caracteres por renglón (tope de la casa, 92). */
.nv-mosaico__continua--nota,
.nv-mosaico__cola--nota { columns: auto; }
.nv-mosaico .nv-mosaico__continua--nota > p,
.nv-mosaico .nv-mosaico__cola--nota > p {
  margin: 0;
  padding-inline-start: clamp(18px, 2vw, 28px);
  border-inline-start: 3px solid var(--mos-senal);
  font: 400 clamp(22px, 2vw, 30px) / 1.25 var(--mos-display);
  letter-spacing: -0.01em;
  color: var(--mos-tinta);
  max-inline-size: 36em;
  text-wrap: pretty;
}

/* Preguntas: rejilla de dos, cada una con su filete. */
.nv-mosaico__faq {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px var(--mos-canal);
}
.nv-mosaico__pregunta {
  display: grid;
  gap: 10px;
  align-content: start;
  padding-top: 14px;
  border-top: 1px solid var(--mos-linea);
}
.nv-mosaico__pregunta > * { margin: 0; }
.nv-mosaico__pregunta > h3 { font-size: clamp(18px, 1.4vw, 21px); }
/* La pregunta impar que cierra (la quinta de cinco) cruza la fila y su respuesta se reparte por ancho, para no
   dejar media fila vacía (trampa medida en Disber). */
.nv-mosaico__pregunta:last-child:nth-child(odd) { grid-column: 1 / -1; }
.nv-mosaico__pregunta:last-child:nth-child(odd) > p { columns: 2; column-gap: var(--mos-canal); }

/* La salida a media lectura del molde, entre dos apartados, a lo ancho. */
.nv-mosaico__aparte { margin-block: var(--mos-aire) 0; }

/* La firma cierra el cuerpo (la maqueta lo cuenta «hasta la firma»). A lo ancho de la caja se leía a 127 caracteres
   por línea (medido a 1440): va con la composición de la cabecera de tira, quién firma en una mitad y su
   presentación en la otra, con la letra del molde. */
.nv-mosaico > .nv-autor {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  /* La tercera fila se queda lo que sobra de la presentación: nombre y enlace no se separan. */
  grid-template-rows: auto auto 1fr;
  column-gap: var(--mos-canal);
  align-items: start;
  max-width: none;
  margin: 0;
  padding-top: var(--mos-aire);
  border-top-color: var(--mos-linea);
}
/* El enlace, bajo el nombre y no bajo la presentación: allí quedaba solo en su fila (gate-huerfanos-rejilla). */
.nv-mosaico > .nv-autor > :is(.nv-autor__rotulo, .nv-autor__nombre, .nv-autor__enlace) { grid-column: 1; }
.nv-mosaico > .nv-autor > .nv-autor__bio { grid-column: 2; grid-row: 1 / span 3; }

/* Movimiento (solo cuando el guion lo arma y la persona no ha pedido quietud): cada mitad entra desde su lado
   y las tiras se descubren al llegar. Sin el guion, o con `prefers-reduced-motion`, todo se ve entero.
   🔴 La entrada arranca en 0,4, nunca en 0: con 0, una captura a medio revelar sacó la última sección de 390 en
   blanco (24-09-2026), y es la regla de la casa para cualquier entrada animada. */
.nv-mosaico[data-anim] [data-r] {
  transition: opacity 0.6s cubic-bezier(0.2, 0.7, 0.2, 1), transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.nv-mosaico[data-anim] [data-r]:not(.nv-visto) { opacity: 0.4; transform: translateY(22px); }
.nv-mosaico[data-anim] [data-r="izq"]:not(.nv-visto) { transform: translateX(-30px); }
.nv-mosaico[data-anim] [data-r="der"]:not(.nv-visto) { transform: translateX(30px); }
@media (prefers-reduced-motion: reduce) {
  .nv-mosaico [data-r] { transition: none; opacity: 1; transform: none; }
}

/* Por debajo de 760 px, UNA columna, como la maqueta (`@container (width < 760px)`): el texto primero y su pieza
   debajo, la cabecera de la tira apilada, las listas y las preguntas a una. */
@media (max-width: 759.98px) {
  .nv-mosaico__fila,
  .nv-mosaico__tira-cab,
  .nv-mosaico__faq,
  .nv-mosaico > .nv-autor,
  .nv-mosaico__pieza .nv-mosaico__lista:not(.nv-mosaico__lista--larga) { grid-template-columns: minmax(0, 1fr); }
  .nv-mosaico > .nv-autor { grid-template-rows: none; }
  .nv-mosaico > .nv-autor > .nv-autor__bio { grid-column: 1; grid-row: auto; }
  .nv-mosaico__fila[data-lado="izq"] > .nv-mosaico__txt { order: 0; }
  .nv-mosaico__continua--cita,
  .nv-mosaico__cola--cita { grid-template-columns: minmax(0, 1fr); }
  .nv-mosaico__continua--cita[data-lado="izq"] > .nv-mosaico__txt { order: 0; }
  .nv-mosaico__fila > .nv-mosaico__pieza,
  .nv-mosaico__fila > .nv-mosaico__cita { order: 1; }
  .nv-mosaico__cita { align-self: stretch; }
  .nv-mosaico__tira-cab { align-items: start; }
  .nv-mosaico__cols,
  .nv-mosaico__continua,
  .nv-mosaico__cola,
  .nv-mosaico__ancha .nv-mosaico__lista,
  .nv-mosaico__ancha .nv-mosaico__pasos,
  .nv-mosaico__tira-cab--larga > .nv-mosaico__tira-intro,
  .nv-mosaico__pregunta:last-child:nth-child(odd) > p { columns: auto; }
  .nv-mosaico__pregunta:last-child:nth-child(odd) { grid-column: auto; }
  /* A una columna, de 700 a 759 px el texto a todo el ancho pasaba de 92 caracteres por línea (706 px daban 96,
     medido): se queda en 40em. Por debajo de 700 px no actúa. */
  .nv-mosaico :is(p, li) { max-inline-size: 40em; }
  .nv-mosaico__cita p,
  .nv-mosaico .nv-mosaico__continua--nota > p,
  .nv-mosaico .nv-mosaico__cola--nota > p { font-size: clamp(20px, 5.6vw, 24px); }
}

/* ══ BLOQUE 2 · LAS TABLAS (elegido el 24-09-2026: 2A «escalera de señales»; la maqueta manda, p02 del artifact).
   Los `cqi` de la maqueta van en `vw` porque el marco es la pantalla. Las reglas van con `.nv-mosaico` delante para
   pesar más que el cuerpo de texto del mosaico (`.nv-mosaico :is(p, li)`) y que las fichas del molde a 767 px. */

/* 2A · escalera: cada nivel un peldaño más alto y más rojo que el anterior. */
.nv-mosaico .nv-escalera__caja { margin: 0; }
.nv-mosaico .nv-escalera {
  display: grid;
  grid-template-columns: repeat(var(--n, 5), minmax(0, 1fr));
  gap: 12px;
  align-items: end;
  list-style: none;
  margin: 0;
  padding: 0;
}
.nv-mosaico .nv-escalera > li {
  /* La maqueta: 230 px el primer peldaño y 38 más cada uno. Con celdas más largas que las suyas el contenido de un
     peldaño supera al mínimo del siguiente y la escalera se rompe (marketing-industrial: 286 > 268 a 1440, 25-09-2026):
     el guion sube `--base` hasta el contenido más alto; sin guion queda el 230 de la maqueta. */
  --h: calc(var(--base, 230px) + var(--i) * 38px);
  min-block-size: var(--h);
  display: grid;
  align-content: start;
  gap: 10px;
  margin: 0;
  padding: 18px 16px 20px;
  max-inline-size: none;
  background: linear-gradient(to top, color-mix(in srgb, var(--mos-senal) calc(4% + var(--i) * 3%), var(--mos-blanco)), var(--mos-blanco));
  border: 1px solid var(--mos-linea);
  border-top: 3px solid color-mix(in srgb, var(--mos-senal) calc(35% + var(--i) * 16%), var(--mos-linea));
  border-radius: 8px 8px 0 0;
}
.nv-mosaico .nv-escalera p { margin: 0; max-inline-size: none; }
.nv-mosaico .nv-escalera__nivel { font: 400 clamp(19px, 1.9vw, 24px) / 1.15 var(--mos-display); }
.nv-mosaico .nv-escalera__ej { font-size: 13.5px; line-height: 1.55; color: var(--mos-gris); } /* 1,55: el interlineado del `.nv` de la maqueta */
.nv-mosaico .nv-escalera p.nv-escalera__et {
  font: 600 10.5px / 1.4 var(--mos-texto);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mos-gris);
  margin-bottom: 2px;
}
.nv-mosaico .nv-escalera__si { font-size: 15.5px; line-height: 1.4; }
.nv-mosaico .nv-escalera__no {
  font-size: 14.5px;
  line-height: 1.4;
  color: var(--mos-mal);
  text-decoration: line-through;
  text-decoration-thickness: 1.5px;
}
.nv-mosaico .nv-escalera__eje {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin: 12px 0 0;
  padding-top: 10px;
  border-top: 1.5px solid var(--mos-tinta);
  font: 600 11px / 1.4 var(--mos-texto);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mos-gris);
  max-inline-size: none;
}
/* Los peldaños suben uno tras otro al llegar (desde 0,4, regla de la casa; la maqueta arrancaba en 0). El `ol`
   lleva el `data-r` para que el guion lo vea, pero no se mueve él: se mueven sus peldaños. */
.nv-mosaico[data-anim] .nv-escalera > li {
  transition: opacity 0.6s, transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
  transition-delay: calc(var(--i) * 140ms);
}
.nv-mosaico[data-anim] .nv-escalera:not(.nv-visto) > li { opacity: 0.4; transform: translateY(46px); }
.nv-mosaico[data-anim] .nv-escalera[data-r]:not(.nv-visto) { opacity: 1; transform: none; }

/* 2B · la tabla a todo el ancho, que se lee por filas; lo que niega se tacha al pasar por su fila. */
.nv-mosaico .nv-tabla__bloque { margin: 0; }
.nv-mosaico .nv-tabla__caja { margin: 0; overflow-x: auto; }
.nv-mosaico .nv-tabla {
  inline-size: 100%;
  min-width: 0;
  margin: 0;
  border-collapse: collapse;
  font-size: clamp(15px, 1.3vw, 17.5px);
}
.nv-mosaico .nv-tabla th {
  text-align: start;
  font: 600 11.5px / 1.4 var(--mos-texto);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mos-gris);
  padding: 0 16px 12px 0;
  border: 0;
  border-bottom: 1.5px solid var(--mos-tinta);
  background: none;
}
.nv-mosaico .nv-tabla td {
  padding: 16px 16px 16px 0;
  border: 0;
  border-bottom: 1px solid var(--mos-linea);
  vertical-align: top;
  line-height: 1.55; /* el interlineado del `.nv` de la maqueta */
  color: var(--mos-tinta);
  background: none;
  transition: background 0.25s;
}
.nv-mosaico .nv-tabla tbody tr:hover td,
.nv-mosaico .nv-tabla tbody tr:focus-within td { background: var(--mos-tinte); }
.nv-mosaico .nv-tabla td:first-child { font: 500 clamp(17px, 1.6vw, 21px) / 1.2 var(--mos-display); }
.nv-mosaico .nv-tabla__no > span {
  color: var(--mos-gris);
  background: linear-gradient(var(--mos-senal), var(--mos-senal)) no-repeat 0 58% / 0 1.5px;
  transition: background-size 0.45s ease, color 0.3s;
}
.nv-mosaico .nv-tabla tbody tr:hover .nv-tabla__no > span,
.nv-mosaico .nv-tabla tbody tr:focus-within .nv-tabla__no > span { background-size: 100% 1.5px; color: var(--mos-mal); }
.nv-mosaico .nv-tabla tbody tr { outline: none; }
.nv-mosaico .nv-tabla tbody tr:focus-visible { outline: 2px solid var(--mos-senal); outline-offset: -2px; }
.nv-mosaico .nv-tabla tr[data-r] { transition-delay: calc(var(--d, 0) * 90ms); }
.nv-mosaico .nv-tabla__pista { display: none; font-size: 13.5px; line-height: 1.4; color: var(--mos-gris); margin: 10px 0 0; }

/* El corte del bloque 2 es el del ARTIFACT medido en su lienzo, no el del marco a pantalla completa: su
   `@container (width < 760px)` se cumple con la pantalla por debajo de 818 px (lienzo = pantalla − 2 × 3,5vw). Se
   respeta porque a 768 la escalera de cinco columnas rompe su forma (el primer peldaño, 289 px con 230 de mínimo,
   más alto que el segundo, 268; medido en la maqueta y en la web el 25-09-2026) y a 834 ya la sostiene (268 = 268).
   De 818 px en adelante la tabla es una tabla, también hasta 767, donde el molde la apilaba en fichas. */
@media (min-width: 818px) {
  .nv-mosaico .nv-tabla { display: table; width: 100%; }
  .nv-mosaico .nv-tabla thead { display: table-header-group; }
  .nv-mosaico .nv-tabla tbody { display: table-row-group; }
  .nv-mosaico .nv-tabla tr { display: table-row; border: 0; border-radius: 0; margin: 0; padding: 0; }
  .nv-mosaico .nv-tabla td { display: table-cell; }
  .nv-mosaico .nv-tabla td[data-nv-col]::before { content: none; }
  .nv-mosaico .nv-tabla__caja { animation: none; -webkit-mask-image: none; mask-image: none; }
}

/* Por debajo de 818 px (el `@container (width < 760px)` de la maqueta, en su lienzo): los peldaños se apilan con
   sangría creciente; la tabla deja de ser tabla y sus filas son fichas que se deslizan de lado, una por pantalla. */
@media (max-width: 817.98px) {
  .nv-mosaico .nv-escalera { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .nv-mosaico .nv-escalera > li { min-block-size: 0; margin-inline-start: calc(var(--i) * min(10px, 40px / (var(--n) - 1))); border-radius: 8px; }
  .nv-mosaico .nv-escalera__eje { display: none; }

  .nv-mosaico .nv-tabla__caja { overflow: visible; animation: none; -webkit-mask-image: none; mask-image: none; }
  .nv-mosaico .nv-tabla { display: block; }
  .nv-mosaico .nv-tabla thead { display: none; }
  .nv-mosaico .nv-tabla tbody {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 100%;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 8px;
  }
  .nv-mosaico .nv-tabla tbody tr {
    display: grid;
    gap: 8px;
    scroll-snap-align: start;
    background: var(--mos-blanco);
    border: 1px solid var(--mos-linea);
    border-radius: 10px;
    padding: 16px;
    margin: 0;
    min-width: 0;
  }
  /* Con `tbody` delante: pesan lo mismo que las fichas del molde y del 1C para las tablas sin bloque 2, y ganan por ir después. */
  .nv-mosaico .nv-tabla tbody td { display: block; border: 0; padding: 0; min-width: 0; width: auto; }
  .nv-mosaico .nv-tabla tbody td[data-nv-col]::before {
    content: attr(data-nv-col);
    display: block;
    font: 600 10.5px / 1.5 var(--mos-texto);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--mos-gris);
    margin: 0;
  }
  .nv-mosaico .nv-tabla tbody td:first-child::before { display: none; }
  .nv-mosaico .nv-tabla__pista { display: block; }
}
/* De tableta a móvil grande el carril pasa de 560 px de lienzo (602 de pantalla): una ficha sola dejaba dos tercios
   en blanco (maqueta). */
@media (min-width: 602px) and (max-width: 817.98px) {
  .nv-mosaico .nv-tabla tbody { grid-auto-columns: calc((100% - 12px) / 2); }
}

/* ── Arreglos del verificador en frío (28-09-2026), probados por inyección a 9-31 anchos con 0 cortes ── */

/* 2B · la tabla que NO CABE en su caja a partir de 818 px (la marca blog-mosaico.js con .nv-tabla__bloque--fichas):
   las mismas fichas que por debajo de 818, dos por vista. La de 8 columnas de propiedad-web-cuentas-datos escondía
   88 px a 818 y 74 a 834 y a 860, con la columna «Estado» rebanada y sin señal de que había más. */
.nv-mosaico .nv-tabla__bloque--fichas .nv-tabla__caja { overflow: visible; }
.nv-mosaico .nv-tabla__bloque--fichas .nv-tabla { display: block; }
.nv-mosaico .nv-tabla__bloque--fichas .nv-tabla thead { display: none; }
.nv-mosaico .nv-tabla__bloque--fichas .nv-tabla tbody {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 12px) / 2);
  gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 8px;
}
.nv-mosaico .nv-tabla__bloque--fichas .nv-tabla tbody tr {
  display: grid;
  gap: 8px;
  scroll-snap-align: start;
  background: var(--mos-blanco);
  border: 1px solid var(--mos-linea);
  border-radius: 10px;
  padding: 16px;
  margin: 0;
  min-width: 0;
}
.nv-mosaico .nv-tabla__bloque--fichas .nv-tabla tbody td { display: block; border: 0; padding: 0; min-width: 0; width: auto; }
.nv-mosaico .nv-tabla__bloque--fichas .nv-tabla tbody td[data-nv-col]::before {
  content: attr(data-nv-col);
  display: block;
  font: 600 10.5px / 1.5 var(--mos-texto);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mos-gris);
  margin: 0;
}
.nv-mosaico .nv-tabla__bloque--fichas .nv-tabla tbody td:first-child::before { display: none; }
.nv-mosaico .nv-tabla__bloque--fichas .nv-tabla__pista { display: block; }

/* 2B · en las fichas, cada campo en la misma fila en todas (subrejilla, tantas filas como columnas tenía la tabla): el
   alto sobrante se repartía dentro de los campos y la etiqueta «Prueba…» caía a 45 px en unas fichas y a 53 en otras.
   Y el tinte de paso y de foco, en la ficha entera: en las celdas salían tres franjas rosas separadas por blanco. */
@media (max-width: 817.98px) {
  .nv-mosaico .nv-tabla tbody { --c: 2; grid-template-rows: repeat(var(--c), auto); }
  .nv-mosaico .nv-tabla tbody:has(> tr > td:nth-child(3)) { --c: 3; }
  .nv-mosaico .nv-tabla tbody:has(> tr > td:nth-child(4)) { --c: 4; }
  .nv-mosaico .nv-tabla tbody:has(> tr > td:nth-child(5)) { --c: 5; }
  .nv-mosaico .nv-tabla tbody:has(> tr > td:nth-child(6)) { --c: 6; }
  .nv-mosaico .nv-tabla tbody:has(> tr > td:nth-child(7)) { --c: 7; }
  .nv-mosaico .nv-tabla tbody:has(> tr > td:nth-child(8)) { --c: 8; }
  .nv-mosaico .nv-tabla tbody tr { grid-row: 1 / -1; grid-template-rows: subgrid; row-gap: 8px; transition: background 0.25s; }
  .nv-mosaico .nv-tabla tbody tr:is(:hover, :focus-within) { background: var(--mos-tinte); }
  .nv-mosaico .nv-tabla tbody tr:is(:hover, :focus-within) td { background: none; }
}
.nv-mosaico .nv-tabla__bloque--fichas .nv-tabla tbody { --c: 2; grid-template-rows: repeat(var(--c), auto); }
.nv-mosaico .nv-tabla__bloque--fichas .nv-tabla tbody:has(> tr > td:nth-child(3)) { --c: 3; }
.nv-mosaico .nv-tabla__bloque--fichas .nv-tabla tbody:has(> tr > td:nth-child(4)) { --c: 4; }
.nv-mosaico .nv-tabla__bloque--fichas .nv-tabla tbody:has(> tr > td:nth-child(5)) { --c: 5; }
.nv-mosaico .nv-tabla__bloque--fichas .nv-tabla tbody:has(> tr > td:nth-child(6)) { --c: 6; }
.nv-mosaico .nv-tabla__bloque--fichas .nv-tabla tbody:has(> tr > td:nth-child(7)) { --c: 7; }
.nv-mosaico .nv-tabla__bloque--fichas .nv-tabla tbody:has(> tr > td:nth-child(8)) { --c: 8; }
.nv-mosaico .nv-tabla__bloque--fichas .nv-tabla tbody tr { grid-row: 1 / -1; grid-template-rows: subgrid; row-gap: 8px; transition: background 0.25s; }
.nv-mosaico .nv-tabla__bloque--fichas .nv-tabla tbody tr:is(:hover, :focus-within) { background: var(--mos-tinte); }
.nv-mosaico .nv-tabla__bloque--fichas .nv-tabla tbody tr:is(:hover, :focus-within) td { background: none; }

/* 2B · decisión de Jesús (28-09-2026, «sigo tus recomendaciones»): las fichas de una tabla, APILADAS y no en un carril
   que se desliza de lado (la ley de la casa para lo que se lee para decidir; la maqueta las deslizaba y gate-tabla-
   desplazada lo acusaba). Por debajo de 602 px, una columna; de 602 a 817, dos; y la tabla que no cabe de 818 en
   adelante, las columnas de 320 px que quepan. Sin pista «Desliza…» y sin subrejilla entre fichas: cada ficha lleva la
   suya. Va después de las reglas del carril, con el mismo peso, para ganarles. */
@media (max-width: 817.98px) {
  .nv-mosaico .nv-tabla tbody {
    grid-auto-flow: row; grid-auto-columns: auto; grid-template-rows: none; grid-template-columns: minmax(0, 1fr);
    overflow: visible; scroll-snap-type: none; padding-bottom: 0;
  }
  .nv-mosaico .nv-tabla tbody tr { grid-row: auto; grid-template-rows: none; scroll-snap-align: none; }
  .nv-mosaico .nv-tabla__pista { display: none; }
}
@media (min-width: 602px) and (max-width: 817.98px) {
  .nv-mosaico .nv-tabla tbody { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.nv-mosaico .nv-tabla__bloque--fichas .nv-tabla tbody {
  grid-auto-flow: row; grid-auto-columns: auto; grid-template-rows: none;
  grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr));
  overflow: visible; scroll-snap-type: none; padding-bottom: 0;
}
.nv-mosaico .nv-tabla__bloque--fichas .nv-tabla tbody tr { grid-row: auto; grid-template-rows: none; scroll-snap-align: none; }
.nv-mosaico .nv-tabla__bloque--fichas .nv-tabla__pista { display: none; }

/* 2B · la tabla que no es la primera pieza de su sección (navarting_mosaico_tablas_sueltas, 28-09-2026): en la cola a
   dos columnas cruza las dos; en la mitad de texto de una fila, de 760 a 817 px, sus fichas van a una columna (esa
   mitad mide unos 350 px). */
/* Con más peso que `.nv-mosaico .nv-tabla__bloque { margin: 0 }`: sin él, el texto que sigue quedaba pegado (0 px). */
.nv-mosaico .nv-mosaico__cola > .nv-tabla__bloque { column-span: all; margin-block: 8px 24px; }
@media (min-width: 760px) and (max-width: 817.98px) {
  .nv-mosaico__txt .nv-tabla tbody { grid-template-columns: minmax(0, 1fr); }
}

/* 2B · en la tabla, la primera línea de cada celda sobre la misma línea base: la serif de la primera columna quedaba
   3-4 px más alta que el resto de la fila. */
@media (min-width: 818px) {
  .nv-mosaico .nv-tabla td { vertical-align: baseline; }
}

/* 2A · decisión de Jesús (28-09-2026, «sigo tus recomendaciones»): los peldaños se apilan hasta 959 px, no hasta 817.
   Con el corte en 818 la escalera abría con peldaños de 144-161 px y 9-11 líneas cada uno (verificador en frío,
   `arreglo-2a-960.css`, probado por inyección). */
@media (min-width: 818px) and (max-width: 959.98px) {
  .nv-mosaico .nv-escalera { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .nv-mosaico .nv-escalera > li { min-block-size: 0; margin-inline-start: calc(var(--i) * min(10px, 40px / (var(--n) - 1))); border-radius: 8px; }
  .nv-mosaico .nv-escalera__eje { display: none; }
}

/* 2A · peldaños apilados de 602 a 959 px en tres columnas (nivel y ejemplo | qué significa | qué no significa), con el
   mismo orden de lectura: la ficha a todo el ancho dejaba el texto en su primer cuarto y el peldaño medía 190 px. */
@media (min-width: 602px) and (max-width: 959.98px) {
  .nv-mosaico .nv-escalera > li {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr);
    column-gap: clamp(16px, 3vw, 28px);
    row-gap: 4px;
    align-items: start;
  }
  .nv-mosaico .nv-escalera > li > .nv-escalera__nivel { grid-column: 1; grid-row: 1; }
  .nv-mosaico .nv-escalera > li > .nv-escalera__ej { grid-column: 1; grid-row: 2; }
  .nv-mosaico .nv-escalera > li > div:nth-of-type(1) { grid-column: 2; grid-row: 1 / span 2; }
  .nv-mosaico .nv-escalera > li > div:nth-of-type(2) { grid-column: 3; grid-row: 1 / span 2; }
  /* Peldaños con TRES datos («Estado» de calidad-lead: criterio, responsable y pregunta; 28-09-2026): cuatro columnas. */
  .nv-mosaico .nv-escalera > li:has(> div:nth-of-type(3)) { grid-template-columns: minmax(0, 1fr) repeat(3, minmax(0, 1fr)); }
  .nv-mosaico .nv-escalera > li > div:nth-of-type(3) { grid-column: 4; grid-row: 1 / span 2; }
}

/* 2A · la escalera cuyo nivel más largo no cabe en su peldaño (la marca blog-mosaico.js con .nv-escalera--apilada, de
   960 px en adelante) se apila como en tableta: «Reconocimiento» pedía 147 px en un peldaño de 140 a 960 px
   (web-b2b-compra-compleja, 28-09-2026). Sin guion, queda la escalera. */
.nv-mosaico .nv-escalera.nv-escalera--apilada { grid-template-columns: minmax(0, 1fr); gap: 8px; }
.nv-mosaico .nv-escalera--apilada > li {
  min-block-size: 0;
  margin-inline-start: calc(var(--i) * min(10px, 40px / (var(--n) - 1)));
  border-radius: 8px;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr);
  column-gap: clamp(16px, 3vw, 28px);
  row-gap: 4px;
  align-items: start;
}
.nv-mosaico .nv-escalera--apilada > li:has(> div:nth-of-type(3)) { grid-template-columns: minmax(0, 1fr) repeat(3, minmax(0, 1fr)); }
.nv-mosaico .nv-escalera--apilada > li > .nv-escalera__nivel { grid-column: 1; grid-row: 1; }
.nv-mosaico .nv-escalera--apilada > li > .nv-escalera__ej { grid-column: 1; grid-row: 2; }
.nv-mosaico .nv-escalera--apilada > li > div:nth-of-type(1) { grid-column: 2; grid-row: 1 / span 2; }
.nv-mosaico .nv-escalera--apilada > li > div:nth-of-type(2) { grid-column: 3; grid-row: 1 / span 2; }
.nv-mosaico .nv-escalera--apilada > li > div:nth-of-type(3) { grid-column: 4; grid-row: 1 / span 2; }
.nv-mosaico .nv-escalera--apilada + .nv-escalera__eje { display: none; }

/* ══ BLOQUE 3 · LAS LISTAS LARGAS (elegido el 24-09-2026: 3C «chips que se ordenan solos»; 3A «rejilla de fichas»
   para los puntos de frase, como manda la propia maqueta; p03 del artifact). `cqi` → `vw`; el corte de tableta,
   el del artifact en su lienzo (818 px), como en el bloque 2. */
.nv-mosaico .nv-listona { margin: 0; }
.nv-mosaico .nv-listona--chips { background: var(--mos-loseta); border-radius: 12px; padding: clamp(22px, 3vw, 40px); }
.nv-mosaico .nv-listona__intro {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: baseline;
  margin: 0 0 14px;
  font: 600 12px / 1.4 var(--mos-texto);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mos-gris);
  max-inline-size: none;
}
.nv-mosaico .nv-listona__intro b { color: var(--mos-senal); font-weight: 600; }

/* 3C · chips: la misma lista, en etiquetas que fluyen a lo ancho. */
.nv-mosaico .nv-chips { display: flex; flex-wrap: wrap; gap: 12px 10px; list-style: none; margin: 0; padding: 0; }
.nv-mosaico .nv-chips > li {
  margin: 0;
  padding: 10px 18px;
  border: 1.5px solid var(--mos-tinta);
  border-radius: 999px;
  background: var(--mos-blanco);
  font: 400 clamp(17px, 1.6vw, 21px) / 1.2 var(--mos-display);
  color: var(--mos-tinta);
  cursor: default;
  max-inline-size: none;
  transition: transform 0.9s cubic-bezier(0.2, 0.9, 0.25, 1), opacity 0.5s, background 0.2s, color 0.2s, border-color 0.2s;
  transition-delay: calc(var(--i) * 45ms), calc(var(--i) * 45ms), 0s, 0s, 0s;
}
.nv-mosaico .nv-chips > li::before,
.nv-mosaico .nv-chips > li::marker { content: none; }
.nv-mosaico .nv-chips > li:hover { background: var(--mos-senal); border-color: var(--mos-senal); color: var(--mos-blanco); }
/* Al llegar, las etiquetas caen desordenadas (solo en vertical, como la maqueta: de lado asomaban fuera a 390) y se
   colocan solas; desde 0,4, regla de la casa. */
.nv-mosaico[data-anim] .nv-chips:not(.nv-visto) > li { transform: translateY(var(--y)) rotate(var(--r)); opacity: 0.4; }
.nv-mosaico[data-anim] .nv-chips[data-r]:not(.nv-visto) { opacity: 1; transform: none; }

/* 3A · rejilla de fichas: tres o cuatro columnas a lo ancho, en la letra de los titulares. */
.nv-mosaico .nv-rejilla {
  display: grid;
  grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr));
  gap: 0 clamp(18px, 2.4vw, 30px);
  list-style: none;
  margin: 0;
  padding: 0;
}
.nv-mosaico .nv-rejilla > li {
  display: flex;
  gap: 12px;
  align-items: baseline;
  margin: 0;
  padding: 18px 0 20px;
  border-top: 1px solid var(--mos-linea);
  font: 400 clamp(18px, 1.75vw, 23px) / 1.25 var(--mos-display);
  color: var(--mos-tinta);
  max-inline-size: none;
  transition: border-color 0.25s, color 0.25s, opacity 0.5s, transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
  transition-delay: 0s, 0s, calc(var(--i) * 55ms), calc(var(--i) * 55ms);
}
.nv-mosaico .nv-rejilla > li::marker { content: none; }
.nv-mosaico .nv-rejilla > li::before {
  content: "";
  inline-size: 9px;
  block-size: 9px;
  background: var(--mos-senal);
  flex: none;
  transform: translateY(-3px);
}
/* El texto de la ficha va entero en un span: con «término: definición» el término y su definición fluyen juntos y no
   son dos piezas del flex lado a lado (se salían de la ficha; careo del 27-09-2026). */
.nv-mosaico .nv-rejilla__txt { min-inline-size: 0; overflow-wrap: break-word; }
.nv-mosaico .nv-rejilla > li:hover { border-top-color: var(--mos-senal); }
.nv-mosaico[data-anim] .nv-rejilla:not(.nv-visto) > li { opacity: 0.4; transform: translateY(16px); }
.nv-mosaico[data-anim] .nv-rejilla[data-r]:not(.nv-visto) { opacity: 1; transform: none; }
/* Dos columnas también en el móvil: los puntos son cortos y a una columna la lista crecía hasta 738 px (maqueta). */
@media (max-width: 817.98px) {
  .nv-mosaico .nv-rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; }
  .nv-mosaico .nv-rejilla > li { padding: 11px 0 12px; font-size: 16.5px; gap: 9px; }
}
/* 3A · la rejilla solo sale con puntos de frase (alguno de más de 60 caracteres): dos columnas de 818 a 979 px (con
   cuatro, la celda bajaba a 178-201 px y las fichas llegaban a 5 líneas) y una por debajo de 560 (las dos de la maqueta
   son para puntos CORTOS, lo dice su comentario; con frases dejaban fichas de 3-5 líneas de 132-212 px). Verificador en
   frío, 28-09-2026, probado a 20 anchos con 0 cortes. */
@media (min-width: 818px) and (max-width: 979.98px) {
  .nv-mosaico .nv-rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 559.98px) {
  .nv-mosaico .nv-rejilla { grid-template-columns: minmax(0, 1fr); }
}
/* 3C · la etiqueta que no cabe en una línea (34-53 caracteres a 390 px) se partía dentro de una píldora de radio 999:
   con 24 px la de una línea sigue siendo píldora y la de dos es un rectángulo redondeado, con las líneas equilibradas. */
.nv-mosaico .nv-chips > li { border-radius: 24px; text-wrap: balance; }

/* ══ BLOQUE 4 · LAS LISTAS DE CASILLAS (elegido el 24-09-2026: 4C «lista de control que se copia»; p04 del artifact).
   La tablilla con su pinza, el titular dentro, la nota, el anillo con la cuenta, los dos botones de la web y los puntos
   a dos columnas llenadas por columna. `cqi` → `vw`; el corte de tableta, el del artifact en su lienzo (818 px). */
.nv-mosaico .nv-control {
  position: relative;
  margin-block-start: 14px; /* lo que asoma la pinza */
  background: var(--mos-blanco);
  border: 1px solid var(--mos-linea);
  border-radius: 10px;
  padding: 44px clamp(20px, 3.4vw, 44px) 26px;
  box-shadow: 0 22px 40px -30px rgb(11 13 16 / 0.4);
  line-height: 1.55; /* el interlineado del `.nv` de la maqueta; el cuerpo del artículo lleva 1,62 */
}
.nv-mosaico .nv-control__pinza {
  position: absolute;
  inset-block-start: -14px;
  inset-inline-start: 50%;
  translate: -50% 0;
  inline-size: 120px;
  block-size: 30px;
  border-radius: 8px;
  background: linear-gradient(color-mix(in srgb, var(--mos-tinta) 78%, var(--mos-blanco)), var(--mos-tinta));
  box-shadow: 0 3px 0 rgb(11 13 16 / 0.2);
}
.nv-mosaico .nv-control__pinza::after {
  content: "";
  position: absolute;
  inset: 9px 42px;
  border-radius: 5px;
  background: var(--mos-papel);
}
.nv-mosaico .nv-control__cab {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px clamp(24px, 4vw, 56px);
  align-items: center;
  margin-bottom: 14px;
}
/* Con el peso del titular de las entradas con índice (0,5,1), que si no gana: 34 px y sin el margen de arriba. */
.nv-entrada-compuesta:has(> .nv-toc) .nv-entrada__texto.nv-mosaico .nv-control__tit h2[data-nv-orden],
.nv-entrada-compuesta .nv-entrada__texto.nv-mosaico .nv-control__tit h2,
.nv-mosaico .nv-control__tit h2 {
  margin: 8px 0 14px;
  font: 400 clamp(24px, 2.5vw, 32px) / 1.12 var(--mos-display);
  letter-spacing: -0.01em;
  max-inline-size: none;
}
/* El cuerpo del artículo da 1,62 a todo párrafo del mosaico (0,1,1): la nota y el anillo llevan el 1,55 de la maqueta. */
.nv-mosaico .nv-control__nota { margin: 0; color: var(--mos-gris); font-size: 15.5px; line-height: 1.55; max-inline-size: none; }
.nv-mosaico .nv-control__lado { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 22px; }
/* Sin guion no hay cuenta que se mueva ni nada que copiar: las casillas se marcan igual. */
html:not(.js) .nv-mosaico .nv-control__lado { display: none; }
.nv-mosaico .nv-control__anillo { position: relative; inline-size: 116px; block-size: 116px; flex: none; }
.nv-mosaico .nv-control__anillo svg { inline-size: 100%; block-size: 100%; transform: rotate(-90deg); }
.nv-mosaico .nv-control__anillo circle { fill: none; stroke-width: 10; }
.nv-mosaico .nv-control__anillo .fondo { stroke: var(--mos-niebla); }
.nv-mosaico .nv-control__anillo .arco {
  stroke: var(--mos-senal);
  stroke-linecap: round;
  stroke-dasharray: 339.3;
  stroke-dashoffset: calc(339.3 * (1 - var(--p, 0)));
  transition: stroke-dashoffset 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.nv-mosaico .nv-control__anillo p { position: absolute; inset: 0; display: grid; place-content: center; margin: 0; text-align: center; line-height: 1.55; }
.nv-mosaico .nv-control__anillo b { font: 400 34px / 1 var(--mos-display); font-variant-numeric: tabular-nums; }
.nv-mosaico .nv-control__anillo span { font-size: 13px; color: var(--mos-gris); }
.nv-mosaico .nv-control__botones { display: grid; gap: 8px; justify-items: start; }
.nv-mosaico .nv-control__boton { padding: 12px 16px; font-size: 14px; }
.nv-mosaico .nv-control__aviso { font-size: 13px; color: var(--mos-ok); }
.nv-mosaico .nv-control__lista {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(var(--filas, 6), auto);
  grid-auto-flow: column;
  column-gap: clamp(28px, 4vw, 56px);
  list-style: none;
  margin: 0;
  padding: 0;
}
.nv-mosaico .nv-control__lista > li { margin: 0; padding: 0; max-inline-size: none; }
.nv-mosaico .nv-control__lista > li::before,
.nv-mosaico .nv-control__lista > li::marker { content: none; }
/* La casilla propia: el input real va encima, invisible, para teclado y lector de pantalla. El `label` del tema
   (negrita y margen inferior) se anula aquí. */
.nv-mosaico .nv-ck {
  position: relative;
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  margin: 0;
  padding: 12px 0;
  border-top: 1px solid var(--mos-linea);
  font-weight: 400;
  cursor: pointer;
  break-inside: avoid;
}
.nv-mosaico .nv-ck input {
  position: absolute;
  inset-block-start: 12px;
  inset-inline-start: 0;
  inline-size: 24px;
  block-size: 24px;
  min-inline-size: 0;
  min-block-size: 0;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.nv-mosaico .nv-ck__caja {
  display: grid;
  place-items: center;
  inline-size: 24px;
  block-size: 24px;
  margin-top: 1px;
  border: 2px solid var(--mos-senal);
  border-radius: 5px;
  transition: background 0.2s;
}
.nv-mosaico .nv-ck__caja svg {
  inline-size: 16px;
  block-size: 16px;
  fill: none;
  stroke: var(--mos-blanco);
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 20;
  stroke-dashoffset: 20;
  transition: stroke-dashoffset 0.35s ease 0.05s;
}
.nv-mosaico .nv-ck input:checked + .nv-ck__caja { background: var(--mos-senal); }
.nv-mosaico .nv-ck input:checked + .nv-ck__caja svg { stroke-dashoffset: 0; }
.nv-mosaico .nv-ck input:focus-visible + .nv-ck__caja { outline: 3px solid var(--mos-senal); outline-offset: 3px; }
.nv-mosaico .nv-ck__txt { font-size: clamp(15.5px, 1.4vw, 18px); line-height: 1.45; transition: color 0.2s; }
.nv-mosaico .nv-ck input:checked ~ .nv-ck__txt { color: var(--mos-gris); }
/* La tablilla aparece con un leve acercamiento (desde 0,4, regla de la casa). */
.nv-mosaico[data-anim] .nv-control[data-r="zoom"]:not(.nv-visto) { transform: scale(0.94); }

/* Arreglos del verificador en frío del 4C (28-09-2026), probados por inyección:
   - «Copiado» añadía una fila de 20 px y la lista bajaba 16 px: botones de 40 px (por encima de los 24 del nivel AA) y
     el aviso a 20 px de interlineado caben en los 116 del anillo, como en la maqueta (0 px de salto de 360 a 1440);
   - de 360 a 374 px el anillo se quedaba solo en su fila: menos hueco y menos relleno en los botones;
   - palabras solas al final («equipo.», «retraso.»): `text-wrap: pretty`;
   - el anillo de foco, de tinta en las casillas como en los botones;
   - en contraste alto claro no se veía qué casilla estaba marcada: la marca en `currentColor`;
   - el titular de la tablilla, a salvo de la cabecera pegada al llegar desde el índice (la pinza asoma encima);
   - la línea del aviso, reservada: vacía medía 0 y el grupo de botones, centrado junto al anillo, subía 10 px bajo el
     puntero al copiar y bajaba al borrarse el aviso (también en la maqueta; lo cazó `uso-real.mjs`, 28-09). Con ella,
     botones y aviso miden siempre los 116 del anillo y los botones arrancan a su altura. */
.nv-mosaico .nv-control__boton { min-block-size: 40px; padding-block: 10px; }
.nv-mosaico .nv-control__aviso { line-height: 20px; min-block-size: 20px; }
.nv-mosaico .nv-control__aviso--mal { color: var(--mos-mal); }
@media (max-width: 374.98px) {
  .nv-mosaico .nv-control__lado { column-gap: 14px; }
  .nv-mosaico .nv-control__boton { padding-inline: 11px; }
}
.nv-mosaico .nv-control__nota,
.nv-mosaico .nv-ck__txt { text-wrap: pretty; }
.nv-mosaico .nv-ck input:focus-visible + .nv-ck__caja { outline-color: var(--mos-tinta); }
.nv-mosaico .nv-ck__caja { color: var(--mos-blanco); }
.nv-mosaico .nv-ck__caja svg { stroke: currentColor; }
.nv-mosaico .nv-control__tit h2[id] { scroll-margin-top: 110px; }
@media (max-width: 817.98px) {
  .nv-mosaico .nv-control__cab { grid-template-columns: minmax(0, 1fr); }
  .nv-mosaico .nv-control__lista { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-auto-flow: row; }
}

/* ══ BLOQUE 5 · LA SALIDA A MEDIA LECTURA (elegido el 24-09-2026: 5C «aviso que aparece a mitad de lectura»; p05 del
   artifact). Sin guion, el aviso queda al final del texto, quieto; con guion va fijo abajo, del ancho del visor de la
   maqueta (8 de 12 columnas a 1440, ~800 px) y centrado, y sube al pasar la mitad del texto (blog-mosaico.js). Por
   debajo de la cabecera pegada (100) y del aviso de cookies (9999), que nunca tapa: con él a la vista no sale. */
.nv-mosaico .nv-aviso-medio {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 8px 14px;
  align-items: center;
  margin-block: var(--mos-aire) 0;
  padding: 12px 12px 12px 18px;
  background: var(--mos-tinta);
  color: var(--mos-blanco);
  border-radius: 10px;
  box-shadow: 0 14px 30px -14px rgb(0 0 0 / 0.6);
}
.nv-mosaico .nv-aviso-medio p { margin: 0; font-size: 15px; line-height: 1.35; color: inherit; max-inline-size: none; }
.nv-mosaico .nv-aviso-medio b { display: block; font: 400 18px / 1.2 var(--mos-display); color: inherit; }
.nv-mosaico .nv-aviso-medio__accion { padding: 11px 14px; font-size: 14px; }
.nv-mosaico .nv-aviso-medio__cerrar {
  inline-size: 40px;
  block-size: 40px;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--mos-blanco) 25%, transparent);
  border-radius: 8px;
  background: transparent;
  color: var(--mos-blanco);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}
.nv-mosaico .nv-aviso-medio__cerrar:focus-visible { outline: 3px solid var(--mos-senal); outline-offset: 2px; }
html:not(.js) .nv-mosaico .nv-aviso-medio__cerrar { display: none; }
html.js .nv-mosaico .nv-aviso-medio {
  position: fixed;
  inset-inline: 0;
  inset-block-end: 12px;
  z-index: 90;
  inline-size: min(800px, calc(100% - 24px));
  margin: 0 auto;
  transform: translateY(160%);
  opacity: 0;
  visibility: hidden;
  transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.3s, visibility 0s linear 0.5s;
}
html.js .nv-mosaico .nv-aviso-medio.ve { transform: none; opacity: 1; visibility: visible; transition-delay: 0s; }
@media (prefers-reduced-motion: reduce) {
  html.js .nv-mosaico .nv-aviso-medio { transition: none; }
}
@media (max-width: 817.98px) {
  .nv-mosaico .nv-aviso-medio { grid-template-columns: minmax(0, 1fr) auto; }
  .nv-mosaico .nv-aviso-medio__accion { grid-column: 1; justify-self: start; }
  .nv-mosaico .nv-aviso-medio__cerrar { grid-column: 2; grid-row: 1; }
}

/* Esquemas vivos: el contenido aporta relaciones y datos; el tema dibuja.
   Todo queda condicionado a nv-esquema, incluidas las filas y sus rótulos. */
.nv-mosaico .nv-esquema {
  font: 400 clamp(16.5px, 1.45vw, 19.5px) / 1.45 var(--mos-texto);
  color: var(--mos-tinta);
  align-self: start;
  gap: 20px;
}
.nv-mosaico .nv-esquema :is(p, li, code, strong, em, data) {
  font-size: inherit;
  line-height: inherit;
}
.nv-mosaico .nv-esquema :is(p, ul, li) {
  margin: 0;
  padding: 0;
  max-inline-size: none;
  text-align: start;
}
.nv-mosaico .nv-esquema ul { list-style: none; }
.nv-mosaico .nv-esquema li::marker,
.nv-mosaico .nv-esquema li::before { content: none; }
.nv-mosaico .nv-esquema code {
  display: inline;
  padding: 2px 6px;
  border-radius: 3px;
  /* Niebla entera y no la mezcla al 65 % del code del párrafo: sobre la loseta, la mezcla daba la mitad de escalón
     (1,05:1 frente a 1,10:1 sobre el papel); así el mismo valor se ve igual en el párrafo y en el dibujo (verificador
     en frío, 04-10-2026). */
  background: var(--mos-niebla);
  color: var(--mos-tinta);
  font-family: var(--mos-texto);
  font-weight: 400;
  white-space: nowrap;
  overflow-wrap: normal;
  word-break: normal;
}
/* El rótulo del esquema es el de todas las piezas del mosaico (.nv-mosaico__rotulo): un solo sistema en el blog
   (verificador en frío, 02-10-2026, criterio 12: el rótulo de la loseta con imagen se apartaba del de las demás). */
/* Sin palabras sueltas al final de un pie o de una caja («fila», «cerrada» solas a 320 px; 03-10-2026). */
.nv-mosaico .nv-esquema :is(p, li, strong, em) { text-wrap: pretty; }
/* Compacto: a 1440 el esquema medía 580 px junto a 450 de texto y dejaba 124-137 px en blanco bajo el texto entre
   1199 y 1440 (esq-captura, 03-10-2026). Cajas de 8 px de relleno; la flecha, en em, para que guarde con la letra la
   misma proporción en todos los anchos (en píxeles fijos, a 1440 era una marca pequeña; verificador, 03-10-2026). */
/* Una sola columna que no crece con su contenido (minmax(0, 1fr) y no auto): un chip demasiado ancho para su caso no
   ensancha el caso ni la lista ni saca de la loseta las cajas de destino (verificador en frío, 04-10-2026: con un chip
   de 26 mayúsculas, el caso pasaba de 246 a 373 px); se desliza dentro de su párrafo (abajo). La prueba del tema
   impide ese chip. */
.nv-mosaico .nv-esquema--canal > ul { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; }
.nv-mosaico .nv-esquema--canal li { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
/* El chip va en línea y no como caja: junto a una caja inline-block, Chrome abre un corte aunque haya espacio duro, y
   el «+» del par empezaba línea en cuanto el par no cabía (medicion/esq-mas-linea.mjs, 04-10-2026: 43 anchos de 171
   con inline-block, 0 en línea). El origen con chips guarda el alto de línea que le daba la caja (el texto, más los
   4 px del relleno del chip), y con el par en dos líneas los chips no se tocan; el que no lleva chips («Si no encaja»)
   no cambia. Y si un chip no cabe en su caso (lo que la prueba del tema rechaza), se desliza dentro de su párrafo, como
   el código de un `<pre>`: con la columna de una sola pista, a 600 pisaba el caso de al lado y a 320 se cortaba en el
   borde de la loseta (medicion/limites-emergencia-600.png y -320.png, 04-10-2026). */
.nv-mosaico .nv-esquema--canal li > p:first-child:has(> code) { line-height: calc(1.45em + 4px); overflow-x: auto; }
/* La flecha va, por posición, al destino (el segundo párrafo) y a la consecuencia (el tercero, con su em): con «p + p»,
   un párrafo de más en un caso correcto salía con flecha, como si tuviera consecuencia (verificador en frío,
   04-10-2026, mutantes-6/). */
.nv-mosaico .nv-esquema--canal :is(li > p:nth-child(2), li > p:nth-child(3):has(> em)) { position: relative; padding-block-start: 1.1em; }
/* Una sola familia de flecha fina, decorativa: asta y punta sin texto generado. */
.nv-mosaico .nv-esquema--canal :is(li > p:nth-child(2), li > p:nth-child(3):has(> em))::before {
  content: "";
  position: absolute;
  inset: 0 auto auto 16px;
  block-size: 0.75em;
  border-inline-start: 1px solid var(--mos-gris);
}
.nv-mosaico .nv-esquema--canal :is(li > p:nth-child(2), li > p:nth-child(3):has(> em))::after {
  content: "";
  position: absolute;
  inset: 0.45em auto auto calc(16.5px - 0.19em);
  inline-size: 0.38em;
  block-size: 0.38em;
  border-inline-end: 1px solid var(--mos-gris);
  border-block-end: 1px solid var(--mos-gris);
  transform: rotate(45deg);
}
/* Negrita y cursiva, solo en su sitio y por posición: el destino es el strong del segundo párrafo y la consecuencia, el
   em del tercero (o el em suelto que sigue al destino, antes de wpautop). Con «strong» y «em» a secas, una negrita del
   editor en el origen salía como caja de destino y una cursiva convertía un caso correcto en error (mutantes-5/); con
   «cualquier párrafo menos el primero», una negrita en la consecuencia o en un párrafo de más salía como otra caja de
   destino (mutantes-6/; verificador en frío, 04-10-2026). La prueba del tema rechaza además todo caso que no sea
   origen, destino y, si es un error, consecuencia. */
.nv-mosaico .nv-esquema--canal li > p:nth-child(2) > strong {
  display: block;
  padding: 8px 14px;
  border: 1px solid var(--mos-tinta);
  border-radius: 6px;
  background: var(--mos-tinta);
  color: var(--mos-blanco);
  font-weight: 600;
}
/* El caso con error lleva su consecuencia en <em>, que wpautop envuelve en un <p> antes de que pinte el mosaico: sin
   «> p > em» el destino equivocado salía en tinta, igual que el correcto (03-10-2026). */
.nv-mosaico .nv-esquema--canal li:has(> em, > p:nth-child(3) > em) > p:nth-child(2) > strong {
  background: transparent;
  border-color: var(--mos-mal);
  color: var(--mos-tinta);
}
.nv-mosaico .nv-esquema--canal :is(li > em, li > p:nth-child(3) > em) { color: var(--mos-mal); font-style: normal; }
.nv-mosaico .nv-esquema--canal li:last-child {
  border-block-start: 1px solid var(--mos-linea);
  padding-block-start: 16px;
}
.nv-mosaico .nv-esquema--canal li:last-child > p:nth-child(2) > strong {
  inline-size: fit-content;
  color: var(--mos-gris);
  border-color: var(--mos-gris);
  background: transparent;
}
.nv-mosaico .nv-esquema--barras > p { color: var(--mos-gris); }
.nv-mosaico .nv-esquema--barras > ul { display: grid; gap: 14px; }
.nv-mosaico .nv-esquema--barras li {
  display: grid;
  grid-template-columns: 7.8em minmax(0, 1fr);
  align-items: center;
  gap: 12px;
}
/* Lo mismo en la etiqueta: si no cabe en su columna, la caja no crece sobre la barra y el texto se desliza dentro. */
.nv-mosaico .nv-esquema--barras code { justify-self: start; max-inline-size: 100%; overflow-x: auto; }
.nv-mosaico .nv-esquema--barras data {
  display: flex;
  gap: 8px;
  align-items: center;
  white-space: nowrap;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
/* La barra mayor llega al 76 % de su columna (al 62 % por debajo de 480) o hasta donde deje sitio a la cantidad más
   ancha de la figura y a su hueco de 8 px (--nv-cifra, en em, que calcula el tema); todas las filas, en la misma escala
   (--nv-barra, de 0 a 1). Con el 76 % fijo, «14.160 €» se salía de la loseta 24 px a 900 y 28 a 320 (captura local de
   la 36, 05-10-2026). */
.nv-mosaico .nv-esquema--barras data::before {
  content: "";
  flex: 0 0 calc(min(76%, 100% - var(--nv-cifra, 0em) - 8px) * var(--nv-barra, 0));
  block-size: 1.2em;
  border-radius: 3px;
  background: var(--mos-gris);
}
.nv-mosaico .nv-esquema--barras > ul + p:not(:last-child) {
  border-block-start: 1px solid var(--mos-linea);
  padding-block-start: 20px;
}
/* Regla de dibujo de los esquemas: tinta para el resultado correcto, rojo solo para el error, gris para lo neutro. El
   último grupo, tras los demás, es el resultado (la fila única de 340 de la 22) y va en tinta, como la caja del canal
   correcto del otro esquema. Con un solo grupo no hay resultado que destacar y todas las barras se quedan en gris
   (verificador en frío, 04-10-2026: con «ul:last-of-type» a secas, un grupo único salía entero en tinta). */
.nv-mosaico .nv-esquema--barras > ul:last-of-type:not(:first-of-type) data::before { background: var(--mos-tinta); }
@media (max-width: 899.98px) {
  .nv-mosaico__fila:has(> .nv-esquema) { grid-template-columns: minmax(0, 1fr); }
  .nv-mosaico__fila:has(> .nv-esquema) > .nv-mosaico__txt { order: 0; }
  .nv-mosaico__fila > .nv-esquema { order: 1; }
}
/* De 760 a 899, el texto encima del esquema a dos columnas, como en las filas con imagen: a una columna llegaba a 96
   caracteres por línea a 834 y a 88 a 768. El titular lleva el margen hasta el texto (los 30 px de siempre: 14 + 16)
   para que las dos columnas arranquen a la misma altura; con el margen en el primer párrafo, la primera columna
   arrancaba 16 px más abajo que la segunda (verificador en frío, 03-10-2026). */
@media (min-width: 760px) and (max-width: 899.98px) {
  .nv-mosaico__fila:has(> .nv-esquema) > .nv-mosaico__txt {
    display: block;
    columns: 2;
    column-gap: var(--mos-canal);
  }
  .nv-mosaico__fila:has(> .nv-esquema) > .nv-mosaico__txt > h2 { column-span: all; margin-block-end: 30px; }
  .nv-mosaico__fila:has(> .nv-esquema) > .nv-mosaico__txt > * + * { margin-block-start: 16px; }
  .nv-mosaico__fila:has(> .nv-esquema) > .nv-mosaico__txt > h2 + * { margin-block-start: 0; }
}
/* El titular en su propia fila (nv-mosaico__fila--titular, que pone el tema cuando el texto de al lado se estima más
   largo que el esquema en más de 100 px): encima de su texto y con los 30 px de siempre hasta él (6 de margen y los 24
   de la rejilla); la pieza arranca a la altura del primer párrafo y el blanco bajo ella baja de 120 (barras de la 36 y
   canales de la 15 y la 36, captura local del 05-10-2026). Por debajo de 900 la fila ya va a una columna, y el titular,
   el primero. */
.nv-entrada-compuesta:has(> .nv-toc) .nv-entrada__texto.nv-mosaico .nv-mosaico__fila--titular > h2[data-nv-orden],
.nv-entrada-compuesta .nv-entrada__texto.nv-mosaico .nv-mosaico__fila--titular > h2 { margin-block-end: 6px; }
.nv-mosaico__fila--titular > h2 { order: -1; }
@media (min-width: 1024px) {
  .nv-mosaico__fila--titular > h2 { grid-area: 1 / 1; }
  .nv-mosaico__fila--titular > .nv-mosaico__txt { grid-area: 2 / 1; }
  .nv-mosaico__fila--titular > .nv-mosaico__pieza { grid-area: 2 / 2; }
  .nv-mosaico__fila--titular[data-lado="izq"] > :is(h2, .nv-mosaico__txt) { grid-column: 2; }
  .nv-mosaico__fila--titular[data-lado="izq"] > .nv-mosaico__pieza { grid-column: 1; }
}
/* De 900 a 1023, esa fila apila el esquema debajo de su texto, como todas las de esquema por debajo de 900: con las
   mitades de 408-468 px, el texto largo dejaba 127 px en blanco bajo el canal de la 36 a 900 aun con el titular fuera
   (captura local del 05-10-2026). El texto, a dos columnas, y el canal, con sus casos de dos en dos: las reglas de 760-899
   y de 600-899, con el selector de la fila. */
@media (min-width: 900px) and (max-width: 1023.98px) {
  .nv-mosaico__fila--titular { grid-template-columns: minmax(0, 1fr); }
  /* Con la clase doble, para ganar a la del lado izquierdo (`[data-lado="izq"] > .nv-mosaico__txt`, que manda el texto
     detrás de la pieza): con una sola, las barras de la 36 salían encima de su texto a 900. */
  .nv-mosaico__fila.nv-mosaico__fila--titular > .nv-mosaico__txt { order: 0; display: block; columns: 2; column-gap: var(--mos-canal); }
  .nv-mosaico__fila--titular > .nv-mosaico__txt > * + * { margin-block-start: 16px; }
  .nv-mosaico__fila--titular > .nv-esquema { order: 1; }
  .nv-mosaico .nv-mosaico__fila--titular .nv-esquema--canal > ul { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 20px; }
  .nv-mosaico .nv-mosaico__fila--titular .nv-esquema--canal li { grid-row: span 3; grid-template-rows: subgrid; }
  .nv-mosaico .nv-mosaico__fila--titular .nv-esquema--canal li:last-child { grid-column: 1 / -1; grid-row: auto; grid-template-rows: none; }
  .nv-mosaico .nv-mosaico__fila--titular .nv-esquema--canal :is(li > p:nth-child(2), li > p:nth-child(3):has(> em)) { display: grid; }
  .nv-mosaico .nv-mosaico__fila--titular .nv-esquema--canal li > p:nth-child(2) > strong { display: flex; align-items: center; }
}
/* De 600 a 899, con el esquema apilado a todo el ancho, el de canales pone sus casos de dos en dos, alineados por filas
   (chips, destino, consecuencia), y el último, el resto («Sin asignar»), debajo a todo el ancho: el caso correcto y el
   equivocado se comparan de un vistazo y la loseta no deja 240-300 px vacíos a la derecha (verificador en frío,
   04-10-2026). A 600 cada columna mide unos 246 px y el par de chips más largo, 207. Las dos cajas de destino, con el
   mismo alto y el texto al medio aunque una pase a dos líneas. */
@media (min-width: 600px) and (max-width: 899.98px) {
  .nv-mosaico .nv-esquema--canal > ul { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 20px; }
  .nv-mosaico .nv-esquema--canal li { grid-row: span 3; grid-template-rows: subgrid; }
  .nv-mosaico .nv-esquema--canal li:last-child { grid-column: 1 / -1; grid-row: auto; grid-template-rows: none; }
  .nv-mosaico .nv-esquema--canal :is(li > p:nth-child(2), li > p:nth-child(3):has(> em)) { display: grid; }
  /* Con el mismo selector que la caja de destino (y después en la hoja), para que el flex le gane al block. */
  .nv-mosaico .nv-esquema--canal li > p:nth-child(2) > strong { display: flex; align-items: center; }
}
/* ESQUEMA EN TIRA (orden de Jesús del 12-10-2026, «Cambio en el tema»): el tema baja un esquema vivo bajo su texto, a la
   caja entera, cuando su alto real pasa en más de 150 px al del texto que le queda al lado (dejaba de 183 a 586 px en
   blanco bajo el texto a 1440 en 18 entradas). Desde 900 px, el canal pone sus casos de dos en dos, como apilado de 600 a
   899 (la regla de arriba): a la caja entera y uno debajo de otro, cada destino era una franja de más de 1.100 px. Desde
   760, con el hueco entre columnas del texto de encima (`--mos-canal`, no los 20 px de arriba), para que las dos segundas
   columnas arranquen en la misma x: con 20, la del canal quedaba de 5 a 14 px a la izquierda (verificador en frío,
   segunda vuelta, 12-10-2026). El texto de encima, como la continuación: los párrafos se parten entre las dos columnas
   (con `avoid`, uno de 233 px dejaba otro tanto en blanco al pie de la otra) y el H3 lleva su aire. Ese texto es corto
   (dos a cuatro párrafos): con tres líneas mínimo a cada lado de un corte, la 66 dejaba 95 px en blanco al pie; con dos,
   la 29 dejaba 63 a 1440 (y Chrome partía igual, con una línea sola en cabeza de la segunda columna) y la 17 y la 66, 53.
   Por eso un párrafo puede dejar UNA línea al pie de la primera columna, que abre párrafo y se lee bien, y nunca una en
   cabeza de la segunda, que es la que se lee mal; tras un H3, dos. Así ninguna de las 18 pasa de una línea en blanco al
   pie en ningún ancho (esq-captura.mjs, de 390 a 1440). La continuación va debajo del esquema, como en la fila. Con los
   aires de la fila a la que sustituye (mide-aires.mjs, 12-10-2026): 30 px del titular a su texto (la cabecera de la tira
   daba 26) y 24 de hueco en la tira, que dan del texto a la loseta lo mismo que la fila apilada (con 18, 6 menos a 390 y
   a 768) y 24 hasta la continuación. Y el origen de cada caso, al pie de su fila, junto a su flecha: con los casos de dos
   en dos, el de una línea al lado de uno de dos quedaba 39 px por encima de ella (10 los demás; verificador en frío). */
@media (min-width: 900px) {
  .nv-mosaico .nv-mosaico__ancha > .nv-esquema--canal > ul { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 20px; }
  .nv-mosaico .nv-mosaico__ancha > .nv-esquema--canal li { grid-row: span 3; grid-template-rows: subgrid; }
  .nv-mosaico .nv-mosaico__ancha > .nv-esquema--canal li:last-child { grid-column: 1 / -1; grid-row: auto; grid-template-rows: none; }
  .nv-mosaico .nv-mosaico__ancha > .nv-esquema--canal :is(li > p:nth-child(2), li > p:nth-child(3):has(> em)) { display: grid; }
  .nv-mosaico .nv-mosaico__ancha > .nv-esquema--canal li > p:nth-child(2) > strong { display: flex; align-items: center; }
}
.nv-mosaico__tira--intro:has(> .nv-mosaico__ancha > .nv-esquema) .nv-mosaico__tira-intro > p { break-inside: auto; orphans: 1; widows: 2; }
.nv-mosaico__tira--intro:has(> .nv-mosaico__ancha > .nv-esquema) .nv-mosaico__tira-intro > h3 + p { orphans: 2; }
@media (min-width: 760px) {
  .nv-mosaico .nv-mosaico__tira--intro > .nv-mosaico__ancha > .nv-esquema--canal > ul { column-gap: var(--mos-canal); }
}
.nv-mosaico__tira--intro:has(> .nv-mosaico__ancha > .nv-esquema) .nv-mosaico__tira-intro > h3 { margin-block-end: 16px; }
.nv-mosaico__tira--intro:has(> .nv-mosaico__ancha > .nv-esquema) .nv-mosaico__tira-intro > * + h3 { margin-block-start: 22px; }
.nv-mosaico__tira--intro:has(> .nv-mosaico__ancha > .nv-esquema) .nv-mosaico__tira-intro > :last-child { margin-block-end: 0; }
.nv-mosaico__tira--intro:has(> .nv-mosaico__ancha > .nv-esquema) > .nv-mosaico__tira-cab { row-gap: 16px; }
.nv-mosaico__tira--intro:has(> .nv-mosaico__ancha > .nv-esquema) { row-gap: 24px; }
.nv-mosaico .nv-mosaico__ancha > .nv-esquema--canal li > p:first-child { align-self: end; }
@media (max-width: 479.98px) {
  .nv-mosaico .nv-esquema { padding-inline: 14px; }
  .nv-mosaico .nv-esquema--barras li { grid-template-columns: 7em minmax(0, 1fr); gap: 8px; }
  .nv-mosaico .nv-esquema--barras data::before { flex-basis: calc(min(62%, 100% - var(--nv-cifra, 0em) - 8px) * var(--nv-barra, 0)); }
}