@font-face {
    font-family: "black";
    src: url(fonts/RobotoSlab-Black.ttf);
    font-display: block;
}

@font-face {
    font-family: "bold";
    src: url(fonts/RobotoSlab-Bold.ttf);
    font-display: block;
}

@font-face {
    font-family: "semibold";
    src: url(fonts/RobotoSlab-SemiBold.ttf);
    font-display: block;
}

@font-face {
    font-family: "regular";
    src: url(fonts/RobotoSlab-Regular.ttf);
    font-display: block;
}

@font-face {
    font-family: "slim";
    src: url(fonts/RobotoSlab-Thin.ttf);
    font-display: block;
}

* {
    --text: #101820;
    --roxo: #c68de0;
    --black: #202c33;
    --blackgray: #5B5B5B;
    --easyred: #f91e1e;
    --offred: #fff6f6;
    --easygreen: #5fae85;
    --offgreen: #e1ffe1;
    --branco: #ffffff;
    --cinza: #F7F7F7;
    --linecolor: #D9D9D9;
    --offyellow: #FFFACD;
    --yellow: #FAE849;
    --offverde: #E0FFDF33;
    --verde: #7DB87B;
    --offblue: #E9EEFF;
    --offblueshadow: #ccd7fa;
    --blueshadow: #8F97B4;
    --blue: #335fff;
    --blueWhite: #B6E5FF;
    --lineblue: #002ab7;
    --bluedark: #313850;
    --blueshtrans: #8f97b49f;
    --cinzaFonte: #B9BEC7;
    /* Logos */
    --logoGreen: #78E75A;
    --logoShadow: #5EC363;
    --lYellow: #febc1f;
    --lRed: #f45170;
    --shadow: 0px 0px 6px -3px black;
    --lineargradiente: linear-gradient(rgba(36, 28, 21, .1) 1px, transparent 0), linear-gradient(90deg, rgba(36, 28, 21, .1) 1px, transparent 0);
    margin: 0;
    padding: 0;
    outline: none;
    text-decoration: none;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    font-family: "regular", sans-serif;
}

* {
    color: var(--black);
}

i {
    display: flex;
}

.container {
    max-width: 468px;
}


/* Header */
.principal {
    width: 100%;
    position: fixed;
    z-index: 10;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: space-between;
    align-items: center;
    padding: 12px 20px;
    transition: .2s;
    height: 60px;
}

.scrolled {
    background-color: white;
    box-shadow: var(--shadow);
}

.icone,
.logo {
    width: 160px;
    height: 40px;
}

.scrolled svg.icone path,
.scrolled svg.logo path {
    fill: var(--black)
}
 
.center {
    background: white;
    padding: 5px 10px;
    border-radius: 50px;
    box-shadow: var(--shadow);
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: space-between;
    align-items: center;
}

.center button {
    background-color: transparent;
    border: 0;
    padding: 5px 10px;
    cursor: pointer;
    font-family: 'bold';
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: center;
    align-items: center;
}


.center button i {
    margin-right: 5px;
}

nav.access {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: space-between;
    align-items: center;
    width: auto;
}

.access button {
    background-color: white;
    border: 0;
    padding: 5px 18px;
    border-radius: 50px;
    box-shadow: var(--shadow);
    cursor: pointer;
    font-family: 'bold';
    height: 40px;
    margin-left: 4px;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: center;
    align-items: center;
}

button#comece-gratis {
    background-color: var(--lRed);
    color: white;
    padding-left: 10px;
    font-size: 14px;
}

button#comece-gratis i {
    color: white;
    font-size: 32px;
}

button#entrar {
    padding-left: 10px;
    font-size: 14px;
    color: var(--blue);
    height: 34px;
    margin-left: 10px;
}

button#entrar i {
    color: var(--blue);
    font-size: 14px;
    margin-right: 5px;
}

