@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700;900&display=swap");
/* contato */
.contatoHeader {
  background: #2e3136 !important;
  position: absolute;
  padding: 15px 0;
  width: 100%;
}
.contatoHeader ul {
  display: flex;
  font-size: 24px;
  justify-content: space-around;
  flex-wrap: wrap;
}
.contatoHeader ul * {
  color: #fff;
  font-weight: bold;
}
.contatoHeader li {
  display: flex;
  align-items: center;
  gap: 10px;
}
/* pirataria */

.rastrear {
  margin-bottom: 20px;
}
.rastrear:hover {
  text-decoration: underline;
}
.cliqueAqui {
  color: #0039b9;
  transition: color 0.5s;
}
.cliqueAqui:hover {
  color: currentColor;
}

.pirataria {
  display: block;
  text-align: center !important;
  width: 100%;
  margin: 20px 0;
  color: #090909;
}
.titulo_alerta {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  margin-bottom: 18px;
}
.pirataria h3 {
  margin-left: 10px !important;
  font-size: 24px !important;
  line-height: 32px !important;
  font-weight: bold !important;
  margin-bottom: 0 !important;
}
.pirataria img {
  display: block;
  max-width: 100%;
  margin: 10px 0;
}
.pirataria p {
  font-size: 16px;
  text-transform: none !important;
  line-height: 1.4;
}
.pirataria p strong {
  text-transform: uppercase;
}
.pirataria.esconder {
  display: none !important;
}
@media (max-width: 550px) {
  .pirataria.esconder {
    display: block !important;
  }
  .pirataria {
    display: none !important;
  }
}
* {
  margin: 0;
  padding: 0;
  text-decoration: none;
  list-style: none;
  box-sizing: border-box;
  color: #333;
}
p {
  font-size: 16px;
  line-height: 20px;
}
.pmb {
  margin-bottom: 17px;
}
html {
  scroll-behavior: smooth;
}
body {
  background: #fff;
  font-family: "Roboto", sans-serif;
  overflow-x: hidden;
}
.titulo {
  color: #00adff;
  font-size: 31px;
  line-height: 31px;
  margin-bottom: 5px;
}
.container {
  width: 980px;
  margin: 0 auto;
}
.btn {
  display: flex;
  background: #0039b9;
  border-radius: 40px;
  padding: 15px 20px;
  font-size: 20px;
  color: #fff;
  transition: filter 0.5s;
  font-weight: 700;
  text-align: center;
  width: 410px;
  justify-content: center;
}
.btn:hover {
  filter: brightness(80%);
}
/* header */
header {
  height: 57px;
  background: #fff;
  width: 100%;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 9999;
  box-shadow: rgb(51, 51, 51) 0px 0px 5px 0px;
}
header .container {
  display: flex;
  justify-content: space-between;
  padding: 5px 30px;
  height: 100%;
  align-items: center;
}
header .container > img {
  width: 180px;
}
header .btn {
  padding: 2px 26px;
  text-transform: uppercase;
  margin-right: 10px;
  width: 230px;
  justify-content: center;
}
.conteudo_header {
  display: flex;
  align-items: center;
}
.tempo {
  display: grid;
  grid-template-columns: 40px 1fr;
  grid-gap: 5px;
  align-items: center;
}
.tempo img {
  display: block;
  width: 100%;
}
.tempo > div > span {
  font-size: 9px;
  line-height: 11px;
}
.tempo > div > p {
  font-size: 11px;
  font-weight: 700;
  line-height: 11px;
}

