:root {
  --azul: #0570c9;
  --azul-escuro: #034f8f;
  --laranja: #f57f00;
  --laranja-claro: #fbb56c;
  --fundo: #f3f7fc;
  --texto: #1d2b3a;
  --cinza: #6b7a8c;
  --borda: #d4deea;
  --branco: #ffffff;
  --erro: #d93025;
  --ok: #1e9e5a;
  --raio: 14px;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--texto);
  background: var(--fundo);
  line-height: 1.45;
}

/* ---------- Landing ---------- */
.topo {
  background: var(--branco);
  padding: 18px 16px 14px;
  text-align: center;
  border-bottom: 4px solid var(--laranja);
}
.topo img { width: 100%; max-width: 260px; height: auto; display: block; margin: 0 auto; }

.hero {
  background: linear-gradient(135deg, var(--azul) 0%, var(--azul-escuro) 100%);
  color: var(--branco);
  padding: 26px 16px 70px;
  text-align: center;
}
.hero h1 { margin: 0 0 6px; font-size: 1.55rem; font-weight: 700; line-height: 1.2; }
.hero p { margin: 0 auto; max-width: 440px; opacity: .92; font-size: 1rem; }

.cartao {
  background: var(--branco);
  max-width: 480px;
  margin: -48px auto 24px;
  padding: 22px 18px 24px;
  border-radius: var(--raio);
  box-shadow: 0 10px 30px rgba(3, 79, 143, .14);
  position: relative;
}
@media (min-width: 520px) {
  .cartao { padding: 28px 28px 30px; }
}
.wrap { padding: 0 16px; }

.campo { margin-bottom: 16px; }
.campo label, .campo .rotulo {
  display: block;
  font-weight: 600;
  font-size: .95rem;
  margin-bottom: 6px;
}
.campo input[type=text],
.campo input[type=tel] {
  width: 100%;
  font: inherit;
  font-size: 1.05rem;           /* >=16px evita zoom no iPhone */
  padding: 14px 14px;
  border: 2px solid var(--borda);
  border-radius: 10px;
  background: #fbfdff;
  color: var(--texto);
  transition: border-color .15s, box-shadow .15s;
}
.campo input:focus {
  outline: none;
  border-color: var(--azul);
  box-shadow: 0 0 0 4px rgba(5, 112, 201, .15);
  background: var(--branco);
}
.campo.invalido input { border-color: var(--erro); }
.msg-erro { color: var(--erro); font-size: .85rem; margin-top: 4px; display: none; }
.campo.invalido .msg-erro { display: block; }

.linha { display: grid; grid-template-columns: 1fr; gap: 0 12px; }
@media (min-width: 420px) { .linha { grid-template-columns: 1fr 1fr; } }

/* opções de satisfação */
.opcoes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.opcoes input { position: absolute; opacity: 0; pointer-events: none; }
.opcoes label {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px;
  min-height: 78px;
  padding: 10px 6px;
  border: 2px solid var(--borda);
  border-radius: 12px;
  cursor: pointer;
  text-align: center;
  font-weight: 600;
  font-size: .88rem;
  margin: 0;
  background: #fbfdff;
  transition: all .15s;
  user-select: none;
}
.opcoes label .emoji { font-size: 1.7rem; line-height: 1; }
.opcoes input:focus-visible + label { box-shadow: 0 0 0 4px rgba(5, 112, 201, .2); }
.opcoes input:checked + label {
  border-color: var(--laranja);
  background: #fff4e8;
  color: #b55d00;
}
.campo.invalido .opcoes label { border-color: var(--erro); }

.consentimento {
  display: flex; gap: 10px; align-items: flex-start;
  font-size: .85rem; color: var(--cinza);
  margin: 4px 0 18px;
}
.consentimento input { width: 22px; height: 22px; flex: 0 0 22px; margin: 0; accent-color: var(--azul); }
.consentimento.invalido { color: var(--erro); }

.botao {
  display: block; width: 100%;
  font: inherit; font-size: 1.1rem; font-weight: 700;
  padding: 16px;
  border: 0; border-radius: 12px;
  background: var(--laranja);
  color: var(--branco);
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(245, 127, 0, .35);
  transition: transform .1s, background .15s;
}
.botao:hover { background: #e07400; }
.botao:active { transform: scale(.98); }
.botao[disabled] { opacity: .7; cursor: wait; }

.alerta {
  padding: 12px 14px; border-radius: 10px; margin-bottom: 16px; font-size: .92rem;
  background: #fdecea; color: var(--erro); border: 1px solid #f5c2bd;
}

.sucesso { text-align: center; padding: 10px 4px; }
.sucesso .icone {
  width: 72px; height: 72px; border-radius: 50%;
  background: var(--ok); color: var(--branco);
  display: flex; align-items: center; justify-content: center;
  font-size: 2.2rem; margin: 0 auto 14px;
}
.sucesso h2 { margin: 0 0 8px; color: var(--azul); }
.sucesso p { margin: 0 0 18px; color: var(--cinza); }
.sucesso .brinde { font-size: 1.2rem; font-weight: 700; color: var(--laranja); }
.sucesso a.botao { text-decoration: none; background: var(--azul); box-shadow: 0 6px 16px rgba(5, 112, 201, .3); }

.rodape { text-align: center; color: var(--cinza); font-size: .8rem; padding: 0 16px 28px; }
.rodape a { color: var(--azul); }

.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }