/* ============================================================
   TRIAD Tax Score — estilos não-críticos
   (tokens vivem inline no index.html; aqui ficam componentes,
   quiz, barra de progresso, resultado e celebração)
   ============================================================ */

/* ---------- Blocos de autoridade / educação (tráfego frio) ---------- */
.section{padding:var(--space-6) 0; border-top:1px solid var(--border)}
.section h2{font-size:var(--fs-5)}
.list{list-style:none; margin:0; padding:0; display:grid; gap:var(--space-3)}
.list li{display:flex; gap:var(--space-3); align-items:flex-start; color:var(--text-muted)}
.list .ic{color:var(--gold-ink); flex:0 0 auto; font-weight:700}
.steps3{display:grid; gap:var(--space-4); counter-reset:s}
.steps3 .st{display:flex; gap:var(--space-4); align-items:flex-start}
.steps3 .n{flex:0 0 36px; height:36px; border-radius:50%; background:var(--primary);
  display:flex; align-items:center; justify-content:center; font-weight:700; color:var(--primary-contrast)}
.authority{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:var(--space-5)}
.authority p{margin-bottom:0; color:var(--text-muted)}
.faq details{border-bottom:1px solid var(--border); padding:var(--space-4) 0}
.faq summary{cursor:pointer; font-weight:600; list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; float:right; color:var(--gold-ink)}
.faq details[open] summary::after{content:"–"}
.faq p{margin:var(--space-3) 0 0; color:var(--text-muted)}

/* ---------- Quiz ---------- */
.quiz-head{padding-top:var(--space-5)}
.progress{margin-bottom:var(--space-5)}
.progress-meta{display:flex; justify-content:space-between; font-size:var(--fs-1); color:var(--text-muted); margin-bottom:var(--space-2)}
.progress-track{height:8px; background:var(--surface-2); border-radius:999px; overflow:hidden}
.progress-fill{height:100%; width:0; background:linear-gradient(90deg,var(--primary),var(--gold));
  border-radius:999px; transition:width .4s cubic-bezier(.22,1,.36,1)}
.backbar{display:flex; align-items:center; min-height:32px; margin-bottom:var(--space-2)}
.back{background:none; border:0; color:var(--text-muted); font:inherit; font-size:var(--fs-1);
  cursor:pointer; padding:6px 8px; margin-left:-8px; border-radius:8px; display:inline-flex; gap:6px; align-items:center}
.back:hover{color:var(--text); background:var(--surface-2)}
.back:focus-visible{outline:2px solid var(--gold); outline-offset:1px}

.reward{
  background:rgba(15,122,79,.07); border:1px solid rgba(15,122,79,.22); color:#0b5c3b;
  border-radius:var(--radius-sm); padding:var(--space-3) var(--space-4); margin-bottom:var(--space-4);
  font-size:var(--fs-1); display:flex; gap:var(--space-2); align-items:center;
}
.reward .ic{color:var(--success)}

.q{animation:fade .22s ease both}
@keyframes fade{from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:none}}
.q .eyebrow-q{font-size:var(--fs-1); letter-spacing:.08em; text-transform:uppercase; color:var(--text-muted); margin-bottom:var(--space-2)}
.q h2{font-size:var(--fs-5)}
.q .help{color:var(--text-muted); font-size:var(--fs-2); margin-top:calc(var(--space-3)*-1 + 2px); margin-bottom:var(--space-4)}

/* opções como cards tocáveis */
.options{display:grid; gap:var(--space-3); margin-top:var(--space-4)}
.opt{
  display:flex; align-items:center; gap:var(--space-3); width:100%; text-align:left;
  min-height:56px; padding:var(--space-3) var(--space-4);
  background:var(--surface); color:var(--text); border:1.5px solid var(--border); border-radius:var(--radius);
  font:inherit; font-size:var(--fs-3); cursor:pointer; transition:border-color .12s, background .12s, transform .08s;
}
.opt:hover{border-color:var(--surface-3); background:var(--surface-2)}
.opt:focus-visible{outline:3px solid var(--gold); outline-offset:2px}
.opt .key{flex:0 0 28px; height:28px; border-radius:7px; background:var(--surface-3); color:var(--text-muted);
  display:flex; align-items:center; justify-content:center; font-size:var(--fs-1); font-weight:700}
