/* Briefing da consultoria Fa.Away: pele do formulário, compartilhada por /briefing e pela apresentação (06/10).
   Tudo preso a .ficha (o formulário) ou a .briefing (a coluna ao lado), para não vazar nas duas páginas.
   Usa os tokens da página: --bg --bg-2 --text --muted --line --moss --ff-d --ff-m --ease. */
.briefing{ background:var(--bg-2); border-top:1px solid var(--line); }
.briefing .intro{ margin-top:20px; max-width:26em; }
.briefing .privado{ font-size:13px; color:var(--muted); margin-top:10px; max-width:30em; }
.trilha{ display:flex; gap:6px; margin-top:28px; }
.trilha i{ flex:1; height:2px; background:var(--line); transition:background .3s; }
.trilha i.feito{ background:var(--moss); }
.trilha i.atual{ background:var(--text); }
.contador{ margin-top:12px; }

.ficha{ position:relative; background:var(--bg); color:var(--text); border:1px solid var(--line); padding:clamp(22px,3.4vw,44px); min-height:520px; display:flex; flex-direction:column; }
.ficha button, .ficha input, .ficha textarea, .ficha select{ font:inherit; color:inherit; }
.ficha button{ background:none; border:0; cursor:pointer; }
.ficha .mono{ font-family:var(--ff-m); font-size:10.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); }
.ficha .bt{ display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:48px; font-family:var(--ff-m); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; padding:0 22px; border:1px solid var(--text); background:transparent; color:var(--text); transition:background .3s var(--ease), color .3s var(--ease); }
.ficha .bt.cheio{ background:var(--text); color:var(--bg); border-color:var(--text); }
.ficha .bt:hover{ background:var(--text); color:var(--bg); }
.ficha .bt.cheio:hover{ background:transparent; color:var(--text); }
.ficha .bt[disabled]{ opacity:.35; pointer-events:none; }
.ficha .etapa{ display:none; flex:1; }
.ficha .etapa.ativa{ display:block; animation:ficha-entra .35s var(--ease); }
@keyframes ficha-entra{ from{ opacity:0; transform:translateY(8px); } }
.ficha .etapa h3{ font-family:var(--ff-d); font-weight:300; font-size:clamp(26px,2.6vw,34px); line-height:1.1; letter-spacing:-.015em; text-transform:none; margin:8px 0 22px; padding:0; }
.ficha .campo{ margin-top:20px; }
.ficha .campo > label, .ficha .campo > span.rot{ display:block; font-size:14px; font-weight:400; margin-bottom:8px; }
.ficha .campo small{ display:block; font-size:12.5px; color:var(--muted); margin-top:6px; }
.ficha input[type=text], .ficha input[type=email], .ficha input[type=tel], .ficha textarea{ width:100%; background:transparent; border:0; border-bottom:1px solid rgba(42,34,24,.35); padding:10px 0; font-size:17px; border-radius:0; }
.ficha input:focus, .ficha textarea:focus{ outline:none; border-bottom-color:var(--text); }
.ficha textarea{ resize:vertical; min-height:84px; line-height:1.5; }
.ficha .chips{ display:flex; flex-wrap:wrap; gap:8px; }
.ficha .chip{ min-height:42px; padding:0 16px; border:1px solid rgba(42,34,24,.28); border-radius:999px; font-size:14.5px; transition:background .2s, color .2s, border-color .2s; }
.ficha .chip[aria-pressed="true"]{ background:var(--moss); border-color:var(--moss); color:var(--bg); }
.ficha .dois{ display:grid; grid-template-columns:1fr 1fr; gap:0 24px; }
@media (max-width:600px){ .ficha .dois{ grid-template-columns:1fr; } }
.ficha .caixa{ background:var(--bg-2); padding:18px 20px; margin-top:22px; font-size:14.5px; }
.ficha .caixa ul{ list-style:none; margin-top:8px; }
.ficha .caixa li{ padding:3px 0 3px 16px; position:relative; }
.ficha .caixa li::before{ content:''; position:absolute; left:0; top:14px; width:8px; height:1px; background:var(--text); }
.ficha .aceite{ display:flex; gap:12px; align-items:flex-start; margin-top:18px; font-size:14.5px; color:var(--text); max-width:none; cursor:pointer; }
.ficha .aceite input{ width:20px; height:20px; margin-top:2px; accent-color:var(--moss); flex:none; }
.ficha .rodape-ficha{ display:flex; justify-content:space-between; align-items:center; gap:12px; margin-top:28px; padding-top:20px; border-top:1px solid var(--line); }
.ficha .rodape-ficha .esq{ display:flex; gap:10px; }
.ficha .obr{ font-style:normal; color:var(--moss); margin-left:3px; }
.ficha .opc{ font-family:var(--ff-m); font-size:9.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); margin-left:10px; white-space:nowrap; }
.ficha .dica{ display:block; font-size:12.5px; font-weight:300; color:var(--muted); margin-top:2px; }
.ficha .armadilha{ position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden; }
.ficha .etapa[data-fim] .so-enviando, .ficha .etapa[data-fim] .so-ok, .ficha .etapa[data-fim] .so-falha{ display:none; }
.ficha .etapa[data-estado="enviando"] .so-enviando, .ficha .etapa[data-estado="ok"] .so-ok, .ficha .etapa[data-estado="falha"] .so-falha{ display:block; }
.ficha .etapa[data-estado="falha"] button.so-falha{ display:inline-flex; }
.ficha .obs-obr{ font-size:13px; color:var(--muted); margin-top:-8px; }
.ficha .campo .falta{ display:none; font-size:12.5px; font-weight:400; color:var(--text); margin-top:8px; padding-left:16px; position:relative; }
.ficha .campo .falta::before{ content:''; position:absolute; left:0; top:.75em; width:8px; height:1px; background:var(--text); }
.ficha .campo.erro .falta{ display:block; }
.ficha .campo.erro input[type=text], .ficha .campo.erro input[type=email], .ficha .campo.erro input[type=tel], .ficha .campo.erro textarea{ border-bottom:1.5px solid var(--text); }
.ficha .campo.erro .chip{ border-color:rgba(42,34,24,.6); }
.ficha .etapa h3 + p, .ficha .etapa[data-fim] p{ max-width:36em; }
/* próximo passo: o Pix (com data-pix no form). No sucesso é a primeira coisa da tela; na falha, só depois de "Já enviei pelo WhatsApp" */
.ficha .prox{ margin-top:22px; padding-top:18px; border-top:1px solid var(--line); }
.ficha .so-ok > .prox{ margin:0 0 22px; padding:0 0 18px; border-top:0; border-bottom:1px solid var(--line); }
.ficha .prox p{ font-size:15px; margin-bottom:10px; }
.ficha .prox a{ font-family:var(--ff-d); font-weight:300; font-size:22px; letter-spacing:-.01em; border-bottom:1px solid var(--text); padding-bottom:2px; }
.ficha .prox a:hover{ color:var(--moss); border-color:var(--moss); }
/* falha: "Já enviei pelo WhatsApp" troca o texto e mostra o Pix; nada é gravado */
.ficha .so-falha .prox, .ficha .so-falha .combinado{ display:none; }
.ficha .etapa[data-zap] .so-falha .prox, .ficha .etapa[data-zap] .so-falha .combinado{ display:block; }
.ficha .etapa[data-zap] .so-falha > .mono, .ficha .etapa[data-zap] .so-falha > h3:not(.combinado), .ficha .etapa[data-zap] .so-falha > p, .ficha .etapa[data-zap] #ja-enviei, .ficha .etapa[data-zap] #tentar{ display:none; }
/* sucesso: data e hora do envio; "Começar outro briefing" */
.ficha .enviado-em{ font-family:var(--ff-m); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); margin-top:14px; }
.ficha .etapa[data-fim] .so-okb{ display:none; }
.ficha .etapa[data-estado="ok"] button.so-okb{ display:inline-flex; }
/* briefing já enviado, ao reabrir a página em até 2 horas: resumo no lugar do aviso do WhatsApp */
.ficha .enviado-resumo{ display:none; }
.ficha .etapa[data-restaurado] .enviado-resumo{ display:block; margin-top:18px; }
.ficha .etapa[data-restaurado] .so-ok > p{ display:none; }
.ficha .enviado-resumo pre{ font-family:var(--ff-b); font-size:13.5px; line-height:1.5; white-space:pre-wrap; background:var(--bg-2); padding:14px 16px; margin-top:8px; max-height:260px; overflow:auto; }
.ficha .sem-js{ font-size:15px; color:var(--muted); }
@media (max-width:880px){ .ficha{ min-height:0; } }
@media (prefers-reduced-motion:reduce){ .ficha .etapa.ativa{ animation:none; } }