.artigo .canal-top,
.artigo .titulo-canal,
.canal .canal-top {
    position: absolute;
    width: 100%;
    top: 0
}

.artigo .texto,
main,
main section {
    margin-left: auto;
    margin-right: auto
}

.clientes .img-icon-produto img,
.produtos .cases .display-segmentos img {
    filter: contrast(0) brightness(2)
}

.canal .canal-top {
    z-index: -1;
    height: 140px
}

.artigo .canal-top {
    z-index: -1;
    height: 120px
}

.artigo .titulo-canal {
    padding-top: 80px;
    z-index: 99;
    text-align: center;
    display: none
}

main {
    min-height: 630px
}

.artigo .head {
    height: auto;
    padding-bottom: 10px;
    padding-top: 10px;
    position: relative;
    z-index: 0;
    background-position: center -300px;
    background-size: cover;
    background-blend-mode: overlay
}

.homilias {
    display: block;
}

.artigo .homilias .texto {
    max-width: 750px;
    margin: auto;
    display: block;
    float: none;
}

.artigo .texto .listagempadrao {
    font-size: 18px;
    line-height: 28px;
    font-family: Arial, Helvetica, sans-serif;
    color: #333;
    text-shadow: 0 0 0 #FFF;
}

.artigo .texto .listagempadrao,
.artigo .texto>.imagem_centro,
.artigo .texto>.imagem_right,
.artigo .texto>.imagem_left {
    width: 100%;
    margin: auto;
    margin-top: 30px;
    margin-bottom: 30px;
}


.artigo .tempo-leitura {
    font-size: 12px;
    border-bottom: 1px solid #efefef;
    color: #666;
    padding-top: 10px;
    padding-bottom: 10px;
}

/* Acompanha o container do site (resp.css, bloco desktop). Era 1024px. */
.homilias .homilias-block {
    max-width: 1180px;
    margin: auto;
}

.homilias .homilias-block .head-video {
    padding-left: 20px;
    padding-right: 20px;
    display: inline-block;
    width: 55%;
}

.homilias .homilias-block .head-novideo {
    width: 110px;
}

.homilias .homilias-block .head-texto {
    padding-left: 20px;
    padding-right: 20px;
    display: inline-block;
    width: 40%;
    vertical-align: top;
}

@media screen and (max-width: 992px) {
    .homilias .homilias-block .head-video {
        width: 100%;
    }

    .homilias .homilias-block .head-texto {
        width: 100%;
    }
}

.artigo .homilias .homilias-block h1 {
    display: inline-block;
    vertical-align: top;
    margin-top: 20px;
    font-size: 24px;
    line-height: normal;
    width: 100%;
}

.artigo .homilias .homilias-block h2 {
    display: inline-block;
    vertical-align: top;
    font-size: 14px;
    margin-top: 20px;
    font-weight: 300;
    line-height: 22px;
    color: #CCC;
    width: 100%;
}

.artigo .homilias .homilias-block .data {
    display: inline-block;
    color: #FFF;
    width: 100%;
}

.artigo .dados,
.bg-head {
    position: absolute;
    width: 100%;
    left: 0
}

.artigo .tag-artigo {
    background-size: 0 100%, 138% 100%;
    background-position: 100% 100%, 61% 100%;
    background-repeat: no-repeat;
    border-radius: 40px;
    text-transform: uppercase;
    letter-spacing: 0;
    font-size: 13px;
    font-weight: 600;
    color: #315f65;
    width: 992px;
    margin: auto;
    padding: 2px;
    margin-top: 10px;
}

.artigo .head h1,
.canal .head h1 a,
.fechar-modal a,
.pagination .active a {
    color: #fff
}

.artigo .head h1 a {
    color: #2b4457
}

.artigo section h2 {
    font-weight: 300;
    font-size: 25px;
    color: #818080;
    margin-top: 10px;
    margin-bottom: 10px
}

.artigo .dados {
    margin-top: -30px;
    z-index: 9
}

.bg-head {
    top: 64px;
    background-color: #422971;
    height: 280px;
    box-shadow: inset 1px 1px 141px #000
}

.artigo .dados h3,
.artigo .dados h4 {
    font-size: 12px;
    text-align: left;
    color: #9f9f9f;
    width: 80%;
    margin: 0 auto
}

.artigo .dados h4 {
    font-size: 9px;
    line-height: 12px;
    color: #57849c;
    letter-spacing: 0;
    text-transform: uppercase
}

.artigo .dados h4 a {
    text-decoration: none;
    color: #2b4457
}

.artigo .dados h3 {
    line-height: 14px
}

/*main section .img-main-interno-wide{margin-left:-215px;width:1175px;overflow:hidden;border-radius:3px;-moz-border-radius:3px;-webkit-border-radius:3px;-khtml-border-radius:3px}*/
.img_conteudo,
.interno .texto .clientes .list-clientes .img-capa img,
.produtos .bloco_listagem>div img,
.produtos .list-above .img-capa img,
.produtos .list-above-capa .img-capa img,
.texto iframe,
main section .img-main-interno-wide img,
ul.listagem-itens li img,
ul.listagem-titulos>li>img {
    width: 100%
}

.artigo .texto {
    margin-top: 20px;
    color: #333;
    width: 90%;
    letter-spacing: 0;
    text-align: left;
    -webkit-font-smoothing: antialiased
}

.artigo .texto .data {
    font-size: 13px;
    background: linear-gradient(to right, rgb(169 255 255), rgb(91 255 255), rgb(255 23 152), rgb(169 255 255), rgb(255 255 255)), linear-gradient(to right, rgb(111 251 245), rgb(255 101 229), rgb(177 24 187));
    background-size: 100% 1px, 0 1px;
    background-position: 100% 60%, 0 100%;
    background-repeat: no-repeat;
    transition: background-size .4s;
    margin-bottom: 20px
}

.artigo .texto .data span {
    display: table;
    background-color: #fff;
    border: 1px solid #dfedf1;
    border-radius: 20px;
    padding-left: 20px;
    padding-right: 20px;
    color: #9f9f9f;
    margin-left: 20px
}

.texto .pg-erro-titulo {
    font-size: 20px
}

.texto .pg-erro-titulo .pg-err-1 {
    font-weight: 700;
    padding-right: 10px;
    float: left;
    letter-spacing: -.6pt
}

.texto .pg-erro-titulo .pg-err-2 {
    font-weight: 300
}

.texto .pg-erro-mensagem {
    border: 2px solid #ddd;
    margin-top: 20px;
    padding: 40px;
    font-size: 13px;
    line-height: 17px;
    color: #666;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    -khtml-border-radius: 5px
}

.texto {
    z-index: 9
}

/* ── O cartão de citação ────────────────────────────────────────────
   Alcança os TRÊS caminhos, porque `.texto` é o invólucro do corpo do artigo e
   vale 0,1,1 — mais que a classe do bloco:
     · o <blockquote> do texto legado, escrito no editor antigo;
     · o do Quill, feito com o botão de citação dentro de um bloco de Texto;
     · o bloco "Citação" do editor (`.art-bloco--citacao`, 0,1,0).
   É daqui, também, que saíram as medidas do cartão da lista com subitens.

   ─ O ÚLTIMO DE UMA SEQUÊNCIA RESPIRA ──────────────────────────────────
   Empilhados, os cartões ficam a 3px — são um grupo, e o vão pequeno é o que
   diz isso. Mas o último do grupo colava no parágrafo seguinte com o mesmo
   3px, e aí o texto parecia mais um cartão sem caixa.

   A conta: 20 de baixo em TODOS, e −17 no topo de quem vem logo depois de
   outro. Margens vizinhas se fundem (a maior positiva mais a menor negativa),
   então entre dois cartões sobra 20 − 17 = 3px, como antes, e depois do último
   ficam os 20. Os dois números andam juntos: mexeu num, refaça o outro.

   `:not(:has(+ blockquote))` diria a mesma coisa em uma linha, e foi recusado:
   o `:has()` só existe em navegador de 2022 para cá, e num site de paróquia
   isso é gente de verdade ficando sem o espaço.

   Quando o cartão é o ÚLTIMO filho de um bloco de Texto, o
   `.art-bloco--texto > :last-child` (0,2,0) zera esta margem — e está certo:
   ali quem dá o espaço é o próprio bloco.
   ─────────────────────────────────────────────────────────────── */
.texto blockquote {
    font-size: 13px;
    padding: 20px;
    padding-top: 10px;
    padding-bottom: 10px;
    color: #231e1e;
    margin-top: 3px;
    background-color: #ffffff;
    border-radius: 8px;
    margin-bottom: 20px;
    padding-left: 40px;
    background-image: url(../../brandplace/stock_img_avanter/bullet-x.svg);
    background-size: 17px;
    background-position: 10px 13px;
    background-repeat: no-repeat;
    border: 1px solid #ccc;
}

.texto blockquote + blockquote {
    margin-top: -17px;
}

.texto blockquote p {
    font-size: 16px;
    color: #000;
    font-weight: bold;
    margin-bottom: 0;
    cursor: pointer;
}

.texto blockquote table {
    border: 0;
    background-color: transparent;
    line-height: inherit;
    border-spacing: 0;
    padding: 0;
    display: none;
    float: left;
    color: #000;
    margin-top: 20px;
    margin-bottom: 20px;
}

.texto blockquote table td {
    padding: 0;
    line-height: 23px;
}

.texto blockquote table tr:hover {
    cursor: none;
    background-color: inherit;
}

.texto .showtable {
    background-color: #6e7d97;
    color: #ffffff;
}

.texto .showtable table {
    display: table;
    float: inherit;
}

.texto .showtable table ul {
    margin-left: 0;
}

.texto .showtable table ul li {
    font-size: 14px;
    font-weight: normal;
    line-height: 23px;
    list-style: disc;
}

.produtos .over-head {
    background: rgba(15, 15, 15, 0.7);
    min-height: 480px;
}

.produtos .head,
h4,
h5,
h6 {
    position: relative
}

.produtos .head {
    width: 900px;
    margin: auto;
    padding-top: 90px;
}

.produtos .head h1,
.produtos .head h2,
.produtos .texto {
    margin-left: auto;
    margin-right: auto
}

.bg-titulo-produto {
    margin-bottom: 60px
}



.produtos .head h1 {
    color: #FFF;
    font-size: 20px;
    font-weight: 800;
    line-height: 40px;
    letter-spacing: 7px;
    margin-bottom: 0;
    text-align: left;
    text-transform: uppercase
}

.bloco-fulldiv,
h4,
h5 {
    text-align: center
}

.produtos .head h1 a {
    color: #83518e
}

.produtos .head h2 {
    font-size: 11px;
    text-align: center;
    text-transform: uppercase;
    color: #bbb
}

.produtos .texto {
    letter-spacing: 0;
    text-align: left;
    width: 100%
}

.produtos .texto-item,
.produtos table ul {
    font-size: 15px;
    line-height: 20px;
    letter-spacing: 0
}

h4 {
    font-size: 40px;
    font-weight: 100;
    line-height: 45px;
    margin: 25px 0 20px;
    color: #000;
    padding: 0 0 15px
}

h5 {
    font-size: 16px;
    line-height: 18px;
    color: #888;
    text-shadow: 0 0 1px #ccc;
    border: 1px solid #eee;
    border-radius: 40px;
    box-shadow: 0 4px 20px #f9f9f9;
    background-color: #fff;
    width: 80%;
    margin: auto auto 25px;
    padding: 10px 0
}

h5 a {
    color: #666;
    padding: 5px 20px;
    text-decoration: none;
    border-radius: 10px;
    margin: 40px;
    clear: both
}

h5 a:hover {
    text-decoration: none;
    box-shadow: 0 0 6px #004463
}

h6 {
    font-size: 30px;
    font-weight: 100;
    text-shadow: 0 0 1px #000;
    line-height: 33px;
    margin: 5px 0 10px;
    padding: 0;
    color: #333
}

.outros-registros {
    font-size: 26px;
    line-height: 30px;
    font-weight: 300;
    padding-bottom: 10px;
    border-bottom: 1px solid #DDD;
    margin-bottom: 20px;
}

.texto-colunas-3 {
    padding: 15px 0;
    -webkit-column-count: 3;
    -moz-column-count: 3;
    column-count: 3;
    -webkit-column-gap: 40px;
    -moz-column-gap: 40px;
    column-gap: 80px;
    -webkit-column-rule: 1px solid lightgrey;
    -moz-column-rule: 1px solid lightgrey;
    column-rule: 1px solid lightgrey
}

.texto-colunas-2 {
    padding: 15px 0;
    -webkit-column-count: 2;
    -moz-column-count: 2;
    column-count: 2;
    -webkit-column-gap: 80px;
    -moz-column-gap: 80px;
    column-gap: 80px;
    -webkit-column-rule: 1px solid lightgrey;
    -moz-column-rule: 1px solid lightgrey;
    column-rule: 1px solid lightgrey
}

.bloco-fulldiv table caption,
.canal h2,
.cliente .head,
.hotsites h2,
.interno .texto .clientes .list-clientes .chamada,
.interno .texto .clientes .list-clientes .titulo,
.interno .texto .clientes .list-clientes .titulo_complementar,
.produtos .bloco_listagem>div .titles .titulo_att,
.produtos .cases .display-segmentos .segmento-titulo,
.produtos .list-above .chamada,
.produtos .list-above-capa .chamada,
.produtos .list-above-capa .titulo_complementar {
    display: none
}

.produtos .bloco_listagem>div .titles .texto_att {
    margin-top: 10px;
    margin-bottom: 40px;
    font-size: 12px;
    line-height: 15px;
    color: #666e76;
    max-width: 300px
}

.produtos .bloco_listagem>div .titulo_att {
    font-size: 15px;
    text-transform: uppercase;
    margin-top: 10px;
    clear: both
}

.produtos .bl-segmentos h4,
.produtos .bloco_listagem>.row-listagem:first-of-type {
    margin-top: 0
}

.produtos .bloco_listagem>.row-listagem {
    margin: 50px 0 0;
    clear: both;
    font-size: 24px;
    font-weight: 100;
    list-style: none;
    padding: 0;
    -webkit-font-smoothing: antialiased;
    font-kerning: none
}

.produtos .texto-item {
    padding-left: 66px;
    color: #999
}

.divisorBlocos {
    margin-left: -60px
}

.bloco-fulldiv {
    background-color: #efefef !important;
    position: absolute;
    left: 0;
    width: 100%;
    opacity: 0
}

.bloco-fulldiv table {
    padding: 20px !important
}

.bloco-fulldiv table td {
    padding-left: 0;
    padding-right: 0 !important;
    text-align: left
}

.produtos .texto-item ul,
.produtos table ul {
    clear: inherit;
    list-style: circle;
    display: inherit;
    width: auto;
    margin-top: 10px;
    margin-bottom: 10px;
    margin-left: 20px
}

.produtos table ul {
    padding-left: 15px;
    color: #999
}

.produtos .menu-conteudo li span {
    display: table;
    background-color: #ccc;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    float: left;
    margin-right: 10px;
    margin-left: -10px
}

.produtos .menu-conteudo-close {
    position: fixed;
    right: 0;
    top: 0;
    z-index: -1;
    list-style: none;
    text-align: left;
    padding: 10px;
    background: rgba(33, 51, 56, .5) !important;
    color: #fff;
    width: 100%;
    height: 100%;
    opacity: 0
}

.produtos .menu-conteudo-close div {
    font-size: 11px;
    color: #fff;
    position: fixed;
    top: 33%;
    right: -10px;
    background: rgba(33, 51, 56, .9);
    padding-left: 10px;
    padding-right: 40px;
    font-weight: 500;
    text-transform: uppercase;
    border-radius: 3px
}

.produtos .menu-conteudo-close-in {
    margin-right: 0;
    opacity: 1;
    z-index: 9
}

.produtos .menu-conteudo {
    position: fixed;
    right: 0;
    top: 34%;
    z-index: 999;
    list-style: none;
    text-align: left;
    margin-right: -268px;
}

/*.produtos .menu-conteudo:hover{margin-right:-130px}*/
.produtos .menu-conteudo li img {
    width: 70px;
    height: auto;
    float: left
}

/*.produtos .menu-conteudo:hover>.row-menu-listagem{background-color:#fff;box-shadow:1px 4px 9px #ccc}*/
.produtos .menu-conteudo>.row-menu-listagem {
    width: 300px;
    height: 28px;
    clear: both;
    font-size: 13px;
    letter-spacing: 0;
    list-style: none;
    padding: 6px 6px 6px 17px;
    color: #000;
    margin: 1px;
    border-radius: 60px;
    line-height: 16px;
    background-color: transparent;
    box-shadow: none
}

.produtos .menu-conteudo>.row-menu-listagem:hover {
    margin-left: -10px;
    cursor: pointer;
    background-color: #ccc
}

.produtos .menu-conteudo>.row-menu-listagem:hover span {
    background-color: #2ae231;
    box-shadow: inset 0 1px 4px #000;
}

.produtos .menu-conteudo>.row-menu-listagem:first-of-type div {
    display: table-cell;
    vertical-align: middle;
    height: 67px;
    padding-left: 40px
}

.produtos .menu-conteudo:hover>.row-menu-listagem:first-of-type div {
    padding-left: 5px;
    width: 100px
}

.produtos .produtos-listagem {
    text-align: center;
    max-width: 900px
}