.opt .tick{margin-left:auto; width:24px; height:24px; border-radius:50%; border:2px solid var(--border); flex:0 0 auto; position:relative}
.opt.sel{border-color:var(--primary); background:rgba(10,51,19,.05)}
.opt.sel .key{background:var(--primary); color:var(--primary-contrast)}
.opt.sel .tick{border-color:var(--primary); background:var(--primary)}
.opt.sel .tick::after{content:""; position:absolute; left:7px; top:3px; width:6px; height:11px;
  border:solid var(--primary-contrast); border-width:0 2px 2px 0; transform:rotate(45deg)}

/* inputs (texto / contato) */
.field{margin-bottom:var(--space-4)}
.field label{display:block; font-weight:600; margin-bottom:var(--space-2); font-size:var(--fs-2)}
.field .opt-tag{color:var(--text-muted); font-weight:500; font-size:var(--fs-1)}
.field input, .field input:focus{outline:none; border-color:var(--primary); box-shadow:0 0 0 3px rgba(10,51,19,.12)}
.field .err-msg{display:none; color:var(--danger); font-size:var(--fs-1); margin-top:6px}
.field.invalid input{border-color:var(--danger)}
.field.invalid .err-msg{display:block}

.errsum{display:none; background:rgba(180,35,24,.06); border:1px solid rgba(180,35,24,.3);
  border-radius:var(--radius-sm); padding:var(--space-3) var(--space-4); margin-bottom:var(--space-4); color:#8f1d14}
.errsum.show{display:block}
.errsum strong{color:var(--text)}

.trust{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-sm);
  padding:var(--space-4); margin-bottom:var(--space-5)}
.trust h3{font-size:var(--fs-3); margin-bottom:var(--space-2)}
.trust p{margin:0; color:var(--text-muted); font-size:var(--fs-1)}

/* ---------- Resultado ---------- */
.result{padding-top:var(--space-5); animation:fade .3s ease both}

.scoreboard{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:var(--space-3); margin:var(--space-5) 0}
.sc{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:var(--space-4) var(--space-3); text-align:center}
/* Serifa nos números: é o momento de maior impacto do resultado, e a
   direção editorial aprovada em julho pede número em serif, não em sans bold. */
.sc .n{font-family:var(--serif); font-size:var(--fs-7); font-weight:600; line-height:1; letter-spacing:-.015em}
.sc.main .n{color:var(--primary)}
.sc .lbl{display:block; font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--text-muted); margin-top:var(--space-2)}
@media (max-width:420px){ .scoreboard{grid-template-columns:1fr 1fr; } .sc.main{grid-column:1/-1} }


.result .cta-card{background:var(--surface); border:1px solid rgba(186,148,33,.35); border-radius:var(--radius);
  padding:var(--space-5); margin:var(--space-5) 0; text-align:center}
.result .cta-card h2{font-size:var(--fs-5)}
.result .cta-card p{color:var(--text-muted)}
.result #cta-real{margin-bottom:var(--space-3)}
.delivery{font-size:var(--fs-1); color:var(--text-muted); text-align:center; margin-top:var(--space-4)}

/* celebração (sóbria; checkmark animado). Respeita reduced-motion via token global */
.celebrate{width:64px; height:64px; border-radius:50%; background:rgba(52,211,153,.12);
  border:2px solid var(--success); display:flex; align-items:center; justify-content:center; margin:0 auto var(--space-4)}
.celebrate svg{width:32px; height:32px}
.celebrate .chk{stroke:var(--success); stroke-width:3; fill:none; stroke-linecap:round; stroke-linejoin:round;
  stroke-dasharray:30; stroke-dashoffset:30; animation:draw .5s .15s forwards}
@keyframes draw{to{stroke-dashoffset:0}}

.footer{padding:var(--space-7) 0 var(--space-6); color:var(--text-muted); font-size:var(--fs-1); border-top:1px solid var(--border); margin-top:var(--space-6)}
.footer a{color:var(--text-muted)}

.spinner{display:inline-block; width:18px; height:18px; border:2px solid rgba(255,255,255,.35);
  border-top-color:var(--primary-contrast); border-radius:50%; animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}


