/* ══════════════════════════════════════════════════════════════════════════════
   blog.css — Hoja de estilos del blog de WinTech IA (/blog/ y /blog/<slug>/).
   ══════════════════════════════════════════════════════════════════════════════
   POR QUÉ: el resto del sitio usa site.css, pero un artículo necesita un vocabulario
   que site.css no tiene: el ancho cómodo de lectura de la prosa, el ritmo de los
   títulos dentro del texto y las tarjetas del índice. En lugar de meter estilos de
   artículo en site.css —y arriesgar el diseño de las páginas que ya están en
   producción—, se sirve una hoja aparte que solo cargan las páginas del blog.
   Comparte los mismos tokens (--g-*, --r-md, --wrap) que site.css, así que el
   aspecto es el mismo sin duplicar la paleta ni la tipografía.
   La carga el generador `scripts/build-blog.mjs`, no se enlaza a mano en ninguna
   página. Los comentarios y los nombres de clase van en español, como el resto.
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── Índice del blog ────────────────────────────────────────────────────────── */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 22px;
  margin-top: 8px;
}

.blog-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 26px 26px 24px;
  box-shadow: var(--e1);
  transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}

.blog-card:hover {
  box-shadow: var(--e3);
  transform: translateY(-3px);
  border-color: var(--g-blue-c);
}

/* La etiqueta del sector: mismo lenguaje que las tarjetas de sector del hub. */
.blog-card__sector {
  align-self: flex-start;
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--g-blue-ink);
  background: var(--g-blue-c);
  border-radius: 999px;
  padding: 4px 12px;
}

.blog-card h2 {
  font-size: 1.1875rem;
  line-height: 1.35;
  margin: 0;
}

.blog-card h2 a {
  color: inherit;
  text-decoration: none;
}

.blog-card h2 a:hover {
  color: var(--g-action);
}

.blog-card p {
  color: var(--g-ink-3);
  font-size: .9375rem;
  line-height: 1.6;
  margin: 0;
}

.blog-card__meta {
  margin-top: auto;
  padding-top: 6px;
  font-size: .8125rem;
  color: var(--g-ink-3);
}

/* ── Cabecera del artículo: autor, fecha y tiempo de lectura ────────────────── */
.art-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  margin-top: 18px;
  font-size: .875rem;
  color: var(--g-ink-3);
}

.art-meta span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.art-meta .msym {
  color: var(--g-ink-3);
}

/* ── El bloque de respuesta directa (AEO) ────────────────────────────────────
   Va arriba del artículo, antes del primer título, para que un asistente de IA lo
   lea como el resumen citable de la página. Reutiliza el aspecto de `.tldr` de
   site.css y añade el filete del color de acción. */
.art-respuesta {
  background: var(--g-blue-c);
  color: var(--g-blue-ink);
  border-left: 4px solid var(--g-action);
  border-radius: var(--r-md);
  padding: 20px 24px;
  font-size: .9375rem;
  line-height: 1.65;
  margin: 0 0 40px;
}

.art-respuesta strong {
  color: var(--navy-ink);
}

/* ── La prosa del artículo ──────────────────────────────────────────────────── */
.prosa {
  max-width: 68ch;
  color: var(--g-ink-2);
  font-size: 1.0625rem;
  line-height: 1.75;
}

.prosa > p {
  margin: 0 0 22px;
}

.prosa h2 {
  font-size: clamp(1.375rem, 2.4vw, 1.75rem);
  line-height: 1.25;
  color: var(--navy-ink);
  margin: 48px 0 16px;
  scroll-margin-top: 96px;
}

.prosa h2:first-child {
  margin-top: 0;
}

.prosa h3 {
  font-size: 1.1875rem;
  line-height: 1.35;
  color: var(--navy-ink);
  margin: 34px 0 12px;
}

.prosa ul,
.prosa ol {
  margin: 0 0 24px;
  padding-left: 22px;
}

.prosa li {
  margin-bottom: 10px;
}

.prosa li::marker {
  color: var(--g-action);
}

.prosa a {
  color: var(--g-action);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.prosa a:hover {
  color: var(--g-blue-ink);
}

.prosa strong {
  color: var(--g-ink);
}

.prosa blockquote {
  margin: 0 0 24px;
  padding: 4px 0 4px 20px;
  border-left: 3px solid var(--line);
  color: var(--g-ink-3);
  font-style: italic;
}

.prosa code {
  font-family: ui-monospace, "Cascadia Mono", Menlo, Consolas, monospace;
  font-size: .9em;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 1px 6px;
}

/* ── Pie del artículo: volver al índice ─────────────────────────────────────── */
.blog-volver {
  margin-top: 44px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}

/* ── Ajustes para pantallas pequeñas ────────────────────────────────────────── */
@media (max-width: 640px) {
  .prosa {
    font-size: 1.03125rem;
  }

  .prosa h2 {
    margin-top: 38px;
  }

  .blog-card {
    padding: 22px 20px;
  }
}