/* Blog convencional: imagen, fecha, título, resumen y enlace, con un formato común. */
.blog-index { color:var(--blue-deep); padding-bottom:4rem; }
.blog-index-heading { padding:2.7rem 0 2rem; border-bottom:1px solid var(--line); margin-bottom:2rem; }
.blog-index-heading .eyebrow { color:var(--blue); font-size:.88rem; }
.blog-index-heading h1 { margin:.4rem 0 .7rem; font-size:clamp(2.7rem,5vw,3.8rem); line-height:1.1; letter-spacing:-.035em; }
.blog-index-heading > p:last-child { margin:0; font-size:1.1rem; color:#54718d; }
.blog-post-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1.75rem; }
.blog-post-card { display:flex; flex-direction:column; min-width:0; overflow:hidden; border:1px solid #deebf4; border-radius:.9rem; background:white; }
.blog-post-cover { display:flex; align-items:center; justify-content:center; width:100%; aspect-ratio:4 / 3; padding:.65rem; background:#f3f7fa; border-bottom:1px solid #e7eef4; }
.blog-post-cover img { display:block; width:100%; height:100%; object-fit:contain; }
.blog-post-copy { display:flex; flex-direction:column; flex:1; padding:1.4rem; }
.blog-post-copy time { font-size:.87rem; font-weight:600; color:#54718d; }
.blog-post-copy h2 { margin:.6rem 0 .9rem; font-size:1.45rem; font-weight:700; line-height:1.2; letter-spacing:-.02em; }
.blog-post-copy h2 a { text-decoration:none; color:var(--blue-deep); }
.blog-post-copy h2 a:hover { text-decoration:underline; text-underline-offset:.15em; }
.blog-post-copy > p { margin:0 0 1.4rem; font-size:1rem; color:#315674; line-height:1.6; }
.blog-post-read { display:inline-flex; align-items:center; gap:1.2rem; align-self:start; margin-top:auto; padding:.55rem 1rem; border-radius:2rem; background:var(--yellow); color:var(--blue-deep); font-size:.92rem; font-weight:700; text-decoration:none; }
.blog-post-read:hover { background:#ffdc18; }
.blog-index a:focus-visible { outline:3px solid var(--blue); outline-offset:4px; }
@media(max-width:1000px) { .blog-post-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:650px) { .blog-post-grid { grid-template-columns:1fr; gap:1.5rem; } .blog-index-heading { padding-top:2rem; } .blog-post-copy h2 { font-size:1.65rem; } .blog-post-copy { padding:1.3rem; } }
/* Fijar el espacio de portada para que el formato original no cambie la altura de la tarjeta. */
.blog-post-cover { position:relative; flex:none; min-height:0; overflow:hidden; }
.blog-post-cover img { position:absolute; inset:.65rem; width:calc(100% - 1.3rem); height:calc(100% - 1.3rem); }