/* banner */
.banner {
  margin-top: 57px;
  padding: 102px 10px 15px 10px;
  background: url(../img/banner.jpg) no-repeat top;
  background-color: #202632;
}
.intro {
  color: #000;
  font-size: 24px;
  line-height: 24px;
  text-transform: uppercase;
  font-weight: bold;
  letter-spacing: 0.03em;
}
h1 {
  color: #00adff;
  font-size: 32px;
  line-height: 32px;
  margin-bottom: 11px;
}
.desc {
  width: 100%;
  max-width: 500px;
  font-size: 18px;
  font-weight: 700;
  line-height: 22px;
  margin-bottom: 32px;
}
.beneficios {
  display: grid;
  width: 100%;
  max-width: 500px;
  grid-template-columns: 105px 1fr;
  grid-gap: 30px;
}
.beneficios > img {
  display: block;
  width: 100%;
  align-items: center;
}
.beneficios ul li {
  list-style: url(../img/liststyle.png);
  font-size: 18px;
  line-height: 23px;
  font-weight: 700;
  margin-bottom: 10px;
}
.banner .btn,
.secao2 .btn {
  width: 400px;
  height: 68px;
  margin-top: 10px;
}
.btn > img {
  display: flex;
  width: 30px;
  height: 30px;
  margin-right: 20px;
  align-self: center;
}
.btn > div p {
  color: #fff;
  font-size: 18px;
  line-height: 19px;
}
.btn > div > span {
  color: #ffff00;
  font-size: 13px;
  font-weight: 300;
}

/* seção 2 */
.secao2 {
  padding: 20px 10px 20px 10px;
}
.titulo2 {
  font-weight: 700;
  font-size: 19px;
  line-height: 21px;
}
.conteudo_sec2 {
  display: grid;
  margin-top: 20px;
  grid-template-columns: 320px 1fr;
}
.conteudo_sec2 > img {
  width: 180px;
  margin: 0 auto;
}
.secao2 .btn {
  margin-top: 40px;
}

/* seção 3 */
.secao3 {
  background: #eef1f4;
  padding: 35px 25px;
}
.itens {
  margin-top: 20px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
.item {
  border-right: 1px solid #000000;
  text-align: center;
  padding: 0 18px;
}
.item:last-child {
  border-right: none;
}
.item h4 {
  color: #000;
  text-transform: uppercase;
  margin-top: 7px;
  text-align: center;
}
.item p {
  text-align: center;
  font-size: 13px;
  line-height: 16px;
}
.img_divisao {
  display: none !important;
}
/*  seção 4  */
.secao4 {
  margin-top: 20px;
}
.secao4 p {
  font-size: 14px;
  line-height: 18px;
}
.content {
  display: grid;
  grid-template-columns: 1fr 373px;
  grid-gap: 67px;
  align-items: center;
}
.content > img {
  display: block;
  width: 100%;
}
.conteudo_secao4 .titulo2 {
  margin-bottom: 20px;
}
.lista_informacoes {
  position: relative;
  height: 640px;
}
.explicacao_mb {
  display: none;
}
.explicacao {
  position: absolute;
}
.lista_informacoes {
  margin-top: 33px;
}
.lista_item {
  width: 30%;
}
.titulo_lista {
  font-size: 17px;
  line-height: 22px;
  font-weight: bold;
  padding-bottom: 11px;
  border-bottom: 1px solid #000;
}
.titulo_lista h3 {
  display: flex;
  align-items: center;
}
.titulo_lista h3 > span {
  color: #004d7d;
  font-size: 32px;
  font-weight: 700;
  margin-left: 11px;
  margin-right: 11px;
}
.lista_item p {
  line-height: 22px;
  margin-top: 10px;
}
.explicacao {
  left: 50%;
  transform: translateX(-50%);
  top: 0;
  z-index: -1;
}
.i2 {
  position: absolute;
  right: 0;
  top: 0;
}
.i1_1 {
  position: absolute;
  top: 320px;
}
.i3 {
  position: absolute;
  right: 0;
  top: 240px;
  width: 25%;
}
.i4 {
  position: absolute;
  right: 0;
  top: 470px;
}
.secao4 .btn {
  width: 400px;
  height: 86px;
  align-items: center;
  margin: 0 auto;
}
.secao4 .btn div > p {
  font-size: 25px !important;
  line-height: 30px;
}
.secao4 .btn div > span {
  font-size: 18px;
}

.produto_ajuste,
.titulo_escoder {
  display: none;
}

/* seção 5 */
.secao5 {
  padding: 20px 0 36px 0;
  margin-top: 20px;
  background: #070a0b url(../img/bg-s5.jpg) no-repeat top;
}
.conteudo_topo {
  display: grid;
  grid-template-columns: 310px 1fr;
  align-items: center;
  grid-gap: 48px;
}
.conteudo_topo img {
  width: 100%;
  display: block;
}
.conteudo_topo > div {
  text-align: center;
}
.conteudo_topo > div span i {
  font-size: 23px;
  color: #fff;
  font-weight: 700;
}
.latin {
  font-size: 22px !important;
  line-height: 22px !important;
  font-weight: 400 !important;
}
.conteudo_topo > div p {
  color: #fff;
  font-size: 19px;
  line-height: 26px;
  margin-top: 22px;
}
.ingredientes {
  margin-top: 36px;
  text-align: center;
}
.titulo_ingredientes {
  color: #fff;
  font-size: 42px;
  margin-bottom: 38px;
}
.itens_ingredientes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 23px;
}
.item_ingrediente h3,
.item_ingrediente h3 i {
  color: #00adff;
  font-size: 20px;
  line-height: 22px;
}
.item_ingrediente p,
.item_ingrediente p i {
  color: #fff;
}

