@charset "utf-8";

/* ============================================================
   Formulário de duas etapas: o único canal de contato do site.
   ============================================================ */

#formulario{background:var(--paper-2); border-top:1px solid var(--line-soft)}

.lf{display:grid; gap:clamp(2rem,5vw,5.5rem); grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); align-items:start}
.lf__head{position:sticky; top:clamp(6rem,12vh,8rem)}
.lf__head .sec__title{max-width:11ch}
@media (max-width:900px){
  .lf{grid-template-columns:1fr}
  .lf__head{position:static}
  .lf__head .sec__title{max-width:none}
}

.lf__passo[hidden]{display:none}
.lf__passo{animation:lf-entra .6s var(--ease) both}
@keyframes lf-entra{from{opacity:0; transform:translateY(14px)} to{opacity:1; transform:none}}
.lf__passo:focus{outline:none}

/* ---------- etapa 1: mesma gramática da lista de serviços ---------- */
.lf__opcoes{border-top:1px solid var(--line)}
.lf__opcao{
  width:100%; display:grid; grid-template-columns:3.25rem minmax(0,1fr) auto; align-items:baseline; gap:1rem;
  padding:clamp(1.05rem,2vw,1.4rem) 0; background:none; border:0; border-bottom:1px solid var(--line);
  text-align:left; cursor:pointer; position:relative; color:var(--ink);
}
.lf__opcao::before{
  content:''; position:absolute; left:0; bottom:-1px; width:100%; height:1px;
  background:var(--bronze); transform:scaleX(0); transform-origin:left;
  transition:transform .7s var(--ease);
}
.lf__opcao:hover::before,.lf__opcao:focus-visible::before{transform:scaleX(1)}
.lf__n{font-family:var(--serif); font-weight:400; font-size:1.05rem; color:var(--bronze-deep)}
.lf__txt{font-family:var(--serif); font-weight:300; font-size:clamp(1.14rem,1.55vw,1.4rem); line-height:1.3; letter-spacing:-.005em}
.lf__opcao .arw{align-self:center; color:var(--muted); transition:transform .45s var(--ease), color .45s var(--ease)}
.lf__opcao:hover .arw,.lf__opcao:focus-visible .arw{transform:translateX(4px); color:var(--bronze-deep)}
@media (max-width:560px){ .lf__opcao{grid-template-columns:2.4rem minmax(0,1fr) auto} }

/* ---------- bloqueio ---------- */
.lf__bloqueio{display:grid; gap:1.6rem; justify-items:start; padding-top:1.4rem; border-top:1px solid var(--line)}
.lf__aviso{font-family:var(--serif); font-weight:300; font-size:clamp(1.14rem,1.55vw,1.36rem); line-height:1.5; max-width:46ch}
.lf__email{overflow-wrap:anywhere}
.lf__voltar{
  background:none; border:0; padding:.25rem 0; cursor:pointer; font-family:var(--sans);
  font-size:.82rem; font-weight:600; letter-spacing:.05em; color:var(--muted);
  border-bottom:1px solid var(--line); transition:color .35s var(--ease), border-color .35s var(--ease);
}
.lf__voltar:hover{color:var(--bronze-deep); border-color:var(--bronze)}

/* ---------- etapa 2 ---------- */
.lf__escolha{
  display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:.5rem 1.25rem;
  padding-bottom:1.1rem; border-bottom:1px solid var(--line);
  font-family:var(--serif); font-weight:300; font-size:clamp(1.08rem,1.4vw,1.25rem); line-height:1.35;
}

.form{display:grid; gap:clamp(1.35rem,2.5vw,1.85rem)}
.form__row{display:grid; gap:inherit; grid-template-columns:1fr 1fr}
.field{position:relative; display:grid; gap:.55rem; min-width:0}
.field > label,.lf__grupo legend{font-size:.9rem; font-weight:600; letter-spacing:.01em; color:var(--ink-2)}
.field input,.field textarea{
  width:100%; padding:.7rem 0 .8rem; background:none; border:0;
  border-bottom:1px solid var(--line); border-radius:0; font-size:1.02rem;
  transition:border-color .4s var(--ease);
}
.field textarea{resize:vertical; min-height:104px; line-height:1.6}
.field input:focus,.field textarea:focus{outline:none; border-color:var(--bronze)}
.field input::placeholder,.field textarea::placeholder{color:rgba(115,106,94,.6)}
.field[data-invalid] input,.field[data-invalid] textarea{border-color:#a4372a}
.field__err{font-size:.78rem; color:#a4372a; display:none}
.field[data-invalid] .field__err{display:block}

/* perguntas de múltipla escolha: rádio de verdade por baixo, pílula por cima */
.lf__grupo{border:0; margin:0; padding:0}
.lf__grupo legend{padding:0; margin-bottom:.8rem}
.lf__chips{display:flex; flex-wrap:wrap; gap:.55rem}
.lf__chips label{position:relative; cursor:pointer}
.lf__chips input{position:absolute; inset:0; opacity:0; margin:0; cursor:pointer}
.lf__chips span{
  display:inline-block; padding:.62rem 1.05rem; border:1px solid var(--line); border-radius:999px;
  font-size:.92rem; line-height:1.3; background:var(--paper-2);
  transition:background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.lf__chips label:hover span{border-color:var(--bronze)}
.lf__chips input:checked + span{background:var(--ink); border-color:var(--ink); color:var(--paper-2)}
.lf__chips input:focus-visible + span{outline:2px solid var(--bronze-deep); outline-offset:3px}
.lf__grupo[data-invalid] .lf__chips span{border-color:rgba(164,55,42,.55)}

.form__foot{display:flex; flex-wrap:wrap; align-items:center; gap:1.25rem; margin-top:.4rem}
.form__foot .btn[disabled]{opacity:.7; pointer-events:none}
.hp{position:absolute; left:-9999px; width:1px; height:1px; opacity:0}
@media (max-width:560px){
  .form__row{grid-template-columns:1fr}
  .form__foot .btn{width:100%; justify-content:center}
}