/* Estilos propios de un artículo de Insights (/insights/<slug>/). El listado
   (/insights/) no necesita nada de este archivo: reutiliza .hero, .hero-grid,
   .hero-photo, .sec-head, .insight-grid/.insight-card/.insight-body/.tag, que
   ya vive en base.css porque Portada ya los usa para su propia vitrina de
   Insights. Esto solo cubre lo que un artículo largo necesita y que no tiene
   equivalente en el resto del sitio: la tipografía de cuerpo, el TL;DR, las
   preguntas frecuentes y el CTA de cierre.

   Migrado del motor v1 (que traía estos estilos en un <style> embebido en
   articulo.php — incompatible con la política de contenido del sitio v2, que
   prohíbe 'unsafe-inline' en style-src): mismas variables de color, radio 0
   en todo (cap. 20 del manual), sin Poppins ni Work Sans ni SFMono. */

.art-meta { display: flex; flex-wrap: wrap; gap: 0.5rem 1.4rem; font-size: 0.82rem;
  color: var(--ink-soft); border-bottom: 1px solid var(--line); padding-bottom: 1.2rem;
  margin-bottom: 1.8rem; }
.art-meta .tag { font-family: "JetBrains Mono VF", "SFMono-Regular", Consolas, monospace;
  color: var(--gold-ink); text-transform: uppercase; letter-spacing: 0.04em; }

/* Primera corrección: el artículo tenía su propio max-width + margin:0 auto +
   padding:6vw como si fuera una página aparte, sin envolver en <div
   class="wrap"> como el resto del sitio, así que el texto quedaba centrado
   en todo el viewport en vez de anclado al margen izquierdo del sitio
   (hallazgo de Dirección General: "muy angosto, no cuadra con el resto de
   la página"). Envolverlo en .wrap corrigió la alineación, pero dejó una
   franja en blanco enorme a la derecha en pantallas anchas — corregir el
   ancho de lectura (72ch, la misma convención de /aviso-de-privacidad/, que
   usa 74ch) habría violado esa misma convención documentada ("no se toca
   para no introducir una inconsistencia nueva"). La solución consistente
   con el resto del sitio es la misma que ya usa /aviso-de-privacidad/: un
   grid de dos columnas (.legal-layout ahí, .article-layout aquí) con una
   columna lateral, no ensanchar el texto. */
.article-layout { display: grid; grid-template-columns: 1fr 300px; gap: 3.5rem;
  padding-top: 3.5rem; padding-bottom: 6rem; align-items: start; }
@media (max-width: 900px) { .article-layout { grid-template-columns: 1fr; } }

article.blog-article { max-width: 72ch; }
article.blog-article h1 { font-size: clamp(1.9rem, 3.6vw, 2.6rem); font-variation-settings: "wght" 700, "wdth" 104;
  margin-bottom: 1.4rem; line-height: 1.15; }

.tldr { background: var(--paper); border: 1px solid var(--line); border-left: 3px solid var(--gold);
  border-radius: 0; padding: 1.1rem 1.3rem; margin-bottom: 1.8rem; }
.tldr .lbl { font-family: "JetBrains Mono VF", "SFMono-Regular", Consolas, monospace; font-size: 0.7rem;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold-ink); margin-bottom: 0.4rem; }
.tldr p { margin: 0; font-size: 1rem; color: var(--ink); }

/* Cuerpo del artículo renderizado desde Markdown (Parsedown). El body ya
   hereda Source Serif VF y los h2/h3 ya heredan Archivo VF de base.css —
   solo se ajustan tamaño, peso y márgenes propios de un artículo largo. */
.article-body { font-size: 1.05rem; line-height: 1.75; color: var(--ink); }
.article-body h2 { font-variation-settings: "wght" 700, "wdth" 104; font-size: 1.5rem;
  line-height: 1.3; margin: 2.2rem 0 1rem; color: var(--ink); }
