/* Calculadora de preço do post quanto-cobrar-como-social-media (calc-social.js).
 * Usa os tokens do molde do blog (frontend/blog/molde.html). */
.calc-social:empty { display: none; }
.calc-social {
  margin: 34px 0 40px; padding: clamp(22px, 2.4vw, 34px);
  background: var(--card); border: 1px solid var(--line); border-radius: 20px;
  box-shadow: var(--sh); font-size: var(--t-apoio); line-height: 1.5;
}
.calc-selo {
  display: inline-block; font-size: var(--t-rotulo); font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--acc-txt);
  background: color-mix(in srgb, var(--acc) 10%, transparent);
  padding: 4px 10px; border-radius: 999px;
}
.post-corpo .calc-social h3 { margin: 12px 0 6px; }
.post-corpo .calc-social p { margin: 0; }
.calc-apoio { color: var(--mut); }
.calc-campos {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 14px 18px; margin: 22px 0;
}
/* space-between: rótulo que quebra em duas linhas não desalinha a caixa ao lado */
.calc-campo { display: flex; flex-direction: column; justify-content: space-between; gap: 6px; color: var(--txt); font-weight: 500; }
.calc-entrada { position: relative; display: flex; }
.calc-entrada::after {
  content: attr(data-un); position: absolute; right: 14px; top: 50%;
  transform: translateY(-50%); color: var(--pedra); pointer-events: none;
}
.calc-entrada input {
  width: 100%; font: inherit; font-size: 17px; color: var(--txt);
  background: var(--bg2); border: 1px solid var(--line); border-radius: 12px;
  padding: 11px 44px 11px 14px; min-width: 0;
}
.calc-entrada input:focus { outline: 2px solid var(--acc); outline-offset: 1px; border-color: transparent; }
.calc-resultado { border-top: 1px solid var(--line); padding-top: 20px; }
.calc-numeros {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px; margin: 0 0 16px;
}
.calc-numeros div { background: var(--bg2); border-radius: 14px; padding: 12px 14px; }
.calc-numeros dt { color: var(--mut); font-size: var(--t-rotulo); }
.calc-numeros dd {
  margin: 2px 0 0; font-family: var(--display); font-weight: 600;
  font-size: var(--t-lead); color: var(--txt); font-variant-numeric: tabular-nums;
}
.post-corpo .calc-conclusao { color: var(--txt); }
.calc-aviso { color: #8A3B12; }
.calc-cta {
  margin-top: 18px; padding: 16px 18px; border-radius: 14px;
  background: var(--card2); display: flex; flex-wrap: wrap;
  align-items: center; justify-content: space-between; gap: 14px;
}
.post-corpo .calc-cta p { color: var(--mut); flex: 1 1 280px; }
.post-corpo a.calc-botao {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--acc); color: var(--acc-ink); text-decoration: none;
  font-weight: 600; padding: 11px 20px; border-radius: 999px; white-space: nowrap;
}
.post-corpo a.calc-botao:hover { filter: brightness(1.08); }