/* Blog (/blog). Creado el 3/10/2026. Lo carga solo worker/plantilla.html.
   Todo con los tokens de site.css y las reglas de docs/design-system.md: el texto
   es --tx-hi o --tx-mid, nunca un neutro; los neutros son filete y fondo. Los
   contenedores nuevos van con el radio de 10px que pide el sistema, no con los
   18-22px que arrastra el resto del sitio como deuda. */

.blog-top{padding-top:calc(88px + 72px)}
@media(min-width:761px){.blog-top{padding-top:calc(88px + 96px)}}
.blog-col{max-width:760px}
.blog-col--ancha{max-width:1000px}

/* ── Listado ── */
.blog-grid{display:grid;grid-template-columns:1fr;gap:22px}
@media(min-width:640px){.blog-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:980px){.blog-grid{grid-template-columns:repeat(3,1fr);gap:26px}}
.blog-card{background:#FFFFFF;border:1px solid var(--line);border-radius:10px;overflow:hidden;transition:border-color 120ms var(--ease-out),box-shadow 240ms var(--ease-out)}
.blog-card:hover{border-color:var(--cyan-deep);box-shadow:0 18px 40px -26px rgba(11,59,71,.45)}
.blog-card__link{display:flex;flex-direction:column;height:100%}
.blog-card__link:focus-visible{outline:2px solid var(--cyan);outline-offset:3px;border-radius:10px}
.blog-card__img{aspect-ratio:16/10;background:var(--bg-2);overflow:hidden}
.blog-card__img img{width:100%;height:100%;object-fit:cover}
.blog-card__body{display:flex;flex-direction:column;gap:10px;padding:22px 22px 24px;flex:1}
.blog-card__tema{font-family:'IBM Plex Mono',monospace;font-size:11px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--tx-mid)}
.blog-card__title{font-family:'Space Grotesk',sans-serif;font-size:20px;font-weight:700;line-height:1.25;letter-spacing:-.01em;color:var(--tx-hi);margin:0}
.blog-card__lead{font-size:15px;line-height:1.6;color:var(--tx-mid);margin:0}
.blog-card__meta{margin:auto 0 0;padding-top:8px;font-family:'IBM Plex Mono',monospace;font-size:11.5px;letter-spacing:.04em;color:var(--tx-mid)}
.blog-vacio{font-size:17px;color:var(--tx-mid)}

/* ── Articulo ── */
.blog-art__head{margin-bottom:34px}
.blog-art__title{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:clamp(30px,5vw,48px);line-height:1.1;letter-spacing:-.02em;color:var(--tx-hi);margin:14px 0 0}
.blog-art__lead{font-size:clamp(17px,2.1vw,20px);line-height:1.6;color:var(--tx-mid);margin:18px 0 0}
.blog-firma{display:flex;align-items:center;gap:14px;margin-top:26px;padding-top:22px;border-top:1px solid var(--line)}
.blog-firma p{margin:0}
.blog-firma__quien{font-family:'Space Grotesk',sans-serif;font-size:15px;font-weight:600;color:var(--tx-hi)}
.blog-firma__quien a,.blog-autor__nombre a{text-decoration:underline;text-decoration-color:var(--ghost);text-underline-offset:3px}
.blog-firma__quien a:hover,.blog-autor__nombre a:hover{text-decoration-color:currentColor}
.blog-firma__cuando{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.04em;color:var(--tx-mid);margin-top:4px!important}

