/*
############
Estrutura
############
*/
/*
var(--base1)
*/
:root {
    /* Cor primaria da marca - laranja OraculosWeb (#FD9802) */
    /* Extraido do laranja da logo oficial (imagens/logo.png) */
    --base1: rgba(253, 152, 2, 1);
    --base2: rgba(253, 152, 2, 0.9);
    --base3: rgba(253, 152, 2, 0.8);

    /* Estados da cor primaria */
    --base1-hover: rgba(232, 138, 0, 1);
    --base1-disabled: rgba(254, 204, 128, 1);

    /*
    Texto sobre a cor primaria.
    Preto, e nao branco: sobre o laranja #FD9802 o branco
    da apenas 2.17:1 de contraste (reprova WCAG AA, que
    exige 4.5:1). O preto da 9.67:1.
    */
    --base1-texto: rgba(0, 0, 0, 1);

    /* Cor secundaria - azul marinho */
    --base-azul: rgba(0, 57, 100, 1);

    /* Cores funcionais */
    --base-sucesso: rgba(16, 185, 129, 1);
    --base-erro: rgba(239, 68, 68, 1);
    --base-aviso: rgba(245, 158, 11, 1);
    --base-whatsapp: rgba(37, 211, 102, 1);

    /* Neutros */
    --base-texto: rgba(31, 41, 55, 1);
    --base-texto2: rgba(107, 114, 128, 1);
    --base-fundo2: rgba(249, 250, 251, 1);
}

body {
    font-family: Arial;
    color: #000000;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;

    background: #FFF;
}

a {
    font-family: Arial;
    -webkit-font-smoothing: antialiased;
    color: #000000;
    outline: none;
}

.slick-slide img {
    display: inline-block;
}

div.content {
    overflow: hidden;
}

object {
    outline: none !important;
}

.tp-bannertimer,
.tp-bullets {
    display: none !important;
}

.CorBase1 {
    color: var(--base1);
}

h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
    color: #373737;
    text-decoration: none;
}

ul {
    list-style: none;
    margin: 0px;
    padding: 0px;
}

ul li {
    list-style: none;
    margin: 0px;
    padding: 0px;
}

a,
img,
ul,
li {
    outline: 0 !important;
}

.img-responsive {
    display: inline-block;
}

.col:after,
.clr:after,
.group:after,
dl:after,
.vc-empty-shortcode-element:after {
    content: "";
    display: block;
    visibility: hidden;
    clear: both;
    zoom: 1;
    height: 0;
}

.DirLink {
    cursor: pointer;
}

.cursorp {
    cursor: pointer;
}

/* ------------- */

.row.display-flex {
    display: flex;
    flex-wrap: wrap;
}

.row.display-flex>[class*='col-'] {
    display: flex;
    flex-direction: column;
}

/* ------------- */

.row.only-child>[class*='col-']:only-child {
    width: 100%;
}

/* ------------- */

@media screen and (max-width: 640px) {

    /* ------------- */

    h1 {
        font-size: 26px;
    }

    h2 {
        font-size: 24px;
    }

    h3 {
        font-size: 22px;
    }

    h4 {
        font-size: 20px;
    }

    /* ------------- */

}

/* ------------- */
























/*
############
container
############
*/

.container {
    padding: 0px;
}

/* ------------- */

@media screen and (max-width: 1200px) {

    /* ------------- */

    .container {
        width: 100% !important;
        max-width: 100% !important;

        padding-left: 10px;
        padding-right: 10px;
    }

    /* ------------- */

}

/* ------------- */










/*
############
BoxAviso1
############
*/
.BoxAviso1 {
    margin: 0px;
    padding: 20px 20px 20px 55px;

    font-size: 14px;
    color: #5f5f5f;

    display: block;
    position: relative;

    background: #EDEDED;
}

.BoxAviso1:before {
    position: absolute;
    display: block;

    font-family: FontAwesome;
    color: #A0282A;
    font-size: 24px;

    left: 20px;
    top: 14px;

    height: 30px;
    width: 30px;

    content: "\f071";

}

/* ------------- */

@media screen and (max-width: 767px) {

    /* ------------- */

    .BoxAviso1 {
        padding: 55px 20px 20px 20px;

        text-align: center;
    }

    .BoxAviso1:before {
        position: absolute;
        display: block;

        font-family: FontAwesome;
        color: #A0282A;
        font-size: 24px;

        left: 0px;
        top: 10px;

        height: 30px;
        width: 100%;

        content: "\f071";

        text-align: center;

    }

    /* ------------- */

}

/* ------------- */















/*
############
h1
############
*/
h1 {
    margin: 0px;
    padding: 0px;

    display: inline-block;
    overflow: hidden;

    height: auto;
    line-height: normal;
}

/* ------------- */

h1.style0 {
    display: none;
}

/* ------------- */














/*
############
h2
############
*/
h2 {
    margin: 0px;
    padding: 0px;

    display: inline-block;
    overflow: hidden;

    height: auto;
    line-height: normal;
}

/* ------------- */

h2.style0 {
    display: none;
}


/* ------------- */

h2.style0 {
    display: none;
}

/* ------------- */

h2.style1 {
    margin-bottom: 50px;

    font-size: 44px;
    color: #000;
    font-weight: bold;
    line-height: normal;

    display: block;
    overflow: hidden;
    text-align: center;
}

h2.style1 a,
h2.style1 div {
    font-size: 44px;
    color: #000;
    font-weight: bold;

    position: relative;
    display: inline-block;

    text-decoration: none !important;
}

/*
Os enfeites de lua (titulo1_e.png / titulo1_d.png) que ladeavam os
titulos de secao da capa foram removidos a pedido -- os titulos
ficam apenas com o texto.
*/

/* ------------- */

h2.style2 {
    margin-bottom: 50px;

    font-size: 44px;
    color: #FFF;
    font-weight: bold;
    line-height: normal;

    display: block;
    overflow: hidden;
    text-align: center;
}

h2.style2 a,
h2.style2 div {
    font-size: 44px;
    color: #FFF;
    font-weight: bold;

    position: relative;
    display: inline-block;

    text-decoration: none !important;
}

h2.style2 a:before,
h2.style2 div:before {
    background: url('/imagens/Geral/titulo2_e.png') no-repeat center center;
    background-size: 40px 40px;

    display: block;
    content: "";
    width: 40px;
    height: 40px;

    position: absolute;
    left: -59px;
    top: calc(50% - 20px);
}

h2.style2 a:after,
h2.style2 div:after {
    background: url('/imagens/Geral/titulo2_d.png') no-repeat center center;
    background-size: 40px 40px;

    display: block;
    content: "";
    width: 40px;
    height: 40px;

    position: absolute;
    right: -59px;
    top: calc(50% - 20px);
}

/* ------------- */

@media screen and (max-width: 767px) {

    /* ------------- */

    h2.style1 {
        margin-bottom: 40px;

        font-size: 32px;
    }

    h2.style1 a,
    h2.style1 div {
        font-size: 32px;
    }

    /* ------------- */

    h2.style2 {
        margin-bottom: 40px;

        font-size: 32px;
    }

    h2.style2 a,
    h2.style2 div {
        font-size: 32px;
    }

    h2.style2 a:before,
    h2.style2 div:before {
        background-size: 30px 30px;

        width: 30px;
        height: 30px;

        left: -44px;
        top: calc(50% - 15px);
    }

    h2.style2 a:after,
    h2.style2 div:after {
        background-size: 30px 30px;

        width: 30px;
        height: 30px;

        right: -44px;
        top: calc(50% - 15px);
    }

    /* ------------- */

}

/* ------------- */


























/*
############
row-click
############
*/
table tr.click {
    cursor: pointer;
}

table tr.click td,
td.click td a {
    color: #333;
    font-size: 12px;
}

table tr.click:hover td a {
    text-decoration: underline;
}














/*
############
row-xs-flex-cente
############
*/
.row-xs-flex-center {
    display: flex;
    align-items: center;
}

@media (min-width:768px) {
    .row-sm-flex-center {
        display: flex;
        align-items: center;
    }
}

@media (min-width: 992px) {
    .row-md-flex-center {
        display: flex;
        align-items: center;
    }
}

@media (min-width: 1200px) {
    .row-lg-flex-center {
        display: flex;
        align-items: center;
    }
}

























/*
############
h1-h6-especial
############
*/
.divider-title2 {
    overflow: hidden;
}

.divider-title2 .div-title {
    display: inline-block;
    position: relative;
    margin: 0px;
    color: #888;
    border-color: #ddd;
}

.divider-title2 .div-title:after {
    content: "";
    position: absolute;
    display: block;
    margin-left: 1em;
    top: 50%;
    left: 100%;
    width: 9999px;
    border-top-width: 1px;
    border-top-style: solid;
    border-top-color: inherit;
}

.divider-title2 .div-title h1,
.divider-title2 .div-title h2,
.divider-title2 .div-title h3 {
    color: #5f5f5f;
    text-transform: uppercase;
    margin: 0px;
    padding: 0px;
}











/*
############
hr
############
*/
hr.icon {
    border-top: 1px solid #e6e6e6;
    margin-bottom: 45px;
    margin-top: 45px;
    position: relative;
}

hr.icon::after {
    background: #e6e6e6 none repeat scroll 0 0;
    border: medium none;
    border-radius: 50%;
    color: #07253f;
    content: "\f0ac";
    font-family: "FontAwesome";
    left: calc(50% - 22px);
    margin-top: -22px;
    padding: 10px 15px;
    position: absolute;
}










/*
############
nopadding
############
*/
.alert-message {
    margin: 20px 0;
    padding: 20px;
    border-left: 3px solid #eee;
}

.alert-message h4,
.alert-message .ExtTitulo1 {
    margin-top: 0;
    margin-bottom: 5px;
    font-size: 22px;
}

.alert-message p:last-child {
    margin-bottom: 0;
}

.alert-message code {
    background-color: #fff;
    border-radius: 3px;
}

.alert-message-success {
    background-color: #F4FDF0;
    border-color: #3C763D;
}

.alert-message-success h4,
.alert-message-success .ExtTitulo1 {
    color: #3C763D;
}

.alert-message-danger {
    background-color: #fdf7f7;
    border-color: #d9534f;
}

.alert-message-danger h4,
.alert-message-danger .ExtTitulo1 {
    color: #d9534f;
}

.alert-message-warning {
    background-color: #fcf8f2;
    border-color: #f0ad4e;
}

.alert-message-warning h4,
.alert-message-warning .ExtTitulo1 {
    color: #f0ad4e;
}

.alert-message-info {
    background-color: #f4f8fa;
    border-color: #5bc0de;
}

.alert-message-info h4,
.alert-message-info .ExtTitulo1 {
    color: #5bc0de;
}

.alert-message-default {
    background-color: #EEE;
    border-color: #B4B4B4;
}

.alert-message-default h4,
.alert-message-default .ExtTitulo1 {
    color: #000;
}

.alert-message-notice {
    background-color: #FCFCDD;
    border-color: #BDBD89;
}

.alert-message-notice h4,
.alert-message-notice .ExtTitulo1 {
    color: #444;
}














/*
############
Geral
############
*/
.bold {
    font-weight: bold;
}

.italit {
    font-style: italic;
}

.normal {
    font-weight: normal;
}

.cursos {
    cursor: pointer;
}

.underline {
    text-decoration: underline;
}

.uppercase {
    text-transform: uppercase;
}














/*
############
color
############
*/
.color-branco {
    color: #FFF;
}

/* --------------- */

.color-cinza1 {
    color: #E7E7E7;
}

.color-cinza2 {
    color: #828282;
}

.color-cinza3 {
    color: #EDEDED;
}

/* --------------- */

.color-azul1 {
    color: #33779d;
}

.color-azul2 {
    color: #5FBAEA;
}

.color-azul3 {
    color: #46888F;
}

.color-azullink {
    color: #00b0f9;
}

/* --------------- */

.color-verde1 {
    color: #81AA3F;
}

/* --------------- */
























/*
############
font-s
############
*/
.font-s-1 {
    font-size: 1px;
}

.font-s-2 {
    font-size: 2px;
}

.font-s-3 {
    font-size: 3px;
}

.font-s-4 {
    font-size: 4px;
}

.font-s-5 {
    font-size: 5px;
}

.font-s-6 {
    font-size: 6px;
}

.font-s-7 {
    font-size: 7px;
}

.font-s-8 {
    font-size: 8px;
}

.font-s-9 {
    font-size: 9px;
}

.font-s-10 {
    font-size: 10px;
}

.font-s-11 {
    font-size: 11px;
}

.font-s-12 {
    font-size: 12px;
}

.font-s-13 {
    font-size: 13px;
}

.font-s-14 {
    font-size: 14px;
}

.font-s-15 {
    font-size: 15px;
}

.font-s-16 {
    font-size: 16px;
}

.font-s-17 {
    font-size: 17px;
}

.font-s-18 {
    font-size: 18px;
}

.font-s-19 {
    font-size: 19px;
}

.font-s-20 {
    font-size: 20px;
}

.font-s-21 {
    font-size: 21px;
}

.font-s-22 {
    font-size: 22px;
}

.font-s-23 {
    font-size: 23px;
}

.font-s-24 {
    font-size: 24px;
}

.font-s-25 {
    font-size: 25px;
}

.font-s-26 {
    font-size: 26px;
}

.font-s-27 {
    font-size: 27px;
}

.font-s-28 {
    font-size: 28px;
}

.font-s-29 {
    font-size: 29px;
}

.font-s-30 {
    font-size: 30px;
}

.font-s-31 {
    font-size: 31px;
}

.font-s-32 {
    font-size: 32px;
}

.font-s-33 {
    font-size: 33px;
}

.font-s-34 {
    font-size: 34px;
}

.font-s-35 {
    font-size: 35px;
}

.font-s-36 {
    font-size: 36px;
}

.font-s-37 {
    font-size: 37px;
}

.font-s-38 {
    font-size: 38px;
}

.font-s-39 {
    font-size: 39px;
}

.font-s-40 {
    font-size: 40px;
}

.font-s-41 {
    font-size: 41px;
}

.font-s-42 {
    font-size: 42px;
}

.font-s-43 {
    font-size: 43px;
}

.font-s-44 {
    font-size: 44px;
}

.font-s-45 {
    font-size: 45px;
}

.font-s-46 {
    font-size: 46px;
}

.font-s-47 {
    font-size: 47px;
}

.font-s-48 {
    font-size: 48px;
}

.font-s-49 {
    font-size: 49px;
}

.font-s-50 {
    font-size: 50px;
}

.font-s-51 {
    font-size: 51px;
}

.font-s-52 {
    font-size: 52px;
}

.font-s-53 {
    font-size: 53px;
}

.font-s-54 {
    font-size: 54px;
}

.font-s-55 {
    font-size: 55px;
}

.font-s-56 {
    font-size: 56px;
}

.font-s-57 {
    font-size: 57px;
}

.font-s-58 {
    font-size: 58px;
}

.font-s-59 {
    font-size: 59px;
}

.font-s-60 {
    font-size: 60px;
}

.font-s-61 {
    font-size: 61px;
}

.font-s-62 {
    font-size: 62px;
}

.font-s-63 {
    font-size: 63px;
}

.font-s-64 {
    font-size: 64px;
}











/*
############
padding
############
*/
.p0 {
    padding: 0px !important;
}

.pl0 {
    padding-left: 0px !important;
}

.pr0 {
    padding-right: 0px !important;
}

.pt0 {
    padding-top: 0px !important;
}

.pb0 {
    padding-bottom: 0px !important;
}

/* Geral */

.p10 {
    padding: 10px !important;
}

.p20 {
    padding: 20px !important;
}

.p30 {
    padding: 30px !important;
}

.p40 {
    padding: 40px !important;
}

.p50 {
    padding: 50px !important;
}

/* TOP */

.pt10 {
    padding-top: 10px !important;
}

.pt20 {
    padding-top: 20px !important;
}

.pt30 {
    padding-top: 30px !important;
}

.pt40 {
    padding-top: 40px !important;
}

.pt50 {
    padding-top: 50px !important;
}

/* BOTTOM */

.pb10 {
    padding-bottom: 10px !important;
}

.pb20 {
    padding-bottom: 20px !important;
}

.pb30 {
    padding-bottom: 30px !important;
}

.pb40 {
    padding-bottom: 40px !important;
}

.pb50 {
    padding-bottom: 50px !important;
}

/* LEFT */

.pl10 {
    padding-left: 10px !important;
}

.pl20 {
    padding-left: 20px !important;
}

.pl30 {
    padding-left: 30px !important;
}

.pl40 {
    padding-left: 40px !important;
}

.pl50 {
    padding-left: 50px !important;
}

/* RIGHT */

.pr10 {
    padding-right: 10px !important;
}

.pr20 {
    padding-right: 20px !important;
}

.pr30 {
    padding-right: 30px !important;
}

.pr40 {
    padding-right: 40px !important;
}

.pr50 {
    padding-right: 50px !important;
}








/*
############
margin
############
*/
.m0 {
    margin: 0px !important;
}

.ml0 {
    margin-left: 0px !important;
}

.mr0 {
    margin-right: 0px !important;
}

.mt0 {
    margin-top: 0px !important;
}

.mb0 {
    margin-bottom: 0px !important;
}

/* Geral */

.m10 {
    margin: 10px !important;
}

.m20 {
    margin: 20px !important;
}

.m30 {
    margin: 30px !important;
}

.m40 {
    margin: 40px !important;
}

.m50 {
    margin: 50px !important;
}

/* TOP */

.mt10 {
    margin-top: 10px !important;
}

.mt20 {
    margin-top: 20px !important;
}

.mt30 {
    margin-top: 30px !important;
}

.mt40 {
    margin-top: 40px !important;
}

.mt50 {
    margin-top: 50px !important;
}

/* BOTTOM */

.mb10 {
    margin-bottom: 10px !important;
}

.mb20 {
    margin-bottom: 20px !important;
}

.mb30 {
    margin-bottom: 30px !important;
}

.mb40 {
    margin-bottom: 40px !important;
}

.mb50 {
    margin-bottom: 50px !important;
}

/* LEFT */

.ml10 {
    margin-left: 10px !important;
}

.ml20 {
    margin-left: 20px !important;
}

.ml30 {
    margin-left: 30px !important;
}

.ml40 {
    margin-left: 40px !important;
}

.ml50 {
    margin-left: 50px !important;
}

/* RIGHT */

.mr10 {
    margin-right: 10px !important;
}

.mr20 {
    margin-right: 20px !important;
}

.mr30 {
    margin-right: 30px !important;
}

.mr40 {
    margin-right: 40px !important;
}

.mr50 {
    margin-right: 50px !important;
}













/*
############
texto-livre
############
*/
div.texto-livre,
div.texto-livre p {
    color: #7c7c7c;
    font-size: 25px;
    font-weight: 300;
    text-align: justify;
}











/*
############
section
############
*/
section {
    position: relative;
    padding-bottom: 20px;
    padding-top: 20px;
}

section::before,
section::after {
    position: absolute;
    content: '';
    pointer-events: none;
    overflow: hidden;
}

section .section-heading .divider:after {
    background: #565655;
}

/* ------------- */

@media screen and (max-width: 640px) {

    /* ------------- */

    section {
        padding-bottom: 20px;
        padding-top: 20px;
    }

    /* ------------- */

}

/* ------------- */









/*
############
navbar-toggle
############
*/
.navbar-toggle {
    background-color: #CCC;
    border: 1px solid rgba(0, 0, 0, 0);
}














/*
############
fortawesome
############
*/
.fa {
    margin-right: 10px;
}

.fa-stack {
    color: rgba(86, 86, 85, 1);
}

.fa-pull-left {
    float: left;
}

.fa-inverse {
    color: #FFF;
}

.fa.fa-star {
    color: #FF9900;
}

.fa.fa-star,
.fo.fa-star-o {
    color: #EC971F;
}

.fa-w-50 {
    width: 50px;
}














/*
############
texto-livre
############
*/
div.texto-livre,
div.texto-livre p {
    color: #7c7c7c;
    font-size: 25px;
    font-weight: 300;
    text-align: justify;
}











/*
############
section
############
*/
section {
    position: relative;
    padding-bottom: 20px;
    padding-top: 20px;
}

section::before,
section::after {
    position: absolute;
    content: '';
    pointer-events: none;
    overflow: hidden;
}

section .section-heading .divider:after {
    background: #373737;
}

/* ------------- */

@media screen and (max-width: 640px) {

    /* ------------- */

    section {
        padding-bottom: 20px;
        padding-top: 20px;
    }

    /* ------------- */

}

/* ------------- */









/*
############
navbar-toggle
############
*/
.navbar-toggle {
    background-color: #CCC;
    border: 1px solid rgba(0, 0, 0, 0);
}














/*
############
fortawesome
############
*/
.fa {
    margin-right: 10px;
}

.fa-stack {
    color: rgba(27, 27, 27, 0.7);
}

.fa-pull-left {
    float: left;
}

.fa-inverse {
    color: #FFF;
}

.fa.fa-star {
    color: #FF9900;
}

.fa.fa-star,
.fo.fa-star-o {
    color: #EC971F;
}

.fa-w-50 {
    width: 50px;
}









/*
############
margin-padrao
############
*/
.margin-top-75 {
    margin-top: 75px
}









/*
############
padding-padrao
############
*/
.padding-5 {
    padding: 5px;
}










/*
############
cores padr�es
############
*/
.color-ffffff {
    color: #FFF;
}












/*
############
transition padr�es
############
*/
.transition-25 {
    -webkit-transition: all 0.25s ease-in-out;
    -moz-transition: all 0.25s ease-in-out;
    -ms-transition: all 0.25s ease-in-out;
    -o-transition: all 0.25s ease-in-out;
    transition: all 0.25s ease-in-out;
}












/*
############
Banner Slide
############
*/
.tp-banner-container {
    position: relative;
}















/*
############
Controle de Bot�es
############
*/
.btn {
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    font-weight: bold;
}

.btn:hover {
    -webkit-transition: all 0.25s ease-in-out;
    -moz-transition: all 0.25s ease-in-out;
    -ms-transition: all 0.25s ease-in-out;
    -o-transition: all 0.25s ease-in-out;
    transition: all 0.25s ease-in-out;
}

/* ------------- */

.btn-primary {
    color: var(--base1-texto);
    background-color: var(--base2);
    border-color: var(--base1);
}

.btn-primary.active,
.btn-primary.focus,
.btn-primary:active,
.btn-primary:focus,
.btn-primary:hover,
.open>.dropdown-toggle.btn-primary {
    color: var(--base1-texto);
    background-color: var(--base1);
    border-color: var(--base1-hover);
}

.btn-success {
    color: var(--base1-texto);
    background-color: var(--base2);
    border-color: var(--base1);
}

.btn-success.active,
.btn-success.focus,
.btn-success:active,
.btn-success:focus,
.btn-success:hover,
.open>.dropdown-toggle.btn-success {
    color: var(--base1-texto);
    background-color: var(--base1);
    border-color: var(--base1-hover);
}

.btn-info {
    color: var(--base1-texto);
    background-color: var(--base2);
    border-color: var(--base1);
}

.btn-info.active,
.btn-info.focus,
.btn-info:active,
.btn-info:focus,
.btn-info:hover,
.open>.dropdown-toggle.btn-info {
    color: var(--base1-texto);
    background-color: var(--base1);
    border-color: var(--base1-hover);
}

.admin-form .btn-primary {
    color: var(--base1-texto);
    background-color: var(--base2);
    border-color: var(--base1);
    font-weight: bold;
}

.admin-form .btn-primary:hover,
.admin-form .btn-primary:focus {
    color: var(--base1-texto);
    background-color: var(--base1);
    border-color: var(--base1);
}

.admin-form .btn-dark {
    color: var(--base1-texto);
    background-color: var(--base2);
    border-color: var(--base1);
    font-weight: bold;
}

.admin-form .btn-dark:hover,
.admin-form .btn-dark:focus {
    color: var(--base1-texto);
    background-color: var(--base1);
    border-color: var(--base1);
}

.admin-form .btn-success {
    color: var(--base1-texto);
    background-color: var(--base2);
    border-color: var(--base1);
    font-weight: bold;
}

.admin-form .btn-success:hover,
.admin-form .btn-success:focus {
    color: var(--base1-texto);
    background-color: var(--base1);
    border-color: var(--base1);
}

.subscribe-form input[type="submit"] {
    background-color: var(--base2) !important;
}

.subscribe-form input[type="submit"]:hover,
.subscribe-form input[type="submit"]:focus,
.subscribe-form input[type="submit"]:active {
    background: var(--base1) !important;
}

/* ------------- */

.btn-comprar-creditos {
    color: #fff;
    background-color: #009245;
    border-color: none !important;
}

.btn-comprar-creditos.active,
.btn-comprar-creditos.focus,
.btn-comprar-creditos:active,
.btn-comprar-creditos:focus,
.btn-comprar-creditos:hover,
.open>.dropdown-toggle.btn-comprar-creditos {
    color: #fff;
    background-color: #016831;
    border-color: none !important;
}

/*
---------------
btn-custom5
---------------
*/

.btn-custom5 {
    margin: 0px;
    padding: 15px 50px;

    border: none;
    background: var(--base2);

    font-size: 16px;
    color: var(--base1-texto) !important;
    font-weight: bold;

    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
    border-radius: 10px;

    width: auto;
    height: auto;
    line-height: normal;

    text-align: center;
    vertical-align: middle;

    display: inline-block;
    overflow: hidden;

    text-align: center;
    vertical-align: middle;

    box-shadow: none !important;
    text-decoration: none !important;

    -webkit-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}

.btn-custom5:hover,
.btn-custom5:active,
.btn-custom5:focus {
    background: var(--base1);
}

/*
---------------
btn-custom6
---------------
*/

.btn-custom6 {
    margin: 0px;
    padding: 0px 10px;

    border: none;
    background: var(--base1);

    font-size: 12px;
    color: var(--base1-texto) !important;
    font-weight: bold;

    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    border-radius: 5px;

    width: auto;
    height: 35px;
    line-height: 35px;

    text-align: center;
    vertical-align: middle;

    display: inline-block;
    overflow: hidden;

    text-align: center;
    vertical-align: middle;

    box-shadow: none !important;
    text-decoration: none !important;

    -webkit-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}

/*
---------------
btn-custom7
---------------
*/

.btn-custom7 {
    margin: 0px;
    padding: 0px 10px;

    border: none;
    background: var(--base2);

    font-size: 14px;
    color: var(--base1-texto) !important;
    font-weight: bold;

    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    border-radius: 5px;

    width: auto;
    height: 35px;
    line-height: 35px;

    text-align: center;
    vertical-align: middle;

    display: inline-block;
    overflow: hidden;

    text-align: center;
    vertical-align: middle;

    box-shadow: none !important;
    text-decoration: none !important;

    -webkit-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}

.btn-custom7:hover,
.btn-custom7:active,
.btn-custom7:focus {
    background: var(--base1);
}

/*
---------------
btn-custom8
---------------
*/

.btn-custom8 {
    margin: 0px;
    padding: 15px 30px;

    border: none;
    background: var(--base2);

    font-size: 16px !important;
    color: var(--base1-texto) !important;
    font-weight: bold !important;

    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    border-radius: 5px;

    width: auto;
    height: auto;
    line-height: normal;

    text-align: center;
    vertical-align: middle;

    display: inline-block;
    overflow: hidden;

    text-align: center;
    vertical-align: middle;

    box-shadow: none !important;
    text-decoration: none !important;

    -webkit-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}

.btn-custom8:hover,
.btn-custom8:active,
.btn-custom8:focus {
    background: var(--base1);
}

/*
---------------
btn-custom9
---------------
*/

.btn-custom9 {
    margin: 0px;
    padding: 10px 10px;

    border: none;
    background: var(--base2);

    font-size: 16px !important;
    color: var(--base1-texto) !important;
    font-weight: bold !important;

    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    border-radius: 5px;

    width: 100%;
    height: auto;
    line-height: normal;

    text-align: center;
    vertical-align: middle;

    display: block;
    overflow: hidden;

    text-align: center;
    vertical-align: middle;

    box-shadow: none !important;
    text-decoration: none !important;

    -webkit-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}

.btn-custom9:hover,
.btn-custom9:active,
.btn-custom9:focus {
    background: var(--base1);
}

/*
---------------
btn-custom10
---------------
*/

.btn-custom10 {
    margin: 0px;
    padding: 5px 10px;

    border: none;
    background: var(--base2);

    font-size: 13px !important;
    color: var(--base1-texto) !important;
    font-weight: bold !important;

    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    border-radius: 5px;

    width: 100%;
    height: auto;
    line-height: normal;

    text-align: center;
    vertical-align: middle;

    display: block;
    overflow: hidden;

    text-align: center;
    vertical-align: middle;

    box-shadow: none !important;
    text-decoration: none !important;

    -webkit-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}

.btn-custom10:hover,
.btn-custom10:active,
.btn-custom10:focus {
    background: var(--base1);
}

/* ------------- */

@media screen and (max-width: 767px) {

    /* ------------- */

    .btn-custom5 {
        padding: 12px 40px;
        font-size: 13px;
    }

    /* ------------- */

}

/* ------------- */














/*
############
Controle de Botões
############
*/

.btn-login1,
.btn-login1b,
.btn-login1c,
.btn-login2,
.btn-login2b,
.btn-login2c,
.btn-login3,
.btn-login3b,
.btn-login-facebook,
.btn-login-google,
.btn-login-apple,
.btn-login-windows,
.btn-login-github {
    border: 1px solid #ccc;
    border-bottom-color: #bbb;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;

    -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
    -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);

    -webkit-transition: all 0.3s ease-out !important;
    transition: all 0.3s ease-out !important;
}

/* ------------- */

.btn-login1 {
    background: #FFF;
    border: 1px solid #42B653;

    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;

    color: #42B653;
    font-size: 16px;
    font-weight: normal;

    padding: 10px;

    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
}

.btn-login1:hover {
    background: #42B653;

    color: #FFF;
}

/* ------------- */

.btn-login1b {
    background: #FFF;
    border: 1px solid #42B653;

    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;

    color: #42B653;
    font-size: 20px;
    font-weight: normal;

    padding: 20px 10px;

    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
}

.btn-login1b:hover {
    background: #42B653;

    color: #FFF;
}

/* ------------- */

.btn-login1c {
    background: #FFF;
    border: 1px solid #42B653;

    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;

    color: #42B653;
    font-size: 12px;
    font-weight: normal;

    padding: 5px;

    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
}

.btn-login1c:hover {
    background: #42B653;

    color: #FFF;
}

/* ------------- */

.btn-login2 {
    background: #42B653;
    border: none;

    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;

    color: #fff !important;
    font-size: 16px;
    font-weight: normal;

    padding: 10px;

    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
}

.btn-login2:hover {
    background: #348E40;

    color: #FFF;
}

/* ------------- */

.btn-login2b {
    background: #42B653;
    border: none;

    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;

    color: #fff;
    font-size: 20px;
    font-weight: normal;

    padding: 20px 10px;

    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
}

.btn-login2b:hover {
    background: #348E40;

    color: #FFF;
}

/* ------------- */

.btn-login2c {
    background: #42B653;
    border: none;

    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;

    color: #fff;
    font-size: 12px;
    font-weight: bold;

    padding: 10px;

    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
}

.btn-login2c:hover {
    background: #348E40;

    color: #FFF;
}

/* ------------- */

.btn-login3 {
    background: rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(0, 0, 0, 0.2);

    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;

    color: #000;
    font-size: 11px;
    font-weight: 600;

    padding: 5px 10px;

    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
}

.btn-login3:hover {
    background: rgba(0, 0, 0, 0.1);

    color: #000;
}

/* ------------- */

.btn-login3b {
    background: none;
    border: 0px;

    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;

    color: #615B5C;
    font-size: 12px;
    font-weight: 600;

    padding: 0px;
    margin: 0px;

    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    border-radius: 0px;
}

.btn-login3b:hover {
    color: #000;

    text-decoration: underline;
}

/* ------------- */

.btn-login4 {
    background: #91DBAF;
    border: none;

    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;

    color: #fff !important;
    font-size: 15px;
    font-weight: bold;

    padding: 10px 20px;

    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
}

.btn-login4:hover {
    background: #7CBA95;

    color: #FFF;
}

/* ------------- */

.btn-login5 {
    background: #FFF;
    border: 1px solid #d1d2d7;

    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;

    color: #74757a !important;
    font-size: 13px;
    font-weight: bold;

    padding: 5px 10px;

    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;

    text-decoration: none !important;
}

.btn-login5:hover {
    border: 1px solid #74757a;
    background: #f1f1f1;
}

/* ------------- */

.btn-login6 {
    background-color: var(--base2);
    border-color: var(--base1);

    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;

    color: var(--base1-texto) !important;
    font-size: 15px;
    font-weight: bold;

    padding: 10px 20px;

    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
}

.btn-login6:hover {
    background-color: var(--base1);
    border-color: #000;

    color: var(--base1-texto);
}

/* ------------- */

.btn-login7 {
    background: var(--base3);
    border: none;

    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;

    color: var(--base1-texto) !important;
    font-size: 13px;
    font-weight: bold;

    padding: 7px 20px;

    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
}

.btn-login7:hover {
    background: var(--base3);

    color: var(--base1-texto);
}

/* ------------- */

.btn-login8 {
    background: rgba(0, 0, 0, 0.05);
    border: rgba(0, 0, 0, 0.1);

    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;

    color: #393838 !important;
    font-size: 15px;
    font-weight: bold;

    padding: 10px 20px;

    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
}

.btn-login8:hover {
    background: rgba(0, 0, 0, 0.1);
}

/* ------------- */

.btn-login8B {
    background: rgba(0, 0, 0, 0.05);
    border: rgba(0, 0, 0, 0.1);

    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;

    color: #393838 !important;
    font-size: 15px;
    font-weight: bold;

    padding: 5px 10px;

    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
}

.btn-login8B:hover {
    background: rgba(0, 0, 0, 0.1);
}

/* ------------- */

.btn-login10 {
    background: #FFF;
    border: 1px solid #A7B0B2;

    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;

    color: #697174 !important;
    font-size: 13px;
    font-weight: bold;

    padding: 8px 25px;
    margin-bottom: 25px;

    display: inline-block;

    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;

    position: relative;
}

.btn-login10:before {
    position: absolute;
    display: block;

    font-family: FontAwesome;
    color: #7A8384;
    font-size: 36px;

    left: 0px;
    bottom: -25px;

    height: 36px;
    width: 100%;

    content: "\f107";

}

.btn-login10:hover {
    background: #f1f1f1;

    color: #000 !important;
    text-decoration: none !important;
}

/* ------------- */

.btn-login11 {
    background: #F7F7F7;
    border: #898989 1px solid;

    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;

    color: #898989 !important;
    font-size: 15px;
    font-weight: bold;

    padding: 5px 20px;

    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
}

.btn-login11:hover {
    background: #E5E5E5;
}

/* ------------- */

.btn-login-facebook {
    background: #3b5998;
    border: none;

    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;

    color: #FFF !important;
    font-size: 15px;
    font-weight: bold;

    padding: 10px 20px;

    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
}

.btn-login-facebook .fa {
    margin-right: 10px;
}

.btn-login-facebook:hover {
    background: #2d4373;
}

/* ------------- */

.btn-login-google {
    background: #dd4b39;
    border: none;

    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;

    color: #FFF !important;
    font-size: 15px;
    font-weight: bold;

    padding: 10px 20px;

    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
}

.btn-login-google .fa {
    margin-right: 10px;
}

.btn-login-google:hover {
    background: #a32b1c;
}

/* ------------- */

.btn-login-apple {
    background: #444;
    border: none;

    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;

    color: #FFF !important;
    font-size: 15px;
    font-weight: bold;

    padding: 10px 20px;

    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
}

.btn-login-apple .fa {
    margin-right: 10px;
}

.btn-login-apple:hover {
    background: #444;
}

/* ------------- */

.btn-login-windows {
    background: #2672ec;
    border: none;

    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;

    color: #FFF !important;
    font-size: 15px;
    font-weight: bold;

    padding: 10px 20px;

    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
}

.btn-login-windows .fa {
    margin-right: 10px;
}

.btn-login-windows:hover {
    background: #0f4bac;
}

/* ------------- */

.btn-login-github {
    background: #444;
    border: none;

    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;

    color: #FFF !important;
    font-size: 15px;
    font-weight: bold;

    padding: 10px 20px;

    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
}

.btn-login-github .fa {
    margin-right: 10px;
}

.btn-login-github:hover {
    background: #191919;
}

/* ------------- */


















/*
############
box_style
############
*/
.box_style_1 {
    padding: 20px 25px 5px 25px;
    box-shadow: inset 0 0 0 1px #e0e5e9;
    border: 5px solid #fbfbfc;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    margin-bottom: 30px;
    font-size: 13px;
    line-height: 20px;
    background-color: #fff
}











/*
############
expose / overlay
############
*/
.expose {
    position: relative
}

#overlay {
    background: rgba(0, 0, 0, 0.4);
    display: none;
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1;
    bottom: 0;
}







/*
############
Controle de Formulários
############
*/

/* form-control */

.form-control {
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    height: 40px;
    line-height: 40px;
    padding: 10px 20px;
    color: rgba(0, 0, 0, 1);
    border: 2px solid rgba(86, 86, 85, 0.50);
    font-weight: 300;
}

textarea.form-control {
    height: auto;
    line-height: normal;
}

.form-control:focus {
    border-color: rgba(86, 86, 85, 1);
    color: rgba(0, 0, 0, 1);
    box-shadow: none;
}

/* form-control */

.form-control-clean {
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;

    padding: 5px 10px;
    color: rgba(0, 0, 0, 1);
    border: 1px solid rgba(0, 0, 0, 0.15);
    font-weight: 300;

    width: 100%;
}

textarea.form-control-clean {
    height: auto;
    line-height: normal;
}

.form-control-clean:focus {
    border-color: rgba(0, 0, 0, 0.30);
    color: rgba(0, 0, 0, 1);
}

/* form-contro2 */

.form-contro2 {
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;

    padding: 10px;

    color: rgba(0, 0, 0, 1);
    border: 2px solid rgba(0, 0, 0, 0.20);
    font-weight: 300;
}

.form-contro2:focus {
    border-color: rgba(0, 0, 0, 0.40);
    color: rgba(0, 0, 0, 1);
}

textarea.form-contro2-clean {
    height: auto;
    line-height: normal;
}

/* form-contro3 */

.form-contro3 {
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;

    padding: 5px;
    height: 30px;
    line-height: 30px;

    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;

    color: rgba(0, 0, 0, 1);
    border: none;
    font-weight: 300;
}

.form-contro3:focus {
    color: rgba(0, 0, 0, 1);
}

textarea.form-contro3-clean {
    height: auto;
    line-height: normal;
}






































