/* ============================================================
   Metta step form (site novo). Visual layer ported from the designer's
   package (formulario-metta.css, .fp-* block + .fp-cartao + .se-btn).
   ============================================================ */

/* ---------- base: reset scoped to the card (zero specificity) ---------- */
:where(.fp-cartao),
:where(.fp-cartao) *{ box-sizing:border-box; margin:0; padding:0; }
:where(.fp-cartao) :where(button){ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
:where(.fp-cartao) :where(input, select, textarea){ font:inherit; color:inherit; }
:where(.fp-cartao) :where(a){ text-decoration:none; color:inherit; }
:where(.fp-cartao) :where(img, svg){ display:block; max-width:100%; }
:where(.fp-cartao) :where(fieldset){ border:0; }
.fp-cartao{ font-family:var(--texto); color:var(--ink);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; }

/* ---------- tokens ---------- */
:root{
  --amarelo: #ffbe18;
  --apoio: #435965;
  --branco: #ffffff;
  --display: 'Zalando Sans Expanded', 'Zalando Sans', 'Inter', system-ui, sans-serif;
  --ease: cubic-bezier(0, 0, .58, 1);
  --ink: #0c161b;
  --muted: #738f9e;
  --nevoa: #e6ecef;
  --painel: #283845;
  --suave: cubic-bezier(.22, .9, .28, 1);
  --texto: 'Inter', system-ui, -apple-system, sans-serif;
}

/* ---------- step form (.fp-*) ---------- */
.fp-cabeca{ display:flex; align-items:center; gap:16px; }
.fp-passo{ flex:none; font-size:13px; font-weight:500; line-height:1.2; color:#92a5af; }
.fp-passo b{ color:var(--ink); font-weight:600; }
.fp-barra{ flex:1; min-width:0; height:4px; border-radius:2px; background:#e5edf3; overflow:hidden; }
.fp-barra i{ display:block; height:100%; width:0; border-radius:2px; background:var(--amarelo);
  transition:width .38s cubic-bezier(.22,.61,.36,1); }
/* fixed-height stage: the card never resizes between steps; overflow scrolls inside */
.fp-palco{ position:relative; height:var(--fp-palco-alt, 520px);
  overflow-y:auto; overscroll-behavior:contain;
  scrollbar-width:thin; scrollbar-gutter:stable; }
.fp-palco::-webkit-scrollbar{ width:6px; }
.fp-palco::-webkit-scrollbar-thumb{ background:#cfdbe2; border-radius:3px; }
.fp-palco::-webkit-scrollbar-track{ background:transparent; }
.fp-etapa{ position:absolute; top:0; left:0; width:100%;
  border:0; padding:0; margin:0; min-width:0;
  display:flex; flex-direction:column; gap:20px;
  opacity:0; visibility:hidden; transform:translateY(10px);
  height:0; overflow:hidden;
  transition:opacity .22s var(--ease), transform .3s var(--suave), visibility .22s; }
/* only the active step (or one still fading out) takes part in the stage's scroll height;
   every other step is height:0/overflow:hidden so it never causes a phantom scrollbar */
.fp-etapa.esta-ativa,
.fp-etapa.esta-saindo{ height:auto; overflow:visible; }
.fp-etapa.esta-ativa{ opacity:1; visibility:visible; transform:none; }
.fp-titulo{ display:flex; flex-direction:column; gap:8px; }
.fp-apoio{ font-size:15px; line-height:1.45; color:#6c828d; }
.fp-pergunta{ font-family:var(--display); font-weight:600; font-size:24px; line-height:1.2; color:var(--ink); }
.fp-desc{ font-size:14px; line-height:1.4; color:#92a5af; }
.fp-corpo{ display:flex; flex-direction:column; gap:24px; }
.fp-opcoes{ display:flex; flex-direction:column; gap:8px; }
.fp-opcao{ display:flex; align-items:center; gap:12px;
  min-height:var(--fp-campo-alt, 45px); padding:12px 16px;
  border-radius:var(--fp-campo-raio, 10px);
  background:var(--fp-campo-fundo, #f2f5f6);
  border:1px solid var(--fp-campo-linha, #e5edf3);
  color:var(--ink);
  font-family:var(--texto); font-size:var(--fp-campo-fonte, 15px); line-height:1.2;
  cursor:pointer; user-select:none;
  transition:border-color .18s var(--ease), background-color .18s var(--ease); }
.fp-opcao:hover{ border-color:#9fb4c0; }
.fp-opcao input{ position:absolute; width:1px; height:1px; opacity:0; }
.fp-marca{ flex:none; width:18px; height:18px; border-radius:50%;
  border:1px solid #c3d2da; background:var(--branco);
  transition:border-color .18s var(--ease), box-shadow .18s var(--ease), background-color .18s var(--ease); }
.fp-opcao.esta-marcada{ border-color:var(--amarelo); background:rgba(255,190,24,.12); }
.fp-opcao.esta-marcada .fp-marca{ border-color:var(--amarelo); background:var(--amarelo);
  box-shadow:inset 0 0 0 3px var(--branco); }
.fp-opcao:focus-within{ outline:2px solid var(--amarelo); outline-offset:2px; }
.fp-erro{ font-size:13px; line-height:1.4; color:#c2453c; }
.fp-pe{ display:flex; align-items:center; gap:10px; }
.fp-pe > .se-btn{ flex:1; width:auto; }
.fp-pe > [hidden]{ display:none; }
.fp-voltar{ flex:none; padding:16px 22px; border-radius:100px;
  background:var(--branco); border:1px solid #e5edf3; color:#6c828d;
  font-family:var(--texto); font-weight:500; font-size:15px; line-height:1.2;
  cursor:pointer;
  transition:border-color .2s var(--ease), color .2s var(--ease); }
.fp-voltar:hover{ border-color:#9fb4c0; color:var(--ink); }
.fp-fim[hidden]{ display:none; }
.fp-fim{ display:flex; flex-direction:column; align-items:center; gap:14px; text-align:center; }
.fp-fim-marca{ display:flex; align-items:center; justify-content:center;
  width:56px; height:56px; border-radius:50%; background:var(--amarelo); }
.fp-fim-marca svg{ width:26px; height:26px; }
.fp-fim h3{ font-family:var(--display); font-weight:600; font-size:24px; line-height:1.2; color:var(--ink); }
.fp-fim p{ font-size:15px; line-height:1.5; color:#6c828d; }
@media (max-width:767px){
  .fp-pergunta{ font-size:18px; }
}

/* ---------- white card ---------- */
.fp-cartao{ width:100%; margin:0;
  background:var(--branco); border-radius:32px; overflow:hidden;
  box-shadow:0 71px 57px rgba(67,89,101,.1);
  display:flex; flex-direction:column; gap:24px; padding-bottom:40px;
  text-align:left;
  --fp-campo-fundo:#f2f5f6;
  --fp-campo-linha:#e5edf3;
  --fp-campo-raio:10px;
  --fp-campo-alt:45px;
  --fp-campo-fonte:15px;
  --fp-palco-alt:535px; }
.fp-cartao-filtro{ background:var(--ink); color:#daf2ff;
  padding:14px 24px; text-align:center;
  font-size:15px; font-weight:700; line-height:1.5; text-transform:uppercase; }
.fp-cartao-corpo[hidden]{ display:none; }
.fp-cartao-corpo{ display:flex; flex-direction:column; gap:24px; padding:0 40px; }
.fp-cartao .fp-fim{ padding:16px 40px 0; }
.fp-cartao-nota{ font-size:13px; line-height:1.45; color:#92a5af; text-align:center; }
.fp-cartao .se-btn{ width:100%; padding:16px; justify-content:center; }
.fp-campo{ display:flex; flex-direction:column; gap:8px; }
.fp-campo > span,
.fp-campo > label{ font-size:14px; font-weight:500; line-height:1.2; color:#6c828d; }
.fp-campo input{ height:var(--fp-campo-alt, 45px); padding:13px 16px;
  border-radius:var(--fp-campo-raio, 10px);
  background:var(--fp-campo-fundo, #f2f5f6);
  border:1px solid var(--fp-campo-linha, #e5edf3);
  color:var(--ink); font-family:var(--texto);
  font-size:var(--fp-campo-fonte, 15px); line-height:1;
  transition:border-color .2s var(--ease), box-shadow .2s var(--ease); }
.fp-campo input::placeholder{ color:#92a5af; }
.fp-campo input:focus{ outline:none; border-color:#9fb4c0; box-shadow:0 0 0 2px rgba(255,190,24,.35); }
@media (max-width:767px){
  .fp-cartao-corpo{ padding:0 16px; }
  .fp-cartao .fp-fim{ padding:16px 16px 0; }
  .fp-cartao-filtro{ font-size:14px; padding:14px 19px; }
}

/* ---------- primary button ---------- */
.se-btn{ display:inline-flex; align-items:center; justify-content:center;
  background:var(--amarelo); color:var(--ink);
  font-family:var(--texto); font-weight:500; font-size:15px; line-height:1.2;
  padding:16px 28px; border-radius:100px; white-space:nowrap;
  transition:transform .22s var(--ease), box-shadow .22s var(--ease), background-color .22s var(--ease); }
.se-btn:hover{ background:#ffc93f; transform:translateY(-2px); box-shadow:0 10px 24px rgba(255,190,24,.28); }
.se-form{ --fp-palco-alt:455px; }

/* sending state: spinner replaces the label, button locked */
.se-btn .fp-sp{ display:none; width:18px; height:18px; border-radius:50%;
  border:2px solid rgba(12,22,27,.2); border-top-color:var(--ink);
  animation:fp-gira .6s linear infinite; }
.se-btn.esta-enviando .fp-rotulo{ display:none; }
.se-btn.esta-enviando .fp-sp{ display:block; }
.se-btn[disabled]{ cursor:default; }
.se-btn[disabled]:hover{ background:var(--amarelo); transform:none; box-shadow:none; }
@keyframes fp-gira{ to{ transform:rotate(360deg); } }

/* ---------- e-mail domain suggestion (secondary text style) ---------- */
.fp-dica{ display:none; font-size:14px; line-height:1.4; color:#92a5af; }
.fp-dica.visible{ display:block; }
.fp-dica a{ color:var(--ink); text-decoration:underline; cursor:pointer; }

/* ---------- intl-tel-input v29.2.3: light theme on the .fp-campo field ---------- */
#whatsappWrap{
  --iti-border-width: 1px;
  --iti-hover-color: rgba(12,22,27,.04);
  --iti-border-color: #e5edf3;
  --iti-country-selector-bg: #ffffff;
  --iti-icon-color: #92a5af;
  --iti-spacer-horizontal: 10px;
}
#whatsappWrap .iti{ display:block; width:100%; }
#whatsappWrap input{ width:100%; }
#whatsappWrap .iti__country-container{ background:transparent; }
#whatsappWrap .iti__selected-country{ background:transparent; border:none; box-shadow:none; cursor:pointer;
  border-radius:9px 0 0 9px; font-family:var(--texto); }
#whatsappWrap .iti__selected-country-primary{ padding:0 8px 0 16px; border-radius:9px 0 0 9px; }
#whatsappWrap .iti__selected-dial-code{ font-size:15px; color:var(--ink); font-family:var(--texto); margin-left:8px; white-space:nowrap; }
#whatsappWrap .iti__arrow{ margin-left:8px; }
/* country list: detached into <body> (dropdown on desktop, fullscreen popup on narrow screens) */
.iti--detached-country-selector{
  --iti-border-width: 1px;
  --iti-hover-color: #f2f5f6;
  --iti-border-color: #e5edf3;
  --iti-country-selector-bg: #ffffff;
  --iti-icon-color: #92a5af;
  --iti-spacer-horizontal: 12px;
  font-family:'Inter', system-ui, -apple-system, sans-serif; font-size:14px; color:#0c161b;
  -webkit-font-smoothing:antialiased;
}
body .iti--detached-country-selector .iti__country-selector{ border-radius:10px; overflow:hidden;
  box-shadow:0 12px 32px rgba(12,22,27,.12); }
body .iti--detached-country-selector .iti__search-input{ font-family:inherit; font-size:14px; color:#0c161b; background:#ffffff; outline:none; }
body .iti--detached-country-selector .iti__search-input::placeholder{ color:#92a5af; }
body .iti--detached-country-selector .iti__country-name{ color:#0c161b; }
body .iti--detached-country-selector .iti__dial-code{ color:#92a5af; }
body .iti--detached-country-selector .iti__country.iti__highlight{ background:#f2f5f6; }
body .iti--detached-country-selector .iti__no-results{ color:#92a5af; }
body .iti--detached-country-selector.iti--fullscreen-popup{ background-color:rgba(12,22,27,.55); }

/* 22/09: o bloco "page stage" que existia aqui (html{...}/body{...}/
   .palco{...}) era só o cenário da página isolada do designer pra
   pré-visualizar o formulário sozinho -- .palco nem existe no HTML de
   verdade (não usamos essa div ao integrar). O body{background:#eef3f5}
   ficava acima do body{background:var(--branco)} do site (styles.css
   carrega antes deste arquivo via extra_css), pintando a página inteira
   de cinza claro sem eu perceber -- causa do bug que o Renan reportou
   ("fundo da primeira seção virou cinza"). Removido. */