/* ================================================
   PlenarA+ — Pricing Page CSS
   ================================================ */

:root {
  --primary:       #0f2d55;
  --primary-light: #1a4480;
  --primary-soft:  #e8f0fb;
  --accent:        #00c97a;
  --accent-dark:   #00a864;
  --accent-light:  #e6faf3;
  --accent-glow:   rgba(0,201,122,.25);
  --danger:        #f53b57;
  --warning:       #ff9f1a;
  --purple:        #6c5ce7;
  --gold:          #f4c430;
  --gold-dark:     #d4a017;
  --gold-light:    #fffbea;
  --white:         #ffffff;
  --bg:            #f0f4fa;
  --text:          #0d1b2a;
  --text-muted:    #6b7a99;
  --text-light:    #b0bac7;
  --border:        #e2e8f4;
  --shadow:        0 4px 20px rgba(15,45,85,.09);
  --shadow-md:     0 8px 36px rgba(15,45,85,.13);
  --shadow-lg:     0 20px 60px rgba(15,45,85,.18);
  --radius:        20px;
  --radius-sm:     12px;
  --ease:          cubic-bezier(.4,0,.2,1);
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { font-family:'Inter',sans-serif; background:var(--bg); color:var(--text); line-height:1.6; }

.container { max-width:1140px; margin:0 auto; padding:0 24px; }

/* ── HEADER ──────────────────────────────────────────── */
.site-header {
  background:var(--primary);
  padding:16px 0;
  position:sticky; top:0; z-index:100;
  box-shadow:0 2px 20px rgba(0,0,0,.2);
}
.header-inner { display:flex; align-items:center; justify-content:space-between; }
.header-logo {
  display:flex; align-items:center; gap:9px;
  font-size:1.4rem; font-weight:800; color:#fff; text-decoration:none; letter-spacing:-.5px;
}
.header-logo .logo-star { font-size:1.3rem; color:var(--accent); }
.header-logo .plus { color:var(--accent); }
.header-nav a {
  color:rgba(255,255,255,.75); text-decoration:none; font-size:.85rem; font-weight:500;
  display:flex; align-items:center; gap:7px; transition:color .2s;
}
.header-nav a:hover { color:var(--accent); }

/* ── HERO ────────────────────────────────────────────── */
.pricing-hero {
  background:linear-gradient(160deg, var(--primary) 0%, var(--primary-light) 55%, #003d2a 100%);
  padding:80px 0 60px; text-align:center; position:relative; overflow:hidden;
}
.pricing-hero::before {
  content:''; position:absolute; top:-80px; right:-80px;
  width:340px; height:340px; background:var(--accent); opacity:.06; border-radius:50%;
}
.pricing-hero::after {
  content:''; position:absolute; bottom:-60px; left:-60px;
  width:260px; height:260px; background:var(--accent); opacity:.04; border-radius:50%;
}
.hero-badge {
  display:inline-flex; align-items:center; gap:7px;
  background:rgba(0,201,122,.18); color:var(--accent);
  border:1px solid rgba(0,201,122,.3); padding:6px 18px;
  border-radius:99px; font-size:.82rem; font-weight:600;
  letter-spacing:.5px; text-transform:uppercase; margin-bottom:20px;
}
.pricing-hero h1 {
  font-size:clamp(2rem,5vw,3.2rem); font-weight:900; color:#fff;
  line-height:1.15; margin-bottom:16px;
}
.highlight { color:var(--accent); }
.hero-sub {
  font-size:1rem; color:rgba(255,255,255,.7); max-width:560px;
  margin:0 auto 36px; line-height:1.7;
}

/* ── BILLING TOGGLE ──────────────────────────────────── */
.billing-toggle {
  display:inline-flex; align-items:center; gap:14px;
  background:rgba(255,255,255,.1); padding:10px 22px;
  border-radius:99px; border:1px solid rgba(255,255,255,.15);
  backdrop-filter:blur(10px);
}
.toggle-label { font-size:.88rem; font-weight:600; color:rgba(255,255,255,.75); }
.toggle-switch {
  width:48px; height:26px; background:rgba(255,255,255,.2);
  border-radius:99px; border:none; cursor:pointer; position:relative;
  transition:background .3s var(--ease);
}
.toggle-switch.on { background:var(--accent); }
.toggle-knob {
  width:20px; height:20px; background:#fff; border-radius:50%;
  position:absolute; top:3px; left:3px;
  transition:left .3s var(--ease); box-shadow:0 2px 6px rgba(0,0,0,.2);
}
.toggle-knob.on { left:25px; }
.discount-pill {
  background:var(--accent); color:var(--primary);
  font-size:.7rem; font-weight:800; padding:2px 8px;
  border-radius:99px; margin-left:5px;
}

/* ── PLANS GRID ──────────────────────────────────────── */
.pricing-section { padding:60px 0; }
.plans-grid {
  display:grid; grid-template-columns:repeat(3,1fr); gap:20px; align-items:start;
}

/* ── PLAN CARD ───────────────────────────────────────── */
.plan-card {
  background:#fff; border-radius:var(--radius); padding:28px 24px 24px;
  box-shadow:var(--shadow); border:2px solid transparent;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease);
  position:relative;
}
.plan-card:hover { transform:translateY(-6px); box-shadow:var(--shadow-lg); }
.plan-card.free { border-color:var(--border); }
.plan-card.essencial { border-color:var(--accent); box-shadow:0 8px 40px rgba(0,201,122,.18); }
.plan-card.inteligente { border-color:var(--purple); box-shadow:0 8px 40px rgba(108,92,231,.18); }

.popular-ribbon {
  position:absolute; top:-14px; left:50%; transform:translateX(-50%);
  background:linear-gradient(135deg,var(--accent),var(--accent-dark));
  color:#fff; font-size:.75rem; font-weight:700;
  padding:5px 18px; border-radius:99px;
  display:flex; align-items:center; gap:5px;
  box-shadow:0 4px 14px rgba(0,201,122,.4);
  white-space:nowrap;
}

.plan-header { text-align:center; margin-bottom:20px; }
.plan-icon {
  width:56px; height:56px; border-radius:16px; margin:0 auto 12px;
  display:flex; align-items:center; justify-content:center; font-size:1.4rem;
  background:var(--primary-soft); color:var(--primary);
}
.plan-card.essencial .plan-icon { background:var(--accent-light); color:var(--accent-dark); }
.plan-card.inteligente .plan-icon { background:#ede9ff; color:var(--purple); }
.inteligente-icon { background:linear-gradient(135deg,#ede9ff,#e0d9ff) !important; }

.plan-badge {
  display:inline-block; font-size:.7rem; font-weight:700; padding:3px 12px;
  border-radius:99px; letter-spacing:.5px; text-transform:uppercase; margin-bottom:8px;
}
.free-badge { background:var(--primary-soft); color:var(--primary); }
.essencial-badge { background:var(--accent-light); color:var(--accent-dark); }
.inteligente-badge { background:#ede9ff; color:var(--purple); }

.plan-name {
  font-size:1.25rem; font-weight:800; color:var(--primary); margin-bottom:5px;
}
.plan-card.essencial .plan-name span { color:var(--accent); }
.plan-card.inteligente .plan-name span { color:var(--purple); }
.plan-desc { font-size:.82rem; color:var(--text-muted); line-height:1.5; }

.plan-price {
  display:flex; align-items:flex-end; justify-content:center; gap:3px;
  margin:18px 0 4px;
}
.price-currency { font-size:.95rem; font-weight:700; color:var(--primary); margin-bottom:8px; }
.price-value { font-size:3.2rem; font-weight:900; color:var(--primary); line-height:1; }
.price-period { font-size:.85rem; color:var(--text-muted); margin-bottom:8px; }
.plan-trial {
  text-align:center; font-size:.78rem; color:var(--text-muted);
  margin-bottom:18px; display:flex; align-items:center; justify-content:center; gap:5px;
}
.plan-trial i { color:var(--accent); }
.annual-note { color:var(--accent-dark) !important; font-weight:600; }
.hidden { display:none !important; }

/* ── FEATURES LIST ───────────────────────────────────── */
.feature-section-label {
  font-size:.72rem; font-weight:700; color:var(--text-muted);
  text-transform:uppercase; letter-spacing:.8px; margin:14px 0 8px;
}
.plan-features { margin-bottom:22px; }
.feature {
  display:flex; align-items:flex-start; gap:10px; padding:8px 0;
  border-bottom:1px solid var(--border);
}
.feature:last-child { border-bottom:none; }
.feat-icon {
  width:24px; height:24px; border-radius:6px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center; font-size:.72rem; margin-top:1px;
}
.feat-icon.yes { background:var(--accent-light); color:var(--accent-dark); }
.feat-icon.no { background:#f5f5f5; color:var(--text-light); }
.feat-text strong { display:block; font-size:.85rem; color:var(--text); margin-bottom:1px; }
.feat-text span { font-size:.76rem; color:var(--text-muted); }
.feature.excluded .feat-text strong { color:var(--text-muted); }

/* ── CTA BUTTONS ─────────────────────────────────────── */
.plan-cta {
  width:100%; padding:14px; border-radius:var(--radius-sm); border:none;
  font-size:.9rem; font-weight:700; cursor:pointer; display:flex;
  align-items:center; justify-content:center; gap:8px;
  transition:all .22s var(--ease); font-family:'Inter',sans-serif;
  margin-bottom:8px;
}
.free-cta {
  background:var(--primary-soft); color:var(--primary); border:2px solid var(--border);
}
.free-cta:hover { background:var(--primary); color:#fff; }
.essencial-cta {
  background:linear-gradient(135deg,var(--accent),var(--accent-dark)); color:#fff;
  box-shadow:0 6px 20px rgba(0,201,122,.35);
}
.essencial-cta:hover { transform:translateY(-2px); box-shadow:0 10px 28px rgba(0,201,122,.45); }
.inteligente-cta {
  background:linear-gradient(135deg,var(--purple),#5a4fcf); color:#fff;
  box-shadow:0 6px 20px rgba(108,92,231,.35);
}
.inteligente-cta:hover { transform:translateY(-2px); box-shadow:0 10px 28px rgba(108,92,231,.45); }
.cta-note { text-align:center; font-size:.73rem; color:var(--text-light); }

/* ── COMPARISON TABLE ────────────────────────────────── */
.comparison-section { padding:60px 0; background:#fff; }
.section-label {
  font-size:.75rem; font-weight:700; color:var(--accent);
  text-transform:uppercase; letter-spacing:1px; margin-bottom:8px;
}
.section-title {
  font-size:clamp(1.5rem,3vw,2.2rem); font-weight:800; color:var(--primary);
  margin-bottom:36px;
}
.comparison-table-wrap { overflow-x:auto; }
.comparison-table {
  width:100%; border-collapse:collapse; min-width:640px;
}
.comparison-table thead th {
  padding:14px 16px; font-size:.82rem; font-weight:700;
  color:var(--text-muted); background:var(--bg); border-bottom:2px solid var(--border);
  text-align:center;
}
.comparison-table thead th.feat-col { text-align:left; }
.comparison-table thead th.th-highlight { background:var(--accent-light); color:var(--accent-dark); }
.th-plan { display:flex; flex-direction:column; align-items:center; gap:4px; }
.th-plan i { font-size:1.1rem; }
.comparison-table tbody td {
  padding:12px 16px; font-size:.85rem; color:var(--text);
  border-bottom:1px solid var(--border); text-align:center; vertical-align:middle;
}
.comparison-table tbody td:first-child { text-align:left; color:var(--text); font-weight:500; }
.comparison-table tbody tr:hover td { background:#f8fafb; }
.td-highlight { background:rgba(0,201,122,.04); }
.group-row td {
  background:var(--bg); font-size:.78rem; font-weight:700;
  color:var(--text-muted); text-transform:uppercase;
  letter-spacing:.7px; padding:10px 16px;
  text-align:left !important; border-bottom:1px solid var(--border);
}
.c-yes { color:var(--accent-dark); font-size:1rem; }
.c-no { color:var(--text-light); font-size:.9rem; }
.c-limit {
  background:var(--primary-soft); color:var(--primary);
  font-size:.72rem; font-weight:600; padding:2px 9px; border-radius:99px;
}

/* ── FAQ ─────────────────────────────────────────────── */
.faq-section { padding:60px 0; }
.faq-inner { max-width:720px; margin:0 auto; text-align:center; }
.faq-list { margin-top:32px; text-align:left; }
.faq-item {
  background:#fff; border-radius:var(--radius-sm); margin-bottom:10px;
  box-shadow:var(--shadow); cursor:pointer; overflow:hidden;
  transition:box-shadow .2s;
}
.faq-item:hover { box-shadow:var(--shadow-md); }
.faq-question {
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 20px; font-size:.92rem; font-weight:600; color:var(--primary);
}
.faq-icon { transition:transform .3s var(--ease); color:var(--text-muted); font-size:.8rem; }
.faq-item.open .faq-icon { transform:rotate(180deg); color:var(--accent); }
.faq-answer {
  max-height:0; overflow:hidden;
  transition:max-height .35s var(--ease), padding .35s var(--ease);
}
.faq-item.open .faq-answer { max-height:200px; }
.faq-answer p {
  padding:0 20px 18px; font-size:.86rem; color:var(--text-muted); line-height:1.65;
}
.faq-answer p strong { color:var(--primary); }

/* ── CTA FINAL ───────────────────────────────────────── */
.cta-final {
  padding:80px 0; background:var(--primary); position:relative; overflow:hidden;
}
.cta-glow {
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:600px; height:300px; background:var(--accent); opacity:.06;
  border-radius:50%; filter:blur(60px);
}
.cta-inner { position:relative; z-index:1; }
.cta-content { text-align:center; }
.cta-star { font-size:2rem; color:var(--accent); display:block; margin-bottom:16px; }
.cta-content h2 {
  font-size:clamp(1.8rem,4vw,2.8rem); font-weight:900; color:#fff;
  line-height:1.2; margin-bottom:14px;
}
.cta-content p { font-size:.95rem; color:rgba(255,255,255,.7); margin-bottom:32px; }
.cta-buttons { display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-bottom:20px; }
.btn-cta-primary {
  background:linear-gradient(135deg,var(--accent),var(--accent-dark)); color:#fff;
  border:none; padding:16px 32px; border-radius:var(--radius-sm);
  font-size:.95rem; font-weight:700; cursor:pointer;
  display:inline-flex; align-items:center; gap:9px;
  box-shadow:0 8px 24px rgba(0,201,122,.4); transition:all .22s var(--ease);
  font-family:'Inter',sans-serif;
}
.btn-cta-primary:hover { transform:translateY(-2px); box-shadow:0 12px 32px rgba(0,201,122,.55); }
.btn-cta-secondary {
  background:rgba(255,255,255,.12); color:#fff;
  border:2px solid rgba(255,255,255,.25); padding:16px 32px;
  border-radius:var(--radius-sm); font-size:.95rem; font-weight:700;
  cursor:pointer; display:inline-flex; align-items:center; gap:9px;
  transition:all .22s var(--ease); font-family:'Inter',sans-serif;
  backdrop-filter:blur(8px);
}
.btn-cta-secondary:hover { background:rgba(255,255,255,.2); border-color:rgba(255,255,255,.4); }
.cta-guarantee {
  font-size:.78rem; color:rgba(255,255,255,.5);
  display:flex; align-items:center; justify-content:center; gap:6px;
}
.cta-guarantee i { color:var(--accent); }

/* ── FOOTER ──────────────────────────────────────────── */
.site-footer { background:#0a1e38; padding:24px 0; }
.footer-inner {
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px;
}
.footer-logo {
  display:flex; align-items:center; gap:8px;
  font-size:1.1rem; font-weight:800; color:#fff;
}
.footer-logo .logo-star { color:var(--accent); }
.footer-logo .plus { color:var(--accent); }
.footer-copy { font-size:.78rem; color:rgba(255,255,255,.4); }
.footer-link {
  font-size:.8rem; color:rgba(255,255,255,.55); text-decoration:none;
  display:flex; align-items:center; gap:6px; transition:color .2s;
}
.footer-link:hover { color:var(--accent); }

/* ── PLAN MODAL ──────────────────────────────────────── */
.modal-overlay {
  position:fixed; inset:0; background:rgba(0,0,0,.5);
  backdrop-filter:blur(6px); z-index:500;
  display:flex; align-items:center; justify-content:center; padding:20px;
  opacity:0; visibility:hidden; transition:all .25s var(--ease);
}
.modal-overlay.active { opacity:1; visibility:visible; }
.plan-modal-box {
  background:#fff; border-radius:24px; padding:36px 32px;
  max-width:420px; width:100%; text-align:center;
  box-shadow:var(--shadow-lg); position:relative;
  animation:popIn .35s cubic-bezier(.34,1.56,.64,1);
}
@keyframes popIn { from{transform:scale(.88) translateY(20px)} to{transform:scale(1) translateY(0)} }
.modal-close-btn {
  position:absolute; top:14px; right:14px;
  width:30px; height:30px; border-radius:8px; background:#f5f5f5;
  border:none; cursor:pointer; color:#888; font-size:.85rem;
  display:flex; align-items:center; justify-content:center; transition:all .2s;
}
.modal-close-btn:hover { background:var(--danger); color:#fff; }
.plan-modal-icon {
  width:64px; height:64px; border-radius:18px; margin:0 auto 16px;
  display:flex; align-items:center; justify-content:center; font-size:1.6rem;
  background:var(--primary-soft); color:var(--primary);
}
.plan-modal-box h3 { font-size:1.3rem; font-weight:800; color:var(--primary); margin-bottom:8px; }
.plan-modal-box p { font-size:.87rem; color:var(--text-muted); margin-bottom:22px; line-height:1.6; }
.btn-modal-action {
  display:inline-flex; align-items:center; gap:8px;
  background:linear-gradient(135deg,var(--primary),var(--primary-light));
  color:#fff; padding:13px 28px; border-radius:var(--radius-sm);
  font-weight:700; font-size:.9rem; text-decoration:none;
  transition:all .22s var(--ease); margin-bottom:12px;
}
.btn-modal-action:hover { transform:translateY(-2px); box-shadow:0 8px 20px rgba(15,45,85,.3); }
.modal-note { font-size:.75rem; color:var(--text-light); }

/* ── RESPONSIVE ──────────────────────────────────────── */
@media(max-width:900px) {
  .plans-grid { grid-template-columns:1fr; max-width:480px; margin:0 auto; }
  .plan-card.popular { order:-1; }
}
@media(max-width:600px) {
  .pricing-hero { padding:52px 0 40px; }
  .cta-buttons { flex-direction:column; align-items:center; }
  .footer-inner { flex-direction:column; text-align:center; }
  .billing-toggle { flex-wrap:wrap; justify-content:center; }
}