/* Mujer de Fe · el blog con el diseño de luz (26-10-2026): debajo de la portadilla, los filtros por categoría (píldoras
   con borde de oro; la activa, rosa con su brillo), la rejilla de tarjetas (tarjetas.css) y la paginación. */

.blog { position: relative; padding-bottom: 20px; }

/* ---------- Filtros ---------- */
.filtros { margin: clamp(10px, 2vw, 24px) 0 clamp(34px, 4vw, 50px); }
.filtros ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.filtro {
  position: relative; display: inline-flex; align-items: center; min-height: 46px; padding: 10px 24px; overflow: hidden;
  background: rgba(255, 255, 255, .7); color: var(--chocolate); border-radius: 999px; text-decoration: none;
  box-shadow: inset 0 0 0 1px rgba(201, 161, 74, .45);
  font: 600 12px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase;
  transition: background .35s, color .35s, box-shadow .35s, translate .35s var(--curva);
}
.filtro:hover { background: #fff; box-shadow: inset 0 0 0 1px var(--oro), 0 10px 24px -14px rgba(201, 161, 74, .8); translate: 0 -2px; }
.filtro[aria-current="page"] {
  background: linear-gradient(180deg, #CB5274, var(--rosa-fuerte) 60%); color: #fff;
  box-shadow: 0 10px 26px -10px rgba(191, 69, 102, .6);
}
.filtro[aria-current="page"]::after {
  content: ""; position: absolute; inset: -20% auto -20% -60%; width: 40%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .5), transparent);
  transform: skewX(-20deg); animation: brillo 4.5s 1s infinite var(--curva);
}

/* ---------- Rejilla (al cambiar de filtro con JS, un fundido) ---------- */
.rejilla-zona { transition: opacity .25s ease, filter .25s ease; }
.rejilla-zona.cargando { opacity: .3; filter: blur(4px); }
.rejilla-aviso { margin: -14px 0 28px; text-align: center; color: var(--gris); }
.rejilla-aviso a { margin-left: 8px; color: var(--rosa-fuerte); }
.vacio {
  max-width: 560px; margin: 20px auto; padding: 46px 34px; text-align: center;
  background: radial-gradient(ellipse at 50% 0%, #2A1A2C, var(--noche) 70%); color: rgba(248, 235, 217, .85); border-radius: 24px;
  box-shadow: 0 30px 60px -30px rgba(30, 21, 32, .8);
}
.vacio-corazon { width: 46px; height: 42px; margin: 0 auto 12px; fill: none; stroke: var(--oro-claro); stroke-width: 2; filter: drop-shadow(0 0 8px rgba(243, 212, 138, .7)); }
.vacio-titulo { margin-bottom: 10px; font: 400 46px/1.05 var(--caligrafia); color: var(--luz); }
.vacio a { color: var(--oro-claro); }

/* ---------- Paginación ---------- */
.paginacion { display: flex; justify-content: center; align-items: center; gap: 10px; margin-top: 56px; }
.pagina {
  display: grid; place-items: center; min-width: 46px; height: 46px; padding: 0 6px; border-radius: 50%;
  background: #fff; color: var(--chocolate); box-shadow: inset 0 0 0 1px rgba(201, 161, 74, .4);
  font: 600 15px/1 var(--sans); text-decoration: none;
  transition: background .3s, color .3s, box-shadow .3s, translate .3s var(--curva);
}
a.pagina:hover { box-shadow: inset 0 0 0 1px var(--oro), 0 10px 20px -12px rgba(201, 161, 74, .9); translate: 0 -2px; }
.pagina-actual { background: linear-gradient(180deg, #CB5274, var(--rosa-fuerte) 60%); color: #fff; box-shadow: 0 8px 20px -8px rgba(191, 69, 102, .6); }
.pagina-flecha .icono { width: 18px; height: 18px; stroke-width: 2; }
span.pagina-flecha { opacity: .4; }
.pagina-puntos { box-shadow: none; background: none; color: var(--gris); }

@media (max-width: 640px) {
  .filtros ul { gap: 8px; }
  .filtro { min-height: 44px; padding: 10px 16px; font-size: 11px; }
}