/* ==========================================================================
   Actualidad — listado, sidebar y artículo
   ========================================================================== */

.zr-actualidad{display:grid;grid-template-columns:1fr 320px;gap:72px;align-items:start;}

.zr-actualidad-lista{display:grid;grid-template-columns:repeat(2,1fr);gap:52px 40px;}

/* -------------------------------------------------------------------------
   Sidebar
   ------------------------------------------------------------------------- */

.zr-actualidad-aside{position:sticky;top:110px;display:flex;flex-direction:column;gap:44px;}

.zr-actualidad-aside .titulo{
  font-family:'Inter',sans-serif;font-weight:500;
  font-size:.7rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--tinta-3);
  padding-bottom:14px;margin-bottom:6px;
  border-bottom:1px solid var(--hair-fuerte);
}

.zr-actualidad-aside .recientes li{border-bottom:1px solid var(--hair);}
.zr-actualidad-aside .recientes a{display:block;padding:16px 0;}
.zr-actualidad-aside .recientes time{
  display:block;font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--tinta-3);margin-bottom:6px;
}
.zr-actualidad-aside .recientes .t{
  font-family:'Instrument Serif',Georgia,serif;
  font-size:1.05rem;line-height:1.25;color:var(--tinta);
  transition:color .22s;
}
.zr-actualidad-aside .recientes a:hover .t{color:var(--acento-oscuro);}

.zr-actualidad-aside .categorias li{border-bottom:1px solid var(--hair);}
.zr-actualidad-aside .categorias a{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:14px 0;font-size:.96rem;color:var(--tinta-2);
  transition:color .22s;
}
.zr-actualidad-aside .categorias a:hover,
.zr-actualidad-aside .categorias a.activa{color:var(--acento-oscuro);}
.zr-actualidad-aside .categorias .n{
  font-family:'Instrument Serif',Georgia,serif;font-size:1rem;color:var(--tinta-3);
}

.zr-aside-cta{background:var(--azul);color:var(--papel);padding:32px 28px;}
.zr-aside-cta .titulo{
  color:var(--acento-claro);border-bottom-color:var(--hair-oscuro);
}
.zr-aside-cta p{
  margin:16px 0 24px;font-size:.95rem;line-height:1.6;color:rgba(241,245,250,.72);
}
.zr-aside-cta .zr-btn{width:100%;}

/* -------------------------------------------------------------------------
   Estado vacío
   ------------------------------------------------------------------------- */

.zr-vacio{
  grid-column:1 / -1;
  padding:72px 32px;text-align:center;border:1px solid var(--hair);
}
.zr-vacio h3{font-size:1.6rem;}
.zr-vacio p{margin:14px 0 26px;color:var(--tinta-2);}

/* -------------------------------------------------------------------------
   Paginación
   ------------------------------------------------------------------------- */

.zr-paginacion{grid-column:1 / -1;margin-top:24px;}

.zr-pag{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  padding-top:32px;border-top:1px solid var(--hair);
}
.zr-pag-num,.zr-pag-btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:42px;height:42px;padding:0 14px;
  border:1px solid var(--hair);
  font-size:.9rem;color:var(--tinta-2);
  transition:background .22s,color .22s,border-color .22s;
}
.zr-pag-num:hover,.zr-pag-btn:hover{
  background:var(--azul);color:var(--papel);border-color:var(--azul);
}
.zr-pag-num.activa{
  background:var(--acento);color:#fff;border-color:var(--acento);
}
.zr-pag-btn.inactivo{opacity:.4;pointer-events:none;}
.zr-pag-puntos{padding:0 6px;color:var(--tinta-3);}

/* -------------------------------------------------------------------------
   Artículo
   ------------------------------------------------------------------------- */

.zr-articulo-portada{background:var(--azul);padding-bottom:0;}
.zr-articulo-portada .zr-wrap{padding-top:0;}
.zr-articulo-portada img{
  width:100%;aspect-ratio:16/8;object-fit:cover;
  margin-top:-48px;position:relative;z-index:2;
}

.zr-articulo{display:grid;grid-template-columns:1fr 300px;gap:72px;align-items:start;}
.zr-articulo .zr-articulo-aside{position:sticky;top:110px;}

/* -------------------------------------------------------------------------
   Responsive
   ------------------------------------------------------------------------- */

@media(max-width:1100px){
  .zr-actualidad{grid-template-columns:1fr;gap:56px;}
  .zr-actualidad-aside{position:static;}
  .zr-articulo{grid-template-columns:1fr;gap:48px;}
  .zr-articulo .zr-articulo-aside{position:static;max-width:420px;}
}

@media(max-width:760px){
  .zr-actualidad-lista{grid-template-columns:1fr;gap:44px;}
  .zr-articulo-portada img{aspect-ratio:16/10;margin-top:-28px;}
}