:root {
  --cor-de-fundo: #EBECEE;
  --branco: #FFFFFF;
  --laranja: #EB9B00;
  --color-itens: linear-gradient(97.54deg, #002F52 35.49%, #326589 165.37%);
  --preto: black;
  --fonte-principal: 'Poppins', sans-serif;
  --fonte-secundaria: 'Josefin Sans', sans-serif;
  --azul: #002F52;
  --cinza-claro: #858585;
  --cinza-escuro: #474646;
}

.body {
  background-color: var(--cor-de-fundo);
  font-family: var(--fonte-principal);
  font-size: 16px;
  font-weight: 400;
}

/* ------------ HEADER ----------*/

.container {
  display: flex;
  align-items: center;
}

.container__titulo {
  display: none;
}

.container__texto {
  display: none;
}

.cabecalho {
  background-color: var(--branco);
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
}

.cabecalho__menu-hamburger {
  width: 24px;
  height: 24px;
  background-image: url("/assets/images/Menu.svg");
  display: inline-block;
  background-repeat: no-repeat;
  background-position: center;
}

.container__botao {
  display: none;
}

.container__botao:checked ~ .container__rotulo > .cabecalho__menu-hamburger {
  background-image: url(/assets/images/Menu\ Aberto.png);
}

.container__botao:checked ~ .container__rotulo {
  background: var(--azul);
}

.lista-menu {
  display: none;
  position: absolute;
  top: 100%;
  width: 60vw;
}

.container__botao:checked~.lista-menu {
  display: block;
  width: auto;
}

.lista-menu__titulo {
  color: var(--laranja);
  font-weight: 700;
}

.lista-menu__link {
  background: var(--color-itens);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-transform: uppercase;
}

.lista-menu__titulo, .lista-menu__item {
  padding: 1em;
  background-color: var(--branco);

}

.container__imagem {
  padding: 0.5em;
}


.opcoes {
  display: none;
}
/* ----------- BANNER ----------*/

.banner {
  background: var(--color-itens);
  color: var(--branco);
  text-align: center;
  padding: 2.5em 2em;
}

.banner__titulo {
  font-size: 18px;
  font-weight: 700;
}

.banner__texto {
  font-weight: 500;
  margin: 1em 0;
}

.banner__pesquisa {
  background-color: transparent;
  border: 1px solid var(--branco);
  color: var(--branco);
  border-radius: 24px;
  padding: 1em;
  width: 100%;
}

.banner__pesquisa::placeholder {
  font-family: var(--fonte-principal);
  font-size: 14px;
  font-weight: 400;
  text-align: center;
  color: var(--branco);
  background: url(/assets/images/Pesquisa.svg) no-repeat;
  background-position: 1em;
}



/* ----------- CARROSSEL ----------*/

.carrossel__titulo {
  color: var(--laranja);
  background-color: var(--branco);
  text-align: center;
  text-transform: uppercase;
  font-size: 18px;
  font-weight: 700;
  padding: 1em 0 0.5em 0;
}

.swiper-slide img {
  width: 100%;
}

.swiper-button-prev, .swiper-button-next {
  display: none;
}

.swiper-pagination {
  position: initial;
  margin: .5em 0;
}

/* --------- CARDS --------- */

.card__descricao {
  display: flex;
  justify-content: space-between;
  margin-bottom: 0.5em;
}

.descricao__titulo {
  color: var(--laranja);
  font-weight: 700;
}

.descricao__titulo-livro {
  color: var(--azul);
  font-size: 18px;
  font-weight: 700;
  margin: 0.5em 0;
}

.descricao__texto {
  font-size: 14px;
}

.card__botoes {
  display: flex;
  justify-content: space-between;
}

.botoes {
  display: flex;
}

.botoes__item {
  margin: 0 0.5em;
}

.card {
  background: var(--branco);
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
  border-radius: 10px;
  margin: 1em;
  padding: 1em;
}

.botoes__ancora {
  background-color: var(--laranja);
  padding: 1em 1.7em;
  color:var(--branco);
  font-weight: 700;
}

.ancora__escritora {
  padding: 1em 2.2em;
}

.estrelinhas {
  margin-bottom: 0.5em;
}

/* ------- TOPICOS -------- */

.topicos {
  background: var(--color-itens);
  text-align: center;
  padding: 1em 0;
}

.topicos__titulo {
  color: var(--branco);
  font-weight: 300;
  margin-bottom: 1em;
}

.topicos__lista {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.topicos__item{
  margin: 2em 0.5em;
}

.topicos__link {
  color: var(--branco);
  padding: 1em;
  background-color: var(--laranja);
  font-size: 14px;
  font-weight: 700;
}

/* ------- CONTATO -------- */

.contato {
  background-color: var(--branco);
  padding: 1em;
}

.contato__titulo{
  font-size: 18px;
  font-weight: 500;
}

.contato__texto{
  font-weight: 300;
  margin: 1em 0;
}

.contato__titulo, .contato__texto {
  background: var(--color-itens);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.contato__email {
  padding: 1em;
  border: 1px solid var(--azul);
  border-radius: 24px;
  width: 90%;
  color: var(--azul);
}

.contato__email::placeholder {
  font-family: var(--fonte-principal);
  color: var(--azul);
  background: url(/assets/images/Email.svg) no-repeat;
  padding-left: 2em;
  font-size: 14px;
  font-weight: 400;
}

/* ------- FOOTER -------- */

hr {
  margin: 0;
}

.rodape {
  background-color: var(--branco);
  padding: 1em;
}

.lista-rodape {
  display: none;
}

/* ------- LAYOUT 1024 -------- */

@media screen and (min-width: 1024px) {

  /* ------- HEADER -------- */

  .cabecalho__menu-hamburger {
    display: none;
  }

  .container__imagem-transparente {
    display: none;
  }

  .container__titulo, .container__titulo--negrito {
    font-family: var(--fonte-secundaria);
    font-size: 30px;
  }

  .container__titulo {
    font-weight: 400;
    display: block;
  }

  .container__titulo--negrito {
    font-weight: 700;
  }

  .opcoes {
    display: flex;
  }

  .container__texto {
   display: none;
  }

  .opcoes__item {
   padding: 0 1em;
   text-transform: uppercase;
  }

  .opcoes__link {
    color: var(--preto);
  }

  .opcoes__botao:checked~.lista-menu {
    display: block;
    width: auto;
  }

  .opcoes__botao {
    display: none;
  }

  .opcoes__botao:checked ~.opcoes__rotulo > .opcoes__item {
    background: var(--azul);
    color: var(--branco);
  }

  .opcoes__item {
    padding: 2em 1em;
  }

  .lista-menu__item:hover {
    background: var(--color-itens);
  }

  .lista-menu__item:hover > .lista-menu__link {
    -webkit-text-fill-color: var(--branco);
  }

  /* ------- BANNER -------- */

  .banner__titulo {
    font-size: 36px;
  }

  .banner__pesquisa {
    width: 50%;
  }

  .banner__pesquisa::placeholder {
    background-position: 6em;
  }

  /* ------- CARROSESEL -------- */

  .carrossel__titulo {
    font-size: 26px;
  }


  .swiper-pagination {
    margin: 2em 0 3em 0;
  }

  .swiper {
    width: 60%;
  }

  .swiper-button-next, .swiper-button-prev {
    display: block;
    top: 60%;
  }

  .card {
    width: 40%;
    margin: 2em auto;
  }

  /* ------- TOPICOS -------- */

  .topicos__titulo {
    font-size: 24px;
  }

  .topicos__link {
    font-size: 24px;
  }

  /* ------- CONTATO -------- */

  .contato {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .contato__email {
    width: 30%;
  }

  .contato__titulo {
    font-size: 24px;
  }

  .contato__descricao {
    margin-right: 1em;
    width: 30%;
  }

  /* ------- FOOTER -------- */

  .lista-rodape {
    display: block;
  }

  .rodape__titulo {
    font-size: 24px;
  }

  .rodape {
    display: flex;
    justify-content: space-around;
  }

  .lista-rodape__item {
    display: flex;
    align-items: center;
    margin: 0.6em 0;
  }

  .lista-rodape__link {
    margin-left: 0.6em;
    color: var(--cinza-escuro);
  }

  .lista-rodape__titulo {
    color: var(--cinza-claro);
    font-size: 14px;
  }

}

/* ------- LAYOUT 1728 -------- */

@media screen and (min-width: 1728px) {

  /* ------- HEADER -------- */

  .container__link {
    display: flex;
    align-items: center;
  }

  .container__texto{
    display: block;
    color: var(--preto);
    font-size: 20px;
  }

  .cabecalho {
    padding: 0 2em;
  }

  .opcoes {
    margin-right: auto;
  }

  /* ------- BANNER -------- */

  .banner {
    padding: 6em 0;
  }

  .banner__pesquisa {
    width: 35%;
  }

  .banner__pesquisa::placeholder {
    background-position: 10em;
  }

  /* ------- CARROSSEL -------- */

  .carrossel__container {
    display: flex;
    margin: 0 20vw 3em 20vw;
    align-items: center;
  }

  .swiper-pagination {
    margin: 1em 0;
  }

  .swiper {
    width: 50%;
  }

  .descricao {
    margin-right: 1em;
  }

  .descricao__titulo {
    font-size: 32px;
  }

  .descricao__texto {
    font-size: 16px;
  }

  .card {
    width: 60%;
    margin-left: 3em;
  }

  /* ------- TOPICOS -------- */

  .topicos {
    padding: 3em 25vw;
  }

  /* ------- CONTATO -------- */

  .contato {
    padding: 3em 20vw;
  }

  /* ------- RODAPE -------- */

  .rodape {
    padding: 3em 0;
  }

  .lista-rodape {
    border-left: 1px solid var(--cinza-claro);
    padding-left: 1em;
  }

}