.elementor-522 .elementor-element.elementor-element-secformp{--display:flex;--min-height:100vh;--justify-content:center;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--padding-top:48px;--padding-bottom:32px;--padding-left:20px;--padding-right:20px;}.elementor-522 .elementor-element.elementor-element-secformp:not(.elementor-motion-effects-element-type-background), .elementor-522 .elementor-element.elementor-element-secformp > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFF5EB;}.elementor-widget-form .elementor-field-group > label, .elementor-widget-form .elementor-field-subgroup label{color:var( --e-global-color-text );}.elementor-widget-form .elementor-field-group > label{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-widget-form .elementor-field-type-html{color:var( --e-global-color-text );font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-widget-form .elementor-field-group .elementor-field{color:var( --e-global-color-text );}.elementor-widget-form .elementor-field-group .elementor-field, .elementor-widget-form .elementor-field-subgroup label{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-widget-form .elementor-button{font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-widget-form .e-form__buttons__wrapper__button-next{background-color:var( --e-global-color-accent );}.elementor-widget-form .elementor-button[type="submit"]{background-color:var( --e-global-color-accent );}.elementor-widget-form .e-form__buttons__wrapper__button-previous{background-color:var( --e-global-color-accent );}.elementor-widget-form .elementor-message{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-widget-form .e-form__indicators__indicator, .elementor-widget-form .e-form__indicators__indicator__label{font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-widget-form{--e-form-steps-indicator-inactive-primary-color:var( --e-global-color-text );--e-form-steps-indicator-active-primary-color:var( --e-global-color-accent );--e-form-steps-indicator-completed-primary-color:var( --e-global-color-accent );--e-form-steps-indicator-progress-color:var( --e-global-color-accent );--e-form-steps-indicator-progress-background-color:var( --e-global-color-text );--e-form-steps-indicator-progress-meter-color:var( --e-global-color-text );}.elementor-widget-form .e-form__indicators__indicator__progress__meter{font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-522 .elementor-element.elementor-element-formpelv1 .elementor-field-group{padding-right:calc( 10px/2 );padding-left:calc( 10px/2 );margin-bottom:10px;}.elementor-522 .elementor-element.elementor-element-formpelv1 .elementor-form-fields-wrapper{margin-left:calc( -10px/2 );margin-right:calc( -10px/2 );margin-bottom:-10px;}.elementor-522 .elementor-element.elementor-element-formpelv1 .elementor-field-group.recaptcha_v3-bottomleft, .elementor-522 .elementor-element.elementor-element-formpelv1 .elementor-field-group.recaptcha_v3-bottomright{margin-bottom:0;}body.rtl .elementor-522 .elementor-element.elementor-element-formpelv1 .elementor-labels-inline .elementor-field-group > label{padding-left:0px;}body:not(.rtl) .elementor-522 .elementor-element.elementor-element-formpelv1 .elementor-labels-inline .elementor-field-group > label{padding-right:0px;}body .elementor-522 .elementor-element.elementor-element-formpelv1 .elementor-labels-above .elementor-field-group > label{padding-bottom:0px;}.elementor-522 .elementor-element.elementor-element-formpelv1 .elementor-field-type-html{padding-bottom:0px;}.elementor-522 .elementor-element.elementor-element-formpelv1 .elementor-field-group .elementor-field:not(.elementor-select-wrapper){background-color:#ffffff;}.elementor-522 .elementor-element.elementor-element-formpelv1 .elementor-field-group .elementor-select-wrapper select{background-color:#ffffff;}.elementor-522 .elementor-element.elementor-element-formpelv1 .e-form__buttons__wrapper__button-next{color:#ffffff;}.elementor-522 .elementor-element.elementor-element-formpelv1 .elementor-button[type="submit"]{color:#ffffff;}.elementor-522 .elementor-element.elementor-element-formpelv1 .elementor-button[type="submit"] svg *{fill:#ffffff;}.elementor-522 .elementor-element.elementor-element-formpelv1 .e-form__buttons__wrapper__button-previous{color:#ffffff;}.elementor-522 .elementor-element.elementor-element-formpelv1 .e-form__buttons__wrapper__button-next:hover{color:#ffffff;}.elementor-522 .elementor-element.elementor-element-formpelv1 .elementor-button[type="submit"]:hover{color:#ffffff;}.elementor-522 .elementor-element.elementor-element-formpelv1 .elementor-button[type="submit"]:hover svg *{fill:#ffffff;}.elementor-522 .elementor-element.elementor-element-formpelv1 .e-form__buttons__wrapper__button-previous:hover{color:#ffffff;}.elementor-522 .elementor-element.elementor-element-formpelv1{--e-form-steps-indicators-spacing:20px;--e-form-steps-indicator-progress-height:20px;--e-form-steps-indicator-progress-border-radius:0px;}/* Start custom CSS for form, class: .elementor-element-formpelv1 *//* ============================================================================
   Anamnese · Formulário NATIVO do Elementor Pro com a cara dos nossos forms
   CSS único (v1.0) — identidade lida da HOME (post 170), ver ref-identidade-home.md
   ----------------------------------------------------------------------------
   ONDE COLAR: Custom CSS do WIDGET DE FORMULÁRIO (Avançado > CSS personalizado).
   É um bloco só. Não precisa colar nada no popup, na página nem no tema.

   POR QUE `.elementor-522 .elementor-element.elementor-element-formpelv1` E NÃO `#anamnese`: aqui o formulário é o widget nativo do
   Elementor Pro (multi-step), não o nosso motor próprio. O Elementor troca a
   palavra ".elementor-522 .elementor-element.elementor-element-formpelv1" pelo ID real do widget, então o CSS fica escopado sem
   depender de ID fixo e sem vazar para o resto do site.

   O QUE ISTO FAZ: pega o markup padrão do Elementor Pro
   (.elementor-form / .e-form__step / .elementor-field-group / .e-form__buttons)
   e o repinta com a paleta e as formas de _core/base.css — creme #FFF5EB,
   tinta #223934, cards de opção com véu bege+menta, CTA menta em pílula 121px.
   Reaproveita as correções já provadas em produção na anamnese-inicial.css:
   botões sticky, padding do intl-tel-input e flatpickr na marca.

   REGRAS DE MONTAGEM NO EDITOR (o CSS sozinho não resolve):
   - UMA pergunta por etapa (campo "Step" antes de cada pergunta).
   - "Inline List" DESLIGADO em todos os radio/checkbox — senão as opções não
     viram cards, viram uma linha corrida.
   - Data: "Native HTML5" DESLIGADO, senão o navegador abre o calendário dele,
     que não aceita CSS (é por isso que o bloco do flatpickr existe).
   - Indicador de etapas: tipo "Progress Bar".
============================================================================ */

/* A fonte da marca. O tema da home já carrega Plus Jakarta Sans em todas as
   páginas, então este @import é só uma rede de segurança para quando o form
   rodar numa página que não carregue o CSS do post 170. Em alguns casos o
   Elementor imprime o CSS do widget num <style> já no meio do <body>, e aí o
   navegador ignora o @import — por isso toda regra abaixo declara a família
   por extenso, com system-ui de reserva, em vez de depender do import. */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap');

/* ============================================================================
   A) TOKENS — os mesmos de _core/base.css, sem uma vírgula de diferença
   ----------------------------------------------------------------------------
   Vêm da HOME, não do popup 345: o popup herdou só o esqueleto escuro da marca
   e nenhuma cor quente — era por isso que o formulário parecia cinza.
   Ficam em `.elementor-522 .elementor-element.elementor-element-formpelv1` (a raiz do widget) para que todo descendente herde.
============================================================================ */
.elementor-522 .elementor-element.elementor-element-formpelv1{
  --bg:#FFF5EB;              /* body real da home, não o #F6F8F7 do popup */
  --superficie:#FFFFFF;
  --tinta:#223934;           /* verde-floresta dos títulos */
  --tinta-fraca:rgba(34,57,52,.58);
  --verde:#568672;
  --verde-escuro:#3F6A58;
  --verde-suave:#EDF2EF;
  --bege:#D6BB9F;            /* hex certo: #D6BB9F, não #D6B89F */
  --taupe:#84796F;
  --menta-a:#63D8AF;         /* a menta é reservada à AÇÃO na home */
  --menta-b:#65F7B8;
  --borda:rgba(132,121,111,.23);
  --erro:#8F0F1B;
  --erro-suave:#FBEDEE;
  --raio:13px;               /* raio dominante da home: 16 ocorrências */
  --raio-g:18px;
  --coluna:560px;            /* largura de leitura de uma pergunta por tela */

  /* card selecionado: o mesmo véu bege+menta dos cards de passo da home */
  --selecionado:linear-gradient(87deg,rgba(214,187,159,.21),rgba(198,232,220,.21));

  font-family:'Plus Jakarta Sans',system-ui,sans-serif;
  color:var(--tinta);
}

/* O Elementor monta o form com box-sizing herdado do tema; alguns temas ainda
   entregam content-box em <input>, e aí o padding estoura a largura do campo. */
.elementor-522 .elementor-element.elementor-element-formpelv1 .elementor-form,
.elementor-522 .elementor-element.elementor-element-formpelv1 .elementor-form *,
.elementor-522 .elementor-element.elementor-element-formpelv1 .elementor-form *::before,
.elementor-522 .elementor-element.elementor-element-formpelv1 .elementor-form *::after{box-sizing:border-box}

/* ============================================================================
   B) A CAIXA DO FORMULÁRIO
============================================================================ */
.elementor-522 .elementor-element.elementor-element-formpelv1 .elementor-form{
  background:var(--bg);
  color:var(--tinta);
  font-family:'Plus Jakarta Sans',system-ui,sans-serif;
  font-size:17px;
  line-height:1.5;
}
/* O Elementor distribui os campos numa grade de colunas com margem negativa.
   Zerar a margem lateral evita que a etapa "escape" 10px para cada lado quando
   o widget está dentro de um container estreito (popup, coluna de 350px). */
/* A calha entre dois campos de meia largura. Zerar o padding dos grupos (era o
   que fazíamos antes) grudava um campo no outro: "CPF" encostava em "Data de
   nascimento" sem nenhum respiro. Aqui a calha volta, com a margem negativa
   correspondente para a linha não escapar da coluna. */
.elementor-522 .elementor-element.elementor-element-formpelv1 .elementor-form-fields-wrapper{
  margin-left:-8px;
  margin-right:-8px;
}
.elementor-522 .elementor-element.elementor-element-formpelv1 .elementor-field-group{padding-left:8px; padding-right:8px}

/* --------------------------------------------- distância rótulo → campo ----
   O Elementor faz de cada grupo um flex de LINHA que quebra. Sem as três
   regras abaixo, o rótulo e o texto de ajuda são irmãos na mesma linha e o
   espaço entre rótulo e campo vira resto de layout, não escolha:

   - `align-content:normal` (= stretch) num flex de várias linhas divide a
     altura sobrando ENTRE as linhas. Um campo alto ao lado inflava o vizinho:
     medimos 63,6px de distância em "Altura" e 26px em "Data de nascimento",
     na mesma tela onde o normal era 9px.
   - rótulo e ajuda cabendo lado a lado colavam sem espaço nenhum: no celular
     saía literalmente "CPFDigite apenas os números, sem pontos.".

   Com `flex:0 0 100%` cada um ocupa a sua própria linha, e com
   `align-content:flex-start` nada é esticado. A distância passa a ser só a
   margem de baixo do rótulo — 9px, igual em todo campo do formulário. */
.elementor-522 .elementor-element.elementor-element-formpelv1 .elementor-field-group{
  align-items:flex-start;
  align-content:flex-start;
}
.elementor-522 .elementor-element.elementor-element-formpelv1 .elementor-field-group > label.elementor-field-label,
.elementor-522 .elementor-element.elementor-element-formpelv1 .elementor-field-group > .m-ajuda,
.elementor-522 .elementor-element.elementor-element-formpelv1 .elementor-field-group > .elementor-field-description{
  flex:0 0 100%;
  max-width:100%;
}

/* ============================================================================
   C) A ETAPA (.e-form__step) — uma pergunta por tela
   ----------------------------------------------------------------------------
   É o "palco" do base.css: coluna estreita, centralizada, com respiro generoso
   em cima e embaixo. O Elementor já aplica display:flex/flex-wrap aqui; só
   reaproveitamos.
============================================================================ */
.elementor-522 .elementor-element.elementor-element-formpelv1 .e-form__step{
  width:100%;
  max-width:var(--coluna);
  margin:0 auto;
  padding:34px 0 8px;
}
/* etapa inativa: o Elementor usa .elementor-hidden. Reforçado aqui porque
   alguns temas redefinem .elementor-hidden como visibility em vez de display,
   e a etapa seguinte aparecia embaixo da atual. */
.elementor-522 .elementor-element.elementor-element-formpelv1 .e-form__step.elementor-hidden{display:none !important}

/* Etapa sem nenhuma pergunta visível (o condicional.js marca com data-vazia).
   Ela é pulada por script; escondê-la evita o flash de uma tela em branco. */
.elementor-522 .elementor-element.elementor-element-formpelv1 .e-form__step[data-vazia="sim"]{visibility:hidden}

/* ---------- cabeçalho da tela: bloco, contador e número de fundo ----------
   O formulário nativo não tem nada disso: sem o cabeçalho, a etapa vira um
   campo solto no meio do creme, sem dizer onde a pessoa está. Vem de um campo
   HTML gerado pelo build, primeiro item de cada etapa. */
.elementor-522 .elementor-element.elementor-element-formpelv1 .e-form__step .m-cabecalho{
  position:relative;
  display:flex; align-items:baseline; justify-content:space-between;
  gap:16px; width:100%; margin:0 0 20px;
  /* o número em bege vive DENTRO desta faixa e não pode sair dela: com o
     cabeçalho sem altura própria, um número de 96px descia mais de 100px e
     atravessava o rótulo do campo seguinte ("Data de nascimento" saía com o
     "02" cortando as letras). A altura reserva o espaço e o overflow garante
     o resto, caso alguém aumente a fonte depois. */
  min-height:60px;
  overflow:hidden;
}
/* A FAMÍLIA PRECISA SER DECLARADA AQUI, uma por uma.
   Estes quatro elementos são <h2> e <span> dentro de um campo HTML, fora da
   árvore de campos do formulário. O tema do site tem `h1,h2,…{font-family:
   inherit}`, então eles herdavam a tipografia global do Elementor — Roboto —
   enquanto rótulos, inputs e botões ficavam na Plus Jakarta Sans. Davam duas
   famílias de letra na mesma tela, e o título da pergunta, que é o texto
   maior, estava justamente na errada. */
.elementor-522 .elementor-element.elementor-element-formpelv1 .m-cabecalho,
.elementor-522 .elementor-element.elementor-element-formpelv1 .m-bloco,
.elementor-522 .elementor-element.elementor-element-formpelv1 .m-contador,
.elementor-522 .elementor-element.elementor-element-formpelv1 .m-fantasma,
.elementor-522 .elementor-element.elementor-element-formpelv1 .m-titulo{font-family:'Plus Jakarta Sans',system-ui,-apple-system,sans-serif}

.elementor-522 .elementor-element.elementor-element-formpelv1 .m-bloco{
  font-size:12px; font-weight:600; letter-spacing:.16em;
  text-transform:uppercase; color:var(--verde);
}
.elementor-522 .elementor-element.elementor-element-formpelv1 .m-contador{
  font-size:12px; font-weight:500; color:var(--tinta-fraca);
  font-variant-numeric:tabular-nums;
}
/* o número em bege atrás da pergunta, como na versão que está no ar. Menor e
   mais apagado do que lá: aqui ele divide a faixa com a barra de progresso e o
   contador, e no tamanho original passava por cima dos dois. */
.elementor-522 .elementor-element.elementor-element-formpelv1 .m-fantasma{
  position:absolute; top:0; right:-2px;
  font-size:60px; font-weight:700; line-height:1; letter-spacing:-.04em;
  color:rgba(214,187,159,.30);
  pointer-events:none; user-select:none; z-index:0;
}
.elementor-522 .elementor-element.elementor-element-formpelv1 .m-bloco,
.elementor-522 .elementor-element.elementor-element-formpelv1 .m-contador,
.elementor-522 .elementor-element.elementor-element-formpelv1 .m-titulo{position:relative; z-index:1}

/* O Elementor dá foco à etapa ao trocar de tela (acessibilidade). Como a
   primeira coisa da etapa é o cabeçalho, o navegador desenhava um retângulo
   preto em volta dele. O foco continua existindo, só não é mais desenhado
   nesse bloco, que não é interativo.
   Além do contorno, o tema desenha um anel branco por box-shadow — era ele
   que sobrava como uma moldura clara em volta do cabeçalho. */
.elementor-522 .elementor-element.elementor-element-formpelv1 .e-form__step:focus,
.elementor-522 .elementor-element.elementor-element-formpelv1 .e-form__step:focus-visible,
.elementor-522 .elementor-element.elementor-element-formpelv1 .elementor-field-type-html:focus,
.elementor-522 .elementor-element.elementor-element-formpelv1 .elementor-field-type-html:focus-visible{outline:none; box-shadow:none}

/* o rótulo de parte de pergunta composta (Nome, Sobrenome, CEP...) é definido
   mais abaixo, junto das outras regras de rótulo — precisa vir depois da regra
   de "tela com mais de uma pergunta" para vencer o desempate */
/* título de pergunta composta (Nome completo, Endereço): os campos abaixo têm
   rótulo próprio e pequeno, então a pergunta em si precisa de voz própria */
.elementor-522 .elementor-element.elementor-element-formpelv1 .m-titulo{
  margin:0 0 6px;
  font-size:clamp(24px,6.4vw,30px); font-weight:600; line-height:1.25;
  letter-spacing:-.01em; color:var(--tinta);
}
/* O campo HTML (cabeçalho e ajudas) não é um campo: não pode ocupar altura de
   campo. Vai pelo tipo, e não por classe, porque o Elementor não imprime o
   css_classes de campo HTML no grupo — a classe existe no banco e não chega
   ao HTML. */
.elementor-522 .elementor-element.elementor-element-formpelv1 .elementor-field-type-html{margin-bottom:0; padding-top:0; padding-bottom:0}

/* ============================================================================
   D) BARRA DE PROGRESSO (.e-form__indicators com tipo "Progress Bar")
   ----------------------------------------------------------------------------
   Duas frentes, de propósito:
   1) As variáveis CSS que o próprio Elementor consome. É o caminho mais
      estável: se ele mudar o nome das classes internas, as variáveis seguem.
   2) As classes literais, como plano B.
   [CONFERIR NO NAVEGADOR] os nomes das classes internas
   .e-form__indicators__indicator__progress e __progress__meter mudaram entre
   versões do Pro. A regra com [class*="meter"] cobre a variação; se nada pegar,
   inspecione o elemento e ajuste este bloco.
============================================================================ */
.elementor-522 .elementor-element.elementor-element-formpelv1 .elementor-form{
  --e-form-steps-indicator-progress-color:linear-gradient(90deg,var(--menta-a),var(--menta-b));
  --e-form-steps-indicator-progress-background-color:rgba(132,121,111,.18);
  --e-form-steps-indicator-progress-meter-color:var(--tinta-fraca);
  --e-form-steps-indicators-spacing:22px;
  --e-form-steps-indicator-inactive-primary-color:rgba(132,121,111,.18);
  --e-form-steps-indicator-inactive-secondary-color:var(--tinta-fraca);
  --e-form-steps-indicator-active-primary-color:var(--verde);
  --e-form-steps-indicator-active-secondary-color:var(--superficie);
  --e-form-steps-indicator-completed-primary-color:var(--verde);
  --e-form-steps-indicator-completed-secondary-color:var(--superficie);
  --e-form-steps-divider-color:var(--borda);
}
.elementor-522 .elementor-element.elementor-element-formpelv1 .e-form__indicators{
  width:100%;
  max-width:var(--coluna);
  margin:0 auto;
}
/* a calha */
.elementor-522 .elementor-element.elementor-element-formpelv1 .e-form__indicators__indicator--progress_bar,
.elementor-522 .elementor-element.elementor-element-formpelv1 .e-form__indicators__indicator__progress{
  height:3px;
  border-radius:3px;
  background:rgba(132,121,111,.18);
  overflow:hidden;
}
/* o preenchimento — a menta, que na marca é a cor da AÇÃO */
.elementor-522 .elementor-element.elementor-element-formpelv1 .e-form__indicators__indicator__progress__meter,
.elementor-522 .elementor-element.elementor-element-formpelv1 .e-form__indicators__indicator--progress_bar [class*="meter"]{
  display:block;
  height:100%;
  border-radius:3px;
  background:linear-gradient(90deg,var(--menta-a),var(--menta-b));
  /* o Elementor escreve a porcentagem DENTRO do meter e a mostra como texto.
     Em 3px de altura isso vira um borrão; escondemos o texto sem tirar o
     elemento do fluxo (o width inline dele é o progresso). */
  color:transparent;
  font-size:0;
  line-height:0;
  transition:width .45s cubic-bezier(.3,.8,.3,1);
}
/* Indicadores em bolinha/número/ícone, caso o cliente troque o tipo no editor.
   [CONFERIR NO NAVEGADOR] os sufixos --state-* são os que o Pro usa hoje. */
.elementor-522 .elementor-element.elementor-element-formpelv1 .e-form__indicators__indicator{
  font-family:'Plus Jakarta Sans',system-ui,sans-serif;
  font-size:12px; font-weight:600; letter-spacing:.06em;
  color:var(--tinta-fraca);
}
.elementor-522 .elementor-element.elementor-element-formpelv1 .e-form__indicators__indicator--state-active,
.elementor-522 .elementor-element.elementor-element-formpelv1 .e-form__indicators__indicator--state-completed{color:var(--verde)}
.elementor-522 .elementor-element.elementor-element-formpelv1 .e-form__indicators__indicator__label{
  font-size:12px; font-weight:600; letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--verde);
}
.elementor-522 .elementor-element.elementor-element-formpelv1 .e-form__indicators__indicator__separator{background:var(--borda)}

/* ============================================================================
   E) A PERGUNTA — rótulo grande, ajuda apagada
   ----------------------------------------------------------------------------
   Com uma pergunta por etapa, o .elementor-field-label faz o papel do
   .an-titulo do base.css: mesmo clamp(24px,6.4vw,30px), mesmo peso, mesma
   entrelinha. É isso que faz a tela "ler" como os nossos formulários.
============================================================================ */
.elementor-522 .elementor-element.elementor-element-formpelv1 .elementor-field-group{
  margin-bottom:30px; /* respiro entre uma pergunta e a seguinte */
}
.elementor-522 .elementor-element.elementor-element-formpelv1 .elementor-field-group > label.elementor-field-label{
  display:block;
  margin:0 0 14px;
  font-family:'Plus Jakarta Sans',system-ui,sans-serif;
  font-size:clamp(24px,6.4vw,30px);
  font-weight:600;
  line-height:1.25;
  letter-spacing:-.01em;
  color:var(--tinta);
}
/* Quando a etapa tem mais de uma pergunta, o título não pode gritar tanto —
   é o mesmo ajuste do [data-multi="sim"] no base.css.
   [CONFERIR NO NAVEGADOR] depende de :has() e de os grupos serem irmãos
   adjacentes; um campo HTML entre duas perguntas quebra a adjacência. Se não
   pegar, ponha a classe .m-multi na etapa (regra logo abaixo). */
/* "tela com mais de uma pergunta" precisa ignorar os campos HTML (cabeçalho e
   ajuda), senão TODA tela conta como múltipla e nenhum título cresce */
.elementor-522 .elementor-element.elementor-element-formpelv1 .e-form__step:has(.elementor-field-group:not(.elementor-field-type-html) ~ .elementor-field-group:not(.elementor-field-type-html):not(.e-form__buttons):not(.elementor-field-type-submit)) > .elementor-field-group > label.elementor-field-label,
.elementor-522 .elementor-element.elementor-element-formpelv1 .e-form__step.m-multi > .elementor-field-group > label.elementor-field-label{
  font-size:clamp(18px,4.4vw,21px);
  margin-bottom:9px;
}
/* SUBCAMPO: precisa vir DEPOIS da regra acima e com peso maior que ela, senão
   não vale nada — e não valia. A regra de "tela com mais de uma pergunta" usa
   um :has() longo, que pesa mais que o :has(.m-sub) declarado lá em cima, e
   ganhava: os seis rótulos do endereço saíam em 21px/600, do mesmo tamanho do
   título "Endereço" logo acima, e a tela virava uma lista de seis títulos.
   A classe repetida no fim (`.elementor-field-label.elementor-field-label`)
   é o que desempata, sem precisar de !important. */
.elementor-522 .elementor-element.elementor-element-formpelv1 .elementor-field-group:has(.m-sub) > label.elementor-field-label.elementor-field-label{
  font-size:14px; font-weight:600; letter-spacing:0; line-height:1.4;
  margin-bottom:7px;
  color:var(--tinta-fraca);
  text-transform:none;
}
/* asterisco de obrigatório em verde, não em vermelho: obrigatório não é erro */
.elementor-522 .elementor-element.elementor-element-formpelv1 .elementor-field-group .elementor-mark-required,
.elementor-522 .elementor-element.elementor-element-formpelv1 .elementor-field-group .elementor-field-required,
.elementor-522 .elementor-element.elementor-element-formpelv1 .elementor-field-label .elementor-mark-required{
  color:var(--verde);
  font-weight:600;
}
/* Texto de ajuda. O Pro nativo NÃO tem campo de descrição por pergunta —
   a ajuda é um campo HTML com a classe .m-ajuda logo abaixo do rótulo.
   .elementor-field-description fica junto para o caso de a versão instalada
   já ter o recurso. [CONFERIR NO NAVEGADOR] */
/* aviso da busca por CEP: entra abaixo do campo, e some quando não há recado */
.elementor-522 .elementor-element.elementor-element-formpelv1 .m-cep-aviso{margin:8px 0 0}
.elementor-522 .elementor-element.elementor-element-formpelv1 .m-cep-aviso:empty{display:none}

/* o script move a ajuda para dentro da pergunta, logo abaixo do rótulo —
   por isso a margem de cima é pequena e a de baixo separa do campo */
.elementor-522 .elementor-element.elementor-element-formpelv1 .m-ajuda,
.elementor-522 .elementor-element.elementor-element-formpelv1 .elementor-field-group .elementor-field-description{
  margin:2px 0 12px;
  font-family:'Plus Jakarta Sans',system-ui,sans-serif;
  font-size:14px; line-height:1.45; font-weight:400;
  color:var(--tinta-fraca);
}
/* Parte de pergunta composta (Nome, Sobrenome, País, CEP...) e pergunta de
   detalhamento ("Qual?"): a barrinha verde à esquerda mostra que o campo
   pertence à pergunta de cima.
   A margem negativa saiu: ela existia para colar o campo no anterior quando os
   dois dividiam a linha, e com tudo empilhado ela subia o input POR CIMA do
   próprio rótulo — a distância medida era −5px. */
.elementor-522 .elementor-element.elementor-element-formpelv1 .m-sub{margin-top:0; padding-left:14px; border-left:2px solid rgba(86,134,114,.28)}
/* divisor de bloco dentro da etapa (campo HTML) */
.elementor-522 .elementor-element.elementor-element-formpelv1 .m-divider{
  margin:4px 0 18px; padding-top:16px;
  border-top:1px solid var(--borda);
  font-size:12px; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  color:var(--tinta-fraca);
}

/* ============================================================================
   F) CAMPOS DE TEXTO, NÚMERO, E-MAIL, SELECT, TEXTAREA
   ----------------------------------------------------------------------------
   Mesmas medidas do base.css: 56px de altura, padding 15/16, raio 13px,
   borda taupe 23%, foco com anel de menta.
============================================================================ */
.elementor-522 .elementor-element.elementor-element-formpelv1 .elementor-field-textual,
.elementor-522 .elementor-element.elementor-element-formpelv1 input.elementor-field,
.elementor-522 .elementor-element.elementor-element-formpelv1 select.elementor-field,
.elementor-522 .elementor-element.elementor-element-formpelv1 textarea.elementor-field{
  width:100%;
  min-height:56px;
  padding:15px 16px;
  background:var(--superficie);
  border:1px solid var(--borda);
  border-radius:var(--raio);
  font-family:'Plus Jakarta Sans',system-ui,sans-serif;
  font-size:17px;
  line-height:1.4;
  color:var(--tinta);
  transition:border-color .18s ease, box-shadow .18s ease;
  -webkit-appearance:none; appearance:none;
  box-shadow:none;
}
.elementor-522 .elementor-element.elementor-element-formpelv1 textarea.elementor-field{min-height:120px; resize:vertical}
.elementor-522 .elementor-element.elementor-element-formpelv1 .elementor-field-textual::placeholder,
.elementor-522 .elementor-element.elementor-element-formpelv1 textarea.elementor-field::placeholder{color:rgba(34,57,52,.38)}
.elementor-522 .elementor-element.elementor-element-formpelv1 .elementor-field-textual:focus,
.elementor-522 .elementor-element.elementor-element-formpelv1 select.elementor-field:focus,
.elementor-522 .elementor-element.elementor-element-formpelv1 textarea.elementor-field:focus{
  outline:none;
  border-color:var(--verde);
  box-shadow:0 0 0 3px rgba(99,216,175,.28);
}
/* seta do select desenhada por nós, no verde da marca */
.elementor-522 .elementor-element.elementor-element-formpelv1 select.elementor-field{
  padding-right:44px;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%23568672' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 16px center;
  cursor:pointer;
}
/* Só o "Selecione" fica apagado. Aqui não temos o data-vazio do nosso motor,
   então usamos :invalid — que só funciona em select OBRIGATÓRIO. Em select
   opcional o placeholder fica em tinta cheia; é o preço de não ter JS.
   [CONFERIR NO NAVEGADOR] */
.elementor-522 .elementor-element.elementor-element-formpelv1 select.elementor-field:invalid,
.elementor-522 .elementor-element.elementor-element-formpelv1 select.elementor-field option[value=""]{color:rgba(34,57,52,.38)}
.elementor-522 .elementor-element.elementor-element-formpelv1 select.elementor-field option{color:var(--tinta); background:var(--superficie)}

/* --------------------------------------------------- bandeira do país ----
   O campo de país mostra a bandeira antes do nome (🇧🇷 Brasil). O emoji só é
   desenhado por quem tem fonte de bandeira instalada: iPhone, Android e Mac
   têm, o WINDOWS NÃO — lá o Chrome desenha as duas letras do código.
   Por isso a família 'Bandeiras' vem PRIMEIRO: é uma fonte só de bandeiras
   (declarada no widget de script, com unicode-range nos indicadores
   regionais), e tudo que ela não tem cai na fonte da marca logo atrás.
   O seletor casa pelo fim do name (`...-pais]`) para não depender do ID do
   widget nem da posição do campo. */
.elementor-522 .elementor-element.elementor-element-formpelv1 select[name$="-pais]"],
.elementor-522 .elementor-element.elementor-element-formpelv1 select[name$="-pais]"] option{
  font-family:'Bandeiras','Plus Jakarta Sans',system-ui,-apple-system,sans-serif;
}

/* tira as setinhas do number, que nenhum navegador desenha igual */
.elementor-522 .elementor-element.elementor-element-formpelv1 input[type="number"].elementor-field{-moz-appearance:textfield}
.elementor-522 .elementor-element.elementor-element-formpelv1 input[type="number"].elementor-field::-webkit-outer-spin-button,
.elementor-522 .elementor-element.elementor-element-formpelv1 input[type="number"].elementor-field::-webkit-inner-spin-button{-webkit-appearance:none; margin:0}

/* ============================================================================
   G) TELEFONE COM BANDEIRA (plugin Country Code → intl-tel-input)
   ----------------------------------------------------------------------------
   Correção já provada em produção: o plugin reserva o espaço da bandeira com
   padding-left numa regra MENOS específica que a nossa de campo — o
   `padding:15px 16px` ganhava e o número era digitado POR TRÁS da bandeira.
   Esta regra devolve o espaço. Sem !important de propósito: no modo
   "DDI separado" o plugin mede e grava o padding inline, e esse precisa
   continuar ganhando.
============================================================================ */
.elementor-522 .elementor-element.elementor-element-formpelv1 .iti--allow-dropdown input.iti__tel-input.elementor-field-textual{
  padding-left:calc(var(--iti-selected-country-arrow-padding, 52px) + 4px);
}
.elementor-522 .elementor-element.elementor-element-formpelv1 .iti{width:100%}
.elementor-522 .elementor-element.elementor-element-formpelv1 .iti__country-container .iti__selected-country{
  border-radius:var(--raio) 0 0 var(--raio);
}
.elementor-522 .elementor-element.elementor-element-formpelv1 .iti__country-container .iti__selected-country:hover{background:var(--verde-suave)}
/* a lista de países é anexada ao <body>, fora do widget — vai sem `.elementor-522 .elementor-element.elementor-element-formpelv1` */
.iti__dropdown-content{
  font-family:'Plus Jakarta Sans',system-ui,sans-serif;
  font-size:15px; color:#223934;
}

/* ============================================================================
   H) CARDS DE ESCOLHA (radio / checkbox)
   ----------------------------------------------------------------------------
   No markup do Pro, cada opção é
     .elementor-field-subgroup > .elementor-field-option > input + label
   O input real é escondido (não display:none — isso o tira da navegação por
   teclado) e a marca é desenhada no label::before. O card inteiro é o label,
   para que a área clicável cubra tudo.
   EXIGE "Inline List" DESLIGADO no editor.
============================================================================ */
.elementor-522 .elementor-element.elementor-element-formpelv1 .elementor-field-type-radio .elementor-field-subgroup,
.elementor-522 .elementor-element.elementor-element-formpelv1 .elementor-field-type-checkbox .elementor-field-subgroup{
  display:flex;
  flex-direction:column;
  gap:10px;
  width:100%;
}
.elementor-522 .elementor-element.elementor-element-formpelv1 .elementor-field-subgroup .elementor-field-option{
  position:relative;
  display:flex;
  align-items:center;
  width:100%;
  margin:0;
  background:var(--superficie);
  border:1px solid var(--borda);
  border-radius:var(--raio);
  transition:background .18s ease, border-color .18s ease, transform .1s ease;
}
.elementor-522 .elementor-element.elementor-element-formpelv1 .elementor-field-subgroup .elementor-field-option:hover{border-color:var(--verde)}
.elementor-522 .elementor-element.elementor-element-formpelv1 .elementor-field-subgroup .elementor-field-option:active{transform:scale(.995)}
/* o input continua existindo e focável — só sai de vista */
.elementor-522 .elementor-element.elementor-element-formpelv1 .elementor-field-subgroup .elementor-field-option input[type="radio"],
.elementor-522 .elementor-element.elementor-element-formpelv1 .elementor-field-subgroup .elementor-field-option input[type="checkbox"]{
  position:absolute; opacity:0; width:0; height:0; margin:0;
}
.elementor-522 .elementor-element.elementor-element-formpelv1 .elementor-field-subgroup .elementor-field-option label{
  display:flex; align-items:center; gap:12px;
  width:100%; margin:0;
  padding:16px 17px;
  font-family:'Plus Jakarta Sans',system-ui,sans-serif;
  font-size:16px; font-weight:500; line-height:1.35;
  color:var(--tinta);
  cursor:pointer;
}
/* a marca (quadrado do checkbox / círculo do radio) */
.elementor-522 .elementor-element.elementor-element-formpelv1 .elementor-field-subgroup .elementor-field-option label::before{
  content:'';
  flex:0 0 auto;
  display:flex; align-items:center; justify-content:center;
  width:20px; height:20px;
  border:1px solid rgba(132,121,111,.38);
  border-radius:6px;
  background:var(--superficie);
  color:var(--bg);
  font-size:12px; line-height:1;
}
.elementor-522 .elementor-element.elementor-element-formpelv1 .elementor-field-type-radio .elementor-field-option label::before{border-radius:50%}
/* marcado: o véu bege+menta da home + a marca preenchida em verde */
.elementor-522 .elementor-element.elementor-element-formpelv1 .elementor-field-subgroup .elementor-field-option:has(input:checked){
  background:var(--selecionado);
  border-color:var(--bege);
}
.elementor-522 .elementor-element.elementor-element-formpelv1 .elementor-field-type-checkbox .elementor-field-option input:checked + label::before{
  content:'✓';
  background:var(--verde);
  border-color:var(--verde);
}
.elementor-522 .elementor-element.elementor-element-formpelv1 .elementor-field-type-radio .elementor-field-option input:checked + label::before{
  border:6px solid var(--verde);
  background:var(--superficie);
}
/* foco por teclado: sem isso, quem navega por Tab não vê onde está, porque o
   input de verdade está invisível */
.elementor-522 .elementor-element.elementor-element-formpelv1 .elementor-field-subgroup .elementor-field-option:has(input:focus-visible){
  outline:2px solid var(--verde);
  outline-offset:2px;
}

/* Duas colunas quando a pergunta tem muitas opções curtas (classe .m-grid2
   no campo, em Avançado > Classe CSS). "Sintomas" tem 18 opções: em coluna
   única viram ~1000px de rolagem. */
.elementor-522 .elementor-element.elementor-element-formpelv1 .elementor-field-subgroup.m-grid2{
  display:grid; grid-template-columns:1fr 1fr; gap:10px;
}
/* e o contrário: rótulo longo volta para uma coluna mesmo no desktop */
.elementor-522 .elementor-element.elementor-element-formpelv1 .elementor-field-subgroup.m-col1{grid-template-columns:1fr !important}

/* ---------- escala 0 a 10 (radio com 11 opções + classe .m-scale) ---------- */
.elementor-522 .elementor-element.elementor-element-formpelv1 .elementor-field-subgroup.m-scale{
  display:grid; grid-template-columns:repeat(11,1fr); gap:6px;
}
.elementor-522 .elementor-element.elementor-element-formpelv1 .m-scale .elementor-field-option label{
  justify-content:center;
  padding:16px 0;
  font-size:15px; font-weight:600;
}
.elementor-522 .elementor-element.elementor-element-formpelv1 .m-scale .elementor-field-option label::before{display:none}
.elementor-522 .elementor-element.elementor-element-formpelv1 .m-scale__legend{
  display:flex; justify-content:space-between; margin-top:9px;
  font-family:'Plus Jakarta Sans',system-ui,sans-serif;
  font-size:12px; color:var(--tinta-fraca);
}

/* ---------- aceite LGPD (campo "Acceptance") ---------- */
.elementor-522 .elementor-element.elementor-element-formpelv1 .elementor-field-type-acceptance .elementor-field-option{
  display:flex; align-items:flex-start; gap:12px;
  padding:16px 17px;
  background:var(--selecionado);
  border:1px solid var(--borda);
  border-radius:var(--raio);
}
.elementor-522 .elementor-element.elementor-element-formpelv1 .elementor-field-type-acceptance .elementor-field-option input{
  flex:0 0 auto; width:20px; height:20px; margin:1px 0 0;
  accent-color:var(--verde);
}
.elementor-522 .elementor-element.elementor-element-formpelv1 .elementor-field-type-acceptance .elementor-field-option label{
  margin:0;
  font-family:'Plus Jakarta Sans',system-ui,sans-serif;
  font-size:14px; line-height:1.5; font-weight:400; color:var(--tinta);
}
.elementor-522 .elementor-element.elementor-element-formpelv1 .elementor-field-type-acceptance a{color:var(--verde); text-decoration:underline}
/* a pergunta do aceite não é título de tela: volta ao tamanho de rótulo */
.elementor-522 .elementor-element.elementor-element-formpelv1 .elementor-field-type-acceptance > label.elementor-field-label{
  font-size:15px; font-weight:600; margin-bottom:10px;
}

/* ---------- upload de arquivo ---------- */
.elementor-522 .elementor-element.elementor-element-formpelv1 .elementor-field-type-upload .elementor-field{
  width:100%;
  padding:20px 16px;
  min-height:auto;
  background:var(--superficie);
  border:1px dashed rgba(214,187,159,.75);
  border-radius:var(--raio);
  font-family:'Plus Jakarta Sans',system-ui,sans-serif;
  font-size:15px; color:var(--tinta);
  cursor:pointer;
}
.elementor-522 .elementor-element.elementor-element-formpelv1 .elementor-field-type-upload .elementor-field::file-.elementor-522 .elementor-element.elementor-element-formpelv1-button{
  margin-right:14px; padding:10px 15px;
  border:0; border-radius:8px;
  background:var(--verde-suave); color:var(--verde);
  font-family:inherit; font-size:14px; font-weight:600;
  cursor:pointer;
}

/* ============================================================================
   I) DATA — ícone no campo
   ----------------------------------------------------------------------------
   O calendário em si é o flatpickr, estilizado no bloco K (fica fora do
   widget). Aqui só o campo.
============================================================================ */
.elementor-522 .elementor-element.elementor-element-formpelv1 .elementor-date-field{
  padding-right:46px;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none' stroke='%23568672' stroke-width='1.4' stroke-linecap='round'%3E%3Crect x='1.5' y='2.5' width='13' height='12' rx='2'/%3E%3Cpath d='M1.5 6.5h13M5 1v3M11 1v3'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 16px center;
  cursor:pointer;
}
/* mesma ideia no campo de hora */
.elementor-522 .elementor-element.elementor-element-formpelv1 .elementor-field-type-time input.elementor-field{cursor:pointer}

/* ============================================================================
   J) BOTÕES (.e-form__buttons) — o CTA da marca
   ----------------------------------------------------------------------------
   Sticky de propósito: o Elementor Pro injeta a barra DENTRO de cada etapa
   (injectButtonsToSteps → $step.append), ou seja, dentro do bloco que rola.
   Sem sticky, etapa comprida = botão fora da tela. O degradê no fundo repete
   o rodapé do base.css, para o conteúdo "sumir" sob a barra em vez de bater
   numa linha dura.
============================================================================ */
.elementor-522 .elementor-element.elementor-element-formpelv1 .e-form__buttons{
  position:sticky; bottom:0; z-index:5;
  width:100%; flex:0 0 100%;
  display:flex; flex-direction:row; flex-wrap:nowrap; align-items:center; gap:14px;
  margin-top:24px;
  padding:16px 0 calc(16px + env(safe-area-inset-bottom,0px));
  background:linear-gradient(to bottom,rgba(255,245,235,0) 0%,var(--bg) 22%);
}
/* Cada botão vem no seu próprio .elementor-field-group, e grupo de campo do
   Elementor nasce com 100% de largura — era por isso que "Voltar" aparecia
   empilhado ACIMA do "Continuar", um debaixo do outro e centralizados. */
.elementor-522 .elementor-element.elementor-element-formpelv1 .e-form__buttons .e-form__buttons__wrapper,
.elementor-522 .elementor-element.elementor-element-formpelv1 .e-form__buttons .elementor-field-group{
  display:flex; align-items:center; gap:14px;
  flex:0 0 auto; width:auto; max-width:none; margin:0; padding:0;
}
/* o CTA encosta na direita; o "Voltar" fica na esquerda */
.elementor-522 .elementor-element.elementor-element-formpelv1 .e-form__buttons .elementor-field-type-next,
.elementor-522 .elementor-element.elementor-element-formpelv1 .e-form__buttons .elementor-field-type-submit{margin-left:auto}

/* --- botão principal: Próximo e Enviar --- */
/* o CTA da home, repetido 7x lá: menta em degradê radial, texto verde-escuro,
   pílula de 121px e o brilho por fora e por dentro */
.elementor-522 .elementor-element.elementor-element-formpelv1 .e-form__buttons button[type="submit"],
.elementor-522 .elementor-element.elementor-element-formpelv1 .e-form__buttons .elementor-button[type="submit"],
.elementor-522 .elementor-element.elementor-element-formpelv1 .e-form__buttons .e-form__buttons__wrapper__button-next,
.elementor-522 .elementor-element.elementor-element-formpelv1 .e-form__buttons .elementor-button.elementor-action-next{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:56px; padding:0 34px;
  width:auto; min-width:190px;
  border:0; border-radius:121px;
  background:radial-gradient(193.28% 456.21% at 50% 50%,var(--menta-a) 11.52%,var(--menta-b) 100%);
  color:#223934; fill:#223934;
  font-family:'Plus Jakarta Sans',system-ui,sans-serif;
  font-size:16px; font-weight:700; letter-spacing:.01em; line-height:1.5;
  text-transform:none;
  /* o brilho da home é discreto porque lá o botão vive sobre fundo escuro.
     Sobre o creme, o raio de 60px virava um borrão em volta do botão — aqui
     ele encosta mais e perde opacidade. */
  box-shadow:0 10px 24px rgba(99,216,175,.34), 0 -2px 18px rgba(230,255,250,.9) inset;
  cursor:pointer;
  transition:transform .18s ease, box-shadow .18s ease, opacity .18s ease;
}
.elementor-522 .elementor-element.elementor-element-formpelv1 .e-form__buttons button[type="submit"]:hover,
.elementor-522 .elementor-element.elementor-element-formpelv1 .e-form__buttons .elementor-button[type="submit"]:hover,
.elementor-522 .elementor-element.elementor-element-formpelv1 .e-form__buttons .e-form__buttons__wrapper__button-next:hover,
.elementor-522 .elementor-element.elementor-element-formpelv1 .e-form__buttons .elementor-button.elementor-action-next:hover{
  transform:translateY(-1px);
  background:radial-gradient(193.28% 456.21% at 50% 50%,var(--menta-a) 11.52%,var(--menta-b) 100%);
  color:#223934;
  box-shadow:0 14px 30px rgba(99,216,175,.42), 0 -2px 18px rgba(230,255,250,.9) inset;
}
.elementor-522 .elementor-element.elementor-element-formpelv1 .e-form__buttons button[disabled],
.elementor-522 .elementor-element.elementor-element-formpelv1 .e-form__buttons .elementor-button[disabled]{opacity:.45; cursor:not-allowed}

/* --- botão "Anterior": discreto, para não competir com o CTA --- */
.elementor-522 .elementor-element.elementor-element-formpelv1 .e-form__buttons .e-form__buttons__wrapper__button-previous,
.elementor-522 .elementor-element.elementor-element-formpelv1 .e-form__buttons .elementor-button.elementor-action-previous{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:56px; padding:0 8px;
  border:0; border-radius:121px;
  background:transparent;
  box-shadow:none;
  color:var(--tinta-fraca); fill:var(--tinta-fraca);
  font-family:'Plus Jakarta Sans',system-ui,sans-serif;
  font-size:15px; font-weight:500; letter-spacing:0;
  text-transform:none;
  cursor:pointer;
  transition:color .18s ease;
}
.elementor-522 .elementor-element.elementor-element-formpelv1 .e-form__buttons .e-form__buttons__wrapper__button-previous:hover,
.elementor-522 .elementor-element.elementor-element-formpelv1 .e-form__buttons .elementor-button.elementor-action-previous:hover{
  background:transparent;
  color:var(--verde); fill:var(--verde);
}
/* Ordem: "Anterior" à esquerda, CTA à direita, colado na margem.
   O Elementor imprime Anterior antes de Próximo, então basta empurrar. */
.elementor-522 .elementor-element.elementor-element-formpelv1 .e-form__buttons .e-form__buttons__wrapper__button-next,
.elementor-522 .elementor-element.elementor-element-formpelv1 .e-form__buttons .elementor-button.elementor-action-next,
.elementor-522 .elementor-element.elementor-element-formpelv1 .e-form__buttons button[type="submit"],
.elementor-522 .elementor-element.elementor-element-formpelv1 .e-form__buttons .elementor-button[type="submit"]{margin-left:auto}

/* o spinner do envio herda a cor do texto do botão, que aqui é escuro */
.elementor-522 .elementor-element.elementor-element-formpelv1 .e-form__buttons .elementor-button .elementor-button-icon svg,
.elementor-522 .elementor-element.elementor-element-formpelv1 .e-form__buttons .elementor-button .eicon-spinner{color:#223934; fill:#223934}

/* ============================================================================
   K) CALENDÁRIO (flatpickr, o que o Elementor carrega na data)
   ----------------------------------------------------------------------------
   Só existe com "Native HTML5" DESLIGADO no campo. O calendário nativo do
   navegador não aceita CSS — este sim.
   VAI SEM `.elementor-522 .elementor-element.elementor-element-formpelv1` de propósito: o flatpickr é anexado ao <body>, fora do
   widget, então uma regra com `.elementor-522 .elementor-element.elementor-element-formpelv1` nunca o alcançaria. Por isso também
   as cores vêm por extenso: as variáveis da marca moram em `.elementor-522 .elementor-element.elementor-element-formpelv1`, e aqui
   fora não há de onde herdar.
   No celular o próprio flatpickr entrega o seletor nativo do aparelho — que
   para data de nascimento é o melhor (no iPhone vira roletas).
============================================================================ */
.flatpickr-calendar{
  font-family:'Plus Jakarta Sans',system-ui,sans-serif;
  background:#FFFFFF;
  border:1px solid rgba(132,121,111,.23);
  border-radius:18px;
  padding:6px;
  /* sombra tingida de verde-escuro, nunca preta — é o padrão de elevação
     da marca (o popup da home usa rgba(15,30,26,.55)) */
  box-shadow:0 22px 46px -18px rgba(15,30,26,.35);
}
.flatpickr-calendar.arrowTop:before,
.flatpickr-calendar.arrowTop:after{border-bottom-color:#FFFFFF}
.flatpickr-calendar.arrowBottom:before,
.flatpickr-calendar.arrowBottom:after{border-top-color:#FFFFFF}

/* cabeçalho mês/ano */
.flatpickr-months{padding-top:4px}
.flatpickr-months .flatpickr-month{
  height:46px;
  color:#223934; fill:#223934;
  background:transparent;
}
.flatpickr-current-month{
  font-size:16px; font-weight:600; padding-top:10px;
  color:#223934;
}
.flatpickr-current-month .flatpickr-monthDropdown-months,
.flatpickr-current-month input.cur-year{
  font-family:inherit; font-weight:600; color:#223934;
  border-radius:8px;
}
.flatpickr-current-month .flatpickr-monthDropdown-months:hover,
.flatpickr-current-month .numInputWrapper:hover{background:#EDF2EF}
.flatpickr-monthDropdown-month{background:#FFFFFF; color:#223934}
.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month{
  padding:12px; color:#568672; fill:#568672;
}
.flatpickr-months .flatpickr-prev-month:hover svg,
.flatpickr-months .flatpickr-next-month:hover svg{fill:#223934}

/* linha dos dias da semana */
.flatpickr-weekdays{background:transparent}
span.flatpickr-weekday{
  background:transparent;
  color:rgba(34,57,52,.58);
  font-size:11px; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase;
}

/* os dias */
.flatpickr-day{
  color:#223934;
  border-radius:9px;
  font-weight:500;
}
.flatpickr-day:hover,
.flatpickr-day:focus{background:#EDF2EF; border-color:#EDF2EF}
.flatpickr-day.today{border-color:rgba(86,134,114,.45)}
.flatpickr-day.today:hover{background:#EDF2EF; color:#223934}
.flatpickr-day.selected,
.flatpickr-day.selected:hover,
.flatpickr-day.selected:focus,
.flatpickr-day.startRange,
.flatpickr-day.endRange{
  background:#568672; border-color:#568672; color:#FFFFFF; font-weight:700;
}
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay{color:rgba(34,57,52,.3)}
.flatpickr-day.flatpickr-disabled,
.flatpickr-day.flatpickr-disabled:hover{
  color:rgba(34,57,52,.18); background:transparent; border-color:transparent;
}
/* o campo de hora, quando o calendário traz relógio */
.flatpickr-time input,
.flatpickr-time .flatpickr-am-pm{color:#223934; font-family:inherit; font-weight:600}
.flatpickr-time input:hover,
.flatpickr-time .flatpickr-am-pm:hover{background:#EDF2EF}

/* ============================================================================
   L) MENSAGENS E ERROS
   ----------------------------------------------------------------------------
   O Elementor imprime o erro de campo como .elementor-message-danger dentro do
   grupo, e a mensagem final de envio depois do form. As duas famílias entram
   aqui para não sobrar nenhuma caixinha cinza do tema.
============================================================================ */
.elementor-522 .elementor-element.elementor-element-formpelv1 .elementor-message{
  margin:12px 0 0;
  padding:12px 14px;
  border-radius:10px;
  background:var(--verde-suave);
  border:1px solid rgba(86,134,114,.3);
  font-family:'Plus Jakarta Sans',system-ui,sans-serif;
  font-size:14px; line-height:1.45; color:var(--tinta);
}
.elementor-522 .elementor-element.elementor-element-formpelv1 .elementor-message.elementor-message-success{
  background:var(--selecionado);
  border-color:var(--bege);
  color:var(--tinta);
}
.elementor-522 .elementor-element.elementor-element-formpelv1 .elementor-message.elementor-message-danger{
  background:var(--erro-suave);
  border-color:rgba(143,15,27,.3);
  color:var(--erro);
}
/* erro colado no campo: sem caixa, só o texto vermelho — a caixa já está na
   borda do campo, e duas molduras vermelhas viram alarme */
.elementor-522 .elementor-element.elementor-element-formpelv1 .elementor-field-group .elementor-message.elementor-help-inline,
.elementor-522 .elementor-element.elementor-element-formpelv1 .elementor-field-group .elementor-form-help-inline{
  display:block;
  margin:8px 0 0; padding:0;
  background:transparent; border:0;
  font-size:13px; color:var(--erro);
}
.elementor-522 .elementor-element.elementor-element-formpelv1 .elementor-field-group.elementor-error .elementor-field-textual,
.elementor-522 .elementor-element.elementor-element-formpelv1 .elementor-field-group.elementor-error select.elementor-field,
.elementor-522 .elementor-element.elementor-element-formpelv1 .elementor-field-group.elementor-error textarea.elementor-field{
  border-color:var(--erro);
}
/* a mensagem de envio precisa ficar visível mesmo com os botões sticky por
   cima — daí o z-index e a posição relativa */
.elementor-522 .elementor-element.elementor-element-formpelv1 .elementor-form > .elementor-message,
.elementor-522 .elementor-element.elementor-element-formpelv1 .elementor-form .elementor-message-group{
  position:relative; z-index:6;
  margin:14px auto 0;
  max-width:var(--coluna);
  text-align:center;
}

/* ============================================================================
   M) CELULAR
   ----------------------------------------------------------------------------
   Coluna única em tudo, botões em largura cheia e — a regra que mais importa —
   16px mínimo nos campos: abaixo disso o iOS dá zoom ao focar e a pessoa perde
   o enquadramento da tela.
============================================================================ */
@media (max-width:767px){
  .elementor-522 .elementor-element.elementor-element-formpelv1 .elementor-form{font-size:16px}
  .elementor-522 .elementor-element.elementor-element-formpelv1 .e-form__step{padding:22px 0 8px}

  /* no celular todo campo ocupa a linha inteira — menos os grupos que seguram
     os botões: com 100% de largura, o grupo do "Voltar" tomava a linha toda e
     empurrava o "Continuar" para fora da tela */
  .elementor-522 .elementor-element.elementor-element-formpelv1 .elementor-field-group:not(.e-form__buttons__wrapper):not(.e-form__buttons){
    width:100% !important; margin-bottom:22px;
  }
  .elementor-522 .elementor-element.elementor-element-formpelv1 .e-form__buttons .e-form__buttons__wrapper{width:auto !important}
  .elementor-522 .elementor-element.elementor-element-formpelv1 .e-form__buttons .elementor-field-type-previous{flex:0 0 auto}

  .elementor-522 .elementor-element.elementor-element-formpelv1 .elementor-field-textual,
  .elementor-522 .elementor-element.elementor-element-formpelv1 input.elementor-field,
  .elementor-522 .elementor-element.elementor-element-formpelv1 select.elementor-field,
  .elementor-522 .elementor-element.elementor-element-formpelv1 textarea.elementor-field{font-size:16px}

  /* opções sempre em coluna única, inclusive as marcadas como .m-grid2 */
  .elementor-522 .elementor-element.elementor-element-formpelv1 .elementor-field-type-radio .elementor-field-subgroup,
  .elementor-522 .elementor-element.elementor-element-formpelv1 .elementor-field-type-checkbox .elementor-field-subgroup,
  .elementor-522 .elementor-element.elementor-element-formpelv1 .elementor-field-subgroup.m-grid2{
    grid-template-columns:1fr;
    display:flex; flex-direction:column; gap:10px;
  }
  .elementor-522 .elementor-element.elementor-element-formpelv1 .elementor-field-subgroup .elementor-field-option label{
    padding:14px 15px; font-size:16px;
  }

  /* a escala 0–10 em 11 colunas fica ilegível num celular: 6 por linha */
  .elementor-522 .elementor-element.elementor-element-formpelv1 .elementor-field-subgroup.m-scale{
    display:grid; grid-template-columns:repeat(6,1fr); gap:5px;
  }
  .elementor-522 .elementor-element.elementor-element-formpelv1 .m-scale .elementor-field-option label{padding:14px 0; font-size:15px}

  /* o CTA ocupa o que sobra; "Anterior" fica do tamanho do texto.
     No celular o CTA tinha largura mínima de 190px e ainda ganhava
     margin-left:auto — somando os dois, ele passava da borda da tela e
     aparecia cortado. Aqui a margem sai e o grupo do botão pode encolher. */
  .elementor-522 .elementor-element.elementor-element-formpelv1 .e-form__buttons{gap:10px; width:100%; max-width:100%}
  .elementor-522 .elementor-element.elementor-element-formpelv1 .e-form__buttons .e-form__buttons__wrapper,
  .elementor-522 .elementor-element.elementor-element-formpelv1 .e-form__buttons .elementor-field-group{min-width:0; gap:10px}
  .elementor-522 .elementor-element.elementor-element-formpelv1 .e-form__buttons .elementor-field-type-next,
  .elementor-522 .elementor-element.elementor-element-formpelv1 .e-form__buttons .elementor-field-type-submit{
    flex:1 1 auto; margin-left:0;
  }
  .elementor-522 .elementor-element.elementor-element-formpelv1 .e-form__buttons .e-form__buttons__wrapper__button-next,
  .elementor-522 .elementor-element.elementor-element-formpelv1 .e-form__buttons .elementor-button.elementor-action-next,
  .elementor-522 .elementor-element.elementor-element-formpelv1 .e-form__buttons button[type="submit"],
  .elementor-522 .elementor-element.elementor-element-formpelv1 .e-form__buttons .elementor-button[type="submit"]{
    flex:1 1 auto; width:100%; min-width:0; padding:0 20px;
  }
  .elementor-522 .elementor-element.elementor-element-formpelv1 .e-form__buttons .e-form__buttons__wrapper__button-previous,
  .elementor-522 .elementor-element.elementor-element-formpelv1 .e-form__buttons .elementor-button.elementor-action-previous{
    flex:0 0 auto; padding:0 6px; min-width:0;
  }

  /* o número de fundo encolhe: na largura do celular ele cobria a ajuda */
  .elementor-522 .elementor-element.elementor-element-formpelv1 .m-fantasma{font-size:72px; top:20px; color:rgba(214,187,159,.22)}
  .elementor-522 .elementor-element.elementor-element-formpelv1 .m-ajuda{position:relative; z-index:1}
}

/* ============================================================================
   N) MOVIMENTO REDUZIDO
   ----------------------------------------------------------------------------
   Quem pediu menos animação no sistema não leva transição nenhuma — inclusive
   a da barra de progresso, que é a mais visível do formulário.
============================================================================ */
@media (prefers-reduced-motion:reduce){
  .elementor-522 .elementor-element.elementor-element-formpelv1 .elementor-field-textual,
  .elementor-522 .elementor-element.elementor-element-formpelv1 input.elementor-field,
  .elementor-522 .elementor-element.elementor-element-formpelv1 select.elementor-field,
  .elementor-522 .elementor-element.elementor-element-formpelv1 textarea.elementor-field,
  .elementor-522 .elementor-element.elementor-element-formpelv1 .elementor-field-subgroup .elementor-field-option,
  .elementor-522 .elementor-element.elementor-element-formpelv1 .e-form__buttons .elementor-button,
  .elementor-522 .elementor-element.elementor-element-formpelv1 .e-form__buttons button,
  .elementor-522 .elementor-element.elementor-element-formpelv1 .e-form__indicators__indicator__progress__meter,
  .elementor-522 .elementor-element.elementor-element-formpelv1 .e-form__indicators__indicator--progress_bar [class*="meter"]{
    transition:none !important;
  }
  .elementor-522 .elementor-element.elementor-element-formpelv1 .e-form__buttons .elementor-button:hover,
  .elementor-522 .elementor-element.elementor-element-formpelv1 .e-form__buttons button:hover{transform:none}
  .elementor-522 .elementor-element.elementor-element-formpelv1 .elementor-field-subgroup .elementor-field-option:active{transform:none}
}/* End custom CSS */