#page-planes {

  .section {
    &.section_planes {
      padding-top: 2rem;
    }
  }

  .slds-grid {
    div:first-child {
      .card-container {
        margin-top: 0rem;
      }
    }
  }

  .card-container {
    position: relative;
    border-radius: 20px;
    margin-top: 2rem;

    &.favorite {
      box-shadow: 0 0 3px var(--color-brand-light);
      border: 1px solid var(--color-brand-light);
      background-color: var(--color-brand-light);
      padding-top: 2rem;
      
      &:before {
        content: "Más Vendido";
        position: absolute;
        width: 100%;
        top: 0;
        left: 0;
        text-align: center;
        color: white;
        line-height: 2rem;
        font-size: 1rem;
      }
    }

    .card {
      position: relative;
      max-width: 550px;
      padding: 20px;
      height: 100%;
      width: 290px;
      background-color: white;
      border-radius: 20px;
      box-shadow: 0 0 2px rgba(0, 0, 0, .5);
      
      .card-title {
        font-weight: bold;
        font-size: 1.2rem;
        color: var(--color-gray-dark);
        text-align: center;
        padding-bottom: 1rem;
      }

      .card-price {
        font-size: 2rem;
        color: var(--color-gray-dark);
        font-weight: 600;
        text-align: center;
      }

      .card-price-period {
        font-size: 1rem;
        color: var(--color-text-base);
        font-weight: 300;
      }

      .card-price-description {
        font-size: .875rem;
        color: var(--color-text-base);
        font-weight: 300;
        text-align:center;
      }

      .card-description {
        text-align: center;
        color: var(--color-gray-dark);
        margin-top: 20px;
        font-size: 1rem;
      }

      .card-modulos {
        font-size: 1rem;
        color: var(--color-gray-dark);
        display: table;
        margin: 0 auto;
        min-width: 220px;

        li {

          &.active:before, &.inactive:before  {
            font-family: 'icomoon' !important;
            speak: never;
            font-style: normal;
            font-weight: normal;
            font-variant: normal;
            text-transform: none;
            line-height: 1;
            -webkit-font-smoothing: antialiased;
            
            vertical-align: text-top;
            margin-right: .5rem;
          }

          &.active:before {
            content: "\e902";
            color: var(--color-green);
            font-weight: 600;
          }

          &.inactive:before {
            content: "\e905";
            color: var(--color-text-base);
          }

          /* &.check {
            color: var(--color-green);
          }

          &.cross {
            color: var(--color-text-base);
          } */

        }
      }
    }
  }

  @media (min-width: 64em) {
    .card-container {
      margin-top: 0rem;
      padding-top: 2rem;

      &.favorite {
        margin-top: 0rem;
      }
    }
  }
}