/* Ferramentas grátis (/ferramentas/). Criado 2026-10-15 23:05 BRT.
   Regra da casa: a ferramenta ocupa a primeira dobra, com o selo "grátis, sem cadastro" colado nela. */
.tool-hero {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: start;
  width: min(100%, var(--container));
  margin-inline: auto;
  padding: clamp(1.25rem, 3vw, 2.5rem) var(--gutter) clamp(2rem, 4vw, 3.5rem);
}
.tool-hero__kicker { margin: 0 0 var(--space-sm); color: var(--accent-hi); }
.tool-hero__title {
  margin: 0;
  max-width: 18ch;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.75rem, 3.4vw, 3.1rem);
  line-height: 1.06;
  letter-spacing: -0.03em;
  text-wrap: balance;
}
.tool-seal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-xs) var(--space-sm);
  margin: var(--space-md) 0 0;
  font-size: var(--text-sm);
}
.tool-seal > span:first-child {
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 600;
}
.tool-seal__date { color: var(--ink-3); }
.tool-hero__lede { margin: var(--space-lg) 0 0; max-width: 46ch; color: var(--ink-2); font-size: var(--text-base); line-height: 1.6; }

.calc {
  display: grid;
  gap: var(--space-md);
  padding: clamp(1rem, 2.4vw, 1.75rem);
  border: var(--hair) solid var(--rule);
  border-radius: var(--radius-lg);
  background: var(--night-2);
  box-shadow: var(--shadow-card);
}
.calc__row { display: grid; gap: var(--space-sm); }
.calc__row--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.calc__row--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.calc__field { display: grid; align-content: start; gap: 0.35rem; min-width: 0; }
/* Rótulo, campo e dica em trilhas comuns da linha: rótulo de 2 linhas não desalinha o campo vizinho */
@supports (grid-template-rows: subgrid) {
  .calc__field { grid-row: span 3; grid-template-rows: subgrid; }
}
.calc__label { align-self: end; color: var(--ink); font-size: var(--text-sm); font-weight: 600; }
.calc__hint { color: var(--ink-3); font-size: var(--text-xs); line-height: 1.35; }
.calc input,
.calc select {
  width: 100%;
  min-height: 44px;
  padding: 0.55rem 0.7rem;
  border: var(--hair) solid var(--rule);
  border-radius: var(--radius-sm);
  background: var(--night);
  color: var(--ink);
  font: inherit;
  font-size: var(--text-base);
}
.calc input:focus-visible,
.calc select:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.calc__note { margin: 0; color: var(--ink-3); font-size: var(--text-xs); }

.calc__result {
  display: grid;
  gap: var(--space-sm);
  padding: var(--space-md);
  border-radius: var(--radius);
  background: var(--night-3);
}
.calc__total-label { margin: 0; color: var(--ink-2); font-size: var(--text-sm); }
.calc__total {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 2.75rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.calc__lines { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-xs); margin: 0; }
.calc__lines div { min-width: 0; }
.calc__lines dt { color: var(--ink-3); font-size: var(--text-xs); }
.calc__lines dd { margin: 0.15rem 0 0; color: var(--ink); font-size: var(--text-sm); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.calc__free { margin: 0; color: var(--accent-hi); font-size: var(--text-sm); }
.calc__free:empty { display: none; }
.calc__qr { margin: 0; padding-top: var(--space-sm); border-top: var(--hair) solid var(--rule-soft); color: var(--ink-2); font-size: var(--text-sm); line-height: 1.5; }
.calc__cta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm) var(--space-lg); }
.calc__cta-link { color: var(--accent-hi); font-size: var(--text-sm); text-decoration: underline; text-underline-offset: 0.25em; }

.tool-body { width: min(100%, var(--container)); margin-inline: auto; padding-inline: var(--gutter); }
.tool-byline { margin: 0; padding-top: var(--space-lg); color: var(--ink-3); font-size: var(--text-sm); }
.tool-embed { padding-block: clamp(2rem, 4vw, 3.5rem); border-bottom: var(--hair) solid var(--rule); }
.tool-embed h2 { margin: 0 0 var(--space-sm); font-family: var(--font-display); font-weight: 500; font-size: var(--text-xl); }
.tool-embed p { margin: 0 0 var(--space-md); color: var(--ink-2); }
.tool-embed__code {
  margin: 0;
  padding: var(--space-md);
  overflow-x: auto;
  border: var(--hair) solid var(--rule-soft);
  border-radius: var(--radius);
  background: var(--abyss);
  color: var(--ink-2);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  line-height: 1.6;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  user-select: all;
}
.tool-embed-credit { display: none; }
.calc__barra { display: none; }

@media (max-width: 960px) {
  .tool-hero { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-md); }
  /* A resposta direta desce para depois da ferramenta, sem sumir da página. */
  .tool-hero__intro { display: contents; }
  .tool-hero__intro > * { order: 1; }
  .calc { order: 2; }
  .tool-hero__intro > .tool-hero__lede { order: 3; margin-top: 0; }
  .tool-seal { margin-top: 0; }
}
@media (max-width: 640px) {
  .calc__row--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .calc__lines { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* No celular uma barra fina com o total fica presa no pé da tela enquanto a pessoa digita:
     o número aparece sem rolar e sem cobrir os campos. */
  .calc__barra {
    position: sticky;
    bottom: 0;
    z-index: 5;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-sm);
    margin-inline: calc(-1 * clamp(1rem, 2.4vw, 1.75rem));
    padding: var(--space-sm) clamp(1rem, 2.4vw, 1.75rem);
    border-top: var(--hair) solid var(--rule);
    background: var(--night-3);
    box-shadow: 0 -18px 40px -24px oklch(5% 0.02 262 / 0.9);
    font-size: var(--text-sm);
    color: var(--ink-2);
  }
  .calc__barra strong { color: var(--ink); font-size: var(--text-lg); font-variant-numeric: tabular-nums; }
}

/* Modo para outros sites embutirem (?embed=1): só a ferramenta e o crédito. */
.is-embed .nav,
.is-embed .foot,
.is-embed .skip-link,
.is-embed .tool-body,
.is-embed .tool-hero__lede,
.is-embed .tool-hero__kicker { display: none; }
.is-embed .tool-hero { grid-template-columns: minmax(0, 1fr); padding: var(--space-md); }
.is-embed .tool-embed-credit { display: block; padding: 0 var(--space-md) var(--space-md); color: var(--ink-3); font-size: var(--text-xs); }