/*
############
rst-header-banner
############
*/
/*
Faixa de titulo das paginas internas -- usada por 30 paginas.

Todas tem a mesma estrutura (H1 + breadcrumb), entao o layout
vem so daqui: nenhum dos PHPs precisou mudar.

Fundo escuro construido em CSS (o Fundo7.jpg original ficava
fora do versionamento), em camadas:

  1. brilho laranja quente subindo da base a esquerda;
  2. brilho azul-marinho no alto a direita, a cor secundaria;
  3. trama diagonal sutil, que da textura sem virar ruido;
  4. gradiente de base #1F1F1F -> #0E0E0E.
*/
.rst-header-banner {
    position: relative;
    overflow: hidden;

    background: #141414;
    background:
        radial-gradient(ellipse closest-side at 15% 120%, rgba(253, 152, 2, 0.22) 0%, rgba(253, 152, 2, 0) 100%),
        radial-gradient(ellipse closest-side at 88% -30%, rgba(0, 57, 100, 0.35) 0%, rgba(0, 57, 100, 0) 100%),
        -webkit-repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.022) 0px, rgba(255, 255, 255, 0.022) 1px, rgba(255, 255, 255, 0) 1px, rgba(255, 255, 255, 0) 7px),
        -webkit-linear-gradient(top, #1F1F1F 0%, #0E0E0E 100%);
    background:
        radial-gradient(ellipse closest-side at 15% 120%, rgba(253, 152, 2, 0.22) 0%, rgba(253, 152, 2, 0) 100%),
        radial-gradient(ellipse closest-side at 88% -30%, rgba(0, 57, 100, 0.35) 0%, rgba(0, 57, 100, 0) 100%),
        repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.022) 0px, rgba(255, 255, 255, 0.022) 1px, rgba(255, 255, 255, 0) 1px, rgba(255, 255, 255, 0) 7px),
        linear-gradient(to bottom, #1F1F1F 0%, #0E0E0E 100%);

    border-bottom: none;

    /* Mesma sombra do #header, para a faixa descolar do conteudo */
    -webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.05), 0px 6px 20px -10px rgba(0, 0, 0, 0.18);
    box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.05), 0px 6px 20px -10px rgba(0, 0, 0, 0.18);

    z-index: 5;
}

/*
Halo laranja difuso atras do titulo -- o "efeito" que da
profundidade a faixa sem depender de imagem.
*/
.rst-header-banner:before {
    content: "";

    position: absolute;
    left: 50%;
    bottom: -70%;

    display: block;
    width: 620px;
    height: 200%;

    margin-left: -310px;

    background: -webkit-radial-gradient(center, ellipse, rgba(253, 152, 2, 0.16) 0%, rgba(253, 152, 2, 0) 70%);
    background: radial-gradient(ellipse at center, rgba(253, 152, 2, 0.16) 0%, rgba(253, 152, 2, 0) 70%);

    pointer-events: none;
    z-index: 1;
}

/* Fio laranja na base -- mesma assinatura do header e do rodape */
.rst-header-banner:after {
    content: "";

    position: absolute;
    left: 0px;
    bottom: 0px;

    display: block;
    width: 100%;
    height: 3px;

    background: var(--base1);
    background: -webkit-linear-gradient(left, var(--base1) 0%, #FFC24D 45%, var(--base1) 100%);
    background: linear-gradient(to right, var(--base1) 0%, #FFC24D 45%, var(--base1) 100%);

    z-index: 3;
}

.rst-header-banner .rst-header-menu-bar {
    background-color: #fff;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 999;
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}

.rst-header-banner .rst-header-menu-bar.rst-sticky {
    position: fixed;
    background-color: #fefefe;
    border-bottom: 1px solid #fcfcfc;
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}

.rst-header-banner .rst-header-menu-bar.rst-sticky .rst-header-menu>ul ul {
    border-top: 1px solid #ddd;
}

.rst-header-banner .rst-header-menu-bar.rst-sticky .rst-header-menu>ul>li {
    padding: 23px;
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}

.rst-header-banner .rst-header-menu-bar.rst-sticky .rst-header-logo {
    margin: 8px 0;
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}

.rst-header-banner .rst-header-menu-bar.rst-sticky .rst-header-logo a {
    display: none;
}

.rst-header-banner .rst-header-menu-bar .rst-header-logo .rst-logo-sticky {
    display: none;
    opacity: 0;
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}

.rst-header-banner .rst-header-menu-bar.rst-sticky .rst-header-logo .rst-logo-sticky {
    display: block;
    opacity: 1;
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}

.current-menu-item>a {
    color: #1c2633;
}

.rst-header-menu a:hover {
    color: #1c2633;
    -webkit-transition: color 0.3s ease-out;
    -moz-transition: color 0.3s ease-out;
    -ms-transition: color 0.3s ease-out;
    -o-transition: color 0.3s ease-out;
    transition: color 0.3s ease-out;
}

.rst-header-banner.rst-banner-background .rst-banner-content {
    bottom: 0;
    padding: 50px 0px 48px;
    text-align: center;
    width: 100%;

    /* acima do halo (:before) e do fio (:after) */
    z-index: 15;

    position: relative;

    background-size: cover;
    border: 0px;
}

.rst-header-banner.rst-banner-background .rst-banner-content.rst-product-banner-content {
    padding: 0 0 75px;
}

/* ------------- */

.rst-header-banner .rst-banner-content .rating {
    margin-bottom: 5px;
}

.rst-header-banner .rst-banner-content .rating .fa {
    font-size: 24px;
    color: #EC971F;

    text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.45);
}

/* ------------- */

/*
Titulo em branco sobre a faixa escura, centralizado.
A sombra suave separa o texto do brilho do fundo.
*/
.rst-header-banner .rst-banner-content h1 {
    font-size: 34px;
    color: #FFF;
    font-weight: bold;

    display: block;
    position: relative;

    width: 100%;
    text-align: center;
    line-height: 1.2;

    margin: 0px;
    padding: 0px;

    text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.35);
}

.rst-header-banner .rst-banner-content .info1 {
    display: block;
    margin-top: 0px;
    margin-bottom: 5px;

    color: rgba(255, 255, 255, 0.72);
    font-weight: 500;
    text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.35);
}

.rst-header-banner .rst-banner-content .price_single_main {
    font-weight: 400;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
    color: #333;
}

.rst-header-banner .rst-banner-content .price_single_main span {
    color: #771031;
    font-size: 60px;
}

.rst-header-banner .rst-banner-content .price_single_main sup {
    font-size: 14px;
    position: relative;
    top: -25px;
}

/* ------------- */

.rst-header-banner.rst-banner-background {
    padding-top: 0px;
}

.rst-header-banner.rst-banner-background.rst-pg-anuncios {
    height: 300px;
}

/* ------------- */

.rst-header-banner.rst-banner-background.rst-banner-2 {
    height: 500px;

    background: no-repeat top center;
    background-size: cover;
}

/* ------------- */

.rst-header-banner.rst-banner-background.rst-banner-3 {
    z-index: 1000;
    padding-top: 0px;
    height: auto;
}

/* ------------- */

.rst-header-banner.rst-banner-background.rst-mapa-1 {
    height: 400px;
}

.rst-header-banner.rst-banner-background.rst-mapa-1 iframe {
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 13;
}

/* ------------- */

.rst-header-banner.rst-banner-background.rs-tamanho-grande {
    height: 500px;

    background: no-repeat top center;
    background-size: cover;
}

/* ------------- */

.rst-header-patterns {
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 14;
}

/* ------------- */

@media screen and (max-width: 992px) {

    /* ------------- */

    .rst-header-banner.rst-banner-background.rst-pg-anuncios {
        height: 600px;
    }

    /* ------------- */

}

/* ------------- */

@media screen and (max-width: 767px) {

    /* ------------- */

    .rst-header-banner.rst-banner-background .rst-banner-content {
        padding: 28px 0px 26px;
    }

    /* Halo proporcional a tela, para nao perder a concentracao */
    .rst-header-banner:before {
        width: 340px;

        margin-left: -170px;
    }

    .rst-header-banner .rst-banner-content h1 {
        font-size: 24px;
    }

    /* ------------- */

}

/* ------------- */







/*
############
rst-search-form
############
*/
.rst-search-form input[type="text"] {
    border: 0 none;
    border-radius: 2px;
    color: #233141;
    font-size: 14px;
    padding: 19px 80px 19px 45px;
    width: 100%;
}

.rst-search-form {
    position: relative;
}

.rst-search-form::before {
    content: "\f002";
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    font-size: 18px;
    position: absolute;
    top: 16px;
    left: 15px;
}

.rst-search-form {
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;

    border: 1px solid rgba(0, 0, 0, 0.10);
    margin: 0;
}

.rst-search-form .sb {
    background: transparent none repeat scroll 0 0;
    border: 0 none;
    font-size: 17px;
    padding: 0;
    position: absolute;
    right: 0;
    top: -3px;
}

.rst-search-form .sb {
    background: transparent none repeat scroll 0 0;
    border-left: 1px solid #f0f2f1;
    font-size: 17px;
    height: 100%;
    padding: 0;
    position: absolute;
    right: 0;
    top: 0;
    width: 60px;
}




















/*
############
breadcrumb
############
*/
/*
O breadcrumb e exibido dentro da faixa escura (.rst-banner-content),
logo abaixo do <h1>. Fica centralizado para acompanhar o titulo, que
tambem e centralizado nessa faixa.

As cores aqui sao claras de proposito: o fundo da faixa e escuro
(#1F1F1F -> #0E0E0E). Ver o bloco .rst-header-banner mais acima.
*/
.breadcrumb {
    display: block;

    background-color: transparent;
    list-style: outside none none;

    text-align: center;

    margin: 14px 0px 0px 0px;
    padding: 0px;

    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    border-radius: 0px;
}

.breadcrumb.left {
    text-align: center;
}

.breadcrumb>li {
    display: inline-block;

    position: relative;

    vertical-align: middle;

    padding: 0px 0px 0px 20px;
}

.breadcrumb li:first-child {
    padding-left: 0px;
}

/* ------------- */

/*
Niveis anteriores: branco suave, para nao competir com o titulo.
O branco pleno fica reservado ao item atual.
*/
.breadcrumb a {
    color: rgba(255, 255, 255, 0.72);
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;

    text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.35);

    -webkit-transition: color 0.2s ease;
    -moz-transition: color 0.2s ease;
    transition: color 0.2s ease;
}

.breadcrumb a:hover,
.breadcrumb a:focus {
    color: var(--base1);
    text-decoration: none;
}

.breadcrumb span {
    font-size: 13px;
    font-weight: 500;
}

/*
Item atual (a pagina em que o visitante esta): sem link, em branco
pleno, para fechar o caminho com o destaque que ele merece.
*/
.breadcrumb>li.Atual>span {
    color: #FFF;
    font-weight: 600;

    text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.35);
}

/* ------------- */

/*
Separador entre os niveis. O chevron do FontAwesome substitui o
circulo antigo (\f10c): aponta o sentido da navegacao, em vez de
so separar os itens.
*/
.breadcrumb>li+li::before {
    content: "\f105";
    font-family: FontAwesome;
    font-size: 12px;
    font-weight: normal;
    font-style: normal;
    color: var(--base1);

    position: absolute;
    left: 6px;
    top: 1px;
    bottom: auto;

    padding: 0px;
}

/*
Icone de casa no primeiro item, que e sempre a home do site.
Substitui o pin de mapa cinza (\f041) do desenho antigo, que
nao dizia nada sobre o destino do link.
*/
.breadcrumb li:first-child>a::before {
    content: "\f015";
    font-family: FontAwesome;
    font-size: 12px;
    font-style: normal;
    font-weight: normal;

    display: inline-block;

    margin-right: 6px;
}

/* ------------- */

/*
Mobile: o caminho e mantido em UMA linha so.

Titulos longos (artigos, perfis) quebrariam o breadcrumb em duas
linhas, e a segunda comecava com o chevron colado na borda. Como
o titulo completo ja esta no <h1> logo acima, aqui o item atual e
truncado com reticencias -- o que importa no mobile e enxergar o
caminho de volta, nao reler o titulo.
*/
@media screen and (max-width: 640px) {

    /* ------------- */

    .breadcrumb {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;

        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;

        margin-top: 10px;
        padding: 0px 15px;
    }

    .breadcrumb a,
    .breadcrumb span {
        font-size: 12px;
    }

    /*
    So o item atual encolhe: os niveis anteriores sao curtos e
    precisam continuar clicaveis por inteiro.
    */
    .breadcrumb>li {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;

        padding-left: 16px;
    }

    .breadcrumb li:first-child {
        padding-left: 0px;
    }

    .breadcrumb>li.Atual {
        -ms-flex: 0 1 auto;
        flex: 0 1 auto;

        overflow: hidden;
    }

    .breadcrumb>li.Atual>span {
        display: block;

        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    /* ------------- */

}

/* ------------- */









































/*
############
.PgTextoLivre
############
*/
/*
Conteudo de texto livre (artigos, paginas, detalhes de produto e
video). O HTML vem do editor do painel, entao as regras miram as
tags direto -- nao ha como adicionar classes ao conteudo.

As tags que o conteudo real usa hoje: p, strong, h2, h3, ul, li,
a, u, img.
*/
.PgTextoLivre {
    font-size: 17px;
    line-height: 1.75;

    /*
    Alinhado a esquerda, nao justificado: o justificado abre
    "rios" de espaco irregular entre as palavras e atrapalha a
    leitura de textos longos.
    */
    text-align: left;

    color: var(--base-texto);
}

/* ------------- */

.PgTextoLivre p {
    margin: 0px 0px 20px;

    font-size: 17px;
    line-height: 1.75;
    color: var(--base-texto);
}

.PgTextoLivre p:last-child {
    margin-bottom: 0px;
}

/* ------------- */

/*
Titulos de secao. O margin-top generoso e o que separa uma secao
da outra -- antes vinham com margin-top:0 e colavam no paragrafo
anterior.
*/
.PgTextoLivre h2,
.PgTextoLivre h3,
.PgTextoLivre h4 {
    color: var(--base-texto);
    font-weight: bold;

    display: block;
    overflow: visible;

    text-align: left;
}

.PgTextoLivre h2 {
    font-size: 26px;
    line-height: 1.3;

    margin: 44px 0px 16px;
    padding: 0px 0px 12px;

    position: relative;
}

/* Fio laranja curto sob o h2 -- marca a abertura de secao */
.PgTextoLivre h2:after {
    content: "";

    position: absolute;
    left: 0px;
    bottom: 0px;

    display: block;
    width: 40px;
    height: 3px;

    background: var(--base1);

    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
}

.PgTextoLivre h3 {
    font-size: 20px;
    line-height: 1.35;

    margin: 32px 0px 12px;
}

.PgTextoLivre h4 {
    font-size: 17px;
    line-height: 1.4;

    margin: 26px 0px 10px;
}

/* Sem espaco extra quando o titulo abre o conteudo */
.PgTextoLivre h2:first-child,
.PgTextoLivre h3:first-child,
.PgTextoLivre h4:first-child {
    margin-top: 0px;
}

/* ------------- */

/*
Listas: o editor entrega <ul><li> sem estilo, e o reset global
do site zera list-style. Aqui elas voltam a ter marcador.
*/
.PgTextoLivre ul,
.PgTextoLivre ol {
    margin: 0px 0px 20px;
    padding: 0px 0px 0px 4px;

    list-style: none;
}

.PgTextoLivre li {
    margin: 0px 0px 10px;
    padding: 0px 0px 0px 24px;

    font-size: 17px;
    line-height: 1.7;
    color: var(--base-texto);

    list-style: none;
    position: relative;
}

/* Marcador losango, o mesmo do menu do header */
.PgTextoLivre ul li:before {
    content: "";

    position: absolute;
    left: 2px;
    top: 11px;

    display: block;
    width: 6px;
    height: 6px;

    background: var(--base1);

    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

.PgTextoLivre ol {
    counter-reset: item;
}

.PgTextoLivre ol li {
    counter-increment: item;
}

.PgTextoLivre ol li:before {
    content: counter(item) ".";

    position: absolute;
    left: 0px;
    top: 0px;

    color: var(--base1);
    font-weight: bold;
}

/* ------------- */

.PgTextoLivre strong,
.PgTextoLivre b {
    color: var(--base-texto);
    font-weight: bold;
}

.PgTextoLivre a {
    color: #C26A00;
    font-weight: bold;

    text-decoration: none;

    border-bottom: 1px solid rgba(253, 152, 2, 0.45);

    -webkit-transition: color 0.18s ease-out, border-color 0.18s ease-out;
    transition: color 0.18s ease-out, border-color 0.18s ease-out;
}

.PgTextoLivre a:hover,
.PgTextoLivre a:focus {
    color: var(--base-texto);
    border-bottom-color: var(--base1);
}

/* ------------- */

/*
Imagens do conteudo. O editor grava width/height fixos no HTML,
entao o max-width evita que estourem o container em telas
estreitas.
*/
.PgTextoLivre img {
    max-width: 100%;
    height: auto;

    display: block;
    margin: 28px auto;

    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    border-radius: 12px;
}

.PgTextoLivre iframe,
.PgTextoLivre video {
    max-width: 100%;

    display: block;
    margin: 28px auto;

    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    border-radius: 12px;
}

/* ------------- */

.PgTextoLivre blockquote {
    margin: 28px 0px;
    padding: 4px 0px 4px 20px;

    border-left: 3px solid var(--base1);

    font-size: 18px;
    line-height: 1.7;
    color: var(--base-texto2);
    font-style: italic;
}

.PgTextoLivre blockquote p:last-child {
    margin-bottom: 0px;
}

/* ------------- */

.PgTextoLivre hr {
    margin: 36px 0px;

    border: none;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
}

/* ------------- */

/* Tabelas: rolam em vez de estourar a largura no mobile */
.PgTextoLivre table {
    width: 100%;
    max-width: 100%;

    margin: 0px 0px 24px;

    border-collapse: collapse;

    font-size: 15px;
}

.PgTextoLivre table th,
.PgTextoLivre table td {
    padding: 10px 12px;

    border: 1px solid rgba(0, 0, 0, 0.1);

    text-align: left;
    vertical-align: top;
}

.PgTextoLivre table th {
    background: var(--base-fundo2);

    font-weight: bold;
    color: var(--base-texto);
}

/* ------------- */

.PgTextoLivre .BoxShare {
    float: right;
    width: 50px;

    top: 0px;
    right: 0px;
    margin-left: 10px;
    margin-bottom: 10px;
}

/* ------------- */

@media screen and (max-width: 767px) {

    /* ------------- */

    .PgTextoLivre {
        font-size: 16px;
    }

    .PgTextoLivre p,
    .PgTextoLivre li {
        font-size: 16px;

        line-height: 1.7;
    }

    .PgTextoLivre h2 {
        font-size: 22px;

        margin-top: 34px;
    }

    .PgTextoLivre h3 {
        font-size: 18px;

        margin-top: 26px;
    }

    .PgTextoLivre img,
    .PgTextoLivre iframe,
    .PgTextoLivre video {
        margin: 22px auto;
    }

    /* ------------- */

}

/* ------------- */

@media screen and (max-width: 640px) {

    /* ------------- */

    .PgTextoLivre img {
        height: auto !important;
        max-width: 100% !important;
        text-align: center !important;
    }

    /* ------------- */

}

/* ------------- */










/*
############
.PgTextoLivre2
############
*/
.PgTextoLivre2 {
    font-size: 16px;
    line-height: 2;

    text-align: center;
}

/* ------------- */







/*
############
.PgTextoLivre3
############
*/
.PgTextoLivre3 {
    font-size: 13px;
    line-height: 2;

    text-align: center;
}

/* ------------- */




















/*
############
aside-divider-title
############
*/
aside.divider-title {
    overflow: hidden;
}

aside.divider-title .div-title {
    display: inline-block;
    position: relative;
    margin: 0px;
    color: #888;
    border-color: #ddd;
}

aside.divider-title .div-title:after {
    content: "";
    position: absolute;
    display: block;
    margin-left: 1em;
    top: 50%;
    left: 100%;
    width: 9999px;
    border-top-width: 1px;
    border-top-style: solid;
    border-top-color: inherit;
}

aside.divider-title .div-title div {
    font-size: 18px;
    font-weight: 600;
    color: #5f5f5f;
    text-transform: uppercase;
}









/*
############
aside
############
*/
aside {
    margin-bottom: 20px;
}









/*
############
aside-widget_estrutura_1
############
*/
aside.widget_estrutura_1 {
    margin-top: -4px !important;


    box-shadow: inset 0 0 0 1px #e0e5e9;
    border: 5px solid #fbfbfc;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    margin-bottom: 30px;
    background-color: #fff;

    position: relative;
    z-index: 2;
}

aside.widget_estrutura_1 h3,
aside.widget_estrutura_1 .widget_estrutura_1_titulo {
    color: var(--base1-texto);
    font-weight: bold;
    font-size: 16px;
    line-height: 20px;
    margin: 0;
    padding: 14px 0;
    letter-spacing: 1px;
    background: var(--base1);
    display: block;
    text-align: center;
    position: relative;

}

aside.widget_estrutura_1 .expose {
    padding: 10px;
}

aside.widget_estrutura_1 div.btnenviar button {
    font-weight: bold;
    border: 0px;
    padding: 22px 0;
}









/*
############
aside-widget_form_1
############
*/
aside.widget_form_1 div.blc_pdr_1 h6 {
    border-top: 1px solid #ddd;

    color: #363c48;
    font-weight: bold;
    font-size: 14px;

    margin: 15px 0;
    padding: 15px 0 0
}

aside.widget_form_1 div.blc_pdr_1 h6 a.btn-mais {
    font-size: 11px;
    color: #999;
    font-weight: normal;

    float: right;
}

aside.widget_form_1 div.blc_pdr_1 h6.first {
    border-top: 0px;
    margin-top: 0px;
}

/* ------- */

aside.widget_form_1 div.blc_pdr_1 ul {
    list-style: none;
    padding: 0;
    margin: 0 0 15px
}

aside.widget_form_1 div.blc_pdr_1 ul li.margin1 {
    margin-top: 10px;
}

aside.widget_form_1 div.blc_pdr_1 ul li label {
    cursor: pointer;
}

aside.widget_form_1 div.blc_pdr_1 ul li .rating {
    font-size: 16px;
    left: 7px;
    position: relative;
    top: 2px
}

aside.widget_form_1 div.blc_pdr_1 ul li .name {
    font-size: 16px;
    left: 7px;
    position: relative;
    top: 2px;

    font-size: 13px;
    font-weight: normal;
}

aside.widget_form_1 div.blc_pdr_1 ul li input.sub-select1,
aside.widget_form_1 div.blc_pdr_1 ul li select.sub-select1 {
    padding: 2px;
    font-weight: normal;
    width: 50px;
}

/* ------- */

aside.widget_form_1 div.blc_filter_price .ui-slider-horizontal {
    height: 10px;
    background: #e0e5e9;
}

aside.widget_form_1 div.blc_filter_price label {
    display: none;
}

aside.widget_form_1 div.blc_filter_price .ui-slider {
    position: relative;
    text-align: left;
    margin-top: 10px;
}

aside.widget_form_1 div.blc_filter_price .ui-slider .ui-slider-range {
    background: #a2a7ab;
    border: 0 none;
    display: block;
    font-size: 0.7em;
    position: absolute;
    z-index: 1;
}

aside.widget_form_1 div.blc_filter_price .ui-slider-horizontal .ui-slider-range {
    top: 0;
    height: 100%;
}

aside.widget_form_1 div.blc_filter_price .ui-slider-horizontal .ui-slider-handle {
    margin-left: -0.6em;
    top: -0.3em;
}

aside.widget_form_1 div.blc_filter_price .ui-slider .ui-slider-handle {
    cursor: default;
    height: 1.2em;
    position: absolute;
    width: 1.2em;
    z-index: 2;
}

aside.widget_form_1 div.blc_filter_price .ui-slider .ui-slider-handle:before {
    content: '\f067';
    color: red;
    font-family: FontAwesome;
    padding: 5px;
    background: #363c48;
    color: #FFFFFF;
}

/* ------- */




































/*
############
aside-about-me
############
*/
aside.about-me {
    position: relative;
    background-color: #f5f5f5;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    border: 1px solid #f5f5f5;
}

aside.about-me .about-me-banner {
    width: 100%;
    -webkit-border-radius: 2px 2px 0 0;
    -moz-border-radius: 2px 2px 0 0;
    border-radius: 2px 2px 0 0;
}

aside.about-me .about-me-header {
    padding: 0 15px;
}

aside.about-me .about-me-header .about-me-avatar {
    position: relative;
    float: left;
    max-width: 120px;
    margin-top: -60px;
    margin-right: 15px;
    border: 3px solid #f5f5f5;
}

footer-inner aside.about-me .about-me-header .about-me-avatar {
    max-width: 100px;
}

aside.about-me .about-me-header .about-me-name {
    float: left;
    font-size: 16px;
    font-weight: bold;
    margin: 15px 0;
    text-transform: uppercase;
    color: #7A7A7A;
}

aside.about-me .about-me-header .about-me-atividade {
    float: left;
    font-size: 14px;
    font-weight: normal;
    margin: 15px 0;
    text-transform: uppercase;
    color: #7A7A7A;
}

aside.about-me .about-me-text {
    margin-top: 10px;

    padding: 10px;
    color: #666666;
    font-size: 12px;
}

aside.about-me .about-me-text .list-infos .fa {
    width: 15px;
}

aside.about-me .btn-type-2 {
    margin-top: 10px;
}









/*
############
aside-widget1
############
*/
aside.widget1.first {
    margin-top: 0px !important;
}

aside.widget1.first .widget1_titulo {
    margin-top: 0;
}

aside.widget1 .widget1_titulo {
    color: #363c48;
    font-weight: bold;
    font-size: 20px;
    margin-top: 30px;
    margin-bottom: 10px;
}


















/*
############
aside-texto_livre
############
*/
aside.texto_livre {
    padding: 20px;
    box-shadow: inset 0 0 0 1px #e0e5e9;
    border: 5px solid #fbfbfc;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    margin-bottom: 30px;
    font-size: 13px;
    line-height: 20px;
    background-color: #fff
}



















/*
############
aside-widget_contato
############
*/
aside.widget_contato {
    margin-top: 0px !important;
    margin-bottom: 10px;

    padding: 15px;
    border: 2px solid #000000;

    position: relative;

    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;

    background-color: #2F2F2F;
    color: #FFF;
}

aside.widget_contato .box-anunciante {
    display: block;
}

aside.widget_contato .box-anunciante .est-image {
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;

    float: left;
    margin-right: 20px;
}

aside.widget_contato .box-anunciante .est-image img {
    width: 75px;
    height: 75px;

    border: 2px solid #FFF;
}

aside.widget_contato .box-anunciante .est-image:hover img {
    border-color: #000;
}

aside.widget_contato .box-anunciante .est-name {
    display: block;
    text-align: left;
    margin-top: 10px;
}

aside.widget_contato .box-anunciante .est-name a {
    color: #FFF;
    font-size: 18px;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.7);
    font-weight: bold;

    display: block;
}

aside.widget_contato .box-anunciante .est-social li {
    float: left;
}

aside.widget_contato .box-anunciante .est-social li:hover a .fa-stack {
    color: #000;
}

aside.widget_contato .est-contato {
    margin-top: 20px;
    margin-bottom: 20px;
}

aside.widget_contato .est-contato li a {
    display: block;
    margin-bottom: 5px;
    color: #FFF;
    font-size: 12px;
}

aside.widget_contato .est-contato li a .fa {
    color: #FFF;
}

aside.widget_contato .btn-view-perfil {
    padding: 5px 35px;
}

aside.widget_contato hr {
    border-color: #858585;
}

aside.widget_contato h3 {
    margin-top: 0px;
    color: #FFF;
    text-align: center;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.7);

    font-size: 25px;
    font-weight: bold;
}













/*
############
aside-widget_contato2
############
*/
aside.widget_contato2 {
    margin-top: 0px !important;
    margin-bottom: 10px;
    padding: 0px;

    position: relative;
    overflow: hidden;

    border: 2px solid #3d3d3d;

    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;

    background-color: #F5F5F5;
}

aside.widget_contato2 h3 {
    background: #3d3d3d none repeat scroll 0 0;
    color: #ffffff;
    font-weight: bold;
    letter-spacing: 1px;
    margin: 0;
    padding: 22px 0;
    position: relative;
    text-align: center;
}

aside.widget_contato2 h3::after {
    background: #3d3d3d none repeat scroll 0 0;
    border-radius: 50%;
    color: #fff;
    content: "\f044";
    font-family: "FontAwesome";
    left: 38%;
    padding: 10px 17px;
    position: absolute;
    top: 63%;
}

aside.widget_contato2 hr {
    margin-bottom: 10px;
    margin-top: 10px;
}

aside.widget_contato2 .box-campos {
    padding: 15px;
}

aside.widget_contato2 .form-contro2 {
    border: 1px solid rgba(0, 0, 0, 0.2);
}

aside.widget_contato2 .btn-enviar button {
    background: #7A7A7A;
    color: #FFF;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.7);

    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    border-radius: 0px;

    -webkit-transition: all 0.25s ease-in-out;
    -moz-transition: all 0.25s ease-in-out;
    -ms-transition: all 0.25s ease-in-out;
    -o-transition: all 0.25s ease-in-out;
    transition: all 0.25s ease-in-out;

    border: 0px;
}

aside.widget_contato2 .btn-enviar button:hover {
    background: #000;
}












/*
############
aside-widget_info
############
*/
aside.widget_info h4 {
    font-size: 20px;
    font-weight: bold;
    padding: 0;
    color: #3d3d3d;
}

aside.widget_info h5 {
    margin-bottom: 10px;
    margin-top: 10px;
    font-size: 18px;
    color: #3d3d3d;
}




















/*
############
aside-widget_list_itens1
############
*/
aside.widget_list_itens1 .legenda1 {
    font-size: 10px;
    font-style: italic;
}

aside.widget_list_itens1 .expose {
    padding-top: 40px;
}

aside.widget_list_itens1 div.row {
    margin-bottom: 5px;
    cursor: pointer;
}

aside.widget_list_itens1 div.Data {
    margin-right: 20px;
    padding: 0 10px 0 12px;
    background: #E0E5E9;
    color: #363c48;
    text-decoration: none;

    width: 100%;
    position: relative;

    min-height: 24px;
    line-height: 1.5;
    font-size: 12px;

    text-align: left;
    vertical-align: middle;

    -moz-border-radius-bottomright: 4px;
    -webkit-border-bottom-right-radius: 4px;
    border-bottom-right-radius: 4px;
    -moz-border-radius-topright: 4px;
    -webkit-border-top-right-radius: 4px;
    border-top-right-radius: 4px;

    -webkit-transition: all 0.25s ease-in-out;
    -moz-transition: all 0.25s ease-in-out;
    -ms-transition: all 0.25s ease-in-out;
    -o-transition: all 0.25s ease-in-out;
    transition: all 0.25s ease-in-out;
}

aside.widget_list_itens1 div.Data:before {
    content: "";
    float: right;
    position: absolute;
    top: 0;
    right: -10px;
    width: 0;
    height: 0;
    border-color: transparent transparent transparent #E0E5E9;
    border-style: solid;
    border-width: 12px 0 12px 12px;

    -webkit-transition: all 0.25s ease-in-out;
    -moz-transition: all 0.25s ease-in-out;
    -ms-transition: all 0.25s ease-in-out;
    -o-transition: all 0.25s ease-in-out;
    transition: all 0.25s ease-in-out;
}

aside.widget_list_itens1 div.Data:after {
    content: "";
    position: absolute;
    top: 10px;
    right: 0;
    float: right;
    width: 4px;
    height: 4px;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    border-radius: 2px;
    background: #fff;
    -moz-box-shadow: -1px #E0E5E9 2px -1px;
    -webkit-box-shadow: -1px #E0E5E9 2px -1px;
    box-shadow: -1px #E0E5E9 2px -1px;

    -webkit-transition: all 0.25s ease-in-out;
    -moz-transition: all 0.25s ease-in-out;
    -ms-transition: all 0.25s ease-in-out;
    -o-transition: all 0.25s ease-in-out;
    transition: all 0.25s ease-in-out;
}

aside.widget_list_itens1 div.Valor {
    color: #363C48;
    font-size: 13px;
}

aside.widget_list_itens1 div.row:hover div.Data {
    background: #c1c6ca;
}

aside.widget_list_itens1 div.row:hover div.Data:before {
    border-color: transparent transparent transparent #c1c6ca;
}

aside.widget_list_itens1 div.row:hover div.Data:after {
    -moz-box-shadow: -1px #c1c6ca 2px -1px;
    -webkit-box-shadow: -1px #c1c6ca 2px -1px;
    box-shadow: -1px #c1c6ca 2px -1px;
}
















/*
############
est-menu1
############
*/
.est-menu1 {
    list-style: none;
    padding: 0px;
    margin: 0px;
}

.est-menu1 li {
    list-style: none;
    padding: 0px;
    margin: 0px;
    display: block;

    -webkit-transition: all 0.25s ease-in-out;
    -moz-transition: all 0.25s ease-in-out;
    -ms-transition: all 0.25s ease-in-out;
    -o-transition: all 0.25s ease-in-out;
    transition: all 0.25s ease-in-out;
}

.est-menu1 li a {
    padding-left: 5px;
    padding-right: 5px;
    padding-bottom: 10px;
    padding-top: 10px;

    display: block;
    font-size: 14px;
    color: #95979c;
    font-weight: 400;
    text-decoration: none;

    border-bottom: 1px solid #e9eaeb;

    -webkit-transition: all 0.25s ease-in-out;
    -moz-transition: all 0.25s ease-in-out;
    -ms-transition: all 0.25s ease-in-out;
    -o-transition: all 0.25s ease-in-out;
    transition: all 0.25s ease-in-out;
}

.est-menu1 li:hover {
    padding-left: 15px;
}

.est-menu1 li:hover a {
    color: #73757a;
    border-bottom-color: #73757a;
}











/*
############
est-artigos1
############
*/
.est-artigos1 {
    list-style: none;
    padding: 0px;
    margin: 0px;
}

.est-artigos1 li {
    border-bottom: 1px dashed #e5e5e5;
    margin-top: 12px;
    margin-bottom: 15px;
    padding-bottom: 15px;
}

.est-artigos1 li:first-child {
    margin-top: 0;
}

.est-artigos1 li .post-meta {
    color: #959595;
    font-size: 13px;
    font-weight: 400;

    margin-bottom: 5px;
}

.est-artigos1 li .post-meta span {
    font-size: 12px;
}

.est-artigos1 li .latest-post-title {
    color: #73757a;
    display: block;
    font-size: 14px;
    line-height: 150%;
    margin: 0px;
}











/*
############
est-artigos2
############
*/
.est-artigos2 {
    list-style: none;
    padding: 0px;
    margin: 0px;
}

.est-artigos2 li {
    border-bottom: 1px dashed #e5e5e5;
    margin-top: 12px;
    margin-bottom: 15px;
    padding-bottom: 15px;
}

.est-artigos2 li:first-child {
    margin-top: 0;
}

.est-artigos2 li img {
    border-radius: 3px;
    float: left;
    margin-right: 15px;

    height: auto;
    max-width: 100%;
}

.est-artigos2 li h5 {
    line-height: 1.3;
    margin-bottom: 10px;
    margin-top: 0;
}

.est-artigos2 li h5 a {
    font-size: 14px;
    font-weight: 700;
    color: #2f343b;

    -webkit-transition: all 0.25s ease-in-out;
    -moz-transition: all 0.25s ease-in-out;
    -ms-transition: all 0.25s ease-in-out;
    -o-transition: all 0.25s ease-in-out;
    transition: all 0.25s ease-in-out;
}

.est-artigos2 li .date {
    color: #9a9a90;
    font-size: 11px;
}

/* ----------- */

.est-artigos2 li:hover h5 a {
    color: #000;
    text-decoration: underline;
}











/*
############
est-list-1
############
*/
.est-list-1 {
    list-style: none;
    margin: 0px;
    padding: 0px;

    margin-top: 0;
}

.est-list-1 li {
    list-style: none;
    margin: 0px;
    padding: 0px;
    display: inline-block;
    margin-left: 25px;

    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.7);
    font-size: 15px;
    color: #FFF;
    font-weight: 600;
}

.est-list-1 li:first-child {
    margin-left: 0px;
}

.est-list-1 li a {
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
    font-size: 15px;
    color: #5a5a5a;
    font-weight: 600;
}



















/*
############
list-artigo1
############
*/
.list-artigo1 {
    list-style: none;
    margin: 0px;
    padding: 0px;
}

.list-artigo1 li {
    margin: 0 0 40px;
    padding: 0 0 40px;
    border-bottom: 1px solid #F5F5F5;
}

.list-artigo1 li:last-child {
    border-bottom: 0px;
}

.list-artigo1 li .post-image-wrapper {
    margin: 20px 0;
    position: relative;
}

.list-artigo1 li .post-title {
    font-size: 28px;
    line-height: normal;
    text-transform: uppercase;
    margin: 0px;
}

.list-artigo1 li .post-title a {
    color: #363c48;

    -webkit-transition: all 0.25s ease-in-out;
    -moz-transition: all 0.25s ease-in-out;
    -ms-transition: all 0.25s ease-in-out;
    -o-transition: all 0.25s ease-in-out;
    transition: all 0.25s ease-in-out;
}

.list-artigo1 li .post-meta {
    color: #959595;
    font-size: 13px;
    font-weight: 400;
    margin-top: 10px;
}

.list-artigo1 li .post-meta span {
    padding-right: 10px;
}

.list-artigo1 li .post-meta a {
    color: #959595;
}

.list-artigo1 li .post-body p {
    font-size: 15px;
    line-height: 2;
    text-align: justify;
}

.list-artigo1 li .post-footer .btn.btn-primary {
    font-weight: 700;
    padding: 10px 15px;
    margin-top: 15px;
    color: #fff;
}

/* ------------- */

.list-artigo1 li .post-title:hover a {
    color: #000;
    text-decoration: none;
}

/* ------------- */











/*
############
list-artigo2
############
*/

.list-artigo2 {
    background: transparent none repeat scroll 0 0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    margin-bottom: 3rem;
    overflow: hidden;

    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    -ms-border-radius: 2px;
    -o-border-radius: 2px;
    border-radius: 2px;
}

.list-artigo2 a.featured-image {
    background-position: 50% center;
    background-size: cover;
    box-shadow: 0 -30px 120px rgba(0, 0, 0, 0.33) inset;
    display: block;
    transition: box-shadow 0.15s ease 0.1s;
    height: 200px;
    width: 100%;
}

.list-artigo2 .card-details {
    background-color: #fff;
    padding: 10px;
}

.list-artigo2 .card-details .card-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

    font-size: 18px;
    font-weight: 600;
    margin-top: 10px;
    margin-bottom: 0;
}

.list-artigo2 .card-title a {
    color: #363c48;
    text-decoration: none !important;
}

.list-artigo2 .card-details .meta-details {
    line-height: 13px;
    position: relative;
    font-size: 13px;
}

.list-artigo2 .card-details .meta-details p {
    margin: 0px;
    color: #797979;
}

/* ------------- */

.list-artigo2 a.featured-image:hover {
    -webkit-box-shadow: inset 0 -30px 120px rgba(0, 0, 0, 0);
    box-shadow: inset 0 -30px 120px rgba(0, 0, 0, 0)
}

