/* Dr. Gabriel Krauss — pré-triagem.
   Depende de site.css: usa os mesmos tokens (--accent, --parchment, --ink...),
   as classes .display/.eyebrow/.btn e o nav/footer. Aqui só o que é do formulário. */

/* site.css define display:inline-flex em .btn, que ganha do atributo hidden do
   navegador. Sem isto o botão de envio aparece já na primeira pergunta. */
.tri [hidden],.tri__nav[hidden],.tri__prog[hidden]{display:none !important}

.tri{
  min-height:calc(100vh - 76px);
  display:flex;align-items:flex-start;justify-content:center;
  padding:56px 24px 96px;
}
.tri__card{width:100%;max-width:620px}

/* ---------- topo ---------- */
.tri__head{margin:0 0 40px}
.tri__title{font-size:clamp(30px,5.4vw,44px);line-height:1.1;margin:0 0 16px;color:var(--ink)}
.tri__intro{font-size:17px;line-height:1.65;color:var(--ink-soft);margin:0;max-width:46ch}

/* ---------- progresso ---------- */
.tri__prog{margin:0 0 36px}
.tri__bar{height:3px;background:var(--sand);border-radius:999px;overflow:hidden}
.tri__fill{height:100%;width:0;background:var(--accent);border-radius:999px;transition:width .32s cubic-bezier(.4,0,.2,1)}
.tri__count{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin:12px 0 0}

/* ---------- pergunta ---------- */
.tri__step{display:none}
.tri__step.is-on{display:block;animation:triIn .3s ease}
@keyframes triIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

.tri__fs{border:0;padding:0;margin:0}
.tri__q{
  font-family:var(--display);font-weight:var(--display-weight);letter-spacing:var(--display-tracking);
  font-size:clamp(22px,3.6vw,29px);line-height:1.25;color:var(--ink);
  margin:0 0 28px;padding:0;text-wrap:balance;
}

.tri__opts{display:flex;flex-direction:column;gap:10px;margin:0 0 8px}
.tri__opt{position:relative}
.tri__opt input{position:absolute;opacity:0;width:0;height:0}
.tri__opt label{
  display:block;cursor:pointer;
  background:#fff;border:1.5px solid var(--sand);border-radius:14px;
  padding:17px 20px;font-size:16px;line-height:1.4;color:var(--ink);
  transition:border-color .16s ease,background .16s ease,transform .16s ease;
}
.tri__opt label:hover{border-color:var(--accent-soft);transform:translateY(-1px)}
.tri__opt input:checked + label{border-color:var(--accent);background:#fff;box-shadow:inset 0 0 0 1px var(--accent)}
.tri__opt input:focus-visible + label{outline:2px solid var(--accent);outline-offset:3px}

/* ---------- campos de texto ---------- */
.tri__field{margin:0 0 18px}
.tri__label{display:block;font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-mid);margin:0 0 8px}
.tri__input{
  width:100%;background:#fff;border:1.5px solid var(--sand);border-radius:14px;
  padding:16px 18px;font-family:var(--body);font-size:16px;color:var(--ink);
  transition:border-color .16s ease;
}
.tri__input:focus{outline:none;border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.tri__input::placeholder{color:var(--muted)}

/* ---------- navegação ---------- */
.tri__nav{display:flex;align-items:center;gap:16px;margin:28px 0 0;flex-wrap:wrap}
.tri__back{
  background:none;border:0;padding:8px 0;cursor:pointer;
  font-family:var(--body);font-size:14px;color:var(--muted-mid);
}
.tri__back:hover{color:var(--ink)}
.tri__back[hidden]{display:none}
.tri__submit{border:0;cursor:pointer;font-family:var(--body)}
.tri__err{font-size:14px;color:#8c2f22;margin:14px 0 0;min-height:1px}

/* ---------- fim ---------- */
.tri__done{display:none;text-align:center;padding:24px 0}
.tri__done.is-on{display:block;animation:triIn .3s ease}
.tri__done p{font-size:17px;color:var(--ink-soft);margin:0 0 28px;line-height:1.6}

/* ---------- aviso ---------- */
.tri__note{
  margin:44px 0 0;padding:18px 20px;
  background:rgba(148,136,122,.12);border-radius:14px;
  font-size:13.5px;line-height:1.6;color:var(--muted-mid);
}
.tri__note strong{color:var(--ink-soft)}

@media (max-width:560px){
  .tri{padding:36px 18px 80px}
  .tri__opt label{padding:15px 17px;font-size:15.5px}
}
@media (prefers-reduced-motion:reduce){
  .tri__step.is-on,.tri__done.is-on{animation:none}
  .tri__fill{transition:none}
  .tri__opt label:hover{transform:none}
}

/* ---------- aviso do convênio ---------- */
/* Quem escolhe convênio não é descartada de imediato: recebe a informação da nota
   fiscal e decide. Sem isto, perde-se quem desistiria só por não saber que existe
   reembolso. */
.tri__aviso{
  margin:18px 0 0;padding:20px 22px;
  background:#fff;border:1.5px solid var(--accent-soft);border-radius:16px;
  animation:triIn .28s ease;
}
.tri__aviso[hidden]{display:none !important}
.tri__aviso-t{
  font-family:var(--display);font-weight:var(--display-weight);letter-spacing:var(--display-tracking);
  font-size:19px;line-height:1.3;color:var(--ink);margin:0 0 10px;
}
.tri__aviso-p{font-size:15.5px;line-height:1.6;color:var(--ink-soft);margin:0 0 20px}
.tri__aviso-acoes{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.tri__aviso-sair{
  background:none;border:0;padding:8px 0;cursor:pointer;
  font-family:var(--body);font-size:14px;color:var(--muted-mid);text-decoration:underline;
}
.tri__aviso-sair:hover{color:var(--ink)}

/* ---------- saída cordial ---------- */
.tri__saida{display:none;padding:24px 0}
.tri__saida.is-on{display:block;animation:triIn .3s ease}
.tri__saida p{font-size:17px;color:var(--ink-soft);margin:0 0 22px;line-height:1.65;max-width:46ch}