* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  scroll-behavior: smooth;
}

:root {
  --blue-color: #0c369c;
  --nav-color: #121C44;
  --dark-blue-color: #011f62;
  --light-blue-highlight: #2ed9c3;
  --button-color: #1814f3;
  --grey-highlight: #606060;
}

body {
  font-family: "Montserrat", sans-serif;
  position: relative;
  background-color: #ffffff;
}

/*Begin: Navbar */

nav {
  background-color: var(--nav-color);
  box-shadow: 0px 4px 6px 0px rgba(0, 50, 160, 0.2);
}

.nav_container {
  max-width: 1440px;
  padding: 24px 5px 24px 5px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.nav_logo_wrapper img {
  width: 110px;
}
.nav_date_wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.date__image {
  width: 90px;
}
.date__text__image {
  width: 90px;
}

/*Begin: TimeLine*/
.timeLine_wrapper {
  margin: 0 auto;
  max-width: 1017px;
  width: 100%;
  display: flex;
  justify-content: space-between;
  position: relative;
  transition: opacity 0.5s ease, height 0.5s ease;
  opacity: 0;
}

.timeLine_number {
  position: relative;
  z-index: 2;
}

.form_number_circle {
  border: 2px solid #5e6787;
  border-radius: 100%;
  width: 80px;
  height: 80px;
  background-color: #ffffff;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 1.5s ease-in;
}

.form_number {
  color: #7c7c7c;
  font-weight: 700;
  font-size: 2.5rem;
  transition: color 1.5s ease-in;
}

.form_number_circle.active {
  background-color: #0033A0;
  border: 2px solid #0033A0;
}

.form_number_circle.active .form_number {
  color: #ffffff;
}

.timeLine_number .number_blue {
  position: absolute;
  left: 0;
  z-index: 3;
  opacity: 0;
  width: 80px;
  height: 80px;
}

#uno_check,
#dos_check,
#tres_check {
  transition: opacity 0.5s ease;
  position: absolute;
  top: 0;
}

.timeLine_line {
  position: absolute;
  width: 100%;
  height: 3px;
  background-color: #606060;
  z-index: 1;
  transform: translateY(-50%);
  top: 50%;
}

.car_wrapper {
  position: absolute;
  left: 0%;
  top: 21px;
  opacity: 0;
  width: 40px;
  filter: drop-shadow(2px 4px 6px rgba(0, 50, 160, 0.2));
}
.car_wrapper > img {
  width: 100%;
}
.car_wrapper.move_step_2 {
  animation: drive-car-middle 3s forwards;
}

.car_wrapper.move_step_3 {
  animation: drive-car-end 3s forwards;
}

@keyframes drive-car-middle {
  0% {
    left: 0;
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  95% {
    opacity: 0;
  }
  100% {
    opacity: 0;
    left: 50%;
  }
}

@keyframes drive-car-end {
  0% {
    left: 50%;
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  95% {
    opacity: 0;
  }
  100% {
    opacity: 0;
    left: 90%;
  }
}

/* Form */
.container {
  max-width: 1226px;
  width: 100%;
  margin: 0 auto;
  padding-top: 1rem;
  padding-bottom: 2rem;
}

.container_questions {
  max-width: 1017px;
  margin: 0 auto;
}

.form_section {
  max-width: 1440px;
  margin: 0 auto;
  overflow: hidden;
  position: relative;
  padding-bottom: 4rem;
  min-height: 79.1dvh;
}

.step-1 {
  z-index: 2;
  background-color: #ffffff;
  opacity: 1;
  right: -500px;
  padding-top: 10px;
  transition: all 1s ease;
}

.step-1.swapping,
.step-2.swapping,
.step-3.swapping {
  animation: fade-out 500ms forwards;
}

.step-1.hide {
  display: none;
}

.step-2 {
  padding-top: 10px;
}

.step-3 {
  padding-top: 10px;
}

.step-2,
.step-3,
.step-4 {
  display: none;
  z-index: 2;
  background-color: #ffffff;
  animation: fade-in 500ms forwards;
}

.step-2.show {
  display: block;
  opacity: 1;
  right: 0px;
}

.step-2-.hide {
  display: none;
}

.step-3.show {
  display: block;
  opacity: 1;
  right: 0px;
}

.step-3-hide {
  display: none;
}

.step-4.show {
  display: block;
  opacity: 1;
  right: 0px;
}

/* Animations */
@keyframes fade-in {
  0% {
    opacity: 0;
    transform: translateX(100%);
  }
  90% {
    transform: translateX(0);
  }
  100% {
    opacity: 1;
  }
}

@keyframes fade-out {
  0% {
    opacity: 1;
    transform: translateX(0);
  }
  90% {
    transform: translateX(-100%);
  }

  100% {
    opacity: 0;
  }
}

.form_title {
  font-size: 1.7rem;
  font-weight: 700;
  color: var(--grey-highlight);
}

.form_desc_wrapper {
  padding-top: 13px;
}

.form_desc {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--grey-highlight);
}

.text-red {
  color: #f00;
}

.form_control {
  display: flex;
  column-gap: 16px;
  row-gap: 16px;
}

.form_control.telefono {
  padding-top: 28px;
  padding-bottom: 22px;
}

.form_control.checkbox {
  padding-top: 11px;
  padding-bottom: 34px;
}

.form_email_subtitle_wrapper {
  padding-top: 5px;
  padding-bottom: 7px
}

.form-field {
  display: flex;
  flex-direction: column;
  width: 50%;
  max-width: 495px;
}

.form-field.full-width {
  width: 100%;
  max-width: none;
}

.form_label {
  font-size: 14px;
  font-weight: 500;
  color: var(--grey-highlight);
  padding-bottom: 8px;
}

.form_label.error {
  color: #f00;
}

.form_input_wrapper {
  position: relative;
  width: 90%;
}


.form_input {
  border: 2px solid #E0E0E0;
  background-color: white;
  border-radius: 5px;
  font-size: 14px !important;
  padding: 14px;
  outline: none;
  width: 100%;
  font-family: "Montserrat", sans-serif;
  height: 50px !important;
}
.email_invite {
  width: 100%;
}
.form_input::placeholder {
  font-size: 14px !important;
}
.checkbox-wsp,
.container-radio,
.container-checkbox-q {
  outline: none;
}

.form_input:focus,
/* .checkbox-wsp:focus, */
.container-radio:focus,
/* .container-checkbox-q:focus, */
.form-element:focus,
.primary_button:focus,
.select:focus,
.opcion:focus {
  box-shadow: 0 0 0 .15rem rgba(122, 122, 122, 0.25);
}

.form_input::placeholder {
  font-size: 1rem;
  font-weight: 400;
  color: #c4c4c4;
  font-family: Montserrat, sans-serif;
}

.form_input.error,
.select.error,
.radios.error {
  border: 1px solid #f30000;
}

.hero_input_result {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  right: 10px;
}
.hero_input_result_select {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  right: 22px;
}

.icon_ok,
.icon_error,
.icon_ok_conf,
.icon_error_conf {
  opacity: 0;
}

.active {
  opacity: 1;
}

.pb-email {
  padding-bottom: 18px;
}

.linkedin_field {
  padding-top: 15px;
  padding-bottom: 15px;
}

.form_subtitle_wrapper {
  padding-top: 27px;
}

.form_subtitle {
  font-size: 1rem;
  font-weight: 700;
  color: var(--grey-highlight);
}

.form_select {
  display: flex;
  flex-direction: column;
  width: 50%;
  max-width: 175px;
}

.form_select.just_data {
  max-width: 495px;
}

.form_emails_wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  /* Equal-width columns */
  grid-gap: 18px;
  /* Gap between columns */
  padding-right: 40px;
  padding-bottom: 29px;
  position: relative;
}