.produtos .list-produtos {
    display: inline-block;
    width: 260px;
    height: 430px;
    position: relative;
    overflow: hidden;
    border-radius: 2px;
    margin: 5px;
    background: linear-gradient(#666 0 0) var(--d, 0) 0, linear-gradient(#666 0 0) 0 var(--d, 0), linear-gradient(#666 0 0) var(--p, 100%) 100%, linear-gradient(#666 0 0) 100% var(--p, 100%);
    background-size: var(--d, 0) 1px, 1px var(--d, 0);
    background-repeat: no-repeat;
    transition: .5s, background-position 0s .5s
}

.canal .display-segmentos:hover,
.produtos .list-produtos:hover {
    box-shadow: 0 0 20px #bbb;
    background-color: #fff;
    --d: 100%;
    --p: 0%
}

.canal .display-segmentos:hover,
.produtos .list-produtos:hover .conteudo * {
    color: #333 !important;
}

.canal .display-segmentos:hover .fil1,
.produtos .list-produtos:hover .fil1 {
    fill: #4dd957 !important;
}

#formnome .preencha,
.bloco-de-ites .itens-produto .itens-button {
    box-shadow: 0 4px 6px rgba(50, 50, 93, .11), 0 1px 3px rgba(0, 0, 0, .08)
}

.produtos .list-produtos a {
    text-decoration: none;
    color: #333
}

.canal .display-segmentos .conteudo,
.produtos .list-produtos .conteudo {
    padding: 0 20px 20px;
    font-weight: 100
}

.canal .display-segmentos .conteudo .titulo,
.produtos .list-produtos .conteudo .titulo {
    background: linear-gradient(#dfdfdf 0 0) left/var(--d, 0) 100% no-repeat;
    transition: .5s;
    border-radius: 50px;
    font-size: 25px;
    letter-spacing: -1px;
    font-weight: 700;
    margin-bottom: 10px;
    line-height: 28px
}

.produtos .list-produtos:hover .conteudo .titulo {
    --d: 100%
}

.produtos .list-produtos .conteudo .chamada {
    font-size: 18px;
    font-weight: 300;
    text-shadow: 0 0 1px #999;
    line-height: 20px;
    padding-top: 10px;
    padding-bottom: 10px;
}

.produtos .list-produtos .conteudo .titulo_complementar {
    font-weight: 300;
    padding-top: 5px;
    font-size: 15px;
    line-height: 18px;
    color: #999;
    letter-spacing: 0
}

.produtos .list-produtos .img-capa {
    width: 100%;
    padding: 20px
}

.canal .display-segmentos img,
.cliente .icone-cliente img,
.depoimentos .img-logo-cliente img,
.produtos .list-produtos .img-capa img,
.produtos .segmentos .display-segmentos img,
footer .list-clientes img {
    width: 60%;
    height: auto
}

.icon-svg-row {
    width: 60px;
    height: 60px;
    padding: 10px
}

.produtos .menu-conteudo>.row-menu-listagem .icon-svg-row {
    width: 50px;
    height: 50px
}

.produtos .canal .head {
    margin-top: -30px;
    padding-top: 40px;
    padding-bottom: 20px
}

.produtos .canal-top {
    background-color: inherit
}

.produtos .img-icon-produto {
    position: absolute;
    z-index: 999;
    left: 0;
    width: 100%;
    text-align: center;
    margin-top: 18px
}

.produtos .img-icon-produto img {
    width: 70%
}

.produtos .icone-produto {
    position: absolute;
    z-index: 1;
}

.produtos .list-above,
.produtos .list-above-capa {
    padding-top: 20px;
    display: inline-block;
    margin: 5px;
    overflow: hidden
}

.produtos .txt-produto_ {
    position: absolute;
    z-index: 9;
    top: 424px;
    text-align: left;
    padding-bottom: 10px;
    font-size: 56px;
    line-height: 55px;
    max-width: 30%;
    font-family: robotothin, sans-serif
}

.produtos .list-above {
    width: 100%;
    height: 200px;
    position: relative;
    border-radius: 5px
}

.produtos .list-above .img-capa {
    width: 150px;
    height: 150px;
    padding: 30px;
    border-radius: 50%;
    border: 4px solid #ccc;
    background-color: #fff;
    position: absolute;
    left: 250px;
    top: 0
}

.produtos .list-above:hover .img-capa {
    border: 8px solid #47317b
}

.produtos .list-above:hover .titulo {
    font-size: 23px
}

.produtos .list-above .titulo {
    position: absolute;
    left: 80px;
    top: 50px;
    width: 130px;
    text-align: right;
    font-size: 20px;
    color: #000
}

.produtos .list-above .titulo_complementar {
    position: absolute;
    font-size: 16px;
    left: 430px;
    top: 45px;
    width: 40%;
    text-align: left;
    color: #555
}

.setorBG:hover {
    background-color: #ddd !important
}

.depoimentos .sobre-cliente a,
.produtos .list-above-capa a {
    text-decoration: none
}

.produtos .list-above-capa {
    width: 150px;
    height: 170px;
    position: relative;
    border-radius: 5px;
    text-align: center
}

.produtos .list-above-capa .img-capa {
    width: 130px;
    height: 130px;
    padding: 30px;
    margin: auto;
    border-radius: 50%;
    border: 4px solid #ccc;
    background-color: #fff
}

.produtos .list-above-capa .img-capa:hover {
    border: 9px solid #704093
}

.produtos .list-above-capa .titulo {
    font-size: 13px;
    color: #000
}

.produtos .cases .display-segmentos,
.produtos .segmentos .display-segmentos {
    display: inline-block;
    font-size: 12px;
    height: 150px;
    white-space: normal !important;
    text-align: center
}

.produtos .bl-cases {
    position: relative;
    margin-top: 0;
    margin-right: -20000px;
    background-color: #000;
    box-shadow: inset 0 3px 40px -10px #333;
    background-image: url("../../brandplace/stock_img_avanter/bg-digital.jpg");
    background-position: top center;
    background-size: contain
}

.produtos .bl-cases h4 {
    margin-top: 0;
    padding-top: 40px;
    color: #4cdfd8
}

.produtos .cases .display-segmentos {
    width: 150px;
    padding: 0;
    margin: 10px;
    border-radius: 2px;
    overflow: hidden;
    position: relative;
    background: linear-gradient(#ccc 0 0) var(--d, 0) 0, linear-gradient(#ccc 0 0) 0 var(--d, 0), linear-gradient(#ccc 0 0) var(--p, 100%) 100%, linear-gradient(#ccc 0 0) 100% var(--p, 100%);
    background-size: var(--d, 0) 1px, 1px var(--d, 0);
    background-repeat: no-repeat;
    transition: .5s, background-position 0s .5s
}

.produtos .cases .display-segmentos:hover {
    --d: 100%;
    --p: 0%;
    cursor: pointer;
    background-color: #fff;
    margin-bottom: 10px;
    box-shadow: 0 2px 30px #ccc
}

.produtos .cases,
.produtos .segmentos {
    text-align: center;
    width: 100%;
    padding-bottom: 5px
}

.produtos .cases .display-segmentos:hover img {
    filter: none
}

.produtos .bl-segmentos {
    position: relative;
    margin-top: 10px;
    margin-right: -20000px;
    border-top: 1px solid;
    border-image-slice: 1;
    border-image-source: linear-gradient(to right, rgb(254 254 254), rgb(111 251 245), rgb(255 101 229), rgb(177 24 187))
}

.produtos .titulo-segmento {
    width: 100%;
    text-align: center;
    font-size: 11px;
    letter-spacing: 5px;
    background-color: #cccfd3;
    text-transform: uppercase;
    position: absolute;
    top: 0
}

.canal .display-segmentos,
.produtos .segmentos .display-segmentos {
    position: relative;
    border-radius: 2px;
    transition: .5s, background-position 0s .5s;
    overflow: hidden
}

.produtos .segmentos .display-segmentos .segmento-titulo {
    line-height: initial
}

.produtos .segmentos .display-segmentos {
    width: 90px;
    padding: 10px;
    background: linear-gradient(#ddd 0 0) var(--d, 0) 0, linear-gradient(#ddd 0 0) 0 var(--d, 0), linear-gradient(#ddd 0 0) var(--p, 100%) 100%, linear-gradient(#ddd 0 0) 100% var(--p, 100%);
    background-size: var(--d, 0) 1px, 1px var(--d, 0);
    background-repeat: no-repeat
}

.produtos .segmentos .slide-segmentos {
    display: table;
    margin-left: 0;
    margin-right: 40px
}

.produtos .segmentos .display-segmentos:hover {
    --d: 100%;
    --p: 0%;
    cursor: pointer;
    background-color: #f0f0f0;
    margin-bottom: 10px;
    box-shadow: 0 2px 30px #d3d3d3
}

.bloco-de-ites,
.canal .bl-display-segmentos,
.depoimentos,
.interno .texto .clientes {
    text-align: center
}

.canal .display-segmentos {
    display: inline-block;
    width: 180px;
    height: 230px;
    margin: 5px;
    background: linear-gradient(#666 0 0) var(--d, 0) 0, linear-gradient(#666 0 0) 0 var(--d, 0), linear-gradient(#666 0 0) var(--p, 100%) 100%, linear-gradient(#666 0 0) 100% var(--p, 100%);
    background-size: var(--d, 0) 1px, 1px var(--d, 0);
    background-repeat: no-repeat;
    cursor: pointer
}

.canal .display-segmentos .segmento-titulo span {
    text-decoration: none;
    color: #333;
    background: linear-gradient(#000 0 0) left/var(--d, 0) 100% no-repeat;
    transition: .5s
}

.canal .display-segmentos:hover .segmento-titulo span {
    padding-left: 10px;
    padding-right: 10px;
    color: #fff;
    line-height: 15px
}

.canal .display-segmentos:hover .conteudo .titulo {
    --d: 100%;
    padding: 10px
}

.bloco-itens .camada-item-click,
.camada-link {
    position: absolute;
    width: 100%;
    height: 150px;
    top: 0;
    left: 0
}

.bloco-de-ites .itens-produto {
    border: 1px solid #ccc;
    margin: 10px;
    text-align: center;
    display: inline-block;
    border-radius: 6px;
    width: 200px;
    height: 200px
}

.bloco-de-ites .itens-produto .itens-titulo {
    font-weight: 700;
    font-size: 25px;
    font-family: sans-serif;
    letter-spacing: -1pt;
    margin-top: 20px
}

.bloco-de-ites .itens-produto .itens-descricao {
    font-size: 13px;
    margin-bottom: 10px;
    line-height: 18px
}

.bloco-de-ites .itens-produto .itens-preco {
    font-size: 26px;
    letter-spacing: -1pt;
    font-weight: 700;
    color: #304bff;
    font-family: sans-serif;
    height: 45px
}

.bloco-de-ites .itens-produto .itens-button {
    padding: 5px 10px;
    margin-top: 10px;
    color: #fff;
    margin-right: auto;
    margin-left: auto;
    display: inline-block;
    border-radius: 6px;
    border: 1px solid #1e266b;
    background: #2454bf;
    font-size: 12px
}

.bloco-de-ites .itens-produto:hover {
    box-shadow: inset 2px 2px 10px #999;
    cursor: pointer
}

.interno .texto .clientes .list-clientes {
    display: inline-table;
    text-align: center
}

.interno .texto .clientes .list-clientes .img-capa {
    border-radius: 50%;
    overflow: hidden;
    width: 180px;
    height: 180px;
    padding: 10px;
    background-color: #fefefe;
    border: 3px solid #ccc;
    margin: 15px
}

.clientes .menu-conteudo {
    background-color: #eee;
    width: 100%;
    display: table;
    position: absolute;
    z-index: -1;
    left: 0;
    top: 0;
    height: 340px;
    border-bottom: 1px solid #ddd
}

.depoimentos .img-logo-cliente,
.depoimentos .list-above .img-capa {
    border-radius: 50%;
    background-color: #fefefe;
    float: left;
    overflow: hidden
}

.clientes .img-icon-produto img {
    float: left;
    width: 220px;
    margin-right: 30px;
    margin-top: -40px
}

.depoimentos .list-above {
    text-align: left;
    clear: both
}

.depoimentos .list-above .img-capa {
    width: 180px;
    height: 180px;
    border: 3px solid #ccc;
    margin: 15px
}

.depoimentos .list-above .img-capa img {
    width: 110%;
    margin-top: -4px;
    margin-left: -4px
}

.depoimentos .list-above .titulo {
    font-size: 22px;
    font-weight: 700
}

.depoimentos .list-above .conteudo .titulo_complementar {
    font-size: 13px;
    line-height: 14px;
    margin-top: 5px;
    text-transform: uppercase;
    color: #999;
    width: 40%
}

.depoimentos .list-above .conteudo .texto {
    font-size: 14px;
    color: #999;
    margin-top: 20px;
    margin-left: 0;
    letter-spacing: 0
}

.depoimentos .list-above .conteudo .texto:before {
    content: '';
    display: block;
    background-image: url(../../brandplace/icones/icon-citacao.png);
    background-repeat: no-repeat;
    background-size: contain;
    width: 60px;
    height: 60px;
    float: left;
    margin-left: -80px;
    margin-top: -10px
}

.depoimentos .list-above .conteudo .texto:after {
    content: '';
    display: block;
    background-image: url(../../brandplace/icones/icon-citacao-down.png);
    background-repeat: no-repeat;
    background-size: contain;
    width: 40px;
    height: 40px;
    float: right;
    margin-right: -40px;
    margin-top: 10px
}

.depoimentos .list-above .conteudo {
    float: left;
    margin-top: 50px;
    width: 65%;
    margin-left: 30px
}

.depoimentos .sobre-cliente {
    margin-left: 110px;
    clear: both
}

.depoimentos .img-logo-cliente {
    width: 100px;
    height: 100px;
    border: 3px solid #ccc;
    margin: 15px
}

.depoimentos .sobre-cliente-titulo {
    font-size: 20px;
    padding-top: 30px;
    font-weight: 700
}

.site-cliente {
    margin-top: 30px
}

.site-cliente h5 a {
    font-size: 16px !important;
    letter-spacing: 2px;
    padding: 15px 30px
}

.cliente .icone-cliente {
    border-radius: 50%;
    border: 4px solid #ccc;
    width: 200px;
    height: 200px;
    overflow: hidden;
    background-color: #fff
}

.cliente .txt-titulo {
    font-size: 35px;
    float: left;
    width: 50%;
    margin-top: 40px;
    margin-left: 40px;
    line-height: 35px;
}

.cliente .txt-chamada {
    font-size: 21px;
    line-height: 23px;
    color: #777;
    margin-top: 20px;
    font-weight: 300;
    width: 80%
}

.cliente .txt-completo {
    padding-top: 40px;
    margin-top: 20px;
    clear: both
}

.segmento-divisao {
    clear: both;
    text-align: center;
    border-radius: 6px;
    padding: 10px;
    margin-top: 30px;
    font-size: 20px;
    border-top: 1px dotted #ccc
}

.canal.subcanais .img-fundo {
    height: 200px;
    background-size: auto 200px;
    animation: 60s linear infinite animatedBackground;
    -ms-animation: animatedBackground 60s linear infinite;
    -moz-animation: 60s linear infinite animatedBackground;
    -webkit-animation: 60s linear infinite animatedBackground;
}

.canal.subcanais main {
    min-height: inherit;
}

.canal.subcanais h1 {
    color: #242424;
    text-transform: none;
    font-weight: 100;
    font-size: 2.8em;
    display: block;
    margin-top: 30px;
    margin-bottom: 30px;
    text-align: left;
}

.canal.subcanais .head-canal {
    position: inherit !important;
    top: inherit;
}

.canal .texto {
    text-align: left;
}

.texto img {
    border-radius: 2px;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    -khtml-border-radius: 2px
}

.textocompleto a {
    display: inline;
    border-radius: 30px;
    background-color: #bdffc2;
    color: #333;
    padding-bottom: 2px;
    padding-left: 10px;
    padding-right: 10px;
    text-decoration: none;
    font-weight: bold;
}

.textocompleto a:hover {
    background-color: #000;
    color: #fff;
    padding-bottom: 2px;
    padding-left: 10px;
    padding-right: 10px;
    text-decoration: none;
}

.texto .img_conteudo {
    float: left;
    margin-bottom: 20px;
    margin-top: 10px
}

.texto .imagem_left .img_conteudo {
    right: 20%;
    width: 500px;
    height: auto;
    float: right;
}

.texto .imagem_right .img_conteudo {
    left: 20%;
    width: 500px;
    height: auto;
}

.texto .imagem_right .imagem_right:before {
    content: '';
    width: 1000%;
    height: 500px;
    position: absolute;
    left: 0px;
    top: -66px;
    z-index: 1;
    background-image: url(../../midia/figuras/over-right-img-conteudo.png);
    background-repeat: no-repeat;
    background-size: auto;
    background-position-y: 0;
}

.texto .imagem_left .imagem_left:before {
    content: '';
    width: 1000%;
    height: 500px;
    position: absolute;
    right: 0px;
    top: -65px;
    z-index: 1;
    background-image: url(../../midia/figuras/over-left-img-conteudo.png);
    background-repeat: no-repeat;
    background-size: auto;
    background-position-y: 0;
    background-position-x: right;
}

.texto .imagem_centro .imagem_centro:before {
    content: '';
    width: 100000000%;
    height: 500px;
    position: absolute;
    right: -20%;
    z-index: 1;
    background-image: url(../../midia/figuras/over-center-img-conteudo.png);
    background-repeat: no-repeat;
    background-size: auto;
    background-position-y: 0;
    background-position-x: right;
    margin-top: -67px;
}

.texto>.imagem_centro {
    margin-top: 50px;
    margin-bottom: 50px;
}

.texto .imagem_centro ul {
    padding: 0;
    padding-left: 20px;
}

.texto .imagem_centro ul li {
    font-size: 17px;
    list-style: disc;
    margin: 5px;
    width: 100%;
}

.texto .imagem_right ul {
    padding: 0;
    margin: 0;
    margin-top: 10px;
    margin-bottom: 10px;
    width: 100%;
}

.texto .imagem_right ul li {
    font-size: 17px;
    padding: 5px;
    padding-left: 20px;
    padding-right: 20px;
    width: 100%;
    border: 2px solid #CCC;
    border-radius: 60px;
    margin-bottom: 2px;
}

.texto .imagem_right ul li:hover {
    background-color: #333333;
    color: #00cc00;
    padding-top: 10px;
    padding-bottom: 10px;
}

.texto .imagem_left ul {
    padding: 0;
    margin: 0;
    margin-top: 10px;
    margin-bottom: 10px;
    width: 100%;
}

.texto .imagem_left ul li {
    font-size: 17px;
    font-weight: bold;
    padding: 5px;
    padding-left: 20px;
    padding-right: 20px;
    width: 100%;
    border-radius: 60px;
    margin-bottom: 2px;
    background-color: #f9f9f9;
}

.texto .imagem_left ul li:hover {
    background-color: #efefef;
    color: #00cc00;
    padding-top: 10px;
    padding-bottom: 10px;
}

.texto .imagem_left h4,
.texto .imagem_right h4 {
    margin-top: 40px;
    margin-bottom: 40px;
}

.centro-img,
.img-insert-texto {
    width: 100% !important;
    height: auto !important;
    margin-bottom: 20px
}

.centro-img-normal,
.img-insert-texto {
    margin-bottom: 20px;
    margin-left: auto;
    margin-right: auto;
    display: inherit
}

.maxx-img {
    width: 126% !important;
    margin-left: -13%;
    padding-bottom: 20px;
    line-height: inherit
}

.left-img {
    float: left;
    margin-right: 15px;
    margin-bottom: 20px;
    width: 50% !important;
    font-size: 11px
}

.left-img-p {
    float: left;
    margin-right: 15px;
    margin-bottom: 20px;
    width: 20% !important;
    font-size: 11px
}

.right-img,
.right-img-p2 {
    float: right;
    margin-bottom: 20px
}

.right-img {
    margin-left: 15px;
    width: 50% !important
}

.right-img-p2 {
    margin-left: 25px;
    width: 40% !important;
    display: table
}

.left-img-p2 {
    float: left;
    margin-right: 40px;
    margin-bottom: 20px;
    width: 30% !important
}

.img-original-size {
    width: initial !important
}

.centro-img-pequena {
    width: 100px
}

.icon-perfil {
    width: 90px !important;
    float: right;
    margin-left: 15px
}

hr {
    clear: both;
    padding-bottom: 10px;
    padding-top: 10px;
    border-top: 0;
    border-bottom: 1px solid;
    border-image-slice: 1;
    border-image-source: linear-gradient(to right, rgb(254 254 254), rgb(111 251 245), rgb(255 230 251), rgb(249 164 255), rgb(254 254 254), rgb(111 251 245), rgb(254 254 254))
}

.imgDiv {
    max-height: 400px;
    overflow: hidden;
    width: 180% !important;
    margin-left: -40%;
    margin-bottom: 5px;
    position: relative
}

.imgDiv img {
    width: 100%;
    margin-top: -10%
}

.img-caption {
    color: #d58787;
    font-size: 11px;
    line-height: 14px;
    margin-bottom: 20px;
    clear: left;
    width: 100%;
    letter-spacing: 0 !important
}

img.left-img~.img-caption {
    margin-right: 15px;
    margin-top: -15px;
    clear: left;
    float: left;
    width: 50%
}

img.right-img~.img-caption {
    margin-left: 15px;
    margin-top: -15px;
    clear: right;
    float: right;
    width: 50%
}

img.centro-img~.img-caption,
img.imgDiv~.img-caption,
img.maxx-img~.img-caption {
    margin-top: -15px
}

.embed-facebook,
.embed-instagram {
    border: 0 solid #ddd;
    width: 100%;
    height: 100%;
    overflow: hidden
}

.embed-instagram iframe {
    max-width: 100% !important;
    width: 100% !important
}

.capa .embed-facebook,
.capa .embed-instagram {
    padding-left: 50px;
    padding-right: 50px
}

.texto table ul,
table ul {
    list-style: circle;
    margin-left: 20px
}

.texto table {
    border: 1px solid #ccc;
    border-spacing: 2px;
    border-radius: 5px;
    padding: 5px;
    background-color: #f9f9f9;
    border-collapse: inherit;
    line-height: 28px
}

/*.texto table tr{background-color:#f5f5f5}*/
.texto table tr:hover {
    cursor: pointer;
    background-color: #fff
}

/*.texto table tr:nth-child(odd){background-color:#f0f0f0}*/
.texto table td,
.texto table th {
    border: 0;
    border-radius: 3px;
    padding: 10px;
    vertical-align: top;
    cursor: auto
}

ul.listagem-itens h6,
ul.listagem-titulos>li>h6 {
    padding: inherit;
    margin: inherit;
    color: inherit;
    font-family: roboto, sans-serif
}

.formato_1 .clear-table,
.texto .clear-table {
    border: 0;
    border-spacing: 2px;
    border-radius: 5px;
    padding: 0;
    margin: 0;
    background-color: transparent
}

.xs-1col-table a {
    background: linear-gradient(#8ff28d 0 0) left/var(--d, 0) 100% no-repeat;
    transition: .5s
}

.word-table,
.word-table td {
    padding: 5px !important;
    background-color: #fff
}

.xs-1col-table a:hover {
    --d: 100%;
    color: #000;
    padding-left: 16px;
    padding-right: 16px;
    text-decoration: none;
    border-radius: 40px
}

.xs-1col-table {
    border: 0 !important
}

.xs-1col-table td:not(.td-float-scroll-right) {
    /*vertical-align:middle*/
}

.formato_1 .clear-table tr:hover,
.formato_1 .clear-table:hover,
.texto .clear-table tr:hover,
.texto .clear-table:hover {
    cursor: default !important
}

.formato_1 .clear-table td,
.texto .clear-table td {
    padding-left: 0
}

.formato_1 .clear-table tr,
.formato_1 .clear-table tr:nth-child(odd),
.texto .clear-table tr,
.texto .clear-table tr:nth-child(odd) {
    background-color: transparent
}

.word-table {
    border: 1px;
    border-spacing: 2px;
    border-radius: 5px;
    font-family: arial, sans-serif !important;
    cursor: inherit
}

.form-row-center {
    background-color: #3b3b3b
}

footer {
    background-color: #FFF
}

.word-table td {
    border: 1px solid #ddd !important;
    border-radius: 0 !important;
    font-size: 12px;
    text-shadow: none !important
}

.pagination {
    font-size: 11px;
    display: table !important
}

.pagination li {
    padding: 0;
    border-radius: 6px;
    margin: 2px
}

.pagination .page-link {
    display: inline-table !important
}

.pagination a {
    display: table;
    padding: 10px
}

.pagination .active {
    background-color: #777
}

.pagination li:first-of-type {
    border-radius: 5px 0 0 5px;
    -moz-border-radius: 5px 0 0 5px;
    -webkit-border-radius: 5px 0 0 5px;
    -khtml-border-radius: 5px 0 0 5px
}

.pagination li:last-of-type {
    border-radius: 0 5px 5px 0;
    -moz-border-radius: 0 5px 5px 0;
    -webkit-border-radius: 0 5px 5px 0;
    -khtml-border-radius: 0 5px 5px 0
}

.editor .img-editor,
footer .list-clientes {
    width: 80px;
    border-radius: 50%;
    height: 80px;
    overflow: hidden
}

.pagination li:first-of-type,
.pagination li:last-of-type {
    padding: 10px;
    display: none !important
}

.editor,
footer .list-clientes .img-capa {
    padding: 5px
}

footer {
    width: 100%;
    min-height: 100px;
    padding-top: 0;
    border-top: 1px solid #d5d5d5;
    display: table;
}

footer .list-clientes {
    display: inline-block;
    position: relative;
    margin: 5px;
    text-align: left
}

.capa footer li {
    max-width: 690px;
}

.interno footer li {
    max-width: 410px
}

.editor {
    display: table;
    margin: auto;
    width: 100%;
}

.capa .editor {
    display: none;
    margin: auto;
    width: 100%;
    position: absolute;
    top: 280px;
    left: 10px;
}

.editor .img-editor img {
    width: 120%;
    height: auto;
    margin-left: 0;
    image-rendering: auto;
    image-rendering: crisp-edges;
    image-rendering: pixelated;
    image-rendering: -webkit-optimize-contrast
}

.editor .img-editor {
    float: left;
    border: 3px solid #ccc;
    margin-right: 10px
}

.editor .editor-content {
    padding: 0;
    float: left;
    color: #333
}

.editor .editor-content .editor-nome {
    font-weight: 700;
}

.editor .editor-content-data {
    padding: 10px;
    float: right;
    font-size: 13px
}

.capa .editor .editor-nome {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
    /* font-weight: 500; */
    line-height: normal;
    background-color: #000;
    color: #FFF;
    padding-left: 5px;
    padding-right: 5px;
    margin-top: 23px;
}

.editor .editor-sobre {
    font-size: 15px;
    line-height: 20px;
    clear: both;
}

.estamos-preparando {
    display: table;
    width: 100%;
    border: 1px solid #eee;
    margin: 20px;
    font-size: 13px;
    border-radius: 6px;
    text-align: center;
    position: relative
}

.icones-clientes,
.imagens-centro {
    border-radius: 5px;
    width: 98%;
    text-align: center;
    display: table
}

.estamos-preparando span {
    padding-top: 20px;
    position: absolute;
    left: 0;
    margin-left: 30%;
    width: 400px
}

.estamos-preparando img {
    float: left;
    margin-right: 20px;
    margin-left: 30px
}

.vimeo-vertical {
    padding: 90.78% 0 0 !important
}

.form-row-center,
.icones-clientes,
.imagens-centro {
    padding: 20px;
    margin-top: 20px;
    margin-bottom: 20px
}

.artigo .expand-height {
    height: 80px
}

.imagens-centro img {
    width: initial !important;
    display: inline-table
}

.icones-clientes {
    border: 1px solid #eee
}

.icones-clientes img {
    max-width: 80px;
    height: auto;
    border-radius: 50%;
    border: 3px solid #ccc;
    margin: 2px;
    display: inline-table
}

#formnome .form-row-center {
    position: relative;
    overflow: hidden
}

#formnome .preencha {
    display: none;
    position: absolute;
    top: 20px;
    left: 40px;
    z-index: 9;
    padding: 10px;
    text-align: center;
    margin-top: 10px;
    color: #fff;
    margin-right: auto;
    margin-left: auto;
    border-radius: 6px;
    width: 150px;
    line-height: 16px;
    border: 1px solid #ccc;
    background: #673ab7;
    font-size: 12px
}

.form-row-center-inner-1 {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 172px;
    height: 200px;
    z-index: 9
}

.form-row-center-inner-2 {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 216px;
    height: 200px;
    z-index: 9
}

.form-row-center {
    box-shadow: inset 0 1px 5px #ccc;
    border-radius: 10px
}

.form-row-center .col {
    margin: auto !important;
    float: none
}

.form-row-center .col input {
    text-align: center !important;
    margin-bottom: 10px
}

.modal-pop-on {
    height: 100%;
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
    display: inline-flex
}

.modal-pop-on .center-modal {
    width: 90%;
    height: 90%;
    margin: auto
}

.fechar-modal {
    background-color: #000;
    color: #fff;
    border-radius: 50%;
    line-height: 19px;
    width: 80px;
    height: 80px;
    padding-top: 23px;
    position: absolute;
    bottom: 40px;
    right: 40px;
    box-shadow: 0 3px 20px #000;
    text-align: center
}

ul.listagem-itens,
ul.listagem-titulos {
    padding: 0;
    width: 100%;
    border: inherit;
    background-color: inherit;
    text-align: center
}

ul.listagem-itens {
    list-style: none;
    display: inline-table;
    margin: 20px auto 0
}

ul.listagem-itens h6 {
    list-style: none;
    font-size: 15px;

    line-height: inherit;
    text-shadow: 0 0 0 #fff;
    margin-top: 20px
}

ul.listagem-itens li,
ul.listagem-titulos>li {
    width: 200px;
    margin: 8px;
    font-size: 13px;
    list-style: none
}

ul.listagem-itens li {
    display: inline-block
}

ul.listagem-itens li:hover {
    transform: scale(1.1);
    cursor: pointer
}

ul.listagem-itens li:hover img,
ul.listagem-titulos>li:hover img {
    border: 1px solid #000
}

ul.listagem-titulos {
    list-style: none;
    display: inline-table;
    margin: 20px auto 40px
}

ul.listagem-titulos>li {
    display: inline-table;
    height: 460px;
    text-align: left;
    padding: 10px;
    position: relative;
    border: 1px solid #e0e0e0
}

ul.listagem-titulos>.list-titulos {
    margin-bottom: 20px
}

ul.listagem-titulos>li>span {
    line-height: 21px;
    display: table;
    text-align: center
}

ul.listagem-titulos>li>h6 {
    line-height: initial;
    list-style: none;

    background-image: url("../../brandplace/icones/ul-list-dox-h1.png");
    background-size: 30px;
    background-repeat: no-repeat;
    background-position: left 5px;
    padding-left: 40px;
    margin-top: 25px;
    font-size: 16px;
    height: 58px;
    display: table
}

ul.listagem-titulos>li>ul {
    list-style: none;
    padding: 0;
    margin: 15px
}

ul.listagem-titulos>li>ul>li {
    background-image: url("../../brandplace/icones/ul-list-dox-li.png");
    background-size: 10px;
    list-style: none;
    background-repeat: no-repeat;
    background-position: left 5px;
    padding-left: 30px;
    font-weight: 700
}

ul.listagem-titulos>li:hover {
    transform: scale(1.05);
    cursor: pointer;
    border: 1px solid #ccc;
    background-image: #fff;
    box-shadow: 1px 2px 15px #bbb
}

ul.listagem-titulos>li>ul>li>div {
    font-size: 11px;
    line-height: 16px;
    margin-bottom: 12px;
}

ul.listagem-titulos>li .recomended {
    position: absolute;
    top: 0;
    right: 28px;
    background-image: url(../../brandplace/icones/icon-medal.png);
    background-size: 30px;
    background-repeat: no-repeat;
    background-position: right 5px;
    height: 50px;
    padding-right: 38px;
    padding-top: 13px
}

ul.listagem-titulos>li>.itens-produto {
    position: absolute;
    bottom: 0;
    text-align: center;
    margin-right: auto;
    margin-left: auto;
    height: 120px;
    width: 90%;
    line-height: 21px
}

ul.listagem-titulos>li>.itens-produto>.itens-titulo {
    font-weight: 700;
    font-size: 15px
}

ul.listagem-titulos>li>.itens-produto>.itens-preco {
    margin-top: 10px;
    margin-bottom: 10px;
    font-family: Roboto, 'Open Sans', Lato, serif, Sans-serif
}

ul.listagem-titulos>li>.itens-produto>.itens-preco b {
    font-size: 25px;
    clear: both;
    display: block;
    letter-spacing: -1px
}

ul.listagem-titulos>li>.itens-produto>.itens-descricao {
    font-size: 11px;
    line-height: 14px;
    margin-bottom: 10px
}

ul.listagem-titulos>li>.itens-produto>.itens-button {
    box-shadow: inset 0 1px 0 0 #bee2f9;
    background: linear-gradient(to bottom, #63b8ee 5%, #468ccf 100%);
    background-color: #63b8ee;
    border-radius: 6px;
    border: 1px solid #3866a3;
    display: inline-block;
    cursor: pointer;
    color: #fff;
    font-family: Arial;
    font-size: 15px;
    font-weight: 700;
    padding: 6px 24px;
    text-decoration: none;
    text-shadow: 0 1px 0 #11236b
}

ul.listagem-titulos>li>.itens-produto>.itens-button:hover {
    background: linear-gradient(to bottom, #468ccf 5%, #63b8ee 100%);
    background-color: #468ccf
}

ul.listagem-titulos>li>.itens-produto>.itens-button:active {
    position: relative;
    top: 1px
}

@keyframes tonext {

    75%,
    99% {
        left: 0
    }

    95%,
    98% {
        left: 100%
    }
}

@keyframes tostart {

    75%,
    99% {
        left: 0
    }

    95%,
    98% {
        left: -300%
    }
}

@keyframes snap {

    100%,
    96% {
        scroll-snap-align: center
    }

    97%,
    99% {
        scroll-snap-align: none
    }
}

li,
ol {
    list-style: none;
    margin: 0;
    padding: 0
}

.carousel {
    position: relative;
    padding-top: 75%;
    filter: drop-shadow(0 0 10px #0003);
    perspective: 100px
}

.carousel__viewport {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    overflow-x: scroll;
    counter-reset: item;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory
}

.carousel__slide,
table.sanfona,
table.sanfona li {
    position: relative
}

.carousel__slide {
    flex: 0 0 100%;
    width: 100%;
    background-color: #f99;
    counter-increment: item
}

.carousel__slide img {
    height: 100%;
    width: auto
}

.carousel__slide:nth-child(2n) {
    background-color: #99f
}

.carousel__slide:before {
    content: counter(item);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate3d(-50%, -40%, 70px);
    color: #fff;
    font-size: 2em
}

.carousel__snapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    scroll-snap-align: center
}

@media (hover: hover) {
    .carousel__snapper {
        animation-name: tonext, snap;
        animation-timing-function: ease;
        animation-duration: 4s;
        animation-iteration-count: infinite
    }

    .carousel__slide:last-child .carousel__snapper {
        animation-name: tostart, snap
    }
}

@media (prefers-reduced-motion: reduce) {
    .carousel__snapper {
        animation-name: none
    }
}

.carousel:focus-within .carousel__snapper,
.carousel:hover .carousel__snapper {
    animation-name: none
}

.carousel__navigation {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    text-align: center
}

.carousel__navigation-item,
.carousel__navigation-list {
    display: inline-block
}

.carousel__navigation-button {
    display: inline-block;
    width: 1.5rem;
    height: 1.5rem;
    background-color: #333;
    background-clip: content-box;
    border: .25rem solid transparent;
    border-radius: 50%;
    font-size: 0;
    transition: transform .1s
}

.carousel::after,
.carousel::before,
.carousel__next,
.carousel__prev {
    position: absolute;
    top: 0;
    margin-top: 37.5%;
    width: 4rem;
    height: 4rem;
    transform: translateY(-50%);
    border-radius: 50%;
    font-size: 0;
    outline: 0
}

.carousel::before,
.carousel__prev {
    left: -1rem
}

.carousel::after,
.carousel__next {
    right: -1rem
}

.carousel::after,
.carousel::before {
    content: '';
    z-index: 1;
    background-color: #333;
    background-size: 1.5rem 1.5rem;
    background-repeat: no-repeat;
    background-position: center center;
    color: #fff;
    font-size: 2.5rem;
    line-height: 4rem;
    text-align: center;
    pointer-events: none
}

.carousel::before {
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolygon points='0,50 80,100 80,0' fill='%23fff'/%3E%3C/svg%3E")
}

.carousel::after {
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolygon points='100,50 20,100 20,0' fill='%23fff'/%3E%3C/svg%3E")
}

table.sanfona {
    border: 0;
    padding: 0;
    margin: 0;
    background-color: inherit !important;
    border-radius: 0 !important
}

table.sanfona:before {
    position: absolute;
    right: 20px;
    top: 20px;
    content: "";
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 10px solid #7255a7;
    bottom: -10px
}

.table-expand:before {
    transform: rotate(180deg);
    border-top: 10px solid #ccc !important
}

.sanfona>tbody>tr:first-child td {
    padding-left: 50px !important;
    padding-right: 40px !important
}

.sanfona>tbody>tr:first-child {
    font-size: 14px !important;
    text-transform: uppercase;
    background-color: #efefef !important;
    color: #333;
    line-height: 16px;
    padding: 5px 5px 5px 42px;
    margin-left: 0;
    margin-right: 0;
    border-radius: 10px;
    background-image: url(../../brandplace/stock_img_avanter/bullet-x.svg);
    background-repeat: no-repeat;
    background-size: 21px;
    background-position: 10px 8px;
    width: 100% !important
}

.sanfona:hover>tbody>tr:first-child {
    background-color: #000 !important;
    color: #fff
}

.sanfona>tbody>tr:nth-child(2) {
    display: none;
    font-size: 14px !important
}

.sanfona table>tbody>tr td ul li {
    font-size: 12px
}

table.sanfona ul {
    padding-left: 20px;
    margin: 0 !important
}

table.sanfona>tbody>tr li:before {
    background: #be95d8;
    position: absolute;
    left: 0;
    top: 5px;
    content: '';
    width: 7px;
    height: 7px;
    border-radius: 3px;
    margin-bottom: 20px;
    margin-left: -13px
}

table.no-child:before {
    left: -9999px;
    top: -9999px
}

.table-expand>tbody>tr:nth-child(2) {
    display: contents !important
}

.table-p-0 {
    padding: 0 !important
}

table.sanfona table {
    font-size: 11px !important
}

/* ═══════════════════════════════════════════════════════════════════════════
   Conteúdo em blocos (App\Services\BlockRenderer)

   O editor do painel grava o JSON dos blocos e o renderer converte em HTML
   dentro de TEXTO_COMPLETO, que esta página já imprimia cru. Estas regras dão
   forma às classes que o renderer emite.
   ═══════════════════════════════════════════════════════════════════════════ */

.art-blocos {
    display: block;
}

.art-bloco {
    margin: 0 0 18px;
}

.art-blocos> :last-child {
    margin-bottom: 0;
}

.art-bloco--texto> :first-child {
    margin-top: 0;
}

.art-bloco--texto> :last-child {
    margin-bottom: 0;
}

/* ── Títulos dentro do texto ────────────────────────────────────────────── */
/*
 * O <h2> de um bloco de texto nascia INVISÍVEL em toda página de canal.
 *
 * Culpa da varredura `.canal h2 { display: none }` lá em cima (por volta da
 * linha 532), escrita para apagar o título repetido que a listagem de canal
 * imprimia sozinha. Ela alcança qualquer <h2> descendente de `.canal` — e o
 * corpo do artigo é descendente de `.canal`. O título ficava no HTML, com
 * texto, medindo 0x0: quem escrevesse uma página com seções via os parágrafos
 * correrem sem separação nenhuma. Foi o que aconteceu com a Política de
 * Privacidade, que tem 16 seções.
 *
 * `.canal h2` vale 0,1,1 e `.art-bloco--texto h2` também. Empate desempata por
 * ordem, e estas linhas vêm ~2100 depois — por isso a regra fica AQUI, junto do
 * resto do bloco de texto, e não no site-refinado.css: mudá-la de arquivo é
 * mudar a ordem, e a regra pararia de valer sem que nada no seletor mudasse.
 *
 * A saída não é trocar o <h2> por uma <div>: é um cabeçalho de seção de
 * verdade, e é assim que o leitor de tela precisa encontrá-lo.
 */
.art-bloco--texto h2,
.art-bloco--texto h3,
.art-bloco--texto h4 {
    display: block;
}

.art-bloco--texto h2 {
    margin: 34px 0 12px;
    font-size: 23px;
    line-height: 1.25;
    font-weight: 700;
}

.art-bloco--texto h3 {
    margin: 26px 0 10px;
    font-size: 19px;
    line-height: 1.3;
    font-weight: 600;
}

/* ── Listas dentro do texto ─────────────────────────────────────────────── */
/*
 * O marcador da lista também nascia apagado.
 *
 * Culpa do `li, ol { list-style: none; margin: 0; padding: 0 }` por volta da
 * linha 2369 — um reset de varredura, escrito para os menus, que alcança
 * qualquer <li> do site. Uma lista dentro do texto de um artigo saía como
 * parágrafos empilhados: sem bolinha, sem recuo, indistinguível do texto
 * corrido em volta. Lista sem marcador não é lista, é uma sequência de frases.
 *
 * `li` vale 0,0,1 e estes seletores valem 0,1,1: ganham por especificidade, em
 * qualquer ordem de arquivo.
 *
 * Vale para os dois caminhos: o <ul> digitado dentro de um bloco de TEXTO e o
 * bloco de LISTA do editor (`.art-bloco--lista`), que já tinha o recuo de 22px
 * reservado para um marcador que nunca aparecia.
 */
.art-bloco--texto ul,
.art-bloco--texto ol {
    margin: 12px 0 16px;
    padding-left: 22px;
}

.art-bloco--texto ul li,
.art-bloco--lista li {
    list-style: disc;
    margin-bottom: 6px;
}

.art-bloco--texto ol li,
.art-bloco--lista.art-bloco--lista-ordenada li,
ol.art-bloco--lista li {
    list-style: decimal;
}

/* ── A lista de marcadores do Quill ─────────────────────────────────────
   Toda lista escrita no editor sai dentro de `<ol>` — as duas. O Quill 2 não
   usa `<ul>`: ele marca o TIPO no item, com `data-list="bullet"` ou
   `data-list="ordered"`, e desenha o marcador por conta própria dentro do
   editor. Fora dele quem desenha é o navegador, pela tag — e a tag diz `<ol>`
   nos dois casos.

   Resultado: escolher "marcadores" no editor e ver números no site. As regras
   acima olham a TAG, e por isso nunca tiveram como distinguir; estas olham o
   atributo, que é onde a escolha realmente está.

   Especificidade: classe + atributo + elemento = 0,2,1, contra os 0,1,2 da
   regra do `ol` logo acima — ganham em qualquer ordem de arquivo.

   `.texto` entra junto para alcançar o texto legado e qualquer HTML de Quill
   que um dia caia fora de um bloco.
   ─────────────────────────────────────────────────────────────── */
.art-bloco--texto li[data-list="bullet"],
.texto li[data-list="bullet"] {
    list-style: disc;
}

.art-bloco--texto li[data-list="ordered"],
.texto li[data-list="ordered"] {
    list-style: decimal;
}

/* O Quill 2 insere este <span> vazio em cada item — é onde ELE desenha o
   marcador enquanto se edita. No site o span não tem conteúdo nem estilo, mas
   é uma caixa em linha antes do texto: sem isto, ele abre uma fresta de um
   espaço entre o marcador e a primeira palavra. */
.art-bloco--texto li > .ql-ui,
.texto li > .ql-ui {
    display: none;
}

/* ── Imagem ─────────────────────────────────────────────────────────────── */
.art-bloco--imagem {
    margin: 0px 0px 20px;
}

.art-bloco--imagem img {
    max-width: 100%;
    height: auto;
    display: block;
    border-radius: 12px;
    /* Sombra baixa, larga e quase transparente: assenta a foto sobre a página
       sem desenhar moldura. Uma borda aqui competiria com o conteúdo da
       própria imagem, que quase sempre já tem uma. */
    box-shadow: 0 18px 42px -30px rgba(13, 35, 57, .55);
}

/* ── Legenda ──────────────────────────────────────────────────────────────
   Um filete dourado à esquerda e o texto miúdo, folgado, em maiúscula só na
   primeira palavra do crédito. O filete faz o trabalho que uma caixa cinza ou
   um itálico fariam — separar a legenda do texto do artigo —, mas sem pesar, e
   reaproveita o dourado que o site já usa nos detalhes.

   `text-align: left` explícito porque o alinhamento do bloco (`--center`,
   `--right`) desce da figura para tudo o que está dentro: uma legenda de duas
   linhas centralizada sob a foto vira um losango de texto, e o filete perderia
   a régua da margem. */
.art-bloco--imagem figcaption {
    margin-top: 14px;
    padding-left: 14px;
    border-left: 2px solid var(--ref-gold, #c9a24b);
    font-size: 12.5px;
    line-height: 1.6;
    color: var(--ref-muted, #5d6b7a);
    text-align: left;
    /* Impede que a legenda estique além do confortável de leitura numa foto
       em largura cheia — 70 caracteres é o limite clássico. */
    max-width: 62ch;
}

/* Título e crédito dividem o mesmo filete: o título em tinta cheia, o crédito
   no cinza da legenda. É a diferença de PESO e COR que os separa, não uma
   segunda régua — duas réguas dariam a impressão de duas legendas. */
.art-imagem__titulo {
    display: block;
    margin-bottom: 3px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--ref-navy-800, #0d2339);
}

.art-imagem__credito {
    display: block;
}

/* Sozinho, o título não precisa da folga que existia para separá-lo do crédito. */
.art-imagem__titulo:only-child {
    margin-bottom: 0;
}

/* Numa coluna estreita (bloco 30% de um 70/30) o recuo do filete come largura
   preciosa: o traço encolhe e o texto encosta mais. */
.art-coluna .art-bloco--imagem figcaption {
    margin-top: 10px;
    padding-left: 10px;
    font-size: 12px;
}

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

.art-bloco--center img,
.art-bloco--full img {
    margin-left: auto;
    margin-right: auto;
}

.art-bloco--full img {
    width: 100%;
}

.art-bloco--left {
    text-align: left;
}

.art-bloco--right {
    text-align: right;
}

.art-bloco--right img {
    margin-left: auto;
}

/* ── Citação ────────────────────────────────────────────────────────────── */
.art-bloco--citacao {
    margin: 24px 0;
    padding: 4px 0 4px 18px;
    border-left: 3px solid #c7cdd6;
}

.art-bloco--citacao p {
    margin: 0;
    font-size: 1.08em;
    line-height: 1.55;
    font-style: italic;
    color: #374151;
}

.art-bloco--citacao cite {
    display: block;
    margin-top: 8px;
    font-size: 12px;
    font-style: normal;
    color: #6b7280;
}

/* ── Lista ──────────────────────────────────────────────────────────────── */
.art-bloco--lista {
    margin: 16px 0 18px;
    padding-left: 22px;
}

.art-bloco--lista li {
    margin-bottom: 6px;
    line-height: 1.55;
}

/* ── Lista com subitens ──────────────────────────────────────────────────────
   Quem é o CARTÃO aqui é cada item, não a lista.

   A `<ol>`/`<ul>` de fora não desenha nada: sem fundo, sem borda, sem recuo.
   Ela só empilha. Cada `<li>` de primeiro nível é que veste a caixa da citação
   — fundo branco, borda fina, cantos de 8px e o `bullet-x.svg` no mesmo lugar —,
   e os subitens ficam DENTRO do cartão do pai a que pertencem.

   Os marcadores são desenhados aqui, e não pelo navegador (`list-style: none`
   nos dois níveis): o de primeiro nível é o ícone da citação; o de segundo é um
   traço discreto, porque seis ícones iguais empilhados viram ruído.
   ───────────────────────────────────────────────────────────────────────── */
.art-bloco--lista-subitens {
    margin: 16px 0 18px;
    padding: 0;
    list-style: none;
}

/* O cartão. As medidas são as da citação, para os dois blocos serem lidos como
   da mesma família: 10px em cima e embaixo, 20 à direita, 40 à esquerda para o
   ícone caber, e o ícone em 10px 13px. */
.art-bloco--lista-subitens > li,
.art-bloco--texto-bullet {
    position: relative;
    margin-top: 3px;
    margin-bottom: 0;
    padding: 10px 20px 10px 40px;
    background-color: #ffffff;
    border: 1px solid #ccc;
    border-radius: 8px;
    color: #231e1e;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.5;
    background-image: url(../../brandplace/stock_img_avanter/bullet-x.svg);
    background-size: 17px;
    background-position: 10px 13px;
    background-repeat: no-repeat;
}

/* Os subitens moram dentro do cartão do pai, recuados a partir do texto dele. */
.art-bloco--lista-subitens .art-sublista {
    list-style: none;
    margin: 7px 0 1px;
    padding-left: 2px;
}

.art-bloco--lista-subitens .art-sublista > li {
    position: relative;
    padding-left: 16px;
    margin-bottom: 4px;
    line-height: 1.45;
    color: #555;
    /* Explícito, e não herdado: o subitem mora DENTRO da `<li>` do pai, que
       está em 500 — sem esta linha ele herdaria o peso e os dois níveis
       ficariam iguais. */
    font-weight: 300;
}

.art-bloco--lista-subitens .art-sublista > li:last-child {
    margin-bottom: 0;
}

.art-bloco--lista-subitens .art-sublista > li::before {
    content: '';
    position: absolute;
    left: 0;
    top: .62em;
    width: 8px;
    height: 1px;
    background: #b6bcc6;
}

/* ── Subitens que recolhem ─────────────────────────────────────────────
   Só vale quando o gestor liga a opção no painel: sem ela o renderizador não
   emite botão nenhum, e a lista continua a de sempre.

   O texto do item vira um <button> de largura inteira, com a setinha no canto
   direito — para baixo fechado, para cima aberto. Quem gira a seta é o
   `aria-expanded`, e não uma classe: o estado tem UM lugar só, o mesmo que o
   leitor de tela lê. Classe à parte seria um segundo estado para dessincronizar.

   Todas as propriedades do botão vêm declaradas. Esta base tem regras de
   varredura por elemento (`button`, `li`, `section`), e um botão que herdasse o
   estilo de formulário apareceria cinza, centralizado e com borda dentro do
   cartão.
   ─────────────────────────────────────────────────────────────── */
.art-bloco--lista-subitens .art-sublista-cabeca,
.art-bloco--texto-bullet .art-sublista-cabeca {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    appearance: none;
    -webkit-appearance: none;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.art-bloco--lista-subitens .art-sublista-titulo,
.art-bloco--texto-bullet .art-sublista-titulo {
    min-width: 0;
}

/* A seta é a única pista de que o cartão abre. Fica discreta, mas não some:
   `flex: 0 0 auto` para o título longo não espremer a seta até sumir. */
.art-bloco--lista-subitens .art-sublista-seta,
.art-bloco--texto-bullet .art-sublista-seta {
    flex: 0 0 auto;
    font-size: 12px;
    line-height: 1;
    color: #8a919b;
    /* A mesma duração e a mesma curva do corpo que abre: a seta e a sublista
       precisam parecer um movimento só, e não dois que começam juntos e
       terminam em tempos diferentes. */
    transition: transform .26s cubic-bezier(.4, 0, .2, 1);
}

/* Sem moldura no clique do mouse. O contorno do navegador aparecia por dentro
   do cartão e sobrava ali até o próximo clique — e quem clicou não precisa que
   lhe digam onde clicou.

   Ela volta logo abaixo para quem chega pelo TECLADO, e aí é indispensável: sem
   contorno nenhum, quem navega por Tab não tem como saber em que item está. */
.art-bloco--lista-subitens .art-sublista-cabeca:focus,
.art-bloco--texto-bullet .art-sublista-cabeca:focus {
    outline: none;
}

.art-bloco--lista-subitens .art-sublista-cabeca[aria-expanded="true"] .art-sublista-seta,
.art-bloco--texto-bullet .art-sublista-cabeca[aria-expanded="true"] .art-sublista-seta {
    transform: rotate(180deg);
}

.art-bloco--lista-subitens .art-sublista-cabeca:hover .art-sublista-seta,
.art-bloco--texto-bullet .art-sublista-cabeca:hover .art-sublista-seta {
    color: #231e1e;
}

/* Só para o teclado (`:focus-visible`), e discreta: fina, translucida e colada
   à caixa. É sinalização para quem navega por Tab, não um destaque. */
.art-bloco--lista-subitens .art-sublista-cabeca:focus-visible,
.art-bloco--texto-bullet .art-sublista-cabeca:focus-visible {
    outline: 2px solid rgba(29, 75, 121, .5);
    outline-offset: 2px;
    border-radius: 6px;
}

/* O `hidden` do HTML precisa VENCER o `display` que as regras de lista dão.
   Sem esta linha o atributo não esconde nada, e o cartão abriria e fecharia só
   na setinha — o defeito clássico desta base. */
.art-bloco--lista-subitens .art-sublista[hidden],
.art-bloco--texto-bullet .art-sublista[hidden] {
    display: none;
}

/* Enquanto anima, a sublista tem altura menor que o conteúdo e precisa cortar o
   que sobra — sem isto o texto escaparia para fora do cartão durante o
   movimento. É uma classe e não `overflow: hidden` fixo: parada, a lista não
   tem por que recortar nada.

   O movimento em si é feito pelo JavaScript (ui-libs/site.js), e não por
   `transition`: a altura de destino só se sabe medindo, e a duração e a curva
   ficam num lugar só, junto de quem as usa. */
.art-bloco--lista-subitens .art-sublista.esta-animando,
.art-bloco--texto-bullet .art-sublista.esta-animando {
    overflow: hidden;
}

/* ── Marcador escolhido no painel ────────────────────────────────────────────
   Quando o gestor escolhe um ícone para o nível, o renderizador emite um `<i>`
   e marca a `<li>` com `com-icone`. A classe é o que cala o marcador padrão —
   sem ela, o ícone da citação e o ícone escolhido dividiriam a mesma calha.

   O `<i>` fica na MESMA posição que o marcador que substitui, para que trocar
   de ícone não desloque o texto. */
.art-bloco--lista-subitens > li.com-icone,
.art-bloco--texto-bullet.com-icone {
    background-image: none;
}

.art-bloco--lista-subitens > li > .art-marcador,
.art-bloco--texto-bullet > .art-marcador {
    position: absolute;
    left: 10px;
    top: 12px;
    width: 17px;
    text-align: center;
    font-size: 14px;
    line-height: 1.2;
    color: #231e1e;
}

.art-bloco--lista-subitens .art-sublista > li.com-icone::before {
    content: none;
}

.art-bloco--lista-subitens .art-sublista > li > .art-marcador {
    position: absolute;
    left: 0;
    top: .3em;
    width: 10px;
    text-align: center;
    font-size: 10px;
    line-height: 1;
    color: #8a919b;
}

/* ── Texto item bullet ─────────────────────────────────────────────
   O mesmo cartão da lista com subitens — as regras acima ganharam o seletor
   dele —, só que o cartão É o bloco, e não um item dentro de uma lista.

   Daí as duas linhas abaixo. A regra do cartão traz `margin-top: 3px` e
   `margin-bottom: 0`, que valem entre irmãos de uma MESMA lista, coladinhos;
   solto no meio do artigo, entre um parágrafo e uma foto, ele precisa do
   espaçamento de bloco. E `.art-bloco` não dá conta sozinho: as duas regras
   valem 0,1,0 e a do cartão vem depois.
   ─────────────────────────────────────────────────────────────── */
.art-bloco--texto-bullet {
    margin-top: 0;
    margin-bottom: 18px;
}

/* Dois seguidos voltam a se comportar como itens de uma MESMA lista: 3px entre
   eles, e não o vão de 18px que separa assuntos diferentes.
   A conta é 18 − 15 = 3, e os dois números andam juntos: mexeu na margem de
   baixo acima, refaça esta. Margem negativa e não `:has()` porque o resultado
   precisa ser o mesmo em telefone antigo. */
.art-bloco--texto-bullet + .art-bloco--texto-bullet {
    margin-top: -15px;
}

/* O corpo. As margens são as da sublista da lista, pelo mesmo motivo de
   sempre: os dois cartões abrem igual, e a folga acima do conteúdo é parte do
   desenho do cartão, não do texto que ele guarda. */
.art-bloco--texto-bullet .art-bullet-corpo {
    margin: 7px 0 1px;
    font-weight: 300;
    color: #555;
}

/* Sem título não há botão, e o título sai solto como texto do cartão: sem
   isto ele nasceria em linha, colado ao parágrafo seguinte. */
.art-bloco--texto-bullet > .art-sublista-titulo {
    display: block;
}

/* ── Variante numerada ──────────────────────────────────────────────────────
   O contador é próprio, porque `list-style` está desligado. Um contador por
   nível, com nomes distintos: com um só, o subitem continuaria a contagem do
   pai em vez de recomeçar. */
ol.art-bloco--lista-subitens {
    counter-reset: itemPai;
}

ol.art-bloco--lista-subitens > li {
    counter-increment: itemPai;
    /* O número ocupa o lugar do ícone — os dois na mesma calha de 40px. */
    background-image: none;
}

ol.art-bloco--lista-subitens > li::before {
    content: counter(itemPai) ".";
    position: absolute;
    left: 14px;
    top: 10px;
    font-weight: 700;
    color: #231e1e;
}

.art-bloco--lista-subitens ol.art-sublista {
    counter-reset: itemFilho;
}

.art-bloco--lista-subitens ol.art-sublista > li {
    counter-increment: itemFilho;
}

.art-bloco--lista-subitens ol.art-sublista > li::before {
    content: counter(itemFilho) ".";
    width: auto;
    height: auto;
    background: none;
    top: 0;
    color: #7a828e;
    font-size: 12px;
}

/* ── Vídeo (proporção 16:9 sem depender de aspect-ratio) ────────────────── */
.art-bloco--video {
    position: relative;
    width: 100%;
    padding-top: 56.25%;
    margin: 22px 0;
    background: #000;
    border-radius: 4px;
    overflow: hidden;
}

.art-bloco--video iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* ── Vídeo em pé (9:16) — Short, Reel, vídeo gravado no celular ─────────────
   Aqui a proporção vem de `aspect-ratio`, e não do `padding-top` da regra
   acima. Não é capricho: porcentagem de padding mede a largura do PAI, então
   com o `max-width` que este caso exige — um 9:16 ocupando a largura inteira
   do texto ficaria com mais de mil pixels de altura, e a pessoa rolaria a
   página inteira para passar por um vídeo — a conta sairia pela largura do
   texto e a moldura ficaria alta demais. */
.art-bloco--video.art-bloco--video-vertical {
    padding-top: 0;
    aspect-ratio: 9 / 16;
    max-width: 360px;
    margin-left: auto;
    margin-right: auto;
}

/* ── Publicação do Instagram ────────────────────────────────────────────────
   O mesmo bloco "Vídeo" do editor, quando o link colado é do Instagram.

   Sem a proporção 16:9 de propósito: post, carrossel e reel têm alturas
   diferentes entre si, e a legenda ainda soma o que somar. Quem mede a altura
   é a própria publicação — o `ui-instagram.php` roda no nosso domínio e ajusta
   o quadro que o contém. Aqui fica só o piso, para que o quadro não apareça
   achatado no instante entre o aceite e a resposta do Instagram. */
.art-bloco--instagram {
    width: 100%;
    max-width: 560px;
    margin: 22px auto;
}

.art-bloco--instagram .embed-instagram {
    display: block;
    width: 100%;
    min-height: 420px;
    border: 0;
}

/* A escolha 9:16 do bloco de vídeo, quando o conteúdo é do Instagram: ela
   aperta a LARGURA, e não recorta a altura. A publicação vem com cabeçalho,
   barra de ações e legenda — uma moldura de proporção fixa cortaria o texto,
   que costuma ser a razão de publicar. Estreita, ela fica como na tela de um
   celular, que é o enquadramento natural de um reel. */
.art-bloco--instagram.art-bloco--instagram-estreita {
    max-width: 360px;
}

/* ── Galeria ────────────────────────────────────────────────────────────── */
/* A altura vem do editor, em estilo inline no próprio elemento. */
.art-bloco--galeria {
    position: relative;
    width: 100%;
    margin: 24px 0;
    border-radius: 4px;
    overflow: hidden;
    background: #0f172a;
}

.art-bloco--galeria iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}

.art-bloco--galeria-legenda {
    margin: -16px 0 24px;
    font-size: 12px;
    line-height: 1.45;
    color: #6b7280;
    text-align: center;
}

/* ── Divisor ──────────────────────────────────────────────────────────────
   A cor é opaca de propósito. Em #e2e5ea o traço tinha contraste de ~1,1:1
   contra o fundo #f4f6f9 das páginas — existia no HTML, ocupava o seu lugar no
   fluxo e simplesmente não se via. Num artigo com dois divisores, dava a
   impressão de que só um tinha sido gravado.

   `rgba` sobre o preto, e não um cinza fixo: o bloco também cai dentro de
   colunas e cartões, que têm fundos próprios; uma cor absoluta acertaria um
   fundo e erraria o outro. É a mesma tinta da borda das pílulas. */
.art-bloco--divisor {
    border: 0;
    border-top: 1px solid rgba(15, 23, 42, .16);
    margin: 26px 0;
}

/* ── Código HTML ──────────────────────────────────────────────────────────
   O conteúdo é do autor; daqui só sai a garantia de que ele não arrebenta a
   página. Um `iframe` de mapa vem com width fixo de 600px na maioria dos
   códigos que se copiam por aí, e dentro de uma coluna de 30% isso é o
   suficiente para estourar a largura e criar rolagem horizontal no site
   inteiro. Nada de tipografia ou cor aqui: quem escolheu escrever HTML não
   quer o bloco opinando sobre o resultado. */
.art-bloco--html {
    margin: 18px 0;
    max-width: 100%;
}

.art-bloco--html img,
.art-bloco--html iframe,
.art-bloco--html video,
.art-bloco--html table {
    max-width: 100%;
}

.art-bloco--html iframe {
    border: 0;
}

/* Tabela larga rola dentro do próprio bloco, e não empurra a página. */
.art-bloco--html {
    overflow-x: auto;
}
/* ═══════════════════════════════════════════════════════════════════════════
   Formatos de listagem modernos (campo "Tipo de lista" / trechos do widget)
   ---------------------------------------------------------------------------
   Quatro formatos: cartões, grade, mosaico e lista compacta. A classe do BLOCO
   monta a grade; a do ARTICLE desenha o item.

   AS DUAS MARCAÇÕES. Estes formatos servem a duas listagens que nasceram em
   lugares diferentes e não têm a mesma árvore:

     artigo      <article class="item-…">
                   <a>                        ← o item inteiro é um link
                     <div class="img-capa">
                     <div class="conteudo">

     sub-página  <article class="item-… item-subpagina">
                   <div class="img-capa">     ← sem o <a>: o link vive no h3,
                   <div class="conteudo">        para o resumo poder ter links

   A primeira versão destas regras só considerou a segunda. O resultado é que
   nos ARTIGOS o `display:flex` do <article> encontrava um filho só — o <a> —,
   e imagem e texto ficavam fora do alcance do layout: a lista compacta perdia
   a miniatura à esquerda, o cartão perdia o empilhamento e o mosaico não
   preenchia a altura do destaque.

   A saída aqui é declarar o empilhamento nos DOIS níveis: o <article> arruma o
   seu único filho e o <a> arruma imagem e texto. A mesma regra atende as duas
   árvores, sem `display:contents` (que apagaria a caixa do link e deixaria o
   espaço vago do cartão fora do alvo de clique) e sem tocar no PHP que as duas
   listagens já emitem.

   Todos os blocos usam `auto-fill` com piso em px: o número de colunas vem da
   largura disponível, e não de uma escolha fixa que quebra no celular.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── O corpo do item ────────────────────────────────────────────────────── */
/* O <a> dos artigos deixa de ser um elemento de texto e passa a ser a caixa
   que empilha imagem e conteúdo — herdando a direção de cada formato. */
.bloco-cards .item-card > a,
.bloco-grid .item-grid > a,
.bloco-mosaico .item-mosaico > a,
.bloco-compacta .item-compacta > a {
    display: flex;
    flex-direction: inherit;
    flex: 1 1 auto;
    gap: inherit;
    min-width: 0;
    /* Sem isto o item inteiro sai azul e sublinhado: cor e decoração de link se
       propagam a tudo que está dentro dele, incluindo a chamada e as tags. Nos
       formatos clássicos isso nunca apareceu porque lá `.titulo` e `.chamada`
       trazem cor própria; aqui a tipografia é herdada de propósito. */
    color: inherit;
    text-decoration: none;
}

.bloco-cards .item-card > a:hover,
.bloco-grid .item-grid > a:hover,
.bloco-mosaico .item-mosaico > a:hover,
.bloco-compacta .item-compacta > a:hover {
    color: inherit;
    text-decoration: none;
}

/* Estes quatro formatos não são o mural em preto e branco da capa: a foto é
   metade da informação do item. O `article .img-capa` global as dessatura. */
.bloco-cards .img-capa,
.bloco-grid .img-capa,
.bloco-mosaico .img-capa,
.bloco-compacta .img-capa {
    filter: none;
    opacity: 1;
    border-radius: 0;
}

/* O título é um <span> na listagem de artigos e um <h3> na de sub-páginas.
   Inline, ele ignora margem e padding verticais — e era por isso que o texto
   encostava na foto. */
.bloco-cards .titulo,
.bloco-grid .titulo,
.bloco-mosaico .titulo,
.bloco-compacta .titulo {
    display: block;
    letter-spacing: -0.2px;
}

/* Entrelinha SEM unidade, sempre. O `article .titulo` global fixa 18px, e a
   regra que aumenta a fonte do destaque do mosaico para 22px não mexia nela:
   as duas linhas do título se sobrepunham. Um número puro acompanha a fonte
   qualquer que seja o tamanho. */
.bloco-cards .titulo,
.bloco-grid .titulo,
.bloco-mosaico .titulo,
.bloco-compacta .titulo,
.bloco-cards .chamada,
.bloco-grid .chamada,
.bloco-mosaico .chamada,
.bloco-compacta .chamada {
    line-height: 1.35;
}

.bloco-cards .chamada,
.bloco-grid .chamada,
.bloco-mosaico .chamada,
.bloco-compacta .chamada {
    line-height: 1.5;
    margin-top: 6px;
    color: #4f5b6b;
}

/* As etiquetas de categoria. `article .tag` global só define `width:100%`, e a
   pílula azul-clara sobre fundo branco fica com contraste baixo demais para
   texto de 12px. */
.bloco-cards .tag,
.bloco-grid .tag,
.bloco-mosaico .tag,
.bloco-compacta .tag {
    margin-bottom: 5px;
    line-height: 0;
}

.bloco-cards .tag:empty,
.bloco-grid .tag:empty,
.bloco-mosaico .tag:empty,
.bloco-compacta .tag:empty {
    display: none;
}

.bloco-cards .tag .tag-artigo,
.bloco-grid .tag .tag-artigo,
.bloco-mosaico .tag .tag-artigo,
.bloco-compacta .tag .tag-artigo {
    font-size: 11px;
    line-height: 1.6;
    font-weight: 600;
    letter-spacing: .4px;
    text-transform: uppercase;
    color: #3f6f96;
    padding: 0;
    margin-right: 10px;
}

/* `.visto`, `.data` e `.views` são preenchidos por JavaScript (site.js) e
   pensados para a capa: `.visto` flutua à direita e `.views` injeta a palavra
   "Acessos" por `::before`. Dentro de um cartão isso vira ruído solto — e o
   float, dentro de um container flex, nem sequer flutua. A data fica, discreta,
   porque numa listagem de notícias ela informa; as outras duas saem. */
.bloco-cards .views,
.bloco-grid .views,
.bloco-mosaico .views,
.bloco-compacta .views,
.bloco-cards .visto,
.bloco-grid .visto,
.bloco-mosaico .visto,
.bloco-compacta .visto {
    display: none;
}

.bloco-cards .data,
.bloco-grid .data,
.bloco-mosaico .data,
.bloco-compacta .data {
    margin-top: 8px;
    padding-right: 0;
    font-size: 11.5px;
    line-height: 1.4;
    color: #93a1b1;
}

.bloco-cards .data:empty,
.bloco-grid .data:empty,
.bloco-mosaico .data:empty,
.bloco-compacta .data:empty {
    display: none;
}

.bloco-cards .chamada_final:empty,
.bloco-grid .chamada_final:empty,
.bloco-mosaico .chamada_final:empty,
.bloco-compacta .chamada_final:empty {
    display: none;
}

/* ── Capa ausente ───────────────────────────────────────────────────────── */
/* A maioria dos artigos deste site não tem foto. Sem um substituto, o cartão
   vira uma tira de texto e a grade perde o alinhamento — uma coluna com foto ao
   lado de outra sem. A inicial do título preenche o lugar da imagem e mantém a
   forma do item; é o mesmo recurso da listagem de sub-páginas. */
/* Mesmo gradiente e mesma cor do monograma das SUB-PÁGINAS (mais abaixo nesta
   folha): as duas listagens convivem no mesmo site, e uma inicial cinza ao lado
   de outra azul-marinho pareceria descuido, não escolha. */
.img-capa--vazia {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(140deg, var(--ref-soft, #f4f6f9), #e6ecf5);
    filter: none;
    opacity: 1;
}

.img-capa--vazia .capa-monograma {
    font-family: var(--ref-font-display, inherit);
    font-size: 38px;
    font-weight: 700;
    line-height: 1;
    color: var(--ref-navy-600, #1d4b79);
    opacity: .85;
}

/* Nada de `transform: scale(1.05)` num monograma: é o zoom que a folha aplica a
   toda `.img-capa img` no hover, e aqui não há imagem para ampliar. */
article:hover .img-capa--vazia {
    filter: none;
    opacity: 1;
}

/* ── Cartões ────────────────────────────────────────────────────────────── */
.bloco-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 22px;
    align-items: stretch;
}

.bloco-cards .item-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--ref-line, #e4e8ee);
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
    transition: transform .18s ease, box-shadow .18s ease;
    /* Todo cartão da fileira com a mesma altura, e a moldura fechando embaixo
       mesmo quando um vizinho tem três linhas de chamada e este tem uma. */
    height: 100%;
}

.bloco-cards .item-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 32px -18px rgba(15, 23, 42, .4);
}

.bloco-cards .item-card .img-capa {
    flex: 0 0 auto;
}

/* A capa do cartão sai na PROPORÇÃO DELA.
   Havia aqui um `aspect-ratio: 16 / 9` para alinhar as fotos da mesma fileira.
   O preço era cortar toda capa que não fosse 16/9 — e as deste site não são.
   A fileira volta a ficar irregular; é a troca aceita conscientemente. */
.bloco-cards .item-card .img-capa,
.bloco-cards .item-card .img-capa img,
.bloco-cards .item-card .img-capa--vazia {
    width: 100%;
    object-fit: cover;
    display: block;
}

/* A capa VAZIA é a exceção, e por necessidade: ela não tem imagem dentro, só o
   monograma de uma letra (`<span class="capa-monograma">`). Sem proporção não
   há nada que lhe dê altura — o cartão sem foto encolhia para a linha do
   monograma, virando uma tarja de ~50px no lugar do espaço de imagem. */
.bloco-cards .item-card .img-capa--vazia {
    aspect-ratio: 16 / 9;
    display: flex;
}

/* ── /ao-vivo mantém a proporção fixa ────────────────────────────────────────
   Ali as capas vêm do YouTube, que as entrega nativamente em 16/9: a proporção
   não corta nada e o alinhamento da fileira sai de graça. Escrito como exceção
   escopada, e não como `:not(.aovivo)` na regra acima, para que a regra geral
   continue dizendo o que o componente faz por padrão — e para que este
   comentário tenha onde morar.

   O gancho é a classe `aovivo` do `<main>`, emitida pelo `viewCanalAoVivo.php`,
   que existe declaradamente para servir de ponto de CSS.
   ───────────────────────────────────────────────────────────────────────── */
main.aovivo .bloco-cards .item-card .img-capa,
main.aovivo .bloco-cards .item-card .img-capa img,
main.aovivo .bloco-cards .item-card .img-capa--vazia {
    aspect-ratio: 16 / 9;
}

/* O respiro é do CONTEÚDO, não de cada texto. Antes o padding vivia no
   `.titulo` e na `.chamada`, e tudo o que não fosse esses dois — a etiqueta de
   categoria, a data — nascia colado na borda do cartão. */
.bloco-cards .item-card .conteudo {
    flex: 1 1 auto;
    padding: 14px 16px 16px;
}

.bloco-cards .item-card .titulo {
    padding: 0;
    font-size: 14px;
    font-weight: 400;
}

.bloco-cards .item-card .chamada {
    padding: 0;
    font-size: 13.5px;
}

/* ── Grade uniforme ─────────────────────────────────────────────────────── */
/* Mais densa que os cartões e sem moldura: serve a listas longas, onde a
   repetição da borda vira ruído. */
.bloco-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 22px 18px;
    align-items: start;
}

.bloco-grid .item-grid {
    display: flex;
    flex-direction: column;
}

.bloco-grid .item-grid .img-capa,
.bloco-grid .item-grid .img-capa img,
.bloco-grid .item-grid .img-capa--vazia {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 10px;
    display: block;
    overflow: hidden;
}

.bloco-grid .item-grid .img-capa--vazia {
    display: flex;
}

.bloco-grid .item-grid .conteudo {
    margin-top: 10px;
}

.bloco-grid .item-grid .titulo {
    font-size: 15px;
    font-weight: 600;
}

.bloco-grid .item-grid .chamada {
    font-size: 13px;
}

/* ── Mosaico ────────────────────────────────────────────────────────────── */
/* O primeiro item ocupa duas colunas e duas linhas. Serve à página de destaque,
   onde a manchete precisa pesar mais que o resto. */
.bloco-mosaico {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    grid-auto-rows: 1fr;
    gap: 18px;
}

.bloco-mosaico .item-mosaico {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.bloco-mosaico .item-mosaico .img-capa,
.bloco-mosaico .item-mosaico .img-capa--vazia {
    /* Cresce para ocupar o que sobra da célula. É o que faz o destaque de duas
       linhas ficar realmente alto, em vez de deixar um vão branco embaixo da
       foto — e o que mantém os itens pequenos alinhados entre si. */
    flex: 1 1 auto;
    min-height: 150px;
    overflow: hidden;
    border-radius: 10px;
}

.bloco-mosaico .item-mosaico .img-capa img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.bloco-mosaico .item-mosaico .conteudo {
    flex: 0 0 auto;
    margin-top: 10px;
}

.bloco-mosaico .item-mosaico .titulo {
    font-size: 15px;
    font-weight: 600;
}

.bloco-mosaico .item-mosaico .chamada {
    font-size: 13px;
}

.bloco-mosaico .item-mosaico:first-child {
    grid-column: span 2;
    grid-row: span 2;
}

/* Mosaico com UM item só — o trecho mais comum de todos: "o primeiro artigo em
   destaque, os seguintes em cartões". Ocupando duas das cinco colunas, ele
   ficava num quadrado à esquerda com três colunas de branco ao lado. Sozinho,
   o destaque é a linha inteira: uma manchete, que é o que o gestor pediu ao
   escolher mosaico para um artigo. */
.bloco-mosaico .item-mosaico:only-child {
    grid-column: 1 / -1;
    grid-row: auto;
}

.bloco-mosaico .item-mosaico:only-child .img-capa {
    flex: 0 0 auto;
    aspect-ratio: 21 / 9;
    min-height: 0;
}

/* Sem foto, a mesma proporção viraria meia tela de monograma. A faixa fixa
   marca o destaque sem transformar a inicial na manchete da página. */
.bloco-mosaico .item-mosaico:only-child .img-capa--vazia {
    flex: 0 0 auto;
    aspect-ratio: auto;
    height: 170px;
    min-height: 0;
}

.bloco-mosaico .item-mosaico:only-child .conteudo {
    margin-top: 14px;
}

.bloco-mosaico .item-mosaico:first-child .titulo {
    font-size: 22px;
    line-height: 1.25;
}

.bloco-mosaico .item-mosaico:only-child .titulo {
    font-size: 26px;
}

.bloco-mosaico .item-mosaico:first-child .chamada {
    font-size: 15px;
}

/* Abaixo de 640px o destaque volta a ser um item comum: em uma coluna, ocupar
   "duas" não significa nada e só alongaria a página. */
@media (max-width: 640px) {
    .bloco-mosaico {
        grid-auto-rows: auto;
    }

    .bloco-mosaico .item-mosaico:first-child {
        grid-column: auto;
        grid-row: auto;
    }

    .bloco-mosaico .item-mosaico:first-child .titulo {
        font-size: 18px;
    }

    .bloco-mosaico .item-mosaico .img-capa,
    .bloco-mosaico .item-mosaico .img-capa--vazia {
        flex: 0 0 auto;
        aspect-ratio: 16 / 9;
    }
}

/* ── Lista compacta ─────────────────────────────────────────────────────── */
/* Miniatura pequena à esquerda e texto à direita: cabe muito item por tela,
   para arquivos e listagens longas. */
.bloco-compacta {
    display: flex;
    flex-direction: column;
}

.bloco-compacta .item-compacta {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 14px;
    padding: 14px 0;
    border-bottom: 1px solid var(--ref-line, #e4e8ee);
}

/* A direção é `row` aqui, não a coluna dos outros três: é o <a> que precisa pôr
   miniatura e texto lado a lado, porque no artigo os dois estão dentro dele. */
.bloco-compacta .item-compacta > a {
    flex-direction: row;
    align-items: flex-start;
    gap: 14px;
}

.bloco-compacta .item-compacta:last-child {
    border-bottom: 0;
}

.bloco-compacta .item-compacta .img-capa,
.bloco-compacta .item-compacta .img-capa--vazia {
    flex: 0 0 108px;
    width: 108px;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: 8px;
}

.bloco-compacta .item-compacta .img-capa img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.bloco-compacta .item-compacta .img-capa--vazia .capa-monograma {
    font-size: 26px;
}

/* `min-width: 0` para o texto poder encolher: sem isso um título longo sem
   espaços empurra a miniatura para fora da linha. */
.bloco-compacta .item-compacta .conteudo {
    flex: 1 1 auto;
    min-width: 0;
}

.bloco-compacta .item-compacta .titulo {
    font-size: 15.5px;
    font-weight: 600;
    margin: 0;
}

.bloco-compacta .item-compacta .chamada {
    font-size: 13px;
    margin-top: 4px;
}

@media (max-width: 480px) {

    .bloco-compacta .item-compacta .img-capa,
    .bloco-compacta .item-compacta .img-capa--vazia {
        flex-basis: 76px;
        width: 76px;
    }

    .bloco-compacta .item-compacta .img-capa--vazia .capa-monograma {
        font-size: 20px;
    }
}

/* ── Movimento ──────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {

    .bloco-cards .item-card {
        transition: none;
    }

    .bloco-cards .item-card:hover {
        transform: none;
    }

    .bloco-cards .item-card:hover .img-capa img,
    .bloco-grid .item-grid:hover .img-capa img,
    .bloco-mosaico .item-mosaico:hover .img-capa img,
    .bloco-compacta .item-compacta:hover .img-capa img {
        transform: none;
    }
}

/* ── Sub-páginas (atribuição "Sub-páginas" / valor `segmentos`) ─────────── */
/* Os itens usam as MESMAS classes de layout dos artigos (item-card, item-grid,
   item-mosaico, item-compacta), então "Tipo de lista" se comporta igual nos
   dois lugares. O que segue é só o que é próprio da sub-página. */

/* Link esticado: o <a> fica só no título, mas o ::after dele cobre o item
   inteiro. O alvo de clique continua sendo a linha toda, e o resumo pode ter
   links próprios (telefone, mapa, redes) — o que era impossível quando o item
   inteiro era um <a>, porque âncora dentro de âncora é HTML inválido. */
.item-subpagina {
    position: relative;
}

.item-subpagina .item-subpagina__link {
    color: inherit;
    text-decoration: none;
}

.item-subpagina .item-subpagina__link::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
}

.item-subpagina .titulo {
    color: var(--ref-navy-800, #0d2339);
    transition: color .18s ease;
}

.item-subpagina .item-subpagina__link:hover {
    color: var(--ref-blue, #2d7bcb);
}

.item-subpagina .chamada {
    margin-top: 5px;
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--ref-muted, #5d6b7a);
}

/* Monograma no lugar da imagem ausente.
   Nenhuma sub-página tem capa hoje; uma grade de molduras vazias parece
   defeito, e a inicial ainda ajuda a diferenciar os itens de relance. */
.item-subpagina .capa-monograma {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 10px;
    background: linear-gradient(140deg, var(--ref-soft, #f4f6f9), #e6ecf5);
    color: var(--ref-navy-600, #1d4b79);
    font-family: var(--ref-font-display, inherit);
    font-size: 34px;
    font-weight: 700;
    opacity: .85;
}

/* Na lista compacta a miniatura é pequena e fixa: a proporção 16/9 acima
   deixaria o monograma achatado ao lado do texto. */
.bloco-compacta .item-subpagina .capa-monograma {
    aspect-ratio: 4 / 3;
    font-size: 24px;
    border-radius: 8px;
}

/* No mosaico o destaque ocupa duas linhas: o monograma precisa preencher a
   altura toda, senão sobra um vão embaixo dele. */
.bloco-mosaico .item-subpagina:first-child .capa-monograma {
    aspect-ratio: auto;
    min-height: 220px;
    font-size: 56px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   "Abaixo um do outro" — duas colunas: imagem | título + chamada
   ---------------------------------------------------------------------------
   Antes era `display:inline-block` com larguras em porcentagem (40% + 50% +
   25px de margem) e `vertical-align:top`. Três consequências: o texto encostava
   no topo em vez de acompanhar o centro da imagem; o espaço em branco entre os
   inline-block virava um vão que ninguém pediu; e 40+50+25px passava de 100%
   em telas estreitas, empurrando o texto para baixo da imagem.

   Grid resolve os três: as colunas são declaradas, o `align-items: center`
   alinha o texto ao centro vertical da imagem e o `gap` substitui a margem.

   As duas listagens (artigos e sub-páginas) são cobertas: numa o container é o
   <article>, na outra é o <a> que envolve o item — as duas têm img-capa e
   conteudo como filhos diretos.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Um seletor só para as duas listagens. Antes era preciso excluir o
   `.item-subpagina` e mirar o <a> interno, porque ele é que envolvia as duas
   colunas; com o link esticado o <article> voltou a ser o container nos dois
   casos, e a exceção deixou de existir. */
.bloco-abaixo-do-outro article {
    display: grid;
    /* A imagem tem largura fixa e o texto fica com o resto: com as duas em
       porcentagem, a coluna do texto encolhia junto em telas médias. */
    grid-template-columns: 260px 1fr;
    gap: 22px;
    align-items: center;
}

/* Reposiciona o que o CSS antigo dimensionava por inline-block. */
.bloco-abaixo-do-outro article .img-capa {
    display: block;
    width: auto;
    height: auto;
    margin: 0;
}

.bloco-abaixo-do-outro article .img-capa img {
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    border-radius: 10px;
    display: block;
}

.bloco-abaixo-do-outro article .conteudo {
    display: block;
    width: auto;
    margin: 0;
}

.bloco-abaixo-do-outro .item-subpagina .titulo {
    margin: 0;
}

.bloco-abaixo-do-outro .item-subpagina .chamada {
    margin-top: 6px;
    /* Chamada longa não pode esticar a linha indefinidamente: três linhas dão
       o contexto e mantêm as linhas da lista com alturas parecidas. */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* O monograma acompanha a proporção da coluna, senão fica um quadrado solto
   ao lado de um texto centralizado. */
.bloco-abaixo-do-outro .item-subpagina .capa-monograma {
    aspect-ratio: 16 / 10;
    font-size: 40px;
}

/* O primeiro item continua maior — a variante `.FirstArticles` que já existia.
   Só a coluna muda; o alinhamento central vem da regra acima. */
.bloco-abaixo-do-outro .FirstArticles {
    grid-template-columns: 380px 1fr;
}

.bloco-abaixo-do-outro .FirstArticles .img-capa,
.bloco-abaixo-do-outro .FirstArticles .conteudo {
    width: auto;
    margin: 0;
}

/* Abaixo de 700px as duas colunas viram uma: 260px de imagem ao lado de texto
   não cabe, e espremer as duas deixa as duas ruins. */
@media (max-width: 700px) {

    .bloco-abaixo-do-outro article,
    .bloco-abaixo-do-outro .FirstArticles {
        grid-template-columns: 1fr;
        gap: 12px;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Ficha resumida dentro da listagem de sub-páginas

   Aparece só na comunidade que não tem nenhum bloco de texto: ali o item
   mostraria apenas o título, e endereço e telefone são justamente o que se
   procura. Os links aqui funcionam de verdade — ficam acima do ::after do link
   esticado (ver pagina_ficha_resumo_um em ui-app/funcoes.php).
   ═══════════════════════════════════════════════════════════════════════════ */

.ficha-resumo {
    margin: 10px 0 0;
    padding: 10px 0 0;
    border-top: 1px dashed var(--ref-line, #e4e8ee);
    /* Acima da camada do link esticado, senão o ::after do título cobriria os
       links do resumo e o clique no telefone abriria a página da comunidade. */
    position: relative;
    z-index: 1;
    /* Só os links do resumo capturam o ponteiro. Sem isto, nos formatos de
       cartão o resumo cobre a parte de baixo do item e o clique no espaço
       entre as linhas não fazia nada — em vez de abrir a comunidade. */
    pointer-events: none;
}

.ficha-resumo a {
    pointer-events: auto;
}

/* A largura da coluna de ícones. Uma variável, e não um número repetido: ela
   entra na grade, na caixa do ícone, no diâmetro do pino, no recuo das redes e
   na conta que recentra o pino na primeira linha. Nos formatos estreitos basta
   trocar este valor. */
.ficha-resumo {
    --ficha-col: 26px;
}

/* Grade e mosaico dão ao item uma coluna de ~210px. Ali um pino de 26px come um
   oitavo da largura útil e o texto nasce longe demais da borda. */
.bloco-grid .ficha-resumo,
.bloco-mosaico .ficha-resumo {
    --ficha-col: 20px;
}

/* ── A coluna ────────────────────────────────────────────────────────────────
   UMA grade para tudo: o bloco de localização e cada linha de campo usam a
   mesma `grid-template-columns`, e por isso todo o texto da ficha começa na
   mesma vertical.

   Antes eram dois flex independentes — o pino num de 26px e os ícones noutro de
   14px —, e o texto do endereço nascia 14px à direita do texto do telefone. Era
   o desencontro que mais saltava à vista, porque a ficha inteira tem só duas
   colunas e uma delas não fechava.
   ─────────────────────────────────────────────────────────────────────────── */
.ficha-resumo__local,
.ficha-resumo__item {
    display: grid;
    grid-template-columns: var(--ficha-col, 26px) minmax(0, 1fr);
    column-gap: 10px;
    align-items: start;
}

/* Ícone e texto alinhados PELA PRIMEIRA LINHA.
   `align-items: baseline` parecia a escolha óbvia e era a errada: o <i> do
   FontAwesome é uma caixa de altura zero posicionada pela baseline do glifo, e
   o ícone acabava treze pixels abaixo do topo do texto. Uma caixa com a altura
   da linha, com o glifo centrado nela, encaixa os dois sem depender de qual
   glifo é. */
.ficha-resumo__local>i,
.ficha-resumo__item>i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--ficha-col, 26px);
    color: var(--ref-gold, #c9a24b);
}

/* ── Localização em destaque ─────────────────────────────────────────────── */
/* O endereço é o que se procura numa comunidade: ganha corpo maior, cor de
   tinta e o pino em círculo. O ponto de referência vem embaixo como nota, em
   vez de disputar espaço como mais uma linha de ícone. */
.ficha-resumo__local {
    margin-bottom: 9px;
}

.ficha-resumo__local>i {
    /* O pino é um círculo, então altura = largura da coluna. Ele é maior que a
       primeira linha do endereço (14px × 1.4 = 19,6), e a margem negativa o
       recentra nela — calculada, e não escrita à mão, para continuar certa
       quando a coluna encolhe nos cartões estreitos. */
    height: var(--ficha-col, 26px);
    margin-top: calc((19.6px - var(--ficha-col, 26px)) / 2);
    border-radius: 50%;
    background: var(--ref-gold-soft, #f3e5c3);
    color: var(--ref-navy-700, #153457);
    font-size: calc(var(--ficha-col, 26px) * .42);
}

.ficha-resumo__local-corpo {
    min-width: 0;
}

.ficha-resumo__endereco {
    display: block;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
    color: var(--ref-navy-800, #0d2339);
    overflow-wrap: anywhere;
}

.ficha-resumo__nota {
    display: block;
    margin-top: 2px;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.4;
    color: var(--ref-muted, #5d6b7a);
}

/* ── "ver no mapa" ───────────────────────────────────────────────────────── */
/* Um link pequeno, próprio, sempre visível. O endereço acima é texto: quem lê
   um endereço quer lê-lo, e quem quer o mapa clica na palavra que diz mapa.

   `inline-flex` com `width: fit-content` para a área clicável ser a do rótulo e
   nem um pixel além — num cartão estreito, um link em `display:block` ocuparia
   a linha inteira e roubaria o clique de abrir a comunidade. */
.ficha-resumo__mapa {
    /* `inline-flex` com `width: fit-content` para a área clicável ser a do
       rótulo e nem um pixel além. Em `display: block` o link ocuparia a linha
       toda do cartão e roubaria o clique de abrir a comunidade. */
    display: inline-flex;
    width: fit-content;
    margin-top: 6px;
    font-size: 11.5px;
    font-weight: 500;
    line-height: 1.4;
    color: var(--ref-muted, #5d6b7a);
    text-decoration: none;
    border-bottom: 1px solid var(--ref-line, #e4e8ee);
    transition: color .18s ease, border-color .18s ease;
}

.ficha-resumo__mapa:hover,
.ficha-resumo__mapa:focus-visible {
    color: var(--ref-navy-700, #153457);
    border-bottom-color: currentColor;
    text-decoration: none;
}

/* ── Demais campos ───────────────────────────────────────────────────────── */
.ficha-resumo__lista {
    list-style: none;
    display: grid;
    gap: 5px;
    margin: 0;
    padding: 0;
}

.ficha-resumo__item {
    margin: 0;
    font-size: 12px;
    line-height: 1.45;
    /* O <li> herdava 600 da listagem e o resumo saía tão pesado quanto o
       título. 300 é o peso da chamada: aqui é dado, não prosa. */
    font-weight: 300;
    color: var(--ref-muted, #5d6b7a);
}

.ficha-resumo__item>i {
    /* 12px × 1.45 = 17.4: a altura exata de uma linha do texto ao lado. É este
       número que encaixa o ícone na primeira linha, então ele acompanha o
       corpo do texto — mudar um sem o outro desalinha a coluna inteira. */
    height: 17.4px;
    font-size: 11px;
}

/* Duas linhas no máximo, mesmo recurso já usado na chamada: mantém as linhas
   da listagem com alturas parecidas sem cortar um endereço no meio. */
.ficha-resumo__valor {
    min-width: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    overflow-wrap: anywhere;
    color: inherit;
    text-decoration: none;
}

a.ficha-resumo__valor:hover,
a.ficha-resumo__valor:focus-visible {
    color: var(--ref-navy-700, #153457);
    text-decoration: underline;
}

/* ── Telefone e WhatsApp no mesmo número ─────────────────────────────────── */
/* O número aparece uma vez e as duas ações viram botões minúsculos ao lado.
   Esta linha tem TRÊS filhos, e a grade de duas colunas jogaria o terceiro para
   a linha de baixo: os dois botões apareciam sob o número, desalinhados do
   resto. A coluna extra é `auto`, então ela some quando não há botões. */
.ficha-resumo__item--fone {
    grid-template-columns: var(--ficha-col, 26px) auto minmax(0, 1fr);
}

.ficha-resumo__acoes {
    display: inline-flex;
    gap: 5px;
    margin-left: 8px;
    /* Centrado na altura da linha do número, e não esticado por ela: os botões
       têm 22px e a linha 18,85 — sem isto eles cresceriam e a linha do telefone
       ficaria mais alta que as vizinhas. */
    align-self: center;
}

.ficha-resumo__acoes a {
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--ref-soft, #f4f6f9);
    border: 1px solid var(--ref-line, #e4e8ee);
    color: var(--ref-navy-700, #153457);
    font-size: 10px;
    text-decoration: none;
    transition: background-color .18s ease, color .18s ease;
}

.ficha-resumo__acoes a:hover,
.ficha-resumo__acoes a:focus-visible {
    background: var(--ref-navy-800, #0d2339);
    color: #fff;
}

/* ── Redes ───────────────────────────────────────────────────────────────── */
/* Recuadas até a coluna de texto. Encostadas na borda esquerda elas eram a
   única coisa da ficha fora da régua vertical — e a coluna estreita da esquerda
   é dos ícones-rótulo, não do conteúdo. */
.ficha-resumo__redes {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 12px;
    margin-left: calc(var(--ficha-col, 26px) + 10px);
}

.ficha-resumo__rede {
    width: 27px;
    height: 27px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--ref-soft, #f4f6f9);
    color: var(--ref-navy-700, #153457);
    font-size: 12px;
    text-decoration: none;
    transition: background-color .18s ease, color .18s ease, transform .18s ease;
}

.ficha-resumo__rede:hover,
.ficha-resumo__rede:focus-visible {
    color: #fff;
    background: var(--ref-navy-800, #0d2339);
    transform: translateY(-2px);
}

.ficha-resumo__rede--facebook:hover {
    background: #1877f2;
}

.ficha-resumo__rede--instagram:hover {
    background: linear-gradient(45deg, #f09433, #dc2743 45%, #bc1888);
}

.ficha-resumo__rede--youtube:hover {
    background: #ff0000;
}

.ficha-resumo__rede--site:hover {
    background: var(--ref-gold, #c9a24b);
    color: var(--ref-navy-950, #060f1d);
}

/* ── Dentro do cartão com máscara ────────────────────────────────────────────
   Aqui o item é uma foto com um degradê escuro no rodapé e o título por cima.
   A ficha inteira não cabe: oito linhas de texto cinza subiam sobre a imagem,
   cobriam o monograma e ficavam ilegíveis contra o fundo escuro — era o pior
   dos sete formatos.

   Neste cartão a ficha se reduz ao ENDEREÇO, em tinta clara. É a informação que
   se procura numa comunidade, cabe na faixa do rodapé e não desmancha o
   formato. Telefone, e-mail e redes continuam inteiros nos outros seis; quem
   precisa deles escolhe cartões ou lista compacta.
   ─────────────────────────────────────────────────────────────────────────── */
.bloco-lado-mascara .ficha-resumo {
    --ficha-col: 20px;
    margin-top: 8px;
    padding-top: 8px;
    border-top-color: rgba(255, 255, 255, .18);
}

.bloco-lado-mascara .ficha-resumo__lista,
.bloco-lado-mascara .ficha-resumo__redes,
.bloco-lado-mascara .ficha-resumo__nota {
    display: none;
}

.bloco-lado-mascara .ficha-resumo__local {
    margin-bottom: 0;
}

.bloco-lado-mascara .ficha-resumo__local>i {
    background: rgba(255, 255, 255, .16);
    color: #fff;
}

.bloco-lado-mascara .ficha-resumo__endereco {
    font-size: 12.5px;
    font-weight: 400;
    color: rgba(255, 255, 255, .92);
    /* Duas linhas no máximo: um endereço longo empurraria o degradê até o topo
       do cartão e a foto sumiria atrás dele. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.bloco-lado-mascara .ficha-resumo__mapa {
    color: rgba(255, 255, 255, .72);
    border-bottom-color: rgba(255, 255, 255, .3);
}

.bloco-lado-mascara .ficha-resumo__mapa:hover,
.bloco-lado-mascara .ficha-resumo__mapa:focus-visible {
    color: #fff;
    border-bottom-color: #fff;
}

@media (max-width: 767px) {
    .ficha-resumo {
        --ficha-col: 22px;
        margin-top: 8px;
        padding-top: 8px;
    }

    /* Sem exceção de corpo aqui. Esta regra existia para REDUZIR de 13 para
       12,5 no celular; com o texto já em 12px ela viraria um aumento — o
       oposto do que foi escrita para fazer. */

    /* O "ver no mapa" CONTINUA visível no celular. Ele sumia aqui porque só
       existia no hover do endereço, e no toque não há hover — mas agora é um
       link próprio, e é justamente no telefone que abrir o mapa mais serve.
       O que ele ganha é altura de alvo: 24px é o mínimo confortável. */
    .ficha-resumo__mapa {
        min-height: 24px;
        align-items: center;
    }

    /* Alvos de toque maiores. */
    .ficha-resumo__acoes a {
        width: 26px;
        height: 26px;
    }

    .ficha-resumo__rede {
        width: 30px;
        height: 30px;
    }
}

/* ── Bloco de colunas no artigo ──────────────────────────────────────────────
   O recipiente que o editor cria em dois passos (arranjo → componente). As
   proporções são as mesmas oferecidas lá; o `art-bloco` já traz o espaçamento
   vertical entre blocos, então aqui só entra a divisão horizontal.
   ───────────────────────────────────────────────────────────────────────── */

.art-bloco--colunas {
    display: grid;
    gap: 24px;
    align-items: start;
}

.art-colunas--50-50 {
    grid-template-columns: 1fr 1fr;
}

.art-colunas--70-30 {
    grid-template-columns: 7fr 3fr;
}

.art-colunas--30-70 {
    grid-template-columns: 3fr 7fr;
}

/* `min-width: 0` para a coluna poder ficar menor que a imagem ou a tabela que
   tem dentro; sem ele um conteúdo largo empurra a outra coluna para fora. */
.art-coluna {
    min-width: 0;
}

/* Dentro da coluna, os blocos empilham com o mesmo respiro de fora — mas o
   primeiro e o último não repetem a margem do recipiente. */
.art-coluna>.art-bloco:first-child {
    margin-top: 0;
}

.art-coluna>.art-bloco:last-child {
    margin-bottom: 0;
}

/* No celular a divisão desaparece: 30% de uma tela de 390px é uma tira. */
@media (max-width: 700px) {
    .art-bloco--colunas[class] {
        grid-template-columns: 1fr;
        gap: 18px;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   "CARREGAR MAIS"

   O botão que estica a listagem em trechos. O espaço ENTRE os trechos e o
   conserto dos formatos dentro deles ficam no bloco seguinte.
   ═══════════════════════════════════════════════════════════════════════════ */

.listagem-mais-caixa {
    display: flex;
    justify-content: center;
    margin-top: 28px;
}

/* Um <button>, e escondido de saída: quem o revela é o `lista-mais.js`. Numa
   página desenhada por template não existe paginação para onde um link de
   reserva pudesse apontar, então sem JavaScript o botão não deve nem aparecer.

   A regra `[hidden]` é obrigatória e vem PRIMEIRO em importância: `display`
   declarado numa classe vence o atributo `hidden`, e sem ela o botão apareceria
   justamente para quem não pode usá-lo. */
.listagem-mais[hidden] {
    display: none;
}

.listagem-mais {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 11px 26px;
    border: 1px solid var(--ref-line, #e4e8ee);
    border-radius: 999px;
    background: #fff;
    color: inherit;
    /* `font: inherit` porque é um <button>: sem isto o navegador impõe a fonte
       de sistema e o rótulo destoa do resto da página. */
    font: inherit;
    font-size: 15px;
    /* Peso normal: o botão fecha a lista, não a encabeça. Em negrito ele
       competia com os títulos dos artigos logo acima — e o que o destaca já é a
       moldura arredondada, sozinha no meio da coluna. */
    font-weight: 400;
    cursor: pointer;
    transition: background .18s ease, box-shadow .18s ease, transform .18s ease;
}

.listagem-mais:hover {
    background: #f8fafc;
    box-shadow: 0 10px 24px -16px rgba(15, 23, 42, .5);
}

.listagem-mais:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 3px;
}

.listagem-mais:active {
    transform: translateY(1px);
}

/* Quantos ainda faltam. É a informação que decide se vale a pena clicar — sem
   ela o botão pede um clique às cegas. */
.listagem-mais-restam {
    padding: 2px 9px;
    border-radius: 999px;
    background: var(--ref-line, #e4e8ee);
    font-size: 12.5px;
    /* Acompanha o rótulo. Um número em negrito ao lado de texto normal chamaria
       mais atenção que a própria ação; quem separa a contagem do rótulo é o
       fundo da pílula. */
    font-weight: 400;
}

.listagem-mais-restam::before {
    content: '+';
}

/* Carregando: o botão para de responder e diz por quê. O `pointer-events` é o
   que impede a fila de pedidos de quem clica três vezes. */
.listagem-mais--carregando {
    pointer-events: none;
    opacity: .6;
}

/* O pedido falhou. O botão volta a ser um link comum — o próximo clique navega
   para a paginação — e a contagem sai, porque deixou de ser confiável. */
.listagem-mais--offline .listagem-mais-restam {
    display: none;
}

@media (prefers-reduced-motion: reduce) {

    .listagem-mais,
    .listagem-mais:active {
        transition: none;
        transform: none;
    }
}


/* ═══════════════════════════════════════════════════════════════════════════
   LISTAGEM EM TRECHOS — normalização dos formatos

   O widget "Listagem dos filhos" oferece os quatro formatos modernos e os três
   clássicos (lado a lado, um abaixo do outro, lado a lado com máscara). Os
   clássicos nasceram para a CAPA e para as listagens antigas, e ali continuam
   como sempre foram — nada aqui os alcança fora de `.listagem-trechos`.

   Dentro de um trecho, porém, eles precisavam de conserto. Duas coisas
   quebravam em todos:

     1. TIPOGRAFIA DE LINK. O item inteiro é um <a>, e cor e sublinhado se
        propagam ao que está dentro. A chamada saía azul e sublinhada, como se
        fosse um segundo link dentro do primeiro.

     2. ESPAÇO EM BRANCO ENTRE INLINE-BLOCKS. `um abaixo do outro` põe a foto a
        40% e o texto a 50%, os dois `inline-block`. Some-se a margem de 25px e
        o espaço que o HTML deixa entre as duas <div> e passa de 100%: o texto
        caía para baixo da foto e a metade direita da linha ficava vazia. Flex
        não conta espaço em branco, e é essa a troca feita aqui.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Tipografia, para os sete formatos ──────────────────────────────────── */
.listagem-trechos article > a {
    color: inherit;
    text-decoration: none;
}

.listagem-trechos article > a:hover {
    color: inherit;
    text-decoration: none;
}

/* Entrelinha proporcional. Vale sobretudo para os formatos que aumentam a
   fonte do destaque sem tocar no `line-height: 18px` da folha de artigos. */
.listagem-trechos .titulo {
    display: block;
    line-height: 1.35;
}

.listagem-trechos .chamada {
    line-height: 1.5;
    color: #4f5b6b;
}

.listagem-trechos .chamada:empty,
.listagem-trechos .chamada_final:empty,
.listagem-trechos .tag:empty {
    display: none;
}

/* Numa lista de notícias a foto é metade do que o item comunica. O
   `filter: grayscale(1)` global existe para o mural da capa, onde a
   dessaturação uniformiza um mosaico de fontes diferentes — aqui ela só apaga
   a informação, e ainda cria o efeito estranho de a cor "acender" no hover. */
.listagem-trechos .img-capa {
    filter: none;
    opacity: 1;
}

.listagem-trechos article:hover .img-capa {
    filter: none;
    opacity: 1;
}

/* Etiquetas de categoria com a mesma voz nos sete formatos: versalete pequeno,
   discreto, longe do azul de link que elas herdavam. */
.listagem-trechos .tag {
    line-height: 0;
    margin-bottom: 5px;
}

.listagem-trechos .tag .tag-artigo {
    font-size: 11px;
    line-height: 1.6;
    font-weight: 600;
    letter-spacing: .4px;
    text-transform: uppercase;
    color: #3f6f96;
    padding: 0;
    margin-right: 10px;
}

/* Preenchidos por JavaScript e pensados para a capa: `.visto` flutua à direita
   e `.views` injeta a palavra "Acessos" por `::before`. Num trecho de listagem
   viram texto solto sem contexto. */
.listagem-trechos .views,
.listagem-trechos .visto {
    display: none;
}

.listagem-trechos .data {
    margin-top: 8px;
    padding-right: 0;
    font-size: 11.5px;
    line-height: 1.4;
    color: #93a1b1;
}

.listagem-trechos .data:empty {
    display: none;
}

/* ── Um abaixo do outro ─────────────────────────────────────────────────── */
.listagem-trechos .bloco-abaixo-do-outro article,
.listagem-trechos .bloco-abaixo-do-outro article > a {
    display: flex;
    align-items: flex-start;
    gap: 22px;
}

.listagem-trechos .bloco-abaixo-do-outro article > a {
    flex: 1 1 auto;
    min-width: 0;
}

.listagem-trechos .bloco-abaixo-do-outro article .img-capa,
.listagem-trechos .bloco-abaixo-do-outro article .img-capa--vazia {
    /* Largura fixa em vez de percentual: com flex, a porcentagem se mede contra
       o container e não contra o que sobra, e uma coluna de texto estreita
       fazia a foto invadir a outra metade. */
    flex: 0 0 300px;
    width: 300px;
    height: auto;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    border-radius: 8px;
    margin: 0;
}

.listagem-trechos .bloco-abaixo-do-outro article .img-capa img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.listagem-trechos .bloco-abaixo-do-outro article .conteudo {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    margin-left: 0;
}

/* O destaque do topo pesa mais, mas dentro da mesma linha — não numa forma
   própria que desalinharia a lista inteira. */
.listagem-trechos .bloco-abaixo-do-outro .FirstArticles .img-capa,
.listagem-trechos .bloco-abaixo-do-outro .FirstArticles .img-capa--vazia {
    flex-basis: 420px;
    width: 420px;
    height: auto;
}

.listagem-trechos .bloco-abaixo-do-outro .FirstArticles .titulo {
    font-size: 22px;
    line-height: 1.25;
    padding-bottom: 0;
}

.listagem-trechos .bloco-abaixo-do-outro .FirstArticles .conteudo {
    width: auto;
    margin-bottom: 0;
}

@media (max-width: 700px) {

    .listagem-trechos .bloco-abaixo-do-outro article,
    .listagem-trechos .bloco-abaixo-do-outro article > a {
        flex-direction: column;
        gap: 12px;
    }

    .listagem-trechos .bloco-abaixo-do-outro article .img-capa,
    .listagem-trechos .bloco-abaixo-do-outro article .img-capa--vazia,
    .listagem-trechos .bloco-abaixo-do-outro .FirstArticles .img-capa,
    .listagem-trechos .bloco-abaixo-do-outro .FirstArticles .img-capa--vazia {
        flex-basis: auto;
        width: 100%;
    }
}

/* ── Lado a lado ────────────────────────────────────────────────────────── */
/* As larguras em porcentagem (45%, 32%, 23,5%…) e as margens negativas de
   fechamento de linha vêm da grade em `inline-block` do site.css. Numa grade de
   verdade elas não são necessárias — e eram elas que deixavam a última coluna
   de cada linha desencontrada. */
.listagem-trechos .display-news.lado-a-lado,
.listagem-trechos .display-itens.lado-a-lado,
.listagem-trechos [class*="lado-a-lado-"] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
    gap: 24px;
}

.listagem-trechos .display-news.lado-a-lado article.lado-a-lado,
.listagem-trechos .display-itens.lado-a-lado article.lado-a-lado,
.listagem-trechos [class*="lado-a-lado-"] article.lado-a-lado {
    width: auto;
    margin: 0;
    display: flex;
    flex-direction: column;
}

.listagem-trechos article.lado-a-lado > a {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-width: 0;
}

.listagem-trechos article.lado-a-lado .img-capa,
.listagem-trechos article.lado-a-lado .img-capa--vazia {
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: 10px;
    filter: none;
    opacity: 1;
}

.listagem-trechos article.lado-a-lado .img-capa img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.listagem-trechos article.lado-a-lado .conteudo {
    margin-top: 10px;
}

.listagem-trechos article.lado-a-lado .titulo {
    font-size: 16px;
    font-weight: 600;
}

.listagem-trechos article.lado-a-lado .chamada {
    font-size: 13.5px;
}

/* O destaque não recebe forma diferente aqui. Na capa ele abre a página com
   foto grande e texto ao lado; no meio de uma lista de trechos, um item com
   outro desenho quebra a leitura da grade — e o destaque, quando é desejado, é
   o que o trecho de mosaico faz melhor. */
.listagem-trechos .display-news article.FirstArticles.lado-a-lado,
.listagem-trechos .display-itens article.FirstArticles.lado-a-lado {
    display: flex;
    flex-direction: column;
    width: auto;
}

.listagem-trechos .display-news article.FirstArticles.lado-a-lado .img-capa,
.listagem-trechos .display-itens article.FirstArticles.lado-a-lado .img-capa {
    width: 100%;
    float: none;
}

.listagem-trechos .display-news article.FirstArticles.lado-a-lado .conteudo,
.listagem-trechos .display-itens article.FirstArticles.lado-a-lado .conteudo {
    width: auto;
    float: none;
    padding: 0;
}

.listagem-trechos .display-news article.FirstArticles.lado-a-lado .conteudo .titulo,
.listagem-trechos .display-itens article.FirstArticles.lado-a-lado .conteudo .titulo {
    font-size: 16px;
    line-height: 1.35;
}

/* ── Espaço entre trechos ───────────────────────────────────────────────── */
/* Um trecho precisa terminar antes de o outro começar. Sem esta folga, o último
   cartão de um encosta no primeiro item do seguinte e a lista parece um bloco
   só, mal alinhado — em vez de dois desenhos deliberados. */
.listagem-trechos > div + div {
    margin-top: 34px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   LISTAGENS EM LINHA DO TEMPO — "Tipo de lista" (aba Veiculação)
   ---------------------------------------------------------------------------
   Três formatos que contam a mesma história de três jeitos:

     .bloco-linha-tempo               espinha vertical pontilhada, cartões
                                      alternando os lados, ligados por um fio
                                      com um nó em cada ponta
     .bloco-linha-tempo--caminho      sem cartão: a foto num círculo e o texto
                                      abaixo dela, o fio saindo do círculo
     .bloco-linha-tempo--horizontal   uma faixa que se arrasta para o lado,
                                      como uma galeria

   O CARTÃO É UM SÓ (`.item-linha-tempo`): o que muda é o bloco em volta. Foi o
   que permitiu não tocar em `artigo_item_html()` além dos dois pedaços que só
   estes formatos usam — o `<time class="marco-data">` e o `.auxiliar`.

   ─ A TIPOGRAFIA ────────────────────────────────────────────────────────────
   Nada aqui declara `--ref-font-display`. Aquela variável resolve para Optis,
   a extra-bold estendida das peças de destaque — o número do calendário, o
   monograma da capa vazia. Ela NÃO é a fonte desta interface: o h1 das páginas,
   o corpo e os títulos das outras listagens são todos GothamPro, e nenhum dos
   formatos existentes (`item-card`, `item-grid`, `item-mosaico`,
   `item-compacta`) declara família no `.titulo` — todos herdam do corpo.

   A primeira versão destes três formatos pôs Optis no título e no marco de
   data, e o resultado foi uma listagem em outra família no meio de um site que
   já tinha a sua. O destaque que a família dava volta pelo PESO, que é a mesma
   escolha registrada em `agenda-site.css` para o número do dia.

   ─ POR QUE O CONTÊINER NÃO É UM GRID ───────────────────────────────────────
   `artigos_canal()` põe mais coisas dentro do mesmo <div> além dos artigos: o
   nome da tag filtrada e a lista de tags do blog. Num grid ou num flex, esses
   dois virariam células e entrariam na alternância esquerda/direita como se
   fossem registros. Nos dois formatos verticais o bloco continua sendo um bloco
   comum, e só o que é `> article` recebe posição — o resto flui normalmente.
   (O horizontal é a exceção, e ali há uma regra explícita para eles.)

   ─ AS DUAS ÁRVORES ─────────────────────────────────────────────────────────
   Como no resto desta folha, o item pode vir em duas formas — <article><a>…
   (artigos) e <article> direto (sub-páginas). Os seletores miram o <article> e
   o `.conteudo`, que existem nas duas.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── A espinha ──────────────────────────────────────────────────────────────
   Pontilhada, e não um traço cheio: o fio de cada cartão é contínuo, e é o
   contraste entre os dois que faz o fio parecer amarrado à espinha em vez de
   ser mais um pedaço dela.

   `repeating-linear-gradient` em vez de `border-left: dotted`: a borda pontilha
   com o espaçamento que o navegador escolher, e em 2px de largura ela vira uma
   fieira de quadradinhos grudados. Aqui o ponto e o vão são declarados. */
.bloco-linha-tempo {
    position: relative;
    padding: 10px 0 20px;
    /* O contador numera os nós do formato "Caminho". Fica aqui, no bloco,
       porque é ele que conhece a sequência inteira. */
    counter-reset: marco-linha-tempo;
}

.bloco-linha-tempo::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 3px;
    margin-left: -1.5px;
    border-radius: 3px;
    background: repeating-linear-gradient(
        180deg,
        var(--ref-navy-600, #1d4b79) 0 4px,
        transparent 4px 11px
    );
    /* As pontas somem em vez de terminarem em corte seco. Máscara, e não um
       degradê no próprio fundo, porque o fundo já está ocupado pelo pontilhado.
       Sem suporte, a espinha apenas começa e termina reta — nada quebra. */
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 56px, #000 calc(100% - 56px), transparent 100%);
            mask-image: linear-gradient(180deg, transparent 0, #000 56px, #000 calc(100% - 56px), transparent 100%);
}

/* ── O cartão ───────────────────────────────────────────────────────────── */
.bloco-linha-tempo > article {
    position: relative;
    width: calc(50% - 54px);
    margin: 0 0 30px;
    box-sizing: border-box;
    background: var(--ref-white, #fff);
    border: 1px solid var(--ref-line, #e4e8ee);
    border-radius: var(--ref-radius, 14px);
    box-shadow: var(--ref-shadow-sm, 0 1px 2px rgba(13, 35, 57, .08));
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;

    /* `visible`, e DECLARADO. O fio e o nó são `::before`/`::after` posicionados
       FORA da caixa do registro; qualquer recorte os apaga, e o resultado é uma
       espinha no meio da tela com cartões soltos dos dois lados, sem nada os
       ligando.
       Não basta deixar de escrever `hidden` aqui: `articles.css` traz um
       `.artigos-find, article { overflow: hidden }` que alcança TODO <article>
       do site. Só descobri porque a página /comunidades, que já usava o formato,
       aparecia sem os fios — a minha prévia não carregava aquela folha.
       O recorte que a capa precisa mudou-se para a própria `.img-capa`. */
    overflow: visible;
}

.bloco-linha-tempo > article:hover {
    transform: translateY(-3px);
    border-color: var(--ref-gold-soft, #f3e5c3);
    box-shadow: var(--ref-shadow-md, 0 10px 28px rgba(13, 35, 57, .14));
}

/* Ímpares à esquerda, pares à direita. `margin-left:auto` em vez de
   `float`/`position:absolute`: cada cartão tem a altura do seu conteúdo, e é o
   fluxo normal que os empilha sem que ninguém precise medir nada. */
.bloco-linha-tempo > article:nth-child(even) {
    margin-left: auto;
}

/* ── O fio e os dois nós ────────────────────────────────────────────────────
   Um pseudo-elemento só desenha as três peças, em camadas de `background`:

     1. o nó do lado do CARTÃO   — círculo cheio, pequeno
     2. o fio                    — a linha de 2px entre os dois
     3. (o nó da espinha é o `::after`, que precisa da auréola por cima do
        pontilhado e por isso não cabe aqui)

   Foi preciso empilhar assim porque um elemento tem dois pseudo-elementos e as
   peças são três. A alternativa seria marcar mais um <span> em
   `artigo_item_html()` — um elemento a mais em toda listagem do site, para um
   enfeite de dois formatos. */
.bloco-linha-tempo > article::before {
    content: "";
    position: absolute;
    top: 26px;
    width: 54px;
    height: 10px;
    background:
        /* o nó do cartão */
        radial-gradient(circle 4px at 4px 50%, var(--ref-gold, #c9a24b) 96%, transparent 100%) no-repeat,
        /* o fio, centrado na altura */
        linear-gradient(var(--ref-gold, #c9a24b), var(--ref-gold, #c9a24b)) center / 100% 2px no-repeat;
    opacity: .8;
}

.bloco-linha-tempo > article:nth-child(odd)::before  { right: -54px; }

/* Do lado direito o nó do cartão fica na OUTRA ponta do fio: ele acompanha a
   borda do cartão, e ali a borda é a esquerda. */
.bloco-linha-tempo > article:nth-child(even)::before {
    left: -54px;
    background:
        radial-gradient(circle 4px at calc(100% - 4px) 50%, var(--ref-gold, #c9a24b) 96%, transparent 100%) no-repeat,
        linear-gradient(var(--ref-gold, #c9a24b), var(--ref-gold, #c9a24b)) center / 100% 2px no-repeat;
}

/* O nó da espinha. Anel vazado, para o pontilhado passar por dentro e o nó ler
   como uma amarra e não como um ponto maior da própria linha. A auréola branca
   o separa dos pontos vizinhos. */
.bloco-linha-tempo > article::after {
    content: "";
    position: absolute;
    /* O fio corre no MEIO do `::before` (que tem 10px de altura), ou seja em
       26+5 = 31px. O nó tem 18px reais, então o topo dele é 31-9. */
    top: 22px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--ref-white, #fff);
    border: 3px solid var(--ref-gold, #c9a24b);
    box-shadow: 0 0 0 4px var(--ref-white, #fff);
    transition: background-color .22s ease, border-color .22s ease;
}

/* 63px = os 54px do fio mais metade do nó (12px de corpo + 3px de borda de cada
   lado = 18px de largura real; `box-sizing` não é herdado por pseudo-elemento,
   então a borda SOMA). */
.bloco-linha-tempo > article:nth-child(odd)::after  { right: -63px; }
.bloco-linha-tempo > article:nth-child(even)::after { left: -63px; }

.bloco-linha-tempo > article:hover::after {
    background: var(--ref-gold, #c9a24b);
    border-color: var(--ref-navy-700, #153457);
}

/* O <a> volta a ser uma caixa: nas listagens de artigo ele é o único filho do
   <article> e precisa arrumar a capa e o conteúdo. */
.bloco-linha-tempo > article > a {
    display: block;
    color: inherit;
    text-decoration: none;
}

.bloco-linha-tempo > article > a:hover {
    color: inherit;
    text-decoration: none;
}

/* ── A capa ─────────────────────────────────────────────────────────────────
   O recorte vive aqui, e não no <article>: é a capa que precisa acompanhar o
   canto de cima do cartão, e é só ela. A borda de baixo fica reta porque
   embaixo da capa vem o texto. */
.bloco-linha-tempo .img-capa {
    display: block;
    width: 100%;
    margin: 0;
    overflow: hidden;
    border-radius: calc(var(--ref-radius, 14px) - 1px) calc(var(--ref-radius, 14px) - 1px) 0 0;
}

.bloco-linha-tempo .img-capa img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 7;
    object-fit: cover;
    transition: transform .35s ease;
}

.bloco-linha-tempo > article:hover .img-capa img {
    transform: scale(1.04);
}

/* Sem foto, o monograma — a mesma solução do cartão e da grade.
   A proporção vai na CAPA, e não no monograma: `.img-capa--vazia` não tem
   imagem dentro, então nada lhe dá altura, e cada formato desta folha declara a
   sua (ver `.bloco-cards .item-card .img-capa--vazia`). Pôr a proporção no
   `<span>` do monograma — que foi o primeiro palpite — deixava a capa com 39px
   de altura e a letra saía cortada pelo `overflow` logo acima. */
/* ── A capa vazia, e onde ela vale a pena ───────────────────────────────────
   `artigo_item_html()` põe o monograma em todo item de linha do tempo — o
   marcador é a classe `item-linha-tempo`, comum aos três formatos, e não havia
   como pedir só para um sem inventar uma segunda classe de item.

   Quem PRECISA dele é o Caminho: ali a foto é o elemento, um medalhão redondo
   com o texto embaixo, e um registro sem foto viraria um parágrafo solto no
   meio da fileira.

   Nos outros dois ele é escondido. Um cartão de notícia sem foto sempre foi só
   texto nesta folha, e a faixa cinza com uma letra grande — que é o certo numa
   grade de cartões, onde todos os itens têm a mesma forma — aqui só enche a
   coluna de cinza, sem dizer nada que o título já não diga. */
.bloco-linha-tempo .img-capa--vazia {
    display: none;
}

/* ── O miolo ────────────────────────────────────────────────────────────── */
.bloco-linha-tempo .conteudo {
    padding: 16px 20px 18px;
}

/* O marco de data. Em linha (dia · mês · ano) para caber no topo do cartão sem
   roubar a atenção do título. GothamPro, como o resto do site; o destaque vem
   do peso e do tamanho. */
.bloco-linha-tempo .marco-data {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin-bottom: 8px;
    color: var(--ref-navy-600, #1d4b79);
    line-height: 1;
}

.bloco-linha-tempo .marco-dia {
    font-size: 21px;
    font-weight: 700;
    letter-spacing: -.01em;
}

.bloco-linha-tempo .marco-mes {
    font-size: 12.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--ref-gold, #c9a24b);
}

.bloco-linha-tempo .marco-ano {
    font-size: 12px;
    color: var(--ref-muted, #5d6b7a);
}

.bloco-linha-tempo .titulo {
    display: block;
    font-size: 16.5px;
    font-weight: 700;
    line-height: 1.32;
    color: var(--ref-navy-800, #0d2339);
}

/* O texto auxiliar fica ENTRE o título e a chamada, e precisa parecer um
   subtítulo — não um segundo parágrafo. Daí o itálico e a cor média: lido em
   diagonal, some; lido de verdade, completa o título. */
.bloco-linha-tempo .auxiliar {
    margin-top: 5px;
    font-size: 13.5px;
    font-style: italic;
    line-height: 1.45;
    color: var(--ref-navy-600, #1d4b79);
}

.bloco-linha-tempo .chamada {
    margin-top: 8px;
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--ref-muted, #5d6b7a);
}

/* Estes nascem vazios e são preenchidos por JavaScript nas outras listagens.
   Aqui a data já está no marco, e os outros não têm papel. */
.bloco-linha-tempo .data,
.bloco-linha-tempo .visto,
.bloco-linha-tempo .views,
.bloco-linha-tempo .chamada_final:empty,
.bloco-linha-tempo .tag:empty {
    display: none;
}

.bloco-linha-tempo .tag {
    margin-bottom: 6px;
}

.bloco-linha-tempo .tag-artigo {
    display: inline-block;
    margin: 0 5px 4px 0;
    padding: 2px 9px;
    border-radius: 999px;
    background: var(--ref-soft, #f4f6f9);
    color: var(--ref-navy-600, #1d4b79);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

/* O ícone de vídeo flutua no canto da capa, e não no meio do texto. */
.bloco-linha-tempo .icon_play_over {
    position: absolute;
    top: 12px;
    right: 14px;
    z-index: 2;
    color: var(--ref-white, #fff);
    font-size: 26px;
    text-shadow: 0 2px 10px rgba(13, 35, 57, .55);
}

/* ═══ CAMINHO ══════════════════════════════════════════════════════════════
   Sem cartão. A foto vira um MEDALHÃO redondo, o fio sai dele até a espinha, e
   o título, o subtítulo e a chamada ficam abaixo do círculo.

   O medalhão tem tamanho FIXO (150px). Não é teimosia: o fio precisa sair da
   altura do meio do círculo, e a única forma de o CSS saber onde isso fica sem
   medir nada em JavaScript é o círculo ter altura conhecida. Daí o `top: 75px`
   do fio ser exatamente metade dos 150px.
   ═══════════════════════════════════════════════════════════════════════════ */

.bloco-linha-tempo--caminho > article {
    width: calc(50% - 54px);
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    margin-bottom: 38px;
    /* Sem cartão não há moldura para subir; o que reage ao hover é o
       medalhão. */
    transition: none;
}

.bloco-linha-tempo--caminho > article:hover {
    transform: none;
    box-shadow: none;
}

/* O medalhão encosta no lado da espinha, e o texto abaixo se alinha com ele —
   é o que mantém a fileira legível: a coluna da esquerda lê da direita para a
   esquerda, e a da direita ao contrário. */
.bloco-linha-tempo--caminho > article > a,
.bloco-linha-tempo--caminho > article {
    text-align: right;
}

.bloco-linha-tempo--caminho > article:nth-child(even),
.bloco-linha-tempo--caminho > article:nth-child(even) > a {
    text-align: left;
}

.bloco-linha-tempo--caminho .img-capa {
    display: inline-block;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid var(--ref-white, #fff);
    box-shadow: 0 0 0 2px var(--ref-gold-soft, #f3e5c3),
                var(--ref-shadow-md, 0 10px 28px rgba(13, 35, 57, .14));
    transition: box-shadow .25s ease, transform .25s ease;
}

.bloco-linha-tempo--caminho > article:hover .img-capa {
    transform: scale(1.03);
    box-shadow: 0 0 0 2px var(--ref-gold, #c9a24b),
                0 14px 32px -10px rgba(13, 35, 57, .38);
}

/* O `border-radius: 50%` está na CAPA, e a foto vira círculo por recorte
   (`overflow: hidden` ali em cima). Só que recorte arredondado de um filho
   COMPOSTO é justamente onde o Safari do iPhone falha: a `.img-capa` carrega
   um `filter: grayscale(1)` (articles.css) e a `<img>` tem `transition:
   transform` — dois motivos para o WebKit promover a imagem a uma camada
   própria e, promovida, ela deixa de receber o recorte do pai. O medalhão
   aparece redondo e a foto, quadrada por cima dele. No desktop nada disso
   acontece, e é por isso que o defeito parecia "só no mobile" — não é largura
   de tela, é o motor do navegador.

   Arredondar a PRÓPRIA imagem tira o desenho da dependência do recorte: ela é
   redonda por conta própria, com ou sem camada. Sem media query porque não é
   um ajuste de tela; onde o recorte já funcionava, isso não muda nada.

   ── E POR QUE 100%, E NÃO 150px ──
   A `.img-capa` é `border-box`: dos 150px declarados, 3px de cada lado são a
   borda branca, sobrando 144px de caixa de conteúdo. A imagem vinha com os
   150px CHEIOS, ou seja, 6px maiores que o lugar onde cabe — 3px transbordando
   de cada lado, bem em cima da borda branca. Onde o recorte funciona isso não
   aparece (o excedente é aparado); onde ele falha, a foto cobre a borda e o
   medalhão fica sem o anel — que foi exatamente o que sobrou de defeito depois
   de arredondar a imagem: só o medalhão TOCADO (que ganha um `transform` no
   hover, e transform devolve o recorte no WebKit) mostrava o anel no lugar.

   Com `100%` a imagem passa a medir a caixa de conteúdo, não a caixa de borda.
   Não sobra nada para aparar, e o anel branco aparece com ou sem recorte. */
.bloco-linha-tempo--caminho .img-capa img {
    width: 100%;
    height: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
}

/* No medalhão quem já tem tamanho é a `.img-capa` (150px fixos, redonda): ao
   monograma resta o corpo da letra. */
/* No medalhão quem já tem tamanho é a `.img-capa` (150px fixos, redonda): ao
   monograma resta o corpo da letra. O `inline-flex` repõe a centralização que
   `.img-capa--vazia` traz e que a regra de capa deste formato, mais específica,
   sobrescrevia com `inline-block` — sem ele a letra ia parar no canto de cima
   do círculo. */
.bloco-linha-tempo--caminho .img-capa--vazia {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: auto;
}

.bloco-linha-tempo--caminho .img-capa--vazia .capa-monograma {
    font-size: 52px;
}

/* O ícone de vídeo volta para o meio do medalhão: no canto de cima, num
   círculo, ele ficaria pela metade fora do recorte. */
.bloco-linha-tempo--caminho .icon_play_over {
    top: 60px;
    right: 50%;
    transform: translateX(50%);
    font-size: 30px;
}

.bloco-linha-tempo--caminho .conteudo {
    padding: 14px 4px 0;
}

.bloco-linha-tempo--caminho .marco-data {
    justify-content: flex-end;
}

.bloco-linha-tempo--caminho > article:nth-child(even) .marco-data {
    justify-content: flex-start;
}

.bloco-linha-tempo--caminho .tag-artigo { margin: 0 0 4px 5px; }
.bloco-linha-tempo--caminho > article:nth-child(even) .tag-artigo { margin: 0 5px 4px 0; }

/* O fio sai da altura do centro do medalhão. O nó do lado do cartão ganhou um
   pouco mais de corpo porque aqui ele encosta na borda clara do círculo. */
/* Medalhão de 150px: o centro dele está a 75px do topo. O fio corre 5px abaixo
   do topo do seu `::before`, logo 75-5; e o nó, de 18px, começa em 75-9. */
.bloco-linha-tempo--caminho > article::before { top: 70px; }
.bloco-linha-tempo--caminho > article::after  { top: 66px; }

/* O medalhão tem 150px e o cartão é mais largo que isso: o fio precisa sair da
   BORDA DO CÍRCULO, não da borda da coluna. Como o círculo está encostado no
   lado da espinha, as duas coincidem — é justamente para isso que serve o
   `text-align` acima. */

/* Uma cruz no fim do caminho. É o único ornamento da folha, e existe porque um
   caminho precisa de destino: sem ele a fileira apenas para. */
.bloco-linha-tempo--caminho::after {
    content: "✝";
    position: absolute;
    left: 50%;
    bottom: -6px;
    transform: translateX(-50%);
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--ref-white, #fff);
    border: 2px solid var(--ref-gold, #c9a24b);
    color: var(--ref-navy-700, #153457);
    font-size: 18px;
    line-height: 1;
}

/* ═══ HORIZONTAL ═══════════════════════════════════════════════════════════
   A linha deita: os registros ficam lado a lado numa faixa que se arrasta, e a
   espinha atravessa a tela da esquerda para a direita.

   ─ O ARRASTE ──────────────────────────────────────────────────────────────
   No celular e no trackpad ele é NATIVO: `overflow-x: auto` é rolagem, e
   rolagem lateral já se faz com o dedo e com dois dedos. O JavaScript entra só
   para o mouse de fio, que não tem gesto lateral — ali ele traduz "arrastar com
   o botão apertado" em rolagem, e é a única coisa que faz. Por isso a faixa
   funciona inteira sem JavaScript nenhum: o dedo continua arrastando, o teclado
   continua andando com as setas, e só o mouse fica sem o atalho.

   `scroll-snap` para o arraste parar sempre com um registro inteiro à vista, e
   não com dois pela metade.

   ─ POR QUE A ESPINHA É DESENHADA EM CADA REGISTRO ─────────────────────────
   Porque ela precisa ROLAR JUNTO. Presa ao bloco, ficaria parada enquanto os
   registros deslizam por baixo, e os nós — que andam com os cartões — sairiam
   de cima dela em dois dedos de arraste. Cada registro desenha o seu pedaço e
   avança sobre o vão até encostar no pedaço do vizinho; emendados, são uma
   linha só.
   ═══════════════════════════════════════════════════════════════════════════ */

/* A própria caixa rolável é o bloco: um <div> a mais teria de existir no HTML,
   e o HTML é o mesmo das outras listagens. Os artigos viram itens do flex; o
   que não é artigo é tirado da fileira mais abaixo. */
.bloco-linha-tempo--horizontal {
    display: flex;
    align-items: flex-start;
    gap: 26px;
    /* O respiro de cima abriga a espinha e os nós, que sobem 37px acima do
       primeiro cartão. */
    padding: 58px 4px 22px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x proximity;
    scrollbar-width: thin;
    scrollbar-color: var(--ref-gold-soft, #f3e5c3) transparent;
    -webkit-overflow-scrolling: touch;
}

/* A espinha vertical não existe neste formato. */
.bloco-linha-tempo--horizontal::before { display: none; }

.bloco-linha-tempo--horizontal::-webkit-scrollbar { height: 8px; }
.bloco-linha-tempo--horizontal::-webkit-scrollbar-track { background: transparent; }
.bloco-linha-tempo--horizontal::-webkit-scrollbar-thumb {
    background: var(--ref-gold-soft, #f3e5c3);
    border-radius: 999px;
}
.bloco-linha-tempo--horizontal::-webkit-scrollbar-thumb:hover {
    background: var(--ref-gold, #c9a24b);
}

/* Há o que arrastar: a mão aberta convida. A classe é posta pelo site.js só
   quando a pista é mais larga que a caixa — numa página com três registros num
   monitor largo não há gesto nenhum a oferecer. */
.bloco-linha-tempo--horizontal.tem-arraste { cursor: grab; }

/* Durante o gesto: mão fechada, sem seleção de texto (senão o arraste pinta
   metade da página de azul) e sem ímã (que puxaria o cartão de volta enquanto o
   dedo ainda está no vidro). */
.bloco-linha-tempo--horizontal.is-arrastando {
    cursor: grabbing;
    user-select: none;
    -webkit-user-select: none;
    scroll-snap-type: none;
}

/* Soltar o botão logo depois de arrastar não pode abrir o artigo que estava
   embaixo do cursor. O site.js tira esta classe no quadro seguinte. */
.bloco-linha-tempo--horizontal.is-arrastando a { pointer-events: none; }

.bloco-linha-tempo--horizontal > article {
    flex: 0 0 300px;
    width: 300px;
    margin: 0;
    scroll-snap-align: center;
}

/* O pedaço de espinha deste registro. `left: -26px` + `width: calc(100% + 26px)`
   é o avanço sobre o vão do `gap`.

   ─ POR QUE ÍMPAR E PAR APARECEM AQUI ─
   Nos formatos verticais o fio muda de lado conforme a posição, e as regras que
   fazem isso são `.bloco-linha-tempo > article:nth-child(odd|even)::before` —
   duas classes na conta de especificidade. Um seletor de bloco simples
   (`.bloco-linha-tempo--horizontal > article::before`) PERDE para elas: o
   resultado era a espinha pontilhada nos ímpares e um traço dourado contínuo
   nos pares, com os nós fora do lugar. Repetindo `:nth-child` a conta empata, e
   o desempate é a ordem — estas vêm depois. */
.bloco-linha-tempo--horizontal > article:nth-child(odd)::before,
.bloco-linha-tempo--horizontal > article:nth-child(even)::before {
    top: -30px;
    left: -26px;
    right: auto;
    width: calc(100% + 26px);
    height: 3px;
    opacity: 1;
    background: repeating-linear-gradient(
        90deg,
        var(--ref-navy-600, #1d4b79) 0 4px,
        transparent 4px 11px
    );
}

/* No primeiro a linha começa: não avança para trás. */
.bloco-linha-tempo--horizontal > article:first-child::before {
    left: 0;
    width: 100%;
}

/* O nó sobe para a espinha, centrado no registro. O fio de 54px dos formatos
   verticais some — aqui a distância é de meia dúzia de pixels e o nó já encosta
   no cartão; um fio ali seria um risco, não uma amarra. */
.bloco-linha-tempo--horizontal > article:nth-child(odd)::after,
.bloco-linha-tempo--horizontal > article:nth-child(even)::after {
    top: -37px;
    left: 50%;
    right: auto;
    margin-left: -9px;
}

.bloco-linha-tempo--horizontal .img-capa img {
    aspect-ratio: 16 / 9;
}

/* O nome da tag e a lista de tags do blog não são registros: na fileira eles
   virariam uma coluna de texto no meio dos cartões. Vão para o fim, em linha
   inteira. */
.bloco-linha-tempo--horizontal > *:not(article) {
    flex: 0 0 100%;
    order: 99;
}

/* ── Entrada suave ──────────────────────────────────────────────────────────
   Só acontece quando o JavaScript marca o bloco com `is-anim`, e a marca é
   posta DEPOIS de a varredura estar armada. A direção é essa de propósito: sem
   JavaScript — ou se ele falhar antes de rodar — nada aqui se aplica e os
   cartões aparecem normalmente. O contrário (esconder por padrão e revelar com
   JS) deixaria a página em branco quando o script não chegasse. */
.bloco-linha-tempo.is-anim > article {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity .55s ease, transform .55s cubic-bezier(.22, .8, .3, 1);
}

.bloco-linha-tempo.is-anim > article.is-vista {
    opacity: 1;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    .bloco-linha-tempo.is-anim > article,
    .bloco-linha-tempo.is-anim > article.is-vista {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .bloco-linha-tempo > article,
    .bloco-linha-tempo .img-capa,
    .bloco-linha-tempo .img-capa img {
        transition: none;
    }

    .bloco-linha-tempo > article:hover { transform: none; }
    .bloco-linha-tempo > article:hover .img-capa,
    .bloco-linha-tempo > article:hover .img-capa img { transform: none; }
}

/* ── Duas levas seguidas ────────────────────────────────────────────────────
   No caminho dos TRECHOS (widget "Listagem dos filhos" e o botão "carregar
   mais"), cada leva sai num <div> próprio — e com dois trechos em linha do
   tempo saem dois blocos irmãos, cada um com a sua espinha e os seus respiros.
   Lidos juntos, parecem duas linhas interrompidas no meio, e não uma só.

   Aqui elas se emendam. O que NÃO dá para emendar é a numeração do "Caminho":
   o contador do CSS é reiniciado por cada bloco. Numerar em sequência exigiria
   o servidor mandar o número, e o "carregar mais" não sabe quantos já estão na
   tela. */
.listagem-trechos .bloco-linha-tempo + .bloco-linha-tempo:not(.bloco-linha-tempo--horizontal) {
    margin-top: 0;
    padding-top: 0;
}

.listagem-trechos .bloco-linha-tempo:not(:last-child):not(.bloco-linha-tempo--horizontal) {
    padding-bottom: 0;
}

/* A cruz do caminho só faz sentido no fim de tudo. */
.listagem-trechos .bloco-linha-tempo--caminho:not(:last-child)::after {
    display: none;
}

/* ── Telas estreitas ────────────────────────────────────────────────────────
   A espinha encosta na esquerda e todos os registros vão para o mesmo lado.
   Manter a alternância no celular deixaria cada cartão com pouco mais de 100px
   de largura útil — a linha do tempo viraria duas colunas de palavras cortadas.
   O horizontal fica de fora: ele já é uma faixa, e no celular é onde funciona
   melhor. */
@media (max-width: 820px) {
    .bloco-linha-tempo:not(.bloco-linha-tempo--horizontal)::before {
        left: 20px;
        margin-left: 0;
    }

    .bloco-linha-tempo:not(.bloco-linha-tempo--horizontal) > article,
    .bloco-linha-tempo:not(.bloco-linha-tempo--horizontal) > article:nth-child(even) {
        width: calc(100% - 62px);
        margin-left: 62px;
    }

    /* O registro começa em 62px e a espinha está em 20px: 42px de fio. O nó
       fica centrado nele com 42 + 9 = 51px. */
    .bloco-linha-tempo:not(.bloco-linha-tempo--horizontal) > article::before,
    .bloco-linha-tempo:not(.bloco-linha-tempo--horizontal) > article:nth-child(even)::before {
        left: -42px;
        right: auto;
        width: 42px;
        background:
            radial-gradient(circle 4px at calc(100% - 4px) 50%, var(--ref-gold, #c9a24b) 96%, transparent 100%) no-repeat,
            linear-gradient(var(--ref-gold, #c9a24b), var(--ref-gold, #c9a24b)) center / 100% 2px no-repeat;
    }

    .bloco-linha-tempo:not(.bloco-linha-tempo--horizontal) > article::after,
    .bloco-linha-tempo:not(.bloco-linha-tempo--horizontal) > article:nth-child(even)::after {
        left: -51px;
        right: auto;
    }

    /* No caminho o medalhão encolhe, e com ele a altura em que o fio sai. */
    .bloco-linha-tempo--caminho > article,
    .bloco-linha-tempo--caminho > article > a,
    .bloco-linha-tempo--caminho > article:nth-child(even),
    .bloco-linha-tempo--caminho > article:nth-child(even) > a {
        text-align: left;
    }

    /* Só a CAPA recebe a medida; a imagem segue em 100% dela (ver a regra do
       medalhão, acima). Dar 104px também à imagem era o que a fazia transbordar
       a borda branca de 3px. */
    .bloco-linha-tempo--caminho .img-capa {
        width: 104px;
        height: 104px;
    }

    .bloco-linha-tempo--caminho .img-capa--vazia .capa-monograma { font-size: 36px; }

    /* Medalhão de 104px: centro em 52px. */
    .bloco-linha-tempo--caminho > article::before { top: 47px; }
    .bloco-linha-tempo--caminho > article::after  { top: 43px; }

    .bloco-linha-tempo--caminho .marco-data,
    .bloco-linha-tempo--caminho > article:nth-child(even) .marco-data {
        justify-content: flex-start;
    }

    .bloco-linha-tempo--caminho .icon_play_over { top: 40px; }

    .bloco-linha-tempo--caminho::after { left: 20px; transform: translateX(-50%); }

    .bloco-linha-tempo--horizontal > article { flex-basis: 250px; width: 250px; }

    .bloco-linha-tempo .conteudo { padding: 14px 16px 16px; }
    .bloco-linha-tempo--caminho .conteudo { padding: 12px 2px 0; }
    .bloco-linha-tempo .titulo { font-size: 15.5px; }
}