/* triagem.css — formulário de triagem (Ediel Rodrigues Filmmaker)
   TUDO escopado sob #triagem: nenhum seletor global. Usa as variáveis do :root do index.html
   (--bg, --bg-section, --bg-card, --bg-input, --text, --text-soft, --text-muted, --gold,
   --border-gold, --radius). Fontes Lato e Playfair Display já são carregadas pelo index.html.
   Mapeamento prototipo -> site:
     --ink/--soft -> --text/--text-soft | --muted -> --text-soft (o --text-muted não passa 4.5:1 sobre o cartão)
     --gold #8f6a24 -> --gold #a07830 | --gold-dark -> filter:brightness (sem cor nova)
     --surface (#fff) -> --bg-input nos campos e --bg nos cartões de escolha
     --wash -> --bg-section | --line -> --border-gold | --field-line -> --text-muted (borda de campo, 3.8:1)
     --err -> #c0392b (o mesmo vermelho de erro do site) | --radius 10px -> --radius 12px; campos e botões 2px como o site */

#triagem{
  --tg-field-line:var(--text-muted);
  --tg-err:#c0392b;
  max-width:640px;margin:0 auto;
  font:400 16px/1.55 'Lato',system-ui,-apple-system,'Segoe UI',sans-serif;color:var(--text);
}
#triagem [hidden]{display:none!important}
#triagem ::placeholder{color:var(--text-soft);opacity:.75}

/* cabeçalho da seção */
#triagem .titulo{font:400 clamp(1.6rem,4vw,2.2rem)/1.2 'Playfair Display',Georgia,serif;margin:0 0 .35em;text-align:center;color:var(--text)}
#triagem .lead{color:var(--text-soft);margin:0 auto 1.5rem;max-width:52ch;text-align:center;font-size:14px;line-height:1.8}
#triagem .step h3{font:400 1.45rem/1.25 'Playfair Display',Georgia,serif;margin:0 0 .35em;color:var(--text)}
#triagem .step h3:focus,#triagem #triagem-ok h3:focus{outline:none}
#triagem #triagem-ok h3{font:400 1.45rem/1.25 'Playfair Display',Georgia,serif;margin:0 0 .35em}

/* progresso */
#triagem .progress{margin:0 0 1rem}
#triagem .progress-label{display:flex;justify-content:space-between;gap:12px;font-size:.875rem;color:var(--text-soft);margin-bottom:8px}
#triagem .progress-bar{display:grid;grid-template-columns:repeat(5,1fr);gap:4px}
#triagem .progress-bar span{height:4px;border-radius:2px;background:var(--bg-card)}
#triagem .progress-bar span.done{background:var(--gold)}

/* cartão */
#triagem .card{background:var(--bg-section);border:1px solid var(--border-gold);border-top:2px solid var(--gold);border-radius:var(--radius);padding:20px}
@media(min-width:560px){#triagem .card{padding:28px}}
#triagem .sub{color:var(--text-soft);margin:0 0 1.25rem}

#triagem fieldset{border:0;margin:0 0 1.25rem;padding:0;min-width:0}
#triagem legend,#triagem label.lbl{display:block;font-weight:700;font-size:.95rem;margin:0 0 6px;padding:0;color:var(--text)}
#triagem .opt{font-weight:400;color:var(--text-soft)}
#triagem .hint{color:var(--text-soft);font-size:.875rem;margin:0 0 8px}
#triagem .field{margin:0 0 1.25rem}
#triagem .row2{display:grid;grid-template-columns:1fr;gap:0 16px}
@media(min-width:560px){#triagem .row2{grid-template-columns:1fr 1fr}}

#triagem input[type=text],#triagem input[type=tel],#triagem input[type=email],#triagem input[type=date],
#triagem input[type=time],#triagem input[type=number],#triagem select,#triagem textarea{
  width:100%;font:inherit;font-weight:300;color:var(--text);background:var(--bg-input);
  border:1px solid var(--tg-field-line);border-radius:2px;padding:12px 14px;min-height:46px;
  -webkit-appearance:none;appearance:none}
#triagem select{cursor:pointer}
#triagem textarea{min-height:96px;resize:vertical;line-height:1.5}
#triagem input:focus-visible,#triagem select:focus-visible,#triagem textarea:focus-visible,#triagem button:focus-visible,
#triagem .choice input:focus-visible+.choice-body,#triagem .check input:focus-visible+span::before{
  outline:3px solid var(--gold);outline-offset:2px}