.plus_symbol_wrapper {
  cursor: pointer;
  right: 0;
  bottom: 38px;
  z-index: 55;
  transition: transform 0.5s ease;
  position: absolute;
}

.plus_symbol_wrapper:hover {
  transform: scale(1.1);
  transition: transform 0.5s ease;
}

.plus_symbol_wrapper > img {
  width: 24px;
}

.form-field.emails {
  width: 100%;
  max-width: none;
}
.policies_wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
}

.policies_wrapper input[type="checkbox"] {
  display: none;
}

.policies_wrapper input[type="checkbox"] + label {
  border: 2px solid #7C7C7C;
  outline: 2px solid white;
  height: 18px;
  width: 18px;
  display: inline-block;
  padding: 0;
  cursor: pointer;
  flex-shrink: 0;
}

.policies_wrapper input[type="checkbox"]:checked + label {
  /*background:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAlElEQVQ4T6WTXQ2AMAwGDwdIQAISQAEWsIQCQAkWkIAEJJCSNCljP7Dtdblb26+rKDxVIU+uoAY2YMoRKNwC61/BAwbGP4IXLPP7KvDCVtAARyCRIKyCBRiAHtgdSRRWwQjMwOlIkrBtwZVIO5LzHZVMO7RwdohWIoIk7EtBJXIXfVkr8sUoki5Wtm3n6x4E/1yx4AI+qiERKNFzCwAAAABJRU5ErkJggg==") #FFFFFF;*/
  background: url("./assets/icons/check.svg") #FFFFFF;
  height: 18px;
  width: 18px;
  display: inline-block;
  padding: 0;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.checkpolicies_error{
  border: 2px solid red !important;
}
.checkpolicies_error_text, .checkpolicies_error_text a{
  color: red !important;
}
.privacy_policy_text {
   font-size: 0.875rem;
   font-weight: 500;
   color: #7c7c7c;
   margin-top: 1rem;
   cursor: pointer;
}


.privacy_policy_link {
  color: #7c7c7c;
}

.button_wrapper {
  padding-top: 59px;
  padding-bottom: 60px;
  display: flex;
  justify-content: center;
}

.primary_button {
  background-color: #ff7b1c;
  font-size: 1rem;
  font-weight: 600;
  text-transform: uppercase;
  text-align: center;
  color: white;
  transition: all 0.4s ease;
  padding: 15px 26px;
  border-radius: 5px;
  column-gap: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border: 1px solid #ff7b1c;
  outline: none;
}

.primary_button:hover {
  background-color: #f1741a;
  transition: all 0.4s;
}

/*Begin:  Select Box */
.selectbox {
  width: 100%;
  /*    margin: 0 auto; */
  height: 100%;
  position: relative;
}

.select {
  background: white;
  width: 90%;
/*    max-width: 175px; */
  height: 50px !important;
  border-radius: 5px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 6px;
  padding-bottom: 6px;
  padding-left: 13px;
  padding-right: 7px;
  position: relative;
  z-index: 200;
  border: 2px solid #E0E0E0;
  outline: none;
}

.select.just_data {
  padding-top: 14px;
  padding-bottom: 14px;
  max-width: 495px;
}

.titulo {
  color: #c4c4c4;
  font-family: Montserrat;
  font-size: 14px !important;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}

.titulo.option {
  color: var(--grey-highlight);
}

.opciones {
  background: #fff;
  border-radius: 5px;
  border-top-left-radius: 0px;
  border-top-right-radius: 0px;
  box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.16);
  max-height: 400px;
  overflow: auto;
  z-index: 999;
  width: 90%;
  display: none;
  position: absolute;
}

.opciones.active {
  display: block;
}

.contenido-opcion {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 2px;
}

.opcion {
  text-decoration: none;
  outline: none;
}

.opciones .contenido-opcion {
  padding-left: 5px;
  padding-top: 7px;
  padding-bottom: 7px;
}

.contenido-opcion img {
  width: 33px;
  height: 33px;
  margin-right: 17px;
}

.opciones .contenido-opcion:hover {
  background: #e0e0e0;
}

.opciones .contenido-opcion:hover .titulo,
.opciones .contenido-opcion:hover .descripcion {
  color: var(--grey-highlight);
}

/*End:  Select Box */

/*Begin: Checkbox */

.checkbox-wsp input[type="checkbox"] {
  display: none;
}

.checkbox-wsp input[type="checkbox"] + label {
  border: 2px solid #7C7C7C;
  outline: 2px solid white;
  height: 18px;
  width: 18px;
  display: inline-block;
  padding: 0;
  cursor: pointer;
}

.checkbox-wsp input[type="checkbox"]:checked + label {
  /*background:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAlElEQVQ4T6WTXQ2AMAwGDwdIQAISQAEWsIQCQAkWkIAEJJCSNCljP7Dtdblb26+rKDxVIU+uoAY2YMoRKNwC61/BAwbGP4IXLPP7KvDCVtAARyCRIKyCBRiAHtgdSRRWwQjMwOlIkrBtwZVIO5LzHZVMO7RwdohWIoIk7EtBJXIXfVkr8sUoki5Wtm3n6x4E/1yx4AI+qiERKNFzCwAAAABJRU5ErkJggg==") #FFFFFF;*/
  background: url("./assets/icons/check.svg") #FFFFFF;
  height: 18px;
  width: 18px;
  display: inline-block;
  padding: 0;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.checkbox-text {
  position: relative;
  padding: 0 6px;
  top: -4px;
  cursor: pointer;
}

/*End: Checkbox */

/* Step 3 */
.form_question1_wrapper {
  padding-top: 21px;
  padding-bottom: 17px;
}

.form_question {
  font-size: 1.125rem;
  color: var(--grey-highlight);
  font-weight: 600;
}

.form_question2_wrapper {
  padding-top: 12px;
  padding-bottom: 23px;
}

.form_question3_wrapper {
  padding-top: 25px;
  padding-bottom: 23px;
}
.form_question4_wrapper {
   padding-top: 16px;
   padding-bottom: 12px;
   display: flex;
   flex-direction: column;
   gap: 1.1rem;
}

#question3_container {
  display: none;
}
#question3_container.show {
  display: block;
}
#question_training_categories_container{
   display: none;
}
#question_training_categories_container.show{
   display: block;
}

.form_question_subtitle {
  color: #9b9b9b;
  font-style: italic;
  font-weight: 500;
  font-size: 0.875rem;
  padding-left: 20px;
}

/* Begin: Radio Buttons */
.form_radio_buttons_container {
  padding-left: 20px;
}

.container-radio {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 1rem;
  font-weight: 400;
  color: var(--grey-highlight);
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Hide the browser's default radio button */
.container-radio input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

/* Create a custom radio button */
.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 25px;
  width: 25px;
  border-radius: 50%;
  border: 2px solid #e0e0e0;
}

/* On mouse-over, add a grey background color */
.container-radio:hover input ~ .checkmark {
  background-color: #e0e0e0;
}

/* When the radio button is checked, add a blue background */
/* .container-radio input:checked ~ .checkmark {
  background-color: white;
} */

/* Create the indicator (the dot/circle - hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the indicator (dot/circle) when checked */
.container-radio input:checked ~ .checkmark:after {
  display: block;
}

/* Style the indicator (dot/circle) */
.container-radio .checkmark:after {
  top: 2px;
  left: 2px;
  width: 15px;
  height: 15px;
  border: 1px solid #0033a0;
  border-radius: 50%;
  background: #0033a0;
}

