/* ==========================================================================
   formulario.css — página de contato em etapas. Mesmo alicerce das páginas
   de produto (styles.css + produto.css); aqui só o que é do formulário.
   ========================================================================== */

/* o .shell sobe 56px por cima do topo: sem esta margem o subtítulo fica
   embaixo do cartão branco — renderiza, mas ninguém vê */
.ph-topo--form{ padding-bottom:64px }
.ph-topo--form .ph-topo__copy{ align-items:center; text-align:center }
.ph-topo--form .ph-topo__titulo{ max-width:18ch }
/* balance: evita a última linha com uma palavra só */
.ph-topo--form .ph-topo__lede{ max-width:46ch; text-wrap:balance }

/* uma coluna, centrada: a página é só o formulário */
.fgrid{ max-width:552px; margin:0 auto }
/* o formulário precisa aparecer sem rolagem: menos respiro que uma seção comum */
#form{ padding-top:52px }

/* --- o cartão do formulário --------------------------------------------- */
.fcard{
  background:var(--white); border:1px solid var(--line-soft); border-radius:28px;
  padding:34px 36px 32px;
  box-shadow:0 28px 56px -34px rgba(20,20,20,.4);
}
.fprog{ display:flex; align-items:center; gap:14px; margin-bottom:26px }
.fprog__n{ flex:none; font-size:10.5px; font-weight:800; letter-spacing:.09em; text-transform:uppercase; color:var(--muted-soft) }
.fprog__b{ flex:1; height:5px; border-radius:999px; background:var(--stone); overflow:hidden }
.fprog__b i{ display:block; height:100%; width:33.33%; border-radius:999px; background:var(--ink);
  transition:width .45s var(--ease) }

.fetapa{ display:none }
.fetapa.is-on{ display:block; animation:fentra .35s var(--ease) both }
@keyframes fentra{ from{ opacity:0; transform:translateY(8px) } to{ opacity:1; transform:none } }
.fetapa__t{ margin:0 0 5px; font-size:21px; font-weight:800; letter-spacing:-.03em }
.fetapa__d{ margin:0 0 22px; font-size:13.5px; font-weight:500; color:var(--muted) }

.fcampo{ margin-bottom:15px }
.fcampo__l{ display:block; margin-bottom:7px; font-size:12px; font-weight:700; letter-spacing:-.01em }
.fcampo__l span{ color:var(--muted-soft); font-weight:600 }
.fcampo input, .fcampo select{
  width:100%; padding:13px 15px; border-radius:12px;
  border:1px solid rgba(20,20,20,.12); background:var(--paper);
  font-family:inherit; font-size:14px; font-weight:600; color:var(--ink);
  transition:border-color .2s var(--ease), background .2s var(--ease);
}
.fcampo select{ appearance:none; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M4 6l4 4 4-4' stroke='%236e6e6e' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 15px center; padding-right:38px }
.fcampo input:focus, .fcampo select:focus{ outline:none; border-color:var(--ink); background:var(--white) }
.fcampo input::placeholder{ color:var(--muted-soft); font-weight:500 }
.fcampo.tem-erro input, .fcampo.tem-erro select{ border-color:#c0392b; background:rgba(192,57,43,.04) }
.fcampo__e{ display:none; margin:6px 0 0; font-size:11.5px; font-weight:600; color:#c0392b }
.fcampo.tem-erro .fcampo__e{ display:block }
.fdupla{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px }

/* opções em cartão: alvo grande, sem parecer formulário de banco */
.fopcoes{ display:grid; gap:9px }
.fopc{
  display:flex; align-items:flex-start; gap:12px; cursor:pointer;
  padding:14px 16px; border-radius:14px;
  border:1px solid rgba(20,20,20,.12); background:var(--paper);
  transition:border-color .2s var(--ease), background .2s var(--ease);
}
.fopc:hover{ border-color:rgba(20,20,20,.28) }
.fopc input{ position:absolute; opacity:0; pointer-events:none }
.fopc__m{
  flex:none; margin-top:1px; width:18px; height:18px; border-radius:999px;
  border:1.5px solid rgba(20,20,20,.25); background:var(--white);
  display:grid; place-items:center;
}
.fopc__m::after{ content:''; width:8px; height:8px; border-radius:999px; background:var(--ink); transform:scale(0);
  transition:transform .2s var(--ease) }
.fopc__t{ display:block; font-size:14px; font-weight:700; letter-spacing:-.015em }
.fopc__d{ display:block; margin-top:2px; font-size:12.5px; font-weight:500; color:var(--muted); line-height:1.45 }
.fopc.is-on{ border-color:var(--ink); background:var(--white) }
.fopc.is-on .fopc__m{ border-color:var(--ink) }
.fopc.is-on .fopc__m::after{ transform:scale(1) }
.fopcoes.tem-erro .fopc{ border-color:#c0392b }

.fnav{ display:flex; align-items:center; gap:10px; margin-top:26px }
.fnav .btn{ cursor:pointer; font-family:inherit }
.fvoltar{
  background:none; border:0; padding:10px 4px; cursor:pointer;
  font-family:inherit; font-size:13px; font-weight:700; color:var(--muted);
}
.fvoltar:hover{ color:var(--ink) }

/* --- fim: confirmação ---------------------------------------------------- */
.fpronto{ display:none; text-align:center; padding:14px 0 6px }
.fpronto.is-on{ display:block; animation:fentra .4s var(--ease) both }
.fpronto__ico{
  width:56px; height:56px; margin:0 auto 18px; border-radius:18px;
  background:var(--lime); display:grid; place-items:center;
}
.fpronto__t{ margin:0 0 8px; font-size:22px; font-weight:800; letter-spacing:-.03em }
.fpronto__d{ margin:0 auto; max-width:38ch; font-size:14px; font-weight:500; line-height:1.6; color:var(--muted) }

@media (max-width:1000px){
  .fgrid{ grid-template-columns:minmax(0,1fr); gap:36px }
  .fcard{ padding:28px 24px }
  .fdupla{ grid-template-columns:minmax(0,1fr) }
}

/* a pergunta seguinte colava no último cartão de opção */
.fopcoes + .fcampo{ margin-top:20px }

/* --- página de obrigado: o mesmo cartão, só com a confirmação ------------ */
.fcard--obg{ text-align:center; padding:44px 36px 40px }
.fcard--obg .fpronto__ico{ margin:0 auto 20px }
.fcard--obg .btn{ margin-top:22px }