/* =====================================================================
   Calculadoras TOFY — estilos da unidade
   Tokens vêm de https://www.tofy.com.br/shared/brand.css
   ===================================================================== */

/* Protecoes globais contra estouro em telas estreitas. */
*,*::before,*::after{box-sizing:border-box}
html{overflow-x:hidden;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{overflow-x:hidden}
img,svg,video,canvas{max-width:100%;height:auto}
.tofy-container{min-width:0}

/* ---------- Cabeçalho da unidade ---------- */
.topo{
  position:sticky;top:0;z-index:50;
  background:var(--tofy-header-bg,rgba(255,255,255,.82));
  backdrop-filter:blur(14px) saturate(160%);
  -webkit-backdrop-filter:blur(14px) saturate(160%);
  border-bottom:1px solid var(--tofy-line);
}
.topo .tofy-container{
  display:flex;align-items:center;justify-content:space-between;
  gap:16px 24px;min-height:62px;flex-wrap:wrap;
}
.marca{display:inline-flex;align-items:baseline;gap:9px;font-weight:600;letter-spacing:-.02em;font-size:16px}
.marca__sufixo{font-family:var(--tofy-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--tofy-muted)}
.topo nav{display:flex;gap:20px;font-size:14px;min-width:0;flex-wrap:wrap}
.topo nav a{color:var(--tofy-text-2);transition:color .2s}
.topo nav a:hover{color:var(--tofy-ink)}

/* ---------- Trilha ---------- */
.trilha{
  font-family:var(--tofy-mono);font-size:11px;letter-spacing:.08em;
  color:var(--tofy-faint);padding:22px 0 0;overflow-wrap:anywhere;
}
.trilha a{color:var(--tofy-muted)}
.trilha a:hover{color:var(--tofy-accent)}
.trilha span{margin:0 6px}

/* ---------- Cabeçalho da calculadora ---------- */
.capa{padding:26px 0 34px}
.capa h1{font-size:clamp(1.9rem,4.4vw,2.9rem);line-height:1.06;letter-spacing:-.035em;font-weight:600;margin:0;max-width:20ch}
.capa__lede{margin:18px 0 0;color:var(--tofy-ink-soft);font-size:1.05rem;line-height:1.62;max-width:62ch}
.selo{
  display:inline-flex;align-items:center;gap:8px;margin:0 0 16px;
  font-family:var(--tofy-mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--tofy-accent);border:1px solid var(--tofy-accent-line);background:var(--tofy-accent-tint);
  padding:5px 11px;border-radius:999px;
}
.selo::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--tofy-accent)}

/* ---------- Ferramenta ---------- */
.ferramenta{
  display:grid;grid-template-columns:minmax(280px,1fr) minmax(300px,1.1fr);
  gap:1px;background:var(--tofy-line);border:1px solid var(--tofy-line);
  border-radius:var(--tofy-radius);overflow:hidden;margin:8px 0 0;
}
@media (max-width:820px){.ferramenta{grid-template-columns:1fr}}

.painel{background:var(--tofy-surface);padding:28px;min-width:0}
.painel__titulo{
  font-family:var(--tofy-mono);font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--tofy-muted);margin:0 0 20px;
}

/* ---------- Formulário ---------- */
.campos{display:flex;flex-direction:column;gap:18px;margin:0;border:0;padding:0}
.campo{display:flex;flex-direction:column;gap:6px}
.campo[hidden]{display:none}
.campo > label{font-size:14px;font-weight:500}
.campo__ajuda{font-size:12.5px;color:var(--tofy-muted);line-height:1.5}
.campo input[type="text"],
.campo input[type="number"],
.campo textarea,
.campo select{
  width:100%;padding:11px 13px;border-radius:var(--tofy-radius-sm);
  border:1px solid var(--tofy-line-strong);background:var(--tofy-paper);
  color:var(--tofy-ink);font-family:var(--tofy-mono);font-size:15px;
  font-variant-numeric:tabular-nums;
  transition:border-color .2s,box-shadow .2s;
  min-width:0;
}
.campo select{font-family:var(--tofy-font)}
.campo input:focus,.campo select:focus,.campo textarea:focus{
  outline:none;border-color:var(--tofy-accent);
  box-shadow:0 0 0 3px var(--tofy-accent-tint-2);
}
/* Bloco de texto colado: fonte de leitura em vez de monoespacada, porque
   aqui o conteudo e prosa e nao numero. So a vertical redimensiona --
   arrastar na horizontal estoura o grid do formulario. */
