/* Contabiplux — SÓ os 2 componentes que o site não tem (tabela comparativa + FAQ).
   Todo o resto (shell, hero, act, kicker, index, proto, forged, footer, reveal) vem do
   main.css. Aqui herdo os MESMOS tokens (--ice/--tech/--cut/--ignite/--deep/--line…). */

.cp-ok{color:#3DDC84} .cp-no{color:#FF6B6B} .cp-mid{color:#FFC46B}

/* ---- tabela comparativa ---- */
.cmp{margin-top:clamp(28px,4vw,48px); border:1px solid var(--line); border-radius:16px;
  overflow:hidden; overflow-x:auto; background:rgba(255,255,255,.02)}
.cmp table{width:100%; border-collapse:collapse; font-size:clamp(13px,1vw,15px); min-width:640px}
.cmp th,.cmp td{padding:15px 18px; text-align:left; border-bottom:1px solid var(--line)}
.cmp thead th{background:rgba(255,255,255,.05); color:var(--tech); font-weight:600;
  font-size:12.5px; letter-spacing:.04em}
.cmp thead th.us{background:linear-gradient(135deg,var(--deep),var(--cut)); color:#fff}
.cmp tbody td.us{background:rgba(0,140,255,.10); text-align:center; font-weight:700; color:var(--ice)}
.cmp tbody td.other{text-align:center; color:var(--muted)}
.cmp td.feat{color:var(--ice); font-weight:600}
.cmp tbody tr:last-child td{border-bottom:0}

/* ---- FAQ ---- */
.faq{margin-top:clamp(28px,4vw,44px); display:grid; gap:12px}
.faq details{background:rgba(255,255,255,.03); border:1px solid var(--line);
  border-radius:14px; padding:0 clamp(18px,2.4vw,24px); transition:border-color .2s ease}
.faq details[open]{border-color:var(--line2)}
.faq summary{cursor:pointer; list-style:none; padding:20px 0; font-weight:600;
  font-size:clamp(15px,1.2vw,17px); color:var(--ice);
  display:flex; align-items:center; justify-content:space-between; gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; color:var(--ignite); font-size:24px; font-weight:300; line-height:1; flex:0 0 auto}
.faq details[open] summary::after{content:"–"}
.faq details p{margin:0 0 20px; color:var(--tech); font-size:15px; line-height:1.6; max-width:80ch}
.faq details p strong{color:var(--ice)}

/* moldura desktop do hero — reaproveita .frame--desk mas garante largura fluida no hero */
.hero .frame--desk{width:100%; margin-top:clamp(24px,4vw,40px)}