/* ------------- */










/*
############
list-artigo3
############
*/
.list-artigo3 {
    margin-bottom: 10px;
}

.list-artigo3 .img_zoom {
    overflow: hidden;
    text-align: center;
    margin-top: 20px;
    height: 200px;
    border: 5px solid #fff;
    -webkit-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, .1);
    -moz-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, .1);
    box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, .1);

    -webkit-transition: all 0.25s ease-in-out;
    -moz-transition: all 0.25s ease-in-out;
    -ms-transition: all 0.25s ease-in-out;
    -o-transition: all 0.25s ease-in-out;
    transition: all 0.25s ease-in-out;
}

.list-artigo3 .img_zoom a img {
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
    -webkit-transition: all .7s ease;
    transition: all .7s ease;
}

.list-artigo3 h3 {
    font-size: 20px;
    margin: 10px 0 0;
}

.list-artigo3 h3 a {
    color: #222;
    text-decoration: none !important;

    -webkit-transition: all 0.25s ease-in-out;
    -moz-transition: all 0.25s ease-in-out;
    -ms-transition: all 0.25s ease-in-out;
    -o-transition: all 0.25s ease-in-out;
    transition: all 0.25s ease-in-out;
}

.list-artigo3:hover .img_zoom a img {
    -webkit-transform: scale(1);
    transform: scale(1)
}

.list-artigo3:hover h3 a {
    color: #000;
}














/*
############
list-artigo4
############
*/
.list-artigo4 {
    margin: 0 0 30px;
}

.list-artigo4 .rst-box-image::before {
    background: #abb9cc none repeat scroll 0 0;
    content: "";
    height: 4px;
    left: 0;
    position: absolute;
    top: 0;
    transition: all 0.3s ease-out 0s;
    width: 100%;
    z-index: 2;
}

.list-artigo4 .rst-box-image {
    background: #4e5c6a none repeat scroll 0 0;
    overflow: hidden;
    position: relative;
    z-index: 3;
}

.list-artigo4 .rst-box-image img {
    transform: scale(1);
    transition: all 0.35s ease 0s, transform 0.35s ease 0s;
    width: 100%;
}

.list-artigo4 .rst-box-overlay {
    height: 55px;
    left: 0;
    padding: 0 30px;
    position: absolute;
    top: 0;
    width: 100%;
    bottom: 0;
    margin: auto;
    opacity: 0;

    -webkit-transition: all 0.25s ease-in-out;
    -moz-transition: all 0.25s ease-in-out;
    -ms-transition: all 0.25s ease-in-out;
    -o-transition: all 0.25s ease-in-out;
    transition: all 0.25s ease-in-out;
}

.list-artigo4 .rst-box-overlay a {
    background: #333 !important;
    border-radius: 2px;
    color: #fff;
    display: block;
    font-size: 12px;
    margin: 10px 0;
    padding: 15px 5px;
    text-align: center;
    text-transform: uppercase;
    border: 1px solid transparent;
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}

.list-artigo4 .rst-box-overlay a:hover {
    border: 1px solid transparent;
    background: #a282d5 none repeat scroll 0 0;
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}

.list-artigo4 .rst-box-data {
    background: #fff none repeat scroll 0 0;
    border: 0 none;
    padding: 10px;
}

.list-artigo4 .rst-box-data>span {
    color: #96a2b2;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.list-artigo4 .rst-box-data h4 {
    letter-spacing: 2px;
    margin: 0;
    padding: 9px 0 15px;
    text-transform: uppercase;
}

.list-artigo4 h4 a {
    color: #233141;
    text-decoration: none;
}

.list-artigo4 .rst-box-metadata {
    border-top: 0 none;
}

.list-artigo4 .rst-box-metadata>p {
    margin: 0 0 30px;
}

/* ------------- */

.list-artigo4 .rst-box-image:hover::before {
    background: #333;
}

.list-artigo4 .rst-box-image:hover img {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
    opacity: 0.6;
    -webkit-transition: all 0.35s, -webkit-transform 0.35s;
    transition: all 0.35s, transform 0.35s;
}

.list-artigo4 .rst-box-image:hover .rst-box-overlay {
    opacity: 1;
}

.list-artigo4 .rst-box-overlay a:hover {
    border: 1px solid transparent;
    background: #a282d5 none repeat scroll 0 0;
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}

/* ------------- */
















/*
############
list-artigo5
############
*/
.list-artigo5 {
    margin-bottom: 20px;
    background-color: #fff;
    display: block;
    color: #777;
    -webkit-box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.1);
    -moz-box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.1);
    box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.1);

    -webkit-transition: all 0.25s ease-in-out;
    -moz-transition: all 0.25s ease-in-out;
    -ms-transition: all 0.25s ease-in-out;
    -o-transition: all 0.25s ease-in-out;
    transition: all 0.25s ease-in-out;

    border: 1px solid rgba(0, 0, 0, 0.10);
    cursor: pointer;
}

.list-artigo5 .img_list {
    overflow: hidden;
    min-height: 220px;
    text-align: center;
    position: relative
}

.list-artigo5 .img_list img {
    width: 100%;
    position: absolute;
    left: 0px;
    top: 0px;
}

.list-artigo5 .img_list a img {
    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-transition: all .7s ease;
    transition: all .7s ease
}

.list-artigo5 .ribbon {
    position: absolute;
    top: 0;
    left: -1px;
    width: 78px;
    height: 78px;
    z-index: 1
}

.list-artigo5 .ribbon.popular {
    background: url(http://www.ansonika.com/citytours/img/ribbon_popular.png) no-repeat 0 0
}

.list-artigo5 .ribbon.top_rated {
    background: url(http://www.ansonika.com/citytours/img/ribbon_top_rated.png) no-repeat 0 0
}

.list-artigo5 .endereco {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 1;
    padding: 10px;

    color: #FFF;
    font-size: 13px;
    text-align: left;

    -webkit-transition: all 0.50s ease-in-out;
    -moz-transition: all 0.50s ease-in-out;
    -ms-transition: all 0.50s ease-in-out;
    -o-transition: all 0.50s ease-in-out;
    transition: all 0.50s ease-in-out;

    background: -webkit-gradient(linear, left top, left bottom, from(transparent), to(rgba(0, 0, 0, 1)));
    background: -webkit-linear-gradient(top, transparent 0, rgba(0, 0, 0, 1) 100%);
    background: linear-gradient(to bottom, transparent 0, rgba(0, 0, 0, 1) 100%);
}

.list-artigo5 .tour_list_desc {
    padding: 5px 20px 0 0;
    border-right: 1px solid #ededed;
    height: 135px;
    line-height: 17px;
    margin-left: -10px;
}

.list-artigo5 .tour_list_desc h3 {
    font-size: 15px;
    font-weight: 700;

    line-height: 20px;
    margin-top: 14px;
    margin-bottom: 10px;
    text-transform: uppercase;
}

.list-artigo5 .tour_list_desc .frase_destaque {
    font-size: 12px;
}

.list-artigo5 .dados_anunciante {
    background-color: #fff;
    display: block;

    -webkit-box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.1);
    -moz-box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.1);
    box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.1);

    border: 1px solid rgba(0, 0, 0, 0.10);
    margin-right: 20px;
    border-right: 1px solid #ededed;
}

.list-artigo5 .dados_anunciante h4 {
    font-size: 16px;
    font-weight: bold;
    margin: 0px;
}

.list-artigo5 .dados_anunciante p {
    margin-bottom: 10px;
}

.list-artigo5 .score {
    float: right;
    font-size: 11px;
    margin-top: 5px;
}

.list-artigo5 .score span {
    border: 2px solid #999;
    border-radius: 50%;
    color: #999;
    display: inline-block;
    font-size: 13px;
    font-weight: 700;
    height: 35px;
    line-height: 32px;
    margin-left: 5px;
    text-align: center;
    width: 35px;
}

.list-artigo5 .tour_list_desc .rating {
    font-size: 15px;
    margin: 12px 0 3px 0;
}

.list-artigo5 .add_info i {
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;

    border: 1px solid #bec4c8;
    color: #bec4c8;
    font-size: 12px;
    height: 25px;
    margin: 2px;
    padding: 5px;
    width: 25px;
    cursor: pointer;
    text-align: center;

    -webkit-transition: all 0.25s ease-in-out;
    -moz-transition: all 0.25s ease-in-out;
    -ms-transition: all 0.25s ease-in-out;
    -o-transition: all 0.25s ease-in-out;
    transition: all 0.25s ease-in-out;
}

.list-artigo5 .price_list {
    display: table;
    height: 220px;
    font-size: 30px;
    color: #e74c3c;
    width: 100%;
    margin-left: -15px
}

.list-artigo5 .price_list small {
    font-size: 11px;
    color: #999;
    display: block;
    margin-bottom: 10px;
    line-height: 12px
}

.list-artigo5 .price_list div {
    display: table-cell;
    vertical-align: middle;
    text-align: center
}

.list-artigo5 .price_list p {
    padding: 0;
    margin: 0
}

.list-artigo5 .price_list sup {
    font-size: 22px;
    position: relative;
    top: -5px
}

/* Atributos */

.list-artigo5 .ammenties-7 {}

.list-artigo5 .ammenties-7 .icon {
    display: block;
    text-align: center;
}

.list-artigo5 .ammenties-7 .icon .fa {
    margin: 0px;
}

.list-artigo5 .ammenties-7 .quantidade {
    margin-top: 5px;

    display: block;
    text-align: center;
    color: #666;
    font-size: 20px;
}

.list-artigo5 .ammenties-7 .label {
    margin-top: 5px;

    display: block;
    text-align: center;
    color: #900;
    font-size: 10px;
    text-transform: uppercase;
}

/* HOVER */

.list-artigo5:hover {
    border-color: #39434F;
}

.list-artigo5:hover .tour_list_desc h3 {
    color: #000;
}

.list-artigo5:hover .img_list a img {
    -webkit-transform: scale(1.2);
    transform: scale(1.2)
}

.list-artigo5:hover .add_info i {
    border-color: #666;
    color: #666;
}

.list-artigo5:hover .img_list .endereco {
    background: rgba(0, 0, 0, 0.75);
}

/* ------------- */

@media screen and (max-width: 640px) {

    /* ------------- */

    .list-artigo5 .tour_list_desc {
        margin: 0px;
        padding: 5px;
    }

    .list-artigo5 .price_list {
        margin: 0px;
        padding: 5px;
        height: auto;
    }

    /* ------------- */

}

/* ------------- */








/*
############
tagcloud
############
*/
.tagcloud {
    zoom: 1;
    margin: 0px;
    padding: 0px;
    list-style: none;
}

.tagcloud li {
    list-style: none;
}

.tagcloud:before,
.tagcloud:after {
    content: '';
    display: table;
}

.tagcloud:after {
    clear: both;
}

.tagcloud li {
    position: relative;
    float: left;
    margin: 0 0 5px 5px;
}

.tagcloud li:active {
    margin-top: 1px;
    margin-bottom: 7px;
}

.tagcloud a {
    display: block;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.tagcloud a {
    height: 26px;
    line-height: 23px;
    padding: 0 9px 0 8px;
    font-size: 12px;
    color: #555;
    text-decoration: none;
    text-shadow: 0 1px white;
    background: #fafafa;
    border-width: 1px 1px 1px 1px;
    border-style: solid;
    border-color: #dadada #d2d2d2 #c5c5c5 #d2d2d2;
    border-radius: 3px 0 0 3px;
    background-image: -webkit-linear-gradient(top, #fcfcfc, #f0f0f0);
    background-image: -moz-linear-gradient(top, #fcfcfc, #f0f0f0);
    background-image: -o-linear-gradient(top, #fcfcfc, #f0f0f0);
    background-image: linear-gradient(to bottom, #fcfcfc, #f0f0f0);
    -webkit-box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.7), 0 1px 2px rgba(0, 0, 0, 0.05);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.7), 0 1px 2px rgba(0, 0, 0, 0.05);
}












/*
############
toolspg1
############
*/
.toolspg1 {
    padding: 5px 10px;

    margin-bottom: 30px;
    background-color: #eee;
}

.toolspg1 .text-qtd-registros {
    font-size: 16px;
    font-weight: 500;
    margin-top: 5px;
}

.toolspg1 .coluns-left1 {
    padding-left: 0px;
}












/*
############
subscribe-form
############
*/
.subscribe-form {
    background: #efefef none repeat scroll 0 0;
    border-radius: 5px;
    float: left;
    margin: 0 0 10px;
    padding: 15px 0 0;
    position: relative;
    width: 100%;
}

.subscribe-form input,
.subscribe-form textarea,
.subscribe-form select {
    border: medium none;
    border-radius: 5px;
    color: #555555;
    font-size: 1.6rem;
    height: 6rem;
    margin-bottom: 15px;
    padding: 1rem 1.5rem;
    width: 100%;
    resize: none;
}

.subscribe-form input[type="submit"] {
    border-bottom: 3px solid rgba(0, 0, 0, 0.2);
    color: #ffffff;
    font-size: 2.5rem;
    height: 6rem;
    transition: all 0.1s ease 0s;
}
























/*
############
heading ( interno )
############
*/
.hanging-phone {
    position: absolute;
    right: 0;
    z-index: 0;
    bottom: -70px;
}

.section-heading {
    margin: 10px 0 40px;
    text-align: center;
}

.section-heading h1 {
    display: inline-block;
    font-size: 55px;
    font-weight: 300;
    margin-bottom: 0;
}

.section-heading p {
    font-size: 25px;
    color: #999999;
    font-weight: 300;
}

.section-heading .divider:after {
    content: "";
    position: relative;
    height: 4px;
    width: 60px;
    display: block;
    text-align: center;
    margin: 13px auto;
    -webkit-border-radius: 5em;
    -moz-border-radius: 5em;
    -ms-border-radius: 5em;
    -o-border-radius: 5em;
    border-radius: 5em;
}

.section-heading.inverse h1,
.section-heading.inverse p {
    color: #ffffff;
}

.section-heading.inverse .divider:after {
    background: #ffffff;
}

/* ------------- */

@media screen and (max-width: 640px) {

    /* ------------- */

    .section-heading h1 {
        font-size: 32px;
    }

    .section-heading p {
        font-size: 18px;
    }

    /* ------------- */

}

/* ------------- */













/*
############
section-contatorodape
############
*/
section#contatorodape .ext-text1 {
    margin-top: 75px;
}


/* ------------- */

@media screen and (max-width: 640px) {

    /* ------------- */

    section#contatorodape .ext-text1 {
        margin-top: 10px;
    }

    /* ------------- */

}

/* ------------- */











































/*
############
pre-loader
############
*/
.pre-loader {
    color: #FFF;

    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 9999999;

    background: #4c4c4c;
    /* Old browsers */
    background: -moz-linear-gradient(top, #4c4c4c 0%, #2b2b2b 76%, #1c1c1c 91%, #131313 100%);
    /* FF3.6-15 */
    background: -webkit-linear-gradient(top, #4c4c4c 0%, #2b2b2b 76%, #1c1c1c 91%, #131313 100%);
    /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, #4c4c4c 0%, #2b2b2b 76%, #1c1c1c 91%, #131313 100%);
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#4c4c4c', endColorstr='#131313', GradientType=0);
    /* IE6-9 */
}

.pre-loader .load-con {
    margin: 20% auto;
    position: relative;
    text-align: center;
}










/*
############
spinner
############
*/
.spinner {
    margin: 50px auto 0;
    width: 70px;
    text-align: center;
}

.spinner>div {
    width: 18px;
    height: 18px;
    background-color: #ffffff;
    border-radius: 100%;
    display: inline-block;
    -webkit-animation: bouncedelay 1.4s infinite ease-in-out;
    animation: bouncedelay 1.4s infinite ease-in-out;
    /* Prevent first frame from flickering when animation starts */
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

.spinner .bounce1 {
    -webkit-animation-delay: -0.32s;
    animation-delay: -0.32s;
}

.spinner .bounce2 {
    -webkit-animation-delay: -0.16s;
    animation-delay: -0.16s;
}













/*
############
det-artigo1
############
*/
.det-artigo1 .post-image-wrapper {
    margin: 20px 0;
    position: relative;
}

.det-artigo1 .post-title {
    font-size: 28px;
    line-height: normal;
    text-transform: uppercase;
    margin: 0px;
}

.det-artigo1 .post-title a {
    color: #363c48;

    -webkit-transition: all 0.25s ease-in-out;
    -moz-transition: all 0.25s ease-in-out;
    -ms-transition: all 0.25s ease-in-out;
    -o-transition: all 0.25s ease-in-out;
    transition: all 0.25s ease-in-out;
}

.det-artigo1 .post-meta {
    color: #959595;
    font-size: 13px;
    font-weight: 400;
    margin-top: 10px;
}

.det-artigo1 .post-meta span {
    padding-right: 10px;
}

.det-artigo1 .post-meta a {
    color: #959595;
}

.det-artigo1 .post-body p {
    color: #333;
}

.det-artigo1 .post-footer .btn.btn-primary {
    font-weight: 700;
    padding: 10px 15px;
    margin-top: 15px;
    color: #fff;
}

/* ------------- */

.det-artigo1 .post-title:hover a {
    color: #000;
    text-decoration: none;
}

/* ------------- */
















/*
############
det-anuncio-1
############
*/
.det-anuncio-1 section {
    padding-top: 0px;
    padding-bottom: 0px;
}

.det-anuncio-1 p {
    line-height: 2;
    font-size: 15px;
}

/* ------- */

.custom-head {
    line-height: 1.6;
    margin-top: 0;
    position: relative;
}

.custom-head::after {
    background: var(--base1) none repeat scroll 0 0;
    content: "";
    height: 5px;
    left: 0;
    position: absolute;
    top: 110%;
    width: 100px;
}

.custom-head h2,
.custom-head h3 {
    margin-top: 0px;
    line-height: 150%;

    font-size: 26px;
    color: var(--base1) !important;
    font-weight: bold;
}









/*
############
det-anuncio-1 / info-geral
############
*/
.det-anuncio-1 .info-geral-1 {
    font-size: 18px;
    font-weight: bold;
}

.det-anuncio-1 .info-geral-2 {
    float: left;
    font-size: 14px;
    line-height: 175%;
}

.det-anuncio-1 .info-geral-2 .subtext1 {
    color: #900;
    font-size: 18px;
    font-weight: bold;
}

.det-anuncio-1 .info-geral-2 .subtext2 {
    font-weight: bold;
    font-size: 18px;
}

.det-anuncio-1 .info-geral-3 {
    margin: 0 0 10px;
    padding: 0px;

    color: #7a7a7a;
    font-weight: bold;
}

.det-anuncio-1 .info-geral-4 {
    font-size: 14px;
}



















/*
############
det-anuncio-1 / est-mapa
############
*/
.det-anuncio-1 .est-mapa {
    overflow: hidden;
    width: 100%;
    height: 400px;

    margin-bottom: 20px;
}











/*
############
det-anuncio-1 / ammenties-1 
############
*/
.det-anuncio-1 .ammenties-1 {
    overflow: hidden;
}

.det-anuncio-1 .ammenties-1 p {
    background: #e6e6e6 none repeat scroll 0 0;
    line-height: 1;
    margin: 10px 0;
}

.det-anuncio-1 .ammenties-1 p i::after {
    background: #7A7A7A none repeat scroll 0 0;
    content: "";
    height: 15px;
    position: absolute;
    right: -15%;
    transform: rotate(45deg);
    width: 15px;
}

.det-anuncio-1 .ammenties-1 p i {
    background: #7A7A7A none repeat scroll 0 0;
    color: #fff;
    margin-right: 20px;
    padding: 15px;
    position: relative;
}








/*
############
det-anuncio-1 / ammenties-5 
############
*/
.det-anuncio-1 .ammenties-5 {
    overflow: hidden;
}

.det-anuncio-1 .ammenties-5 h3 {
    margin-top: 25px;
}

.det-anuncio-1 .ammenties-5 i {
    color: #EC971F;
    margin-right: 10px;
    font-size: 20px;
}

.det-anuncio-1 .ammenties-5 p {
    margin: 10px 0px;
}

.det-anuncio-1 .ammenties-5 .Extra {
    font-size: 11px;
    font-style: italic;
}

.det-anuncio-1 .ammenties-5 .item.desativado {
    opacity: 0.3;
}















/*
############
det-anuncio-1 / ammenties-6 
############
*/
.det-anuncio-1 .ammenties-6 {
    overflow: hidden;
}

.det-anuncio-1 .ammenties-6 h4 {
    color: #4c4c4c;
    font-size: 16px;
    font-weight: bold;
}

.det-anuncio-1 .ammenties-6 .item {
    margin-bottom: 5px;
}

.det-anuncio-1 .ammenties-6 .item .fa {
    float: left;
    color: #7a7a7a;
}

.det-anuncio-1 .ammenties-6 .item .nome {
    margin-left: 15px;

    color: #7a7a7a;
    font-size: 14px;
    float: left;
}

.det-anuncio-1 .ammenties-6 .item .nome span {
    font-size: 18px;
    font-weight: bold;
}

.det-anuncio-1 .ammenties-6 .item .nome span.space1 {
    margin-right: 5px;
}

.det-anuncio-1 .ammenties-6 .item .nome span.space2 {
    margin-left: 5px;
}

.det-anuncio-1 .ammenties-6 .item.desativado {
    opacity: 0.3;
}













/*
############
det-anuncio-1 / ammenties-7
############
*/
.det-anuncio-1 .ammenties-7 {
    overflow: hidden;
}

.det-anuncio-1 .ammenties-7 .icon {
    display: block;
    text-align: center;
}

.det-anuncio-1 .ammenties-7 .icon .fa {
    margin: 0px;
}

.det-anuncio-1 .ammenties-7 .quantidade {
    margin-top: 5px;

    display: block;
    text-align: center;
    color: #666;
    font-size: 44px;
}

.det-anuncio-1 .ammenties-7 .label {
    margin-top: 5px;

    display: block;
    text-align: center;
    color: #900;
    font-size: 12px;
    text-transform: uppercase;
}












/*
############
det-anuncio-1 / ammenties-8
############
*/
.det-anuncio-1 .ammenties-8 {
    overflow: hidden;
}

.det-anuncio-1 .ammenties-8 .stats {
    display: inline-block;
    box-sizing: border-box;
    vertical-align: top;
}

.det-anuncio-1 .ammenties-8 .stats .number {
    font-size: 60px;
    line-height: 60px;
    font-weight: 700;
    letter-spacing: 1px;
    color: #7A7A7A;
}

.det-anuncio-1 .ammenties-8 .stats .stats-title {
    font-size: 18px;
    line-height: 32px;
    margin-top: 10px;
}














/*
############
det-anuncio-1 / ammenties-8
############
*/
.det-anuncio-1 .ammenties-8 {
    overflow: hidden;
}

.det-anuncio-1 .ammenties-8 .icon {
    display: block;
    text-align: center;
}

.det-anuncio-1 .ammenties-8 .nome {
    margin-top: 5px;

    display: block;
    text-align: center;
    color: #666;
}

.det-anuncio-1 .ammenties-8 .nome span {
    font-size: 20px;
    font-weight: bold;
}















/*
############
error-section
############
*/
.error-section {
    padding: 20px 0;
    position: relative;
    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    text-align: center;
}

.error-section span {
    display: inline-block;
    color: #222222;
    font-size: 30px;
    font-family: sans-serif;
    font-weight: 900;
    margin: 0 0 30px;
    text-transform: uppercase;
    font-size: 56px;
    color: #1cbac8;
    margin: 0;
    letter-spacing: 4px;
}

.error-section h1 {
    color: #222222;
    font-size: 30px;
    font-family: sans-serif;
    font-weight: 900;
    margin: 0 0 30px;
    text-transform: uppercase;
    color: #ffffff;
    letter-spacing: 2px;
    max-width: 460px;
    margin: 0 auto 20px;
    line-height: 52px;
}

.error-section p {
    max-width: 890px;
    margin: 0 auto 25px;
    color: #FFF;
}

.error-section a {
    display: inline-block;
    text-decoration: none;
    transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    border-color: #1cbac8;
    color: #1cbac8;
}

.error-section a:hover {
    color: #ffffff;
    background: #1cbac8;
}

.error-section .error-content {
    position: absolute;
    width: 100%;
    top: 50%;
    left: 0;
    margin-top: -130px;
    z-index: 2;
}

.error-section:after {
    position: absolute;
    content: '';
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: rgba(34, 34, 34, 0.8);

}









/*
############
embed-container
############
*/
.embed-container {
    position: relative;
    height: 400px;
    overflow: hidden;
    max-width: 100%;
    margin: 0px;
    padding: 0px;
}

.embed-container iframe,
.embed-container object,
.embed-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}











/*
############
div-galeria1
############
*/
div.galeria1 {
    padding: 0px;
}

div.galeria1 .row {
    margin: 0px;
    padding: 0px;

    overflow: hidden;

    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}

div.galeria1 .row .col {
    margin: 0px;
    padding: 0px;

    overflow: hidden;

    bottom: 1px solid rgba(0, 0, 0, 0.1)
}

div.galeria1 .row .col img {
    -webkit-transition: all 0.25s ease-in-out;
    -moz-transition: all 0.25s ease-in-out;
    -ms-transition: all 0.25s ease-in-out;
    -o-transition: all 0.25s ease-in-out;
    transition: all 0.25s ease-in-out;

    width: 100%;
}

div.galeria1 .row .col img:hover {
    -moz-transform: scale(1.2);
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
}










/*
############
zoomscript
############
*/
.zoomscript.zsLight {
    z-index: 9000;
}

.zsItemFooterHolder {
    display: none !important;
}



























/*
##############
# BoxTabela1
##############
*/
.BoxTabela1 {
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;

    -moz-box-shadow: 0px 0px 2px #EFEFEF;
    -webkit-box-shadow: 0px 0px 2px #EFEFEF;
    box-shadow: 0px 0px 2px #EFEFEF;

    border: #E5E5E5 1px solid;
    border-collapse: separate;
}

.BoxTabela1 thead tr th {
    padding: 10px;
    font-size: 12px;
    color: #000;
    font-weight: bold;

    background: #ffffff;
    /* Old browsers */
    background: -moz-linear-gradient(top, #ffffff 0%, #f6f6f6 47%, #ededed 100%);
    /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff), color-stop(47%, #f6f6f6), color-stop(100%, #ededed));
    /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #ffffff 0%, #f6f6f6 47%, #ededed 100%);
    /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #ffffff 0%, #f6f6f6 47%, #ededed 100%);
    /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #ffffff 0%, #f6f6f6 47%, #ededed 100%);
    /* IE10+ */
    background: linear-gradient(to bottom, #ffffff 0%, #f6f6f6 47%, #ededed 100%);
    /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ededed', GradientType=0);
    /* IE6-9 */

    border-bottom: #E5E5E5 1px solid;
}

.BoxTabela1 tbody tr td:not(.SemEstilo) {
    padding: 10px;
    font-size: 12px;
    color: #333;
    font-weight: normal;

    border-bottom: #F5F5F5 1px solid;
}

.BoxTabela1 tbody tr td a {
    font-size: 12px;
    color: #333;
}

.BoxTabela1 tbody tr:hover td:not(.SemEstilo) {
    background: #f0f6fa;
    /* Old browsers */
    background: -moz-linear-gradient(top, #f0f6fa 0%, #d8e5ee 100%);
    /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f0f6fa), color-stop(100%, #d8e5ee));
    /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #f0f6fa 0%, #d8e5ee 100%);
    /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #f0f6fa 0%, #d8e5ee 100%);
    /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #f0f6fa 0%, #d8e5ee 100%);
    /* IE10+ */
    background: linear-gradient(to bottom, #f0f6fa 0%, #d8e5ee 100%);
    /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f0f6fa', endColorstr='#d8e5ee', GradientType=0);
    /* IE6-9 */
}

.BoxTabela1 tbody tr td .SubTexto1 {
    font-size: 10px;
    font-style: italic;
    color: #666;
}

.BoxTabela1 tbody tr td .FonteExt1 {
    font-size: 10px;
}

.BoxTabela1 .SemEstilo td {
    background: none !important;
    padding: 0px !important;
    border: 0px !important;
}

.BoxTabela1 tbody tr.LinhaAmarela td {
    background-color: #FF9;
}















/*
############
BoxContato
############
*/
.BoxContato {
    text-align: center;
    position: relative;
}

.BoxContato .BoxIco {
    color: #FFF;

    margin-bottom: 20px;

    display: block;
    text-align: center;
}

.BoxContato .BoxIco .fa-4x {
    font-size: 125px;
}

.BoxContato h2 {
    margin: 0px;
    padding: 0px;

    margin-bottom: 20px;

    font-family: sans-serif;
    font-size: 32px;
    color: #FFFFFF;

    display: block;
    text-align: center;
}

.BoxContato h2 a {
    font-family: sans-serif;
    font-size: 32px;
    color: #FFFFFF;
}

.BoxContato .ExtText1 {
    font-family: sans-serif;
    font-size: 15px;
    line-height: 150%;
    color: #FFFFFF;

    display: block;
    text-align: center;
}

.BoxContato .ExtText1 a {
    font-family: sans-serif;
    font-size: 15px;
    color: #FFFFFF;
}

.BoxContato .ExtList1 {
    list-style: none;
    margin: 0 auto;
    padding: 0px;
    display: inline-block;
}

.BoxContato .ExtList1 li {
    list-style: none;
    margin: 0px;
    padding: 0px;
    float: left;

    margin-right: 10px;
}

.BoxContato .ExtList1 li:last-child {
    margin-right: 0px;
}

.BoxContato .BoxFotoEmpresa {
    position: absolute;
    right: -420px;
    top: 10px;
    z-index: 101;
    display: none;

    overflow: hidden;

    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;

    border: 2px solid #000;

    -moz-box-shadow: 2px 2px 4px -2px #000000;
    -webkit-box-shadow: 2px 2px 4px -2px #000000;
    box-shadow: 2px 2px 4px -2px #000000;
    filter: progid:DXImageTransform.Microsoft.Shadow(strength=2, direction=135, color='#000000');
    -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(strength = 2, Direction = 135, Color = '#000000')";
}

.BoxContato:hover .BoxFotoEmpresa {
    display: block;
}

/* --------------------- */

@media screen and (max-width: 1200px) {

    /* ------------- */

    .BoxContato .BoxFotoEmpresa {
        display: none !important;
    }

    /* --------------------- */

}

/* --------------------- */

@media screen and (max-width: 750px) {

    /* ------------- */

    .BoxContato h2 {
        font-size: 22px;
    }

    .BoxContato .ExtText1 a {
        font-size: 13px;
    }

    /* --------------------- */

}

/* ------------- */






































/*
############
bullets-container
############
*/

@media screen and (max-width: 1000px) {

    /* ------------- */

    .bullets-container {
        display: none !important;
    }

    /* ------------- */

}

/* ------------- */










/*
############
BoxVideo1
############
*/
#BoxVideo1 {
    position: fixed;
    width: 400px;
    height: 486px;
    right: -100px;
    bottom: 0px;
    z-index: 20;
}











/*
############
material-scrolltop
############
*/
.material-scrolltop {
    z-index: 1001;
}




/*
############
material-scrolltop
############
*/
.tparrows {
    z-index: 22;
}









































































/*
############
BoxProduto2
############
*/
.BoxProduto2 {
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;

    display: block;
    padding: 27px 10px;

    background: #FFF;
    border: 2px solid #000000;

    margin-bottom: 20px;
}

.BoxProduto2 .BoxDados {
    text-align: center;
}

.BoxProduto2 .BoxDados .ExtText1 {
    color: #000000;
    font-family: Tahoma;
    font-size: 17px;
    line-height: 20px;

    display: block;
    margin-bottom: 5px;

    -webkit-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}

.BoxProduto2 .BoxDados .ExtText1 span {
    color: #000000;
    font-size: 19px;
    font-weight: bold;

    -webkit-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}

.BoxProduto2 .BoxDados .ExtText2 {
    color: #000000;
    font-size: 19px;
    line-height: 32px;

    display: block;

    -webkit-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}

.BoxProduto2 .BoxDados .ExtText2 span {
    color: #000000;
    font-size: 32px;
    line-height: 32px;
    font-weight: bold;

    -webkit-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}

.BoxProduto2 .BoxDados .ExtText3 {
    color: #000000;
    font-family: Tahoma;
    font-size: 15px;
    line-height: 20px;

    display: block;
    margin-bottom: 5px;

    -webkit-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}

.BoxProduto2 .BoxDados .ExtText3 span {
    color: #000000;
    font-size: 17px;
    text-decoration: line-through;

    -webkit-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}

.BoxProduto2 .BoxBtn {
    text-align: center;
}

.BoxProduto2 .BoxFormasPgto {
    text-align: center;
}
















/*
############
zoomscript
############
*/
.zoomscript.zsLight {
    z-index: 9000;
}

.zsItemFooterHolder {
    display: none !important;
}


































/*
############
Grid de 1 colunas abaixo de 480
############
*/
.col-xs-1esp,
.col-sm-1esp,
.col-md-1esp,
.col-lg-1esp {
    position: relative;
    min-height: 1px;
    padding-right: 10px;
    padding-left: 10px;
}

@media (max-width: 480px) {
    .col-xs-1esp {
        width: 100%;
        float: left;
    }
}








/*
############
Grid de 5 colunas
############
*/
.col-xs-5ths,
.col-sm-5ths,
.col-md-5ths,
.col-lg-5ths {
    position: relative;
    min-height: 1px;
    padding-right: 10px;
    padding-left: 10px;
}

.col-xs-5ths {
    width: 20%;
    float: left;
}

@media (min-width: 768px) {
    .col-sm-5ths {
        width: 20%;
        float: left;
    }
}

@media (min-width: 992px) {
    .col-md-5ths {
        width: 20%;
        float: left;
    }
}

@media (min-width: 1200px) {
    .col-lg-5ths {
        width: 20%;
        float: left;
    }
}
























/*
############
header
############

Header claro e leve.
Uma faixa unica de 72px, fundo branco, tinta escura.
O laranja da marca e ACENTO -- aparece no CTA, no item ativo
e no foco. Nunca como superficie extensa.

Assinatura: o arco laranja sob o item de menu, que ecoa a
espiral solar do logo.
*/

#header {
    margin: 0px;
    padding: 0px;

    position: relative;
    z-index: 100;

    /*
    Fundo em camadas. A 1a declaracao e o fallback chapado para
    navegadores sem suporte a multiplos backgrounds.

      1. brilho radial quente a esquerda, atras do logo -- ecoa o
         sol/espiral do simbolo da marca sem desenhar nada;
      2. leve esfriada azul a direita, onde ficam as acoes;
      3. gradiente vertical branco -> creme muito claro.
    */
    background: #FFFDFA;
    background:
        radial-gradient(ellipse closest-side at 16% 130%, rgba(253, 152, 2, 0.14) 0%, rgba(253, 152, 2, 0) 100%),
        radial-gradient(ellipse closest-side at 90% -20%, rgba(0, 57, 100, 0.05) 0%, rgba(0, 57, 100, 0) 100%),
        linear-gradient(to bottom, #FFFFFF 0%, #FFFCF6 100%);

    border-bottom: 1px solid rgba(0, 0, 0, 0.06);

    /* Sombra suave, para o header descolar do conteudo */
    -webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.05), 0px 6px 20px -10px rgba(0, 0, 0, 0.18);
    box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.05), 0px 6px 20px -10px rgba(0, 0, 0, 0.18);
}

/*
Fio laranja no topo do header -- assina a marca na primeira
linha da pagina e equilibra a sombra de baixo.
*/
#header:before {
    content: "";

    position: absolute;
    left: 0px;
    top: 0px;

    display: block;
    width: 100%;
    height: 3px;

    background: var(--base1);
    background: -webkit-linear-gradient(left, var(--base1) 0%, #FFC24D 45%, var(--base1) 100%);
    background: linear-gradient(to right, var(--base1) 0%, #FFC24D 45%, var(--base1) 100%);

    z-index: 1;
}

/*
---------------
Linha 1 -- faixa unica: logo + menu + acoes
---------------
*/

#header .Linha1 {
    padding: 0px;
    margin: 0px;

    position: relative;
}

/* ------- */

#header .Linha1 .container {
    position: relative;
}

/* ------- */

#header .Linha1 .SRow1 {
    margin: 0px;
    padding: 0px;

    display: flex;
    align-items: center;

    min-height: 72px;
}

#header .Linha1 .SRow1 .SRow1_Col {
    margin: 0px;
    padding: 0px;

    position: relative;
}

/*
Tres colunas na mesma linha:
  Col1 = logo        (esquerda)
  Col3 = menu        (centro da faixa)
  Col2 = acoes       (direita)

Col1 e Col2 dividem igualmente a sobra (flex: 1 1 0) para que o
menu do meio fique centralizado em relacao a PAGINA, e nao apenas
dentro do espaco que sobrou -- as duas laterais tem conteudo de
larguras diferentes (logo ~184px, acoes ~229px).
*/
#header .Linha1 .SRow1 .SRow1_Col1 {
    width: auto;
    flex: 1 1 0px;

    display: flex;
    align-items: center;
    justify-content: flex-start;

    min-width: 0px;
    padding-right: 24px;
}

#header .Linha1 .SRow1 .SRow1_Col3 {
    width: auto;
    flex: 0 1 auto;

    display: flex;
    align-items: center;
    justify-content: center;

    min-width: 0px;
}

#header .Linha1 .SRow1 .SRow1_Col2 {
    width: auto;
    flex: 1 1 0px;

    display: flex;
    align-items: center;
    justify-content: flex-end;

    min-width: 0px;
    padding-left: 24px;

    text-align: right;
}

/* ------- */

#header .Linha1 .Logo {
    display: block;

    height: 52px;
    width: auto;
}

/*
---------------
Acoes -- entrar / criar conta / saldo
---------------
*/

#header .Linha1 .BoxLogin {
    display: flex;
    align-items: center;
    justify-content: flex-end;

    gap: 10px;

    width: auto;

    margin: 0px;
    padding: 0px;
}

/*
O convite "Faca seu Login ou Cadastre-se" e o formulario
inline sairam do header: viram os botoes abaixo, e o modal
de login (appCliente.Login) ja existe.
*/
#header .Linha1 .BoxLogin .ExtText1,
#header .Linha1 .BoxLogin .BoxInt1 form,
#header .Linha1 .BoxLogin .IRow1,
#header .Linha1 .BoxLogin .IRow2 {
    display: none;
}

#header .Linha1 .BoxLogin .BoxInt1 {
    display: flex;
    align-items: center;
    gap: 10px;

    margin: 0px;
    padding: 0px;

    border: none;
    background: none;

    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    border-radius: 0px;

    box-shadow: none;
}

/* ------- */

#header .Linha1 .BoxLogin .ExtText3 {
    display: flex;
    align-items: center;
    gap: 10px;

    margin: 0px;
    padding: 0px;

    font-size: 0px;
    line-height: 0px;

    text-align: right;

    /* esconde o separador "|" entre os links */
    color: transparent;
}

