/* ── Blog de dforms.ai ──────────────────────────────────────────────────────
   Índice, categorías y posts (deploy/make-blog.py). Sólo tokens: el blog se
   ve como la landing en claro, con el verde de firma únicamente en los CTA. */

/* el nav es sticky y ya ocupa su alto: aquí no se le vuelve a sumar */
.blog{padding-block:var(--s-7) var(--s-section)}

/* migas de pan */
.migas ol{display:flex;flex-wrap:wrap;gap:var(--s-2);list-style:none;margin:0 0 var(--s-5);padding:0;font-size:var(--t-small);color:var(--fg-muted)}
.migas li+li::before{content:'/';margin-right:var(--s-2);color:var(--line)}
.migas a{color:inherit;text-decoration:none}
.migas a:hover{color:var(--fg)}
.migas a[aria-current]{color:var(--fg-body)}
.migas li:last-child a{display:inline-block;max-width:40ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:bottom}

/* cabecera del índice */
.blog__h1,.post__h1{
  font-size:clamp(36px,5vw,64px);
  font-weight:var(--w-display);
  letter-spacing:var(--track-h2);
  line-height:1.05;
  color:var(--fg);
  margin:0;
  max-width:22ch;
  text-wrap:balance;
}
.blog__cab .lead{margin-top:var(--s-4);max-width:var(--measure)}
.pestanas{display:flex;flex-wrap:wrap;gap:var(--s-2);margin-top:var(--s-6)}
.pestanas a{
  padding:var(--s-2) var(--s-4);
  border:1px solid var(--line);
  border-radius:999px;
  font-size:var(--t-small);
  color:var(--fg-body);
  text-decoration:none;
}
.pestanas a:hover{border-color:var(--fg-muted)}
.pestanas a[aria-current]{background:var(--fg);border-color:var(--fg);color:var(--bg)}

/* rejilla de tarjetas: 1 a 3 columnas según el ancho, nunca estiradas */
.blog__lista{margin-top:var(--s-7)}
.blog:has(.blog__lista) {background:linear-gradient(to bottom,var(--bg) 0,var(--bg) 420px,var(--bg-alt) 420px)}
.rejilla{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,320px),1fr));gap:var(--s-6) var(--s-5);list-style:none;margin:0;padding:0}
.tarjeta{display:flex}
.tarjeta__link{display:flex;flex-direction:column;width:100%;color:inherit;text-decoration:none;background:var(--bg);border:1px solid var(--line);border-radius:16px;overflow:hidden;transition:border-color .2s,box-shadow .2s,transform .2s}
.tarjeta__link:hover{border-color:var(--fg-muted);box-shadow:0 12px 32px -16px rgb(26 26 28 / .25);transform:translateY(-2px)}
.tarjeta__cuerpo{display:flex;flex-direction:column;gap:var(--s-2);flex:1;padding:var(--s-5)}
@media (prefers-reduced-motion:reduce){.tarjeta__link{transition:none}.tarjeta__link:hover{transform:none}}
.tarjeta__img{display:block;width:100%;height:auto;aspect-ratio:1200/630;object-fit:cover;background:var(--bg-alt);border-bottom:1px solid var(--line)}
.tarjeta__cat{font-size:var(--t-label);letter-spacing:var(--track-label);text-transform:uppercase;font-weight:var(--w-semi);color:var(--fg-muted)}
.tarjeta__tit{font-size:var(--t-h3);line-height:var(--lh-h3);font-weight:var(--w-semi);color:var(--fg)}
.tarjeta__link:hover .tarjeta__tit{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.tarjeta__desc{font-size:var(--t-small);color:var(--fg-body);line-height:var(--lh-body)}
.tarjeta__meta{margin-top:auto;padding-top:var(--s-2);font-size:var(--t-small);color:var(--fg-muted)}
.blog__vacio{color:var(--fg-muted);font-size:var(--t-lead)}

/* paginación: números enlazados, cada página con su canonical */
.paginador{display:flex;flex-wrap:wrap;gap:var(--s-2);margin-top:var(--s-8);justify-content:center}
.paginador a{min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center;padding:0 var(--s-4);border:1px solid var(--line);border-radius:999px;color:var(--fg-body);text-decoration:none;font-size:var(--t-small)}
.paginador a[aria-current]{background:var(--fg);border-color:var(--fg);color:var(--bg)}

/* el post: cabecera en banda gris con la portada al lado en escritorio, como dapta.ai */
.blog:has(.post){padding-top:0}
.post__banda{background:var(--bg-alt);border-bottom:1px solid var(--line);padding-block:var(--s-8)}
.post__hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s-8);align-items:center}
.post__hero--sin-portada{grid-template-columns:minmax(0,1fr);max-width:calc(var(--measure) + 2 * var(--gutter))}
.post__cat{display:inline-block;font-size:var(--t-label);letter-spacing:var(--track-label);text-transform:uppercase;font-weight:var(--w-semi);color:var(--fg-muted);text-decoration:none;margin-bottom:var(--s-4)}
.post__cab .lead{margin-top:var(--s-5)}
.post__meta{margin-top:var(--s-4);font-size:var(--t-small);color:var(--fg-muted)}
.post__portada{display:block;width:100%;height:auto;aspect-ratio:1200/630;object-fit:cover;border-radius:16px;border:1px solid var(--line)}
.autor{display:flex;align-items:center;gap:var(--s-3);margin-top:var(--s-6)}
.autor__foto{width:48px;height:48px;border-radius:50%;object-fit:cover;background:var(--firma)}
.autor p{display:flex;flex-direction:column;line-height:1.3}
.autor__nombre{font-weight:var(--w-semi);color:var(--fg);font-size:var(--t-small)}
.autor__rol{color:var(--fg-muted);font-size:var(--t-small)}
.post__cuerpo{margin-top:var(--s-8)}
.post__cuerpo>*{max-width:var(--measure)}
@media (min-width:1100px){
  .post__cuerpo{display:grid;grid-template-columns:minmax(0,var(--measure)) 280px;justify-content:space-between;gap:var(--s-8);align-items:start}
  .post__cuerpo .prosa{grid-column:1;grid-row:1;margin-top:0}
  .post__cuerpo .indice{grid-column:2;grid-row:1;position:sticky;top:calc(var(--nav-h) + var(--s-5))}
}