/* ============================================================
   ADIÇÕES — Simulador de Crédito (Revendas)
   O que vem acima é a base herdada do TRIAD Tax Score.
   ============================================================ */

/* ---------- Precedentes (a prova principal desse público) ---------- */
.precs{display:grid; gap:var(--space-3); margin-top:var(--space-4)}
.prec{background:var(--surface); border:1px solid var(--border); border-left:3px solid var(--primary);
  border-radius:var(--radius-sm); padding:var(--space-4)}
.prec .ref{font-family:var(--serif); font-size:var(--fs-2); color:var(--gold-ink); margin-bottom:6px; font-style:italic}
.prec p{margin:0; color:var(--text-muted); font-size:var(--fs-1); line-height:1.55}

/* Nota de honestidade jurídica. Discreta, mas presente — é o que evita
   que o Closer tenha que desmentir a página na call. */
.nota-legal{font-size:var(--fs-1); color:var(--text-muted); line-height:1.55;
  border-top:1px solid var(--border); padding-top:var(--space-4); margin-top:var(--space-4)}

/* ---------- Sócios ---------- */
.socios{display:grid; gap:var(--space-4); margin-top:var(--space-4)}
.socio{display:flex; gap:var(--space-4); align-items:flex-start;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:var(--space-4)}
.socio img{width:72px; height:72px; border-radius:50%; object-fit:cover; flex:0 0 72px;
  border:2px solid var(--surface-3); background:var(--surface-2)}
.socio .info{min-width:0}
.socio .info b{display:block; font-size:var(--fs-3); font-family:var(--serif); font-weight:600}
.socio .cargo{display:block; font-size:11px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--gold-ink); margin:2px 0 var(--space-2)}
.socio .info p{margin:0; font-size:var(--fs-1); color:var(--text-muted); line-height:1.55}

/* ---------- Preview da estimativa (antes de pedir dados) ---------- */
/* É a micro-recompensa mais forte da página: o número dele, antes do formulário. */
.preview{background:linear-gradient(180deg, rgba(186,148,33,.13), rgba(186,148,33,.03));
  border:1px solid rgba(186,148,33,.35); border-radius:var(--radius);
  padding:var(--space-5) var(--space-4); text-align:center; margin-bottom:var(--space-5)}
.preview .lbl{display:block; font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--text-muted)}
.preview .big{font-family:var(--serif); font-size:var(--fs-7); font-weight:600; color:var(--primary);
  line-height:1.1; letter-spacing:-.02em; margin:var(--space-2) 0}
.preview .sub{display:block; font-size:var(--fs-1); color:var(--text-muted)}

/* ---------- Resultado: números em moeda ---------- */
/* Sobrescreve o grid de 3 colunas do Tax Score: valor em reais é longo
   demais pra caber em 1/3 de 600px. Main ocupa a linha inteira. */
.scoreboard{grid-template-columns:1fr 1fr}
.sc.main{grid-column:1/-1}
.sc .n.n-sm{font-size:var(--fs-5)}

