/* ===========================
   CARD ULTRA (compacta)
=========================== */
.card-ultra-wrapper {
  background: #141414;
  border-radius: 18px;
  overflow: hidden;
  transition: .25s ease;
}

.card-ultra-wrapper:hover {
  transform: translateY(-4px);
}

/* Imagen */
.card-ultra-img img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  display: block;
}

.card-ultra-img {
  position: relative;
}

.top-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  background: linear-gradient(135deg, #ffb300, #ff7a00);
  color: #000;
  font-weight: 700;
  font-size: 11px;
  padding: 4px 10px;
  border-radius: 999px;
  box-shadow: 0 0 10px rgba(255,140,0,.45);
}

/* Cuerpo */
.card-ultra-body {
  padding: 12px 14px 15px 14px;
  text-align: center;
}

.card-ultra-body h3 {
  font-size: 15px;
  font-weight: 800;
  color: #fff;
  line-height: 1.25em;
  margin-bottom: 6px;
}

/* Meta */
.meta-ultra {
  display: flex;
  flex-wrap: wrap;
  row-gap: 3px;
  column-gap: 10px;
  font-size: 10px;
  color: #bdbdbd;
  margin-bottom: 8px;
  justify-content: center;
  text-align: center;
}

.meta-ultra i { 
  color: #ffc66d; 
}

/* Descripción compacta */
.desc-ultra {
  font-size: 12px;
  color: #c9c9c9;
  margin-bottom: 10px;
  height: 34px;
  overflow: hidden;
  line-height: 1.3em;
}

/* ===========================
   PLANES GLASSMORPHISM
=========================== */

.plan-container {
  display: flex;
  gap: 8px;
  text-align: center;
}

/* Caja plan con glassmorphism */
.plan-box {
  flex: 1;
  border-radius: 14px;
  padding: 10px 11px;
  border: 1px solid rgba(255,255,255,0.12);
  background: radial-gradient(circle at top left, rgba(255,255,255,0.07), rgba(20,20,20,0.95));
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: .25s ease;
  cursor: pointer;
  position: relative;
}

.plan-box:hover {
  transform: translateY(-3px);
  box-shadow: 0 0 18px rgba(255,255,255,0.08);
}

/* Glow pulsante para el recomendado */
.plan-box.recomendado {
  animation: pulseGlow 2.4s ease-in-out infinite;
}

@keyframes pulseGlow {
  0% {
    box-shadow: 0 0 0 rgba(255,184,64,0.0);
  }
  50% {
    box-shadow: 0 0 22px rgba(255,184,64,0.8);
  }
  100% {
    box-shadow: 0 0 0 rgba(255,184,64,0.0);
  }
}

/* Encabezado plan */
.plan-header {
  margin-bottom: 4px;
  text-align: center;
}

.plan-label {
  display: flex;
  gap: 5px;
  font-size: 15px;
  font-weight: 900;
  justify-content: center;
  text-align: center;
}

.plan-label i {
  font-size: 14px;
}

.plan-desc {
  font-size: 11px;
  opacity: .85;
  margin-top: 2px;
}

/* Cuerpo plan */
.plan-body {
  margin-top: 4px;
}

.plan-price {
  font-size: 18px;
  font-weight: 900;
  color: #fff;
  margin-top: 2px;
}

.plan-old {
  font-size: 11px;
  color: #aaaaaa;
}

.plan-save {
  font-size: 11px;
  color: #8fff9f;
  font-weight: 700;
}

/* CONTADO (énfasis) */
.plan-contado {
  border-color: rgba(255,125,0,0.9);
}

.plan-contado .plan-label {
  color: #ffcb8b;
}

/* MENSUAL */
.plan-mensual {
  border-color: rgba(255,220,30,0.85);
}

.plan-mensual .plan-label {
  color: #fff7a8;
}

/* Botones */
.btn-plan {
  margin-top: 8px;
  padding: 7px 0;
  border: none;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
  transition: .18s ease;
}

/* Contado */
.plan-contado .btn-plan {
  background: linear-gradient(135deg, #ff6f00, #ff2a00);
  color: #fff;
}

.plan-contado .btn-plan:hover {
  transform: scale(1.05);
}

/* Mensual */
.plan-mensual .btn-plan {
  background: linear-gradient(135deg, #ffe600, #ffc400);
  color: #222;
}

.plan-mensual .btn-plan:hover {
  transform: scale(1.05);
}

/* =====================================================
   🔥 CINTA POPULAR (Ribbon) — SIEMPRE VISIBLE
   ===================================================== */

.card-ultra,
.card-ultra-wrapper {
  overflow: hidden;   /* evita que la cinta se corte */
  position: relative;
  z-index: 1;
}

/* Contenedor de la cinta */
.ribbon-wrapper {
  width: 90px;
  height: 90px;
  position: absolute;
  top: -2px;
  left: -2px;
  pointer-events: none;
  z-index: 9999;
  transform: none;
  opacity: 1;
}

/* Cinta diagonal */
.ribbon {
  font-size: 12px;
  font-weight: 900;
  color: #fff;
  background: linear-gradient(135deg, #ff4d00, #ff9100);
  padding: 6px 0;
  text-align: center;
  width: 140px;
  position: absolute;
  top: 16px;
  left: -40px;
  transform: rotate(-45deg);
  box-shadow: 0 4px 10px rgba(0,0,0,0.35);
  letter-spacing: 0.3px;
  pointer-events: none;
}

/* Triangulitos inferiores */
.ribbon::before,
.ribbon::after {
  content: "";
  position: absolute;
  bottom: -3px;
  border-top: 3px solid #cc3c00;
  border-left: 3px solid transparent;
  border-right: 3px solid transparent;
}

.ribbon::before { left: 0; }
.ribbon::after  { right: 0; }