/* v0.36 — Homologación visual de cards de Programas y estados hover. */

.page-programs-refresh .program-grid-refresh {
  display: grid !important;
  gap: 1.15rem !important;
  align-items: stretch !important;
}

.page-programs-refresh .program-card-rich {
  position: relative !important;
  isolation: isolate !important;
  display: flex !important;
  flex-direction: column !important;
  gap: .75rem !important;
  min-height: 248px !important;
  padding: 1.25rem !important;
  overflow: hidden !important;
  color: #16264b !important;
  background:
    radial-gradient(circle at 12% 10%, rgba(83,65,137,.07), transparent 24%),
    linear-gradient(180deg, #ffffff 0%, #fbfcff 100%) !important;
  border: 1px solid rgba(202, 211, 228, .92) !important;
  border-radius: 18px !important;
  box-shadow: 0 12px 32px rgba(31,45,73,.065) !important;
  transform: translateY(0) !important;
  transition:
    transform .22s ease,
    box-shadow .22s ease,
    border-color .22s ease,
    background .22s ease !important;
}

.page-programs-refresh .program-card-rich::after {
  content: '' !important;
  position: absolute !important;
  inset: auto -58px -72px auto !important;
  width: 150px !important;
  height: 150px !important;
  border-radius: 999px !important;
  background: rgba(83,65,137,.055) !important;
  z-index: -1 !important;
  transition: transform .22s ease, opacity .22s ease !important;
}

.page-programs-refresh .program-card-rich:hover,
.page-programs-refresh .program-card-rich:focus-within {
  transform: translateY(-4px) !important;
  border-color: rgba(83,65,137,.32) !important;
  box-shadow: 0 20px 44px rgba(31,45,73,.11) !important;
}

.page-programs-refresh .program-card-rich:hover::after,
.page-programs-refresh .program-card-rich:focus-within::after {
  transform: scale(1.08) !important;
  opacity: .95 !important;
}

.page-programs-refresh .program-card-top {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 1rem !important;
  margin: 0 !important;
}

.page-programs-refresh .program-icon,
.page-programs-refresh .program-badge {
  display: inline-grid !important;
  place-items: center !important;
  color: #534189 !important;
  background: #f0edfb !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.page-programs-refresh .program-icon {
  flex: 0 0 auto !important;
  width: 42px !important;
  height: 42px !important;
  margin: 0 !important;
  border-radius: 13px !important;
  font-size: 1.03rem !important;
  font-weight: 900 !important;
  box-shadow: inset 0 0 0 1px rgba(83,65,137,.04) !important;
}

.page-programs-refresh .program-badge {
  max-width: 62% !important;
  min-height: 28px !important;
  padding: .36rem .68rem !important;
  border-radius: 999px !important;
  font-size: .72rem !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  text-transform: capitalize !important;
  white-space: nowrap !important;
}

.page-programs-refresh .program-card-rich h2 {
  margin: .45rem 0 .1rem !important;
  color: #16264b !important;
  font-size: 1.16rem !important;
  line-height: 1.18 !important;
  letter-spacing: -.015em !important;
}

.page-programs-refresh .program-card-rich p {
  flex: 1 1 auto !important;
  margin: 0 !important;
  color: #61708e !important;
  font-size: .92rem !important;
  line-height: 1.55 !important;
}

.page-programs-refresh .program-card-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: .55rem !important;
  margin-top: auto !important;
  padding-top: .25rem !important;
}

.page-programs-refresh .program-action {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 40px !important;
  padding: .64rem .88rem !important;
  border-radius: 11px !important;
  font-size: .8rem !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  text-decoration: none !important;
  cursor: pointer !important;
  opacity: 1 !important;
  visibility: visible !important;
  transition:
    transform .18s ease,
    box-shadow .18s ease,
    border-color .18s ease,
    background-color .18s ease,
    color .18s ease !important;
}

