@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Anton&display=swap');


body{
  
    font-family: 'Open Sans', sans-serif;
    color: #1d1b1b;
}

/* Largura da barra de rolagem */
::-webkit-scrollbar {
    width: 10px;
}

/* Fundo da barra de rolagem */
::-webkit-scrollbar-track-piece {
    background-color: #EEE;
    border-left: 1px solid #CCC
}

/* Cor do indicador de rolagem */
::-webkit-scrollbar-thumb:vertical,
::-webkit-scrollbar-thumb:horizontal {
    background-color: #f11a14;
}

/* Cor do indicador de rolagem - ao passar o mouse */
::-webkit-scrollbar-thumb:vertical:hover,
::-webkit-scrollbar-thumb:horizontal:hover {
    background-color: #f11a14;
}
img{max-width: 100%;}

h1,h2,h3,h4,h5,h6{
  line-height: 1.3em;
  margin-bottom: 10px;
}

h2{ font-size: 35px; font-weight: 800; text-transform: uppercase;}


p{ 
  font-size: 17px;
  line-height: 1.4em;
  font-weight: 500;
  margin-bottom: 10px;
}

label{font-weight: 600; margin-bottom: 15px;}
label i{color:gray;}
.code input,.code textarea{
  font-size: 13px;
  background: #f2f2f2;
}

strong,b{font-weight: 700;}

.pulsar {
    animation-name: pulse;
    -webkit-animation-name: pulse;
    animation-duration: 1.5s;
    -webkit-animation-duration: 1.5s;
    animation-iteration-count: infinite;
    -webkit-animation-iteration-count: infinite;
}

@keyframes pulse{
0%,100%{transform:scale(.9);opacity:.9;}
50%{transform:scale(1);opacity:1;}
}
@-webkit-keyframes pulse{
0%,100%{-webkit-transform:scale(.95);opacity:.7}
50%{-webkit-transform:scale(1);opacity:1}
}

@-webkit-keyframes shadow{
0%,100%{box-shadow: #901a1a 1px 1px 5px;}
50%{box-shadow: #901a1a 1px 1px 30px;}
}

/*configurações de seção*/

section{
  padding: 50px 0;
  position: relative;
}
section h2 b{
  font-weight: 800;
  color: #f11a14;
}
section p{
  font-size: 17px;
}

/*header*/

#header{
  padding: 50px 0;
  background: url('../../midia/img/bg-header.jpg') no-repeat;
  background-size: cover;
  color: #FFF;
  height: 666px;
}

#header .rastreio{
  border: solid 1px #FFF;
  color: #FFF;
  text-align: center;
  font-weight: 800;
  font-size: 12px;
  display: block;
  padding: 15px;
  border-radius: 5px;
}

#header .row:nth-child(2){
  justify-content: space-between;
}
#header h2{
  font-family: 'Anton', sans-serif;
  font-size: 50px;
  letter-spacing: 1px;
  line-height: 1.1em;
}

#lista-header li{
  font-size: 17px;
  margin-bottom: 25px;
  margin-left: 40px;
  position: relative;
}

#lista-header li:before{
  content: "";
  width: 30px;
  height: 30px;
  position: absolute;
  background: url('../../midia/img/check.png') no-repeat;
  background-size: contain;
  left: -40px;
  top: -5px;
}

#img-header{
  position: relative;
  bottom: -2%;
  z-index: 1;
}

.bt-tabelas{
  display: block;
  text-align: center;
 background: radial-gradient(#fa3636,red);
 font-weight: 800;
  color: #FFF;
  font-size: 16px;
  padding: 20px;
  text-decoration: none;
}
.bt-tabelas:hover{
  text-decoration: none;
  color: #FFF;
  opacity: 0.8;
}

/*Anvisa*/

#anvisa{
  background-color: #870505;
  background-image: url('../../midia/img/bg-quad.png');
  background-size: 10px;
  color:#FFF;
  padding: 50px 0 20px;
}
#anvisa h3{
  font-size: 20px;
  font-weight: 800;
}

/*Funcionamento*/

#funcionamento{
  background: #dedede;
}
#funcionamento h3{
  font-size: 20px;
  font-weight: 700;
}

