@charset "UTF-8";

#planos.layout {
    max-width: 1200px;
    width: 100%;
    height: auto;
    margin: auto;
}

.alinhamento-anual {
    margin-top: -15px;
}

@media only screen and (min-width: 1400px) {
    #planos.layout {
        max-width: 1400px;
    }
}

.tablink {
    color: #cbcbcb;
    border: none;
    outline: none;
    cursor: pointer;
    margin: 0 35px;
}

.tablink:hover {
    color: #ff7b5b;
}

.tablink-grey {
    color: #707070;
}

.LightboxTrigger {
    align-items: center;
    position: absolute;
    right: 2%;
    bottom: 0;
    border: #fff;
    background: #fff;
}

.lightbox-tabela {
    position: initial;
    justify-content: center;
    width: 100%;
}

#tabela-de-preco .active {
    color: #ff7b5b;
    border-bottom: 6px solid #ff7b5b;
    padding-bottom: 20px;
}

#tabela-de-preco {
    padding: 90px 0;
}

#tabela-de-preco .btn-basico,
#tabela-de-preco .btn-plus,
#tabela-de-preco .btn-pro,
#tabela-de-preco .btn-business,
#tabela-de-preco .btn-pro-green {
    font-family: "Red Hat Display", sans-serif !important;
    font-weight: bold;
    color: #f9f9f9;
    max-width: 281px;
    border-radius: 2px;
}

#tabela-de-preco .btn-basico:hover svg,
#tabela-de-preco .btn-plus:hover svg,
#tabela-de-preco .btn-pro:hover svg,
#tabela-de-preco .btn-business:hover svg,
#tabela-de-preco .btn-pro-green:hover svg {
    transition: all 0.3s ease-in-out;
    margin-left: 5px;
}

#tabela-de-preco .btn-basico:hover,
#tabela-de-preco .btn-plus:hover,
#tabela-de-preco .btn-pro:hover,
#tabela-de-preco .btn-business:hover,
#tabela-de-preco .btn-pro-green:hover {
    color: #ffffff !important;
    padding: 12px 30px !important;
    transition: all 0.4s ease-in-out;
}

/*--------------------------------------------------------
    03 - TABELA BÁSICO
    --------------------------------------------------------*/

#tabela-de-preco .btn-basico {
    background: #161616 !important;
    border: 2px solid #161616 !important;
    box-shadow: inset 0px 4px 0px rgba(255, 255, 255, 0.1) !important;
    transition: all 0.4s ease-in-out !important;
}

#tabela-de-preco .btn-basico:hover {
    background: #292828 !important;
    border: 2px #292828 solid !important;
}

/*--------------------------------------------------------
    03 - TABELA PLUS
    --------------------------------------------------------*/

#tabela-de-preco .btn-plus {
    background: #161616;
    border: 2px solid #161616;
    box-shadow: inset 0px 4px 0px rgba(255, 255, 255, 0.1);
    transition: all 0.4s ease-in-out !important;
}

#tabela-de-preco .btn-plus:hover {
    background: #292828 !important;
    border: 2px #292828 solid !important;
}

/*--------------------------------------------------------
    03 - TABELA PRO
    --------------------------------------------------------*/
#tabela-de-preco .btn-pro {
    color: #161616 !important;
    border: 2px solid #161616 !important;
    background: #FFFFFF !important;
    box-shadow: inset 0px 4px 0px rgba(255, 255, 255, 0.1) !important;
    transition: all 0.4s ease-in-out;
}

#tabela-de-preco .btn-pro:hover svg path {
    fill: #FFFFFF !important;
}

#tabela-de-preco .btn-pro:hover {
    background: #161616 !important;
    border: 2px #161616 solid !important;
}

#tabela-de-preco .btn-pro-green {
    background: #059AA2;
    border: 2px solid #059AA2;
    box-shadow: inset 0px 4px 0px rgba(255, 255, 255, 0.1);
    transition: all 0.4s ease-in-out;
}

#tabela-de-preco .btn-pro-green:hover {
    background: #35a0a6 !important;
    border: 2px #35a0a6 solid !important;
}

