/* ============================================================
   Pop-up do formulário — uma pergunta por vez.
   Componente único, usado no desktop e no mobile (js/formulario.js
   monta o HTML). Tudo escopado em .fp para não vazar no resto.
   ============================================================ */

.fp {
  --fp-azul-1: #0a63c4;
  --fp-azul-2: #00397f;
  --fp-borda: rgba(140, 190, 250, 0.28);
  --fp-texto: #f2f7fd;
  --fp-suave: #9cc0e6;
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
  font-family: "Poppins", system-ui, sans-serif;
  color: var(--fp-texto);
}
.fp.fp--aberto { display: flex; }

.fp__fundo {
  position: absolute;
  inset: 0;
  background: rgba(1, 8, 24, 0.78);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  animation: fp-fade 0.25s ease both;
}

.fp__card {
  position: relative;
  width: 100%;
  max-width: 560px;
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
  padding: 28px 32px 26px;
  border-radius: 20px;
  border: 1px solid var(--fp-borda);
  background:
    radial-gradient(120% 70% at 100% 0%, rgba(10, 99, 196, 0.35), transparent 60%),
    linear-gradient(180deg, #051a45 0%, #020b26 100%);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55);
  animation: fp-entra 0.32s cubic-bezier(0.2, 0.8, 0.2, 1) both;
  outline: none;
}

/* ---------- topo: voltar + progresso + fechar ---------- */
.fp__topo {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 26px;
}
.fp__voltar,
.fp__fechar {
  flex: none;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  border: 1px solid var(--fp-borda);
  background: rgba(255, 255, 255, 0.05);
  color: var(--fp-texto);
  cursor: pointer;
  font-size: 17px;
  line-height: 1;
  transition: background 0.2s, border-color 0.2s;
}
.fp__voltar:hover,
.fp__fechar:hover { background: rgba(255, 255, 255, 0.12); border-color: rgba(180, 215, 255, 0.6); }
.fp__voltar[hidden] { display: none; }
.fp__progresso {
  flex: 1;
  height: 5px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.12);
  overflow: hidden;
}
.fp__progresso i {
  display: block;
  height: 100%;
  width: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--fp-azul-2), #4da3ff);
  transition: width 0.35s ease;
}
.fp__contagem {
  flex: none;
  min-width: 42px;
  text-align: right;
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--fp-suave);
}

/* ---------- passo ---------- */
.fp__passo { animation: fp-passo 0.3s ease both; }
.fp__passo--voltando { animation-name: fp-passo-volta; }

.fp__titulo {
  margin: 0 0 6px;
  font-size: 24px;
  font-weight: 500;
  line-height: 1.25;
  color: #ffffff;
}
.fp__titulo sup { margin-left: 4px; font-size: 0.8em; color: #ff5b5b; }
.fp__dica {
  margin: 0 0 20px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--fp-suave);
}
.fp__titulo + .fp__opcoes,
.fp__titulo + .fp__campo { margin-top: 22px; }

/* ---------- opções (A, B, C…) ---------- */
.fp__opcoes { display: flex; flex-direction: column; gap: 10px; }
.fp__opcao {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 13px 16px;
  border-radius: 12px;
  border: 1px solid var(--fp-borda);
  background: rgba(255, 255, 255, 0.05);
  color: #ffffff;
  font: inherit;
  font-size: 15px;
  text-align: left;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, transform 0.15s;
}
.fp__opcao:hover { background: rgba(255, 255, 255, 0.1); border-color: rgba(180, 215, 255, 0.55); }
.fp__opcao:active { transform: scale(0.99); }
.fp__opcao kbd {
  flex: none;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.22);
  font: 600 12px "Poppins", system-ui, sans-serif;
  color: #ffffff;
}
.fp__opcao--sel {
  background: linear-gradient(100deg, var(--fp-azul-2), var(--fp-azul-1));
  border-color: rgba(160, 205, 255, 0.85);
}
.fp__opcao--sel kbd { background: #ffffff; color: var(--fp-azul-1); border-color: #ffffff; }

/* ---------- campo de texto ---------- */
.fp__campo {
  display: block;
  width: 100%;
  padding: 0 0 10px;
  border: none;
  border-bottom: 2px solid rgba(180, 215, 255, 0.4);
  border-radius: 0;
  background: transparent;
  color: #ffffff;
  font: inherit;
  font-size: 22px;
  outline: none;
  transition: border-color 0.2s;
}
.fp__campo::placeholder { color: rgba(156, 192, 230, 0.55); }
.fp__campo:focus { border-bottom-color: #4da3ff; }
.fp__erro {
  min-height: 20px;
  margin: 8px 0 0;
  font-size: 13px;
  color: #ff8a8a;
}

/* ---------- botão continuar (mesmo corte chanfrado do site) ---------- */
.fp__acoes { display: flex; align-items: center; gap: 14px; margin-top: 22px; flex-wrap: wrap; }
.fp__continuar {
  position: relative;
  min-width: 190px;
  height: 46px;
  padding: 0 26px;
  border: none;
  cursor: pointer;
  clip-path: polygon(0 0, 93% 0, 100% 28%, 100% 100%, 7% 100%, 0 72%);
  background: var(--fp-azul-1);
  font: 600 14.5px "Poppins", system-ui, sans-serif;
  letter-spacing: 0.02em;
  color: #ffffff;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: filter 0.2s;
}
.fp__continuar:hover { filter: brightness(1.15); }
.fp__continuar[disabled] { opacity: 0.6; cursor: wait; }
.fp__enter { font-size: 12px; color: var(--fp-suave); }
.fp__enter code {
  padding: 2px 6px;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.1);
  font: 11px ui-monospace, Menlo, monospace;
}

.fp__lgpd { margin: 18px 0 0; font-size: 11.5px; line-height: 1.5; color: rgba(156, 192, 230, 0.75); }
.fp__lgpd a { color: inherit; text-decoration: underline; }

/* ---------- envio / sucesso ---------- */
.fp__status { text-align: center; padding: 18px 0 6px; }
.fp__status .fp__titulo { font-size: 22px; }
.fp__check {
  width: 58px;
  height: 58px;
  margin: 0 auto 18px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--fp-azul-2), var(--fp-azul-1));
  font-size: 28px;
}
.fp__giro {
  width: 38px;
  height: 38px;
  margin: 0 auto 18px;
  border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, 0.18);
  border-top-color: #4da3ff;
  animation: fp-gira 0.8s linear infinite;
}
.fp__status .fp__acoes { justify-content: center; }

body.fp-travado { overflow: hidden; }

@keyframes fp-fade { from { opacity: 0; } }
@keyframes fp-entra { from { opacity: 0; transform: translateY(18px) scale(0.98); } }
@keyframes fp-passo { from { opacity: 0; transform: translateX(22px); } }
@keyframes fp-passo-volta { from { opacity: 0; transform: translateX(-22px); } }
@keyframes fp-gira { to { transform: rotate(360deg); } }

@media (max-width: 560px) {
  .fp { align-items: flex-end; padding: 0; }
  .fp__card {
    max-width: none;
    max-height: 94dvh;
    padding: 22px 20px calc(22px + env(safe-area-inset-bottom));
    border-radius: 22px 22px 0 0;
  }
  .fp__titulo { font-size: 21px; }
  .fp__campo { font-size: 19px; }
  .fp__opcao { padding: 12px 14px; font-size: 14.5px; }
  .fp__continuar { width: 100%; }
  .fp__enter { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .fp__fundo, .fp__card, .fp__passo { animation: none; }
  .fp__progresso i { transition: none; }
}