.border-b{
  border-right: solid 2px #000;
}
#taxas h4{
  margin: 0;
}
#taxas h5{
  font-size: 60px;
  color: #f11a14;
  font-weight: 800;
}
#taxas .box{
  margin: 15px 30px;
}

/*Beneficios*/

#beneficios{
  background: radial-gradient(circle farthest-side at 51% 60%, #222223, #000);
  color: #FFF;
}
#beneficios b{
  color: #f11a14;
}


.circ-1 {
  position: absolute;
  width: 400px;
  height: 400px;
  border: dashed #FFF 2px;
  border-radius: 50%;
  left: 59px;
  right: 0;
  display: block;
  margin-left: auto;
  margin-right: auto;
  bottom: 0;
  top: 35%;
  opacity: 0.2;
}
.circ-2 {
  position: absolute;
  width: 300px;
  height: 300px;
  border: dashed #FFF 1px;
  border-radius: 50%;
  left: 59px;
  right: 0;
  display: block;
  margin-left: auto;
  margin-right: auto;
  bottom: 0;
  top: 41%;
  opacity: 0.2;
}

.circ-3 {
  position: absolute;
  width: 180px;
  height: 180px;
  border: solid #FFF 1px;
  border-radius: 50%;
  left: 59px;
  right: 0;
  display: block;
  margin-left: auto;
  margin-right: auto;
  bottom: 0;
  top: 48%;
  opacity: 0.2;
}

.bx{
  flex-direction: column;
  position: relative;
  z-index: 2;
}

.bn-1{
  margin-bottom: 80px;
  position: relative;
  left: 50%;
  text-align: right;
}
.bn-1:before{
  content: '01';
  width: 50px;
  height: 50px;
  background: #f11a14;
  position: absolute;
  color: #FFF;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: 800;
  right: -25%;
  border-radius: 50%;
  border: solid 4px #f52424;
  box-shadow: #901a1a 1px 1px 5px;
  animation: shadow 2s infinite;
}

#caps {
  position: relative;
  bottom: 11px;
  left: 30px;
}

.bn-2{
  margin-bottom: 80px;
  position: relative;
  left: 20%;
  text-align: right;
}
.bn-2:before{
  content: '02';
  width: 50px;
  height: 50px;
  background: #f11a14;
  position: absolute;
  color: #FFF;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: 800;
  right: -25%;
  border-radius: 50%;
  border: solid 4px #f52424;
  box-shadow: #901a1a 1px 1px 5px;
  animation: shadow 2s infinite;

}

.bn-3{
  margin-bottom: 80px;
  position: relative;
  left: 50%;
  text-align: right;
}
.bn-3:before{
  content: '02';
  width: 50px;
  height: 50px;
  background: #f11a14;
  position: absolute;
  color: #FFF;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: 800;
  right: -25%;
  border-radius: 50%;
  border: solid 4px #f52424;
  box-shadow: #901a1a 1px 1px 5px;
  animation: shadow 1s infinite;
}

/*direito*/

.bn-4{
  margin-bottom: 80px;
  position: relative;
  right: -20%;
}
.bn-4:before{
  content: '04';
  width: 50px;
  height: 50px;
  background: #f11a14;
  position: absolute;
  color: #FFF;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: 800;
  left: -25%;
  border-radius: 50%;
  border: solid 4px #f52424;
  box-shadow: #901a1a 1px 1px 5px;
  animation: shadow 4s infinite;
}


.bn-5{
  margin-bottom: 80px;
  position: relative;
  right: -45%;
}
.bn-5:before{
  content: '05';
  width: 50px;
  height: 50px;
  background: #f11a14;
  position: absolute;
  color: #FFF;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: 800;
  left: -25%;
  border-radius: 50%;
  border: solid 4px #f52424;
  box-shadow: #901a1a 1px 1px 5px;
  animation: shadow 3s infinite;
}

.bn-6{
  margin-bottom: 80px;
  position: relative;
  right: -30%;
}
.bn-6:before{
  content: '06';
  width: 50px;
  height: 50px;
  background: #f11a14;
  position: absolute;
  color: #FFF;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: 800;
  left: -25%;
  border-radius: 50%;
  border: solid 4px #f52424;
  box-shadow: #901a1a 1px 1px 5px;
  animation: shadow 5s infinite;
}