/*--------------------------------------------------------
    03 - TABELA BUSINESS
    --------------------------------------------------------*/

#tabela-de-preco .btn-business {
    background: #161616;
    border: 2px solid #161616;
    box-shadow: inset 0px 4px 0px rgba(255, 255, 255, 0.1);
    transition: all 0.4s ease-in-out !important;
}

#tabela-de-preco .btn-business:hover {
    background: #292828 !important;
    border: 2px #292828 solid !important;
}


#tabela-de-preco .btn-comprar {
    font-family: "Red Hat Display", sans-serif !important;
    font-weight: bold;
    color: #f9f9f9;
    max-width: 281px;
    background: #ff7b5b;
    border: 2px solid #ff7b5b;
    box-shadow: inset 0px 4px 0px rgba(255, 255, 255, 0.1);
    border-radius: 2px;
}

#tabela-de-preco .btn-comprar:hover {
    background: #bf5c44 !important;
    color: #ffffff !important;
    border: 2px #bf5c44 solid !important;
    padding: 12px 30px !important;
    transition: all 0.4s ease-in-out;
}

#tabela-de-preco .btn-comprar:hover svg {
    transition: all 0.3s ease-in-out;
    margin-left: 5px;
}

#tabela-de-preco .cr-black {
    color: #161616 !important;
}

#tabela-de-preco .cr-white {
    color: #fff !important;
}

#tabela-de-preco .box-economy {
    width: 120px;
    height: 12px;
    position: relative;
    z-index: 1;
}

#tabela-de-preco .value-economy {
    width: 158px;
    height: 23px;
    border-radius: 5px;
    box-sizing: border-box;
    border: 1px solid #f34f20;
    color: #f34f20;
    padding-top: 2px;
    padding-bottom: 2px;
}

#tabela-de-preco .value-economy-bussiness {
    width: 200px;
    height: 23px;
    border-radius: 5px;
    box-sizing: border-box;
    border: 1px solid #f34f20;
    color: #f34f20;
    padding-top: 2px;
    padding-bottom: 2px;
}

#tabela-de-preco .descricao-box {
    width: 100%;
    height: 54px;
    margin: 0 auto;
}

#tabela-de-preco .descricao {
    font-style: normal;
    font-weight: 700 !important;
    font-size: 17px !important;
    line-height: 25px !important;
    text-align: center !important;
    color: #161616 !important;
}

#tabela-de-preco .p-economy {
    text-align: center;
    font-size: 12px !important;
    line-height: 18px !important;
    font-weight: 700 !important;
    color: #f34f20 !important;
}

#tabela-de-preco .line-economy {
    z-index: 1;
    position: absolute;
    width: 100px;
    height: 0;
    left: 10px;
    top: 8.5px;
    opacity: 0.7;
    border: 0.3px solid #474755;
}

#tabela-de-preco .line-economy-tri {
    z-index: 1;
    position: absolute;
    width: 80px;
    height: 0;
    left: 20px;
    top: 8.5px;
    opacity: 0.7;
    border: 0.3px solid #474755;
}

#tabela-de-preco .preco-anual {
    font-family: Montserrat;
    font-style: normal;
    font-weight: 600;
    font-size: 14px;
    line-height: 17px;
    text-align: center;
    color: #474755;
}

#tabela-de-preco .item-special {
    display: block;
}

#tabela-de-preco .none {
    display: none;
}

#tabela-de-preco .none.taxado {
    display: inline-block !important;
}

#tabela-de-preco .none.taxado .icone-check-yes {
    background-image: url(../img/icones/check-no.svg);
}

#tabela-de-preco .none.taxado span.item {
    text-decoration: line-through;
}

.duvida-nota-mes {
    position: relative;
}

#clientes-premium {
    padding: 90px 0;
}

#tabela-de-preco .linha {
    display: flex;
    flex-wrap: wrap;
}

#tabela-de-preco .seletor-ano-mes {
    margin: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding: 30px 0 20px 0;
}

#tabela-de-preco .switch {
    position: relative;
}

#tabela-de-preco .switch {
    background-color: #e6eaf2;
    width: 32px;
    height: 12px;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
}

