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

@font-face {
  font-family: WorkSans;
  font-style: normal;
  font-weight: 400 600 700;
  font-display: swap;
  src: url("./assets/fonts/WorkSans-VariableFont_wght.ttf") format("woff2");
}

:root {
  --White: hsl(0, 0%, 100%);
  --Light-pink: hsl(275, 100%, 97%);
  --Grayish-purple: hsl(292, 16%, 49%);
  --Light-purple: rgb(173, 40, 235);
  --Dark-purple: hsl(292, 42%, 14%);
  --Font-WorkSans: "WorkSans", sans-serif;
}

body{
  background-color: var(--Light-pink);

  /* centrado de tarjeta */
  height: 100vh;
  /* display: flex;
  justify-content: center;
  align-items: center; */
  display: grid;
  place-items: center;
  font-family: var(--Font-WorkSans);
  color: var(--Dark-purple);

  /* Imagen de fondo */
  background-image: url('./assets/images/background-pattern-mobile.svg');
  background-repeat: no-repeat;
  background-size: contain;
  background-position: top left;
}

.card{
  background-color: var(--White);
  width: 327px;
  padding: 24px;
  border-radius: 8px;
  & .title-container{
    display: flex;
    gap: 8px;
    margin-bottom: 24px;
    & .star{
      width: 20px;
    }
    & .title{
      font-size: 2rem;
    }
  }

  & .faq{
    & .question-container{
      padding: 24px 0;
      list-style: none;
      display: flex;
      justify-content: space-between;
      cursor: pointer;
      & .question{
        width: 220px;
        font-weight: 600;
      }
      &:hover{
        color: var(--Light-purple);
      }
    }

    &[open] .icon-btn {
      content: url("./assets/images/icon-minus.svg");
    }

    & .icon-btn {
      content: url("./assets/images/icon-plus.svg");
    }
    
    & .description{
      font-size: .875rem;
      line-height: 1.5;
      color: var(--Grayish-purple);
      margin-bottom: 20px;
    }
  }
  
  & .faq:not(:last-child){
    border-bottom: 1px solid var(--Grayish-purple);
  }

  
}

@media screen and (min-width: 620px) {
  body{
    background-image: url('./assets/images/background-pattern-desktop.svg');
  }

  .card{
    width: 600px;
    padding: 40px;
    & .faq{
      & .question-container{
        & .question{
          width: unset;
          font-size: 1.125rem;
        }
      }
    }
  }
}