/* Ënd: Radio Buttons */

/* Begin: Checkbox Question */
.form_checkbox_buttons_container {
  padding-left: 20px;
}

.form_checkbox_buttons_container-2 {
  display: flex;
  justify-content: space-between;
}
.form_checkbox_buttons_container_training {
  display: flex;
}

.container-checkbox-q {
  display: block;
  position: relative;
  padding-left: 50px;
  padding-bottom: 10px;
  margin-bottom: 12px;
  cursor: pointer;
  color: var(--grey-highlight);
  font-weight: 400;
  font-size: 1rem;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  overflow-wrap: break-word;
}

.container-checkbox-q input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

.checkmark-q {
  position: absolute;
  top: 0;
  left: 0;
  height: 25px;
  width: 25px;
  border-radius: 5px;
  /* background-color: white; */
  border: 2px solid #e0e0e0;
}

.container-checkbox-q:hover input ~ .checkmark-q {
  background-color: #e0e0e0;
}

/* .container-checkbox-q input:checked ~ .checkmark-q {
  background-color: white;
} */

.checkmark-q:after {
  content: "";
  position: absolute;
  display: none;
}

.container-checkbox-q input:checked ~ .checkmark-q:after {
  display: block;
}

.container-checkbox-q .checkmark-q:after {
  left: 7px;
  top: 3px;
  width: 5px;
  height: 10px;
  border: solid #0033a0;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

#checkbox_otro {
  display: flex;
}

#checkbox_otro input {
  width: 40%;
  margin-left: 20px;
  outline: none;
  border: 1px solid #d9d9d9;
  border-radius: 5px;
  color: var(--grey-highlight);
}

#input_otro_hidden {
  position: relative;
  width: 100%;
  height: auto;
  opacity: 1;
  display: none;
}

/* End: Checkbox Question */

/* Begin: Checkbox Cards */

.form_checkboxCard_buttons_container {
  display: flex;
  flex-wrap: wrap;
  row-gap: 37px;

  column-gap: 37px;
}

.form-element {
  position: relative;
  width: 100%;
  max-width: 150px;
  height: auto;
  outline: none;
  border-radius: 10px;
}

.form-element input {
  display: none;
}

.form-element label {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  cursor: pointer;
  border: 1px solid #ddd;
  background: #fff;
  box-shadow: 0px 5px 20px 2px rgba(0, 0, 0, 0.1);
  text-align: center;
  transition: all 200ms ease-in-out;
  border-radius: 10px;
}

.form-element .icon {
  font-size: 30px;
  overflow: hidden;
  transition: all 200ms ease-in-out;
}

.form-element .icon img {
  width: 100%;
  height: 80px;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}

.checkbox_img_desktop {
  display: block;
}

.checkbox_img_mobile {
  display: none;
}
.form-element .title {
  font-size: 0.875rem;
  color: var(--grey-highlight);
  padding: 38px 16px 11px 16px;
  text-align: left;
  font-weight: 600;
  transition: all 200ms ease-in-out;
}

.form-element label:before {
  content: url("./assets/icons/check-white.svg");
  position: absolute;
  width: 19px;
  height: 19px;
  top: 117px;
  left: 18px;
  background: #0033a0;
  color: #fff;
  text-align: center;
  line-height: 18px;
  font-size: 14px;
  font-weight: 600;
  border-radius: 5px;
  opacity: 0;
  transform: scale(0.5);
  transition: all 200ms ease-in-out;
}

.form-element label:after {
  content: "";
  position: absolute;
  width: 18px;
  height: 18px;
  top: 115px;
  left: 16px;
  background: transparent;
  color: #fff;
  text-align: center;
  border-radius: 5px;
  /*border: 1px solid #E0E0E0;*/
  border: 2px solid #e0e0e0;
  opacity: 1;
}

.subscription_tag_wrapper {
  opacity: 0;
}

.subscription_tag {
  border: 1px solid var(--nav-color);
  background-color: var(--nav-color);
  border-bottom-right-radius: 5px;
  border-bottom-left-radius: 5px;
  padding-top: 6px;
  padding-bottom: 6px;
  width: 100%;
}

.subscription_tag p {
  text-align: center;
  font-size: 0.75rem;
  font-weight: 600;
  color: #fafbff;
  text-transform: uppercase;
}
.subscription_monthly {
  background-color: white;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  width: 89px;
  height: 22px;
  position: absolute;
  top: 12px;
  display: flex;
  align-items: center;
  padding-left: 8px;
  gap: 4px;
  box-shadow: 0px 4px 4px 0px #00000040;
}
.subscription_monthly > div {
  width: 12px;
  height: 12px;
  background-color: var(--grey-highlight);
  border-radius: 100%;
  flex-shrink: 0;
}
.subscription_monthly > p {
  font-size: 12px;
  font-weight: 500;
  color: var(--grey-highlight);
}

.form-element input:checked + label:before {
  opacity: 1;
  transform: scale(1);
}

.form-element input:checked + label .icon {
  color: #0d0df1;
}

.form-element input:checked + label .subscription_tag_wrapper {
  opacity: 1;
}

.form-element input:checked + label {
  background-color: #e8e8e8;
}

/* End: Checkbox Cards */

/* Begin: Last Stept */
.step_4_wrapper {
  display: flex;
  justify-content: center;
  padding-top: 0.5rem;
}
.step_4_title_contain {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.1rem;
}
.step_4_title_contain > img {
  width: 34px;
  height: 34px;
}
.step4_credential_linkedin_wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.step_4_column_1 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.3rem;
  width: 100%;
}

.step_4_column_2 {
  width: 39%;
}

.step_4_text_code {
  font-size: 1rem;
  color: var(--grey-highlight);
  font-weight: 400;
  line-height: 150%;
}

.step_4_desc_link {
  font-size: 1rem;
  color: var(--nav-color);
  font-weight: 400;
  line-height: 150%;
  font-weight: bold;
  text-decoration: none;
}
.step_4_linkedin_container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 0.6rem;
}
.step_4_linkedin_link {
  text-decoration: none;
  border: none;
  cursor: pointer;
  background-color: transparent;
}
.step_4_linkedin_text {
  color: var(--grey-highlight);
  font-size: 22px;
  line-height: 33px;
  font-weight: 700;
  text-align: center;
  margin-top: 8px;
}
 .step_4_share_buttons {
   text-decoration: none;
   border: none;
   background-color: #0a66c2;
   border-radius: 40px !important;
   border: 2px solid #0a66c2;
   display: flex;
   justify-content: center;
   align-items: center;
   padding: 10px 26px;
   height: 50px !important;
   width: 270px;
   cursor: pointer;
 }
 .step_4_share_buttons_hidden {
   display: none;
 }
 
 .step_4_share_buttons:hover {
   opacity: 0.9;
 }

 #share-facebook{
   background-color: #3B5998;
   border: 2px solid #3B5998; 
 }
 #share-facebook > img{
  width: 120px !important;
 }
 #share-whatsapp{
   background-color: #26d367;
   border: 2px solid #26d367; 
 }
 #share-whatsapp > img{
  width: 120px !important;
 }
.step_4_linkedin_wrapper {
  background-color: #0a66c2;
  border-radius: 10px;
  border: 2px solid #0a66c2;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: 10px 26px;
  height: 57px;
}

.step_4_linkedin_wrapper:hover {
  opacity: 0.9;
}

.step_4_linkedin_wrapper p {
  color: white;
  font-size: 19px;
  font-weight: 500;
  /* font-family: ; */
}
.step_4_linkedin_wrapper > img {
  width: 31px;
  height: 35px;
}

