/* Formulário público (form.grupomindhub.com.br) — uma pergunta por tela.

   Vem DEPOIS de mindhub/mindhub.css e usa só os tokens de lá (paleta fixa da
   MindHub: fundo escuro, vermelho da marca). As classes `fp-` são desta tela.

   O PADRÃO DESTA FOLHA É A PÁGINA COMUM: todas as perguntas na tela, de uma
   vez, como um formulário de sempre. A experiência de "uma pergunta por tela"
   entra por cima, e só depois que o publico.js REALMENTE rodou (ele põe a
   classe `fp-js` no <html>). Era ao contrário até 25/09/2026: `.fp-tela`
   nascia `display: none` e só o <noscript> desfazia — então JavaScript LIGADO
   com o arquivo falhando (rede, extensão, estático velho no cache depois de um
   deploy) deixava o lead numa pergunta só, com um botão "OK" que não fazia
   nada. Nesta ordem, o pior caso é a página feia, nunca a página morta.

   ── TEMA: esta página é ESCURA de propósito ─────────────────────────────
   Nada de `@media (prefers-color-scheme: light)` aqui, e não é esquecimento.
   Medido em 25/09/2026, com o que existe hoje:
   - o único logo que a página tem (formularios/logo-mindhub.png) é branco com
     fundo transparente: sobre o #f6f7f9 do tema claro, o "MIND" e o
     "ECOSSISTEMA DE GESTÃO" SOMEM (1,03:1) e sobra meia marca;
   - `--mh-marca-clara` não tem par no tema claro do mindhub.css (o bloco
     [data-tema="claro"] troca marca, marca-forte e marca-suave, e não essa).
     Ela é a cor do **negrito** dentro do título de toda pergunta
     (`.fp-titulo strong`): no claro daria 2,07:1 — ilegível;
   - consertar isso é mexer no mindhub.css, que é a folha dos QUATRO sistemas
     do grupo, e a página do anúncio não é o lugar de bancar essa mudança.
   Então o escuro fica ASSUMIDO: `<meta name="color-scheme" content="dark">` e
   `<meta name="theme-color" content="#131418">` no base.html avisam o
   navegador (controle nativo, barra de endereço e "tema escuro automático" do
   Android param de tentar adivinhar). Quando o grupo fechar o par claro dos
   tokens, o caminho aqui é UMA linha: tirar esta trava e deixar o mindhub.css
   mandar. */

/* ── Ponte de cor ────────────────────────────────────────────────────────
   As ÚNICAS cores cruas da folha, e ficam aqui em cima DECLARADAS, pelo mesmo
   motivo do `:root` do crm.css: é aqui que se define vocabulário. São as do
   Good.gif que o Eduardo mandou (22/09), tiradas quadro a quadro — não são "o
   vermelho da marca" e não existem na paleta do grupo, por isso não dá pra
   trocá-las por token. Sem par no claro porque não há tema claro (ver acima).
   Medido sobre o fundo escuro: rosa 5,60:1, vermelho 4,31:1 e contorno
   6,46:1 — o mínimo pra desenho é 3:1. */
:root {
  --fp-joinha-rosa: #f944a3;       /* lado esquerdo do Good.gif */
  --fp-joinha-vermelho: #e62d62;   /* lado direito do Good.gif */
  --fp-joinha-contorno: #999999;   /* o contorno do 1º quadro */
}

