/* ============================================================
   Metta "Contato" step form (site novo). Visual layer ported from the
   designer's package (formulario-metta.css: base, tokens, .btn,
   .form-card/.campo, .ct-* and the shared .fp-* block).
   ============================================================ */

/* ---------- base: reset scoped to the card (zero specificity) ---------- */
:where(.ct-cartao),
:where(.ct-cartao) *{ box-sizing:border-box; margin:0; padding:0; }
:where(.ct-cartao) :where(button){ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
:where(.ct-cartao) :where(input, select, textarea){ font:inherit; color:inherit; }
:where(.ct-cartao) :where(a){ text-decoration:none; color:inherit; }
:where(.ct-cartao) :where(img, svg){ display:block; max-width:100%; }
:where(.ct-cartao) :where(fieldset){ border:0; }
.ct-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;
}

/* ---------- buttons ---------- */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--texto); font-weight:500; font-size:14px; line-height:1.2;
  padding:16px; border-radius:100px; white-space:nowrap;
  transition:transform .22s var(--ease), background-color .22s var(--ease),
             color .22s var(--ease), box-shadow .22s var(--ease); }
.btn--escuro{ background:var(--ink); color:var(--branco); }
.btn--escuro:hover{ background:#1b2a33; transform:translateY(-2px); box-shadow:0 10px 24px rgba(12,22,27,.22); }
.btn:active{ transform:translateY(0); }

/* ---------- form card + fields (styles.css) ---------- */
.form-card{ background:var(--nevoa); border-radius:24px; padding:40px;
  display:flex; flex-direction:column; gap:24px; }
.form-card h2{ font-family:var(--display); font-weight:600; font-size:28px; line-height:1.2; color:var(--ink); }
.campo{ display:flex; flex-direction:column; gap:8px; }
.campo > span,
.campo > label{ font-size:14px; font-weight:600; color:var(--ink); }
.campo input,
.campo textarea{ font-family:var(--texto); font-size:14px; color:var(--ink);
  background:var(--branco); border:0; border-radius:8px; padding:13px 12px;
  width:100%; outline:none;
  transition:box-shadow .22s var(--ease); }
.campo textarea{ min-height:100px; resize:vertical; }
.campo input::placeholder,
.campo textarea::placeholder{ color:var(--muted); }
.campo input:focus,
.campo textarea:focus{ box-shadow:0 0 0 2px var(--apoio); }
.form-card .btn{ width:100%; padding:16px 32px; font-size:16px; font-weight:600; }
@media (max-width:1023px){
  .form-card{ padding:28px; }
}
@media (max-width:767px){
  .form-card{ padding:22px; }
}

/* ---------- contact card (v2.css) ---------- */
.ct-cartao{ background:var(--branco); border-radius:24px; padding:40px;
  display:flex; flex-direction:column; gap:24px;
  box-shadow:0 34px 15.6px rgba(95,115,126,.1);
  --fp-campo-fundo:var(--branco);
  --fp-campo-linha:#d8d8d8;
  --fp-campo-raio:8px;
  --fp-campo-alt:44px;
  --fp-campo-fonte:14px;
  --fp-palco-alt:500px; }
.ct-cartao-corpo[hidden]{ display:none; }
.ct-cartao-corpo{ display:flex; flex-direction:column; gap:24px; }
.ct-cartao .campo input,
.ct-cartao .campo textarea{ border:1px solid #d8d8d8; border-radius:8px; padding:12px; }
.ct-cartao .campo input{ height:44px; }
.ct-cartao .campo textarea{ height:100px; min-height:100px; }
.ct-cartao .btn--escuro{ height:51px; padding:0 32px; border-radius:100px;
  font-size:16px; font-weight:600; }
.ct-canal{ border:1px solid #d7d7d7; border-radius:16px; padding:22px 24px;
  display:flex; flex-direction:column; align-items:flex-start; gap:10px; }
.ct-canal h3{ font-family:var(--display); font-weight:500; font-size:17px; line-height:1.24; color:var(--ink); }
.ct-canal p{ font-size:15px; line-height:1.5; color:#435965; }
.ct-canal .btn{ height:41px; padding:0 22px; border-radius:100px; font-size:14px; font-weight:500; }
.ct-nota{ font-size:13px; line-height:1.4; color:var(--muted); }
.ct-cartao .btn--escuro[disabled]{ opacity:.35; pointer-events:none; }
@media (max-width:767px){
  .ct-cartao{ padding:24px 16px; }
}

/* ---------- 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 > .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; }
}

/* sending state: spinner replaces the label, button locked (kept fully opaque
   so the spinner is visible over the designer's .35 disabled opacity) */
.btn--escuro .fp-sp{ display:none; width:18px; height:18px; border-radius:50%;
  border:2px solid rgba(255,255,255,.3); border-top-color:var(--branco);
  animation:fp-gira .6s linear infinite; }
.btn--escuro.esta-enviando .fp-rotulo{ display:none; }
.btn--escuro.esta-enviando .fp-sp{ display:block; }
.ct-cartao .btn--escuro.esta-enviando[disabled]{ opacity:1; cursor:default; }
@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: Contato field tokens (white, #d8d8d8, radius 8, 44px, 14px) ---------- */
#ctTelefoneWrap{
  --iti-border-width: 1px;
  --iti-hover-color: rgba(12,22,27,.04);
  --iti-border-color: #d8d8d8;
  --iti-country-selector-bg: #ffffff;
  --iti-icon-color: #738f9e;
  --iti-spacer-horizontal: 10px;
}
#ctTelefoneWrap .iti{ display:block; width:100%; }
#ctTelefoneWrap input{ width:100%; }
#ctTelefoneWrap .iti__country-container{ background:transparent; }
#ctTelefoneWrap .iti__selected-country{ background:transparent; border:none; box-shadow:none; cursor:pointer;
  border-radius:7px 0 0 7px; font-family:var(--texto); }
#ctTelefoneWrap .iti__selected-country-primary{ padding:0 8px 0 12px; border-radius:7px 0 0 7px; }
#ctTelefoneWrap .iti__selected-dial-code{ font-size:14px; color:var(--ink); font-family:var(--texto); margin-left:8px; white-space:nowrap; }
#ctTelefoneWrap .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: #d8d8d8;
  --iti-country-selector-bg: #ffffff;
  --iti-icon-color: #738f9e;
  --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:8px; 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:#738f9e; }
body .iti--detached-country-selector .iti__country-name{ color:#0c161b; }
body .iti--detached-country-selector .iti__dial-code{ color:#738f9e; }
body .iti--detached-country-selector .iti__country.iti__highlight{ background:#f2f5f6; }
body .iti--detached-country-selector .iti__no-results{ color:#738f9e; }
body .iti--detached-country-selector.iti--fullscreen-popup{ background-color:rgba(12,22,27,.55); }

/* 22/09: removido o bloco "page stage" (html{...}/body{...}/.palco{...})
   -- era só o cenário da página isolada do designer, .palco nem existe
   no HTML de verdade. Aqui o valor (#ffffff) até coincidia com o
   body{background:var(--branco)} do site, então não dava pra ver o bug
   nesta página -- mas é o mesmo problema que apareceu em Sessão/
   Consultoria/Mentoria (ver form-fp-novo.css e form-consultoria-novo.css),
   removido por consistência. */