/* ============================================================
   Estilos del blog. Se carga DESPUÉS de style.css, del que
   hereda colores, tipografías y componentes.
   ============================================================ */

/* ---------- cabecera de sección del blog ---------- */
.blog-head{padding:clamp(56px,9vh,110px) var(--pad) clamp(32px,5vh,56px);
  border-bottom:1px solid var(--line)}
.blog-head h1{
  margin:20px 0 0;font-family:var(--serif);font-style:italic;font-weight:400;
  font-size:clamp(40px,7vw,96px);line-height:.95;letter-spacing:-.015em;
}
.blog-head h1 em{color:var(--accent);font-style:italic}
.blog-head__lede{margin:24px 0 0;max-width:56ch;font-size:16.5px;
  line-height:1.7;color:var(--ink-70)}

/* ---------- listado de artículos ---------- */
.posts{padding:clamp(48px,7vh,90px) var(--pad) clamp(60px,9vh,120px)}
.posts__list{border-top:1px solid var(--line)}

.post-card{
  display:grid;grid-template-columns:150px minmax(0,1fr);gap:32px;
  padding:34px 0;border-bottom:1px solid var(--line);
  transition:background .25s,padding-left .25s;
}
.post-card:hover{background:var(--cream-2);padding-left:14px}
.post-card__date{font-family:var(--mono);font-size:10px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-35);padding-top:8px}
.post-card h2{
  margin:0 0 10px;font-family:var(--serif);font-style:italic;font-weight:400;
  font-size:clamp(24px,3.2vw,34px);line-height:1.12;
}
.post-card:hover h2{color:var(--accent)}
.post-card p{margin:0 0 16px;font-size:15px;line-height:1.65;
  color:var(--ink-70);max-width:62ch}
.post-card__more{font-family:var(--mono);font-size:10px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-55)}

/* ---------- artículo ---------- */
.article{max-width:720px;margin:0 auto;
  padding:clamp(40px,6vh,72px) var(--pad) clamp(60px,9vh,110px)}

.article__meta{display:flex;gap:16px;flex-wrap:wrap;align-items:center;
  font-family:var(--mono);font-size:10px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-35)}
.article__meta span:not(:last-child)::after{content:" ·";margin-left:16px}

.article h1{
  margin:18px 0 0;font-family:var(--serif);font-style:italic;font-weight:400;
  font-size:clamp(34px,5.4vw,60px);line-height:1.05;letter-spacing:-.01em;
}
.article__standfirst{margin:24px 0 0;font-size:19px;line-height:1.6;
  color:var(--ink-70);text-wrap:pretty}

.article__body{margin-top:44px;padding-top:36px;border-top:1px solid var(--line)}
.article__body h2{
  margin:52px 0 14px;font-family:var(--serif);font-style:italic;font-weight:400;
  font-size:clamp(25px,3.6vw,34px);line-height:1.15;scroll-margin-top:100px;
}
.article__body h3{
  margin:34px 0 10px;font-family:var(--serif);font-style:italic;font-weight:400;
  font-size:22px;line-height:1.2;
}
.article__body p{margin:0 0 20px;font-size:16.5px;line-height:1.75;color:var(--ink-70)}
.article__body strong{color:var(--ink);font-weight:600}
.article__body a{color:var(--ink);border-bottom:1px solid var(--accent)}
.article__body a:hover{color:var(--accent)}
.article__body ul,.article__body ol{margin:0 0 22px;padding-left:22px;
  font-size:16.5px;line-height:1.75;color:var(--ink-70)}
.article__body li{margin-bottom:9px}
.article__body li::marker{color:var(--accent)}

.article__body blockquote{
  margin:32px 0;padding:4px 0 4px 24px;border-left:2px solid var(--accent);
  font-family:var(--serif);font-style:italic;font-size:22px;line-height:1.45;
}
.article__body blockquote p{font:inherit;color:var(--ink);margin:0}

.article__body table{width:100%;border-collapse:collapse;margin:26px 0;font-size:14.5px}
.article__body th,.article__body td{border:1px solid var(--line);
  padding:11px 13px;text-align:left;vertical-align:top;color:var(--ink-70)}
.article__body th{font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-55);font-weight:400;background:var(--cream-2)}

.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* Caja destacada dentro del artículo */
.callout{
  margin:32px 0;padding:26px 28px;background:var(--cream-2);
  border:1px solid var(--line);
}
.callout p:last-child{margin-bottom:0}
.callout__title{margin:0 0 10px!important;font-family:var(--mono);font-size:10px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--accent)!important}

/* Índice del artículo */
.toc{margin:0 0 12px;padding:24px 26px;border:1px solid var(--line)}
.toc p{margin:0 0 12px!important;font-family:var(--mono);font-size:10px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--ink-35)!important}
.toc ol{margin:0;padding-left:20px;font-size:15px}
.toc li{margin-bottom:7px}
.toc a{color:var(--ink-70);border-bottom:1px solid transparent}
.toc a:hover{color:var(--accent);border-bottom-color:var(--accent)}

/* Cierre del artículo */
.article__cta{
  margin-top:56px;padding:32px 30px;background:var(--ink);color:var(--cream);
}
.article__cta h2{margin:0 0 12px;font-family:var(--serif);font-style:italic;
  font-weight:400;font-size:28px;line-height:1.15;color:var(--cream)}
.article__cta p{margin:0 0 22px;font-size:15.5px;line-height:1.65;color:var(--cream-70)}
.article__cta .btn{border-color:var(--cream);color:var(--cream)}
.article__cta .btn--solid{background:var(--accent);border-color:var(--accent);color:var(--ink)}
.article__cta .btn--solid:hover{background:var(--cream);border-color:var(--cream);color:var(--ink)}
.article__cta .btn--ghost:hover{background:var(--cream);color:var(--ink)}
.article__cta .hero__cta{margin-top:0}

.article__nav{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;
  margin-top:44px;padding-top:24px;border-top:1px solid var(--line);
  font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase}
.article__nav a{color:var(--ink-55)}
.article__nav a:hover{color:var(--accent)}

/* ---------- responsive ---------- */
@media (max-width:700px){
  .post-card{grid-template-columns:1fr;gap:10px;padding:26px 0}
  .post-card__date{padding-top:0}
  .article__body h2{margin-top:40px}
}