La anatomía del blog: sus complementos

/* mobile.css · el sidebar baja DEBAJO del artículo en pantallas angostas.
   No desaparece: los enlaces de categorías siguen accesibles, solo cambian de lugar. */
.article-grid { display: grid; grid-template-columns: 1fr 300px; gap: var(--sp-6); }
@media (max-width: 900px) {
  .article-grid { grid-template-columns: 1fr; }        /* 1 columna */
  .sidebar      { order: 2; }                           /* sidebar al final */
  .article-body { order: 1; }                           /* artículo primero */
}

/* mobile.css · la card de artículo se toca cómodo en el teléfono. */
@media (max-width: 1024px) {
  a, button, [role="button"] {
    -webkit-tap-highlight-color: rgba(91, 61, 245, .15); /* feedback al tap */
  }
}
@media (max-width: 768px) {
  /* imagen de la card ocupa el ancho completo */
  .acard__img { width: 100%; aspect-ratio: 16/9; object-fit: cover; }
  /* botón «Leer artículo» con área táctil mínima de 44 px */
  .acard__cta { min-height: 44px; display: inline-flex; align-items: center; }
}

/* La paginación del listado es mobile-first: botones apilados en móvil.
   El link «Anterior» y «Siguiente» tienen área táctil de 44px. */
.pagination { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-2); }
@media (max-width: 480px) {
  /* en pantallas muy estrechas, solo Anterior/Siguiente (los números se ocultan) */
  .pagination__num { display: none; }
  .pagination__prev, .pagination__next { flex: 1; justify-content: center; }
}
/* área táctil de 44 px en cualquier botón de paginación */
.pagination a, .pagination button { min-height: 44px; display: inline-flex; align-items: center; }