/* ============================================================
   15Diez · sistema v2 · assets/css/articulos.css
   Plantilla de artículo de Insights. Solo lo que el sistema no
   tiene: la letra de la cabecera, la columna de lectura (~65
   caracteres), la figura, fuentes y regreso al índice.
   Ronda 3 (5-oct-2026): la cabecera es la dupla del sistema
   (.dupla--texto-ancho.dupla--invertida: título a la izquierda y
   portada 3:2 de cinco columnas a la derecha), ya no una portada de
   1,280 × 640 bajo el título; la figura mide lo que la columna de
   lectura; Siguiente paso (.dupla) y Monitor (banda de carbón:
   .cierre + .monitor de insights.css) vienen del sistema.
   ============================================================ */

:root { --col-lectura: 35rem; }   /* ~65 caracteres a 18 px con Inter */

/* ---------- cabecera: título a la izquierda y portada a la derecha ----------
   header.art-cabecera > .contenedor.dupla.dupla--texto-ancho.dupla--invertida > .dupla__texto.art-cabecera__texto + .dupla__imagen.art-portada
   El sistema pone la retícula (texto de 7 columnas, foto de 5), el 3:2 y el tope de alto de la foto. El texto va primero
   en el HTML: en teléfono se lee el título y después la foto. Aquí, solo la letra. */
.art-cabecera { padding-top: var(--apertura); }
.art-cabecera h1 { font-size: clamp(1.875rem, 1rem + 2.1vw, 2.75rem); text-wrap: balance; }   /* 30 px en móvil · 44 px en escritorio: los titulares originales, de hasta 13 palabras, en tres o cuatro renglones */
.art-cabecera .apoyo { max-width: 36rem; }
/* firma · fecha · lectura: el punto va pegado al final de cada pieza (::after), así nunca abre un renglón si la línea se parte */
.art-meta { display: flex; flex-wrap: wrap; gap: .25rem 0; font-size: .875rem; color: var(--gris); }
.art-meta > * { white-space: nowrap; }
.art-meta > *:not(:last-child)::after { content: "\00a0\00b7\00a0"; }

/* ---------- cuerpo: una columna de lectura ---------- */
.art-cuerpo { padding-top: clamp(3rem, 6vw, 5rem); font-size: 1.125rem; line-height: 1.7; }
.art-cuerpo > * { max-width: var(--col-lectura); margin-inline: auto; }
.art-cuerpo > * + * { margin-top: 1.25rem; }
.art-cuerpo h2 { font-size: clamp(1.5rem, 1.15rem + 1vw, 1.875rem); line-height: 1.2; letter-spacing: -.015em; margin-top: 3.25rem; }
.art-cuerpo h3 { font-size: 1.25rem; line-height: 1.3; margin-top: 2.5rem; }
.art-cuerpo h2 + h3 { margin-top: 1.25rem; }
.art-cuerpo :is(h2, h3) + p { margin-top: .875rem; }
.art-cuerpo p { text-wrap: pretty; }
.art-cuerpo strong { font-weight: 600; }
.art-cuerpo a { text-decoration-thickness: 1px; }
.art-cuerpo :is(ul, ol) { padding-left: 1.25rem; }
.art-cuerpo li + li { margin-top: .5rem; }
.art-cuerpo li::marker { color: var(--gris); }
/* nota de vigencia: es la advertencia más importante del artículo, va en carbón a 15 px (no en letra de pie) con el filete dorado */
.art-nota { max-width: var(--col-lectura); padding: .875rem 1.25rem; border-left: 2px solid var(--dorado); font-size: .9375rem; line-height: 1.55; color: var(--carbon); }
.art-nota + * { margin-top: 2rem; }

/* tabla de cifras (5-nov-2026, el ejemplo del predial): las cifras del párrafo, para leerlas de un vistazo. Del ancho de la
   columna, filetes como los de Fuentes, cifras a la derecha con números tabulares; el rótulo de cada fila en carbón y la
   cabecera en gris, a la talla de la firma. Cabe a 320 px sin desbordar (el rótulo «Si el valor se duplica» parte en dos renglones a 390 y en tres a 320). */
.art-cuerpo > .art-tabla { width: 100%; margin-block: 1.75rem; border-collapse: collapse; font-size: 1rem; line-height: 1.45; font-variant-numeric: tabular-nums; }
.art-tabla th, .art-tabla td { padding: .75rem 0; border-bottom: 1px solid var(--linea); text-align: left; vertical-align: baseline; }
.art-tabla :is(th, td):not(:first-child) { padding-left: 1rem; text-align: right; white-space: nowrap; }
.art-tabla thead th { padding-top: 0; font-size: .875rem; font-weight: 500; color: var(--gris); }
.art-tabla tbody th { font-weight: 400; }
.art-tabla tbody tr:last-child td:last-child { font-weight: 600; }

/* figura: del ancho de la columna de lectura, 3:2 y con el tope del sistema (Ronda 3: antes 46rem, 736 × 491) */
.art-figura { margin-block: clamp(2.5rem, 5vw, 3.5rem); }
.art-figura img { width: 100%; aspect-ratio: 3 / 2; max-height: var(--img-alto); object-fit: cover; border-radius: var(--radio); }

