Stop drawing an errored field twice when it takes focus

Focusing a field that already had an error painted two rings at once:
the notched outline stayed in the error colour and the gradient focus
ring went on top of it in the brand's violet-to-cyan. Two rings, two
colours, one field -- and on the textarea at two different radii, which
is what made it visible enough to report.

The ring itself is worth keeping; it is how focus reads everywhere else.
It just has to agree with the state it decorates, so while the field is
invalid it is built from the warn colour. The result is one red
indication that brightens on focus, and valid fields keep the brand
gradient.

Verified in both themes: an errored focused field's ring and outline are
both the warn colour, a valid focused one still gets the brand gradient.

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 {
@@ -120,3 +127,20 @@
     font-size: var(--pi-font-size-x-small, 0.75rem);
   }
 }
+
+// Focusing a field that already has an error drew it twice: the notched
+// outline stays in the error colour, and the gradient focus ring is painted on
+// top of it in the brand's violet-to-cyan. Two rings, two colours, one field —
+// and on the textarea, at two different radii, which is what made it obvious.
+//
+// The ring is worth keeping: it is how focus reads on every other field. It
+// just has to agree with the state it is decorating, so while the field is
+// invalid the ring is built from the warn colour instead of the brand one. The
+// field ends up with a single red indication that still brightens on focus.
+:host ::ng-deep .pi-field .mat-form-field-invalid {
+  --pi-theme-field-focus-gradient: linear-gradient(
+    120deg,
+    var(--pi-color-warn),
+    var(--pi-color-warn-200, var(--pi-color-warn))
+  );
+}