#share-whatsapp{
  background-color: #26d367;
  border-radius: 10px;
   border: 2px solid #26d367; 
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: 10px 26px;
  height: 57px;
}
#share-whatsapp img {
  width: 35px ;
  height: 35px ;
}
.step_4_wsp_wrapper {
  background-color: #26d367;
  border-radius: 10px;
   border: 2px solid #26d367; 
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: 10px 26px;
  height: 57px;
   } 

.step_4_wsp_wrapper > img {
  width: 35px ;
  height: 35px ;
}

.step_4_download_wrapper {
  margin-top: 16px;
  margin-bottom: 44px;
  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
  display: flex;
  padding-top: 22px;
  padding-left: 22px;
  padding-right: 21px;
  padding-bottom: 45px;
  justify-content: space-between;
  background-color: #024c8f;
    border-radius: 5px;
    background-image: url(./assets/img/cellphone.png);
    background-size: cover;
    background-position: right center;
    background-repeat: no-repeat;
}
.step_4_download_left {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.step_4_download_left p {
  font-size: 1.25rem;
  font-weight: 600;
  color: white;
}

.step_4_download_buttons {
  padding-top: 20px;
  display: flex;
  flex-direction: column;
}
.app_wrapper {
  width: 110px;
}

.step_4_download_buttons img {
  width: 100%;
}

.step_4_download_right {
  padding-left: 5px;
}

.step_4_download_right p {
 color: white;
  font-size: 0.75rem;
  font-weight: 600;
  padding-bottom: 3px;
  text-align: center;
}

.step_4_separator_wrapper {
   display: flex;
   justify-content: start;
   width: 100%;
}

.step_4_separator {
   height: 5px;
   background: #5E6787;
   width: 150px;
}

.step_4_separator {
  height: 5px;
  background: #5e6787;
  width: 100%;
  max-width: 160px;
}
.step_4_requirements_wrapper ul {
  list-style-type: none;
  display: flex;
  flex-direction: column;
  row-gap: 20px;
  padding-top: 1rem;
}

.step_4_requirements_wrapper li {
  display: flex;
  align-items: start;
  column-gap: 12px;
}
.step_4_requirements_wrapper li:nth-child(2) {
  align-items: start;
}

.step_4_requirements_wrapper p {
  color: var(--grey-highlight);
  font-size: 1rem;
  line-height: 144%;
}

.text_orange {
  color: #ff7b1c;
  font-weight: 700;
}
.text_cyan {
  color: #00B2E3;
  font-weight: 700;
}

.step_4_req_img_wrapper {
  max-width: 32px;
  width: 100%;
}

.step_4_req_img_wrapper img {
  width: 100%;
}

.step_4_credential {
  border-radius: 30px;
  border: 1px solid #dedede;
  background: white;
  padding-top: 18px;
  width: 275px;
}

.credential_logo_wrapper {
  margin: 0 auto;
  text-align: center;
}

.credential_logo_wrapper img {
  max-width: 220px;
  width: 100%;
}

.credential_name_wrapper {
  color: #000000;
  padding-top: 5px;
  padding-left: 5px;
  padding-right: 5px;
  font-size: 24px;
  text-align: center;
  font-weight: 700;
  font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande",
    "Lucida Sans", Arial, sans-serif;
  display: flex;
  justify-content: center;
}

.credential_codigo_wrapper {
  padding-top: 15px;
  padding-bottom: 25px;
  text-align: center;
}

.credential_codigo_wrapper {
  display: flex;
  justify-content: center;
  column-gap: 5px;
}

.credential_codigo_title {
  font-weight: 700;
  color: #333;
  font-size: 1, 125rem;
}

.credential_codigo_number {
  font-weight: 700;
  color: #00b2ed;
  font-size: 1, 125rem;
}

.credential_qr_wrapper {
  text-align: center;
  padding-bottom: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.credential_qr_wrapper img {
  width: 100%;
  max-width: 200px;
  border: 1px solid #DEDEDE;
}

.credential_footer {
  border: 1px solid #dedede;
  padding-top: 12px;
  padding-bottom: 12px;
  text-align: center;
  border-bottom-left-radius: 30px;
  border-bottom-right-radius: 30px;
}

.credential_footer p {
  font-size: 24px;
  font-weight: 700;
  color: white;
}

/* End: Last Stept */

/*Begin: Footer */
footer {
  background-color: var(--dark-blue-color);
  padding-top: 15px;
  padding-bottom: 16px;
  padding-left: 10px;
  padding-right: 10px;
  position: relative;
}

.footer_text {
  color: white;
  text-align: center;
  font-size: 0.8125rem;
  animation: fade-in 500ms forwards;
}

/* SELECT CUSTOM CODE */

details {
  position: relative;
  width: 300px;
  margin-right: 1rem;
  width: 100%;
}

details[open] {
  z-index: 999;
  width: 100%;
}

.custom-select summary {
	cursor: pointer;
	border-radius: 5px;
	background-color: white;
	list-style: none !important;
   list-style-type: none !important;
   border: 2px solid #E0E0E0;
   padding-left: 13px;
   padding-top: 12px;
   padding-bottom: 12px;
   padding-right: 40px;
   width: 90%;
   min-height: 50px !important;
   color: var(--grey-highlight);
   display: block;
   position: relative;
}


.custom-select > summary::-webkit-details-marker {
  display: none !important;
}
.custom-select > summary::marker {
  display: none !important;
}
details[open] summary:before {
  content: "";
  display: block;
  width: 100vw;
  height: 100vh;
  background: transparent;
  position: fixed;
  top: 0;
  left: 0;
}

.arrow_select {
  position: absolute !important;
  right: 7px !important;
  top: 38%;
}

.custom-select summary:focus {
  outline: none;
  box-shadow: 0 0 0 .15rem rgba(122, 122, 122, 0.25);
}

details[open] summary:after {
  transform: rotate(-45deg) translate(0%, 0%);
}

.custom-select ul {
  background: white;
  position: absolute;
  top: calc(100% + 0.1rem);
  left: 0;
  margin: 0;
  box-sizing: border-box;
  border-radius: 5px;
  max-height: 200px;
  overflow-y: auto;
  list-style-type: none;
  box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.16);
  border-top-left-radius: 0px;
  border-top-right-radius: 0px;
  border-radius: 0px 0px 5px 5px;
  max-height: 320px;
  width: 90%;
  border: 2px solid rgb(216, 216, 216);
  border-top: none;
}

.list-select-step3{
   max-width: 460px !important;
}

.custom-select li {
  margin: 0;
  padding: 0;
  /*border-bottom: 1px solid #ccc;*/
}

.custom-select li label {
  color: var(--grey-highlight);
  font-family: Montserrat;
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  width: 100%;
  height: 40px;
  padding: 10px;
}
/*
.custom-select li:first-child {
	padding-top: 0;
}

.custom-select li:last-child {
	padding-bottom: 0;
	border-bottom: none;
}
*/
.custom-select li:hover {
  background: #e0e0e0;
}
/* FAKE SELECT */

.custom-select summary.radios {
  counter-reset: radios;
}

.custom-select summary.radios:before {
  content: var(--selection);
}

.custom-select input[type="radio"] {
  counter-increment: radios;
  appearance: none;
  -webkit-appearance: none !important;
  display: none;
  /*    width: 80%; */
}

.custom-select input[type="radio"]:checked {
  display: inline;
  /* --display: block; */
  /* display: block; */
}

.custom-select input[type="radio"]:after {
  content: attr(title);
  display: inline;
  color: var(--grey-highlight);
  font-family: "Montserrat", sans-serif;
  font-size: 14px !important;
}

.select_placeholder {
  cursor: pointer;
}
.select_placeholder2 {
  cursor: pointer;
}

.custom-select ul.list {
  counter-reset: labels;
}

.custom-select label {
  width: 100%;
  display: flex;
  cursor: pointer;
  justify-content: space-between;
  align-items: center;
}

.custom-select label span {
  --display: none;
  display: var(--display);
  width: 1rem;
  height: 1rem;
  border: 1px solid #727272;
  border-radius: 3px;
}

.colonia_mex,
.delegation_noMex {
  display: none;
}

/* .divThatReplaceDetails{
   height: 300px;
   border: 1px solid green;
} */

.miClase {
  background-color: red;
}
.hiddenImageNewDiv {
  display: none;
}
.newDivSummary {
  background-color: rgb(223, 223, 223) !important;
}

.li__countries {
  display: flex;
  align-items: center;
  padding-left: 3px !important;
}
.li__countries > span {
  height: 25px !important;
}

.radio__countries {
  display: flex;
  align-items: center;
  gap: 5px;
}

.other__input__text {
  /* position: absolute;
  height: 32px;
  width: 90%; */
  border: 2px solid #E0E0E0;
  background-color: white;
  border-radius: 5px;
  margin-right: 18px;
  color: var(--grey-highlight);
  font-size: 1.125rem;
  padding: 5px;
  font-family: "Montserrat", sans-serif;
  font-size: 15px;
  font-weight: 500;
  /* box-shadow: 0px 4px 10px 0px #868daa33; */
}
.other__input__text:focus {
  outline: none;
  box-shadow: 0 0 0 .15rem rgba(122, 122, 122, 0.25);
}

.email__disabled {
  background-color: rgb(223, 223, 223) !important;
}
.validation__step4 {
  color: red;
}
.span__validation__step4 {
  border: 2px solid red !important;
}
.credential__type__plata {
  background: linear-gradient(to right, #d3d3d3, #b4b4b4) !important;
  -webkit-background-clip: text;
  color: transparent;
}
.credential__type__dorado {
  background: linear-gradient(to right, #DFBD69, #926F34) !important;
  -webkit-background-clip: text;
  color: transparent;
}
.credential__type__invitado {
  background: #00b2ed;
}
.other__selects__text__validator {
  color: red !important;
}
.other__selects__validator {
  border: 1px solid red !important;
}
.hidden__flag {
  display: none;
}
.show__flag {
  display: inline !important;
}
.radio__error {
  border: 2px solid red;
}
.form_select_countries_code {
  width: 100%;
  max-width: 1000px;
}
.inputs__width__mobile {
  width: 100%;
  max-width: 700px;
}
.hidden__plus__symbol {
  display: none;
}
.parrafo__phone__code {
  font-family: "Montserrat", sans-serif;
  color: var(--grey-highlight);
  font-size: 14px;
  font-weight: 700;
  padding-top: 3px;
  padding-bottom: 3px;
  padding-left: 8px;
}
.button__info {
  text-decoration: none;
  background-color: #ff7b1c;
  color: #ffffff;
  width: 90%;
  max-width: 300px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 5px;
  transition: all 0.4s ease-in-out;
}
.button__info:hover {
  background-color: #f1741a;
  transition: all 0.4s ease-in-out;
}
.button__info-movil {
  margin-bottom: 1.5rem;
  align-self: center;
}
.button__info-desktop {
  display: none;
}
.loader__container {
  width: 100%;
  background-color: rgba(73, 73, 73, 0.425);
  height: 100vh;
  position: fixed;
  top: 0px;
  z-index: 200;
  display: none;
  align-items: center;
  justify-content: center;
}
.loader__show {
  display: flex;
}
.spinner {
  width: 46px;
  height: 46px;
  display: grid;
  animation: spinner-plncf9 3s infinite;
}

.spinner::before,
.spinner::after {
  content: "";
  grid-area: 1/1;
  border: 9px solid;
  border-radius: 50%;
  border-color: #0033a0 #023093 #0000 #0000;
  mix-blend-mode: darken;
  animation: spinner-plncf9 1s infinite linear;
}

.spinner::after {
  border-color: #0000 #0000 #dbdcef #dbdcef;
  animation-direction: reverse;
}
.spinner__container__hidden {
  display: none;
}
@keyframes spinner-plncf9 {
  100% {
    transform: rotate(1turn);
  }
}

.customClassForSecondChild {
  display: none;
}
.customClassForSecondChildShow {
  display: block;
}

/* estilo para ocultar el incrementar y decrementar de los inputs type: number*/
.just_numbers::-webkit-inner-spin-button,
.just_numbers::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.error__container {
  width: 100%;
  height: 69.1vh;
  display: none;
  background-color: white;
  z-index: 2;
  flex-direction: column;
  gap: 2rem;
  align-items: center;
  justify-content: center;
  color: var(--grey-highlight);
  padding: 10px;
}
.error__container > h4 {
  font-size: 1.4rem;
  font-weight: bold;
  text-align: center;
}
.error__container > p {
  font-size: 1rem;
  text-align: center;
}
.show__window__error {
  display: flex;
}
/* sacamos el padding en la seleccion de paises, que se centraba con flex, pero con flex se rompe en iphone*/
.details__country > summary {
  padding-top: 0px !important;
  padding-bottom: 0px !important;
}
.details__country > summary > span {
  position: absolute;
  top: 10px;
}
.details__country > summary > input {
  position: absolute;
  top: 16px;
  left: 65px;
}
.details__country > summary > .select__country {
  position: absolute;
  left: 13px;
  width: 80%;
}
#countries > .select_placeholder2 {
  width: 65%;
}
.image__wsp {
  width: 20px;
  display: none;
}
.form__wsp{
   display: flex;
   align-items: center;
   gap: 6px;
   padding-bottom: 0px !important;
   padding-top: 0px !important;
}
.form__wsp > p{
   font-size: 14px;
   font-weight: 500;
   color: var(--grey-highlight);
}
.wsp__text{
   color: #60D669;
   font-weight: 600;
}
#language_stepOne_wishwsp {
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
}
#language_stepOne_subtitleThree{
   font-size: 16px;
   font-weight: 500;
}

