/* Créd Fácil — coluna única pensada para celular; contraste alto (uso na rua, no sol).
   Marca âmbar (a mesma do protótipo), ação principal em verde-dinheiro. */
:root{
  --bg:#f4f6f8; --surface:#ffffff; --surface-2:#eef1f4;
  --ink:#141b24; --ink-2:#4a5563; --ink-3:#7a8594;
  --line:#dde2e8; --line-2:#c6cdd6;
  --brand:#e3a52f; --brand-ink:#2a1d04;
  --pri:#11704f; --pri-hover:#0c5c40; --pri-ink:#ffffff; --pri-soft:#e3f2ec;
  --ok:#11704f; --ok-soft:#e3f2ec;
  --warn:#8a5a00; --warn-soft:#fff2d6;
  --bad:#b4322a; --bad-soft:#fde8e6;
  --info:#1f5f9e; --info-soft:#e4effa;
  --focus:#1f5f9e;
  --shadow:0 1px 2px rgba(20,27,36,.06),0 4px 16px rgba(20,27,36,.06);
  --font:system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  --mono:ui-monospace,'SF Mono',Menlo,Consolas,monospace;
  --r:14px; --r-sm:10px;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root{
    --bg:#0f1419; --surface:#171d24; --surface-2:#1f262e;
    --ink:#eef2f6; --ink-2:#b2bcc8; --ink-3:#7f8a97;
    --line:#2a323c; --line-2:#3a4450;
    --brand:#f0b84a; --brand-ink:#2a1d04;
    --pri:#3fbf8c; --pri-hover:#56cf9d; --pri-ink:#06150f; --pri-soft:rgba(63,191,140,.14);
    --ok:#4fcb97; --ok-soft:rgba(79,203,151,.14);
    --warn:#f2c35c; --warn-soft:rgba(242,195,92,.14);
    --bad:#f08a80; --bad-soft:rgba(240,138,128,.14);
    --info:#86b9ee; --info-soft:rgba(134,185,238,.14);
    --focus:#86b9ee;
    --shadow:0 1px 2px rgba(0,0,0,.3);
    color-scheme:dark;
  }
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0; background:var(--bg); color:var(--ink); font-family:var(--font); font-size:16px; line-height:1.5}
a{color:var(--info)}
button,input,select,textarea{font:inherit; color:inherit}
button{cursor:pointer}
:focus-visible{outline:3px solid var(--focus); outline-offset:2px; border-radius:6px}
@media (prefers-reduced-motion:reduce){*{transition:none!important; animation:none!important}}
[hidden]{display:none!important}
.num{font-family:var(--mono); font-variant-numeric:tabular-nums}
.muted{color:var(--ink-3); font-size:14px}
.small{font-size:14px}

/* topo */
.site{background:var(--surface); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:20}
.site .in{max-width:720px; margin:0 auto; padding:12px max(16px,env(safe-area-inset-right)) 12px max(16px,env(safe-area-inset-left)); display:flex; align-items:center; gap:12px}
.marca{display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--ink); font-weight:700; font-size:17px}
.mark{width:34px; height:34px; border-radius:10px; background:var(--brand); color:var(--brand-ink); display:grid; place-items:center; font-size:13px; font-weight:800; letter-spacing:.02em}
.sp{flex:1}
.site nav{display:flex; gap:6px; flex-wrap:wrap}

.wrap{max-width:720px; margin:0 auto; padding:20px max(16px,env(safe-area-inset-right)) 48px max(16px,env(safe-area-inset-left))}
.estreito{max-width:560px}
h1{font-size:26px; line-height:1.2; margin:4px 0 8px; text-wrap:balance}
h2{font-size:20px; line-height:1.25; margin:0 0 8px; text-wrap:balance}
h3{font-size:16px; margin:0 0 6px}
.lead{color:var(--ink-2); font-size:17px; margin:0 0 20px}
.stack{display:flex; flex-direction:column; gap:14px}
.row{display:flex; gap:10px; align-items:center; flex-wrap:wrap}
.row.end{justify-content:flex-end}
.card{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:16px; box-shadow:var(--shadow)}
.card.flat{box-shadow:none}