.fp-corpo {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

.fp-topo {
  padding: var(--mh-e-4) var(--mh-e-5);
}
.fp-logo { display: block; width: 150px; height: auto; }

.fp-principal {
  flex: 1;
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  padding: 0 var(--mh-e-5);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* `--mh-texto-fraco` sobre o fundo dá 4,45:1 — o mínimo é 4,5, e aqui a letra
   tem 12px. O token do grupo é claro: texto-fraco é "só placeholder e texto
   desativado". Rodapé e dica são texto que se lê, então usam texto-suave
   (8,29:1). Medido em 25/09/2026. */
.fp-rodape {
  padding: var(--mh-e-4) var(--mh-e-5) calc(var(--mh-e-4) + env(safe-area-inset-bottom));
  font-size: var(--mh-t-xs);
  color: var(--mh-texto-suave);
  text-align: center;
}
.fp-rodape a { color: var(--mh-texto-suave); }

/* ── Barra de progresso ─────────────────────────────────────────────── */
.fp-progresso {
  display: none;   /* sem JavaScript não há por onde andar; ver "Telas" */
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: var(--mh-elevado);
  z-index: 10;
}
.fp-progresso-barra {
  display: block;
  height: 100%;
  width: 0;
  background: var(--mh-marca);
  transition: width var(--mh-suave);
}

/* Faixa da prévia: discreta, no tema (sem o amarelo), com a volta pro editor. */
.fp-previa {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--mh-e-2) var(--mh-e-3);
  margin: var(--mh-e-3) 0 var(--mh-e-5);
  padding: var(--mh-e-2) var(--mh-e-2) var(--mh-e-2) var(--mh-e-4);
  border: 1px solid var(--mh-borda);
  border-radius: var(--mh-raio);
  background: var(--mh-superficie);
  color: var(--mh-texto-suave);
  font-size: var(--mh-t-sm);
}
.fp-previa strong { color: var(--mh-texto); }
.fp-previa-voltar {
  flex: none;
  padding: 6px 12px;
  border: 1px solid var(--mh-borda-forte);
  border-radius: var(--mh-raio-sm);
  color: var(--mh-texto);
  font-weight: var(--mh-peso-forte);
  text-decoration: none;
}
.fp-previa-voltar:hover { border-color: var(--mh-marca); color: var(--mh-marca-clara); }

/* ── Telas ────────────────────────────────────────────────────────────
   PADRÃO (sem o publico.js, por opção da pessoa ou por falha do arquivo):
   uma página comum, todas as perguntas à vista, e some tudo que só o
   JavaScript faz andar — botão "OK", "↑ Voltar", barra de progresso e a tela
   final. O envio é o do navegador mesmo: <form method="post"> que responde
   303 pra página de obrigado. O publico-sem-js.css (carregado no <noscript>)
   diz a mesma coisa; ele continua ali de cinto e suspensório. */
.fp-tela { display: block; padding: var(--mh-e-5) 0; border-bottom: 1px solid var(--mh-borda); }
.fp-tela--final { display: none; }   /* só existe depois de enviar */
/* As duas classes juntas (força 0-2-0) porque `.fp-acoes { display: flex }`
   está lá embaixo nesta mesma folha: com a mesma força, quem vem depois ganha,
   e o botão "OK" continuava aparecendo sem o JavaScript pra fazer ele andar.
   Assim não depende da ordem — e sem `!important` pra desfazer depois. */
.fp-so-js,
.fp-acoes.fp-so-js,
.fp-navegacao.fp-so-js { display: none; }

/* COM o publico.js no ar (ele põe `fp-js` no <html> antes da primeira
   pintura): uma pergunta por tela, do jeito que o lead conhece do Respondi. */
.fp-js .fp-tela { display: none; padding: var(--mh-e-6) 0; border-bottom: 0; }
.fp-js .fp-tela--ativa { display: block; animation: fp-entra var(--mh-suave); }
.fp-js .fp-acoes.fp-so-js { display: flex; }
.fp-js .fp-navegacao.fp-so-js { display: block; }
.fp-js .fp-progresso { display: block; }
@keyframes fp-entra {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .fp-js .fp-tela--ativa { animation: none; }
  .fp-progresso-barra { transition: none; }
}

/* ── Joinha do final ───────────────────────────────────────────────────
   Pedido do Eduardo (22/09), com a referência dele (Good.gif): contorno
   cinza que enche de rosa→vermelho, amassa, estica, dá um pulo grande e
   assenta com quiquinhos. Aqui ele sai do lado do "Recebemos!", faz o
   "like", solta brilhos e repete o "like" a cada 3,2 s.
   Só CSS: começa quando a tela final aparece (display: none → block), roda
   também na página de obrigado de quem envia sem JavaScript e não usa
   estilo inline (a CSP não deixa). Camadas: .fp-joinha-mola faz a entrada e
   .fp-joinha-mao o "like". Duas animações de transform no mesmo elemento
   brigam. Cores tiradas do GIF, quadro a quadro. */
/* Eduardo, 22/09 (print com seta): "um pouco mais aqui do lado". O joinha
   vai pra ponta da linha do título: 30rem no computador, a largura toda no
   celular. Título comprido ("Recebemos suas respostas!") quebra DENTRO do
   espaço dele e o joinha continua do lado (antes ele caía pra baixo). */
.fp-final-cabeca {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  max-width: 30rem;
  gap: var(--mh-e-2) var(--mh-e-5);
  margin-bottom: var(--mh-e-3);
}
.fp-final-cabeca .fp-titulo { margin: 0; flex: 1 1 auto; min-width: 0; }
.fp-joinha {
  /* As cores estão na "Ponte de cor", lá no alto da folha. */
  position: relative;
  display: inline-block;
  flex: none;
  width: 60px;
  height: 60px;
  color: var(--fp-joinha-contorno);
}
.fp-joinha-cor-a { stop-color: var(--fp-joinha-rosa); }
.fp-joinha-cor-b { stop-color: var(--fp-joinha-vermelho); }

/* 1. Entrada: sai de trás do título, pro lado. */
.fp-joinha-mola {
  display: block;
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 1;
  animation: fp-joinha-sai 380ms cubic-bezier(.2, .9, .3, 1.3) both;
}
@keyframes fp-joinha-sai {
  0%   { opacity: 0; transform: translateX(-30px) scale(.55); }
  70%  { opacity: 1; transform: translateX(4px) scale(1.06); }
  100% { opacity: 1; transform: none; }
}

/* 2. Contorno cinza → enche de rosa→vermelho (como no GIF). */
.fp-joinha-contorno { animation: fp-joinha-some 90ms linear 300ms forwards; }
.fp-joinha-cheio { animation: fp-joinha-enche 90ms linear 280ms both; }
@keyframes fp-joinha-some { to { opacity: 0; } }
@keyframes fp-joinha-enche { from { opacity: 0; } to { opacity: 1; } }

/* 3. O "like": amassa, estica, pulo grande, assenta com quiquinhos.
      ~1 s de movimento e o resto do ciclo de 3,2 s parado. */
.fp-joinha-mao {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  transform-origin: 50% 88%;
  animation: fp-joinha-like 3.2s ease-in-out 380ms infinite both;
}
@keyframes fp-joinha-like {
  0%       { transform: none; }
  4%       { transform: rotate(10deg) scale(.94); }
  9%       { transform: rotate(20deg) scale(.86, .7) translateY(8%); }
  14%      { transform: rotate(16deg) scale(.9, .76) translateY(6%); }
  18%      { transform: rotate(-8deg) scale(1.1, 1.15) translateY(-6%); }
  21%      { transform: rotate(-10deg) scale(1.28) translateY(-8%); }
  24%      { transform: rotate(4deg) scale(.94); }
  27%      { transform: rotate(-2deg) scale(1.05); }
  30%      { transform: scale(.98); }
  33%, 100% { transform: none; }
}

/* 4. Brilhos no primeiro pulo grande. */
.fp-joinha-brilho {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 8px;
  height: 8px;
  margin: -4px 0 0 -4px;
  border-radius: 50%;
  background: var(--fp-joinha-vermelho);
  opacity: 0;
  animation: fp-joinha-brilho 700ms ease-out 1000ms both;
}
.fp-joinha-brilho:nth-child(2) { --x: 0;     --y: -54px; }
.fp-joinha-brilho:nth-child(3) { --x: 40px;  --y: -40px; background: var(--fp-joinha-rosa); }
.fp-joinha-brilho:nth-child(4) { --x: 56px;  --y: 0; }
.fp-joinha-brilho:nth-child(5) { --x: 40px;  --y: 40px;  background: var(--fp-joinha-rosa); }
.fp-joinha-brilho:nth-child(6) { --x: 0;     --y: 54px; }
.fp-joinha-brilho:nth-child(7) { --x: -40px; --y: 40px;  background: var(--fp-joinha-rosa); }
.fp-joinha-brilho:nth-child(8) { --x: -56px; --y: 0; }
.fp-joinha-brilho:nth-child(9) { --x: -40px; --y: -40px; background: var(--fp-joinha-rosa); }
@keyframes fp-joinha-brilho {
  0%   { opacity: 0; transform: translate(0, 0) scale(.3); }
  25%  { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--x), var(--y)) scale(1); }
}

