/* ============================================================================
 * ANGI · Aparato editorial de entradas — andamio y aparato, NADA de marca.
 * Fuente única: tools/kit-maquetacion/motor/articulo.css. No editar en la web.
 *
 * CONTRATO (wiki/playbooks/kit-maquetacion.md):
 *  · Este fichero NO declara ni un token. Consume 8 nombres que la web tiene que
 *    declarar UNA sola vez (en Bricks: variables globales o paleta):
 *      --ink --ink-2 --ink-3 --bg --surface --surface-2 --line --brand
 *    y --on-brand (el texto que va ENCIMA del color de marca). Con `#fff` a
 *    pelo, una web con tema oscuro cuyo --brand aclara se queda sin contraste.
 *    Llevan color de reserva para que un token ausente no deje texto invisible;
 *    la reserva es una red, no una declaración: quien instala VERIFICA que los 8
 *    existen en el HTML servido.
 *  · El espaciado va en LITERAL, de la escala 4·8·12·16·24·32·48·64·96. El kit no
 *    inventa variables: `var(--sp-7)` sin declarar dejó a marinauta secciones con
 *    padding 0 durante meses, invisible en el constructor.
 *  · Puntos de ruptura: SOLO los de Bricks — 991 · 767 · 478. Ninguno más.
 * ==========================================================================*/

/* Ancla bajo cabecera pegajosa, sin JS: los #id de los H2/H3 y de «Lo esencial». */
.qf-art-col .brxe-post-content h2[id], .qf-art-col .brxe-post-content h3[id] { scroll-margin-top: 96px; }