.email__response {
  font-family: "Montserrat", sans-serif;
  font-size: 0.875rem;
  font-weight: 500;
  color: #ff0000;
  display: none;
}

.email__response__show {
  display: block;
}

.form_findOut_container {
  display: flex;
  flex-direction: column;
}

#findOut_redes {
  display: flex;
  flex-direction: column;
}
.findOut__select {
  border: 2px solid #E0E0E0;
  background-color: white;
  border-radius: 5px;
  height: 32px;
  width: 220px;
  margin-right: 18px;
  color: var(--grey-highlight);
  font-size: 1.125rem;
  padding: 5px;
  font-family: "Montserrat", sans-serif;
  font-size: 15px;
  font-weight: 500;
  margin-bottom: 10px;
}
.findOut__select:focus {
  outline: none;
  box-shadow: 0 0 0 .15rem rgba(122, 122, 122, 0.25);
}
.findOut__input__text {
  border: 2px solid #E0E0E0;
  background-color: white;
  border-radius: 5px;
  height: 32px;
  width: 220px;
  margin-right: 18px;
  color: var(--grey-highlight);
  font-size: 1.125rem;
  padding: 5px;
  font-family: "Montserrat", sans-serif;
  font-size: 15px;
  font-weight: 500;
  margin-bottom: 15px;
}
.findOut__input__text:focus {
  outline: none;
  box-shadow: 0 0 0 .15rem rgba(122, 122, 122, 0.25);
}
#findOut_parrafo {
  font-family: "Montserrat", sans-serif;
  font-size: 1.125rem;
  font-weight: 400;
  color: var(--grey-highlight);
  margin-bottom: 5px;
}
.remove__padding {
  padding-bottom: 0px;
}

