/* Blog (/blog/ y /blog/<slug>.html). Va después de site.css, el CSS de la landing: usa sus tokens,
   su .wrap, .h2, .lead y .btn. La landing manda en el marco; la columna de lectura va tranquila. */

.blog ::selection{background:rgba(37,86,241,.16);color:var(--mid)}
.blog a:focus-visible{outline:2px solid var(--blue);outline-offset:4px;border-radius:8px}
.blog{padding:72px 0 128px}

/* ---------- Lista ---------- */
.blog-head{max-width:640px;margin-bottom:64px}
.blog-head .h2{font-size:clamp(48px,6.4vw,80px);margin:0 0 18px}

.blog-link{display:block;color:inherit}
.blog-thumb{aspect-ratio:16/10;overflow:hidden;border-radius:20px;background:var(--mist)}
.blog-thumb img{display:block;width:100%;height:100%;object-fit:cover}
.blog-date{font-size:14px;font-weight:600;color:var(--n500);margin-bottom:10px}
.blog-ctitle{font-size:22px;font-weight:800;line-height:1.22;letter-spacing:-.02em;color:var(--mid);text-wrap:balance;transition:color .2s var(--ease-out)}
.blog-excerpt{margin-top:10px;font-size:16px;line-height:1.6;color:var(--n700);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
@media (hover:hover) and (pointer:fine){.blog-link:hover .blog-ctitle{color:var(--blue)}}

.blog-feat{margin-bottom:96px}
.blog-feat .blog-link{display:grid;grid-template-columns:1.3fr 1fr;gap:56px;align-items:center}
.blog-feat .blog-thumb{border-radius:24px}
.blog-feat .blog-ctitle{font-size:clamp(30px,3.4vw,44px);line-height:1.08;letter-spacing:-.035em}
.blog-feat .blog-excerpt{margin-top:16px;font-size:18px;-webkit-line-clamp:4}

.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:64px 32px}
.blog-grid .blog-thumb{margin-bottom:22px}

.blog-pager{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-top:96px}
.blog-pages{font-size:14px;font-weight:600;color:var(--n500)}
.blog-empty{font-size:18px;line-height:1.6;color:var(--n700)}

/* ---------- Artículo ---------- */
.blog-article.wrap{max-width:704px}
.blog-back{display:inline-block;font-size:15px;font-weight:600;color:var(--n500);margin-bottom:40px;transition:color .2s var(--ease-out)}
.blog-back:hover{color:var(--blue)}
.blog-title{font-size:clamp(34px,4.6vw,54px);font-weight:800;line-height:1.05;letter-spacing:-.035em;color:var(--mid);text-wrap:balance}
.blog-meta{margin-top:20px;font-size:15px;font-weight:600;color:var(--n500)}
.blog-hero-img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;border-radius:24px;margin:40px 0 52px;background:var(--mist)}

.blog-prose{font-size:18px;line-height:1.75;color:var(--n700)}
.blog-prose>*+*{margin-top:1.15em}
.blog-prose h2{margin-top:2.1em;font-size:clamp(26px,3vw,32px);font-weight:800;line-height:1.15;letter-spacing:-.028em;color:var(--mid);text-wrap:balance}
.blog-prose h3{margin-top:1.8em;font-size:22px;font-weight:700;line-height:1.28;letter-spacing:-.015em;color:var(--mid)}
.blog-prose h4{margin-top:1.6em;font-size:18px;font-weight:700;color:var(--mid)}
.blog-prose :is(h2,h3,h4)+*{margin-top:.6em}
.blog-prose :is(strong,b){font-weight:700;color:var(--mid)}
.blog-prose a{color:var(--blue);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.blog-prose a:hover{text-decoration-thickness:2px}
.blog-prose :is(ul,ol){padding-left:1.3em}
.blog-prose li+li{margin-top:.5em}
.blog-prose li::marker{color:var(--blue)}
.blog-prose blockquote{padding:24px 28px;border-radius:20px;background:var(--mist);font-size:20px;line-height:1.55;font-weight:600;color:var(--mid)}
.blog-prose img{max-width:100%;height:auto;border-radius:16px}
.blog-prose table{width:100%;border-collapse:collapse;font-size:16px;line-height:1.5;font-variant-numeric:tabular-nums}
.blog-prose :is(th,td){padding:12px 14px;text-align:left;vertical-align:top}
.blog-prose th{font-weight:700;color:var(--mid);background:var(--mist)}
.blog-prose tbody tr:nth-child(even) td{background:#F8FAFD}
.blog-prose code{font-family:var(--mono);font-size:.88em;padding:.12em .4em;border-radius:6px;background:var(--mist);color:var(--mid)}
.blog-prose pre{padding:20px;border-radius:16px;background:var(--mist);overflow-x:auto}
.blog-prose pre code{padding:0;background:none}
.blog-prose hr{border:0;width:56px;height:4px;border-radius:2px;background:var(--n200);margin:2.6em 0}

.blog-cta{margin-top:80px;padding:44px 44px 48px;border-radius:28px;background:var(--mist)}
.blog-cta h2{font-size:clamp(26px,3.2vw,36px);font-weight:800;line-height:1.08;letter-spacing:-.032em;color:var(--mid);text-wrap:balance}
.blog-cta p{margin:14px 0 26px;max-width:480px;font-size:17px;line-height:1.6;color:var(--n700)}

.blog-404 .lead{margin-bottom:28px}

@media (max-width:900px){
  .blog{padding:44px 0 96px}
  .blog-head{margin-bottom:44px}
  .blog-feat{margin-bottom:72px}
  .blog-feat .blog-link{grid-template-columns:1fr;gap:24px}
  .blog-grid{grid-template-columns:1fr 1fr;gap:52px 24px}
  .blog-pager{margin-top:72px}
}
@media (max-width:640px){
  .blog-grid{grid-template-columns:1fr;gap:48px}
  .blog-pages{display:none}
  .blog-back{margin-bottom:28px}
  .blog-hero-img{border-radius:18px;margin:28px 0 36px}
  .blog-prose{font-size:17px}
  .blog-cta{margin-top:64px;padding:32px 24px 36px;border-radius:22px}
}