#tabela-de-preco .icone-switch {
    display: block;
    position: relative;
    top: -4px;
    width: 20px;
    height: 20px;
    border-radius: 100%;
    background: #fff;
    border: 0.5px solid #c2cce2;
    filter: drop-shadow(0 2px 2px rgba(46, 51, 67, 0.21));
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    -ms-border-radius: 100%;
    -o-border-radius: 100%;
    transition: all 0.3s;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
}

#tabela-de-preco .switch input {
    position: absolute;
    width: 48px;
    height: 30px;
    cursor: pointer;
    display: block;
    top: -12px;
    left: -11px;
    opacity: 0;
    z-index: 10;
}

#tabela-de-preco .coluna {
    width: 24%;
}

#tabela-de-preco .tabela-1,
#tabela-de-preco .tabela-2,
#tabela-de-preco .tabela-3,
#tabela-de-preco .tabela-4 {
    position: relative;
    padding-top: 30px;
    background: #fff;
    border-radius: 6px;
    max-width: 340px;
    margin: 10px;
    z-index: 10;
    border: 1px solid #161616;
}

#tabela-de-preco .informacoes-preco {
    text-align: center;
}

#tabela-de-preco .itens div.item {
    position: relative;
    padding: 10px 0;
}

#tabela-de-preco .descricao-tabela {
    position: relative;
    text-align: center;
    padding-top: 15px;
    max-width: 340px;
    margin: auto;
}

#clientes-premium .linha {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

#clientes-premium .linha .coluna {
    width: 50%;
}

#clientes-premium .coluna-itens {
    display: flex;
}

#clientes-premium .itens {
    display: inline-block;
    margin: auto;
}

#tabela-de-preco {
    color: #6c7d94;
}

#tabela-de-preco .destaque {
    top: 0;
    width: 100%;
    left: 0;
    border-radius: 5px 5px 0 0;
}

#tabela-de-preco .titulo {
    text-align: center;
}

#tabela-de-preco .tabela h2 {
    font-weight: 700;
    letter-spacing: 1px;
    text-align: center;
    /* margin-top: 20px; */
}

#tabela-de-preco .titulo h4 {
    text-transform: uppercase;
    margin: auto;
    letter-spacing: 0.5px;
}

@media only screen and (max-width: 768px) {
    #tabela-de-preco .seletor-ano-mes span.mes {
        width: 80px !important;
    }
}

#tabela-de-preco .seletor-ano-mes span.ano,
#tabela-de-preco .seletor-ano-mes span.mes {
    display: block;
    width: 220px;
    position: relative;
    top: -4px;
    padding: 0 10px;
}

#tabela-de-preco .seletor-ano-mes span {
    font-family: Muli, sans-serif;
}

#tabela-de-preco .preco {
    font-family: Muli, sans-serif;
    font-weight: 700;
}

.ano {
    font-family: Muli, sans-serif;
    font-weight: 700;
}

#tabela-de-preco .mes {
    font-family: Muli, sans-serif;
    font-weight: 700;
}

#tabela-de-preco .seletor-ano-mes i {
    font-style: normal;
    font-size: 15px;
    background-color: #f34f20;
    border-radius: 3px;
    /* position: relative; */
    top: -2px;
}

@media (max-width: 600px) {
    #tabela-de-preco .seletor-ano-mes i {
        font-size: 9px !important;
    }

    #tabela-de-preco .seletor-ano-mes span.ano {
        width: 200px !important;
    }
}

#tabela-de-preco .seletor-ano-mes span.mes {
    text-align: right;
}

#tabela-de-preco .tabela {
    text-align: center;
}

#tabela-de-preco .itens span.item {
    font-size: 12px;
    color: #161616;
    text-align: left;
    margin-left: 0;
    font-family: Muli, sans-serif;
}

#tabela-de-preco .informacoes-preco .p-11 {
    opacity: 0.7;
}

#tabela-de-preco .num-notas {
    font-family: Muli, sans-serif;
}

#tabela-de-preco .parcele {
    display: block;
}

