/* 1. Contenedor principal y Form */
.kit-form-wrapper .formkit-form {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  row-gap: 12px !important;
  column-gap: 12px !important;
  max-width: 642px !important;
  margin: 0 auto 38px auto !important;
  position: relative !important;
  background: transparent !important; /* Quitamos fondos que pueda traer Kit */
}

/* Limpieza de contenedores internos de Kit que molestan al flex */
.kit-form-wrapper [data-style="clean"],
.kit-form-wrapper .formkit-fields {
  display: contents !important;
}

/* 2. Configuración de los campos (Wrappers) */
.kit-form-wrapper .formkit-field {
  margin-bottom: 0 !important;
  position: relative !important;
}

/* Nombre (180px) - Es el primer hijo de .formkit-fields */
.kit-form-wrapper .formkit-field:nth-child(1) {
  width: 180px !important;
  flex: 0 0 auto !important;
}

/* Email (Flexible) - Es el segundo hijo */
.kit-form-wrapper .formkit-field:nth-child(2) {
  flex: 1 0 0 !important;
  min-width: 200px !important;
}

/* 3. Estilo de los Inputs */
.kit-form-wrapper .formkit-input {
  position: relative !important;
  width: 100% !important;
  height: 46px !important;
  padding: 8px 10px !important;
  border-radius: 8px !important;
  border: 1px solid #A1A1A1 !important;
  background: #FFF !important;
  color: #000 !important;
  font-family: 'Karla', sans-serif !important;
  font-size: 16px !important; /* Ajustado para evitar zoom en iOS */
}

/* 4. Estilo del Botón Submit */
.kit-form-wrapper .formkit-submit {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  height: 46px !important; /* Para que coincida con los inputs */
  width: fit-content !important;
  border-radius: 12px !important;
  background-color: var(--cta-primary, #27446d) !important;
  color: #fff !important;
  border: none !important;
  cursor: pointer !important;
  margin-bottom: 0 !important;
}

/* El span interno del botón de Kit maneja el texto y padding */
.kit-form-wrapper .formkit-submit > span {
  padding: 10px 24px !important;
  font-family: 'Karla', sans-serif !important;
  font-size: 24px !important;
  font-weight: 400 !important;
  line-height: 130% !important;
  background: transparent !important;
}

.kit-form-wrapper .formkit-submit:hover {
  background-color: var(--cta-primary-hover) !important;
}

/* 5. Alertas de error/éxito (Similares al submitted-message) */
.kit-form-wrapper .formkit-alert {
  position: absolute !important;
  align-self: center
  width: 100% !important;
  border-radius: 12px !important;
  font-family: 'Karla', sans-serif !important;
  font-size: 20px !important;
  padding: 10px 24px !important;
  margin-top: 20px !important;
}

.kit-form-wrapper .formkit-alert-success {
  background-color: var(--cta-primary) !important;
  color: #fff !important;
  border: none !important;
}

/* 6. Responsive */
@media (max-width: 560px) {
  .kit-form-wrapper .formkit-field:nth-child(1),
  .kit-form-wrapper .formkit-field:nth-child(2),
  .kit-form-wrapper .formkit-submit {
    width: 100% !important;
    flex: 1 0 100% !important;
  }
  
  .kit-form-wrapper .formkit-submit > span {
    font-size: 16px !important;
  }
  
  .kit-form-wrapper .formkit-form { 
    flex-wrap: wrap !important;
  }
}