.blog-avatar{flex:0 0 auto;width:44px;height:44px;border-radius:999px;object-fit:cover;background:var(--bg-2)}
.blog-avatar--o2{display:grid;place-items:center;background:#FFFFFF;border:1px solid var(--line)}
.blog-avatar--o2 svg{width:70%;height:auto}
.blog-autor .blog-avatar{width:72px;height:72px}
.blog-perfil .blog-avatar{width:120px;height:120px}

.blog-art__cover{margin:0 0 40px;border-radius:10px;overflow:hidden;background:var(--bg-2)}
.blog-art__cover img{width:100%;height:auto}

/* El cuerpo: Plex Sans para leer, Space Grotesk para los titulos. */
.blog-prosa{font-size:18px;line-height:1.75;color:var(--tx-mid)}
.blog-prosa>*:first-child{margin-top:0}
.blog-prosa p,.blog-prosa ul,.blog-prosa ol{margin:0 0 1.15em}
.blog-prosa h2,.blog-prosa h3{font-family:'Space Grotesk',sans-serif;color:var(--tx-hi);letter-spacing:-.01em;line-height:1.25;scroll-margin-top:110px}
.blog-prosa h2{font-size:clamp(23px,3vw,28px);font-weight:700;margin:1.9em 0 .6em}
.blog-prosa h3{font-size:clamp(19px,2.4vw,21px);font-weight:600;margin:1.6em 0 .5em}
.blog-prosa strong{font-weight:600;color:var(--tx-hi)}
.blog-prosa a,.blog-fuentes a{color:var(--tx-hi);text-decoration:underline;text-decoration-color:var(--cyan-deep);text-underline-offset:3px}
.blog-prosa a:hover,.blog-fuentes a:hover{text-decoration-thickness:2px}
.blog-prosa li{margin:.35em 0}
.blog-prosa li>p{margin:0}
.blog-prosa ul{padding-left:1.2em}
.blog-prosa ul li::marker{color:var(--cyan-deep)}
.blog-prosa ol{padding-left:1.4em}
.blog-prosa ol li::marker{color:var(--tx-hi);font-family:'IBM Plex Mono',monospace;font-size:.85em}
.blog-prosa blockquote{margin:1.6em 0;padding:4px 0 4px 22px;border-left:3px solid var(--cyan);font-family:'Space Grotesk',sans-serif;font-size:21px;font-weight:600;line-height:1.5;color:var(--tx-hi)}
.blog-prosa blockquote p{margin:0}
.blog-prosa hr{border:0;border-top:1px solid var(--line-2);margin:2.2em 0}
.blog-fig{margin:2em 0;border-radius:10px;overflow:hidden}
.blog-fig img{width:100%;height:auto}

/* Bloques del final */
.blog-sec{margin-top:56px}
.blog-sec__title{font-family:'Space Grotesk',sans-serif;font-size:24px;font-weight:700;letter-spacing:-.01em;color:var(--tx-hi);margin:0 0 8px}
.blog-sec__title--lista{margin:56px 0 22px}
.blog-faq{margin-top:12px}
.blog-fuentes{font-size:15px;line-height:1.65;color:var(--tx-mid)}
.blog-fuentes ul,.blog-fuentes ol{padding-left:1.2em;margin:10px 0 0}
.blog-fuentes li{margin:.4em 0}
.blog-fuentes li>p{margin:0}

.blog-cta{margin-top:48px;padding:26px 26px 28px;border-radius:10px;background:#FFFFFF;border:1px solid var(--line)}
.blog-cta__tx{margin:0 0 16px;font-size:17px;line-height:1.55;color:var(--tx-mid)}
.blog-cta__tx strong{color:var(--tx-hi);font-weight:600}
.blog-cta__btns{display:flex;flex-wrap:wrap;gap:12px}

.blog-autor{display:flex;gap:18px;align-items:flex-start;margin-top:56px;padding-top:28px;border-top:1px solid var(--line)}
.blog-autor p{margin:0}
.blog-autor__nombre{font-family:'Space Grotesk',sans-serif;font-size:18px;font-weight:700;color:var(--tx-hi)}
.blog-autor__rol{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.04em;color:var(--tx-mid);margin-top:4px!important}
.blog-autor__bio{font-size:15.5px;line-height:1.6;color:var(--tx-mid);margin-top:10px!important}

.blog-volver{margin-top:44px}

/* ── Perfil de autor ── */
.blog-perfil{display:flex;flex-direction:column;gap:22px}
@media(min-width:640px){.blog-perfil{flex-direction:row;align-items:flex-start;gap:30px}}
.blog-perfil__mat{font-family:'IBM Plex Mono',monospace;font-size:12.5px;letter-spacing:.06em;color:var(--tx-mid);margin:10px 0 0}
.blog-perfil__links{display:flex;flex-wrap:wrap;gap:10px;list-style:none;padding:0;margin:18px 0 0}
.blog-perfil__links a{display:inline-flex;align-items:center;min-height:36px;padding:6px 14px;border-radius:999px;border:1px solid var(--ctrl-edge);font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--tx-hi)}
.blog-perfil__links a:hover{border-color:var(--ctrl-primary);background:#F7FBFC}

@media(prefers-reduced-motion:reduce){.blog-card{transition:none}}