/* botões */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:50px; padding:0 20px; border-radius:12px; border:1px solid var(--line-2); background:var(--surface); color:var(--ink); font-weight:650; font-size:16px; text-decoration:none}
.btn:hover{background:var(--surface-2)}
.btn.pri{background:var(--pri); border-color:transparent; color:var(--pri-ink)}
.btn.pri:hover{background:var(--pri-hover)}
.btn.bad{background:var(--bad-soft); border-color:transparent; color:var(--bad)}
.btn.ghost{border-color:transparent; background:transparent}
.btn.sm{min-height:38px; padding:0 14px; font-size:14px; border-radius:10px}
.btn.full{width:100%}
.btn:disabled{opacity:.55; cursor:not-allowed}

/* formulários */
.field{display:flex; flex-direction:column; gap:6px; min-width:0}
.field > label,.field > .lbl{font-weight:600; font-size:15px}
.field .hint{color:var(--ink-3); font-size:13.5px}
.err{color:var(--bad); font-size:14px; font-weight:500; margin:0}
input[type=text],input[type=tel],input[type=email],input[type=password],input[type=date],input[type=number],select,textarea{
  width:100%; min-height:52px; padding:12px 14px; border-radius:12px; border:1.5px solid var(--line-2); background:var(--surface); font-size:17px}
textarea{min-height:90px; resize:vertical}
input:focus,select:focus,textarea:focus{border-color:var(--focus); outline:none}
.invalid{border-color:var(--bad)!important}
.grid2{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.grid-num{display:grid; grid-template-columns:1fr 110px; gap:14px}
@media (max-width:460px){.grid2{grid-template-columns:1fr}}
fieldset{border:0; margin:0; padding:0; min-width:0}
.chips{display:flex; flex-wrap:wrap; gap:8px}
.chip{display:inline-flex; align-items:center; min-height:44px; padding:0 16px; border-radius:999px; border:1.5px solid var(--line-2); background:var(--surface); font-size:15px; cursor:pointer; user-select:none}
.chip input{position:absolute; opacity:0; pointer-events:none}
.chip:has(input:checked),.chip.on{border-color:var(--pri); background:var(--pri-soft); color:var(--pri); font-weight:650}
.chip:has(input:focus-visible){outline:3px solid var(--focus); outline-offset:2px}
.check{display:flex; gap:12px; align-items:flex-start; font-size:15px}
.check input{width:22px; height:22px; margin-top:2px; flex:0 0 22px; accent-color:var(--pri)}

/* etapas do cadastro */
.progresso{margin:0 0 18px}
.progresso .barra{height:8px; background:var(--surface-2); border-radius:99px; overflow:hidden}
.progresso .barra i{display:block; height:100%; width:0; background:var(--pri); border-radius:99px; transition:width .25s}
.progresso p{margin:8px 0 0; font-size:14px; color:var(--ink-2)}
.etapa{display:flex; flex-direction:column; gap:16px}
.ref{border-top:1px solid var(--line); padding-top:16px; display:flex; flex-direction:column; gap:12px}
.ref:first-of-type{border-top:0; padding-top:0}
.acoes{display:flex; gap:10px; margin-top:22px}
.acoes .btn{flex:1}
.upload{display:flex; gap:14px; align-items:center}
.prev{width:96px; height:96px; flex:0 0 96px; border-radius:14px; border:2px dashed var(--line-2); background:var(--surface-2) center/cover no-repeat; display:grid; place-items:center; text-align:center; font-size:12px; color:var(--ink-3); padding:6px}
.prev.tem{border-style:solid; border-color:var(--pri)}
.upload .stack{gap:6px; min-width:0}

/* estados */
.pill{display:inline-flex; align-items:center; gap:6px; height:26px; padding:0 10px; border-radius:99px; font-size:13px; font-weight:650; white-space:nowrap}
.pill::before{content:""; width:7px; height:7px; border-radius:50%; background:currentColor}
.p-pendente,.p-em_analise{background:var(--warn-soft); color:var(--warn)}
.p-aprovado{background:var(--ok-soft); color:var(--ok)}
.p-reprovado,.p-bloqueado{background:var(--bad-soft); color:var(--bad)}
.banner{border-radius:var(--r-sm); padding:14px 16px; display:flex; flex-direction:column; gap:4px}
.banner.ok{background:var(--ok-soft); color:var(--ok)}
.banner.warn{background:var(--warn-soft); color:var(--warn)}
.banner.bad{background:var(--bad-soft); color:var(--bad)}
.banner.info{background:var(--info-soft); color:var(--info)}
.banner b{font-size:16px}
.banner span{color:var(--ink-2)}

/* números grandes do portal */
.saldo{display:flex; flex-direction:column; gap:2px}
.saldo .lbl{font-size:13px; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-3); font-weight:650}
.saldo .v{font-size:32px; font-weight:700; line-height:1.15}
.escada{display:flex; align-items:flex-end; gap:6px; height:96px; margin-top:12px}
.degrau{flex:1; min-width:0; border-radius:7px 7px 3px 3px; background:var(--surface-2); display:flex; align-items:flex-end; justify-content:center; padding-bottom:5px; font-size:11px; color:var(--ink-3)}
.degrau.feito{background:var(--pri-soft); color:var(--pri)}
.degrau.atual{background:var(--brand); color:var(--brand-ink); font-weight:800}
.pix{display:flex; flex-direction:column; gap:10px}
.pix .chave{font-family:var(--mono); font-size:16px; padding:12px; background:var(--surface-2); border-radius:10px; overflow-wrap:anywhere; user-select:all}