#header .Linha1 .BoxLogin .ExtText3 a {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    height: 40px;
    padding: 0px 17px;

    -webkit-border-radius: 9px;
    -moz-border-radius: 9px;
    border-radius: 9px;

    font-size: 14px;
    line-height: normal;
    font-weight: 600;
    color: var(--base-texto);

    border: 1px solid rgba(0, 0, 0, 0.08);
    background: #FFF;

    text-decoration: none !important;
    white-space: nowrap;

    -webkit-transition: background 0.18s ease-out, border-color 0.18s ease-out, color 0.18s ease-out;
    transition: background 0.18s ease-out, border-color 0.18s ease-out, color 0.18s ease-out;
}

#header .Linha1 .BoxLogin .ExtText3 a:hover,
#header .Linha1 .BoxLogin .ExtText3 a:focus {
    border-color: rgba(0, 0, 0, 0.24);
    background: var(--base-fundo2);
    color: var(--base-texto);
}

/*
Deslogado: "Criar conta" (o 2o link) e o CTA solido laranja.
Logado o CTA NAO se aplica -- ali o 2o link e "Sair", que nao
deve ser a acao de maior destaque. So "Minha Conta" ganha enfase.
*/
#header .Linha1 .BoxLoginN .ExtText3 a+a {
    border-color: transparent;
    background: var(--base1);
    color: var(--base1-texto);
}

#header .Linha1 .BoxLoginN .ExtText3 a+a:hover,
#header .Linha1 .BoxLoginN .ExtText3 a+a:focus {
    border-color: transparent;
    background: var(--base1-hover);
    color: var(--base1-texto);
}

/* Logado: "Minha Conta" e a acao primaria; "Sair" fica discreto */
#header .Linha1 .BoxLoginS .ExtText3 a {
    border-color: transparent;
    background: var(--base1);
    color: var(--base1-texto);
}

#header .Linha1 .BoxLoginS .ExtText3 a:hover,
#header .Linha1 .BoxLoginS .ExtText3 a:focus {
    border-color: transparent;
    background: var(--base1-hover);
    color: var(--base1-texto);
}

#header .Linha1 .BoxLoginS .ExtText3 a+a {
    border-color: rgba(0, 0, 0, 0.08);
    background: #FFF;
    color: var(--base-texto2);
}

#header .Linha1 .BoxLoginS .ExtText3 a+a:hover,
#header .Linha1 .BoxLoginS .ExtText3 a+a:focus {
    border-color: rgba(0, 0, 0, 0.24);
    background: var(--base-fundo2);
    color: var(--base-texto);
}

/* ------- */

/* Saldo de creditos (cliente logado) */
#header .Linha1 .BoxLogin .ExtText4 {
    display: inline-flex;
    align-items: baseline;
    gap: 7px;

    height: 40px;
    padding: 0px 15px;
    margin: 0px;

    -webkit-border-radius: 9px;
    -moz-border-radius: 9px;
    border-radius: 9px;

    background: var(--base-fundo2);
    border: 1px solid rgba(0, 0, 0, 0.08);

    font-size: 15px;
    color: var(--base-texto);
    font-weight: 700;

    text-align: left;
    white-space: nowrap;
}

#header .Linha1 .BoxLogin .ExtText4 div {
    display: inline;

    font-size: 11px;
    color: var(--base-texto2);
    font-weight: 500;
}

/* Saudacao "Ola, Fulano!" -- some no desktop estreito */
#header .Linha1 .BoxLoginS .ExtText1 {
    display: none;
}

/* ------- */

/* Campos do form inline: neutralizados (form oculto) */
#header .Linha1 .BoxLogin .form-control {
    font-size: 14px;
    color: var(--base-texto);
    font-weight: normal;

    -webkit-border-radius: 9px;
    -moz-border-radius: 9px;
    border-radius: 9px;

    width: 100%;
    height: 40px;
    line-height: normal;

    margin: 0px;
    padding: 0px 12px;

    text-align: left;
    vertical-align: middle;

    border: 1px solid rgba(0, 0, 0, 0.16);
    background: #FFF;

    box-shadow: none;

    -webkit-transition: border-color 0.18s ease-out, box-shadow 0.18s ease-out;
    transition: border-color 0.18s ease-out, box-shadow 0.18s ease-out;
}

#header .Linha1 .BoxLogin .form-control:focus {
    border-color: var(--base1);
    background: #FFF;

    box-shadow: 0px 0px 0px 3px rgba(253, 152, 2, 0.25);
    outline: none;
}

#header .Linha1 .BoxLogin .btn {
    margin: 0px;
    padding: 0px 17px;

    border: none !important;
    background: var(--base1);

    font-size: 14px;
    color: var(--base1-texto);
    font-weight: 600;

    -webkit-border-radius: 9px;
    -moz-border-radius: 9px;
    border-radius: 9px;

    width: auto;
    height: 40px;
    line-height: normal;

    text-align: center;
    vertical-align: middle;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;

    position: relative;

    box-shadow: none !important;
    text-decoration: none !important;

    -webkit-transition: background 0.18s ease-out;
    transition: background 0.18s ease-out;
}

#header .Linha1 .BoxLogin .btn:hover,
#header .Linha1 .BoxLogin .btn:focus {
    background: var(--base1-hover);
    color: var(--base1-texto);
}

#header .Linha1 .BoxLogin .btn .fa {
    margin: 0px;

    color: var(--base1-texto);
    font-size: 14px;
}

/* -------- */

#header .Linha1 .MenuMobile {
    background: none;
    border: 1px solid rgba(0, 0, 0, 0.08);

    -webkit-border-radius: 9px;
    -moz-border-radius: 9px;
    border-radius: 9px;

    width: 40px;
    height: 40px;
    line-height: 38px;

    display: none;
    overflow: hidden;

    text-align: center;
    vertical-align: middle;

    -webkit-transition: background 0.18s ease-out, border-color 0.18s ease-out;
    transition: background 0.18s ease-out, border-color 0.18s ease-out;

    position: absolute;
    left: 10px;
    top: calc(50% - 20px);
}

#header .Linha1 .MenuMobile .fa {
    margin: 0px;

    color: var(--base-texto);
    font-size: 17px;
}

#header .Linha1 .MenuMobile:hover,
#header .Linha1 .MenuMobile:focus {
    background: var(--base-fundo2);
    border-color: rgba(0, 0, 0, 0.24);
}

#header .Linha1 .MenuMobile2 {
    left: auto;
    right: 10px;

    border-color: transparent;
    background: var(--base1);
}

#header .Linha1 .MenuMobile2 .fa {
    color: var(--base1-texto);
}

#header .Linha1 .MenuMobile2:hover,
#header .Linha1 .MenuMobile2:focus {
    border-color: transparent;
    background: var(--base1-hover);
}

/*
---------------
Linha 2 -- o menu, agora como coluna dentro da Linha 1
---------------
*/

#header .Linha2 {
    padding: 0px;
    margin: 0px;

    position: static;

    width: 100%;

    background: none;
}

#header .Linha2:before {
    display: none;
}

/* ------- */

#header .Linha2 nav {
    width: 100%;
}

/* ------- */

#header .Linha2 .ExtList1 {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: nowrap;

    list-style: none;

    margin: 0px;
    padding: 0px;

    width: 100%;
}

#header .Linha2 .ExtList1 li {
    /*
    flex + align-items:stretch faz o <li> ocupar toda a altura da
    faixa; o <a> centraliza o texto dentro dele. E assim que o menu
    fica alinhado verticalmente com o logo e com os botoes.
    */
    display: flex;
    align-items: center;

    list-style: none;

    margin: 0px;
    padding: 0px;

    position: relative;
}

/*
Separador entre os itens: um losango laranja pequeno.
O :before do proprio <li> -- some no primeiro item.
*/
#header .Linha2 .ExtList1 li:before {
    content: "";

    display: block;
    flex: 0 0 auto;

    width: 4px;
    height: 4px;

    margin: 0px 3px;

    background: var(--base1);

    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);

    opacity: 0.55;
}

#header .Linha2 .ExtList1 li:first-child:before {
    display: none;
}

#header .Linha2 .ExtList1 li a {
    font-size: 15px;
    color: var(--base-texto);
    font-weight: 700;

    display: flex;
    align-items: center;

    text-align: center;

    height: 40px;
    line-height: normal;

    margin: 0px;
    padding: 0px 13px;

    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;

    position: relative;
    white-space: nowrap;

    text-decoration: none !important;

    -webkit-transition: color 0.18s ease-out;
    transition: color 0.18s ease-out;
}

#header .Linha2 .ExtList1 li a:hover {
    color: #C26A00;
}

/*
ASSINATURA: o arco laranja.
Uma curva -- nao um retangulo -- que cita a espiral do logo.
*/
#header .Linha2 .ExtList1 li a:after {
    content: "";

    position: absolute;
    left: 13px;
    right: 13px;
    /*
    O <a> tem 40px de altura e o texto fica centralizado nele,
    entao o arco se posiciona logo abaixo do texto -- nao na
    base da caixa.
    */
    bottom: 7px;

    height: 7px;

    border-bottom: 2px solid var(--base1);
    border-radius: 0px 0px 60% 60% / 0px 0px 100% 100%;

    opacity: 0;

    -webkit-transform: translateY(4px) scaleX(0.55);
    transform: translateY(4px) scaleX(0.55);

    -webkit-transition: opacity 0.24s cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 0.24s cubic-bezier(0.4, 0, 0.2, 1);
    transition: opacity 0.24s cubic-bezier(0.4, 0, 0.2, 1), transform 0.24s cubic-bezier(0.4, 0, 0.2, 1);
}

#header .Linha2 .ExtList1 li a:hover:after,
#header .Linha2 .ExtList1 li a:focus:after,
#header .Linha2 .ExtList1 li.LiAtivo a:after {
    opacity: 1;

    -webkit-transform: translateY(0px) scaleX(1);
    transform: translateY(0px) scaleX(1);
}

#header .Linha2 .ExtList1 li.LiAtivo a {
    color: #C26A00;
}

/* Foco visivel por teclado */
#header .Linha2 .ExtList1 li a:focus,
#header .Linha1 .BoxLogin .ExtText3 a:focus,
#header .Linha1 .MenuMobile:focus {
    outline: 2px solid var(--base1);
    outline-offset: 2px;
}

/* ------------- */

@media screen and (max-width: 1100px) {

    /* ------------- */

    /* Menu cede espaco antes de sumir */
    #header .Linha1 .SRow1 .SRow1_Col1 {
        padding-right: 20px;
    }

    #header .Linha1 .SRow1 .SRow1_Col2 {
        padding-left: 20px;
    }

    #header .Linha2 .ExtList1 li a {
        font-size: 14px;
        padding: 0px 9px;
    }

    #header .Linha2 .ExtList1 li:before {
        margin: 0px 1px;
    }

    #header .Linha2 .ExtList1 li a:after {
        left: 9px;
        right: 9px;
    }

    /* ------------- */

}

/* ------------- */

@media screen and (max-width: 900px) {

    /* ------------- */

    /* Sem espaco para menu + acoes: menu vai para o mmenu mobile */
    #header .Linha1 .SRow1 .SRow1_Col3,
    #header .Linha2 {
        display: none;
    }

    /* Sem o menu, as acoes ocupam o espaco livre */
    #header .Linha1 .SRow1 .SRow1_Col2 {
        flex: 1 1 auto;
    }

    /* ------------- */

}

/* ------------- */

@media screen and (max-width: 767px) {

    /* ------------- */

    #header .Linha1 .SRow1 {
        min-height: 64px;

        justify-content: center;
    }

    #header .Linha1 .SRow1 .SRow1_Col1 {
        width: auto;
        padding-right: 0px;

        justify-content: center;
        text-align: center;
    }

    #header .Linha1 .SRow1 .SRow1_Col2,
    #header .Linha1 .SRow1 .SRow1_Col3 {
        display: none;
    }

    #header .Linha1 .MenuMobile {
        display: block;
    }

    #header .Linha1 .Logo {
        height: 42px;
    }

    /* ------------- */

    #header .Linha2 {
        display: none;
    }

    /* ------------- */

}

/* ------------- */

@media (prefers-reduced-motion: reduce) {

    /* ------------- */

    #header .Linha2 .ExtList1 li a:after,
    #header .Linha1 .BoxLogin .ExtText3 a,
    #header .Linha1 .BoxLogin .btn,
    #header .Linha1 .MenuMobile {
        -webkit-transition: none;
        transition: none;
    }

    /* ------------- */

}

/* ------------- */
/* ------------- */


























/*
############
footer
############
*/
#footer {
    position: relative;

    padding: 0px;
    margin: 0px;
    margin-top: 3px;
}

/*
Fio laranja no topo do rodape -- o par do fio que abre o header,
fechando a pagina com a mesma assinatura.
*/
#footer:before {
    position: absolute;
    left: 0px;
    top: -3px;

    display: block;
    content: "";
    width: 100%;
    height: 3px;

    background: var(--base1);
    background: -webkit-linear-gradient(left, var(--base1) 0%, #FFC24D 45%, var(--base1) 100%);
    background: linear-gradient(to right, var(--base1) 0%, #FFC24D 45%, var(--base1) 100%);
}

/* ------------- */

/*
Fundo escuro em CSS -- substitui Fundo7.jpg (que estava em
/imagens/, fora do versionamento).

O rodape continua ESCURO de proposito: com o header claro, ele
ancora o fim da pagina e mantem a combinacao preto + laranja +
branco da marca. O brilho laranja no topo a esquerda ecoa o do
header, amarrando as duas pontas.
*/
#footer .Fundo1 {
    background: #131313;
    background:
        radial-gradient(ellipse closest-side at 12% 0%, rgba(253, 152, 2, 0.10) 0%, rgba(253, 152, 2, 0) 100%),
        radial-gradient(ellipse closest-side at 88% 100%, rgba(0, 57, 100, 0.16) 0%, rgba(0, 57, 100, 0) 100%),
        linear-gradient(to bottom, #1A1A1A 0%, #101010 100%);
}

/*
---------------
Linha 1
---------------
*/

#footer .Linha1 {
    margin: 0px;
    padding: 0px;
}

/*
A coluna SIGA-NOS ocupa apenas a largura que os icones exigem
(width:auto), e as duas colunas de texto dividem a sobra. Assim
nao ha numero chumbado: se mais uma rede social for ativada no
painel, a coluna cresce sozinha e nada quebra.
*/
#footer .Linha1 .row {
    display: flex;
    flex-wrap: wrap;
}

#footer .Linha1 .row>[class*="col-"] {
    flex: 1 1 auto;
}

#footer .Linha1 .row>.ColSocial {
    flex: 0 0 auto;
    width: auto;

    max-width: none;
}

/* ------------- */

#footer .Linha1 .container {
    padding-top: 60px;
    padding-bottom: 20px;

    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

/* ------------- */

#footer .Linha1 .ExtTitulo {
    color: #FFF;
    font-size: 15px;
    font-weight: 700;

    letter-spacing: 0.08em;

    display: block;
    margin-bottom: 22px;

    position: relative;
    padding-bottom: 12px;
}

/* Tracinho laranja sob o titulo da coluna */
#footer .Linha1 .ExtTitulo:after {
    content: "";

    position: absolute;
    left: 0px;
    bottom: 0px;

    display: block;
    width: 26px;
    height: 2px;

    background: var(--base1);
}

/* ------------- */

#footer .Linha1 .ExtText1 {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.65);
    font-weight: normal;

    line-height: 22px;
    margin-top: 20px;
}

/* ------------- */

#footer .Linha1 .ExtList1 {
    list-style: none;
    display: block;

    margin: 0px;
    padding: 0px;
}

#footer .Linha1 .ExtList1 li {
    list-style: none;
    display: block;

    margin: 0px;
    padding: 0px;
}

#footer .Linha1 .ExtList1 li a {
    color: rgba(255, 255, 255, 0.72);
    font-size: 15px;
    font-weight: normal;

    display: inline-block;

    line-height: 20px;
    padding: 5px 0px;

    text-decoration: none;

    -webkit-transition: color 0.18s ease-out;
    transition: color 0.18s ease-out;
}

#footer .Linha1 .ExtList1 li a small {
    font-size: 13px;
}

#footer .Linha1 .ExtList1 li a:hover,
#footer .Linha1 .ExtList1 li a:focus {
    color: var(--base1);
    text-decoration: none;
}

/* ------------- */

#footer .Linha1 .ExtList2 {
    list-style: none;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;

    margin: 0px;
    padding: 0px;
}

#footer .Linha1 .ExtList2 li {
    list-style: none;
    display: inline-block;

    margin: 0px;
    padding: 0px;
    margin-right: 10px;
    margin-bottom: 10px;
}

#footer .Linha1 .ExtList2 li:last-child {
    margin-right: 0px;
}

#footer .Linha1 .ExtList2 li a {
    display: block;

    -webkit-transition: opacity 0.18s ease-out, -webkit-transform 0.18s ease-out;
    transition: opacity 0.18s ease-out, transform 0.18s ease-out;

    opacity: 0.85;
}

#footer .Linha1 .ExtList2 li a:hover,
#footer .Linha1 .ExtList2 li a:focus {
    opacity: 1;

    -webkit-transform: translateY(-3px);
    transform: translateY(-3px);
}

#footer .Linha1 .ExtList2 li img {
    float: left;

    width: 32px;
    height: 32px;
    max-width: 32px;
}

/*
---------------
Linha 2
---------------
*/

#footer .Linha2 {
    margin: 0px;
    padding: 30px 0px 20px;
}

/* ------------- */

#footer .Linha2 .ColEsp1 {
    text-align: center;
}

/* ------------- */

#footer .Linha2 .ExtTitulo {
    color: rgba(255, 255, 255, 0.55);
    font-size: 12px;
    font-weight: 600;

    letter-spacing: 0.06em;
    text-transform: uppercase;

    display: block;
    margin-bottom: 12px;
}

/* ------------- */

#footer .Linha2 .ExtList1 {
    list-style: none;
    display: inline-block;

    margin: 0px;
    padding: 0px;
}

#footer .Linha2 .ExtList1 li {
    list-style: none;
    display: inline-block;

    margin: 0px;
    padding: 0px;
    margin-right: 20px;
}

#footer .Linha2 .ExtList1 li:last-child {
    margin-right: 0px;
}

#footer .Linha2 .ExtList1 li img {
    float: left;
}

/* ------------- */

#footer .Linha2 .BlcFormasPagamento {
    background: #FFF;

    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    border-radius: 5px;

    display: inline-block;

    padding: 10px;
    margin: 0px;
    padding-bottom: 0px;
}

#footer .Linha2 .BlcFormasPagamento ul {
    list-style: none;
    display: inline-block;

    margin: 0px;
    padding: 0px;

    max-width: 342px;
}

#footer .Linha2 .BlcFormasPagamento ul li {
    list-style: none;
    display: inline-block;
    float: left;

    margin: 0px;
    padding: 0px;
    margin-right: 5px;
    margin-bottom: 5px;
}

#footer .Linha2 .BlcFormasPagamento ul li img {
    float: left;
}

/*
---------------
Linha 3
---------------
*/

/*
A faixa de copyright acompanha o rodape escuro (antes era branca,
o que cortava o bloco em dois). Fica um tom acima do Fundo1 e e
separada por um filete claro.
*/
#footer .Linha3 {
    margin: 0px;
    padding: 22px 0px;

    text-align: center;

    background: #0C0C0C;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
}

/* ------------- */

#footer .Linha3 .ExtText1 {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.5);
    font-weight: normal;
}

#footer .Linha3 .ExtText1 a {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.65);
    font-weight: normal;

    text-decoration: none;

    -webkit-transition: color 0.18s ease-out;
    transition: color 0.18s ease-out;
}

#footer .Linha3 .ExtText1 a:hover,
#footer .Linha3 .ExtText1 a:focus {
    color: var(--base1);
}

#footer .Linha3 .ExtText1 span {
    color: rgba(255, 255, 255, 0.25);

    margin: 0px 4px;
}

/* ------------- */

@media screen and (max-width: 767px) {

    /* ------------- */

    #footer .Linha1,
    #footer .Linha2,
    #footer .Linha3 {
        text-align: center;
    }

    /* ------------- */

    #footer .Linha1 .ExtTitulo {
        font-size: 18px;
    }

    /*
    O tracinho laranja e position:absolute com left:0, entao o
    text-align:center do mobile nao o alcanca -- precisa ser
    centralizado pela propria posicao.
    */
    #footer .Linha1 .ExtTitulo:after {
        left: 50%;

        margin-left: -13px;
    }

    #footer .Linha1 .ExtList1 li a {
        font-size: 14px;
        line-height: 20px;
    }

    #footer .Linha1 .ExtText1 {
        font-size: 12px;
    }

    /*
    A coluna social usa width:auto no desktop (para ocupar so a
    largura dos icones). No mobile ela precisa voltar a 100%,
    senao encolhe ao conteudo e fica encostada a esquerda.
    */
    #footer .Linha1 .row>.ColSocial {
        width: 100%;
        flex: 1 1 100%;
    }

    /* A lista de redes sociais e flex: centraliza pelo justify */
    #footer .Linha1 .ExtList2 {
        justify-content: center;

        width: 100%;
    }

    /* ------------- */

    #footer .Linha2 .ExtTitulo {
        font-size: 14px;
    }

    #footer .Linha2 .BlcFormasPagamento,
    #footer .Linha2 .ExtList1 {
        text-align: center;
    }

    /* ------------- */

    #footer .Linha3 .ExtText1 span {
        font-size: 13px;

        display: block;
        text-indent: -1000px;
        height: 4px;
    }

    /* ------------- */

}

/* ------------- */














/*
############
BoxAtendente
############
*/
/*
Card do consultor -- foto no topo com selo de status.

As classes internas (BoxImagem, ExtTitulo, ExtText1..4) tem os
mesmos nomes usados por outros cards do site (BoxDepoimento,
BoxProduto, BoxAtendente2 e mais 20+ arquivos). Por isso TODAS as
regras aqui ficam escopadas por .BoxAtendente -- nunca soltas.
*/
.BoxAtendente {
    display: flex;
    flex-direction: column;
    position: relative;

    text-align: center;

    margin: 0px auto;
    padding: 0px;

    /*
    width:100% e nao so max-width: dentro da coluna flex o card
    precisa PREENCHER o espaco, senao encolhe conforme o texto e
    quebra o alinhamento da linha.
    */
    width: 100%;
    max-width: 275px;
    height: 100%;

    background: #FFF;

    -webkit-border-radius: 16px;
    -moz-border-radius: 16px;
    border-radius: 16px;

    border: 1px solid rgba(0, 0, 0, 0.08);
    overflow: hidden;

    -webkit-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.04), 0px 8px 24px -16px rgba(0, 0, 0, 0.3);
    box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.04), 0px 8px 24px -16px rgba(0, 0, 0, 0.3);

    -webkit-transition: -webkit-transform 0.22s ease-out, box-shadow 0.22s ease-out, border-color 0.22s ease-out;
    transition: transform 0.22s ease-out, box-shadow 0.22s ease-out, border-color 0.22s ease-out;
}

.BoxAtendente:hover {
    border-color: rgba(253, 152, 2, 0.5);

    -webkit-transform: translateY(-4px);
    transform: translateY(-4px);

    -webkit-box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.06), 0px 18px 36px -20px rgba(0, 0, 0, 0.4);
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.06), 0px 18px 36px -20px rgba(0, 0, 0, 0.4);
}

/* ------------- */

/* Foto quadrada ocupando a largura -- sem circulo estourando o card */
.BoxAtendente .BoxImagem {
    margin: 0px;
    padding: 0px;

    display: block;
    position: relative;
    overflow: hidden;

    background: #EEF0F3;

    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    border-radius: 0px;

    border: none;
    box-shadow: none;
}

.BoxAtendente .BoxImagem a {
    display: block;

    /* proporcao 1:1 sem depender de aspect-ratio (suporte antigo) */
    padding-top: 100%;

    position: relative;
}

.BoxAtendente .BoxImagem img {
    position: absolute;
    left: 0px;
    top: 0px;

    width: 100%;
    height: 100%;

    object-fit: cover;

    display: block;
}

/* ------------- */

/*
Selo de status no bloco de acoes, logo acima do "Ver perfil".
O estado do consultor e a informacao mais importante do card.
Fica em fluxo normal (nao sobre a foto) para nao competir com a
imagem e ficar colado na decisao de clique.
*/
.BoxAtendente .BlcAcoes {
    text-align: center;
}

/*
O selo ocupa exatamente a mesma altura do botao (.BoxAtendente .btn),
porque os dois se alternam conforme o status: o botao de acao aparece
quando o consultor esta disponivel e o selo quando nao esta. Alturas
diferentes deslocavam o "Ver perfil" de card para card na mesma linha.

A altura vem das mesmas medidas verticais do botao (padding 10px +
borda 1px + line-height 1.2), nao de um valor fixo -- se o botao mudar,
mude tambem as duas regras juntas.
*/
.BoxAtendente .BlcAcoes .ExtStatus {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;

    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;

    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;

    margin: 0px 0px 8px 0px;
    padding: 10px 11px;

    border: 1px solid transparent;

    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;

    -webkit-border-radius: 99px;
    -moz-border-radius: 99px;
    border-radius: 99px;

    /* cor de fundo por status -- ver regras abaixo */
    background: #F3F4F6;

    font-size: 11px;
    font-weight: bold;

    /*
    15px e a altura de linha que o botao gera com font-size 13px e
    line-height normal -- fixar aqui iguala os dois em 37px, mesmo
    com o selo usando fonte menor.
    */
    line-height: 15px;

    letter-spacing: 0.04em;

    text-align: center;

    -webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.18);
    box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.18);
}

.BoxAtendente .BlcAcoes .ExtStatus i {
    width: 7px;
    height: 7px;

    margin: 0px 6px 0px 0px;

    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;

    display: block;
}

/*
Fundo do selo por status. Fundo solido (nao translucido) para nao
herdar a cor da foto, que varia entre consultores.

  Disponivel  #D1FAE5 + #065F46 = 6.78:1
  Ocupado     #FEF3C7 + #92400E = 6.37:1
  Offline     #991B1B + #FFFFFF = 7.60:1

O Offline usa vermelho escuro com texto branco: sobre fundo
escuro o texto precisa ser claro para manter o contraste.
*/
.BoxAtendente.Disponivel .ExtStatus {
    background: #D1FAE5;
    color: #065F46;
}

.BoxAtendente.Disponivel .ExtStatus i {
    background: var(--base-sucesso);
}

.BoxAtendente.Ocupado .ExtStatus {
    background: #FEF3C7;
    color: #92400E;
}

.BoxAtendente.Ocupado .ExtStatus i {
    background: var(--base-aviso);
}

/*
Offline em cinza neutro, nao em vermelho: o botao de acao do card
ja e vermelho, e os dois empilhados carregavam demais. Vermelho
fica reservado para a acao. Mesmo par de cinza usado no status
Ausente da ficha do consultor (#E5E7EB + #374151 = 8.93:1).
*/
.BoxAtendente.Offline .ExtStatus {
    background: #E5E7EB;
    color: #374151;
}

.BoxAtendente.Offline .ExtStatus i {
    background: #6B7280;
}

/* ------------- */

.BoxAtendente .BoxCorpo {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;

    margin: 0px;
    padding: 16px 16px 18px;
}

/* ------------- */

/*
Nome em cinza-escuro, nao no laranja da marca: laranja sobre
branco da 2.02:1 e reprova o WCAG AA (minimo 4.5:1).
*/
.BoxAtendente .ExtTitulo {
    margin: 0px 0px 6px;
    padding: 0px;

    display: block;
    overflow: hidden;

    text-align: center;

    height: auto;
    line-height: 24px;

    font-size: 19px;
    color: var(--base-texto);
    font-weight: bold;
}

.BoxAtendente .ExtTitulo a {
    font-size: 19px;
    color: var(--base-texto);
    font-weight: bold;

    text-decoration: none;

    display: block;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

    -webkit-transition: color 0.18s ease-out;
    transition: color 0.18s ease-out;
}

.BoxAtendente:hover .ExtTitulo a {
    color: #C26A00;
}

/* ------------- */

.BoxAtendente .ExtText2 {
    font-size: 13px;
    color: #EC971F;

    letter-spacing: 1px;
    line-height: normal;

    text-align: center;
    margin-bottom: 4px;
}

.BoxAtendente .ExtText1 {
    font-size: 11px;
    color: var(--base-texto2);
    font-weight: normal;

    text-align: center;
    margin-bottom: 12px;
}

.BoxAtendente .ExtText3 {
    font-size: 12px;
    color: var(--base-texto2);
    font-weight: normal;

    line-height: 18px;
    height: 36px;

    display: block;
    overflow: hidden;

    text-align: center;
    margin-bottom: 16px;
}

/* ------------- */

.BoxAtendente .BlcAcoes {
    margin-top: auto;
    padding: 0px;

    display: block;
}

.BoxAtendente .btn {
    margin: 0px 0px 8px;
    padding: 10px;

    width: 100%;
    height: auto;

    /*
    border-box e obrigatorio: o .btn-custom6 global usa
    content-box, e com width:100% o padding somaria por fora,
    estourando a largura do card.
    */
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;

    -webkit-border-radius: 9px;
    -moz-border-radius: 9px;
    border-radius: 9px;

    font-size: 13px;
    font-weight: bold;
    line-height: normal;

    display: block;
    text-align: center;

    border: 1px solid transparent;

    text-decoration: none !important;
}

.BoxAtendente .btn.last {
    margin-bottom: 0px;
}

/*
Botao de acao por estado -- a cor acompanha o selo de status,
para que o card leia como um conjunto so.

  Disponivel  #047857 verde escuro + branco  = 5.18:1
  Ocupado     #B45309 ambar escuro  + branco = 4.87:1
  Offline     #991B1B vermelho esc. + branco = 7.60:1

Todos com texto branco: sao fundos escuros.
*/
.BoxAtendente .btn-custom6 {
    background: var(--base-fundo2) !important;
    color: var(--base-texto2) !important;
    border-color: rgba(0, 0, 0, 0.08);
}

/* Disponivel -- verde escuro, a acao que queremos que aconteca */
.BoxAtendente.Disponivel .btn-custom6 {
    background: #047857 !important;
    color: #FFF !important;
    border-color: transparent;
}

.BoxAtendente.Disponivel .btn-custom6:hover,
.BoxAtendente.Disponivel .btn-custom6:focus {
    background: #065F46 !important;
    color: #FFF !important;
}

/* Ocupado -- ambar, mesma familia do selo */
.BoxAtendente.Ocupado .btn-custom6 {
    background: #B45309 !important;
    color: #FFF !important;
    border-color: transparent;
}

.BoxAtendente.Ocupado .btn-custom6:hover,
.BoxAtendente.Ocupado .btn-custom6:focus {
    background: #92400E !important;
    color: #FFF !important;
}

/* Offline -- vermelho escuro, mesma familia do selo */
.BoxAtendente.Offline .btn-custom6 {
    background: #991B1B !important;
    color: #FFF !important;
    border-color: transparent;
}

.BoxAtendente.Offline .btn-custom6:hover,
.BoxAtendente.Offline .btn-custom6:focus {
    background: #7F1D1D !important;
    color: #FFF !important;
}

.BoxAtendente .btn-custom7 {
    background: #FFF !important;
    color: var(--base-texto) !important;
    border-color: rgba(0, 0, 0, 0.08);
}

.BoxAtendente .btn-custom7:hover,
.BoxAtendente .btn-custom7:focus {
    background: var(--base-fundo2) !important;
    border-color: rgba(0, 0, 0, 0.24);
    color: var(--base-texto) !important;
}

.BoxAtendente .btn:focus {
    outline: 2px solid var(--base1);
    outline-offset: 2px;
}

/* ------------- */

/*
Formas de atendimento com preco. So aparece com 2+ formas ativas
(regra no PHP). Vira uma lista de etiquetas, nao colunas de
largura fixa -- assim 2 ou 5 formas cabem igualmente bem.
*/
.BoxAtendente .BlcIcons {
    margin: 14px 0px 0px;
    padding: 12px 0px 0px;

    display: flex;
    flex-wrap: wrap;
    justify-content: center;

    border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.BoxAtendente .BlcIcons .BlcIco {
    margin: 0px 4px 6px;
    padding: 4px 8px;

    width: auto;

    -webkit-border-radius: 7px;
    -moz-border-radius: 7px;
    border-radius: 7px;

    background: var(--base-fundo2);

    display: flex;
    align-items: center;
}

.BoxAtendente .BlcIcons .BlcIco .ExtText4A {
    font-size: 11px;
    color: var(--base-texto2);
    font-weight: normal;

    line-height: normal;

    display: flex;
    align-items: center;

    margin: 0px 5px 0px 0px;
    text-align: left;
}

.BoxAtendente .BlcIcons .BlcIco .ExtText4A svg {
    width: 13px;
    height: 13px;

    margin-right: 4px;

    display: block;
    flex: 0 0 auto;
}

.BoxAtendente .BlcIcons .BlcIco .ExtText4B {
    font-size: 11px;
    color: var(--base-texto);
    font-weight: bold;

    line-height: normal;

    margin: 0px;
    text-align: left;
}

/* ------------- */

/*
Frase de destaque do consultor, quando cadastrada.
Fica sobre a base da foto.
*/
.BoxAtendente .BoxImagem .ExtFraseDestaque {
    position: absolute;
    left: 0px;
    right: 0px;
    bottom: 0px;
    z-index: 2;

    margin: 0px;
    padding: 18px 12px 10px;

    background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.72) 100%);
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.72) 100%);

    font-size: 12px;
    color: #FFF;
    line-height: 16px;

    text-align: center;
}

.BoxAtendente .BoxImagem .ExtFraseDestaque div {
    display: block;
    overflow: hidden;
}

/* ------------- */

@media screen and (max-width: 767px) {

    /* ------------- */

    .BoxAtendente {
        max-width: 320px;
    }

    .BoxAtendente .BoxCorpo {
        padding: 14px 14px 16px;
    }

    .BoxAtendente .ExtTitulo,
    .BoxAtendente .ExtTitulo a {
        font-size: 18px;
    }

    /* ------------- */

}

/* ------------- */

@media (prefers-reduced-motion: reduce) {

    /* ------------- */

    .BoxAtendente,
    .BoxAtendente .ExtTitulo a {
        -webkit-transition: none;
        transition: none;
    }

    .BoxAtendente:hover {
        -webkit-transform: none;
        transform: none;
    }

    /* ------------- */

}

/* ------------- */


















/*
############
BoxAtendente2
############
*/
.BoxAtendente2 {
    display: block;
    position: relative;

    text-align: center;

    margin: 0px auto;
    padding: 0px;

    width: 137px;
}

/* ------------- */

.BoxAtendente2 .BoxImagemRedor {
    text-align: center;
    position: relative;

    margin-bottom: 10px;
}

.BoxAtendente2 .BoxImagemRedor .BoxImagem {
    background: url('/imagens/Geral/FundoAtendente1.png') no-repeat center center;

    display: inline-block;
    width: 137px;
    height: 137px;

    padding-top: 10px;
    padding-right: 1px;
}

.BoxAtendente2 .BoxImagemRedor .BoxImagem img {
    display: inline-block;
    overflow: hidden;

    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;
}

/* ------------- */

.BoxAtendente2 .ExtTitulo {
    margin: 0px;
    padding: 0px;
    margin-bottom: 10px;

    display: block;
    overflow: hidden;

    text-align: center;
    vertical-align: middle;

    height: 16px;
    line-height: 16px;

    font-size: 16px;
    color: var(--base1);
    font-weight: bold;
}

.BoxAtendente2 .ExtTitulo a {
    font-size: 16px;
    color: var(--base1);
    font-weight: bold;

    display: block;
    text-decoration: none !important;
}

/* ------------- */

.BoxAtendente2 .ExtText1 {
    display: block;
    overflow: hidden;
}

.BoxAtendente2 .ExtText1 div {
    display: inline-block;

    padding: 2px 10px;
    margin: 0px;

    font-size: 12px;
    color: var(--base1-texto);
    font-weight: bold;

    background: var(--base2);

    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}

/* ------------- */

@media screen and (max-width: 767px) {

    /* ------------- */

    .BoxAtendente2 {
        width: 120px;
    }

    /* ------------- */

    .BoxAtendente2 .BoxImagemRedor .BoxImagem {
        background-size: 100% 100% !important;

        width: 120px;
        height: 120px;
    }

    .BoxAtendente2 .BoxImagemRedor .BoxImagem img {
        width: 100px;
    }

    /* ------------- */

}

/* ------------- */



























/*
############
BoxCategoria
############
*/
.BoxCategoria {
    display: block;
    position: relative;

    text-align: center;
}

/* ------------- */

.BoxCategoria .BoxImagem {
    margin-bottom: 10px;
}

.BoxCategoria .BoxImagem img {
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;

    display: inline-block;
    overflow: hidden;

    border: 3px solid #DBB666;
    background: #FFF;
}

/* ------------- */

.BoxCategoria .ExtTitulo {
    margin: 0px;
    padding: 0px;

    display: block;
    overflow: hidden;

    text-align: center;
    vertical-align: middle;

    height: 36px;
    line-height: 36px;

    font-family: 'hinted-NewsGothicBT-Bold';
    font-size: 30px;
    color: #000;
    font-weight: normal;
}

.BoxCategoria .ExtTitulo a {
    font-family: 'hinted-NewsGothicBT-Bold';
    font-size: 30px;
    color: #000;
    font-weight: normal;

    display: block;
    text-decoration: none !important;
}

/* ------------- */

@media screen and (max-width: 1080px) {

    /* ------------- */

    .BoxCategoria .ExtTitulo {
        height: 26px;
        line-height: 26px;

        font-size: 22px;
    }

    .BoxCategoria .ExtTitulo a {
        font-size: 22px;
    }

    /* ------------- */

}

/* ------------- */

@media screen and (max-width: 767px) {

    /* ------------- */

    .BoxCategoria .ExtTitulo {
        height: 22px;
        line-height: 22px;

        font-size: 18px;
    }

    .BoxCategoria .ExtTitulo a {
        font-size: 18px;
    }

    /* ------------- */

}

/* ------------- */























/*
############
BoxDepoimento
############
*/
/*
Card de depoimento -- cartao com aspas em marca d'agua.

As classes internas (BoxImagem, ExtText1, ExtText2) tem nomes
compartilhados com outros cards do site, entao TODAS as regras
aqui ficam escopadas por .BoxDepoimento.

O card precisa aguentar dois casos reais do banco: texto muito
curto ("Obrigada", 8 caracteres) e consultor sem foto.
*/
.BoxDepoimento {
    display: flex;
    flex-direction: column;

    text-align: left;

    margin: 0px;
    padding: 24px 22px 20px;

    width: auto;
    height: 100%;

    position: relative;

    background: #FFF;

    -webkit-border-radius: 16px;
    -moz-border-radius: 16px;
    border-radius: 16px;

    border: 1px solid rgba(0, 0, 0, 0.08);

    -webkit-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.04), 0px 8px 24px -18px rgba(0, 0, 0, 0.3);
    box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.04), 0px 8px 24px -18px rgba(0, 0, 0, 0.3);

    -webkit-transition: border-color 0.22s ease-out, box-shadow 0.22s ease-out;
    transition: border-color 0.22s ease-out, box-shadow 0.22s ease-out;
}

