.landing {
  --lp-pad-x: 20px;
  --lp-pad-y: 32px;
  --lp-black: #211915;
  --lp-orange: #d9681c;
  --lp-darkblue: #25105b;
  --lp-green: #28a4a4;
  --lp-darkpurple: #330066;
  --lp-lightgray: #f1f1f1;
  --lp-shadow: 4px 4px 0 var(--lp-black);
  --lp-radius: 8px;
  --lp-default-mg: 12px;

  color: var(--lp-black);
  font-family: "Archivo", sans-serif;
  line-height: 1.5;
}
.landing :where(h1, h2, h3, ul, li, p) {
  margin: 0;
}
.landing *:focus-visible {
  outline: 2px dashed var(--lp-darkblue);
}
.landing img {
  display: block;
  margin: 0 auto;
}
.landing .wrapper {
  padding: var(--lp-pad-y) var(--lp-pad-x);
}
.landing .btn {
  border-radius: 6px;
  color: white;
  display: block;
  font-size: 1.25em;
  font-weight: 700;
  letter-spacing: -0.05em;
  line-height: 1.1;
  padding: 0.6em 0;
  text-align: center;
  text-decoration: none;
  -webkit-transition: 0.1s;
  transition: 0.1s;
}
.landing .btn:hover {
  box-shadow: var(--lp-shadow);
  -webkit-transform: translate(-4px, -4px);
  -moz-transform: translate(-4px, -4px);
  transform: translate(-4px, -4px);
}
.landing .btn.btn-orange {
  background: var(--lp-orange);
  margin: 0 20px 12px;
}
.landing .btn.btn-purple {
  background: var(--lp-darkpurple);
}
.landing .preco-antigo {
  display: none;
}
.landing .preco-curso s[style] + strong::before {
  content: "|";
  font-weight: 400;
  margin: 0 0.25em;
}
.landing .preco-parcelado {
  font-size: 1.25em;
}
.landing .box-style {
  border-radius: var(--lp-radius);
  box-shadow: var(--lp-shadow);
}
.landing section:not(.intro) h2 {
  color: var(--lp-darkblue);
  font-size: 1.875em;
  font-weight: 700;
  letter-spacing: -0.05em;
  line-height: 1.05;
}
.landing section:not(.sobre, .conteudo) .heading {
  text-align: center;
  text-wrap: balance;
}
.landing section:not(.sobre) .heading {
  margin-bottom: 2em;
}
.landing section:not(.sobre) .heading p {
  margin-top: 1em;
}