.campo textarea{
  font-family:var(--tofy-font);font-variant-numeric:normal;
  line-height:1.6;resize:vertical;min-height:120px;
}
.campo--bloco{grid-column:1 / -1}

/* O prefixo/sufixo ancora no proprio input, nunca no campo inteiro:
   assim o texto de ajuda pode quebrar em quantas linhas quiser. */
.campo__entrada{position:relative;display:block;width:100%}
.campo--moeda .campo__entrada input{padding-left:40px}
.campo__prefixo{
  position:absolute;left:14px;top:50%;transform:translateY(-50%);
  font-family:var(--tofy-mono);font-size:14px;line-height:1;
  color:var(--tofy-muted);pointer-events:none;
}
.campo--sufixo .campo__entrada input{padding-right:44px}
.campo__sufixo{
  position:absolute;right:14px;top:50%;transform:translateY(-50%);
  font-family:var(--tofy-mono);font-size:13px;line-height:1;
  color:var(--tofy-muted);pointer-events:none;
}

.campo--marcar{flex-direction:row;align-items:flex-start;gap:10px}
.campo--marcar input{width:17px;height:17px;margin-top:2px;accent-color:var(--tofy-accent);flex:0 0 auto}
.campo--marcar > div{display:flex;flex-direction:column;gap:3px}

/* ---------- Resultado ---------- */
.painel--saida{background:var(--tofy-surface-2)}

.destaque{padding:0 0 22px;border-bottom:1px solid var(--tofy-line)}
.destaque__rotulo{
  margin:0;font-family:var(--tofy-mono);font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--tofy-muted);
}
.destaque__valor{
  margin:10px 0 0;font-size:clamp(2rem,5vw,2.8rem);font-weight:600;
  letter-spacing:-.035em;line-height:1;font-variant-numeric:tabular-nums;
  overflow-wrap:anywhere;
}
.destaque__nota{margin:8px 0 0;font-size:13px;color:var(--tofy-muted)}

.composicao{margin:22px 0 0;display:flex;flex-direction:column;gap:2px}
.composicao__linha{
  display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  padding:9px 0;border-bottom:1px solid var(--tofy-line-soft);
}
.composicao__linha:last-child{border-bottom:none}
.composicao__linha dt{display:flex;flex-direction:column;gap:2px;font-size:14px}
.composicao__linha dd{
  margin:0;font-family:var(--tofy-mono);font-size:14px;
  font-variant-numeric:tabular-nums;white-space:nowrap;
}
.composicao__nota{font-size:11.5px;color:var(--tofy-muted)}
.composicao__linha--desconto dd{color:var(--tofy-muted)}
.composicao__linha--desconto dd::before{content:"− "}
.composicao__linha--total{
  margin-top:8px;padding-top:14px;border-top:1px solid var(--tofy-line-strong);
  border-bottom:none;font-weight:600;
}
.composicao__linha--total dd{font-weight:600}

.aviso{
  margin:18px 0 0;padding:12px 14px;border-radius:var(--tofy-radius-sm);
  background:var(--tofy-accent-tint);border-left:2px solid var(--tofy-accent);
  font-size:13px;color:var(--tofy-ink-soft);line-height:1.55;
}
.aviso--erro{background:rgba(180,60,40,.09);border-left-color:#B43C28}

/* ---------- Tabela auxiliar (amortização, evolução) ---------- */
.tabela-bloco{margin:20px 0 0;border-top:1px solid var(--tofy-line);padding-top:16px}
.tabela-bloco summary{
  cursor:pointer;font-family:var(--tofy-mono);font-size:11.5px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--tofy-accent);
  list-style:none;display:inline-flex;align-items:center;gap:8px;
}
.tabela-bloco summary::-webkit-details-marker{display:none}
.tabela-bloco summary::after{content:"+";font-size:14px}
.tabela-bloco[open] summary::after{content:"−"}
.tabela-bloco__nota{margin:12px 0 0;font-size:12.5px;color:var(--tofy-muted);line-height:1.55}
.tabela-rolagem{margin:14px 0 0;max-height:340px;overflow:auto;border:1px solid var(--tofy-line)}
.tabela{width:100%;border-collapse:collapse;font-family:var(--tofy-mono);font-size:12px}
.tabela th,.tabela td{padding:7px 10px;border-bottom:1px solid var(--tofy-line-soft);white-space:nowrap}
.tabela th{
  position:sticky;top:0;background:var(--tofy-surface-2);text-align:left;
  font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--tofy-muted);
}
.tabela td{color:var(--tofy-ink-soft)}
.tabela .num{text-align:right;font-variant-numeric:tabular-nums}
.tabela tbody tr:last-child td{border-bottom:0}
.tabela tbody tr:nth-child(even){background:var(--tofy-surface-2)}
/* A linha onde o resultado do usuario caiu vence o zebrado. */
.tabela tbody tr.tabela__aqui,
.tabela tbody tr.tabela__aqui:nth-child(even){background:var(--tofy-accent-tint-2)}
.tabela tbody tr.tabela__aqui td{color:var(--tofy-ink);font-weight:600}