.vertical-line {
    height: 22px;
    width: 1px;
    background-color: var(--linecolor);
}
/* Fim do Header */

/* Hero */

.hero {
    position: relative;
    width: 100%;
    min-height: 400px;
    background-color: var(--blue);
    top: 0;
    z-index: 1;
    padding-top: 100px;
    padding-bottom: 50px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.hero .container {
    max-width: 468px;
}

.hero .infos {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-content: flex-start;
    justify-content: flex-start;
    align-items: flex-start;
}

.hero .infos  p,
.hero .infos  .tag,
.hero .infos  button,
.hero .infos  sup,
.hero .infos  h1  {
    color: white;
}

.hero .infos  h1  {
    font-size: 54px;
    font-family: 'black';
    line-height: 52px;
    margin-bottom: 20px;
}

.hero .infos  p  {
    font-size: 16px;
    line-height: 24px;
    font-family: 'regular';
    margin-bottom: 20px;
}

.hero .infos .tags {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    align-content: center;
}


.hero .infos .tags .tag {
    background: white;
    color: var(--blue);
    padding: 6px 16px;
    margin-right: 8px;
    border-radius: 50px;
    margin-bottom: 8px;
    width: auto;
    font-size: 14px;
    cursor: pointer;
    font-family: 'bold';
}

.hero .infos .tags .tag sup {
    color: var(--blue);
    margin-left: 3px;
    font-size: 9px;
}

.hero .container.img {
    position: relative;
    width: 800px;
    margin-bottom: -30px;
}

.hero .container.img img {
    position: relative;
    width: 900px;
    margin-top: -100px;
    margin-left: -70px;
}

.hero .sign-in {
    width: 100%;
    margin-top: 20px;
}

.hero .sign-in input#email-hero {
    width: 80%;
    position: relative;
    padding: 10px 16px;
    border-radius: 10px;
    border: 0;
    font-size: 14px;
    height: 50px;
    box-shadow: var(--shadow);
}

.hero .sign-in button.iniciar {
    background: var(--lRed);
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: center;
    align-items: center;
    padding: 10px 16px;
    border-radius: 10px;
    font-size: 16px;
    border: 0;
    margin-top: 8px;
    height: 50px;
    box-shadow: var(--shadow);
    cursor: pointer;
    padding-left: 5px;
}

.hero .sign-in button.iniciar i {
    font-size: 30px;
    color: white;
}

.hero .sign-in .butons {
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: flex-start;
    align-items: center;
}

.hero .sign-in .butons p{
    margin: 0;
    margin-left: 10px;
    font-size: 12px;
    line-height: 15px;
    color: var(--offblue);
    opacity: 0.7;
    margin-top: 5px;
}

/* Fim do Hero */
/* Wave */

section.wave {
    background-image: url(../src/imgs/onda.svg);
    background-color: transparent;
    width: 100%;
    min-height: 400px;
    background-position: top center;
    background-repeat: no-repeat;
    background-size: cover;
    margin-top: -80px;
    z-index: 2;
    position: relative;
    padding-top: 80px;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: center;
    align-items: center;
}

section.wave .nice-to-meet {
    height: 400px;
    margin-bottom: -10px;
}

section.wave .container h2 {
    font-size: 28px;
    color: var(--lRed);
    font-family: 'bold';
    line-height: 36px;
    margin-bottom: 20px;
}

section.wave .container .content {
    margin-top: 16px;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: flex-start;
    align-items: center;
}

section.wave .container .content i {
    width: 40px;
    height: 40px;
    border: 1px solid var(--lRed);
    border-radius: 40px;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: center;
    align-items: center;
    color: var(--lRed);
    padding: 12px;
}

section.wave .container .content p {
    font-size: 14px;
    font-family: 'regular';
    margin-left: 10px;
}

/* Fim do wave */

/* gray */

section.gray {
    width: 100%;
    min-height: 300px;
    z-index: 3;
    position: relative;
    background: var(--cinza);
}

