/* Formulario de contato (tools/ligar_formularios.py, item 8 do guia).
   Um arquivo so para os dois sites: as cores saem dos tokens que cada um ja
   declara no :root — no LudLux o dourado --accent, no twe.life o verde --green.
   Nada de cor fixa aqui, para o formulario pertencer ao site em que esta. */
:root {
  --form-cor: var(--accent, var(--green, #0FC599));
  --form-borda: var(--edge, var(--line, rgba(255, 255, 255, .16)));
  --form-texto: var(--paper, #F4EFE6);
  --form-fraco: var(--mute, #9aa6a2);
  --form-erro: #FF8C80;
}
#contato { position: relative; z-index: 1; }
#contato [hidden] { display: none !important; }
#contato .hidden { display: none !important; }
.contato-grade {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(28px, 5vw, 72px); align-items: start;
  max-width: 1240px; margin-inline: auto;
}
@media (max-width: 880px) { .contato-grade { grid-template-columns: minmax(0, 1fr); } }
.contato-copy h2 { margin: 16px 0 0; }
.contato-copy p { margin-top: 16px; max-width: 46ch; color: var(--form-fraco); line-height: 1.7; }
.contato-alt { font-size: 14px; }
.contato-alt a { color: var(--form-cor); }
.form-campo { display: block; margin-bottom: 18px; }
.form-campo > span {
  display: block; margin-bottom: 8px; font-family: var(--mono, inherit);
  font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--form-fraco);
}
.form-campo input {
  width: 100%; height: 54px; padding: 0 16px; border-radius: 12px;
  border: 1px solid var(--form-borda); background: rgba(255, 255, 255, .05);
  color: var(--form-texto); font: 400 16px/1.4 var(--body, system-ui, sans-serif);
}
.form-campo input:focus-visible { outline: 2px solid var(--form-cor); outline-offset: 2px; border-color: var(--form-cor); }
.form-campo input[aria-invalid="true"] { border-color: var(--form-erro); }
.form-erro { display: block; margin-top: 6px; font-size: 13px; color: var(--form-erro); }
/* A linha inteira e o alvo de toque, nao so o quadradinho de 20px (auditoria: 44px minimo). */
.form-aceite {
  display: flex; gap: 12px; align-items: flex-start; min-height: 44px;
  margin-bottom: 14px; padding: 6px 0; cursor: pointer;
  font-size: 14px; line-height: 1.55; color: var(--form-fraco);
}
.form-aceite input { width: 22px; height: 22px; flex: none; margin-top: 1px; accent-color: var(--form-cor); }
.form-aceite a { color: var(--form-cor); }
.form-resumo { margin: 0 0 14px; font-size: 14px; color: var(--form-erro); }
.form-resumo:empty { display: none; }
.honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
#contato .btn { margin-top: 12px; font-family: inherit; cursor: pointer; }
.form-sucesso { border: 1px solid var(--form-cor); border-radius: 16px; padding: 28px; }
.form-sucesso h3 { margin: 0 0 10px; }
.form-sucesso p { margin: 0; color: var(--form-fraco); line-height: 1.7; }