/* Formulários próprios (atacado/, embaixador/, feedback/).
   Base (fontes, céu, faixa, cores) vem de css/links.css. */

.fm-wrap { max-width: 640px; }

/* ---------- topo ---------- */
.fm-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 26px;
  animation: lk-rise .8s var(--z-ease) backwards;
}
.fm-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 15px 9px 11px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .18);
  color: #fff;
  font-size: 14px;
  text-decoration: none;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: background-color .3s, transform .35s var(--z-spring);
}
.fm-back:hover { background: rgba(255, 255, 255, .3); transform: translateX(-3px); }
.fm-back svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.fm-top .lk-logo img { width: 96px; }

.fm-hero { position: relative; padding-right: 96px; }
.fm-hero > * { animation: lk-rise .9s var(--z-ease) backwards; }
.fm-hero > :nth-child(2) { animation-delay: .08s; }
.fm-hero > :nth-child(3) { animation-delay: .16s; }
.fm-hero .lk-tag { background: #fff; color: var(--z-pink); }
.fm-hero .lk-h1 { margin: 4px 0 14px; font-size: 42px; }
.fm-hero .lk-h1 span { white-space: normal; }
.fm-intro { margin: 0; max-width: 470px; font-size: 16px; font-weight: 400; line-height: 1.5; text-shadow: 0 1px 12px rgba(0, 77, 100, .35); }
.fm-intro b { font-weight: 500; }
.fm-mascote {
  position: absolute;
  top: -6px;
  right: -8px;
  width: 112px;
  filter: drop-shadow(0 12px 18px rgba(0, 50, 70, .3));
  transform-origin: 50% 100%;
  animation: lk-dance 2.6s ease-in-out infinite !important;
}

/* vantagens / passos em "adesivos" */
.fm-perks {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
}
.fm-perks li {
  padding: 16px 14px 14px;
  border-radius: 20px;
  background: rgba(0, 125, 180, .38);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.35;
  animation: lk-slap .8s calc(.3s + var(--i, 0) * .08s) var(--z-spring) backwards;
}
.fm-perks li:nth-child(2) { --i: 1; }
.fm-perks li:nth-child(3) { --i: 2; }
.fm-perks strong { display: block; margin-bottom: 4px; font-family: Roketto, Arial, sans-serif; font-size: 18px; font-weight: 400; line-height: 1.05; }
.fm-perks i {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  margin-bottom: 10px;
  border-radius: 50%;
  background: var(--z-pink);
  font: 400 15px/1 Roketto, Arial, sans-serif;
  font-style: normal;
}

.fm-steps { margin-top: 10px; }
.fm-steps li { background: rgba(0, 77, 100, .45); }
.fm-steps i { background: #fff; color: var(--z-pink); }

/* ---------- cartão do formulário ---------- */
.fm-card {
  position: relative;
  display: flow-root; /* a margem negativa do mascote do "obrigado" não puxa o cartão pra cima */
  margin-top: 30px;
  padding: 0 22px 26px;
  border-radius: 32px;
  background: #fff;
  color: var(--z-teal);
  box-shadow: 0 var(--lk-press) 0 var(--z-teal), 0 26px 50px rgba(0, 50, 70, .25);
  animation: lk-slap .9s .4s var(--z-spring) backwards;
}

/* barra de progresso grudada no topo do cartão */
.fm-progress {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 -22px 6px;
  padding: 16px 22px 14px;
  border-radius: 32px 32px 0 0;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.fm-progress__bar { flex: 1; height: 10px; border-radius: 999px; background: rgba(0, 175, 234, .14); overflow: hidden; }
.fm-progress__bar span {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background: var(--z-lime);
  transform-origin: 0 50%;
  transform: scaleX(var(--p, 0));
  transition: transform .6s var(--z-spring);
}
.fm-progress__txt { min-width: 44px; font-size: 13px; text-align: right; font-variant-numeric: tabular-nums; }

.fm-sec { margin: 0; padding: 22px 0 10px; border: 0; }
.fm-sec + .fm-sec { border-top: 2px dashed rgba(0, 175, 234, .2); }
/* legend flutuando para não "cortar" a linha tracejada do fieldset */
.fm-sec__head { float: left; display: flex; align-items: center; gap: 12px; width: 100%; margin-bottom: 16px; padding: 0; }
.fm-sec__head + * { clear: both; }
.fm-sec__head i {
  display: grid;
  place-items: center;
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--z-pink);
  color: #fff;
  font: 400 17px/1 Roketto, Arial, sans-serif;
  font-style: normal;
  box-shadow: 0 4px 0 var(--z-teal);
}
.fm-sec__head strong { font-family: Roketto, Arial, sans-serif; font-size: 22px; font-weight: 400; line-height: 1.05; }
.fm-sec__head small { font: 400 13px Gotham, Arial, sans-serif; opacity: .6; }

.fm-grid { display: grid; grid-template-columns: 1fr; gap: 14px; }

/* ---------- campos ---------- */
.fm-field { position: relative; display: block; min-width: 0; margin: 0; padding: 0; border: 0; }
.fm-label { display: block; margin-bottom: 7px; padding: 0; font-size: 14px; line-height: 1.3; }
.fm-label b { color: var(--z-pink); font-weight: 500; }
.fm-label small { display: block; margin-top: 2px; font-size: 12px; font-weight: 400; opacity: .7; }
.fm-input {
  width: 100%;
  height: 54px;
  padding: 0 46px 0 18px;
  border: 2px solid rgba(0, 175, 234, .25);
  border-radius: 18px;
  background: #f5fbfe;
  color: var(--z-teal);
  font: 500 16px Gotham, Arial, sans-serif; /* 16px evita zoom no iPhone */
  outline: 0;
  appearance: none;
  -webkit-appearance: none;
  transition: border-color .25s, box-shadow .25s, background-color .25s;
}
select.fm-input {
  padding-right: 44px;
  background: #f5fbfe url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%23004d64' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right 16px center / 18px no-repeat;
  cursor: pointer;
}
.fm-field:has(select)::after { right: 42px; }
textarea.fm-input { height: 132px; padding: 15px 18px; line-height: 1.45; resize: vertical; }
.fm-input::placeholder { color: rgba(0, 77, 100, .38); }
.fm-input:hover { border-color: rgba(0, 175, 234, .5); }
.fm-input:focus { border-color: var(--z-blue); background-color: #fff; box-shadow: 0 0 0 5px rgba(0, 175, 234, .15); }
.fm-field.is-ok .fm-input { border-color: #3bdb8b; }
.fm-field.is-bad .fm-input { border-color: var(--z-pink); background-color: #fff6f9; }
.fm-field.is-bad .fm-input:focus { box-shadow: 0 0 0 5px rgba(231, 68, 119, .15); }

/* check verde quando o campo está certo */
.fm-field::after {
  content: "";
  position: absolute;
  right: 16px;
  bottom: 17px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #3bdb8b url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat;
  transform: scale(0);
  transition: transform .4s var(--z-spring);
  pointer-events: none;
}
.fm-field.is-ok::after { transform: scale(1); }
.fm-field.has-msg::after { bottom: 39px; }
.fm-field.fm-choices::after, .fm-field.fm-rate::after, .fm-field.fm-area::after { display: none; }

.fm-msg { display: block; min-height: 0; font-size: 12.5px; line-height: 1.3; }
.fm-field.is-bad .fm-msg { margin-top: 6px; color: var(--z-pink); }
.fm-field.has-hint .fm-msg { margin-top: 6px; color: #1f9e63; }
.fm-field.is-bad { animation: fm-shake .4s; }
@keyframes fm-shake { 25% { translate: -6px 0; } 50% { translate: 5px 0; } 75% { translate: -3px 0; } }

/* opções em pílula */
.fm-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.fm-chip { position: relative; cursor: pointer; }
.fm-chip input { position: absolute; opacity: 0; pointer-events: none; }
.fm-chip span {
  display: inline-block;
  padding: 12px 16px 11px;
  border: 2px solid rgba(0, 175, 234, .25);
  border-radius: 999px;
  background: #f5fbfe;
  font-size: 14px;
  transition: background-color .25s, border-color .25s, color .25s, transform .35s var(--z-spring);
}
.fm-chip:hover span { border-color: var(--z-blue); }
.fm-chip input:checked + span { border-color: var(--z-pink); background: var(--z-pink); color: #fff; transform: scale(1.05); }
.fm-chip input:focus-visible + span { box-shadow: 0 0 0 4px rgba(0, 175, 234, .3); }

/* nota de 1 a 5 com o "Z" da marca (ordem invertida para o ~ pintar os anteriores) */
.fm-zs { display: inline-flex; flex-direction: row-reverse; gap: 6px; }
.fm-zs input { position: absolute; opacity: 0; pointer-events: none; }
.fm-zs label {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 16px;
  background: #f5fbfe;
  border: 2px solid rgba(0, 175, 234, .2);
  cursor: pointer;
  transition: transform .35s var(--z-spring), background-color .2s, border-color .2s;
}
.fm-zs label img { width: 30px; filter: grayscale(1) opacity(.3); transition: filter .2s, transform .35s var(--z-spring); }
.fm-zs label:hover,
.fm-zs label:hover ~ label,
.fm-zs input:checked ~ label { background: #fff0f5; border-color: rgba(231, 68, 119, .4); }
.fm-zs label:hover img,
.fm-zs label:hover ~ label img,
.fm-zs input:checked ~ label img { filter: none; }
.fm-zs input:checked + label { transform: scale(1.1) rotate(-6deg); }
.fm-zs input:focus-visible + label { box-shadow: 0 0 0 4px rgba(0, 175, 234, .3); }
.fm-rate__txt { display: block; margin-top: 8px; font-size: 12.5px; opacity: .7; }

/* armadilha de robô */
.fm-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- enviar ---------- */
.fm-submit {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  margin-top: 26px;
  padding: 19px 24px 18px;
  border: 0;
  border-radius: 999px;
  background: var(--z-lime);
  color: var(--z-teal);
  font: italic 700 17px/1 Gotham, Arial, sans-serif;
  text-transform: uppercase;
  cursor: pointer;
  overflow: hidden;
  box-shadow: 0 6px 0 var(--z-teal);
  transition: transform .35s var(--z-spring), box-shadow .2s;
}
.fm-submit::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .75) 50%, transparent 65%);
  transform: translateX(-120%);
  animation: lk-shine 3.4s 1s ease-in-out infinite;
}
.fm-submit:hover { transform: translateY(-3px); box-shadow: 0 9px 0 var(--z-teal); }
.fm-submit:active { transform: translateY(4px); box-shadow: 0 2px 0 var(--z-teal); }
.fm-submit svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.8; stroke-linecap: round; stroke-linejoin: round; transition: transform .4s var(--z-spring); }
.fm-submit:hover svg { transform: translateX(5px); }
.fm-submit.is-loading { pointer-events: none; }
.fm-submit.is-loading span, .fm-submit.is-loading svg { opacity: 0; }
.fm-submit.is-loading::before {
  content: "";
  position: absolute;
  width: 24px;
  height: 24px;
  border: 3px solid rgba(0, 77, 100, .25);
  border-top-color: var(--z-teal);
  border-radius: 50%;
  animation: lk-spin .7s linear infinite;
}
.fm-legal { margin: 14px 0 0; font-size: 12px; font-weight: 400; line-height: 1.45; text-align: center; opacity: .65; }
.fm-error { display: none; margin: 14px 0 0; padding: 12px 16px; border-radius: 14px; background: #fff0f5; color: var(--z-pink); font-size: 14px; text-align: center; }
.fm-error.is-on { display: block; }

/* ---------- "CNPJ não identificado: enviar assim ou corrigir?" ---------- */
.fm-ask {
  width: min(400px, calc(100vw - 32px));
  padding: 46px 26px 24px;
  border: 0;
  border-radius: 30px;
  background: #fff;
  color: var(--z-teal);
  text-align: center;
  overflow: visible;
  box-shadow: 0 var(--lk-press) 0 var(--z-teal), 0 30px 60px rgba(0, 50, 70, .35);
}
.fm-ask[open] { animation: lk-slap .6s var(--z-spring); }
.fm-ask::backdrop { background: rgba(0, 50, 70, .45); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.fm-ask__img { position: absolute; top: -66px; left: 50%; width: 72px; margin-left: -36px; animation: lk-wobble 2.4s ease-in-out infinite; }
.fm-ask__title { margin: 0 0 10px; font: 400 26px/1.05 Roketto, Arial, sans-serif; }
.fm-ask__txt { margin: 0; font: 400 15px/1.5 Gotham, Arial, sans-serif; }
.fm-ask__txt b { font-weight: 500; color: var(--z-pink); white-space: nowrap; }
.fm-ask__bts { display: flex; gap: 10px; margin-top: 22px; }
.fm-ask__bts button {
  flex: 1;
  padding: 15px 12px 14px;
  border: 2px solid var(--z-teal);
  border-radius: 999px;
  background: #fff;
  color: var(--z-teal);
  font: italic 700 14px/1 Gotham, Arial, sans-serif;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform .35s var(--z-spring);
}
.fm-ask__bts button:hover { transform: translateY(-2px); }
.fm-ask__bts .fm-ask__fix { background: var(--z-lime); border-color: transparent; box-shadow: 0 4px 0 var(--z-teal); }

/* ---------- tela de obrigado ---------- */
.fm-done { display: none; padding: 0 6px 12px; text-align: center; }
.fm-card.is-done { margin-top: 100px; }
.fm-card.is-done .fm-form,
.fm-card.is-done .fm-progress { display: none; }
.fm-card.is-done .fm-done { display: block; }
.fm-done__mascote { width: 150px; margin: -84px auto 8px; animation: fm-jump 1s var(--z-spring) both, lk-dance 2s 1s ease-in-out infinite; transform-origin: 50% 100%; }
.fm-done h2 { margin: 0 0 10px; font-family: Roketto, Arial, sans-serif; font-size: 46px; font-weight: 400; line-height: 1; animation: lk-rise .7s .2s var(--z-ease) backwards; }
.fm-done p { max-width: 380px; margin: 0 auto; font-size: 16px; font-weight: 400; line-height: 1.5; animation: lk-rise .7s .3s var(--z-ease) backwards; }
.fm-done__bts { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 24px; animation: lk-rise .7s .4s var(--z-ease) backwards; }
.fm-done__bts a {
  padding: 14px 20px 13px;
  border-radius: 999px;
  background: var(--z-teal);
  color: #fff;
  font-size: 14px;
  text-decoration: none;
  transition: transform .35s var(--z-spring), background-color .3s;
}
.fm-done__bts a:first-child { background: var(--z-pink); }
.fm-done__bts a:hover { transform: translateY(-3px); }
.fm-urgent {
  display: flex;
  align-items: center;
  gap: 14px;
  max-width: 340px;
  margin: 22px auto 0;
  padding: 14px 20px 13px 16px;
  border-radius: 22px;
  background: #e9fbf1;
  color: var(--z-teal);
  text-align: left;
  text-decoration: none;
  box-shadow: inset 0 0 0 2px #3bdb8b;
  animation: lk-rise .7s .35s var(--z-ease) backwards;
  transition: transform .35s var(--z-spring), background-color .3s;
}
.fm-urgent:hover { transform: translateY(-3px); background: #d8f8e6; }
.fm-urgent svg { flex: none; width: 34px; height: 34px; fill: #1fbf6a; }
.fm-urgent span { font-size: 14px; line-height: 1.3; }
.fm-urgent strong { display: block; font: 400 19px/1.1 Roketto, Arial, sans-serif; }
@keyframes fm-jump { from { opacity: 0; transform: translateY(80px) scale(.6); } }


/* ---------- telas maiores ---------- */
@media (min-width: 640px) {
  .fm-hero { padding-right: 150px; }
  .fm-hero .lk-h1 { font-size: 56px; }
  .fm-mascote { width: 150px; top: -20px; }
  .fm-perks li { padding: 18px; font-size: 14px; }
  .fm-card { padding: 0 34px 34px; }
  .fm-progress { margin: 0 -34px 8px; padding: 18px 34px 16px; }
  .fm-grid { grid-template-columns: 1fr 1fr; gap: 16px; }
  .fm-grid > .is-wide { grid-column: 1 / -1; }
  .fm-sec__head strong { font-size: 26px; }
}
@media (max-width: 480px) {
  .fm-perks { grid-template-columns: 1fr; }
  .fm-perks li { display: grid; grid-template-columns: 30px 1fr; column-gap: 12px; align-items: start; }
  .fm-perks li i { grid-row: span 2; margin: 0; }
}
@media (max-width: 370px) {
  .fm-hero .lk-h1 { font-size: 36px; }
  .fm-zs label { width: 46px; height: 46px; }
}

@media (prefers-reduced-motion: reduce) {
  .fm-top, .fm-hero > *, .fm-perks li, .fm-card, .fm-submit::after, .fm-done__mascote, .fm-done h2, .fm-done p, .fm-done__bts { animation: none !important; }
}