/* ============================================================
   Blog · estilos sobre la base de /styles.css (misma marca).
   ============================================================ */

/* Grilla de artículos */
.blog-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(300px, 1fr));
  gap:clamp(18px, 3vw, 30px);
}
.blog-card{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  box-shadow:var(--shadow-sm);
  transition:transform .18s ease, box-shadow .18s ease;
}
.blog-card:hover{ transform:translateY(-3px); box-shadow:var(--shadow); }
.blog-card-img{
  display:block;
  aspect-ratio:16/10;
  background:var(--bg-2);
  overflow:hidden;
}
.blog-card-img img{ width:100%; height:100%; object-fit:cover; display:block; }
.blog-card-ph{
  width:100%; height:100%;
  display:grid; place-items:center;
  font-family:var(--display); font-weight:800; letter-spacing:.06em;
  color:var(--accent-dk); background:var(--accent-sf);
}
.blog-card-body{ padding:18px 20px 22px; display:flex; flex-direction:column; gap:8px; }
.blog-cat{
  align-self:flex-start;
  font-size:.72rem; font-weight:700; letter-spacing:.02em;
  color:var(--accent-dk); background:var(--accent-sf);
  padding:3px 10px; border-radius:999px;
}
.blog-card-body h2{ margin:0; font-size:1.16rem; line-height:1.3; font-family:var(--display); }
.blog-card-body h2 a{ color:var(--ink); text-decoration:none; }
.blog-card-body h2 a:hover{ color:var(--accent-dk); }
.blog-card-sub{ margin:0; color:var(--ink-soft); font-size:.94rem; }
.blog-card-meta{ margin:2px 0 0; color:var(--ink-mute); font-size:.82rem; }

/* Artículo */
.post{ max-width:760px; margin:0 auto; padding:0 var(--pad); }
.post-head{ text-align:center; padding:clamp(20px,4vw,40px) 0 10px; }
.post-head h1{ font-family:var(--display); font-size:clamp(1.8rem, 4.2vw, 2.7rem); line-height:1.15; margin:.3rem 0; }
.post-meta{ color:var(--ink-mute); font-size:.9rem; }
.post-cover{ margin:18px 0 0; border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow); }
.post-cover img{ width:100%; display:block; }
.post-body{ margin:28px 0 0; font-size:1.06rem; line-height:1.75; color:var(--ink-soft); }
.post-lead{ font-size:1.18rem; color:var(--ink); font-weight:500; }
.post-body h2{ font-family:var(--display); color:var(--ink); font-size:1.5rem; margin:1.8rem 0 .6rem; }
.post-body h3{ font-family:var(--display); color:var(--ink); font-size:1.2rem; margin:1.4rem 0 .5rem; }
.post-body p{ margin:0 0 1.1rem; }
.post-body a{ color:var(--accent-dk); text-decoration:underline; text-underline-offset:2px; }
.post-body ul, .post-body ol{ margin:0 0 1.1rem 1.2rem; padding:0; }
.post-body li{ margin:.3rem 0; }
.post-body img{ max-width:100%; height:auto; border-radius:var(--radius); margin:1.2rem 0; }
.post-body blockquote{ margin:1.4rem 0; padding:.6rem 1.1rem; border-left:4px solid var(--accent); background:var(--bg-2); border-radius:0 10px 10px 0; color:var(--ink); }

.post-cta{
  margin:36px auto 0; max-width:760px;
  text-align:center; padding:26px 20px;
  background:var(--accent-sf); border-radius:var(--radius-lg);
}
.post-cta p{ margin:0 0 12px; font-family:var(--display); font-weight:700; color:var(--ink); font-size:1.15rem; }

/* Seguí leyendo */
.blog-more{ display:flex; flex-direction:column; gap:10px; max-width:760px; margin:0 auto; }
.blog-more-item{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  background:var(--paper); border:1px solid var(--line); border-radius:12px;
  padding:14px 18px; color:var(--ink); text-decoration:none; font-weight:600;
  transition:border-color .15s, color .15s;
}
.blog-more-item:hover{ border-color:var(--accent); color:var(--accent-dk); }