#triagem [aria-invalid=true]{border-color:var(--tg-err)}
#triagem .err{color:var(--tg-err);font-size:.875rem;margin:6px 0 0}
#triagem .note{border-left:3px solid var(--gold);background:var(--bg);padding:10px 14px;border-radius:0 8px 8px 0;font-size:.925rem;color:var(--text-soft);margin:0 0 1.25rem}

/* cartões de escolha (evento, ambiente, duração) */
#triagem .choices{display:grid;grid-template-columns:1fr;gap:10px}
@media(min-width:560px){#triagem .choices.two{grid-template-columns:1fr 1fr}}
#triagem .choices.inline{grid-template-columns:repeat(auto-fit,minmax(130px,1fr))}
#triagem .choice{position:relative;display:block;cursor:pointer}
#triagem .choice input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
#triagem .choice-body{display:block;border:1px solid var(--tg-field-line);border-radius:var(--radius);padding:14px 16px;background:var(--bg);height:100%;transition:border-color .15s,background .15s}
#triagem .choice-body strong{display:block;font-size:1rem;font-weight:700}
#triagem .choice-body small{display:block;color:var(--text-soft);font-size:.85rem;margin-top:2px}
#triagem .choice:hover .choice-body{border-color:var(--gold)}
#triagem .choice input:checked+.choice-body{border-color:var(--gold);background:rgba(160,120,48,.12);box-shadow:inset 0 0 0 1px var(--gold)}

/* caixas de marcar */
#triagem .check{display:flex;gap:12px;align-items:flex-start;cursor:pointer;margin:0 0 .9rem;position:relative;min-height:44px}
#triagem .check input{position:absolute;opacity:0;width:24px;height:24px;margin:0}
#triagem .check span{position:relative;padding-left:36px;min-height:24px;color:var(--text-soft);font-size:.95rem}
#triagem .check span::before{content:"";position:absolute;left:0;top:1px;width:24px;height:24px;border:1px solid var(--tg-field-line);border-radius:6px;background:var(--bg-input)}
#triagem .check input:checked+span::before{background:var(--gold);border-color:var(--gold)}
#triagem .check input:checked+span::after{content:"";position:absolute;left:8px;top:6px;width:6px;height:12px;border:solid #fff;border-width:0 2.5px 2.5px 0;transform:rotate(45deg)}
#triagem .check a{color:var(--text);text-decoration:underline;text-decoration-color:var(--gold)}

/* horas */
#triagem .horas{display:flex;align-items:baseline;gap:10px;background:var(--bg);border-radius:8px;padding:12px 14px;margin:0 0 1.25rem}
#triagem .horas strong{font:400 1.5rem/1 'Playfair Display',Georgia,serif;color:var(--gold)}
#triagem .horas span{color:var(--text-soft);font-size:.925rem}

#triagem .recebe{margin:0 0 1.25rem;padding:0;list-style:none;display:grid;gap:8px}
#triagem .recebe li{padding:12px 14px;border:1px solid var(--border-gold);border-radius:8px;background:var(--bg)}
#triagem .recebe b{display:block}
#triagem .recebe small{color:var(--text-soft)}

/* botões */
#triagem .actions{display:flex;gap:12px;justify-content:space-between;align-items:center;margin-top:1.5rem}
#triagem .btn{font:inherit;font-size:12px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;border-radius:2px;min-height:48px;padding:14px 24px;cursor:pointer;border:1px solid var(--gold);background:var(--gold);color:#fff;transition:filter .2s}
#triagem .btn:hover:not(:disabled){filter:brightness(.9)}
#triagem .btn:disabled{opacity:.5;cursor:not-allowed}
#triagem .btn.ghost{background:transparent;color:var(--text);border-color:var(--tg-field-line)}
#triagem .btn.ghost:hover:not(:disabled){filter:none;border-color:var(--gold)}
#triagem .btn.plain{border:0;background:none;color:var(--text);padding:8px 4px;text-decoration:underline;text-decoration-color:var(--gold);text-transform:none;letter-spacing:0;font-size:inherit;min-height:44px}
#triagem .small-print{font-size:.85rem;color:var(--text-soft);margin:1rem 0 0}
#triagem .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

@media(prefers-reduced-motion:reduce){#triagem *{transition:none!important}}