/* Elevah — Calculadoras. Modo Clareza: fundo claro, uma pergunta por vez, um número em destaque. */

/* hero */
.c-hero{padding-block:clamp(132px,13vw,176px) clamp(36px,4vw,56px);background:radial-gradient(ellipse at 50% 0%,#fff,transparent 70%),var(--paper);color:var(--paper-ink);text-align:center}
.c-hero-in{display:grid;justify-items:center;gap:22px;max-width:860px}
.c-hero .caption{color:var(--paper-muted)}
.c-hero .caption::before{background:var(--signal);box-shadow:none}
.c-hero .hl--glacial{background-image:linear-gradient(100deg,#1f5463,var(--signal) 45%,#6fa3b2)}
.c-hero .lead{color:var(--paper-muted);text-align:center}
.proof{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 20px;font-size:14px;color:var(--paper-muted)}
.proof li{display:inline-flex;align-items:center;gap:6px}
.proof .ico{width:15px;height:15px;color:var(--signal)}

/* aplicação */
.c-app{padding-block:clamp(16px,2vw,24px) clamp(64px,8vw,104px);background:var(--paper);color:var(--paper-ink);scroll-margin-top:84px}
.steps-nav{display:flex;justify-content:center;gap:6px;margin:0 auto 18px;padding:6px;width:max-content;max-width:100%;overflow-x:auto;border-radius:var(--radius-pill);background:#fff;box-shadow:inset 0 0 0 1px var(--paper-line)}
.steps-nav button{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 14px 0 6px;border:0;border-radius:var(--radius-pill);background:transparent;font-size:14px;font-weight:500;color:var(--paper-muted);white-space:nowrap;cursor:pointer;transition:background-color .25s,color .25s}
.steps-nav b{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;font-size:13px;font-weight:500;box-shadow:inset 0 0 0 1px var(--paper-line)}
.steps-nav b .ico{width:15px;height:15px}
.steps-nav b .ico{width:14px;height:14px}
.steps-nav button:hover{color:var(--paper-ink)}
.steps-nav button[aria-current]{color:#fff;background:var(--paper-ink)}
.steps-nav button[aria-current] b{box-shadow:inset 0 0 0 1px rgba(255,255,255,.35)}
.steps-nav button.is-done b{color:#fff;background:var(--signal);box-shadow:none}
@media (max-width:760px){.steps-nav{justify-content:flex-start}.steps-nav button:not([aria-current]) span{display:none}.steps-nav button:not([aria-current]){padding:0 6px}}
.sample{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:6px 10px;margin-bottom:18px;font-size:13.5px;color:var(--paper-muted)}
.sample .ico{width:16px;height:16px;color:var(--signal)}
.sample button{min-height:32px;padding:0 12px;border:0;border-radius:var(--radius-pill);font-size:13px;font-weight:500;color:var(--signal);background:rgba(47,104,120,.08);cursor:pointer}

.card{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);border-radius:var(--radius-xl);background:#fff;box-shadow:inset 0 0 0 1px var(--paper-line),0 30px 60px rgba(21,36,44,.06);overflow:hidden;animation:cardIn .5s var(--ease)}
@keyframes cardIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.card-q{padding:clamp(26px,3.6vw,48px);display:grid;gap:22px;align-content:start}
.card-a{padding:clamp(26px,3.6vw,48px);display:grid;gap:18px;align-content:start;background:linear-gradient(180deg,#f4f7f8,#eef3f5);border-left:1px solid var(--paper-line)}
.step-k{font-size:13px;font-weight:500;color:var(--signal)}
.card h2{font-size:clamp(24px,2.4vw,32px);line-height:1.15;letter-spacing:-.03em;font-weight:300;text-wrap:balance}
.card h2:focus{outline:none}
.q-sub{font-size:15.5px;color:var(--paper-muted);margin-top:-8px}
.mode{display:inline-flex;gap:4px;padding:4px;border-radius:var(--radius-pill);background:var(--paper);box-shadow:inset 0 0 0 1px var(--paper-line);justify-self:start}
.mode button{min-height:38px;padding:0 16px;border:0;border-radius:var(--radius-pill);background:transparent;font-size:14px;font-weight:500;color:var(--paper-muted);cursor:pointer;transition:background-color .2s,color .2s}
.mode button[aria-checked="true"]{background:#fff;color:var(--paper-ink);box-shadow:0 2px 8px rgba(21,36,44,.1),inset 0 0 0 1px var(--paper-line)}
.mode--3{display:flex;justify-self:stretch}
.mode--3 button{flex:1}
.fields{display:grid;gap:16px}
.fld{display:grid;gap:7px}
.fld-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.fld label{display:flex;align-items:center;gap:6px;font-size:14.5px;font-weight:500;color:var(--paper-ink)}
.fld small{font-size:12.5px;color:var(--paper-muted)}
.fld > input,.money{width:100%;min-height:54px;border:0;border-radius:14px;background:var(--paper);box-shadow:inset 0 0 0 1px var(--paper-line);color:var(--paper-ink);font-size:18px;font-variant-numeric:tabular-nums;transition:box-shadow .2s,background-color .2s}
.fld > input{padding:0 16px}
.money{display:flex;align-items:center;gap:8px;padding:0 16px}
.money span{font-size:15px;color:var(--paper-muted)}
.money input{flex:1;min-width:0;min-height:52px;border:0;padding:0;background:transparent;color:inherit;font:inherit;font-size:18px}
.money input:focus{outline:none}
.fld > input:focus,.money:focus-within{outline:none;background:#fff;box-shadow:inset 0 0 0 1.5px var(--signal)}
.fld--sm .money{max-width:160px}
.tip{position:relative;display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;color:var(--paper-muted);cursor:help}
.tip .ico{width:15px;height:15px}
.tip::after{content:attr(data-tip);position:absolute;left:50%;bottom:calc(100% + 8px);width:240px;padding:10px 12px;border-radius:12px;font-size:12.5px;font-weight:400;line-height:1.45;color:#fff;background:var(--paper-ink);transform:translateX(-50%) translateY(4px);opacity:0;visibility:hidden;transition:opacity .2s,transform .2s;z-index:5;pointer-events:none}
.tip:hover::after,.tip:focus::after{opacity:1;visibility:visible;transform:translateX(-50%)}
.carry{display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--paper-muted)}
.carry .ico{width:15px;height:15px;color:var(--signal)}

/* resultado */
.res-label{font-size:14.5px;color:var(--paper-muted);margin-bottom:-12px}
.big{font-size:clamp(48px,5.4vw,72px);line-height:1.04;font-weight:200;letter-spacing:-.045em;color:var(--paper-ink);font-variant-numeric:tabular-nums}
.big small{font-size:.36em;letter-spacing:-.01em;color:var(--paper-muted)}
.sub{font-size:15px;color:var(--paper-muted);margin-top:-6px}
.sub span{color:var(--paper-ink);font-weight:500}
.read{font-size:16px;color:var(--paper-ink)}
.win{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border-radius:16px;font-size:15.5px;line-height:1.45;color:var(--paper-ink);background:#fff;box-shadow:inset 0 0 0 1px rgba(47,104,120,.2)}
.win .ico{flex:none;margin-top:2px;width:18px;height:18px;color:var(--signal)}
.win b{font-weight:500;color:var(--signal)}
.flag{display:flex;gap:8px;align-items:flex-start;font-size:13px;color:var(--paper-muted)}
.flag .ico{flex:none;width:15px;height:15px;margin-top:2px}
.go{justify-self:start;margin-top:6px}
/* estado vazio → resultado em destaque */
.card-a{position:relative;transition:background-color .5s var(--ease)}
.card-a:not(.book){background:#f3f5f6}
.card-a.is-full{background:linear-gradient(180deg,#f2f7f9,#e9f1f4)}
.res-empty{display:grid;justify-items:center;align-content:center;gap:10px;min-height:300px;text-align:center;color:#9aa6ab}
.res-empty p{font-size:17px;font-weight:500;color:#8a979d}
.res-empty small{font-size:14px;color:#a3aeb3}
.res-ico{display:grid;place-items:center;width:56px;height:56px;border-radius:18px;color:#b3bdc1;background:#fff;box-shadow:inset 0 0 0 1px rgba(21,36,44,.06)}
.res-ico .ico{width:26px;height:26px}
.res-full{display:none;gap:16px;align-content:start}
.card-a.is-full .res-empty{display:none}
.card-a.is-full .res-full{display:grid}
.card-a.pop .res-full{animation:pop .55s var(--ease)}
@keyframes pop{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.card-a.is-full .big{color:var(--signal)}
.main{font-size:18px;line-height:1.45;letter-spacing:-.015em;color:var(--paper-ink);margin-top:-6px}
.main b{font-weight:500;color:var(--signal)}
.pot{display:grid;gap:8px;padding:18px 20px;border-radius:18px;background:#fff;box-shadow:inset 0 0 0 1px rgba(47,104,120,.18),0 10px 24px rgba(21,36,44,.05)}
.pot-k{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:500;color:var(--paper-muted)}
.pot-k .ico{flex:none;width:17px;height:17px;color:var(--signal)}
.pot-v{font-size:16px;color:var(--paper-muted)}
.pot-v b{display:block;font-size:clamp(28px,3vw,36px);font-weight:300;letter-spacing:-.03em;color:var(--paper-ink)}
.pot-t{font-size:16px;line-height:1.5;color:var(--paper-ink)}
.pot-t b{font-weight:500;color:var(--signal)}
.pot-rows{display:grid;gap:2px}
.pot-rows > div{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:10px 0;border-top:1px solid var(--paper-line)}
.pot-rows > div:first-child{border-top:0;padding-top:2px}
.pot-rows dt{font-size:15px;color:var(--paper-muted)}
.pot-rows dd{margin:0;font-size:20px;font-weight:300;letter-spacing:-.02em;color:var(--paper-ink);text-align:right;white-space:nowrap}
.pot-rows dd small{display:block;font-size:12px;letter-spacing:0;color:var(--paper-muted)}
.pot-rows .hi dd{font-size:26px;color:var(--signal)}
.money--suffix span{font-size:14px}

/* etapa final */
.card--final .card-q{gap:18px}
.summary{display:grid;gap:2px}
.summary li{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:14px 0;border-bottom:1px solid var(--paper-line);font-size:15.5px;color:var(--paper-muted)}
.summary b{font-size:20px;font-weight:300;letter-spacing:-.02em;color:var(--paper-ink);white-space:nowrap}
.summary li.hi{border-bottom:0;margin-top:8px;padding:16px 18px;border-radius:16px;background:rgba(47,104,120,.07);color:var(--paper-ink)}
.summary li.hi b{font-size:26px;color:var(--signal)}
.summary li.is-empty b{color:#b3bdc1}
.sum-note{font-size:12.5px;color:var(--paper-muted)}
.link-btn{justify-self:start;display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0;border:0;background:none;font-size:14px;color:var(--paper-muted);cursor:pointer}
.link-btn:hover{color:var(--paper-ink)}
.link-btn .ico{width:16px;height:16px}
.book{background:linear-gradient(180deg,#f1f6f8,#e8f0f3)}
.book .tile{color:var(--signal);background:#fff;box-shadow:inset 0 0 0 1px var(--paper-line)}
.book h3{font-size:clamp(22px,2vw,28px);font-weight:300;letter-spacing:-.03em;line-height:1.15}
.book-list{display:grid;gap:10px}
.book-list li{display:flex;gap:10px;align-items:flex-start;font-size:15px;color:var(--paper-ink)}
.book-list .ico{flex:none;margin-top:2px;width:18px;height:18px;color:var(--signal)}
.btn--full{width:100%}
.mail-form{display:grid;gap:8px;margin-top:6px;padding-top:16px;border-top:1px solid var(--paper-line)}
.mail-t{font-size:14px;color:var(--paper-muted)}
.mail-row{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:start}
.mail-row .btn{min-height:50px}
.mail-form input{width:100%;min-height:50px;padding:0 16px;border:0;border-radius:14px;background:#fff;box-shadow:inset 0 0 0 1px var(--paper-line);color:var(--paper-ink);font-size:16px}
.mail-form input:focus{outline:none;box-shadow:inset 0 0 0 1.5px var(--signal)}
.mail-form .err{font-size:13px;color:#b0544b}
.mail-form .err:empty{display:none}
.mail-form .form-status.is-ok{color:var(--paper-ink);background:rgba(94,156,134,.12)}
.mail-form .form-status.is-err{color:var(--paper-ink)}
.mail-form .form-status a{color:var(--signal)}

@media (max-width:860px){
  .card{grid-template-columns:1fr}
  .card-a{border-left:0;border-top:1px solid var(--paper-line)}
}
@media (max-width:480px){.fld-row{grid-template-columns:1fr}.mail-row{grid-template-columns:1fr}.res-empty{min-height:180px}}

/* confiança */
.c-trust{padding-block:clamp(56px,7vw,96px);background:#fff;color:var(--paper-ink);border-top:1px solid var(--paper-line)}
.c-trust .title{text-align:center;max-width:none}
.c-trust .hl--glacial{background-image:linear-gradient(100deg,#1f5463,var(--signal) 45%,#6fa3b2)}
.trust{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:36px}
.trust li{display:flex;gap:14px;align-items:flex-start;padding:22px;border-radius:var(--radius-md);background:var(--paper)}
.trust .ico{flex:none;width:22px;height:22px;color:var(--signal)}
.trust b{display:block;font-weight:500;font-size:16px;margin-bottom:4px}
.trust span{font-size:14.5px;color:var(--paper-muted)}
.method{max-width:820px;margin:28px auto 0;border-radius:var(--radius-md);box-shadow:inset 0 0 0 1px var(--paper-line)}
.method summary{list-style:none;display:flex;align-items:center;justify-content:center;gap:8px;min-height:52px;cursor:pointer;font-size:14.5px;font-weight:500;color:var(--paper-muted)}
.method summary::-webkit-details-marker{display:none}
.method summary .ico{width:16px;height:16px}
.method-in{display:grid;gap:12px;padding:0 24px 24px;font-size:14.5px;color:var(--paper-muted)}
.method-in b{color:var(--paper-ink);font-weight:500}
.method-in a{color:var(--signal);text-decoration:underline}
@media (max-width:860px){.trust{grid-template-columns:1fr}}

@media (prefers-reduced-motion:reduce){.card,.card-a.pop .res-full{animation:none}}
.steps-nav{scrollbar-width:none}
.steps-nav::-webkit-scrollbar{display:none}
@media (max-width:560px){.sample{font-size:12.5px;gap:4px 8px}.sample .ico{display:none}}
/* campos chamam o olhar; resultado vazio fica neutro */
.card-q .fld > input,.card-q .money{background:#fff;box-shadow:inset 0 0 0 1.5px rgba(21,36,44,.16),0 2px 6px rgba(21,36,44,.04)}
.card-q .money input::placeholder,.card-q .fld > input::placeholder{color:#c2cacd}
.card-q .fld > input:focus,.card-q .money:focus-within{box-shadow:inset 0 0 0 2px var(--signal),0 0 0 4px rgba(47,104,120,.1)}