/*Depoimentos*/
#depoimentos{
  padding: 50px 0px 0px;
  background: linear-gradient(to bottom, white,#d5cfcf);
}

#depoimentos #masc{
  position: relative;
  top: 14px;
  z-index: 2;
}

.wrp{
  flex-wrap: nowrap;
}

.estrelas{
  color: orangered;
}

.box-dp{
  text-align: center;
  padding: 20px;
  border-radius: 5px;
  border: solid 3px #f11a14;
  margin: 20px 5px;
  position: relative;
  background: #FFF;
  box-shadow: #bdb4b4 -7px 0px 10px;
}

.box-dp:before{
  content: "❝";
  position: absolute;
  left: 10px;
  top: 10px;
  font-size: 50px;
  color: #8e8b8b;
  z-index: 1;
}

.box-dp h3{
  display: block;
  margin: 5px 0;
  font-size: 20px;
  font-weight: 700;
}

.box-dp p{
  font-size: 14px;
  color: #5c5858;
}

.box-dp img{
  border-radius: 50%;
  border: solid 3px #f11a14;
}

.box-dp b{
  display: block;
  margin: 15px 0;
  font-size: 15px;
  font-weight: 700;
  color: #f11a14;
}

.box-dp span{
  color: orange#f11a14;
  margin: 0px 5px;
}

/*Depoimentos 2*/

#depoimentos2{
  padding: 0px;
  background: #dedede;
}
#fem{
  position: relative;
  top: 2px;
}

/*medicina*/

#medicina{
  padding: ;
  position: relative;
  background: linear-gradient(to right,#000 9%,#661d1d);
  color: #FFF;
  overflow: hidden;
}

.formu{
  padding: 10px;
  text-align: left;
  border: solid 1px #FFF;
  border-radius: 40px;
  width: 90%;
  position: relative;
}
.formu:before {
  content: '✔';
  width: 50px;
  height: 50px;
  background: #f11a14;
  position: absolute;
  color: #FFF;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: 800;
  left: -5%;
  border-radius: 50%;
  border: solid 4px #f52424;
  box-shadow: #901a1a 1px 1px 5px;
}

.formu p{
  font-size: 15px;
  margin: 0 auto;
  max-width: 70%;
}
.formu b{
  color: #f52424;
}

#medico{
  position: absolute;
  top: 0;
}


/*tabela*/

#tabelas{
 overflow: hidden;
 padding: 80px 0 20px;
}

/*.tabela*/
.tabela{
  background: #FFF;
  width: 80%;
  border-radius: 10px;
  box-shadow: 0 0 39px 0 rgba(0, 0, 0, 0.3);
  cursor: pointer;
  margin: 0 auto 50px;
}