/* Quem pediu menos movimento (celular/Windows com "efeitos de animação"
   desligado) vê o joinha já cheio, aparecendo, sem amassar, pular nem
   brilhar. Assim não fica parado e não incomoda quem enjoa com movimento. */
@keyframes fp-joinha-aparece {
  from { opacity: 0; transform: scale(.6); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  /* O mindhub.css zera TODA animação nesse modo (0,01 ms !important no *).
     O "aparecer" do joinha é a exceção combinada: curto, sem pulo, uma vez só. */
  .fp-joinha-mola { animation: fp-joinha-aparece 400ms ease-out both !important; }
  .fp-joinha-mao { animation: none; }
  .fp-joinha-contorno { display: none; }
  .fp-joinha-cheio { animation: none; opacity: 1; }
  .fp-joinha-brilho { display: none; }
}

.fp-titulo {
  display: block;
  font-family: var(--mh-fonte-titulo);
  font-size: clamp(1.25rem, 3.6vw, 1.75rem);
  font-weight: var(--mh-peso-forte);
  line-height: 1.3;
  color: var(--mh-texto);
  margin: 0 0 var(--mh-e-3);
}
.fp-titulo--grande { font-size: clamp(1.6rem, 5vw, 2.4rem); }
.fp-titulo strong { color: var(--mh-marca-clara); }
.fp-numero {
  display: inline-block;
  min-width: 1.6em;
  margin-right: var(--mh-e-2);
  font-size: 0.7em;
  color: var(--mh-marca);
  vertical-align: 0.12em;
}
.fp-numero:empty { display: none; }
.fp-numero::after { content: " →"; }
.fp-obrigatoria { color: var(--mh-marca); margin-left: 4px; }
/* "Responda só se marcou Sim…": só faz sentido na página comum, com todas as
   perguntas à vista. Com o publico.js a pergunta nem aparece pra quem não
   deve responder (Bia, 20/10/2026). */
.fp-condicao {
  margin: 0 0 var(--mh-e-3);
  padding-left: var(--mh-e-3);
  border-left: 2px solid var(--mh-marca);
  color: var(--mh-texto-suave);
  font-size: var(--mh-t-sm);
}
.fp-js .fp-condicao { display: none; }

.fp-descricao {
  color: var(--mh-texto-suave);
  font-size: var(--mh-t-base);
  margin: 0 0 var(--mh-e-5);
  max-width: 60ch;
}

/* ── Campos ─────────────────────────────────────────────────────────── */
.fp-campo-caixa { display: flex; align-items: baseline; gap: var(--mh-e-2); }
.fp-prefixo {
  font-family: var(--mh-fonte-titulo);
  font-size: 1.4rem;
  color: var(--mh-texto-suave);
}
.fp-campo {
  width: 100%;
  font-family: var(--mh-fonte);
  font-size: clamp(1.15rem, 3.2vw, 1.5rem);
  color: var(--mh-texto);
  background: transparent;
  border: 0;
  border-bottom: 2px solid var(--mh-borda-forte);
  border-radius: 0;
  padding: var(--mh-e-2) 0;
  transition: border-color var(--mh-rapido);
}
.fp-campo::placeholder { color: var(--mh-texto-fraco); }
.fp-campo:focus { border-bottom-color: var(--mh-marca); }
/* Aqui havia `outline: none` sem nada no lugar (até 25/09/2026): quem anda de
   Tab via só a linha de baixo trocar de cor — 2px no pé de um campo que já não
   tem borda. A linha é ENFEITE; o indicador é o anel do grupo (mindhub.css),
   que este `outline` explícito devolve com folga pro campo não ficar colado. */
.fp-campo:focus-visible { outline: 2px solid var(--mh-marca); outline-offset: 4px; }
.fp-campo--longo {
  resize: vertical;
  min-height: 7.5em;
  line-height: var(--mh-altura);
}
.fp-tela--erro .fp-campo { border-bottom-color: var(--mh-erro-fg); }

select.fp-campo {
  appearance: none;
  cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--mh-texto-suave) 50%),
                    linear-gradient(135deg, var(--mh-texto-suave) 50%, transparent 50%);
  background-position: calc(100% - 14px) 55%, calc(100% - 8px) 55%;
  background-size: 6px 6px;
  background-repeat: no-repeat;
  padding-right: var(--mh-e-6);
}
select.fp-campo option { background: var(--mh-superficie); color: var(--mh-texto); }