/* tabla de contenidos */
.indice{padding:var(--s-5) var(--s-6);border:1px solid var(--line);border-radius:16px;background:var(--bg-alt)}
.indice__tit{font-size:var(--t-label);letter-spacing:var(--track-label);text-transform:uppercase;font-weight:var(--w-semi);color:var(--fg-muted);margin:0 0 var(--s-3)}
.indice ol{list-style:decimal;margin:0;padding-left:1.25em;display:grid;gap:var(--s-2);font-size:var(--t-small)}
.indice a{color:var(--fg-body);text-decoration:none}
.indice a:hover{color:var(--fg);text-decoration:underline;text-underline-offset:3px}

.prosa{margin-top:var(--s-7);font-size:var(--t-body);line-height:1.7;color:var(--fg-body)}
.prosa>*+*{margin-top:var(--s-5)}
.prosa h2{font-size:clamp(26px,2.6vw,34px);line-height:1.15;letter-spacing:-0.02em;font-weight:var(--w-display);color:var(--fg);margin-top:var(--s-8);scroll-margin-top:calc(var(--nav-h) + var(--s-4))}
.prosa h3{font-size:var(--t-h3);line-height:var(--lh-h3);font-weight:var(--w-semi);color:var(--fg);margin-top:var(--s-7);scroll-margin-top:calc(var(--nav-h) + var(--s-4))}
.prosa a{color:var(--fg);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.prosa strong{color:var(--fg);font-weight:var(--w-semi)}
.prosa ul,.prosa ol{padding-left:1.25em}
.prosa ul{list-style:disc}
.prosa ol{list-style:decimal}
.prosa li::marker{color:var(--fg-muted)}
.prosa li+li{margin-top:var(--s-2)}
.prosa blockquote{margin-inline:0;padding-left:var(--s-5);border-left:3px solid var(--firma);color:var(--fg)}
.prosa code{font-family:var(--font-mono);font-size:.88em;background:var(--bg-alt);border:1px solid var(--line);border-radius:6px;padding:.1em .35em}
.prosa pre{overflow-x:auto;background:var(--bg-dark);color:var(--fg-on-dark);border-radius:12px;padding:var(--s-5);font-size:15px;line-height:1.6}
.prosa pre code{background:none;border:0;padding:0;color:inherit}
.prosa img{max-width:100%;height:auto;border-radius:12px}
.prosa__tabla{overflow-x:auto;border:1px solid var(--line);border-radius:12px}
.prosa table{width:100%;border-collapse:collapse;font-size:var(--t-small);line-height:1.5}
.prosa th,.prosa td{padding:var(--s-3) var(--s-4);text-align:left;vertical-align:top;border-bottom:1px solid var(--line)}
.prosa th{background:var(--bg-alt);color:var(--fg);font-weight:var(--w-semi)}
.prosa tr:last-child td{border-bottom:0}

/* CTA: el único verde de la página */
.blog-cta{margin-block:var(--s-8);padding:var(--s-6);border-radius:16px;background:var(--bg-alt);border:1px solid var(--line)}
.prosa .blog-cta>*+*{margin-top:var(--s-3)}
.blog-cta__tit{font-size:var(--t-h3);font-weight:var(--w-semi);color:var(--fg);line-height:var(--lh-h3)}
.blog-cta__txt{color:var(--fg-body);font-size:var(--t-small)}
.blog-cta .btn{margin-top:var(--s-4);background:var(--firma);color:var(--fg-on-firma);text-decoration:none}

.relacionados{margin-top:var(--s-section)}
.relacionados .h3{margin-bottom:var(--s-6)}

@media (max-width:900px){
  .post__hero{grid-template-columns:minmax(0,1fr);gap:var(--s-6)}
  .post__portada{order:2}
}
@media (max-width:640px){
  .indice{padding:var(--s-4) var(--s-5)}
  .blog{padding-top:var(--s-5)}
  .post__banda{padding-block:var(--s-6)}
  .blog-cta{padding:var(--s-5)}
  .prosa h2{margin-top:var(--s-7)}
  .nav__links{display:none}
}

/* en el post, la última miga repetiría el titular que está justo debajo */
.post .migas li:last-child{display:none}