/* =====================================================================
   Hormones Mentoring ELITE — página de aplicação
   Herda tokens, paletas e botões do site.css. Aqui só o que é do
   formulário: o palco, a barra de progresso, os campos e os passos.
   ===================================================================== */

.pg-form{min-height:100vh;display:flex;flex-direction:column;background:var(--bg)}

/* [hidden] é atributo do HTML, mas o display:none dele vem da folha do
   NAVEGADOR — e qualquer regra de autor que declare display ganha. O .btn
   é inline-block, então sem esta linha os botões "escondidos" continuavam
   na tela: era por isso que Voltar e Enviar apareciam no primeiro passo. */
.pg-form [hidden]{display:none !important}

/* ---------- arte de fundo: sangra na direita e dissolve ---------- */
.fm-arte{
  position:fixed;right:0;top:0;bottom:0;width:46vw;z-index:0;pointer-events:none;
}
.fm-arte img{
  width:100%;height:100%;object-fit:cover;object-position:center right;
  /* dissolve na esquerda e nas duas pontas: a arte encosta na borda da
     tela sem desenhar aresta contra o fundo da página */
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 55%),
                     linear-gradient(180deg,transparent 0,#000 12%,#000 84%,transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 55%),
                     linear-gradient(180deg,transparent 0,#000 12%,#000 84%,transparent 100%);
  -webkit-mask-composite:source-in;mask-composite:intersect;
  opacity:.5;
}
/* véu quente por cima, pra arte nunca competir com a leitura */
.fm-arte::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,var(--bg) 0,transparent 70%);
}

/* ---------- palco ---------- */
.fm-wrap{
  position:relative;z-index:2;
  width:100%;max-width:860px;margin:0 auto;flex:1;
  padding:clamp(28px,5vh,64px) var(--gutter) var(--sp-5);
}

.fm-topo{text-align:center;margin-bottom:var(--sp-5)}
.fm-logo{width:min(300px,64vw);height:auto;margin:0 auto var(--sp-4);
  filter:drop-shadow(0 10px 30px rgba(0,0,0,.6))
         drop-shadow(0 0 26px color-mix(in srgb,var(--glow) 35%,transparent))}
.fm-topo h1{
  font-size:var(--step-2);letter-spacing:.02em;text-transform:uppercase;
  color:var(--accent-hi);
  text-shadow:0 0 18px color-mix(in srgb,var(--glow) 45%,transparent);
}
.fm-sub{margin-top:10px;color:var(--fg-dim);font-size:var(--step--1)}

/* ---------- a caixa ---------- */
.fm-caixa{
  position:relative;border-radius:5px;
  padding:clamp(24px,3.2vw,40px);
  background:linear-gradient(158deg,
    rgba(255,255,255,.055),rgba(255,255,255,.015) 46%,
    color-mix(in srgb,var(--neon) 5%,transparent));
  -webkit-backdrop-filter:blur(16px) saturate(120%);
          backdrop-filter:blur(16px) saturate(120%);
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb,var(--neon) 34%,transparent),
    inset 0 1px 0 rgba(255,255,255,.1),
    0 46px 90px -58px #000,
    0 22px 60px -50px var(--glow);
}