section.gray.social-proof {
    width: 100%;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: center;
    align-items: center;
    padding: 30px;
}

section.gray.social-proof h4 {
    margin-bottom: 30px;
}

.clientes {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
    align-items: center;
}

.clientes img {
    height: 30px;
    margin: 30px;
    filter: grayscale(10);
}

/* Fim do gray */

/* recurso */
section#recursos {
    position: relative;
    width: 100%;
    height: auto;
    padding: 20px;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: center;
    align-items: center;
}

section#recursos  .whiteboard {
    padding: 50px;
    background-color: var(--blueWhite);
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: flex-start;
    align-items: flex-start;
    overflow: hidden;
    width: 90vw;
    height: 600px;
}


section#recursos  .whiteboard .menuboard{
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
}

nav#menuboard {
    margin-bottom: 30px;
}

button.menuRecurso {
    background-color: transparent;
    border: 0;
    font-family: 'bold';
    font-size: 16px;
    cursor: pointer;
    padding: 10px 16px;
    border-radius: 50px;
    margin-right: 20px;
}

button.menuRecurso.ativo {
    background-color: var(--lRed);
    color: white;
}

div#conteudoRecurso {
    position: relative;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: space-between;
    align-items: center;
}

div#conteudoRecurso img {
    width: 100%;
    position: relative;
    max-width: 800px;
    max-height: 700px;
    border-radius: 12px;
    border: 5px solid white;
}

.textRecurso {
    position: relative;
    width: 400px;
    padding-right: 20px;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-content: flex-start;
    justify-content: center;
    align-items: flex-start;
}

.textRecurso h3 {
    font-family: 'bold';
    font-size: 20px;
    margin-bottom: 10px;
}

.textRecurso p {
    color: var(--blackgray);
    margin-bottom: 10px;
}

.textRecurso span {
    font-family: 'bold';
    font-size: 14px;
    margin-bottom: 12px;
}

.textRecurso button {
    background: var(--lRed);
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: center;
    align-items: center;
    padding: 10px 16px;
    border-radius: 10px;
    font-size: 16px;
    border: 0;
    margin-top: 8px;
    height: 50px;
    box-shadow: var(--shadow);
    cursor: pointer;
    /* padding-left: 5px; */
    color: white;
    font-family: 'bold';
}

.fade-in {
    opacity: 1;
    transition: opacity .2s ease;
}

section#diferenciais {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: space-between;
    align-items: center;
    padding: 0;
}
section#diferenciais .img img {
    width: 450px;
    margin-left: -40px;
    margin-right: -45px;
}

section#diferenciais .tabela {
    position: relative;
    width: 100%;
    margin-top: 20px;
    padding: 10px 30px 0px 0px;
}

section#diferenciais h2 {
    font-family: 'bold';
    font-size: 32px;
}

section#diferenciais table {
    margin-top: 20px;
    max-width: 1000px;
}
section#diferenciais .tabela th img {
    height: 28px;
}

section#diferenciais .tabela th.destaque img {
    height: 38px;
}
section#diferenciais .tabela tr th {
    padding: 10px;
}
section#diferenciais .tabela tr td {
    padding: 10px 18px;
    height: 50px;
}

section#diferenciais .tabela tr td.diferencial {
    background-color: var(--cinza);
}

section#diferenciais .tabela .pipedone,
section#diferenciais .tabela .powercrm,
section#diferenciais .tabela .trello{
    height: 50px;
    padding: 10px 16px;
    text-align: center;
}
section#diferenciais .tabela .pipedone {
    background-color: var(--blue);
    color: white;
    font-family: 'bold';
    box-shadow: var(--shadow);
    z-index: 2;
    position: relative;
    border-radius: 5px;
}