/* ---------- A conta aberta ---------- */
.memoria{margin:22px 0 0;border-top:1px solid var(--tofy-line);padding-top:16px}
.memoria summary{
  cursor:pointer;font-family:var(--tofy-mono);font-size:11.5px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--tofy-accent);
  list-style:none;display:inline-flex;align-items:center;gap:8px;
}
.memoria summary::-webkit-details-marker{display:none}
.memoria summary::after{content:"+";font-size:14px}
.memoria[open] summary::after{content:"−"}
.memoria__lista{
  margin:16px 0 0;padding:0 0 0 22px;display:flex;flex-direction:column;gap:14px;
  font-size:13px;color:var(--tofy-ink-soft);
}
.memoria__lista li{display:flex;flex-direction:column;gap:3px}
.memoria__lista strong{font-size:12.5px;color:var(--tofy-ink)}
.memoria__lista span{font-family:var(--tofy-mono);font-size:12px;line-height:1.6}
.memoria__lista,.memoria__lista li,.memoria__lista span{min-width:0;overflow-wrap:anywhere;word-break:break-word}

.acoes{display:flex;gap:10px;flex-wrap:wrap;margin:20px 0 0}
.botao-link{
  font-family:var(--tofy-mono);font-size:11.5px;letter-spacing:.06em;
  border:1px solid var(--tofy-line-strong);background:transparent;color:var(--tofy-ink);
  padding:8px 14px;border-radius:999px;cursor:pointer;transition:border-color .2s,background .2s;
}
.botao-link:hover{border-color:var(--tofy-accent);background:var(--tofy-accent-tint)}

/* ---------- Conteúdo ---------- */
.conteudo{padding:64px 0 0;width:100%;max-width:none}
.conteudo h2{font-size:1.45rem;letter-spacing:-.025em;font-weight:600;margin:44px 0 14px}
.conteudo h2:first-child{margin-top:0}
.conteudo p{margin:0 0 14px;color:var(--tofy-ink-soft);line-height:1.72}

.perguntas{padding:56px 0 0;width:100%;max-width:none}
.perguntas h2{font-size:1.45rem;letter-spacing:-.025em;font-weight:600;margin:0 0 20px}
.pergunta{border-top:1px solid var(--tofy-line);padding:18px 0}
.pergunta h3{margin:0 0 8px;font-size:1rem;font-weight:600}
.pergunta p{margin:0;color:var(--tofy-ink-soft);font-size:.96rem;line-height:1.65}

.fontes-bloco{
  margin:56px 0 0;padding:22px 24px;border:1px solid var(--tofy-line);
  border-radius:var(--tofy-radius);background:var(--tofy-surface);
}
.fontes-bloco h2{margin:0 0 12px;font-size:1rem;font-weight:600}
.fontes-bloco ul{margin:0;padding-left:18px;color:var(--tofy-ink-soft);font-size:.92rem;line-height:1.7}
.fontes-bloco a{color:var(--tofy-accent)}
.isencao-legal{margin:14px 0 0;font-size:.86rem;color:var(--tofy-muted);line-height:1.6}

