/* =========================================================
   Sección 07 — Precios
   ========================================================= */

/* Precios */
.toggle { display: inline-flex; margin-top: 2rem; padding: 4px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); }
.toggle__btn { padding: 0.55rem 1.3rem; border-radius: 999px; font-size: 0.9rem; font-weight: 600; color: var(--text-muted); transition: background 0.3s, color 0.3s; }
.toggle__btn em { font-style: normal; color: var(--teal); font-size: 0.78rem; margin-left: 0.25rem; }
.toggle__btn.is-active { background: var(--cyan); color: #02161b; }
.toggle__btn.is-active em { color: #02161b; }

.pricing { display: grid; gap: 1.25rem; grid-template-columns: 1fr; align-items: stretch; }
@media (min-width: 900px) { .pricing { grid-template-columns: repeat(3, 1fr); } }
.plan {
  position: relative; display: flex; flex-direction: column; padding: 2.25rem 2rem;
  border-radius: var(--radius-lg); border: 1px solid var(--border); background: var(--bg);
}
.plan--featured {
  border-color: var(--cyan);
  background: linear-gradient(180deg, rgba(81, 206, 224, 0.1) 0%, var(--bg) 60%);
  box-shadow: 0 30px 80px -30px rgba(81, 206, 224, 0.4);
}
@media (min-width: 900px) { .plan--featured { transform: scale(1.03); } }
.plan__badge {
  position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
  padding: 0.25rem 0.8rem; border-radius: 999px; font-size: 0.72rem; font-weight: 700;
  background: linear-gradient(135deg, var(--cyan), var(--teal)); color: #02161b; white-space: nowrap;
}
.plan h3 { font-size: 1.3rem; font-weight: 700; }
.plan__desc { color: var(--text-muted); font-size: 0.92rem; margin-top: 0.35rem; }
.plan__price { margin: 1.75rem 0; display: flex; align-items: baseline; gap: 0.4rem; }
.plan__price span { font-size: 2.6rem; font-weight: 800; letter-spacing: -0.04em; }
.plan__price small { color: var(--text-muted); font-size: 0.85rem; }
.plan ul { display: flex; flex-direction: column; gap: 0.8rem; margin-bottom: 2rem; flex: 1; }
.plan li { position: relative; padding-left: 1.6rem; font-size: 0.93rem; color: var(--text-soft); }
.plan li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 8px; height: 8px; border-radius: 50%; background: var(--teal); }