/* ---------- barra de progresso ---------- */
.fm-barra{
  position:relative;height:26px;border-radius:999px;margin-bottom:var(--sp-4);
  background:color-mix(in srgb,var(--bg) 70%,#000);
  box-shadow:inset 0 0 0 1px var(--line);
  overflow:hidden;
}
.fm-barra i{
  position:absolute;left:0;top:0;bottom:0;width:10%;border-radius:999px;
  background:linear-gradient(90deg,#A97C1F,#F6D77B 60%,#FFE7AE);
  box-shadow:0 0 18px -4px var(--glow);
  transition:width .5s var(--ease);
  /* min-width garante que "10%" caiba dentro do preenchimento no começo */
  display:flex;align-items:center;justify-content:flex-end;
  padding-right:11px;min-width:58px;
}
/* escuro sobre o ouro: é o único par com contraste nessa barra */
.fm-pct{
  font-family:'Sora',sans-serif;font-size:11px;font-weight:700;letter-spacing:.1em;
  color:#1A1301;
}

/* ---------- passos ---------- */
/* o site.css dá padding e fundo a toda <section>; aqui elas são só blocos */
.passo{
  display:none;padding:0;background:none;isolation:auto;
  animation:passoEntra .45s var(--ease);
}
.passo.is-ativo{display:block}
@keyframes passoEntra{
  from{opacity:0;transform:translateY(10px)}
  to{opacity:1;transform:none}
}
.passo-saida{text-align:center}

/* ---------- campos ---------- */
.fm-campo{display:block;border:0;padding:0;margin:0 0 var(--sp-3)}
.fm-campo:last-child{margin-bottom:0}
.fm-rot{
  display:block;font-family:'Sora',sans-serif;font-weight:500;
  font-size:var(--step--1);line-height:1.5;color:var(--fg);margin-bottom:10px;
}
.fm-ajuda{display:block;font-size:var(--step--2);color:var(--fg-dim);margin:-4px 0 10px;line-height:1.6}

.fm-caixa input[type="text"],
.fm-caixa input[type="email"],
.fm-caixa input[type="tel"],
.fm-caixa textarea{
  width:100%;font:inherit;font-size:var(--step--1);color:var(--fg);
  background:color-mix(in srgb,var(--bg) 78%,#000);
  border:1px solid var(--line);border-radius:3px;
  padding:14px 16px;min-height:52px;
  transition:border-color .3s var(--ease),box-shadow .3s var(--ease),background .3s var(--ease);
}
.fm-caixa textarea{resize:vertical;line-height:1.6;min-height:120px}
.fm-caixa input:focus,.fm-caixa textarea:focus{
  outline:0;border-color:var(--accent);
  box-shadow:0 0 0 1px var(--accent),0 0 26px -12px var(--glow);
  background:color-mix(in srgb,var(--bg) 66%,#000);
}
.fm-caixa ::placeholder{color:color-mix(in srgb,var(--fg-dim) 65%,transparent)}
/* campo apontado como faltando */
.fm-caixa .is-falta input,.fm-caixa .is-falta textarea,
.fm-caixa input.is-falta,.fm-caixa textarea.is-falta{
  border-color:#E0733C;box-shadow:0 0 0 1px rgba(224,115,60,.5);
}

/* ---------- opções (rádio) ---------- */
.fm-opcoes{display:grid;gap:8px}
.fm-opcoes-linha{grid-auto-flow:column;grid-auto-columns:1fr;gap:12px}
.fm-op{
  display:flex;align-items:center;gap:12px;cursor:pointer;
  padding:14px 16px;border-radius:3px;min-height:52px;
  font-size:var(--step--1);color:var(--fg-dim);
  background:color-mix(in srgb,var(--bg) 72%,#000);
  box-shadow:inset 0 0 0 1px var(--line);
  transition:color .3s var(--ease),box-shadow .3s var(--ease),background .3s var(--ease);
}
.fm-op:hover{color:var(--fg);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--neon) 50%,transparent)}
.fm-op input{
  appearance:none;-webkit-appearance:none;margin:0;flex:0 0 18px;
  width:18px;height:18px;border-radius:50%;
  box-shadow:inset 0 0 0 1px var(--accent);
  transition:box-shadow .25s var(--ease),background .25s var(--ease);
}
.fm-op input:checked{
  background:radial-gradient(circle,#FFE7AE 0 38%,transparent 42%);
  box-shadow:inset 0 0 0 1px var(--accent-hi),0 0 14px -3px var(--glow);
}
.fm-op:has(input:checked){
  color:var(--fg);background:color-mix(in srgb,var(--neon) 9%,transparent);
  box-shadow:inset 0 0 0 1px var(--accent),0 0 24px -14px var(--glow);
}
.fm-op input:focus-visible{outline:2px solid var(--neon);outline-offset:3px}
@media(max-width:520px){
  .fm-opcoes-linha{grid-auto-flow:row;grid-auto-columns:auto}
}

/* ---------- aceite ---------- */
.fm-aceite{
  display:flex;gap:12px;align-items:flex-start;cursor:pointer;
  margin-top:var(--sp-3);font-size:var(--step--2);color:var(--fg-dim);line-height:1.6;
}
.fm-aceite input{
  appearance:none;-webkit-appearance:none;margin:2px 0 0;flex:0 0 18px;
  width:18px;height:18px;border-radius:3px;cursor:pointer;
  box-shadow:inset 0 0 0 1px var(--accent);
  transition:box-shadow .25s var(--ease),background .25s var(--ease);
}
.fm-aceite input:checked{
  background:var(--accent);box-shadow:inset 0 0 0 1px var(--accent-hi),0 0 14px -4px var(--glow);
}
.fm-aceite input:checked::after{
  content:"";position:absolute;width:9px;height:4px;margin:5px 0 0 4px;
  border-left:1.5px solid #1A1301;border-bottom:1.5px solid #1A1301;
  transform:rotate(-45deg);
}
.fm-aceite input{position:relative}
.fm-aceite.is-falta{color:#E0733C}

/* ---------- textos dentro dos passos ---------- */
.fm-h2{font-size:var(--step-2);margin-bottom:var(--sp-3);color:var(--fg)}
.fm-texto{font-size:var(--step-0);color:var(--fg-dim);line-height:1.7;margin-bottom:var(--sp-3)}
.fm-texto b{color:var(--accent-hi);font-weight:600}
.fm-citacao{
  margin-top:var(--sp-3);font-style:italic;text-align:center;
  font-size:var(--step--1);color:var(--accent);
}
.center{text-align:center}

/* ---------- os 7 ganhos ---------- */
.fm-ganhos{counter-reset:g;margin:0 0 var(--sp-5);display:grid;gap:2px}
.fm-ganhos li{
  list-style:none;position:relative;counter-increment:g;
  padding:16px 0 16px 54px;border-top:1px solid var(--line);
}
.fm-ganhos li:last-child{border-bottom:1px solid var(--line)}
.fm-ganhos li::before{
  content:counter(g);
  position:absolute;left:0;top:16px;
  width:32px;height:32px;border-radius:50%;
  display:grid;place-items:center;
  font-family:'Sora',sans-serif;font-size:13px;font-weight:700;color:#1A1301;
  background:linear-gradient(135deg,#A97C1F,#F6D77B 55%,#C1922A);
  box-shadow:0 0 16px -6px var(--glow);
}
.fm-ganhos b{
  display:block;font-family:'Sora',sans-serif;font-weight:600;
  font-size:var(--step--1);color:var(--fg);margin-bottom:4px;
}
.fm-ganhos p{font-size:var(--step--1);color:var(--fg-dim);line-height:1.62}

/* ---------- telas de saída ---------- */
.fm-logo-ess{width:min(300px,72%);height:auto;margin:0 auto var(--sp-4)}
.fm-btn-ess{margin-top:var(--sp-3)}
.passo-saida .fm-texto{margin-left:auto;margin-right:auto;max-width:46ch}
.passo-saida .fm-ajuda{max-width:44ch;margin-left:auto;margin-right:auto}
.fm-ok{
  width:64px;height:64px;border-radius:50%;margin:0 auto var(--sp-3);
  box-shadow:inset 0 0 0 1px var(--accent),0 0 30px -10px var(--glow);
  position:relative;
}
.fm-ok::after{
  content:"";position:absolute;left:50%;top:48%;width:22px;height:11px;
  transform:translate(-50%,-50%) rotate(-45deg);
  border-left:2px solid var(--accent-hi);border-bottom:2px solid var(--accent-hi);
}

/* ---------- erro ---------- */
.fm-erro{
  margin-top:var(--sp-3);padding:12px 16px;border-radius:3px;
  font-size:var(--step--2);color:#FFD9C4;
  background:rgba(224,115,60,.12);box-shadow:inset 0 0 0 1px rgba(224,115,60,.45);
}

/* ---------- ações ---------- */
.fm-acoes{display:flex;gap:12px;margin-top:var(--sp-4)}
.fm-acoes .btn{flex:1;padding:16px 24px}
.fm-acoes[hidden]{display:none}

/* ---------- rodapé ---------- */
.fm-pe{
  position:relative;z-index:2;text-align:center;padding:var(--sp-4) var(--gutter);
  color:var(--fg-dim);font-size:11px;line-height:1.7;
}

/* ---------- mobile ---------- */
@media(max-width:860px){
  /* a arte sai: no celular ela roubava a tela do formulário */
  .fm-arte{display:none}
  .fm-topo h1{font-size:var(--step-1)}
  .fm-logo{width:min(230px,58vw);margin-bottom:var(--sp-3)}
  .fm-ganhos li{padding-left:46px}
  .fm-ganhos li::before{width:28px;height:28px;font-size:12px}
}

/* ---------- movimento reduzido ---------- */
@media (prefers-reduced-motion: reduce){
  .passo{animation:none}
  .fm-barra i{transition:none}
}