section#diferenciais .tabela .powercrm {
    background-color: var(--cinza);
    color: var(--black);
    font-family: 'regular';
    font-size: 14px;
}
section#diferenciais .tabela .trello {
    background-color: var(--linecolor);
    color: var(--black);
    font-family: 'regular';
    font-size: 14px;
}

section#depoimentos {
    position: relative;
    width: 100%;
    height: 400px;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: center;
    align-items: center;
    padding: 20px;
    margin-top: 20px;
    margin-bottom: 20px;
    background-color: var(--blueWhite);
}
section#depoimentos .foto {
    width: 150px;
    height:150px;
    border-radius: 50%;
    margin-right: -20px;
    z-index: 3;
}

.text {
    position: relative;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-content: flex-start;
    justify-content: center;
    align-items: flex-start;
    padding: 30px;
    background-color: var(--offgreen);
    border-radius: 30px;
    max-width: 700px;
    padding-left: 30px;
}

.text p {
    font-family: 'slim';
    font-size: 18px;
    line-height: 28px;
    margin-bottom: 20px;
}
.text span {
    margin-bottom: 20px;
    font-size: 14px;
}
.text img {
    height: 30px;
    opacity: 0.8;
}

section#faq {
    position: relative;
    width: 100%;
    padding: 20px;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: flex-start;
    align-items: center;
    padding-top: 60px;
    padding-bottom: 80px;
    background-color: var(--white);
}

section#faq h2 {
    font-size: 32px;
    font-family: 'bold';
    margin-bottom: 20px;
}

section#faq  .sanfona {
    padding: 20px;
    border: 1px solid var(--linecolor);
    border-radius: 10px;
    margin-top: 10px;
    max-width: 800px;
    background-color: white;
}
section#faq .sanfona h3 {
    font-size: 22px;
    font-family: 'regular';
    width: 100%;
    cursor: pointer;
}
section#faq .sanfona p {
    margin-top: 10px;
}

.slide-container {
    overflow: hidden;
    transition: max-height 0.5s ease-in-out;
    max-height: 0;
  }

  .visible {
    max-height: 1000px; /* Altura máxima para mostrar o conteúdo */
  }

  .oculto {display: none;}

  #ultima-chamada {
    background-color: var(--blue);
    width: 100%;
    padding: 20px;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-content: flex-start;
    justify-content: center;
    align-items: center;
    text-align: center;
}
#ultima-chamada .chamada {
    position: relative;
    width: 100%;
    max-width: 700px;
    background-color: var(--lRed);
    border-radius: 41px;
    padding: 40px;
    display: flex;
    margin-top: -80px;
    box-shadow: var(--shadow);
    padding-bottom: 67px;
}
  #ultima-chamada .chamada p {
    text-align: left;
    color: white;
    font-size: 24px;
    margin-left: 20px;
}

#comece-agora-footer,
  #ultima-chamada .chamada button {
    background: white;
    width: auto;
    display: flex;
    padding: 10px 16px;
    height: auto;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: center;
    align-items: center;
    border-radius: 50px;
    position: absolute;
    bottom: 14px;
    right: 15px;
    border: 0;
    color: var(--blue);
    font-family: 'bold';
    font-size: 18px;
    cursor: pointer;
}

#comece-agora-footer i,
  #ultima-chamada .chamada button i {
    color: var(--blue);
    font-size: 34px;
  }

  .rabisco {
    margin-top: 20px;
    margin-bottom: -43px;
    width: 200px;
  }

  section#ultimos-diferenciais {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: center;
    align-items: center;
    padding: 30px;
}

section#ultimos-diferenciais .diferencial {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: center;
    align-items: center;
    margin: 10px 16px;
}

section#ultimos-diferenciais .diferencial img {
    height: 40px;
    margin-right: 5px;
}

section#ultimos-diferenciais .diferencial p{
    color: var(--cinzaFonte);
    font-size: 14px;
}

hr {
    width: 100%;
    border: 0;
    border-bottom: 1px solid var(--linecolor);
    margin-bottom: 20px;
    margin-top: 20px;
}