#tabela-de-preco .info {
    font-size: 10px;
    color: #2ac76f;
    font-style: normal;
    position: relative;
    top: -1px;
    text-transform: uppercase;
    margin-left: 3px;
}

#tabela-de-preco .item .alert {
    font-size: 10px;
    color: #ff5b32;
    font-style: normal;
    position: relative;
    top: -4px;
    text-transform: uppercase;
    margin-left: 3px;
}

#tabela-de-preco span.resposta-duvida {
    font-size: 12px;
    position: absolute;
    padding: 10px;
    right: 0;
    line-height: 1.5;
    background: #161616;
    border-radius: 6px;
    color: #fff;
    bottom: 40px;
    width: 100%;
    z-index: 100;
    opacity: 0.9;
}

#duvida-nota-mes span.resposta-duvida {
    font-size: 12px;
    position: absolute;
    padding: 10px;
    right: 0;
    line-height: 1.5;
    background: #161616;
    border-radius: 6px;
    color: #fff;
    bottom: 55px;
    width: 100%;
    z-index: 100;
    opacity: 0.9;
}

#tabela-de-preco span.resposta-duvida-15:focus,
.input-wrapper input:active {
    border-color: red;
}

#tabela-de-preco .detalhamento {
    padding: 60px 30px;
    text-align: center;
    color: #a4aebb;
}

#tabela-de-preco .linha-descricao-preco {
    position: relative;
}

#tabela-de-preco .linha-descricao-preco .resposta-duvida {
    text-align: left;
}

#clientes-premium span {
    display: block;
    padding: 10px 20px;
    margin: 8px 0;
}

#clientes-premium span.item {
    border-left: 2px solid #eee;
}

#clientes-premium span.destaque {
    border-left: 2px solid #00a6ae;
}

#tabela-de-preco .btn-tabela-1,
#tabela-de-preco .btn-tabela-2,
#tabela-de-preco .btn-tabela-3,
#tabela-de-preco .btn-tabela-4 {
    width: -webkit-fill-available;
    width: -moz-available;
    padding: 20px;
    border-radius: 3px;
    color: #fff;
    margin-top: 20px;
    letter-spacing: 0.5px;
    font-family: Muli, sans-serif;
    font-size: 17px;
    font-weight: 300;
    margin: 15px;
}

#tabela-de-preco .btn-tabela-1 {
    background: #6c7d94;
}

#tabela-de-preco .btn-tabela-2 {
    background: #4abfa3;
}

#tabela-de-preco .btn-tabela-3 {
    background: #78246a;
}

.icone-duvida {
    display: inline-block;
    height: 30px;
    width: 30px;
    background-position: center center;
    background-size: 14px;
    background-repeat: no-repeat;
    cursor: pointer;
    position: absolute;
    right: -4px;
    background-image: url(../img/icones/icones-info-512-px-3.svg);
}

#duvida-nota-mes .icone-duvida {
    display: inline-block;
    height: 30px;
    width: 30px;
    background-position: center center;
    background-size: 14px;
    background-repeat: no-repeat;
    cursor: pointer;
    position: absolute;
    top: 6px;
    right: 50px;
    background-image: url(../img/icones/icones-info-512-px-3.svg);
}

@media (max-width: 1199px) {
    #duvida-nota-mes .icone-duvida {
        right: 30px;
    }
}

@media (max-width: 600px) {
    #duvida-nota-mes .icone-duvida {
        top: 9px;
        right: 50px;
        background-size: 15px;
    }

    .icone-duvida {
        top: 1px;
        right: auto;
        background-size: 15px;
    }
}

.duvida-z-index-10 {
    z-index: 10;
}

.icone-check-yes,
.icone-mais-tabela {
    background-position: center;
    background-repeat: no-repeat;
    display: inline-block;
    margin-right: 2px;
    background-size: contain;
}

.icone-check-yes {
    background-image: url(../img/icones/check-yes.svg);
    width: 12px;
    height: 10px;
}

.icone-mais-tabela {
    background-image: url(../img/icones/mais-verde.svg);
    width: 10px;
    height: 10px;
}