/* INTRO ---- */
.landing .intro {
  background: var(--lp-darkpurple)
    url(https://mktgen.com.br/imagens/curso-doencas-mentais-pessoa-idosa/bg-intro.jpg)
    center / cover no-repeat;
  color: white;
  overflow: hidden;
}
.landing .intro .gen-gbk {
  margin-bottom: 1.5em;
}
.landing .intro .firstline {
  display: grid;
  gap: var(--lp-default-mg);
}
.landing .intro .txt {
  margin-top: 1.5em;
}
.landing .intro h1 {
  background: var(--lp-green)
    url(https://mktgen.com.br/imagens/curso-doencas-mentais-pessoa-idosa/bg-nome-curso.jpg)
    center / cover no-repeat;
  font-size: 5.25vw;
  font-weight: 400;
  line-height: 1.25;
  padding: 0.8em 1em;
  z-index: 2;
}
.landing .intro h1 .big {
  display: inline-block;
  font-size: 2em;
  line-height: 1;
  letter-spacing: -0.075em;
}
.landing .intro h1 .big strong {
  color: var(--lp-darkblue);
}
.landing .intro h1 .big strong:first-child {
  display: block;
}
.landing .intro h1 .whitebox {
  background: white;
  border-radius: 4px;
  color: var(--lp-orange);
  display: inline-block;
  letter-spacing: -0.05em;
  margin-top: 0.25em;
  padding: 0.125em 0.4em;
}
.landing .intro .chancela {
  background: url(https://mktgen.com.br/imagens/curso-doencas-mentais-pessoa-idosa/bg-chancela.png)
    center right / cover no-repeat;
  padding: 1.25em 1.5em;
  position: relative;
}
.landing .intro .chancela::before {
  background: url(https://mktgen.com.br/imagens/curso-doencas-mentais-pessoa-idosa/brain-sbgg.png)
      40% 60% / 77% no-repeat,
    radial-gradient(var(--lp-darkpurple) 35%, transparent 70%);
  background-blend-mode: screen;
  content: "";
  height: 248px;
  position: absolute;
  right: -10%;
  top: -58%;
  -webkit-transform: scale(0.65);
  -moz-transform: scale(0.65);
  transform: scale(0.65);
  width: 248px;
}
.landing .intro .chancela > * {
  position: relative;
}
.landing .intro .chancela img {
  margin-left: 0;
  margin-bottom: 1.125em;
}
.landing .intro .chancela h2 {
  font-size: 1.125em;
  line-height: 1.3333;
}
.landing .intro ul {
  display: grid;
  gap: 1em;
  list-style: none;
  margin: 1.25em 0;
  padding: 0;
}
.landing :is(.intro, .sobre) ul li {
  align-items: center;
  display: flex;
  font-size: 1.125em;
  font-weight: 700;
  line-height: 1.1;
}
.landing .intro ul li picture {
  align-items: center;
  background: var(--lp-orange);
  border-radius: 6px;
  display: flex;
  flex: 0 0 48px;
  height: 48px;
  justify-content: center;
  margin-right: 0.9em;
}
.landing .intro .pricebox {
  background: white;
  color: var(--lp-black);
  /* padding: 24px 20px; */
  text-align: center;
  padding-bottom: 2px;
}
.landing .intro .preco-curso {
  margin-bottom: 1em;
}
.landing .intro .parcela {
  color: var(--lp-darkpurple);
}
.landing .intro .prova {
  position: relative;
  padding: 0.8em 1.25em;
  /* text-wrap: balance; */
  margin-bottom: 0.8em;
  background: var(--lp-orange);
  border-radius: 8px 8px 0 0;
  color: white;
  font-weight: 700;
  width: 100%;
  text-align: left;
  display: flex;
  align-items: center;
  gap: 1em;
  justify-content: space-evenly;
  line-height: 1.1;
  /* display: block; */
}
.landing .intro .prova img {
  margin: 0;
  flex: 0 0 40px;
}
.landing .intro .selo::before {
  background: linear-gradient(transparent, var(--lp-black));
  content: "";
  display: block;
  height: 16px;
  left: 0;
  opacity: 0.25;
  position: absolute;
  bottom: 0;
  width: 100%;
  border-radius: 8px 8px 0 0;
}

/* APRESENTAÇÃO ---- */
.landing .apresentacao img {
  filter: drop-shadow(var(--lp-shadow));
}
.landing .apresentacao .txt {
  margin-top: 1.875em;
}
.landing .apresentacao h2 + p {
  margin: 1.25em 0 1.875em;
}
.landing .apresentacao .bluebox {
  background: var(--lp-darkblue);
  color: white;
  padding: 20px 24px;
}
.landing .apresentacao h3 {
  color: var(--lp-green);
  font-size: 1.25em;
  font-weight: 700;
  letter-spacing: -0.05em;
  line-height: 1.05;
  margin-bottom: 0.5em;
}

/* SOBRE ---- */
.landing .sobre .wrapper {
  padding-top: calc(var(--lp-pad-y) / 2);
}
.landing .sobre h2 {
  text-align: center;
}
.landing .sobre ul {
  list-style: none;
  padding: 0;
}
.landing .sobre .diferenciais {
  display: grid;
  gap: 1.5em;
  margin-top: 1.5em;
}
.landing .sobre .diferenciais li {
  position: relative;
}
.landing .sobre .diferenciais li picture {
  background: var(--lp-orange);
  border-radius: var(--lp-radius);
  box-shadow: var(--lp-shadow);
  display: flex;
  flex: 0 0 64px;
  height: 64px;
  margin-right: 1.1em;
}
.landing .sobre .diferenciais li .flag {
  background: var(--lp-darkpurple);
  border-radius: 3px;
  bottom: calc(100% - 6px);
  color: white;
  font-size: 0.55em;
  font-weight: 700;
  left: calc(32px - 4.75ch);
  letter-spacing: 0.05em;
  line-height: 1;
  padding: 0.4em 0.7em;
  position: absolute;
  text-transform: uppercase;
}

/* DESCONTO ---- */
.landing .desconto {
  --side-mg: 20px;
  background: var(--lp-orange)
    url(https://mktgen.com.br/imagens/curso-doencas-mentais-pessoa-idosa/bg-livros-mb.jpg)
    center / cover no-repeat;
  color: white;
  margin: var(--lp-pad-y) 0 1em;
  padding: 24px 0;
}
.landing .desconto h3 {
  background: var(--lp-darkblue);
  border-radius: 0 6px 6px 0;
  display: inline-block;
  font-size: 1.5em;
  font-weight: 700;
  line-height: 1;
  padding: 0.6667em 0.8333em 0.6667em var(--side-mg);
}
.landing .desconto h3 + p {
  font-size: 1.25em;
  line-height: 1.2;
  margin: 0.8em var(--side-mg) 1.25em;
}
.landing .desconto h3 + p span {
  background: var(--lp-darkpurple);
  border-radius: 2px;
  white-space: nowrap;
}
.landing .desconto .livros {
  display: grid;
  gap: 24px;
  grid-template-columns: 1fr 1fr;
  margin: 0 var(--side-mg);
}
.landing .desconto .livros li {
  display: initial;
}
.landing .desconto + p {
  font-size: 0.75em;
  line-height: 1.25;
  text-align: center;
}
.landing .desconto + p small {
  font-size: 1em;
}

/* PROFESSORES ---- */
.landing .professores {
  background: var(--lp-green)
    url(https://mktgen.com.br/imagens/curso-doencas-mentais-pessoa-idosa/bg-professores.jpg)
    center / cover no-repeat;
}
.landing .professores .heading h2 {
  color: white;
}
.landing .professores .presidente > div {
  background: var(--lp-darkpurple);
  color: white;
  margin-top: var(--lp-default-mg);
  padding: 20px 24px;
}
.landing .professores h3 {
  color: var(--lp-orange);
  font-weight: 700;
  letter-spacing: -0.05em;
}
.landing .professores .presidente h3 {
  font-size: 1.625em;
}
.landing .professores .presidente p {
  font-size: 1.125em;
  line-height: 1.3333;
  margin-top: 0.5em;
}
.landing .professores ul {
  background: var(--lp-darkblue);
  color: white;
  display: grid;
  gap: 1.25em;
  list-style: none;
  margin-top: 22px;
  padding: 20px 24px;
}
.landing .professores ul h3 {
  font-size: 1.25em;
  margin-bottom: 0.2em;
}
.landing .professores ul p {
  line-height: 1.25;
}
.landing .professores .presidente .box-style .tag {
  background: var(--lp-green);
  border-radius: 4px;
  color: white;
  display: inline-block;
  letter-spacing: -0.05em;
  margin-bottom: 0.5em;
  padding: 0.125em 0.4em;
  font-size: 1em;
  font-weight: 700;
}

/* CONTEÚDO ---- */
.landing .conteudo {
  background: var(--lp-darkpurple);
}
.landing .conteudo .heading h2 {
  color: var(--lp-orange);
}
.landing .conteudo .heading p {
  color: white;
}
.landing .conteudo ul {
  background: var(--lp-green);
  line-height: 1.25;
  list-style: none;
  padding: 16px 20px;
}
.landing .conteudo ul li {
  padding: 0.5em;
}
.landing .conteudo ul li:not(:last-child) {
  border-bottom: 1px solid rgba(33, 25, 21, 0.2);
}
.landing .conteudo ul strong {
  color: var(--lp-darkblue);
}
.landing .conteudo .ilustracao {
  display: none;
}

/* FAQ ---- */
.landing .faq details {
  background: var(--lp-lightgray);
  -webkit-transition: 0.1s;
  transition: 0.1s;
}
.landing .faq details:hover {
  background: var(--lp-green);
}
.landing .faq details:not(:last-of-type) {
  margin-bottom: var(--lp-default-mg);
}
.landing .faq details summary {
  align-items: center;
  color: var(--lp-darkpurple);
  cursor: pointer;
  display: flex;
  font-size: 1.125em;
  font-weight: 700;
  justify-content: space-between;
  line-height: 1.25;
  padding: 1em 1.3333em;
}
.landing .faq details[open] summary {
  padding-bottom: 0.6667em;
}
.landing .faq details summary::after {
  background: url(https://mktgen.com.br/imagens/curso-doencas-mentais-pessoa-idosa/i-arrow.svg)
    center / contain no-repeat;
  content: "";
  display: block;
  flex: 0 0 12px;
  height: 1em;
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  transform: rotate(180deg);
  -webkit-transition: transform 0.25s;
  transition: transform 0.25s;
}
.landing .faq details[open] summary::after {
  -webkit-transform: initial;
  -moz-transform: initial;
  transform: initial;
}
.landing .faq details > div {
  padding: 0 1.5em 1.125em;
}

/* APOIO ---- */
.landing .apoio {
  text-align: center;
}
.landing .apoio ul {
  display: grid;
  grid-gap: 2.5em;
  gap: 2.5em;
  list-style: none;
  padding-left: 0;
}
.landing section.apoio h2 {
  font-size: 1.5em;
  margin-bottom: 1em;
}

/* FIXEDBOX ---- */
.landing .fixedbox {
  background: var(--lp-orange)
    url(https://mktgen.com.br/imagens/curso-doencas-mentais-pessoa-idosa/bg-fixedbox.jpg)
    center / cover no-repeat;
  bottom: 0;
  color: var(--lp-black);
  display: none;
  flex-direction: column;
  left: 0;
  margin: calc(var(--lp-pad-x) / 2);
  padding: var(--lp-pad-x);
  position: fixed;
  text-align: center;
  width: calc(100% - var(--lp-pad-x));
}
.landing .fixedbox.fixed {
  animation: fixedbox 0.5s;
  display: flex;
}
@keyframes fixedbox {
  from {
    -webkit-transform: translateY(100%);
    -moz-transform: translateY(100%);
    transform: translateY(100%);
  }
  to {
    -webkit-transform: initial;
    -moz-transform: initial;
    transform: initial;
  }
}
.landing .fixedbox .preco-curso {
  margin-bottom: 0.5em;
}
.landing .fixedbox .parcela {
  color: var(--lp-darkpurple);
}

/* > 480px ---- */
@media (min-width: 30rem) {
  .landing {
    --lp-wrapper: 30em;
  }
  .landing .wrapper {
    margin: 0 auto;
    max-width: var(--lp-wrapper);
  }
  .landing .intro h1 {
    font-size: 1.5em;
  }
  .landing .fixedbox {
    align-items: center;
    flex-direction: row;
    justify-content: space-between;
    padding: 24px 40px;
    text-align: left;
  }
  .landing .fixedbox .preco-curso {
    margin-bottom: 0;
  }
  .landing .fixedbox .btn {
    flex: 0 0 9.9em;
  }
}

/* > 768px ---- */
@media (min-width: 48rem) {
  .landing {
    --lp-pad-y: 40px;
    --lp-wrapper: 46em;
    font-size: 1.14285em;
  }
  .landing .intro .wrapper {
    --lp-pad-y: 32px;
    padding-bottom: calc(var(--lp-pad-y) * 1.5);
  }
  .landing .intro .firstline {
    display: flex;
  }
  .landing .intro .chancela {
    display: flex;
    flex-direction: column;
    justify-content: end;
  }
  .landing .intro .chancela::before {
    right: -8%;
    top: -55%;
    -webkit-transform: initial;
    -moz-transform: initial;
    transform: initial;
  }
  .landing .intro ul {
    grid-template-columns: 1fr 1fr;
    text-wrap: balance;
  }
  .landing .intro .pricebox {
    align-items: center;
    /* display: flex; */
    /* justify-content: space-between; */
    /* text-align: left; */
    text-align: center;
  }
  .landing .intro .valor {
    display: flex;
    justify-content: space-between;
    text-align: left;
    padding: 12px 20px;
    align-items: center;
  }
  .landing .intro .preco-curso {
    /* margin-bottom: 0; */
    margin-bottom: 12px;
  }
  .landing .intro .btn {
    flex: 0 0 13.7em;
    margin: 0;
  }
  .landing .apresentacao .wrapper {
    align-items: center;
    display: grid;
    grid-template-columns: 1fr 317px;
    gap: 20px;
  }
  .landing .apresentacao .txt {
    margin-top: 0;
    order: -1;
  }
  .landing .apresentacao h2 + p {
    margin-bottom: 0;
  }
  .landing .apresentacao .bluebox {
    grid-column: span 2;
  }
  .landing .sobre .diferenciais {
    gap: 1.5em 4em;
    grid-template-columns: 1fr 1fr;
  }
  .landing .desconto {
    --side-mg: 40px;
    background-image: url(https://mktgen.com.br/imagens/curso-doencas-mentais-pessoa-idosa/bg-livros.jpg);
    padding: 24px 0 48px;
  }
  .landing .desconto .heading {
    align-items: center;
    display: flex;
  }
  .landing .desconto h3 + p {
    margin: 0 var(--side-mg) 0 1.5em;
  }
  .landing .desconto .livros {
    grid-template-columns: repeat(4, 1fr);
    margin-top: 1.5em;
  }
  .landing .professores .presidente {
    display: flex;
  }
  .landing .professores .presidente picture {
    flex: 0 0 180px;
    margin-right: var(--lp-default-mg);
  }
  .landing .professores .presidente > div {
    font-size: 0.9em;
    margin-top: 0;
    padding: 15px 30px;
  }
  .landing .professores ul {
    gap: 1.25em 4em;
    grid-template-columns: 1fr 1fr;
    padding: 30px;
  }
  .landing .apoio .wrapper {
    padding-top: calc(var(--lp-pad-y) * .25);
  }
  .landing .apoio ul {
    grid-gap: 7em;
    gap: 7em;
    grid-template-columns: 150px 150px;
    justify-content: center;
  }
  .landing .faq,
  .landing .fixedbox {
    --lp-wrapper: 45em;
  }
  .landing .fixedbox {
    left: calc(50% - var(--lp-wrapper) / 2 + var(--lp-pad-x));
    margin: calc(var(--lp-pad-x) / 2) 0;
    max-width: calc(var(--lp-wrapper) - var(--lp-pad-x) * 2);
  }
}

/* > 992px ---- */
@media (min-width: 62rem) {
  .landing {
    --lp-pad-y: 48px;
    --lp-wrapper: 60em;
  }
  .landing .intro .wrapper {
    --lp-pad-y: 36px;
  }
  .landing .intro h1 {
    position: relative;
  }
  .landing .intro h1 .whitebox {
    bottom: 1.3em;
    left: 20ch;
    position: absolute;
  }
  .landing .intro .chancela {
    flex: 0 0 45%;
  }
  .landing .intro .chancela::before {
    right: -8%;
    top: -70%;
  }
  .landing .intro .txt {
    /* align-items: end; */
    align-items: center;
    display: flex;
    margin-top: var(--lp-default-mg);
  }
  .landing .intro ul {
    margin-bottom: 0;
  }
  .landing .intro .pricebox {
    display: block;
    flex: 0 0 19.5em;
    margin-left: 2em;
    text-align: center;
  }
  .landing .intro .valor {
    display: block;
    text-align: center;
    padding: 0 24px 20px;
  }
  .landing .intro .preco-curso {
    margin-bottom: 1em;
  }
  .landing .apresentacao .wrapper {
    grid-template-rows: 1fr auto;
  }
  .landing .apresentacao picture {
    grid-row: span 2;
  }
  .landing .apresentacao .bluebox {
    align-self: flex-end;
    grid-column: 1;
    margin-right: -130px;
  }
  .landing .sobre .wrapper {
    padding-top: 0;
  }
  .landing .sobre .diferenciais {
    gap: 1.875em 4em;
  }
  .landing .desconto .heading {
    justify-content: start;
  }
  .landing .desconto h3 {
    flex: 0 0 9.6em;
    padding-left: 5.9em;
  }
  .landing .desconto h3 + p {
    flex: 0 0 25em;
    margin-left: 1.8em;
  }
  .landing .professores .presidente > div {
    font-size: 1em;
    padding: 20px 32px;
  }
  .landing .professores ul {
    padding: 40px;
  }
  .landing .conteudo .list {
    display: flex;
  }
  .landing .conteudo ul {
    flex: 1;
    margin-right: var(--lp-default-mg);
    padding: 24px;
  }
  .landing .conteudo .ilustracao {
    background: url(https://mktgen.com.br/imagens/curso-doencas-mentais-pessoa-idosa/triple-squares.svg)
        calc(100% - 15px) 15px no-repeat,
      url(https://mktgen.com.br/imagens/curso-doencas-mentais-pessoa-idosa/img-conteudo.jpg)
        center / cover no-repeat;
    display: block;
    flex: 0 0 186px;
  }
}

/* > 1200px ---- */
@media (min-width: 75rem) {
  .landing {
    --lp-pad-y: 60px;
    --lp-wrapper: 62em;
  }
  .landing .intro .chancela::before {
    right: -6%;
  }
  .landing .intro .pricebox {
    margin-left: 2.5em;
  }
}

/* > 1360px ---- */
@media (min-width: 85rem) {
}

/* Animações ---- */
@media not (prefers-reduced-motion) {
  .js .landing .anime {
    opacity: 0;
    -webkit-transition: 0.5s;
    transition: 0.5s;
  }
  .js .landing .intro h1.anime {
    -webkit-transform: translateX(-50px);
    -moz-transform: translateX(-50px);
    transform: translateX(-50px);
  }
  .js .landing .intro .chancela.anime {
    -webkit-transform: translateX(50px);
    -moz-transform: translateX(50px);
    transform: translateX(50px);
  }
  .js .landing .intro .pricebox.anime {
    -webkit-transform: translateY(25px);
    -moz-transform: translateY(25px);
    transform: translateY(25px);
  }
  .js .landing .anime.show {
    opacity: 1;
    -webkit-transform: initial !important;
    -moz-transform: initial !important;
    transform: initial !important;
  }
}