/* ==========================================================================
   Os Caras dos Motéis
   Formulário de captação das variantes /form1 (na página) e /form2 (popup).

   Carrega depois do style.css e só acrescenta. Nenhuma regra daqui existe na
   index.html, que continua sendo um funil de clique direto no WhatsApp.
   Mesmas variáveis do :root, mobile first, mesmos breakpoints.
   ========================================================================== */

/* ---------- CTA em <button> ----------
   No /form2 os CTAs abrem o popup, então são <button> e não <a>. O .btn do
   style.css já zera a borda, mas botão não herda a fonte da página sozinho. */
button.btn{ font-family:var(--f-body); line-height:1.2; }

/* ---------- Cartão do formulário ---------- */
.form-card{
  max-width:520px; margin:32px auto 0; text-align:left;
  background:var(--carvao); border:1px solid var(--borda); border-radius:var(--r-lg);
  padding:26px 22px;
}
.form-card h3{
  font-family:var(--f-display); font-weight:400; letter-spacing:.01em;
  font-size:1.5rem; line-height:1.1; margin:0 0 6px;
}
.form-card > p{ color:var(--cinza); font-size:.92rem; margin:0 0 20px; }

/* ---------- Campos ---------- */
.campo{ margin-bottom:16px; }
.campo label{
  display:block; margin-bottom:7px;
  font-size:.82rem; font-weight:600; letter-spacing:.02em; color:var(--off-white);
}
.campo input{
  display:block; width:100%;
  padding:14px 16px;
  background:var(--preto); color:var(--off-white);
  border:1px solid var(--borda); border-radius:var(--r);
  font-family:var(--f-body); font-weight:500;
  /* 16px exatos: abaixo disso o Safari do iPhone dá zoom ao focar o campo e
     a pessoa perde o formulário de vista */
  font-size:16px; line-height:1.3;
  transition:border-color .16s, box-shadow .16s;
  -webkit-appearance:none; appearance:none;
}
.campo input::placeholder{ color:#6E6663; }
.campo input:focus{
  outline:0; border-color:var(--zap);
  box-shadow:0 0 0 3px rgba(37,211,102,.18);
}

/* A mensagem de erro nasce fora do fluxo e só ocupa espaço quando aparece,
   senão o formulário inteiro pula de altura no primeiro envio inválido. */
.campo-erro{
  display:none; margin:7px 0 0;
  font-size:.8rem; font-weight:500; color:var(--vermelho-2);
}
.campo--erro input{ border-color:var(--vermelho); }
.campo--erro input:focus{ box-shadow:0 0 0 3px rgba(225,6,0,.22); }
.campo--erro .campo-erro{ display:block; }

.form-card .btn{ width:100%; text-align:center; margin-top:6px; }
.form-nota{
  margin:14px 0 0; text-align:center;
  font-size:.8rem; color:var(--cinza);
}

/* ---------- Estado enviado ---------- */
.form-ok{ text-align:center; padding:8px 0; }
.form-ok-selo{
  display:flex; align-items:center; justify-content:center;
  width:52px; height:52px; margin:0 auto 16px;
  background:var(--zap); color:var(--preto); border-radius:50%;
  font-size:1.5rem; font-weight:700; line-height:1;
}
.form-ok h3{
  font-family:var(--f-display); font-weight:400;
  font-size:1.45rem; line-height:1.1; margin:0 0 8px;
}
.form-ok p{ color:var(--cinza); font-size:.92rem; margin:0 0 20px; }
.form-ok .btn{ width:100%; text-align:center; }

/* ==========================================================================
   Popup (/form2)
   ========================================================================== */

/* z-index 1000 fica acima do header sticky (900). O translateZ isola a camada:
   camada position:fixed por cima de sticky sem contexto próprio deixava rastro
   de texto na barra no Safari do iPhone, mesmo motivo do body::after. */
.modal{
  position:fixed; inset:0; z-index:1000;
  display:flex; align-items:flex-start; justify-content:center;
  padding:16px;
  overflow-y:auto; -webkit-overflow-scrolling:touch;
  background:rgba(10,7,8,.82);
  transform:translateZ(0);
}
.modal[hidden]{ display:none; }

.modal-painel{
  position:relative;
  width:100%; max-width:520px;
  /* auto nas pontas centraliza verticalmente quando cabe e mantém a margem de
     cima quando não cabe, que é o caso com o teclado do celular aberto */
  margin:auto;
  background:var(--carvao); border:1px solid var(--borda); border-radius:var(--r-lg);
  padding:26px 22px;
  animation:modal-entra .22s ease both;
}
/* dentro do popup o cartão é o próprio painel */
.modal .form-card{
  max-width:none; margin:0; padding:0;
  background:none; border:0; border-radius:0;
}

.modal-fechar{
  position:absolute; top:12px; right:12px;
  width:38px; height:38px;
  display:flex; align-items:center; justify-content:center;
  background:transparent; color:var(--cinza);
  border:1px solid var(--borda); border-radius:50%;
  font-family:var(--f-body); font-size:1.1rem; line-height:1; cursor:pointer;
  transition:color .16s, border-color .16s;
}
.modal-fechar:hover{ color:var(--off-white); border-color:var(--off-white); }

@keyframes modal-entra{
  from{ opacity:0; transform:translateY(14px); }
  to{ opacity:1; transform:none; }
}

/* Trava de rolagem do fundo enquanto o popup está aberto.
   Só o eixo Y: overflow-x em html/body faz o Safari do iPhone parar de
   repintar sob o header sticky e o conteúdo vaza por cima da barra. */
body.modal-aberto{ overflow-y:hidden; }

/* ==========================================================================
   Breakpoints
   ========================================================================== */
@media (max-width:359px){
  .form-card{ padding:22px 16px; }
  .modal-painel{ padding:22px 16px; }
  .campo input{ padding:13px 14px; }
}

@media (min-width:600px){
  .form-card{ padding:32px 30px; }
  .modal-painel{ padding:32px 30px; }
  .form-card h3{ font-size:1.7rem; }
  .form-ok h3{ font-size:1.6rem; }
}

@media (prefers-reduced-motion:reduce){
  .modal-painel{ animation:none; }
}