/* Mujer de Fe · las tarjetas de artículo y su rejilla, con el diseño de luz (26-10-2026): blancas sobre la crema, se
   inclinan en 3D hacia el ratón (--rx, --ry) con un reflejo que lo sigue (--mx, --my), la foto se acerca y el título se
   subraya en oro. Las entradas, escalonadas, las anima paginas.js. */

.rejilla { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 2.4vw, 34px); perspective: 1200px; }

.tarjeta {
  --rx: 0deg; --ry: 0deg; --mx: 50%; --my: 50%;
  position: relative; display: flex; flex-direction: column; overflow: hidden;
  background: #fff; border-radius: 20px;
  box-shadow: 0 1px 0 rgba(201, 161, 74, .18) inset, 0 24px 50px -30px rgba(74, 44, 29, .45);
  transform: rotateX(var(--rx)) rotateY(var(--ry));
  transition: transform .6s var(--curva), box-shadow .5s;
}
.tarjeta.activa, .efectos .tarjeta.activa.visto { transition: transform .12s linear, box-shadow .5s; }
.tarjeta:hover { box-shadow: 0 1px 0 rgba(201, 161, 74, .3) inset, 0 40px 70px -32px rgba(191, 69, 102, .45); }
.tarjeta-reflejo {
  position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: 0; transition: opacity .4s;
  background: radial-gradient(circle 220px at var(--mx) var(--my), rgba(255, 244, 220, .5), rgba(255, 220, 180, .12) 45%, transparent 70%);
  mix-blend-mode: soft-light;
}
.tarjeta:hover .tarjeta-reflejo { opacity: 1; }

.tarjeta-foto { display: block; overflow: hidden; aspect-ratio: 3 / 2; background: var(--rosa-claro); }
.tarjeta-foto img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--curva); }
.tarjeta:hover .tarjeta-foto img { transform: scale(1.07); }

.tarjeta-texto { display: flex; flex: 1; flex-direction: column; align-items: flex-start; padding: 20px 24px 22px; }
.etiqueta-fila { position: relative; z-index: 2; margin: 0 0 12px; }
.tarjeta-titulo { margin: 0 0 10px; font: 600 21px/1.3 var(--serif); text-wrap: balance; }
.tarjeta-titulo a {
  text-decoration: none;
  background: linear-gradient(var(--oro), var(--oro)) 0 100% / 0 1.5px no-repeat; transition: background-size .6s var(--curva);
}
/* toda la tarjeta se puede pulsar, pero el enlace es el título (accesible) */
.tarjeta-titulo a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.tarjeta:hover .tarjeta-titulo a { background-size: 100% 1.5px; }
.tarjeta-extracto { flex: 1; margin: 0 0 18px; font-size: 15.5px; line-height: 1.55; color: var(--gris); }
.tarjeta-pie {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; margin: 0; padding-top: 14px;
  border-top: 1px solid var(--borde); font-size: 13.5px; color: var(--gris);
}
.tarjeta-leer { display: inline-flex; align-items: center; gap: 6px; font: 600 11.5px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--rosa-fuerte); }
.tarjeta-leer .icono { width: 15px; height: 15px; stroke-width: 2; transition: transform .4s var(--curva); }
.tarjeta:hover .tarjeta-leer .icono { transform: translateX(5px); }

/* Las tarjetas entran escalonadas (la «aparecer» de base.css, con su retraso) */

/* «Ver todos» junto al título de una sección de tarjetas */
.seccion-tarjetas { margin-top: clamp(70px, 9vw, 120px); }
.seccion-tarjetas .seccion-cabecera { position: relative; }
.ver-todas { margin-top: 34px; text-align: center; }

@media (max-width: 1024px) {
  .rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .rejilla { grid-template-columns: 1fr; }
  .tarjeta-titulo { font-size: 20px; }
}