/* S3U · FERRAMENTA (modelo: crescer-financas.html, 08/10/2026)
   Layout das 16 ferramentas na régua da home. Carregar DEPOIS de s3u-regua.css.
   Estrutura: section.f-intro (claro) · div.grade-ferramenta > main.ferramenta-main + aside.aside · section.f-leitura · bloco A · aviso.
   O motor (crescer-v1.js) liga só data-*; as classes aqui são só visuais. */
body{background:#F7F5F0}
/* primeira tela: rótulo, título e lead num bloco próprio */
.f-intro{border-bottom:1px solid rgba(22,41,77,.12)}
.f-intro .miolo{padding-bottom:clamp(40px,6vw,56px)}
.f-intro .cab h1{font-size:clamp(32px,4.2vw,52px);line-height:1.08;max-width:20ch}
.f-intro .cab + p{margin-top:16px}
/* grade campos + painel */
.grade-ferramenta{box-sizing:border-box;max-width:1180px;margin:0 auto;padding:clamp(40px,6vw,56px) clamp(20px,4vw,40px) clamp(56px,8vw,80px);display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:clamp(32px,4vw,56px);align-items:start}
.ferramenta-main{display:flex;flex-direction:column;gap:32px;min-width:0}
/* cada bloco de campos: mesmo respiro, mesmo cabeçalho */
.f-bloco{display:flex;flex-direction:column;gap:24px;padding:clamp(24px,3vw,32px);background:#FFFFFF;border:1px solid rgba(22,41,77,.14)}
.f-bloco-cab{display:flex;align-items:baseline;gap:12px;padding-bottom:16px;border-bottom:1px solid rgba(22,41,77,.12)}
.f-n{font:500 15px/1 var(--font-detail);letter-spacing:.06em;color:#806400;flex:0 0 auto}
.f-bloco-cab h2{margin:0;font-family:var(--font-display);font-weight:500;font-size:clamp(20px,1.6vw,22px);line-height:1.3;letter-spacing:-.02em;color:#16294D}
.f-texto{margin:0;font-size:17px;line-height:1.7;color:#364660;max-width:62ch;text-wrap:pretty}
.f-uma{max-width:520px}
.grade-campos{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px;padding-top:0}
/* campos */
.campo{display:flex;flex-direction:column;gap:8px;min-width:0}
.campo__rotulo{font:500 12px/1.5 var(--font-detail);letter-spacing:.14em;text-transform:uppercase;color:#16294D}
.campo input,.campo textarea,.campo select{box-sizing:border-box;min-height:48px;padding:12px 14px;font-size:17px;color:#16294D;background:#FFFFFF;border:1px solid rgba(22,41,77,.24);border-radius:0}
.campo input:focus,.campo textarea:focus,.campo select:focus{border-color:#C9A227;box-shadow:none;outline:1px solid #C9A227;outline-offset:0}
.campo input::placeholder{color:rgba(22,41,77,.4)}
.campo.num input{font-family:var(--font-detail);font-weight:500;font-variant-numeric:tabular-nums}
.campo__dica{font-size:14px;line-height:1.55;color:#364660}
/* resultado parcial dentro do bloco */
.parcial{border-left:1px solid #C9A227;padding:4px 0 4px 16px;align-self:center}
.parcial__rotulo{font:500 12px/1.5 var(--font-detail);letter-spacing:.14em;text-transform:uppercase;color:#806400}
.parcial__valor{font:500 clamp(26px,2.6vw,32px)/1.1 var(--font-detail);color:#16294D;margin-top:8px;font-variant-numeric:tabular-nums}
.parcial__nota{font-size:15px;line-height:1.6;color:#364660;margin-top:8px}
/* escolha (botões de opção ligados ao motor por data-variant) */
.f-escolha{display:flex;flex-direction:column;gap:8px}
.f-escolha-botoes{display:flex;flex-wrap:wrap;gap:8px}
.f-escolha .btn{box-sizing:border-box;min-width:64px;min-height:48px;padding:0 18px;font:600 14px/1 var(--font-detail);letter-spacing:.02em;border:1px solid #16294D;background:transparent;color:#16294D;cursor:pointer}
.f-escolha .btn.btn--primary{background:#16294D;color:#F7F5F0}
.f-escolha .btn:hover{border-color:#C9A227}
.f-escolha-nota{font-size:14px;line-height:1.55;color:#364660}
/* os três botões de ação: mesmo padrão */
.f-botoes{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.f-botoes .botao{min-width:0}
/* tabela (escada) */
.f-tabela{background:#FFFFFF;border:1px solid rgba(22,41,77,.14)}
.f-tab-cab,.f-tab-linha{display:grid;grid-template-columns:90px minmax(0,1fr) minmax(0,1fr) minmax(0,1fr);gap:16px;padding:14px 20px;border-bottom:1px solid rgba(22,41,77,.12);align-items:baseline}
.f-tab-cab{font:500 12px/1.5 var(--font-detail);letter-spacing:.14em;text-transform:uppercase;color:#806400}
.f-tabela .lista{display:flex;flex-direction:column;gap:0;padding-top:0}
.f-tab-linha{padding:16px 20px}
.f-tab-linha > span{font:500 16px/1.4 var(--font-detail);color:#16294D;font-variant-numeric:tabular-nums}
.f-tab-linha > span.f-tab-sec{color:#364660}
.f-tab-linha > span.f-tab-nota{grid-column:1 / -1;margin-top:-6px;font:400 14px/1.5 var(--font-body);color:#364660}
/* planilha + vídeo */
.extras{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px}
.video[hidden]{display:none!important} /* 14/10: sem vídeo gravado, o bloco não aparece */
.video{background:#16294D;color:#F7F5F0;padding:clamp(24px,3vw,32px);display:flex;flex-direction:column;gap:12px}
.video .rotulo-navy{font:500 12px/1.5 var(--font-detail);letter-spacing:.14em;text-transform:uppercase;color:#C9A227}
.video .t{font-family:var(--font-display);font-weight:500;font-size:clamp(20px,1.6vw,22px);letter-spacing:-.02em}
.video p{margin:0;font-size:15px;color:#DFE1E5}
/* navegação entre ferramentas */
.nav-ferramentas{border-top:1px solid #C9A227;padding-top:24px}
.f-nav{display:flex;flex-wrap:wrap;justify-content:space-between;gap:24px}
.f-nav a{display:flex;flex-direction:column;gap:6px;min-height:48px;text-decoration:none;color:#16294D}
.f-nav a.dir{text-align:right}
.f-nav-k{font:500 12px/1.5 var(--font-detail);letter-spacing:.14em;text-transform:uppercase;color:#806400}
.f-nav-nome{font-family:var(--font-display);font-weight:500;font-size:clamp(18px,1.5vw,20px);letter-spacing:-.02em;border-bottom:1px solid #C9A227;padding-bottom:2px}
.f-nav a:hover .f-nav-nome{color:#806400}
.f-assinatura{margin:24px 0 0;font:500 12px/1.5 var(--font-detail);letter-spacing:.14em;text-transform:uppercase;color:#364660}
/* painel navy: UM número herói sob o fio; o resto em linhas chave/valor */
.aside{position:sticky;top:112px;align-self:start;background:#16294D;color:#F7F5F0;padding:clamp(24px,3vw,32px)}
.a-rotulo{font:500 12px/1.5 var(--font-detail);letter-spacing:.14em;text-transform:uppercase;color:#C9A227}
.a-heroi{margin-top:16px;padding-top:20px;padding-bottom:24px;border-top:1px solid #C9A227;border-bottom:1px solid rgba(247,245,240,.16)}
.a-heroi-k{font:500 12px/1.5 var(--font-detail);letter-spacing:.14em;text-transform:uppercase;color:#DFE1E5}
.a-heroi-v{margin-top:8px;font:500 clamp(40px,4vw,56px)/1 var(--font-detail);letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.a-heroi-nota{margin-top:12px;font-size:15px;line-height:1.55;color:#DFE1E5}
.a-linhas{display:flex;flex-direction:column}
.a-linha{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:12px 0;border-bottom:1px solid rgba(247,245,240,.12);font-size:15px;line-height:1.45}
.a-linha .k{color:#DFE1E5}
.a-linha .v{font:500 16px/1.3 var(--font-detail);color:#F7F5F0;text-align:right;font-variant-numeric:tabular-nums;flex:0 0 auto}
.a-linha--total .k{color:#F7F5F0}
.a-item{padding:12px 0;border-bottom:1px solid rgba(247,245,240,.12)}
.a-item .a-linha{padding:0;border:0}
.a-item:last-child{border-bottom:0;padding-bottom:0}
.a-sub{display:flex;align-items:center;gap:8px;margin-top:6px;font-size:14px;line-height:1.5;color:#DFE1E5}
.a-sub .dot{width:7px;height:7px;border-radius:50%;display:inline-block;flex:0 0 auto}
/* leitura: três parágrafos com pesos diferentes */
.f-leitura{background:#FFFFFF;border-top:1px solid rgba(22,41,77,.12)}
.f-leitura .cab{margin-bottom:32px}
.f-l1{margin:0;font-family:var(--font-display);font-weight:500;font-size:clamp(20px,2vw,24px);line-height:1.45;letter-spacing:-.015em;color:#16294D;max-width:62ch;text-wrap:pretty}
.f-l-par{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,4vw,48px);margin-top:32px;padding-top:32px;border-top:1px solid rgba(22,41,77,.12)}
.f-l2{margin:0;font-size:17px;line-height:1.7;color:#16294D;text-wrap:pretty}
.f-l3{margin:0;font-size:15px;line-height:1.7;color:#364660;text-wrap:pretty}
/* aviso educativo: um só, curto, no fim */
.f-aviso{background:#F7F5F0;border-top:1px solid rgba(22,41,77,.12)}
.f-aviso p{box-sizing:border-box;max-width:1180px;margin:0 auto;padding:24px clamp(20px,4vw,40px);font-size:15px;line-height:1.6;color:#364660}
@media (max-width:1000px){
  .grade-ferramenta{grid-template-columns:minmax(0,1fr)}
  .aside{position:static}
}
@media (max-height:820px) and (min-width:1001px){.aside{position:static}}
@media (max-width:720px){
  .grade-campos,.f-l-par{grid-template-columns:minmax(0,1fr)}
  .f-bloco{padding:20px}
  .f-tab-cab,.f-tab-linha{grid-template-columns:52px minmax(0,1fr) minmax(0,1fr) 46px;gap:6px;padding:14px 8px}
  .f-tab-linha > span{font-size:15px}
  .campo__rotulo,.parcial__rotulo,.f-tab-cab,.a-rotulo,.a-heroi-k,.f-nav-k,.f-assinatura{font-size:15px;letter-spacing:.08em}
  .campo__dica,.f-escolha-nota,.a-sub,.f-tab-linha > span.f-tab-nota{font-size:15px}
  /* 08/10 noite: a 15px o cabeçalho da tabela não cabia nas colunas ("DEGRAU" e "VENDAS/MÊS" se sobrepunham) */
  .f-tab-cab{font-size:13px;letter-spacing:.02em}
  .f-botoes .botao{flex:1 1 100%}
}

/* ===== passo a passo (08/10/2026): uma pergunta por tela ===== */
.f-palco{background:#F7F5F0}
.f-progresso{display:flex;flex-direction:column;gap:10px}
.f-progresso-k{font:500 12px/1.5 var(--font-detail);letter-spacing:.14em;text-transform:uppercase;color:#806400}
.f-barra{display:block;height:2px;background:rgba(22,41,77,.14)}
.f-barra > i{display:block;height:100%;width:0;background:#C9A227;transition:width 200ms cubic-bezier(.4,0,.2,1)}
.f-passo{display:flex;flex-direction:column;gap:24px;padding:clamp(28px,4vw,48px);background:#FFFFFF;border:1px solid rgba(22,41,77,.14);border-top:1px solid #C9A227}
.js-passos .f-passo{display:none}
.js-passos .f-passo.is-ativo{display:flex}
.f-passo .cab h1{font-size:clamp(32px,4.2vw,52px);line-height:1.08;max-width:18ch}
.f-pergunta{margin:0;font-family:var(--font-display);font-weight:500;font-size:clamp(28px,3.5vw,40px);line-height:1.15;letter-spacing:-.03em;color:#16294D;max-width:22ch;text-wrap:pretty}
.f-explica{margin:0;font-size:17px;line-height:1.7;color:#364660;max-width:56ch;text-wrap:pretty}
.f-nota{margin:0;font-size:15px;line-height:1.6;color:#364660;max-width:56ch}
.f-ganhos{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;border-top:1px solid rgba(22,41,77,.12);counter-reset:g}
.f-ganhos li{counter-increment:g;display:grid;grid-template-columns:40px minmax(0,1fr);align-items:baseline;padding:14px 0;border-bottom:1px solid rgba(22,41,77,.12);font-family:var(--font-display);font-weight:500;font-size:clamp(18px,1.6vw,20px);line-height:1.4;letter-spacing:-.015em;color:#16294D}
.f-ganhos li::before{content:"0" counter(g);font:500 15px/1 var(--font-detail);letter-spacing:.06em;color:#806400}
.f-campo{max-width:420px}
.f-campo input{min-height:64px;font-size:26px;padding:14px 16px}
.f-campo .campo__dica{font-size:15px}
.f-tec{display:inline-block;margin-left:6px;font:500 12px/1.4 var(--font-detail);letter-spacing:.04em;text-transform:none;color:#806400;vertical-align:1px}
.navy .f-tec,.aside .f-tec{color:#C9A227}
.f-escolha-botoes--grande .btn{min-width:88px;min-height:56px;font-size:20px}
.f-passo-nav{display:flex;flex-wrap:wrap;gap:12px;align-items:center;padding-top:24px;border-top:1px solid rgba(22,41,77,.12)}
.f-passo-nav .botao{min-width:140px}
.f-passo-nav [data-passo-prox]{order:2}
.f-passo .parcial{align-self:flex-start;max-width:420px}
/* resultado: a leitura vem primeiro, em três pesos */
.f-resultado{gap:32px}
.f-leitura-bloco{display:flex;flex-direction:column}
.f-resultado .f-bloco{padding:0;border:0;background:transparent;padding-top:32px;border-top:1px solid rgba(22,41,77,.12)}
.f-resultado .f-n{color:#806400}
/* o painel só aparece depois da primeira pergunta; no início a tela é inteira */
.grade-ferramenta[data-etapa="inicio"]{grid-template-columns:minmax(0,1fr)}
.grade-ferramenta[data-etapa="inicio"] .aside{display:none}
.grade-ferramenta[data-etapa="inicio"] .f-inicio{max-width:820px}
@media (max-width:1000px){
  .js-passos .grade-ferramenta:not([data-etapa="resultado"]) .aside{display:none}
  .grade-ferramenta[data-etapa="resultado"] .aside{order:-1}
}
@media (max-width:720px){
  .f-passo{padding:24px 20px}
  .f-passo-nav .botao{flex:1 1 0;min-width:0}
  .f-progresso-k{font-size:15px;letter-spacing:.08em}
  .f-tec{font-size:15px}
  .f-campo{max-width:none}
}