/* Estilos propios del Blog. La base (colores, cabecera, pie, botones) viene de /assets/site.css */
.blog-list{padding-block:48px 80px}
.blog-list .chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:28px}
.blog-list .chip{border-radius:999px;padding:8px 16px;transition:border-color .15s ease,background .15s ease}
.blog-list .chip:hover{border-color:var(--teal)}
.empty{color:var(--muted);padding-block:24px}

.wrap.narrow{max-width:760px}
.post-hero{background:radial-gradient(800px 420px at 100% 0%,var(--a),transparent 60%),radial-gradient(600px 380px at 0% 100%,var(--b),transparent 60%),var(--hero);color:var(--hero-fg);padding-block:44px 56px}
.post-hero h1{font-size:clamp(32px,5vw,52px);font-weight:800;letter-spacing:-.025em}
.post-hero .lead{margin-top:18px;font-size:clamp(18px,2.2vw,21px);color:var(--hero-muted);line-height:1.5}
.byline{display:flex;align-items:center;gap:12px;margin-top:28px}
.avatar{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;font-family:var(--display);font-weight:800;font-size:16px;color:#081127;background:linear-gradient(135deg,#19E0CF,#7B5CFF);flex:none}
.byline b{display:block;font-size:15px}
.byline small{display:block;font-size:14px;color:var(--hero-muted)}
.read-bar{position:fixed;left:0;top:0;height:3px;width:100%;z-index:40;transform-origin:left;transform:scaleX(var(--rp,0));background:linear-gradient(90deg,#19E0CF,#2F7BFF,#7B5CFF,#FF5A1F)}
.prose{padding-block:48px 64px;font-size:18px;line-height:1.75}
.prose > * + *{margin-top:1.1em}
.prose h2{font-size:clamp(23px,2.8vw,28px);font-weight:700;letter-spacing:-.01em;line-height:1.2;margin-top:2em}
.prose h2 + *{margin-top:.6em}
.prose ul{list-style:none;padding:0;display:grid;gap:12px}
.prose li{position:relative;padding-left:28px}
.prose li::before{content:"";position:absolute;left:4px;top:.68em;width:9px;height:9px;border-radius:50%;background:var(--coral)}
.prose strong{color:var(--ink);font-weight:700}
.prose p,.prose li{color:color-mix(in srgb,var(--ink) 88%,var(--muted))}
.prose a{color:var(--teal);font-weight:600}
.related{padding-block:64px 80px}
.related h2{font-size:clamp(26px,3.4vw,36px);font-weight:800;letter-spacing:-.02em}