.article-body h3 { font-variation-settings: "wght" 650, "wdth" 100; font-size: 1.2rem;
  line-height: 1.35; margin: 1.8rem 0 0.8rem; color: var(--ink); }
.article-body p { margin: 0 0 1.4rem; }
.article-body ul, .article-body ol { margin: 0 0 1.4rem; padding-left: 1.4rem; }
.article-body li { margin-bottom: 0.5rem; }
.article-body blockquote { margin: 1.6rem 0; padding: 0.2rem 1.4rem; border-left: 3px solid var(--gold);
  color: var(--ink-soft); font-style: italic; }
.article-body code { font-family: "JetBrains Mono VF", "SFMono-Regular", Consolas, monospace;
  font-size: 0.9em; background: var(--paper); padding: 0.15em 0.4em; border-radius: 0; }
.article-body pre { background: var(--navy-deep); color: #fff; padding: 1.2rem 1.4rem;
  border-radius: 0; overflow-x: auto; margin: 0 0 1.4rem; }
.article-body pre code { background: none; padding: 0; color: inherit; }
.article-body a { color: var(--gold-ink); text-decoration: underline; text-underline-offset: 2px; }
.article-body a:hover { color: var(--ink); }
.article-body strong { font-weight: 700; color: var(--ink); }
.article-body img { border-radius: 0; margin: 1.6rem 0; max-width: 100%; height: auto; }
.article-body hr { border: none; border-top: 1px solid var(--line); margin: 2.2rem 0; }

/* Mismo patrón de acordeón que el resto del sitio (.sec-head + .faq-grid +
   .faq-item, cap. base.css) — antes esta sección tenía su propio h2 plano y
   respuestas siempre visibles, inconsistente con Contacto, COMPASS, Sectores,
   Quiénes somos y cada página de Servicios, todas con el mismo bloque
   "Preguntas frecuentes / Claridad antes de decidir" colapsable. Solo el
   margen superior es propio de aquí: separa el FAQ del cuerpo del artículo,
   ya que .faq-grid en el resto del sitio vive en su propia <section>. */
.faq-box { border-top: 1px solid var(--line); margin-top: 2.2rem; padding-top: 2rem; }

.cta-box { margin-top: 2.2rem; padding: 1.6rem; background: var(--navy-deep); border-radius: 0;
  text-align: center; }
.cta-box a.btn { margin: 0; }

/* ── Columna lateral (índice + CTA) ───────────────────────────────────────
   Mismo lenguaje visual que .legal-toc de /aviso-de-privacidad/ (borde
   izquierdo, sticky, mono para la etiqueta), para que un artículo largo se
   sienta parte del mismo sistema y no un componente aparte. El índice solo
   se imprime cuando el artículo tiene 2+ h2 (articulo.php lo condiciona),
   así que un artículo corto no muestra una lista de un solo elemento. */
.article-side { position: sticky; top: 6rem; display: flex; flex-direction: column; gap: 1.8rem; }
@media (max-width: 900px) { .article-side { position: static; } }
.article-toc { display: flex; flex-direction: column; gap: 0.15rem;
  border-left: 2px solid var(--line); padding-left: 1.2rem; }
.article-toc .toc-label { font-family: "Archivo VF", sans-serif; font-variation-settings: "wght" 600, "wdth" 90;
  font-size: 0.74rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 0.5rem; }
.article-toc a { font-size: 0.9rem; color: var(--ink-soft); padding: 0.4rem 0;
  transition: color var(--dur-short) var(--ease); }
.article-toc a:hover, .article-toc a:active { color: var(--ink); }

.side-cta { border: 1px solid var(--line); padding: 1.5rem; }
.side-cta .eyebrow-mono { font-family: "JetBrains Mono VF", "SFMono-Regular", Consolas, monospace;
  font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold-ink); margin: 0 0 0.6rem; }
.side-cta h3 { font-size: 1.05rem; font-variation-settings: "wght" 700, "wdth" 104; line-height: 1.35;
  margin: 0 0 1.1rem; color: var(--ink); }
.side-cta .btn { width: 100%; }