:root {
  --azul: #176d9c;
  --escuro: #114f73;
  --borda: #d9e2e8;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  padding: 46px 16px;
  background: #f1f7fa;
  font-family: Arial, sans-serif;
  color: #203040;
}

.cadastro { max-width: 780px; margin: auto; overflow: hidden; background: #fff; border-radius: 14px; box-shadow: 0 14px 36px #1b37481f; }
.cabecalho { padding: 25px 32px 22px; color: #fff; background: linear-gradient(120deg, var(--escuro), var(--azul)); }
.marca { margin: 0 0 6px; font-size: 12px; font-weight: bold; letter-spacing: .8px; }
.cabecalho h1 { margin: 0; font-size: 27px; }
.cabecalho p { margin: 9px 0 0; }
form { padding: 26px 32px; }
.msg { padding: 12px 14px; margin-bottom: 18px; border-radius: 7px; }
.erro { background: #fff0f0; color: #963232; }
.ok { background: #e9f7ef; color: #17653b; }
.campos { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 20px; }
.total { grid-column: 1 / -1; }
label { display: block; font-size: 14px; font-weight: bold; margin-bottom: 7px; }
input, select { width: 100%; height: 44px; margin-top: 6px; padding: 9px 12px; border: 1px solid var(--borda); border-radius: 6px; font-size: 15px; }
.telefone { display: grid; grid-template-columns: 1.25fr auto 1fr; }
.telefone select { border-radius: 6px 0 0 6px; }
.prefixo { display: flex; align-items: center; padding: 0 11px; margin-top: 6px; border: 1px solid var(--borda); background: #f2f6f8; }
.telefone input { border-radius: 0 6px 6px 0; }
.ajuda { display: block; margin-top: 6px; color: #697b88; font-size: 12px; }
.aceite { display: flex; gap: 9px; align-items: center; margin: 24px 0 21px; }
.aceite input { width: auto; height: auto; margin: 0; }
.acoes { display: flex; justify-content: space-between; align-items: center; border-top: 1px solid #e8eef1; padding-top: 19px; }
.acoes a { color: #116996; text-decoration: none; }
.botao { border: 0; border-radius: 6px; padding: 12px 19px; background: var(--azul); color: #fff; font-weight: bold; cursor: pointer; }

@media (max-width: 620px) {
  body { padding: 18px 10px; }
  .cabecalho, form { padding-left: 20px; padding-right: 20px; }
  .campos { grid-template-columns: 1fr; }
  .total { grid-column: auto; }
  .telefone { grid-template-columns: 1fr auto 1fr; }
}