.um-app-card-container{
    display: flex;
    flex-direction: column;
    align-items: center;
    border-radius: 10px;
    width: 386px;
    border: 1px solid var(--grey-1);
    padding-top: 0.25rem;
    position: relative;
    overflow: hidden;
    background-color: transparent;
    transition: color 0.2s ease;
}

.um-app-card-container::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--blue-3);
    transform: scaleY(0);
    transform-origin: top;
    transition: transform 0.3s ease;
    z-index: 0;
}

.um-app-card-container:hover::before {
    transform: scaleY(1);
}

.um-app-card-container > * {
    position: relative;
    z-index: 1;
}

.um-app-card-text-container{
    display: flex;
    flex-direction: column;
    padding: 1rem;
    gap: 1rem;
}.um-dialog-minimal-container{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    border-radius: 15px;
    border: 1px solid var(--grey-1);
    padding: 2rem;
    margin-top: 3rem;
}

.um-dialog-minimal-inputs-container{
    display: flex;
    margin-top: 2em;
}

.um-dialog-minimal-validations-container{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-top: 1em;
    text-align: center;
}

.um-dialog-minimal-button-container{
    display: flex;
    justify-content: right;
    margin-top: 1rem;
    width: inherit;
    gap: 20px;
}.um-dialog-default-container{
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 400px;
    background-color: var(--grey-5);
    text-align: center;
    border-radius: 50px;
    padding: 3rem;
}

.um-dialog-default-inputs-container{
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 3em;
    column-gap: 50px;
    row-gap: 20px;
    width: 600px;
    flex-wrap: wrap;
}

.um-dialog-validations-container{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-top: 1em;
    text-align: center;
}

.um-dialog-button-right-container{
    display: flex;
    justify-content: right;
    align-items: center;
    margin-top: auto;
    width: inherit;
    gap: 20px;
}

.um-dialog-button-centered-container{
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 4em;
}.um-footer-container{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding-top: 5rem;
}

.um-footer-items-container{
    width: 1200px;
    margin-left: 1em;
    margin-right: 1em;
    margin-top: 10rem;
}

.um-footer-items-container h4 {
    padding-left: 0.5rem;
    margin-botton: 1rem;
}

.um-footer-links {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 1rem;
}.um-info-page-container{
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-top: 2rem;
}

@media (min-width: 992px) {
    .um-info-page-container {
        margin-top: 5rem;
    }
}.um-input-card{
  display: flex;
  flex-direction: column;
  border-radius: 15px;
  border: 1px solid var(--grey-1);
  padding: 2rem;
  max-width: 520px;

  & .title{
    display: flex;
    flex-direction: column;
    text-align: left;
  }

  & .inputs{
    display: flex;
    margin-top: 2em;
    gap: 1rem;
    flex-wrap: wrap;
    justify-content: center;
  }

  & .validations{
    display: flex;
    flex-direction: column;
    margin-top: 1em;
    text-align: center;
  }

  & .buttons{
    display: flex;
    justify-content: right;
    margin-top: 1rem;
    gap: 20px;
  }
}.um-input-page{
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 3rem;
}.um-plan-card{
  border: 1px solid var(--grey-1);
  display: flex;
  flex-direction: column;
  gap: 1rem;
  max-width: 370px;
  border-radius: 15px;

  & .card-header{
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1rem;

    & .tittle{
      display: flex;
      flex-direction: column;
    }
  }

  & .card-button{
    display: flex;
    justify-content: center;
    padding: 1rem;
    min-height: calc(71px - 2rem);
  }

  & .card-features{
    border-top: 1px solid var(--grey-1);
    padding: 1rem;

    & .list{
      margin-top: 0.25rem;
      margin-bottom: 0;
      color: var(--grey-1);
    }
  }
}.um-sidebar{
  display: flex;
  flex-direction: column;
  background-color: var(--grey-2);
  height: 100%;
}.um-topbar {
    display: flex;
    justify-content: space-between;
    background-color: var(--grey-2);
    height: 60px;
    padding-left: 1rem;
    padding-right: 1rem;

    & .half {
      display: flex;
      align-items: center;
      gap: 1rem;
    }
}

@media (min-width: 768px) {
  .um-topbar{
    padding-left: 3rem;
    padding-right: 3rem;
  }
}

