/* O que consome sua internet? */
.cs { max-width: 900px; margin: 0 auto; }
.cs-steps { display: flex; gap: 6px; justify-content: center; margin-bottom: 14px; }
.cs-steps i { width: 34px; height: 6px; border-radius: 9px; background: var(--pf-track); }
.cs-steps i.on { background: var(--brand); }
.cs h2 { margin: 0 0 6px; font-size: clamp(21px, 3.4vw, 28px); text-align: center; }
.cs .lead { text-align: center; color: var(--pf-muted); margin: 0 0 18px; }
.cs-choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; }
.cs-choice { background: var(--pf-card); border: 2px solid var(--pf-line); border-radius: 16px; padding: 16px 10px; font: inherit; color: inherit; cursor: pointer; display: grid; gap: 4px; place-items: center; text-align: center; min-height: 104px; transition: .12s; }
.cs-choice .e { font-size: 32px; line-height: 1; }
.cs-choice b { font-size: 15px; }
.cs-choice small { color: var(--pf-muted); font-size: 12.5px; }
.cs-choice:hover { border-color: var(--brand); }
.cs-choice.on { border-color: var(--brand); background: var(--brand-soft); box-shadow: 0 0 0 3px var(--brand-soft); }
.cs-sec { margin: 22px 0 10px; font-size: 15px; color: var(--pf-muted); text-transform: uppercase; letter-spacing: .05em; text-align: center; }

.cs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.cs-item { background: var(--pf-card); border: 2px solid var(--pf-line); border-radius: 16px; padding: 12px; display: grid; grid-template-columns: auto 1fr; gap: 4px 10px; align-items: center; transition: border-color .12s, background .12s; }
.cs-item.on { border-color: var(--brand); background: var(--brand-soft); }
.cs-item .e { font-size: 30px; grid-row: span 2; }
.cs-item b { font-size: 14.5px; line-height: 1.2; }
.cs-item small { color: var(--pf-muted); font-size: 12px; }
.cs-ctr { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; margin-top: 6px; }
.cs-ctr button { width: 44px; height: 40px; border-radius: 12px; border: 0; background: var(--pf-soft); font-size: 22px; font-weight: 800; cursor: pointer; color: var(--pf-ink); }
.cs-ctr button.plus { background: var(--brand); color: var(--brand-ink); }
.cs-ctr span { font-size: 20px; font-weight: 800; min-width: 30px; text-align: center; }

.cs-meter { position: sticky; bottom: 10px; z-index: 5; margin-top: 16px; background: #1c2333; color: #fff; border-radius: 18px; padding: 12px 16px; display: grid; grid-template-columns: 1fr auto; gap: 8px 14px; align-items: center; box-shadow: 0 12px 30px rgba(0,0,0,.25); }
.cs-meter .lbl { font-size: 13px; opacity: .8; }
.cs-meter .val { font-size: 24px; font-weight: 800; font-variant-numeric: tabular-nums; }
.cs-gauge { grid-column: 1 / -1; height: 12px; background: rgba(255,255,255,.15); border-radius: 99px; overflow: hidden; }
.cs-gauge i { display: block; height: 100%; width: 0; border-radius: 99px; background: linear-gradient(90deg, #22c55e, #facc15 55%, #f97316 80%, #ef4444); transition: width .35s cubic-bezier(.2,.9,.3,1.2); }
.cs-meter .pf-btn { grid-row: 1 / span 2; grid-column: 2; }
.cs-meter .lvl { font-weight: 700; }

.cs-result { text-align: center; }
.cs-persona { display: inline-flex; flex-direction: column; align-items: center; gap: 6px; padding: 16px 22px; border-radius: 20px; background: var(--brand-soft); margin-bottom: 10px; }
.cs-persona .e { font-size: 54px; line-height: 1; }
.cs-persona b { font-size: 20px; }
.cs-need { font-size: 15px; color: var(--pf-muted); margin: 6px 0 16px; }
.cs-need b { color: var(--pf-ink); font-size: 18px; }
.cs-plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; margin: 10px 0 16px; }
.cs-plan { position: relative; border: 2px solid var(--pf-line); border-radius: 16px; padding: 16px 10px; background: var(--pf-card); }
.cs-plan.best { border-color: var(--brand); box-shadow: 0 0 0 4px var(--brand-soft); transform: scale(1.03); }
.cs-plan .tag { position: absolute; top: -11px; left: 50%; transform: translateX(-50%); white-space: nowrap; }
.cs-plan .tag.rec { background: var(--brand); color: var(--brand-ink); }
.cs-plan h3 { margin: 4px 0; font-size: 20px; }
.cs-plan .price { font-weight: 800; color: var(--brand-text); }
.cs-plan.low { opacity: .55; }
.cs-tips { text-align: left; display: grid; gap: 8px; margin: 14px 0; }
.cs-tips div { background: var(--pf-soft); border-radius: 12px; padding: 10px 14px; font-size: 14.5px; }
@media (max-width: 560px) {
  .cs-grid { grid-template-columns: 1fr 1fr; }
  .cs-item { grid-template-columns: 1fr; text-align: center; justify-items: center; }
  .cs-item .e { grid-row: auto; }
  .cs-meter { grid-template-columns: 1fr; }
  .cs-meter .pf-btn { grid-row: auto; grid-column: 1; }
}