/* Hero + formulário de contato (Figma: Contato 425:2 / Hero formulário,
   510:4154 — seção de 1920×1030, gradiente 127,59° navy→laranja, sem
   foto). Texto à esquerda (576px, eyebrow a y=384), formulário à direita
   (519px, começa em y=194). O header do site é fixo (não ocupa espaço). */

.contato-hero {
  position: relative;
  overflow: hidden;
  padding: 140px 0 56px;
  background-image: linear-gradient(127.588deg, #19202E 15.803%, #672A1C 51.298%, #EC4208 87.082%);
  color: var(--color-white);
  text-align: left;
}

.contato-hero-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
}
@media (min-width: 1100px) {
  /* Larguras fixas do Figma (576 / 519, vão de 132px); só encolhem se a
     tela for mais estreita que isso. */
  .contato-hero { min-height: 1030px; padding: 194px 0 120px; box-sizing: border-box; }
  .contato-hero-grid { grid-template-columns: minmax(0, 576px) minmax(0, 519px); gap: 132px; align-items: start; }
  /* Eyebrow a 190px abaixo do topo do formulário (384 vs 194). */
  .contato-hero-text { margin-top: 190px; }
}

.contato-hero-text .eyebrow { margin-bottom: 24px; }
.contato-hero-text h1 {
  margin: 0 0 24px;
  text-wrap: wrap;
  font-size: 30px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.3px;
}
@media (min-width: 768px) {
  .contato-hero-text h1 { font-size: 44px; letter-spacing: -0.44px; }
}
.contato-hero-lead { max-width: 522px; margin: 0; font-size: 16px; font-weight: 300; line-height: 1.5; color: var(--color-gray-02); }
@media (min-width: 768px) {
  .contato-hero-lead { font-size: 20px; }
}

.contato-form-wrap { width: 100%; max-width: 519px; }

/* Rótulo → campo 12px; campo → próximo rótulo 12px; botão 24px abaixo
   da mensagem. */
.contato-form { display: flex; flex-direction: column; gap: 12px; }

/* Honeypot: só um bot preenche um campo escondido via CSS (não via
   "display:none", que alguns leitores de spam já ignoram por padrão —
   isso fica fora da tela em vez de invisível). */
.contato-form-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.contato-field { display: flex; flex-direction: column; gap: 12px; }
.contato-field label { font-size: 16px; font-weight: 500; line-height: 1.5; color: var(--color-white); }
.contato-field input,
.contato-field textarea {
  box-sizing: border-box;
  width: 100%;
  border: 1px solid var(--color-white);
  border-radius: 50px;
  background: var(--color-white);
  padding: 0 29px;
  font-family: inherit;
  font-size: 16px;
  font-weight: 300;
  line-height: 1.5;
  color: var(--color-navy);
}
.contato-field input { height: 60px; }
.contato-field input::placeholder,
.contato-field textarea::placeholder { color: var(--color-gray-03); opacity: 1; }
.contato-field input:focus,
.contato-field textarea:focus { outline: 2px solid var(--color-white); outline-offset: 3px; }
.contato-field textarea { height: 147px; padding-top: 16px; padding-bottom: 16px; resize: vertical; min-height: 147px; border-radius: 20px; }
/* Rótulos e campos: 16px no mobile, 18px a partir de 768px. */
@media (min-width: 768px) {
  .contato-field label,
  .contato-field input,
  .contato-field textarea { font-size: 18px; }
}

.contato-form-submit {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  height: 62px;
  margin-top: 12px;
  border: 1px solid var(--color-orange-light);
  border-radius: 50px;
  background: var(--color-orange);
  color: var(--color-white);
  font-family: inherit;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.3;
  cursor: pointer;
  transition: filter var(--transition-base), transform var(--transition-base);
}
.contato-form-submit:hover { filter: brightness(1.08); }
.contato-form-submit:hover img { transform: translateX(4px); }
.contato-form-submit img { width: 24px; height: 24px; transition: transform var(--transition-base); }

.contato-form-error { margin: 0; font-size: 14px; color: #FDAC83; }

.contato-form-feedback {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 12px;
  padding: 40px 32px;
}
.contato-form-feedback p { font-size: 18px; font-weight: 500; color: var(--color-white); margin: 0; }

/* Entrada animada (acima da dobra: não depende de IntersectionObserver). */
.contato-hero-text > *,
.contato-form-wrap {
  opacity: 0;
  transform: translateY(24px);
  animation: mercanet-hero-in 700ms ease forwards;
}
.contato-hero-text > :nth-child(1) { animation-delay: 100ms; }
.contato-hero-text > :nth-child(2) { animation-delay: 200ms; }
.contato-hero-text > :nth-child(3) { animation-delay: 300ms; }
.contato-form-wrap { animation-delay: 250ms; }
@media (prefers-reduced-motion: reduce) {
  .contato-hero-text > *,
  .contato-form-wrap { opacity: 1; transform: none; animation: none; }
}