footer {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: flex-start;
    justify-content: space-between;
    align-items: flex-start;
    padding: 30px;
}

footer .logo{
    height: 40px;
}

footer nav {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-content: flex-start;
    justify-content: flex-start;
    align-items: flex-start;
    border-right: 1px solid var(--linecolor);
    padding-right: 27px;
}

footer .socials{}
footer .socials img {
    height: 30px;
    cursor: pointer;
    margin: 5px;
}

footer nav button {
    background-color: transparent;
    border: 0;
    margin-bottom: 10px;
    cursor: pointer;
}

#comece-agora-footer {
    position: relative;
    background-color: var(--blue);
    color: white;
}


#comece-agora-footer i{
    color: white;
}

address {
    margin-bottom: 20px;
    width: 100%;
    position: relative;
    text-align: center;
    font-size: 14px;
}

section#agendamento {
    padding-bottom: 120px;
    width: 100%;
}

.topo {
    position: fixed;
    right: 10px;
    bottom: 10px;
    z-index: 11;
    cursor: pointer;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: var(--cinza);
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: center;
    align-items: center;
    box-shadow: var(--shadow);
}

.topo i {
    color: var(--lRed);
}

section#planos {
    padding: 40px;
    display: flex;
    position: relative;
    width: 100%;
    flex-direction: column;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: center;
    align-items: center;
    background-color: var(--cinza);
}

section#planos .planos {
    width: 100%;
    position: relative;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: center;
    align-items: center;
}

section#planos h2 {
    font-size: 40px;
    max-width: 600px;
    text-align: center;
    font-family: 'bold';
}
section#planos select{
    width: 218px;
    border-radius: 10px;
    background: transparent;
    border: 1px solid var(--linecolor);
    height: 50px;
    overflow: hidden;
    margin-top: 16px;
    margin-bottom: 20px;
}
section#planos select option {
    width: 108px;
    height: 50px;
    cursor: pointer;
    float: left;
    position: relative;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: center;
    align-items: center;
}

section#planos select option:active,
section#planos select option:focus,
section#planos select option:checked {
    background-color: var(--lRed);
    color: white;
}
section#planos .planos .plano {
    background-color: white;
    padding: 24px;
    width: 100%;
    max-width: 300px;
    text-align: center;
    box-shadow: var(--shadow);
    border-radius: 16px;
    margin-left: -18px;
    padding-left: 35px;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: space-between;
    align-items: center;
}
section#planos .planos .plano.Ulimited {
    z-index: 5;
    min-height: 620px;
    padding-left: 14px;
}
section#planos .planos .plano.Infinity {
    z-index: 4;
    min-height: 600px;
}
section#planos .planos .plano.Enterprise {
    z-index: 3;
    min-height: 580px;
}
section#planos .planos .plano.Discovery {
    z-index: 2;
    min-height: 560px;
}

section#planos .planos .plano h3 {
    font-size: 28px;
    margin-bottom: 20px;
    font-family: 'bold';
}
section#planos .planos .plano ul {
    padding: 10px;
    margin-top: -7px;
    text-align: left;
    padding-left: 18px;
}
section#planos .planos .plano ul li {
    padding: 5px 0px;
    color: var(--blackgray);
    list-style: circle;
}
section#planos .planos .plano button{
    margin-top: 20px;
    width: 100%;
    position: relative;
    height: 58px;
    background-color: var(--blue);
    color: white;
    font-family: 'bold';
    font-size: 16px;
    border: 0;
    border-radius: 10px;
    box-shadow: var(--shadow);
    cursor: pointer;
}

section#planos .planos .plano h4 {
    font-size: 22px;
    width: 100%;
}

