/* ===== KX: fix badge + visor de imágenes (lightbox) ===== */

/* Badge de tipo — robusto, no se corta */
.plan-card { position: relative !important; cursor: pointer; }
.plan-card .plan-badge {
  position: absolute !important;
  top: 12px; left: 12px; z-index: 5;
  background: rgba(11, 20, 48, .82) !important;
  color: #fff !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: .3px;
  padding: 5px 12px !important;
  border-radius: 20px !important;
  border: 1px solid rgba(245, 166, 35, .7);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  line-height: 1.3; white-space: nowrap; max-width: calc(100% - 24px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .35);
}
.plan-precio { display: block; font-size: 12.5px; font-weight: 800; color: #f5a623; margin-top: 3px; }
.plan-cta { cursor: pointer; text-decoration: none; }

/* Lightbox / visor */
.lb-overlay {
  position: fixed; inset: 0; background: rgba(4, 8, 18, .93);
  z-index: 99999; display: flex; align-items: center; justify-content: center;
  padding: 18px; opacity: 0; pointer-events: none; transition: opacity .2s ease;
}
.lb-overlay.open { opacity: 1; pointer-events: auto; }
.lb-box {
  position: relative; display: flex; width: 100%; max-width: 980px; max-height: 92vh;
  background: #0b1220; border-radius: 16px; overflow: hidden;
  box-shadow: 0 30px 90px rgba(0, 0, 0, .65); border: 1px solid rgba(120,150,220,.16);
}
.lb-imgwrap { flex: 1 1 62%; background: #06080f; display: flex; align-items: center; justify-content: center; min-width: 0; }
.lb-imgwrap img { width: 100%; height: 100%; max-height: 92vh; object-fit: contain; display: block; }
.lb-info { flex: 0 0 320px; padding: 26px 24px; display: flex; flex-direction: column; color: #e8eef7; }
.lb-tipo { color: #f5a623; font-weight: 700; font-size: 12.5px; text-transform: uppercase; letter-spacing: 1px; }
.lb-title { font-size: 25px; font-weight: 800; margin: 6px 0 8px; line-height: 1.12; }
.lb-precio { font-size: 22px; font-weight: 800; color: #54d63a; }
.lb-detail { color: #8a99b5; font-size: 14px; margin-top: 6px; }
.lb-spacer { flex: 1; min-height: 16px; }
.lb-buy {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  background: #25d366; color: #fff; text-decoration: none; padding: 14px;
  border-radius: 12px; font-weight: 800; font-size: 16px; margin-top: 14px;
  box-shadow: 0 8px 22px rgba(37, 211, 102, .35);
}
.lb-buy:active { transform: translateY(1px); }
.lb-hint { text-align: center; color: #6c7a98; font-size: 11.5px; margin-top: 12px; }
.lb-close {
  position: absolute; top: 12px; right: 12px; z-index: 10;
  background: rgba(0, 0, 0, .55); color: #fff; border: none; width: 40px; height: 40px;
  border-radius: 50%; font-size: 22px; line-height: 1; cursor: pointer;
}
.lb-nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 10;
  background: rgba(0, 0, 0, .5); color: #fff; border: none; width: 46px; height: 46px;
  border-radius: 50%; font-size: 20px; cursor: pointer;
}
.lb-prev { left: 14px; }
.lb-next { right: 334px; }
@media (max-width: 780px) {
  .lb-box { flex-direction: column; max-height: 94vh; overflow-y: auto; }
  .lb-info { flex: none; }
  .lb-imgwrap img { max-height: 58vh; }
  .lb-next { right: 14px; }
  .lb-nav { width: 40px; height: 40px; }
}