/**
 * Formularios — padrao unico para o site inteiro.
 *
 * Carregado depois do CSS de cada pagina, entao o que esta aqui vence as
 * regras locais (.qf__f input, .form input etc.). Dois contextos:
 *   - claro: hero, cards, faixas brancas       -> form.form
 *   - escuro: faixa .qf (marinho) e .cta        -> .qf form.form, .cta form.form
 */

/* ---------- estrutura ---------- */
form.form{display:flex;flex-direction:column;gap:18px;width:100%;}
form.form .frow,form.form .form__row{display:flex;flex-direction:column;gap:8px;min-width:0;}
form.form .form__grid{display:grid;grid-template-columns:1fr;gap:18px;}
@media (min-width:620px){ form.form .form__grid--2{grid-template-columns:repeat(2,1fr);} }

/* ---------- rotulos ---------- */
form.form label{
  font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:.6875rem;font-weight:500;
  letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2);line-height:1.3;
}
form.form label .req{color:var(--teal-text);margin-left:2px;}

/* ---------- campos ---------- */
form.form input:where(:not([type="checkbox"]):not([type="radio"])),
form.form select,
form.form textarea{
  width:100%;box-sizing:border-box;
  font-family:inherit;font-size:1rem;line-height:1.4;color:var(--ink);
  background:var(--paper);border:1px solid var(--rule);border-radius:8px;
  padding:13px 15px;min-height:50px;
  transition:border-color .16s ease,box-shadow .16s ease,background .16s ease;
  -webkit-appearance:none;appearance:none;
}
form.form textarea{min-height:130px;resize:vertical;}
form.form input::placeholder,form.form textarea::placeholder{color:var(--ink-2);opacity:.55;}
form.form input:hover,form.form select:hover,form.form textarea:hover{border-color:var(--ink-2);}
form.form input:focus,form.form select:focus,form.form textarea:focus{
  outline:none;border-color:var(--teal-ink);
  box-shadow:0 0 0 3px var(--teal-wash-rule);
}
form.form input:user-invalid,form.form textarea:user-invalid,form.form select:user-invalid{border-color:#C2410C;}
form.form input:-webkit-autofill,form.form textarea:-webkit-autofill{
  -webkit-text-fill-color:var(--ink);box-shadow:0 0 0 1000px var(--paper) inset;
}
form.form select{
  cursor:pointer;padding-right:44px;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%235A6478' stroke-width='1.6'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;background-size:16px;
}
form.form input[type="checkbox"],form.form input[type="radio"]{width:18px;height:18px;accent-color:var(--teal-ink);cursor:pointer;}

/* ---------- grupos numerados (portabilidade) ---------- */
form.form .fset{
  border:1px solid var(--rule);border-radius:12px;padding:clamp(18px,2.4vw,28px);margin:0;
  background:var(--paper);display:flex;flex-direction:column;gap:16px;
}
form.form .fset legend,form.form .fset__head{
  border:0;display:inline-flex;align-items:center;gap:10px;padding:0 8px;margin-left:-8px;
  font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:.75rem;font-weight:500;
  letter-spacing:.12em;text-transform:uppercase;color:var(--ink);
}
form.form .fset__n{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:28px;height:28px;padding:0 6px;border-radius:999px;
  background:var(--teal);color:var(--on-teal);font-size:.6875rem;
}

/* ---------- acoes e notas ---------- */
form.form .btn{min-height:52px;border-radius:8px;}
form.form .btns,form.form .qf__go,form.form .form__actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center;}
form.form .form__note,form.form .qf__note{margin:0;font-size:.8125rem;line-height:1.5;color:var(--ink-2);}
form.form .form__status{border-radius:8px;}
@media (max-width:560px){ form.form .btn{width:100%;justify-content:center;gap:12px;} }

/* ---------- card branco (revenda, contato) ---------- */
.form-card{
  background:var(--paper);border:1px solid var(--rule);border-radius:14px;
  padding:clamp(22px,3vw,36px);box-shadow:0 10px 30px rgba(6,42,95,.06);
}
.form-card__head{margin-bottom:22px;padding-bottom:18px;border-bottom:1px solid var(--rule);}
.form-card__head h2{font-size:1.375rem;font-weight:600;letter-spacing:-.018em;color:var(--ink);margin:0 0 6px;}
.form-card__head p{font-size:.9375rem;color:var(--ink-2);margin:0;}

/* ---------- contexto escuro (faixa marinho .qf e .cta) ---------- */
.qf form.form label,.cta form.form label{color:var(--field-ink);opacity:.82;}
.qf form.form label .req,.cta form.form label .req{color:var(--field-accent);opacity:1;}
.qf form.form input,.qf form.form select,.qf form.form textarea,
.cta form.form input,.cta form.form select,.cta form.form textarea{
  color:var(--field-ink);background:rgba(255,255,255,.06);border-color:var(--field-rule);
}
.qf form.form input::placeholder,.cta form.form input::placeholder{color:var(--field-ink);opacity:.45;}
.qf form.form input:hover,.cta form.form input:hover{border-color:rgba(255,255,255,.4);}
.qf form.form input:focus,.qf form.form select:focus,.qf form.form textarea:focus,
.cta form.form input:focus,.cta form.form select:focus,.cta form.form textarea:focus{
  border-color:var(--field-accent);box-shadow:0 0 0 3px rgba(95,231,210,.22);background:rgba(255,255,255,.1);
}
.qf form.form input:-webkit-autofill{-webkit-text-fill-color:var(--field-ink);box-shadow:0 0 0 1000px #0B2A55 inset;}
.qf form.form .qf__note,.qf form.form .form__note,.cta form.form .form__note{color:var(--field-ink);opacity:.7;}

/* formulario rapido: grade em 2 e 4 colunas, como o desenho original */
.qf form.qf__f{display:grid;grid-template-columns:1fr;gap:16px;}
@media (min-width:640px){ .qf form.qf__f{grid-template-columns:repeat(2,1fr);} }
@media (min-width:1060px){ .qf form.qf__f{grid-template-columns:repeat(4,1fr);} .qf form.qf__f .qf__go{grid-column:1/-1;} }