/* Específico de /contacto/ — solo maquetado, sin lógica de envío todavía */

.contact-form {
  max-width: var(--reading-max);
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.form-field label {
  font-size: var(--fs-small);
  color: var(--text-300);
}

.form-field .optional {
  color: var(--text-400);
  font-weight: 400;
}

.form-field input[type="text"],
.form-field input[type="email"],
.form-field input[type="tel"],
.form-field textarea {
  background: var(--bg-050);
  border: 1px solid var(--line-200);
  border-radius: 3px;
  padding: 14px 16px;
  font-size: var(--fs-body);
  color: var(--text-100);
  transition: border-color 180ms ease;
}

.form-field input:focus,
.form-field textarea:focus {
  outline: none;
  border-color: var(--accent);
}

.form-field textarea {
  resize: vertical;
  min-height: 120px;
}

.form-field__hint {
  font-size: var(--fs-small);
  color: var(--text-400);
}

.form-file {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border: 1px dashed var(--line-300);
  border-radius: 3px;
  color: var(--text-400);
  font-size: var(--fs-small);
}

.form-file input[type="file"] {
  color: var(--text-300);
  font-size: var(--fs-small);
}

.form-selector {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.form-selector input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.form-selector label {
  padding: 10px 18px;
  border: 1px solid var(--line-200);
  border-radius: 999px;
  font-size: var(--fs-small);
  color: var(--text-300);
  cursor: pointer;
  transition: border-color 180ms ease, color 180ms ease, background-color 180ms ease;
}

.form-selector input:checked + label {
  border-color: var(--accent);
  color: var(--text-100);
  background: var(--bg-100);
}

.form-selector label:hover {
  border-color: var(--line-300);
  color: var(--text-100);
}