.um-top-bar-modal{
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.um-legal{
  display: flex;
  flex-direction: column;
  gap: 1rem;

  & .header{
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }

  & .content > ol{
    font-size: 1.25rem;
    color: var(--grey-1);
    font-family: 'Roboto', sans-serif;
  }

  & .content > ol > li{
    padding-top: 2rem;
  }

  & .content > ol > li > ol{
    font-size: 1rem;
  }

  & .content > ol > li > ol > li{
    padding-top: 1rem;
  }

   @media (min-width: 992px) {
     & .content > ol{
       font-size: 2rem;
     }
   }
}

.um-application{
  display: flex;
  flex-direction: column;
  gap: 2rem;

  & .title{
    display: flex;
    justify-content: center;
  }

  & .content{
    display: grid;
    gap: 2rem;

    & .left{
      display: flex;
      flex-direction: column;
      gap: 3rem;

      & .first-text, .second-text{
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
        text-align: center;
      }

      & .buttons{
        display: flex;
        justify-content: center;
        gap: 1rem;
        flex-wrap: wrap;
      }
    }

    & .right{
      & .image{
        max-width: 100%;
        height: auto;
      }
    }
  }

  @media (min-width: 992px) {
    & .title{
      justify-content: left;
    }

    & .content{
      grid-template-columns: 1.1fr 1fr;

      & .left{
        & .first-text, .second-text{
          text-align: left;
        }
      }
    }
  }
}.um-body {
    display: flex;
    flex-direction: column;
    background-color: var(--grey-4);
    background-position: top;
    background-repeat: no-repeat;

    & .external {
      display: flex;
      width: 100%;
      flex-grow: 1;

      & .internal{
        padding-left: 1em;
        padding-right: 1em;
        margin-top: 5rem;
        overflow: hidden;
      }

      & .with-sidebar{
        flex-grow: 2;
      }

      & .without-sidebar{
        width: min(calc(100vw - 2rem), 1200px);
      }
    }

    & .with-sidebar{
      justify-content: flex-start;
    }

    & .without-sidebar{
      justify-content: center;
    }

    & .topbar-desktop{
        display: none;
    }

    @media (min-width: 768px) {
      & .topbar-mobile{
        display: none;
      }
      & .topbar-desktop{
        display: block;
      }
    }
}

.um-body.um-bg-type-1{
    background-image: url('/images/background-type-1.jpg');
}

.um-body.um-bg-type-2{
    background-image: url('/images/background-type-2.jpg');
}.um-google-oauth-response-container{
    display: flex;
    justify-content: center;
}.um-landing-container {
    display: flex;
    flex-direction: column;
    gap: 5rem;
    align-items: center;
}

.um-landing-header-container{
    width: 100%;
    max-width: 1100px;
    margin-inline: auto;
    display: grid;
    align-items: center;
}

@media (min-width: 992px) {
    .um-landing-header-container{
        grid-template-columns: 1.1fr 1fr;
    }
}

.um-landing-header-text-container{
    display: flex;
    flex-direction: column;
    align-items: center;
}

.um-landing-header-text-container .header-title{
    font-size: 3rem;
    text-align: center;
}

.um-landing-header-text-container .header-subtitle{
    font-size: 2rem;
    text-align: center;
}

@media (min-width: 992px) {
    .um-landing-header-text-container{
        align-items: flex-start;
    }
    .um-landing-header-text-container .header-title{
        font-size: 4rem;
        text-align: left;
    }
    .um-landing-header-text-container .header-subtitle{
        font-size: 2rem;
        text-align: left;
    }
}

.um-landing-header-container-image{
    overflow: hidden;
    display: grid;
    place-items: center;
    padding: 2rem;
}

.um-landing-header-image{
    max-width: 100%;
    display: block;
    height: auto;
}

.um-landing-sub-header-container{
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 2rem;
}

.um-landing-sub-header-item-container{
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 370px;
    text-align: center;
}

.um-landing-sub-header-icons{
    font-size: 70px;
    color: var(--blue-2);
}

.um-landing-apps-container {
    width: 100%;
}

.um-landing-apps-title-container{
    border-bottom: 1px solid var(--grey-1);
    width: inherit;
    margin-top: 5rem;
}

.um-landing-apps-category-container{
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: inherit;
    padding-top: 2rem;
    padding-bottom: 1rem;
}.um-login-form-container{
    display: flex;
    justify-content: center;
}

.um-login-google-button-container{
    display: flex;
    flex-direction: column;
    align-items: center;
}.um-password-recovery-request-container{
    display: flex;
    justify-content: center;
}

.um-password-recovery-action-container{
    text-align: center;
    margin-top: 12rem;
    margin-left: 1rem;
    margin-right: 1rem;
}

.um-password-recovery-request-input-container{
    display: flex;
    flex-direction: column;
    align-items: center;
}.um-payment-update{
  display: flex;
  flex-direction: column;
  gap: 2rem;

  & .update-info{
    display: flex;
    border: 1px solid var(--grey-1);
    border-radius: 15px;
    padding: 1rem;
    justify-content: space-around;
    align-items: center;

    & .plan{
      display: flex;
      flex-direction: column;
      text-align: center;
    }
  }

  & .update-description{
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }

  & .update-button{
    display: flex;
    justify-content: center;
  }
}.um-plan{
  display: flex;
  flex-direction: column;
  gap: 4rem;

  & .header{
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    text-align: center;
  }

  @media (min-width: 992px) {
    & .header {
      text-align: left;
    }
  }

  & .plan-list{
    display: flex;
    flex-direction: column;
    gap: 1rem;

    & .toggle{
      display: flex;
      justify-content: center;
    }

    @media (min-width: 992px) {
      & .toggle {
        justify-content: end;
      }
    }

    & .plans{
      display: flex;
      gap: 2rem;
      justify-content: center;
      flex-wrap: wrap;
    }
  }

  & .feature-list{
    display: flex;
    flex-direction: column;
    gap: 2rem;

    & .feature{

    }
  }
}.um-profile-content-container{
    display: flex;
    flex-direction: column;
    align-items: center;
}

.um-profile-line{
  display: flex;
  align-items: center;
  text-align: left;
  padding: 1rem;
  justify-content: space-between;
  border-bottom: 1px solid var(--grey-1);
  gap: 1rem;

  & .text{
    display: flex;
    flex-direction: column;
  }
}

.um-profile-name-inputs-container{
    display: flex;
    flex-direction: column;
    row-gap: 25px;
}

.um-profile-birthdate-inputs-container{
    display: flex;
    justify-content: space-around;
    row-gap: 25px;
}

.um-profile-language-inputs-container{
    display: flex;
    justify-content: center;
}

.um-profile-password-inputs-container{
    display: flex;
    flex-direction: column;
    row-gap: 25px;
}

/* Profile - Subscriptions */

.um-profile-subscription-container {
  position: relative;
  width: 270px;
  height: 210px;
  background-color: transparent;
  border-radius: 20px;
  box-sizing: border-box;
  overflow: hidden;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 0.5rem;
}

/* Franjas en la esquina superior derecha */
.um-profile-subscription-container::before,
.um-profile-subscription-container::after {
  content: "";
  position: absolute;
  width: 80px;
  height: 7px;
  background-color: var(--orange-9);
  transform: rotate(45deg);
  transform-origin: top right;
}

.um-profile-subscription-container::before {
  top: 33px;
  right: -10px;
}

.um-profile-subscription-container::after {
  top: 50px;
  right: -5px;
}

/* Colores de los contenedores */
.um-profile-level-0{
    border: 1px solid var(--orange-9);
}

.um-profile-level-1{
    border: 1px solid var(--blue-grey-4);
}

.um-profile-level-2{
    border: 1px solid var(--amber-7);
}

.um-profile-level-canceled{
    border: 1px solid var(--red-7);
}

.um-profile-level-0::before,
.um-profile-level-0::after {
  background-color: var(--orange-9);
}

.um-profile-level-1::before,
.um-profile-level-1::after {
  background-color: var(--blue-grey-4);
}

.um-profile-level-2::before,
.um-profile-level-2::after {
  background-color: var(--amber-7);
}

.um-profile-level-canceled::before,
.um-profile-level-canceled::after {
  background-color: var(--red-7);
}

.um-profile-subscription-text-container{
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.um-profile-subscription-buttons-container{
    display: flex;
    justify-content: space-between;
}.um-terms, .um-privacy {
  display: flex;
  gap: .25rem;
  align-items: flex-start;

  & .text {
    text-align: left;

  & .link {
    justify-content: left;
  }
}