.BoxDepoimento:hover {
    border-color: rgba(253, 152, 2, 0.5);

    -webkit-box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.05), 0px 16px 32px -20px rgba(0, 0, 0, 0.35);
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.05), 0px 16px 32px -20px rgba(0, 0, 0, 0.35);
}

/* ------------- */

/*
Aspas em marca d'agua -- diz "isto e uma citacao" sem ocupar
espaco util nem competir com o texto.
*/
.BoxDepoimento .ExtAspas {
    position: absolute;
    top: 12px;
    right: 18px;

    font-family: Georgia, "Times New Roman", serif;
    font-size: 56px;
    line-height: 1;
    color: var(--base1);

    opacity: 0.18;

    pointer-events: none;
}

/* ------------- */

.BoxDepoimento .ExtNota {
    font-size: 13px;
    color: #EC971F;

    letter-spacing: 2px;
    line-height: normal;

    margin-bottom: 10px;

    position: relative;
    z-index: 1;
}

/* ------------- */

/*
Altura fixa de 3 linhas (nao max-height): os depoimentos variam
de 8 a 300 caracteres, e sem altura fixa os cartoes da mesma
linha do slider ficariam desalinhados.
*/
.BoxDepoimento .ExtText2 {
    font-size: 15px;
    color: var(--base-texto);
    font-weight: normal;

    line-height: 24px;
    height: 72px;

    display: block;
    overflow: hidden;

    margin-bottom: 20px;

    position: relative;
    z-index: 1;
}

/* ------------- */

/* Autor no rodape do cartao, separado por um filete */
.BoxDepoimento .BlcAutor {
    margin-top: auto;
    padding-top: 16px;

    display: flex;
    align-items: center;

    border-top: 1px solid rgba(0, 0, 0, 0.08);
}

/* ------------- */

.BoxDepoimento .BoxImagem {
    width: 46px;
    height: 46px;

    margin-right: 12px;

    flex: 0 0 auto;

    text-align: center;
    position: relative;
    overflow: hidden;

    /* fundo neutro: ha consultor sem foto cadastrada */
    background: #E5E7EB;

    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
}

.BoxDepoimento .BoxImagem a {
    display: block;

    width: 100%;
    height: 100%;
}

.BoxDepoimento .BoxImagem img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    display: block;
    overflow: hidden;

    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;

    border: none;
    box-shadow: none;

    /*
    Esconde o texto do alt quando a foto nao carrega (ha consultor
    sem foto cadastrada) -- fica so o circulo cinza do BoxImagem.
    */
    color: transparent;
    font-size: 0px;
    text-indent: -9999px;
}

/* ------------- */

.BoxDepoimento .ExtText1 {
    min-width: 0px;
    flex: 1 1 auto;

    margin: 0px;
    padding: 0px;

    border: none;

    font-size: 13px;
    color: var(--base-texto2);
    font-weight: normal;

    display: block;
}

.BoxDepoimento .ExtText1 .IntNome {
    font-size: 14px;
    color: var(--base-texto);
    font-weight: bold;

    line-height: 18px;

    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.BoxDepoimento .ExtText1 .IntSobre {
    font-size: 12px;
    color: var(--base-texto2);
    font-weight: normal;

    line-height: 16px;

    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.BoxDepoimento .ExtText1 a {
    font-size: 12px;
    color: var(--base-texto);
    font-weight: bold;

    display: inline;

    text-decoration: none;

    -webkit-transition: color 0.18s ease-out;
    transition: color 0.18s ease-out;
}

.BoxDepoimento .ExtText1 a:hover,
.BoxDepoimento .ExtText1 a:focus {
    color: #C26A00;
}

/* ------------- */

@media screen and (max-width: 767px) {

    /* ------------- */

    .BoxDepoimento {
        padding: 20px 18px 18px;
    }

    .BoxDepoimento .ExtAspas {
        font-size: 46px;
    }

    .BoxDepoimento .ExtText2 {
        font-size: 14px;

        line-height: 22px;
        height: 66px;

        margin-bottom: 16px;
    }

    /* ------------- */

}

/* ------------- */

@media (prefers-reduced-motion: reduce) {

    /* ------------- */

    .BoxDepoimento,
    .BoxDepoimento .ExtText1 a {
        -webkit-transition: none;
        transition: none;
    }

    /* ------------- */

}

/* ------------- */






















/*
############
BoxDepoimentoLista -- grade da pagina /depoimentos/
############

Cartoes em grade, no lugar da lista de uma coluna que havia antes.
Motivo vindo dos dados: dos 1769 depoimentos ativos, 1086 (61%)
tem 40 caracteres ou menos ("AMO", "10", "Obrigada") e a media e
de 46. Em lista de largura total cada um desses virava uma linha
solta perdida num bloco vazio; no cartao o texto curto le como
citacao.

Todas as regras ficam escopadas em .BoxDepoimentoLista. As classes
internas repetem nomes usados por outros cards do site, entao o
escopo e o que impede vazamento -- mesmo cuidado tomado no card do
blog e no da home.
*/

.GradeDepoimentos {
    display: flex;
    flex-wrap: wrap;

    margin: 0px -12px;
}

.GradeDepoimentos .ColDepoimento {
    width: 33.333%;

    display: flex;

    padding: 0px 12px;
    margin-bottom: 24px;
}

/* ------------- */

.BoxDepoimentoLista {
    display: flex;
    flex-direction: column;

    text-align: left;

    width: 100%;
    height: 100%;

    margin: 0px;
    padding: 24px 22px 20px;

    position: relative;

    background: #FFF;

    -webkit-border-radius: 16px;
    -moz-border-radius: 16px;
    border-radius: 16px;

    border: 1px solid rgba(0, 0, 0, 0.08);

    -webkit-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.04), 0px 8px 24px -18px rgba(0, 0, 0, 0.3);
    box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.04), 0px 8px 24px -18px rgba(0, 0, 0, 0.3);

    -webkit-transition: border-color 0.22s ease-out, box-shadow 0.22s ease-out;
    transition: border-color 0.22s ease-out, box-shadow 0.22s ease-out;
}

.BoxDepoimentoLista:hover {
    border-color: rgba(253, 152, 2, 0.5);

    -webkit-box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.05), 0px 16px 32px -20px rgba(0, 0, 0, 0.35);
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.05), 0px 16px 32px -20px rgba(0, 0, 0, 0.35);
}

/* ------------- */

/*
Aspas em marca d'agua -- sinalizam a citacao sem ocupar espaco util.
Mesmo tratamento do card da home.
*/
.BoxDepoimentoLista .ExtAspas {
    position: absolute;
    top: 12px;
    right: 18px;

    font-family: Georgia, "Times New Roman", serif;
    font-size: 56px;
    line-height: 1;
    color: var(--base1);

    opacity: 0.18;

    pointer-events: none;
}

/* ------------- */

.BoxDepoimentoLista .ExtNota {
    font-size: 13px;
    color: #EC971F;

    letter-spacing: 2px;
    line-height: normal;

    margin-bottom: 10px;

    position: relative;
    z-index: 1;
}

/* ------------- */

.BoxDepoimentoLista .ExtTitulo {
    font-size: 16px;
    font-weight: bold;
    color: var(--base-texto);

    line-height: 22px;

    margin-bottom: 8px;

    position: relative;
    z-index: 1;
}

/* ------------- */

/*
Altura fixa de 4 linhas (nao max-height): sem ela os cartoes da
mesma linha ficam desalinhados, porque os textos variam de 0 a 523
caracteres. Quem tiver texto maior e cortado pelo overflow.

Padding-right abre espaco para as aspas, que sao absolute no canto
superior direito e senao encostariam na primeira linha.
*/
.BoxDepoimentoLista .ExtTexto {
    font-size: 15px;
    color: var(--base-texto);
    font-weight: normal;

    line-height: 24px;
    height: 96px;

    display: block;
    overflow: hidden;

    padding-right: 30px;
    margin-bottom: 20px;

    word-wrap: break-word;
    overflow-wrap: break-word;

    position: relative;
    z-index: 1;
}

/* ------------- */

.BoxDepoimentoLista .BoxResposta {
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;

    padding: 12px 14px;
    margin-bottom: 20px;

    background: var(--base-fundo2);

    border-left: 3px solid var(--base1);

    position: relative;
    z-index: 1;
}

.BoxDepoimentoLista .ExtResp1 {
    font-size: 12px;
    color: var(--base-texto2);
    font-weight: bold;

    text-transform: uppercase;
    letter-spacing: 0.5px;

    margin-bottom: 4px;
}

.BoxDepoimentoLista .ExtResp2 {
    font-size: 14px;
    color: var(--base-texto);

    line-height: 21px;
}

/* ------------- */

/* Autor no rodape do cartao, separado por um filete */
.BoxDepoimentoLista .BlcAutor {
    margin-top: auto;
    padding-top: 16px;

    display: flex;
    align-items: center;

    border-top: 1px solid rgba(0, 0, 0, 0.08);
}

/* ------------- */

.BoxDepoimentoLista .BoxImagem {
    width: 46px;
    height: 46px;

    margin-right: 12px;

    flex: 0 0 auto;

    text-align: center;
    position: relative;
    overflow: hidden;

    /* fundo neutro: ha consultor sem foto cadastrada */
    background: #E5E7EB;

    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
}

.BoxDepoimentoLista .BoxImagem a {
    display: block;

    width: 100%;
    height: 100%;
}

.BoxDepoimentoLista .BoxImagem img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    display: block;
    overflow: hidden;

    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;

    border: none;
    box-shadow: none;

    /*
    Esconde o texto do alt quando a foto nao carrega (ha consultor
    sem foto cadastrada) -- fica so o circulo cinza do BoxImagem.
    */
    color: transparent;
    font-size: 0px;
    text-indent: -9999px;
}

/* ------------- */

.BoxDepoimentoLista .ExtAutor {
    min-width: 0px;
    flex: 1 1 auto;

    margin: 0px;
    padding: 0px;
}

.BoxDepoimentoLista .ExtAutor .IntNome {
    font-size: 14px;
    font-weight: bold;
    color: var(--base-texto);

    line-height: 18px;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.BoxDepoimentoLista .ExtAutor .IntSobre {
    font-size: 12px;
    color: var(--base-texto2);

    line-height: 17px;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/*
Laranja puro sobre branco da 2.02:1 e reprova WCAG AA. O link do
consultor usa o cinza-escuro do texto e so ganha cor no hover,
onde o sublinhado ja identifica a acao.
*/
.BoxDepoimentoLista .ExtAutor .IntSobre a {
    color: var(--base-texto);
    font-weight: bold;

    text-decoration: none;
}

.BoxDepoimentoLista .ExtAutor .IntSobre a:hover,
.BoxDepoimentoLista .ExtAutor .IntSobre a:focus {
    color: #C26A00;

    text-decoration: underline;
}

/* ------------- */

.BoxDepoimentoLista .ExtData {
    font-size: 12px;
    color: var(--base-texto2);

    margin-left: 10px;

    flex: 0 0 auto;
    white-space: nowrap;
}

/* ------------- */

.BoxTotalDepoimentos {
    font-size: 14px;
    color: var(--base-texto2);

    margin-bottom: 24px;
}

/* ------------- */

@media (max-width: 991px) {

    .GradeDepoimentos .ColDepoimento {
        width: 50%;
    }

}

@media (max-width: 767px) {

    .GradeDepoimentos .ColDepoimento {
        width: 100%;
    }

    .BoxDepoimentoLista {
        padding: 20px 18px 18px;
    }

    .BoxDepoimentoLista .ExtAspas {
        font-size: 44px;
    }

    /*
    No celular o cartao ocupa a largura toda e nao divide linha com
    outro, entao nao ha o que alinhar: a altura fixa so criaria
    espaco vazio nos textos curtos, que sao a maioria.
    */
    .BoxDepoimentoLista .ExtTexto {
        height: auto;
    }

    /*
    A data sai do rodape no celular: junto do nome e do "sobre
    Fulano" ela espremia o nome ate o ellipsis comer o texto.
    */
    .BoxDepoimentoLista .ExtData {
        display: none;
    }

}

/*
############
BoxDepoimento2
############
*/

/*
Cartao de depoimento dentro do perfil do atendente.

Segue o mesmo desenho do cartao da pagina /depoimentos/
(.BoxDepoimentoLista) -- cantos de 16px, borda sutil, aspas em
marca d'agua -- mas continua com classe propria porque aqui ele
vive numa coluna estreita, e nao numa grade de largura total.
*/

.BoxDepoimento2 {
    background: #FFF;
    border: 1px solid rgba(0, 0, 0, 0.08);

    /*
    Coluna flex para o rodape (nome + data) encostar na base do
    cartao mesmo quando os depoimentos tem tamanhos diferentes --
    numa grade de duas colunas isso fica visivel.
    */
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    position: relative;

    text-align: left;

    margin: 0px 0px 16px 0px;
    padding: 20px 20px 16px 20px;

    -webkit-border-radius: 16px;
    -moz-border-radius: 16px;
    border-radius: 16px;

    -webkit-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.04), 0px 8px 24px -18px rgba(0, 0, 0, 0.3);
    box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.04), 0px 8px 24px -18px rgba(0, 0, 0, 0.3);

    -webkit-transition: border-color 0.22s ease-out, box-shadow 0.22s ease-out;
    transition: border-color 0.22s ease-out, box-shadow 0.22s ease-out;
}

.BoxDepoimento2:hover {
    border-color: rgba(253, 152, 2, 0.5);

    -webkit-box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.05), 0px 16px 32px -20px rgba(0, 0, 0, 0.35);
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.05), 0px 16px 32px -20px rgba(0, 0, 0, 0.35);
}

/* ------------- */

/*
Aspas em marca d'agua -- sinalizam a citacao sem ocupar espaco util.
*/

.BoxDepoimento2 .ExtAspas {
    color: rgba(253, 152, 2, 0.22);

    display: block;
    position: absolute;
    right: 16px;
    top: 4px;

    font-family: Georgia, "Times New Roman", serif;
    font-size: 62px;
    line-height: 1;

    pointer-events: none;
    user-select: none;
}

/* ------------- */

.BoxDepoimento2 .ExtNota {
    margin: 0px 0px 9px 0px;

    font-size: 14px;
    line-height: 18px;
}

.BoxDepoimento2 .ExtNota .fa-star,
.BoxDepoimento2 .ExtNota .fa-star-o {
    color: #EC971F;
}

.BoxDepoimento2 .ExtTitulo {
    font-size: 16px;
    font-weight: 700;
    color: var(--base-texto);
    line-height: 22px;

    margin: 0px 0px 7px 0px;
}

.BoxDepoimento2 .ExtTexto {
    font-size: 15px;
    color: var(--base-texto);
    line-height: 23px;

    margin: 0px 0px 14px 0px;
}

/* ------------- */

.BoxDepoimento2 .BoxResposta {
    background: var(--base-fundo2);
    border-left: 3px solid var(--base1);

    margin: 0px 0px 14px 0px;
    padding: 12px 14px;

    -webkit-border-radius: 0px 10px 10px 0px;
    -moz-border-radius: 0px 10px 10px 0px;
    border-radius: 0px 10px 10px 0px;
}

.BoxDepoimento2 .ExtResp1 {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--base-texto2);
    line-height: 16px;

    margin: 0px 0px 5px 0px;
}

.BoxDepoimento2 .ExtResp2 {
    font-size: 14px;
    color: var(--base-texto);
    line-height: 21px;
}

/* ------------- */

/*
Rodape do cartao: quem escreveu e quando.
*/

.BoxDepoimento2 .BlcAutor {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;

    gap: 8px;

    /* margin-top:auto empurra o rodape para a base do cartao */
    margin: auto 0px 0px 0px;
    padding: 12px 0px 0px 0px;

    border-top: 1px solid rgba(0, 0, 0, 0.07);
}

.BoxDepoimento2 .ExtAutor {
    min-width: 0px;
}

.BoxDepoimento2 .ExtAutor .IntNome {
    font-size: 14px;
    font-weight: 700;
    color: var(--base-texto);
    line-height: 19px;
}

.BoxDepoimento2 .ExtData {
    -ms-flex-negative: 0;
    flex-shrink: 0;

    font-size: 12px;
    color: var(--base-texto2);
    line-height: 17px;
}

/* ------------- */



































/*
############
BoxProdutoB
############
*/
.BoxProdutoB {
    display: block;
    position: relative;

    text-align: center;

    margin: 0px auto;
    padding: 0px;

    max-width: 350px;

    -webkit-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}

/* ------------- */

.BoxProdutoB .BoxImagem {
    margin-bottom: 10px;
}

.BoxProdutoB .BoxImagem img {}

/* ------------- */

.BoxProdutoB .ExtTitulo {
    margin: 0px;
    padding: 0px;
    margin-bottom: 10px;

    display: block;
    position: relative;

    text-align: center;
    vertical-align: middle;


    font-size: 24px;
    color: #5b8099;
    font-weight: normal;
}

.BoxProdutoB .ExtTitulo div {

    font-size: 24px;
    color: #5b8099;
    font-weight: normal;

    display: block;
    overflow: hidden;

    height: 35px;
    line-height: 35px;
}

/* ------------- */

.BoxProdutoB .ExtText1 {
    font-size: 12px;
    color: #666666;
    font-weight: normal;

    line-height: 20px;
    height: 80px;

    display: block;
    overflow: hidden;

    margin-bottom: 10px;
}

.BoxProdutoB .ExtText2 {
    font-size: 23px;
    color: #783dca;
    font-weight: normal;
}

.BoxProdutoB .ExtText3 {
    font-size: 12px;
    color: #898989;
    font-weight: normal;

    margin-bottom: 10px;
}

/* ------------- */

.BoxProdutoB .btn {
    margin-bottom: 10px;
    width: 100%;
}

.BoxProdutoB .btn.last {
    margin-bottom: 0px;
}

/* ------------- */

















/*
############
BoxHoroscopo
############
*/
.BoxHoroscopo {
    display: block;
    position: relative;

    text-align: center;
}

/* ------------- */

.BoxHoroscopo .BoxImagem {
    margin-bottom: 10px;
}

.BoxHoroscopo .BoxImagem img {}

/* ------------- */

.BoxHoroscopo .ExtTitulo {
    margin: 0px;
    padding: 0px;

    display: block;
    position: relative;

    text-align: center;
    vertical-align: middle;

    font-size: 16px;
    color: var(--base1);
    font-weight: bold;
}

.BoxHoroscopo .ExtTitulo a {
    font-size: 16px;
    color: var(--base1);
    font-weight: bold;

    display: block;
    overflow: hidden;

    height: 20px;
    line-height: 20px;
}

/* ------------- */

.BoxHoroscopo.inverter .ExtTitulo,
.BoxHoroscopo.inverter .ExtTitulo a {
    color: #FFF;
}

/* ------------- */

@media screen and (max-width: 767px) {

    /* ------------- */

    .BoxHoroscopo .ExtTitulo {
        font-size: 14px;
    }

    .BoxHoroscopo .ExtTitulo a {
        font-size: 14px;

        height: 20px;
        line-height: 20px;
    }

    /* ------------- */

}

/* ------------- */


























/*
############
BoxGer1
############
*/
.BoxGer1 {
    display: block;
    position: relative;

    text-align: center;

    margin: 0px auto;
    padding: 0px;

    max-width: 264px;

    -webkit-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}

/* ------------- */

.BoxGer1 .BoxImagem {
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;

    border: 2px solid var(--base1);
    -webkit-box-shadow: 0px 0px 8px 5px rgba(0, 0, 0, 0.15);
    box-shadow: 0px 0px 8px 5px rgba(0, 0, 0, 0.15);

    margin-bottom: 10px;
}

.BoxGer1 .BoxImagem img {}

/* ------------- */

.BoxGer1 .ExtTitulo {
    margin: 0px;
    padding: 0px;
    margin-bottom: 10px;

    display: block;
    position: relative;

    text-align: center;
    vertical-align: middle;

    font-size: 16px;
    color: var(--base1);
    font-weight: bold;
}

.BoxGer1 .ExtTitulo a {
    font-size: 16px;
    color: var(--base1);
    font-weight: bold;

    display: block;
    overflow: hidden;

    height: 40px;
    line-height: 20px;
}

/* ------------- */

.BoxGer1 .ExtText1 {
    font-size: 12px;
    color: #666666;
    font-weight: normal;

    line-height: 18px;
    height: 72px;

    display: block;
    overflow: hidden;

    margin-bottom: 10px;
}

.BoxGer1 .ExtText2 {
    font-size: 23px;
    color: var(--base1);
    font-weight: bold;

    margin-bottom: 10px;
}

.BoxGer1 .ExtText3 {
    font-size: 12px;
    color: #898989;
    font-weight: normal;

    margin-bottom: 10px;
}

/* ------------- */

.BoxGer1 .btn {
    margin-bottom: 10px;
    width: 100%;

    color: #FFF !important;
}

.BoxGer1 .btn.last {
    margin-bottom: 0px;
}

/* ------------- */

/*
############
BoxArtigo -- card do blog
############

Escopado em .BoxGer1.BoxArtigo de proposito: a classe BoxGer1
sozinha e compartilhada por quatro cards (Artigo, Produto, Video
e AtendenteArtigo). Reescrever .BoxGer1 mudaria os quatro; aqui
so o artigo recebe o layout novo.

O card precisa aguentar artigo SEM categoria -- ha registros com
o campo vazio no banco.
*/
.BoxGer1.BoxArtigo {
    display: flex;
    flex-direction: column;

    text-align: left;

    margin: 0px auto;
    padding: 0px;

    width: 100%;
    max-width: 275px;
    height: 100%;

    position: relative;

    background: #FFF;

    -webkit-border-radius: 16px;
    -moz-border-radius: 16px;
    border-radius: 16px;

    border: 1px solid rgba(0, 0, 0, 0.08);
    overflow: hidden;

    -webkit-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.04), 0px 8px 24px -16px rgba(0, 0, 0, 0.3);
    box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.04), 0px 8px 24px -16px rgba(0, 0, 0, 0.3);

    -webkit-transition: -webkit-transform 0.22s ease-out, box-shadow 0.22s ease-out, border-color 0.22s ease-out;
    transition: transform 0.22s ease-out, box-shadow 0.22s ease-out, border-color 0.22s ease-out;
}

.BoxGer1.BoxArtigo:hover {
    border-color: rgba(253, 152, 2, 0.5);

    -webkit-transform: translateY(-4px);
    transform: translateY(-4px);

    -webkit-box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.06), 0px 18px 36px -20px rgba(0, 0, 0, 0.4);
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.06), 0px 18px 36px -20px rgba(0, 0, 0, 0.4);
}

/* ------------- */

/* Imagem 16:9 -- proporcao de materia, nao de retrato */
.BoxGer1.BoxArtigo .BoxImagem {
    margin: 0px;
    padding: 0px;

    display: block;
    position: relative;
    overflow: hidden;

    background: #EEF0F3;

    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    border-radius: 0px;

    border: none;
    box-shadow: none;
}

.BoxGer1.BoxArtigo .BoxImagem a {
    display: block;

    padding-top: 62%;

    position: relative;
}

.BoxGer1.BoxArtigo .BoxImagem img {
    position: absolute;
    left: 0px;
    top: 0px;

    width: 100%;
    height: 100%;

    object-fit: cover;

    display: block;

    -webkit-transition: -webkit-transform 0.4s ease-out;
    transition: transform 0.4s ease-out;
}

.BoxGer1.BoxArtigo:hover .BoxImagem img {
    -webkit-transform: scale(1.05);
    transform: scale(1.05);
}

/* ------------- */

/* Etiqueta de categoria -- so aparece quando ha categoria */
.BoxGer1.BoxArtigo .BoxImagem .ExtCategoria {
    position: absolute;
    left: 10px;
    top: 10px;
    z-index: 2;

    margin: 0px;
    padding: 5px 10px;

    -webkit-border-radius: 99px;
    -moz-border-radius: 99px;
    border-radius: 99px;

    background: var(--base1);

    font-size: 11px;
    color: var(--base1-texto);
    font-weight: bold;
    line-height: normal;
    letter-spacing: 0.03em;

    text-align: left;

    -webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.18);
    box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.18);
}

/* ------------- */

.BoxGer1.BoxArtigo .BoxCorpo {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;

    margin: 0px;
    padding: 16px 16px 18px;
}

/* ------------- */

.BoxGer1.BoxArtigo .ExtData {
    font-size: 11px;
    color: var(--base-texto2);
    font-weight: normal;

    line-height: normal;

    margin-bottom: 8px;

    text-align: left;
}

/* ------------- */

/*
Titulo em cinza-escuro, nao no laranja da marca: laranja sobre
branco da 2.02:1 e reprova o WCAG AA.
*/
.BoxGer1.BoxArtigo .ExtTitulo {
    margin: 0px 0px 10px;
    padding: 0px;

    display: block;
    position: static;

    text-align: left;

    font-size: 16px;
    color: var(--base-texto);
    font-weight: bold;
}

.BoxGer1.BoxArtigo .ExtTitulo a {
    font-size: 16px;
    color: var(--base-texto);
    font-weight: bold;

    display: block;
    overflow: hidden;

    /* 3 linhas, para o titulo nao cortar no meio de uma palavra */
    height: 66px;
    line-height: 22px;

    text-decoration: none;

    -webkit-transition: color 0.18s ease-out;
    transition: color 0.18s ease-out;
}

.BoxGer1.BoxArtigo:hover .ExtTitulo a {
    color: #C26A00;
}

/* ------------- */

.BoxGer1.BoxArtigo .ExtText1 {
    font-size: 13px;
    color: var(--base-texto2);
    font-weight: normal;

    line-height: 20px;
    height: 60px;

    display: block;
    overflow: hidden;

    margin-bottom: 16px;

    text-align: left;
}

/* ------------- */

.BoxGer1.BoxArtigo .btn {
    margin: auto 0px 0px;
    padding: 10px;

    width: 100%;
    height: auto;

    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;

    -webkit-border-radius: 9px;
    -moz-border-radius: 9px;
    border-radius: 9px;

    font-size: 13px;
    font-weight: bold;
    line-height: normal;

    display: block;
    text-align: center;

    background: var(--base1) !important;
    color: var(--base1-texto) !important;
    border: 1px solid transparent;

    text-decoration: none !important;

    -webkit-transition: background 0.18s ease-out;
    transition: background 0.18s ease-out;
}

.BoxGer1.BoxArtigo .btn:hover,
.BoxGer1.BoxArtigo .btn:focus {
    background: var(--base1-hover) !important;
    color: var(--base1-texto) !important;
}

.BoxGer1.BoxArtigo .btn:focus {
    outline: 2px solid var(--base1);
    outline-offset: 2px;
}

/* ------------- */

@media screen and (max-width: 767px) {

    /* ------------- */

    .BoxGer1.BoxArtigo {
        max-width: 320px;
    }

    .BoxGer1.BoxArtigo .BoxCorpo {
        padding: 14px 14px 16px;
    }

    .BoxGer1.BoxArtigo .ExtTitulo,
    .BoxGer1.BoxArtigo .ExtTitulo a {
        font-size: 15px;
    }

    .BoxGer1.BoxArtigo .ExtTitulo a {
        height: 63px;
        line-height: 21px;
    }

    /* ------------- */

}

/* ------------- */

@media (prefers-reduced-motion: reduce) {

    /* ------------- */

    .BoxGer1.BoxArtigo,
    .BoxGer1.BoxArtigo .ExtTitulo a,
    .BoxGer1.BoxArtigo .BoxImagem img {
        -webkit-transition: none;
        transition: none;
    }

    .BoxGer1.BoxArtigo:hover,
    .BoxGer1.BoxArtigo:hover .BoxImagem img {
        -webkit-transform: none;
        transform: none;
    }

    /* ------------- */

}

/* ------------- */

















/*
############
BoxRating1
############
*/
.BoxRating1 .fa {
    color: #FFD500;
    font-size: 24px;
}

/* ------------- */














/*
############
SlickTheme0
############
*/
.SlickTheme0 {
    margin: 0px;
}

/* ------------- */

.SlickTheme0 .BoxSlickBox {
    padding: 0px 10px;
}

/* ------------- */




















/*
################
## SlickTheme1
################
*/
.SlickTheme1 {
    margin: 0px !important;
}

/* ------------- */

.SlickTheme1 .BoxSlickBox {
    padding: 0px 10px;
}

/* ------------- */

.SlickTheme1 .slick-prev,
.SlickTheme1 .slick-next {
    background: url('') no-repeat center center;

    display: block;
    width: 16px;
}

.SlickTheme1 .slick-prev {
    left: -16px;
}

.SlickTheme1 .slick-next {
    right: -16px;
}

.SlickTheme1 .slick-prev:before,
.SlickTheme1 .slick-next:before {
    content: '\f106';

    font-family: 'fontawesome';
    font-size: 30px;
    color: #000;

    line-height: 12px;
    height: 14px;
    display: block;
}

.SlickTheme1 .slick-prev:before {
    content: '\f104';
}

.SlickTheme1 .slick-next:before {
    content: '\f105';
}

/* ------------- */

@media screen and (max-width: 1220px) {

    /* ------------- */

    .SlickTheme1 {
        margin: 0px 10px !important;
    }

    /* ------------- */

}

/* ------------- */

@media screen and (max-width: 767px) {

    /* ------------- */

    .SlickTheme1 {
        margin: 0px 10px !important;
    }

    /* ------------- */

    .SlickTheme1 .BoxSlickBox {
        padding: 0px 10px;
    }

    /* ------------- */

    .SlickTheme1 .slick-prev,
    .SlickTheme1 .slick-next {
        width: 10px;
    }

    .SlickTheme1 .slick-prev {
        left: -10px;
    }

    .SlickTheme1 .slick-next {
        right: -10px;
    }

    .SlickTheme1 .slick-prev:before,
    .SlickTheme1 .slick-next:before {
        font-size: 18px;
    }

    /* ------------- */

}

/* ------------- */






































/*
############
CapaBanner1
############
*/
.CapaBanner1 {
    padding: 20px 0px 0px;
    margin: 0px;

    display: block;
    position: relative;
}

/* ------------- */

@media screen and (max-width: 767px) {

    /* ------------- */

    .CapaBanner1 {
        padding: 0px;
    }

    /* ------------- */

}

/* ------------- */











/*
############
Capa1
############
*/
.Capa1 {
    padding: 50px 0px;
    margin: 0px;

    display: block;
    position: relative;
}

/* ------------- */

.Capa1.Fundo1 {
    background: url('/imagens/Geral/Fundo1.jpg') no-repeat center center;
    background-size: cover;
}

.Capa1.Fundo2 {
    background: url('/imagens/Geral/Fundo2.jpg') no-repeat center center;
    background-size: cover;
}

.Capa1.Fundo3 {
    background: url('/imagens/Geral/Fundo3.jpg') no-repeat center center;
    background-size: cover;
}

.Capa1.Fundo4 {
    background: url('/imagens/Geral/Fundo4.jpg') no-repeat center center;
    background-size: cover;
}

.Capa1.Fundo5 {
    background: url('/imagens/Geral/Fundo5.jpg') no-repeat center center;
    background-size: cover;
}

.Capa1.Fundo6 {
    background: url('/imagens/Geral/Fundo6.jpg') no-repeat center center;
    background-size: cover;
}

.Capa1.Fundo7 {
    background: url('/imagens/Geral/Fundo7.jpg') no-repeat center center;
    background-size: cover;
}

.Capa1.Fundo8 {
    background: url('/imagens/Geral/Fundo8.jpg') no-repeat center center;
    background-size: cover;
}

/* ------------- */

.Capa1.Linha1 {
    margin-bottom: 3px;
}

.Capa1.Linha1:before {
    position: absolute;
    left: 0px;
    bottom: -3px;

    display: block;
    content: "'";
    width: 100%;
    height: 3px;

    background: url('/imagens/Geral/linha1.jpg') repeat center center;
}

.Capa1.Linha2 {
    margin-bottom: 3px;
}

.Capa1.Linha2:before {
    position: absolute;
    left: 0px;
    bottom: -3px;

    display: block;
    content: "'";
    width: 100%;
    height: 3px;

    background: url('/imagens/Geral/linha2.jpg') repeat center center;
}

/* ------------- */

.Capa1 .ExtBtn1 {
    text-align: center;
    margin-top: 30px;
}

.Capa1 .ExtBtn2 {
    text-align: center;
    margin-top: 50px;
}

/* ------------- */

@media screen and (max-width: 767px) {

    /* ------------- */

    .Capa1 {
        padding: 40px 0px;
    }

    /* ------------- */

    .Capa1 .ExtBtn1 {
        margin-top: 20px;
    }

    .Capa1 .ExtBtn2 {
        margin-top: 40px;
    }

    /* ------------- */

}

/* ------------- */
