/* ---------- Urgência real (prescrição, não contador falso) ---------- */
.urgencia{background:rgba(186,148,33,.09); border:1px solid rgba(186,148,33,.35);
  border-radius:var(--radius-sm); padding:var(--space-4); margin:var(--space-5) 0;
  font-size:var(--fs-2); line-height:1.55; color:#6b5310}
.urgencia b{color:var(--text)}

/* ---------- Memória de cálculo ---------- */
.memoria{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  padding:var(--space-4); margin:var(--space-5) 0}
.memoria summary{cursor:pointer; font-weight:600; list-style:none; color:var(--gold-ink)}
.memoria summary::-webkit-details-marker{display:none}
.memoria summary::after{content:"+"; float:right}
.memoria[open] summary::after{content:"–"}
.mem-body{margin-top:var(--space-4); overflow-x:auto}
table.mem{width:100%; border-collapse:collapse; font-size:var(--fs-1); min-width:320px}
table.mem th, table.mem td{text-align:right; padding:8px 6px; border-bottom:1px solid var(--border); white-space:nowrap}
table.mem th:first-child, table.mem td:first-child{text-align:left; color:var(--text-muted); white-space:normal}
table.mem thead th{color:var(--text-muted); font-weight:600; font-size:11px; letter-spacing:.04em; text-transform:uppercase}
table.mem thead th:last-child{color:var(--gold-ink)}
table.mem tr.tot td{font-weight:700; border-top:1px solid var(--border); border-bottom:0; padding-top:12px}
table.mem tr.tot td:last-child{color:var(--success)}

/* ---------- Desqualificação ---------- */
.dq-icon{width:56px; height:56px; border-radius:50%; background:rgba(251,191,36,.12);
  border:2px solid var(--c-vulneravel); color:var(--c-vulneravel);
  display:flex; align-items:center; justify-content:center; margin:0 auto var(--space-4);
  font-size:28px; font-weight:700; font-family:var(--serif)}

/* ---------- Barra de retomada ---------- */
.resume-bar{position:sticky; top:0; z-index:5; background:var(--surface-2);
  border:1px solid var(--border); border-radius:12px; padding:var(--space-4); margin:var(--space-4) 0;
  display:flex; gap:var(--space-3); flex-wrap:wrap; align-items:center}
.resume-bar span{flex:1; min-width:200px}
.resume-bar .btn{width:auto; min-height:44px; font-size:var(--fs-2)}

/* ============================================================
   MODAL — o funil roda em pop-up sobre a landing
   z-index: overlay 40, barra sticky 50. A barra fica POR CIMA
   de propósito: continua sendo o botão de avançar, na thumb-zone.
   ============================================================ */
.modal{
  position:fixed; inset:0; z-index:40; display:flex; align-items:flex-end; justify-content:center;
  background:rgba(4,35,10,.55); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
  animation:mfade .18s ease both;
}
.modal[hidden]{display:none}
@keyframes mfade{from{opacity:0} to{opacity:1}}
.modal-card{
  position:relative; width:100%; max-width:600px; max-height:92vh;
  background:var(--bg); border:1px solid var(--border); border-bottom:0;
  border-radius:var(--radius) var(--radius) 0 0; box-shadow:var(--shadow-md);
  overflow-y:auto; -webkit-overflow-scrolling:touch;
  /* espaço pra barra sticky não cobrir o conteúdo do modal */
  padding:0 var(--space-4) calc(var(--sticky-h) + var(--space-5) + env(safe-area-inset-bottom));
  animation:mup .24s cubic-bezier(.22,1,.36,1) both;
}
@keyframes mup{from{transform:translateY(24px)} to{transform:none}}
@media (min-width:640px){
  .modal{align-items:center}
  .modal-card{border-radius:var(--radius); border-bottom:1px solid var(--border); max-height:88vh}
}
.modal-close{
  position:sticky; top:0; float:right; z-index:2;
  width:44px; height:44px; margin:var(--space-2) calc(var(--space-2) * -1) 0 0;
  background:var(--surface-2); color:var(--text); border:1px solid var(--border);
  border-radius:50%; font-size:24px; line-height:1; cursor:pointer;
}
.modal-close:hover{background:var(--surface-3)}
.modal-close:focus-visible{outline:3px solid var(--gold); outline-offset:2px}
.modal-body{clear:both}
/* dentro do modal o quiz não precisa do respiro de topo da versão em página */
.modal-body .quiz-head{padding-top:var(--space-2)}
.modal-body .result{padding-top:var(--space-2)}
/* rodapé institucional é redundante dentro do pop-up */
.modal-body .footer{display:none}
body.modal-open{overflow:hidden}
@media (prefers-reduced-motion: reduce){
  .modal, .modal-card{animation:none}
}

/* ============================================================
   ESQUEMAS EXPLICATIVOS
   O público não lê parágrafo sobre imposto. Lê caixa com número.
   ============================================================ */
.esq{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  padding:var(--space-5) var(--space-4); margin:var(--space-5) 0}
.esq-linha{display:flex; align-items:stretch; gap:var(--space-2)}
.esq-cx{flex:1; background:var(--bg); border:1px solid var(--border); border-radius:var(--radius-sm);
  padding:var(--space-3); text-align:center; display:flex; flex-direction:column; justify-content:center}
.esq-cx span{font-size:12px; color:var(--text-muted); display:block}
.esq-cx b{font-family:var(--serif); font-size:var(--fs-4); display:block; margin-top:2px}
.esq-cx em{display:block; font-size:12px; color:var(--gold-ink); font-style:normal; margin-top:6px; font-weight:600}
.esq-seta{display:flex; align-items:center; color:var(--text-muted); font-size:20px}
.esq-desce{width:2px; height:20px; background:var(--border); margin:var(--space-2) auto}
.esq-foco{border-color:var(--gold); border-width:2px; background:rgba(186,148,33,.07)}
.esq-foco b{font-size:var(--fs-6); color:var(--primary)}

.esq-lead{font-size:var(--fs-2); margin:0 0 var(--space-4); font-weight:600}
.esq-barra{display:grid; grid-template-columns:96px 1fr auto; gap:var(--space-3);
  align-items:center; margin-bottom:var(--space-3)}
.esq-rot{font-size:12px; color:var(--text-muted); line-height:1.2}
.esq-trilho{height:26px; background:var(--surface-2); border-radius:6px; overflow:hidden}
.esq-trilho i{display:block; height:100%; border-radius:6px}
.esq-trilho i.ruim{background:var(--primary)}
.esq-trilho i.bom{background:var(--gold)}
.esq-num{font-family:var(--serif); font-size:var(--fs-4); font-weight:600; min-width:74px; text-align:right}
.esq-fecha{margin:var(--space-4) 0 0; font-size:var(--fs-2); padding-top:var(--space-3);
  border-top:1px solid var(--border)}
.esq-fecha b{color:var(--primary)}
@media (max-width:380px){
  .esq-linha{flex-direction:column}
  .esq-seta{transform:rotate(90deg); justify-content:center}
  .esq-barra{grid-template-columns:84px 1fr auto; gap:var(--space-2)}
}

/* ---------- Formulário: selo de segurança ---------- */
.seguranca{display:flex; gap:8px; align-items:flex-start; font-size:var(--fs-1);
  color:var(--text-muted); background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius-sm); padding:var(--space-3); margin:0 0 var(--space-3)}
