/* Tipografía de artículo del blog.
   Todo cuelga de .blog-article a propósito: el header y el footer se pintan
   con site.css como en el resto del sitio, y estas reglas no deben alcanzarlos. */

.blog-article {
  max-width: 76ch;
  margin: 0 auto;
  padding: clamp(1.5rem, 3vw, 2.25rem) clamp(1.2rem, 6vw, 2.5rem) clamp(1.6rem, 4vw, 3rem);
}

.blog-article .breadcrumb {
  font-size: .85rem;
  color: var(--muted);
  margin-bottom: 1.8rem;
}
.blog-article .breadcrumb a { color: var(--mk-secundario-texto); text-decoration: none; font-weight: 600; }
.blog-article .breadcrumb a:hover { text-decoration: underline; }

/* width y height van también en el HTML: sin ellos el navegador no sabe cuánto
   espacio reservar y el texto salta cuando la imagen termina de cargar. */
.blog-article .article-hero {
  width: 100%;
  aspect-ratio: 1200 / 630;
  object-fit: cover;
  border-radius: 16px;
  margin-bottom: 2rem;
}

.blog-article .article-header { margin-bottom: 2.6rem; }
.blog-article .article-tag {
  display: inline-block;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--mk-secundario-texto);
  margin-bottom: .8rem;
}
.blog-article h1 { font-size: clamp(1.7rem, 4.2vw, 2.5rem); line-height: 1.15; margin-bottom: 1rem; }
.blog-article .article-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 1.2rem;
  font-size: .87rem;
  color: var(--muted);
}
.blog-article .article-meta a { color: var(--mk-primario); font-weight: 600; text-decoration: none; }
.blog-article .article-meta a:hover { text-decoration: underline; }

/* Capturas reales del producto dentro del cuerpo del artículo. */
.blog-article .article-figure { margin: 2rem 0; }
.blog-article .article-figure img { width: 100%; height: auto; }
.blog-article .article-figure figcaption { font-size: .88rem; color: var(--muted); text-align: center; margin-top: .4rem; }

/* "En resumen" (2026-10-04): las ideas clave arriba del artículo, para quien
   tiene prisa y para los buscadores y asistentes de IA que citan el blog. */