.page-programs-refresh .program-action-primary {
  color: #fff !important;
  background: #534189 !important;
  border: 1px solid #534189 !important;
  box-shadow: 0 10px 20px rgba(83,65,137,.15) !important;
}

.page-programs-refresh .program-action-primary:hover,
.page-programs-refresh .program-action-primary:focus-visible {
  color: #fff !important;
  background: #3f326f !important;
  border-color: #3f326f !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 14px 26px rgba(83,65,137,.22) !important;
}

.page-programs-refresh .program-action-secondary {
  color: #534189 !important;
  background: #fff !important;
  border: 1px solid rgba(83,65,137,.42) !important;
  box-shadow: none !important;
}

.page-programs-refresh .program-action-secondary:hover,
.page-programs-refresh .program-action-secondary:focus-visible {
  color: #342a60 !important;
  background: #f4f1ff !important;
  border-color: rgba(83,65,137,.68) !important;
  transform: translateY(-1px) !important;
}

/* Card destacada: conserva protagonismo, pero usa la misma estructura y botones. */
.page-programs-refresh .program-card-employment {
  color: #fff !important;
  background:
    radial-gradient(circle at 100% 0%, rgba(146,218,235,.18), transparent 30%),
    linear-gradient(135deg, #243155 0%, #4f4387 100%) !important;
  border-color: rgba(255,255,255,.14) !important;
  box-shadow: 0 18px 46px rgba(32,36,77,.16) !important;
}

.page-programs-refresh .program-card-employment::after {
  background: rgba(255,255,255,.08) !important;
}

.page-programs-refresh .program-card-employment h2,
.page-programs-refresh .program-card-employment p {
  color: #fff !important;
}

.page-programs-refresh .program-card-employment p {
  color: rgba(255,255,255,.82) !important;
}

.page-programs-refresh .program-card-employment .program-icon,
.page-programs-refresh .program-card-employment .program-badge {
  color: #fff !important;
  background: rgba(255,255,255,.15) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08) !important;
}

.page-programs-refresh .program-card-employment .program-action-primary {
  color: #15234a !important;
  background: #fff !important;
  border-color: #fff !important;
  box-shadow: 0 12px 24px rgba(0,0,0,.12) !important;
}

.page-programs-refresh .program-card-employment .program-action-primary:hover,
.page-programs-refresh .program-card-employment .program-action-primary:focus-visible {
  color: #15234a !important;
  background: #f3f5ff !important;
  border-color: #f3f5ff !important;
  box-shadow: 0 16px 30px rgba(0,0,0,.18) !important;
}

.page-programs-refresh .program-card-employment .program-action-secondary {
  color: #fff !important;
  background: rgba(255,255,255,.09) !important;
  border-color: rgba(255,255,255,.28) !important;
}

.page-programs-refresh .program-card-employment .program-action-secondary:hover,
.page-programs-refresh .program-card-employment .program-action-secondary:focus-visible {
  color: #fff !important;
  background: rgba(255,255,255,.16) !important;
  border-color: rgba(255,255,255,.46) !important;
}

.page-programs-refresh .program-card-cta {
  border-style: solid !important;
  background:
    radial-gradient(circle at 88% 12%, rgba(146,218,235,.1), transparent 28%),
    linear-gradient(180deg, #fff 0%, #f8f6ff 100%) !important;
}

/* Neutraliza estilos viejos de .button dentro de Programas para evitar estados azules/negros inesperados. */
.page-programs-refresh .program-card-rich .button,
.page-programs-refresh .program-card-rich .button-small,
.page-programs-refresh .program-card-rich .button-outline {
  all: unset;
}

@media (min-width: 760px) {
  .page-programs-refresh .program-grid-refresh { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

@media (min-width: 1080px) {
  .page-programs-refresh .program-grid-refresh { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}

@media (max-width: 640px) {
  .page-programs-refresh .program-card-rich { min-height: auto !important; }
  .page-programs-refresh .program-card-actions { display: grid !important; grid-template-columns: 1fr !important; }
  .page-programs-refresh .program-action { width: auto !important; }
}