/* ============================================
   CONTEXTO DIGITAL — planes (página de ventas)
   ============================================ */

.promo-bar {
  text-align: center; font-size: 0.92rem; color: var(--ink);
  background: linear-gradient(90deg, var(--lime), var(--lime-deep));
  padding: 10px 16px; font-weight: 500;
}
.promo-bar b { font-weight: 700; }

.planes { max-width: var(--maxw); margin: 0 auto; padding: clamp(36px,6vw,70px) clamp(20px,5vw,48px) 100px; }
.planes__head { text-align: center; max-width: 680px; margin: 0 auto 30px; }
.planes__head h1 { font-size: clamp(2.3rem,5.5vw,3.6rem); font-weight: 400; margin: 16px 0 14px; }
.planes__sub { color: var(--muted); font-size: 1.06rem; }
.planes__sub strong { color: var(--bone); }

/* Toggle */
.toggle {
  display: inline-flex; gap: 4px; padding: 5px; margin: 0 auto 10px; border-radius: 100px;
  border: 1px solid var(--line); background: var(--surface); position: relative; left: 50%; transform: translateX(-50%);
}
.toggle__opt {
  font-family: var(--font-body); font-weight: 600; font-size: 0.92rem; cursor: pointer;
  color: var(--muted); background: transparent; border: none; padding: 10px 20px; border-radius: 100px;
  transition: color 0.2s, background 0.2s; white-space: nowrap;
}
.toggle__opt.is-active { background: var(--lime); color: var(--ink); }
.toggle__hook { text-align: center; font-family: var(--font-mono); font-size: 0.82rem; color: var(--lime); min-height: 1.2em; margin-bottom: 34px; }

/* Grid */
.planes__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: stretch; }
@media (max-width: 900px) { .planes__grid { grid-template-columns: 1fr; max-width: 460px; margin: 0 auto; } }

.plan {
  display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 30px 26px; position: relative; transition: transform 0.3s var(--ease), border-color 0.3s;
}
.plan:hover { transform: translateY(-5px); border-color: var(--muted-2); }
.plan--top { background: linear-gradient(160deg, rgba(195,245,60,0.08), var(--surface) 55%); border-color: rgba(195,245,60,0.4); }
.plan__badge {
  position: absolute; top: -11px; left: 50%; transform: translateX(-50%);
  font-family: var(--font-mono); font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.06em;
  background: var(--lime); color: var(--ink); padding: 5px 14px; border-radius: 100px; font-weight: 600; white-space: nowrap;
}
.plan__name { font-family: var(--font-display); font-size: 1.5rem; font-weight: 500; margin-bottom: 4px; }
.plan__hook { font-family: var(--font-mono); font-size: 0.74rem; color: var(--lime); margin-bottom: 18px; min-height: 1em; }

.plan__price { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.plan__amount { font-family: var(--font-display); font-size: 2.4rem; font-weight: 500; line-height: 1; }
.plan__per { color: var(--muted); font-size: 0.9rem; }
.plan__setup { margin: 12px 0 4px; font-size: 0.9rem; color: var(--bone); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.plan__setup s { color: var(--muted-2); }
.plan__setup b { color: var(--lime); }
.plan__save { font-size: 0.8rem; color: var(--lime-deep); font-weight: 600; margin-bottom: 18px; min-height: 1em; }

.plan__features { list-style: none; display: flex; flex-direction: column; gap: 10px; margin: 4px 0 24px; flex: 1; }
.plan__features li { position: relative; padding-left: 24px; font-size: 0.93rem; color: var(--bone); line-height: 1.4; }
.plan__features li::before { content: ""; position: absolute; left: 0; top: 6px; width: 14px; height: 8px; border-left: 2px solid var(--lime); border-bottom: 2px solid var(--lime); transform: rotate(-45deg); }
.plan__features li.muted { color: var(--muted); }

.plan .btn { width: 100%; justify-content: center; margin-top: auto; }

.planes__guarantee { display: flex; align-items: center; justify-content: center; gap: 9px; margin-top: 36px; color: var(--muted); font-size: 0.92rem; }
.planes__guarantee svg { color: var(--lime); flex-shrink: 0; }

/* Demo / prueba gratis 15 días */
.demo-cta {
  position: relative; overflow: hidden; margin: 46px auto 0; max-width: 760px; text-align: center;
  background: linear-gradient(160deg, rgba(195,245,60,0.10), var(--surface) 60%);
  border: 1px solid rgba(195,245,60,0.4); border-radius: var(--radius-lg);
  padding: clamp(28px,4vw,44px) clamp(20px,4vw,40px);
}
.demo-cta__kicker { font-family: var(--font-mono); font-size: 0.74rem; color: var(--lime); margin-bottom: 8px; }
.demo-cta__title { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.7rem,3.6vw,2.4rem); margin-bottom: 12px; }
.demo-cta__sub { color: var(--bone); font-size: 1rem; max-width: 560px; margin: 0 auto 24px; line-height: 1.5; }
.demo-cta__sub b { color: var(--lime); }
.demo-cta__pick { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.demo-seg { display: inline-flex; gap: 4px; padding: 5px; border-radius: 100px; border: 1px solid var(--line); background: rgba(0,0,0,0.18); }
.demo-seg__opt { font-family: var(--font-body); font-weight: 600; font-size: 0.9rem; cursor: pointer; color: var(--muted); background: transparent; border: none; padding: 9px 22px; border-radius: 100px; transition: color .2s, background .2s; white-space: nowrap; }
.demo-seg__opt.is-active { background: var(--lime); color: var(--ink); }
.demo-cta__btn { min-width: 260px; }
.demo-cta__fine { margin-top: 16px; color: var(--muted); font-size: 0.86rem; }
.demo-cta__fine b { color: var(--bone); }
@media (max-width: 520px) { .demo-cta__btn { min-width: 100%; } }