.blog-article .article-resumen { background: var(--light-band); border: 1px solid #e3e7f3; border-left: 4px solid var(--mk-secundario); border-radius: 14px; padding: 1.05rem 1.3rem .35rem; margin: 1.6rem 0 1.8rem; }
.blog-article .article-body .article-resumen h2 { font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: var(--mk-secundario-texto); margin: 0 0 .55rem; padding: 0; border: 0; }
.blog-article .article-body .article-resumen ul { margin: 0 0 .7rem; padding-left: 1.15rem; }
.blog-article .article-body .article-resumen li { font-size: .95rem; line-height: 1.6; margin-bottom: .45rem; }

/* Cuerpo */
.blog-article .article-body { font-size: 1.02rem; line-height: 1.75; }
.blog-article .article-body h2 {
  font-size: clamp(1.3rem, 3vw, 1.7rem);
  margin: 2.6rem 0 1rem;
  padding-bottom: .5rem;
  border-bottom: 2px solid var(--mk-secundario);
}
.blog-article .article-body h3 { font-size: 1.15rem; margin: 1.8rem 0 .7rem; }
.blog-article .article-body p { margin: 0 0 1.1rem; color: var(--mk-texto); }
.blog-article .article-body ul,
.blog-article .article-body ol { margin: 0 0 1.2rem 1.3rem; }
.blog-article .article-body li { margin-bottom: .5rem; }
.blog-article .article-body a { color: var(--mk-secundario-texto); font-weight: 600; }

/* Código de ejemplo en los artículos técnicos. El bloque se desplaza solo,
   igual que las tablas, para no ensanchar la página en móvil. */
.blog-article .article-body code {
  font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
  font-size: .88em;
  background: #f1f2f8;
  padding: .1em .35em;
  border-radius: 5px;
}
.blog-article .article-body pre {
  background: #0f1240;
  color: #e6e8f2;
  padding: 1.1rem 1.2rem;
  border-radius: 12px;
  overflow-x: auto;
  margin: 1.2rem 0 1.6rem;
  line-height: 1.55;
}
.blog-article .article-body pre code { background: none; padding: 0; color: inherit; font-size: .84rem; }

/* Testimonios citados textualmente dentro de un artículo. */
.blog-article blockquote {
  margin: 1.8rem 0;
  padding: 1.2rem 1.4rem;
  background: #f7f8fc;
  border-left: 4px solid var(--mk-secundario);
  border-radius: 12px;
}
.blog-article blockquote p { font-style: italic; margin-bottom: .6rem; }
.blog-article blockquote cite { font-style: normal; font-size: .88rem; font-weight: 600; color: var(--muted); }

/* Las tablas se desbordan en móvil; su contenedor las deja desplazarse
   horizontalmente sin arrastrar toda la página. */
.blog-article .table-scroll { overflow-x: auto; margin: 1.6rem 0; }
.blog-article table {
  width: 100%;
  min-width: 30rem;
  border-collapse: collapse;
  background: #fff;
  border: 1px solid #e6e8f2;
  border-radius: 12px;
  overflow: hidden;
  font-size: .93rem;
}
.blog-article th {
  background: #f7f8fc;
  text-align: left;
  padding: .85rem 1rem;
  font-weight: 700;
  border-bottom: 2px solid var(--mk-secundario);
}
.blog-article td { padding: .85rem 1rem; border-bottom: 1px solid #eef0f7; }
.blog-article tr:last-child td { border-bottom: none; }

.blog-article .cta-box {
  background: linear-gradient(135deg, var(--mk-primario), var(--mk-secundario));
  color: #fff;
  border-radius: 18px;
  padding: 1.8rem;
  margin: 3rem 0;
}
.blog-article .cta-box h3 { color: #fff; margin-top: 0; }
.blog-article .cta-box p { color: #fff; opacity: .94; }
.blog-article .cta-box a {
  display: inline-block;
  background: #fff;
  color: var(--mk-primario);
  padding: .7rem 1.4rem;
  border-radius: 10px;
  text-decoration: none;
  font-weight: 700;
  margin-top: .6rem;
}

.blog-article .article-note {
  font-size: .88rem;
  color: var(--muted);
  border-top: 1px solid #e6e8f2;
  padding-top: 1.2rem;
  margin-top: 2.5rem;
}

/* Invitación a seguir la página de LinkedIn: convierte en seguidores a quienes
   llegan al blog desde Google (2026-10-08). */
.blog-article .sigue-linkedin { margin: 2rem 0 0; padding: 1rem 1.2rem; border: 1px solid #e6e8f2; border-left: 4px solid #0a66c2; border-radius: 12px; background: #f7f9fd; font-size: .95rem; }
.blog-article .sigue-linkedin a { font-weight: 700; color: #0a66c2; text-decoration: none; }
.blog-article .sigue-linkedin a:hover { text-decoration: underline; }
.blog-article .related-posts { border-top: 2px solid #e6e8f2; margin-top: 3rem; padding-top: 1.6rem; }
.blog-article .related-link { display: block; color: var(--mk-secundario-texto); text-decoration: none; font-weight: 600; margin-bottom: .6rem; }
.blog-article .related-link:hover { text-decoration: underline; }

/* Segundo botón del recuadro final: crear la cuenta gratis */
.blog-article .cta-box a.cta-free { background: transparent; color: #fff; border: 2px solid #fff; margin-left: .6rem; }
.blog-article .free-cta a { margin-top: 0; }
.blog-article .free-cta a.btn-free { color: #fff; text-decoration: none; }
.blog-article .comparte-redes { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: 1rem 0 0; font-size: .95rem; }
.blog-article .comparte-redes span { font-weight: 700; margin-right: .25rem; }
.blog-article .comparte-redes a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 1rem; border: 1px solid #d5d9ec; border-radius: 999px; background: #fff; color: #1a1f5c; font-weight: 700; text-decoration: none; }
.blog-article .comparte-redes a:hover { border-color: #3b2a9c; background: #f3f1ff; }
.blog-article .sigue-redes { margin: .75rem 0 0; font-size: .95rem; }
.blog-article .sigue-redes a { font-weight: 700; color: #3b2a9c; }