/* ============================================================
   BLOG (paginas/blog.html y paginas/articulo.html)
   Usa las variables de base.css (--stone, --card, --ink...).
   ============================================================ */

/* ---------- Listado ---------- */
.blog-grid{
  display:grid;
  gap:22px;
  grid-template-columns:repeat(auto-fill, minmax(300px, 1fr));
}
.blog-card{
  display:flex;
  flex-direction:column;
  background:var(--card);
  border:1px solid var(--line);
  color:var(--ink);
  text-decoration:none;
  transition:transform .2s ease, box-shadow .2s ease;
}
.blog-card:hover{
  transform:translateY(-3px);
  box-shadow:0 10px 28px rgba(42,40,31,0.12);
}
.blog-card-img{
  aspect-ratio:16/9;
  overflow:hidden;
  background:#3a3626;
}
.blog-card-img img{width:100%; height:100%; object-fit:cover; display:block;}
.blog-card-body{padding:20px 22px 22px; display:flex; flex-direction:column; flex:1;}
.blog-card-meta{
  font-family:'JetBrains Mono', monospace;
  font-size:0.68rem;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--olive);
  margin-bottom:10px;
}
.blog-card h3{
  font-size:1.3rem;
  line-height:1.2;
  margin-bottom:10px;
}
.blog-card p{
  color:var(--ink-soft);
  font-size:0.94rem;
  line-height:1.6;
  margin-bottom:16px;
}
.blog-card-more{
  margin-top:auto;
  font-weight:600;
  font-size:0.9rem;
  color:var(--clay-deep);
}

/* ---------- Artículo ---------- */
.articulo{max-width:760px; margin:0 auto;}
.articulo-title{
  font-size:clamp(1.9rem, 4vw, 2.7rem);
  line-height:1.12;
  margin-bottom:14px;
}
.articulo-meta{
  font-family:'JetBrains Mono', monospace;
  font-size:0.74rem;
  letter-spacing:0.04em;
  text-transform:uppercase;
  color:var(--ink-soft);
  margin-bottom:26px;
}
.articulo-cover{
  aspect-ratio:16/9;
  overflow:hidden;
  background:#3a3626;
  margin-bottom:30px;
}
.articulo-cover img{width:100%; height:100%; object-fit:cover; display:block;}
.articulo-lead{
  font-size:1.15rem;
  line-height:1.65;
  color:var(--ink);
  margin-bottom:26px;
  padding-left:18px;
  border-left:3px solid var(--brass);
}
.articulo-body{color:var(--ink-soft); font-size:1.02rem; line-height:1.75;}
.articulo-body p{margin-bottom:18px;}
.articulo-body h2{
  font-size:1.6rem;
  line-height:1.2;
  margin:38px 0 14px;
}
.articulo-body h3{
  font-size:1.25rem;
  margin:28px 0 10px;
}
.articulo-body h4{font-size:1.05rem; margin:22px 0 8px; color:var(--ink);}
.articulo-body ul,
.articulo-body ol{margin:0 0 20px 22px;}
.articulo-body li{margin-bottom:8px;}
.articulo-body strong{color:var(--ink);}
.articulo-body a{color:var(--clay-deep); text-decoration:underline; text-underline-offset:2px;}
.articulo-body blockquote{
  margin:24px 0;
  padding:16px 20px;
  background:var(--card);
  border-left:3px solid var(--olive);
  color:var(--ink);
}
.articulo-body blockquote p{margin:0;}
.blog-table{overflow-x:auto; margin:6px 0 24px;}
.blog-table table{
  width:100%;
  border-collapse:collapse;
  background:var(--card);
  font-size:0.94rem;
}
.blog-table th,
.blog-table td{
  padding:10px 14px;
  text-align:left;
  border-bottom:1px solid var(--line);
  white-space:nowrap;
}
.blog-table th{
  font-family:'JetBrains Mono', monospace;
  font-size:0.72rem;
  letter-spacing:0.05em;
  text-transform:uppercase;
  color:var(--card);
  background:var(--olive);
}
.blog-table tr:last-child td{border-bottom:none;}

.articulo-cta{
  margin-top:40px;
  padding:28px;
  background:var(--ink);
  color:var(--card);
}
.articulo-cta h3{color:var(--card); font-size:1.35rem; margin-bottom:8px;}
.articulo-cta p{color:rgba(251,248,241,0.8); margin-bottom:18px;}
.articulo-cta .btns{display:flex; flex-wrap:wrap; gap:12px;}
.articulo-cta .btn-dark-outline{color:var(--card); border-color:rgba(251,248,241,0.55);}
.articulo-cta .btn-dark-outline:hover{background:rgba(251,248,241,0.12); color:var(--card);}

.relacionados{max-width:1100px; margin:60px auto 0;}
.relacionados-title{font-size:1.5rem; margin-bottom:20px;}

@media (max-width:640px){
  .blog-grid{grid-template-columns:1fr;}
  .articulo-body{font-size:1rem;}
  .articulo-cta{padding:22px;}
}