/* listas e tabelas */
.lista{display:flex; flex-direction:column; background:var(--surface); border:1px solid var(--line); border-radius:var(--r); overflow:hidden}
.item{display:flex; align-items:center; gap:12px; padding:14px 16px; border:0; border-bottom:1px solid var(--line); background:none; text-align:left; width:100%; color:inherit}
.item:last-child{border-bottom:0}
.item:hover{background:var(--surface-2)}
.item .mid{flex:1; min-width:0}
.item .nm{font-weight:650; display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.item .meta{display:block; font-size:13.5px; color:var(--ink-3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.item .rt{display:flex; flex-direction:column; align-items:flex-end; gap:4px; font-size:13px; color:var(--ink-3)}
.tbl-wrap{overflow-x:auto}
.tbl{width:100%; border-collapse:collapse; font-size:15px}
.tbl th,.tbl td{padding:10px 6px; border-bottom:1px solid var(--line); text-align:left; white-space:nowrap}
.tbl th{font-size:12px; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-3)}
.tbl .r{text-align:right}
.tbl tr.hoje td{background:var(--warn-soft)}
.kv{display:grid; grid-template-columns:auto 1fr; gap:8px 16px; margin:0; font-size:15px}
.kv dt{color:var(--ink-3)}
.kv dd{margin:0; min-width:0; overflow-wrap:anywhere}
.filtros{display:flex; gap:8px; overflow-x:auto; padding-bottom:4px; scrollbar-width:none}
.filtros .chip{flex:0 0 auto; min-height:38px; font-size:14px}
.docs{display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:12px}
.doc{display:flex; flex-direction:column; gap:6px; text-decoration:none; color:var(--ink)}
.doc img{width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:10px; border:1px solid var(--line); background:var(--surface-2)}
.doc .pdf{aspect-ratio:4/3; border-radius:10px; border:1px solid var(--line); background:var(--surface-2); display:grid; place-items:center; font-weight:700; color:var(--ink-2)}
.refs{display:flex; flex-direction:column; gap:10px}
.refl{display:flex; gap:12px; align-items:center; justify-content:space-between; flex-wrap:wrap; padding:12px; border:1px solid var(--line); border-radius:10px}
.refl .q{min-width:0}
.voltar{display:inline-flex; align-items:center; gap:4px; color:var(--ink-2); text-decoration:none; font-size:15px; min-height:40px; background:none; border:0; padding:0}
.sec{display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin:24px 0 10px}
.sec h2{margin:0; font-size:17px}

/* landing */
.hero{padding:12px 0 8px}
.hero h1{font-size:32px}
.passos{display:grid; gap:12px; margin:22px 0; padding:0; list-style:none; counter-reset:p}
.passos li{display:flex; gap:14px; align-items:flex-start; background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:14px 16px}
.passos li::before{counter-increment:p; content:counter(p); flex:0 0 32px; height:32px; border-radius:50%; background:var(--brand); color:var(--brand-ink); display:grid; place-items:center; font-weight:800}
.passos b{display:block}
.passos span{color:var(--ink-2); font-size:15px}
.rodape{margin-top:36px; padding-top:18px; border-top:1px solid var(--line); color:var(--ink-3); font-size:13px}
.termos h2{margin-top:26px}
.termos p,.termos li{color:var(--ink-2); max-width:65ch}
.aviso-rascunho{background:var(--warn-soft); color:var(--warn); padding:12px 14px; border-radius:10px; font-weight:600}

/* modal e aviso */
.overlay{position:fixed; inset:0; z-index:50; background:rgba(10,14,20,.55); display:flex; align-items:flex-end; justify-content:center}
.sheet{width:100%; max-width:480px; background:var(--surface); border-radius:18px 18px 0 0; padding:20px max(18px,env(safe-area-inset-right)) calc(20px + env(safe-area-inset-bottom)) max(18px,env(safe-area-inset-left)); display:flex; flex-direction:column; gap:14px}
@media (min-width:600px){.overlay{align-items:center}.sheet{border-radius:18px}}
.toast{position:fixed; left:50%; bottom:calc(20px + env(safe-area-inset-bottom)); transform:translateX(-50%); z-index:60; background:var(--ink); color:var(--bg); padding:12px 18px; border-radius:12px; font-weight:550; max-width:calc(100% - 32px); box-shadow:0 8px 24px rgba(0,0,0,.25)}
.toast.bad{background:var(--bad); color:#fff}
.carregando{padding:40px 0; text-align:center; color:var(--ink-3)}

/* calendário de parcelas: cada dia com parcela pinta a situação */
.cal-wrap{display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:18px}
.cal-t{font-weight:700; text-transform:capitalize; margin-bottom:8px}
.cal-g{display:grid; grid-template-columns:repeat(7,1fr); gap:4px}
.cal-h{font-size:11px; font-weight:700; color:var(--ink-3); text-align:center; padding-bottom:2px}
.cal-d{aspect-ratio:1; min-width:0; border-radius:8px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px; border:1.5px solid transparent; line-height:1.1}
.cal-d b{font-size:14px}
.cal-d small{font-size:10px; font-weight:600; white-space:nowrap}
.cal-d.fora{color:var(--ink-3); opacity:.45}
.cal-d.fora b{font-weight:400; font-size:13px}
.cal-d.s-paga{background:var(--ok-soft); color:var(--ok)}
.cal-d.s-paga_atraso{background:var(--warn-soft); color:var(--warn)}
.cal-d.s-atrasada{background:var(--bad-soft); color:var(--bad); border-color:var(--bad)}
.cal-d.s-hoje{background:var(--brand); color:var(--brand-ink)}
.cal-d.s-a_vencer{background:var(--surface-2); color:var(--ink); border-color:var(--line-2)}
@media (max-width:360px){.cal-d small{display:none}}
.cal-leg{display:flex; flex-wrap:wrap; gap:8px 16px; margin-top:12px; font-size:13px; color:var(--ink-2)}
.cal-leg span::before{content:""; display:inline-block; width:11px; height:11px; border-radius:3px; margin-right:6px; vertical-align:-1px; background:var(--surface-2)}
.cal-leg .s-paga::before{background:var(--ok)} .cal-leg .s-paga_atraso::before{background:var(--warn)}
.cal-leg .s-atrasada::before{background:var(--bad)} .cal-leg .s-hoje::before{background:var(--brand)}
.cal-leg .s-a_vencer::before{background:var(--line-2)}
.pill.s-paga{background:var(--ok-soft); color:var(--ok)} .pill.s-paga_atraso{background:var(--warn-soft); color:var(--warn)}
.pill.s-atrasada{background:var(--bad-soft); color:var(--bad)} .pill.s-hoje{background:var(--brand); color:var(--brand-ink)}
.pill.s-a_vencer{background:var(--surface-2); color:var(--ink-2)}
.p-andamento{background:var(--info-soft); color:var(--info)}

/* bloco do crédito concedido: valor + Pix do credor lado a lado (empilha no celular) */
.concedido{display:grid; grid-template-columns:1fr 1fr; gap:16px; align-items:start}
@media (max-width:560px){.concedido{grid-template-columns:1fr}}
.resumo{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--r-sm); overflow:hidden}
.resumo div{background:var(--surface); padding:10px 12px}
.resumo .v{font-size:20px; font-weight:700}
.resumo .bad{color:var(--bad)}
.simulacao{background:var(--surface-2); border-radius:var(--r-sm); padding:12px 14px; font-size:15px}
.simulacao b{font-size:18px}
.tbl td .btn{min-height:34px}

/* ---------- admin: abas, números, gráfico ---------- */
.abas{border-top:1px solid var(--line)}
.abas .in{max-width:720px; margin:0 auto; display:flex; gap:4px; overflow-x:auto; scrollbar-width:none; padding:0 max(10px,env(safe-area-inset-right)) 0 max(10px,env(safe-area-inset-left))}
.abas button{flex:0 0 auto; min-height:46px; padding:0 14px; border:0; border-bottom:3px solid transparent; background:none; color:var(--ink-2); font-weight:600; font-size:15px}
.abas button.on{color:var(--ink); border-bottom-color:var(--brand)}
.kpis{display:grid; grid-template-columns:repeat(4,1fr); gap:10px}
@media (max-width:700px){.kpis{grid-template-columns:repeat(2,1fr)}}
.kpi{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:12px 14px; display:flex; flex-direction:column; gap:2px; min-width:0}
.kpi .lbl{font-size:12px; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-3); font-weight:650}
.kpi .v{font-size:21px; font-weight:700; line-height:1.2; overflow-wrap:anywhere}
.kpi .sub{font-size:13px; color:var(--ink-2)}
.kpi.neg .v,.neg{color:var(--bad)}
.kpi.pos .v{color:var(--ok)}
.alerta{width:100%; border:0; text-align:left; cursor:pointer; margin-bottom:14px; flex-direction:row; justify-content:space-between; align-items:center; flex-wrap:wrap}

.graf{display:flex; flex-direction:column; gap:8px}
.graf-leg{display:flex; gap:16px; flex-wrap:wrap; font-size:13px; color:var(--ink-2)}
.graf-leg span::before{content:""; display:inline-block; width:11px; height:11px; border-radius:3px; margin-right:6px; vertical-align:-1px}
.graf-leg .l-rec::before{background:var(--pri)}
.graf-leg .l-prev::before{background:transparent; border:1.5px solid var(--line-2)}
.graf-area{position:relative; height:170px; border-top:1px dashed var(--line); padding-top:4px}
.graf-max{position:absolute; top:-9px; right:0; font-size:11px; color:var(--ink-3); background:var(--surface); padding-left:4px}
.graf-cols{display:flex; align-items:flex-end; gap:2px; height:100%; border-bottom:1px solid var(--line-2)}
.graf-cols .col{flex:1; min-width:0; height:100%; position:relative; cursor:pointer}
.graf-cols .col span{position:absolute; left:15%; right:15%; bottom:0; border-radius:4px 4px 0 0}
.graf-cols .col .prev{border:1.5px solid var(--line-2); border-bottom:0; background:transparent}
.graf-cols .col .rec{background:var(--pri); left:25%; right:25%}
.graf-cols .col.on,.graf-cols .col:focus-visible{background:var(--surface-2); border-radius:4px; outline:none}
.graf-tip{position:absolute; top:6px; z-index:3; background:var(--ink); color:var(--bg); font-size:13px; line-height:1.4; padding:8px 10px; border-radius:8px; pointer-events:none; white-space:nowrap}
.graf-eixo{display:flex; justify-content:space-between; font-size:11px; color:var(--ink-3)}

.pilha{display:flex; gap:2px; height:18px; border-radius:6px; overflow:hidden; background:var(--surface-2)}
.pilha .seg{display:block; height:100%}
.seg.st-ok{background:var(--ok)} .seg.st-warn{background:var(--warn)} .seg.st-bad{background:var(--bad)}
.pilha-leg{display:flex; flex-direction:column; gap:6px; font-size:14px}
.pilha-leg span{color:var(--ink-2)} .pilha-leg b{color:var(--ink)}
.pilha-leg .st-ok::first-letter{color:var(--ok)} .pilha-leg .st-warn::first-letter{color:var(--warn)} .pilha-leg .st-bad::first-letter{color:var(--bad)}

.grid4{display:grid; grid-template-columns:repeat(4,1fr); gap:12px}
@media (max-width:700px){.grid4{grid-template-columns:1fr 1fr}}
.sim-res{display:grid; grid-template-columns:repeat(4,1fr); gap:10px}
@media (max-width:700px){.sim-res{grid-template-columns:1fr 1fr}}
.sim-res .sim-eq{grid-column:1 / -1; margin:0; color:var(--ink-2)}
.sim-res .sim-eq.neg{color:var(--bad)}

.prog{display:block; height:6px; border-radius:99px; background:var(--surface-2); margin-top:6px; overflow:hidden}
.prog i{display:block; height:100%; background:var(--pri); border-radius:99px}
.cob{display:flex; flex-direction:column; gap:10px}
.cob-val b{font-size:22px}
.link{background:none; border:0; padding:0; color:var(--ink); font-weight:700; font-size:17px; text-align:left; cursor:pointer; text-decoration:underline; text-decoration-color:var(--line-2); text-underline-offset:3px}
.pixbar{justify-content:space-between}
.pixbar .mid{min-width:0; overflow-wrap:anywhere}
.lbl{font-size:12px; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-3); font-weight:650}
.pilha-leg span{display:block}

