/* Cards de articulo del blog: las usan el listado (blog.html) y
   "Artículos relacionados" (blog-articulo.html). Un solo archivo para
   que sean siempre identicas. La categoria vive sobre la imagen; al
   pasar el cursor la foto se acerca y aparece la flecha abajo a la
   derecha. */
.blog-grid{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(2rem,3.5vw,3.2rem) clamp(1.4rem,2.5vw,2.4rem);
  width:100%;max-width:1180px;text-align:left;
  margin-top:clamp(3rem,6vh,4.5rem);
}
a.blog-card{display:block;position:relative}
a.blog-card[hidden]{display:none}
a.blog-card .blog-img{position:relative;aspect-ratio:16/10}
a.blog-card:hover .blog-img img{transform:scale(1.05)}
.blog-grid .blog-cat{
  position:absolute;top:14px;left:14px;z-index:2;
  background:rgba(0,0,0,0.42);border-color:rgba(245,245,245,0.3);color:#f5f5f5;
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
}
body.dia .blog-grid .blog-cat{border-color:rgba(245,245,245,0.3)}
a.blog-card .blog-img::after{
  content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,0.3),transparent 42%);
}
a.blog-card .blog-img::before{
  content:'';position:absolute;right:14px;bottom:14px;z-index:2;
  width:38px;height:38px;border-radius:50%;
  background:#f5f5f5 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M2.5 7h9M8 3.5 11.5 7 8 10.5' fill='none' stroke='%23161311' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/13px no-repeat;
  opacity:0;transform:translateY(6px);
  transition:opacity 0.3s ease,transform 0.3s ease;
}
a.blog-card:hover .blog-img::before{opacity:1;transform:translateY(0)}
a.blog-card .blog-titulo{font-size:clamp(1.1rem,1.6vw,1.35rem)}
a.blog-card .blog-fecha{display:block;margin-top:0.55rem}
@media(max-width:900px){.blog-grid{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.blog-grid{grid-template-columns:1fr}}