.field input::placeholder{color:#9aa89d}

/* ---------- Número grande de autoridade ---------- */
.numerao{text-align:center; padding:var(--space-5) var(--space-4); margin:var(--space-4) 0;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius)}
.numerao b{display:block; font-family:var(--serif); font-size:44px; line-height:1;
  color:var(--primary); letter-spacing:-.02em}
.numerao span{display:block; font-size:var(--fs-1); color:var(--text-muted); margin-top:var(--space-2)}

/* ---------- Faixa de empresas ----------
   Wordmark tipográfico, não logo. Usar a marca de terceiro sugerindo relação
   comercial que não existe é risco jurídico e reprova anúncio na Meta. */
.empresas{margin-top:var(--space-5)}
.emp-lbl{display:block; font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--text-muted); text-align:center; margin-bottom:var(--space-3)}
.emp-grid{display:flex; flex-wrap:wrap; gap:var(--space-2); justify-content:center}
.emp{font-family:var(--serif); font-size:var(--fs-2); color:var(--text-muted);
  border:1px solid var(--border); border-radius:999px; padding:7px 16px; background:var(--bg);
  white-space:nowrap}
.emp-nota{font-size:12px; color:var(--text-muted); text-align:center; margin:var(--space-3) 0 0}

/* ---------- Form responsivo: pares lado a lado quando cabe ---------- */
@media (min-width:460px){
  .campos{display:grid; grid-template-columns:1fr 1fr; gap:0 var(--space-3)}
  .campos .field.full{grid-column:1/-1}
}
.field input{min-height:52px}

/* ---------- Próximos passos na tela final ---------- */
.proximos{counter-reset:pp; list-style:none; margin:var(--space-4) 0 var(--space-5); padding:0;
  text-align:left; display:grid; gap:var(--space-3)}
.proximos li{counter-increment:pp; display:flex; gap:var(--space-3); align-items:flex-start;
  font-size:var(--fs-2); color:var(--text-muted); line-height:1.5}
.proximos li::before{content:counter(pp); flex:0 0 26px; height:26px; border-radius:50%;
  background:var(--primary); color:var(--primary-contrast); font-size:13px; font-weight:700;
  display:flex; align-items:center; justify-content:center; margin-top:1px}