/*
############
Capa2
############
*/
/*
Secao "Como se Consultar" -- trilha numerada.

Os tres passos formam uma SEQUENCIA: o numero em circulo laranja
e a ancora visual, e a linha tracejada entre eles mostra o
percurso. Antes o "1 -", "2 -", "3 -" ficava preso no texto do
titulo e nada indicava ordem.

As classes sao proprias da secao (BlcPassos / IntPasso / Int*).
NAO reutiliza BtnInt1, BoxImagem nem ExtTitulo: essas sao
compartilhadas -- BtnInt1 e o botao de enviar do chat
(AttCliente_Includes/css.css) e BoxImagem e usada por
BoxAtendente, BoxDepoimento, BoxProduto e outros.
*/
.Capa2 {
    background: #131313;
    background:
        radial-gradient(ellipse closest-side at 15% 0%, rgba(253, 152, 2, 0.10) 0%, rgba(253, 152, 2, 0) 100%),
        radial-gradient(ellipse closest-side at 85% 100%, rgba(0, 57, 100, 0.16) 0%, rgba(0, 57, 100, 0) 100%),
        linear-gradient(to bottom, #1A1A1A 0%, #101010 100%);
}

/* ------------- */

.Capa2 .BlcPassos {
    display: flex;
    align-items: flex-start;

    margin: 0px;
    padding: 0px;

    position: relative;
}

/* ------------- */

.Capa2 .IntPasso {
    flex: 1 1 0px;

    margin: 0px;
    padding: 0px 22px;

    min-width: 0px;

    text-align: center;

    display: block;
    position: relative;

    text-decoration: none !important;
}

/*
Linha tracejada que liga um passo ao proximo. Nasce a direita do
circulo e morre a esquerda do circulo seguinte; nao aparece no
ultimo passo.
*/
.Capa2 .IntPasso:not(:last-child):before {
    content: "";

    position: absolute;
    top: 27px;
    left: calc(50% + 36px);
    right: calc(-50% + 36px);

    display: block;

    border-top: 2px dashed rgba(253, 152, 2, 0.32);
}

/* ------------- */

.Capa2 .IntPasso .IntNumero {
    width: 54px;
    height: 54px;

    margin: 0px auto 22px;
    padding: 0px;

    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;

    background: var(--base1);

    font-size: 20px;
    color: var(--base1-texto);
    font-weight: bold;
    line-height: 54px;

    text-align: center;

    display: block;
    position: relative;
    z-index: 2;

    -webkit-transition: -webkit-transform 0.22s ease-out, box-shadow 0.22s ease-out;
    transition: transform 0.22s ease-out, box-shadow 0.22s ease-out;
}

.Capa2 .IntPasso .IntIcone {
    height: 48px;

    margin: 0px 0px 16px;
    padding: 0px;

    display: flex;
    align-items: center;
    justify-content: center;

    /*
    O SVG herda esta cor via currentColor, o que permite anima-la
    no hover -- algo que o PNG branco nao permitia.
    */
    color: rgba(255, 255, 255, 0.82);

    -webkit-transition: color 0.22s ease-out;
    transition: color 0.22s ease-out;
}

.Capa2 .IntPasso .IntIcone svg {
    width: 48px;
    height: 48px;

    display: block;

    overflow: visible;
}

.Capa2 .IntPasso .IntTitulo {
    margin: 0px 0px 10px;
    padding: 0px;

    display: block;
    overflow: hidden;

    text-align: center;

    height: auto;
    line-height: 22px;

    font-size: 17px;
    color: #FFF;
    font-weight: bold;

    -webkit-transition: color 0.22s ease-out;
    transition: color 0.22s ease-out;
}

.Capa2 .IntPasso .IntTexto {
    margin: 0px;
    padding: 0px;

    font-size: 14px;
    color: rgba(255, 255, 255, 0.62);
    font-weight: normal;

    display: block;

    line-height: 22px;
}

/* ------------- */

.Capa2 .IntPasso:hover .IntNumero,
.Capa2 .IntPasso:focus .IntNumero {
    -webkit-transform: translateY(-4px);
    transform: translateY(-4px);

    -webkit-box-shadow: 0px 8px 22px -6px rgba(253, 152, 2, 0.55);
    box-shadow: 0px 8px 22px -6px rgba(253, 152, 2, 0.55);
}

.Capa2 .IntPasso:hover .IntTitulo,
.Capa2 .IntPasso:focus .IntTitulo {
    color: var(--base1);
}

.Capa2 .IntPasso:hover .IntIcone,
.Capa2 .IntPasso:focus .IntIcone {
    color: var(--base1);
}

.Capa2 .IntPasso:focus {
    outline: 2px solid var(--base1);
    outline-offset: 4px;
}

/* ------------- */

@media screen and (max-width: 991px) {

    /* ------------- */

    .Capa2 .IntPasso {
        padding: 0px 12px;
    }

    .Capa2 .IntPasso:not(:last-child):before {
        left: calc(50% + 32px);
        right: calc(-50% + 32px);
    }

    .Capa2 .IntPasso .IntTitulo {
        font-size: 16px;
    }

    .Capa2 .IntPasso .IntTexto {
        font-size: 13px;

        line-height: 20px;
    }

    /* ------------- */

}

/* ------------- */

@media screen and (max-width: 767px) {

    /* ------------- */

    /* Empilha os passos; a trilha passa a ser vertical */
    .Capa2 .BlcPassos {
        display: block;
    }

    .Capa2 .IntPasso {
        padding: 0px;
        margin-bottom: 34px;
    }

    .Capa2 .IntPasso:last-child {
        margin-bottom: 0px;
    }

    /*
    No mobile os passos ficam empilhados. A linha tracejada some:
    como o conteudo de cada passo e centralizado, uma linha
    vertical no meio atravessaria icone, titulo e texto.
    A propria numeracao ja indica a sequencia.
    */
    .Capa2 .IntPasso:not(:last-child):before {
        display: none;
    }

    .Capa2 .IntPasso .IntNumero {
        width: 46px;
        height: 46px;

        margin-bottom: 16px;

        font-size: 18px;
        line-height: 46px;
    }

    .Capa2 .IntPasso .IntIcone {
        height: 42px;

        margin-bottom: 14px;
    }

    .Capa2 .IntPasso .IntIcone svg {
        width: 42px;
        height: 42px;
    }

    .Capa2 .IntPasso .IntTitulo {
        margin-bottom: 8px;

        line-height: 20px;

        font-size: 16px;
    }

    .Capa2 .IntPasso .IntTexto {
        font-size: 13px;

        line-height: 20px;
    }

    /* ------------- */

}

/* ------------- */

@media (prefers-reduced-motion: reduce) {

    /* ------------- */

    .Capa2 .IntPasso .IntNumero,
    .Capa2 .IntPasso .IntTitulo,
    .Capa2 .IntPasso .IntIcone {
        -webkit-transition: none;
        transition: none;
    }

    .Capa2 .IntPasso:hover .IntNumero,
    .Capa2 .IntPasso:focus .IntNumero {
        -webkit-transform: none;
        transform: none;
    }

    /* ------------- */

}

/* ------------- */

















/*
############
Capa3
############
*/
.Capa3 {
    margin: 0px;
    padding: 120px 0px;

    position: relative;

    background: url('/imagens/Geral/Fundo4.jpg') no-repeat center top;
    background-size: cover;

    text-align: center;
}

/* ------------- */

.Capa3 .IntText1 {
    font-size: 32px;
    color: #2A2A2A;
    font-weight: bold;
    line-height: normal;

    margin-bottom: 10px;
}

.Capa3 .IntText2 {
    font-size: 22px;
    color: #2A2A2A;
    font-weight: normal;
    line-height: normal;

    margin-bottom: 50px;
}

/* ------------- */

.Capa3 .BoxNewsletter {
    width: 650px;

    margin: 0px auto;
}

.Capa3 .BoxNewsletter .SRow1 {
    margin: 0px;
    padding: 0px;
}

.Capa3 .BoxNewsletter .SRow1 .SRow1_Col {
    margin: 0px;
    padding: 0px;
}

.Capa3 .BoxNewsletter .SRow1 .SRow1_Col1 {
    width: calc(100% - 170px);
    padding-right: 20px;
}

.Capa3 .BoxNewsletter .SRow1 .SRow1_Col2 {
    width: 170px;
}

.Capa3 .BoxNewsletter .form-control {
    background: #FFF;
    border: 2px solid rgba(42, 42, 42, 0.3);

    font-size: 19px;
    color: #2A2A2A;
    font-weight: normal;

    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
    border-radius: 10px;

    width: 100%;
    height: 58px;
    line-height: 58px;

    padding: 0px 10px;
    margin: 0px;

    text-align: left;
    vertical-align: middle;
}

.Capa3 .BoxNewsletter .btn {
    background: #2A2A2A;
    border: 2px solid rgba(42, 42, 42, 0.3);

    font-size: 16px;
    color: #FFF;
    font-weight: bold;

    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
    border-radius: 10px;

    width: 100%;
    height: 58px;
    line-height: 58px;

    padding: 0px 10px;
    margin: 0px;

    text-align: center;
    vertical-align: middle;
}

.Capa3 .BoxNewsletter .btn:hover,
.Capa3 .BoxNewsletter .btn:active,
.Capa3 .BoxNewsletter .btn:focus {
    background: #000;
}

/* ------------- */

@media screen and (max-width: 767px) {

    /* ------------- */

    .Capa3 {
        padding: 60px 0px;
    }

    /* ------------- */

    .Capa3 .IntText1 {
        font-size: 20px;
        margin-bottom: 10px;
    }

    .Capa3 .IntText2 {

        margin-bottom: 40px;
    }

    /* ------------- */

    .Capa3 .BoxNewsletter {
        width: auto;
        max-width: 300px;
    }

    .Capa3 .BoxNewsletter .SRow1 .SRow1_Col1 {
        width: 100%;
        padding-right: 0px;
        margin-bottom: 10px;
    }

    .Capa3 .BoxNewsletter .SRow1 .SRow1_Col2 {
        width: 100%;
    }

    .Capa3 .BoxNewsletter .form-control {
        font-size: 14px;

        width: 100%;
        height: 46px;
        line-height: 46px;
    }

    .Capa3 .BoxNewsletter .btn {
        font-size: 14px;

        width: 100%;
        max-width: 150px;
        height: 46px;
        line-height: 46px;

        display: inline-block;
    }

    /* ------------- */

}

/* ------------- */















/*
############
Capa4
############
*/
.Capa4 {}

/* ------------- */

.Capa4 .BoxVideo {
    max-width: 800px;

    padding: 0px;
    margin: 0px auto;

    border: 2px solid rgba(0, 0, 0, 0.8);

    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    border-radius: 5px;

    display: block;
    overflow: hidden;
}

/* ------------- */

































/*
############
container_interno
############
*/
.container_interno {
    background: rgba(255, 255, 255, 0.9);
    padding: 20px;

    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
    border-radius: 10px;
}







/*
############
BlcFormPg -- formularios de pagina (Contato, Trabalhe Conosco)
############

Base compartilhada pelas duas paginas. Os ids e names dos campos
sao lidos pelo js.js (serialize / ajaxForm) e pelo Ajax.php,
entao a refatoracao mexeu so na estrutura visual em volta --
nenhum id, name ou classe funcional (CampoNumero, CampoData) foi
alterado.
*/
.BlcContato .IntCampo,
.BlcTrabalhe .IntCampo {
    margin: 0px 0px 18px;

    display: block;
    min-width: 0px;

    flex: 1 1 0px;
}

.BlcContato .IntCampo label,
.BlcTrabalhe .IntCampo label {
    display: block;

    margin: 0px 0px 6px;
    padding: 0px;

    font-size: 13px;
    color: var(--base-texto);
    font-weight: bold;

    line-height: normal;
}

.BlcContato .IntObrigatorio,
.BlcTrabalhe .IntObrigatorio {
    color: var(--base1);
    font-weight: bold;
}

.BlcContato .IntAjuda,
.BlcTrabalhe .IntAjuda {
    margin: -2px 0px 7px;

    font-size: 12px;
    color: var(--base-texto2);
    font-weight: normal;

    line-height: 1.5;
}

/* ------------- */

/*
Campos. O .form-control do Bootstrap usa content-box neste tema,
entao o border-box aqui e obrigatorio para o padding nao estourar
a largura.
*/
.BlcContato .form-control,
.BlcTrabalhe .form-control {
    width: 100%;
    height: auto;

    margin: 0px;
    padding: 11px 14px;

    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;

    -webkit-border-radius: 9px;
    -moz-border-radius: 9px;
    border-radius: 9px;

    font-size: 15px;
    color: var(--base-texto);
    font-weight: normal;
    line-height: 1.5;

    background: #FFF;
    border: 1px solid rgba(0, 0, 0, 0.16);

    box-shadow: none;

    -webkit-transition: border-color 0.18s ease-out, box-shadow 0.18s ease-out;
    transition: border-color 0.18s ease-out, box-shadow 0.18s ease-out;
}

.BlcContato textarea.form-control,
.BlcTrabalhe textarea.form-control {
    resize: vertical;
    min-height: 90px;
}

.BlcContato .form-control:focus,
.BlcTrabalhe .form-control:focus {
    border-color: var(--base1);

    -webkit-box-shadow: 0px 0px 0px 3px rgba(253, 152, 2, 0.22);
    box-shadow: 0px 0px 0px 3px rgba(253, 152, 2, 0.22);

    outline: none;
}

.BlcContato .form-control::-webkit-input-placeholder,
.BlcTrabalhe .form-control::-webkit-input-placeholder {
    color: #9CA3AF;
}

.BlcContato .form-control::-moz-placeholder,
.BlcTrabalhe .form-control::-moz-placeholder {
    color: #9CA3AF;
}

/* ------------- */

/* Dois campos lado a lado; empilham no mobile */
.BlcContato .IntLinha,
.BlcTrabalhe .IntLinha {
    display: flex;
    flex-wrap: wrap;

    margin: 0px -9px;
}

.BlcContato .IntLinha>.IntCampo,
.BlcTrabalhe .IntLinha>.IntCampo {
    padding: 0px 9px;

    flex: 1 1 220px;
}

/* ------------- */

.BlcContato .IntCaptcha,
.BlcTrabalhe .IntCaptcha {
    margin-bottom: 18px;
}

.BlcContato .IntAcoes,
.BlcTrabalhe .IntAcoes {
    margin: 0px;
    padding: 0px;
}

.BlcContato .BtnEnviar,
.BlcTrabalhe .BtnEnviar {
    margin: 0px;
    padding: 13px 30px;

    width: auto;
    height: auto;

    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;

    -webkit-border-radius: 9px;
    -moz-border-radius: 9px;
    border-radius: 9px;

    font-size: 15px;
    font-weight: bold;
    line-height: normal;

    background: var(--base1) !important;
    color: var(--base1-texto) !important;
    border: 1px solid transparent;

    display: inline-block;
    text-align: center;

    -webkit-transition: background 0.18s ease-out;
    transition: background 0.18s ease-out;
}

.BlcContato .BtnEnviar:hover,
.BlcContato .BtnEnviar:focus,
.BlcTrabalhe .BtnEnviar:hover,
.BlcTrabalhe .BtnEnviar:focus {
    background: var(--base1-hover) !important;
    color: var(--base1-texto) !important;
}

.BlcContato .BtnEnviar:focus,
.BlcTrabalhe .BtnEnviar:focus {
    outline: 2px solid var(--base1);
    outline-offset: 2px;
}







/*
############
BlcContato -- pagina de Contato
############
*/
/*
Grid de duas colunas em vez de flex: e o que permite ao painel da
lateral terminar exatamente na base do textarea.

Linha 1 = cabecalho do formulario.
Linha 2 = campos do formulario (termina na base do textarea).
Linha 3 = captcha e botao Enviar, so na coluna do formulario.

A lateral ocupa as linhas 1 e 2, entao termina exatamente onde o bloco
de campos termina -- ou seja, na base do textarea. O rodape do
formulario cai na linha 3, sozinho, sob a coluna do formulario.

.IntFormulario e o proprio <form> usam display:contents para que
.IntCabecalho, .IntCampos e .IntRodapeForm virem itens diretos do grid
e possam ser distribuidos entre as linhas.
*/
.BlcContato {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    grid-template-rows: auto 1fr auto;
    align-items: stretch;

    margin: 0px -14px;
    padding: 10px 0px;
}

.BlcContato .IntFormulario,
.BlcContato .IntFormulario form {
    display: contents;
}

.BlcContato .IntCabecalho {
    grid-column: 1;
    grid-row: 1;

    align-self: start;

    padding: 0px 14px;
}

/*
A linha 2 e a que define o alinhamento: o bloco de campos e a lateral
terminam juntos nela. Se a lateral for mais alta que os campos, o
textarea cresce para acompanhar (ver .IntCampos textarea abaixo).
*/
.BlcContato .IntCampos {
    grid-column: 1;
    grid-row: 2;

    min-width: 0px;

    padding: 0px 14px;

    display: flex;
    flex-direction: column;
}

/*
O campo Mensagem absorve a sobra de altura da linha, e o textarea
dentro dele acompanha -- e assim que a base do textarea encosta
exatamente na base do painel da lateral.
*/
.BlcContato .IntCampos>.IntCampo:last-child {
    /*
    Sem margem inferior: o bloco de campos termina exatamente na base do
    textarea. O respiro ate o captcha/botao e reposto no .IntRodapeForm.
    */
    margin-bottom: 0px;

    flex: 1 1 auto;

    display: flex;
    flex-direction: column;
}

.BlcContato .IntCampos>.IntCampo:last-child textarea.form-control {
    flex: 1 1 auto;
}

/*
Rodape do formulario. O padding-top repoe o respiro que saiu da margem
do ultimo campo, mantendo a distancia original ate o textarea.
*/
.BlcContato .IntRodapeForm {
    grid-column: 1;
    grid-row: 3;

    min-width: 0px;

    padding: 18px 14px 0px;
}

/* Ocupa as linhas 1 e 2 -- termina junto com o bloco de campos */
.BlcContato .IntLateral {
    grid-column: 2;
    grid-row: 1 / span 2;
    min-width: 0px;

    padding: 0px 14px;
    margin-bottom: 0px;

    display: flex;
    flex-direction: column;
}



/* ------------- */

.BlcContato .IntCabecalho {
    margin-bottom: 24px;
}

.BlcContato .IntTitulo {
    margin: 0px 0px 8px;
    padding: 0px;

    display: block;
    overflow: visible;

    font-size: 24px;
    color: var(--base-texto);
    font-weight: bold;
    line-height: 1.25;

    text-align: left;
}

.BlcContato .IntSubtitulo {
    font-size: 14px;
    color: var(--base-texto2);
    line-height: 1.6;
}

/* ------------- */

/*
Painel de contato direto -- um bloco escuro unico, no lugar dos
tres cartoes claros soltos que sobravam espaco na coluna.
O fundo escuro ecoa o rodape e da a lateral peso visual
compativel com o formulario ao lado.
*/
.BlcContato .IntPainel {
    margin: 0px;
    padding: 24px 22px;

    /*
    Estica junto com a coluna para terminar alinhado com a base do
    textarea. A sobra de altura e distribuida em cima e embaixo
    (justify-content: center), centralizando o conteudo verticalmente.
    */
    flex: 1 1 auto;

    display: flex;
    flex-direction: column;
    justify-content: center;

    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;

    -webkit-border-radius: 16px;
    -moz-border-radius: 16px;
    border-radius: 16px;

    background: #131313;
    background:
        radial-gradient(ellipse closest-side at 20% 0%, rgba(253, 152, 2, 0.14) 0%, rgba(253, 152, 2, 0) 100%),
        linear-gradient(to bottom, #1E1E1E 0%, #121212 100%);

    position: relative;
    overflow: hidden;
}

/*
Os blocos internos mantem a altura natural mesmo se o conteudo passar
da altura do painel -- sem isso o flex os comprimiria.
*/
.BlcContato .IntPainel>* {
    flex: 0 0 auto;
}

/* Fio laranja no topo do painel, assinando a marca */
.BlcContato .IntPainel:before {
    content: "";

    position: absolute;
    left: 0px;
    top: 0px;

    display: block;
    width: 100%;
    height: 3px;

    background: var(--base1);
    background: -webkit-linear-gradient(left, var(--base1) 0%, #FFC24D 45%, var(--base1) 100%);
    background: linear-gradient(to right, var(--base1) 0%, #FFC24D 45%, var(--base1) 100%);
}

/* ------------- */

.BlcContato .IntPainelTopo {
    margin-bottom: 20px;
    padding-bottom: 18px;

    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.BlcContato .IntPainelTitulo {
    margin: 0px 0px 6px;
    padding: 0px;

    display: block;
    overflow: visible;

    font-size: 19px;
    color: #FFF;
    font-weight: bold;
    line-height: 1.3;

    text-align: left;
}

.BlcContato .IntPainelTexto {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.6);

    line-height: 1.6;
}

/* ------------- */

/* Canais em lista, nao em cartoes -- menos ruido, mais densidade */
.BlcContato .IntCanais {
    margin: 0px;
    padding: 0px;

    list-style: none;
}

.BlcContato .IntCanais li {
    margin: 0px 0px 16px;
    padding: 0px;

    list-style: none;
    display: block;
}

.BlcContato .IntCanais li:last-child {
    margin-bottom: 0px;
}

.BlcContato .IntCanais .IntRotulo {
    display: block;

    margin-bottom: 4px;

    font-size: 11px;
    color: var(--base1);
    font-weight: bold;

    letter-spacing: 0.08em;
    text-transform: uppercase;
    line-height: normal;
}

.BlcContato .IntCanais .IntValor {
    display: block;

    font-size: 15px;
    color: #FFF;
    font-weight: normal;

    line-height: 1.5;
    word-wrap: break-word;
}

.BlcContato .IntCanais .IntValor a {
    color: #FFF;

    text-decoration: none;

    -webkit-transition: color 0.18s ease-out;
    transition: color 0.18s ease-out;
}

.BlcContato .IntCanais .IntValor a:hover,
.BlcContato .IntCanais .IntValor a:focus {
    color: var(--base1);
}

/* ------------- */

.BlcContato .IntWhatsapp {
    display: flex;
    align-items: center;
    justify-content: center;

    margin: 22px 0px 0px;
    padding: 13px 16px;

    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;

    background: var(--base-whatsapp);
    color: #FFF;

    font-size: 14px;
    font-weight: bold;
    line-height: normal;

    text-decoration: none !important;

    -webkit-transition: background 0.18s ease-out;
    transition: background 0.18s ease-out;
}

.BlcContato .IntWhatsapp svg {
    margin-right: 8px;

    flex: 0 0 auto;
}

.BlcContato .IntWhatsapp:hover,
.BlcContato .IntWhatsapp:focus {
    background: #1DA851;
    color: #FFF;
}

/* ------------- */







/*
############
BlcTrabalhe -- pagina Trabalhe Conosco
############
*/
.BlcTrabalhe {}

.BlcTrabalhe .IntIntro {
    margin-bottom: 28px;
    padding-bottom: 22px;

    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.BlcTrabalhe .IntTitulo {
    margin: 0px 0px 10px;
    padding: 0px;

    display: block;
    overflow: visible;

    font-size: 26px;
    color: var(--base-texto);
    font-weight: bold;
    line-height: 1.25;

    text-align: left;
}

.BlcTrabalhe .IntTexto {
    font-size: 15px;
    color: var(--base-texto2);

    line-height: 1.7;
}

/* ------------- */

/* Agrupa os campos por assunto, em vez de uma lista corrida */
.BlcTrabalhe .IntSecao {
    margin-bottom: 30px;
}

.BlcTrabalhe .IntSecaoTitulo {
    margin: 0px 0px 16px;
    padding: 0px 0px 10px;

    font-size: 12px;
    color: var(--base-texto2);
    font-weight: bold;

    letter-spacing: 0.08em;
    text-transform: uppercase;
    line-height: normal;

    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

/* ------------- */

@media screen and (max-width: 767px) {

    /* ------------- */

    /*
    No mobile some a coluna: tudo vira uma pilha unica, entao o
    alinhamento do painel com o textarea deixa de fazer sentido.
    */
    .BlcContato {
        grid-template-columns: 100%;
        grid-template-rows: auto auto auto auto;

        margin: 0px;
        padding: 0px;
    }

    .BlcContato .IntCabecalho,
    .BlcContato .IntCampos,
    .BlcContato .IntLateral {
        grid-column: 1;

        padding: 0px;
    }

    .BlcContato .IntCampos {
        grid-row: 2;
    }

    .BlcContato .IntRodapeForm {
        grid-column: 1;
        grid-row: 3;

        padding: 18px 0px 0px;
    }

    /* A lateral vai para baixo do formulario no mobile */
    .BlcContato .IntLateral {
        grid-row: 4;

        margin-top: 28px;
    }

    .BlcContato .IntTitulo {
        font-size: 21px;
    }

    .BlcTrabalhe .IntTitulo {
        font-size: 22px;
    }

    /*
    Empilha os pares de campo. Sem isso dois campos de 220px ainda
    cabem lado a lado em telas de ~450px, ficando apertados demais
    para digitar.
    */
    .BlcContato .IntLinha>.IntCampo,
    .BlcTrabalhe .IntLinha>.IntCampo {
        flex: 1 1 100%;
    }

    .BlcContato .BtnEnviar,
    .BlcTrabalhe .BtnEnviar {
        width: 100%;
    }

    /* ------------- */

}










/*
############
container_interno1
############
*/
.container_interno1 {
    background: rgba(255, 255, 255, 0.9);
    padding: 20px;

    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
    border-radius: 10px;
}










/*
############
container_interno2
############
*/
.container_interno2 {
    background: rgba(255, 255, 255, 0.9);
    padding: 20px;

    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
    border-radius: 10px;
}













/*
############
PgInt
############
*/
.PgInt {
    display: block;

    background: url('/imagens/Geral/Fundo6.jpg') no-repeat center top;
    background-attachment: fixed;

    margin: 0px;
    padding: 0px;
}

/* ------------- */

@media screen and (max-width: 767px) {

    /* ------------- */


    /* ------------- */

}

/* ------------- */

























/*
############
# blockMsg
############
*/
.blockOverlay {
    background: rgb(255, 255, 255) !important;
}

.blockMsg {
    border: 2px solid rgba(0, 0, 0, 0.1) !important;

    -webkit-border-radius: 5px !important;
    -moz-border-radius: 5px !important;
    border-radius: 5px !important;

    padding: 10px !important;

    width: 70px !important;

    left: calc(50% - 45px) !important;
}

.blockMsg .fa {
    font-size: 24px !important;

    margin: 0px !important;
}

/* -------- */














/*
############
PgAtendimentoVideo
############
*/
.PgAtendimentoVideo {
    height: 100%;
    width: 100%;

    padding: 5px;
}

/* ------------- */

.PgAtendimentoVideo .RowS1 {
    margin: 0px;
    padding: 0px;
    height: 100%;
}

.PgAtendimentoVideo .RowS1 .RowS1_Col1 {
    margin: 0px;
    padding: 0px;
    padding-right: 5px;

    width: 80%;
    height: 100%;
}

.PgAtendimentoVideo .RowS1 .RowS1_Col2 {
    margin: 0px;
    padding: 0px;

    width: 20%;
    height: 100%;
}

/* ------------- */

.PgAtendimentoVideo .SubInfo1 {
    height: 40px;
    margin-bottom: 5px;
}

.PgAtendimentoVideo .SubInfo3 {
    height: calc(100% - 139px);
    margin-bottom: 5px;
}

.PgAtendimentoVideo .SubInfo4 {
    height: 50px;
    margin-bottom: 5px;
}

.PgAtendimentoVideo .SubInfo5 {
    height: 34px;
}

/* ------------- */

.PgAtendimentoVideo #Ate_ChatDivRedor {
    height: 100%;
}

.PgAtendimentoVideo #Ate_ChatDivRedor #Ate_ChatDiv {
    height: 100%;
}

/* ------------- */

.PgAtendimentoVideo .ExtInf1 {
    background: #601111;
    padding: 5px;

    text-align: center;

    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    border-radius: 5px;
}

.PgAtendimentoVideo .ExtInf1 .ExtText1 {
    font-size: 12px;
    color: #FFF;
}

.PgAtendimentoVideo .ExtInf1 .ExtText2 {
    font-size: 16px;
    font-weight: bold;
    color: #FFF;
}

/* ------------- */

@media screen and (max-width: 1000px) {

    /* ------------- */

    .PgAtendimentoVideo .RowS1 .RowS1_Col1 {
        width: 60%;
    }

    .PgAtendimentoVideo .RowS1 .RowS1_Col2 {
        width: 40%;
    }

    /* ------------- */

}

/* ------------- */

@media screen and (max-width: 480px) {

    /* ------------- */

    .PgAtendimentoVideo .RowS1 .RowS1_Col1 {
        width: 100%;
        height: 50%;

        padding-right: 0px;
        padding-bottom: 5px;
    }

    .PgAtendimentoVideo .RowS1 .RowS1_Col2 {
        width: 100%;
        height: 50%;
    }

    /* ------------- */

}

/* ------------- */












































/*
############
mmenu
############
*/
/*
Painel off-canvas do mobile.
Fundo branco com acentos na cor da marca: o laranja e usado
como destaque (barra ativa, botao primario, titulos), nunca
como fundo de texto extenso.
*/
/*
Empilhamento: o mmenu usa z-index bem baixo (blocker 1, menu 2
com a extensao "front"), enquanto o .BlcWhatsapp1 e fixed com
z-index 900 -- o botao flutuante ficava por cima do painel e do
overlay. Aqui o menu e o overlay sobem acima dele.
*/
#menu1.mm-menu.mm-offcanvas {
    z-index: 1002 !important;
}

#mm-blocker {
    z-index: 1001 !important;
}

/*
Com o menu aberto o botao do WhatsApp e escondido: mesmo abaixo
do overlay ele continuaria capturando o toque na area dele.
*/
html.mm-opened .BlcWhatsapp1 {
    display: none !important;
}

#menu1.mm-menu {
    background: #FFF;

    color: var(--base-texto);
}

#menu1 .mm-panel {
    padding: 0 !important;

    background: #FFF;
}

/*
O mmenu injeta um espacador de 20px como :before e :after em
todo painel (.mm-panels > .mm-panel:before/:after { height:20px }).
Isso abria um vao acima do topo do menu -- aqui o painel comeca
colado no logo, entao os dois sao removidos.
*/
#menu1 .mm-panels>.mm-panel:before,
#menu1 .mm-panels>.mm-panel:after {
    display: none !important;

    height: 0 !important;
    content: none !important;
}

#menu1 .mm-navbar {
    display: none !important;
}

/*
O wrapper e o proprio painel (recebe .mm-panel do mmenu).
Coluna flex para empurrar conta e redes sociais para o fim
quando a lista de links for curta.
*/
#menu1 .MnuWrapper {
    display: flex;
    flex-direction: column;

    min-height: 100%;
}

#menu1 .MnuWrapper .MnuLista {
    flex: 1 0 auto;
}

/* ---- Topo: logo + fechar ---- */

#menu1 .MnuTopo {
    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 15px 20px;

    border-bottom: 3px solid var(--base1);
    background: #FFF;
}

#menu1 .MnuTopo .MnuLogo {
    display: block;

    max-width: 160px;
}

#menu1 .MnuTopo .MnuLogo img {
    display: block;

    width: 100%;
    height: auto;
}

#menu1 .MnuTopo .MnuFechar {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;

    width: 40px;
    height: 40px;
    margin-left: 10px;

    border-radius: 50%;
    background: var(--base-fundo2);

    font-size: 20px;
    line-height: 1;
    color: var(--base-texto);
    text-decoration: none;
}

#menu1 .MnuTopo .MnuFechar .fa {
    margin: 0px !important;
}

#menu1 .MnuTopo .MnuFechar:hover,
#menu1 .MnuTopo .MnuFechar:focus {
    background: var(--base1);

    color: var(--base1-texto);
}

/* ---- Lista de links ---- */

/*
O mmenu aplica "margin: 20px -20px" na listview filha do painel
(para compensar o padding lateral de 20px que aqui foi zerado).
Sem isso a lista fica deslocada para fora e com vao no topo.
*/
#menu1 .MnuLista {
    margin: 0 !important;
    padding: 10px 0 !important;

    border: 0 !important;
}

#menu1 .mm-listview>li {
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

#menu1 .mm-listview>li:after {
    display: none !important;
}

#menu1 .mm-listview>li>a,
#menu1 .mm-listview>li>span {
    padding: 15px 20px !important;

    border-left: 4px solid transparent;

    font-size: 15px;
    font-weight: bold;
    color: var(--base-texto) !important;
    text-transform: uppercase;
}

#menu1 .mm-listview>li>a:hover,
#menu1 .mm-listview>li>a:focus,
#menu1 .mm-listview>li.Ativo>a {
    border-left-color: var(--base1);
    background: var(--base-fundo2);

    color: var(--base-texto) !important;
}

/* ---- Bloco de conta ---- */

#menu1 .MnuConta {
    display: flex;
    flex-direction: column;
    gap: 10px;

    padding: 20px;

    border-top: 1px solid rgba(0, 0, 0, 0.08);
    background: var(--base-fundo2);
}

#menu1 .MnuConta .MnuBtn {
    display: block;

    padding: 13px 15px;

    border: 2px solid var(--base1);
    border-radius: 4px;

    font-size: 14px;
    font-weight: bold;
    text-align: center;
    text-transform: uppercase;
    text-decoration: none;
}

#menu1 .MnuConta .MnuBtn i {
    margin-right: 8px;
}

/*
Botao primario: texto PRETO sobre o laranja (10.38:1).
Branco sobre #FD9802 daria 2.17:1 e reprovaria o WCAG AA.
*/
#menu1 .MnuConta .MnuBtn1 {
    background: var(--base1);

    color: var(--base1-texto) !important;
}

#menu1 .MnuConta .MnuBtn1:hover,
#menu1 .MnuConta .MnuBtn1:focus {
    border-color: var(--base1-hover);
    background: var(--base1-hover);
}

#menu1 .MnuConta .MnuBtn2 {
    background: transparent;

    color: var(--base-texto) !important;
}

#menu1 .MnuConta .MnuBtn2:hover,
#menu1 .MnuConta .MnuBtn2:focus {
    background: var(--base1);

    color: var(--base1-texto) !important;
}

/* ---- Redes sociais ---- */

#menu1 .MnuSocial {
    padding: 20px;

    border-top: 1px solid rgba(0, 0, 0, 0.08);
}

#menu1 .MnuSocial .MnuSocialTitulo {
    margin-bottom: 12px;

    font-size: 12px;
    font-weight: bold;
    color: var(--base-texto2);
    text-align: center;
    letter-spacing: 1px;
}

/* Nao deve receber estilo de listview do mmenu */
#menu1 .MnuSocial ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;

    margin: 0;
    padding: 0;

    list-style: none;
}

#menu1 .MnuSocial ul li {
    margin: 0;
    padding: 0;
}

#menu1 .MnuSocial ul li a {
    display: block;

    opacity: 0.75;
}

#menu1 .MnuSocial ul li a:hover,
#menu1 .MnuSocial ul li a:focus {
    opacity: 1;
}

#menu1 .MnuSocial ul li img {
    display: block;

    width: 32px;
    height: 32px;
}

/* ------------- */















/*
############
GRow_Atendentes
############
*/
/*
flex-wrap para que todos os cards da linha tenham a mesma altura
(o .BoxAtendente usa height:100% e alinha os botoes na base).
*/
.GRow_Atendentes {
    margin: 0px;
    padding: 0px;

    margin-right: -5px;
    margin-left: -5px;

    display: flex;
    flex-wrap: wrap;
}

.GRow_Atendentes .GRow_Atendentes_Col {
    margin: 0px;
    padding: 0px;

    padding-right: 5px;
    padding-left: 5px;
    margin-bottom: 20px;

    width: calc(100% / 4);

    display: flex;
}

/* ------------- */

@media screen and (max-width: 1000px) {

    /* ------------- */

    .GRow_Atendentes .GRow_Atendentes_Col {
        width: calc(100% / 3);
    }

    /* ------------- */

}

/* ------------- */

@media screen and (max-width: 800px) {

    /* ------------- */

    .GRow_Atendentes .GRow_Atendentes_Col {
        width: calc(100% / 2);
    }

    /* ------------- */

}

/* ------------- */

@media screen and (max-width: 767px) {

    /* ------------- */

    .GRow_Atendentes .GRow_Atendentes_Col {
        width: 100%;
    }

    /* ------------- */

}

/* ------------- */

@media screen and (max-width: 500px) {

    /* ------------- */

    .GRow_Atendentes .GRow_Atendentes_Col {
        width: 100%;
    }

    /* ------------- */

}

/* ------------- */












/*
############
GRow_AtendentesTop
############
*/
.GRow_AtendentesTop {
    margin: 0px;
    padding: 0px;

    margin-right: -5px;
    margin-left: -5px;
}

.GRow_AtendentesTop .GRow_AtendentesTop_Col {
    margin: 0px;
    padding: 0px;

    padding-right: 5px;
    padding-left: 5px;
    margin-bottom: 30px;

    width: calc(100% / 5);
}

/* ------------- */

@media screen and (max-width: 630px) {

    /* ------------- */

    .GRow_AtendentesTop .GRow_AtendentesTop_Col {
        width: calc(100% / 4);
    }

    /* ------------- */

}

/* ------------- */

@media screen and (max-width: 510px) {

    /* ------------- */

    .GRow_AtendentesTop .GRow_AtendentesTop_Col {
        width: calc(100% / 3);
    }

    /* ------------- */

}

/* ------------- */

@media screen and (max-width: 380px) {

    /* ------------- */

    .GRow_AtendentesTop .GRow_AtendentesTop_Col {
        width: calc(100% / 2);
    }

    /* ------------- */

}

/* ------------- */














/*
############
GRow_Esp1
############
*/
.GRow_Esp1 {
    margin: 0px;
    padding: 0px;

    margin-right: -5px;
    margin-left: -5px;
}

.GRow_Esp1 .GRow_Esp1_Col {
    margin: 0px;
    padding: 0px;

    padding-right: 5px;
    padding-left: 5px;
    margin-bottom: 20px;

    width: calc(100% / 4);
}

/* ------------- */

@media screen and (max-width: 1100px) {

    /* ------------- */

    .GRow_Esp1 .GRow_Esp1_Col {
        width: calc(100% / 3);
    }

    /* ------------- */

}

/* ------------- */

@media screen and (max-width: 740px) {

    /* ------------- */

    .GRow_Esp1 .GRow_Esp1_Col {
        width: calc(100% / 2);
    }

    /* ------------- */

}

/* ------------- */

@media screen and (max-width: 480px) {

    /* ------------- */

    .GRow_Esp1 .GRow_Esp1_Col {
        width: 100%;
    }

    /* ------------- */

}

/* ------------- */












/*
############
GRow_Horoscopo
############
*/
.GRow_Horoscopo {
    margin: 0px;
    padding: 0px;

    margin-right: -5px;
    margin-left: -5px;
}

.GRow_Horoscopo .GRow_Horoscopo_Col {
    margin: 0px;
    padding: 0px;

    padding-right: 5px;
    padding-left: 5px;
    margin-bottom: 20px;

    width: calc(100% / 6);
}

/* ------------- */

@media screen and (max-width: 640px) {

    /* ------------- */

    .GRow_Horoscopo .GRow_Horoscopo_Col {
        width: calc(100% / 4);
    }

    /* ------------- */

}

/* ------------- */

@media screen and (max-width: 380px) {

    /* ------------- */

    .GRow_Horoscopo .GRow_Horoscopo_Col {
        width: calc(100% / 3);
    }

    /* ------------- */

}

/* ------------- */



















/*
############
# PgAttModal1
############
*/

.PgAttModal1 {
    background: none;
}

/* ------------- */

.PgAttModal1 .panel {
    background: #FFF;
    border: 0px;

    margin: 0px;

    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;

    display: block;
    overflow: hidden;
}

.PgAttModal1 .panel .panel-heading {
    margin: 0px;
    padding: 15px;

    background: var(--base1);
    border: 0px;
}

.PgAttModal1 .panel .panel-heading .panel-title {
    color: #FFFF;
    font-size: 18px;
    font-weight: bold;
}

.PgAttModal1 .panel .panel-heading .panel-title .fa {
    display: none;
}

.PgAttModal1 .panel .panel-body {
    background: none;
    border: 0px;

    padding: 15px;
}

.PgAttModal1 .panel .panel-footer {
    background: none;
    border: 0px;

    padding: 15px;
}

.PgAttModal1 .panel .panel-footer .btn {
    color: #FFF !important;
    font-size: 15px;
    font-weight: bold;

    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;

    display: inline-block;
    position: relative;
    text-decoration: none !important;
    cursor: pointer;

    text-align: center;
    vertical-align: middle;

    width: auto;
    height: auto;
    line-height: normal;

    padding: 12px 20px;
    margin: 0px;

    background: #009245;
    border: none;

    -webkit-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}

.PgAttModal1 .panel .panel-footer .btn:hover,
.PgAttModal1 .panel .panel-footer .btn:active,
.PgAttModal1 .panel .panel-footer .btn:focus {
    background: #016831;
}

/* ------------- */
































/*
############
IntGeral1
############
*/

.IntGeral1 {
    padding: 20px;
}

.IntGeral1 .IntText1 {
    font-size: 20px;
    color: rgb(160, 16, 16);
    font-weight: bold;
}

.IntGeral1 .IntText2 {
    font-size: 12px;
    color: rgb(24, 20, 20);
}

.IntGeral1 .IntText2 a {
    font-size: 12px;
    color: rgb(24, 20, 20);
    text-decoration: underline;
}

/* ------------- */












/*
############
IntGeral2
############
*/
.IntGeral2 {
    padding: 20px;
    background: #FFF;
}

.IntGeral2 .IntText1 {
    font-size: 20px;
    color: rgb(27, 27, 27);
    font-weight: bold;
}

.IntGeral2 .IntText2 {
    font-size: 14px;
    color: rgb(27, 27, 27);
    font-weight: bold;
}

.IntGeral2 .IntText3 {
    font-size: 20px;
    color: rgb(99, 10, 17);
    font-weight: bold;
}

.IntGeral2 .IntText4 {
    font-size: 16px;
    color: rgb(27, 27, 27);
}

.IntGeral2 .IntText4 .IntText4B {
    color: rgb(8, 131, 59);
    font-weight: bold;
}

.IntGeral2 .IntText5 {
    font-size: 20px;
    color: rgb(8, 131, 59);
    font-weight: bold;
}

.IntGeral2 .IntText10 {
    font-size: 12px;
    color: rgb(24, 20, 20);
}

.IntGeral2 .IntText10 a {
    font-size: 12px;
    color: rgb(24, 20, 20);
    text-decoration: underline;
}

/* ------------- */

.IntGeral2 .IntLogo {}

.IntGeral2 .IntLogo img {
    max-width: 250px;
    height: auto;
}

/* ------------- */










/*
############
IntGeral3
############
*/
.IntGeral3 {
    padding: 20px;
    background: #FFF;
}

.IntGeral3 .IntText1 {
    color: rgb(44, 44, 44);
    font-size: 28px;
    font-weight: bold;
}

.IntGeral3 .IntText2 {
    color: rgb(44, 44, 44);
    font-size: 22px;
    font-weight: bold;
    text-decoration: underline;
}

.IntGeral3 .IntText2B {
    color: rgb(44, 44, 44);
    font-size: 20px;
    font-weight: bold;
}

.IntGeral3 .IntText3 {
    color: rgb(44, 44, 44);
    font-size: 16px;
    line-height: 175%;
}

.IntGeral3 .IntText3B {
    color: rgb(44, 44, 44);
    font-size: 19px;
    line-height: 175%;
}

.IntGeral3 .btn-warning {
    font-weight: bold;
    font-size: 17px;
    background: var(--base1);
    border: 2px solid #000;
}

/* ------------- */
















/*
############
BlcDepResumo
############
*/
.BlcDepResumo {
    margin-bottom: 40px;
}

/* ------------- */

.BlcDepResumo .SRow1 {
    width: 300px;

    margin: 0px;
    padding: 0px;
    margin-bottom: 5px;

    display: flex;
    align-items: center;
}

.BlcDepResumo .SRow1 .SRow1_Col {
    margin: 0px;
    padding: 0px;
}

.BlcDepResumo .SRow1 .SRow1_Col1 {
    width: 80px;
    text-align: right;
}

.BlcDepResumo .SRow1 .SRow1_Col2 {
    width: calc(100% - 80px);
    padding-left: 10px;
}

/* ------------- */

.BlcDepResumo .ExtText1 {
    font-size: 14px;
    color: #222222;

    margin-bottom: 20px;
}

.BlcDepResumo .ExtText2 {
    font-size: 12px;
    color: #222222;
}

/* ------------- */

.BlcDepResumo .IncProgresso {
    position: relative;

    width: 100%;
    margin-top: -5px;

    text-decoration: none !important;
}

.BlcDepResumo .IncProgresso * {
    text-decoration: none !important;
}

.BlcDepResumo .IncProgresso .Barra {
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;

    width: 100%;
    height: 5px;

    background: #000;

    display: inline-block;
}

.BlcDepResumo .IncProgresso .IntText {
    font-size: 13px;
    color: #222222;

    display: inline-block;
}