/* segurança */
.passos-tf{margin:0; padding-left:20px; display:flex; flex-direction:column; gap:14px}
.passos-tf li{color:var(--ink-2)} .passos-tf b{color:var(--ink)}
.passos-tf .chave{font-family:var(--mono); font-size:16px; letter-spacing:.06em; padding:12px; margin:8px 0; background:var(--surface-2); border-radius:10px; overflow-wrap:anywhere; user-select:all; color:var(--ink)}
.passos-tf input{max-width:160px; letter-spacing:.3em; font-family:var(--mono)}
.codigos{display:grid; grid-template-columns:repeat(2,1fr); gap:8px; padding:12px; background:var(--surface-2); border-radius:10px; font-size:16px}
.check-seg{list-style:none; margin:0; display:flex; flex-direction:column; gap:10px}
.check-seg li{display:flex; gap:10px; align-items:flex-start; font-size:15px}
.check-seg li > span{flex:0 0 22px; height:22px; border-radius:50%; display:grid; place-items:center; font-size:13px; font-weight:800}
.check-seg li.ok > span{background:var(--ok-soft); color:var(--ok)}
.check-seg li.falta > span{background:var(--warn-soft); color:var(--warn)}
.tbl tr.alerta-linha td{background:var(--warn-soft)}
.link.small{font-size:13px; font-weight:600}
.sheet .chave{font-family:var(--mono); font-size:22px; letter-spacing:.08em; padding:14px; text-align:center; background:var(--surface-2); border-radius:10px; user-select:all}
.alerta-box{margin-bottom:14px; gap:10px}
.alerta-box b{color:inherit}
.perigo{border-color:var(--bad); justify-content:space-between}
.perigo .mid{flex:1; min-width:200px; color:var(--ink-2)}

