/* Dor × benefício: faixa escura antes da calculadora de valor. */
.li-contrast { --ct-bg:#0f3a2d; --ct-ink:#f4f1e8; --ct-mut:#a7bdb2; --ct-line:rgba(244,241,232,.14); --ct-red:#ec8a72; --ct-card:#faf9f4; --ct-green:#0e7555;
  position:relative; overflow:hidden; isolation:isolate; padding-block:clamp(72px,9vw,128px); background:var(--ct-bg); color:var(--ct-ink); font-family:var(--body,Geist,system-ui,sans-serif); }
.li-contrast-bg { position:absolute; inset:0; z-index:-1; pointer-events:none; }
.li-contrast-bg span { position:absolute; left:78%; top:38%; width:var(--r); aspect-ratio:1; border:1px solid rgba(160,214,184,.11); border-radius:50%; transform:translate(-50%,calc(-50% + var(--ct-y,0px) * var(--k))); will-change:transform; }
.li-contrast-bg span:nth-child(1) { --r:260px; --k:.9; }
.li-contrast-bg span:nth-child(2) { --r:520px; --k:.6; }
.li-contrast-bg span:nth-child(3) { --r:820px; --k:.4; border-style:dashed; }
.li-contrast-bg span:nth-child(4) { --r:1160px; --k:.25; }
.li-contrast-bg i { position:absolute; left:78%; top:38%; width:580px; height:580px; margin:-290px 0 0 -290px; border-radius:50%; background:conic-gradient(from 0deg, rgba(120,210,160,.09), transparent 18%); transform:translateY(calc(var(--ct-y,0px) * .6)); animation:li-ct-sweep 9s linear infinite; }
@keyframes li-ct-sweep { to { rotate:360deg; } }