.BlcDepResumo .IncProgresso_5 .Barra {
    background: #188301;
}

.BlcDepResumo .IncProgresso_5 .IntText {
    color: #188301;
}

.BlcDepResumo .IncProgresso_4 .Barra {
    background: #33CC33;
}

.BlcDepResumo .IncProgresso_4 .IntText {
    color: #33CC33;
}

.BlcDepResumo .IncProgresso_3 .Barra {
    background: var(--base1);
}

.BlcDepResumo .IncProgresso_3 .IntText {
    color: var(--base1);
}

.BlcDepResumo .IncProgresso_2 .Barra {
    background: #FF0000;
}

.BlcDepResumo .IncProgresso_2 .IntText {
    color: #FF0000;
}

.BlcDepResumo .IncProgresso_1 .Barra {
    background: #E00000;
}

.BlcDepResumo .IncProgresso_1 .IntText {
    color: #E00000;
}

/* ------------- */

















/*
############
PgManutencao
############
*/
.PgManutencao {
    width: 100%;
    height: 100%;
}

/* ------------- */

.PgManutencao .BlcCentro {
    display: flex;
    align-items: center;

    width: 100%;
    height: 100%;
}

.PgManutencao .BlcCentro .BlcCentro_Int {
    display: block;
    text-align: center;

    width: 100%;
}

/* ------------- */

























/*
############
BlcWhatsapp1
############
*/
.BlcWhatsapp1 {
    position: fixed;
    bottom: 20px;

    z-index: 900;

    display: block;
}

/* ------------- */

.BlcWhatsapp1.Posicao_E {
    left: 20px;
}

.BlcWhatsapp1.Posicao_D {
    right: 20px;
}

/* ------------- */











/*
############
EstWhatsapp1
############
*/

/*
Pilula flutuante: no estado normal e um circulo so com o icone;
no hover/foco expande para a direita revelando a mensagem.
A largura anima por max-width porque o texto e de tamanho
variavel (vem de cfg("WhatsAppFlutuante_Mensagem")) e nao da
para animar "width: auto".
*/
.EstWhatsapp1 {
    display: flex;
    align-items: center;

    height: 56px;
    padding: 0 13px;

    border-radius: 28px;
    background: var(--base-whatsapp);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);

    color: #FFF !important;
    text-decoration: none !important;

    transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.EstWhatsapp1 * {
    text-decoration: none !important;
}

.EstWhatsapp1:hover,
.EstWhatsapp1:focus {
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);

    color: #FFF !important;

    transform: translateY(-2px);
}

.EstWhatsapp1 .IntImagem {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;

    width: 30px;
    height: 30px;
}

.EstWhatsapp1 .IntImagem svg {
    display: block;
}

.EstWhatsapp1 .IntText1 {
    overflow: hidden;

    max-width: 0;

    font-size: 14px;
    font-weight: bold;
    line-height: 1.2;
    white-space: nowrap;

    opacity: 0;

    transition: max-width 0.3s ease, opacity 0.25s ease, margin-left 0.3s ease;
}

.EstWhatsapp1:hover .IntText1,
.EstWhatsapp1:focus .IntText1 {
    max-width: 260px;
    margin-left: 10px;

    opacity: 1;
}

/*
Com a pilula ancorada a direita, a expansao precisa crescer para
a esquerda -- por isso a ordem visual dos filhos e invertida.
*/
.BlcWhatsapp1.Posicao_D .EstWhatsapp1 {
    flex-direction: row-reverse;
}

.BlcWhatsapp1.Posicao_D .EstWhatsapp1:hover .IntText1,
.BlcWhatsapp1.Posicao_D .EstWhatsapp1:focus .IntText1 {
    margin-right: 10px;
    margin-left: 0;
}

/* ------------- */

@media screen and (max-width: 767px) {

    /* ------------- */

    /*
    No mobile nao existe hover: a pilula fica sempre fechada,
    como um botao circular de 52px (area de toque confortavel).
    */
    .EstWhatsapp1 {
        height: 52px;
        padding: 0 11px;

        border-radius: 26px;
    }

    .EstWhatsapp1 .IntText1,
    .EstWhatsapp1:hover .IntText1,
    .EstWhatsapp1:focus .IntText1 {
        max-width: 0;
        margin-left: 0;
        margin-right: 0;

        opacity: 0;
    }

    /* ------------- */

}

/* ------------- */

/* Respeita quem pediu menos animacao no sistema */
@media (prefers-reduced-motion: reduce) {

    .EstWhatsapp1,
    .EstWhatsapp1 .IntText1 {
        transition: none !important;
    }

    .EstWhatsapp1:hover,
    .EstWhatsapp1:focus {
        transform: none;
    }

}

/* ------------- */













/*
############
ModalEsp1
############
*/
.ModalEsp1 {
    border: 2px solid var(--base1);
    background: #FFF;

    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
    border-radius: 10px;

    max-width: 600px;

    padding: 40px;

    text-align: center;
}

/* ------------- */

.ModalEsp1 .ExtText1 {
    font-size: 24px;
    color: #222;
    font-weight: bold;

    margin-bottom: 10px;
}

.ModalEsp1 .ExtText2 {
    font-size: 18px;
    color: #222;

    margin-bottom: 20px;
}

.ModalEsp1 .ExtText3 {
    margin-bottom: 10px;
}

.ModalEsp1 .ExtText4 {}

.ModalEsp1 .ExtText5 {
    font-size: 18px;
    color: #222;
}

/* ------------- */

@media screen and (max-width: 767px) {

    /* ------------- */

    .ModalEsp1 {
        padding: 20px;
    }

    /* ------------- */

    .ModalEsp1 .ExtText1 {
        font-size: 20px;
    }

    .ModalEsp1 .ExtText2 {
        font-size: 16px;
    }

    .ModalEsp1 .ExtText5 {
        font-size: 16px;
    }

    /* ------------- */

}

/* ------------- */





























/*
############
bxSlider
############
*/
.bx-wrapper {
    -moz-box-shadow: none !important;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;

    border: none !important;
    background: transparent !important;

    padding: 0px !important;
    margin: 0px !important;
}

/* ------------- */











/*
############
spr1
############
*/
/*
.spr1 
{
    background-image: url('/imagens/sprites/spr1.png?v=5');
    background-repeat: no-repeat;
    display: inline-block;
}
*/

/* ------------- */
/* ------------- */
/* Paginacao do site (PaginacaoSite::CarregarBoxRodape) */

.PagNav {
    display: flex;
    flex-direction: column;
    align-items: center;

    gap: 12px;

    margin: 32px 0px 8px 0px;
}

.PagNav .PagLista {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;

    gap: 6px;

    list-style: none;

    padding: 0px;
    margin: 0px;
}

.PagNav .PagItem {
    list-style: none;

    padding: 0px;
    margin: 0px;
    float: none;
}

.PagNav .PagLink {
    display: inline-flex;
    justify-content: center;
    align-items: center;

    float: none;

    min-width: 42px;
    height: 42px;

    padding: 0px 12px;
    margin: 0px;

    font-size: 15px;
    font-weight: 600;
    line-height: 1;
    text-align: center;
    text-decoration: none;

    color: var(--base-texto);
    background: #FFFFFF;

    border: 1px solid #E5E7EB;
    border-radius: 8px;
    box-shadow: none;

    transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}

.PagNav a.PagLink:hover,
.PagNav a.PagLink:focus {
    text-decoration: none;

    color: var(--base-texto);
    background: var(--base-fundo2);

    border-color: var(--base1);
}

.PagNav a.PagLink:focus-visible {
    outline: 2px solid var(--base1-hover);
    outline-offset: 2px;
}

.PagNav .PagAtual {
    color: var(--base1-texto);
    background: var(--base1);

    border-color: var(--base1);

    cursor: default;
}

.PagNav .PagInativo {
    color: #C7CBD1;
    background: var(--base-fundo2);

    border-color: #EDEFF2;

    cursor: default;
}

.PagNav .PagItemSeta .PagLink {
    font-size: 20px;

    padding: 0px 10px;
}

.PagNav .PagItemVazio .PagReticencias {
    display: inline-flex;
    justify-content: center;
    align-items: center;

    min-width: 26px;
    height: 42px;

    color: var(--base-texto2);
    background: none;

    border: none;
    box-shadow: none;
}

.PagNav .PagResumo {
    font-size: 13px;

    color: var(--base-texto2);
}

@media only screen and (max-width: 767px) {

    .PagNav {
        margin: 24px 0px 8px 0px;
    }

    .PagNav .PagLista {
        gap: 5px;
    }

    .PagNav .PagLink {
        min-width: 38px;
        height: 38px;

        padding: 0px 9px;

        font-size: 14px;
    }

    .PagNav .PagItemVazio .PagReticencias {
        height: 38px;
    }

}

/* ------------- */
/*
############
PgAttDet1 -- Pagina de Detalhes do Atendente
############
*/

/*
Raiz da pagina de detalhes. Todo o CSS desta secao e escopado por
.PgAttDet1 para nao vazar para outras paginas do site.
*/

.PgAttDet1 {
    display: block;

    padding: 0px 0px 40px 0px;
}

/* ------------- */

/*
Breadcrumb sem apresentacao visual nesta pagina.

Ele continua no HTML porque alimenta o rich snippet de navegacao
do Google. O recorte de 1px (e nao display:none) e o padrao para
esconder do olho mantendo o conteudo acessivel a leitores de tela
e rastreadores -- display:none removeria da arvore de
acessibilidade.
*/

.PgAttDetBreadcrumb {
    position: absolute;
    width: 1px;
    height: 1px;

    margin: -1px;
    padding: 0px;

    overflow: hidden;
    white-space: nowrap;

    clip: rect(0px, 0px, 0px, 0px);
    -webkit-clip-path: inset(50%);
    clip-path: inset(50%);

    border: 0px;
}

/*
DUAS CONDICOES PARA O STICKY DO CARD DE ACAO FUNCIONAR:

1) O wrapper global "div.content" (Est_1.php) tem overflow:hidden
   -- regra la do topo deste arquivo. Qualquer ancestral com
   overflow diferente de visible vira o container de rolagem do
   sticky, e o card passa a grudar naquele bloco em vez da tela,
   sumindo logo na primeira rolagem. Por isso o overflow e
   devolvido a visible SO nesta pagina, pela classe
   .PgAttDetBody que o AtendentesDetalhes.php poe no <body>,
   sem alterar a regra global que as outras paginas usam.

2) A .row do Bootstrap 3 usa float, entao a coluna lateral fica
   apenas com a altura do proprio card e o sticky nao teria por
   onde "correr". Com flex a coluna estica ate o fim do conteudo
   e o card acompanha a leitura dos depoimentos.
*/

body.PgAttDetBody div.content {
    overflow: visible;
}

/*
O overflow:hidden acima tambem continha o transbordo lateral das
.row do Bootstrap (que tem margin: 0 -15px). Ao libera-lo, a
pagina passou a ter rolagem horizontal de ~5px. Conter no <body>
resolve sem reintroduzir o problema do sticky: o que atrapalha
position:sticky e um ancestral com overflow proprio, e o body ja
e o container de rolagem da pagina.
*/

/*
ATENCAO: conter o transbordo NAO pode ser feito com overflow no
.container nem em nenhum ancestral do card de acao -- isso torna
aquele elemento o container de rolagem e o position:sticky para
de funcionar (ja aconteceu aqui).

A solucao e tirar a margem negativa das .row DENTRO desta pagina,
sem mexer em overflow: sem o -15px nao ha transbordo para conter.
A compensacao vai nas colunas, que perdem o padding correspondente.
*/

body.PgAttDetBody .PgAttDet1>.container>.row {
    margin-left: 0px;
    margin-right: 0px;
}

body.PgAttDetBody .PgAttDet1>.container>.row>[class*="col-"] {
    padding-left: 0px;
    padding-right: 0px;
}

/*
O rodape do site tambem tem .row com a margem negativa padrao, e
ele fica FORA do .PgAttDet1 -- por isso a regra acima nao o
alcanca. Sem isto sobra ~5px de rolagem horizontal no mobile
nesta pagina (as demais paginas nao tem o problema porque la o
div.content mantem o overflow:hidden).
*/

body.PgAttDetBody #footer .row {
    margin-left: 0px;
    margin-right: 0px;
}

body.PgAttDetBody #footer .row>[class*="col-"] {
    padding-left: 0px;
    padding-right: 0px;
}

.PgAttDet1 .row.BlcColunas {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;

    /*
    O espaco entre as colunas vem do gap, e nao do padding do
    Bootstrap -- que foi zerado acima para nao gerar transbordo.
    */
    gap: 0px 30px;
}

.PgAttDet1 .row.BlcColunas>[class*="col-"] {
    float: none;
}

/*
O clearfix do Bootstrap (.row:before / .row:after, content " " e
display:table) vira ITEM FLEX quando a linha e flex, e ocupa uma
linha inteira -- e o que empurrava a coluna lateral para baixo.
Na linha flex ele nao tem funcao nenhuma.
*/

.PgAttDet1 .row.BlcColunas:before,
.PgAttDet1 .row.BlcColunas:after {
    display: none;
}

/*
Com o gap ocupando 30px, as colunas precisam ceder essa largura,
senao a soma passa de 100% e a lateral cai para baixo.

O -16px (e nao -15px) e proposital: com exatamente 15px a soma
bate 1170.00 contra uma linha de 1170 e o arredondamento de
subpixel do navegador joga a coluna lateral para baixo. 1px de
folga resolve sem diferenca visivel.
*/

@media screen and (min-width: 992px) {

    .PgAttDet1 .row.BlcColunas>.col-md-8 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 calc(66.66666667% - 16px);
        flex: 0 0 calc(66.66666667% - 16px);

        width: calc(66.66666667% - 16px);
        max-width: calc(66.66666667% - 16px);
    }

    .PgAttDet1 .row.BlcColunas>.col-md-4 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 calc(33.33333333% - 16px);
        flex: 0 0 calc(33.33333333% - 16px);

        width: calc(33.33333333% - 16px);
        max-width: calc(33.33333333% - 16px);
    }

}

/*
Abaixo de 992px as colunas empilham -- o .col-xs-12 (width:100%)
do Bootstrap ja faz isso sozinho.
*/

/* ------------- */

/*
############
PgAttDet1_BlcHero
############
*/

/*
Faixa do hero -- sangra de ponta a ponta.

O elemento fica FORA do .container (ver AtendentesDetalhes.php) em
vez de usar margem negativa: margem negativa calculada sobre a
viewport erra a conta quando existe barra de rolagem e acaba
criando rolagem horizontal. Aqui a faixa e um bloco normal de
largura total, e o alinhamento volta pelo .container interno.

Gradiente em CINZA CLARO, na diagonal: sai do branco e desce ate
um cinza suave, com um toque quente de laranja no canto para a
faixa nao ficar cinza-morto e conversar com a marca.

Como o fundo e claro, os textos do hero voltam a ser escuros
(--base-texto) -- ver as regras de .BlcHero mais abaixo.
*/

.PgAttDet1 .BlcHeroFaixa {
    background-color: #F4F5F7;
    background-image: -webkit-linear-gradient(315deg, #FFFFFF 0%, #F7F8FA 40%, #EDEFF2 75%, #E4E7EB 100%);
    background-image: linear-gradient(135deg, #FFFFFF 0%, #F7F8FA 40%, #EDEFF2 75%, #E4E7EB 100%);

    display: block;
    overflow: hidden;
    position: relative;

    margin: 0px 0px 30px 0px;
    padding: 0px;

    width: 100%;

    border-bottom: 1px solid rgba(0, 0, 0, 0.07);
}

/*
Brilho laranja bem discreto no canto, para o cinza nao ficar
neutro demais.
*/

.PgAttDet1 .BlcHeroFaixa:before {
    background: radial-gradient(closest-side at 88% 12%, rgba(253, 152, 2, 0.16) 0%, rgba(253, 152, 2, 0) 100%);

    content: "";
    display: block;
    position: absolute;
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: 0px;

    pointer-events: none;
}

/*
O conteudo precisa ficar acima do brilho.
*/

.PgAttDet1 .BlcHeroFaixa>.container {
    position: relative;
    z-index: 1;
}

/*
Filete laranja no rodape da faixa, costurando com a faixa do
titulo que vem logo acima.
*/

.PgAttDet1 .BlcHeroFaixa:after {
    background: var(--base1);

    content: "";
    display: block;
    position: absolute;
    left: 0px;
    right: 0px;
    bottom: 0px;

    height: 3px;
}

/* ------------- */

/*
Cabecalho do perfil: foto, nome, nota e status.
Grid de 2 colunas (foto fixa + dados fluidos) que vira 1 coluna
centralizada no mobile.
*/

.PgAttDet1 .BlcHero {
    background: transparent;
    border: 0px;

    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    position: relative;

    margin: 0px;
    padding: 35px 0px;
}

/* ------------- */

.PgAttDet1 .BlcHero .ExtFoto {
    display: block;
    position: relative;
    -ms-flex-negative: 0;
    flex-shrink: 0;

    margin: 0px 25px 0px 0px;

    width: 160px;
    height: 160px;

    /* Sem link: nada de cursor de clique */
    cursor: default;
}

.PgAttDet1 .BlcHero .ExtFoto img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    border-radius: 12px;

    /* Borda + sombra para a foto se destacar do fundo claro */
    border: 3px solid #FFFFFF;

    -webkit-box-shadow: 0px 4px 14px rgba(0, 0, 0, 0.14);
    box-shadow: 0px 4px 14px rgba(0, 0, 0, 0.14);
}

/* ------------- */

.PgAttDet1 .BlcHero .ExtDados {
    -webkit-box-flex: 1;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;

    min-width: 0px;
}

/*
Textos escuros: a faixa do hero e clara (gradiente cinza).
--base-texto sobre o cinza mais escuro do gradiente da 12.6:1.
*/

/*
E um <h1> -- o titulo da pagina. Precisa zerar o tamanho e a
margem que o tema aplica em h1 por padrao.
*/

.PgAttDet1 .BlcHero .ExtNome {
    font-size: 30px;
    font-weight: 700;
    color: var(--base-texto);
    line-height: 36px;

    margin: 0px 0px 10px 0px;
    padding: 0px;

    text-transform: none;
}

/* ------------- */

/*
Linha de nota: estrelas douradas + numero + total de consultas.
O dourado do rating e convencao universal, nao cor de marca.
*/

.PgAttDet1 .BlcHero .ExtNota {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;

    gap: 10px;

    margin: 0px 0px 12px 0px;

    font-size: 14px;
    color: var(--base-texto2);
}

.PgAttDet1 .BlcHero .ExtNota .fa-star,
.PgAttDet1 .BlcHero .ExtNota .fa-star-o {
    color: #EC971F;

    font-size: 16px;
}

.PgAttDet1 .BlcHero .ExtNota .ExtValor {
    font-weight: 700;
    color: var(--base-texto);
}

/* ------------- */

/*
Frase de destaque do atendente -- mesma informacao que aparece no
card da listagem, aqui com mais respiro.
*/

.PgAttDet1 .BlcHero .ExtFrase {
    font-size: 15px;
    font-style: italic;
    color: var(--base-texto2);
    line-height: 22px;

    margin: 0px;
}

/* ------------- */

/*
############
PgAttDet1_BlcCategorias
############
*/

/*
Categorias que a atendente atende, dentro do hero. Cada chip leva
a listagem daquela categoria -- e um caminho de navegacao que a
pagina nao tinha.
*/

.PgAttDet1 .BlcHero .BlcCategorias {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;

    gap: 8px;

    margin: 14px 0px 0px 0px;
}

.PgAttDet1 .BlcHero .ExtCategoria {
    background: #FFFFFF;
    border: 1px solid rgba(0, 0, 0, 0.12);
    color: var(--base-texto);

    display: inline-block;

    padding: 6px 13px;

    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    line-height: 18px;

    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;

    -webkit-transition: background 0.18s ease-out, border-color 0.18s ease-out;
    transition: background 0.18s ease-out, border-color 0.18s ease-out;
}

.PgAttDet1 .BlcHero .ExtCategoria:hover,
.PgAttDet1 .BlcHero .ExtCategoria:focus {
    background: var(--base1);
    border-color: var(--base1);
    color: var(--base1-texto);

    text-decoration: none;
}

/* ------------- */

/*
Botao "Ver todos os consultores", na ponta direita da faixa do hero.
O auto-margin a esquerda e o que empurra o bloco para a direita sem
precisar mexer no flex dos outros dois filhos de .BlcHero.
*/

.PgAttDet1 .BlcHero .ExtVoltar {
    display: block;
    -ms-flex-negative: 0;
    flex-shrink: 0;

    margin: 0px 0px 0px 25px;
}

.PgAttDet1 .BlcHero .ExtBotaoVoltar {
    background: #FFFFFF;
    border: 1px solid var(--base1);
    color: var(--base-texto);

    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;

    gap: 8px;

    padding: 10px 16px;

    font-size: 14px;
    font-weight: 600;
    line-height: 18px;

    white-space: nowrap;

    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;

    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    transition: all 0.2s ease;
}

.PgAttDet1 .BlcHero .ExtBotaoVoltar:hover,
.PgAttDet1 .BlcHero .ExtBotaoVoltar:focus {
    background: var(--base1);
    border-color: var(--base1);
    color: var(--base1-texto);

    text-decoration: none;
}

/* ------------- */
/*
############
PgAttDet1_ExtStatus
############
*/

/*
Selo de status. As cores acompanham as do card da listagem
(.BoxAtendente .ExtStatus) para o usuario reconhecer o mesmo
significado nas duas telas.
*/

.PgAttDet1 .ExtStatus {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;

    gap: 7px;

    padding: 6px 14px;

    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    line-height: 16px;

    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
}

/*
O ponto colorido antes do texto. Usa currentColor para acompanhar
a cor do selo sem precisar de regra por status.
*/

.PgAttDet1 .ExtStatus i {
    background: currentColor;

    display: block;

    width: 8px;
    height: 8px;

    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
}

/* ------------- */

/*
Fundos solidos, iguais aos badges do card da listagem
(.BoxAtendente.<Status> .ExtStatus) -- o mesmo status tem a mesma
cor nas duas telas.

  Disponivel  #D1FAE5 + #065F46 = 6.78:1
  Ocupado     #FEF3C7 + #92400E = 6.37:1
  Ausente     #E5E7EB + #374151 = 8.93:1
  Offline     #991B1B + #FFFFFF = 7.60:1
*/

.PgAttDet1 .ExtStatus.Disponivel {
    background: #D1FAE5;
    color: #065F46;
}

.PgAttDet1 .ExtStatus.Disponivel i {
    background: var(--base-sucesso);
}

.PgAttDet1 .ExtStatus.Ocupado {
    background: #FEF3C7;
    color: #92400E;
}

.PgAttDet1 .ExtStatus.Ocupado i {
    background: var(--base-aviso);
}

/*
Ausente nao existe na listagem (la o consultor e so online ou
offline). Cinza neutro, na mesma familia dos demais.
*/

.PgAttDet1 .ExtStatus.Ausente {
    background: #E5E7EB;
    color: #374151;
}

.PgAttDet1 .ExtStatus.Ausente i {
    background: #6B7280;
}

.PgAttDet1 .ExtStatus.Offline {
    background: #991B1B;
    color: #FFFFFF;
}

.PgAttDet1 .ExtStatus.Offline i {
    background: #FCA5A5;
}

/*
Pulso apenas no status disponivel: e o unico que pede acao
imediata. Respeita quem desativou animacoes no sistema.
*/

.PgAttDet1 .ExtStatus.Disponivel i {
    -webkit-animation: PgAttDet1Pulso 2s ease-in-out infinite;
    animation: PgAttDet1Pulso 2s ease-in-out infinite;
}

@-webkit-keyframes PgAttDet1Pulso {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.35;
    }
}

@keyframes PgAttDet1Pulso {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.35;
    }
}

@media (prefers-reduced-motion: reduce) {

    .PgAttDet1 .ExtStatus.Disponivel i {
        -webkit-animation: none;
        animation: none;
    }

}

/* ------------- */

/*
############
PgAttDet1_BlcAcao
############
*/

/*
Card de acao -- o elemento mais importante da pagina.
Sticky no desktop para o cliente nunca perder o botao de vista
numa pagina longa de depoimentos.
*/

.PgAttDet1 .BlcAcao {
    background: #FFF;
    border: 1px solid rgba(0, 0, 0, 0.08);

    display: block;
    position: -webkit-sticky;
    position: sticky;
    top: 20px;

    padding: 22px;

    /*
    Trava de altura: sem isso, num monitor baixo o rodape do card
    (justamente onde fica o botao) fica fora da viewport e o
    sticky trabalha contra a conversao.
    */
    max-height: calc(100vh - 40px);
    overflow-y: auto;

    -webkit-border-radius: 16px;
    -moz-border-radius: 16px;
    border-radius: 16px;

    -webkit-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.04), 0px 8px 24px -16px rgba(0, 0, 0, 0.3);
    box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.04), 0px 8px 24px -16px rgba(0, 0, 0, 0.3);
}

.PgAttDet1 .BlcAcao .ExtCabecalho {
    text-align: center;

    margin: 0px 0px 18px 0px;
    padding: 0px 0px 18px 0px;

    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.PgAttDet1 .BlcAcao .ExtTitulo1 {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--base-texto2);

    margin: 12px 0px 0px 0px;
}

/* ------------- */

/*
Aviso dentro do card (em consulta, retorno previsto, indisponivel).
*/

/*
O aviso assume a COR DO STATUS, como o botao de consulta na
listagem. As cores sao as mesmas familias usadas la (.BoxAtendente
.Ocupado / .Offline), com texto branco -- todas passam no AA.
*/

.PgAttDet1 .BlcAcao .ExtAviso {
    background: var(--base-fundo2);

    text-align: center;

    margin: 0px 0px 16px 0px;
    padding: 14px;

    font-size: 14px;
    font-weight: 600;
    color: var(--base-texto);
    line-height: 20px;

    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
}

.PgAttDet1 .BlcAcao.Ocupado .ExtAviso {
    background: #B45309;
    color: #FFFFFF;
}

.PgAttDet1 .BlcAcao.Ausente .ExtAviso {
    background: #4B5563;
    color: #FFFFFF;
}

.PgAttDet1 .BlcAcao.Offline .ExtAviso {
    background: #991B1B;
    color: #FFFFFF;
}

.PgAttDet1 .BlcAcao .ExtAviso strong {
    color: inherit;
}

/* ------------- */
/*
############
PgAttDet1_BlcModalidade
############
*/

/*
Cada forma de atendimento e uma linha clicavel: icone + nome +
preco. Quando o atendente esta disponivel a linha e um botao que
dispara a consulta; caso contrario vira apenas informativo.
*/

.PgAttDet1 .BlcModalidades {
    display: block;

    margin: 0px 0px 16px 0px;
}

.PgAttDet1 .BlcModalidade {
    background: #FFF;
    border: 1px solid rgba(0, 0, 0, 0.10);

    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    position: relative;

    width: 100%;

    margin: 0px 0px 10px 0px;
    padding: 12px 14px;

    text-align: left;
    text-decoration: none;

    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    border-radius: 12px;

    -webkit-transition: border-color 0.18s ease-out, background 0.18s ease-out, -webkit-transform 0.18s ease-out;
    transition: border-color 0.18s ease-out, background 0.18s ease-out, transform 0.18s ease-out;
}

.PgAttDet1 .BlcModalidade:last-child {
    margin-bottom: 0px;
}

/* ------------- */

/*
Estado clicavel -- so existe quando o atendente pode atender agora.
*/

.PgAttDet1 .BlcModalidade.Ativa {
    cursor: pointer;
}

.PgAttDet1 .BlcModalidade.Ativa:hover,
.PgAttDet1 .BlcModalidade.Ativa:focus {
    background: rgba(253, 152, 2, 0.06);
    border-color: var(--base1);

    text-decoration: none;

    -webkit-transform: translateY(-2px);
    transform: translateY(-2px);
}

/*
Foco visivel pelo teclado -- acessibilidade. O :focus acima muda
so a cor; aqui garantimos um anel realmente perceptivel.
*/

.PgAttDet1 .BlcModalidade.Ativa:focus-visible {
    outline: 2px solid var(--base-azul) !important;
    outline-offset: 2px;
}

/*
Estado informativo -- atendente indisponivel. Sem hover e sem
cursor de clique, para nao prometer uma acao que nao acontece.
*/

.PgAttDet1 .BlcModalidade.Inativa {
    background: var(--base-fundo2);

    cursor: default;
    opacity: 0.75;
}

/* ------------- */

.PgAttDet1 .BlcModalidade .ExtIcone {
    background: rgba(253, 152, 2, 0.12);
    color: #B36F00;

    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-negative: 0;
    flex-shrink: 0;

    margin: 0px 12px 0px 0px;

    width: 38px;
    height: 38px;

    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
}

.PgAttDet1 .BlcModalidade.Inativa .ExtIcone {
    background: rgba(107, 114, 128, 0.12);
    color: var(--base-texto2);
}

.PgAttDet1 .BlcModalidade .ExtNomeModalidade {
    -webkit-box-flex: 1;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;

    min-width: 0px;

    font-size: 15px;
    font-weight: 600;
    color: var(--base-texto);
    line-height: 20px;
}

.PgAttDet1 .BlcModalidade .ExtPreco {
    -ms-flex-negative: 0;
    flex-shrink: 0;

    padding: 0px 0px 0px 10px;

    text-align: right;

    font-size: 15px;
    font-weight: 700;
    color: var(--base-texto);
    line-height: 18px;
}

.PgAttDet1 .BlcModalidade .ExtPreco small {
    display: block;

    font-size: 11px;
    font-weight: 400;
    color: var(--base-texto2);
}

/* ------------- */

/*
############
PgAttDet1_BlcAcao_Botoes
############
*/

/*
Botao principal do card.

A cor acompanha o STATUS do atendente, exatamente como no card da
listagem (.BoxAtendente.Disponivel/.Ocupado/.Offline .btn-custom6):
verde quando da para atender agora, ambar em consulta, vermelho
offline. Assim o mesmo significado tem a mesma cor nas duas telas.

O verde abaixo e so o padrao (status disponivel); as variacoes por
status vem logo em seguida, escopadas por .BlcAcao.<Status>.
*/

.PgAttDet1 .BlcAcao .BtnPrincipal {
    background: #047857;
    border: 0px;
    color: #FFF;

    display: block;
    width: 100%;

    margin: 0px 0px 10px 0px;
    padding: 15px 18px;

    text-align: center;
    text-decoration: none;

    font-size: 15px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    line-height: 20px;

    cursor: pointer;

    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    border-radius: 12px;

    -webkit-transition: background 0.18s ease-out;
    transition: background 0.18s ease-out;
}

.PgAttDet1 .BlcAcao .BtnPrincipal:hover,
.PgAttDet1 .BlcAcao .BtnPrincipal:focus {
    background: #065F46;
    color: #FFF;

    text-decoration: none;
}

/* ------------- */

/*
############
PgAttDet1_BtnPrincipal_PorStatus
############
*/

/* Disponivel -- verde, a acao que queremos que aconteca */

.PgAttDet1 .BlcAcao.Disponivel .BtnPrincipal {
    background: #047857;
    color: #FFF;
}

.PgAttDet1 .BlcAcao.Disponivel .BtnPrincipal:hover,
.PgAttDet1 .BlcAcao.Disponivel .BtnPrincipal:focus {
    background: #065F46;
    color: #FFF;
}

/* Ocupado -- ambar, mesma familia do selo */

.PgAttDet1 .BlcAcao.Ocupado .BtnPrincipal {
    background: #B45309;
    color: #FFF;
}

.PgAttDet1 .BlcAcao.Ocupado .BtnPrincipal:hover,
.PgAttDet1 .BlcAcao.Ocupado .BtnPrincipal:focus {
    background: #92400E;
    color: #FFF;
}

/*
Ausente -- cinza chumbo. Nao existe na listagem (la o atendente e
so online/offline), mas aqui ha o estado "ausente", que pede um
tom neutro: nem convite, nem alarme.
*/

.PgAttDet1 .BlcAcao.Ausente .BtnPrincipal {
    background: #4B5563;
    color: #FFF;
}

.PgAttDet1 .BlcAcao.Ausente .BtnPrincipal:hover,
.PgAttDet1 .BlcAcao.Ausente .BtnPrincipal:focus {
    background: #374151;
    color: #FFF;
}

/* Offline -- vermelho escuro, mesma familia do selo */

.PgAttDet1 .BlcAcao.Offline .BtnPrincipal {
    background: #991B1B;
    color: #FFF;
}

.PgAttDet1 .BlcAcao.Offline .BtnPrincipal:hover,
.PgAttDet1 .BlcAcao.Offline .BtnPrincipal:focus {
    background: #7F1D1D;
    color: #FFF;
}

/*
Botao secundario -- Avise-me e consulta por e-mail.
*/

.PgAttDet1 .BlcAcao .BtnSecundario {
    background: #FFF;
    border: 1px solid rgba(0, 0, 0, 0.15);
    color: var(--base-texto);

    display: block;
    width: 100%;

    margin: 0px 0px 10px 0px;
    padding: 13px 18px;

    text-align: center;
    text-decoration: none;

    font-size: 14px;
    font-weight: 600;
    line-height: 20px;

    cursor: pointer;

    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    border-radius: 12px;

    -webkit-transition: border-color 0.18s ease-out, background 0.18s ease-out;
    transition: border-color 0.18s ease-out, background 0.18s ease-out;
}

.PgAttDet1 .BlcAcao .BtnSecundario:hover,
.PgAttDet1 .BlcAcao .BtnSecundario:focus {
    background: rgba(253, 152, 2, 0.08);
    border-color: var(--base1);
    color: var(--base-texto);

    text-decoration: none;
}

.PgAttDet1 .BlcAcao .BtnPrincipal:last-child,
.PgAttDet1 .BlcAcao .BtnSecundario:last-child {
    margin-bottom: 0px;
}

/* ------------- */
/*
############
PgAttDet1_BlcSecao
############
*/

/*
Bloco de conteudo da coluna principal (Sobre, Video, Depoimentos,
Artigos). Substitui o antigo par custom-head + hr.icon.
*/

.PgAttDet1 .BlcSecao {
    background: #FFF;
    border: 1px solid rgba(0, 0, 0, 0.08);

    display: block;

    margin: 0px 0px 25px 0px;
    padding: 25px;

    -webkit-border-radius: 16px;
    -moz-border-radius: 16px;
    border-radius: 16px;

    -webkit-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.04), 0px 8px 24px -16px rgba(0, 0, 0, 0.3);
    box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.04), 0px 8px 24px -16px rgba(0, 0, 0, 0.3);
}

.PgAttDet1 .BlcSecao:last-child {
    margin-bottom: 0px;
}

/*
Titulo de secao com a barra laranja a esquerda -- assinatura
visual da marca sem usar laranja como texto (que reprovaria
contraste sobre branco).
*/

.PgAttDet1 .BlcSecao .ExtTituloSecao {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;

    gap: 12px;

    margin: 0px 0px 20px 0px;
    padding: 0px;

    font-size: 21px;
    font-weight: 700;
    color: var(--base-texto);
    line-height: 27px;
}

.PgAttDet1 .BlcSecao .ExtTituloSecao:before {
    background: var(--base1);

    content: "";
    display: block;
    -ms-flex-negative: 0;
    flex-shrink: 0;

    width: 4px;
    height: 22px;

    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}

.PgAttDet1 .BlcSecao .ExtTexto {
    font-size: 15px;
    color: var(--base-texto);
    line-height: 25px;
}

/* ------------- */

/*
############
PgAttDet1_BlcInfos
############
*/

/*
Experiencia, Horario e Oraculos. Antes viviam duplicados entre a
sidebar (desktop) e o corpo (mobile); agora sao um bloco unico
que se adapta por CSS.

Um card por linha, ocupando a largura toda: os valores sao textos
corridos (listas de oraculos, faixas de horario) que ficavam
espremidos em tres colunas estreitas e quebravam em varias linhas.
*/

.PgAttDet1 .BlcInfos {
    display: grid;
    grid-template-columns: 1fr;

    gap: 12px;
}

/* ------------- */

/*
Card de informacao.

Estrutura: um icone em bloco proprio a esquerda e, a direita, o
rotulo sobre o valor. O icone fora do fluxo do texto e o que da
ao card uma leitura de "ficha", em vez de paragrafo com bolinha.

O fundo e claro e neutro (o mesmo --base-fundo2 do resto da
pagina). A identificacao de cada tipo vem da cor do icone, nao de
um fundo colorido -- assim os tres se leem como um conjunto e a
secao nao compete com o card de acao.
*/

.PgAttDet1 .BlcInfo {
    background: var(--base-fundo2);
    border: 1px solid rgba(0, 0, 0, 0.08);

    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    position: relative;

    gap: 13px;

    padding: 16px;

    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    border-radius: 12px;

    -webkit-transition: border-color 0.2s ease-out, background 0.2s ease-out;
    transition: border-color 0.2s ease-out, background 0.2s ease-out;
}

.PgAttDet1 .BlcInfo:hover {
    background: #FFFFFF;
    border-color: rgba(253, 152, 2, 0.45);
}

/* ------------- */

/*
Quadrado do icone. A cor de fundo e do proprio icone mudam por
tipo de card -- ver as regras por tipo abaixo.
*/

.PgAttDet1 .BlcInfo .ExtIcone {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-negative: 0;
    flex-shrink: 0;

    width: 40px;
    height: 40px;

    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
}

/* ------------- */

.PgAttDet1 .BlcInfo .ExtConteudo {
    -webkit-box-flex: 1;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;

    min-width: 0px;

    padding: 2px 0px 0px 0px;
}

/*
Rotulo em negrito, como titulo do card, com o valor na linha de
baixo. Sem caixa alta: os nomes sao longos ("Horario de
Atendimento") e em maiusculas quebravam em duas linhas.
*/

.PgAttDet1 .BlcInfo .ExtRotulo {
    display: block;

    margin: 0px 0px 3px 0px;

    font-size: 13px;
    font-weight: 700;
    color: var(--base-texto);
    line-height: 19px;
}

.PgAttDet1 .BlcInfo .ExtValor {
    display: block;

    font-size: 14px;
    color: var(--base-texto2);
    line-height: 21px;

    /* Quebra nomes longos de oraculos sem estourar o card */
    overflow-wrap: break-word;
    word-wrap: break-word;
}

/* ------------- */

/*
Cor por tipo -- so no icone.

Os tres tons saem da paleta da marca: laranja queimado, azul
marinho e o verde de disponibilidade. Sobre o fundo claro do
quadrado todos passam de 4.5:1.
*/

.PgAttDet1 .BlcInfo.Experiencia .ExtIcone {
    background: rgba(253, 152, 2, 0.16);
    color: #8A5A00;
}

.PgAttDet1 .BlcInfo.Horario .ExtIcone {
    background: rgba(0, 57, 100, 0.10);
    color: var(--base-azul);
}

/*
O #047857 sobre este fundo da 4.43:1 e fica logo abaixo do minimo
AA (4.5:1). O tom um passo mais escuro sobe para 5.4:1.
*/