/* --- Migas ---------------------------------------------------------------- */
.qf-art-bc { display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  font-size: .8125rem; color: var(--ink-3, #6c777f); margin: 0 0 16px; }
.qf-art-bc a { color: var(--ink-3, #6c777f); text-decoration: none; }
.qf-art-bc a:hover { color: var(--brand, #1f45d6); text-decoration: underline; }
.qf-art-bc__sep { opacity: .55; }
.qf-art-bc__actual { color: var(--ink-2, #4b555c); }

/* --- Hero editorial ------------------------------------------------------- */
/* Una sola rejilla para las dos variantes: con media (si hay foto REAL) y sin
   ella. Sin foto NO se centra el bloque: la columna de texto se queda a la
   izquierda y el hero respira por la derecha — el título centrado con todo
   debajo es la firma visual que la rúbrica anti-slop prohíbe. */
.qf-art-hero { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px;
  align-items: start; }
/* Dos columnas SOLO si la entrada trae foto de verdad: lo decide el propio
   contenido con `:has()`, no una clase que alguien tenga que acordarse de poner. */
.qf-art-hero:has(.qf-art-hero__media) { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 48px; }
.qf-art-hero__texto { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.qf-art-hero__texto > * { margin: 0; }
.qf-art-hero__media { position: relative; aspect-ratio: 16 / 10; overflow: hidden;
  border-radius: 8px; background: var(--surface-2, #e9edef); }
.qf-art-hero__media img { width: 100%; height: 100%; object-fit: cover; display: block; }

.qf-art-eyebrow { display: inline-flex; align-items: center; gap: 8px; width: fit-content;
  font-size: .75rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--brand, #1f45d6); text-decoration: none; }
.qf-art-eyebrow svg { width: 16px; height: 16px; }
.qf-art-eyebrow:hover span { text-decoration: underline; }

/* El H1 se dimensiona AQUÍ, no en el ajuste del elemento de Bricks: escribirlo
   en el elemento es lo que obliga a N ediciones para cambiar un tamaño (defecto
   medido en marinauta, donde los 9 enlaces del menú repiten los mismos 5 ajustes). */
.qf-art-hero__texto h1 { font-size: clamp(2rem, 1.4rem + 2.6vw, 2.875rem);
  line-height: 1.12; letter-spacing: -.01em; text-wrap: balance; color: var(--ink, #171c20); }

.qf-art-lead { font-size: 1.25rem; line-height: 1.55; color: var(--ink-2, #4b555c);
  max-width: 62ch; }

.qf-art-infobar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px;
  font-size: .8125rem; color: var(--ink-3, #6c777f);
  padding-top: 16px; border-top: 1px solid var(--line, #d4dade); }
.qf-art-avatar img { border-radius: 50%; display: block; }
.qf-art-infobar__autor { font-weight: 600; color: var(--ink-2, #4b555c); }
.qf-art-infobar__act::before { content: "·"; margin-right: 16px; opacity: .5; }

/* --- «Lo esencial» -------------------------------------------------------- */
.qf-art-ke { border: 1px solid var(--line, #d4dade); border-radius: 8px;
  background: var(--surface, #fff); padding: 24px; }
.qf-art-ke__cab { font-size: 1.0625rem; margin: 0 0 16px; color: var(--ink, #171c20); }
.qf-art-ke__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.qf-art-ke__item a { display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: baseline; gap: 12px; padding: 12px 8px; border-radius: 6px;
  text-decoration: none; color: var(--ink, #171c20); }
.qf-art-ke__item a:hover { background: var(--surface-2, #e9edef); }
.qf-art-ke__num { font-variant-numeric: tabular-nums; font-weight: 700; font-size: .8125rem;
  color: var(--brand, #1f45d6); }
.qf-art-ke__texto { display: flex; flex-direction: column; gap: 4px; }
.qf-art-ke__titulo { font-weight: 600; }
.qf-art-ke__desc { font-size: .9375rem; color: var(--ink-2, #4b555c); }
.qf-art-ke__flecha { width: 16px; height: 16px; color: var(--ink-3, #6c777f); align-self: center; }

/* --- Cuerpo: rail + columna de lectura ------------------------------------ */
.qf-art-cuerpo { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 48px;
  align-items: start; }
/* El sticky viaja solo si su CELDA es más alta que él. Bricks mete `block`
   envolventes entre la rejilla y el shortcode, así que el stretch tiene que
   propagarse por todos: si la celda mide lo que el rail, no hay recorrido.
   (Lección pagada en marinauta.) */
.qf-art-cuerpo > *, .qf-art-cuerpo > * > * { align-self: stretch; min-width: 0; }
.qf-art-rail { position: sticky; top: 96px; display: flex; flex-direction: column; gap: 16px;
  max-height: calc(100vh - 96px - 24px); overflow-y: auto; }
.qf-art-lectura { display: flex; align-items: center; gap: 8px; font-size: .8125rem;
  color: var(--ink-3, #6c777f); }
.qf-art-lectura__icono { width: 15px; height: 15px; }
.qf-art-toc__cab { display: block; font-size: .6875rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-3, #6c777f); margin-bottom: 8px; }
.qf-art-toc__lista, .qf-art-toc__sub { list-style: none; margin: 0; padding: 0; }
.qf-art-toc__sub { margin: 4px 0 4px 12px; }
.qf-art-toc__link { display: block; padding: 4px 0 4px 12px; font-size: .875rem; line-height: 1.4;
  color: var(--ink-2, #4b555c); text-decoration: none; border-left: 2px solid var(--line, #d4dade); }
.qf-art-toc__link:hover { color: var(--ink, #171c20); border-left-color: var(--ink-3, #6c777f); }
.qf-art-toc__link--sub { font-size: .8125rem; color: var(--ink-3, #6c777f); }
.qf-art-toc__link.is-activo { color: var(--brand, #1f45d6); border-left-color: var(--brand, #1f45d6); font-weight: 600; }

/* Barra de progreso: la inyecta el JS dentro del rail (sin JS no se pinta). */
.qf-art-progreso { height: 3px; border-radius: 999px; background: var(--line, #d4dade); overflow: hidden; }
.qf-art-progreso span { display: block; height: 100%; width: 0; background: var(--brand, #1f45d6); }

/* Columna de lectura: el post-content y el pie del artículo.
   `align-items: stretch` NO es decorativo: los `block` de Bricks vienen con
   `align-items: flex-start`, así que un hijo sin ancho propio se encoge hasta su
   contenido. Medido en la ficha de un robot: el SVG de alturas salía a 15 px de
   ancho y su texto a 0,5 px — invisible, y el dibujo entero inservible en el
   teléfono. Lo mismo vale para el lateral. */
.qf-art-col, .qf-art-lado, .qf-art-hero__texto { align-items: stretch; }
.qf-art-col { display: flex; flex-direction: column; gap: 32px; min-width: 0; }
/* Un diagrama o una imagen dentro de la columna usan el ancho, no su tamaño
   intrínseco; y nunca desbordan. */
.qf-art-col svg, .qf-art-col figure { max-width: 100%; }
.qf-art-col > figure { width: 100%; }
.qf-art-col figure svg { width: 100%; height: auto; }

/* --- CONTRATO DE PROSA ----------------------------------------------------
 * Lo que hace que el cuerpo tenga ritmo aunque lo escriba el editor de WP.
 * Va anclado a la COLUMNA del kit (`.qf-art-col`) a propósito: así gana por
 * especificidad y no por orden de carga, y no pisa lo que la web tenga escrito
 * para sus otras plantillas (fichas, páginas), que el kit no toca.
 * La medida de lectura va en los HIJOS, no en el contenedor: así una tabla o
 * una imagen usan la columna entera en vez de quedarse en 720 px y desplazarse
 * con espacio de sobra al lado (defecto medido en marinauta).
 * ------------------------------------------------------------------------*/
.qf-art-col .brxe-post-content { font-size: 1.125rem; line-height: 1.7; color: var(--ink, #171c20); }
.qf-art-col .brxe-post-content > * { max-width: 72ch; margin: 0 0 24px; }
.qf-art-col .brxe-post-content > h2 { max-width: 60ch; font-size: 1.75rem; line-height: 1.25;
  margin: 64px 0 16px; color: var(--ink, #171c20); }
.qf-art-col .brxe-post-content > h3 { max-width: 60ch; font-size: 1.375rem; line-height: 1.3;
  margin: 48px 0 12px; color: var(--ink, #171c20); }
.qf-art-col .brxe-post-content > h2:first-child, .qf-art-col .brxe-post-content > h3:first-child { margin-top: 0; }
.qf-art-col .brxe-post-content > ul, .qf-art-col .brxe-post-content > ol { padding-left: 24px; }
.qf-art-col .brxe-post-content > ul li, .qf-art-col .brxe-post-content > ol li { margin-bottom: 8px; }
.qf-art-col .brxe-post-content > blockquote { border-left: 3px solid var(--brand, #1f45d6);
  padding: 4px 0 4px 24px; margin-block: 32px; color: var(--ink-2, #4b555c); }
.qf-art-col .brxe-post-content a { color: var(--brand, #1f45d6); text-underline-offset: 2px; }
.qf-art-col .brxe-post-content > .qf-art-tablewrap { max-width: none; overflow-x: auto; }
.qf-art-col .brxe-post-content table { border-collapse: collapse; width: 100%; font-size: .9375rem; }
.qf-art-col .brxe-post-content th, .qf-art-col .brxe-post-content td { padding: 10px 12px; text-align: left;
  border-top: 1px solid var(--line, #d4dade); vertical-align: top; }
.qf-art-col .brxe-post-content thead th { border-top: 0; border-bottom: 2px solid var(--line, #d4dade);
  font-size: .8125rem; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-2, #4b555c); }
.qf-art-col .brxe-post-content td { font-variant-numeric: tabular-nums; }
.qf-art-col .brxe-post-content img { height: auto; border-radius: 8px; }

/* --- Pie del artículo ----------------------------------------------------- */
.qf-art-pie { display: flex; flex-wrap: wrap; align-items: center; gap: 16px;
  margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--line, #d4dade);
  font-size: .875rem; color: var(--ink-3, #6c777f); }
.qf-art-chip { display: inline-flex; align-items: center; gap: 8px; padding: 4px 12px;
  border: 1px solid var(--line, #d4dade); border-radius: 999px; text-decoration: none;
  color: var(--ink-2, #4b555c); font-size: .8125rem; }
.qf-art-chip svg { width: 15px; height: 15px; }
.qf-art-chip:hover { border-color: var(--brand, #1f45d6); color: var(--brand, #1f45d6); }

/* --- Anterior / Siguiente -------------------------------------------------- */
.qf-art-pn { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.qf-art-pn__tarjeta { display: flex; flex-direction: column; gap: 8px; padding: 16px;
  border: 1px solid var(--line, #d4dade); border-radius: 8px; text-decoration: none;
  color: var(--ink, #171c20); background: var(--surface, #fff); }
.qf-art-pn__tarjeta:hover { border-color: var(--brand, #1f45d6); }
.qf-art-pn__tarjeta--next { text-align: right; }
.qf-art-pn__dir { display: inline-flex; align-items: center; gap: 4px; font-size: .75rem;
  font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3, #6c777f); }
.qf-art-pn__tarjeta--next .qf-art-pn__dir { justify-content: flex-end; }
.qf-art-pn__dir svg { width: 14px; height: 14px; }
.qf-art-pn__titulo { font-weight: 600; line-height: 1.35; }
.qf-art-pn__hueco { display: block; }

/* --- «Sigue leyendo» ------------------------------------------------------- */
.qf-art-siguientes__cab { font-size: 1.25rem; margin: 0 0 24px; color: var(--ink, #171c20); }
.qf-art-tarjetas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.qf-art-tarjeta { display: flex; flex-direction: column; gap: 12px; text-decoration: none;
  color: var(--ink, #171c20); }
.qf-art-tarjeta__media { display: block; aspect-ratio: 16 / 9; overflow: hidden;
  border-radius: 8px; background: var(--surface-2, #e9edef); }
.qf-art-tarjeta__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.qf-art-tarjeta__cuerpo { display: flex; flex-direction: column; gap: 4px; }
.qf-art-tarjeta__eyebrow { font-size: .6875rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-3, #6c777f); }
.qf-art-tarjeta__titulo { font-weight: 600; line-height: 1.35; }
.qf-art-tarjeta:hover .qf-art-tarjeta__titulo { color: var(--brand, #1f45d6); }
.qf-art-tarjeta__desc { font-size: .9375rem; color: var(--ink-2, #4b555c); line-height: 1.5; }

/* --- Secciones que se apagan solas ----------------------------------------
 * Una pieza del aparato puede no tener nada que pintar (una entrada sin «Lo
 * esencial», un silo con una sola entrada). Sin esto, su sección seguiría
 * gastando su padding: una banda vacía en mitad de la página. Lo resuelve el
 * CSS y no el PHP porque quien pone el padding es la sección de Bricks.
 * ------------------------------------------------------------------------*/
.qf-art-sec-ke:not(:has(.qf-art-ke)),
.qf-art-sec-pn:not(:has(.qf-art-pn)),
.qf-art-sec-faq:not(:has(.qf-art-faq)),
.qf-art-sec-sg:not(:has(.qf-art-siguientes)):not(:has(.qf-art-listado)) { display: none; }

/* --- Compartir (dentro de infobar y pie) ----------------------------------- */
.qf-art-share { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; }
.qf-art-share__btn { position: relative; display: inline-flex; align-items: center;
  justify-content: center; width: 34px; height: 34px; border-radius: 999px; padding: 0;
  border: 1px solid var(--line, #d4dade); background: var(--surface, #fff); cursor: pointer;
  color: var(--ink-2, #4b555c); text-decoration: none; }
.qf-art-share__btn:hover { border-color: var(--brand, #1f45d6); color: var(--brand, #1f45d6); }
.qf-art-share__btn svg { width: 16px; height: 16px; }
/* El botón de copiar lleva DOS iconos superpuestos: enlace y visto. */
.qf-art-copiar svg:nth-of-type(2), .qf-art-copiar__ok { display: none; }
.qf-art-copiar.is-ok svg:nth-of-type(1) { display: none; }
.qf-art-copiar.is-ok svg:nth-of-type(2) { display: block; }
.qf-art-copiar.is-ok { color: var(--brand, #1f45d6); border-color: var(--brand, #1f45d6); }

/* --- «Lee también» dentro del cuerpo --------------------------------------- */
.qf-art-lt { max-width: 72ch; margin: 32px 0; padding: 16px; border-radius: 8px;
  background: var(--surface-2, #e9edef); }
/* --ink-2 y no --ink-3: sobre --surface-2 el gris claro se queda en 3,89:1 y no
   llega a AA (medido con tools/revisar_maqueta.py en robotsasistentes). */
.qf-art-lt__label { display: block; font-size: .6875rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-2, #4b555c); margin-bottom: 8px; }
.qf-art-lt__tarjeta { display: flex; align-items: center; gap: 16px; text-decoration: none;
  color: var(--ink, #171c20); font-size: 1rem; line-height: 1.35; }
.qf-art-lt__media { flex: 0 0 100px; }
.qf-art-lt__media img { width: 100px; height: 60px; object-fit: cover; border-radius: 6px; display: block; }
.qf-art-lt__titulo { font-weight: 600; }
.qf-art-lt__tarjeta:hover .qf-art-lt__titulo { color: var(--brand, #1f45d6); }

/* --- Tarjeta flotante «A continuación» ------------------------------------- */
.qf-art-upnext { position: fixed; right: 24px; bottom: 24px; z-index: 998; display: flex;
  align-items: center; gap: 8px; max-width: 340px; padding: 12px; border-radius: 10px;
  border: 1px solid var(--line, #d4dade); background: var(--surface, #fff);
  box-shadow: 0 1px 3px rgba(0,0,0,.08), 0 4px 12px rgba(0,0,0,.05);
  opacity: 0; transform: translateY(8px); transition: opacity .3s, transform .3s; }
.qf-art-upnext.is-visible { opacity: 1; transform: none; }
.qf-art-upnext__link { display: flex; align-items: center; gap: 12px; text-decoration: none;
  color: var(--ink, #171c20); min-width: 0; }
.qf-art-upnext__media img { width: 60px; height: 40px; object-fit: cover; border-radius: 6px; display: block; }
.qf-art-upnext__cuerpo { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.qf-art-upnext__label { font-size: .6875rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-3, #6c777f); }
.qf-art-upnext__titulo { font-size: .9375rem; font-weight: 600; line-height: 1.3; }
.qf-art-upnext__cerrar { flex: 0 0 auto; align-self: flex-start; width: 26px; height: 26px;
  display: inline-flex; align-items: center; justify-content: center; padding: 0; cursor: pointer;
  border: 0; background: transparent; color: var(--ink-3, #6c777f); border-radius: 999px; }
.qf-art-upnext__cerrar:hover { background: var(--surface-2, #e9edef); color: var(--ink, #171c20); }
.qf-art-upnext__cerrar svg { width: 15px; height: 15px; }

/* --- Barra de progreso móvil (fija arriba; el rail no existe por debajo de 991) */
.qf-art-mprogreso { position: fixed; inset: 0 0 auto 0; height: 3px; z-index: 999;
  background: transparent; display: none; }
.qf-art-mprogreso span { display: block; height: 100%; width: 0; background: var(--brand, #1f45d6); }

/* ==========================================================================
 * Puntos de ruptura de Bricks. No hay ninguno más en todo el kit.
 * ========================================================================*/

/* Quien pide menos movimiento no recibe la transición de la tarjeta flotante. */

/* ==========================================================================
 * SUPERFICIES (parte 20) — piezas que valen para cualquier página
 * ========================================================================*/

/* --- Anatomía de la ficha: datos + lateral --------------------------------- */
.qf-art-ficha { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 48px;
  align-items: start; }
.qf-art-ficha > *, .qf-art-ficha > * > * { min-width: 0; }
.qf-art-lado { display: flex; flex-direction: column; gap: 24px; position: sticky; top: 96px; }

/* --- Sello de dato --------------------------------------------------------- */
.qf-art-sello { display: inline-flex; align-items: center; gap: 8px; padding: 4px 12px;
  border-radius: 999px; font-size: .8125rem; font-weight: 600; width: fit-content;
  background: var(--surface-2, #e9edef); color: var(--ink-2, #4b555c); }
.qf-art-sello__icono { width: 15px; height: 15px; }

/* --- Listado de tarjetas --------------------------------------------------- */
.qf-art-listado { display: flex; flex-direction: column; gap: 24px; }

/* --- FAQ (details nativo: cero JS) ---------------------------------------- */
.qf-art-faq { display: flex; flex-direction: column; gap: 0; }
.qf-art-faq__cab { font-size: 1.5rem; margin: 0 0 16px; color: var(--ink, #171c20); }
.qf-art-faq__item { border-top: 1px solid var(--line, #d4dade); }
.qf-art-faq__item:last-of-type { border-bottom: 1px solid var(--line, #d4dade); }
.qf-art-faq__item summary { cursor: pointer; padding: 16px 32px 16px 0; position: relative;
  font-weight: 600; line-height: 1.4; list-style: none; }
.qf-art-faq__item summary::-webkit-details-marker { display: none; }
/* La flecha es un pseudo-elemento y no un icono: una FAQ de 12 preguntas no
   tiene por qué traerse 12 SVG. */
.qf-art-faq__item summary::after { content: ""; position: absolute; right: 8px; top: 22px;
  width: 8px; height: 8px; border-right: 2px solid var(--ink-3, #6c777f);
  border-bottom: 2px solid var(--ink-3, #6c777f); transform: rotate(45deg); transition: transform .2s; }
.qf-art-faq__item[open] summary::after { transform: rotate(-135deg); }
.qf-art-faq__r { padding: 0 0 16px; color: var(--ink-2, #4b555c); max-width: 72ch; }
.qf-art-faq__r > *:first-child { margin-top: 0; }

/* --- CTA ------------------------------------------------------------------- */
/* Una sola acción primaria, y el bloque no compite con el contenido: el tono
   «suave» es el de la casa; «fuerte» solo para el cierre de una superficie. */
.qf-art-cta { display: flex; flex-direction: column; align-items: flex-start; gap: 16px;
  padding: 32px; border-radius: 10px; background: var(--surface-2, #e9edef); }
.qf-art-cta--fuerte { background: var(--brand, #1f45d6); color: var(--on-brand, #fff); }
.qf-art-cta__titulo { margin: 0; font-size: 1.5rem; line-height: 1.25; max-width: 30ch; }
.qf-art-cta__texto { margin: 0; max-width: 60ch; color: var(--ink-2, #4b555c); }
.qf-art-cta--fuerte .qf-art-cta__titulo, .qf-art-cta--fuerte .qf-art-cta__texto { color: var(--on-brand, #fff); }
.qf-art-cta__boton { display: inline-flex; align-items: center; min-height: 44px; padding: 0 24px;
  border-radius: 6px; background: var(--brand, #1f45d6); color: var(--on-brand, #fff); font-weight: 600;
  text-decoration: none; }
.qf-art-cta--fuerte .qf-art-cta__boton { background: var(--on-brand, #fff); color: var(--brand, #1f45d6); }

/* ==========================================================================
 * CHROME (parte 30) — cabecera y pie del sitio
 * ========================================================================*/
.qf-art-marca { display: inline-flex; align-items: center; gap: 8px; text-decoration: none;
  color: var(--ink, #171c20); font-weight: 700; font-size: 1.15rem; }
.qf-art-marca__tld { color: var(--brand, #1f45d6); }

.qf-art-nav__lista { display: flex; align-items: center; gap: 4px; }
.qf-art-nav__enlace { display: inline-flex; align-items: center; min-height: 40px; padding: 0 12px;
  border-radius: 6px; color: var(--ink-2, #4b555c); text-decoration: none; font-weight: 600;
  font-size: .95rem; white-space: nowrap; }
.qf-art-nav__enlace:hover { background: var(--surface-2, #e9edef); color: var(--ink, #171c20); }
.qf-art-nav__enlace.is-actual { color: var(--ink, #171c20); box-shadow: inset 0 -2px 0 var(--brand, #1f45d6); }
.qf-art-nav__cta { display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px;
  border-radius: 6px; background: var(--brand, #1f45d6); color: var(--on-brand, #fff); font-weight: 600;
  text-decoration: none; white-space: nowrap; }

.qf-art-pies { display: flex; flex-direction: column; gap: 24px; }
.qf-art-pies__cols { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 24px; }
.qf-art-pies__col { display: flex; flex-direction: column; gap: 8px; }
.qf-art-pies__col--sobre p { margin: 0; max-width: 40ch; color: var(--ink-2, #4b555c); }
.qf-art-pies__cab { font-size: .6875rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-3, #6c777f); }
.qf-art-pies__col a { color: var(--ink-2, #4b555c); text-decoration: none; min-height: 32px;
  display: inline-flex; align-items: center; }
.qf-art-pies__col a:hover { color: var(--brand, #1f45d6); }
.qf-art-pies__cierre { display: flex; flex-direction: column; gap: 8px; padding-top: 24px;
  border-top: 1px solid var(--line, #d4dade); font-size: .85rem; color: var(--ink-3, #6c777f); }
.qf-art-pies__nota, .qf-art-pies__cr { margin: 0; }

/* --- La sección de cabecera (el andamio; la marca y la nav van arriba) ------ */
.qf-art-cabecera { background: var(--surface, #fff); border-bottom: 1px solid var(--line, #d4dade); }
.qf-art-pie-sitio { border-top: 1px solid var(--line, #d4dade); }


/* --- El bucle: listado de un archivo o de una búsqueda ---------------------- */
.qf-art-vacio { color: var(--ink-2, #4b555c); margin: 0; }
.qf-art-paginas { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 32px; }
.qf-art-paginas .page-numbers { display: inline-flex; align-items: center; justify-content: center;
  min-width: 40px; min-height: 40px; padding: 0 12px; border-radius: 6px;
  border: 1px solid var(--line, #d4dade); color: var(--ink-2, #4b555c); text-decoration: none; }
.qf-art-paginas .page-numbers:hover { border-color: var(--brand, #1f45d6); color: var(--brand, #1f45d6); }
.qf-art-paginas .page-numbers.current { background: var(--brand, #1f45d6); border-color: var(--brand, #1f45d6); color: var(--on-brand, #fff); }

/* Piezas del chrome que el test de coherencia CSS↔marcado echó en falta. */
.qf-art-marca__logo { display: block; width: auto; }
.qf-art-marca__nombre { line-height: 1.1; }
/* La fila de navegación se desliza SIEMPRE que no quepa, no solo en el móvil:
   con seis enlaces y un botón, a 768 tampoco cabía y el desbordamiento se lo
   comía la página entera. `min-width:0` es lo que permite encogerse dentro del
   flex de la cabecera; sin él, `overflow` no llega a actuar. */
.qf-art-nav { display: flex; align-items: center; min-width: 0; overflow-x: auto;
  scrollbar-width: none; }
.qf-art-nav::-webkit-scrollbar { display: none; }
/* La cabecera deja caer la nav a una segunda línea antes que recortarla. */
.qf-art-cabecera > .brxe-container { flex-wrap: wrap; row-gap: 8px; }
.qf-art-nav--desplegable > .qf-art-nav__boton { display: none; }

/* ==========================================================================
 * PUNTOS DE RUPTURA — TODOS los @media del kit viven aquí, al FINAL.
 * No es orden por gusto: una regla base escrita DESPUÉS de su media query la
 * anula (misma especificidad, gana la última). Pasó con la rejilla de la ficha:
 * el móvil se quedó con las dos columnas, la de lectura midió 7 px y el SVG de
 * alturas salió a 15 px. Hay un test que lo impide: `tools/tests/test_kit_articulo.py`.
 * ========================================================================*/
@media (max-width: 991px) {
  .qf-art-cuerpo { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .qf-art-ficha { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .qf-art-lado { position: static; }
  .qf-art-rail { position: static; max-height: none; overflow: visible;
    padding-bottom: 24px; border-bottom: 1px solid var(--line, #d4dade); }
  .qf-art-mprogreso { display: block; }
  .qf-art-hero:has(.qf-art-hero__media) { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  /* La foto va DESPUÉS del texto en pantalla estrecha: el lector viene a leer. */
  .qf-art-hero__media { order: 2; }
  .qf-art-tarjetas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 991px) {
  .qf-art-pies__cols { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 767px) {
  /* Objetivo táctil: en el dedo, un enlace de 22-28 px de alto es un fallo de
     accesibilidad, no un detalle. Medido con tools/revisar_maqueta.py: las migas
     salían a 22 px y el índice a 28. El mínimo de la casa son 40. */
  .qf-art-bc a, .qf-art-bc__actual { min-height: 40px; display: inline-flex; align-items: center; }
  .qf-art-toc__link { min-height: 40px; display: flex; align-items: center; padding-block: 8px; }
  .qf-art-col .brxe-post-content > h2 { font-size: 1.5rem; margin-top: 48px; }
  .qf-art-col .brxe-post-content > h3 { font-size: 1.25rem; margin-top: 32px; }
  .qf-art-lead { font-size: 1.125rem; }
  .qf-art-pn { grid-template-columns: minmax(0, 1fr); }
  .qf-art-pn__tarjeta--next { text-align: left; }
  .qf-art-pn__tarjeta--next .qf-art-pn__dir { justify-content: flex-start; }
  .qf-art-pn__hueco { display: none; }
  .qf-art-tarjetas { grid-template-columns: minmax(0, 1fr); }
  .qf-art-upnext { right: 12px; left: 12px; bottom: 12px; max-width: none; }
  .qf-art-share { margin-left: 0; }
}
@media (max-width: 767px) {
  .qf-art-cta { padding: 24px; }
  .qf-art-pies__cols { grid-template-columns: 1fr; }
  /* La nav no esconde nada en el teléfono: se desliza. Un enlace que no se ve
     se alcanza con el dedo; un enlace detrás de un botón depende de un JS.
     (Sin sangrado negativo: `margin-inline:-20px` sacaba la fila 20 px fuera
     del contenedor y eso ERA el desbordamiento horizontal.) */
  .qf-art-nav--scroll { width: 100%; }
  .qf-art-nav--desplegable { width: 100%; }
  .qf-art-nav--desplegable > summary { display: inline-flex; align-items: center; min-height: 44px;
    padding: 0 12px; border: 1px solid var(--line, #d4dade); border-radius: 6px; cursor: pointer;
    font-weight: 600; list-style: none; }
  .qf-art-nav--desplegable > summary::-webkit-details-marker { display: none; }
  .qf-art-nav--desplegable .qf-art-nav__lista { flex-direction: column; align-items: stretch;
    gap: 0; padding-top: 8px; }
  .qf-art-nav--desplegable .qf-art-nav__enlace { min-height: 44px; border-radius: 0;
    border-top: 1px solid var(--line, #d4dade); }
}
@media (max-width: 478px) {
  .qf-art-ke { padding: 16px; }
  .qf-art-lt__tarjeta { gap: 12px; }
  .qf-art-lt__media { flex-basis: 80px; }
  .qf-art-lt__media img { width: 80px; height: 52px; }
  .qf-art-ke__item a { padding: 8px 4px; gap: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .qf-art-upnext { transition: none; transform: none; }
}