/* ====== mobile-forms (21/10/2026): formularios e pagina do teste gratis ======
   Carregado POR ULTIMO so em: teste-gratis, demonstracao, contato, parceiros, contadores, lista-de-espera.
   Usa as variaveis do v56.css (--tinta, --azul, --azul-esc, --regua, --celula, --papel2, --sec, --ok, --font, --display).
   Papelada passada a limpo: folha branca, linha fina, canto de 4 px, sem sombra. */

:root{--fm-borda:#7a8399;--fm-erro:#b3261e;--fm-h:48px}
html{scroll-padding-top:72px;scroll-padding-bottom:64px}

/* v66: so celular */
@media (max-width:767.98px){
/* ---------- campos: rotulo em cima, 16 px, 48 px de altura ---------- */
main form.fm{display:grid;gap:14px}
main form.fm .row,main .fm .ct-row,main .fm .pa-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:0}
main .fm .fm-f{display:flex;flex-direction:column;gap:6px;margin:0;min-width:0}
main .fm .fm-f>label{display:block;margin:0;font-size:15px;line-height:1.35;font-weight:600;color:var(--tinta);letter-spacing:0;text-transform:none}
main .fm input:not([type=checkbox]):not([type=radio]),
main .fm select,
main .fm textarea{
  width:100%;box-sizing:border-box;margin:0;
  font-family:var(--font);font-size:16px!important;font-size:max(16px,1rem)!important;font-weight:400;line-height:1.3;color:var(--tinta);
  background:#fff;border:1px solid var(--fm-borda)!important;border-radius:4px!important;box-shadow:none!important}
main .fm input:not([type=checkbox]):not([type=radio]),main .fm select{height:var(--fm-h)!important;min-height:var(--fm-h);padding:0 14px!important}
main .fm textarea{min-height:104px;height:auto!important;padding:12px 14px!important;line-height:1.5;resize:vertical}
main .fm input::placeholder,main .fm textarea::placeholder{color:#626b80;opacity:1}
main .fm input:focus,main .fm select:focus,main .fm textarea:focus{outline:2px solid var(--azul)!important;outline-offset:1px;border-color:var(--azul)!important}
main .fm [aria-invalid="true"]{border-color:var(--fm-erro)!important;background:#fffafa}
main .fm [aria-invalid="true"]:focus{outline-color:var(--fm-erro)!important}

/* caixa de selecao com o rotulo inteiro clicavel */
main .fm .fm-check{display:flex;align-items:center;gap:10px;min-height:44px;margin:0;font-size:15px;color:var(--tinta);cursor:pointer}
main .fm .fm-check input{width:22px;height:22px;margin:0;flex:0 0 auto;accent-color:var(--azul)}

/* ---------- botao de enviar e estado do envio ---------- */
main .fm [type=submit]{min-height:var(--fm-h);width:100%;border-radius:4px!important;font-family:var(--font);font-size:17px;font-weight:600;
  background:var(--azul)!important;color:#fff!important;border:1px solid var(--azul)!important;box-shadow:none!important;cursor:pointer;margin:0;padding:0 18px;
  display:flex;align-items:center;justify-content:center;gap:8px;touch-action:manipulation}
main .fm [type=submit]:hover{background:var(--azul-esc)!important}
main .fm [type=submit]:focus-visible{outline:2px solid var(--tinta);outline-offset:2px}
main .fm [type=submit].fm-esperando{opacity:.8;cursor:progress}


/* notas embaixo do botao: legiveis */
main .fm .form-note,main .fm .ct-note,main .fm .pa-wa-note{margin:0;font-size:14px;line-height:1.45;color:var(--sec);text-align:left}

/* folhas dos formularios sem sombra e com canto de 4 px */
main .form-card,main .ct-form,main .pa-form{box-shadow:none!important;border:1px solid var(--regua)!important;border-radius:4px!important}
main .ct-form h2,main .pa-form h3{margin:0}
main .ct-form .ct-form-sub{margin:-8px 0 0;font-size:15px;color:var(--sec)}
}
/* no teste gratis o topo novo vale tambem no computador e no tablet (no celular valem as regras acima) */
@media (min-width:768px){
.tg-folha form.fm{display:grid;gap:14px}
.tg-folha form.fm .row,.tg-folha .fm .ct-row,.tg-folha .fm .pa-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:0}
.tg-folha .fm .fm-f{display:flex;flex-direction:column;gap:6px;margin:0;min-width:0}
.tg-folha .fm .fm-f>label{display:block;margin:0;font-size:15px;line-height:1.35;font-weight:600;color:var(--tinta);letter-spacing:0;text-transform:none}
.tg-folha .fm input:not([type=checkbox]):not([type=radio]),
.tg-folha .fm select,
.tg-folha .fm textarea{
  width:100%;box-sizing:border-box;margin:0;
  font-family:var(--font);font-size:16px!important;font-size:max(16px,1rem)!important;font-weight:400;line-height:1.3;color:var(--tinta);
  background:#fff;border:1px solid var(--fm-borda)!important;border-radius:4px!important;box-shadow:none!important}
.tg-folha .fm input:not([type=checkbox]):not([type=radio]),.tg-folha .fm select{height:var(--fm-h)!important;min-height:var(--fm-h);padding:0 14px!important}
.tg-folha .fm textarea{min-height:104px;height:auto!important;padding:12px 14px!important;line-height:1.5;resize:vertical}
.tg-folha .fm input::placeholder,.tg-folha .fm textarea::placeholder{color:#626b80;opacity:1}
.tg-folha .fm input:focus,.tg-folha .fm select:focus,.tg-folha .fm textarea:focus{outline:2px solid var(--azul)!important;outline-offset:1px;border-color:var(--azul)!important}
.tg-folha .fm [aria-invalid="true"]{border-color:var(--fm-erro)!important;background:#fffafa}
.tg-folha .fm [aria-invalid="true"]:focus{outline-color:var(--fm-erro)!important}
.tg-folha .fm .fm-check{display:flex;align-items:center;gap:10px;min-height:44px;margin:0;font-size:15px;color:var(--tinta);cursor:pointer}
.tg-folha .fm .fm-check input{width:22px;height:22px;margin:0;flex:0 0 auto;accent-color:var(--azul)}
.tg-folha .fm [type=submit]{min-height:var(--fm-h);width:100%;border-radius:4px!important;font-family:var(--font);font-size:17px;font-weight:600;
  background:var(--azul)!important;color:#fff!important;border:1px solid var(--azul)!important;box-shadow:none!important;cursor:pointer;margin:0;padding:0 18px;
  display:flex;align-items:center;justify-content:center;gap:8px;touch-action:manipulation}
.tg-folha .fm [type=submit]:hover{background:var(--azul-esc)!important}
.tg-folha .fm [type=submit]:focus-visible{outline:2px solid var(--tinta);outline-offset:2px}
.tg-folha .fm [type=submit].fm-esperando{opacity:.8;cursor:progress}
.tg-folha .fm .form-note,.tg-folha .fm .ct-note,.tg-folha .fm .pa-wa-note{margin:0;font-size:14px;line-height:1.45;color:var(--sec);text-align:left}
}

/* mensagens (so aparecem ao enviar ou sem JavaScript) */
.fm-erro{margin:0;font-size:15px;line-height:1.4;font-weight:500;color:var(--fm-erro)}
.fm-erro[hidden]{display:none}
.fm-ok{margin:0;padding:14px 16px;border:1px solid var(--ok);border-radius:4px;background:#fff;color:var(--tinta);font-size:15px;line-height:1.5}
.fm-ok[hidden]{display:none!important}
.fm-ok p{margin:0 0 6px}
.fm-ok p b{color:var(--ok)}
.fm-ok .fm-ok-bloq{font-weight:600}
.fm-ok-link{display:flex;align-items:center;justify-content:center;min-height:var(--fm-h);margin-top:8px;padding:0 16px;border:1px solid var(--azul);border-radius:4px;
  color:var(--azul)!important;font-weight:600;text-decoration:none!important;background:#fff}
.fm-ok-link:hover{background:var(--celula)}
.fm-ns{margin:0;font-size:15px;color:var(--tinta)}
.fm-ns .btn{margin-top:10px}

/* botao "Quero ser parceiro" no topo de contadores e parceiros */
.fm-pular{margin:18px 0 0}
@media (min-width:768px){.fm-pular{display:none}}
.page-hero--dark .fm-pular a.btn-light{color:var(--marinho)!important;text-decoration:none!important;min-height:48px;padding:0 22px;display:inline-flex;align-items:center}

/* contato: e-mail de suporte legivel */
@media (max-width:767.98px){.ct-int-row small{font-size:15px!important}}

/* ---------- teste gratis: titulo curto, formulario na primeira tela, o resto embaixo ---------- */
.tg{padding:40px 0 52px;background:#fff;border-bottom:1px solid var(--regua)}
.tg-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,460px);grid-template-areas:"intro folha" "depois folha";gap:0 56px;align-items:start}
.tg-intro{grid-area:intro}
.tg h1{margin:0 0 12px;font-size:clamp(1.75rem,3.2vw,2.5rem);line-height:1.12}
.tg-lead{margin:0 0 10px;max-width:560px;color:var(--sec)}
.tg-garantia{margin:0;font-weight:600;color:var(--tinta)}
.tg-folha{grid-area:folha;background:#fff;border:1px solid var(--regua);border-radius:4px}
.tg-folha-h{margin:0;padding:12px 20px;background:var(--celula);border-bottom:1px solid var(--regua);font-size:1.1rem;line-height:1.3}
.tg-folha form{padding:20px}
.tg-depois{grid-area:depois;margin-top:32px;padding-top:24px;border-top:1px solid var(--regua)}
.tg-depois h2{margin:0;font-size:clamp(1.4rem,2.4vw,1.75rem)}
.tg-depois .tsteps{margin-top:20px}
.tg-depois .tstep h3{font-size:1.06rem;margin:0 0 4px;padding-top:6px}
.tg-depois .tstep p{color:var(--sec);margin:0;font-size:.96rem}
.tg-foto{margin-top:28px}
@media (min-width:861px) and (min-height:820px){.tg-folha{position:sticky;top:84px}}

@media (max-width:860px){
  .tg-grid{grid-template-columns:1fr;grid-template-areas:"intro" "folha" "depois"}
  .tg-intro{margin-bottom:16px}
  .tg-depois{margin-top:28px;padding-top:0;border-top:0}
}

/* ---------- celular ---------- */
@media (max-width:760px){
  /* sem bolha flutuante nem barra fixa nas paginas de formulario: nada cobre campo ou botao */
  .fm-page .wa-float,.fm-page .m-cta{display:none!important}
  body.fm-page,body.fm-page.mcta-on{padding-bottom:calc(var(--fm-h) + env(safe-area-inset-bottom))!important}

  main form.fm .row,main .fm .ct-row,main .fm .pa-row{grid-template-columns:1fr}

  .tg{padding:20px 0 32px}
  .tg h1{font-size:1.75rem;margin-bottom:8px}
  .tg-lead{font-size:1rem;line-height:1.5;margin-bottom:6px}
  .tg-folha-h{padding:10px 16px;font-size:1rem}
  .tg-folha form{padding:16px}

  /* demonstracao: o botao sobe para a primeira tela tambem no iPhone SE */
  .dm{padding:20px 0 32px}
  .dm h1{font-size:1.6rem;margin-bottom:10px}
  .dm-lines li{padding:8px 0;font-size:.98rem}
  .dm-grid{gap:18px}
  .dm-form h2{font-size:1.15rem}

  main .ct-form,main .pa-form{padding:16px!important}
}
/* telas estreitas (320 a 360): tudo um pouco mais junto para o botao caber em 1,5 tela */
@media (max-width:360px){
  .tg{padding-top:16px}
  .tg h1{font-size:1.55rem}
  .tg-lead{font-size:.97rem;line-height:1.45}
  main form.fm{gap:12px}
  main .fm .fm-f{gap:4px}
  .tg-folha form{padding:14px}
  .tg-folha-h{padding:8px 14px}
}

/* contadores, lista de espera e parceiros: no celular o formulario vem antes da foto e da lista */
@media (max-width:767.98px){
  .fm-sec .container.grid{display:flex!important;flex-direction:column;gap:20px!important}
  .fm-sec .container.grid>div:first-child{display:contents}
  .fm-sec .container.grid>div:first-child>*{margin-top:0!important}
  #cadastro .form-card{order:3}
  #cadastro .checks{order:4}
  #cadastro .ph-fig{order:5}
  #lista .form-card{order:-1}
  #quero-ser-parceiro .pa-form-grid{display:flex;flex-direction:column;gap:16px}
  #quero-ser-parceiro .pa-form-grid>div:first-child{display:contents}
  #quero-ser-parceiro .pa-form-grid>div:first-child>*{margin:0}
  #quero-ser-parceiro .pa-form{order:3}
  #quero-ser-parceiro .ph-fig{order:5}
}

@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* 320 px: a faixa "Cadastro do teste" fica so para leitor de tela, para o botao caber em 1,5 tela */
@media (max-width:340px){
  .tg-folha-h{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;padding:0;border:0}
  .tg-intro{margin-bottom:12px}
}

/* v66, lista de espera: no celular o formulario sobe para logo depois do topo (no computador fica a ordem de antes) */
@media (max-width:767.98px){
  .le-main{display:flex;flex-direction:column}
  .le-main>.page-hero{order:0}
  .le-main>#lista{order:1}
  .le-main>.le-shot{order:2;padding-top:0!important;padding-bottom:60px!important}
  .le-main>section:last-child{order:3}
}

/* v66, contato e parceiros no computador e no tablet: o rotulo saiu de volta do campo (for/id), mas o desenho
   fica o de antes (antes o campo ficava dentro do <label>, que era a coluna com 5 px entre rotulo e campo) */
@media (min-width:768px){
  .pa-form .fm-f,.ct-form .fm-f{display:flex;flex-direction:column;gap:5px;font-size:.82rem;font-weight:600;color:#0d1733}
  .ct-form .fm-f{font-size:.84rem;margin-bottom:12px}
  .pa-form .fm-f>label,.ct-form .fm-f>label{display:block;margin:0;font-size:inherit}
}
@media (min-width:961px){
  .ct-form .fm-f{gap:3px;font-size:.8rem;margin-bottom:9px}
}

/* v66: o cabecalho fica grudado no topo tambem aqui; so enquanto a pessoa digita num campo (teclado aberto)
   ele volta a rolar junto, para o campo e o botao de enviar caberem na tela que sobra (nada muda de lugar) */
@media (max-width:767.98px){
  body.fm-page:has(main input:focus,main select:focus,main textarea:focus)>header{position:relative!important;top:auto!important}
}