#tabela-de-preco .icone-star-branca {
    background-image: url(../img/icones/start-test.svg);
    background-size: 16px;
    background-repeat: no-repeat;
    width: 16px;
    height: 15px;
    display: inline-block;
    background-position: center;
    position: relative;
    top: 2px;
    margin-right: 8px;
}

.icone-ano-ativo {
    left: 12px;
}

.icone-mes-ativo {
    left: 0;
}

.opacidade-reduzida {
    color: #777d96;
}

#tabela-de-preco .opacidade-reduzida i {
    color: #000 !important;
    background-color: #f5f6f9;
}

.opacidade-normal {
    opacity: 1;
}

.opacidade-0-3 {
    opacity: 0.3;
}

#tabela-business .layout {
    display: flex;
    flex-wrap: wrap;
}

#tabela-business .coluna .copy {
    max-width: 400px;
    padding-top: 64px;
}

#tabela-business .coluna-1 {
    width: 60%;
}

#tabela-business .coluna-2 {
    width: 40%;
}

#tabela-business h1 {
    font-weight: 700;
    font-size: 40px;
    line-height: 46px;
    margin: 0;
}

#tabela-business p {
    margin-bottom: 32px;
    color: #5a5f73;
}

#tabela-business ul {
    padding: 0;
}

#tabela-business li {
    margin-bottom: 16px;
    color: #5a5f73;
}

#tabela-business li span {
    margin-left: 8px;
}

#tabela-business .item .info {
    font-size: 10px;
    color: #2ac76f;
    font-style: normal;
    position: relative;
    top: -1px;
    text-transform: uppercase;
    margin-left: 3px;
}

#tabela-business .btn-tabela {
    width: -webkit-fill-available;
    width: -moz-available;
    padding: 16px 32px;
    border-radius: 3px;
    color: #fff;
    letter-spacing: 0.5px;
    font-family: Muli, sans-serif;
    font-size: 16px;
    font-weight: 300;
}

#tabela-business .btn-tabela {
    background: #4abfa3;
    cursor: pointer;
}

#tabela-business .icone-check-yes {
    background-image: url(../img/icones/check-yes.svg);
    width: 20px;
    height: 20px;
    display: inline-block;
    background-color: #e0f0ec;
    background-size: 11px;
    border-radius: 100%;
    background-position: center center;
    position: relative;
    top: 5px;
}



@media screen and (max-width: 768px) {
    .tablink {
        margin: 0 15px;
    }

    .LightboxTrigger {
        right: 0;
        bottom: -90%;
    }

    #tabela-de-preco {
        padding: 0;
    }

    #tabela-de-preco .titulo br {
        display: none;
    }

    #tabela-de-preco .titulo {
        padding: 20px;
        text-align: left;
    }

    #tabela-de-preco .seletor-ano-mes span.exclusiva {
        width: 80px !important;
    }

    #clientes-premium {
        padding: 0 0 60px 0;
    }

    #clientes-premium .linha .coluna {
        width: 100%;
    }

    #clientes-premium span {
        padding: 10px 0 10px 20px;
    }

    #clientes-premium br {
        display: none;
    }

    #tabela-business {
        padding: 32px 0;
        margin-top: 32px;
    }

    #tabela-business .coluna .copy {
        padding-top: 0;
    }

    #tabela-business .coluna-1,
    #tabela-business .coluna-2 {
        width: 100%;
    }

    #tabela-business .coluna-2 {
        padding-top: 64px;
    }
    .alinhamento-anual{
        margin-top: -60px;
    }
}

@media screen and (max-width: 1130px) {
    #tabela-de-preco .coluna {
        width: 100%;
    }

    #tabela-de-preco .tabela-1,
    #tabela-de-preco .tabela-2,
    #tabela-de-preco .tabela-3,
    #tabela-de-preco .tabela-4 {
        margin: 40px auto auto auto;
    }

    #clientes-premium .titulo br {
        display: none;
    }

    #clientes-premium .copy {
        padding: 20px;
    }

    #tabela-business .coluna-1,
    #tabela-business .coluna-2 {
        padding: 0 20px;
        margin-top: 64px;
    }
}