/* ═══════════════════════════════════════════════════════════════════
   PROMOX — Centro de Recursos (prefijo rec-)
   Compartido por el hub (/recursos/) y cada landing del apartado.
   Orden de carga: styles.css → promox-ui.css → recursos-v2.css → (css propio de la página)
   ═══════════════════════════════════════════════════════════════════ */

/* ─── Miga de pan ─────────────────────────────────────────────────── */
.pmx-crumb { padding: calc(var(--nav-h) + 20px) 0 0; }
.pmx-crumb ol { display: flex; flex-wrap: wrap; align-items: center; gap: 0; list-style: none; padding: 0; margin: 0; }
.pmx-crumb li { display: flex; align-items: center; font-size: var(--fs-micro); color: var(--grey); }
.pmx-crumb li + li::before { content: "/"; margin: 0 8px; color: var(--grey-light); }
.pmx-crumb a { color: var(--grey); transition: color var(--t); }
.pmx-crumb a:hover { color: var(--crimson); text-decoration: underline; }
.pmx-crumb li[aria-current] { color: var(--text); font-weight: 600; }
/* La miga empuja el hero; el hero ya trae su propio padding superior */
.pmx-crumb + .hero,
.pmx-crumb + .hero--page { padding-top: clamp(28px, 4vw, 40px); }

/* ─── Hub: grid de recursos disponibles ─────────────────────────── */
.rec-grid {
  display: grid; grid-template-columns: 1fr; gap: 20px;
  max-width: 1040px; margin: 0 auto;
}
@media (min-width: 720px) { .rec-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }

.rec-card {
  display: flex; flex-direction: column; gap: 14px;
  background: var(--white); border: 1px solid var(--pz-line); border-radius: var(--pz-radius-lg);
  box-shadow: var(--pz-shadow); padding: clamp(24px, 3vw, 32px);
  transition: box-shadow .25s ease, transform .25s ease, border-color .25s ease;
}
.rec-card:hover { box-shadow: var(--pz-shadow-lift); transform: translateY(-3px); border-color: rgba(193,39,45,.25); }
.rec-card__icon {
  display: grid; place-items: center; width: 52px; height: 52px; border-radius: 14px;
  background: var(--crimson-faint); color: var(--crimson); flex: none;
}
.rec-card__kicker { font-size: var(--fs-label); font-weight: 700; letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--crimson); }
.rec-card__title { font-size: 1.3rem; font-weight: 800; color: var(--text); line-height: var(--lh-snug); margin: 2px 0 2px; }
.rec-card__desc { font-size: var(--fs-sm); line-height: var(--lh-relaxed); color: var(--grey-dark); flex: 1; }
.rec-card__go { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-sm); font-weight: 700; color: var(--crimson); margin-top: 4px; }
.rec-card__go svg { transition: transform var(--t); }
.rec-card:hover .rec-card__go svg { transform: translateX(3px); }

/* Tarjeta "próximamente" — misma grilla, sin link activo */
.rec-card--soon { opacity: .6; }
.rec-card--soon .rec-card__icon { background: var(--off-white); color: var(--grey); }
.rec-card--soon .rec-card__kicker { color: var(--grey); }