/* Mobile */
@media (max-width: 480px) {
    section.wave .container h2 {
        font-size: 22px;
        color: var(--lRed);
        font-family: 'bold';
        line-height: 30px;
        margin-bottom: 16px;
    }
    section#faq h2 {
        font-size: 26px;
        font-family: 'bold';
        margin-bottom: 20px;
    }
    section#faq .sanfona h3 {
        font-size: 16px;
        font-family: 'bold';
        width: 100%;
        cursor: pointer;
    }
    section#depoimentos {
        position: relative;
        width: 100%;
        height: auto;
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        align-content: center;
        justify-content: center;
        align-items: center;
        padding: 20px;
        margin-top: 20px;
        margin-bottom: 20px;
        background-color: var(--blueWhite);
    }
    section#depoimentos .foto {
        width: 150px;
        height: 150px;
        border-radius: 50%;
        margin-right: 0px;
        z-index: 3;
        margin-bottom: -23px;
    }
    button#comece-gratis {
        background-color: var(--lRed);
        color: white;
        padding-left: 10px;
        font-size: 18px;
        position: fixed;
        right: 0;
        bottom: 0;
        z-index: 12;
        height: 61px;
        border-radius: 0;
        width: 100%;
    }
    .topo {display: none;}
    footer {
        position: relative;
        width: 100%;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-content: space-between;
        justify-content: flex-start;
        align-items: flex-start;
        padding: 30px;
        height: 235px;
    }
    footer .socials {
        width: 100%;
        text-align: center;
    }
    footer nav {
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        align-content: flex-start;
        justify-content: flex-start;
        align-items: flex-start;
        border-right: 0px solid var(--linecolor);
        padding-right: 27px;
    }
    footer .logo {
        height: 40px;
        /* margin-right: 20px; */
        /* width: 100%; */
        /* margin-bottom: 16px; */
        object-fit: cover;
        object-position: left;
        width: 52px;
        margin-right: 5px;
    }
    #ultima-chamada .chamada {
        position: relative;
        width: 100%;
        max-width: 700px;
        background-color: var(--lRed);
        border-radius: 41px;
        padding: 20px;
        display: flex;
        margin-top: -80px;
        box-shadow: var(--shadow);
        padding-bottom: 67px;
        flex-direction: column;
    }
    section#planos h2 {
        font-size: 30px;
        max-width: 100%;
        text-align: center;
        font-family: 'bold';
        line-height: 34px;
    }
    #ultima-chamada .chamada img {
        width: 60px;
        margin-left: 5px;
    }
    section#planos {
        padding: 40px 10px;
    }
    section#recursos .whiteboard {
        height: 520px;
        padding: 10px;
        width: 100%;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-content: flex-start;
        justify-content: flex-start;
        align-items: flex-start;
    }

    .imgRecurso {
        width: 100%;
    }

    nav#menuboard {
        margin-bottom: 30px;
        text-align: left;
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        align-content: flex-start;
        justify-content: flex-start;
        align-items: flex-start;
    }
    section#diferenciais .img img {
        display: none;
    }

    .center {
        display: none;
    }

    .hero {
        position: relative;
        width: 100%;
        min-height: 400px;
        background-color: var(--blue);
        top: 0;
        z-index: 1;
        padding-top: 100px;
        padding-bottom: 50px;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-content: center;
        justify-content: space-between;
        align-items: center;
        overflow: hidden;
        padding: 100px 20px;
    }
    .hero .infos .tags .tag {
        background: white;
        color: var(--blue);
        padding: 6px 16px;
        margin-right: 5px;
        border-radius: 50px;
        margin-bottom: 5px;
        width: auto;
        font-size: 10px;
        cursor: pointer;
        font-family: 'bold';
    }

    section.wave {
        margin-top: -135px;
        margin-bottom: 0px;
        padding: 87px 40px;
        padding-bottom: 50px;
    }

    section#diferenciais h2 {
        font-family: 'bold';
        font-size: 26px;
        line-height: 32px;
        margin-bottom: 17px;
    }

    .hero .sign-in .butons p,
    .hero .sign-in button.iniciar {
        display: none;
    }

    .clientes img {
        height: 20px;
        margin: 20px;
        filter: grayscale(10);
    }
    button.menuRecurso {
        margin-right: 0px;
        text-align: left;
        padding: 5px 10px;
        margin-bottom: 22px;
        font-size: 14px;
    }
    .textRecurso {
        max-width: 300px;
        border-left: 1px solid var(--offblue);
        height: 100%;
        position: relative;
        padding: 10px;
        width: 100%;
    }

    div#conteudoRecurso {
        position: relative;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-content: center;
        justify-content: space-between;
        align-items: center;
    }

    section#diferenciais .tabela {
        position: relative;
        width: 100%;
        margin-top: 20px;
        padding: 0px 30px 0px 30px;
    }

    section#planos .planos {
        width: 100%;
        position: relative;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-content: center;
        justify-content: center;
        align-items: center;
    }
    
    section#planos .planos .plano {
        margin-bottom: 40px;
    }    

    #comece-agora-footer {
        display: none;
    }
    .viewtable {
        position: relative;
        width: 100%;
        overflow: auto;
    }

    .hero .container.img img {
        display: none;
    }

    section.wave .nice {
        display: none;
    }
    section.gray.social-proof {
        width: 100%;
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        align-content: center;
        justify-content: center;
        align-items: center;
        padding: 20px 10px;
        text-align: center;
    }
    section#ultimos-diferenciais .diferencial {
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        justify-content: center;
        align-items: center;
        margin: 10px 16px;
        align-content: center;
    }
    section#ultimos-diferenciais .diferencial p {
        color: var(--cinzaFonte);
        font-size: 10px;
        text-align: center;
        width: 100%;
    }
}

