/* ============================================================
   POP-UP DE LEAD (antes de abrir o WhatsApp)

   Criado em 24/08/2026 a pedido do Filipe, seguindo a orientação
   da Marianne (Onner) para as campanhas de Google.

   POR QUE EXISTE: a conversão do Google disparava no CLIQUE do
   botão de WhatsApp. Clique não é lead: entre 19 e 23/08 a conta
   do Pedro registrou 3 conversões e só 1 pessoa chegou a mandar
   mensagem. Agora a conversão só dispara quando nome e WhatsApp
   são preenchidos, e o dado vai para o CRM mesmo quando a pessoa
   desiste de enviar a primeira mensagem.

   ⚠️ Só entra nas praças com `formAntesDoZap: true` em
   js/franqueados.js. As demais continuam com o botão indo direto
   para o WhatsApp, como sempre foi.

   Estilo próprio e fechado (prefixo .plead-) porque este arquivo
   é carregado pelas DUAS páginas, que têm paletas opostas: a
   captação é clara e a demonstração é escura. O cartão é claro
   nas duas, igual ao modelo aprovado.
   ============================================================ */

/* 🔴 ACHADO NO QA DE 24/08/2026: sem isto, o input de largura 100% soma padding
   e borda por fora e ESTOURA a borda do cartão. Na captação não aparecia porque
   o estilo.css já zera isso na página inteira, e era exatamente esse o problema:
   o pop-up estava dependendo do reset da página que o hospeda. Ele fecha o
   próprio escopo. */
.plead-fundo, .plead-fundo *, .plead-fundo *::before, .plead-fundo *::after {
  box-sizing: border-box;
}

.plead-fundo {
  /* 🔴 ACHADO NO QA AO VIVO DE 24/08/2026, e só aparecia na página REAL.
     A demonstração tem `body.d-page > *{position:relative;z-index:1}` (linha 71
     de css/demonstracao.css), especificidade (0,2,1) contra os (0,1,0) desta
     classe. Como o pop-up é filho direto do body, ele herdava `relative` e ia
     parar em y=6282, ou seja, fora da tela: abria e ninguém via.
     O `!important` aqui é para vencer AQUELA regra, e vale só nestas duas
     propriedades. Mesmo caso do `[hidden]{display:none!important}` do estilo.css.
     ⚠️ Lição: pop-up se testa na página que o hospeda. No harness isolado,
     onde não existe a folha da demonstração, estava perfeito. */
  position: fixed !important;
  inset: 0;
  z-index: 9999 !important;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(8, 10, 14, .72);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  opacity: 0;
  transition: opacity .18s ease;
}
.plead-fundo[hidden] { display: none !important; }
.plead-fundo.plead-visivel { opacity: 1; }

.plead-cartao {
  position: relative;
  width: 100%;
  max-width: 380px;
  background: #fff;
  border-radius: 18px;
  padding: 26px 24px 20px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .35);
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: #14171F;
  transform: translateY(10px) scale(.985);
  transition: transform .18s ease;
  /* a lista de campos é curta, mas em tela baixa deitada o cartão precisa rolar */
  max-height: calc(100dvh - 40px);
  overflow-y: auto;
}
.plead-fundo.plead-visivel .plead-cartao { transform: none; }

.plead-fechar {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #8A90A0;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}
.plead-fechar:hover { background: #F1F2F5; color: #14171F; }

.plead-selo {
  width: 46px;
  height: 46px;
  border-radius: 13px;
  background: #25D366;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
}
.plead-selo svg { width: 26px; height: 26px; fill: #fff; }

.plead-titulo {
  margin: 0 0 6px;
  font-size: 1.28rem;
  font-weight: 700;
  letter-spacing: -.02em;
}
.plead-texto {
  margin: 0 0 18px;
  font-size: .9rem;
  line-height: 1.45;
  color: #5C6273;
}
.plead-texto strong { color: #14171F; font-weight: 600; }

.plead-campo { margin-bottom: 13px; }
.plead-campo label {
  display: block;
  margin-bottom: 6px;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #7A8090;
}
.plead-campo input {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid #DEE1E7;
  border-radius: 10px;
  font: inherit;
  font-size: 1rem; /* 16px trava o zoom automático do iOS ao focar o campo */
  color: #14171F;
  background: #fff;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.plead-campo input::placeholder { color: #A9AEBB; }
.plead-campo input:focus {
  outline: 0;
  border-color: #25D366;
  box-shadow: 0 0 0 3px rgba(37, 211, 102, .16);
}
.plead-campo input[aria-invalid="true"] {
  border-color: #E0483A;
  box-shadow: 0 0 0 3px rgba(224, 72, 58, .12);
}
.plead-erro {
  display: none;
  margin-top: 5px;
  font-size: .76rem;
  color: #C6392B;
}
.plead-campo.plead-ruim .plead-erro { display: block; }

.plead-enviar {
  width: 100%;
  margin-top: 5px;
  padding: 14px 16px;
  border: 0;
  border-radius: 11px;
  background: #25D366;
  color: #fff;
  font: inherit;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  transition: background .15s ease;
}
.plead-enviar:hover { background: #1FBB59; }
.plead-enviar:disabled { opacity: .65; cursor: default; }
.plead-enviar svg { width: 19px; height: 19px; fill: #fff; }

.plead-aviso {
  margin: 12px 0 0;
  font-size: .68rem;
  line-height: 1.5;
  text-align: center;
  color: #989EAC;
}

@media (max-width: 380px) {
  .plead-cartao { padding: 24px 18px 18px; }
  .plead-titulo { font-size: 1.18rem; }
}

/* Quem pediu menos movimento não recebe animação nenhuma. */
@media (prefers-reduced-motion: reduce) {
  .plead-fundo, .plead-cartao { transition: none; }
}