/* ==========================================================================
   Silvtech — Fale conosco (novo design system)
   Depende de tokens.css + base.css. Só esta página usa este arquivo.
   ========================================================================== */

/* ---- Hero (tipo A) ---- */
.hero {
  padding-block: var(--esp-7) var(--respiro-secao);
}

.hero h1 {
  max-width: 16ch;
}

.hero__apoio {
  margin-top: var(--esp-4);
  max-width: 52ch;
}

/* ---- Contato (tipo B — página curta/funcional, sem seção C) ---- */
.contato {
  background: var(--cor-fundo-alt);
}

.contato__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--esp-6);
}

.expectativa .rotulo {
  margin-bottom: var(--esp-2);
}

.expectativa__lista {
  margin-top: var(--esp-4);
  display: flex;
  flex-direction: column;
  gap: var(--esp-4);
}

.expectativa__item h3 {
  margin-bottom: var(--esp-1);
}

.expectativa__item p {
  color: var(--cor-neutro);
}

.expectativa__canal {
  margin-top: var(--esp-5);
  padding-top: var(--esp-4);
  border-top: 1px solid var(--cor-borda);
}

.expectativa__canal p {
  color: var(--cor-neutro);
  margin-bottom: var(--esp-1);
}

/* ---- Formulário ---- */
.form-contato {
  background: var(--cor-superficie);
  border: 1px solid var(--cor-borda-alt);
  border-radius: var(--raio);
  padding: var(--esp-4);
}

.campo {
  margin-bottom: var(--esp-3);
}

.campo label {
  display: block;
  font-size: var(--fs-legenda);
  font-weight: 500;
  margin-bottom: var(--esp-1);
}

.campo input,
.campo textarea {
  width: 100%;
  background: var(--cor-superficie);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio);
  padding: 12px 16px;
  font-family: var(--ff-texto);
  font-size: 16px;
  color: var(--cor-texto);
}

.campo input:focus,
.campo textarea:focus {
  outline: 2px solid var(--cor-acento);
  outline-offset: 2px;
  border-color: var(--cor-acento);
}

.campo textarea {
  resize: vertical;
  min-height: 96px;
}

.form-contato .btn {
  width: 100%;
  justify-content: center;
  margin-top: var(--esp-2);
}

.form-feedback {
  margin-top: var(--esp-3);
  font-size: var(--fs-legenda);
  color: var(--cor-acento);
}

.form-feedback--erro {
  color: #8a2b2b;
}

@media (min-width: 1024px) {
  .contato__grid {
    grid-template-columns: 5fr 7fr;
  }
}