/* Soluthe — páginas de segmento do e-Loja (/sistema-para-<segmento>/)
   Carregar DEPOIS de soluthe.css, produto.css, certificado-digital.css e
   emissor-fiscal.css: planos (.ef-plans), condições (.ef-terms), suporte
   (.ef-support), CTA final e barra do WhatsApp (.cd-*) vêm de lá.
   Aqui só o que é novo: tela do PDV no hero e blocos de recursos. */

/* Hero */
.sg-hero .sl-h1{font-size:clamp(34px,4.6vw,66px)}
.sg-hero .sl-lead{margin:22px 0 30px}

/* Tela ilustrativa do PDV (só CSS) */
.sg-pdv{width:min(460px,100%);justify-self:center;background:#FCFCF7;color:#1B211C;border-radius:var(--r-md);box-shadow:0 40px 90px rgba(10,61,34,.45);overflow:hidden;font:500 13px/1.45 var(--f-body)}
.sg-pdv-top{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 18px;background:var(--ink);color:var(--text-2);font:600 11px var(--f-mono);letter-spacing:.1em;text-transform:uppercase}
.sg-pdv-top b{color:var(--green-light);font-weight:600}
.sg-pdv-body{padding:16px 18px 18px;display:flex;flex-direction:column;gap:12px}
.sg-scale{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 14px;border-radius:10px;background:rgba(0,184,92,.1);border:1px solid rgba(0,143,69,.25)}
.sg-scale small{display:block;font:600 10.5px var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--green-dark)}
.sg-scale b{font:700 15px var(--f-head);letter-spacing:-.02em}
.sg-scale strong{font:800 24px/1 var(--f-mono);letter-spacing:-.03em;white-space:nowrap}
.sg-items{display:flex;flex-direction:column;border-top:1px dashed rgba(27,33,28,.3)}
.sg-item{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 12px;padding:8px 0;border-bottom:1px dashed rgba(27,33,28,.18);font:500 12.5px var(--f-mono)}
.sg-item span:last-child{white-space:nowrap}
.sg-item em{grid-column:1/-1;font-style:normal;font:600 11px var(--f-body);color:#B4540A}
.sg-total{display:flex;justify-content:space-between;align-items:baseline;font:800 22px var(--f-head);letter-spacing:-.03em}
.sg-pay{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.sg-pay span{text-align:center;padding:9px 4px;border-radius:8px;border:1px solid rgba(27,33,28,.15);font:700 12px var(--f-body)}
.sg-pay span:first-child{background:var(--ink);color:var(--green-light);border-color:var(--ink)}
.sg-ok{display:flex;align-items:center;gap:8px;font:700 12.5px var(--f-body);color:var(--green-dark)}
@media (max-width:520px){.sg-pdv{font-size:12px}.sg-scale strong{font-size:20px}}

/* Recursos: dor → o que o e-Loja faz → ganho */
.sg-feats{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:12px}
.sg-feat{display:flex;flex-direction:column;gap:12px;padding:26px;border-radius:var(--r-md);background:var(--white);border:1px solid rgba(6,13,8,.08)}
.sg-feat small{font:600 11px var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--green-dark)}
.sg-feat b{font:800 clamp(21px,1.9vw,25px)/1.15 var(--f-head);letter-spacing:-.035em;color:var(--text-dark)}
.sg-feat p{font:400 15px/1.65 var(--f-body);color:var(--text-dark-2);text-wrap:pretty}
.sg-feat span{margin-top:auto;padding-top:12px;border-top:1px solid rgba(6,13,8,.1);font:600 14px/1.5 var(--f-body);color:var(--text-dark)}
.sg-feat span::before{content:"Ganho: ";color:var(--green-dark)}
.sg-feat--key{border:2px solid var(--green)}

/* Faça a conta */
.sg-math{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,380px),1fr));gap:clamp(28px,4vw,56px);align-items:center}
.sg-math-total{display:flex;flex-direction:column;gap:6px}
.sg-math-total strong{font:800 clamp(52px,7vw,92px)/1 var(--f-head);letter-spacing:-.06em;color:var(--green-light)}
.sg-math-total span{font:600 16px var(--f-body);color:var(--text-2)}
.sg-math p{font:400 16px/1.7 var(--f-body);color:var(--text-2);max-width:56ch;margin-top:14px}
.sg-math small{display:block;margin-top:12px;font:500 13px/1.5 var(--f-body);color:var(--muted-2)}
.sg-lines{border-top:1px solid var(--line)}
.sg-line{display:flex;justify-content:space-between;gap:16px;padding:14px 0;border-bottom:1px solid var(--line);font:400 15px/1.5 var(--f-body);color:var(--text-2)}
.sg-line b{font:700 15px var(--f-mono);color:var(--green-light);white-space:nowrap}


/* Loja de roupas: grade de tamanhos no PDV */
.sg-grade{display:flex;flex-direction:column;gap:8px;padding:12px 14px;border-radius:10px;background:rgba(0,184,92,.1);border:1px solid rgba(0,143,69,.25)}
.sg-grade small{font:600 10.5px var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--green-dark)}
.sg-grade b{font:700 15px var(--f-head);letter-spacing:-.02em}
.sg-sizes{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
.sg-sizes span{display:flex;flex-direction:column;align-items:center;gap:1px;padding:6px 2px;border-radius:8px;background:#fff;border:1px solid rgba(27,33,28,.15);font:700 13px var(--f-body)}
.sg-sizes span i{font-style:normal;font:500 10px var(--f-mono);color:#5B6A5D}
.sg-sizes .is-on{background:var(--ink);color:var(--green-light);border-color:var(--ink)}
.sg-sizes .is-on i{color:var(--text-2)}
.sg-sizes .is-out{opacity:.45;text-decoration:line-through}
.sg-item em.sg-ok-em{color:var(--green-dark)}