/* Extra Small Device */
@media (min-width: 481px) and (max-width: 767px) {

    section#ultimos-diferenciais .diferencial {
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        justify-content: center;
        align-items: center;
        margin: 10px 16px;
        align-content: center;
    }
    section#ultimos-diferenciais .diferencial p {
        color: var(--cinzaFonte);
        font-size: 10px;
        text-align: center;
        width: 100%;
    }
    footer {
        position: relative;
        width: 100%;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-content: space-between;
        justify-content: flex-start;
        align-items: flex-start;
        padding: 30px;
        height: 235px;
    }
    footer .socials {
        width: 100%;
        text-align: center;
    }
    footer nav {
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        align-content: flex-start;
        justify-content: flex-start;
        align-items: flex-start;
        border-right: 0px solid var(--linecolor);
        padding-right: 27px;
    }

    footer .logo {
        height: 40px;
        /* margin-right: 20px; */
        /* width: 100%; */
        /* margin-bottom: 16px; */
        object-fit: cover;
        object-position: left;
        width: 52px;
        margin-right: 40px;
    }
    section#planos {
        padding: 40px 10px;
    }
    section#recursos .whiteboard {
        height: 520px;
        padding: 10px;
        width: 100%;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-content: flex-start;
        justify-content: flex-start;
        align-items: flex-start;
    }

    .imgRecurso {
        width: 100%;
    }

    nav#menuboard {
        margin-bottom: 30px;
        text-align: left;
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        align-content: flex-start;
        justify-content: flex-start;
        align-items: flex-start;
    }
    section#diferenciais .img img {
        display: none;
    }

    .center {
        display: none;
    }

    .hero {
        position: relative;
        width: 100%;
        min-height: 400px;
        background-color: var(--blue);
        top: 0;
        z-index: 1;
        padding-top: 100px;
        padding-bottom: 50px;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-content: center;
        justify-content: space-between;
        align-items: center;
        overflow: hidden;
        padding: 100px 40px;
    }

    section.wave {
        margin-top: -135px;
        margin-bottom: 0px;
        padding: 87px 40px;
    }

    .hero .sign-in .butons p,
    .hero .infos .tags {
        display: none;
    }

    .clientes img {
        height: 20px;
        margin: 20px;
        filter: grayscale(10);
    }

    button.menuRecurso {
        margin-right: 0px;
        text-align: left;
    }

    .textRecurso {
        max-width: 300px;
        border-left: 1px solid var(--offblue);
        height: 100%;
        position: relative;
        padding: 10px;
        width: 100%;
    }

    div#conteudoRecurso {
        position: relative;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-content: center;
        justify-content: space-between;
        align-items: center;
    }

    section#diferenciais .tabela {
        position: relative;
        width: 100%;
        margin-top: 20px;
        padding: 0px 30px 0px 30px;
    }

    section#planos .planos {
        width: 100%;
        position: relative;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-content: center;
        justify-content: center;
        align-items: center;
    }
    
    section#planos .planos .plano {
        margin-bottom: 40px;
    }    

    #comece-agora-footer {
        display: none;
    }
    .viewtable {
        position: relative;
        width: 100%;
        overflow: auto;
    }

    .hero .container.img img {
        position: relative;
        width: 900px;
        margin-top: -100px;
        margin-left: -159px;
    }

    section.wave .nice {
        display: none;
    }
    section.gray.social-proof {
        width: 100%;
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        align-content: center;
        justify-content: center;
        align-items: center;
        padding: 20px 10px;
        text-align: center;
    }
}