/* Lista com busca (o JS troca o <select> por isto) */
.fp-busca { position: relative; }
.fp-busca-lista {
  list-style: none;
  margin: var(--mh-e-2) 0 0;
  padding: var(--mh-e-1);
  max-height: 16rem;
  overflow-y: auto;
  border: 1px solid var(--mh-borda);
  border-radius: var(--mh-raio);
  background: var(--mh-superficie);
}
.fp-busca-lista li {
  display: flex;
  align-items: center;
  min-height: 44px;            /* alvo de dedo, igual ao resto da casa */
  padding: var(--mh-e-2) var(--mh-e-3);
  border-radius: var(--mh-raio-sm);
  cursor: pointer;
}
.fp-busca-lista li:hover { background: var(--mh-marca-suave); }
/* A marcada é a que o Enter vai escolher: tem que dar pra ver QUAL é, não só
   "tem alguma". O fundo sozinho some no celular (fundo vermelho a 14%). */
.fp-busca-lista li[aria-selected="true"] {
  background: var(--mh-marca-suave);
  box-shadow: inset 0 0 0 1px var(--mh-marca);
}
.fp-busca-vazia,
.fp-busca-vazia:hover { background: none; color: var(--mh-texto-suave); cursor: default; }

/* ── Múltipla escolha ───────────────────────────────────────────────── */
.fp-opcoes { display: grid; gap: var(--mh-e-2); max-width: 32rem; }
.fp-opcao {
  display: flex;
  align-items: center;
  gap: var(--mh-e-3);
  padding: var(--mh-e-3) var(--mh-e-4);
  border: 1px solid var(--mh-borda-forte);
  border-radius: var(--mh-raio);
  background: var(--mh-superficie);
  cursor: pointer;
  transition: border-color var(--mh-rapido), background var(--mh-rapido);
  font-size: var(--mh-t-md);
}
.fp-opcao:hover { border-color: var(--mh-marca); }
.fp-opcao input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.fp-opcao:has(input:checked) { border-color: var(--mh-marca); background: var(--mh-marca-suave); }
.fp-opcao:has(input:focus-visible) { box-shadow: var(--mh-foco); }
.fp-letra {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.7rem;
  height: 1.7rem;
  border: 1px solid var(--mh-borda-forte);
  border-radius: var(--mh-raio-sm);
  font-size: var(--mh-t-xs);
  font-weight: var(--mh-peso-forte);
  color: var(--mh-texto-suave);
}
.fp-opcao:has(input:checked) .fp-letra { background: var(--mh-marca); border-color: var(--mh-marca); color: var(--mh-marca-contraste); }