.produto h3{
  color: #FFF;
  position: relative;
  z-index: 1;
  font-size: 20px;
  text-align: center;
  padding: 15px 0;
  font-weight: 800;
}
.produto b{
  color: yellow;
}
.produto{
  position: relative;
  margin-bottom: 20px;
}
.produto img{
  position: relative;
  z-index: 1;
}
.produto .overlay{
  width: 100%;
  position: absolute;
  height: 150px;
  background:radial-gradient(#f0444a, #ff0501);
  border-radius: 5px 5px 0 0;
}

.parcelas{
  position: relative;
}
.parcelas p{
  font-size: 15px;
}
.parcelas:before{
  content: '';
  width: 500px;
  height: 129px;
  background: url('../../midia/img/bg-produto.png') no-repeat;
  position: absolute;
  top: -15px;
  bottom: 0;
  left: -60px;
}

.valor{
  color: #FFF;
  position: relative;
  z-index: 1;
  width: 100%;
  height: 70px;
}
.valor b{
  font-size: 20px;
}
.cifrao,.centavos{
  font-size: 20px;
  font-weight: 700;
  position: relative;
  bottom: 8px;
  color: yellow;
}
.real{
  font-size: 50px;
  font-weight: 800;
  margin: 0 5px;
  color: yellow;
}
.lista span{
  position: relative;
  text-align: center;
  align-items: center;
  display: flex;
  justify-content: space-around;
  font-size: 15px;
}
.lista hr{
  margin: 5px 0;
}

.preco-tabela{
  font-weight: 800;
  position: relative;
}
.preco-tabela:before{
  content: '';
  width: 100%;
  height: 2px;
  position: absolute;
  background: #ff0000a3;
  left: 0;
  bottom: 5px;
  transform: rotate(5deg);
}

.desconto{
  border: dashed 1px red;
  background: #ff9b0066;
  padding: 5px;
  font-weight: 800;
}

.bt{
  background: #e52d27;  /* fallback for old browsers */
background: -webkit-linear-gradient(to bottom, #b31217, #e52d27);  /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to bottom, #b31217, #e52d27); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  width: 60%;
  padding: 15px;
  font-size: 20px;
  color: #FFF;
  font-weight: 700;
  margin: 15px auto;
  text-align: center;
  border-radius: 25px;
  box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.36);
}
.bt:hover{
  opacity: 0.8;
}
.frete {
    background-color: #fefefe;
    text-align: center;
    padding: 10px;
    border: 1px solid #eee;
    display: flex;
    justify-content: center;
    align-items: center;
}

.frete p{
  font-size: 15px;
  margin: 0px;
}

.frete img {
    width: 26px;
    display: inline-block;
    margin-right: 5px;
    float: left;
}

/*kits*/

#pote-1 {
  width: 35%;
  margin: 0 auto;
  display: block;
}


/*seguranca*/

#seguranca{
  background: #dedede;
}

#seguranca .img{
  position: relative;
}
#seguranca .box-seg img{
  width: 80%;
}

.box-seg h3{
  font-weight: 700;
  display: block;
}
.box-seg p{
  font-size: 14px;
  color: #424141;
}

#pote-anima:after{
  content: '';
  width: 48px;
  height: 15px;
  background: #322f2f;
  position: absolute;
  border-radius: 50%;
  filter: blur(4px);
  margin-left: auto;
  margin-right: auto;
  left: 0;
  right: 0;
  display: block;
  bottom: 56%;
  animation: sombra 2s infinite alternate;
  transition: all 2s;
}
#pote-anima:before{
  content: '';
  width: 120px;
  height: 120px;
  background: url('../../midia/img/pote-unico.png')no-repeat;
  position: absolute;
  z-index: 1;
  background-size: contain;
  margin-left: auto;
  margin-right: auto;
  left: 0;
  right: 0;
  display: block;
  background-position: center center;
  top: 0;
  animation: pote 2s infinite alternate;
  transition: all 2s;
}


@keyframes pote{
  0%,100%{top:0%;}
  50%{top:5%;}
}
@keyframes sombra{
  0%,100%{filter: blur(8px);width: 58px;}
  50%{filter: blur(4px);width: 48px;}
}

#rotate{
  animation: rotate 2s infinite linear;
  transition: all 2s;
  position: relative;
}
@keyframes rotate{
  0%,100%{transform:rotate(9deg);}
  50%{transform:rotate(-9deg);}
}

#ssl{
   animation: round 2s infinite linear;
  transition: all 2s;
  position: relative;
}

@keyframes round{
  0%,100%{transform: scaleX(1.1);}
  50%{transform: scaleX(0.0);}
}

#car{
   animation: slide 2s infinite linear;
  transition: all 2s;
  position: relative;
  overflow: hidden;
}

@keyframes slide{
  0%,100%{right:10%;}
  50%{right:0%;;}
}

/*zap*/

#zap-sec{
  position: relative;
  background: #27C383;
  overflow: hidden;
}

.fa-headset{
  font-size: 33px;
  background: #FFF;
  padding: 6px;
  color: #27c383;
  border-radius: 50%;
  border: solid #26C181 2px;
  margin-right: 15px;
}

#bg-cell {
  position: absolute;
  left: -15px;
  width: 100%;
  top: -36px;
  z-index: 1;
}

#zap-sec svg path{
  fill:#27C383;
}

#zap-sec strong{
  display: none;
}