.step_4_patrocinio_wrapper {
  margin-top: 1rem;
  height: 60px;
  width: 100%;
  border-radius: 4px;
  align-self: center;
  cursor: pointer;
}
.step_4_patrocinioweb {
  width: 100%;
  height: 100%;
  border-radius: 4px;
  display: none;
}
.step_4_patrociniomobile {
  width: 100%;
  height: 100%;
  border-radius: 4px;
}

.wsp_container {
  display: flex;
  justify-content: center;
  align-items: center;
  column-gap: 10px;
  position: absolute;
  right: 0px;
  bottom: 25px;
}
.wsp_container > img {
  width: 48px;
  height: 48px;
}
.wsp_link {
  text-decoration: none;
  transition: transform 5s ease;
}

.wsp_img,
.wsp_text {
  transition: transform 0.5s ease, opacity 0.5s ease;
}
.wsp_link:hover .wsp_text {
  opacity: 0.8;
}

.wsp_link:hover .wsp_img {
  transform: scale(1.1);
}

.wsp_text {
  font-family: 'Work Sans', sans-serif;
  font-size: 18px;
  color: #5E6787;
  font-weight: 500;
  text-align: center;
}

.mail__whatsapp__container{
   display: flex;
   flex-direction: column;
   gap: 16px;
   background-color: #F8F8F8;
   border: 1px solid #C4C4C4;
   box-shadow: 0px 4px 10px 0px  #868DAA33;
   border-radius: 10px;
   padding: 20px;
   margin-bottom: 1.2rem;
}

.mail__invitation__containerm, .products__container {
   background-color: #F8F8F8;
   border: 1px solid #C4C4C4;
   box-shadow: 0px 4px 6px 0px  #540F5533;
   border-radius: 10px;
   padding: 20px;
   padding-bottom: 0px;
   display: flex;
   flex-direction: column;
   gap: 1.2rem;
   margin-top: 2rem;
   margin-bottom: 2rem;
}
.products__title {
  font-size: 18px;
  font-weight: 600;
  color: #606060;
}
.error_produt_form {
  border: 1px solid red !important;
}
/* .error_product{
  border: 1px solid red;
} */

