/* -------------
PLANO
-------------- 
ul.menu {
  list-style: none;
  padding: 0;
  margin: 0;
}

ul.menu > li {
  border: 3px solid red;
  display: inline-block;
  padding: 5px;
}

*/ 

.plano {
  position: relative;

  border: 1px solid #95a4a5;
  padding: 10px;

  font-size: 1.4rem;
}

.plano--mais-popular::after {
  position: absolute;
  top: -10px;
  left: -10px;

  padding: 0 10px;

  background-color: #c20303;
  color: #fff;

  font-size: 0.7142em; /* 10/14 */
  line-height: 2.5;

  content: "MAIS POPULAR";

}

.plano__cabecalho {
  margin: -10px;
  margin-bottom: 0px;
  
  background-color: #95a4a5;
  color: #fff;
  
  text-align: center;
  line-height: 2.5;
  font-weight: normal;
  font-size: 2em;
}

.plano__preco {
  margin: 20px 0;

  text-align: center;
  font-size: 2em;
  
}

.plano__caracteristicas {
  
  padding: 0;
  margin: 20px 0;

  font-size: 1em;

  list-style: none;
}

.plano__caracteristicas > li {
  text-align: center;
}

.plano__rodape {
  text-align: center;
}


/************************\
 BOTAO
\*************************/
.botao {
  display: inline-block;
  padding: 0.8em 1.2em;

  background-color: royalblue;
  color: #fff;
  border: 1px;
  
  
  line-height: normal;
  font-size: 1em;
  text-decoration: none;

}

.botao:hover, .botao:focus {
  background-color: #aaa ;
  text-decoration: none;
  color: white;
}

.botao--assinar, .botao--login {
  background-color: #127d00;
}

.botao--assinar:hover, .botao--assinar:focus,
.botao--login:hover, .botao--login:focus {
  background-color: #0e6400;
}

.botao--principal {
  border-radius: 10px;

  background-color: #004b86;


}

.botao--principal:hover, .botao--principal:focus {
  background-color: #003b6a;
}

/************************\
CHAMADA
\*************************/
.chamada {
  font-size: 1.6rem;
  text-align: center;
}

.chamada__titulo {
  margin-right: 0;

  color: #fff;

  font-size: 3.375em;
  line-height: 0.9;
  text-shadow: 1px 1px #313131; 
}

.chamada__subtitulo {
  margin-right: 60px 0;

  color: #fff;

  font-size: 1em;
}

.chamada__acao {
  font-size: 1em;
}

@media(min-width: 992px) {
  .chamada {
    padding-left: 10%;
    padding-right: 10%;

    font-size: 2.2rem;
  }
}


/************************\
    DEPOIMENTO
\*************************/


.depoimento {
  

  font-size: 2.2rem; /* 22px */

}

@media(min-width: 992px) {
  .depoimento {
    padding-left: 15%;
    padding-right: 15%;

    font-size: 2.8rem;
  }

}

.depoimento > blockquote {
  position: relative;

  margin-right: 0;
  padding-left: 0 60px;

  text-align: center;
  font-size: 1em;

}

.depoimento > blockquote:before {
  position: absolute;
  left: -0.2em;
  top: -0.35em;

  color: #ccc;

  font-size: 8em;

  content: "\201C";
}

.depoimento__autor {
  margin-top: 40px;

  text-align: center;
  font-size: 0.7272em;

}

.depoimento__autor > img {
  border-radius: 50%;
}

.depoimento__autor > p {
  margin-top: 10px;
}


/************************\
    NAVEGACAO
\*************************/

.navegacao {

}

.navegacao__menu {
float: right;

}


/************************\
    BOTAO-CHAVEADOR
\*************************/

.botao-chaveador {
  width: 24px;
  height: 24px;
  border: 0;

  background: none;
  background-image: url("../imagens/bars.png");

  outline: none;
}

@media(min-width: 992px) {
  .botao-chaveador {
    display: none;
  }
}

/************************\
    MENU
\*************************/

.menu {
  margin: 0;
   
  font-size: 1.4 rem;

  list-style: none;
}

@media(max-width: 991px){

  .menu {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;

    display: none;

    width: 200px;
    
    padding: 20px;
    border-right: 1px solid #eee;

    background-color: #fbfbfb;
    
  }

  .menu--exibindo {
    display: block;
  }

  .menu__item {
    display: block;

    line-height: 3;

  }

  .menu__item--botao {
    margin-top: 20px;
  }

}

@media(min-width: 992px) {

  .menu__item {
    display: inline-block;
    padding-right: 20px;


  }

  .menu__item:last-of-type {
    padding-right: 0;
  }

}


/************************\
    TITULO FORMULARIO
\*************************/

.titulo-formulario {
  margin: 0;
  margin-bottom: 40px;

  border-bottom: 1px solid #ccc;

  font-size: 2.6rem;
  font-weight: normal;
  color: #004b86;
}


/************************\
    GRUPO ENTRADA
\*************************/

.grupo-entrada  {
  margin-bottom: 15px;
}

.grupo-entrada > label {
  display: block;

  font-weight: bold;
}



/************************\
    CAMPO
\*************************/
.campo {
  display: block;
  width: 100%;
  height: 2.8em;

  padding: 5px;
  border: 1px solid #ccc;
  border-radius: 5px;

  background-color: #fff;

  font-size: 1.4rem;
}

.produto {

  border-bottom: 1px solid #ccc;
  
}