:root {
  --tinta: #0b1b33;
  --ouro: #c8952f;
  --borda: #dde3ed;
  --suave: #64748b;
  --verde: #197a4b;
  --verde-fundo: #e3f5eb;
  --vermelho: #b3261e;
  --vermelho-fundo: #fdeceb;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
  color: #1b2536;
  -webkit-font-smoothing: antialiased;
}

.pagina-calc {
  min-height: 100dvh;
  background: linear-gradient(160deg, var(--tinta) 0%, #16305a 45%, #1b3a68 100%);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 28px 14px 60px;
}

.calc-cartao {
  width: 100%;
  max-width: 560px;
  background: #fff;
  border-radius: 16px;
  padding: 28px 22px 20px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .35);
}

.calc-marca { text-align: center; margin-bottom: 18px; }
.calc-marca b { display: block; font-size: 24px; letter-spacing: .06em; color: var(--tinta); }
.calc-marca span { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--ouro); font-weight: 700; }

h1 { font-size: 21px; text-align: center; line-height: 1.3; margin: 0 0 8px; color: var(--tinta); }
.calc-intro { text-align: center; color: var(--suave); font-size: 13.5px; margin: 0 0 22px; line-height: 1.5; }

.calc-grupo { margin-bottom: 13px; }
.calc-grupo label { display: block; font-size: 12px; font-weight: 650; color: #47566c; margin-bottom: 4px; }
.calc-grupo input, .calc-grupo select {
  width: 100%; padding: 12px 13px; font-size: 16px; border: 1.5px solid var(--borda);
  border-radius: 10px; background: #fafbfd; font-family: inherit;
}
.calc-grupo input:focus, .calc-grupo select:focus { outline: none; border-color: var(--ouro); background: #fff; }

.calc-linha { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.calc-linha3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }
@media (max-width: 480px) {
  .calc-linha, .calc-linha3 { grid-template-columns: 1fr; }
}

.calc-separador {
  font-size: 11px; text-transform: uppercase; letter-spacing: .1em; font-weight: 700;
  color: var(--ouro); margin: 20px 0 12px; padding-top: 16px; border-top: 1px dashed var(--borda);
}

.calc-honeypot { position: absolute; left: -9999px; top: -9999px; }

.calc-aceite {
  display: flex; gap: 9px; align-items: flex-start; font-size: 12px; color: var(--suave);
  line-height: 1.45; margin: 16px 0; cursor: pointer;
}
.calc-aceite input { width: auto; margin-top: 2px; flex-shrink: 0; }

.calc-erro {
  background: var(--vermelho-fundo); color: #8a1d17; border: 1px solid #f3c6c2;
  border-radius: 10px; padding: 10px 13px; font-size: 13px; margin-bottom: 14px;
}

.calc-botao {
  width: 100%; padding: 15px; font-size: 15.5px; font-weight: 700; border: none;
  border-radius: 10px; background: var(--ouro); color: #2a1c04; cursor: pointer;
  box-shadow: 0 8px 20px rgba(200, 149, 47, .35); text-align: center; text-decoration: none;
  display: block; font-family: inherit;
}
.calc-botao:hover { background: #b48327; }
.calc-botao:disabled { opacity: .6; cursor: not-allowed; box-shadow: none; }

.calc-resultado { text-align: center; padding: 6px 0 4px; }
.calc-resultado-icone { font-size: 34px; margin-bottom: 6px; }
.calc-resultado h2 { font-size: 19px; color: var(--tinta); margin: 0 0 14px; line-height: 1.3; }

.calc-comparativo { display: flex; align-items: center; justify-content: center; gap: 18px; margin-bottom: 16px; }
.calc-comp-rotulo { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--suave); margin-bottom: 3px; }
.calc-comp-valor { font-size: 24px; font-weight: 700; color: var(--tinta); }
.calc-comp-valor.ruim { color: var(--vermelho); }
.calc-comp-valor.bom { color: var(--verde); }
.calc-comp-seta { font-size: 20px; color: var(--ouro); }

.calc-destaque { background: var(--verde-fundo); border: 1px solid #b9e2cd; border-radius: 12px; padding: 16px; margin-bottom: 16px; }
.calc-destaque-rotulo { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--verde); font-weight: 700; }
.calc-destaque-valor { font-size: 30px; font-weight: 800; color: var(--verde); letter-spacing: -.02em; margin: 2px 0; }
.calc-destaque-nota { font-size: 12.5px; color: #3c4a5f; }

.calc-legal { font-size: 12px; color: var(--suave); line-height: 1.5; text-align: left; margin: 0 0 18px; }

.calc-whats { background: #22c35e; color: #fff; box-shadow: 0 8px 20px rgba(34, 195, 94, .35); }
.calc-whats:hover { background: #1da851; }

.calc-rodape { text-align: center; font-size: 10.5px; color: #9aa7ba; margin-top: 22px; line-height: 1.5; }