/* ---------- fuentes y regreso ---------- */
.art-fuentes { max-width: var(--col-lectura); margin: clamp(3rem, 6vw, 4.5rem) auto 0; padding-top: 2rem; border-top: 1px solid var(--linea); display: grid; gap: 1rem; }
/* lista sin numerar: el texto cita las fuentes por nombre, así que un folio 1–2–3 sería decorativo */
.art-fuentes ul { list-style: none; padding: 0; display: grid; gap: .75rem; font-size: .875rem; line-height: 1.55; color: var(--gris); }
.art-fuentes a { color: var(--carbon); }
/* un dato pendiente va fuera de la lista, en texto pequeño (.dato del sistema, 13 px) y con el aire del bloque (1rem), para no parecer una fuente más */
.art-regreso { max-width: var(--col-lectura); margin: 2.5rem auto 0; padding-bottom: calc(var(--seccion) / 2); }
/* la sección «Fuentes» es opcional: cuando el artículo no la lleva, el regreso pone el mismo filete de cierre */
.art-regreso--solo { margin-top: clamp(3rem, 6vw, 4.5rem); padding-top: 2rem; border-top: 1px solid var(--linea); }
/* enlace de regreso: la flecha va delante y apunta atrás */
.enlace--atras::after { content: none; }
.enlace--atras::before { content: "\2190"; display: inline-block; margin-right: .35em; text-decoration: none; transition: transform var(--m-rapido); }
@media (hover: hover) { .enlace--atras:hover::before { transform: translateX(-3px); } }   /* Ronda 4: ningún :hover sin cursor */

/* Monitor 15Diez: la misma pieza del índice. La forma (campo «Nombre», .monitor__pildora, y los dos campos sobre la
   banda de carbón) viene de insights.css; la validación, «Enviando…», el éxito, el error de envío (.formulario__fallo;
   ejemplo con el correo reservado de data-simular-error) y los estados #demo=enviado · #demo=error, de sitio.js
   (insights.js y articulos.js quedaron vacíos al consolidar: están en _retirados/). Aquí no se redefine nada. */

/* ---------- responsive ---------- */
/* tras la crítica (Ronda 3) · de tableta a laptop chica la cabecera ya va en dos columnas y la del título es estrecha
   (368 px a 768, 491 a 1024): a la talla de escritorio el titular del render caía a cinco renglones con «Probablemente»
   solo en el cuarto. La letra sigue al ancho de la columna (3.4vw: 26 px a 768, 35 a 1024) y empata con la de
   escritorio a 1200: los cinco titulares quedan en dos a cuatro renglones completos. */
@media (min-width: 48rem) and (max-width: 74.99rem) {
  .art-cabecera h1 { font-size: 3.4vw; }
}
@media (max-width: 47.99rem) {
  .art-cuerpo { font-size: 1.0625rem; }
}
@media (max-width: 29.99rem) {
  /* titulares de 8 a 13 palabras, equilibrados, en dos a cuatro renglones compactos. Tras la crítica (Ronda 3): 24 px
     desde 390 (antes 26: al del render le faltaban unos pixeles y el equilibrado dejaba «Probablemente» solo en el
     tercer renglón) y, por debajo, la letra baja con el ancho (22 px a 360, 20 a 320) para que cada titular parta
     igual en cualquier teléfono */
  .art-cabecera h1 { font-size: clamp(1.25rem, 6.16vw, 1.5rem); line-height: 1.15; }
  /* Ronda 4 · firma · fecha · lectura en UN renglón cuando cabe (a 390 px, en cuatro de los cinco artículos; antes
     siempre eran dos: «Por 15Diez · 9 Mayo 2026» y, debajo, «5 min lectura»). El punto ya no va pegado al final de cada
     pieza: cuelga a la izquierda de la que sigue, dentro del hueco, y la línea recorta lo que se sale. Si una pieza baja
     de renglón, su punto queda fuera del recorte: nunca hay un punto suelto al final ni al inicio de un renglón (el
     mismo recurso de .meta en insights.css). Hueco y posición reproducen el separador de escritorio («·» entre dos
     espacios: 11.9 px a 14 px de letra). */
  .art-meta { column-gap: .85em; overflow: hidden; }
  .art-meta > *:not(:last-child)::after { content: none; }
  .art-meta > * + * { position: relative; }
  .art-meta > * + *::before { content: "\00b7"; position: absolute; left: -.57em; }
  .art-vertical { display: none; }   /* bajo 480 px el antetítulo cabe en un renglón: «Siguiente paso» */

  /* (La portada del artículo, la foto de la dupla que abre la página, va en 16:9 en el teléfono en vertical, como la
     del destacado en el índice: lo pide su dupla en el marcado con .dupla--portada-movil, del sistema. En 390 × 664 se
     ven sin scroll el título, la línea, la firma y la portada entera. La figura dentro del texto no cambia: 3:2.) */
}