:root {
  --hidden: none;
  --visible: block;
  --bg-sesion: url(../assets/bg-sesion-mobile.jpg);
  --root-font-size: 100%;
  --ll-button-color: #FD7A6B;
  --ll-button-text-color: #FFFFFF;
  --ll-button-border-color: #FD7A6B;
  --ll-radius: 18.90px;
  --ll-align: center;
  --ll-font-size: 19px;
  --ll-focus-color: #FD7A6B;
  --ll-error-color: #ff0000;
  --ll-input-background: #ffffff;
  --ll-input-color: #374151;
  --ll-input-border: #FD7A6B;
  --li-input-placeholder-color: #999999;
  --li-wrap-items: wrap;
  /* --li-item-width: auto; */
  --li-item-width: 100%;
  --li-margin-right: 0px;
  --ll-border-width: 1px;
}

html {
  font-size: var(--root-font-size);
}

html,
body,
section,
main {
  height: 100%;
}

* {
  padding: 0;
  margin: 0;
}

.main-section-animation-container,
.main-section-animation-container::before,
.lottie-container,
.animated-logo {
  position: absolute;
}

.lottie-container {
  width: 100%;
  max-width: 28.125rem;
  display: block;
  overflow: hidden;
  transform: translate3d(0, 0, 0);
  text-align: center;
  opacity: 1;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.main {
  height: auto;
}

.main-section-animation-container {
  width: 100%;
  overflow: hidden;
  background-color: white;
}

.main-section-animation-container-bg {
  width: 100%;
  height: 100%;
  position: absolute;
  background: url(../assets/bg-bienvenida.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  clip-path: circle(15.625rem at 50% 50%);
}

.animated-logo {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90%;
  max-width: 31.25rem;
  opacity: 0;
}

.main-section-container {
  min-height: 100%;
  background: var(--bg-sesion);
  background-repeat: no-repeat;
  background-size: cover;
}

.lottie-container-peachy {
  max-width: 23.9375rem;
  width: 40%;
}

.lottie-container-peachy,
.main-logo-desktop {
  display: var(--hidden);
}

.main-section-inner {
  width: 90%;
  max-width: 60.3125rem;
  margin: auto;
  min-height: 100%;
}

.main-logo {
  width: 100%;
}

.main-logo-mobile {
  max-width: 18.5625rem;
}

.main-section-content {
  padding: 2.5rem 0;
  text-align: center;
}

@media (min-width: 768px) {
  :root {
    --bg-sesion: url(../assets/bg-sesion-desktop.jpg);
  }

  .lottie-container-peachy,
  .main-logo-desktop {
    display: var(--visible);
  }

  .main-section-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .main-logo-mobile {
    display: var(--hidden);
  }

  .main-section-content {
    align-self: flex-start;
    padding-top: 4.375rem;
    width: 55%;
    max-width: 25.4375rem;
  }
}

@media (min-height: 1440px) {
  :root {
    --root-font-size: 150%;
  }
}

@media (min-height: 2160px) {
  :root {
    --root-font-size: 175%;
  }
}

.sign-up {
  margin-top: 3em;
}

.sign-up-text p {
  color: white;
  margin-top: 1em;
  font-size: 16px;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: bold
}

.launchlist-form {
  margin: 15px 0;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: var(--ll-align);
  -ms-flex-align: var(--ll-align);
  align-items: var(--ll-align);
}

.launchlist-wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: start;
  -ms-flex-wrap: var(--li-wrap-items);
  flex-wrap: var(--li-wrap-items);
}

.launchlist-input-wrapper {
  margin-right: var(--li-margin-right);
  margin-bottom: 10px;
  width: var(--li-item-width);
}

.launchlist-input-wrapper input {
  width: 100%;
  padding: 12px 20px;
  display: inline-block;
  border-width: var(--ll-border-width);
  border-style: solid;
  border-color: var(--ll-input-border);
  border-radius: var(--ll-radius);
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  font-size: var(--ll-font-size);
  color: var(--ll-input-color);
  background-color: var(--ll-input-background);
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  opacity: 1;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.launchlist-input-wrapper input:focus {
  border-color: var(--ll-focus-color);
  outline: none;
  -webkit-box-shadow: 0px 0px var(--ll-focus-color);
  box-shadow: 0px 0px var(--ll-focus-color);
}

.launchlist-button {
  width: var(--li-item-width);
  background-color: var(--ll-button-color);
  color: var(--ll-button-text-color);
  padding: 12px 30px;
  border-width: var(--ll-border-width);
  border-style: solid;
  border-color: var(--ll-button-border-color);
  /* border: 1px solid var(--ll-button-border-color); */
  border-radius: var(--ll-radius);
  cursor: pointer;
  font-size: var(--ll-font-size);
  margin: 0;
  -webkit-border-radius: var(--ll-radius);
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  opacity: 1;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.launchlist-button:hover {
  opacity: 0.8;
}

.launchlist-error-span {
  color: var(--ll-error-color);
  font-size: 12px;
  margin-top: 5px;
  margin-bottom: 5px;
}

.launchlist-input-error {
  border-color: red !important;
}

.launchlist-form-error {
  color: var(--ll-error-color);
  font-size: 14px;
  margin-top: 10px;
  margin-bottom: 5px;
}

input::-moz-placeholder,
textarea::-moz-placeholder {
  color: var(--li-input-placeholder-color);
}

input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
  color: var(--li-input-placeholder-color);
}

input:-ms-input-placeholder,
textarea:-ms-input-placeholder {
  color: var(--li-input-placeholder-color);
}

@media only screen and (max-width: 425px) {
  .launchlist-wrapper {
    flex-wrap: wrap;
  }

  .launchlist-input-wrapper {
    width: 100%;
    margin-right: 0px;
  }

  .launchlist-button {
    width: 100%;
  }
}