/* Blog: listado y artículo */
.blog { padding-block: var(--s-5) var(--s-8); }
.blog-head { max-width: 760px; margin: var(--s-4) 0 var(--s-6); }
.blog-lead, .post-lead { font-size: var(--fs-md); color: var(--text-muted); margin-top: var(--s-3); line-height: 1.55; }
.blog-meta { font-size: var(--fs-sm); color: var(--text-soft); margin: 0; }
.blog-excerpt { color: var(--text-muted); line-height: 1.55; margin: 0; }
.blog-empty { padding: var(--s-7) 0; color: var(--text-muted); }

.blog-hero { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: var(--s-6); align-items: center;
  margin-bottom: var(--s-7); background: var(--surface); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-1); }
.blog-hero-img { display: block; aspect-ratio: 3 / 2; background: var(--surface-2); }
.blog-hero-img img, .blog-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.blog-hero-body { padding: var(--s-5) var(--s-6) var(--s-5) 0; display: grid; gap: var(--s-3); justify-items: start; }
.blog-hero-title { font-family: var(--font-display); font-weight: var(--fw-display); font-size: var(--fs-2xl); line-height: 1.1; margin: 0; }
.blog-hero-title a, .blog-card-title a { color: inherit; text-decoration: none; }
.blog-hero-title a:hover, .blog-card-title a:hover { color: var(--accent-text); }

.blog-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-6) var(--s-5); }
.blog-card { display: grid; gap: var(--s-2); align-content: start; }
.blog-card-img { display: block; aspect-ratio: 3 / 2; border-radius: var(--r-md); overflow: hidden; background: var(--surface-2); margin-bottom: var(--s-2); }
.blog-card-img img { transition: transform .4s var(--ease); }
.blog-card:hover .blog-card-img img { transform: scale(1.03); }
.blog-card-title { font-size: var(--fs-md); line-height: 1.3; margin: 0; }
.blog-pager { display: flex; gap: var(--s-4); align-items: center; justify-content: center; margin-top: var(--s-7); color: var(--text-muted); }

/* Artículo */
.post { padding-block: var(--s-5) var(--s-6); }
.post-preview { margin: 0 0 var(--s-4); padding: var(--s-3) var(--s-4); border-radius: var(--r-md); background: var(--warn-bg); color: var(--warn); font-weight: 600; }
.post-head { max-width: 820px; margin: var(--s-4) 0 var(--s-5); display: grid; gap: var(--s-3); }
.post-head .h1 { font-size: clamp(2rem, 4.2vw, var(--fs-3xl)); }
.post-cover { margin: 0 0 var(--s-6); border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 3 / 2; max-height: 620px; background: var(--surface-2); }
.post-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.post-layout { display: grid; grid-template-columns: minmax(0, 70ch) minmax(220px, 300px); gap: var(--s-7); justify-content: space-between; align-items: start; }
.post-body { font-size: 1.075rem; line-height: 1.75; color: var(--text); }
.post-body h2 { font-family: var(--font-display); font-weight: var(--fw-display); font-size: var(--fs-xl); line-height: 1.2; margin: 1.8em 0 .5em; }
.post-body h3 { font-size: var(--fs-lg); margin: 1.5em 0 .4em; }
.post-body p, .post-body ul, .post-body ol, .post-body blockquote, .post-body table, .post-body figure { margin: 0 0 1.05em; }
.post-body ul, .post-body ol { padding-left: 1.3em; }
.post-body li + li { margin-top: .35em; }
.post-body a { color: var(--accent-text); text-decoration: underline; text-underline-offset: 3px; }
.post-body blockquote { border-left: 3px solid var(--laton-500); padding: .2em 0 .2em 1em; color: var(--text-muted); font-style: italic; }
.post-body img { max-width: 100%; height: auto; border-radius: var(--r-md); }
.post-body figcaption { font-size: var(--fs-sm); color: var(--text-soft); margin-top: .4em; }
.post-body table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); display: block; overflow-x: auto; }
.post-body th, .post-body td { padding: .55em .75em; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; }
.post-body th { background: var(--surface-2); font-weight: 600; }
.post-side { position: sticky; top: calc(var(--header-h) + var(--s-4)); padding: var(--s-4); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow-1); }
.post-side-t { font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: .06em; color: var(--text-soft); margin: 0 0 var(--s-3); }
.post-side-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-3); }
.post-side-list a { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: var(--s-3); align-items: center; color: inherit; text-decoration: none; font-size: var(--fs-sm); line-height: 1.35; }
.post-side-list img { width: 56px; height: 56px; object-fit: contain; border-radius: var(--r-sm); background: #fff; }
.post-side-list strong { display: block; margin-top: 2px; color: var(--accent-text); }
.post-side-list a:hover span { text-decoration: underline; }
.post-sources { max-width: 70ch; margin-top: var(--s-6); padding-top: var(--s-4); border-top: 1px solid var(--border); font-size: var(--fs-sm); color: var(--text-muted); }
.post-sources h2 { font-size: var(--fs-md); margin: 0 0 var(--s-2); color: var(--text); }
.post-sources ol { padding-left: 1.2em; margin: 0; display: grid; gap: .3em; }
.post-sources a { color: inherit; overflow-wrap: anywhere; }
.post-products, .post-more { padding-block: var(--s-6); }
.post-products .h2, .post-more .h2 { margin-bottom: var(--s-5); }

@media (max-width: 1000px) {
  .post-layout { grid-template-columns: minmax(0, 1fr); gap: var(--s-5); }
  .post-side { position: static; }
  .blog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .blog-hero { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .blog-hero-body { padding: var(--s-4); }
  .blog-hero-title { font-size: var(--fs-xl); }
  .blog-grid { grid-template-columns: minmax(0, 1fr); }
  .post-body { font-size: 1rem; }
}