/* ==========================================================================
   Contact page (Figma "Contact" 207:6377): Hero 523:3319 and Form 523:3358.
   The hero is the shared page hero (styles.css). The form section sits in the 1600px framed column with a fine
   dot texture behind, and the form itself in a 700px column with its own dashed side lines.
   ========================================================================== */

/* Hero: 680px title box ("Fale com a gente" on one line), 470px subtitle */
.page-hero--contact { --title-w: 12.1429em; --subtitle-w: 470px; }

/* --------------------------------------------------------------------------
   Form section
   -------------------------------------------------------------------------- */
.contact { padding-inline: var(--frame-gutter); }
/* Side lines + top line of the column (.frame--top), then the dot texture over the whole column */
.contact__frame {
  display: flex;
  justify-content: center;
  padding: 1px var(--frame-pad) 0;
  background-image: var(--dash-y), var(--dash-y), var(--dash-x), var(--dot-texture);
  background-size: 1px 4px, 1px 4px, 4px 1px, 12px 12px;
  background-position: left top, right top, left top, center;
  background-repeat: repeat-y, repeat-y, repeat-x, repeat;
}

/* Plan 01 (526:3572): solid #0a0a0a column, max 700px, dashed lines on its sides, 30px inside */
.contact-card {
  width: 100%;
  max-width: 700px;
  padding: 30px 31px;
  background:
    var(--dash-y) left top / 1px 4px repeat-y,
    var(--dash-y) right top / 1px 4px repeat-y,
    var(--gray-950);
}

.contact-form {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.contact-form__title {
  margin: 0;
  font-size: 24px;
  font-weight: 300;
  line-height: 1.2;
  letter-spacing: -0.24px;
  color: var(--gray-50);
}

.field {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.field__label {
  font-size: 14px;
  line-height: 1.5;
  color: var(--gray-50);
}
/* Figma: only the line, no fill; a filled field turns Glass 10% (site rule) */
.field__control {
  display: block;
  width: 100%;
  padding: 16px;
  border: 1px solid var(--glass-10);
  border-radius: 14px;
  background: transparent;
  font-size: 14px;
  line-height: 1.5;
  color: var(--gray-50);
  transition: border-color 0.2s ease, background-color 0.2s ease;
}
.field__control::placeholder { color: var(--gray-500); opacity: 1; }
.field__control:hover { background: rgba(247, 247, 247, 0.03); }
.field__control:not(:placeholder-shown) { background: var(--glass-10); }
.field__control:focus-visible {
  outline: none;
  border-color: rgba(247, 247, 247, 0.4);
  background: rgba(247, 247, 247, 0.05);
}
.field__control--area {
  height: 199px;
  min-height: 120px;
  resize: vertical;
}
.field__control[aria-invalid="true"] { border-color: rgba(255, 138, 128, 0.7); }
.field__error {
  margin: -8px 0 0;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.5;
  color: #ff8a80;
}

.contact-form__actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 16px;
}
/* Upgrade Button (Figma 526:3591): silver, hugging its text */
.btn-send {
  padding: 16px 22px;
  border: 1px solid var(--glass-10);
  border-radius: 12px;
  background: linear-gradient(90deg, #aec5d7 0%, #f7f7f7 49.038%, #aec5d7 100%);
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  color: var(--gray-950);
  white-space: nowrap;
  transition: filter 0.2s ease, transform 0.2s ease;
}
.btn-send:hover { filter: brightness(1.06); }
.btn-send:active { transform: scale(0.99); }
.btn-send:disabled { opacity: 0.6; cursor: default; filter: none; transform: none; }

.contact-form__note {
  margin: 0;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--gray-400);
}
.contact-form__note span { color: var(--gray-50); }
.contact-form__status {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--gray-50);
}

@media (max-width: 480px) {
  .contact-card { padding: 24px 21px; }
}

@media (prefers-reduced-motion: reduce) {
  .field__control, .btn-send { transition: none; }
}