/* FORMULÁRIO - BACKGROUND GRADIENTE ANIMADO */

/* ===========================
   GRADIENTE ANIMADO COM CORES DA MARCA
   =========================== */

.form-split {
  position: relative;
  padding: 7rem 0; /* Aumentado de 5rem para 7rem */
  min-height: 700px; /* Altura mínima maior */
  overflow: hidden;
  background: linear-gradient(-45deg,
    var(--navy-dark),
    var(--navy),
    var(--blue),
    var(--navy-light),
    var(--navy-dark)
  );
  background-size: 400% 400%;
  animation: gradientShift 12s ease infinite;
}

/* Animação do gradiente */
@keyframes gradientShift {
  0% {
    background-position: 0% 50%;
  }
  25% {
    background-position: 50% 25%;
  }
  50% {
    background-position: 100% 50%;
  }
  75% {
    background-position: 50% 75%;
  }
  100% {
    background-position: 0% 50%;
  }
}

/* Overlay com padrão sutil */
.form-split::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image:
    radial-gradient(circle at 20% 80%, rgba(241, 90, 36, 0.15) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(255, 255, 255, 0.1) 0%, transparent 50%),
    radial-gradient(circle at 40% 40%, rgba(241, 90, 36, 0.08) 0%, transparent 50%);
  z-index: 1;
  animation: pulseOverlay 8s ease-in-out infinite;
}

/* Animação sutil do overlay */
@keyframes pulseOverlay {
  0%, 100% {
    opacity: 0.5;
  }
  50% {
    opacity: 1;
  }
}

/* Segundo overlay para profundidade */
.form-split::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(180deg,
    rgba(12, 59, 107, 0) 0%,
    rgba(12, 59, 107, 0.2) 50%,
    rgba(12, 59, 107, 0.3) 100%
  );
  z-index: 1;
}

/* Garante que o conteúdo fique acima */
.form-split .container {
  position: relative;
  z-index: 2;
}

/* Ajusta o padding interno para mais respiro */
.form-split-wrapper {
  padding: 2rem 0; /* Adiciona padding vertical interno */
}

/* Textos em branco para contraste */
.form-main-title {
  color: white !important;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

.form-description {
  color: rgba(255, 255, 255, 0.95) !important;
}

/* Cards com sombra mais forte */
.benefit-card {
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.benefit-card:hover {
  background: white;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
  transform: translateY(-8px);
}

/* Formulário com visual premium */
.form-right-content [data-respondi-container] {
  border: 2px solid rgba(255, 255, 255, 0.4) !important;
  background: rgba(255, 255, 255, 0.98) !important;
  box-shadow: 0 25px 70px rgba(0, 0, 0, 0.25) !important;
  backdrop-filter: blur(20px);
}

/* ===========================
   RESPONSIVIDADE
   =========================== */

/* Tablets */
@media (max-width: 1024px) {
  .form-split {
    padding: 6rem 0;
    min-height: auto;
  }

  @keyframes gradientShift {
    0% {
      background-position: 0% 50%;
    }
    50% {
      background-position: 100% 50%;
    }
    100% {
      background-position: 0% 50%;
    }
  }
}

/* Mobile */
@media (max-width: 768px) {
  .form-split {
    padding: 5rem 0;
    background-size: 300% 300%;
    animation-duration: 10s;
  }

  .form-split-wrapper {
    padding: 1rem 0;
  }

  /* Simplifica animação no mobile */
  @keyframes gradientShift {
    0%, 100% {
      background-position: 0% 0%;
    }
    50% {
      background-position: 100% 100%;
    }
  }
}

/* Performance - reduz animação para preferência do usuário */
@media (prefers-reduced-motion: reduce) {
  .form-split {
    animation: none;
    background: linear-gradient(135deg, var(--navy) 0%, var(--navy-dark) 100%);
  }

  .form-split::before {
    animation: none;
  }
}