.PgAttDet1 .BlcInfo.Oraculos .ExtIcone {
    background: rgba(4, 120, 87, 0.12);
    color: #065F46;
}

/* ------------- */

/*
############
PgAttDet1_BlcConheca
############
*/

/*
Texto de apresentacao + video lado a lado.

O video de apresentacao e gravado na VERTICAL (retrato). Ocupando
a largura toda ele apareceria pequeno no meio de duas tarjas
pretas enormes; numa coluna estreita ao lado do texto ele preenche
o quadro e ainda encurta a secao.
*/

.PgAttDet1 .BlcConheca {
    display: block;
}

.PgAttDet1 .BlcConheca.ComVideo {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;

    gap: 22px;
}

.PgAttDet1 .BlcConheca.ComVideo .ExtTexto {
    -webkit-box-flex: 1;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;

    min-width: 0px;
}

/* ------------- */

/*
############
PgAttDet1_BlcVideo
############
*/

.PgAttDet1 .BlcVideo {
    background: #000;
    border: 0px;

    display: block;
    overflow: hidden;
    position: relative;

    -webkit-border-radius: 14px;
    -moz-border-radius: 14px;
    border-radius: 14px;

    /*
    So a sombra destaca o video -- sem moldura branca em volta,
    que criava uma borda visivel entre o video e o card.
    */
    -webkit-box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.10), 0px 14px 34px -12px rgba(0, 0, 0, 0.45);
    box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.10), 0px 14px 34px -12px rgba(0, 0, 0, 0.45);
}

/*
Coluna do video ao lado do texto: largura fixa e proporcao 9:16
(retrato), que e como o video e gravado.
*/

.PgAttDet1 .BlcConheca.ComVideo .BlcVideo {
    -ms-flex-negative: 0;
    flex-shrink: 0;

    width: 310px;
}

.PgAttDet1 .BlcConheca.ComVideo .BlcVideo video,
.PgAttDet1 .BlcConheca.ComVideo .BlcVideo iframe {
    display: block;
    border: 0px;

    width: 100%;
    height: auto;
    aspect-ratio: 9 / 16;

    object-fit: cover;
}

/*
Fallback para navegadores sem aspect-ratio: sem isso o video ficaria
sem altura nenhuma nos mais antigos.
*/

@supports not (aspect-ratio: 9 / 16) {

    .PgAttDet1 .BlcConheca.ComVideo .BlcVideo video,
    .PgAttDet1 .BlcConheca.ComVideo .BlcVideo iframe {
        height: 427px;
    }

}

/* ------------- */

/*
############
PgAttDet1_BlcNotas
############
*/

/*
Resumo das avaliacoes: barra por quantidade de estrelas, clicavel
para filtrar os depoimentos.
*/

.PgAttDet1 .BlcNotas {
    background: var(--base-fundo2);
    border: 1px solid rgba(0, 0, 0, 0.06);

    display: block;

    margin: 0px 0px 22px 0px;
    padding: 18px;

    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    border-radius: 12px;
}

.PgAttDet1 .BlcNotas .ExtResumo {
    margin: 0px 0px 16px 0px;

    font-size: 14px;
    color: var(--base-texto);
    line-height: 21px;
}

.PgAttDet1 .BlcNotas .ExtLinha {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;

    gap: 10px;

    margin: 0px 0px 8px 0px;

    text-decoration: none;
}

.PgAttDet1 .BlcNotas .ExtLinha:last-child {
    margin-bottom: 0px;
}

.PgAttDet1 .BlcNotas .ExtLinha .ExtEstrelas {
    -ms-flex-negative: 0;
    flex-shrink: 0;

    width: 90px;

    font-size: 12px;
    line-height: 16px;
}

.PgAttDet1 .BlcNotas .ExtLinha .ExtEstrelas .fa-star {
    color: #EC971F;
}

/*
Trilho + barra de progresso. A largura da barra vem inline do PHP
porque depende do percentual calculado por atendente.
*/

.PgAttDet1 .BlcNotas .ExtBarra {
    background: rgba(0, 0, 0, 0.08);

    display: block;
    overflow: hidden;
    position: relative;

    -webkit-box-flex: 1;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;

    height: 10px;

    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}

.PgAttDet1 .BlcNotas .ExtBarra span {
    background: var(--base1);

    display: block;
    position: absolute;
    left: 0px;
    top: 0px;

    height: 100%;

    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}

.PgAttDet1 .BlcNotas .ExtLinha .ExtQtd {
    -ms-flex-negative: 0;
    flex-shrink: 0;

    width: 40px;

    text-align: right;

    font-size: 13px;
    font-weight: 600;
    color: var(--base-texto2);
    line-height: 18px;
}

.PgAttDet1 .BlcNotas a.ExtLinha:hover .ExtQtd {
    color: var(--base-texto);
}

/* ------------- */

/*
############
PgAttDet1_BlcGradeDepoimentos
############
*/

/*
Depoimentos em duas colunas, como na grade da listagem.
Os cartoes esticam para a mesma altura na linha (align-items do
grid faz isso por padrao com stretch).
*/

.PgAttDet1 .BlcGradeDepoimentos {
    display: grid;
    grid-template-columns: repeat(2, 1fr);

    gap: 16px;

    margin: 0px 0px 20px 0px;
}

/*
Dentro da grade o cartao nao precisa da margem inferior propria --
quem cuida do espacamento e o gap.
*/

.PgAttDet1 .BlcGradeDepoimentos .BoxDepoimento2 {
    height: 100%;

    margin: 0px;
}

@media screen and (max-width: 767px) {

    .PgAttDet1 .BlcGradeDepoimentos {
        grid-template-columns: 1fr;
    }

}

/* ------------- */

/*
Aviso de lista vazia (nenhum depoimento / nenhum artigo).
*/

.PgAttDet1 .BoxAviso1 {
    background: var(--base-fundo2);
    border: 1px dashed rgba(0, 0, 0, 0.15);

    text-align: center;

    margin: 0px;
    padding: 25px;

    font-size: 15px;
    color: var(--base-texto2);

    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    border-radius: 12px;
}

/* ------------- */
/*
############
PgAttDet1_Responsivo
############
*/

/*
Tablet: o sticky continua, mas com menos respiro lateral.
*/

@media screen and (max-width: 991px) {

    /* ------------- */

    .PgAttDet1 .BlcHero {
        padding: 28px 0px;
    }

    .PgAttDet1 .BlcHero .ExtFoto {
        margin-right: 20px;

        width: 130px;
        height: 130px;
    }

    .PgAttDet1 .BlcHero .ExtNome {
        font-size: 26px;
        line-height: 32px;
    }

    /* ------------- */

}

/* ------------- */

@media screen and (max-width: 767px) {

    /* ------------- */

    /*
    No mobile o card sai do fluxo (vira barra fixa), entao a linha
    volta a ser bloco comum -- flex aqui so atrapalharia.
    */

    .PgAttDet1 .row.BlcColunas {
        display: block;
    }

    /* ------------- */

    /*
    Hero empilhado e centralizado no mobile.
    */

    .PgAttDet1 .BlcHeroFaixa {
        margin-bottom: 18px;
    }

    .PgAttDet1 .BlcHero {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;

        text-align: center;

        padding: 25px 0px;
    }

    .PgAttDet1 .BlcHero .ExtFoto {
        margin: 0px 0px 15px 0px;

        width: 120px;
        height: 120px;
    }

    .PgAttDet1 .BlcHero .ExtNome {
        font-size: 23px;
        line-height: 29px;
    }

    .PgAttDet1 .BlcHero .ExtNota {
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
    }

    .PgAttDet1 .BlcHero .BlcCategorias {
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
    }

    .PgAttDet1 .BlcHero .ExtVoltar {
        margin: 18px 0px 0px 0px;

        width: 100%;
    }

    .PgAttDet1 .BlcHero .ExtBotaoVoltar {
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
    }

    /* ------------- */

    /*
    Texto e video empilham no mobile, e o video passa a ser
    centralizado com largura limitada -- em tela estreita ele nao
    precisa (nem deve) ocupar a largura toda.
    */

    .PgAttDet1 .BlcConheca.ComVideo {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;

        gap: 18px;
    }

    .PgAttDet1 .BlcConheca.ComVideo .BlcVideo {
        width: 100%;
        max-width: 260px;

        margin: 0px auto;
    }

    /* ------------- */

    .PgAttDet1 .BlcSecao {
        margin-bottom: 18px;
        padding: 18px;
    }

    .PgAttDet1 .BlcSecao .ExtTituloSecao {
        font-size: 18px;
        line-height: 24px;
    }

    /* ------------- */

    /*
    A barra de notas fica apertada no mobile: reduzimos a coluna
    das estrelas para a barra continuar legivel.
    */

    .PgAttDet1 .BlcNotas .ExtLinha .ExtEstrelas {
        width: 72px;

        font-size: 11px;
    }

    /* ------------- */

    /*
    CARD DE ACAO NO MOBILE
    Deixa de ser sticky lateral e vira barra fixa no rodape, com
    apenas o essencial: status + acao principal.
    */

    .PgAttDet1 .BlcAcao {
        background: #FFF;
        border: 0px;
        border-top: 1px solid rgba(0, 0, 0, 0.10);

        position: fixed;
        left: 0px;
        right: 0px;
        bottom: 0px;
        top: auto;
        z-index: 1000;

        margin: 0px;
        padding: 12px 15px;

        max-height: none;
        overflow: visible;

        -webkit-border-radius: 0px;
        -moz-border-radius: 0px;
        border-radius: 0px;

        -webkit-box-shadow: 0px -4px 16px rgba(0, 0, 0, 0.12);
        box-shadow: 0px -4px 16px rgba(0, 0, 0, 0.12);
    }

    /*
    Na barra fixa nao cabe a lista de precos nem o cabecalho --
    eles seguem visiveis na secao "Formas de atendimento" do corpo
    da pagina, entao nao se perde informacao.
    */

    .PgAttDet1 .BlcAcao .ExtCabecalho,
    .PgAttDet1 .BlcAcao .BlcModalidades,
    .PgAttDet1 .BlcAcao .ExtAviso {
        display: none;
    }

    .PgAttDet1 .BlcAcao .BtnPrincipal,
    .PgAttDet1 .BlcAcao .BtnSecundario {
        margin-bottom: 0px;
        padding: 14px 18px;
    }

    /*
    Quando ha dois botoes (ex.: Avise-me + E-mail) eles dividem a
    largura em vez de empilhar e ocupar meia tela.
    */

    .PgAttDet1 .BlcAcao .BlcBotoes {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;

        gap: 10px;
    }

    .PgAttDet1 .BlcAcao .BlcBotoes .BtnPrincipal,
    .PgAttDet1 .BlcAcao .BlcBotoes .BtnSecundario {
        -webkit-box-flex: 1;
        -ms-flex: 1 1 0px;
        flex: 1 1 0px;

        min-width: 0px;
    }

    /*
    Compensa a altura da barra fixa para o ultimo bloco da pagina
    nao ficar escondido atras dela.
    */

    .PgAttDet1 {
        padding-bottom: 90px;
    }

    /*
    O botao flutuante do WhatsApp e fixed em bottom:20px e ficaria
    por cima da barra de acao. Aqui ele sobe o suficiente para os
    dois conviverem -- so nesta pagina, onde a barra existe.
    */

    body.PgAttDetBody .BlcWhatsapp1 {
        bottom: 90px;
    }

    /* ------------- */

}

/* ------------- */

/*
############
PgAttDet1_BlcFiltroAtivo
############
*/

/*
Aviso de filtro ativo nos depoimentos (?NotaDep=N), com atalho
para limpar. Sem isso o cliente ve uma lista curta e nao entende
que esta filtrada.
*/

.PgAttDet1 .BlcFiltroAtivo {
    background: rgba(253, 152, 2, 0.10);
    border: 1px solid rgba(253, 152, 2, 0.35);

    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;

    gap: 10px;

    margin: 0px 0px 18px 0px;
    padding: 11px 15px;

    font-size: 14px;
    color: var(--base-texto);
    line-height: 20px;

    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
}

.PgAttDet1 .BlcFiltroAtivo a {
    color: #8A5A00;

    font-weight: 700;
    text-decoration: underline;
}

.PgAttDet1 .BlcFiltroAtivo a:hover,
.PgAttDet1 .BlcFiltroAtivo a:focus {
    color: var(--base-texto);
}

/* ------------- */

/*
############
CapaPacotes
############
*/

/*
Pacotes promocionais de creditos na capa, TODOS EM UMA UNICA LINHA.

Hierarquia do card: o preco e o elemento dominante, o valor em creditos
vem logo abaixo como consequencia, e o percentual de bonus fecha como
selo. O pacote de melhor bonus percentual ganha a borda laranja e o
botao solido -- os demais ficam com botao de contorno, para que haja um
unico caminho visual primario por secao.

A grade e de 4 colunas no computador, caindo para 3 / 2 / 1 conforme a
tela estreita -- ver os breakpoints no fim deste bloco. Como o card e
estreito mesmo no desktop (um quarto do container), a escala tipografica
aqui e menor que a de um card isolado, e o botao perde o texto longo
("Comprar Creditos" viraria duas ou tres linhas nessa largura).
*/

.CapaPacotes {
    background: var(--base-fundo2);
}

.CapaPacotes .ExtChamada {
    color: var(--base-texto2);

    max-width: 620px;

    margin: -30px auto 40px auto;

    font-size: 15px;
    line-height: 150%;
    text-align: center;
}

/*
A grade dos pacotes. O espacamento entre cards e feito com margem lateral
nos proprios cards (8px de cada lado); a margem negativa aqui cancela
essa folga nas pontas, para a grade alinhar com o restante do container.
A largura de cada card ja desconta essas margens via calc().

O padding-top de 16px existe para o selo "Melhor oferta", que fica
saltado para fora do topo do card, e a linha de baixo repete essa folga
quando os cards quebram para uma segunda linha.
*/
.CapaPacotes .GRow_Pacotes {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;

    -ms-flex-wrap: wrap;
    flex-wrap: wrap;

    -webkit-box-align: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;

    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;

    margin: 0px -8px;
    padding: 16px 0px 0px 0px;
}

/* ------------- */

/*
Cada pacote. A largura vem do breakpoint (25% no computador) e o
flex-grow fica em 0 para que uma linha incompleta -- 6 pacotes em 4
colunas deixam 2 na segunda linha -- nao estique os cards restantes ate
ocuparem a largura toda. Eles ficam do mesmo tamanho dos de cima,
centralizados pelo justify-content do container.

A margem inferior e o respiro entre a primeira e a segunda linha, e
tambem acomoda o selo do card de baixo.
*/
.CapaPacotes .BoxPacote {
    background: #FFF;
    border: 1px solid #E5E7EB;

    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;

    position: relative;

    padding: 24px 16px 20px 16px;

    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;

    width: 25%;
    width: -webkit-calc(25% - 16px);
    width: calc(25% - 16px);

    margin: 0px 8px 26px 8px;

    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;

    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;

    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;

    text-align: center;

    -webkit-transition: border-color 0.2s ease, box-shadow 0.2s ease;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.CapaPacotes .BoxPacote:hover {
    border-color: var(--base1);

    -webkit-box-shadow: 0px 6px 20px -8px rgba(0, 0, 0, 0.22);
    box-shadow: 0px 6px 20px -8px rgba(0, 0, 0, 0.22);
}

/*
Destaque: borda laranja mais grossa. O padding compensa os 2px extras
da borda, senao o card do destaque fica com altura diferente dos outros.
*/
.CapaPacotes .BoxPacote.Destaque {
    border: 2px solid var(--base1);

    padding: 23px 15px 19px 15px;
}

/* ------------- */

/*
Selo "Melhor oferta": laranja com texto preto. Sobre #FD9802 o branco
daria 2.17:1 e reprovaria o WCAG AA -- o preto da 9.67:1.
*/
.CapaPacotes .BoxPacote .ExtSelo {
    background: var(--base1);
    color: var(--base1-texto);

    position: absolute;
    top: -12px;
    left: 50%;

    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);

    padding: 4px 12px;

    white-space: nowrap;

    -webkit-border-radius: 99px;
    -moz-border-radius: 99px;
    border-radius: 99px;

    font-size: 10px;
    font-weight: bold;
    line-height: normal;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* ------------- */

.CapaPacotes .BoxPacote .ExtCorpo {
    -webkit-box-flex: 1;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;

    margin: 0px 0px 16px 0px;
}

.CapaPacotes .BoxPacote .ExtTitulo {
    color: var(--base-texto2);

    margin: 0px 0px 10px 0px;

    font-size: 11px;
    font-weight: bold;
    line-height: 130%;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.CapaPacotes .BoxPacote .ExtValor {
    color: var(--base-texto);

    margin: 0px 0px 8px 0px;

    font-size: 28px;
    font-weight: bold;
    line-height: 1;

    white-space: nowrap;
}

.CapaPacotes .BoxPacote .ExtValorMoeda {
    margin: 0px 2px 0px 0px;

    font-size: 15px;
    font-weight: bold;
    vertical-align: 4px;
}

.CapaPacotes .BoxPacote .ExtCreditos {
    color: var(--base-texto2);

    margin: 0px 0px 10px 0px;

    font-size: 12px;
    line-height: 140%;
}

.CapaPacotes .BoxPacote .ExtCreditos strong {
    color: var(--base-texto);

    font-weight: bold;
}

/*
Selo do bonus em verde: e ganho, nao alerta. Fundo #D1FAE5 com texto
#065F46 da 6.78:1 -- o mesmo par ja usado no status "disponivel".
*/
.CapaPacotes .BoxPacote .ExtBonus {
    background: #D1FAE5;
    color: #065F46;

    display: inline-block;

    padding: 3px 10px;

    -webkit-border-radius: 99px;
    -moz-border-radius: 99px;
    border-radius: 99px;

    font-size: 11px;
    font-weight: bold;
    line-height: normal;
    white-space: nowrap;
}

/* ------------- */

/*
O botao herdaria do .btn-custom6/7 global uma forma pensada para botoes
pequenos (cantos de 5px, altura curta). Aqui ele e a acao final do card,
entao ganha corpo proprio: altura confortavel, cantos arredondados e um
leve deslocamento no hover para dar retorno ao clique.
*/
.CapaPacotes .BoxPacote .ExtBtn .btn {
    width: 100%;
    height: auto;

    margin: 0px;
    padding: 11px 10px;

    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;

    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;

    border: 2px solid transparent;

    font-size: 13px;
    font-weight: bold;
    line-height: 1.2;
    letter-spacing: 0.02em;

    white-space: nowrap;

    display: block;
    text-align: center;
    text-decoration: none !important;

    -webkit-transition: background-color 0.18s ease, border-color 0.18s ease, -webkit-transform 0.18s ease, -webkit-box-shadow 0.18s ease;
    transition: background-color 0.18s ease, border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}

/*
A palavra "Creditos" do botao. Some nas larguras de card estreito (4 e 3
colunas), onde "Comprar Creditos" nao cabe em uma linha; volta a partir
de 2 colunas. E "display: none" e nao um texto diferente no PHP porque o
rotulo completo precisa continuar no DOM para o leitor de tela.
*/
.CapaPacotes .BoxPacote .ExtBtn .btn .ExtBtnComp {
    display: none;
}

/*
Botao primario (pacote em destaque): laranja solido com texto preto
(9.67:1). Ganha sombra na cor da marca para se destacar do card branco.
*/
.CapaPacotes .BoxPacote.Destaque .ExtBtn .btn {
    background: var(--base1) !important;
    color: var(--base1-texto) !important;

    border-color: var(--base1);

    /*
    O !important e necessario: o .btn-custom6 global aplica
    "box-shadow: none !important", que sem isso anula a sombra.
    */
    -webkit-box-shadow: 0px 4px 12px -4px rgba(253, 152, 2, 0.65) !important;
    box-shadow: 0px 4px 12px -4px rgba(253, 152, 2, 0.65) !important;
}

.CapaPacotes .BoxPacote.Destaque .ExtBtn .btn:hover,
.CapaPacotes .BoxPacote.Destaque .ExtBtn .btn:focus {
    background: var(--base1-hover) !important;
    color: var(--base1-texto) !important;

    border-color: var(--base1-hover);

    -webkit-transform: translateY(-2px);
    -ms-transform: translateY(-2px);
    transform: translateY(-2px);

    -webkit-box-shadow: 0px 7px 18px -5px rgba(253, 152, 2, 0.75) !important;
    box-shadow: 0px 7px 18px -5px rgba(253, 152, 2, 0.75) !important;
}

/*
Botao secundario (pacotes sem destaque): contorno laranja sobre branco,
com texto escuro. O btn-custom7 e laranja solido por padrao -- aqui ele e
neutralizado no escopo da secao para que so o pacote em destaque tenha
botao preenchido, e haja um unico caminho visual primario.

O texto usa --base-texto (#1F2937, 12.6:1 sobre branco) e nao o laranja:
laranja sobre branco da 2.17:1 e reprovaria o WCAG AA.
*/
.CapaPacotes .BoxPacote:not(.Destaque) .ExtBtn .btn {
    background: #FFF !important;
    color: var(--base-texto) !important;

    border-color: var(--base1);
}

.CapaPacotes .BoxPacote:not(.Destaque) .ExtBtn .btn:hover,
.CapaPacotes .BoxPacote:not(.Destaque) .ExtBtn .btn:focus {
    background: var(--base1) !important;
    color: var(--base1-texto) !important;

    border-color: var(--base1);

    -webkit-transform: translateY(-2px);
    -ms-transform: translateY(-2px);
    transform: translateY(-2px);

    -webkit-box-shadow: 0px 6px 16px -5px rgba(253, 152, 2, 0.55) !important;
    box-shadow: 0px 6px 16px -5px rgba(253, 152, 2, 0.55) !important;
}

/*
Foco visivel para navegacao por teclado -- o outline nao pode sumir
junto com o estilo do botao.
*/
.CapaPacotes .BoxPacote .ExtBtn .btn:focus {
    outline: 2px solid var(--base-texto);
    outline-offset: 2px;
}

/* Respeita quem desativou animacoes no sistema. */
@media (prefers-reduced-motion: reduce) {

    .CapaPacotes .BoxPacote .ExtBtn .btn {
        -webkit-transition: none;
        transition: none;
    }

    .CapaPacotes .BoxPacote .ExtBtn .btn:hover,
    .CapaPacotes .BoxPacote .ExtBtn .btn:focus {
        -webkit-transform: none;
        -ms-transform: none;
        transform: none;
    }

}

/* ------------- */

/*
Breakpoints da grade: 4 colunas no computador (o padrao acima), 3 no
tablet em paisagem, 2 no tablet em retrato e 1 no celular.

Os limites acompanham os do Bootstrap ja usado no site (1200 / 992 / 768)
para que a secao quebre junto com o resto da capa, e nao em larguras
proprias.

Com menos colunas o card fica mais largo, entao a tipografia volta a
crescer -- a reducao do desktop existia so por causa do card estreito.
*/

/* Tablet paisagem: 3 colunas. */
@media (max-width: 1199px) {

    .CapaPacotes .BoxPacote {
        width: 33.333%;
        width: -webkit-calc(33.333% - 16px);
        width: calc(33.333% - 16px);
    }

}

/* Tablet retrato: 2 colunas. */
@media (max-width: 991px) {

    .CapaPacotes .BoxPacote {
        width: 50%;
        width: -webkit-calc(50% - 16px);
        width: calc(50% - 16px);

        padding: 26px 20px 22px 20px;
    }

    .CapaPacotes .BoxPacote.Destaque {
        padding: 25px 19px 21px 19px;
    }

    .CapaPacotes .BoxPacote .ExtValor {
        font-size: 34px;
    }

    .CapaPacotes .BoxPacote .ExtValorMoeda {
        font-size: 18px;
        vertical-align: 5px;
    }

    .CapaPacotes .BoxPacote .ExtTitulo {
        font-size: 12px;
    }

    .CapaPacotes .BoxPacote .ExtCreditos {
        font-size: 13px;
    }

    .CapaPacotes .BoxPacote .ExtBtn .btn {
        font-size: 14px;

        padding: 13px 16px;
    }

    .CapaPacotes .BoxPacote .ExtBtn .btn .ExtBtnComp {
        display: inline;
    }

}

/*
Celular: uma coluna, card em largura total. Sem calc() aqui -- com um
card por linha a margem lateral e desnecessaria, e mante-la deixaria a
secao mais estreita que os demais blocos da capa.
*/
@media (max-width: 767px) {

    .CapaPacotes .ExtChamada {
        margin: -20px auto 26px auto;

        font-size: 14px;
    }

    .CapaPacotes .GRow_Pacotes {
        margin: 0px;
    }

    .CapaPacotes .BoxPacote {
        width: 100%;

        margin: 0px 0px 24px 0px;

        padding: 26px 20px 22px 20px;
    }

    .CapaPacotes .BoxPacote.Destaque {
        padding: 25px 19px 21px 19px;
    }

    .CapaPacotes .BoxPacote .ExtValor {
        font-size: 32px;
    }

}

/* ------------- */
/*
############
BlcAtualizacao
############
*/

/*
Card de atualizacao de plataforma na tela de login. Os clientes vindos da
migracao nao tem senha -- este card e o caminho deles.

O tom e de AVISO INSTITUCIONAL, nao de cadastro novo: cliente antigo que
le "primeiro acesso" acha que perdeu a conta. Por isso o card tem titulo,
explicacao, botao proprio e a linha de tranquilizacao no rodape.
*/

.FLogin .BlcAtualizacao {
    background: var(--base-fundo2);
    border: 1px solid #E5E7EB;
    border-top: 3px solid var(--base1);

    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;

    -webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.06);
    box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.06);

    margin: 22px 0px 0px 0px;
    padding: 16px 18px 14px 18px;

    text-align: center;
}

.FLogin .BlcAtualizacao .ExtTopo {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;

    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;

    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;

    margin: 0px 0px 8px 0px;
}

.FLogin .BlcAtualizacao .ExtIcone {
    color: var(--base1);

    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;

    margin: 0px 8px 0px 0px;

    line-height: 0;
}

.FLogin .BlcAtualizacao .ExtTitulo {
    color: var(--base-texto);

    font-size: 15px;
    font-weight: bold;
    line-height: 130%;
}

.FLogin .BlcAtualizacao .ExtTexto {
    color: var(--base-texto2);

    margin: 0px 0px 14px 0px;

    font-size: 13px;
    line-height: 150%;
}

.FLogin .BlcAtualizacao .ExtAcao {
    margin: 0px 0px 12px 0px;
}

/* Botao do card. Texto PRETO sobre laranja -- ver acessibilidade no CLAUDE.md */

.FLogin .BlcAtualizacao .BtnAtualizacao {
    background: var(--base1);
    color: var(--base1-texto) !important;

    border: 0px;

    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;

    display: inline-block;

    padding: 11px 26px;

    font-size: 13px;
    font-weight: bold;
    letter-spacing: 0.5px;
    line-height: 100%;

    text-decoration: none !important;

    -webkit-transition: background-color 0.18s ease;
    transition: background-color 0.18s ease;
}

.FLogin .BlcAtualizacao .BtnAtualizacao:hover,
.FLogin .BlcAtualizacao .BtnAtualizacao:focus {
    background: var(--base1-hover);
    color: var(--base1-texto) !important;

    text-decoration: none !important;
}

.FLogin .BlcAtualizacao .ExtRodape {
    color: var(--base-texto2);

    border-top: 1px solid #E5E7EB;

    margin: 0px;
    padding: 10px 0px 0px 0px;

    font-size: 12px;
    font-style: italic;
    line-height: 150%;
}

/* ------------- */

/* Tela do modal de primeiro acesso (Carregar5) */

.FLogin5 .ExtIntro {
    color: var(--base-texto2);

    margin: 0px 0px 18px 0px;

    font-size: 14px;
    line-height: 150%;
    text-align: center;
}

.FLogin5 .ExtSucesso {
    padding: 10px 0px;

    text-align: center;
}

.FLogin5 .ExtSucesso .ExtIcone {
    color: var(--base-sucesso);

    margin: 0px 0px 14px 0px;

    line-height: 0;
}

.FLogin5 .ExtSucesso .ExtTitulo {
    color: var(--base-texto);

    margin: 0px 0px 10px 0px;

    font-size: 18px;
    font-weight: bold;
    line-height: 130%;
}

.FLogin5 .ExtSucesso .ExtTexto {
    color: var(--base-texto2);

    margin: 0px auto 12px auto;

    max-width: 380px;

    font-size: 14px;
    line-height: 150%;
}

.FLogin5 .ExtSucesso .ExtObs {
    color: var(--base-texto2);

    font-size: 12px;
    line-height: 150%;
}

/* ------------- */

/*
############
PgSenha -- Clientes_DefinirSenha.php
############

Tela de criacao da nova senha, aberta pelo link do e-mail. Usa o topo e o
rodape do site, mas troca o banner de titulo das paginas internas por esta
faixa escura, para a tarefa ficar em primeiro plano.

Faixa preta da marca com um veu laranja e o painel branco centralizado --
o mesmo par preto+laranja do menu e do rodape.
*/

.PgSenha {
    background: #1B1B1B;

    /*
    Brilho laranja atras do painel. Dois gradientes radiais sobre o preto --
    de proposito em CSS, e nao em imagem: as imagens do site nao sao
    versionadas (ver .gitignore), entao esta tela nao pode depender de uma.
    */
    background-image:
        -webkit-radial-gradient(50% 0%, 60% 60%, rgba(248, 165, 5, 0.20) 0%, rgba(248, 165, 5, 0) 100%),
        -webkit-radial-gradient(50% 100%, 70% 50%, rgba(248, 165, 5, 0.10) 0%, rgba(248, 165, 5, 0) 100%);
    background-image:
        radial-gradient(60% 60% at 50% 0%, rgba(248, 165, 5, 0.20) 0%, rgba(248, 165, 5, 0) 100%),
        radial-gradient(70% 50% at 50% 100%, rgba(248, 165, 5, 0.10) 0%, rgba(248, 165, 5, 0) 100%);

    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;

    padding: 52px 18px 56px 18px;

    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;

    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;

    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

/* ------------- */
/* Coluna central */

.PgSenha_Centro {
    width: 100%;
    max-width: 468px;
}

/* ------------- */
/* Painel */

.PgSenha_Painel {
    background: #FFF;

    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    border-radius: 12px;

    overflow: hidden;

    -webkit-box-shadow: 0px 18px 50px -12px rgba(0, 0, 0, 0.55);
    box-shadow: 0px 18px 50px -12px rgba(0, 0, 0, 0.55);
}

/*
Faixa do topo. Laranja com texto PRETO -- branco sobre o laranja da marca
da 2.02:1 e reprova o WCAG AA (ver CLAUDE.md).
*/

.PgSenha_Painel .ExtFaixa {
    background: var(--base1);
    color: var(--base1-texto);

    padding: 11px 16px;

    font-size: 11px;
    font-weight: bold;
    letter-spacing: 0.8px;
    line-height: 100%;
    text-align: center;
    text-transform: uppercase;
}

.PgSenha_Painel .ExtFaixaIcone {
    display: inline-block;

    margin: 0px 5px 0px 0px;

    vertical-align: -4px;

    line-height: 0;
}

.PgSenha_Painel .ExtCorpo {
    padding: 32px 34px 28px 34px;
}

/* ------------- */
/* Textos */

.PgSenha_Painel .ExtTitulo {
    color: var(--base-texto);

    margin: 0px 0px 10px 0px;
    padding: 0px;

    font-size: 25px;
    font-weight: bold;
    line-height: 128%;
}

.PgSenha_Painel .ExtIntro {
    color: var(--base-texto2);

    margin: 0px 0px 26px 0px;

    font-size: 14px;
    line-height: 158%;
}

/* Icone do painel de erro */

.PgSenha_PainelErro .ExtIconeErro {
    background: #FEE2E2;
    color: var(--base-erro);

    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;

    width: 58px;
    height: 58px;

    margin: 0px 0px 18px 0px;

    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;

    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;

    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

/* ------------- */
/* Mensagem de erro do envio */

.PgSenha_Painel .ExtErro {
    background: #FEF2F2;
    color: #B91C1C;

    border: 1px solid #FECACA;

    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;

    margin: 0px 0px 20px 0px;
    padding: 12px 14px;

    font-size: 13px;
    line-height: 150%;
}

/* ------------- */
/* Campos */

.PgSenha_Painel .ExtCampo {
    margin: 0px 0px 20px 0px;
}

.PgSenha_Painel .ExtCampo label {
    color: var(--base-texto);

    display: block;

    margin: 0px 0px 7px 0px;

    font-size: 13px;
    font-weight: bold;
    line-height: 100%;
}

/* Wrapper do input, para posicionar o botao de "ver senha" por cima */

.PgSenha_Painel .ExtInput {
    position: relative;
}

.PgSenha_Painel .ExtSenha {
    background: #FFF;
    color: var(--base-texto);

    border: 1px solid #D1D5DB;

    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;

    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;

    width: 100%;

    padding: 12px 46px 12px 14px;

    font-family: inherit;
    font-size: 15px;
    line-height: 130%;

    -webkit-transition: border-color 0.15s ease, box-shadow 0.15s ease;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.PgSenha_Painel .ExtSenha:focus {
    border-color: var(--base1);

    outline: 0;

    -webkit-box-shadow: 0px 0px 0px 3px rgba(248, 165, 5, 0.22);
    box-shadow: 0px 0px 0px 3px rgba(248, 165, 5, 0.22);
}

/* Botao de mostrar/ocultar a senha */

.PgSenha_Painel .ExtOlho {
    background: none;
    color: #9CA3AF;

    border: 0px;

    width: 42px;

    padding: 0px;

    position: absolute;
    top: 0px;
    right: 0px;
    bottom: 0px;

    cursor: pointer;
    line-height: 0;

    -webkit-transition: color 0.15s ease;
    transition: color 0.15s ease;
}

.PgSenha_Painel .ExtOlho:hover,
.PgSenha_Painel .ExtOlho:focus {
    color: var(--base-texto2);

    outline: 0;
}

.PgSenha_Painel .ExtOlhoAtivo {
    color: var(--base1);
}

.PgSenha_Painel .ExtAjuda {
    color: var(--base-texto2);

    margin: 7px 0px 0px 0px;

    font-size: 12px;
    line-height: 140%;
}

/* ------------- */
/* Medidor de forca da senha */

.PgSenha_Painel .ExtForca {
    margin: 10px 0px 0px 0px;

    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;

    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.PgSenha_Painel .ExtForcaBarra {
    background: #E5E7EB;

    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;

    -webkit-box-flex: 1;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;

    height: 5px;

    overflow: hidden;
}

.PgSenha_Painel .ExtForcaNivel {
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;

    width: 0%;
    height: 100%;

    -webkit-transition: width 0.25s ease, background-color 0.25s ease;
    transition: width 0.25s ease, background-color 0.25s ease;
}

.PgSenha_Painel .ExtForcaTexto {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;

    margin: 0px 0px 0px 10px;

    font-size: 11px;
    font-weight: bold;
    line-height: 100%;
}

/* Cores dos niveis. O laranja de aviso vem da paleta (--base-aviso). */

.PgSenha_Painel .ExtForcaNivel.Fraca   { background: var(--base-erro);    }
.PgSenha_Painel .ExtForcaNivel.Media   { background: var(--base-aviso);   }
.PgSenha_Painel .ExtForcaNivel.Boa     { background: #84CC16;             }
.PgSenha_Painel .ExtForcaNivel.Otima   { background: var(--base-sucesso); }

.PgSenha_Painel .ExtForcaTexto.Fraca   { color: var(--base-erro);         }
.PgSenha_Painel .ExtForcaTexto.Media   { color: #B45309;                  }
.PgSenha_Painel .ExtForcaTexto.Boa     { color: #4D7C0F;                  }
.PgSenha_Painel .ExtForcaTexto.Otima   { color: #047857;                  }

/* ------------- */
/* Conferencia das duas senhas */

.PgSenha_Painel .ExtConfere {
    margin: 8px 0px 0px 0px;

    font-size: 12px;
    font-weight: bold;
    line-height: 140%;
}

.PgSenha_Painel .ExtConfereOk {
    color: #047857;
}

.PgSenha_Painel .ExtConfereErro {
    color: var(--base-erro);
}

/* ------------- */
/* Botao principal -- laranja com texto PRETO (10.38:1) */

.PgSenha_Painel .ExtBtn {
    margin: 26px 0px 0px 0px;
}

.PgSenha_Painel .ExtBotao {
    background: var(--base1);
    color: var(--base1-texto) !important;

    border: 0px;

    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;

    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;

    display: block;

    width: 100%;

    padding: 15px 20px;

    font-family: inherit;
    font-size: 14px;
    font-weight: bold;
    letter-spacing: 0.6px;
    line-height: 100%;

    text-align: center;
    text-decoration: none !important;

    cursor: pointer;

    -webkit-transition: background-color 0.18s ease;
    transition: background-color 0.18s ease;
}

.PgSenha_Painel .ExtBotao:hover,
.PgSenha_Painel .ExtBotao:focus {
    background: var(--base1-hover);
    color: var(--base1-texto) !important;

    outline: 0;
    text-decoration: none !important;
}

/*
Loading do envio: ocupa o lugar do botao, com a mesma altura, para o painel
nao "pular" quando um troca pelo outro.
*/

.PgSenha_Painel .ExtLoading {
    color: var(--base-texto2);

    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;

    padding: 15px 20px;

    font-size: 14px;
    font-weight: bold;
    line-height: 100%;

    text-align: center;
}

.PgSenha_Painel .ExtLoading .fa {
    color: var(--base1);

    margin: 0px 5px 0px 0px;
}

/* ------------- */
/* Rodape de tranquilizacao */

.PgSenha_Painel .ExtRodape {
    background: var(--base-fundo2);
    color: var(--base-texto2);

    border-top: 1px solid #E5E7EB;

    padding: 16px 34px;

    font-size: 12px;
    font-style: italic;
    line-height: 158%;

    text-align: center;
}

/* ------------- */
/* Linha de ajuda, fora do painel (sobre o fundo preto da faixa) */

.PgSenha_Ajuda {
    color: rgba(255, 255, 255, 0.55);

    margin: 22px 0px 0px 0px;

    font-size: 13px;
    line-height: 150%;

    text-align: center;
}

.PgSenha_Ajuda a {
    color: var(--base1);

    margin: 0px 0px 0px 4px;

    font-weight: bold;
    text-decoration: none;

    -webkit-transition: color 0.15s ease;
    transition: color 0.15s ease;
}

.PgSenha_Ajuda a:hover,
.PgSenha_Ajuda a:focus {
    color: var(--base1-hover);

    text-decoration: underline;
}

/* ------------- */

@media (max-width: 767px) {

    .PgSenha {
        padding: 34px 14px 38px 14px;
    }

    .PgSenha_Painel .ExtCorpo {
        padding: 26px 22px 24px 22px;
    }

    .PgSenha_Painel .ExtTitulo {
        font-size: 21px;
    }

    .PgSenha_Painel .ExtRodape {
        padding: 15px 22px;
    }

}

/* ------------- */