/* Smal Tables */
@media (min-width: 768px) and (max-width: 991px) {

    section#recursos .whiteboard {
        height: 500px;
        padding: 20px;
        width: 100%;
    }

    section#diferenciais .img img {
        display: none;
    }

    .center {
        display: none;
    }

    .hero {
        position: relative;
        width: 100%;
        min-height: 400px;
        background-color: var(--blue);
        top: 0;
        z-index: 1;
        padding-top: 100px;
        padding-bottom: 50px;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-content: center;
        justify-content: space-between;
        align-items: center;
        overflow: hidden;
        padding: 100px 40px;
    }

    section.wave {
        margin-top: -135px;
    }

    .hero .sign-in .butons p,
    .hero .infos .tags {
        display: none;
    }

    .clientes img {
        height: 20px;
        margin: 20px;
        filter: grayscale(10);
    }

    button.menuRecurso {
        margin-right: 0px;
    }

    section#diferenciais .tabela {
        position: relative;
        width: 100%;
        margin-top: 20px;
        padding: 0px 30px 0px 30px;
    }

    section#planos .planos {
        width: 100%;
        position: relative;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-content: center;
        justify-content: center;
        align-items: center;
    }
    
    section#planos .planos .plano {
        margin-bottom: 40px;
    }    

    #comece-agora-footer {
        display: none;
    }
}

/* Smal Tables */
@media (min-width: 992px) and (max-width: 1199px) {
    .logo {display: none;}
    .icone {
        display: block;
        width: 51px;
    }
    section#recursos .whiteboard {
        height: 468px;
    }

    section#diferenciais .img img {
        width: 320px;
    }
    .clientes img {
        height: 20px;
        margin: 20px;
        filter: grayscale(10);
    }
}

/* Smal Tables */
@media (min-width: 1200px) and (max-width: 1919px) {
   
}

@media (min-width: 1920px) {
    section#diferenciais .tabela {
        position: relative;
        width: 100%;
        margin-top: 20px;
        padding: 10px 30px 0px 0px;
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        align-content: center;
        justify-content: flex-start;
        align-items: center;
    }
    .principal {
        width: 100%;
        position: fixed;
        z-index: 10;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-content: center;
        justify-content: space-around;
        align-items: center;
        padding: 12px 20px;
        transition: .2s;
        height: 60px;
    }
    .clientes {
        width: 90%;
    }
    section#recursos .whiteboard {
        width: 66vw;
    }
}