/* ---------- Relacionadas ---------- */
.relacionadas{padding:56px 0 0}
.relacionadas h2{font-size:1.2rem;font-weight:600;letter-spacing:-.02em;margin:0 0 20px}
.grade{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px;
}
.cartao{
  display:flex;flex-direction:column;gap:6px;padding:20px;
  border:1px solid var(--tofy-line);border-radius:var(--tofy-radius);
  background:var(--tofy-surface);
  transition:border-color .2s,transform .2s var(--tofy-ease);
}
/* Sem esta linha a busca nao esconde cartao nenhum: o display:flex acima
   e regra de autor e vence o [hidden]{display:none} da folha do
   navegador. .categoria, .campo e .vazio ja tinham o par explicito; o
   cartao nao tinha, e a busca marcava hidden sem efeito visual. */
.cartao[hidden]{display:none}
a.cartao:hover{border-color:var(--tofy-accent);transform:translateY(-2px)}
.cartao h3{margin:0;font-size:1rem;font-weight:600;letter-spacing:-.015em}
.cartao p{margin:0;font-size:.88rem;color:var(--tofy-muted);line-height:1.55}
.cartao--breve{opacity:.55;border-style:dashed}

/* ---------- Rodapé ---------- */
.rodape{
  margin-top:80px;border-top:1px solid var(--tofy-line);
  background:var(--tofy-surface);padding:40px 0 28px;
}
.rodape__grade{display:flex;justify-content:space-between;gap:28px;flex-wrap:wrap}
.rodape p{margin:0;font-size:.9rem;color:var(--tofy-muted);max-width:44ch;line-height:1.6}
.rodape__mono{
  font-family:var(--tofy-mono);font-size:11px;letter-spacing:.06em;
  color:var(--tofy-faint);margin-top:24px;padding-top:18px;
  border-top:1px solid var(--tofy-line-soft);
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
}

