/* Montador de planos (planos.html, home e checkout). Depende de main.css. */
.plans--builder .plan { gap: 0.7rem; }
.plan .pb-label { font-size: 0.72rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; color: var(--slate); margin: 0.35rem 0 0; }
.plan--hot .pb-label { color: var(--green-ink); }
.plan .pb-base { margin: 0; font-size: 0.8rem; color: var(--slate); font-weight: 600; min-height: 1.2em; }
.plan--hot .pb-base { color: var(--green-ink); }
.plan .plan__price { line-height: 1.1; }

.plan ul.pb-feat, .plan ul.pb-sum { flex: none; margin: 0; }
.plan ul.pb-feat { gap: 0.4rem; }
.plan ul.pb-feat li { gap: 0.5rem; line-height: 1.4; }
.pb-ico { width: 1.2rem; height: 1.2rem; flex-shrink: 0; border-radius: 50%; display: grid; place-items: center; margin-top: 0.05rem; }
.plan li .pb-ico svg, .pb-ico svg { width: 0.8rem; height: 0.8rem; margin: 0; color: inherit; }
.pb-ico--ok { background: #DDF7EC; color: #0A8F5A; }
.pb-ico--no { background: #FBE3E0; color: var(--danger); }
.plan--hot .pb-ico--ok, .plan--hot .pb-ico--no { background: var(--white); }
.plan--hot li .pb-ico--ok svg { color: #0A8F5A; }
.plan--hot li .pb-ico--no svg { color: var(--danger); }
.plan li.is-off .pb-txt { color: var(--slate); }
.plan--hot li.is-off .pb-txt { color: var(--green-ink); opacity: 0.85; }
.pb-tip { display: block; font-size: 0.75rem; font-weight: 700; color: var(--warm-ink); }
.plan--hot .pb-tip { color: var(--ink-deep); }

.pb-extras { display: grid; gap: 0.55rem; padding: 0.8rem; border-radius: var(--radius); background: var(--paper); border: 1px solid var(--fog); }
.plan--hot .pb-extras { background: color-mix(in srgb, var(--white) 30%, transparent); border-color: color-mix(in srgb, var(--white) 45%, transparent); }
.pb-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 0.35rem 0.6rem; position: relative; }
.pb-name { font-weight: 700; font-size: 0.9rem; color: var(--ink-deep); line-height: 1.25; }
.pb-sub { display: block; font-size: 0.75rem; font-weight: 600; color: var(--slate); }
.plan--hot .pb-sub { color: var(--green-ink); }
.pb-stepper { display: inline-flex; align-items: center; gap: 0.35rem; }
.pb-stepper output { min-width: 2.2ch; text-align: center; font-weight: 800; font-size: 1.05rem; color: var(--ink-deep); font-variant-numeric: tabular-nums; }
.pb-btn {
  width: 2.75rem; height: 2.75rem; border-radius: 50%; border: 2px solid var(--green-deep);
  background: var(--white); color: var(--green-deep); font-size: 1.35rem; font-weight: 800; line-height: 1;
  display: grid; place-items: center; padding: 0; touch-action: manipulation;
  transition: background 0.15s, color 0.15s, transform 0.15s, border-color 0.15s;
}
.pb-btn:hover:not(.is-blocked) { background: var(--green-deep); color: var(--white); }
.pb-btn:active:not(.is-blocked) { transform: scale(0.94); }
.pb-btn.is-blocked { border-color: var(--mist); color: var(--mist); cursor: not-allowed; }
.plan--hot .pb-btn { border-color: var(--ink-deep); color: var(--ink-deep); }
.plan--hot .pb-btn:hover:not(.is-blocked) { background: var(--ink-deep); color: var(--green-bright); }
.plan--hot .pb-btn.is-blocked { border-color: color-mix(in srgb, var(--ink-deep) 25%, transparent); color: color-mix(in srgb, var(--ink-deep) 30%, transparent); }
.pb-warn { grid-column: 1 / -1; margin: 0; font-size: 0.78rem; font-weight: 700; color: var(--warm-ink); background: var(--warm-soft); border-radius: var(--radius); padding: 0.4rem 0.55rem; line-height: 1.35; }
.pb-warn[hidden] { display: none; }

@keyframes pbPulse { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--green) 55%, transparent); } 50% { box-shadow: 0 0 0 7px color-mix(in srgb, var(--green) 0%, transparent); } }
@keyframes pbPulseHot { 0%, 100% { box-shadow: 0 0 0 0 rgba(255,255,255,0.75); } 50% { box-shadow: 0 0 0 7px rgba(255,255,255,0); } }
@media (prefers-reduced-motion: no-preference) {
  html:not(.reduce-motion) [data-pb]:not(.is-touched) .pb-btn:not(.is-blocked) { animation: pbPulse 2.4s ease-in-out infinite; }
  html:not(.reduce-motion) .plan--hot[data-pb]:not(.is-touched) .pb-btn:not(.is-blocked) { animation-name: pbPulseHot; }
  html:not(.reduce-motion) [data-pb]:not(.is-touched) .pb-btn[data-op="dec"]:not(.is-blocked) { animation-delay: 1.2s; }
}

.pb-sum { font-size: 0.82rem; padding: 0; list-style: none; display: grid; gap: 0.15rem; }
.plan ul.pb-sum li, .pb-sum li { display: flex; justify-content: space-between; gap: 0.75rem; font-size: inherit; }
.pb-sum li span:last-child { font-variant-numeric: tabular-nums; white-space: nowrap; font-weight: 600; }
.pb-sum li.pb-total { border-top: 1px dashed var(--mist); margin-top: 0.25rem; padding-top: 0.35rem; font-weight: 800; color: var(--ink-deep); font-size: 0.9rem; }
.plan--hot .pb-sum li.pb-total { border-top-color: var(--green-ink); }
.pb-sum li.pb-once { font-weight: 700; color: var(--warm-ink); }
.pb-note { font-size: 0.76rem; line-height: 1.45; color: var(--slate); margin: 0; }
.plan--hot .pb-note { color: var(--green-ink); }
.plan .pb-spacer { flex: 1; }
.pb-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
@media (max-width: 420px) { .pb-btn { width: 2.6rem; height: 2.6rem; } }