/* Molde de entrada — identidad «Taller de precisión».
   Índice, tiempo de lectura, caja de autor, piezas del mismo tema y cierre.
   La medida de lectura vive en el CONTENEDOR de la columna, nunca en cada hijo:
   así ningún bloque queda encogido respecto a sus hermanos. */

/* 🔴 Los siete tokens de esta hoja NO ESTABAN DEFINIDOS EN NINGUNA PARTE (medido el 09-09-2026):
   toda la hoja se resolvía por sus hex de respaldo, que son los de la identidad ANTERIOR. El
   resultado visible: el CTA de cierre del artículo se pintaba #E74235 y el enlace del autor
   #B32418, dos rojos que no están en la paleta (#D81820 / #C3141B), con esquina viva y 8 px más
   alto que el primario del kit. Un token sin definir no da error: da otro diseño.
   Aquí se atan a los del tema; los hex se quedan como respaldo por si la hoja se sirve sola. */
:root {
  --molde-tinta: var(--nv-ink, #0b0d10);
  --molde-senal: var(--nv-signal, #d81820);
  --molde-accion: var(--nv-signal-text, #c3141b);
  --molde-texto: var(--nv-ink, #0b0d10);
  --molde-gris: var(--nv-muted-light, #5b626b);
  --molde-linea: var(--nv-border, rgb(11 13 16 / 20%));
  /* 🔴🔴 Los rótulos del blog iban en la MONOESPACIADA DEL SISTEMA. `--nv-font-mono` está definido
     como `ui-monospace, "Cascadia Code", consolas`, que no es una fuente: es «la que tenga el
     visitante». Cascadia en Windows, SF Mono en Mac, otra en Linux — justo lo que la casa prohíbe
     («fuentes de marca embebidas, nunca sustituidas por el sistema»). Y con ello el sitio hablaba
     DOS vocabularios: 16 rótulos del blog en mono de sistema frente a Instrument Sans 11,8/600 en
     las once páginas de Elementor.
     Lo zanjan las maquetas: en la 07 y la 13, «ÍNDICE DEL ARTÍCULO», «CONVIERTE IDEAS EN
     RESULTADOS» y «ARTÍCULOS RELACIONADOS» están dibujados en SANS con tracking, no en mono.
     Así que el rótulo del blog pasa a la misma tupla del kit y el sitio habla una sola lengua.
     Medido el 11-09-2026 por el verificador de contexto fresco. */
  --molde-mono: var(--nv-font-body, "Instrument Sans", system-ui, sans-serif);
}

/* La tupla del rótulo, igual que la global `nvrotulo` del kit de Elementor: 11,8 px, peso 600 y
   1,9 px de tracking. Se aplica a todos los rótulos del molde de una vez, en lugar de repetir el
   tamaño en cada uno —que es como se desincronizan—. */
.nv-lectura,
.nv-toc__titulo,
.nv-resumen__rotulo,
.nv-autor__rotulo,
.nv-relacionados__titulo,
.nv-relacionados__fecha,
.nv-cierre__rotulo,
.nv-entrada-compuesta .nv-entrada__texto h2[data-nv-orden]::before,
:is(.nv-desbordable, .nv-table-scroll) > table td[data-nv-col]::before {
  font-family: var(--molde-mono);
  font-size: .7375rem;   /* 11,8 px */
  font-weight: 600;
  letter-spacing: .119em; /* 1,9 px a 11,8 */
}

.nv-lectura {
  font-family: var(--molde-mono, ui-monospace, "IBM Plex Mono", Consolas, monospace);
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--molde-gris, #5A6472);
  margin: 0 0 1.35rem;
}

/* Índice: una ficha de taller, no una caja decorativa */
.nv-toc {
  border-top: 3px solid var(--molde-tinta, #0B0D10);
  border-bottom: 1px solid var(--molde-linea, #C9D0D8);
  padding: 1.1rem 0 1.35rem;
  margin: 0 0 2.4rem;
}
.nv-toc__titulo {
  font-family: var(--molde-mono, ui-monospace, "IBM Plex Mono", Consolas, monospace);
  font-size: .74rem;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--molde-gris, #5A6472);
  margin: 0 0 .9rem;
}
.nv-toc__lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  gap: .45rem 2rem;
  counter-reset: molde-toc;
}
.nv-toc__lista li {
  counter-increment: molde-toc;
  display: grid;
  grid-template-columns: 2.1rem 1fr;
  gap: .5rem;
  align-items: baseline;
  margin: 0;
}
.nv-toc__lista li::before {
  content: counter(molde-toc, decimal-leading-zero);
  font-family: var(--molde-mono, ui-monospace, Consolas, monospace);
  font-size: .72rem;
  color: var(--molde-senal, #E74235);
  font-weight: 500;
}
.nv-toc__lista a {
  color: var(--molde-tinta, #0B0D10);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  line-height: 1.35;
}
.nv-toc__lista a:hover,
.nv-toc__lista a:focus-visible {
  border-bottom-color: var(--molde-senal, #E74235);
}

/* Ancla con holgura: un titular al que se salta no queda pegado al borde */
.entry-content h2[id],
.nv-entry-content h2[id],
.nv-prose h2[id] { scroll-margin-top: 2.5rem; }

/* Caja de autor: identidad, no adorno */
.nv-autor {
  border-top: 1px solid var(--molde-linea, #C9D0D8);
  margin: 3rem 0 0;
  padding: 1.6rem 0 0;
}
.nv-autor__rotulo {
  font-family: var(--molde-mono, ui-monospace, Consolas, monospace);
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--molde-gris, #5A6472);
  margin: 0 0 .5rem;
}
.nv-autor__nombre {
  font-weight: 700;
  font-size: 1.1rem;
  margin: 0 0 .4rem;
}
.nv-autor__bio {
  color: var(--molde-texto2, #2A3341);
  margin: 0 0 .6rem;
}
.nv-autor__enlace a { color: var(--molde-accion, #B32418); }

/* Del mismo tema */
.nv-relacionados {
  border-top: 1px solid var(--molde-linea, #C9D0D8);
  margin: 2.4rem 0 0;
  padding: 1.6rem 0 0;
}
.nv-relacionados__titulo {
  font-family: var(--molde-mono, ui-monospace, Consolas, monospace);
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--molde-gris, #5A6472);
  margin: 0 0 .8rem;
}
.nv-relacionados ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.nv-relacionados li {
  margin: 0;
  border-bottom: 1px solid var(--molde-linea, #C9D0D8);
}
.nv-relacionados li:last-child { border-bottom: 0; }
.nv-relacionados a {
  display: block;
  padding: .75rem 0;
  color: var(--molde-tinta, #0B0D10);
  text-decoration: none;
  font-weight: 600;
}
.nv-relacionados a:hover,
.nv-relacionados a:focus-visible { color: var(--molde-accion, #B32418); }

/* La ficha de la maqueta 07: miniatura, título y fecha. El enlace es la ficha entera —el área
   táctil es la tarjeta, no el renglón del título— y la imagen mantiene su proporción sin importar
   qué recorte sirva WordPress. */
.nv-relacionados__pieza > a {
  display: grid;
  gap: .55rem;
}
.nv-relacionados__foto {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  background: var(--molde-suave, #F1F3F5);
}
.nv-relacionados__nombre {
  display: block;
  line-height: 1.35;
}
.nv-relacionados__fecha {
  font-family: var(--molde-mono, ui-monospace, Consolas, monospace);
  font-size: .72rem;
  letter-spacing: .06em;
  color: var(--molde-gris, #5A6472);
  font-weight: 400;
}

/* Cierre: una sola acción */
.nv-cierre {
  background: var(--molde-tinta, #0B0D10);
  color: #FAFBFC;
  padding: 1.9rem 1.9rem 2rem;
  margin: 2.6rem 0 0;
}
/* La banda de cierre, a dos columnas: la llamada a la izquierda y los servicios a la derecha,
   donde antes había media banda de negro vacío al lado del botón. La maqueta 07 pone estos
   enlaces en su columna lateral; retirado el lateral, este es el sitio donde el lector los
   necesita —al terminar de leer— y donde además llenan la fila. */
.nv-cierre__servicios ul {
  list-style: none;
  margin: 0;
  padding: 0;
  /* Por ancho mínimo y no por número de carriles: a 390 px dos columnas dejaban «Analítica y
     optimización de conversión» en tres líneas y la flecha pegada al texto. Con 15 rem, la
     segunda columna aparece solo cuando cabe. */
  columns: 15rem;
  column-gap: 1.8rem;
}
.nv-cierre__servicios li { margin: 0; break-inside: avoid; }
.nv-cierre__rotulo {
  font-family: var(--molde-mono, ui-monospace, Consolas, monospace);
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #A8B0BB;
  margin: 0 0 .7rem;
}
.nv-cierre__servicios a {
  align-items: baseline;
  border-bottom: 1px solid #2A2F37;
  color: #FAFBFC;
  display: flex;
  gap: .6rem;
  justify-content: space-between;
  padding: .55rem 0;
  text-decoration: none;
}
.nv-cierre__servicios a:hover,
.nv-cierre__servicios a:focus-visible {
  color: var(--nv-signal-claro, #ff8a86);
  border-bottom-color: var(--nv-signal-claro, #ff8a86);
}
.nv-cierre__servicios .nv-ico { flex: 0 0 auto; }

.nv-cierre__titulo {
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1.2;
  margin: 0 0 .55rem;
  color: #FAFBFC;
}
.nv-cierre__texto {
  color: #D9DDE3;
  margin: 0 0 1.3rem;
}
/* Mismo botón que el resto del sitio: fondo de señal, texto blanco, radio 999 y 48 px de alto,
   no una pieza propia con esquina viva. El hover baja al rojo profundo del kit y se levanta 2 px,
   igual que `.nv-button`: dos primarios con gesto distinto en la misma página son dos sistemas. */
.nv-cierre__accion {
  align-items: center;
  background: var(--molde-senal, #d81820);
  border: 1px solid var(--molde-senal, #d81820);
  border-radius: var(--nv-radius-control, 999px);
  box-sizing: border-box;
  color: var(--nv-white, #fff);
  display: inline-flex;
  font-weight: 700;
  justify-content: center;
  min-height: 48px;
  padding: .75rem 1.5rem;
  text-decoration: none;
  transition: transform 180ms cubic-bezier(.2, .7, .2, 1), background 180ms, border-color 180ms;
}
.nv-cierre__accion:hover,
.nv-cierre__accion:focus-visible {
  background: var(--nv-signal-deep, #8f0f14);
  border-color: var(--nv-signal-deep, #8f0f14);
  color: var(--nv-white, #fff);
  transform: translateY(-2px);
}

@media (max-width: 640px) {
  .nv-toc__lista { grid-template-columns: 1fr; }
  .nv-cierre { padding: 1.5rem 1.25rem 1.6rem; }
  .nv-cierre__accion { display: block; text-align: center; }
}

@media (prefers-reduced-motion: no-preference) {
  .nv-toc__lista a { transition: border-color .15s ease; }
}

/* Área táctil de 24 px (WCAG 2.5.8, AA). Medido el 10-09-2026: los enlaces del índice que ocupan
   una sola línea daban 23 px de alto y «Más sobre el autor» y la etiqueta del tema, 20. Se gana
   con relleno propio, que agranda el objetivo de verdad; ampliarlo con un `::after` en negativo
   —el apaño clásico— se come la separación con el enlace de al lado y le roba toques, que es peor
   que el objetivo pequeño. */
.nv-toc__lista a { padding-block: 2px; }
.nv-entry-footer a,
.nv-post-navigation a,
.nv-autor a {
  display: inline-block;
  padding-block: 3px;
}

/* El pie de la entrada, compactado. Medido el 10-09-2026 a 1440 px: entre la banda de cierre y el
   filete de «Temas» había 129,6 px de relleno del contenedor, y entre «Temas» —una sola línea, con
   un tema— y la navegación anterior/siguiente otros 168 (72 de relleno + 72 de margen + 24). Casi
   300 px de vacío para dos renglones: la entrada parecía terminarse dos veces.
   Los valores generales del tema están pensados para una página que acaba en prosa; aquí el
   contenido acaba en una banda de color a todo el ancho, que ya cierra por sí sola. Se tocan solo
   en esta hoja, que se sirve únicamente en entradas y archivos del blog. */
.nv-entry-content { padding-block-end: 2.4rem; }
.nv-entry-footer { padding-block: 1.5rem 2rem; }
.nv-post-navigation { margin-block: 2rem; }

/* Apartados numerados, como en la maqueta 07: el numeral en rojo con su filete, encima del
   titular. El número lo pone el PHP en `data-nv-orden` para que sea EL MISMO que el del índice.
   Solo se pintan cuando hay índice: sin él, numerar apartados no ayuda a orientarse, decora. */
.nv-entrada-compuesta:has(> .nv-toc) .nv-entrada__texto h2[data-nv-orden] {
  margin-top: 3.2rem;
}
.nv-entrada-compuesta:has(> .nv-toc) .nv-entrada__texto h2[data-nv-orden]::before {
  content: attr(data-nv-orden);
  display: block;
  width: fit-content;
  font-family: var(--molde-mono, ui-monospace, "IBM Plex Mono", Consolas, monospace);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .12em;
  color: var(--molde-senal, #E74235);
  margin-bottom: .55rem;

  /* El filete rojo que la maqueta pone al lado del número. Va DENTRO de este pseudo, como fondo:
     partir el h2 en una rejilla para colocarlo aparte convertiría su texto en ítems anónimos y
     repartiría el titular en filas — es el defecto que caza G-frase-partida, y ya ha pasado dos
     veces en esta misma web. */
  padding-inline-end: 3rem;
  background-image: linear-gradient(var(--molde-senal, #E74235), var(--molde-senal, #E74235));
  background-size: 2rem 2px;
  background-position: right center;
  background-repeat: no-repeat;
}

/* Los dos rótulos del molde llevan icono delante y el texto NO se pega a él: sin esta regla el
   trazo del documento tocaba la «E» de «EN RESUMEN». Se alinean por la línea base del texto, que
   es lo que hace `vertical-align` de `.nv-ico`; el flex los descolocaría. */
.nv-toc__titulo > .nv-ico,
.nv-resumen__rotulo > .nv-ico {
  margin-inline-end: .5em;
  font-size: 1.25em;
}

/* Respuesta directa: el pasaje citable, lo primero que se lee */
.nv-resumen {
  border-left: 3px solid var(--molde-senal, #E74235);
  background: #F1F3F5;
  padding: 1.1rem 1.4rem 1.2rem;
  margin: 0 0 2rem;
}
.nv-resumen__rotulo {
  font-family: var(--molde-mono, ui-monospace, Consolas, monospace);
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--molde-gris, #5A6472);
  margin: 0 0 .5rem;
}
.nv-resumen__texto {
  margin: 0;
  font-size: 1.06em;
  line-height: 1.55;
  color: var(--molde-tinta, #0B0D10);
}

/* Tablas y código anchos: scrollean dentro de su caja; el cuerpo nunca de lado */
/* 🔴 A 390 px la tabla se VE rebanada por el borde derecho («Componentes, moneda e in…») y no
   había ni un indicio de que se pudiera desplazar: el contenido era alcanzable y el gate daba
   verde, pero el ojo lee una tabla cortada. El degradado de la derecha desaparece al llegar al
   final —`animation-timeline: scroll(self inline)`— y donde eso no exista se queda fijo, que
   sigue siendo mejor que nada. */
/* 🔴 La máscara va también en `.nv-table-scroll`, y ESA es la clase que llevan las tablas de
   verdad: el molde solo envuelve en `.nv-desbordable` lo que NO viene ya envuelto, y las tablas
   del contenido traen `nv-table-scroll` escrita. Puse la máscara solo en la otra y a 390 la tabla
   se seguía viendo cortada a media palabra sin ningún indicio — el verificador lo cazó midiendo
   `maskImage: none` sobre el envoltorio real. Arreglar la clase equivocada es no arreglar nada. */
.nv-desbordable,
.nv-table-scroll {
  overflow-x: auto;
  max-width: 100%;
  margin: 1.4rem 0;
  -webkit-overflow-scrolling: touch;
  mask-image: linear-gradient(to right, #000 calc(100% - 3rem), transparent 100%);
}

@supports (animation-timeline: scroll()) {
  .nv-desbordable,
  .nv-table-scroll {
    animation: nv-fin-carril linear both;
    animation-timeline: scroll(self inline);
  }

  @keyframes nv-fin-carril {
    to { mask-image: linear-gradient(to right, #000 100%, #000 100%); }
  }
}

/* Sin desplazamiento posible no hay nada que anunciar: la máscara se retira. */
@media (min-width: 40rem) {
  .nv-desbordable,
  .nv-table-scroll { mask-image: none; }
}

/* La fórmula del artículo (`CPL = coste atribuible del periodo / leads…`) se partía en DOS cajas
   grises, dejando «periodo» solo en la segunda línea con su propio recuadro. Un `code` de fórmula
   no se parte: si no cabe, se desplaza. */
.nv-entrada__texto code {
  display: inline-block;
  max-width: 100%;
  overflow-x: auto;
  vertical-align: bottom;
  white-space: nowrap;
}
.nv-desbordable > table,
.nv-desbordable > figure { margin: 0; min-width: 30rem; }
.nv-desbordable > pre { margin: 0; }
.nv-desbordable:focus-visible { outline: 2px solid var(--molde-accion, #B32418); outline-offset: 2px; }

/*

.nv-lectura {
  font-family: var(--molde-mono, ui-monospace, "IBM Plex Mono", Consolas, monospace);
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--molde-gris, #5A6472);
  margin: 0 0 1.35rem;
}

/* Índice: una ficha de taller, no una caja decorativa */
.nv-toc {
  border-top: 3px solid var(--molde-tinta, #0B0D10);
  border-bottom: 1px solid var(--molde-linea, #C9D0D8);
  padding: 1.1rem 0 1.35rem;
  margin: 0 0 2.4rem;
}
.nv-toc__titulo {
  font-family: var(--molde-mono, ui-monospace, "IBM Plex Mono", Consolas, monospace);
  font-size: .74rem;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--molde-gris, #5A6472);
  margin: 0 0 .9rem;
}
.nv-toc__lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  gap: .45rem 2rem;
  counter-reset: molde-toc;
}
.nv-toc__lista li {
  counter-increment: molde-toc;
  display: grid;
  grid-template-columns: 2.1rem 1fr;
  gap: .5rem;
  align-items: baseline;
  margin: 0;
}
.nv-toc__lista li::before {
  content: counter(molde-toc, decimal-leading-zero);
  font-family: var(--molde-mono, ui-monospace, Consolas, monospace);
  font-size: .72rem;
  color: var(--molde-senal, #E74235);
  font-weight: 500;
}
.nv-toc__lista a {
  color: var(--molde-tinta, #0B0D10);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  line-height: 1.35;
}
.nv-toc__lista a:hover,
.nv-toc__lista a:focus-visible {
  border-bottom-color: var(--molde-senal, #E74235);
}

/* Ancla con holgura: un titular al que se salta no queda pegado al borde */
.entry-content h2[id],
.nv-entry-content h2[id],
.nv-prose h2[id] { scroll-margin-top: 2.5rem; }

/* Caja de autor: identidad, no adorno */
.nv-autor {
  border-top: 1px solid var(--molde-linea, #C9D0D8);
  margin: 3rem 0 0;
  padding: 1.6rem 0 0;
}
.nv-autor__rotulo {
  font-family: var(--molde-mono, ui-monospace, Consolas, monospace);
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--molde-gris, #5A6472);
  margin: 0 0 .5rem;
}
.nv-autor__nombre {
  font-weight: 700;
  font-size: 1.1rem;
  margin: 0 0 .4rem;
}
.nv-autor__bio {
  color: var(--molde-texto2, #2A3341);
  margin: 0 0 .6rem;
}
.nv-autor__enlace a { color: var(--molde-accion, #B32418); }

/* Del mismo tema */
.nv-relacionados {
  border-top: 1px solid var(--molde-linea, #C9D0D8);
  margin: 2.4rem 0 0;
  padding: 1.6rem 0 0;
}
.nv-relacionados__titulo {
  font-family: var(--molde-mono, ui-monospace, Consolas, monospace);
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--molde-gris, #5A6472);
  margin: 0 0 .8rem;
}
.nv-relacionados ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.nv-relacionados li {
  margin: 0;
  border-bottom: 1px solid var(--molde-linea, #C9D0D8);
}
.nv-relacionados li:last-child { border-bottom: 0; }
.nv-relacionados a {
  display: block;
  padding: .75rem 0;
  color: var(--molde-tinta, #0B0D10);
  text-decoration: none;
  font-weight: 600;
}
.nv-relacionados a:hover,
.nv-relacionados a:focus-visible { color: var(--molde-accion, #B32418); }

/* La ficha de la maqueta 07: miniatura, título y fecha. El enlace es la ficha entera —el área
   táctil es la tarjeta, no el renglón del título— y la imagen mantiene su proporción sin importar
   qué recorte sirva WordPress. */
.nv-relacionados__pieza > a {
  display: grid;
  gap: .55rem;
}
.nv-relacionados__foto {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  background: var(--molde-suave, #F1F3F5);
}
.nv-relacionados__nombre {
  display: block;
  line-height: 1.35;
}
.nv-relacionados__fecha {
  font-family: var(--molde-mono, ui-monospace, Consolas, monospace);
  font-size: .72rem;
  letter-spacing: .06em;
  color: var(--molde-gris, #5A6472);
  font-weight: 400;
}

/* Cierre: una sola acción */
.nv-cierre {
  background: var(--molde-tinta, #0B0D10);
  color: #FAFBFC;
  padding: 1.9rem 1.9rem 2rem;
  margin: 2.6rem 0 0;
}
/* La banda de cierre, a dos columnas: la llamada a la izquierda y los servicios a la derecha,
   donde antes había media banda de negro vacío al lado del botón. La maqueta 07 pone estos
   enlaces en su columna lateral; retirado el lateral, este es el sitio donde el lector los
   necesita —al terminar de leer— y donde además llenan la fila. */
.nv-cierre__servicios ul {
  list-style: none;
  margin: 0;
  padding: 0;
  /* Por ancho mínimo y no por número de carriles: a 390 px dos columnas dejaban «Analítica y
     optimización de conversión» en tres líneas y la flecha pegada al texto. Con 15 rem, la
     segunda columna aparece solo cuando cabe. */
  columns: 15rem;
  column-gap: 1.8rem;
}
.nv-cierre__servicios li { margin: 0; break-inside: avoid; }
.nv-cierre__rotulo {
  font-family: var(--molde-mono, ui-monospace, Consolas, monospace);
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #A8B0BB;
  margin: 0 0 .7rem;
}
.nv-cierre__servicios a {
  align-items: baseline;
  border-bottom: 1px solid #2A2F37;
  color: #FAFBFC;
  display: flex;
  gap: .6rem;
  justify-content: space-between;
  padding: .55rem 0;
  text-decoration: none;
}
.nv-cierre__servicios a:hover,
.nv-cierre__servicios a:focus-visible {
  color: var(--nv-signal-claro, #ff8a86);
  border-bottom-color: var(--nv-signal-claro, #ff8a86);
}
.nv-cierre__servicios .nv-ico { flex: 0 0 auto; }

.nv-cierre__titulo {
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1.2;
  margin: 0 0 .55rem;
  color: #FAFBFC;
}
.nv-cierre__texto {
  color: #D9DDE3;
  margin: 0 0 1.3rem;
}
/* Mismo botón que el resto del sitio: fondo de señal, texto blanco, radio 999 y 48 px de alto,
   no una pieza propia con esquina viva. El hover baja al rojo profundo del kit y se levanta 2 px,
   igual que `.nv-button`: dos primarios con gesto distinto en la misma página son dos sistemas. */
.nv-cierre__accion {
  align-items: center;
  background: var(--molde-senal, #d81820);
  border: 1px solid var(--molde-senal, #d81820);
  border-radius: var(--nv-radius-control, 999px);
  box-sizing: border-box;
  color: var(--nv-white, #fff);
  display: inline-flex;
  font-weight: 700;
  justify-content: center;
  min-height: 48px;
  padding: .75rem 1.5rem;
  text-decoration: none;
  transition: transform 180ms cubic-bezier(.2, .7, .2, 1), background 180ms, border-color 180ms;
}
.nv-cierre__accion:hover,
.nv-cierre__accion:focus-visible {
  background: var(--nv-signal-deep, #8f0f14);
  border-color: var(--nv-signal-deep, #8f0f14);
  color: var(--nv-white, #fff);
  transform: translateY(-2px);
}

@media (max-width: 640px) {
  .nv-toc__lista { grid-template-columns: 1fr; }
  .nv-cierre { padding: 1.5rem 1.25rem 1.6rem; }
  .nv-cierre__accion { display: block; text-align: center; }
}

@media (prefers-reduced-motion: no-preference) {
  .nv-toc__lista a { transition: border-color .15s ease; }
}

/* Área táctil de 24 px (WCAG 2.5.8, AA). Medido el 10-09-2026: los enlaces del índice que ocupan
   una sola línea daban 23 px de alto y «Más sobre el autor» y la etiqueta del tema, 20. Se gana
   con relleno propio, que agranda el objetivo de verdad; ampliarlo con un `::after` en negativo
   —el apaño clásico— se come la separación con el enlace de al lado y le roba toques, que es peor
   que el objetivo pequeño. */
.nv-toc__lista a { padding-block: 2px; }
.nv-entry-footer a,
.nv-post-navigation a,
.nv-autor a {
  display: inline-block;
  padding-block: 3px;
}

/* El pie de la entrada, compactado. Medido el 10-09-2026 a 1440 px: entre la banda de cierre y el
   filete de «Temas» había 129,6 px de relleno del contenedor, y entre «Temas» —una sola línea, con
   un tema— y la navegación anterior/siguiente otros 168 (72 de relleno + 72 de margen + 24). Casi
   300 px de vacío para dos renglones: la entrada parecía terminarse dos veces.
   Los valores generales del tema están pensados para una página que acaba en prosa; aquí el
   contenido acaba en una banda de color a todo el ancho, que ya cierra por sí sola. Se tocan solo
   en esta hoja, que se sirve únicamente en entradas y archivos del blog. */
.nv-entry-content { padding-block-end: 2.4rem; }
.nv-entry-footer { padding-block: 1.5rem 2rem; }
.nv-post-navigation { margin-block: 2rem; }

/* Apartados numerados, como en la maqueta 07: el numeral en rojo con su filete, encima del
   titular. El número lo pone el PHP en `data-nv-orden` para que sea EL MISMO que el del índice.
   Solo se pintan cuando hay índice: sin él, numerar apartados no ayuda a orientarse, decora. */
.nv-entrada-compuesta:has(> .nv-toc) .nv-entrada__texto h2[data-nv-orden] {
  margin-top: 3.2rem;
}
.nv-entrada-compuesta:has(> .nv-toc) .nv-entrada__texto h2[data-nv-orden]::before {
  content: attr(data-nv-orden);
  display: block;
  width: fit-content;
  font-family: var(--molde-mono, ui-monospace, "IBM Plex Mono", Consolas, monospace);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .12em;
  color: var(--molde-senal, #E74235);
  margin-bottom: .55rem;

  /* El filete rojo que la maqueta pone al lado del número. Va DENTRO de este pseudo, como fondo:
     partir el h2 en una rejilla para colocarlo aparte convertiría su texto en ítems anónimos y
     repartiría el titular en filas — es el defecto que caza G-frase-partida, y ya ha pasado dos
     veces en esta misma web. */
  padding-inline-end: 3rem;
  background-image: linear-gradient(var(--molde-senal, #E74235), var(--molde-senal, #E74235));
  background-size: 2rem 2px;
  background-position: right center;
  background-repeat: no-repeat;
}

/* Los dos rótulos del molde llevan icono delante y el texto NO se pega a él: sin esta regla el
   trazo del documento tocaba la «E» de «EN RESUMEN». Se alinean por la línea base del texto, que
   es lo que hace `vertical-align` de `.nv-ico`; el flex los descolocaría. */
.nv-toc__titulo > .nv-ico,
.nv-resumen__rotulo > .nv-ico {
  margin-inline-end: .5em;
  font-size: 1.25em;
}

/* Respuesta directa: el pasaje citable, lo primero que se lee */
.nv-resumen {
  border-left: 3px solid var(--molde-senal, #E74235);
  background: #F1F3F5;
  padding: 1.1rem 1.4rem 1.2rem;
  margin: 0 0 2rem;
}
.nv-resumen__rotulo {
  font-family: var(--molde-mono, ui-monospace, Consolas, monospace);
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--molde-gris, #5A6472);
  margin: 0 0 .5rem;
}
.nv-resumen__texto {
  margin: 0;
  font-size: 1.06em;
  line-height: 1.55;
  color: var(--molde-tinta, #0B0D10);
}

/* Tablas y código anchos: scrollean dentro de su caja; el cuerpo nunca de lado */
/* 🔴 A 390 px la tabla se VE rebanada por el borde derecho («Componentes, moneda e in…») y no
   había ni un indicio de que se pudiera desplazar: el contenido era alcanzable y el gate daba
   verde, pero el ojo lee una tabla cortada. El degradado de la derecha desaparece al llegar al
   final —`animation-timeline: scroll(self inline)`— y donde eso no exista se queda fijo, que
   sigue siendo mejor que nada. */
/* 🔴 La máscara va también en `.nv-table-scroll`, y ESA es la clase que llevan las tablas de
   verdad: el molde solo envuelve en `.nv-desbordable` lo que NO viene ya envuelto, y las tablas
   del contenido traen `nv-table-scroll` escrita. Puse la máscara solo en la otra y a 390 la tabla
   se seguía viendo cortada a media palabra sin ningún indicio — el verificador lo cazó midiendo
   `maskImage: none` sobre el envoltorio real. Arreglar la clase equivocada es no arreglar nada. */
.nv-desbordable,
.nv-table-scroll {
  overflow-x: auto;
  max-width: 100%;
  margin: 1.4rem 0;
  -webkit-overflow-scrolling: touch;
  mask-image: linear-gradient(to right, #000 calc(100% - 3rem), transparent 100%);
}

@supports (animation-timeline: scroll()) {
  .nv-desbordable,
  .nv-table-scroll {
    animation: nv-fin-carril linear both;
    animation-timeline: scroll(self inline);
  }

  @keyframes nv-fin-carril {
    to { mask-image: linear-gradient(to right, #000 100%, #000 100%); }
  }
}

/* Sin desplazamiento posible no hay nada que anunciar: la máscara se retira. */
@media (min-width: 40rem) {
  .nv-desbordable,
  .nv-table-scroll { mask-image: none; }
}

/* La fórmula del artículo (`CPL = coste atribuible del periodo / leads…`) se partía en DOS cajas
   grises, dejando «periodo» solo en la segunda línea con su propio recuadro. Un `code` de fórmula
   no se parte: si no cabe, se desplaza. */
.nv-entrada__texto code {
  display: inline-block;
  max-width: 100%;
  overflow-x: auto;
  vertical-align: bottom;
  white-space: nowrap;
}
.nv-desbordable > table,
.nv-desbordable > figure { margin: 0; min-width: 30rem; }
.nv-desbordable > pre { margin: 0; }
.nv-desbordable:focus-visible { outline: 2px solid var(--molde-accion, #B32418); outline-offset: 2px; }

/* Por debajo de 40 rem, la caja que cabe entera también se queda sin degradado: lo mide blog-mosaico.js
   (`data-nv-cabe`). Anunciaba un desplazamiento que no existe y difuminaba el borde de la URL de ejemplo
   de gobernanza-utm a 390 px (30-09-2026). Va detrás de las dos copias de la regla de la máscara y con
   atributo + clase, así que gana sin `!important`. */
.nv-desbordable[data-nv-cabe],
.nv-table-scroll[data-nv-cabe] {
  animation: none;
  mask-image: none;
}

/* 🔴🔴 LA TABLA SE APILA EN MÓVIL. No se desplaza: se apila.
   Medido el 11-09-2026 en /web-b2b-compra-compleja/ a 390 px: la tabla de TRES columnas enseñaba
   DOS. La tercera —«Contenido útil», justo la que aporta— quedaba entera fuera del carril, «¿Qué
   puede salir mal?» se cortaba contra el borde y no había ni un indicio de que aquello se
   desplazara. El lector de móvil no se pierde una columna: se pierde que existe. Y `G-corte` dio
   LIMPIO tres veces, porque excusa los carriles con scroll propio — la excusa tapaba el defecto.

   El scroll horizontal es un apaño que exige un gesto que nadie sabe que puede hacer. Apilar en
   fichas enseña TODO sin gesto ninguno: cada celda con el nombre de su columna, que el PHP saca
   del `<th>` que la tabla ya tenía. Ni una palabra escrita ni recortada.
   Por encima de 767 px la tabla sigue siendo una tabla, que es donde una tabla se lee mejor.

   🔴 Y los DOS envoltorios: `.nv-desbordable` es el que pone el molde, pero las tablas del
   catálogo llegan ya envueltas en `.nv-table-scroll` desde el contenido — y el molde NO las vuelve
   a envolver a propósito. Escrito solo contra `.nv-desbordable`, este bloque se servía entero y no
   enganchaba en ninguna tabla real. Un selector que no engancha no da error. */
@media (max-width: 47.99em) {
  /* 🔴🔴 Y SIN LA MÁSCARA «DESLIZA». Al apilar ya no hay nada que desplazar, pero la máscara del
     carril seguía puesta: su reset vive en `min-width: 40rem` y este apilado en
     `max-width: 47.99em`, así que entre 0 y 640 px actuaban A LA VEZ. Resultado, medido por el
     verificador a 390: las fichas perdían el borde derecho y la última palabra de cada línea larga
     se desvanecía a media tinta, por debajo de AA. Se corrigió el scroll y quedó el aviso de
     scroll pintado encima de un contenido que ya no se desplaza.
     La animación también se anula: con `animation-fill-mode: both` repondría la máscara. */
  :is(.nv-desbordable, .nv-table-scroll):has(> table) {
    animation: none;
    -webkit-mask-image: none;
    mask-image: none;
    overflow-x: visible;
    white-space: normal;
  }

  :is(.nv-desbordable, .nv-table-scroll) > table,
  :is(.nv-desbordable, .nv-table-scroll) > table tbody,
  :is(.nv-desbordable, .nv-table-scroll) > table tr,
  :is(.nv-desbordable, .nv-table-scroll) > table td {
    display: block;
    min-width: 0;
    width: auto;
  }

  /* La fila de encabezados desaparece: su texto vive ya en cada celda. `display:none` aquí es
     correcto —no se pierde información, se ha movido—, al revés que en un texto para lectores. */
  :is(.nv-desbordable, .nv-table-scroll) > table thead { display: none; }

  :is(.nv-desbordable, .nv-table-scroll) > table tr {
    border: 1px solid var(--molde-linea, #C9D0D8);
    border-radius: .5rem;
    margin-block-end: .85rem;
    padding: .35rem .9rem .6rem;
  }

  :is(.nv-desbordable, .nv-table-scroll) > table td {
    border: 0;
    padding: .5rem 0;
  }

  :is(.nv-desbordable, .nv-table-scroll) > table td + td {
    border-block-start: 1px solid var(--molde-linea, #C9D0D8);
  }

  :is(.nv-desbordable, .nv-table-scroll) > table td[data-nv-col]::before {
    content: attr(data-nv-col);
    display: block;
    font-family: var(--molde-mono, ui-monospace, Consolas, monospace);
    font-size: .68rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--molde-gris, #5A6472);
    margin-block-end: .2rem;
  }
}

/* El extracto de la tarjeta llevaba medida propia y quedaba encogido respecto al
   titular, su hermano: la medida la fija la columna, no cada hijo. */
.nv-entry-card__body p { max-width: none; }
.nv-entry-card__media { display: block; line-height: 0; }
.nv-entry-card__media img { width: 100%; height: auto; display: block; border: 1px solid #C9D0D8; }
.nv-entry-card__cluster a { color: #B32418; text-decoration: none; font-weight: 600; }
.nv-entry-card__cluster a:hover { text-decoration: underline; }
@media (min-width: 900px) {
  .nv-entry-card__media { max-width: 220px; }
  .nv-entry-card--con-media { grid-template-columns: auto 220px minmax(0, 1fr) auto !important; }
}
@media (max-width: 899px) {
  .nv-entry-card__media { max-width: 100%; margin-bottom: .9rem; }
}

/* La cabecera de la entrada iba a ancho completo con el subtítulo estrechado a 768 px
   por su cuenta: el titular y su bajada quedaban descuadrados entre sí y respecto al
   cuerpo. La medida se lleva al CONTENEDOR y todos los bloques la comparten. */
@media (min-width: 900px) {
  .nv-entry-header--article {
    max-width: 784px;
    margin-left: auto;
    margin-right: auto;
  }
  .nv-entry-header--article .nv-entry-deck { max-width: none; }
  .nv-entry-media { max-width: 784px; margin-left: auto; margin-right: auto; }
}

/* Entrada en escritorio (08-09-2026): índice arriba a todo el ancho, texto en su medida de
   lectura y cierre en banda. SIN bloques pegados a la derecha.

   Del 07 al 08-09 el lateral llevaba «Del mismo tema» y el CTA en posición sticky. Jesús lo
   rechazó: «esas páginas con índice y bloques a la derecha que se quedan arrastrándose no me
   gustan». Y medido le sobraba razón: en /landing-google-ads/ el lateral acababa hacia los
   1.550 px y el artículo mide 8.107, así que media página quedaba en blanco durante más de
   6.500 px de scroll. El medidor de ancho lo daba por bueno porque el hermano EXISTÍA. */
@media (min-width: 1240px) {
  /* El contenedor del tema acotaba a 784 px: la composición tiene que ocurrir
     por fuera de esa caja, no dentro, o la rejilla parte el texto en dos. */
  /* Estos contenedores traen un ancho fijo del tema: max-width solo no los ensancha.
     🔴 El ancho es el del CONTENEDOR DEL TEMA, no un 1240 suelto: con 1240 la cabecera del
     artículo caía en el eje 100 px mientras su propia miga —que sí usa `.nv-container`— caía en
     58, y el titular salía 42 px a la derecha de la ruta que lo encabeza. El blog y los archivos
     alinean al píxel; solo el artículo no. Medido el 09-09-2026 con el texto, no con la caja. */
  .nv-entry-content, .nv-container--editorial,
  .entry-content, .content-shell--article {
    max-width: min(100% - (2 * var(--nv-gutter, 4rem)), var(--nv-container, 88rem)) !important;
    width: 100% !important;
  }
  .nv-entry-header--article, .entry__header {
    max-width: min(100% - (2 * var(--nv-gutter, 4rem)), var(--nv-container, 88rem)) !important;
  }

  /* El tema aplica su medida de lectura a los hijos del contenedor, así que la
     rejilla la heredaba y volvía a partirse en 784 px. Aquí se anula: la medida
     la fija la columna de texto, no el envoltorio. */
  .nv-entrada-compuesta {
    max-width: none;
    width: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }
  .nv-entrada-compuesta > * { max-width: none; width: 100%; }

  /* El índice va ARRIBA y a todo el ancho (orden de Jesús, 07-09-2026): es lo primero que se
     lee, no una barra lateral. */
  .nv-entrada-compuesta > .nv-toc {
    border-top: 3px solid var(--molde-tinta, #0B0D10);
    margin: 0 0 2.4rem;
    padding: 1.1rem 0 1.35rem;
  }
  .nv-entrada-compuesta > .nv-toc .nv-toc__lista {
    display: block;
    columns: 20rem;
    column-gap: 2.5rem;
  }
  .nv-entrada-compuesta > .nv-toc .nv-toc__lista li { break-inside: avoid; }

  /* El texto, en su medida. 43rem = 688 px, la misma que las páginas interiores: con Inter
     Tight a 700 px la línea llegaba a 88 caracteres y a 780 px a 96, por encima del límite de
     92. El aire de los lados va DECLARADO en el HTML (data-ancho-deliberado). */
  /* 19,5 px de cuerpo, no 18: con 18 la línea más larga medía 86 caracteres y cinco párrafos
     pasaban de 80, por encima del límite de legibilidad. Se sube la LETRA, no se estrecha la
     columna: los 43 rem son una decisión declarada con `data-ancho-deliberado`, y estrechar la
     caja dejaría más hueco a los lados, que es el defecto contrario. Baja a ~78 car./línea. */
  .nv-entrada-compuesta > .nv-entrada__texto {
    font-size: 1.22rem;
  }

  .nv-entrada-compuesta > .nv-entrada__texto {
    margin-inline: auto;
    max-width: 43rem;
  }
  .nv-entrada-compuesta > .nv-entrada__texto > * { max-width: none; width: 100%; }

  /* 🔴 Resumen e índice COMPARTEN FILA: son la cabecera del artículo y juntos llenan el ancho.
     Sueltos quedaba un escalón —la caja a 688 px sobre un índice de 1.324— y media fila vacía al
     lado del resumen, que es el defecto de siempre. La maqueta 07 pone las dos piezas una junto a
     otra; con el índice arriba (y no lateral, orden del 07-09) esta es su forma.
     Se hace con el grid que ya existe, sin tocar el HTML: todo va a fila completa salvo estos dos.
     Y solo cuando los dos están —un artículo sin índice deja el resumen ancho, no media fila
     vacía—, que es lo que comprueban el `:has` y el hermano adyacente. */
  .nv-entrada-compuesta {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
    column-gap: 3rem;
  }
  .nv-entrada-compuesta > * { grid-column: 1 / -1; }
  .nv-entrada-compuesta > .nv-resumen:has(+ .nv-toc) { grid-column: 1; }
  .nv-entrada-compuesta > .nv-resumen + .nv-toc { grid-column: 2; }

  /* En la fila, el índice se queda sin sus dos filetes: el de arriba lo separaba del resumen que
     tenía encima —ahora lo separa la columna— y el de abajo cerraba una banda de ancho completo;
     compartiendo fila quedaba cortado a media anchura, leyéndose como un resto. El cierre de la
     cabecera lo hace el aire hasta el primer titular. */
  .nv-entrada-compuesta > .nv-resumen + .nv-toc {
    border-top: 0;
    border-bottom: 0;
    padding-top: 0;
  }

  /* El resumen suelto (artículo sin índice) acompaña al texto y comparte su medida. */
  .nv-entrada-compuesta > .nv-resumen:not(:has(+ .nv-toc)) {
    margin-inline: auto;
    max-width: 43rem;
  }

  /* Autor, piezas del mismo tema y cierre, en banda a todo el ancho al final del artículo:
     ahí cumplen la misma función que cumplían al lado, sin acompañar 6.500 px de scroll. */
  .nv-entrada-compuesta > .nv-relacionados,
  .nv-entrada-compuesta > .nv-cierre,
  .nv-entrada-compuesta > .nv-autor {
    position: static;
    margin-top: 2.4rem;
    top: auto;
  }
  /* El autor se lee, así que va en la medida del texto, no en la banda. */
  .nv-entrada-compuesta > .nv-autor {
    margin-inline: auto;
    max-width: 43rem;
  }

  /* Las piezas del mismo tema, en rejilla de fichas. Flex y no grid: con flex-grow, lo que
     sobra en la última fila se reparte y ninguna ficha se queda sola con hueco al lado. */
  .nv-relacionados ul {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0 2.5rem;
  }
  /* Cada ficha con su propio filete ARRIBA: en columna el borde inferior separaba una de otra,
     pero puestas en fila el de la última dejaba una raya suelta bajo la columna más corta. */
  .nv-relacionados li {
    flex: 1 1 17rem;
    border-bottom: 0;
    border-top: 1px solid var(--molde-linea, #C9D0D8);
  }

  /* El cierre, en fila: la llamada a la izquierda y los servicios a la derecha. Antes eran texto
     y botón, y la mitad derecha de la banda quedaba en negro. */
  .nv-entrada-compuesta > .nv-cierre {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    align-items: start;
    column-gap: 3rem;
    row-gap: 1.4rem;
  }
  .nv-entrada-compuesta > .nv-cierre .nv-cierre__titulo { margin-bottom: .35rem; }
  .nv-entrada-compuesta > .nv-cierre .nv-cierre__texto { margin: 0 0 1.3rem; max-width: 32rem; }
  .nv-entrada-compuesta > .nv-cierre .nv-cierre__llamada > p:last-child { margin: 0; }

  /* La bajada del titular, en dos columnas: el ancho se llena sin estirar la línea. */
  .nv-entry-deck, .entry__deck {
    columns: 2;
    column-gap: 56px;
  }

  /* …salvo cuando la cabecera lleva imagen al lado (maqueta 13). Ahí la bajada ya vive en una
     columna de 691 px y partirla en dos carriles de 317 px no llena nada: trocea el párrafo en
     dos bloques desalineados de tres y dos líneas. La regla de arriba se escribió para la
     cabecera SIN imagen, donde la bajada ocupa los 1.325 px enteros, y allí sigue siendo buena.
     Medido el 09-09-2026: `column-count` valía 2 sobre una caja de 691. */
  .nv-entry-header--media .nv-entry-deck {
    columns: auto;
  }
}

/* La caja de autor y el pie del artículo comparten la medida de lectura del texto: sueltos se
   iban a los 1.240 px del contenedor y la línea llegaba a 127 caracteres, muy por encima de 92.
   🥇 Al reescribir el bloque de escritorio el 08-09 me llevé por delante la primera línea de
   este comentario y dejé un «*/» huérfano: stylelint pasó y la regla siguiente quedó muerta.
   El defecto solo salió al MEDIR la entrada. */
@media (min-width: 1240px) {
  .author-box, .sn-autor, .nv-autor,
  .entry__footer, .nv-entry-footer {
    margin-inline: auto;
    max-width: 43rem;
  }
}

/* En móvil, la caja de autor del tema dejaba su texto al 59 % del ancho por el
   hueco del avatar: por debajo de 700 px se apila y el texto ocupa la línea entera. */
@media (max-width: 700px) {
  .author-box, .sn-autor, .nv-autor { display: block; }
  .author-box > *, .sn-autor > *, .nv-autor > * { max-width: none; width: 100%; }
}

/* ── Listas de comprobación ──────────────────────────────────────────────────────────────────
   `.nv-checkmark` NO TENÍA NI UNA REGLA (medido el 09-09-2026): su carácter «□» se pintaba tal
   cual junto a la viñeta del `<ul>`, así que cada línea salía con DOS marcadores, «• □». El
   glifo se oculta —no todas las fuentes lo traen— y la casilla se dibuja con un borde, que
   siempre existe. El `<span>` va `inline-block`, nunca ítem de un flex: dentro de un contenedor
   flex el texto de alrededor se convierte en ítems anónimos y la frase se pinta partida. */
li:has(> .nv-checkmark) {
  list-style: none;
  /* 🔴 Sangría francesa: la SEGUNDA línea de un punto largo caía debajo del marcador, alineada
     con la casilla en vez de con el texto, y la lista perdía su borde izquierdo. Medido el
     11-09-2026 en /meta-ads-b2b/, donde un punto ocupa dos líneas.
     Se hace con `text-indent` negativo y relleno, NO con flex ni grid: un contenedor flex
     convertiría en ítems anónimos los trozos de texto que rodean al `<span>` y pintaría la frase
     repartida en filas — es el defecto que caza G-frase-partida y ya ha pasado dos veces aquí.
     1,5 rem = la casilla (0,95) más su margen (0,55). */
  padding-inline-start: 1.5rem;
  text-indent: -1.5rem;
}

ul:has(> li > .nv-checkmark) {
  padding-inline-start: 0;
}

/* 🥇 La caja va en REM, no en EM: `1em` dentro de un elemento con `font-size: 0` vale CERO, así
   que la casilla se pintaba como un punto rojo de 2 px —el borde— y nada más. Es la misma
   familia que el `<span>` con `width: 66%` que medía 0 por no ser `display: block`: la regla
   estaba servida, aplicada y sin efecto visible. Lo cazó mirar la captura, no el CSS. */
.nv-checkmark {
  block-size: .95rem;
  border: 2px solid var(--molde-senal, #d81820);
  border-radius: 3px;
  display: inline-block;
  font-size: 0;                  /* oculta el «□» del HTML sin tocar el contenido */
  inline-size: .95rem;
  margin-inline-end: .55rem;
  /* `middle` y no `baseline`: con `font-size: 0` el span no tiene línea base propia y la casilla
     caía por debajo del texto. `middle` la centra contra la equis del PADRE, que sí la tiene. */
  vertical-align: middle;
}

/* ── Fichas numeradas — maqueta 13 de Jesús ──────────────────────────────────────────────────
   La enumeración que un párrafo presenta con dos puntos deja de ser una lista con viñetas y pasa
   a ser una rejilla numerada. Se queda DENTRO de la columna de lectura (43 rem): sacarla a todo
   el ancho obligaría a desbordar el contenedor del texto, y un hijo que se sale de su padre es
   justo lo que cazan G-corte y G-visual. El ancho se llena arriba (índice) y abajo (cierre). */
.nv-fichas {
  margin-block: 2.2rem;
}

.nv-fichas__intro {
  margin-block-end: 1rem;
}

.nv-fichas__lista {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(min(11rem, 100%), 1fr));
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Con CUATRO fichas, `auto-fit` da tres columnas y la cuarta se queda sola con dos tercios de
   fila en blanco al lado. Dos columnas reparten 2 + 2. */
.nv-fichas__lista:has(> :nth-child(4)) {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* Con TRES, `auto-fit` da 2 + 1 cuando la caja mide entre 23 y 35 rem (de unos 414 a 606 px de pantalla) y la
   tercera se queda sola con media fila en blanco (registra-ancho del 30-09-2026: 575-576 px en
   estructura-cuenta-google-ads). Por debajo de las tres columnas, una. Las pistas del mosaico son `minmax(0, 1fr)`:
   la contención de ancho no cambia lo que mide la caja. */
.nv-fichas {
  container: nv-fichas / inline-size;
}

@container nv-fichas (max-width: 34.99rem) {
  .nv-fichas__lista:has(> :nth-child(3)):not(:has(> :nth-child(4))) {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Con cinco o siete, las dos columnas dejan la última sola: ocupa la fila entera. */
.nv-fichas__lista:has(> :nth-child(4)) > .nv-fichas__item:last-child:nth-child(odd) {
  grid-column: 1 / -1;
}

/* Tokens del TEMA, no los `--molde-*`: esos no están definidos en ninguna parte del proyecto
   (comprobado el 09-09-2026) y en toda esta hoja acaban resolviéndose por el hex de respaldo. */
.nv-fichas__item {
  border-top: 3px solid var(--nv-ink, #0b0d10);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-inline-size: 0;
  padding-top: 0.9rem;
}

/* Las fichas son `li` y el tema separa cada punto de lista del anterior con 0,45 rem (`li + li`): la primera ficha de
   la fila quedaba 7 px más alta que sus vecinas, con su raya negra fuera de línea (verificador en frío, 02-10-2026;
   medido en coste-por-lead-interpretar: 2036 frente a 2044). En la rejilla el hueco lo pone `gap`. */
.nv-fichas__lista > .nv-fichas__item {
  margin-block-start: 0;
}

.nv-fichas__n {
  color: var(--nv-signal-text, #c3141b);
  font-family: var(--nv-font-mono, ui-monospace, Consolas, monospace);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.06em;
}

.nv-fichas__cuerpo {
  font-size: 0.98rem;
  line-height: 1.5;
}

.nv-fichas__cuerpo > :first-child { margin-block-start: 0; }
.nv-fichas__cuerpo > :last-child { margin-block-end: 0; }

/* La cita, como en la maqueta: serif en cursiva y a mayor cuerpo que el texto. El filete rojo y
   el tamaño ya venían del tema; esto es lo que la distingue de una cita de página. */
.nv-entrada__texto blockquote {
  font-family: var(--nv-font-display, "Playfair Display", georgia, serif);
  font-style: italic;
  line-height: 1.35;
  margin-block: 2rem;
}

.nv-entrada__texto blockquote cite {
  font-style: normal;
}

/* D-017 (11-09-2026): la llamada oscura del final la sustituye la banda roja de la maqueta 07, que
   pinta `single.php` a todo el ancho. Aquí queda la lista de servicios —el lateral de la maqueta,
   retirado el 07-09— en CLARO: dos cierres oscuros seguidos se leerían como uno. */
.nv-cierre--servicios {
  background: var(--nv-surface-soft, #f3f3f3);
  border-radius: var(--nv-radius-panel, 0.625rem);
  color: var(--nv-ink, #0b0d10);
  padding: 1.6rem 1.8rem 1.4rem;
}

.nv-cierre--servicios .nv-cierre__rotulo {
  background: linear-gradient(var(--nv-signal, #d81820), var(--nv-signal, #d81820)) left center / 1.9rem 3px no-repeat;
  color: var(--nv-muted-light, #5b626b);
  font-family: var(--nv-font-rotulo, inherit);
  letter-spacing: 0.16em;
  padding-inline-start: 2.9rem;
}

.nv-cierre--servicios .nv-cierre__servicios a {
  border-bottom-color: var(--nv-filete, #dcdde0);
  color: var(--nv-ink, #0b0d10);
}

.nv-cierre--servicios .nv-cierre__servicios a:hover,
.nv-cierre--servicios .nv-cierre__servicios a:focus-visible {
  border-bottom-color: var(--nv-signal-text, #c3141b);
  color: var(--nv-signal-text, #c3141b);
}

/* La banda de cierre oscura va a una columna por debajo de 48em (app.css) y su párrafo seguía con el tope de 46ch: a
   719 px ocupaba el 72 % con 202 px vacíos al lado (registra-ancho del índice y de la página de autor, 29-09-2026). En
   una columna, a su caja: a 767 px son unos 85 caracteres por línea. Aquí porque esta hoja va en el índice, las entradas,
   las categorías y la página de autor; la banda de las páginas y los proyectos sigue con su regla. */
@media (max-width: 47.99em) {
  .nv-cierre-maqueta__parrafo {
    max-inline-size: none;
  }
}