/* Simulador: réplica das telas 2 a 14 enviadas pelo cliente (fundo branco, azul-marinho e dourado). */

@font-face{font-family:Jost;src:url(assets/fonts/jost-700.woff2) format("woff2");font-weight:700;font-display:swap}

.simpage{
  --navy:#1d2a4a;--navy-2:#2b3a61;--txt:#1d2a4a;--txt-2:#5b6475;--txt-3:#8a92a3;
  --gold:#c9a15a;--gold-2:#b98d3e;--gold-bg:#f8f0e0;--gold-bd:#e6cf9f;
  --gray-bg:#f4f5f7;--line-s:#e3e6eb;--link:#2c4f97;
  background:#fff;color:var(--txt);font-family:Jost,system-ui,sans-serif
}
.simpage ::selection{background:rgba(201,161,90,.3)}
.simpage button,.simpage input,.simpage textarea{font-family:inherit}

.s-wrap{min-height:100svh;display:flex;flex-direction:column;align-items:center;padding:0 20px 64px}
.s-demo{margin:16px 0 0;padding:8px 14px;border-radius:999px;background:var(--gold-bg);color:#7a5a1f;font-size:12px}
.s-panel{width:100%;max-width:520px}
.s-loading{margin-top:120px;color:var(--txt-3);text-align:center}

/* cabeçalho: seta à esquerda, logo centralizado */
.s-head{position:relative;display:flex;align-items:center;justify-content:center;height:84px}
.s-back{position:absolute;left:-8px;top:50%;transform:translateY(-50%);display:grid;place-items:center;width:44px;height:44px;border:0;border-radius:50%;background:none;color:var(--navy);cursor:pointer;transition:background .2s}
.s-back:hover{background:var(--gray-bg)}
.s-back svg{width:22px;height:22px}
.s-logo img{height:30px;width:auto}

/* progresso 1–4 */
.s-progress{display:flex;align-items:center;margin:8px 0 34px;padding:0;list-style:none;max-width:260px}
.s-progress li{flex:1;display:flex;align-items:center}
.s-progress li:last-child{flex:none}
.s-progress li span{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;border:1.5px solid #cfd4dc;background:#fff;font-size:11px;font-weight:500;color:var(--txt-3)}
.s-progress li:not(:last-child):after{content:"";flex:1;height:2px;margin:0 4px;background:#dfe3e9}
.s-progress li.done span{background:var(--navy);border-color:var(--navy);color:#fff}
.s-progress li.done:after{background:var(--navy)}
.s-progress li.on span{background:var(--gold);border-color:var(--gold);color:#fff;box-shadow:0 0 0 4px var(--gold-bg)}

/* textos */
.s-tag{display:flex;align-items:center;gap:10px;margin:0 0 16px;color:var(--gold-2);font-size:13px;font-weight:500;text-transform:uppercase;letter-spacing:.06em}
.s-tag__i{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--gold-bg)}
.s-tag__i svg{width:24px;height:24px}
.s-title{margin:0;font-weight:700;font-size:clamp(26px,3.2vw,32px);line-height:1.2;letter-spacing:-.01em;color:var(--navy);outline:none}
.s-lead{margin:12px 0 0;font-size:17px;line-height:1.55;color:var(--txt-2)}
.s-small{margin:14px 0 0;font-size:13px;line-height:1.55;color:var(--txt-2)}
.s-error{margin:18px 0 0;padding:12px 14px;border-radius:10px;background:#fdecea;color:#9b2c22;font-size:15px;line-height:1.5}
.s-bigicon{display:grid;place-items:center;width:64px;height:64px;margin:0 auto 18px;border-radius:50%;background:var(--gold-bg);color:var(--gold-2)}
.s-bigicon svg{width:34px;height:34px}
.s-bigicon--plain{background:none;width:auto;height:auto}
.s-bigicon--plain svg{width:56px;height:56px}

/* caixas cinza de informação */
.s-info{display:flex;gap:12px;align-items:flex-start;margin-top:20px;padding:16px 18px;border-radius:12px;background:var(--gray-bg)}
.s-info__i{flex:none;color:var(--txt-2)}
.s-info__i svg{width:22px;height:22px}
.s-info p{margin:0;font-size:15px;line-height:1.55;color:var(--txt-2)}
.s-info--gold{background:var(--gold-bg)}
.s-info--gold .s-info__i{color:var(--gold-2)}
.s-plain{display:flex;gap:10px;align-items:flex-start;margin-top:18px}
.s-plain span{flex:none;color:var(--txt-2)}
.s-plain svg{width:20px;height:20px}
.s-plain p{margin:0;font-size:14px;line-height:1.55;color:var(--txt-2)}

/* botões */
.s-actions{display:flex;flex-direction:column;align-items:center;gap:14px;margin-top:26px}
.simpage .btn{border:0;border-radius:10px;min-height:56px;font-size:17px;font-weight:500}
.simpage .btn--gold{background:var(--gold);color:var(--navy)}
.simpage .btn--gold:hover{background:#d4ae68}
.s-btn{width:100%;justify-content:center;gap:10px}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none}
.btn:disabled:hover span{transform:none}
.simpage .s-btn-outline{width:100%;border:1.5px solid var(--navy);color:var(--navy);background:#fff}
.s-btn-outline:hover{background:var(--gray-bg)}
.s-btn--center{justify-content:center;gap:10px}
.s-btn-i{display:inline-grid;width:20px;height:20px}
.s-btn-i svg{width:20px;height:20px}
.s-link{padding:2px 0;border:0;background:none;font:inherit;font-size:16px;color:var(--link);text-decoration:underline;text-underline-offset:4px;cursor:pointer}

/* 2. como funciona */
.s-feats{list-style:none;margin:22px 0 0;padding:6px 16px;border-radius:12px;background:var(--gray-bg)}
.s-feats li{display:flex;align-items:center;gap:14px;padding:12px 0;font-size:16px;color:var(--txt-2)}
.s-feats li + li{border-top:1px solid var(--line-s)}
.s-feats__i{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:#fff;color:var(--gold-2)}
.s-feats__i svg{width:21px;height:21px}

/* contador */
.s-count{display:flex;align-items:center;gap:10px;margin-top:26px;padding:12px 14px 12px 22px;border:1.5px solid var(--line-s);border-radius:12px;background:#fff;transition:border-color .2s}
.s-count:focus-within{border-color:var(--gold)}
.s-count input{flex:1;min-width:0;border:0;background:none;padding:0;font:inherit;font-weight:500;font-size:34px;line-height:1.2;color:var(--navy)}
.s-count input::placeholder{color:#c3c8d1}
.s-count input:focus{outline:none}
.s-step{flex:none;width:48px;height:48px;border:0;border-radius:10px;background:var(--gray-bg);font:inherit;font-size:24px;color:var(--navy);cursor:pointer;transition:background .2s}
.s-step:hover:not(:disabled){background:#e8ebf0}
.s-step:disabled{opacity:.4;cursor:not-allowed}

/* tabela de valores */
.s-rows{margin:22px 0 0;padding:4px 16px;border-radius:12px;background:var(--gray-bg)}
.s-rows div{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:13px 0}
.s-rows div + div{border-top:1px solid var(--line-s)}
.s-rows dt{font-size:15px;line-height:1.4;color:var(--txt-2)}
.s-rows dd{margin:0;font-size:16px;font-weight:700;color:var(--navy);white-space:nowrap;font-variant-numeric:tabular-nums}

/* card azul do valor */
.s-earn{margin-top:18px;padding:22px 24px;border-radius:14px;background:var(--navy);color:#fff}
.s-earn__l{margin:0;font-size:18px;font-weight:500}
.s-earn__v{margin:6px 0 0;font-size:clamp(38px,5vw,46px);font-weight:700;line-height:1.05;color:var(--gold);font-variant-numeric:tabular-nums}
.s-earn__m{margin:0;font-size:24px;font-weight:500;color:var(--gold)}
.s-earn__a{margin:8px 0 0;font-size:18px;font-weight:700;font-variant-numeric:tabular-nums}
.s-earn--total{text-align:center}
.s-earn--total .s-earn__v span{font-size:.6em;font-weight:500}
.s-earn--total .s-earn__a{color:var(--gold);font-weight:500}

/* 7. escolha */
.s-choice + .s-choice{margin-top:0}
.s-choices{display:grid;gap:14px;margin-top:24px}
.s-choice{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 20px;border:1.5px solid var(--line-s);border-radius:12px;background:#fff;font:inherit;font-size:17px;font-weight:500;line-height:1.35;color:var(--navy);text-align:left;cursor:pointer;transition:border-color .2s,background .2s}
.s-choice span:last-child{font-size:22px;transition:transform .2s}
.s-choice:hover{border-color:var(--gold)}
.s-choice:hover span:last-child{transform:translateX(4px)}
.s-choice--on{border-color:var(--gold);background:var(--gold-bg)}

/* 11. resultado final */
.s-hello{display:flex;gap:14px;align-items:flex-start}
.s-hello__i{flex:none;display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:var(--gold-bg);color:var(--gold-2);margin-top:2px}
.s-hello__i svg{width:26px;height:26px}
.s-prods{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:22px}
.s-prods--one{grid-template-columns:1fr}
.s-prod{padding:18px 12px;border:1.5px solid var(--line-s);border-radius:12px;background:#fff;text-align:center}
.s-prod__i{display:inline-grid;color:var(--navy)}
.s-prod__i svg{width:26px;height:26px}
.s-prod__n{margin:6px 0 0;font-size:16px;font-weight:700;color:var(--navy)}
.s-prod__v{margin:8px 0 0;font-size:26px;font-weight:700;color:var(--navy);font-variant-numeric:tabular-nums}
.s-prod__m{margin:0;font-size:15px;font-weight:500;color:var(--link)}
.s-prod__a{margin:6px 0 0;font-size:13px;color:var(--txt-2)}

/* 12. na prática */
.s-steps{counter-reset:p;list-style:none;margin:22px 0 0;padding:0}
.s-steps li{counter-increment:p;display:flex;align-items:center;gap:14px;padding:9px 0;font-size:16px;line-height:1.45;color:var(--txt-2)}
.s-steps li:before{content:counter(p);flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--gold);color:#fff;font-size:14px;font-weight:700}
.s-steps b{font-weight:700;color:var(--navy)}
.s-perks{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:20px 0 0;padding:16px 10px;border-radius:12px;background:var(--gray-bg)}
.s-perks li{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;font-size:14px;line-height:1.35;color:var(--txt-2)}
.s-perks span{color:var(--navy)}
.s-perks svg{width:28px;height:28px}

/* 13. formulário */
.s-form{display:grid;gap:12px;margin-top:22px}
.s-input{display:flex;align-items:center;gap:12px;padding:0 16px;border:1.5px solid var(--line-s);border-radius:10px;background:#fff;transition:border-color .2s}
.s-input:focus-within{border-color:var(--gold)}
.s-input__i{flex:none;display:grid;color:var(--txt-2)}
.s-input__i svg{width:21px;height:21px}
.s-input input,.s-input textarea{flex:1;min-width:0;border:0;background:none;font:inherit;font-size:17px;color:var(--navy);padding:15px 0}
.s-input input:focus,.s-input textarea:focus{outline:none}
.s-input ::placeholder{color:var(--txt-3)}
.s-input--area{flex-direction:column;align-items:stretch;gap:0;padding-top:12px}
.s-input__lbl{font-size:14px;color:var(--txt-2)}
.s-input--area textarea{padding:6px 0 12px;resize:vertical;min-height:110px;line-height:1.5}
.s-form .btn{margin-top:8px}
.s-btn--wa{justify-content:center;gap:10px}
.s-safe{display:flex;align-items:center;justify-content:center;gap:8px;margin:4px 0 0;font-size:14px;color:var(--txt-2)}
.s-safe span{display:grid}
.s-safe svg{width:17px;height:17px}
.s-consent{display:flex;align-items:flex-start;gap:10px;margin:4px 0 0;font-size:13px;line-height:1.5;color:var(--txt-2);cursor:pointer}
.s-consent input{flex:none;width:18px;height:18px;margin:1px 0 0;accent-color:var(--gold-2)}
.s-preview{margin-top:20px;padding:16px 18px;border-radius:12px;background:var(--gray-bg)}
.s-preview .cap{margin:0 0 8px;color:var(--gold-2)}
.s-preview pre{margin:0;white-space:pre-wrap;font:14px/1.6 Jost,sans-serif;color:var(--txt-2)}

/* 14. transparência */
.s-faq{display:grid;gap:12px;margin-top:22px}
.s-faq > div{padding:16px 18px;border-radius:12px;background:var(--gray-bg)}
.s-faq h2{display:flex;align-items:center;gap:8px;margin:0;font-size:16px;font-weight:700;color:var(--navy)}
.s-faq h2 span{display:grid;color:var(--navy)}
.s-faq h2 svg{width:18px;height:18px}
.s-faq p{margin:6px 0 0;font-size:14px;line-height:1.55;color:var(--txt-2)}

@media (max-width:480px){
  .s-wrap{padding:0 18px 48px}
  .s-head{height:72px}
  .s-logo img{height:26px}
  .s-lead{font-size:16px}
  .s-rows dt{font-size:14px}
  .s-prod__v{font-size:22px}
  .s-perks li{font-size:13px}
}