.golden_pass_container, .modal_payment_container{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #000000BF;
  justify-content: center;
  align-items: center;
  z-index: 30;
  display: none;
}
.golden_pass_container_view{
  display: flex;
}
.golden_modal_border{
  padding: 1rem;
  position: relative;
  background: linear-gradient(to right, #DFBD69, #926F34);
  padding: 3px;
}
.golden_modal{
  padding: 10px;
  color: white;
  background-color: #011F62;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  font-family: 'Work Sans', sans-serif;
  padding-bottom: 20px;
  max-height: 90dvh;
  overflow-y: auto;
}
.modal_upgrade_close{
  align-self: flex-end;
  cursor: pointer;
  transition: all 0.3s;
}
.modal_upgrade_close:hover{
  scale: 0.96;
  transition: all 0.3s;
}
.golden_modal_wrapper_text{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
}
.golden_text_container{
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}
.golden_text_container > h6{
  color: #C3A55A;
  font-size: 26px;
  font-weight: 700;
  width: 100% !important;
}
.golden_text_container > p{
  font-size: 20px;
}
.golden_text_container > p >span{
  background: linear-gradient(to right, #DFBD69, #926F34);
  -webkit-background-clip: text;
  color: transparent;
  font-weight: 700;
}
.golden_modal_hour_wrapper{
  flex-direction: column;
  align-items: center;
  gap: 16px;
  display: none;
}
.golden_modal_hour_wrapper_view{
  display: flex;
}
.golden_modal_hour_wrapper > p{
  font-size: 20px;
  text-align: center;
}
.golden_time_wrapper{
  width: 75%;
}
.golden_time_text{
  display: flex;
  justify-content: space-between;
}
.golden_time_text > p{
  font-size: 14px;
  padding-left: 8px;
  width: 25%;
}
.golden_time_hour{
  display: flex;
  justify-content: space-between;
}
.golden_time_hour > p{
  font-size: 46px;
  font-weight: 700;
}
.golden_benefits_container {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}
.golden_benefits_container > p{
  font-size: 18px;
}
.golden_benefits_list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 14px;
}
.golden-check{
  display: flex;
  align-items: center;
  gap: 14px;
}
.golden_separator{
  width: 100%;
  height: 2px;
  background: linear-gradient(to right, #DFBD69, #926F34);
  margin-top: 1rem;
}
.golden_button{
  padding: 10px 14px;
  font-size: 16px;
  font-weight: 700;
  font-family: 'Work Sans', sans-serif;
  color: white;
  border: none;
  border-radius: 4px;
  background: linear-gradient(to right, #DFBD69, #926F34);
  cursor: pointer;
  transition: all 0.3s;
}
.golden_button:hover{
  scale: 0.98;
  transition: all 0.3s;
}
.modal_payment_container_view{
  display: flex;
}
.modal_payments{
  width: 100vw;
  max-width: 900px;
}
.modal_payment_head{
  background-color: var(--nav-color);
  color: white;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 50px;
  padding-left: 0.4rem;
  padding-right: 0.4rem;
  font-size: 16px;
  font-weight: 600;
}
.modal_payment_head>img{
  cursor: pointer;
  transition: all 0.3s ease-in-out;

}
.modal_payment_head>img:hover{
  scale: 0.95;
  transition: all 0.3s ease-in-out;
}
.modal_payment_body{
  background-color: white;
  padding: 0.7rem 1.2rem 0.7rem 1.2rem;
  color: #433E3F;
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  max-height: 80dvh;
}
.modal_payment_body > p {
  font-size: 16px;
  font-weight: 600;
}
.payment_list{
  list-style-position: inside;
  font-size: 16px;
  font-weight: 600;
  border-bottom: 1px solid #5E6787;
  padding-bottom: 1rem;
}
.payment_summary{
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.payment_summary >div {
  display: flex;
  justify-content: space-between;
  font-size: 16px;
}
.payment_total{
  font-size: 24px;
  font-weight: 600;
}
.payment_finish{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;

}
.payment_finish{
  color: #433E3F;
  font-weight: 500;
  margin-top: 2.3rem;
}
.payment_method{
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1rem;
}
.payment_mp, .payment_bank{
  width: 160px;
  height: 45px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #e6e6e6;
  border-radius: 5px;
  cursor: pointer;
}
.payment_mp >img{
  width: 111px;
}
.payment_bank >img{
  width: 16px;
}
.payment_bank{
  color: #0A0080;
  font-weight: 600;
  gap: 6px;
}
.payment_button{
  padding: 10px 16px;
  font-family: 'Work Sans', sans-serif;
  color: white;
  border: none;
  border-radius: 4px;
  background: linear-gradient(to right, #DFBD69, #926F34);
  cursor: pointer;
  transition: all 0.3s;
  margin-top: 0.5rem;
}
.payment_button_gray{
  background: linear-gradient(to right, #5d6672, #9ca3af);
}
.payment_button:hover{
  scale: 0.98;
  transition: all 0.3s;
}
.payment_mp.active {
  background-color: #00BCFF;
  color: white;
}

.payment_bank.active {
  background-color: #FF7B1C;
  color: white;
}
.payment-error{
  color: red;
  display: none;
}
.payment-error-view{
  display: block;
}
.img-facebook{
  width: 31px !important;
  height: 31px !important;
}
.custom-select-questions {
  max-width: 460px;
}
.form_wrapper {
    padding-top: 18px;
  }

.position_container{
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.position_container > div{
  width: 100%;
  display: flex;
  flex-direction: column;
}

.other__position{
  width: 90%;
  border: 2px solid #E0E0E0;
  background-color: white;
  border-radius: 5px;
  margin-right: 18px;
  color: var(--grey-highlight);
  font-size: 1.125rem;
  padding: 5px;
  font-family: "Montserrat", sans-serif;
  font-size: 15px;
  font-weight: 500;
}

.other__position:focus {
  outline: none;
  box-shadow: 0 0 0 .15rem rgba(122, 122, 122, 0.25);
}
.other__position__error {
  border: 1px solid #f00 !important;
}
.other__position__ok {
  border: 1px solid rgb(51, 255, 0) !important;
}
.hidden-section{
  display: none;
}
.form_products_wrapper {
  padding-right: 40px;
  padding-bottom: 29px;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.form_products_wrapper > div:nth-child(1) {
  position: relative;
}
.form_input_wrapper_product{
  position: relative;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  border: 2px solid #E0E0E0;
  background-color: white;
  border-radius: 5px;
  padding: 10px 6px;
  gap: 2px;
  width: 100%;
  min-height: 50px !important;
}
.form_input_products {
  border: none;
  outline: none;
  font-size: 14px !important;
  font-family: "Montserrat", sans-serif;
  margin-left: 4px;
}
#measure_span {
  position: absolute;
  visibility: hidden;
  white-space: pre;
  font-size: 16px; /* debe coincidir con el input */
  font-family: inherit;
}
.products__subtitle {
  font-size: 14px;
  color: #9B9B9B;
  font-weight: 500;
  font-style: italic;
  margin-top: 10px;
  margin-left: 4px;
}
.plus_symbol_product {
  position: absolute;
  top: 50%;
  transform: translateY(-45%);
  left: 60px;
}
.plus_symbol_product img {
  width: 25px;
  cursor: pointer;
}
.list__products{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}
.chip_product {
  display: flex;
  align-items: center;
  gap: 4px;
  background-color: #D2D2D2;
  padding: 10px 20px;
  color: #433E3F;
  font-size: 10px;
  border-radius: 20px;
}
.chip_product img {
  width: 15px;
  cursor: pointer;
}
.container_search_products{
  display: none;
  flex-direction: column;
  position: absolute;
  width: 100%;
  left: 0;
  top: 100%;
  background-color: white;
  border: 1px solid #E0E0E0;
  border-radius: 5px;
  z-index: 10;
}
.container_search_products_view{
  display: flex;
}
.container_search_products > p {
  padding: 10px 20px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 12px;
}
.container_search_products > div {
  padding: 10px 20px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 12px;
  display: flex;
  align-items: center;
  width: 100%;
  gap: 10px;
}
.container_search_products > div > img {
  margin-top: 2px;
  width: 12px;
}
.container_search_products > p:hover, .container_search_products > div:hover  {
  background-color: #E0E0E0;
}
/* Media Queries */
@media (width > 300px) {
  .nav_logo_wrapper img {
    width: 145px;
  }
}
@media (width > 330px) {
  .nav_container {
    padding: 24px 10px 24px 10px;
  }
  .nav_logo_wrapper img {
    width: 155px;
  }
  .findOut__select {
    width: 260px;
  }
  .findOut__input__text {
    width: 300px;
  }
  .step_4_credential {
    width: 320px;
  }
  .golden_time_text > p{
    font-size: 18px;
  }
}

@media (width > 360px) {
  .nav_logo_wrapper img {
    width: 165px;
  }
  .step_4_patrocinio_wrapper {
    height: 70px;
  }
  .step_4_share_buttons {
      width: 326px;
  }
}

@media (width > 380px) {
  .step_4_download_buttons {
    flex-direction: row;
  }
  .step_4_credential {
    width: 333px;
  }
}

@media (width > 430px) {
  .li__countries > span {
    height: 27px !important;
  }
  .credential_name_wrapper {
    font-size: 24px;
  }
  .nav_container {
    padding: 24px 15px 24px 15px;
  }
  .nav_logo_wrapper img {
    width: 195px;
  }
  .step_4_patrocinio_wrapper {
    height: 75px;
    width: 394px;
  }
  .credential_footer p {
    font-size: 28px;
  }
  .policies_wrapper {
    align-items: end;
  }
}
@media (width > 500px) {
  .other__input__text {
    width: 400px;
  }
  .custom-select li label {
    font-size: 14px;
    height: 26px;
  }
  .custom-select summary {
    min-height: 50px !important;
    padding-top: 13px;
    padding-bottom: 13px;
  }
  .select {
    height: 50px !important;
  }
  .form_input {
    height: 50px !important;
    font-size: 1rem !important;
  }
  .form_input::placeholder {
    font-size: 1rem !important;
  }
  .titulo {
    font-size: 1rem !important;
  }
  .error__container > h4 {
    font-size: 2rem;
  }
  .error__container > p {
    font-size: 1.4rem;
  }
  .details__country > summary > span {
    top: 10px;
  }
  .details__country > summary > input {
    top: 16px;
  }
  .findOut__input__text {
    width: 400px;
  }
  .app_wrapper {
    width: 140px;
  }
  .step_4_download_buttons {
    gap: 20px;
  }
  .nav_date_wrapper {
    flex-direction: row;
    gap: 10px;
  }
  .step_4_linkedin_text {
    width: 400px;
  }
}

@media (width > 700px) {
  .details__colony {
    width: 96.7%;
  }
  .details__colony[open] {
    width: 96.7% !important;
  }
  .other__input__text {
    width: 360px;
  }
  .step_4_wrapper {
    padding-bottom: 3rem;
  }
  .form_select_countries_code {
    max-width: 185px;
  }
  .inputs__width__mobile {
    width: 50%;
    max-width: 495px;
  }
  .form-element {
    max-width: 174px;
  }
  .form-element .icon img {
    height: 100px;
  }
  .form_desc {
    font-size: 0.875rem;
  }
  .form_label {
    font-size: 0.875rem;
  }
  .form_input {
    font-size: 0.875rem;
  }
  .form_input_wrapper {
    width: 100%;
  }
  .form_input::placeholder {
    font-size: 0.875rem;
  }
  .custom-select input[type="radio"]:after {
    font-size: 14px !important;
  }
  .titulo {
    font-size: 14px !important;
  }
  .nav_container {
    padding: 32px 15px 24px 32px;
  }
  .nav_logo_wrapper img {
    width: 240px;
  }
  .custom-select summary {
    width: 100%;
  }
  .opciones {
    width: 100%;
  }
  .custom-select ul {
    width: 100%;
  }
  .form_wrapper {
    padding-top: 15px;
  }
  .form_question2_wrapper {
    padding-top: 40px;
  }
  .form_question {
    font-size: 1.3125rem;
  }
  .container-checkbox-q {
    font-size: 1.125rem;
  }
  .container-radio {
    font-size: 1.125rem;
  }
  .form_question_subtitle {
    font-size: 1rem;
  }
  .step_4_text_code,
  .step_4_desc_link {
    font-size: 1.25rem;
  }
  .step_4_requirements_wrapper p {
    font-size: 1.125rem;
  }
  .step_4_linkedin_wrapper p {
    font-size: 19px;
  }
  .step_4_patrocinio_wrapper {
    height: 120px;
    width: 650px;
  }
  .step_4_patrocinioweb {
    display: block;
  }
  .step_4_patrociniomobile {
    display: none;
  }
  .app_wrapper {
    width: 190px;
  }
  .date__image {
    width: 270px;
  }
  .date__text__image {
    width: 120px;
  }
  .subscription_monthly {
    width: 119px;
    height: 31px;
    padding-left: 14px;
  }
  .step_4_atentiontext {
    width: 600px;
    text-align: center;
  }
  .golden_modal_hour_wrapper > p{
    font-size: 28px;
  }
  .golden_time_text > p{
    font-size: 22px;
  }
  .golden_time_hour > p{
    font-size: 60px;
  }
  .golden_benefits_container > p{
    font-size: 20px;
  }
  .golden_benefits_list {
    font-size: 16px;
  }
  .golden_button{
    font-size: 16px;
  }
  .modal_payment_head{
    padding-left: 1rem;
    padding-right: 1rem;
    font-size: 18px;
    height: 72px;
  }
  .modal_payment_body{
    padding: 2rem 4rem 2rem 4rem;
  }
  .modal_payment_body > p {
    font-size: 18px;
  }
  .payment_list{
    font-size: 18px;
  }
  .payment_summary >div {
    font-size: 18px;
  }
  .payment_mp, .payment_bank{
    width: 245px;
  }
  .privacy_policy_text {
    margin-top: 2rem;
  }
  .step_4_separator_wrapper {
      width: 700px;
  }
  .step_4_separator {
      width: 200px;
  }
  .image__wsp {
    display: block;
  }
  .step_4_requirements_wrapper li:nth-child(2) {
    align-items: center;
  }
  .step_4_linkedin_text {
    margin-top: 0px;
  }
  
  .position_container{
    width: 50%;
  }
  .other__position{
    width: 100%;
  }
  .products__title {
    font-size: 21px;
  }
  .products__subtitle {
    font-size: 16px;
  }
  .form_input_products {
    font-size: 16px !important;
  }
}
@media (width > 800px) {
  .step_4_download_wrapper {
    background-image: url("./assets/img/cellphone.png");
    background-color: #024c8f;
    background-size: 110%;
    background-position-y: -20px;
    height: 290px;
    width: 662px;
    align-self: center;
    border-radius: 0px;
  }
  .step_4_download_left {
    align-self: center;
    padding-left: 1rem;
  }
  .step_4_download_left p {
    color: #ffffff;
    font-size: 25px;
    width: 300px;
    line-height: 30px;
  }
  .step_4_download_right p {
    color: #ffffff;
    font-size: 15px;
  }
  .step_4_download_wrapper {
    position: relative;
  }
  .step_4_download_right {
    position: absolute;
    top: 15px;
    right: 15px;
    display: flex;
    align-items: center;
    gap: 0.8rem;
  }
  .step_4_download_right > img {
    width:85px;
  }
  .golden_modal{
    padding: 20px;
    gap: 2rem;
    padding-bottom: 60px;
  }
  .golden_modal{
    width: 725px;
  }
  .golden_button{
    font-size: 24px;
    width: 420px;
  }
  .golden_text_container > h6{
    font-size: 40px;
  }
  .golden_text_container > p{
    font-size: 32px;
    width: 525px;
  }
  .golden_benefits_container > p{
    font-size: 24px;
  }
}

@media (width > 820px) {
  .step4_credential_linkedin_wrapper {
    flex-direction: row;
    gap: 2rem;
  }
}

@media (width > 1024px) {
  .form_checkbox_buttons_container-2 {
    gap: 7rem;
  }
  .form_checkbox_buttons_container_training {
    gap: 13.4rem;
  }
  .form__input__width {
    width: 98.8%;
  }
  .nav_logo_wrapper img {
    width: 230px;
  }
  .icon__telefono__empresa {
    padding-right: 8px;
  }
  .form_checkboxCard_buttons_container {
    flex-wrap: nowrap;
    column-gap: 15px;
  }
  .form_findOut_container {
    flex-direction: row;
    justify-content: space-between;
  }
}
@media (width > 1200px) {
  .step_4_wrapper {
    padding-bottom: 0px;
  }
  .step_4_download_wrapper {
    height: auto;
    padding-top: 60px;
    padding-bottom: 30px;
  }
  .step_4_column_2 {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3rem;
  }
  .button__info-desktop {
    display: flex;
  }
  .button__info-movil {
    display: none;
  }
}
@media screen and (max-width: 1300px) {
  .container {
    padding-left: 24px;
    padding-right: 24px;
  }
}

@media screen and (max-width: 1200px) {
  .step_4_wrapper {
    flex-direction: column;
  }
}

@media screen and (max-width: 1024px) {
  .container,
  .container_questions {
    padding-left: 18px;
    padding-right: 18px;
  }

  .container_time {
    padding-left: 16px;
    padding-right: 16px;
  }

  .form_emails_wrapper {
    grid-template-columns: repeat(2, 1fr);
  }

  .form_checkbox_buttons_container-2, .form_checkbox_buttons_container_training {
    flex-direction: column;
  }

  .form_checkboxCard_buttons_container {
    justify-content: space-around;
    row-gap: 28px;
    column-gap: 28px;
  }
}

@media screen and (max-width: 700px) {
  .form_control {
    flex-direction: column;
  }

  .form_emails_wrapper {
    grid-template-columns: repeat(1, 1fr);
  }

  .select.just_data {
    width: 100%;
    max-width: 100%;
  }

  .form_select.just_data {
    width: 100%;
    max-width: 100%;
  }

  .form_checkboxCard_buttons_container {
    justify-content: space-between;
    row-gap: 8px;
    column-gap: 8px;
  }

  .form-element label:after {
    top: 90px;
  }
  .form-element label:before {
    top: 92px;
  }

  .form-element .title {
    font-size: 0.75rem;
  }

  .checkbox_img_desktop {
    display: none;
  }

  .checkbox_img_mobile {
    display: block;
  }

  .step_4_linkedin_wrapper {
    column-gap: 30px;
  }

  .credential_qr_wrapper img {
    max-width: 135px;
  }

  .step_4_linkedin_wrapper p {
    text-align: center;
  }

  .step_4_download_right p {
    padding-bottom: 19px;
    font-weight: 600;
    font-size: 0.625rem;
  }

  .step_4_download_right img {
    max-width: 87px;
  }

  .step_4_download_buttons {
    column-gap: 5px;
    flex-direction: column;
  }

  .step_4_requirements_wrapper ul {
    row-gap: 9px;
  }

  .step_4_requirements_wrapper li {
    flex-direction: column;
    row-gap: 6px;
  }
}

@media screen and (max-width: 700px) {
  .number_blue,
  .number_white,
  .form_number_circle {
    max-width: 60px;
    max-height: 60px;
  }
  .form_number {
    font-size: 2rem;
  }
}

@media screen and (max-width: 400px) {
  .form_checkboxCard_buttons_container {
    justify-content: space-around;
  }

  .button_wrapper {
    padding-bottom: 50px;
    padding-top: 55px;
  }
  .car_wrapper {
    max-width: 30px;
    top: 17px;
  }

  .form_number {
    font-size: 1.5rem;
  }

  .number_blue,
  .number_white,
  .form_number_circle {
    max-width: 50px;
    max-height: 50px;
  }

  .step-1,
  .step-2,
  .step-3 {
    padding-top: 10px;
  }

  .button_wrapper .primary_button {
    width: 100%;
    justify-content: center;
  }
}