/* =========================================================
   WeWolf — Contacto
   ========================================================= */

.paths { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 24px; }
.path { padding: 28px; display: flex; flex-direction: column; gap: 12px; color: inherit; }
.path:hover { color: inherit; }
.path .tag { align-self: flex-start; }
.path h2 { font-size: 28px; letter-spacing: -.03em; }
.path p { margin: 0; color: var(--dim); }
.path .link-arrow { margin-top: auto; padding-top: 8px; color: var(--wolf-blue); }

.contact-grid { display: flex; flex-wrap: wrap; gap: 48px; align-items: flex-start; }
.contact-grid > div { flex: 1 1 320px; }
.mail {
  display: inline-block; margin-top: 16px;
  font: 600 clamp(18px, 2.4vw, 24px) var(--font-display); letter-spacing: -.01em;
  border-bottom: 2px solid var(--wolf-blue-soft);
}

.form { flex: 1 1 440px; padding: 32px; display: flex; flex-direction: column; gap: 18px; }
.form:hover { transform: none; border-color: var(--border-strong); box-shadow: 0 6px 0 var(--border-strong); }
.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font: 11px var(--font-pixel); letter-spacing: .12em; text-transform: uppercase; color: var(--dim); }
.field input, .field select, .field textarea {
  font: 16px var(--font-body); color: var(--moon-silver);
  background: var(--midnight); border: 1.5px solid var(--border); border-radius: 12px;
  padding: 13px 14px; outline: none; resize: vertical;
}
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--wolf-blue); }
.field [aria-invalid="true"] { border-color: var(--ember); }
.form__error { margin: 0; color: var(--ember); font-size: 14px; }
.form .btn { align-self: flex-start; }