Group each error message with the field it belongs to

On the deployed site "Falta el nombre" sat 0px below its own field and
6px above the *next* field's label, so the three lines read as one block
and the message looked like a caption for "HORAS POR SEMANA".

Material renders a field's message flush underneath it, so the space
between rows has to be visibly larger than the space inside one. The
form's row gap goes from 1.25rem to 2rem: 0px to its own field, 18px to
the next label.

Measured against https://pireon.dev before and after. The earlier fixes
in this series are already live there and verified correct on the
deployed build -- labels uppercase at weight 700, the checkbox message
red at 12px on its own line, the textarea's ring at 20px, and no growth
on submit. This one needs a redeploy to show.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

landing/src/app/ui/contact-form.scss

@@ -1,7 +1,14 @@
+// The gap has to beat the distance from a field to its own error message,
+// which Material renders flush underneath it — 0px. At 1.25rem the message
+// ended up 6px from the *next* field's label and 0px from its own field, so
+// "Falta el nombre" read as the caption of "HORAS POR SEMANA" rather than of
+// the field above it. The three lines have to group with the field they belong
+// to, which means the space between rows must be visibly larger than the space
+// inside one.
 .landing-form {
   display: flex;
   flex-direction: column;
-  gap: 1.25rem;
+  gap: 2rem;
 }
 
 .landing-form__kind {