/* ---------- Hub ---------- */
.hub-capa{padding:56px 0 40px;position:relative;overflow:hidden}
.hub-capa__malha{
  position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(var(--tofy-grid) 1px,transparent 1px),
                   linear-gradient(90deg,var(--tofy-grid) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(90% 78% at 50% 0%,#000 10%,transparent 72%);
  mask-image:radial-gradient(90% 78% at 50% 0%,#000 10%,transparent 72%);
}
.hub-capa .tofy-container{position:relative;text-align:center}
.hub-capa h1{
  font-size:clamp(2.1rem,5.2vw,3.4rem);line-height:1.02;letter-spacing:-.04em;
  font-weight:600;margin:16px auto 0;max-width:18ch;text-wrap:balance;
}
.hub-capa__lede{
  margin:20px auto 0;color:var(--tofy-ink-soft);font-size:1.08rem;
  max-width:58ch;line-height:1.6;text-wrap:pretty;
}

.busca{margin:36px auto 0;position:relative;max-width:620px}
.busca input{
  width:100%;padding:18px 22px 18px 54px;border-radius:999px;
  border:1px solid var(--tofy-line-strong);background:var(--tofy-surface);
  color:var(--tofy-ink);font-family:inherit;font-size:17px;
  box-shadow:0 1px 2px rgba(0,0,0,.04);
  transition:border-color .2s,box-shadow .2s;
}
.busca input:focus{outline:none;border-color:var(--tofy-accent);box-shadow:0 0 0 3px var(--tofy-accent-tint-2)}
.busca__icone{position:absolute;left:22px;top:50%;transform:translateY(-50%);color:var(--tofy-muted);font-size:18px;pointer-events:none}

.categoria{padding:44px 0 0}
.categoria__cabeca{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-bottom:18px}
.categoria h2{font-size:1.25rem;font-weight:600;letter-spacing:-.02em;margin:0}
.categoria__desc{margin:0;font-size:.9rem;color:var(--tofy-muted);max-width:52ch}
.categoria__conta{font-family:var(--tofy-mono);font-size:11px;color:var(--tofy-faint);letter-spacing:.08em}
.categoria[hidden]{display:none}

.vazio{
  margin:40px 0 0;padding:28px;text-align:center;color:var(--tofy-muted);
  border:1px dashed var(--tofy-line-strong);border-radius:var(--tofy-radius);font-size:.95rem;
}
.vazio[hidden]{display:none}

.marcador{
  font-family:var(--tofy-mono);font-size:9.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--tofy-faint);
  border:1px solid var(--tofy-line);border-radius:999px;padding:3px 8px;
  align-self:flex-start;margin-top:4px;
}

@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

.rodape__links{display:flex;gap:22px;flex-wrap:wrap;margin-top:22px;font-size:.9rem}
.rodape__links a{color:var(--tofy-text-2)}
.rodape__links a:hover{color:var(--tofy-accent)}

/* ---------- Assinatura de autoria ---------- */
.assinatura{display:flex;align-items:center;gap:13px;margin:16px 0 0;padding-top:16px;border-top:1px solid var(--tofy-line-soft)}
.assinatura__avatar{
  width:36px;height:36px;border-radius:50%;flex:0 0 auto;
  background:var(--tofy-surface-2);border:1px solid var(--tofy-line);
  display:grid;place-items:center;font-family:var(--tofy-mono);
  font-size:11.5px;color:var(--tofy-muted);
}
.assinatura__nome{margin:0;font-size:14px;font-weight:600}.assinatura__nome a{color:inherit;text-decoration:none}.assinatura__nome a:hover{text-decoration:underline}
.assinatura__credencial{font-family:var(--tofy-mono);font-size:11px;color:var(--tofy-accent);margin-left:6px}
.assinatura__papel{margin:2px 0 0;font-size:12.5px;color:var(--tofy-muted)}

/* Tipografia e espacamento responsivos para todas as paginas. */
.conteudo p,.pergunta p,.fontes-bloco li,.isencao-legal{font-size:clamp(1rem,.96rem + .12vw,1.08rem)}
.conteudo p,.pergunta p,.fontes-bloco li,.isencao-legal,.cartao p{overflow-wrap:anywhere}

@media (max-width:640px){
  .topo .tofy-container{padding-top:10px;padding-bottom:10px}
  .topo nav{width:100%;gap:10px 16px;font-size:13px}
  .capa{padding:22px 0 28px}
  .capa h1{font-size:clamp(1.75rem,9vw,2.35rem);max-width:none;overflow-wrap:anywhere}
  .capa__lede{font-size:1rem}
  .painel{padding:22px 18px}
  .ferramenta{grid-template-columns:minmax(0,1fr)}
  .composicao__linha{align-items:flex-start;gap:10px}
  .composicao__linha dt{min-width:0;overflow-wrap:anywhere}
  .composicao__linha dd{font-size:13px;white-space:normal;text-align:right;overflow-wrap:anywhere}
  .conteudo{padding-top:46px}
  .conteudo h2,.perguntas h2{font-size:1.3rem;line-height:1.25}
  .conteudo p,.pergunta p{line-height:1.68}
  .fontes-bloco{padding:20px 18px}
  .grade{grid-template-columns:minmax(0,1fr)}
  .busca input{padding:15px 18px 15px 46px;font-size:16px}
  .busca__icone{left:18px;font-size:16px}
}

/* O titulo da categoria no hub agora e link, e precisa parecer texto ate
   o mouse chegar perto — sublinhar oito titulos deixaria a pagina ruidosa. */
.categoria__cabeca h2 a{color:inherit;text-decoration:none}
.categoria__cabeca h2 a:hover{text-decoration:underline}
.categoria__link{
  margin-left:8px;font-weight:600;white-space:nowrap;
  color:var(--tofy-accent,#2563eb);text-decoration:none;
}
.categoria__link:hover{text-decoration:underline}

/* ---------- pagina 404 ---------- */
/* O par [hidden] explicito e obrigatorio aqui pelo mesmo motivo do cartao:
   o display de autor abaixo venceria a folha do navegador, e a sugestao
   apareceria mesmo quando nao ha nada parecido a sugerir. */
.sugestao{
  display:inline-flex;align-items:center;gap:8px;margin:20px 0 0;
  padding:10px 16px;border:1px solid var(--tofy-line);border-radius:999px;
  background:var(--tofy-surface);color:var(--tofy-ink-soft);font-size:.95rem;
}
.sugestao[hidden]{display:none}
.sugestao a{font-weight:600;color:var(--tofy-ink)}
code[data-endereco]{
  font-family:var(--tofy-mono);font-size:.9em;
  padding:2px 6px;border-radius:6px;background:var(--tofy-surface);
  border:1px solid var(--tofy-line);word-break:break-all;
}