/* MrVUCEM — Vista: precios (y el bloque de planes de la home) */

/* ---------- Precios ---------- */
.price-switch {
  display: inline-flex; padding: 4px; gap: 4px; border-radius: var(--r-full);
  background: var(--bg-soft); border: 1px solid var(--border); margin: 0 auto 2.4rem;
}
.price-switch button {
  border: 0; background: transparent; font: inherit; font-weight: 650; font-size: .88rem;
  color: var(--muted); padding: .5rem 1.05rem; border-radius: var(--r-full); cursor: pointer;
}
.price-switch button.is-active { background: var(--bg-elev); color: var(--text); box-shadow: var(--shadow-sm); }
.price-switch .save { color: var(--ok); font-size: .74rem; font-weight: 800; }

.plans { display: grid; gap: 22px; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; }
@media (max-width: 980px) { .plans { grid-template-columns: 1fr; max-width: 480px; margin-inline: auto; } }
.plan { position: relative; display: flex; flex-direction: column; height: 100%; }
.plan.featured { border-color: var(--primary); box-shadow: 0 18px 44px color-mix(in srgb, var(--primary) 20%, transparent); }
.plan-badge {
  position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
  background: var(--primary); color: #fff; font-size: .7rem; font-weight: 800;
  letter-spacing: .07em; text-transform: uppercase; padding: .28rem .8rem; border-radius: var(--r-full);
}
.plan-name { font-size: 1.05rem; font-weight: 750; margin-bottom: .2rem; }
.plan-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: .35rem; margin: .8rem 0 .2rem; }
.plan-price .amount { font-size: 2.5rem; font-weight: 800; letter-spacing: -.03em; }
.plan-price .per { color: var(--muted); font-size: .88rem; }
.plan-price .amount.is-text { font-size: 1.6rem; }
.plan-desc { font-size: .9rem; min-height: 42px; }
.plan ul { list-style: none; padding: 0; margin: 1.2rem 0 1.6rem; display: grid; gap: .6rem; font-size: .9rem; }
.plan ul li { display: flex; gap: .55rem; align-items: flex-start; color: var(--text-soft); }
.plan ul li svg { flex: none; margin-top: .22rem; color: var(--ok); }
.plan ul li.off { color: var(--muted); }
.plan ul li.off svg { color: var(--border-strong); }
.plan .btn { margin-top: auto; }