/* seção 6 */
.secao6 {
  margin-top: 30px;
}
.secao6_conteudo {
  display: grid;
  grid-template-columns: 1fr 400px;
  grid-gap: 10px;
}
.secao6_conteudo p {
  margin-bottom: 53px;
  font-size: 19px;
  line-height: 29px;
}
.secao6_conteudo > img {
  display: block;
  width: 100%;
  border: 1px solid rgb(131, 129, 129);
  padding: 1px;
}
.secao6 blockquote {
  display: grid;
  grid-template-columns: 150px 1fr;
  align-items: center;
  grid-gap: 25px;
}
.secao6 blockquote p {
  font-size: 19px;
  line-height: 29px;
}
.secao6 .btn {
  margin-top: 74px;
  margin-bottom: 30px;
}
.img_divisao {
  display: none;
}
.mostrar_mobile {
  display: none;
}
/* seção 7 */
.secao7 {
  background: #ededed;
  padding: 30px 0 10px 0;
}
.historias {
  margin-top: 38px;
  padding: 10px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 44px;
}
.historia:nth-child(even) {
  text-align: right;
}
.historia h4 {
  font-size: 30px;
  line-height: 30px;
  padding-bottom: 14px;
  border-bottom: #00adff 1px solid;
}
.historia p {
  color: #000;
  margin-top: 14px;
}
.historia legend {
  font-size: 14px;
  color: #000;
  margin-top: 12px;
}
.seguro {
  margin-top: 49px;
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.conteudo_seguro .titulo,
.conteudo_seguro .titulo2 {
  width: 300px;
}
.conteudo_seguro .titulo2 {
  margin-bottom: 60px;
}

.conteudo_seguro ul {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 40px;
}
.conteudo_seguro ul li {
  display: grid;
  grid-template-columns: 40px 1fr;
  grid-gap: 10px;
}
.conteudo_seguro ul li img {
  width: 100%;
  display: block;
}
.conteudo_seguro ul li p {
  font-size: 18px;
  line-height: 24px;
}
.btn-compra {
  width: 210px;
  border-radius: 8px;
  align-items: center;
  grid-column: -1/1;
  margin: 20px auto 0 auto;
}
.btn-compra > div p {
  font-size: 24px;
  line-height: 24px;
}

/* kits */
.kits_content {
  background: #fff;
}
.kit_ {
  border: 2px solid #c77652;
  padding: 20px 10px;
  border-radius: 5px;
}
.kit_ > div {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  position: relative;
}
.kits {
  margin-top: 30px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 20px;
}
.kit_ .btn_compra {
  width: 95%;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 42px;
  background: rgb(53, 100, 0);
  color: #fff;
  border-radius: 21px;
  font-weight: bold;
  text-decoration: none;
  position: absolute;
  top: -42px;
  transition: transform 0.5s, box-shadow 0.5s;
}
.kit_ .btn_compra:hover {
  transform: scale(1.05);
  box-shadow: 2px 6px 6px rgba(28, 55, 2, 0.282);
}
.kit_ h3,
.mais-vendidos {
  color: #974119 !important;
  margin-top: 15px;
  margin-bottom: 15px;
  font-size: 18px;
  text-transform: uppercase;
  font-weight: bold;
}
.kit_ div > img {
  padding: 0 50px;
}
.kit_ .de,
.kit_ .por {
  display: block;
  font-size: 16px;
  color: #111;
}
.kit_ .de s {
  font-size: 20px;
  color: rgb(238, 30, 30);
}
.kit_ .por {
  font-weight: bold;
  font-size: 14px;
}
.preco {
  font-size: 40px;
  color: rgb(4, 225, 22);
  font-weight: bold;
  margin: 20px 0;
}
.kit_ div > p {
  color: #111;
  text-transform: uppercase;
}
.kit_ s {
  text-decoration: line-through;
}
.comprarAgora {
  background: rgb(32, 121, 2);
  width: 80%;
  height: 54px;
  display: flex;
  margin-top: 30px;
  justify-content: center;
  align-items: center;
  color: #fff;
  border-radius: 5px;
  text-decoration: none !important;
  text-transform: uppercase;
  transition: background 0.7s;
  font-weight: bold;
  position: relative;
  animation: tuctuc 2s infinite linear;
}
.comprarAgora:hover {
  background: #d67003;
  color: #fff;
}
i.fas.fa-trophy {
  color: #974119;
}
@keyframes tuctuc {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}
.kits_content .bandeiras {
  display: flex;
  justify-content: center;
  padding-bottom: 40px;
}

.perguntas {
  background: #fff;
  padding: 80px 0;
  color: #111;
}

.mybtn {
  display: block;
  margin: 40px;
  display: flex;
  justify-content: center;
  text-decoration: none !important;
}

.kits_content .container .titulo2 {
  padding-bottom: 30px !important;
}
/* seção 8 */
.secao8 {
  background: #eef1f4;
  padding: 55px 10px;
}
.secao8 .container {
  display: grid;
  grid-template-columns: 1fr 216px;
  grid-gap: 12px;
  align-items: center;
}
.secao8 .container img {
  display: block;
  width: 100%;
}
.secao8_conteudo p {
  font-size: 20px;
  line-height: 27px;
}

/* seção 9 */
.secao9 {
  margin-top: 20px;
}
.js-accordion dd {
  display: none;
}
.js-accordion dt.ativo img {
  transform: rotate(180deg);
  transition: ease 0.5s;
}
.js-accordion dd.ativo {
  display: block;
  animation: slidedown 0.5s forwards;
  padding: 20px;
  font-size: 14px;
  line-height: 21px;
  color: #000;
}
@keyframes slidedown {
  from {
    opacity: 0;
    max-height: 0;
  }
  to {
    opacity: 1;
    max-height: 500px;
  }
}
dt {
  background: #2e3136;
  color: #fff;
  font-size: 22px;
  padding: 16px;
  margin-bottom: 1px;
  cursor: pointer;
}
.faq-lista {
  margin-top: 30px;
}

/* seção 10 */
.secao10 {
  margin-top: 30px;
  background: #ddd url(../img/bg-compra.jpg) no-repeat;
  background-size: cover;
  background-position: 40% 0px;
}
.secao10 .container {
  display: grid;
  grid-template-columns: 1fr 380px;
  grid-gap: 20px;
  padding: 75px 0;
}
.secao10 .container span {
  font-size: 25px;
  line-height: 32px;
  color: #fff;
  display: block;
  text-align: center;
}
.secao10 .container .titulo {
  text-align: center;
}
.bloco1 {
  display: grid;
  grid-template-columns: 160px 1fr;
  grid-gap: 20px;
}
.bloco1 > img {
  display: block;
  width: 100%;
}
.bloco1 div ul {
  margin-top: 22px;
}
.bloco1 div ul li {
  list-style: url(../img/checkd.png);
  margin-left: 20px;
  color: #fff;
  font-size: 18px;
  line-height: 24px;
  margin-bottom: 14px;
}
.bloco2 {
  position: relative;
  background: #000;
  border-radius: 15px;
  height: 400px;
  justify-content: space-around;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.desconto {
  position: absolute;
  top: -12px;
  left: 0;
}
.titulos {
  width: 70%;
  position: absolute;
  margin-bottom: 50px;
}
.bloco2 .btn-compra {
  width: 300px;
  height: 94px;
  border-radius: 50px;
  position: absolute;
  bottom: 50px;
  left: 50%;
  transform: translateX(-50%);
}
.envio_gratis {
  position: absolute;
  width: 180px;
  bottom: -60px;
  left: -140px;
}

/* footer */
footer {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  padding: 34px 20px;
}
footer img {
  width: 220px;
  margin-bottom: 20px;
}
footer span a,
footer p {
  font-size: 12px;
  line-height: 18px;
}
footer p {
  margin-top: 20px;
}

.pirataria {
  display: block;
  margin: 40px auto 0 auto;
  width: 100%;
}

/* modal */
.modal-container {
  height: 100vh;
  width: 100%;
  background: rgba(0, 0, 0, 0.487);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 200000;
  display: none;
  justify-content: center;
  align-items: center;
}
.modal-container.ativo {
  display: flex;
}
.modal {
  background: #fff;
  padding: 40px;
  position: relative;
  min-width: 250px;
  text-align: center;
  border: #ff0000 5px solid;
  max-width: 50%;
}
.modal p {
  font-size: 22px;
  margin-bottom: 14px;
}
.modal h2 {
  margin-bottom: 30px;
}
.modal h1 {
  color: #ff0000;
  text-transform: uppercase;
  font-size: 42px;
  line-height: 50px;
}
.modal a {
  padding: 10px 20px;
  text-decoration: underline;
  font-size: 18px;
  font-weight: 500;
  margin-top: 20px;
  display: inline-block;
}
@keyframes modal {
  from {
    opacity: 0;
    transform: translate3d(0, -30px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

.ativo .modal {
  animation: modal 0.5s forwards;
}

.fechar {
  position: absolute;
  top: 0;
  right: 0;
  width: 50px;
  height: 50px;
  border: 4px solid #fff;
  border-radius: 50%;
  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.3);
  background: #974119;
  font-size: 1.2em;
  color: #fff;
  cursor: pointer;
}

/* responsivo */
@media (max-width: 980px) {
  .container {
    width: 90%;
  }
  .i1,
  .i2,
  .i1_1,
  .i3,
  .i4 {
    position: static;
    width: 100%;
    margin-top: 12px;
  }
  .explicacao {
    position: static;
    transform: translateX(0);
  }
  .lista_informacoes {
    height: auto;
  }
  .secao4 .btn {
    margin-top: 40px;
  }
  .secao6_conteudo {
    grid-template-columns: 1fr 1fr;
  }
  .seguro > img {
    display: block;
    width: 100%;
  }
  .secao10 .container {
    grid-template-columns: 1fr;
  }
  .envio_gratis {
    left: 0;
  }
  .kits {
    grid-template-columns: repeat(2, 1fr);
    grid-row-gap: 40px;
  }

  .modal h1 {
    font-size: 24px;
    line-height: 30px;
  }
  .modal h2 {
    font-size: 18px;
    line-height: 20px;
  }
  .modal p {
    font-size: 16px;
    line-height: 24px;
  }
  .modal a {
    margin-top: 10px;
  }
}
@media (max-width: 800px) {
  .contatoHeader svg {
    width: 20px;
    height: 20px;
  }
  .contatoHeader ul * {
    font-size: 16px;
  }
  .banner {
    background: url(/assets/img/banner.jpg) no-repeat;
    margin-top: 87px;
  }
  header {
    height: auto;
  }
  header .container {
    flex-direction: column;
  }
  .conteudo_sec2 {
    grid-template-columns: 1fr;
    padding-bottom: 20px;
  }
  .itens,
  .content,
  .conteudo_topo,
  .secao6_conteudo,
  .seguro {
    grid-template-columns: 1fr;
    grid-gap: 20px;
  }
  .secao6 blockquote {
    grid-template-columns: 80px 1fr;
    margin-top: 30px;
  }
  .secao6 blockquote p {
    font-size: 16px;
    line-height: 24px;
  }
  .secao6 blockquote img {
    display: block;
    width: 100%;
  }
  .item {
    border-right: none;
  }
  .explicacao {
    display: none;
  }
  .explicacao_mb {
    display: block;
    margin: 0 auto;
  }
  .conteudo_topo img {
    width: 220px;
    margin: 0 auto;
  }
  .secao8 .container img {
    display: block;
    margin: 0 auto;
    width: 150px;
  }
  .secao6_conteudo > img {
    grid-row: 1;
  }
}
@media (max-width: 550px) {
  .banner {
    background: url(../img/bg-mobile.jpg) no-repeat top;
    margin-top: 87px;
    background-size: cover;
  }

  header .container > img {
    width: 180px;
  }
  header .btn {
    padding: 2px 16px;
    width: 120px;
    font-size: 14px;
  }
  .titulo {
    font-size: 24px;
    line-height: 24px;
  }
  .banner .btn,
  .secao6 .btn,
  .secao2 .btn,
  .secao4 .btn {
    width: 100%;
    height: auto;
  }
  .explicacao_mb {
    width: 100%;
  }
  .bloco2 .btn-compra {
    width: 90%;
  }
  .itens_ingredientes,
  .conteudo_seguro ul,
  .historias {
    grid-template-columns: 1fr;
  }
  .historia:nth-child(even) {
    text-align: left;
  }
  .envio_gratis {
    display: none;
  }
  .seguro > img {
    width: 300px;
  }
  .beneficios {
    align-items: center;
  }
  .beneficios ul li {
    font-size: 14px;
    line-height: 20px;
    margin-bottom: 10px;
  }
  .intro {
    color: #000;
    font-size: 18px;
    line-height: 24px;
    width: 50%;
    display: block;
  }
  h1 {
    color: #00adff;
    font-size: 24px;
    line-height: 24px;
    margin-bottom: 11px;
    width: 50%;
  }
  .secao8 .container {
    grid-template-columns: 1fr;
  }
  .desc {
    font-size: 14;
    font-weight: 400;
    line-height: 21px;
    margin-bottom: 22px;
  }

  .conteudo_sec2 > img,
  .esconderp,
  .secao8 .container img {
    display: none;
  }
  .titulo2 {
    font-size: 17px;
    line-height: 24px;
  }
  .produto_ajuste,
  .img_divisao {
    display: block !important;
    width: 100% !important;
  }
  .ajuste_mobile,
  .divisao_sec8,
  .bloco1 {
    display: grid !important;
    grid-template-columns: 105px 1fr !important;
    align-items: center;
    grid-gap: 10px;
  }
  .mostrar_mobile,
  .titulo_escoder {
    display: block;
  }
  .content > img {
    border: 5px solid #ff0000;
  }
  .titulo_mostrar {
    display: none;
  }
  .bloco1 div ul li {
    font-size: 14px;
    line-height: 21px;
  }
  .secao5 {
    background: #070a0b url(../img/bg-s5.jpg) no-repeat top;
    background-size: cover;
  }
  .kits {
    grid-template-columns: 1fr;
    grid-row-gap: 40px;
  }

  .modal {
    padding: 10px;
  }
  .modal h1 {
    font-size: 18px;
    line-height: 20px;
    width: 100%;
  }
  .fechar {
    right: -25px;
    top: -25px;
  }
  .modal h2 {
    margin-bottom: 10px;
  }
  .modal a {
    font-size: 14px;
    margin-top: 0;
  }
}
@media (max-width: 345px) {
  .contatoHeader {
    top: 115px;
    padding: 5px 0;
  }
  .contatoHeader ul {
    justify-content: flex-start;
  }
}