/*--- // FOOTER // ---*/
footer{
  background-image:linear-gradient(to bottom, #000000, #0d0c0c);
  padding: 50px 0px;
  position: relative;
}
footer h5{
font-size: 18px;
font-weight: 300;
margin: 0;
line-height: 0.9em;
text-align: left;
letter-spacing: 14px;
}

footer h5 span{
  display: block;
  font-size: 16px;
  font-weight: 600;
}
footer i{
  color: #FFF;
  font-weight: 800;
  letter-spacing: 0;
  font-size: 30px;
  margin-bottom: 10px;
  display: block;
}

footer a, footer p{
  color: rgba(255,255,255,0.36);
  font-size: 13px !important;
  display: block;
  font-weight: 300;
  margin-bottom: 3px;
}

footer a:hover{
  color: #FFF;
}
footer h4{
  color: #FFF;
  font-weight: 600;
  margin-bottom: 25px;
}
.rodape{
  background-color: rgba(43,43,43,0.98);
  font-size: 14px !important;
  padding: 20px 0;
  color: #FFF;
}


footer b {
  color: #FFF;
  font-size: 30px;
  font-weight: 800;
  margin: 0;
}
footer b span{
  color: #df0e0f;
}
footer .rastreio{
  padding: 10px 5px;
  color: #FFF;
  background: red;
  font-weight: 600;
  text-align: center;
  border-radius: 2px;
}
footer .rastreio:hover{
  text-decoration: none;
  opacity: 0.8;
}

/*responsivo*/

/*768px*/

@media (max-width: 768px){


#img-header {
  position: relative;
  bottom: -55%;
  z-index: 1;
}


}

/*576px*/

@media (max-width: 576px){


#header{
  height: 889px;
}
#img-header {
  position: relative;
  bottom: 0;
  z-index: 1;
  width: 60%;
}

#anvisa{
  text-align: center;
}
#taxas .box{
  text-align: center;
}


.bn-1,.bn-2,.bn-3,.bn-4,.bn-5,.bn-6 {
  margin-bottom: 80px;
  position: relative;
  left: 0;
  text-align: left;
}
.bn-1::before,.bn-2::before,.bn-3::before,.bn-4::before,.bn-5::before,.bn-6::before {
  left: 0;
}
.bn-1 b,.bn-1 p,.bn-2 b,.bn-2 p,.bn-3 b,.bn-3 p,.bn-4 b,.bn-4 p,.bn-5 b,.bn-5 p,.bn-6 b,.bn-6 p {
  margin-left: 70px;
}
.circ-1,.circ-2,.circ-3,.circ-4,.circ-5,.circ-6{
  display: none;
}
#caps {
  position: relative;
  bottom: 11px;
  left: 0;
}

.order{
  order: 2;
}
#depoimentos2 {
  padding: 46px 0px 0;
  background: #dedede;
}

#depoimentos #masc {
  position: relative;
  top: 11px;
}

#medico {
  position: absolute;
  bottom: 0px;
  width: 51%;
  top: auto;
}
#img-med{
  position: relative;
  right: -112px;
  width: 61%;
  margin-top: 62px;
}
.tabela{
  width: 59%;
}
}

/*480px*/

@media (max-width: 480px){

#img-header {
  width: 66%;
}
.formu p {
  font-size: 15px;
  margin: 0 auto;
  max-width: 80%;
}
.bt-tabelas {
  width: 70%;
  margin: 0 auto;
}

}

/*420px*/

@media (max-width: 420px){

h2 {
  font-size: 30px;
}
#img-header {
  width: 69%;
}
.wrp {
    flex-wrap: wrap;
}
.formu {
  width: 100%;
}
.tabela {
    width: 70%;
}
#pote-anima::before {
    content: '';
    width: 80px;
    height: 80px;
}
#pote-anima::after {
  bottom: 66%;
}

.box-seg p {
  font-size: 12px;
}

}


/*380px*/
@media (max-width: 380px){

h2 {
  font-size: 25px;
}

#header h2 {
  font-family: 'Anton', sans-serif;
  font-size: 35px;
}
#lista-header li {
  font-size: 15px;
}
#img-header {
    width: 96%;
}
.bn-1, .bn-2, .bn-3, .bn-4, .bn-5, .bn-6 {
  margin-bottom: 29px;
}
}