/* ============================================================================
 * 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
 *    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». */
.rb-art-col .brxe-post-content h2[id], .rb-art-col .brxe-post-content h3[id] { scroll-margin-top: 96px; }

/* --- Migas ---------------------------------------------------------------- */
.rb-art-bc { display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  font-size: .8125rem; color: var(--ink-3, #6c777f); margin: 0 0 16px; }
.rb-art-bc a { color: var(--ink-3, #6c777f); text-decoration: none; }
.rb-art-bc a:hover { color: var(--brand, #1f45d6); text-decoration: underline; }
.rb-art-bc__sep { opacity: .55; }
.rb-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. */
.rb-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. */
.rb-art-hero:has(.rb-art-hero__media) { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 48px; }
.rb-art-hero__texto { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.rb-art-hero__texto > * { margin: 0; }
.rb-art-hero__media { position: relative; aspect-ratio: 16 / 10; overflow: hidden;
  border-radius: 8px; background: var(--surface-2, #e9edef); }
.rb-art-hero__media img { width: 100%; height: 100%; object-fit: cover; display: block; }

.rb-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; }
.rb-art-eyebrow svg { width: 16px; height: 16px; }
.rb-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). */
.rb-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); }

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

.rb-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); }
.rb-art-avatar img { border-radius: 50%; display: block; }
.rb-art-infobar__autor { font-weight: 600; color: var(--ink-2, #4b555c); }
.rb-art-infobar__act::before { content: "·"; margin-right: 16px; opacity: .5; }

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

/* --- Cuerpo: rail + columna de lectura ------------------------------------ */
.rb-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.) */
.rb-art-cuerpo > *, .rb-art-cuerpo > * > * { align-self: stretch; min-width: 0; }
.rb-art-rail { position: sticky; top: 96px; display: flex; flex-direction: column; gap: 16px;
  max-height: calc(100vh - 96px - 24px); overflow-y: auto; }
.rb-art-lectura { display: flex; align-items: center; gap: 8px; font-size: .8125rem;
  color: var(--ink-3, #6c777f); }
.rb-art-lectura__icono { width: 15px; height: 15px; }
.rb-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; }
.rb-art-toc__lista, .rb-art-toc__sub { list-style: none; margin: 0; padding: 0; }
.rb-art-toc__sub { margin: 4px 0 4px 12px; }
.rb-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); }
.rb-art-toc__link:hover { color: var(--ink, #171c20); border-left-color: var(--ink-3, #6c777f); }
.rb-art-toc__link--sub { font-size: .8125rem; color: var(--ink-3, #6c777f); }
.rb-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). */
.rb-art-progreso { height: 3px; border-radius: 999px; background: var(--line, #d4dade); overflow: hidden; }
.rb-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. */
.rb-art-col { display: flex; flex-direction: column; gap: 32px; min-width: 0; }

/* --- 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 (`.rb-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).
 * ------------------------------------------------------------------------*/
.rb-art-col .brxe-post-content { font-size: 1.125rem; line-height: 1.7; color: var(--ink, #171c20); }
.rb-art-col .brxe-post-content > * { max-width: 72ch; margin: 0 0 24px; }
.rb-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); }
.rb-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); }
.rb-art-col .brxe-post-content > h2:first-child, .rb-art-col .brxe-post-content > h3:first-child { margin-top: 0; }
.rb-art-col .brxe-post-content > ul, .rb-art-col .brxe-post-content > ol { padding-left: 24px; }
.rb-art-col .brxe-post-content > ul li, .rb-art-col .brxe-post-content > ol li { margin-bottom: 8px; }
.rb-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); }
.rb-art-col .brxe-post-content a { color: var(--brand, #1f45d6); text-underline-offset: 2px; }
.rb-art-col .brxe-post-content > .rb-art-tablewrap { max-width: none; overflow-x: auto; }
.rb-art-col .brxe-post-content table { border-collapse: collapse; width: 100%; font-size: .9375rem; }
.rb-art-col .brxe-post-content th, .rb-art-col .brxe-post-content td { padding: 10px 12px; text-align: left;
  border-top: 1px solid var(--line, #d4dade); vertical-align: top; }
.rb-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); }
.rb-art-col .brxe-post-content td { font-variant-numeric: tabular-nums; }
.rb-art-col .brxe-post-content img { height: auto; border-radius: 8px; }

/* --- Pie del artículo ----------------------------------------------------- */
.rb-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); }
.rb-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; }
.rb-art-chip svg { width: 15px; height: 15px; }
.rb-art-chip:hover { border-color: var(--brand, #1f45d6); color: var(--brand, #1f45d6); }

/* --- Anterior / Siguiente -------------------------------------------------- */
.rb-art-pn { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.rb-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); }
.rb-art-pn__tarjeta:hover { border-color: var(--brand, #1f45d6); }
.rb-art-pn__tarjeta--next { text-align: right; }
.rb-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); }
.rb-art-pn__tarjeta--next .rb-art-pn__dir { justify-content: flex-end; }
.rb-art-pn__dir svg { width: 14px; height: 14px; }
.rb-art-pn__titulo { font-weight: 600; line-height: 1.35; }
.rb-art-pn__hueco { display: block; }

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

/* --- Compartir (dentro de infobar y pie) ----------------------------------- */
.rb-art-share { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; }
.rb-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; }
.rb-art-share__btn:hover { border-color: var(--brand, #1f45d6); color: var(--brand, #1f45d6); }
.rb-art-share__btn svg { width: 16px; height: 16px; }
/* El botón de copiar lleva DOS iconos superpuestos: enlace y visto. */
.rb-art-copiar svg:nth-of-type(2), .rb-art-copiar__ok { display: none; }
.rb-art-copiar.is-ok svg:nth-of-type(1) { display: none; }
.rb-art-copiar.is-ok svg:nth-of-type(2) { display: block; }
.rb-art-copiar.is-ok { color: var(--brand, #1f45d6); border-color: var(--brand, #1f45d6); }

/* --- «Lee también» dentro del cuerpo --------------------------------------- */
.rb-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). */
.rb-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; }
.rb-art-lt__tarjeta { display: flex; align-items: center; gap: 16px; text-decoration: none;
  color: var(--ink, #171c20); font-size: 1rem; line-height: 1.35; }
.rb-art-lt__media { flex: 0 0 100px; }
.rb-art-lt__media img { width: 100px; height: 60px; object-fit: cover; border-radius: 6px; display: block; }
.rb-art-lt__titulo { font-weight: 600; }
.rb-art-lt__tarjeta:hover .rb-art-lt__titulo { color: var(--brand, #1f45d6); }

/* --- Tarjeta flotante «A continuación» ------------------------------------- */
.rb-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; }
.rb-art-upnext.is-visible { opacity: 1; transform: none; }
.rb-art-upnext__link { display: flex; align-items: center; gap: 12px; text-decoration: none;
  color: var(--ink, #171c20); min-width: 0; }
.rb-art-upnext__media img { width: 60px; height: 40px; object-fit: cover; border-radius: 6px; display: block; }
.rb-art-upnext__cuerpo { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.rb-art-upnext__label { font-size: .6875rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-3, #6c777f); }
.rb-art-upnext__titulo { font-size: .9375rem; font-weight: 600; line-height: 1.3; }
.rb-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; }
.rb-art-upnext__cerrar:hover { background: var(--surface-2, #e9edef); color: var(--ink, #171c20); }
.rb-art-upnext__cerrar svg { width: 15px; height: 15px; }

/* --- Barra de progreso móvil (fija arriba; el rail no existe por debajo de 991) */
.rb-art-mprogreso { position: fixed; inset: 0 0 auto 0; height: 3px; z-index: 999;
  background: transparent; display: none; }
.rb-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.
 * ========================================================================*/
@media (max-width: 991px) {
  .rb-art-cuerpo { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .rb-art-rail { position: static; max-height: none; overflow: visible;
    padding-bottom: 24px; border-bottom: 1px solid var(--line, #d4dade); }
  .rb-art-mprogreso { display: block; }
  .rb-art-hero:has(.rb-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. */
  .rb-art-hero__media { order: 2; }
  .rb-art-tarjetas { grid-template-columns: repeat(2, minmax(0, 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. */
  .rb-art-bc a, .rb-art-bc__actual { min-height: 40px; display: inline-flex; align-items: center; }
  .rb-art-toc__link { min-height: 40px; display: flex; align-items: center; padding-block: 8px; }
  .rb-art-col .brxe-post-content > h2 { font-size: 1.5rem; margin-top: 48px; }
  .rb-art-col .brxe-post-content > h3 { font-size: 1.25rem; margin-top: 32px; }
  .rb-art-lead { font-size: 1.125rem; }
  .rb-art-pn { grid-template-columns: minmax(0, 1fr); }
  .rb-art-pn__tarjeta--next { text-align: left; }
  .rb-art-pn__tarjeta--next .rb-art-pn__dir { justify-content: flex-start; }
  .rb-art-pn__hueco { display: none; }
  .rb-art-tarjetas { grid-template-columns: minmax(0, 1fr); }
  .rb-art-upnext { right: 12px; left: 12px; bottom: 12px; max-width: none; }
  .rb-art-share { margin-left: 0; }
}
@media (max-width: 478px) {
  .rb-art-ke { padding: 16px; }
  .rb-art-lt__tarjeta { gap: 12px; }
  .rb-art-lt__media { flex-basis: 80px; }
  .rb-art-lt__media img { width: 80px; height: 52px; }
  .rb-art-ke__item a { padding: 8px 4px; gap: 8px; }
}

/* Quien pide menos movimiento no recibe la transición de la tarjeta flotante. */
@media (prefers-reduced-motion: reduce) {
  .rb-art-upnext { transition: none; transform: none; }
}