/* ---------- tela inicial (Créd Fácil, design de 23/10/2026): escuro azul-marinho com brilho roxo ---------- */
body.inicio{
  --in-bg:#161826; --in-cartao:#212230; --in-borda:#3a3b4a; --in-tinta:#eeedf3; --in-tinta-2:#b6b5c6; --in-tinta-3:#8e8da2;
  --in-roxo:#8f7ef0; --in-roxo-claro:#a99bf7;
  color-scheme:dark; color:var(--in-tinta); min-height:100vh;
  background:
    radial-gradient(900px 700px at 72% 46%, rgba(120,96,210,.22), transparent 65%),
    radial-gradient(700px 600px at 8% 96%, rgba(96,90,190,.14), transparent 60%),
    var(--in-bg);
  background-attachment:fixed;
}
.in-wrap{max-width:1180px; margin:0 auto; min-height:100vh; display:flex; flex-direction:column;
  padding:28px max(20px,env(safe-area-inset-right)) 24px max(20px,env(safe-area-inset-left))}
.in-topo{padding-bottom:40px}
.in-marca{display:inline-flex; align-items:center; gap:14px; color:var(--in-tinta); text-decoration:none; font-size:20px; font-weight:500}
.in-cifrao{width:34px; height:34px; border-radius:50%; border:1.5px solid var(--in-roxo); color:var(--in-roxo-claro); display:grid; place-items:center; font-size:17px; font-weight:500}
.in-grade{flex:1; display:grid; grid-template-columns:minmax(0,1fr) minmax(320px,470px); gap:56px; align-items:start; padding-top:24px}
.in-hero{padding-top:24px; min-width:0}
.in-traco{display:block; width:64px; height:2px; background:var(--in-roxo); margin-bottom:34px}
.in-hero h1{font-size:clamp(56px,9vw,104px); line-height:.98; font-weight:500; letter-spacing:-.025em; margin:0 0 44px; color:var(--in-tinta)}
.in-sub{font-size:clamp(22px,2.4vw,27px); font-weight:500; margin:0 0 18px; color:var(--in-tinta); text-wrap:balance}
.in-texto{font-size:clamp(17px,1.7vw,20px); line-height:1.6; color:var(--in-tinta-2); margin:0; max-width:34ch}
.in-lado{min-width:0}
.in-cartao{background:var(--in-cartao); border-radius:16px; padding:32px 36px 36px; display:flex; flex-direction:column; gap:18px; box-shadow:0 20px 60px rgba(0,0,0,.25)}
.in-cartao h2{font-size:30px; font-weight:500; margin:0 0 8px; color:var(--in-tinta)}
.in-campo{display:flex; flex-direction:column; gap:10px}
.in-campo label{font-size:15px; color:var(--in-tinta-2)}
.in-campo input{width:100%; min-height:50px; padding:12px 16px; border-radius:10px; border:1.5px solid var(--in-borda); background:transparent; color:var(--in-tinta); font-size:17px}
.in-campo input::placeholder{color:var(--in-tinta-3)}
.in-campo input:focus{outline:none; border-color:var(--in-roxo)}
.in-botao{margin-top:12px; min-height:44px; border-radius:10px; border:1.5px solid var(--in-roxo); background:transparent; color:var(--in-roxo-claro); font-size:17px; font-weight:500; cursor:pointer; transition:background .15s}
.in-botao:hover,.in-botao:focus-visible{background:rgba(143,126,240,.14)}
.in-botao:disabled{opacity:.6; cursor:wait}
.in-erro{margin:0; color:#f4a59c; font-size:14.5px}
.in-links{color:var(--in-tinta-2); font-size:17px; line-height:1.75; margin:28px 0 10px}
.in-colab{margin:0 0 36px; font-size:15px}
.in-colab a{color:var(--in-tinta-3); text-decoration:underline; text-underline-offset:4px}
.in-colab a:hover{color:var(--in-roxo-claro)}
.in-links a{color:var(--in-tinta); text-decoration:underline; text-decoration-color:var(--in-roxo); text-underline-offset:4px}
.in-passos{list-style:none; counter-reset:passo; margin:0; padding:0; display:flex; flex-direction:column; gap:26px}
.in-passos li{counter-increment:passo; display:grid; grid-template-columns:30px 1fr; gap:16px; color:var(--in-tinta-2); font-size:16.5px; line-height:1.6}
.in-passos li::before{content:counter(passo); width:30px; height:30px; border-radius:50%; border:1.5px solid var(--in-roxo); color:var(--in-tinta); display:grid; place-items:center; font-size:14px; margin-top:-1px}
.in-passos b{color:var(--in-tinta); font-weight:500}
.in-passos li > span{min-width:0}
body.inicio{overflow-x:hidden}
.in-rodape{margin-top:56px; padding-top:18px; border-top:1px solid rgba(255,255,255,.08); color:var(--in-tinta-3); font-size:13px; line-height:1.6}
.in-rodape a{color:var(--in-tinta-2); margin-left:6px}
body.inicio :focus-visible{outline-color:var(--in-roxo-claro)}
@media (max-width:860px){
  .in-grade{grid-template-columns:minmax(0,1fr); gap:36px; padding-top:0}
  .in-hero{padding-top:0}
  .in-hero h1{margin-bottom:28px}
  .in-topo{padding-bottom:28px}
  .in-cartao{padding:26px 22px 28px}
}
/* marca Créd Fácil nas páginas internas: círculo roxo com $, igual à tela inicial */
:root{--marca:#6c5ad6}
@media (prefers-color-scheme:dark){:root{--marca:#a99bf7}}
.mark{background:transparent; border:1.5px solid var(--marca); color:var(--marca); border-radius:50%; font-size:16px; font-weight:600}

/* conciliação */
.conc .conc-v{font-size:20px}
.conc.terceiro{border-color:var(--bad)}
.vazio-lista{padding:12px; margin:0}