/* Contato page - section intro */
#contato .section-intro {
  max-height: 515px;
  min-height: 0;
}

/* Contato page - formulário */
#contato .section-contato-form {
  width: 100%;
  display: flex;
  justify-content: center;
  padding: clamp(40px, 6vw, 80px) clamp(20px, 5vw, 60px);
  background-color: var(--color-white);
}

#contato .section-contato-form-inner {
  max-width: 800px;
  width: 100%;
}

#contato .section-contato-form-form {
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 3vw, 28px);
}

#contato .section-contato-form-feedback {
  margin: 0;
  padding: clamp(12px, 1.8vw, 16px);
  border: 1px solid var(--color-black);
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-16);
}

#contato .section-contato-form-feedback.is-success {
  color: #1f6a3a;
  border-color: #1f6a3a;
  background-color: #f0fbf4;
}

#contato .section-contato-form-feedback.is-error {
  color: #8a1f1f;
  border-color: #8a1f1f;
  background-color: #fff3f3;
}

#contato .section-contato-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(16px, 2vw, 24px);
}

#contato .section-contato-form-row:has(.section-contato-form-textarea),
#contato .section-contato-form-row:has(.section-contato-form-button) {
  grid-template-columns: 1fr;
}

#contato .section-contato-form-row:has(.section-contato-form-button) {
  align-items: start;
}

#contato .section-contato-form-input,
#contato .section-contato-form-textarea {
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-16);
  color: var(--color-black);
  background-color: var(--color-white);
  border: 1px solid var(--color-black);
  padding: clamp(12px, 2vw, 16px) clamp(14px, 2vw, 20px);
  width: 100%;
  box-sizing: border-box;
}

#contato .section-contato-form-input::placeholder,
#contato .section-contato-form-textarea::placeholder {
  color: var(--color-black);
}

#contato .section-contato-form-textarea {
  min-height: 120px;
  resize: vertical;
}

#contato .section-contato-form-button {
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-16);
  font-weight: 500;
  color: var(--color-black);
  text-transform: uppercase;
  letter-spacing: 1px;
  background-color: var(--color-white);
  border: 1px solid var(--color-black);
  padding: clamp(14px, 2vw, 18px) clamp(28px, 4vw, 40px);
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease;
}

#contato .section-contato-form-button:hover {
  background-color: var(--color-text-hover);
  color: var(--color-white);
  border-color: var(--color-text-hover);
}

@media (max-width: 600px) {
  #contato .section-contato-form-row {
    grid-template-columns: 1fr;
  }
}

/* ========================================
   Contato motion
   ======================================== */

#contato .topo-title {
  animation: contato-hero-in 1s cubic-bezier(0.16, 1, 0.3, 1) 0.12s both;
}

#contato .topo-subtitle {
  animation: contato-hero-in 1s cubic-bezier(0.16, 1, 0.3, 1) 0.28s both;
}

@keyframes contato-hero-in {
  from {
    opacity: 0;
    transform: translateY(28px);
    clip-path: inset(0 0 100% 0);
  }
  to {
    opacity: 1;
    transform: translateY(0);
    clip-path: inset(0 0 0 0);
  }
}

#contato.contato-motion-enabled .contato-motion-item {
  opacity: 1;
  transform: translateY(0);
  clip-path: inset(0 0 0 0);
  transition:
    opacity 0.7s ease,
    transform 0.9s cubic-bezier(0.16, 1, 0.3, 1),
    clip-path 0.9s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: var(--contato-motion-delay, 0ms);
}

#contato.contato-motion-enabled .contato-motion-pending .contato-motion-item {
  opacity: 0;
  transform: translateY(28px);
  clip-path: inset(0 0 100% 0);
}

#contato.contato-motion-enabled .contato-motion-card {
  opacity: 1;
  transform: none;
  transition:
    opacity 0.72s ease,
    transform 0.85s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: var(--contato-motion-delay, 0ms);
}

#contato.contato-motion-enabled .contato-motion-pending .contato-motion-card {
  opacity: 0;
  transform: translateY(24px);
}

@media (prefers-reduced-motion: reduce) {
  #contato .topo-title,
  #contato .topo-subtitle,
  #contato .scroll-indicator {
    animation: none !important;
  }

  #contato .contato-motion-item,
  #contato .contato-motion-card {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
  }
}