.artigos-find, article {
    overflow: hidden;
    width: 100%
}

.artigos-exclusivos {
    display: table;
    text-align: center;
    vertical-align: top;
    margin-top: 10px;
    margin-bottom: 10px;
    width: 100%
}

.artigos-find, article {
    text-align: left;
    position: relative
}

.artigos-exclusivos .articles {
    width: 18%;
    position: inherit;
    overflow: visible;
    display: inline-table;
    text-align: left;
    margin-left: 5px;
    margin-right: 5px
}

.artigos-exclusivos .articles a {
    text-decoration: none;
    color: #333
}

.artigos-exclusivos .articles .conteudo .titulo {
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -1px
}

.artigos-exclusivos .articles .conteudo .chamada, article .views:empty {
    display: none
}

.artigos-exclusivos .articles .conteudo {
    height: 90px;
    padding: 10px;
    margin-bottom: 10px;
    margin-top: 10px;
    line-height: 18px
}

.artigos-exclusivos .articles .data-img {
    height: 150px;
    width: 100%
}

.artigos-exclusivos .articles .display-portal {
    clear: both;
    margin-bottom: 30px;
    margin-top: 0
}

.artigos-exclusivos .articles .display-portal div {
    font-size: 12px;
    text-transform: uppercase;
    padding-left: 10px;
    display: none
}

.artigos-exclusivos .articles .display-portal img {
    width: 100%;
    height: 25px;
    padding: 5px 20px;
    border: 1px solid #dfdfdf;
    border-radius: 40px
}

article a:hover {
    text-decoration: none;
}

article .conteudo {
    width: 100%;
}

.article-fly .conteudo {
    position: absolute;
    bottom: 0;
    z-index: 99;
    color: #fff;
    padding: 100% 30px 20px;
    width: 100%;
    text-shadow: 1px 1px 1px #000;
    box-shadow: inset 0 -220px 172px 4px #000;
    -webkit-box-shadow: inset 0 -220px 172px 4px #000;
    -moz-box-shadow: inset 0 -220px 172px 4px #000;
    -o-box-shadow: inset 0 -220px 172px 4px #000
}

