/* Otimize Plans - frontend.css (atualizado para segmento/tiers) */
.otimize-plans-section {
  padding: 48px 18px;
  border-radius: 10px;
  --op-primary: #2563eb;
  --op-accent: #174ab6;
  --op-bg: #f3f7ff;
  background: var(--op-bg);
  box-sizing: border-box;
}
.otimize-container{ max-width:1200px; margin:0 auto; }

.otize-top { text-align:center; margin-bottom:28px; }
.otize-title { font-weight:600; font-size:15px; color:#0f1724; margin-bottom:10px; }

.otize-range-segmented { display:flex; flex-direction:column; align-items:center; gap:12px; margin-bottom:12px; }
.op-range-controls { display:flex; gap:8px; align-items:center; }
.op-range-controls input[type="number"]{ width:84px; padding:8px;border-radius:8px;border:1px solid #e6eefc;text-align:center;font-weight:600; }

.op-decrement, .op-increment { background:#fff;border:1px solid #e6eefc;border-radius:8px;padding:8px 12px;cursor:pointer;font-weight:700; }
.op-decrement:hover, .op-increment:hover { background:#f3f7ff; }

.op-segmented-bar { display:flex; gap:6px; align-items:center; width:100%; max-width:980px; padding:6px 8px; box-sizing:border-box; }
.op-segment { flex:1; height:12px; border-radius:8px; background:#e9f0ff; position:relative; cursor:pointer; transition:transform .12s ease, box-shadow .12s ease; }
.op-segment:hover { transform:translateY(-3px); box-shadow:0 6px 14px rgba(20,37,83,0.06); }
.op-segment.active { background: linear-gradient(90deg,var(--op-primary), #88b1ff); box-shadow:0 8px 20px rgba(20,37,83,0.08); }
.op-tick-label { position:absolute; top:16px; left:50%; transform:translateX(-50%); font-size:11px; color:#6b7280; }

.op-toggle { display:inline-flex; background:#fff; border-radius:28px; padding:6px; box-shadow: 0 2px 8px rgba(20,37,83,0.04); margin-top:8px; }
.op-toggle-btn { border:0; padding:9px 20px; border-radius:22px; cursor:pointer; background:transparent; color:var(--op-primary); font-weight:600; }
.op-toggle-btn.active { background:var(--op-primary); color:#fff; }

.op-cards { display:flex; gap:24px; flex-wrap:wrap; justify-content:center; margin-top:20px; }
.op-card { background:#fff; border-radius:16px; padding:28px; width:320px; box-shadow:0 6px 18px rgba(20,37,83,0.05); text-align:left; display:flex; flex-direction:column; align-items:center; transition:transform .18s ease, box-shadow .18s ease; }
.op-card:hover { transform:translateY(-6px); box-shadow:0 10px 28px rgba(20,37,83,0.08); }

.op-title { color:var(--op-primary); font-size:22px; font-weight:700; margin-bottom:12px; text-align:center; }
.op-price { font-size:28px; margin-bottom:14px; color:#111; display:flex; align-items:baseline; gap:8px; }
.op-currency { font-size:16px; opacity:0.9; }
.op-value { font-weight:800; font-size:28px; }
.op-period { font-size:14px; color:#6b7280; }

.op-cta { display:inline-block; padding:12px 26px; border-radius:30px; background:var(--op-primary); color:#fff; text-decoration:none; font-weight:700; margin-bottom:14px; }
.op-cta:hover { background:var(--op-accent); }

.op-features { list-style:none; padding:0; margin:0; width:100%; margin-top:8px; }
.op-features li { padding:10px 0; border-bottom:1px solid #f0f3ff; color:#374151; font-size:14px; display:flex; align-items:center; gap:8px; }
.op-features li:before { content: "✓"; color:var(--op-primary); font-weight:700; margin-right:8px; }

.op-old { font-size:14px; color:#9ca3af; text-decoration:line-through; margin-bottom:6px; }
.op-old-value { margin-right:8px; }

@media (max-width: 980px) {
  .op-segmented-bar{ max-width:720px; }
  .op-cards { flex-direction:column; align-items:center; }
  .op-card { width:92%; max-width:560px; }
}

@media (max-width: 560px) {
  .otize-range { flex-direction:column; gap:8px; }
  .op-segmented-bar{ max-width:320px; }
}