/* ═══════════════════════════════════════════════════════════════════════
   Blog — capa tipográfica para el contenido migrado de WordPress.
   Réplica 1:1 de los estilos que blog_render_mdx() (includes/blog.php)
   aplica vía clases Tailwind, expresados a nivel de elemento porque el
   HTML migrado llega sin clases. Mismos tokens del design system.
   ═══════════════════════════════════════════════════════════════════════ */

.blog-prose > * + * { }

.blog-prose p {
  margin-top: 1.25rem;            /* mt-5 */
  font-size: 1rem;                /* text-base */
  line-height: 1.8;
  color: #1A1A1A;
}

.blog-prose h2 {
  margin-top: 3rem;               /* mt-12 */
  font-size: 1.5rem;              /* text-2xl */
  line-height: 2rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: #1a1a1a;
}

.blog-prose h3 {
  margin-top: 2rem;               /* mt-8 */
  font-size: 1.25rem;             /* text-xl */
  line-height: 1.75rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: #1a1a1a;
}

.blog-prose h4 {
  margin-top: 2rem;
  font-size: 1.0625rem;
  line-height: 1.5rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: #1a1a1a;
}

.blog-prose ul,
.blog-prose ol {
  margin-top: 1.25rem;            /* mt-5 */
  padding-left: 1.5rem;           /* pl-6 */
  font-size: 1rem;
  line-height: 1.8;
  color: #1A1A1A;
}
.blog-prose ul { list-style-type: disc; }
.blog-prose ol { list-style-type: decimal; }
.blog-prose li + li { margin-top: 0.5rem; }   /* space-y-2 */
.blog-prose li p { margin-top: 0.25rem; }

.blog-prose a {
  color: #A8540A;
  text-decoration: underline;
  text-underline-offset: 4px;
  transition: color 0.3s;
}

.blog-prose strong,
.blog-prose b {
  font-weight: 600;
  color: #1a1a1a;
}

.blog-prose blockquote {
  margin-top: 2rem;               /* mt-8 */
  border-left: 2px solid rgba(209, 163, 71, 0.4);   /* border-[#D1A347]/40 */
  padding-left: 1.5rem;           /* pl-6 */
  font-size: 17px;
  font-style: italic;
  color: #1A1A1A;
}
.blog-prose blockquote p { margin-top: 0; }

/* ── Imágenes y figuras del contenido migrado ── */
.blog-prose img {
  max-width: 100%;
  height: auto;
  border-radius: 0.5rem;          /* rounded-lg */
}

.blog-prose figure,
.blog-prose .blog-figure {
  margin-top: 2rem;
}
.blog-prose figure > a { display: block; }
.blog-prose figcaption {
  margin-top: 0.625rem;
  font-size: 0.8125rem;
  line-height: 1.6;
  color: rgba(26, 26, 26, 0.6);
}

/* Imagen suelta dentro de un párrafo */
.blog-prose p > img { margin-top: 0.75rem; }

/* ── Embeds (YouTube del contenido original) ── */
.blog-prose .blog-embed {
  margin-top: 2rem;
}
.blog-prose .blog-embed iframe {
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
  border-radius: 0.5rem;
}

/* El primer elemento del artículo no necesita margen superior */
.blog-prose > :first-child { margin-top: 0; }