/* Visual skin only. Form fields, names, and scripts stay as they are. */

#custom-regbox {
  padding-top: 0;
}

#main-container {
  max-width: none;
  width: 100%;
  margin: 0;
}

#custom-regbox .formHeader {
  display: none;
}

#custom-regbox .form-container {
  background: transparent;
  box-shadow: none;
  border-radius: 0;
}

#custom-regbox .formwrap-outer .intgrtn-form-signup {
  padding: 0;
}

#custom-regbox .intgrtn-step.intgrtn-active {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
}

#custom-regbox .intgrtn-input-holder {
  margin-bottom: 0;
}

#custom-regbox .intgrtn-input-holder-email,
#custom-regbox .intgrtn-input-holder-phone,
#custom-regbox .intgrtn-btn-go-to-step-holder {
  grid-column: 1 / -1;
}

#custom-regbox .intgrtn-input-holder::before {
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
  line-height: 1.2;
  color: var(--muted);
}

#custom-regbox .intgrtn-input-holder-first-name::before { content: "Nombre"; }
#custom-regbox .intgrtn-input-holder-last-name::before { content: "Apellido"; }
#custom-regbox .intgrtn-input-holder-email::before { content: "Correo"; }
#custom-regbox .intgrtn-input-holder-phone::before { content: "Teléfono"; }

#custom-regbox .formwrap-outer .intgrtn-form-signup .intgrtn-form-signup-3-steps .intgrtn-input-holder .intgrtn-input,
#custom-regbox .intgrtn-input {
  height: 52px;
  padding: 0 14px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, .14);
  background: rgba(255, 255, 255, .04);
  color: #fff;
  font: 500 16px var(--body);
  box-shadow: none;
}

#custom-regbox .intgrtn-input::placeholder {
  color: #7D7684;
}

#custom-regbox .intgrtn-input:focus {
  border-color: var(--pink);
}

.final #custom-regbox .intgrtn-input {
  height: 54px;
}

#custom-regbox .iti {
  display: block;
  width: 100%;
}

#custom-regbox .iti--separate-dial-code .iti__selected-flag {
  background: transparent;
}

#custom-regbox .iti--separate-dial-code .iti__selected-dial-code {
  color: #fff !important;
}

#custom-regbox .iti__arrow {
  border-top-color: #B9B3C0;
}

#custom-regbox .iti__arrow--up {
  border-bottom-color: #B9B3C0;
}

#custom-regbox .formwrap-outer .intgrtn-form-signup .intgrtn-form-signup-3-steps .intgrtn-btn-go-to-step {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 58px;
  margin-top: 6px;
  padding: 0 28px;
  border: 0;
  border-radius: 14px;
  background: var(--pink);
  color: var(--bg);
  font: 700 17px var(--body);
  letter-spacing: 0;
  text-transform: none;
  white-space: normal;
}

#custom-regbox .formwrap-outer .intgrtn-form-signup .intgrtn-form-signup-3-steps .intgrtn-btn-go-to-step:hover {
  background: var(--pink-h);
  color: var(--bg);
}

#custom-regbox .form-send .intgrtn-input.activeBad {
  background: rgba(255, 255, 255, .04) !important;
  color: #fff !important;
  border-color: #FF6B6B !important;
}

#custom-regbox .form-send .intgrtn-input.activeGood {
  background: rgba(255, 255, 255, .04) !important;
  color: #fff !important;
  border-color: #1F9D55 !important;
}

#registro .fine,
.final .fine {
  margin-top: 4px;
}
