/* ==========================================================
   LAYOUT GERAL E ELEMENTOS BASE
   ========================================================== */

body {
    font-family: "uni", sans-serif;
    background: #fff;
    color: #000;
}

a { text-decoration: none; color: inherit; }

.img-fluid {
    max-width: 100%;
    height: auto;
}

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

/* ----------------------------------------------------------
   BANNERS E ELEMENTOS GERAIS
   ---------------------------------------------------------- */

.banner, .banner-right, .box-2, .cabecalho_grande, .carregar_mais {
    text-align: center;
}

.banner {
    padding-bottom: 32px;
    width: 300px;
    margin: auto;
}

.cabecalho_grande {
    max-width: 970px;
    margin: 32px auto;
    text-align: center;
}

/* ----------------------------------------------------------
   BREADCRUMBS E TÍTULOS INTERNOS
   ---------------------------------------------------------- */

.breadcrumb {
    padding: 8px 15px;
    margin-bottom: 20px;
    list-style: none;
    border-radius: 4px;
    background: #f6f6f6;
}

.breadcrumb > li {
    display: inline-block;
}

.breadcrumb > li a {
    color: #540413;
}

.breadcrumb > li + li:before {
    content: "/ ";
    padding: 0 5px;
    color: #ccc;
}

.topo-internas h1, .topo-internas h3 {
    font-size: 30px;
    font-weight: 700;
    position: relative;
    margin: 0 0 20px;
    display: flex;
    align-items: center;
}

.topo-internas h1 span, .topo-internas h3 span {
    background: #fff;
    padding: 6px 20px 0 10px;
    position: relative;
    z-index: 10;
}

.topo-internas h1:before {
    content: "";
    width: 100%;
    height: 1px;
    position: absolute;
    top: 20px;
    left: 0;
    background: #dbe1e5;
}

/* ----------------------------------------------------------
   LAYOUT INTERNO / SIDEBAR
   ---------------------------------------------------------- */

.banner_interna_right {
    display: flex;
    justify-content: center;
    position: sticky;
    top: 40px;
}

.banner_interna_right .ads {
    max-width: 300px;
    text-align: center;
}

/* ----------------------------------------------------------
   EFEITO BLUR (LAZYLOAD)
   ---------------------------------------------------------- */

.blur-up {
    -webkit-filter: blur(5px);
    filter: blur(5px);
    transition: filter 400ms, -webkit-filter 400ms;
}

.blur-up.lazyloaded {
    -webkit-filter: blur(0);
    filter: blur(0);
}

/* ----------------------------------------------------------
   POPUP / GRUPOS WHATSAPP E TELEGRAM
   ---------------------------------------------------------- */

.popover_box {
    position: fixed;
    bottom: 75px;
    right: 15px;
    z-index: 99;
}

.ballon {
    border: 1px solid #ccc;
    background: #fff;
    margin-bottom: 15px;
    padding: 18px;
    border-radius: 4px;
    color: #000;
    box-shadow: 0 5px 10px rgba(0,0,0,.2);
    position: relative;
}

.ballon:after, .ballon:before {
    content: "";
    border: 10px solid transparent;
    position: absolute;
    bottom: -10px;
    right: 5px;
}

.ballon:before { border-top-color: #888; }
.ballon:after { border-top-color: #fff; }

.ballon span { font-size: 18px; }

.groups {
    display: flex;
    justify-content: flex-end;
    gap: 15px;
}

.groups a {
    border-radius: 100%;
    box-shadow: 0 1px 1.5px rgba(0,0,0,.12), 0 1px 1px rgba(0,0,0,.24);
}

.groups a.whts { background: #4dc247; }
.groups a.tlg { background: #0088cc; }
.groups a svg { display: block; }

/* ----------------------------------------------------------
   RESPONSIVIDADE
   ---------------------------------------------------------- */

@media (max-width: 600px) {
    .banner { width: 100%; }
    .cabecalho_grande { width: 320px; }
    .topo-internas h1, .topo-internas h3 { font-size: 20px; }
    .popover_box { bottom: 178px; right: 0; }
}