/* ============================================================
   costandprofitability.com - "See the model in action" body card (Peça 4B)
   Points to the OPEN knowledge dashboard /interactive/profitability-model-demo/
   (educational, no login). Distinct from the CostCtrl product launcher.
   Praxis. Scoped .cc-livemodel. Vanilla, no deps. EN / PT-PT / ES-ES. Never blue.
   ============================================================ */
.cc-livemodel{
  --o:#C75B22; --o-br:#E2761A; --grn:#1C7A57; --grn-soft:#3E9B74;
  --ink:#1A1714; --ink2:#4A453E; --muted:#756859; --muted2:#9A8E7E;
  --paper:#F3EEE4; --paper2:#EDE6D8; --surface:#FBF9F3; --surface2:#FAF7F0;
  --line:#DCD3C2; --line2:#C9BEAA; --dark:#14110D; --wheat:#E8DBC2; --red:#B23A2E;
  --mono:'IBM Plex Mono',ui-monospace,monospace;
  --serif:'Newsreader',Georgia,serif;
  --sans:'Hanken Grotesk',system-ui,sans-serif;
  font-family:var(--sans);color:var(--ink);-webkit-font-smoothing:antialiased;
  margin:34px 0;
}
.cc-livemodel *{box-sizing:border-box;}
.cc-livemodel a.lm-root{text-decoration:none;color:inherit;display:grid;grid-template-columns:1fr 1.05fr;gap:0;
  background:var(--dark);border-radius:16px;overflow:hidden;border:1px solid #2a241d;
  transition:box-shadow .18s,transform .18s;}
.cc-livemodel a.lm-root:hover{box-shadow:0 22px 50px -26px rgba(199,91,34,.6);transform:translateY(-2px);}

/* left: copy */
.cc-livemodel .lm-body{padding:30px 32px;display:flex;flex-direction:column;justify-content:center;position:relative;}
.cc-livemodel .lm-body::after{content:"";position:absolute;left:-60px;bottom:-80px;width:220px;height:220px;border-radius:50%;background:radial-gradient(circle,rgba(199,91,34,.16),transparent 70%);pointer-events:none;}
.cc-livemodel .lm-eyebrow{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--o-br);display:flex;align-items:center;gap:9px;margin-bottom:13px;position:relative;z-index:2;}
.cc-livemodel .lm-eyebrow::before{content:"";width:18px;height:1px;background:var(--o-br);}
.cc-livemodel h3{font-family:var(--serif);font-weight:500;font-size:clamp(22px,2.5vw,27px);line-height:1.16;letter-spacing:-.01em;color:#fff;margin:0 0 10px;position:relative;z-index:2;}
.cc-livemodel h3 em{font-style:italic;color:var(--o-br);}
.cc-livemodel p{font-size:14.5px;line-height:1.6;color:#CFC4B2;margin:0 0 20px;max-width:42ch;position:relative;z-index:2;}
.cc-livemodel .lm-go{display:inline-flex;align-items:center;gap:9px;font-family:var(--sans);font-weight:600;font-size:14px;
  background:var(--o);color:#fff;border-radius:8px;padding:12px 20px;align-self:flex-start;transition:background .15s,gap .15s;position:relative;z-index:2;}
.cc-livemodel a.lm-root:hover .lm-go{background:var(--o-br);gap:12px;}
.cc-livemodel .lm-go svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2;}
.cc-livemodel .lm-newtab{margin-top:11px;font-family:var(--mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted2);position:relative;z-index:2;}

/* right: live mini-preview */
.cc-livemodel .lm-media{background:#1b1610;padding:22px;display:flex;flex-direction:column;justify-content:center;gap:10px;border-left:1px solid #2a241d;position:relative;}
.cc-livemodel .lm-chips{display:flex;gap:6px;flex-wrap:wrap;}
.cc-livemodel .lm-chip{font-family:var(--mono);font-size:9px;letter-spacing:.04em;text-transform:uppercase;color:var(--wheat);border:1px solid #3a3128;border-radius:100px;padding:4px 9px;}
.cc-livemodel .lm-chip.on{background:var(--o);color:#fff;border-color:var(--o);}
.cc-livemodel .lm-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;}
.cc-livemodel .lm-kpi{background:#241d16;border-radius:7px;padding:9px 10px;}
.cc-livemodel .lm-kpi .l{font-family:var(--mono);font-size:7px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted2);margin-bottom:4px;}
.cc-livemodel .lm-kpi .v{font-family:var(--serif);font-size:17px;color:#fff;line-height:1;}
.cc-livemodel .lm-kpi .v.pos{color:var(--grn-soft);}
.cc-livemodel .lm-kpi .v.neg{color:#E08577;}
.cc-livemodel .lm-chart{background:#241d16;border-radius:7px;padding:10px;}
.cc-livemodel .lm-chart svg{width:100%;height:auto;display:block;}

@media(max-width:680px){
  .cc-livemodel a.lm-root{grid-template-columns:1fr;}
  .cc-livemodel .lm-media{order:-1;border-left:none;border-bottom:1px solid #2a241d;}
}