/* ISAN · ferramentas gratuitas. Mesmo design system da home: papel + ink, cobalto na ação,
   Hanken Grotesk + IBM Plex Mono só em número, itálico light na palavra-chave. Celular primeiro. */
:root{
  --paper:#FBFBFC; --paper-2:#EFF1F6; --ink:#0A1322; --ink-2:#111E33; --ink-3:#1A2C47;
  --muted:#455A80; --hair:#DCE1EA; --on-ink:#fff; --on-ink-body:#C2CADA; --on-ink-muted:#97A4BC; --ink-line:#26324A;
  --cobalt:#2563EB; --cobalt-text:#1A4ACB; --cobalt-soft:#93AEF6; --cobalt-wash:#EEF3FE; --citron:#CDE94B;
  --risk-low:#11875A; --risk-mod:#B7791F; --risk-high:#C9562A; --risk-crit:#C0341D;
  /* nomes antigos usados pelos scripts das páginas */
  --navy:#0A1322; --navy-deep:#0A1322; --teal:#2563EB; --teal-light:#1A4ACB; --teal-dark:#1A4ACB; --amber:#2563EB;
  --sans:"Hanken Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Consolas,monospace;
  --gut:20px; --ease:cubic-bezier(.2,.7,.2,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:17px;line-height:1.5;-webkit-font-smoothing:antialiased;min-height:100svh;display:flex;flex-direction:column}
a{color:inherit}
:focus-visible{outline:2px solid var(--cobalt);outline-offset:3px}
.m,.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.it{font-weight:300;font-style:italic;color:var(--cobalt)}
#mouseGlow,.mouse-glow,.grid-bg,.whatsapp-float,#whatsappFloat,.brand-tag{display:none!important}

/* barra */
.ibar{background:var(--paper);border-bottom:1px solid var(--hair);position:sticky;top:0;z-index:60}
.ishell{max-width:720px;margin:0 auto;padding-inline:var(--gut)}
.ibar .ishell{display:flex;align-items:center;justify-content:space-between;height:60px}
.imark{display:inline-flex;align-items:center;gap:9px;text-decoration:none;color:var(--ink)}
.imark svg{width:24px;height:24px}
.imark b{font-weight:800;font-size:19px;letter-spacing:-.02em}
.inav{display:flex;align-items:center;gap:18px;font-size:16px}
.iback{text-decoration:none;color:var(--muted)}
.iwa{background:var(--cobalt);color:#fff;text-decoration:none;font-weight:600;padding:9px 14px;border-radius:3px;font-size:15px}
@media (max-width:420px){.iback{display:none}}

/* trilho das telas */
.app,.container{width:100%;max-width:720px;margin:0 auto;flex:1}
.screen{display:none;flex-direction:column;padding:40px var(--gut) 64px;opacity:0;transition:opacity .35s var(--ease)}
.screen.active{display:flex;opacity:1}
.screen.fade-in{opacity:1}
.screen.fade-out{opacity:0}
.anim-up{animation:rise .6s var(--ease) both}
.anim-d1{animation-delay:.06s}.anim-d2{animation-delay:.12s}.anim-d3{animation-delay:.18s}.anim-d4{animation-delay:.24s}.anim-d5{animation-delay:.3s}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* tipografia */
h1{font-weight:800;font-size:clamp(40px,11vw,72px);line-height:.98;letter-spacing:-.045em;text-wrap:balance}
h2{font-weight:800;font-size:clamp(32px,8.4vw,52px);line-height:1;letter-spacing:-.04em;text-wrap:balance}
h3{font-weight:800;font-size:22px;letter-spacing:-.02em;line-height:1.15}
.subtitle{font-size:clamp(20px,5vw,24px);line-height:1.35;color:var(--ink);text-wrap:pretty}
.meta,.desc,.sub,.form-hint{font-size:16px;color:var(--muted);text-wrap:pretty}
.intro-badge,.hero-badge{font-size:15px;color:var(--cobalt-text);font-weight:600;letter-spacing:0;text-transform:none;background:none;border:0;padding:0}

/* botões */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:56px;padding:0 24px;border:0;border-radius:3px;background:var(--cobalt);color:#fff;font:600 17px var(--sans);letter-spacing:0;text-transform:none;text-decoration:none;cursor:pointer;transition:background-color .2s,transform .15s}
.btn:hover{background:var(--cobalt-text)}
.btn:active{transform:translateY(1px)}
.btn:disabled{background:var(--paper-2);color:#8C99B3;cursor:not-allowed}
.btn-teal,.btn-amber{background:var(--cobalt);color:#fff}
.btn-ghost,.btn-back{background:transparent;color:var(--ink);border:1px solid var(--hair)}
.btn-ghost:hover,.btn-back:hover{background:var(--paper-2)}
.btn-save-img,.share-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 16px;background:transparent;border:1px solid var(--hair);border-radius:3px;color:var(--ink);font:600 15px var(--sans);letter-spacing:0;text-transform:none;cursor:pointer}
.btn-save-img:hover,.share-btn:hover{background:var(--paper-2)}

/* progresso: um filete cobalto sob a barra */
.progress-wrap{display:none;position:sticky;top:60px;z-index:55;background:var(--paper);padding:12px var(--gut) 0;max-width:720px;margin:0 auto;width:100%}
.progress-wrap.show,.progress{display:block}
.progress-label{font:500 14px var(--mono);color:var(--muted);margin-bottom:10px;letter-spacing:0;text-transform:none}
.progress-bar{height:3px;background:var(--cobalt);width:0;transition:width .4s var(--ease)}
.progress-wrap::after{content:"";display:block;height:3px;background:var(--paper-2);margin-top:-3px;position:relative;z-index:-1}

/* formulário */
.form-group{display:grid;gap:8px;width:100%;text-align:left}
.form-group label,.form-label{font-size:15px;font-weight:600;color:var(--ink)}
input[type=text],input[type=tel],input[type=email],input[type=number],select,.form-input,.form-select{width:100%;min-height:54px;padding:0 14px;font:500 17px var(--sans);color:var(--ink);background:#fff;border:1px solid var(--hair);border-bottom:2px solid var(--ink);border-radius:3px 3px 0 0;appearance:none;-webkit-appearance:none}
input:focus,select:focus{outline:none;border-bottom-color:var(--cobalt);background:var(--cobalt-wash)}
input::placeholder{color:#8C99B3}
.error-msg{color:var(--risk-crit)!important;font-size:15px!important;margin-top:4px}
.privacy{display:flex;align-items:center;gap:8px;font-size:15px;color:var(--muted)}

/* rodapé */
.ifoot{background:var(--ink);color:var(--on-ink-body);padding:40px 0 calc(32px + env(safe-area-inset-bottom,0px));font-size:15px;margin-top:auto}
.ifoot b{color:#fff}
.ifoot p+p{margin-top:10px}
.ifoot a{color:var(--on-ink-body)}
.ifoot-s{color:var(--on-ink-muted)}
.brand-footer{font-size:15px;color:var(--muted);margin-top:8px}
.brand-footer a{color:var(--cobalt-text)}

/* ───── diagnóstico de risco ───── */
#screenIntro{justify-content:center;gap:20px;min-height:calc(100svh - 61px)}
#screenIntro .btn{margin-top:16px;width:100%}
@media (min-width:640px){#screenIntro .btn{width:auto;align-self:flex-start}}

.question-screen{gap:32px}
.question-card{display:grid;gap:24px}
.question-number{display:none}
.question-text{font-weight:800;font-size:clamp(26px,7vw,40px);line-height:1.08;letter-spacing:-.03em;text-wrap:balance}
.options{display:grid;gap:0;border-top:1px solid var(--hair)}
.option{display:flex;align-items:center;gap:14px;min-height:64px;padding:14px 4px;border-bottom:1px solid var(--hair);cursor:pointer;transition:background-color .2s}
.option:hover{background:var(--paper-2)}
.option input{position:absolute;opacity:0;pointer-events:none}
.option .radio{width:24px;height:24px;flex:0 0 24px;border:2px solid #B9C3D6;border-radius:7px;display:grid;place-items:center;transition:border-color .2s,background-color .2s}
.option.selected .radio{border-color:var(--cobalt);background:var(--cobalt)}
.option.selected .radio::after{content:"";width:8px;height:8px;border-radius:50%;background:#fff}
.option span{font-size:18px;font-weight:500;line-height:1.35}
.option.selected span{font-weight:700}
.q-buttons{display:grid;grid-template-columns:auto 1fr;gap:10px}
.q-buttons .btn{width:100%}

.capture{gap:24px}
.capture form{display:grid;gap:20px;width:100%}
.capture h2{margin-bottom:4px}
.capture .btn{width:100%;margin-top:8px}

.result{gap:28px}
#resultCapture{gap:28px!important;align-items:stretch!important}
.gauge-wrap{position:relative;width:200px;height:200px;margin:8px auto 0}
.gauge-bg,.gauge-fill{fill:none;stroke-width:12;transform:rotate(-90deg);transform-origin:50% 50%}
.gauge-bg{stroke:var(--paper-2)}
.gauge-fill{stroke:var(--cobalt);stroke-dasharray:502;stroke-dashoffset:502;transition:stroke-dashoffset 1.4s var(--ease)}
.gauge-label{position:absolute;inset:0;display:grid;place-content:center;text-align:center}
.gauge-score{font-size:15px;color:var(--muted);font-weight:500}
.gauge-level{font-weight:800;font-size:34px;letter-spacing:-.03em;line-height:1}
.result-msgs{display:grid;gap:12px}
.result-msg{border-left:4px solid var(--cobalt);background:#fff;padding:16px 18px;font-size:17px;line-height:1.45;border-radius:0 3px 3px 0}
.risks-section{display:grid;gap:4px}
.risks-section h3{margin-bottom:8px}
.risk-item{display:flex;gap:12px;align-items:flex-start;padding:14px 0;border-top:1px solid var(--hair);font-size:17px}
.risk-dot{width:10px;height:10px;border-radius:50%;flex:0 0 10px;margin-top:8px}

.tools-progression{display:grid;gap:0}
.tools-progression-title{font-weight:800;font-size:22px;letter-spacing:-.02em;margin-bottom:12px}
.tool-card{display:grid;gap:4px;padding:18px 0;border-top:1px solid var(--hair);text-decoration:none;color:var(--ink)}
.tool-card:last-child{border-bottom:1px solid var(--hair)}
.tool-card-title{display:flex;justify-content:space-between;gap:12px;font-weight:700;font-size:18px}
.tool-card-title .arrow{color:var(--cobalt)}
.tool-card-desc{color:var(--muted);font-size:16px}
.cta-section{background:var(--ink);color:var(--on-ink);margin-inline:calc(var(--gut) * -1);padding:32px var(--gut);display:grid;gap:12px}
.cta-section p{color:var(--on-ink-body);font-size:16px}
.cta-section .btn{width:100%;border-radius:3px!important}
.share-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}

/* ───── simuladores: primeira tela ───── */
#screen-hero,#screenHero{justify-content:center;min-height:calc(100svh - 61px)}
#screen-hero .container,#screen-hero .hero{display:flex;flex-direction:column;gap:20px;text-align:left!important;align-items:stretch}
#screenHero{gap:20px;text-align:left!important;align-items:stretch}
#screen-hero .container{padding:0}
#screen-hero .btn,#screenHero .btn{margin-top:16px;width:100%}
@media (min-width:640px){#screen-hero .btn,#screenHero .btn{width:auto;align-self:flex-start}}

/* formulários dos simuladores */
#screen-form .container,#screen-capture .container{display:flex;flex-direction:column;gap:28px}
#screenForm{gap:28px}
#screen-form h2,#screenForm h2,#screen-capture h2,#screenCapture h2{font-size:clamp(30px,8vw,44px)!important;margin:0!important}
.btn-back{align-self:flex-start;min-height:44px;padding:0 14px;font:600 15px var(--sans);border-radius:3px;cursor:pointer}
.progress{display:flex;gap:6px}
.progress .dot{width:28px;height:4px;border-radius:2px;background:var(--paper-2)}
.progress .dot.active{background:var(--cobalt)}
.divider{display:none}
.field{display:grid;gap:8px}
.field label{font-size:15px;font-weight:600}
.form-group{margin:0}
#form-error{color:var(--risk-crit)!important;font-size:15px!important}
#screen-form .container > div[style*="text-align:center"]{text-align:left!important;margin-top:8px!important}
#screen-form .btn,#screenForm .btn,#screen-capture .btn,#screenCapture .btn{width:100%}
.radio-group{display:grid;gap:0;border-top:1px solid var(--hair)}
.radio-option,.radio-opt{position:relative;display:flex;align-items:center;gap:12px;min-height:56px;padding:12px 4px;border-bottom:1px solid var(--hair);cursor:pointer;font-size:17px;font-weight:500}
.radio-option input,.radio-opt input{position:absolute;opacity:0;pointer-events:none}
.radio-option label{flex:1;cursor:pointer;display:flex;align-items:center;gap:12px;min-height:32px}
.radio-option label::before,.radio-dot{content:"";width:22px;height:22px;flex:0 0 22px;border:2px solid #B9C3D6;border-radius:7px;background:#fff}
.radio-option input:checked + label::before,.radio-opt.selected .radio-dot{border-color:var(--cobalt);background:var(--cobalt)}
.radio-option input:checked + label,.radio-opt.selected{font-weight:700}
.radio-option input:focus-visible + label{outline:2px solid var(--cobalt);outline-offset:2px}
.tooltip-wrap{display:inline;position:relative}
.tooltip-icon{display:inline-grid;place-items:center;width:20px;height:20px;margin-left:6px;border-radius:50%;background:var(--paper-2);color:var(--muted);font:600 13px var(--sans);cursor:help;vertical-align:1px}
.tooltip-text{display:block;margin-top:8px;font-weight:400;font-size:15px;color:var(--muted);line-height:1.45}
.slider-wrap{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:16px}
.slider-value{font:600 28px var(--mono);color:var(--cobalt-text);min-width:3.2ch}
input[type=range]{width:100%;accent-color:var(--cobalt);height:32px}
.capture-card form,.capture-form{display:grid;gap:14px;width:100%}
.capture-fields{display:grid;gap:18px}
.capture-card p,.capture-safe,#screenCapture form > p{color:var(--muted);font-size:16px}
.capture-screen form{display:grid;gap:18px}
.check-icon{display:none}

/* resultado do regime */
.result-container{width:100%;max-width:720px;margin:0 auto;display:flex;flex-direction:column;gap:28px}
#screen-result h2{text-align:left!important;font-size:clamp(30px,8vw,44px)!important;margin:0!important}
#screen-result #resultCapture{display:grid;gap:28px}
.cards-grid{display:grid;gap:12px}
.regime-card{background:#fff;border:1px solid var(--hair);border-radius:3px;padding:20px;display:grid;gap:10px;opacity:0;transform:translateY(10px);transition:opacity .4s var(--ease),transform .4s var(--ease)}
.regime-card.show{opacity:1;transform:none}
.regime-card.best{background:var(--ink);color:#fff;border-color:var(--ink)}
.badge-best{justify-self:start;background:var(--citron);color:var(--ink);font-weight:700;font-size:14px;padding:4px 8px;border-radius:2px;letter-spacing:0}
.card-title{font-weight:800;font-size:22px;letter-spacing:-.02em}
.card-row{display:grid;gap:2px}
.card-value{font:600 30px var(--mono);letter-spacing:-.03em;line-height:1.1}
.card-label,.card-aliquota{font-size:15px;color:var(--muted)}
.regime-card.best .card-label,.regime-card.best .card-aliquota{color:var(--on-ink-body)}
.card-ineligible{color:var(--muted);font-size:16px}
.chart-section{display:grid;gap:16px}
.bar-chart{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;align-items:end;min-height:220px;border-bottom:2px solid var(--ink);padding-top:8px}
.bar-col{display:flex;flex-direction:column;align-items:stretch;justify-content:flex-end;gap:6px;text-align:center}
.bar-val{font:600 14px var(--mono)}
.bar{background:var(--paper-2);border-radius:2px 2px 0 0;transition:height .8s var(--ease)}
.bar-presumido,.bar-simples,.bar-real{background:#B9C3D6}
.bar-label{font-size:14px;color:var(--muted);padding-bottom:6px}
.savings-alert{background:var(--ink);color:#fff;padding:22px;border-radius:3px;display:grid;gap:6px}
.savings-alert .label{color:var(--on-ink-body);font-size:16px}
.savings-alert .amount{font:600 clamp(28px,8vw,40px) var(--mono);letter-spacing:-.03em}
.good-news{border-left:4px solid var(--risk-low);background:#fff;padding:16px 18px;font-size:17px}
.disclaimers,.disclaimer{display:grid;gap:6px;font-size:14px;color:var(--muted)}
.cta-final{background:var(--ink);color:#fff;margin-inline:calc(var(--gut) * -1);padding:32px var(--gut);display:grid;gap:12px}
.cta-final .btn{width:100%;text-align:center;line-height:1.25;padding:14px 20px}
.cta-final .sub{color:var(--on-ink-body)}
#screen-result > .footer{display:none}

/* resultado da dívida */
#screenResult{gap:28px}
#screenResult > h2{margin:0}
.animate-in{opacity:0;transform:translateY(12px);transition:opacity .45s var(--ease),transform .45s var(--ease)}
.animate-in.visible{opacity:1;transform:none}
.section-title{font-weight:800;font-size:22px;letter-spacing:-.02em;margin-bottom:12px}
.section-title .icon{display:none}
.timeline-wrap{position:relative;padding:0}
.timeline-line{display:none}
.timeline-points{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--hair)}
.timeline-point{display:grid;gap:4px;padding:14px 0;border-bottom:1px solid var(--hair);opacity:0;transform:translateY(6px);transition:opacity .4s var(--ease),transform .4s var(--ease)}
.timeline-point:nth-child(odd){padding-right:12px}
.timeline-animated .timeline-point{opacity:1;transform:none}
.timeline-dot{display:none}
.timeline-label{font-size:15px;color:var(--muted)}
.timeline-value{font:600 22px var(--mono);letter-spacing:-.02em}
.c-teal{color:var(--ink)} .c-orange{color:var(--risk-mod)} .c-red-light{color:var(--risk-high)} .c-red{color:var(--risk-crit)}
.growth-text,.eco-note{font-size:16px;color:var(--muted);margin-top:12px}
.eco-card{background:#fff;border:1px solid var(--hair);border-radius:3px;overflow:hidden}
.eco-row{display:flex;justify-content:space-between;gap:12px;padding:14px 18px;border-bottom:1px solid var(--hair);font-size:16px}
.eco-row span:last-child{font:600 16px var(--mono)}
.eco-highlight{background:var(--ink);color:#fff;padding:20px 18px;display:grid;gap:6px}
.eco-highlight .label{color:var(--on-ink-body);font-size:15px}
.eco-highlight .value{font:600 clamp(30px,9vw,44px) var(--mono);letter-spacing:-.03em;background:var(--citron);color:var(--ink);justify-self:start;padding:0 .12em}
.eco-highlight .pct{color:var(--cobalt-soft);font:500 15px var(--mono)}
.bars-wrap{display:grid;gap:18px}
.bar-item{display:grid;gap:8px}
.bar-item .bar-label{text-align:left;padding:0;font-size:15px}
.bar-track{background:var(--paper-2);height:44px;border-radius:2px;overflow:hidden}
.bar-fill{height:100%;width:0;display:flex;align-items:center;padding-inline:12px;font:600 14px var(--mono);white-space:nowrap;transition:width 1s var(--ease)}
.bar-fill.red{background:var(--risk-crit);color:#fff}
.bar-fill.teal{background:var(--cobalt);color:#fff}
.context-box{border-left:4px solid var(--cobalt);background:#fff;padding:16px 18px;font-size:17px}
.cta-section .small{color:var(--on-ink-body)}

/* seta das listas */
select,.form-select{padding-right:44px;cursor:pointer;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%230A1322' stroke-width='2'/%3E%3C/svg%3E") no-repeat right 16px center}
select:focus{background-color:#EEF3FE}
.bar-chart .bar-col:has(.bar) .bar{background:#B9C3D6}

/* ajustes do resultado da dívida no celular */
.eco-highlight .value{font-size:clamp(24px,7vw,34px);line-height:1.25;display:inline;justify-self:start;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.bar-fill{min-width:max-content}
.eco-row span:last-child{text-align:right}

/* sem sobretítulo; telas centradas também quando ficam direto no body */
.intro-badge,.hero-badge{display:none!important}
body > .screen{width:100%;max-width:720px;margin-inline:auto}

/* só nome e WhatsApp: o e-mail sai do formulário (menos atrito no celular) */
.form-group:has(input[type=email]),#capEmail,#cap-email,#errorEmail{display:none!important}