article .img-capa {
    width: 100%;
    height: auto;
    filter: grayscale(1);
    opacity: 0.9;

    position: inherit;
    overflow: hidden;

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

.article-fly .img-capa {
    position: absolute;
    z-index: 1;
    width: 100%;
    height: 100%
}

article {
    border: 0 solid #000;
}

.article-fly {
    height: 300px;
    border: 0 solid #000;
    border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    -khtml-border-radius: 3px
}

.capa article .data-img {
    height: 350px;
    width: 100%;
    opacity: 0.7;

    background-size: cover;
    background-position: center center;
}

article .img-capa img {
    width: 100%;
    height: auto; /*-webkit-filter:contrast(90%) brightness(120%) blur(0.5px);filter:contrast(90%) brightness(120%) blur(.5px)*/
}

article:hover .img-capa img {
    transform: scale(1.05, 1.05);
    -ms-transform: scale(1.05, 1.05);
    -webkit-transform: scale(1.05, 1.05);
}

article:hover .img-capa {
    filter: grayscale(0);
    opacity: 1;
}

article:hover .data-img {
    filter: saturate(1);
    opacity: 1;
    width: 102%;
    background-position: right;
}

article .tag {
    width: 100%
}

article .tag .tag-artigo {
    display: inline-block;
    font-size: 12px;
    line-height: 15px;
    color: #63aeda;
    padding-right: 10px
}

article .titulo {
    display: inline-block;
    font-size: 14px;
    font-weight: 600;
    line-height: 18px;
    letter-spacing: -0.4px;
    color: #000;
}

.section_destaque article:nth-of-type(-n+3):hover .titulo {
    background: transparent !important;
    transition-delay: .2s;
    transition-property: color;
    color: #ffffff;
}

.section_destaque article:nth-of-type(-n+3) .titulo:before {
    display: table;
    content: '';
    position: absolute;
    background-color: #132236;
    opacity: 0.9;
    left: 0;
    width: 100%;
    height: 30px;
    z-index: -1;
    transform: translateY(0px);
    margin-top: 150px;
    -moz-transition: .4s;
    -o-transition: .4s;
    transition: .4s;
}

.section_destaque article:hover .titulo:before {
    margin-top: -15px;
    height: 150px;
    transform: translateY(0px);
}

article .chamada {
    font-size: 14px;
    line-height: 20px;
    margin-top: 5px;
    font-weight: 300;
    color: #4f4f4f;
}

article .views {
    font-weight: 700;
    color: #bbb;
    font-size: 12px
}

article .views:before {
    content: 'Acessos';
    font-weight: lighter;
    margin-right: 5px;
    display: block;
    float: left
}

article .visto {
    float: right;
    margin-top: -5px;
    position: relative;
    font-size: 12px
}

article .visto i {
    font-size: 20px;
    color: #137df2;
    position: absolute;
    margin-top: -20px;
    right: 0
}

article .data {
    font-size: 11px;
    line-height: 12px;
    padding-right: 20%;
    font-weight: 400;
    color: #ccc
}

article .label-canal {
    position: absolute;
    position: absolute;
    z-index: 100;
    padding: 2px 20px 2px 20px;
    color: #4fe5e5;
    float: left;
    margin: 10px;
    font-size: 11px;
    text-transform: uppercase;
    border-radius: 40px;
    background-color: #13082d;
    -moz-transition: .4s;
    -o-transition: .4s;
    transition: .4s;
}

article:hover .label-canal {
    color: #fff;
    padding-left: 25px;
    font-weight: 300;
    letter-spacing: 1px;
    background-size: 0 100%, 138% 100%
}

.capa article:hover .titulo {
    background-size: 100% 2px, 0 2px;
    text-decoration: none;
}

.tag-artigo-lateral {
    font-size: 11px;
    color: #0c1278;
    text-transform: uppercase
}

.artigo-lateral {
    padding-bottom: 30px;
    display: table
}

.artigo-lateral a {
    text-decoration: none !important;
    color: #000
}

.artigo-lateral .titulo span {
    background: linear-gradient(to right, rgb(181 255 255), rgb(124 215 215)), 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% 100%, 0 100%;
    background-repeat: no-repeat;
    transition: background-size .4s
}

.artigo-lateral:hover .titulo span {
    background-size: 0 1px, 100% 1px
}

.artigo-lateral .titulo {
    font-size: 16px;
    font-weight: bold;
    line-height: 22px;
    letter-spacing: -0.6pt;
}

.artigo-lateral .titulo_aux {
    display: none;
    font-size: 12px;
    font-weight: 400;
    color: #666;
    clear: both;
    padding-top: 10px
}

.artigo-lateral .img-lateral {
    width: 40%;
    margin-right: 10px;
    height: auto;
    float: left
}

.artigo-lateral .img-lateral img {
    width: 100%;
    height: auto;
    border-radius: 4px;
    opacity: 0.5;
}

.articles-pocket:hover {
    --d: 100%;
    background-size: 100% 2px, 0 4px;
    border-bottom: 1px solid #fff;
    background-color:#eee;
}

.articles-pocket {
    border-bottom: 1px dotted #ddd;
    padding-bottom: 5px;
    padding-top: 5px;
    display: table;
    width: 100%;
    background: linear-gradient(to right, #ffffff, #000066);
    background-size: 0% 2px, 0 2px;
    background-position: 0 100%, 0 100%;
    background-repeat: no-repeat;
    transition: background-size .4s;
    overflow: hidden;
    position: relative;
    padding: 20px;
}

.articles-pocket .img-capa-pocket {
    width: 25%;
    margin-right: 5px;
    margin-top: 5px;
    position: absolute;
    right: 0;
}

.articles-pocket .img-capa-pocket img {
    width: 100%;
    height: auto;
    border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    -khtml-border-radius: 50%
}

.articles-pocket .conteudo-pocket {
    float: left;
    width: 75%
}

.articles-pocket .conteudo-pocket .titulo {
    font-size: 13px;
    line-height: 16px;
    padding-top: 15px;
    padding-bottom: 5px;
    color: #99381a;
    width: 90%;
    font-weight: 400;
}

.articles-pocket .conteudo-pocket .data {
    color: #999;
    font-size: 10px
}

.articles-pocket .conteudo-pocket .linha {
    font-size: 50px;
    text-align: center;
    line-height: 50px;
    font-weight: 100;
    float: left;
    width: 60px;
    padding-top: 10px;
    padding-bottom: 20px;
    display: none;
}


.articles-pocket:hover .titulo {
    color: #354099;
}

.articles-pocket:hover .linha {
    color: #26338b;
}

.articles-pocket:hover .img-capa-pocket {
    width: 40%;
    right: -10%;
    top: -20%;
}


.artigos-find {
    padding-bottom: 20px;
    padding-top: 20px;
    border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    -khtml-border-radius: 3px;
    clear: both;
    border-bottom: 1px dotted #bbb
}

.artigos-find a {
    color: #333;
    text-decoration: none;
    float: left
}

.artigos-find .img-capa img {
    width: 150px;
    height: auto;
    margin-right: 40px;
    border: 1px solid #666;
    float: left
}

.artigos-find .conteudo {
    float: left;
    width: 61%;
    display: block
}

.artigos-find .conteudo .titulo {
    font-size: 24px;
    font-weight: 500;
    letter-spacing: -1px;
    background: linear-gradient(#000 0 0) left/var(--d, 0) 100% no-repeat;
    transition: .5s
}

.artigos-find:hover .conteudo .titulo {
    --d: 100%;
    color: #fff !important;
    text-decoration: none;
    border-radius: 0 40px 40px 0;
    padding-left: 20px;
    padding-right: 20px
}

.artigos-find .conteudo .chamada {
    font-size: 18px
}

.artigos-find .conteudo .texto-completo {
    font-size: 13px;
    color: #888;
    margin-top: 20px
}

.artigos-find .conteudo .canal-find {
    background-color: #dfdfdf;
    padding-left: 15px;
    padding-right: 5px;
    margin-right: 20px;
    margin-top: 5px;
    margin-bottom: 5px;
    color: #888;
    float: left;
    border-radius: 3px
}

.artigos-find:hover .conteudo .canal-find {
    padding-right: 40px;
    background-color: #51b0a0;
    color: #fff
}

.setor_side_ .bg-color {
    content: '';
    display: block;
    position: absolute;
    left: 0;
    height: 100px;
    width: 100%;
    z-index: -1;
}

/*-- destaque ---------------------*/

.section_destaque {
    position: inherit;
}

.section_destaque article .data-img {
    height: 400px;
    width: 100%;
    float: right;

}


.section_destaque article:hover .data-img {
    background-position: right;
}

.section_destaque .conteudo {
    position: absolute;
    z-index: 1;
    bottom: 0;
    padding: 20px;
}

.section_destaque .conteudo:before {
    content: '';
    display: block;
    position: absolute;
    width: 100%;
    bottom: 0;
    left: 0;
    padding-top: 52%;
    background-image: linear-gradient(to bottom, rgba(255, 0, 0, 0), rgb(0, 0, 0, 0.6));
    z-index: -1;
}

.section_destaque article .titulo {
    color: #FFF;
}

.section_destaque article .chamada {
    display: none;
}

.section_destaque article:nth-of-type(1) {
    width: 55%;
    float: left;
}

.section_destaque article:nth-of-type(1) .titulo {
    font-size: 22px;
    line-height: 28px;
}

.section_destaque section:nth-of-type(1) article:nth-of-type(1n+2) {
    width: 40%;
    height: 190px;
    float: left;
    margin-left: 20px;

}

.section_destaque article:nth-of-type(1n+2) .titulo {
    line-height: 18px;
    font-size: 17px;
}

.section_destaque article:nth-of-type(1) .data-img {
    height: 400px;
}

.section_destaque article:nth-of-type(1n+2) .data-img {
    height: 200px;
}

.section_destaque section:nth-of-type(1) article:nth-of-type(4) {
    margin-left: 0;
}

/* Fileira de destaques secundários (4º em diante).
   Eram `float: none; display: inline-grid` — e, sendo caixas EM LINHA, fluíam ao
   redor dos flutuados 1–3 em vez de começar abaixo deles. O 4º artigo caía
   sozinho no vão que sobrava à direita, e só a partir do 5º a fileira se
   formava. `clear` não resolvia porque não se aplica a caixa de linha.
   Agora são flutuados com calha explícita: o 4º (e cada múltiplo de 4 depois
   dele) limpa os flutuados de cima e abre a fileira. */
.section_destaque section:nth-of-type(1) article:nth-of-type(1n+4) {
    width: 22.25%;
    float: left;
    display: block;
    height: inherit;
    margin: 0 3.66% 20px 0;
}

/* Abre fileira: 4, 8, 12… */
.section_destaque section:nth-of-type(1) article:nth-of-type(4n+4) {
    clear: both;
    margin-left: 0;
}

/* Fecha fileira: 7, 11, 15… — sem calha à direita para o quarto encostar na borda. */
.section_destaque section:nth-of-type(1) article:nth-of-type(4n+7) {
    margin-right: 0;
}

/* A faixa precisa conter os flutuados da fileira, senão o que vier abaixo sobe. */
.section_destaque section:nth-of-type(1)::after {
    content: '';
    display: block;
    clear: both;
}

.section_destaque section:nth-of-type(1) article:nth-of-type(1n+4) .conteudo {
    position: inherit;
    display: table;
}

.section_destaque section:nth-of-type(1) article:nth-of-type(1n+4) .label-canal {
    margin: 0;
    margin-top: 205px;
    background-color: transparent;
    padding: 0;
    font-size: 11px;
    color: #c19459;
}

.section_destaque section:nth-of-type(1) article:nth-of-type(1n+4) .label-canal:hover {
    background-color: #000;
    color: #c19459;
    padding-left: 10px;
    padding-right: 10px;
}

.section_destaque section:nth-of-type(1) article:nth-of-type(1n+4) .conteudo:before {
    display: none;
}

.section_destaque section:nth-of-type(1) article:nth-of-type(1n+4) .conteudo {
    padding: 0;
}

.section_destaque section:nth-of-type(1) article:nth-of-type(1n+4) .conteudo .titulo {
    color: #000066;
    font-size: 12px;
    line-height: 15px;
    display: block;
    padding-top: 30px;
    padding-bottom: 10px;
}

.section_destaque .bg-color {
    content: '';
    display: block;
    position: absolute;
    left: 0;
    height: 100px;
    width: 100%;
    z-index: -1;
}


/* ═══════════════════════════════════════════════════════════════════════════
   MÓDULOS DE LAYOUT DE SEÇÃO  —  capa › aparência › layout

   Três opções que o gestor escolhe na seção: "destaque secundário", "slide
   horizontal" e "lado a lado". Os três desenhavam o mesmo cartão — foto de
   fundo, etiqueta da categoria, título — e os três estavam quebrados pelas
   mesmas causas:

   1. `float: left` com larguras mágicas (47.6%, 24.5%, 20%). Float não iguala
      altura de irmãos: bastava um título de duas linhas para a linha seguinte
      subir no buraco e a grade se desmontar. Era o defeito mais visível.

   2. Espaçamento por `margin-left` num `nth-of-type` só — no destaque
      secundário, apenas o segundo cartão tinha a calha de 20px. Do terceiro em
      diante os cartões encostavam.

   3. `.conteudo` em `position: absolute` sem `left`/`right`: a caixa do título
      tinha a largura do próprio texto, e o degradê que a sustenta ficava de um
      tamanho a cada cartão.

   4. Regras copiadas do `section_destaque` que sobreviveram fora de contexto —
      `section:nth-of-type(1) article:nth-of-type(1n+4)` repintava o título de
      branco sobre a foto para azul de 12px embaixo dela. Resultado: DOIS tipos
      de cartão na mesma grade, o que dava à seção um ar de página defeituosa.

   Aqui os três passam a ser grade de verdade (`grid`), com calha própria e
   altura igualada por linha. O desenho do cartão — foto, etiqueta, título — é
   o mesmo de antes; o que muda é a arrumação.

   ── O DONO DOS CARTÕES MUDA, E É POR ISSO QUE TEM `:has()` ──
   A seção monta o HTML de dois jeitos, conforme tenha blocos ou não:

       com bloco   section.section_X > ul.panel > section.blococapa_3 > article
       sem bloco   section.section_X > article

   `:has(> article)` acerta o container certo nos dois casos sem precisar
   adivinhar. Onde `:has()` não existir, nada disto se aplica e a seção cai no
   desenho antigo — que é exatamente o que ela mostra hoje.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── A grade ─────────────────────────────────────────────────────────────── */
section.section_destaque_2:has(> article),
section.section_destaque_2 section.blococapa_3:has(> article),
section.section_lado_a_lado:has(> article),
section.section_lado_a_lado section.blococapa_3:has(> article),
section.section_slidehorizontal:has(> article),
section.section_slidehorizontal section.blococapa_3:has(> article) {
    display: grid;
    gap: 20px;
    /* `start` e não `stretch`: o cartão tem altura própria (a foto manda), e
       esticar faria o último de uma linha curta crescer sozinho. */
    align-items: start;
}

/* O que não é cartão atravessa a grade: o título da seção, o filete e a camada
   de cor. Sem isto cada um viraria uma célula e roubaria a vez de um cartão. */
.section_destaque_2 > .section-divisor,
.section_destaque_2 > .anchor-label,
.section_destaque_2 > .bg-color,
.section_destaque_2 .blococapa_3 > .section-divisor,
.section_destaque_2 .blococapa_3 > .anchor-label,
.section_lado_a_lado > .section-divisor,
.section_lado_a_lado > .anchor-label,
.section_lado_a_lado > .bg-color,
.section_lado_a_lado .blococapa_3 > .section-divisor,
.section_lado_a_lado .blococapa_3 > .anchor-label,
.section_slidehorizontal > .section-divisor,
.section_slidehorizontal > .anchor-label,
.section_slidehorizontal > .bg-color,
.section_slidehorizontal .blococapa_3 > .section-divisor,
.section_slidehorizontal .blococapa_3 > .anchor-label {
    grid-column: 1 / -1;
}

/* ── O cartão, comum aos três ─────────────────────────────────────────────── */
/* Zera a herança de float: largura, flutuação e as margens que faziam o
   espaçamento na mão. Quem espaça agora é o `gap` da grade. */
.section_destaque_2 article,
.section_lado_a_lado article,
.section_slidehorizontal article {
    /* `100%` da célula, e não `auto`.
       Com `auto` o cartão deveria esticar sozinho (é o `stretch` implícito do
       grid), e estica — mas só na seção sem blocos. Na seção COM bloco, onde a
       grade vive num `.blococapa_3` que por sua vez está dentro de `ul.panel` e
       `section` ainda em `display: table` do layout antigo, o `auto` resolvia
       para ZERO abaixo de 1200px: coluna de 195px, cartão de 0. Uma medida
       explícita não depende de como a tabela ao redor calcula o disponível. */
    width: 100%;
    box-sizing: border-box;
    float: none;
    margin: 0;
    padding: 0;
    position: relative;
    overflow: hidden;
    border-radius: 10px;
    /* `min-width: 0` deixa o cartão encolher abaixo do próprio conteúdo, que é
       o que permite ao título quebrar em vez de esticar a coluna. */
    min-width: 0;
}

/* O `<a>` que embrulha a foto precisa ser bloco.
   A marcação é `<article> <a><div class="data-img"></div></a> …`, e um `<a>`
   é inline por padrão. No destaque secundário isso passava despercebido — o
   `<div>` interno pegava a largura do cartão assim mesmo. No slide horizontal
   não: ali o artigo é um `.swiper-slide` e o link acabava com largura zero,
   levando a foto junto. O sintoma era um cartão cinza com a etiqueta e o
   título soltos, e `getBoundingClientRect()` devolvendo `width: 0` na imagem
   de um cartão de 166px. */
/* `:not(.label-canal)` porque a etiqueta da categoria TAMBÉM é um `<a>` filho
   direto do artigo. Sem a exceção, ela recebia `display: block; width: 100%` e
   virava uma faixa escura atravessando o cartão inteiro em vez de uma pílula do
   tamanho do rótulo — medido: 803px de largura num rótulo de "Diocese". */
.section_destaque_2 article > a:not(.label-canal),
.section_lado_a_lado article > a:not(.label-canal),
.section_slidehorizontal article > a:not(.label-canal) {
    display: block;
    width: 100%;
}

.section_destaque_2 article .data-img,
.section_lado_a_lado article .data-img,
.section_slidehorizontal article .data-img {
    width: 100%;
    float: none;
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    background-color: #e6ebf2;   /* o que se vê enquanto a foto não chegou */
    transition: transform .45s ease;
}

.section_destaque_2 article:hover .data-img,
.section_lado_a_lado article:hover .data-img,
.section_slidehorizontal article:hover .data-img {
    transform: scale(1.04);
}

/* A etiqueta da categoria fica sobre a foto, no alto. Antes ela entrava no
   fluxo e empurrava a imagem para baixo em alguns cartões. */
.section_destaque_2 article .label-canal,
.section_slidehorizontal article .label-canal {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 2;
    line-height: 16px;
    padding: 3px 12px;
}

.section_destaque_2 article .editor,
.section_lado_a_lado article .editor,
.section_slidehorizontal article .editor {
    display: none;
}

/* ═══ Destaque secundário — dois por linha, título sobre a foto ═══════════ */
section.section_destaque_2:has(> article),
section.section_destaque_2 section.blococapa_3:has(> article) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.section_destaque_2 article .data-img {
    height: 320px;
}

/* A faixa de texto cobre a largura inteira do cartão e se apoia no rodapé.
   O degradê vem no próprio elemento: o `::before` de antes dependia de um
   `padding-top: 52%` que mudava de altura conforme a largura do cartão. */
.section_destaque_2 .conteudo {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    padding: 46px 20px 18px;
    background: linear-gradient(to top, rgba(0, 0, 0, .82) 0%, rgba(0, 0, 0, .55) 45%, rgba(0, 0, 0, 0) 100%);
}

.section_destaque_2 .conteudo:before {
    display: none;
}

.section_destaque_2 article .titulo {
    color: #fff;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -0.3px;
    /* Teto de três linhas: sem ele, uma manchete longa cobria a foto inteira. */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.section_destaque_2 article .chamada,
.section_destaque_2 article .visto,
.section_destaque_2 article .data,
.section_destaque_2 article .views {
    display: none;
}

/* ═══ Slide horizontal — quem arruma é o Swiper ══════════════════════════ */
/* ATENÇÃO ao mexer aqui: este layout NÃO é uma grade CSS.
   `capa-widget-dispatch.php` marca os artigos como `.swiper-slide` só quando a
   seção é `section_slidehorizontal`, e o `site.js` instancia um Swiper
   (`.SwiperArtigos`) com setas e paginação. O arranjo horizontal, a largura de
   cada slide e a rolagem são dele.

   A primeira versão desta correção pôs `grid-auto-flow: column` aqui e brigou
   com isso: o `.swiper-wrapper` é `display: flex` por definição do componente,
   o grid nunca chegou a valer, e o que sobrou foi um `overflow-x` competindo
   com a rolagem do próprio carrossel.

   Então aqui só se cuida do CARTÃO — proporção, etiqueta, degradê e título. A
   faixa é assunto do Swiper. */
section.section_slidehorizontal:has(> article),
section.section_slidehorizontal section.blococapa_3:has(> article) {
    display: block;
}

.section_slidehorizontal article {
    /* Sem fundo escuro: ele existia para tapar o vão enquanto a foto não
       chegava, e acabava sendo o próprio cartão quando a imagem faltava —
       um retângulo preto com um título solto. O cinza claro de `.data-img`
       (comum aos três layouts) cumpre o papel sem fingir que é conteúdo. */
    background-color: transparent;
}

/* ── A coluna do slide não pode invadir a lateral ────────────────────────────
   Este era o "sobrevoo": numa seção 70/30, a faixa do carrossel passava por
   baixo dos cartões da coluna de 30% em vez de parar antes deles.

   A causa é uma medida circular. A coluna é `display: table` com largura
   automática (`site-setorescapa.css`), e o Swiper calcula o tamanho dos slides
   a partir da largura do container — cada um esperando o outro decidir. O
   resultado medido a 1440px: coluna A com 994px onde os 70% dariam 805px,
   sobrando 994 + 345 = 1339px para um trilho de 1150px.

   `display: block` com a largura declarada tira a coluna da conta da tabela e
   corta o ciclo: o Swiper passa a medir um container que já tem tamanho.
   O `overflow: hidden` garante que os slides fiquem dentro dela mesmo enquanto
   o carrossel ainda não terminou de se montar. */
section.section_slidehorizontal > ul.panel > section.setor_side_A {
    display: block;
    width: 70%;
    box-sizing: border-box;
    overflow: hidden;
}

.section_slidehorizontal .swiper,
.section_slidehorizontal .SwiperArtigos {
    max-width: 100%;
}

.section_slidehorizontal article .data-img {
    height: 300px;
}

.section_slidehorizontal .conteudo {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    padding: 40px 16px 16px;
    background: linear-gradient(to top, rgba(0, 0, 0, .85) 0%, rgba(0, 0, 0, .55) 45%, rgba(0, 0, 0, 0) 100%);
}

.section_slidehorizontal .conteudo:before {
    display: none;
}

.section_slidehorizontal article .titulo {
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.25;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.section_slidehorizontal article .chamada,
.section_slidehorizontal article .visto,
.section_slidehorizontal article .data,
.section_slidehorizontal article .views {
    display: none;
}

/* ═══ Lado a lado — quatro por linha, texto abaixo da foto ════════════════ */
section.section_lado_a_lado:has(> article),
section.section_lado_a_lado section.blococapa_3:has(> article) {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* Aqui o cartão é claro e o texto vive fora da foto, então ele ganha fundo,
   borda e o mesmo respiro dos cartões do resto do site. */
.section_lado_a_lado article {
    background: #fff;
    border: 1px solid rgba(13, 35, 57, .10);
    display: flex;
    flex-direction: column;
}

.section_lado_a_lado article .data-img {
    height: 180px;
    border-radius: 0;
}

.section_lado_a_lado article .conteudo {
    position: static;
    padding: 14px 16px 18px;
    background: none;
}

.section_lado_a_lado article .conteudo:before {
    display: none;
}

.section_lado_a_lado article .label-canal {
    display: inline-block;
    margin: 12px 16px 0;
    line-height: 16px;
    padding: 3px 12px;
}

.section_lado_a_lado article .titulo {
    color: #000066;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 0;
    padding: 0;
}

.section_lado_a_lado article .chamada {
    color: #6b7280;
    font-size: 12.5px;
    line-height: 1.45;
    margin-top: 8px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.section_lado_a_lado article .visto,
.section_lado_a_lado article .data,
.section_lado_a_lado article .views {
    display: none;
}

.section_lado_a_lado article:hover .titulo {
    color: #1173d5;
}

/* ── Telas menores ───────────────────────────────────────────────────────── */
/* Quatro colunas viram duas antes de o título ficar ilegível; duas viram uma.
   O slide horizontal não muda de forma — ele já rola por natureza —, só encolhe
   a largura mínima da coluna. */
@media (max-width: 1024px) {

    section.section_lado_a_lado:has(> article),
    section.section_lado_a_lado section.blococapa_3:has(> article) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 680px) {

    section.section_destaque_2:has(> article),
    section.section_destaque_2 section.blococapa_3:has(> article),
    section.section_lado_a_lado:has(> article),
    section.section_lado_a_lado section.blococapa_3:has(> article) {
        grid-template-columns: minmax(0, 1fr);
        gap: 16px;
    }

    .section_destaque_2 article .data-img {
        height: 240px;
    }

    .section_destaque_2 article .titulo {
        font-size: 17px;
    }

    /* O slide horizontal não muda de forma no celular — quem decide quantos
       slides cabem é o Swiper. Só a foto encolhe. */
    .section_slidehorizontal article .data-img {
        height: 240px;
    }
}

/* ── Desfazendo o responsivo do arranjo por float ────────────────────────────
   O `resp.css` ainda dita largura para estes três nas faixas de 767–1199px e
   200–766px: 47%, 45%, 100%, mais um `margin-right` num `nth-of-type(2n+1)`.
   São restos do tempo em que a linha era feita de flutuados — sobre a grade
   eles apenas espremem o cartão DENTRO da própria célula. Medido a 1024px antes
   desta correção: cartão de 92px numa coluna de 195px.

   Aquele arquivo é carregado depois deste, então empate de especificidade vai
   para ele. O `section.` na frente resolve sem `!important`.
   ───────────────────────────────────────────────────────────────────────── */
@media screen and (min-width: 767px) and (max-width: 1199px) {

    section.section_destaque_2 article,
    section.section_lado_a_lado article,
    section.section_slidehorizontal article {
        width: 100%;
        margin-right: 0;
        padding-left: 0;
    }
}

@media screen and (min-width: 200px) and (max-width: 766px) {

    section.section_destaque_2 article,
    section.section_lado_a_lado article,
    section.section_slidehorizontal article {
        width: 100%;
        margin-right: 0;
        padding-left: 0;
    }
}

/* A camada de cor da seção continua atrás de tudo, como nos outros layouts. */
.section_destaque_2 .bg-color,
.section_slidehorizontal .bg-color,
.section_lado_a_lado .bg-color {
    content: '';
    display: block;
    position: absolute;
    left: 0;
    height: 100px;
    width: 100%;
    z-index: -1;
}


/* ═══════════════════════════════════════════════════════════════════════════
   RECENTES  (`section_maisrecentes`)

   Este layout aparece na lista de "aparência" da seção desde sempre, mas NÃO
   TINHA UMA LINHA DE CSS — nem aqui nem em nenhuma outra folha. Quem o
   escolhia recebia o `<article>` cru: fotos na altura natural do arquivo,
   registros colados um no outro sem respiro e sem contorno, e a coluna encostada
   na lateral. Não era um layout com defeito; era um layout que não existia.

   O desenho segue o dos vizinhos — foto em cima com o mesmo raio de canto,
   etiqueta sobre ela, título e chamada abaixo — para a home não parecer feita
   de peças de origens diferentes.
   ═══════════════════════════════════════════════════════════════════════════ */
.section_maisrecentes {
    position: inherit;
}

.section_maisrecentes article {
    width: 100%;
    float: none;
    position: relative;
    /* O respiro entre um registro e o seguinte, que era a falta mais visível. */
    margin-bottom: 26px;
    padding: 0;
    background: #fff;
    border: 1px solid rgba(13, 35, 57, .10);
    border-radius: 10px;
    overflow: hidden;
}

.section_maisrecentes article:last-of-type {
    margin-bottom: 0;
}

/* A etiqueta é um `<a>` irmão do link da foto — fora desta regra, senão ela
   estica para a largura do cartão (ver a mesma exceção nos três layouts acima). */
.section_maisrecentes article > a:not(.label-canal) {
    display: block;
    width: 100%;
}

/* Altura fixa: sem ela cada foto entrava com a proporção do próprio arquivo e
   a lista virava uma escada. */
.section_maisrecentes article .data-img {
    height: 260px;
    width: 100%;
    float: none;
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    background-color: #e6ebf2;
    transition: transform .45s ease;
}

.section_maisrecentes article:hover .data-img {
    transform: scale(1.03);
}

.section_maisrecentes article .label-canal {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 2;
    padding: 3px 14px;
    line-height: 16px;
    float: none;
    margin: 0;
}

.section_maisrecentes .conteudo {
    position: static;
    float: none;
    width: 100%;
    padding: 16px 18px 20px;
    background: none;
}

.section_maisrecentes article .titulo {
    display: block;
    color: #0d2339;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.2px;
}

.section_maisrecentes article:hover .titulo {
    color: #1173d5;
}

.section_maisrecentes article .chamada {
    color: #6b7280;
    font-size: 13px;
    line-height: 1.5;
    margin-top: 8px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.section_maisrecentes article .editor,
.section_maisrecentes article .visto,
.section_maisrecentes article .data,
.section_maisrecentes article .views {
    display: none;
}

@media (max-width: 766px) {

    .section_maisrecentes article .data-img {
        height: 200px;
    }

    .section_maisrecentes article .titulo {
        font-size: 16px;
    }
}


/*-- ultimas ---------------------*/

.section_ultimas {
    position: inherit;
}

/* ── O registro: foto à esquerda, etiqueta e texto à direita ─────────────────
   Antes eram três flutuados soltos — foto de 38%, `.label-canal` com
   `float: left` e `margin: 10px`, e o `.conteudo` de 50%. A etiqueta vem no
   HTML ENTRE a foto e o texto, então ela flutuava no vão entre os dois e
   empurrava o título para baixo; com duas categorias no mesmo artigo (acontece)
   a linha inteira se desmontava. Somando, 38 + 50 = 88% e o resto virava vão.

   Vira uma grade de duas colunas com duas linhas: a foto ocupa a coluna da
   esquerda inteira, e a etiqueta e o texto se empilham na da direita — que é
   onde a etiqueta deve estar, junto do que ela classifica. */
.section_ultimas article {
    width: 100%;
    float: none;
    margin-bottom: 22px;
    display: grid;
    grid-template-columns: 38% minmax(0, 1fr);
    /* As DUAS linhas precisam ser declaradas.
       Sem elas não existe linha explícita, e o `grid-row: 1 / -1` da foto — que
       eu queria que atravessasse a coluna inteira — resolvia para "linha 1
       apenas". A foto de 180px passava a definir sozinha a altura da linha 1, a
       etiqueta ficava perdida no topo dessa faixa e o título só começava
       180px abaixo. Medido: `grid-template-rows: 180px 59px`, título em y=194.
       Com as linhas declaradas, `-1` é o fim da grade e a foto atravessa as
       duas: `min-content` mantém a etiqueta rente ao seu próprio tamanho e o
       `1fr` entrega o resto ao texto. */
    grid-template-rows: min-content 1fr;
    column-gap: 20px;
    align-items: start;
    align-content: start;
}

/* ── DUAS marcações, uma grade só ────────────────────────────────────────────
   A capa gera este cartão de dois jeitos, e o layout "Últimas" recebe os dois:

     A) `capa-widget-dispatch.php` — UM link embrulhando foto e texto:
        <article> {etiquetas} <a> <div.data-img> <div.conteudo> </a> </article>

     B) `funcoes.php` (listar_ultimas) — DOIS links, etiquetas no meio:
        <article> <a><div.data-img></a> {etiquetas} <a><div.conteudo></a> </article>

   A versão anterior mirava por `:first-of-type` / `:last-of-type`, o que só
   descreve a marcação B. Na A o primeiro `<a>` do artigo é uma ETIQUETA —
   `.label-canal` também é um link —, e ela ia parar na coluna da foto
   atravessando as linhas, com o texto jogado para baixo. Era o desalinhamento
   do setor "principais".

   `:has()` mira pelo que o elemento CONTÉM, não pela posição que ocupa. E onde
   um único link embrulha as duas partes, `display: contents` o dissolve: foto e
   texto viram itens da grade do artigo, cada um na sua coluna, sem precisar de
   um segundo nível de grade nem de wrapper novo no PHP.
   ───────────────────────────────────────────────────────────────────────── */

/* (A) o link que traz foto E texto some do layout; os filhos entram na grade */
.section_ultimas article > a:has(.data-img):has(.conteudo) {
    display: contents;
}

/* (B) links separados: cada um na sua coluna */
.section_ultimas article > a:has(.data-img):not(:has(.conteudo)) {
    grid-column: 1;
    /* `span 20` e não `1 / -1`: o `-1` só alcança as linhas DECLARADAS, e um
       artigo com duas categorias cria uma terceira linha implícita para a
       segunda etiqueta. A foto parava na segunda linha e o texto ia para baixo
       dela — o cartão de duas etiquetas ficava 70px mais alto que os vizinhos,
       com o título 148px fora de lugar. O span cobre as linhas que aparecerem. */
    grid-row: 1 / span 20;
    display: block;
}

.section_ultimas article > a:has(.conteudo):not(:has(.data-img)) {
    grid-column: 2;
    display: block;
    min-width: 0;
}

/* As peças quando vêm soltas na grade (caso A). No caso B elas não são itens
   da grade e estas duas regras simplesmente não têm efeito — é isso que faz o
   mesmo bloco servir aos dois.

   Descendente e não filho direto (`>`): `display: contents` tira o link do
   LAYOUT, mas ele continua sendo o pai no DOM, e o combinador de filho segue o
   DOM. Com `>` estas regras não alcançavam nada — a foto caía na linha 2 e
   ficava lado a lado com o título em vez de atravessar as duas. */
.section_ultimas article .data-img {
    grid-column: 1;
    grid-row: 1 / span 20;
}

.section_ultimas article .conteudo {
    grid-column: 2;
    min-width: 0;
}

.section_ultimas article .data-img {
    height: 180px;
    width: 100%;
    float: none;
    border-radius: 8px;
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    background-color: #e6ebf2;
}

.section_ultimas .conteudo {
    position: inherit;
    background: none;
    float: none;
    width: 100%;
    padding: 0;
}

.section_ultimas article:hover .conteudo {
    --d: 100%;
    text-decoration: none;
    /*background-size: 100% 1px, 0 2px;*/
}

/* O hover NÃO mexe mais na largura da foto.
   O `width: 41%` daqui vinha do arranjo por float, quando a foto tinha 38% e o
   hover a fazia crescer três pontos. Com a foto em `width: 100%` da coluna, o
   mesmo 41% passou a ENCOLHÊ-LA para menos da metade: medido, 462px caíam para
   189px ao passar o mouse — a imagem parecia se recolher. */
.section_ultimas article:hover .data-img {
    filter: saturate(1);
    opacity: 1;
}

.section_ultimas article .titulo {
    color: #212529;
    font-size: 14px;
    font-weight: 600;
    line-height: 16px;
    letter-spacing: 0;
}

.section_ultimas article:hover .titulo {
    background: transparent;
    line-height: 18px;
}

.section_ultimas article .chamada {
    color: #919191;
    font-size: 12px;
    font-weight: normal;
    line-height: 15px;
    letter-spacing: 0.4pt;
}

/* A etiqueta é o primeiro item da coluna de texto — não mais um flutuado no
   meio do caminho. `justify-self: start` para ela ficar do tamanho do próprio
   rótulo, e não da largura da coluna. */
.section_ultimas article .label-canal {
    position: static;
    grid-column: 2;
    justify-self: start;
    align-self: start;
    padding: 3px 14px;
    color: #567bd3;
    float: none;
    margin: 0 0 10px;
    font-size: 11px;
    line-height: 16px;
    text-transform: uppercase;
    border-radius: 40px;
    background-color: #f3f3f3;
    -moz-transition: .4s;
    -o-transition: .4s;
    transition: .4s;
}

/* Dois rótulos no mesmo artigo cabem lado a lado, sem quebrar a linha do
   título — era o caso que mais desarrumava a lista. */
.section_ultimas article .label-canal + .label-canal {
    margin-left: 6px;
}

.section_ultimas section:nth-of-type(1) article:nth-of-type(1n+4) .label-canal:hover {
    background-color: #000;
    color: #c19459;
    padding-left: 10px;
    padding-right: 10px;
}

.section_ultimas section:nth-of-type(1) article:nth-of-type(1n+4) .conteudo:before {
    display: none;
}