.li-contrast-head { max-width:780px; margin-bottom:clamp(40px,5vw,64px); transform:translateY(calc(var(--ct-y,0px) * -.12)); }
.li-contrast-eyebrow { display:flex; align-items:center; gap:12px; margin:0 0 22px; color:#8fd1ae; font:500 13px/1.3 var(--mono,"Geist Mono",monospace); letter-spacing:.14em; text-transform:uppercase; }
.li-contrast-eyebrow::before { content:""; width:34px; height:1px; background:currentColor; }
.li-contrast-head h2 { margin:0; font-size:clamp(34px,4.2vw,60px); font-weight:600; line-height:1.06; letter-spacing:-.04em; text-wrap:balance; }
.li-contrast-head h2 em { display:block; color:#8fd1ae; font-style:normal; }
.li-contrast-lead { margin:20px 0 0; color:var(--ct-mut); font-size:clamp(17px,1.3vw,20px); line-height:1.55; }

.li-contrast-board { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.08fr); border-radius:18px; box-shadow:0 40px 80px -40px rgba(0,0,0,.55); }
.li-contrast-row { display:contents; }
.li-contrast-pain, .li-contrast-gain { position:relative; display:flex; align-items:flex-start; gap:16px; padding:24px clamp(20px,2.6vw,36px); }
.li-contrast-pain { border-bottom:1px solid var(--ct-line); background:rgba(0,0,0,.18); color:var(--ct-mut); }
.li-contrast-gain { border-bottom:1px solid #e3e6dc; background:var(--ct-card); color:#17251f; }
.li-contrast-pain p, .li-contrast-gain p { margin:0; font-size:17px; line-height:1.5; }
.li-contrast-gain p b { display:block; margin-bottom:2px; color:#0b2a20; font-size:18px; font-weight:650; letter-spacing:-.01em; }
.li-contrast-labels > div { align-items:center; padding-block:18px; font:500 13px/1.3 var(--mono,"Geist Mono",monospace); letter-spacing:.12em; text-transform:uppercase; }
.li-contrast-labels .li-contrast-pain { border-top-left-radius:18px; border:1px solid var(--ct-line); border-width:1px 0 1px 1px; }
.li-contrast-labels .li-contrast-gain { gap:10px; border-top-right-radius:18px; background:#fff; color:var(--ct-green); }
.li-contrast-labels svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.7; }
.li-contrast-row:not(.li-contrast-labels) .li-contrast-pain { border-left:1px solid var(--ct-line); }
.li-contrast-x { flex:none; width:22px; height:22px; margin-top:1px; fill:none; stroke:var(--ct-red); stroke-width:2; stroke-linecap:round; }
.li-contrast-icon { flex:none; display:grid; place-items:center; width:40px; height:40px; border-radius:10px; background:#e3efe6; color:var(--ct-green); }
.li-contrast-icon svg { width:21px; height:21px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.li-contrast-tag { display:none; }
.li-contrast-total > div { align-items:center; border-bottom:0; }
.li-contrast-total .li-contrast-pain { border-bottom-left-radius:18px; border-bottom:1px solid var(--ct-line); }
.li-contrast-total .li-contrast-pain p { color:var(--ct-ink); font-size:19px; font-weight:500; }
.li-contrast-total .li-contrast-gain { flex-wrap:wrap; justify-content:space-between; gap:16px 24px; border-bottom-right-radius:18px; background:#eaf2eb; }
.li-contrast-total .li-contrast-gain p b { margin:0; font-size:19px; color:#075b41; }
.li-contrast-cta { flex:none; }
.li-contrast :is(a,button):focus-visible { outline:3px solid #8fd1ae; outline-offset:4px; }

/* Só com JS: a linha "vira" quando entra na tela. Sem JS tudo fica visível. */
.li-contrast.is-anim .li-contrast-row:not(.li-contrast-labels) > * { transition:opacity .6s ease, transform .7s cubic-bezier(.2,.7,.2,1), color .6s ease; transition-delay:var(--d,0ms); }
.li-contrast.is-anim .li-contrast-row:not(.li-contrast-labels, .is-on) .li-contrast-gain { opacity:0; transform:translateX(28px); }
.li-contrast.is-anim .li-contrast-row:not(.li-contrast-labels, .is-on) .li-contrast-pain { color:var(--ct-ink); }
.li-contrast.is-anim .li-contrast-row .li-contrast-gain { --d:140ms; }
.li-contrast-pain p > span { background:linear-gradient(currentColor,currentColor) 0 58% / 0 1px no-repeat; -webkit-box-decoration-break:clone; box-decoration-break:clone; transition:background-size .7s ease .35s; }
.li-contrast.is-anim .is-on .li-contrast-pain p > span { background-size:100% 1px; }
.li-contrast.is-anim .li-contrast-row:not(.is-on) .li-contrast-x { transform:scale(.4); opacity:0; }
.li-contrast-x { transition:transform .4s cubic-bezier(.3,1.6,.5,1) .3s, opacity .3s ease .3s; }

@media (max-width: 860px) {
  .li-contrast-bg span, .li-contrast-bg i { left:88%; top:18%; }
  .li-contrast-board { grid-template-columns:minmax(0,1fr); gap:12px; box-shadow:none; }
  .li-contrast-row.li-contrast-labels { display:none; }
  .li-contrast-row { display:block; overflow:hidden; border-radius:14px; box-shadow:0 20px 40px -28px rgba(0,0,0,.6); }
  .li-contrast-pain, .li-contrast-gain { flex-wrap:wrap; gap:10px 14px; padding:18px 18px; border:0 !important; border-radius:0 !important; }
  .li-contrast-pain { background:rgba(0,0,0,.24); }
  .li-contrast-pain p, .li-contrast-gain p { flex:1 1 0; min-width:0; }
  .li-contrast-tag { display:block; flex-basis:100%; font:500 11px/1.2 var(--mono,"Geist Mono",monospace); letter-spacing:.12em; text-transform:uppercase; }
  .li-contrast-pain .li-contrast-tag { color:var(--ct-red); }
  .li-contrast-gain .li-contrast-tag { color:var(--ct-green); }
  .li-contrast-total .li-contrast-gain { display:grid; }
  .li-contrast-cta { width:100%; justify-content:center; }
  .li-contrast.is-anim .li-contrast-row:not(.li-contrast-labels, .is-on) .li-contrast-gain { transform:translateY(18px); }
}
@media (max-width: 760px) { .li-contrast .wrap { width:calc(100% - 32px); } }
@media (prefers-reduced-motion: reduce) {
  .li-contrast-bg i { animation:none; }
  .li-contrast *, .li-contrast-head { transition:none !important; transform:none !important; }
}