/* ── Aceite ─────────────────────────────────────────────────────────── */
.fp-aceite {
  display: flex;
  gap: var(--mh-e-3);
  align-items: flex-start;
  font-size: var(--mh-t-base);
  color: var(--mh-texto-suave);
  cursor: pointer;
  margin-bottom: var(--mh-e-4);
  max-width: 34rem;
}
.fp-aceite input { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--mh-marca); flex: 0 0 auto; }
.cf-turnstile { margin-bottom: var(--mh-e-4); }

/* ── Ações, erros e avisos ──────────────────────────────────────────── */
.fp-acoes { display: flex; align-items: center; gap: var(--mh-e-4); margin-top: var(--mh-e-5); flex-wrap: wrap; }
.fp-botao { font-size: var(--mh-t-md); padding: 12px 28px; min-height: 48px; }
.fp-dica { font-size: var(--mh-t-xs); color: var(--mh-texto-suave); margin-top: var(--mh-e-2); }
.fp-dica--tecla { margin: 0; }
@media (hover: none) { .fp-dica--tecla { display: none; } }

.fp-erro {
  margin: var(--mh-e-3) 0 0;
  padding: var(--mh-e-2) var(--mh-e-3);
  border-radius: var(--mh-raio-sm);
  background: var(--mh-erro-bg);
  color: var(--mh-erro-fg);
  font-size: var(--mh-t-sm);
  display: inline-block;
}
.fp-erro[hidden] { display: none; }

/* Quais perguntas foram recusadas, na pagina de erro de quem envia sem JS.
   Mesmas cores do .fp-erro (e um so bloco, porque sao varias linhas). */
