/* =========================================================
   +MARGEM — Simulador de Margem Empresarial
   Usa as variáveis de assets/style.css
   ========================================================= */

.sim-wrap{
  width:min(1420px,92vw);margin:-30px auto 0;
  display:grid;grid-template-columns:1.6fr .82fr;gap:22px;align-items:start;
  position:relative;z-index:5;
}

/* ---------- Painel de entrada ---------- */
.sim-card{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:34px;
}
.sim-head{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.sim-head-l,.sim-subhead{display:flex;align-items:center;gap:13px}
.sim-num{
  width:29px;height:29px;border-radius:50%;flex-shrink:0;
  background:rgba(193,112,63,.13);color:var(--copper);
  display:grid;place-items:center;font-size:.65rem;font-weight:700;font-family:var(--sans);
}
.sim-card h2{font-size:1.2rem;margin:0}
.sim-reset{
  border:0;background:none;color:var(--muted);text-decoration:underline;
  cursor:pointer;font-size:.8rem;font-family:var(--sans);padding:4px 0;
}
.sim-reset:hover{color:var(--copper)}

/* ---------- Cabeçalho explicativo ---------- */
.sim-intro-top{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}
.sim-intro-top .eyebrow{margin-bottom:0}
.sim-time{
  background:var(--cream);color:var(--muted);border-radius:20px;
  padding:6px 13px;font-size:.72rem;font-weight:600;white-space:nowrap;
}
.sim-intro h2{
  font-size:clamp(1.55rem,2.6vw,2rem);line-height:1.15;
  margin:16px 0 .45em;max-width:22ch;
}
.sim-intro p{
  color:var(--muted);font-size:.92rem;line-height:1.6;
  margin:0;max-width:60ch;
}

.sim-empresa{display:grid;grid-template-columns:1.6fr 1fr .85fr;gap:15px;margin-top:26px}
.sim-empresa label{
  display:grid;gap:8px;font-size:.66rem;color:var(--muted);
  letter-spacing:.12em;text-transform:uppercase;font-weight:700;
}
.sim-empresa input,.sim-empresa select{
  height:47px;border:1px solid rgba(14,32,56,.22);background:#fff;
  border-radius:var(--radius);padding:0 13px;outline:none;
  font-family:var(--sans);font-size:1rem;color:var(--ink);
  text-transform:none;letter-spacing:0;font-weight:400;
}
.sim-empresa input:focus,.sim-empresa select:focus{
  border-color:var(--copper);box-shadow:0 0 0 3px rgba(193,112,63,.14);
}
.sim-empresa input::placeholder,.money input::placeholder{
  color:rgba(14,32,56,.42);opacity:1;font-style:italic;font-weight:400;
}
.sim-empresa select:required:invalid{color:rgba(14,32,56,.42);font-style:italic}
.sim-empresa select option{color:var(--ink);font-style:normal}

.sim-divider{height:1px;background:var(--line);margin:30px 0}

.sim-hint{
  font-size:.84rem;color:var(--muted);margin:14px 0 4px;line-height:1.5;
}
.sim-hint b{color:var(--ink);font-weight:600;font-variant-numeric:tabular-nums}

/* ---------- Linhas de indicador ---------- */
.metric{
  display:grid;grid-template-columns:1fr minmax(370px,1.25fr);
  gap:26px;align-items:center;min-height:88px;border-bottom:1px solid var(--line);
}
.metric:last-child{border-bottom:0}
.metric .copy{display:grid;gap:4px}
.metric .copy b{font-size:.97rem;font-weight:600}
.metric .copy span{font-size:.8rem;color:var(--muted);line-height:1.45}

.controls{display:grid;grid-template-columns:1fr 132px 58px;gap:9px;align-items:center}
.money{
  height:44px;display:flex;align-items:center;background:#fff;
  border:1px solid rgba(14,32,56,.22);border-radius:var(--radius);transition:.16s;
}
.money:focus-within{border-color:var(--copper);box-shadow:0 0 0 3px rgba(193,112,63,.14)}
.money > span{padding-left:12px;color:var(--muted);font-size:.76rem;font-weight:600}
.money input{
  width:100%;min-width:0;border:0;outline:0;background:none;text-align:right;
  padding:0 12px;font-family:var(--sans);font-size:1rem;font-weight:700;color:var(--ink);
}
.step{display:grid;grid-template-columns:1fr 1fr;gap:5px}
.step button{
  height:44px;border:1px solid rgba(14,32,56,.22);background:var(--cream);
  border-radius:var(--radius);font-family:var(--sans);font-size:.76rem;
  font-weight:700;color:var(--ink);cursor:pointer;transition:.16s;
}
.step button:hover{background:var(--navy);border-color:var(--navy);color:#fff}
.step button:active{transform:translateY(1px)}
.var{font-size:.76rem;text-align:right;color:var(--muted);font-weight:600;font-variant-numeric:tabular-nums}
.var.up{color:#2D7D62}
.var.down{color:#B25656}

/* ---------- Painel de resultado ---------- */
.sim-result{
  background:var(--navy);color:#fff;border-radius:var(--radius);
  box-shadow:var(--shadow);padding:30px;position:sticky;top:96px;overflow:hidden;
}
.sim-result::before{
  content:"";position:absolute;width:250px;height:250px;
  border:1px solid rgba(255,255,255,.06);border-radius:50%;
  right:-145px;top:110px;
  box-shadow:0 0 0 44px rgba(255,255,255,.03),0 0 0 88px rgba(255,255,255,.022);
  pointer-events:none;
}
.sim-result > *{position:relative}
.res-top{
  display:flex;justify-content:space-between;align-items:center;gap:10px;
  color:rgba(255,255,255,.6);font-size:.6rem;letter-spacing:.17em;font-weight:700;
}
.res-top span{border:1px solid rgba(255,255,255,.2);border-radius:20px;padding:5px 9px}

.res-margem{margin-top:34px}
.res-margem > span{color:rgba(255,255,255,.7);font-size:.82rem}
.res-margem strong{
  display:block;font-family:var(--serif);font-weight:400;
  font-size:clamp(3.2rem,6vw,4.2rem);line-height:1;margin:10px 0 14px;
  font-variant-numeric:tabular-nums;
}
.res-margem strong small{font-size:1.6rem;color:var(--copper-light)}
.pill{
  display:inline-flex;padding:7px 12px;border-radius:20px;
  font-size:.68rem;font-weight:700;letter-spacing:.03em;
}
.pill.positive{color:#8DD1B3;background:rgba(57,132,99,.22)}
.pill.negative{color:#EFAAA2;background:rgba(172,71,66,.22)}
.pill.neutral{color:rgba(255,255,255,.72);background:rgba(255,255,255,.1)}

.bars{margin:32px 0 26px;padding-top:18px;border-top:1px solid var(--line-dark)}
.bar{
  display:grid;grid-template-columns:60px 1fr 48px;gap:10px;
  align-items:center;margin:12px 0;font-size:.68rem;letter-spacing:.04em;
  color:rgba(255,255,255,.72);
}
.track{height:6px;background:rgba(255,255,255,.1);border-radius:3px;overflow:hidden}
.track i{display:block;height:100%;border-radius:3px;transition:width .35s ease}
.bar.current i{background:#71838C}
.bar.projected i{background:var(--copper)}
.bar b{text-align:right;font-variant-numeric:tabular-nums;color:#fff}

.profit{border:1px solid var(--line-dark);border-radius:var(--radius)}
.profit > div{padding:16px 17px;display:flex;justify-content:space-between;align-items:center;gap:12px}
.profit > div + div{border-top:1px solid var(--line-dark)}
.profit span{font-size:.72rem;color:rgba(255,255,255,.68)}
.profit strong{font-size:1rem;font-variant-numeric:tabular-nums}
.profit .gain strong{color:#8BD0B1}
.profit .loss strong{color:#EFAAA2}

.insight{
  display:flex;gap:11px;background:var(--cream);color:var(--ink);
  padding:16px;margin-top:18px;border-radius:var(--radius);
  font-size:.82rem;line-height:1.5;
}
.insight i{color:var(--copper);font-style:normal}
.res-note{font-size:.66rem;color:rgba(255,255,255,.42);margin:14px 0 0;line-height:1.5}

/* ---------- Bloco de captura ---------- */
.sim-lead{
  width:min(1420px,92vw);margin:26px auto 0;
  background:#fff;border:1px solid var(--line);border-left:3px solid var(--copper);
  border-radius:var(--radius);box-shadow:var(--shadow);padding:34px;
}
.sim-lead .grid{display:grid;grid-template-columns:1fr 1.25fr;gap:44px;align-items:start}
.sim-lead h2{margin-bottom:.35em}
.sim-lead .lead{font-size:1rem;margin-bottom:0}
.lead-cta{display:flex;gap:14px;flex-wrap:wrap;align-items:center;margin-top:8px}
.lead-cta .btn{flex:1;justify-content:center;min-width:200px}

.snapshot{
  background:var(--cream);border-radius:var(--radius);
  padding:18px 20px;margin-top:22px;font-size:.82rem;
}
.snapshot b{display:block;font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--copper);margin-bottom:10px}
.snapshot ul{list-style:none;margin:0;padding:0}
.snapshot li{display:flex;justify-content:space-between;gap:14px;padding:5px 0;color:var(--muted)}
.snapshot li span:last-child{color:var(--ink);font-weight:600;font-variant-numeric:tabular-nums}

@media (max-width:1050px){
  .sim-wrap{grid-template-columns:1fr;margin-top:-18px}
  .sim-result{position:relative;top:auto}
  .sim-lead .grid{grid-template-columns:1fr;gap:28px}
}
@media (max-width:760px){
  .metric{grid-template-columns:1fr;padding:18px 0;gap:12px;min-height:0}
  .sim-empresa{grid-template-columns:1fr}
  .sim-card,.sim-result,.sim-lead{padding:22px}
  .controls{grid-template-columns:1fr 120px}
  .var{grid-column:1/-1;text-align:left}
  .lead-cta .btn{min-width:0;width:100%}
}

/* Celulares estreitos: o valor ganha a linha inteira para não cortar
   números longos como 1.000.000,00 */
@media (max-width:400px){
  .sim-card,.sim-result,.sim-lead{padding:18px}
  .controls{grid-template-columns:1fr;gap:8px}
  .money{height:46px}
  .step{grid-template-columns:1fr 1fr;gap:8px}
  .step button{height:46px}
  .var{text-align:right}
  .res-margem strong{font-size:3rem}
  .bar{grid-template-columns:52px 1fr 44px;gap:8px}
}