/* /contacto (Operar): the form, its errors, the direct-contact aside. Tokens only. */

.contacto { display: grid; gap: var(--sh-r-7); padding-block: var(--sh-r-8); }
.contacto h1 { margin: 0 0 var(--sh-r-4); font-size: clamp(2.25rem, 5vw, 3.5rem); }
.contacto .lede { margin-bottom: 0; }
.contacto--done { padding-block: var(--sh-r-9); }

.form { display: grid; gap: var(--sh-r-5); max-width: 36rem; }
.field label, .check label { display: block; margin-bottom: var(--sh-r-2); font-weight: var(--sh-fw-strong); color: var(--sh-navy); }
.field input:not([type="checkbox"]), .field textarea { width: 100%; min-height: var(--sh-touch-target-min); padding: var(--sh-r-3) var(--sh-r-4); border: 1px solid var(--sh-ink-500); border-radius: var(--sh-radius-md); background: var(--sh-white); color: var(--sh-ink-800); font: 400 1rem/1.5 var(--sh-font-text); }
.field textarea { resize: vertical; }
.field input:focus-visible, .field textarea:focus-visible, .check input:focus-visible { outline: var(--sh-focus-ring-width) solid var(--sh-teal); outline-offset: var(--sh-focus-ring-offset); }
.check { display: flex; align-items: center; gap: var(--sh-r-3); }
.check input { flex: none; width: 1.5rem; height: 1.5rem; margin: 0; accent-color: var(--sh-navy); }
.check label { display: flex; align-items: center; min-height: var(--sh-touch-target-min); margin: 0; font-weight: 400; color: var(--sh-ink-800); }
.hp { position: absolute; left: -9999px; }

.field-error { margin: var(--sh-r-2) 0 0; font-size: 0.9375rem; color: var(--sh-negative); }
.field [aria-invalid="true"] { border-color: var(--sh-negative); box-shadow: inset 0 0 0 1px var(--sh-negative); }
.form-errors { padding: var(--sh-r-4) var(--sh-r-5); border: 1px solid var(--sh-negative); border-radius: var(--sh-radius-md); color: var(--sh-negative); }
.form-errors h2 { margin: 0 0 var(--sh-r-2); font: 700 1rem var(--sh-font-text); color: var(--sh-negative); }
.form-errors p { margin: 0; }
.form-errors ul { margin: 0; padding-left: var(--sh-r-5); }
.form-errors a { color: var(--sh-negative); }
.form-errors:focus-visible { outline: var(--sh-focus-ring-width) solid var(--sh-teal); outline-offset: var(--sh-focus-ring-offset); }

.alt h2 { margin: 0 0 var(--sh-r-4); font: 700 1.125rem var(--sh-font-text); color: var(--sh-navy); }
.alt ul { display: grid; gap: var(--sh-r-4); margin: 0; padding: 0; list-style: none; }
.alt li { display: flex; align-items: flex-start; gap: var(--sh-r-3); }
.alt .icon { flex: none; color: var(--sh-teal); }
.alt li div { display: grid; }
.alt li span { font-size: 0.875rem; color: var(--sh-ink-700); }
.alt li a { display: inline-flex; align-items: center; min-height: var(--sh-touch-target-min); font-weight: 400; }

@media (min-width: 56rem) {
  .contacto { grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.8fr); align-items: start; column-gap: var(--sh-r-9); }
  .contacto__head { grid-column: 1 / -1; }
  .contacto--done { display: block; }
}