.fp-marcadas {
  margin: var(--mh-e-3) 0 0;
  padding: var(--mh-e-3) var(--mh-e-3) var(--mh-e-3) var(--mh-e-5);
  border-radius: var(--mh-raio-sm);
  background: var(--mh-erro-bg);
  color: var(--mh-erro-fg);
  font-size: var(--mh-t-sm);
  max-width: 34rem;
}
.fp-marcadas li + li { margin-top: var(--mh-e-2); }

.fp-status {
  margin-top: var(--mh-e-4);
  padding: var(--mh-e-3);
  border-radius: var(--mh-raio);
  background: var(--mh-aviso-bg);
  color: var(--mh-aviso-fg);
  font-size: var(--mh-t-sm);
}
.fp-status[hidden] { display: none; }

/* ── "Tem respostas guardadas neste aparelho" ──────────────────────────
   Só aparece quando o JavaScript acha rascunho DESTE formulário no aparelho.
   Ela existe por causa do celular que passa de mão em mão: até 25/09/2026 o
   que tinha ficado guardado era reenviado sozinho ao reabrir o link, e a
   segunda pessoa da fila caía numa tela de agradecimento que não era dela.
   Agora o formulário abre sempre limpo, na pergunta 1, e quem quer de volta o
   que escreveu PEDE — no botão. */
.fp-retomar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--mh-e-2) var(--mh-e-3);
  margin: var(--mh-e-4) 0 0;
  padding: var(--mh-e-3) var(--mh-e-4);
  border: 1px solid var(--mh-borda);
  border-radius: var(--mh-raio);
  background: var(--mh-superficie);
  color: var(--mh-texto-suave);
  font-size: var(--mh-t-sm);
}
.fp-retomar[hidden] { display: none; }
.fp-retomar strong { color: var(--mh-texto); }
.fp-retomar-acoes { display: flex; align-items: center; gap: var(--mh-e-2); flex-wrap: wrap; }
.fp-retomar .mh-btn { min-height: 44px; }

.fp-navegacao { padding: 0 0 var(--mh-e-4); min-height: 44px; }
/* Tinha ~33px de altura (8+8 de respiro numa letra de 13px) — no dedo isso é
   um erro atrás do outro. 44px é a medida que o resto da casa usa (o construtor
   cobra isso em teste); o botão principal continua com 48. */
.fp-voltar {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  background: none;
  border: 1px solid var(--mh-borda);
  border-radius: var(--mh-raio);
  color: var(--mh-texto-suave);
  font: inherit;
  font-size: var(--mh-t-sm);
  padding: 8px 14px;
  cursor: pointer;
}
.fp-voltar:hover { border-color: var(--mh-borda-forte); color: var(--mh-texto); }
.fp-voltar[hidden] { display: none; }

/* Campo-isca: fora da tela, sem sumir do DOM (display:none o robô percebe). */
.fp-isca {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.fp-aviso-pagina { padding: var(--mh-e-7) 0; }

@media (max-width: 600px) {
  .fp-topo { padding: var(--mh-e-3) var(--mh-e-4); }
  .fp-logo { width: 120px; }
  .fp-principal { padding: 0 var(--mh-e-4); justify-content: flex-start; }
  .fp-tela { padding: var(--mh-e-5) 0; }
  .fp-botao { width: 100%; }
  .fp-opcoes { max-width: none; }
}

/* ── Agenda do comercial na tela final (Bia, 22/10/2026) ───────────────
   Só aparece pra quem é MQL. Bia, 24/10/2026: vem DEPOIS do botão do
   material (que é o destaque, "do jeito que tá perdemos público"); a caixa
   segue com a cor da marca e o botão em contorno. */
.fp-agenda {
  max-width: 34rem;
  margin-top: var(--mh-e-5);
  padding: var(--mh-e-4) var(--mh-e-5);
  border: 2px solid var(--mh-marca);
  border-radius: var(--mh-raio-lg);
  background: var(--mh-marca-suave);
}
.fp-agenda-convite { margin: 0; font-family: var(--mh-fonte-titulo); font-size: var(--mh-t-lg); font-weight: var(--mh-peso-forte); line-height: 1.3; }
.fp-agenda .fp-acoes { margin-top: var(--mh-e-4); }