:root {
    --ref-navy-950: #060f1d;
    --ref-navy-900: #0a1a30;
    --ref-navy-800: #0d2339;
    --ref-navy-700: #153457;
    --ref-navy-600: #1d4b79;
    --ref-blue: #2d7bcb;
    --ref-gold: #c9a24b;
    --ref-gold-strong: #dfb86a;
    --ref-gold-soft: #f3e5c3;
    --ref-ink: #1c2530;
    --ref-muted: #5d6b7a;
    --ref-soft: #f4f6f9;
    --ref-cream: #faf8f4;
    --ref-line: #e4e8ee;
    --ref-white: #ffffff;
    --ref-shadow-sm: 0 1px 2px rgba(13, 35, 57, .08);
    --ref-shadow-md: 0 10px 28px rgba(13, 35, 57, .14);
    --ref-radius: 14px;
    --ref-font-body: "GothamPro", "Titillium Web", "Segoe UI", Roboto, Arial, sans-serif;
    --ref-font-display: "Optis", "Archivo Black", "Arial Black", sans-serif;
}

body {
    font-family: var(--ref-font-body);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    background-color: var(--ref-soft);
    color: var(--ref-ink);
}

::selection {
    color: var(--ref-navy-900);
    background: var(--ref-gold-soft);
}

h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--ref-navy-800);
    -webkit-font-smoothing: antialiased;
}

a {
    transition: color .25s ease;
}

.topo ul li a,
.hot_tags a,
.footer-menus li a,
.tags-lateral a,
.tag-artigo a,
.share-col a {
    text-decoration: none;
}

/* ═══════════════════════════════════════════════════════════════════════════
   VIDRO DO CABEÇALHO NA CAPA — degradê forte em cima, dissolvendo para baixo

   Na capa o .topo é transparente e flutua sobre a imagem do hero. O tingimento
   escuro deste :before já existia no site.css, mas nunca aparecia: a regra
   `.topo:before` de lá tem todas as declarações comentadas, inclusive o
   `content`, e sem `content` o pseudo-elemento não é gerado. Aqui ele passa a
   existir e vira a camada de vidro.

   São dois efeitos empilhados no MESMO pseudo-elemento:

     • o desfoque (`backdrop-filter`), que borra a foto atrás e é o que dá a
       leitura de vidro;
     • o tingimento (`background`), o azul-marinho que garante contraste para
       o logo e o menu, ambos claros, sobre uma foto que pode ser clara.

   O degradê vem da máscara, não da cor. `backdrop-filter` é uniforme por
   natureza — não aceita degradê. Mascarar o elemento com um
   `linear-gradient` opaco→transparente apaga progressivamente TUDO o que ele
   pinta, desfoque incluído: em cima o vidro é pleno, embaixo não existe mais.
   É por isso que a máscara é a peça central e não um acabamento.

   O pseudo desce 26px abaixo da barra (`bottom: -26px`) para o degradê morrer
   no ar. Terminando na borda do .topo, a queda de nitidez coincidiria com o
   fim do elemento e se leria como um corte reto — exatamente o contrário do
   que se quer.

   `z-index: -1` mantém a camada atrás do logo, do menu e da busca. O .topo tem
   z-index próprio (991), o que cria contexto de empilhamento e impede o pseudo
   de cair para trás da página. `pointer-events: none` porque a camada cobre a
   barra inteira e engoliria os cliques do menu.
   ═══════════════════════════════════════════════════════════════════════════ */
.capa .topo:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: -26px;
    z-index: -1;
    pointer-events: none;

    background: linear-gradient(to bottom, rgba(6, 15, 29, .82) 0%, rgba(13, 35, 57, .62) 34%, rgba(13, 35, 57, .3) 66%, rgba(13, 35, 57, 0) 100%);

    -webkit-backdrop-filter: blur(18px) saturate(1.3);
    backdrop-filter: blur(18px) saturate(1.3);

    -webkit-mask-image: linear-gradient(to bottom, #000 0%, rgba(0, 0, 0, .94) 36%, rgba(0, 0, 0, .6) 66%, rgba(0, 0, 0, .22) 86%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 0%, rgba(0, 0, 0, .94) 36%, rgba(0, 0, 0, .6) 66%, rgba(0, 0, 0, .22) 86%, transparent 100%);
}

/* Ao rolar (.topoFixed) a barra vira uma superfície sólida com desfoque
   próprio, definido mais abaixo neste arquivo. O site.css já anula o
   tingimento deste pseudo nesse estado; falta desligar o desfoque, que sobre
   um fundo chapado só custaria uma camada de composição sem mudar nada. */
.capa .topoFixed:before {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

.capa .topo ul li a {
    color: #eaf1f9;
}

.topo ul li {
    background: linear-gradient(var(--ref-blue) 0 0) 0 calc(80px - 100%) / var(--d, 0) 100% no-repeat;
    transition: .3s, background-size .3s .3s;
}

.topo ul li:hover {
    --d: 100%;
    background-position: 10% 100%;
    color: var(--ref-white);
}

.topo .menus_center .nome-logo span {
    background-color: rgba(255, 255, 255, .14);
    color: var(--ref-white);
    border-radius: 6px;
    font-weight: 400;
}

.topo .menus_center .nome-logo {
    color: var(--ref-white);
}

.topoFixed .menus_center .nome-logo span {
    background-color: transparent;
}

.float-logo .nome-logo {
    color: var(--ref-white);
}

.float-logo .nome-logo span {
    background-color: rgba(255, 255, 255, .14);
    color: var(--ref-white);
    border-radius: 6px;
}

.topo .topo-social-medias a {
    border: 1px solid rgba(223, 184, 106, .55);
    background-color: rgba(255, 255, 255, .06);
    color: var(--ref-white);
}

.topo .topo-social-medias a:hover {
    background-color: var(--ref-gold);
    color: var(--ref-navy-900);
    border-color: var(--ref-gold);
}

.topo .search-bt {
    color: #eaf1f9;
}

.topo .search input {
    border-radius: 20px;
}

.topo .search button {
    color: var(--ref-navy-800);
}

.hot_tags {
    background: linear-gradient(90deg, var(--ref-navy-950), var(--ref-navy-800) 55%, var(--ref-navy-950));
    border-top: 1px solid rgba(223, 184, 106, .25);
    border-bottom: 1px solid rgba(255, 255, 255, .06);
}

.hot_tags a {
    display: inline-block;
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: .6px;
    color: #c6d3e2;
    padding: 6px 10px;
    margin: 2px 1px;
    border-radius: 30px;
    transition: color .25s ease, background-color .25s ease;
}

.hot_tags a:hover {
    color: var(--ref-gold-strong);
    background-color: rgba(255, 255, 255, .06);
}

.roadmap-logo span {
    border-radius: 60px;
}

/* ─── O título de faixa: UM desenho só ──────────────────────────────────────
   Antes havia três, e o gestor via três coisas diferentes no mesmo lugar:

   1. 26px, peso 700, caixa normal, azul-noite, filete dourado de 64px — o da
      "Agenda", que só saía quando o divisor era filho DIRETO da faixa
      (`body > ul > section >`);
   2. 30px, peso 300, CINZA #888 e sem borda — o desenho legado do `site.css`,
      que vencia porque `.setor_side_A .section-divisor` tem especificidade
      (0,2,0), maior que os (0,1,2) do refino. Pegava "Setor Principais" e
      "Últimas notícias";
   3. 15px CAIXA ALTA com espacejamento largo — o `section section` daqui,
      que sobrava para os widgets sem lado definido ("Especiais",
      "Categorias").

   Agora os três seletores estão na MESMA regra, com os valores do item 1. Os
   concorrentes do `site.css` entram na lista de propósito: empatar com eles em
   especificidade basta para vencer, porque este arquivo é o último a carregar
   — é mais honesto do que inflar o seletor até passar por cima.

   O que esta regra NÃO toca: `grid-column` / `grid-row`. Quem posiciona o
   título dentro das grades de "Destaque", "Lado a lado" e "Slide horizontal"
   continua sendo `articles.css`, e o `.section_destaque` de primeira posição
   segue com o `margin: 0` dele, que é mais específico (0,2,2).
   ─────────────────────────────────────────────────────────────────────────── */
.section-divisor,
.setor_side_A .section-divisor,
.listagemclientes .section-divisor,
section section .section-divisor,
body>ul>section>.section-divisor {
    position: relative;
    padding: 14px 4px 14px 0;
    margin: 8px 12px 14px 10px;
    font-family: var(--ref-font-body);
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -.2px;
    color: var(--ref-navy-800);
    text-transform: none;
    border-bottom: 1px solid var(--ref-line);
}

.section-divisor:after,
.setor_side_A .section-divisor:after,
.listagemclientes .section-divisor:after,
section section .section-divisor:after,
body>ul>section>.section-divisor:after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 64px;
    height: 3px;
    background: linear-gradient(90deg, var(--ref-gold), var(--ref-gold-strong));
    border-radius: 3px;
}

.formato_2,
.formato_3 {
    background: linear-gradient(135deg, var(--ref-navy-900), var(--ref-navy-700));
}

.formato_2 article .label-canal,
.formato_3 article .label-canal {
    color: var(--ref-gold-strong);
    background-color: rgba(6, 15, 29, .55);
}

article .label-canal {
    color: var(--ref-gold-strong);
    background-color: rgba(6, 15, 29, .68);
    font-weight: 400;
}

article:hover .label-canal {
    color: var(--ref-white);
    background-color: var(--ref-gold);
    padding-left: 25px;
    letter-spacing: 1px;
}

.section_destaque article,
.section_destaque_2 article {
    overflow: hidden;
    border-radius: var(--ref-radius);
    box-shadow: var(--ref-shadow-sm);
    transition: box-shadow .35s ease, transform .35s ease;
}

.section_destaque article:hover,
.section_destaque_2 article:hover {
    box-shadow: var(--ref-shadow-md);
    transform: translateY(-3px);
}

.section_destaque .data-img,
.section_destaque_2 .data-img {
    transition: background-position .6s ease, transform .6s ease;
}

.section_destaque article:hover .data-img,
.section_destaque_2 article:hover .data-img {
    transform: scale(1.02);
}

.section_destaque section:nth-of-type(1) article:nth-of-type(1n+4) {
    position: relative;
    box-sizing: border-box;
    padding: 10px;
    background-color: var(--ref-white);
    border: 1px solid rgba(13, 35, 57, .18);
}

.section_destaque section:nth-of-type(1) article:nth-of-type(1n+4) .data-img {
    border-radius: 10px;
}

.section_destaque section:nth-of-type(1) article:nth-of-type(1n+4) .label-canal {
    position: absolute;
    top: 20px;
    left: 20px;
    margin: 0;
    padding: 4px 12px;
    font-size: 11px;
    color: var(--ref-gold-strong);
    background-color: rgba(6, 15, 29, .72);
    box-shadow: none;
    border-radius: 30px;
    z-index: 2;
}

.section_destaque section:nth-of-type(1) article:nth-of-type(1n+4) .label-canal:hover {
    background-color: var(--ref-gold);
    color: var(--ref-navy-900);
    padding: 4px 12px;
    letter-spacing: .5px;
}

.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: var(--ref-navy-800);
    padding-top: 12px;
    padding-bottom: 4px;
}

.section_destaque section:nth-of-type(1) article:nth-of-type(2) .data-img,
.section_destaque section:nth-of-type(1) article:nth-of-type(3) .data-img {
    height: 190px;
}

.section_destaque article:hover .titulo,
.section_destaque_2 article:hover .titulo {
    color: var(--ref-gold-strong);
}

/* ============================================================
   Principais destaques — grid no lugar de float (articles.css)
   ============================================================ */
.section_destaque section.setor_side_A.blococapa_3 {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: auto 190px 190px;
    gap: 20px;
}

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

.section_destaque section:nth-of-type(1) .section-divisor {
    grid-column: 1 / -1;
    grid-row: 1;
    margin: 0;
}

.section_destaque section:nth-of-type(1) article:nth-of-type(1) {
    grid-column: 1 / span 7;
    grid-row: 2 / span 2;
    width: 100%;
    float: none;
}

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

.section_destaque section:nth-of-type(1) article:nth-of-type(1n+2) {
    grid-column: span 5;
    grid-row: 2;
    width: 100%;
    float: none;
    margin-left: 0;
}

.section_destaque section:nth-of-type(1) article:nth-of-type(3) {
    grid-row: 3;
}

.section_destaque section:nth-of-type(1) article:nth-of-type(1n+4) {
    grid-column: span 3;
    grid-row: auto;
    width: 100%;
    float: none;
    height: auto;
    margin: 0;
}

.section_destaque section:nth-of-type(1) article:nth-of-type(4n+4),
.section_destaque section:nth-of-type(1) article:nth-of-type(4n+7) {
    clear: none;
    margin-left: 0;
    margin-right: 0;
}

.section_destaque section:nth-of-type(1)::after {
    display: none;
}

@media screen and (min-width: 767px) and (max-width: 1199px) {
    .section_destaque section:nth-of-type(1) article:nth-of-type(1n+4) {
        grid-column: span 4;
    }
}

/* ============================================================
   Coluna lateral "mais lidas" — calha de separação (>=1200px)
   ============================================================ */
@media screen and (min-width: 1200px) {
    .section_destaque section.setor_side_A {
        width: calc(70% - 20px);
    }

    .section_destaque section.setor_side_B {
        margin-left: 20px;
    }
}

.section_destaque .articles-pocket {
    border: 1px solid rgba(13, 35, 57, .18);
    border-radius: var(--ref-radius);
}

.section_ultimas article {
    border-radius: var(--ref-radius);
    padding: 14px;
    background-color: var(--ref-white);
    box-shadow: var(--ref-shadow-sm);
    transition: box-shadow .35s ease, transform .35s ease;
    margin-bottom: 14px;
}

.section_ultimas article:hover {
    box-shadow: var(--ref-shadow-md);
    transform: translateY(-2px);
}

.section_ultimas article .data-img {
    border-radius: 10px;
    overflow: hidden;
}

.section_ultimas article .conteudo .titulo {
    color: var(--ref-navy-800);
}

.section_ultimas article:hover .conteudo .titulo {
    color: var(--ref-gold);
}

.articles-pocket {
    border-radius: 12px;
    background-color: var(--ref-white);
    border-bottom: 1px solid var(--ref-line);
    box-shadow: var(--ref-shadow-sm);
    transition: box-shadow .35s ease, transform .35s ease;
    margin-bottom: 10px;
}

.articles-pocket:hover {
    box-shadow: var(--ref-shadow-md);
    transform: translateY(-2px);
    background-color: var(--ref-white);
    border-bottom: 1px solid var(--ref-line);
}

.articles-pocket .conteudo-pocket .titulo {
    color: var(--ref-navy-700);
    font-weight: 600;
}

.articles-pocket:hover .conteudo-pocket .titulo {
    color: var(--ref-gold);
}

.articles-pocket .img-capa-pocket img {
    border-radius: 50%;
    box-shadow: 0 0 0 3px rgba(223, 184, 106, .35);
}

.tags-lateral {
    margin-bottom: 20px;
}

.tags-lateral a {
    border-radius: 30px;
    border: 1px solid var(--ref-line);
    background-color: var(--ref-white);
    color: var(--ref-navy-700);
    padding: 6px 16px;
    font-size: 13px;
    margin-bottom: 4px;
    transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}

.tags-lateral a:hover {
    background-color: var(--ref-gold);
    border-color: var(--ref-gold);
    color: var(--ref-navy-900);
    padding-left: 16px;
}

.calendario {
    background-color: var(--ref-white);
    border-radius: var(--ref-radius);
    box-shadow: var(--ref-shadow-sm);
    padding: 20px;
}

section.calendario {
    margin-top: 32px;
    background-color: transparent;
    box-shadow: none;
    border-radius: 0;
    padding: 0 15px;
}

.calendario-rows {
    padding: 8px 12px;
    margin: 4px 0;
    border-radius: 8px;
    border: 1px solid var(--ref-line);
    background-color: var(--ref-cream);
    transition: background-color .25s ease, border-color .25s ease;
}

.calendario-rows:hover {
    background-color: var(--ref-gold-soft);
    border-color: var(--ref-gold);
}

.calendario-dia {
    font-family: var(--ref-font-display);
    color: var(--ref-gold);
}

.calendario-mesano {
    color: var(--ref-muted);
}

.pok-banner {
    border-radius: var(--ref-radius);
}

.banner_lateral,
.banner_lateral_vert,
.banner_midle {
    border-radius: 12px;
}

.artigo .canal-top {
    background: linear-gradient(180deg, var(--ref-navy-900), var(--ref-navy-800));
}

/* ═══════════════════════════════════════════════════════════════════════════
   TOPO DO ARTIGO — cabeçalho claro, faixa de título escura

   O .canal-top era uma faixa escura absoluta atrás do cabeçalho. Ele brigava
   com a própria paleta do topo: sem rolagem os links do menu são #35366b (azul
   escuro), isto é, o cabeçalho foi desenhado para fundo CLARO. Pintar escuro
   por trás deixava os links quase ilegíveis, e o logo/ícones em branco eram
   remendo em cima desse conflito. Por isso ele saiu do viewArtigo.php.

   O que ficou são duas superfícies com papéis distintos:
     • a barra do topo, clara (transparente sobre o #f4f6f9 do body), com o
       logo, o menu e os ícones em azul escuro;
     • a faixa de título logo abaixo, escura, com o eyebrow das tags e o título
       em azul vivo — mesma linguagem da faixa de vídeo da homilia.

   A partir de .topoFixed (rolagem > 90px) a barra escurece e tudo que era azul
   volta ao branco.
   ═══════════════════════════════════════════════════════════════════════════ */

.artigo .head {
    /* A cor mora no conteúdo, não na folha: a faixa é pintada pela seção ou
       pelo widget configurado no painel. Enquanto nada for escolhido, ela fica
       transparente e mostra o fundo da página.

       A imagem continua anulada aqui: o resp.css ainda aponta para
       brandplace/icones/bg-head.jpg, arquivo que não existe mais, e sem isto
       cada artigo pagaria uma requisição perdida. */
    background-image: none;
    background-blend-mode: normal;
}

.artigo .head h1 {
    font-family: var(--ref-font-body);
    font-weight: 500;
    font-size: 35px;
    line-height: 1.22;
    color: #083767;
    letter-spacing: -1.5px;
    text-shadow: none;
}

/* ═══════════════════════════════════════════════════════════════════════════
   CABEÇALHO SOBRE FUNDO CLARO — artigo padrão e telas de canal

   O mesmo defeito aparecia em /contato, /noticias, /historia, /busca, /pg-erro
   e nas demais telas de canal: logo, ícones sociais e busca em branco sobre o
   #f4f6f9 da página, enquanto os links do menu ao lado já eram #35366b. Nessas
   telas o .canal-top existe mas é totalmente transparente — não pinta nada —,
   então o cabeçalho sempre esteve sobre claro e o branco nunca teve chance.

   Duas famílias de tela, um só tratamento:
     • body.artigo (sem o .canal-top, removido em viewArtigo.php e no
       viewArtigoHomilias.php)
     • .topo.canal  (todas as telas de canal)

   O guard :not(.boletins) exclui a única variante de artigo que ainda MANTÉM o
   .canal-top escuro — sem ele, o logo do boletim ficaria azul sobre faixa
   escura. E .topo.canal é seguro para toda tela de canal porque ali o .topo é
   position:static: a imagem de fundo do canal fica inline no .head, dentro do
   <main>, e nunca passa por baixo da barra do topo.

   A partir de .topoFixed o cabeçalho escurece e tudo volta ao branco.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Logo, ícones sociais e busca acompanham o azul dos links do menu — é a cor
   que o cabeçalho já usava para texto sobre claro. */
body.artigo:not(.boletins) .topo:not(.topoFixed) .nome-logo,
body.artigo:not(.boletins) .topo:not(.topoFixed) .nome-logo span,
body.artigo:not(.boletins) .topo:not(.topoFixed) .topo-social-medias a,
body.artigo:not(.boletins) .topo:not(.topoFixed) .search-bt,
.topo.canal:not(.topoFixed) .nome-logo,
.topo.canal:not(.topoFixed) .nome-logo span,
.topo.canal:not(.topoFixed) .topo-social-medias a,
.topo.canal:not(.topoFixed) .search-bt,
/* Sub-página de canal: ali o .topo tem classe `produtos`, não `canal`, e
   escapava do tratamento — o nome e os ícones ficavam brancos sobre branco.
   Vale a mesma justificativa: o .topo é position:static e a faixa escura
   começa só depois dele (medido: topo termina em 68px, faixa começa em 68px). */
body.produtos.segmentos .topo:not(.topoFixed) .nome-logo,
body.produtos.segmentos .topo:not(.topoFixed) .nome-logo span,
body.produtos.segmentos .topo:not(.topoFixed) .topo-social-medias a,
body.produtos.segmentos .topo:not(.topoFixed) .search-bt {
    color: #35366b;
}

/* O realce do nome era branco a 14% — invisível sobre claro. Vira um leve
   assentamento azul, mantendo o mesmo papel de destacar o nome do logo. */
body.artigo:not(.boletins) .topo:not(.topoFixed) .nome-logo span,
.topo.canal:not(.topoFixed) .nome-logo span,
body.produtos.segmentos .topo:not(.topoFixed) .nome-logo span {
    background-color: rgba(53, 54, 107, .09);
}

/* Idem para os ícones: a borda dourada e o véu branco sumiam no claro. */
body.artigo:not(.boletins) .topo:not(.topoFixed) .topo-social-medias a,
.topo.canal:not(.topoFixed) .topo-social-medias a,
body.produtos.segmentos .topo:not(.topoFixed) .topo-social-medias a {
    background-color: rgba(53, 54, 107, .06);
    border-color: rgba(53, 54, 107, .30);
}

body.artigo:not(.boletins) .topo:not(.topoFixed) .topo-social-medias a:hover,
.topo.canal:not(.topoFixed) .topo-social-medias a:hover,
body.produtos.segmentos .topo:not(.topoFixed) .topo-social-medias a:hover {
    background-color: #35366b;
    border-color: #35366b;
    color: var(--ref-white);
}

/* ── Faixa do vídeo da homilia ──────────────────────────────────────────── */
/* A homilia usa <div class='head homilias'>, então recebe o .artigo .head. Aqui
   o tom é um pouco mais fundo que o do artigo: a faixa é dominada pelo player,
   e quanto mais escura a moldura, menos ela disputa com a imagem do vídeo.

   O seletor é .head.homilias (0,3,0) e não .homilias (0,2,0): com a mesma
   especificidade de .artigo .head, quem vencesse dependeria da ordem no
   arquivo, e uma reorganização futura inverteria o resultado em silêncio. */
.artigo .head.homilias {
    background-color: #051525;
}

/* Só a cor: a geometria (display, margens, tamanho) já está em view.css:118 e
   repeti-la aqui criaria um segundo lugar para manter o mesmo layout. */
.artigo .homilias .homilias-block h1 {
    color: #3fa5ff;
}

/* ── Faixa de título do canal ───────────────────────────────────────────── */
/* Aqui havia um `background-color` — primeiro #111111 (site.css), depois o
   azul-marinho da marca. Saiu: a cor da faixa passou a ser conteúdo, escolhida
   por seção ou por widget no painel, e uma cor na folha venceria essa escolha
   em toda página sem imagem de fundo.

   O que a faixa mostra quando ninguém escolheu nada é o fundo da página. Os
   canais que têm imagem de fundo continuam recebendo-a inline neste mesmo
   elemento e não dependiam desta cor. */

/* ── Botão do menu no celular ─────────────────────────────────────────────
   O tratamento do botão MUDOU DE LUGAR: está no fim deste arquivo, no bloco
   "BOTÃO DA GAVETA E ALINHAMENTO DOS SUBITENS", e agora vale em TODAS as
   páginas — inclusive a capa, que ficava de fora daqui e continuava com a
   pastilha branca legada.

   O que existia aqui era um `body.artigo`/`body.canal` com pastilha #35366b,
   e a regra de `fill` do SVG do `bars.svg`. As duas saíram: a primeira porque
   dois desenhos diferentes para o mesmo botão é o defeito, não a correção; a
   segunda porque não há mais SVG — as barras são três elementos em CSS. */

/* A troca clara↔escura acontece na rolagem; sem transição ela pisca. */
.topo,
.topo .nome-logo,
.topo .nome-logo span,
.topo .topo-social-medias a,
.topo .search-bt {
    transition: background-color .28s ease, color .28s ease, border-color .28s ease;
}

.artigo .tag-artigo {
    color: var(--ref-navy-700);
    font-weight: 700;
    letter-spacing: .6px;
}

/* ── Tags do artigo: linha de categoria acima do título ─────────────────────
   Eram pílulas preenchidas embaixo do título. Duas objeções: pílula preenchida
   tem forma de botão, e por isso se lê como algo clicável de ação, competindo
   com o título pelo peso do bloco; e, empilhadas, tomavam a altura de três
   linhas para dizer duas palavras.

   Viram a linha de categoria (o "eyebrow" do jornalismo impresso): versalete
   pequeno, entrelinhado aberto, acima do título. Informa a editoria antes da
   manchete — que é a ordem em que se lê — e devolve ao título o papel de único
   elemento pesado do cabeçalho. Continuam links, com o ouro da marca no hover.
   ───────────────────────────────────────────────────────────────────────── */
.artigo .head .tag-artigo {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 11px;
    margin-bottom: 12px;
    padding: 0;
    border-radius: 0;
    background: none;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    line-height: 1;
}

/* Fio dourado curto abrindo a linha: ancora o cabeçalho e traz a cor da marca
   na menor dose possível — sem ele o versalete fica solto no alto da faixa. */
.artigo .head .tag-artigo::before {
    content: '';
    width: 18px;
    height: 2px;
    background-color: var(--ref-gold);
    border-radius: 2px;
}

.artigo .head .tag-artigo a {
    display: inline-flex;
    align-items: center;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    /* Claro porque a faixa é escura, tanto no artigo (#072239) quanto na
       homilia (#051525). O tom é dessaturado de propósito: o eyebrow informa a
       editoria e não pode competir com o azul vivo do título logo abaixo. */
    color: #9fb6cd;
    transition: color .25s ease;
}

/* Ponto entre uma tag e outra, no lugar de vírgula ou barra: separa sem
   introduzir um caractere que o leitor tente interpretar. */
.artigo .head .tag-artigo a+a::before {
    content: '';
    width: 3px;
    height: 3px;
    margin-right: 11px;
    border-radius: 50%;
    background-color: currentColor;
    opacity: .45;
}

.artigo .head .tag-artigo a:hover {
    color: var(--ref-gold-strong);
}

.artigo .tempo-leitura {
    border-bottom: 1px solid var(--ref-line);
    color: var(--ref-muted);
}

.artigo .texto .listagempadrao {
    font-family: var(--ref-font-body);
    font-size: 17.5px;
    line-height: 30px;
    color: #2a3440;
}

.artigo .texto .listagempadrao h2,
.artigo .texto .listagempadrao h3 {
    color: var(--ref-navy-800);
    margin-top: 28px;
    line-height: 1.3;
}

.textocompleto a {
    background-color: var(--ref-gold-soft);
    color: var(--ref-navy-800);
}

.textocompleto a:hover {
    background-color: var(--ref-navy-800);
    color: var(--ref-white);
}

.artigo .texto .data span {
    background-color: var(--ref-soft);
    border: 1px solid var(--ref-line);
    color: var(--ref-muted);
}

.editor {
    border-radius: 12px;
}

.editor .img-editor img {
    border-radius: 50%;
    box-shadow: 0 0 0 3px rgba(223, 184, 106, .4);
}

.editor .editor-content .editor-nome {
    color: var(--ref-navy-800);
}

/* ── Compartilhar ────────────────────────────────────────────────────────────
   O desenho antigo era um truque de largura: o texto ia para
   `position: absolute; left: 0` e os ícones ficavam centralizados na linha. Só
   fecha quando a caixa é MUITO mais larga que os dois — dentro de uma coluna de
   30% (336px) o texto passava por baixo dos ícones, medido em /noticias.

   Aqui é uma linha flex comum: o texto cresce e empurra os ícones para a
   direita; quando não cabem os dois, os ícones descem para a linha de baixo,
   alinhados à esquerda. Sem media query — o próprio conteúdo decide.
   ───────────────────────────────────────────────────────────────────────── */
.sharecomp {
    background-color: var(--ref-soft);
    border-radius: var(--ref-radius);
    padding: 20px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    text-align: left;
}

/* Anula o posicionamento absoluto do desenho antigo em TODA `.share-col` — a
   regra legada é `.share-col:first-child`, que com os botões agrupados passaria
   a valer para o primeiro ícone. */
.sharecomp .share-col {
    display: block;
    position: static;
    float: none;
    margin: 0;
}

/* Os três botões andam juntos: ou cabem ao lado do texto, ou descem em bloco. */
.sharecomp .share-acoes {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 0 0 auto;
}

/* Abaixo de 760px o site.css dá `width: 100%` a `.share-col:first-child` — o
   que agora pegaria o primeiro ícone e o faria empurrar os outros dois. */
.sharecomp .share-acoes .share-col {
    width: auto;
    flex: 0 0 auto;
}

/* `flex-grow: 1` é o que joga os ícones para a direita quando há espaço, e o
   que faz o texto tomar a linha inteira quando não há. A base de 200px é o
   ponto em que ele para de encolher e prefere quebrar a linha. */
.sharecomp .share-texto {
    flex: 1 1 200px;
    min-width: 0;
    font-size: 13px;
}

/* `.sharecomp * { line-height: 15px }` (site.css) grudava as duas linhas do
   texto uma na outra. Aqui vale só para o texto — os ícones não têm linha. */
.sharecomp .share-texto,
.sharecomp .share-texto * {
    line-height: 1.45;
}

.share-col a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    padding: 0;
    margin-right: 0;
    border-radius: 50%;
    background-color: var(--ref-white);
    color: var(--ref-navy-700);
    border: 1px solid var(--ref-line);
    transition: background-color .25s ease, color .25s ease, border-color .25s ease, transform .25s ease;
}

/* Foco visível: são links de ação e precisam ser alcançáveis pelo teclado. */
.share-col a:focus-visible {
    outline: 2px solid var(--ref-gold);
    outline-offset: 2px;
}

.share-col a:hover {
    background-color: var(--ref-gold);
    color: var(--ref-navy-900);
    border-color: var(--ref-gold);
    transform: translateY(-2px);
}

.lateral-row h6 {
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 14px;
    color: var(--ref-navy-700);
    margin-top: 22px;
}

footer {
    background-color: var(--ref-cream);
    border-top: 3px solid var(--ref-gold);
}

footer .footer-menus>ul>li>.titulo {
    color: var(--ref-navy-800);
    font-weight: 700;
    background: linear-gradient(var(--ref-gold) 0 0) left/var(--d, 0) 9% no-repeat;
}

footer .footer-menus li {
    color: var(--ref-ink);
}

footer .footer-menus li a {
    color: var(--ref-muted);
}

footer .footer-menus li:hover>.titulo,
footer .footer-subs li:hover,
footer .footer-subs li:hover a {
    color: var(--ref-gold) !important;
}

footer .footer-menus ul.footer-subs li a {
    color: var(--ref-muted);
}

.logo-footer .nome-logo {
    color: var(--ref-navy-800);
    font-weight: 600;
}

.footer-menus .footer-descricao {
    color: var(--ref-muted);
}

footer .redes-share i {
    background-color: var(--ref-navy-800);
    border: 1px solid var(--ref-navy-700);
    color: var(--ref-white);
}

footer .redes-share i:hover {
    background-color: var(--ref-gold);
    border-color: var(--ref-gold);
    color: var(--ref-navy-900);
}

footer .copyright {
    background-color: var(--ref-navy-900);
    color: #aeb9c6;
    font-family: var(--ref-font-body);
}

form input,
form textarea,
form select {
    border-radius: 8px;
    border: 1px solid var(--ref-line);
}

input:focus,
textarea:focus,
select:focus {
    border-color: var(--ref-gold) !important;
    box-shadow: 0 0 0 3px rgba(201, 162, 75, .18) !important;
    outline: none;
}

.btn,
.botao {
    border-radius: 30px;
}

/* A camada de cookie antiga (`.float-cookie`, `.button-ok-cookie`,
   `.float-cookie-off`) foi recolorida aqui enquanto existiu. A marcação dela
   saiu do `ui-master/site/camada_cookie.php` — o que a substituiu tem folha
   própria, `ui-libs/css/privacidade.css`, e prefixo próprio (`priv-`). As
   regras antigas continuam no site.css, sem elemento nenhum para alcançar. */

.menu-mobile .img-icon-menu {
    filter: invert(1);
}

.menu-mobile-ol li a {
    color: var(--ref-navy-700);
    background: rgba(228, 232, 238, .6);
}

.menu-mobile-ol li a:hover {
    background-color: var(--ref-gold);
    color: var(--ref-navy-900);
}

.tags-menu-mobile a {
    background-color: var(--ref-navy-700);
    color: var(--ref-white);
}

.tags-menu-mobile a:hover {
    background-color: var(--ref-gold);
    color: var(--ref-navy-900);
    font-size: 14px;
    letter-spacing: 0;
}

@media screen and (min-width: 1030px) {
    .topoFixed {
        background-color: rgba(10, 26, 48, .96) !important;
        border-bottom: 1px solid rgba(223, 184, 106, .35);
        box-shadow: 0 6px 24px rgba(6, 15, 29, .35);
        backdrop-filter: saturate(1.2) blur(8px);
        -webkit-backdrop-filter: saturate(1.2) blur(8px);
    }

    .topoFixed .menus_center .nome-logo {
        color: var(--ref-white);
    }

    .section_destaque article,
    .section_destaque_2 article {
        margin-bottom: 14px;
    }

    .articles-pocket {
        margin-bottom: 14px;
    }
}

@media screen and (max-width: 1029px) {
    .section_ultimas article {
        margin-bottom: 10px;
        padding: 10px;
    }

    .artigo .head h1 {
        font-size: 26px;
    }

    /* Mesma lista da regra unificada lá em cima: sem ela o degrau de tamanho
       valeria só para o divisor que já era filho direto da faixa, e os outros
       ficariam com 26px em tela estreita — a divergência que acabamos de
       remover, voltando pela porta do responsivo. */
    .section-divisor,
    .setor_side_A .section-divisor,
    .listagemclientes .section-divisor,
    section section .section-divisor,
    body>ul>section>.section-divisor {
        font-size: 22px;
    }

    .hot_tags a {
        font-size: 11px;
        padding: 4px 8px;
    }
}

@media screen and (max-width: 766px) {
    .section_destaque section.setor_side_A.blococapa_3 {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
    }

    .section_destaque section:nth-of-type(1) .section-divisor,
    .section_destaque section:nth-of-type(1) article:nth-of-type(1),
    .section_destaque section:nth-of-type(1) article:nth-of-type(1n+2),
    .section_destaque section:nth-of-type(1) article:nth-of-type(1n+4) {
        grid-column: 1;
        grid-row: auto;
        width: 100%;
        float: none;
        height: auto;
        margin: 0;
    }

    .calendario {
        padding: 12px;
    }

    section.calendario {
        margin-top: 16px;
    }

    footer .footer-menus li a {
        color: var(--ref-muted);
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Ficha da sub-página (contato, endereço, presença on-line)

   Os campos vêm do perfil que o canal define (ver ui-app/funcoes.php,
   pagina_ficha_html). Fica FORA do .textocompleto de propósito: aquele bloco
   estiliza todo <a> com fundo verde, que não serve aqui.
   ═══════════════════════════════════════════════════════════════════════════ */

.ficha-local {
    position: relative;
    margin: 40px 0 10px;
    padding: 30px 30px 26px;
    background: var(--ref-cream);
    border: 1px solid var(--ref-line);
    border-radius: var(--ref-radius);
    box-shadow: var(--ref-shadow-sm);
    overflow: hidden;
}

/* Mesma régua dourada curta da tarja do artigo — é o que amarra a ficha ao
   resto do site sem precisar de um título dizendo "Contato". */
.ficha-local::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 64px;
    height: 3px;
    background: var(--ref-gold);
}

.ficha-local__grade {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 22px 30px;
}

/* min-width:0 porque item de grade nasce com min-width:auto, e aí a coluna não
   consegue ficar menor que a maior palavra indivisível — um e-mail longo
   esticava a ficha para 437px numa tela de 390. */
.ficha-local__item {
    display: flex;
    align-items: flex-start;
    gap: 13px;
    margin: 0;
    min-width: 0;
}

.ficha-local__icone {
    flex: 0 0 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--ref-white);
    border: 1px solid var(--ref-line);
    color: var(--ref-navy-700);
    font-size: 14px;
}

/* min-width:0 para o endereço longo quebrar dentro da coluna da grade em vez
   de esticá-la. */
.ficha-local__corpo {
    min-width: 0;
}

.ficha-local__rotulo {
    display: block;
    margin-bottom: 3px;
    font-family: var(--ref-font-body);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--ref-muted);
}

.ficha-local__valor {
    display: block;
    font-family: var(--ref-font-body);
    font-size: 15px;
    line-height: 1.45;
    color: var(--ref-ink);
    /* `anywhere`, não `break-word`: só ele conta na largura mínima do conteúdo,
       que é o que a grade usa para decidir o tamanho da coluna. */
    overflow-wrap: anywhere;
}

a.ficha-local__valor {
    color: var(--ref-navy-600);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: color .18s ease, border-color .18s ease;
}

a.ficha-local__valor:hover,
a.ficha-local__valor:focus-visible {
    color: var(--ref-blue);
    border-bottom-color: currentColor;
}

.ficha-local__redes {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--ref-line);
}

.ficha-local__rede {
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--ref-navy-800);
    color: var(--ref-white);
    font-size: 16px;
    text-decoration: none;
    transition: transform .18s ease, background-color .18s ease;
}

.ficha-local__rede:hover,
.ficha-local__rede:focus-visible {
    color: var(--ref-white);
    transform: translateY(-2px);
}

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

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

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

.ficha-local__rede--site:hover {
    background: var(--ref-gold);
    color: var(--ref-navy-950);
}

@media (max-width: 767px) {
    .ficha-local {
        margin-top: 28px;
        padding: 24px 20px 20px;
    }

    .ficha-local__grade {
        grid-template-columns: 1fr;
        gap: 18px;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Topo das sub-páginas (uma comunidade dentro de /comunidades)

   `body.produtos.segmentos` é exclusivo delas: /comunidades, /contato e
   /noticias são `interno canal`. A classe `produtos` vem do site corporativo
   que esta base já foi e trazia três heranças que aqui só atrapalham:

     .interno.produtos main.canal { background-color: #222121 }  → página preta
     .produtos .head { width: 900px; margin: auto }              → faixa solta
     .produtos .head h1 { font-size: 20px }                      → título miúdo

   O que segue devolve a essas páginas o mesmo topo de /contato: faixa da
   largura da página com o conteúdo no container, título grande, fundo claro.
   Não removo as regras de origem porque `produtos` ainda é uma atribuição
   válida no painel — sobrescrevo só onde ela encontra `segmentos`.
   ═══════════════════════════════════════════════════════════════════════════ */

body.produtos.segmentos main.canal {
    background-color: transparent;
    /* .produtos dava 40px de respiro no topo do <main>, o que abria uma tira
       branca entre o cabeçalho e a faixa. Em /contato a faixa encosta. */
    padding-top: 0;
}

body.produtos.segmentos main.canal .head {
    position: relative;
    width: auto;
    max-width: none;
    height: auto;
    margin: 0;
    padding: 34px 20px 36px;
    display: block;
    background-color: var(--ref-navy-800);
    overflow: hidden;
}

/* Foto de fundo da comunidade, quando houver: sem o véu o texto branco some
   sobre a imagem clara. Mesma técnica do topo do artigo. */
body.produtos.segmentos main.canal .head:not(.no-img-fundo)::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(6, 15, 29, .55), rgba(6, 15, 29, .88));
}

body.produtos.segmentos main.canal .head-canal {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 992px;
    margin: 0 auto;
    display: block;
    text-align: left;
}

/* ── O elo de volta ──────────────────────────────────────────────────────── */
/* Quem chega por busca não sabe que existe uma listagem acima. A seta recua no
   repouso e avança no hover — o movimento é o que diz "volta". */
.topo-origem {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 10px;
    font-family: var(--ref-font-body);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .11em;
    text-transform: uppercase;
    color: var(--ref-gold-strong);
    text-decoration: none;
    transition: color .18s ease;
}

.topo-origem i {
    font-size: 10px;
    transition: transform .18s ease;
}

.topo-origem:hover,
.topo-origem:focus-visible {
    color: var(--ref-white);
}

.topo-origem:hover i,
.topo-origem:focus-visible i {
    transform: translateX(-3px);
}

/* Tipografia IGUAL à das demais páginas de canal (.canal .head-canal h1 no
   site.css): GothamPro 500, 2.8em, entrelinha 1.2, espaçamento -2px, 490px de
   largura. Nada de fonte de display aqui — o topo de /contato, /comunidades,
   /noticias e /homilia-dominical usa a fonte de texto do site, e o título da
   comunidade tem de se parecer com eles.

   A regra existe só para desfazer o que `.produtos .head h1` impõe (20px,
   peso 800, entrelinha 40px, espaçamento 7px, CAIXA ALTA e margem automática
   nas laterais) — ela tem a mesma especificidade da regra do site e vence por
   vir depois no arquivo. */
body.produtos.segmentos main.canal .head-canal h1 {
    display: block;
    max-width: 490px;
    margin: 0;
    font-family: var(--ref-font-body);
    font-size: 2.8em;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: -2px;
    text-align: left;
    text-transform: none;
    color: var(--ref-white);
}

/* Complemento do título: mesmos valores de .canal .head-canal h2 no site.css
   — Roboto 200, 1.2em, #DDD com a sombra de 1px. Aqui também a regra só existe
   para desfazer `.produtos .head h2` (11px, centralizado, caixa alta, #bbb e
   margem automática, que era o que deixava o complemento desalinhado do
   título). A margem superior é minha: o padrão não previa um elo acima. */
body.produtos.segmentos main.canal .head-canal h2 {
    display: block;
    /* Medida relativa: com 450px fixos o complemento parava de acompanhar a
       faixa e ficava curto demais nas telas largas. */
    max-width: 70%;
    margin: 8px 0 0;
    /* A fonte do site, e não a Roboto solta que estava aqui — era a única
       família estranha ao topo, e destoava do título logo acima. */
    font-family: var(--ref-font-body);
    font-size: 1em;
    font-weight: 300;
    line-height: 1.2;
    text-align: left;
    text-transform: none;
    /* Uma declaração só: havia `normal` e, três linhas abaixo, `-0.3px`. A
       segunda sempre venceu — a primeira nunca teve efeito nenhum. */
    letter-spacing: -0.3px;
    color: #ddd;
    /* Sem sombra: ela existia para segurar o texto sobre a foto, e agora quem
       faz isso é a cortina da seção. Somadas, davam um contorno sujo. */
}

/* Chamada: mesmo corpo e peso do padrão (GothamPro 400, 0.8em). A COR é a
   única coisa que não copio — o padrão usa #777, que sobre esta faixa navy dá
   3,5:1 e não passa em texto pequeno. Ali a chamada costuma estar vazia; aqui
   ela aparece. */
body.produtos.segmentos main.canal .head-canal p {
    max-width: 62ch;
    margin: 8px 0 0;
    font-family: var(--ref-font-body);
    font-size: 0.8em;
    font-weight: 400;
    line-height: 1.5;
    text-align: left;
    color: #9fb2c6;
}

/* Sem conteúdo, o elemento não pode reservar espaço nem desenhar margem: era o
   que deixava um vão sob o título nas páginas sem complemento. */
body.produtos.segmentos main.canal .head-canal h2:empty,
body.produtos.segmentos main.canal .head-canal p:empty {
    display: none;
}

/* A régua dourada amarra o topo ao resto do site (mesma da tarja do artigo). */
body.produtos.segmentos main.canal .head::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, var(--ref-gold) 0 120px, rgba(201, 162, 75, .18) 120px);
}

body.produtos.segmentos main.canal>section {
    padding-top: 6px;
}

@media (max-width: 767px) {
    body.produtos.segmentos main.canal .head {
        padding: 26px 18px 28px;
    }

    /* O tamanho do título no celular NÃO se define aqui: o resp.css tem
       `main .head h1 { font-size: 24px !important }`, que vence qualquer
       especificidade. E está certo assim — /contato, /comunidades e /noticias
       também ficam em 24px, então a sub-página já sai igual às outras. Só a
       largura máxima precisa ceder, senão o título quebra cedo demais. */
    body.produtos.segmentos main.canal .head-canal h1 {
        max-width: none;
    }

    body.produtos.segmentos main.canal .head-canal h2 {
        font-size: 14.5px;
    }

    .topo-origem {
        font-size: 11px;
        margin-bottom: 8px;
    }
}

/* ── Abaixo de 500px o topo fica à ESQUERDA, inteiro ────────────────────────

   Estas regras centralizavam o elo, o complemento e a chamada. A razão escrita
   aqui era acompanhar o `h1`, que o `resp.css` centraliza abaixo de 500px
   (`.canal .head-canal h1`) — se só ele ficasse centrado, o resto encostado na
   esquerda ficaria torto.

   Essa premissa envelheceu. O `h1` desta família já não obedece ao resp.css:
   as regras da seção diagramada, mais específicas, o devolveram para a
   esquerda. Medido a 390 e 497px, em página COM foto e SEM foto, dava sempre o
   mesmo:

       .head-canal  center      h1  LEFT
       topo-origem  center      h2  center      p  center

   Ou seja, o remédio virou a doença: o título à esquerda e as três linhas
   abaixo centralizadas. Alinhar tudo à esquerda desfaz o desencontro e deixa o
   topo do celular igual ao do desktop, que já era à esquerda.

   As margens automáticas saem junto: com `max-width` menor que a faixa, elas
   é que empurravam o bloco para o meio, e um `text-align` sozinho não daria
   conta. */
@media (max-width: 500px) {
    body.produtos.segmentos main.canal .head-canal {
        text-align: left;
        /* O recuo lateral já vem da `.head` que envolve esta caixa (18px neste
           breakpoint). Repetido aqui, virava recuo dobrado e comia largura de
           linha justamente onde ela é mais escassa. */
        padding-left: 0;
        padding-right: 0;
    }

    body.produtos.segmentos main.canal .head-canal h2,
    body.produtos.segmentos main.canal .head-canal p {
        text-align: left;
        margin-left: 0;
        margin-right: 0;
        /* No celular os tetos de largura não servem a nada: os 70% do
           complemento e os 62ch da chamada só encurtavam a linha e obrigavam a
           quebrar mais cedo, num espaço que já é estreito. Aqui as duas usam a
           faixa inteira. */
        max-width: 100%;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Página desenhada por template: a seção é a faixa

   `.blococapa_1 { width: 100% }` não bastava. Em telas grandes o resp.css tem
   `body.canal main section { width: 992px; display: table }` — especificidade
   (0,1,3) contra (0,1,0) —, então toda seção ficava presa a 992px, inclusive as
   que deveriam ocupar a tela. Quem manda na largura do conteúdo agora é o
   BLOCO (`.panel.container`), e a seção não pode ter largura fixa nenhuma.

   O gancho é `secao-diagramada`, uma classe da PRÓPRIA seção — o PaginaRenderer
   a emite; a capa não. Antes o escopo vinha de cima, de um
   `<main class="template-diagramado">`, e as regras falavam da seção a partir
   do envoltório dela. Agora falam da seção a partir dela mesma, que é de quem
   elas tratam: a cor de fundo, a largura e o respiro são da faixa.

   O caminho `main > ul.panel >` fica só na regra de largura, e por um motivo
   aritmético: ela precisa vencer `body.canal main section { width: 992px }` do
   resp.css, que é (0,1,3) — `section.secao-diagramada` sozinho é (0,1,1) e
   perderia. Com o caminho, (0,2,3).
   ═══════════════════════════════════════════════════════════════════════════ */

main>ul.panel>section.secao-diagramada {
    width: auto;
    max-width: none;
    /* `display: table` (global do site.css) encolhe para caber no conteúdo; a
       faixa precisa ocupar a linha inteira. */
    display: block;
    margin-left: 0;
    margin-right: 0;
}

/* Respiro das faixas seguintes — a primeira fica de fora.

   A primeira faixa é a que encosta no cabeçalho: quem abre a página vê o título
   colado na barra, como nas páginas sem template, e um recuo ali abriria um
   vão que não existe no resto do site. Da segunda em diante o respiro separa
   uma faixa da outra, e fica DENTRO da cor de cada uma — que agora é pintada na
   própria seção.

   `~` e não `+`: vale para toda faixa que venha depois da primeira, mesmo que
   um dia entre outro elemento no meio da lista. */
main>ul.panel>section.secao-diagramada~section.secao-diagramada {
    padding-top: 20px;
    padding-bottom: 20px;
}

/* O BLOCO é quem decide a largura do conteúdo.

   `section > ul.panel { display: table }` (site.css) encolhe para caber no
   conteúdo — o bloco "cheia" media 632px numa faixa de 1440. `width: 100%`
   resolve SEM trocar o display: é a tabela que contém os floats das colunas
   (`.panel > section > .panel > section { float: left }`), e virar `block`
   deixaria as colunas escaparem da faixa. */
section.secao-diagramada>ul.panel {
    width: 100%;
    box-sizing: border-box;
}

/* `max-width: none` só onde a largura é CHEIA.
   Escrito na regra acima, ele anulava o max-width do próprio `.container` — e
   os dois blocos saíam idênticos, ocupando a tela inteira. O `:not` é o que
   mantém a opção "container" significando alguma coisa. */
section.secao-diagramada>ul.panel:not(.container) {
    max-width: none;
}

/* Com `container`, quem limita é o max-width do bootstrap — que tem degraus por
   breakpoint (1140 / 960 / 720 / 540). Fixar um número aqui achatava todos eles:
   a 1100px de tela o container ficava 1100 em vez de 960. Só centralizo. */
section.secao-diagramada>ul.panel.container {
    margin-left: auto;
    margin-right: auto;
}

/* `.head-canal` tem `width: 992px` FIXO no site.css. Dentro de um bloco em
   `display: table`, essa largura passa a ser o mínimo da tabela: abaixo de
   1100px de tela o bloco parava de encolher em 1082px e a página ganhava
   rolagem lateral. Aqui a caixa vira fluida com teto — o mesmo 992, agora como
   máximo e não como piso. */
section.secao-diagramada .head .head-canal {
    width: auto;
    max-width: 992px;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
    padding-left: 20px;
    padding-right: 20px;
}

/* ── Faixa de título do ARTIGO: a caixa segue o bloco ────────────────────────
   Medido em /noticias/2023/09/clero-se-reune-para-celebrar-o-dia-do-padre, a
   1440px de tela:

     bloco (container)   x=130  largura 1180, conteúdo começando em 145
     .head               x=145  largura 1150  ← preenche o bloco, certo
     .head-canal         x=330  largura  779  ← encolhe para o texto e centraliza
     h1                  x=350

   Ou seja: o título começava 205px à direita do texto do artigo logo abaixo. A
   causa são duas somadas — `.head` é flex com `justify-content: center` (vem de
   `.canal .head`, que alcança o artigo porque o `<main>` das páginas por
   template também é `.canal`) e a caixa tinha `width: auto`, então ela encolhia
   até o conteúdo e sobrava espaço para centralizar.

   Aqui a caixa passa a ocupar o bloco inteiro e os tetos internos caem junto:
   quem decide a largura do título é o BLOCO, escolhido no painel. Sem o
   `padding` lateral próprio, senão o título ficaria 20px mais para dentro que o
   texto — o alinhamento é justamente o que se quer.

   Só no artigo: numa página de canal a caixa encolhida faz o título curto
   ("Notícias") aparecer centralizado, e mexer nisso mudaria o desenho de
   páginas que ninguém pediu para mudar.
   ───────────────────────────────────────────────────────────────────────── */
body.artigo section.secao-diagramada .head .head-canal {
    width: 100%;
    max-width: none;
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
}

/* ── Respiro do h2 do artigo ─────────────────────────────────────────────────
   O valor está em `view.css` (.artigo section h2), mas sozinho ele só valia
   acima de 1200px: três regras do resp.css o substituíam nos degraus de baixo,
   e a mesma margem saía diferente em cada tela —

     767–1199   `.artigo .head h2 { margin: auto }`            → 0 / 0
     200–766    `main .head h1, main .head h2 { margin-bottom: 5px }` → 30 / 5
     ≤ 500      `.canal .head h2 { margin: 10px auto }`         → 10 / 10

   As duas primeiras têm duas classes — (0,2,1) —, então repetir só
   `.artigo section h2` (0,1,2) não bastaria: o seletor precisa empatar em
   classes e vencer pela ordem das folhas, e o site-refinado.css é carregado
   depois do resp.css. Daí o `.artigo .head h2` no grupo abaixo.

   Mesmo número da regra de origem, e não outro: é a mesma decisão dita duas
   vezes porque o legado obriga. */
body.artigo section h2,
.artigo .head h2 {
    margin-top: 10px;
    margin-bottom: 10px;
}

/* Os tetos internos vinham do layout antigo, em que a faixa era sempre da
   largura da tela: `h1` parava em 992px e `h2` em 450. Dentro de um bloco eles
   deixam de fazer sentido — o bloco já é o limite. */
body.artigo section.secao-diagramada .head .head-canal>*,
body.artigo section.secao-diagramada .head .head-canal h1,
body.artigo section.secao-diagramada .head .head-canal h2,
body.artigo section.secao-diagramada .head .head-canal p {
    width: auto;
    max-width: none;
    margin-left: 0;
    margin-right: 0;
}

/* ── Colunas do bloco: a coluna é uma caixa ──────────────────────────────────
   O PaginaRenderer embrulha cada coluna numa `<div class="capa-coluna">` com
   `data-prop` = 70, 30 ou 100 (ver CapaRenderer::agrupaColunas). Foram os
   flutuados irmãos que não deram conta:

     · dois widgets de 70% seguidos de um de 30% → o segundo 70% quebrava a
       linha e o 30% subia para o lado dele, em vez de ficar na coluna dele;
     · não havia onde pôr a calha — `margin` no widget entra na conta dos 100%
       e derruba a coluna para a linha de baixo.

   Com uma caixa por coluna o bloco vira flex: a calha é `gap` (não entra na
   largura de ninguém) e as proporções são `flex-grow` sobre o que sobra, o que
   dispensa `calc()` e continua exato em qualquer largura de tela.

   A CAPA não passa por aqui: lá o renderer segue emitindo os widgets soltos.
   ───────────────────────────────────────────────────────────────────────── */

section.secao-diagramada>ul.panel {
    /* Empilhado por padrão — é o desenho de celular. `row` só entra no
       breakpoint de baixo, junto com a calha horizontal. */
    display: flex;
    flex-direction: column;
    gap: 20px;
}

section.secao-diagramada .capa-coluna {
    /* `min-width: 0` é o que permite a coluna encolher abaixo do conteúdo mais
       largo que ela tem dentro. Sem isto um item flex nunca fica menor que o
       min-content dele, e uma tabela ou uma imagem larga na coluna de 30%
       empurraria a de 70% para fora da faixa. */
    min-width: 0;
}

/* Dentro da caixa o widget ocupa a coluna inteira: quem manda na proporção
   agora é a caixa. As três declarações repõem o que `.panel > section > .panel
   > section` (site-setorescapa.css) dava aos irmãos flutuados e que deixou de
   alcançá-los com o embrulho no meio — `position: relative` sustenta o
   `section.formato_1:after`, e `display: table` contém os floats dos artigos. */
section.secao-diagramada .capa-coluna>section {
    float: none;
    clear: none;
    width: 100%;
    display: table;
    position: relative;
    box-sizing: border-box;
    margin: 0;
}

/* Dois widgets na mesma coluna: respiro entre eles, não entre as colunas.

   O caminho todo está escrito de propósito. Mais abaixo, a regra que zera as
   margens herdadas do layout antigo alcança `> ul.panel > .capa-coluna >
   section` — especificidade maior que a de um `.capa-coluna > section` curto,
   que por isso saía ignorado e os dois widgets ficavam colados. */
section.secao-diagramada>ul.panel>.capa-coluna>section+section {
    margin-top: 5px;
}

@media (min-width: 767px) {
    section.secao-diagramada>ul.panel {
        flex-direction: row;
        /* `flex-start`: cada coluna termina onde o conteúdo dela termina, como
           os flutuados faziam. Com o `stretch` padrão, a coluna curta esticaria
           até a altura da outra e um fundo de cor pintaria o vazio. */
        align-items: flex-start;
        gap: 30px;
    }

    /* `flex-basis: 0` é o detalhe que faz a conta fechar: as proporções são
       aplicadas ao espaço que sobra DEPOIS da calha, então 70/30 continua 70/30
       com ou sem os 30px no meio. Com `flex-basis: 70%` a soma passaria de 100%
       e a segunda coluna cairia para baixo. */
    section.secao-diagramada .capa-coluna[data-prop="70"] {
        flex: 7 1 0;
    }

    section.secao-diagramada .capa-coluna[data-prop="30"] {
        flex: 3 1 0;
    }

    section.secao-diagramada .capa-coluna[data-prop="100"] {
        flex: 1 1 0;
    }

    /* ── Colunas grudadas (70/30 e 30/70) ─────────────────────────────────
       A coluna curta acompanha a rolagem enquanto a longa corre.

       Isto só funciona porque a linha é `align-items: flex-start`: cada coluna
       fica com a altura do próprio conteúdo, e o bloco de referência do sticky
       é a linha inteira, tão alta quanto a coluna maior. É daí que sai o curso
       do grude. Com o `stretch` padrão as duas teriam a altura da linha, não
       sobraria percurso e o sticky não faria nada.

       O `top` limpa o cabeçalho fixo de 68px, mais 20 de respiro. A coluna de
       100% fica de fora: sozinha, não há o que acompanhar. */
    section.secao-diagramada .capa-coluna[data-prop="70"],
    section.secao-diagramada .capa-coluna[data-prop="30"] {
        position: sticky;
        top: 88px;
    }

    /* Na capa o renderer não embrulha as colunas: quem faz o 70/30 são as
       próprias seções flutuadas, irmãs dentro do mesmo `ul.panel` — e é esse
       `ul.panel` que serve de bloco de referência. Float e sticky convivem. */
    body.capa .panel>section>.panel>section.setor_side_A,
    body.capa .panel>section>.panel>section.setor_side_B {
        position: sticky;
        top: 88px;
    }
}

/* Zona de soltar do editor vivo: largura inteira, abaixo das colunas. Ainda não
   há edição ao vivo em páginas (fase 4), mas como item flex ela entraria na fila
   das colunas e roubaria uma fatia — deixo resolvido antes de existir. */
section.secao-diagramada>ul.panel>.capa-ed-drop {
    flex: 1 0 100%;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Espaço para o cabeçalho fixo nas páginas internas

   `.interno .topo` passou a `position: fixed` (site.css). Fixo sai do fluxo:
   o conteúdo voltava a começar em 0 e os primeiros 68px de toda página interna
   ficavam embaixo da barra — medido em /contato, /comunidades,
   /homilia-dominical e /noticias.

   O espaço é reservado no `body`, não no `<main>`: antes dele ainda vêm
   `.canal-top`, `.hot_tags` e o banner do topo, e reservar mais abaixo deixaria
   esses cobertos.

   `body.capa` fica de fora de propósito — lá o cabeçalho é `absolute` e a
   sobreposição sobre a imagem de capa é o desenho.
   ═══════════════════════════════════════════════════════════════════════════ */

body.interno {
    padding-top: 68px;
}

/* Abaixo de 767px o cabeçalho cresce para 78px (logo em duas linhas). */
@media (max-width: 766px) {
    body.interno {
        padding-top: 78px;
    }
}

/* ── Respiro vertical do bloco e do widget ───────────────────────────────────
   Numa página por template a faixa do título ficava 60px abaixo do cabeçalho,
   enquanto numa página sem template ela encosta. Os 60px eram herdados:

     `section > ul.panel { padding: 20px 15px }`   (site.css)      → 20
     `.canal .blococapa_2..5 { margin-top: 40px }` (resp.css)      → 40

   Nenhum dos dois foi pensado para este arranjo: o primeiro dava respiro aos
   blocos da capa, o segundo separava setores-filhos do layout antigo. Aqui o
   espaçamento é responsabilidade de cada widget — o `.head` já traz o seu.

   Só o vertical: os 15px laterais são a calha do container e continuam.
   ───────────────────────────────────────────────────────────────────────── */

section.secao-diagramada>ul.panel {
    padding-top: 0;
    padding-bottom: 0;
}

/* O `> section` alcança o widget do bloco `inline`, que entra direto na seção.
   O widget de coluna mora dentro da `.capa-coluna` e já tem `margin: 0` na
   regra das colunas, mais acima. */
section.secao-diagramada>ul.panel>section,
section.secao-diagramada>ul.panel>.capa-coluna>section {
    margin-top: 0;
    margin-bottom: 0;
}

/* O respiro volta ENTRE blocos, não antes do primeiro. Zerar tudo encostava a
   listagem na faixa do título; os 20+40 originais empurravam a faixa para longe
   do cabeçalho. O `+` resolve os dois: só o bloco que vem DEPOIS de outro
   recebe distância. */
section.secao-diagramada>ul.panel+ul.panel {
    padding-top: 40px;
}

/* A folga antes do rodapé — que existia para a listagem não encostar nele —
   passou a ser o `padding-bottom` da própria seção, lá em cima. */

/* ═══════════════════════════════════════════════════════════════════════════
   Listagem "lado a lado com máscara"

   O formato promete cartões com o texto sobre a imagem. O que havia era isto,
   medido em /noticias com o bloco a 784px:

     · `.conteudo { position: absolute; bottom: 0 }` sem `left`/`right` — a
       caixa herdava a posição estática, que num artigo com a imagem flutuada à
       esquerda é o LADO DIREITO dela. O texto saía ao lado da foto, não em
       cima, e o degradê pintava a metade vazia de cinza;
     · o texto era mais alto que o cartão (289px num cartão de 251px) e o
       `overflow: hidden` do artigo cortava o começo dele;
     · `.img-capa { z-index: -1 }` empurrava a foto para trás do próprio
       cartão — só não sumia porque não havia fundo;
     · o primeiro artigo ainda pegava o desenho de manchete do `display-news`
       (metade foto, metade texto), que é o oposto de uma máscara.

   A reescrita é um cartão de verdade: proporção fixa, foto cobrindo o fundo,
   texto ancorado embaixo sobre um degradê, e o link cobrindo tudo. A grade
   passa a `grid`, o que dispensa as larguras em porcentagem e os
   `nth-child(3n+3) { margin-right: -10px }` de cada breakpoint.

   Vale para `display-news` (artigos) e `display-itens` (sub-páginas): o mesmo
   "Tipo de lista" tem de desenhar igual nos dois.
   ═══════════════════════════════════════════════════════════════════════════ */

.bloco-lado-mascara {
    display: grid;
    /* 230px é o ponto em que o título ainda cabe em duas linhas. Abaixo disso
       o cartão vira uma tarja e o formato deixa de fazer sentido. */
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 20px;
}

/* O nome da tag e a lista de tags são irmãos dos artigos dentro do mesmo
   contêiner; sem isto virariam células da grade. */
.bloco-lado-mascara>*:not(article) {
    grid-column: 1 / -1;
}

.bloco-lado-mascara article.lado-a-lado {
    /* zera a grade antiga (larguras em %, margens de gutter e o inline-block) */
    width: auto;
    margin: 0;
    display: block;
    position: relative;
    overflow: hidden;
    aspect-ratio: 4 / 3;
    border-radius: 14px;
    background: var(--ref-navy-900, #0b1b2d);
    font-size: inherit;
    line-height: inherit;

    /* Fecha o empilhamento do cartão. Sem isto o article é position:relative
       com z-index auto, ou seja NÃO cria contexto: as camadas de dentro (a
       imagem em 0, o texto em 2, o link em 3) sobem para o contexto da página
       e disputam com o resto — foi assim que o link do cartão passou por cima
       do topo fixo. Com z-index 0 elas ficam contidas aqui dentro. */
    z-index: 0;
}

/* O primeiro artigo ocupa a linha inteira e fica mais panorâmico — é o mesmo
   destaque que o `FirstArticles` sempre teve, agora dito em linguagem de
   máscara em vez de meia-foto. */
.bloco-lado-mascara article.FirstArticles.lado-a-lado {
    grid-column: 1 / -1;
    aspect-ratio: 16 / 8;
}

/* O <a> envolve dois filhos fora de fluxo e por isso media 0x0: clicável era só
   o texto. Cobrindo o cartão, o alvo passa a ser o cartão. */
.bloco-lado-mascara article.lado-a-lado>a {
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 3;
}

.bloco-lado-mascara article.lado-a-lado .img-capa,
.bloco-lado-mascara article.FirstArticles.lado-a-lado .img-capa {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 0;
    width: auto;
    height: auto;
    float: none;
    display: block;
    margin: 0;
    overflow: hidden;
}

.bloco-lado-mascara article.lado-a-lado .img-capa img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .5s ease;
}

.bloco-lado-mascara article.lado-a-lado:hover .img-capa img {
    transform: scale(1.06);
}

/* Sem imagem o cartão não pode ficar preto: uma malha discreta segura o texto. */
.bloco-lado-mascara article.lado-a-lado::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 0;
    background: linear-gradient(135deg, var(--ref-navy-800, #12293f), var(--ref-navy-900, #0b1b2d));
}

/* A caixa de texto cobre o CARTÃO INTEIRO, não só a faixa de baixo.
 *
 * Parece exagero para um texto que continua ancorado no rodapé — e o motivo é o
 * ícone de vídeo. Ele é filho desta caixa, e `.conteudo` é `position: absolute`:
 * qualquer filho posicionado dele se mede por ELA, não pelo cartão. Enquanto a
 * caixa tinha a altura do texto, centralizar o ícone no cartão era impossível, e
 * o que havia era uma aproximação por `bottom: 100%` — que descia junto com o
 * texto e caía num lugar diferente em cada cartão, conforme o título tivesse
 * uma, duas ou três linhas. Era esse o desalinhamento do play.
 *
 * Cobrindo o cartão, a caixa vira o sistema de coordenadas do cartão e o ícone
 * se centraliza com um `inset: 0`. O texto continua embaixo porque a caixa é
 * flex em coluna com `justify-content: flex-end`.
 *
 * O degradê teve de ser reescrito junto: espalhado por toda a altura ele
 * apagaria a foto. As paradas abaixo concentram o véu nos 55% de baixo, que é a
 * altura que a antiga caixa ocupava. */
.bloco-lado-mascara article.lado-a-lado .conteudo,
.bloco-lado-mascara article.FirstArticles.lado-a-lado .conteudo {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    z-index: 2;
    width: auto;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    margin: 0;
    padding: 16px 18px 15px;
    /* O degradê é o fundo da própria caixa. Antes era um `::before` de
       `padding-top: 100%` — um quadrado do tamanho da largura, que numa
       manchete de 784px descia 784px e cobria o cartão inteiro de cinza. */
    background: linear-gradient(to top,
            rgba(4, 10, 20, .93) 0%,
            rgba(4, 10, 20, .74) 22%,
            rgba(4, 10, 20, .34) 40%,
            rgba(4, 10, 20, .08) 55%,
            rgba(4, 10, 20, 0) 70%);
}

.bloco-lado-mascara article.lado-a-lado .conteudo:before {
    content: none;
}

.bloco-lado-mascara article.FirstArticles.lado-a-lado .conteudo {
    padding: 22px 24px 20px;
}

/* Título e chamada com teto de linhas: é o que impede o texto de crescer além
   do cartão e ser cortado pelo `overflow: hidden`. */
.bloco-lado-mascara article.lado-a-lado .conteudo .titulo,
.bloco-lado-mascara article.FirstArticles.lado-a-lado .conteudo .titulo {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    color: #fff;
    font-size: 15px;
    line-height: 1.3;
    font-weight: 500;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .6);
    margin: 0;
}

.bloco-lado-mascara article.FirstArticles.lado-a-lado .conteudo .titulo {
    font-size: 26px;
    -webkit-line-clamp: 2;
}

.bloco-lado-mascara article.lado-a-lado .conteudo .chamada {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    color: rgba(255, 255, 255, .88);
    font-size: 13.5px;
    line-height: 1.4;
    margin-top: 6px;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .6);
}

/* Cartão pequeno não tem altura para título + chamada: fica o título, que é o
   que identifica a matéria. A manchete, que é mais alta, mantém os dois. */
.bloco-lado-mascara article.lado-a-lado .conteudo .chamada {
    display: none;
}

.bloco-lado-mascara article.FirstArticles.lado-a-lado .conteudo .chamada {
    display: -webkit-box;
}

.bloco-lado-mascara article.lado-a-lado .conteudo .tag {
    margin-bottom: 6px;
}

.bloco-lado-mascara article.lado-a-lado .conteudo .tag-artigo {
    display: inline-block;
    color: #fff;
    background: rgb(23 62 111);
    border-radius: 20px;
    padding: 2px 10px;
    font-size: 11px;
    letter-spacing: .4px;
    text-transform: uppercase;
    margin-right: 4px;
}

/* O play, centralizado no cartão.
 *
 * Passou por três endereços errados antes deste: `top: -40%` no site.css (uma
 * porcentagem medida contra a altura da caixa de texto, ou seja contra o número
 * de linhas do título) e depois `bottom: 100%; right: 18px`, que o prendia ao
 * canto superior direito DA CAIXA — e a caixa muda de altura em cada cartão.
 * Numa grade de seis cartões, os seis ícones ficavam em seis alturas.
 *
 * `inset: 0` sobre a caixa que agora cobre o cartão inteiro resolve os dois
 * problemas de uma vez: o centro é o centro do cartão, e é o mesmo em todos,
 * independente do título. É também onde o play é procurado — sobre uma
 * miniatura de vídeo, o centro é a convenção. */
.bloco-lado-mascara article.lado-a-lado .icon_play_over {
    position: absolute;
    inset: 0;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: auto;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Fora do fluxo, mas ainda dentro da caixa: precisa ficar abaixo do <a> que
       cobre o cartão (z-index 3) para não engolir o clique. */
    z-index: 1;
    pointer-events: none;
    font-size: 0;
    text-align: center;
    opacity: 1;
}

.bloco-lado-mascara article.lado-a-lado .icon_play_over i {
    font-size: 54px;
    line-height: 1;
    color: var(--ref-white);
    /* Sobre miniatura clara o ícone branco desaparecia. A sombra o segura em
       qualquer foto sem precisar de um disco opaco por trás. */
    text-shadow: 0 2px 14px rgba(4, 10, 20, .55), 0 0 2px rgba(4, 10, 20, .4);
    opacity: .92;
    transition: transform .25s ease, opacity .25s ease;
}

.bloco-lado-mascara article.lado-a-lado:hover .icon_play_over i {
    opacity: 1;
    transform: scale(1.08);
}

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

    .bloco-lado-mascara article.lado-a-lado .icon_play_over i,
    .bloco-lado-mascara article.lado-a-lado:hover .icon_play_over i {
        transition: none;
        transform: none;
    }
}

/* Estreito é o BLOCO, não a janela: esta listagem tanto ocupa a coluna de 70%
   quanto a de 30% de um bloco 70/30, e nesta última ela já é apertada numa tela
   de 1440. O `auto-fill` acima resolve o número de colunas sozinho; o que falta
   é a manchete deixar de ser panorâmica quando ela é a largura toda de uma
   coluna estreita — panorâmico ali vira uma tarja. */
.bloco-lado-mascara {
    container: listamascara / inline-size;
}

@container listamascara (max-width: 560px) {
    .bloco-lado-mascara article.FirstArticles.lado-a-lado {
        aspect-ratio: 4 / 3;
    }

    .bloco-lado-mascara article.FirstArticles.lado-a-lado .conteudo .titulo {
        font-size: 20px;
    }
}

@container listamascara (max-width: 380px) {
    .bloco-lado-mascara {
        gap: 16px;
    }

    .bloco-lado-mascara article.lado-a-lado .conteudo .titulo {
        font-size: 15px;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Encaixe "Data, autor e tags" (.meta-artigo)

   Uma faixa só, com três grupos alinhados pela mesma linha de base: quando,
   por quem, sobre o quê. O dia em números grandes é a âncora — é o que o olho
   encontra primeiro —, e mês/ano e dia da semana se organizam ao lado dele em
   duas linhas de peso diferente.

   As cores vêm do painel, por variável. Os padrões abaixo servem a fundo claro;
   numa faixa escura o gestor escolhe as claras e nada mais muda. É por isso que
   toda cor aqui é `var(--x, padrão)` e nunca um valor fixo.
   ═══════════════════════════════════════════════════════════════════════════ */

.meta-artigo {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px 26px;
    margin: 6px 0 18px;
    font-family: var(--ref-font-body, inherit);
    color: var(--meta-txt, var(--ref-navy-800, #0d2339));
}

/* Os grupos se separam por um fio, não por espaço extra: com três blocos de
   alturas parecidas, o espaço sozinho não diz onde um termina. O fio some no
   primeiro (`+`) para não abrir a faixa com um risco solto. */
.meta-artigo>*+*::before {
    content: '';
    display: block;
    position: absolute;
    left: -13px;
    top: 50%;
    width: 1px;
    height: 28px;
    transform: translateY(-50%);
    background: var(--meta-destaque, var(--ref-line, #d9e1ea));
    opacity: .55;
}

.meta-artigo>* {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

/* ── Quando ──────────────────────────────────────────────────────────────── */
/* O dia era um número de 34px num elemento só dele, à esquerda das duas linhas.
   Agora ele é a primeira palavra da primeira linha ("04 Agosto 2025"), no corpo
   de texto do resto — a faixa ficou uma coisa só, em vez de um algarismo grande
   com texto pendurado ao lado. */

/* As duas linhas correm lado a lado, não empilhadas: a faixa inteira se lê
   numa passada — "04 Agosto 2025 · Segunda-feira · 17h30". O `wrap` é a saída
   quando a largura não dá: aí elas voltam a se empilhar sozinhas, em vez de
   espremer a data. */
.meta-artigo__quando-txt {
    display: flex;
    flex-direction: row;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0 7px;
    min-width: 0;
}

/* O ponto separador vive no PRIMEIRO elemento, não no segundo: a segunda linha
   pode ser o tempo relativo (`.meta-artigo__agora`), e ali o `::before` já é a
   bolinha que pulsa. Disputar aquele pseudo-elemento apagaria a bolinha. */
.meta-artigo__linha1::after {
    content: '·';
    margin-left: 7px;
    opacity: .55;
    font-weight: 400;
}

.meta-artigo__linha1 {
    display: block;
    font-size: 14px;
    line-height: 1.25;
    color: var(--meta-txt, var(--ref-navy-800, #0d2339));
    /* Números de largura fixa: sem isto o "1" é mais estreito que os outros
       algarismos e o mês dança de posição entre um artigo do dia 11 e um do 04.
       A propriedade veio junto com o dia, do elemento que foi removido. */
    font-variant-numeric: tabular-nums;
}

.meta-artigo__linha2 {
    font-size: 12.5px;
    line-height: 1.25;
    color: var(--meta-suave, var(--ref-navy-600, #5a6b7d));
}

/* Publicado hoje: o tempo relativo ganha a cor de destaque e um ponto que
   pulsa devagar — é a única coisa da faixa que muda sozinha e merece ser vista
   como recente. */
.meta-artigo__agora {
    color: var(--meta-destaque, var(--ref-gold, #b8892b));
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.meta-artigo__agora::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    animation: meta-artigo-pulso 2.4s ease-in-out infinite;
}

@keyframes meta-artigo-pulso {

    0%,
    100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: .35;
        transform: scale(.8);
    }
}

@media (prefers-reduced-motion: reduce) {
    .meta-artigo__agora::before {
        animation: none;
    }
}

/* ── Por quem ────────────────────────────────────────────────────────────── */
.meta-artigo__foto {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
    /* O anel usa a cor do texto com pouca opacidade: assim ele acompanha o tema
       escolhido sem precisar de mais um campo no painel. */
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--meta-txt, #0d2339) 22%, transparent);
}

/* Sem foto: as iniciais no mesmo círculo, para a faixa não perder o alinhamento. */
.meta-artigo__foto--letras {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .5px;
    background: color-mix(in srgb, var(--meta-destaque, #b8892b) 18%, transparent);
    color: var(--meta-txt, var(--ref-navy-800, #0d2339));
}

/* Nome e cargo na mesma linha, pela mesma razão da data. */
.meta-artigo__autor-txt {
    display: flex;
    flex-direction: row;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0 7px;
    min-width: 0;
}

.meta-artigo__nome {
    font-size: 14px;
    line-height: 1.25;
    color: var(--meta-txt, var(--ref-navy-800, #0d2339));
}

.meta-artigo__cargo {
    font-size: 12.5px;
    line-height: 1.25;
    color: var(--meta-suave, var(--ref-navy-600, #5a6b7d));
}

/* Aqui o separador fica no cargo, e não no nome: o cargo é opcional — o PHP
   não emite o elemento quando o autor não tem um. Pendurado no nome, o ponto
   sobraria solto no fim da linha toda vez que faltasse cargo. */
.meta-artigo__cargo::before {
    content: '·';
    margin-right: 7px;
    opacity: .55;
    font-weight: 400;
}

/* ── Sobre o quê ─────────────────────────────────────────────────────────── */
.meta-artigo__tag {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 20px;
    border: 1px solid var(--meta-destaque, var(--ref-line, #d9e1ea));
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .6px;
    text-transform: uppercase;
    line-height: 1.6;
    color: var(--meta-destaque, var(--ref-navy-700, #153457));
    text-decoration: none;
    transition: background-color .2s ease, color .2s ease;
}

a.meta-artigo__tag:hover {
    background: var(--meta-destaque, var(--ref-navy-700, #153457));
    /* O texto vira o oposto do fundo que acabou de ganhar: sem isto, uma cor de
       destaque escura deixaria texto escuro sobre fundo escuro. */
    color: var(--meta-fundo-hover, #fff);
}

/* ── Moldura opcional ────────────────────────────────────────────────────── */
.meta-artigo--moldura {
    padding: 14px 18px;
    border-radius: 12px;
    border: 1px solid color-mix(in srgb, var(--meta-txt, #0d2339) 14%, transparent);
    background: color-mix(in srgb, var(--meta-txt, #0d2339) 4%, transparent);
}

/* ── No celular a faixa continua sendo UMA linha ──────────────────────────────
   Empilhada, ela ocupava 130px de altura num aparelho de 390px — três blocos
   de texto soltos antes do artigo começar. Em linha ocupa 40px.

   O que faz caber: tipo 2px menor, retrato de 28px, calha menor e o nome do
   autor com reticências. A conta a 390px é ~347px de conteúdo para ~360px de
   bloco; abaixo disso quem cede é o nome, que é o único texto que sobrevive
   cortado — a data e a categoria, não.
   ───────────────────────────────────────────────────────────────────────── */
@media (max-width: 560px) {
    .meta-artigo {
        gap: 0 14px;
        flex-wrap: nowrap;
        align-items: center;
    }

    .meta-artigo>*+*::before {
        left: -7px;
        height: 24px;
    }

    /* Aqui cada grupo volta às DUAS LINHAS. A faixa em linha corrida é o
       desenho de tela larga; a 390px ela mediria ~510px e ou quebraria em três
       linhas soltas ou espremeria a data. Empilhado dentro do grupo, o
       conteúdo é o mesmo e a faixa continua com os 40px de altura que este
       bloco foi feito para garantir. */
    .meta-artigo__quando-txt,
    .meta-artigo__autor-txt {
        flex-direction: column;
        flex-wrap: nowrap;
        gap: 1px;
        /* `stretch`, e não `flex-start`: é ele que faz o nome e o cargo terem a
           largura da caixa em vez do próprio texto, e é dessa largura que as
           reticências deste bloco dependem. Com `flex-start` o texto encolhe
           para o conteúdo, estoura a caixa e passa por cima da categoria. */
        align-items: stretch;
    }

    .meta-artigo__linha1::after,
    .meta-artigo__cargo::before {
        content: none;
    }

    .meta-artigo__quando {
        flex: 0 0 auto;
    }

    .meta-artigo__linha1 {
        font-size: 12px;
    }

    .meta-artigo__linha2 {
        font-size: 10.5px;
    }

    /* O autor é quem encolhe: `min-width: 0` libera o item flex a ficar menor
       que o próprio texto, e sem ele as reticências nunca apareceriam. */
    .meta-artigo__autor {
        min-width: 0;
        gap: 8px;
    }

    .meta-artigo__autor-txt {
        min-width: 0;
    }

    .meta-artigo__foto {
        width: 28px;
        height: 28px;
        flex: 0 0 28px;
        font-size: 11px;
    }

    .meta-artigo__nome,
    .meta-artigo__cargo {
        display: block;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .meta-artigo__nome {
        font-size: 12px;
    }

    .meta-artigo__cargo {
        font-size: 10.5px;
    }

    .meta-artigo__tags {
        flex: 0 0 auto;
    }

    .meta-artigo__tag {
        padding: 3px 9px;
        font-size: 10px;
        letter-spacing: .4px;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Widget "Categorias"

   Três formatos para o mesmo conteúdo, porque o bloco onde ele cai muda muito:
   pastilhas numa faixa larga, lista numa coluna de 30%, linha corrida sob um
   título. As cores vêm do painel (`--cat-txt`, `--cat-destaque`) — o widget
   serve à capa e às páginas, e as duas têm fundos diferentes.
   ═══════════════════════════════════════════════════════════════════════════ */

.capa-categorias {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    color: var(--cat-txt, var(--ref-navy-800, #0d2339));
    /* Peso leve: são nomes de categoria, não títulos. Declarado aqui, no alto,
       para valer nos três formatos — cada um redefinia o seu. */
    font-weight: 300;
}

/* ── Cartão ──────────────────────────────────────────────────────────────
   Envoltório opcional (campo "Envolver num cartão"). A cor vem do painel; sem
   escolha, um cinza clarís­simo que funciona tanto sobre fundo branco quanto
   sobre o cinza da página. */
.capa-categorias--card {
    padding: 18px;
    border-radius: 14px;
    background: var(--cat-fundo, var(--ref-soft, #f4f6f9));
    /* `overflow: hidden` não é enfeite: sem ele, qualquer fundo pintado por um
       filho até a borda do cartão quadraria os cantos por cima do arredondado —
       o recorte garante que a silhueta do cartão vale para tudo o que estiver
       dentro. Aqui não há filho posicionado fora do fluxo, então não há o que
       ser cortado por engano. */
    overflow: hidden;
}

/* Numa coluna estreita o recuo de 18px de cada lado come um terço da largura
   útil — as pastilhas passariam a quebrar uma por linha. */
@media (max-width: 767px) {
    .capa-categorias--card {
        padding: 14px;
    }
}

.capa-categorias__item {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    /* Sem sublinhado em nenhum estado. Quem avisa que a categoria é clicável é
       a pastilha, o realce da linha ou a mudança de cor — o traço embaixo do
       texto seria um segundo aviso para a mesma coisa. */
    text-decoration: none;
    color: inherit;
    font-weight: inherit;
    transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}

.capa-categorias__item:hover,
.capa-categorias__item:focus {
    text-decoration: none;
}

.capa-categorias__n {
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    padding: 2px 6px;
    border-radius: 20px;
    /* A contagem herda a cor do texto com pouca opacidade: acompanha o tema
       escolhido sem pedir mais um campo no painel. */
    background: color-mix(in srgb, currentColor 14%, transparent);
}

/* ── Pastilhas ───────────────────────────────────────────────────────────── */
.capa-categorias--pilulas .capa-categorias__item {
    padding: 6px 14px;
    border-radius: 20px;
    border: 1px solid var(--cat-destaque, var(--ref-line, #d9e1ea));
    font-size: 12.5px;
    letter-spacing: .3px;
}

.capa-categorias--pilulas .capa-categorias__item:hover {
    background: var(--cat-destaque, var(--ref-navy-700, #153457));
    border-color: var(--cat-destaque, var(--ref-navy-700, #153457));
    /* Contraste garantido sobre o fundo que acabou de ganhar: sem isto uma cor
       de destaque escura deixaria texto escuro sobre fundo escuro. */
    color: #fff;
}

/* ── Lista ───────────────────────────────────────────────────────────────── */
.capa-categorias--lista {
    flex-direction: column;
    gap: 0;
}

.capa-categorias--lista .capa-categorias__item {
    justify-content: space-between;
    width: 100%;
    padding: 10px 2px;
    border-bottom: 1px solid color-mix(in srgb, currentColor 14%, transparent);
    font-size: 13.5px;
}

.capa-categorias--lista .capa-categorias__item:last-child {
    border-bottom: 0;
}

.capa-categorias--lista .capa-categorias__item:hover {
    color: var(--cat-destaque, var(--ref-navy-600, #1d4b79));
    padding-left: 6px;
}

/* ── Linha corrida ───────────────────────────────────────────────────────── */
.capa-categorias--linha {
    gap: 0 6px;
    align-items: baseline;
    font-size: 13.5px;
}

.capa-categorias--linha .capa-categorias__item+.capa-categorias__item::before {
    content: '·';
    margin-right: 6px;
    opacity: .5;
}

/* Na linha corrida o realce é só a cor: o sublinhado que havia aqui era o
   único do widget e destoava dos outros dois formatos. */
.capa-categorias--linha .capa-categorias__item:hover {
    color: var(--cat-destaque, var(--ref-navy-600, #1d4b79));
}

/* ═══════════════════════════════════════════════════════════════════════════
   TOPO COM FOTO — a imagem da página como fundo da seção

   Quando a página tem `midia/{data}/{código}/fundo.*`, quem recebe a imagem é a
   SEÇÃO do título (`PaginaRenderer::fundoDaSecao`), não mais o `.head` de
   dentro dela. Antes a foto era pintada naquele `<div>`: saía uma tarja com a
   largura da caixa do título, com o fundo liso da seção aparecendo em volta —
   parecia um bloco solto no alto da página em vez do topo dela.

   Aqui a foto passa a ocupar a faixa inteira, e o texto ganha o tratamento que
   uma foto exige para continuar legível.
   ═══════════════════════════════════════════════════════════════════════════ */
section.secao-diagramada.fundo-img-section {
    position: relative;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    /* A faixa precisa de altura para a foto valer como imagem, e não como
       textura atrás de duas linhas de texto. */
    min-height: 320px;
    /* Respiro por padding, ALÉM do alinhamento por flex logo abaixo. São dois
       casos diferentes: com título curto sobra altura e quem centraliza é o
       flex; com título de três linhas o conteúdo passa do `min-height` e o que
       segura o texto longe das bordas é este padding. */
    padding-top: 34px;
    padding-bottom: 34px;
    box-sizing: border-box;
}

/* O caminho completo para vencer `main > ul.panel > section.secao-diagramada`,
   que declara `display: block` logo acima neste mesmo arquivo — (0,2,2) contra
   os (0,2,1) de um seletor curto. Sem isto o `align-items` ficava no computado
   sem efeito nenhum, porque a caixa continuava block: medido, o conteúdo
   colado a 10px do topo e 144px de vazio embaixo. */
main > ul.panel > section.secao-diagramada.fundo-img-section {
    display: flex;
    align-items: center;
}

/* A cortina que garante a leitura.
   Um `::before` e não um `filter` na seção: filtro escureceria o texto junto.
   Mais escuro embaixo, onde ficam subtítulo e chamada, e mais leve em cima,
   onde a foto ainda respira. */
section.secao-diagramada.fundo-img-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom,
                rgba(6, 15, 29, .58) 0%,
                rgba(6, 15, 29, .68) 55%,
                rgba(6, 15, 29, .78) 100%);
    z-index: 0;
    pointer-events: none;
}

/* Tudo o que a seção contém fica ACIMA da cortina. */
section.secao-diagramada.fundo-img-section > * {
    position: relative;
    z-index: 1;
}

/* Complemento e chamada vazios não reservam espaço.
   O `resp.css` já escondia os dois, mas só sob `.no-img-fundo` — ou seja,
   justamente NÃO na página que tem foto no topo. O `<p>` vazio ficava com
   altura 0 e margem 26px, e essa margem desequilibrava o centro: 59px de
   respiro acima do título contra 95px abaixo. Vale para a página com foto e
   sem ela: um elemento sem texto não deve ocupar lugar. */
section.secao-diagramada .head .head-canal h2:empty,
section.secao-diagramada .head .head-canal p:empty {
    display: none;
}

/* O espaçamento entre as linhas do topo passa a ser `gap`, e não margem.
   Com margens sobrava sempre um resíduo embaixo — e zerar o `:last-child` não
   resolvia, porque o último filho é justamente o `<p>` vazio que acabou de ser
   escondido: `display: none` tira do desenho, não da contagem de irmãos. O
   `.head-canal` já é flex em coluna, então o `gap` faz o mesmo trabalho sem
   deixar sobra em nenhuma das pontas. */
section.secao-diagramada .head .head-canal {
    gap: 10px;
}

section.secao-diagramada .head .head-canal > * {
    margin-top: 0;
    margin-bottom: 0;
}

/* ── O texto sobre a foto ─────────────────────────────────────────────────── */
section.secao-diagramada.fundo-img-section .head-canal h1 {
    color: #ffffff;
    text-shadow: 0 2px 18px rgba(6, 15, 29, .55);
}

/* O subtítulo já tem cor própria (`#DDD`) vinda da regra da família. O que muda
   aqui é o branco pleno e uma sombra LARGA e suave (14px de desfoque), que
   sustenta o peso 300 da fonte sobre a foto sem desenhar contorno.

   Não confundir com a sombra dura que a regra da família tinha (`0 1px 2px
   #000`) e que saiu: aquela valia para todas as páginas de segmento, inclusive
   as sem foto, onde não havia o que sustentar. Esta só existe com foto. */
section.secao-diagramada.fundo-img-section .head-canal h2 {
    color: rgba(255, 255, 255, .92);
    text-shadow: 0 2px 14px rgba(6, 15, 29, .6);
}

section.secao-diagramada.fundo-img-section .head-canal p {
    color: rgba(255, 255, 255, .82);
    text-shadow: 0 1px 10px rgba(6, 15, 29, .5);
}

/* O "← Notícias" que abre a faixa. */
section.secao-diagramada.fundo-img-section .topo-origem,
section.secao-diagramada.fundo-img-section .topo-origem span {
    color: var(--ref-gold-strong, #e0b355);
}

section.secao-diagramada.fundo-img-section .topo-origem:hover span {
    color: #ffffff;
}

/* A linha de crédito, quando o gestor a põe nesta mesma seção.
   `pagina_encaixe_meta()` escolhe os padrões claros olhando a COR de fundo da
   seção; com foto não há cor para ele ler, e ele cairia nos tons escuros. As
   variáveis abaixo dão a resposta que ele não tem como calcular. */
section.secao-diagramada.fundo-img-section .meta-artigo {
    --meta-txt: #ffffff;
    --meta-suave: rgba(255, 255, 255, .74);
    --meta-destaque: #e0b355;
}

/* ═══════════════════════════════════════════════════════════════════════════
   A FAIXA PARA DE PINTAR QUANDO A SEÇÃO JÁ PINTA

   Medido em /pastorais/pastoral-da-catequese (template Página Landing): a seção
   ia de 68 a 449px COM a foto, e a `.head` de dentro, de 102 a 415px, cobria
   tudo com um azul opaco. Da foto sobravam duas tiras de 34px — o padding da
   seção —, em cima e embaixo. Não era a foto "atrás do título": era a foto
   espiando por trás de uma tarja.

   A causa são três regras escritas para as páginas de SEGMENTO, onde a `.head`
   É a faixa e não há foto na seção:

       body.produtos.segmentos main.canal .head            → azul opaco
       …  .head:not(.no-img-fundo)::before                 → uma segunda cortina
       …  .head::after                                     → a régua dourada

   Numa seção com foto as três sobram, porque a seção já faz as três coisas —
   a foto, a cortina do `::before` acima, e agora a régua no `::after` daqui.
   Duas cortinas empilhadas (.58→.78 da seção mais .55→.88 da faixa) também
   escureciam demais a parte de baixo.

   Então a `.head` para de pintar; quem pinta é a seção. Nada muda de lugar:
   a altura e o espaçamento continuam os mesmos, só a tinta sai.

   O escopo é `.fundo-img-section .head` — sem foto na seção, a faixa azul das
   páginas de segmento continua exatamente como está.
   ═══════════════════════════════════════════════════════════════════════════ */

/* (0,5,2) contra os (0,4,2) da regra que pinta — a classe da seção é o que
   desempata, e é justamente ela que diz "aqui já há foto". */
body.produtos.segmentos main.canal .fundo-img-section .head {
    background-color: transparent;
}

/* `content: none` apaga o pseudo-elemento inteiro, ao contrário de um
   `background: none`, que o deixaria no ar ocupando a caixa.

   Empate de especificidade com as regras originais (0,5,3): quem decide é a
   ordem, e estas vêm depois no arquivo. */
body.produtos.segmentos main.canal .fundo-img-section .head::before,
body.produtos.segmentos main.canal .fundo-img-section .head::after {
    content: none;
}

/* A régua dourada muda de dono junto com o resto: no pé da SEÇÃO, onde a faixa
   de fato termina (449px), e não no pé da `.head` (415px) — ali ela virava um
   risco solto no meio da foto, com 34px de imagem ainda por baixo.

   `z-index: 2` porque os filhos da seção já estão no 1: no 0 ela ficaria sob a
   cortina, no 1 disputaria a ordem de pintura com o conteúdo. */
body.produtos.segmentos section.secao-diagramada.fundo-img-section::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 3px;
    z-index: 2;
    pointer-events: none;
    background: linear-gradient(90deg, var(--ref-gold) 0 120px, rgba(201, 162, 75, .18) 120px);
}

@media (max-width: 766px) {

    section.secao-diagramada.fundo-img-section {
        min-height: 220px;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Subtítulo do artigo: sem sombra, e por isso com outra cor

   `.canal .head-canal h2` (site.css) dá ao complemento do título
   `color: #DDD` + `text-shadow: 0 1px 2px #000`. Os dois valores são de quando
   a faixa era sempre uma FOTO escura ocupando a largura da tela: texto quase
   branco, e a sombra separando-o da imagem.

   No artigo por template a faixa não tem foto — o fundo é a cor da seção, clara
   (#e2e8f0 no artigo medido). Ali o par não faz mais sentido nenhum: #DDD sobre
   #e2e8f0 dá 1,06:1 de contraste, e o que estava desenhando a letra era a
   sombra, não a cor. Tirar só a sombra apagaria o subtítulo da página.

   Então os dois saem juntos: a cor passa a ser o mesmo navy do resto do texto
   secundário desta página (o cargo do autor, na linha de crédito logo abaixo),
   que sobre o fundo claro dá 7:1.

   `.no-img-fundo` é a classe que o próprio PHP põe quando NÃO existe
   `midia/…/fundo.webp` para a página. Onde a foto existe, o desenho antigo
   continua valendo — lá o texto claro com sombra é o que se lê sobre a imagem.
   ═══════════════════════════════════════════════════════════════════════════ */
body.artigo section.secao-diagramada .head.no-img-fundo .head-canal h2 {
    text-shadow: none;
    color: var(--ref-navy-600, #1d4b79);
}

/* ═══════════════════════════════════════════════════════════════════════════
   Artigo por template no celular: alinhamento e respiro

   Medido em /noticias/2025/08/diocese-de-criciuma-…, a 390px de tela. Entre o
   fim do subtítulo e a linha de crédito havia 81px de nada, somados de quatro
   heranças que nunca souberam uma da outra:

     `.canal .blococapa_2..5 { padding: 30px 0 }`   (resp.css, ≤766) → 30 + 30
     `.artigo .head { padding-top: 34px !important }` (resp.css, ≤766) → 34
     `.head { padding-bottom: 10px }`                                 → 10
     margem entre os widgets                                          →  5

   E o título saía centralizado, enquanto o texto do artigo logo abaixo é
   alinhado à esquerda — `.canal .head-canal h1 { text-align: center }` a ≤500,
   que alcança o artigo porque o `<main>` das páginas por template também é
   `.canal`.

   Tudo aqui é escopado em `body.artigo section.secao-diagramada`: as páginas de
   canal e as views legadas continuam com o desenho que têm.
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 766px) {

    /* ── Alinhamento à esquerda ─────────────────────────────────────────── */
    /* (0,3,3) contra os (0,2,1) do resp.css: vence sem depender de ordem. */
    body.artigo section.secao-diagramada .head .head-canal,
    body.artigo section.secao-diagramada .head .head-canal h1,
    body.artigo section.secao-diagramada .head .head-canal h2,
    body.artigo section.secao-diagramada .head .head-canal p {
        text-align: left;
        margin-left: 0;
        margin-right: 0;
    }

    /* ── Respiro ────────────────────────────────────────────────────────── */
    /* Os 60px de padding vertical do widget serviam ao layout antigo, em que
       cada setor era uma ilha. Aqui os widgets de uma coluna já se separam por
       margem, e a seção tem o recuo dela. */
    body.artigo section.secao-diagramada .capa-coluna>section {
        padding-top: 0;
        padding-bottom: 0;
    }

    /* O `!important` do resp.css só cede a outro `!important`. O respiro do
       alto da faixa passa a ser este, e não os 34px de lá. */
    body.artigo section.secao-diagramada .head {
        padding-top: 18px !important;
        padding-bottom: 0;
    }

    body.artigo section.secao-diagramada .head .head-canal {
        margin-top: 0;
        margin-bottom: 0;
    }

    body.artigo section.secao-diagramada .head .head-canal h1 {
        margin-top: 0;
    }

    /* A linha de crédito encosta no subtítulo o suficiente para se ler como
       parte do mesmo bloco, e se separa do texto do artigo. */
    body.artigo section.secao-diagramada .meta-artigo {
        margin-top: 10px;
        margin-bottom: 16px;
    }

    /* O corpo do texto tinha 40px de margem no alto, somados aos 20px de recuo
       da seção: 60px de branco entre a faixa do título e a primeira frase. Os
       20px da seção bastam — e continuam valendo, porque a margem some, não o
       recuo. */
    body.artigo section.secao-diagramada .texto {
        margin-top: 0;
    }
}

/* ── Bloco "thin": container com o teto mais baixo ───────────────────────────
   A opção de largura do bloco (?s=capas / ?s=templates) tem três valores:
   cheia, container e thin. No HTML, `thin` sai como `class="panel container
   bloco-thin"` — ou seja, É o container, com a classe extra só para baixar o
   `max-width`.

   Somar em vez de substituir herda de graça a margem automática, o recuo
   lateral e todos os breakpoints que o container já resolve; uma largura
   independente teria de repetir isso e sairia do lugar na primeira vez que
   alguém mexesse no container.

   Especificidade (0,2,0) de propósito: o `resp.css` define
   `.container { max-width: 1180px }` dentro de uma media query, e (0,1,0) ali
   dependeria só da ordem de carregamento para vencer. Com as duas classes, esta
   regra ganha em qualquer ordem.

   E é justamente por ganhar sempre que ela PRECISA da media query. O container
   deste projeto não é 1180px em toda tela — o resp.css o prende em 767px entre
   767 e 1199. Sem o recorte, os 950px venciam esse 767 e o bloco "thin" saía
   MAIS LARGO que o container em tablet: o contrário do que o nome promete.
   Medido: 950px contra 767px em telas de 1024 e 768.

   Acima de 1200px o container é 1180 e há folga real para apertar; abaixo disso
   ele já é mais estreito que 950 e o thin simplesmente o acompanha. */
@media (min-width: 1200px) {
    .container.bloco-thin {
        max-width: 950px;
    }
}

/* ── Lista com ícones ────────────────────────────────────────────────────────
   Bloco do editor de conteúdo para contatos, redes e links: cada linha tem um
   ícone próprio e pode virar link. Quatro formatos para a mesma informação.

   Tudo o que o gestor ajusta chega como variável no `style` do bloco, porque
   varia POR BLOCO — não há classe que dê conta de "16px aqui, 22px ali" sem
   gerar uma folha de estilo por artigo.

   As COR-variáveis são omitidas quando o gestor não escolheu, e é o segundo
   argumento do `var()` que então vale: `inherit` para a cor do site. Fixar um
   cinza aqui faria "padrão" significar "o cinza que o programador gostou". */
.art-lic {
    --lic-icone: 16px;
    --lic-fonte: 15px;
    --lic-titulo: 18px;
    --lic-peso-titulo: 700;
    --lic-peso-texto: 400;
    --lic-espaco: 10px;
    margin: 18px 0;
}

/* A repetição de `.art-lic` no seletor não é descuido: é o que faz a escolha do
   gestor ganhar das regras herdadas do site antigo, que alcançam estas mesmas
   tags por descendência e vencem uma classe sozinha.

   `main .texto h3` (site.css) impunha 20px/600 e comia o tamanho e o peso do
   título — a COR passava, porque aquela regra não mexe em cor, e foi isso que
   fez o defeito parecer parcial. `.texto ul` (view.css) devolvia marcadores,
   recuo de 20px e largura de 90% à lista.

   Com `.art-lic .art-lic__titulo` o peso do seletor sobe de (0,1,0) para
   (0,2,0) e passa à frente de ambas, sem `!important` — que só empurraria o
   problema para o próximo que precisasse sobrescrever. */
.art-lic .art-lic__titulo {
    margin: 0 0 10px;
    font-size: var(--lic-titulo);
    font-weight: var(--lic-peso-titulo);
    color: var(--lic-cor-titulo, inherit);
    line-height: 1.3;
    /* `main .texto h3` também aperta as letras em -1px; num título de 12px
       escolhido pelo gestor isso encavala as palavras. */
    letter-spacing: normal;
}

.art-lic .art-lic__lista {
    list-style: none;
    margin: 0;
    padding: 0;
    width: auto;
    font-size: inherit;
    font-weight: inherit;
}

.art-lic .art-lic__item {
    display: flex;
    align-items: baseline;
    gap: 10px;
    font-size: var(--lic-fonte);
    font-weight: var(--lic-peso-texto);
    color: var(--lic-cor-texto, inherit);
    line-height: 1.55;
}

/* Largura fixa alinha os textos numa coluna só, mesmo com ícones de desenhos
   diferentes — sem isso, o "telefone" (estreito) e o "instagram" (largo)
   empurrariam cada linha para um lugar. */
.art-lic__icone {
    flex: 0 0 auto;
    width: calc(var(--lic-icone) + 6px);
    font-size: var(--lic-icone);
    text-align: center;
    /* `baseline` num ícone alinha pela caixa da fonte e o deixa alto demais;
       um empurrãozinho o assenta na linha do texto. */
    position: relative;
    top: 1px;
}

.art-lic__texto {
    min-width: 0;
}

/* Sem sublinhado: quem avisa que a linha é clicável é o realce do item inteiro,
   logo abaixo. Traço embaixo do texto MAIS o realce da caixa seriam dois avisos
   para a mesma coisa.

   Os estados vão nomeados, e a classe do bloco entra na frente, porque o
   `a:hover{text-decoration:underline}` do bootstrap tem peso (0,1,1) e devolvia
   o sublinhado no exato momento em que o realce aparecia. */
.art-lic .art-lic__link,
.art-lic .art-lic__link:hover,
.art-lic .art-lic__link:focus,
.art-lic .art-lic__link:active,
.art-lic .art-lic__link:visited {
    color: var(--lic-link, inherit);
    font-weight: inherit;
    text-decoration: none;
}

/* ── Item com link ───────────────────────────────────────────────────────
   Quem reage ao mouse é o ITEM, não o texto: em pílula, grade e cartões o
   item já é uma caixa, e realçar só as palavras dentro dela deixava metade do
   elemento morto sob o cursor.

   A classe `--link` vem do renderizador (BlockRenderer), e não de um `:has(a)`
   aqui: o realce muda a área de clique junto, e isso não pode depender de o
   navegador do visitante ter `:has()`. */
.art-lic__item--link {
    position: relative;
    cursor: pointer;
    transition: box-shadow .18s ease, background-color .18s ease,
        border-color .18s ease, transform .18s ease;
}

/* A área de clique passa a ser o item todo. Sem isto o realce mentiria:
   a caixa acenderia sob o cursor e só as palavras levariam ao destino. */
.art-lic__item--link .art-lic__link::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
}

.art-lic__item--link:hover,
.art-lic__item--link:focus-within {
    box-shadow: 0 8px 20px -10px rgba(15, 23, 42, .45);
}

/* O ícone assume a cor do link no realce — é o destaque mais barato que existe
   e reaproveita a cor que o gestor já escolheu para o bloco. */
.art-lic__item--link:hover .art-lic__icone,
.art-lic__item--link:focus-within .art-lic__icone {
    color: var(--lic-link, inherit);
}

/* ── Formatos ────────────────────────────────────────────────────────────── */

/* Lista: um item por linha. O espaçamento aqui é o vão ENTRE as linhas — não há
   caixa para receber recuo interno. */
.art-lic--lista .art-lic__item+.art-lic__item {
    margin-top: calc(var(--lic-espaco) * .7);
}

/* O recuo vale para TODOS os itens, com link ou sem: dá corpo ao realce dos que
   têm link sem criar duas alturas de linha na mesma lista. As margens negativas
   devolvem o recuo horizontal, então o texto continua alinhado à margem. */
.art-lic--lista .art-lic__item {
    padding: 5px 10px;
    margin-left: -10px;
    margin-right: -10px;
    border-radius: 8px;
}

.art-lic--lista .art-lic__item--link:hover,
.art-lic--lista .art-lic__item--link:focus-within {
    background: var(--lic-fundo, rgba(15, 23, 42, .045));
}

/* Pílulas: lado a lado, para poucos itens curtos (redes sociais, tags). */
.art-lic--pilula .art-lic__lista {
    display: flex;
    flex-wrap: wrap;
    gap: calc(var(--lic-espaco) * .8);
}

/* Pílulas Line: mesma pílula, uma por linha. Existe porque com textos de
   comprimentos diferentes — um e-mail longo ao lado de um telefone curto — a
   quebra automática do formato acima deixa linhas com uma pílula e linhas com
   três, e o bloco perde a leitura de lista.

   `align-items:flex-start` é o que segura o desenho: sem ele o `stretch` do
   flex em coluna esticaria cada pílula à largura toda, e pílula esticada deixa
   de ser pílula. */
.art-lic--pilulaline .art-lic__lista {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: calc(var(--lic-espaco) * .8);
}

/* O desenho da pílula é um só; o que muda entre os dois formatos é o arranjo
   da lista. Separar em duas regras iguais faria a próxima mudança de borda ou
   de raio precisar ser lembrada em dois lugares. */
.art-lic--pilula .art-lic__item,
.art-lic--pilulaline .art-lic__item {
    align-items: center;
    gap: 8px;
    /* O recuo acompanha o espaçamento, com piso: abaixo de ~6px a pílula
       encosta no texto e deixa de parecer pílula. */
    padding: calc(6px + var(--lic-espaco) * .2) calc(12px + var(--lic-espaco) * .4);
    border: 1px solid rgba(0, 0, 0, .12);
    border-radius: 999px;
    background: var(--lic-fundo, rgba(0, 0, 0, .02));
}

.art-lic--pilula .art-lic__icone,
.art-lic--pilulaline .art-lic__icone {
    top: 0;
}

.art-lic--pilula .art-lic__item--link:hover,
.art-lic--pilula .art-lic__item--link:focus-within,
.art-lic--pilulaline .art-lic__item--link:hover,
.art-lic--pilulaline .art-lic__item--link:focus-within {
    border-color: rgba(15, 23, 42, .28);
}

/* Grade: duas colunas em tela larga, uma no celular. */
.art-lic--grade .art-lic__lista {
    display: grid;
    grid-template-columns: 1fr;
    gap: calc(var(--lic-espaco) * .8) calc(var(--lic-espaco) * 2);
}

.art-lic--grade .art-lic__item {
    background: var(--lic-fundo, transparent);
    /* O recuo vale mesmo sem fundo: ele afasta o item do vizinho de coluna e é
       o que impede o texto de encostar na borda quando há cor. */
    padding: calc(var(--lic-espaco) * .35) calc(var(--lic-espaco) * .5);
    border-radius: 8px;
}

/* Cartões: cada item numa caixa — para quando o texto é mais longo. */
.art-lic--cards .art-lic__lista {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--lic-espaco);
}

.art-lic--cards .art-lic__item {
    align-items: flex-start;
    padding: calc(8px + var(--lic-espaco) * .4) calc(10px + var(--lic-espaco) * .4);
    border: 1px solid rgba(0, 0, 0, .1);
    border-radius: 10px;
    background: var(--lic-fundo, rgba(0, 0, 0, .015));
}

.art-lic--cards .art-lic__icone {
    top: 2px;
}

.art-lic--cards .art-lic__item--link:hover,
.art-lic--cards .art-lic__item--link:focus-within {
    border-color: rgba(15, 23, 42, .24);
}

/* Na grade não há borda para escurecer: o realce é o fundo aparecendo. Quando
   o gestor escolheu uma cor de fundo, ela já está lá — então o que sobe é a
   sombra, e o fundo só entra no lugar do `transparent` do padrão. */
.art-lic--grade .art-lic__item--link:hover,
.art-lic--grade .art-lic__item--link:focus-within {
    background: var(--lic-fundo, rgba(15, 23, 42, .045));
}

/* O levantar é só nas caixas: numa lista, a linha subindo sob o cursor parece
   defeito. E some para quem pediu menos movimento no sistema. */
@media (prefers-reduced-motion: no-preference) {

    .art-lic--pilula .art-lic__item--link:hover,
    .art-lic--pilulaline .art-lic__item--link:hover,
    .art-lic--grade .art-lic__item--link:hover,
    .art-lic--cards .art-lic__item--link:hover {
        transform: translateY(-1px);
    }
}

@media (min-width: 700px) {
    .art-lic--grade .art-lic__lista {
        grid-template-columns: 1fr 1fr;
    }

    .art-lic--cards .art-lic__lista {
        grid-template-columns: 1fr 1fr;
    }
}

/* Numa coluna estreita (bloco 30% de um 70/30) a grade e os cartões voltam a
   uma coluna: duas ali espremeriam o texto a três palavras por linha. */
.art-coluna .art-lic--grade .art-lic__lista,
.art-coluna .art-lic--cards .art-lic__lista {
    grid-template-columns: 1fr;
}

/* ═══════════════════════════════════════════════════════════════════════════
   PÁGINA DE HOMILIAS — /homilia-dominical

   Um arquivo de vídeos semanais, não uma capa de jornal. A diferença manda no
   desenho inteiro desta página:

     · todos os cartões têm o mesmo peso. O `lado-mascara` promove o primeiro
       item a manchete de largura total, e ali isso desalinhava a grade: a
       homilia mais recente ocupava os 992px e as duas seguintes ficavam em
       cartões de 230px, deixando dois terços da linha vazios. Numa coleção
       cronológica não existe "a mais importante" — existe a mais recente, e a
       ordem já diz isso;

     · a proporção é 16/9. As miniaturas são quadros de vídeo, e o 4/3 do
       formato genérico cortava as laterais de todas elas;

     · o topo encolhe. Os 500px de `.canal .head` foram desenhados para a foto
       de uma comunidade; aqui empurravam o primeiro cartão para fora da tela.

   Tudo abaixo é escopado em `main.canal.homilias` ou em `.homilias-lista`. As
   demais páginas de canal (/noticias, /contato, /comunidades) compartilham
   `.canal .head` e `.bloco-lado-mascara` e não podem ser alcançadas daqui.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── O topo ──────────────────────────────────────────────────────────────── */
main.canal.homilias .head {
    height: auto;
    min-height: 300px;
    position: relative;
    padding: 92px 0 44px;
    overflow: hidden;
}

/* Véu sobre a foto. O título, o complemento e a chamada são todos claros, e a
   imagem de fundo é escolhida no painel — sem o véu, uma foto clara apagaria os
   três de uma vez. Mesma técnica do topo das comunidades. */
main.canal.homilias .head:not(.no-img-fundo)::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(6, 15, 29, .74) 0%, rgba(6, 15, 29, .58) 45%, rgba(6, 15, 29, .86) 100%);
}

main.canal.homilias .head-canal {
    position: relative;
    z-index: 1;
}

/* Os 100px de recuo do `.canal .head-canal h1` empurravam o bloco para baixo
   dentro de uma caixa que JÁ centraliza verticalmente — o texto acabava no
   terço de baixo. Com a altura menor, o recuo não tem mais o que compensar. */
main.canal.homilias .head-canal h1 {
    margin-top: 0;
    margin-bottom: 10px;
    max-width: 620px;
}

main.canal.homilias .head-canal h2 {
    max-width: 560px;
    margin: 0;
}

/* Era `color: #777` — cinza médio, herdado de quando esta linha ficava sobre
   fundo claro. Sobre a foto escura do topo ela simplesmente não existia. */
main.canal.homilias .head-canal p {
    margin-top: 16px;
    max-width: 560px;
    font-size: .82em;
    color: rgba(233, 240, 248, .74);
}

main.canal.homilias .head-canal h2:empty,
main.canal.homilias .head-canal p:empty {
    display: none;
}

/* ── O corpo ─────────────────────────────────────────────────────────────── */
main.canal.homilias section .texto {
    padding-bottom: 56px;
}

/* ── A barra de filtro ───────────────────────────────────────────────────── */
/* Um cartão claro sobre o fundo cinza da página, alinhado à mesma coluna dos
   cartões. Os dois seletores e as ações numa linha só; embaixo de 620px eles
   empilham.

   ATENDE DUAS PÁGINAS: /homilia-dominical e /ao-vivo. É o mesmo componente —
   mesma altura, mesmos controles, mesma voz —, e por isso os seletores estão
   agrupados em vez de repetidos: quem reescrever a barra reescreve as duas de
   uma vez, que é o que se espera de um controle que o visitante lê como sendo
   o mesmo. O que difere entre as páginas (a grade, os cartões) está em blocos
   próprios, cada um no seu lugar. */
.homilias-filtro,
.aovivo-filtro {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 14px 18px;
    margin: 30px 0 18px;
    padding: 16px 18px;
    background: var(--ref-white);
    border: 1px solid var(--ref-line);
    border-radius: var(--ref-radius);
    box-shadow: var(--ref-shadow-sm);
}

.homilias-filtro-campo,
.aovivo-filtro-campo {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 172px;
}

.homilias-filtro-campo label,
.aovivo-filtro-campo label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--ref-muted);
}

/* `appearance: none` mais a seta desenhada em `background-image`: o <select>
   nativo do Windows destoa do resto dos controles do site, e a seta padrão não
   acompanha a cor da marca. O SVG vai embutido em data: URI para não custar uma
   requisição. */
.homilias-filtro select,
.aovivo-filtro select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    width: 100%;
    padding: 10px 38px 10px 13px;
    border: 1px solid var(--ref-line);
    border-radius: 10px;
    background-color: var(--ref-white);
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%235d6b7a' d='M1.4 0 6 4.6 10.6 0 12 1.4 6 7.4 0 1.4z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    font: inherit;
    font-size: 14.5px;
    color: var(--ref-ink);
    cursor: pointer;
    transition: border-color .18s ease, box-shadow .18s ease;
}

.homilias-filtro select:hover,
.aovivo-filtro select:hover {
    border-color: #cdd6e2;
}

.homilias-filtro select:focus-visible,
.aovivo-filtro select:focus-visible {
    outline: none;
    border-color: var(--ref-blue);
    box-shadow: 0 0 0 3px rgba(45, 123, 203, .18);
}

/* Sem ano escolhido não há mês a escolher — o `homilias-filtro.js` desabilita o
   seletor, e ele precisa PARECER desabilitado. */
.homilias-filtro select:disabled,
.aovivo-filtro select:disabled {
    background-color: #f7f9fb;
    color: #9aa6b4;
    cursor: not-allowed;
}

.homilias-filtro-acoes,
.aovivo-filtro-acoes {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-left: auto;
}

.homilias-filtro-ok,
.aovivo-filtro-ok {
    padding: 10px 24px;
    border: 0;
    border-radius: 999px;
    background: var(--ref-navy-700);
    color: var(--ref-white);
    font: inherit;
    font-size: 14.5px;
    font-weight: 500;
    cursor: pointer;
    transition: background .18s ease, box-shadow .18s ease;
}

.homilias-filtro-ok:hover,
.aovivo-filtro-ok:hover {
    background: var(--ref-navy-600);
    box-shadow: 0 10px 22px -14px rgba(15, 23, 42, .8);
}

.homilias-filtro-ok:focus-visible,
.aovivo-filtro-ok:focus-visible {
    outline: 2px solid var(--ref-blue);
    outline-offset: 3px;
}

.homilias-filtro-limpar,
.aovivo-filtro-limpar {
    font-size: 13.5px;
    color: var(--ref-muted);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: color .18s ease, border-color .18s ease;
}

.homilias-filtro-limpar:hover,
.aovivo-filtro-limpar:hover {
    color: var(--ref-navy-700);
    border-bottom-color: currentColor;
}

@media (max-width: 620px) {

    .homilias-filtro-campo,
    .aovivo-filtro-campo {
        min-width: 0;
        flex: 1 1 100%;
    }

    .homilias-filtro-acoes,
    .aovivo-filtro-acoes {
        margin-left: 0;
        width: 100%;
        justify-content: space-between;
    }
}

/* ── A linha de resumo ───────────────────────────────────────────────────── */
/* Diz quantas homilias há e de quando. Sem ela, três cartões depois de filtrar
   são indistinguíveis de um arquivo que só tem três homilias. */
.homilias-resumo {
    margin: 0 0 18px;
    font-size: 13.5px;
    color: var(--ref-muted);
}

.homilias-resumo b {
    font-weight: 600;
    color: var(--ref-navy-700);
}

.homilias-resumo--vazio {
    padding: 26px 20px;
    background: var(--ref-white);
    border: 1px dashed var(--ref-line);
    border-radius: var(--ref-radius);
    text-align: center;
    font-size: 15px;
}

/* ── A grade ─────────────────────────────────────────────────────────────── */
/* O grid mora no `.listagem-trechos`, e não em cada `.display-itens`.
 *
 * O "carregar mais" acrescenta uma NOVA `<div class='display-itens …'>` por
 * leva. Se cada uma fosse o próprio grid, a segunda leva começaria uma grade
 * independente: a última linha da primeira ficaria pela metade e a seguinte
 * recomeçaria do zero, com uma costura visível no meio da lista. Com o grid no
 * pai e as levas em `display: contents`, os cartões de todas elas entram na
 * MESMA grade e a lista cresce continuamente. */
.homilias-lista .listagem-trechos {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 22px;
}

.homilias-lista .listagem-trechos>.display-itens {
    display: contents;
}

/* A folga entre trechos deixa de existir junto com os trechos. */
.homilias-lista .listagem-trechos>div+div {
    margin-top: 0;
}

/* ── Os cartões ──────────────────────────────────────────────────────────── */
/* Todos iguais: o destaque de largura total do `lado-mascara` é desfeito aqui.
   A especificidade precisa vencer `.bloco-lado-mascara article.FirstArticles
   .lado-a-lado` (0,3,1), daí o `main.canal.homilias` na frente. */
main.canal.homilias .homilias-lista .bloco-lado-mascara article.lado-a-lado,
main.canal.homilias .homilias-lista .bloco-lado-mascara article.FirstArticles.lado-a-lado {
    grid-column: auto;
    aspect-ratio: 16 / 9;
    border-radius: 12px;
}

/* O `view.css` normaliza os formatos clássicos dentro de `.listagem-trechos`
   para o desenho de lista (foto em cima, texto embaixo). O `lado-mascara` é o
   oposto disso — texto SOBRE a foto — e três daquelas regras o desmontavam: a
   margem no `.conteudo` deslocava a caixa posicionada, e o `<a>` e a `.img-capa`
   voltavam ao fluxo. */
.homilias-lista .listagem-trechos article.lado-a-lado>a {
    display: block;
    position: absolute;
    inset: 0;
    z-index: 3;
}

.homilias-lista .listagem-trechos article.lado-a-lado .img-capa {
    position: absolute;
    inset: 0;
    width: auto;
    aspect-ratio: auto;
    border-radius: 0;
}

.homilias-lista .listagem-trechos article.lado-a-lado .conteudo {
    margin-top: 0;
}

/* Título e chamada claros: `.listagem-trechos .chamada { color: #4f5b6b }` foi
   escrito para texto sobre fundo branco, e aqui o fundo é a foto. */
main.canal.homilias .homilias-lista .bloco-lado-mascara article.lado-a-lado .conteudo .titulo,
main.canal.homilias .homilias-lista .bloco-lado-mascara article.FirstArticles.lado-a-lado .conteudo .titulo {
    font-size: 16px;
    font-weight: 600;
    -webkit-line-clamp: 2;
}

/* A chamada NÃO volta nos cartões, e é uma decisão de espaço, não de gosto.
 *
 * Num 16/9 de ~317px o cartão tem 178px de altura. Título em duas linhas mais
 * chamada em duas ocupam os 100px de baixo — e o play, que agora fica no centro
 * geométrico, cairia a 89px, encostando na primeira linha do título. Era esse o
 * empilhamento que a primeira versão desta grade produzia.
 *
 * Com só o título, o texto termina por volta dos 60px e o play tem os 27px de
 * raio que precisa, folgados. O resumo da homilia continua a um clique. */
main.canal.homilias .homilias-lista .bloco-lado-mascara article.lado-a-lado .conteudo .chamada,
main.canal.homilias .homilias-lista .bloco-lado-mascara article.FirstArticles.lado-a-lado .conteudo .chamada {
    display: none;
}

/* A data da homilia é o próprio título, e o degradê precisa deixá-la nítida sem
   escurecer a miniatura inteira. */
main.canal.homilias .homilias-lista .bloco-lado-mascara article.lado-a-lado .conteudo {
    padding: 14px 15px 13px;
}

/* ── O botão de carregar mais ────────────────────────────────────────────── */
/* A aparência vem do `view.css`, compartilhada com as listagens por template.
   Aqui só o respiro, que ali é medido para outro espaçamento de lista. */
.homilias-lista .listagem-mais-caixa {
    margin-top: 34px;
}

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

    main.canal.homilias .head {
        min-height: 240px;
        padding: 78px 0 34px;
    }

    /* Margem lateral no celular. Abaixo deste ponto o `.texto` das páginas de
       canal perde o contêiner centralizado e passa a ocupar a tela inteira: os
       cartões e a barra de filtro encostavam nas duas bordas, e um cartão de
       cantos arredondados colado na borda se lê como corte, não como cartão. Os
       15px são os mesmos que /noticias usa nesta largura. */
    main.canal.homilias section .texto {
        padding-left: 15px;
        padding-right: 15px;
    }

    .homilias-lista .listagem-trechos {
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
        gap: 16px;
    }

    .bloco-lado-mascara article.lado-a-lado .icon_play_over i {
        font-size: 42px;
    }
}


/* ═══════════════════════════════════════════════════════════════════════════
   PÁGINA DE UMA HOMILIA — /homilia-dominical/{ano}/{mes}/{slug}

   O vídeo no YouTube é a missa inteira; a homilia é um trecho dela, marcado no
   campo "Tempo" da edição. Daí o player próprio, e daí o selo de duração: a
   informação que decide se o visitante aperta o play é quanto dura a HOMILIA, e
   é a única que os controles do YouTube não dariam — eles anunciariam a missa.

   O que havia antes na faixa:

     · os controles eram três botões de 11px (`Play`, `Pause`, `Fullscreen`)
       centralizados sob o vídeo, mais um <input type=range> de 1px de altura.
       Liam-se como sobra de depuração, não como um player;
     · o bloco era dois `inline-block` de 55% e 40% alinhados pelo topo. Numa
       tela de 1440 o vídeo tinha 343px de altura e o texto 145: os 250px
       restantes da direita ficavam vazios;
     · o conteúdo da faixa começava em x=130 e o texto do artigo, logo abaixo,
       em x=345. Duas medidas diferentes na mesma página, uma sob a outra.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── A faixa ─────────────────────────────────────────────────────────────── */
.artigo .head.homilias {
    padding: 34px 20px 38px;
}

/* Flex em vez dos dois `inline-block`: some o espaço em branco entre as tags
   (que contava na largura), o texto centraliza na altura do vídeo e a coluna
   direita para de terminar no ar. O `align-items: center` é o que resolve o
   vazio de 250px — o texto passa a acompanhar o meio do quadro. */
.homilias .homilias-block {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 30px;
    /* Mesma medida do texto do artigo (750px) mais a coluna do vídeo. A faixa
       deixa de começar 215px à esquerda de onde o artigo começa. */
    max-width: 1120px;
}

.homilias .homilias-block .head-video,
.homilias .homilias-block .head-texto {
    /* zera os inline-block de 55/40% e os paddings laterais do view.css */
    display: block;
    width: auto;
    padding: 0;
    vertical-align: baseline;
}

.homilias .homilias-block .head-video {
    flex: 1 1 560px;
    min-width: 0;
}

.homilias .homilias-block .head-texto {
    flex: 1 1 330px;
    min-width: 0;
}

/* ── O quadro do vídeo ───────────────────────────────────────────────────── */
.homilia-player {
    position: relative;
}

.homilia-player .emb_iframe {
    position: relative;
    aspect-ratio: 16 / 9;
    width: 100%;
    height: auto;
    padding: 0;
    margin: 0;
    overflow: hidden;
    border-radius: 12px 12px 0 0;
    background: #000;
}

.homilia-player .emb_iframe iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

/* ── A barra de controles ────────────────────────────────────────────────── */
/* Encostada no quadro, como parte dele — e não uma fileira de botões soltos
   embaixo. É o que faz a barra se ler como controle DAQUELE vídeo. */
.homilia-controles {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 11px 14px;
    background: rgba(8, 20, 34, .92);
    border: 1px solid rgba(255, 255, 255, .09);
    border-top: 0;
    border-radius: 0 0 12px 12px;
}

.homilia-bt {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 50%;
    background: rgba(255, 255, 255, .06);
    color: #eaf1f9;
    font-size: 13px;
    cursor: pointer;
    transition: background .18s ease, border-color .18s ease, color .18s ease;
}

.homilia-bt:hover {
    background: rgba(255, 255, 255, .14);
    border-color: rgba(223, 184, 106, .55);
    color: var(--ref-white);
}

.homilia-bt:focus-visible {
    outline: 2px solid var(--ref-gold-strong);
    outline-offset: 2px;
}

/* O play é a ação principal da página inteira: dourado cheio, contra os
   secundários que são só contorno. */
.homilia-bt-play {
    background: var(--ref-gold);
    border-color: var(--ref-gold);
    color: var(--ref-navy-900);
    font-size: 14px;
}

.homilia-bt-play:hover {
    background: var(--ref-gold-strong);
    border-color: var(--ref-gold-strong);
    color: var(--ref-navy-900);
}

/* O ícone de play é um triângulo: opticamente ele parece deslocado à esquerda
   quando centralizado pela caixa. 2px o trazem para o centro aparente. */
.homilia-bt-play .fa-play {
    transform: translateX(1.5px);
}

.homilia-player--carregando .homilia-bt-play {
    opacity: .55;
    cursor: progress;
}

.homilia-tempo {
    flex: 0 0 auto;
    /* Tabular para o número não empurrar a barra a cada segundo: sem isto, a
       passagem de 9:59 para 10:00 desloca tudo o que vem depois. */
    font-variant-numeric: tabular-nums;
    font-size: 12.5px;
    line-height: 1;
    color: rgba(234, 241, 249, .82);
    min-width: 38px;
    text-align: center;
}

.homilia-tempo-total {
    color: rgba(234, 241, 249, .55);
}

/* ── O trilho ────────────────────────────────────────────────────────────── */
/* Era 1px de altura com bolinha de 10px — uma linha de cabelo que só o mouse
   preciso acertava. Aqui a área clicável tem 18px de altura (o próprio input),
   com o trilho de 4px desenhado dentro dela. */
.homilia-trilho {
    -webkit-appearance: none;
    appearance: none;
    flex: 1 1 auto;
    min-width: 0;
    height: 18px;
    margin: 0;
    padding: 0;
    background: transparent;
    cursor: pointer;
}

.homilia-trilho::-webkit-slider-runnable-track {
    height: 4px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .18);
}

.homilia-trilho::-moz-range-track {
    height: 4px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .18);
}

/* Só o Firefox sabe pintar o trecho já percorrido sem JavaScript. No Chrome a
   barra fica uniforme — é uma diferença que não custa informação, já que o
   tempo decorrido está escrito ao lado em números. */
.homilia-trilho::-moz-range-progress {
    height: 4px;
    border-radius: 999px;
    background: var(--ref-gold);
}

.homilia-trilho::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 13px;
    height: 13px;
    /* Centraliza o punho no trilho de 4px: (4 - 13) / 2 */
    margin-top: -4.5px;
    border: 0;
    border-radius: 50%;
    background: var(--ref-gold-strong);
    box-shadow: 0 1px 4px rgba(0, 0, 0, .55);
    transition: transform .15s ease;
}

.homilia-trilho::-moz-range-thumb {
    width: 13px;
    height: 13px;
    border: 0;
    border-radius: 50%;
    background: var(--ref-gold-strong);
    box-shadow: 0 1px 4px rgba(0, 0, 0, .55);
}

.homilia-trilho:hover::-webkit-slider-thumb {
    transform: scale(1.15);
}

.homilia-trilho:focus-visible {
    outline: 2px solid var(--ref-gold-strong);
    outline-offset: 3px;
    border-radius: 999px;
}

/* ── O selo de duração ───────────────────────────────────────────────────── */
.homilia-selo {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 12px;
    font-size: 12px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: rgba(223, 184, 106, .9);
}

/* ── A coluna de texto da faixa ──────────────────────────────────────────── */
.artigo .homilias .homilias-block .data {
    margin: 0 0 10px;
    font-size: 12.5px;
    letter-spacing: .05em;
    color: rgba(234, 241, 249, .62);
}

/* Era 24px em azul (#3fa5ff) com 20px de recuo acima — um título que se lia
   como link. O branco é o que diz "este é o título desta página"; o azul fica
   com os links de verdade. */
.artigo .homilias .homilias-block h1 {
    margin: 0;
    font-size: 30px;
    line-height: 1.18;
    font-weight: 600;
    color: var(--ref-white);
}

.artigo .homilias .homilias-block h2 {
    margin: 14px 0 0;
    font-size: 15px;
    line-height: 1.55;
    font-weight: 300;
    color: rgba(234, 241, 249, .78);
}

.artigo .homilias .homilias-block h2:empty {
    display: none;
}

/* ── Outras homilias ─────────────────────────────────────────────────────── */
/* Os mesmos cartões da listagem, para quem chega pela página de uma homilia
   reconhecer o formato ao voltar para /homilia-dominical. A grade e os cartões
   estão definidos no bloco da listagem e são reaproveitados aqui pelos mesmos
   seletores de `.listagem-trechos`; o que segue é só o que difere. */
.homilias-outras {
    margin-top: 44px;
}

.homilias-outras .outros-registros {
    margin: 0 0 20px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--ref-line);
    font-size: 22px;
    line-height: 1.2;
    font-weight: 600;
    color: var(--ref-navy-800);
}

/* `auto-fit` e não `auto-fill`, ao contrário da listagem: ali as colunas vazias
   guardam lugar para a leva seguinte do "carregar mais"; aqui a lista tem
   tamanho final, e duas homilias com uma coluna vazia à direita se leriam como
   cartão faltando. Com `auto-fit` as duas ocupam a linha. */
.homilias-outras .listagem-trechos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 18px;
}

.homilias-outras .listagem-trechos>.display-itens {
    display: contents;
}

.homilias-outras .bloco-lado-mascara article.lado-a-lado {
    grid-column: auto;
    aspect-ratio: 16 / 9;
    border-radius: 12px;
}

/* Mesmos consertos que a listagem faz sobre as normalizações do view.css: o
   `lado-mascara` põe o texto SOBRE a foto, e aquelas regras o devolviam ao
   desenho de lista. */
.homilias-outras .listagem-trechos article.lado-a-lado>a {
    display: block;
    position: absolute;
    inset: 0;
    z-index: 3;
}

.homilias-outras .listagem-trechos article.lado-a-lado .img-capa {
    position: absolute;
    inset: 0;
    width: auto;
    aspect-ratio: auto;
    border-radius: 0;
}

.homilias-outras .listagem-trechos article.lado-a-lado .conteudo {
    margin-top: 0;
    padding: 14px 15px 13px;
}

.homilias-outras .bloco-lado-mascara article.lado-a-lado .conteudo .titulo {
    font-size: 15px;
    font-weight: 600;
    -webkit-line-clamp: 2;
}

.homilias-outras .bloco-lado-mascara article.lado-a-lado .conteudo .chamada {
    display: none;
}

/* ── Telas estreitas ─────────────────────────────────────────────────────── */
@media screen and (max-width: 992px) {

    .homilias .homilias-block {
        gap: 22px;
    }

    .homilias .homilias-block .head-video,
    .homilias .homilias-block .head-texto {
        flex: 1 1 100%;
    }

    .artigo .homilias .homilias-block h1 {
        font-size: 25px;
    }
}

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

    .artigo .head.homilias {
        padding: 24px 15px 28px;
    }

    /* A barra encolhe antes de quebrar: os dois relógios cedem espaço ao trilho,
       que é o controle que precisa de largura. */
    .homilia-controles {
        gap: 9px;
        padding: 9px 10px;
    }

    .homilia-bt {
        width: 34px;
        height: 34px;
    }

    .homilia-tempo {
        min-width: 34px;
        font-size: 11.5px;
    }

    .artigo .homilias .homilias-block h1 {
        font-size: 21px;
    }

    .homilias-outras .listagem-trechos {
        grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
        gap: 14px;
    }
}


/* ═══════════════════════════════════════════════════════════════════════════
   PÁGINA AO VIVO — /ao-vivo e /ao-vivo?watch=y&v=ID

   A página tem DOIS estados e um só desenho:

     · sem `watch`, o `site.js` consulta o canal a cada 30s e, havendo
       transmissão no ar, injeta o player do YouTube dentro do `.head-canal`.
       Não havendo, injeta o aviso `.live-codigo-erro`;
     · com `watch`, o PHP monta `.video-watch-url` no corpo da página e o
       `site.js` o MOVE para o mesmo `.head-canal`, esvaziando o `<h1>`.

   Os dois estados terminam no mesmo lugar — o quadro de vídeo dentro da faixa
   escura do topo —, e é por isso que este bloco trata a faixa uma vez só.

   O que mudou em relação ao desenho anterior:

     · a faixa era `height: 500px` fixos (`.canal .head`), medidos para a foto
       de uma comunidade. Um player 16/9 numa coluna de 992px tem 558px: ele
       transbordava da própria faixa;
     · a grade era `.yvideo-row` — `inline-block` de 22% com `text-align:
       center` no pai e um `background-size: 170%` que ampliava a miniatura em
       70% para esconder as tarjas pretas do `hqdefault`. O corte saía por
       aproximação e cada linha da grade tinha uma altura;
     · a paginação era numerada, de 4 em 4, com TODAS as páginas listadas em
       fila — hoje são 265 transmissões, ou 67 links de página.

   Tudo abaixo é escopado em `main.canal.aovivo` ou em `.aovivo-lista`. As
   demais páginas de canal compartilham `.canal .head` e `.bloco-lado-mascara`
   e não podem ser alcançadas daqui.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── A faixa do topo ─────────────────────────────────────────────────────── */
/* Altura pelo conteúdo, com piso: vazia ela não pode virar uma tarja, e com o
   player dentro ela precisa crescer. O `.canal .head` já é flex centralizado —
   o que muda aqui é só a medida. */
main.canal.aovivo .head {
    height: auto;
    min-height: 260px;
    position: relative;
    padding: 88px 0 40px;
    overflow: hidden;

    /* A FAIXA PINTA A SI MESMA, e isto não é decoração — é o que torna a página
       legível.
     *
       O `.canal .head` do site.css deixou de ter cor de fundo de propósito
       (quem pinta é a imagem escolhida no painel), e o canal Ao vivo não tem
       `midia/…/fundo.webp`: ele nasce com a classe `no-img-fundo` e fundo
       transparente. Só que TUDO o que vai dentro desta faixa é claro — o
       título, o selo de status e a legenda da transmissão aberta —, porque o
       normal é haver foto escura por baixo. Sem foto, era branco sobre o cinza
       da página: o `<h1>Ao vivo</h1>` sumia por completo.

       A cor entra como `background-color`, e não como `background`, para não
       apagar o `background-image` que o `viewCanalAoVivo.php` escreve no
       atributo `style` quando a imagem existe. Havendo foto, esta cor fica
       embaixo dela e não aparece; não havendo, é ela que segura o texto. */
    background-color: var(--ref-navy-900);
}

/* Sem foto, um pouco de relevo. Chapado, o azul-marinho de 260px de altura vira
   uma tarja; o degradê dá a mesma profundidade que a foto daria. */
main.canal.aovivo .head.no-img-fundo {
    background-image: linear-gradient(160deg, var(--ref-navy-800) 0%, var(--ref-navy-950) 78%);
}

/* Véu sobre a foto de fundo, se houver. Título, complemento e chamada são todos
   claros, e a imagem é escolhida no painel — sem o véu, uma foto clara apagaria
   os três de uma vez. Mesma técnica do topo das homilias. */
main.canal.aovivo .head:not(.no-img-fundo)::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(6, 15, 29, .78) 0%, rgba(6, 15, 29, .6) 45%, rgba(6, 15, 29, .88) 100%);
}

main.canal.aovivo .head-canal {
    position: relative;
    z-index: 1;
}

/* Os 100px de recuo do `.canal .head-canal h1` empurravam o bloco para baixo
   dentro de uma caixa que JÁ centraliza verticalmente. Com a altura pelo
   conteúdo, o recuo não tem mais o que compensar. */
main.canal.aovivo .head-canal h1 {
    margin-top: 0;
    margin-bottom: 10px;
    max-width: 620px;
}

main.canal.aovivo .head-canal h2 {
    max-width: 560px;
    margin: 0;
}

/* Era `color: #777` — cinza médio, herdado de quando esta linha ficava sobre
   fundo claro. Sobre a foto escura do topo ela simplesmente não existia. */
main.canal.aovivo .head-canal p {
    margin-top: 14px;
    max-width: 560px;
    font-size: .82em;
    color: rgba(233, 240, 248, .74);
}

/* O `<h1>` esvaziado pelo `site.js` no estado `watch` é o motivo de o `:empty`
   valer também para ele: um `<h1>` sem conteúdo tem altura zero, MAS conserva o
   `margin-bottom` — sobrava um vão inexplicável acima do player. */
main.canal.aovivo .head-canal h1:empty,
main.canal.aovivo .head-canal h2:empty,
main.canal.aovivo .head-canal p:empty {
    display: none;
    margin: 0;
}

/* ── O quadro de vídeo dentro da faixa ───────────────────────────────────── */
/* Vale para os dois estados: o player ao vivo, injetado pelo `site.js`, e o da
   transmissão aberta, movido para cá pelo mesmo arquivo.

   O teto de 820px é o que impede o vídeo de dominar a página inteira numa tela
   larga — nos 992px da coluna ele teria 558px de altura e empurraria a grade
   para fora da primeira tela. A 820px são 461px, que ainda é um vídeo grande. */
main.canal.aovivo .head-canal .embed-prep {
    max-width: 820px;
    margin-top: 20px;
}

main.canal.aovivo .head-canal .embed {
    position: relative;
    border-radius: 14px;
    overflow: hidden;
    background: #000;
    box-shadow: 0 24px 60px -28px rgba(0, 0, 0, .9);
}

/* ── O aviso de "não há transmissão agora" ───────────────────────────────── */
/* Escrito pelo `site.js` quando a consulta ao canal volta `offline`. Era uma
   pílula preta de cantos 30px com `text-align: lefet` — o erro de digitação
   fazia a declaração ser descartada. Aqui vira um selo de status, com o ponto
   à esquerda dizendo o que a cor sozinha não diz. */
main.canal.aovivo .head-canal .live-codigo-erro {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    width: auto;
    max-width: 560px;
    margin: 16px 0 0;
    padding: 9px 18px 9px 15px;
    border: 1px solid rgba(233, 240, 248, .16);
    border-radius: 999px;
    background: rgba(6, 15, 29, .5);
    font-size: 13px;
    line-height: 1.35;
    color: rgba(233, 240, 248, .84);
    text-align: left;
}

main.canal.aovivo .head-canal .live-codigo-erro::before {
    content: "";
    flex: 0 0 auto;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #8c98a6;
}

/* ── A transmissão aberta (?watch=y&v=ID) ────────────────────────────────── */
main.canal.aovivo .head-canal .video-watch-url {
    max-width: 820px;
}

/* Volta para a lista. É o único caminho de retorno que a página oferece: o
   `site.js` esvazia o `<h1>` neste estado, então nem o nome da página continua
   visível. Sem ele, sair de uma transmissão exigia o botão do navegador. */
.aovivo-voltar {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
    font-size: 13px;
    color: rgba(233, 240, 248, .72);
    text-decoration: none;
    transition: color .18s ease;
}

.aovivo-voltar:hover,
.aovivo-voltar:focus-visible {
    color: var(--ref-white);
    text-decoration: none;
}

.aovivo-voltar i {
    font-size: 11px;
}

main.canal.aovivo .titulo-video-watch {
    padding-top: 0;
    max-width: 760px;
    font-size: 24px;
    line-height: 1.25;
    font-weight: 500;
    letter-spacing: -.2px;
    color: var(--ref-white);
}

main.canal.aovivo .video-watch-url>span {
    display: block;
    margin-top: 6px;
    padding-bottom: 0;
    font-size: 13px;
    font-weight: 400;
    color: rgba(233, 240, 248, .64);
}

/* Código inválido ou transmissão que saiu do ar: o mesmo selo do estado
   offline, mas em tom de alerta — aqui houve uma tentativa que falhou, e a
   diferença precisa aparecer. */
main.canal.aovivo .video-watch-url .live-codigo-erro {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    width: auto;
    max-width: 620px;
    margin: 0;
    padding: 11px 20px 11px 16px;
    border: 1px solid rgba(223, 184, 106, .34);
    border-radius: 14px;
    background: rgba(6, 15, 29, .5);
    font-size: 13.5px;
    line-height: 1.45;
    color: rgba(243, 229, 195, .92);
    text-align: left;
}

main.canal.aovivo .video-watch-url .live-codigo-erro::before {
    content: "";
    flex: 0 0 auto;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--ref-gold-strong);
}

/* ── O corpo ─────────────────────────────────────────────────────────────── */
main.canal.aovivo section .texto {
    padding-bottom: 56px;
}

/* "Transmissões realizadas". O `.outros-registros` do view.css tem 26px e peso
   300 — foi escrito para o rodapé de um artigo, onde é o único título da área.
   Aqui ele abre uma seção que já vem depois de um <h1>, e precisa ficar abaixo
   dele na hierarquia, não do lado. */
/* O seletor é `main.canal.aovivo .aovivo-titulo` — 0,3,1 — e não a classe
   sozinha, que seria 0,1,0.
 *
   Motivo: o `view.css` traz `.canal h2 { display: none }`, uma regra de
   varredura que apaga TODO <h2> de TODA página de canal, e ela vale 0,1,1. O
   título desta seção nascia invisível por causa dela — presente no HTML, com
   texto, medindo 0×0. Vir depois no arquivo não bastaria: ordem só desempata
   especificidade IGUAL.
 *
   A saída não foi trocar o <h2> por uma <div>. O texto é um cabeçalho de seção
   de verdade, e é assim que o leitor de tela precisa encontrá-lo; a regra geral
   do view.css continua valendo para o resto do site. */
main.canal.aovivo .aovivo-titulo {
    display: block;
    margin: 34px 0 0;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--ref-line);
    font-size: 22px;
    line-height: 1.2;
    font-weight: 600;
    color: var(--ref-navy-800);
}

/* A barra de filtro logo abaixo do título já traz a própria margem de 30px; sem
   isto seriam duas folgas somadas. */
.aovivo-lista .aovivo-filtro {
    margin-top: 18px;
}

/* ── A linha de resumo ───────────────────────────────────────────────────── */
/* Diz quantas transmissões há e de quando. Sem ela, três cartões depois de
   filtrar são indistinguíveis de um acervo que só tem três. */
.aovivo-resumo {
    margin: 0 0 18px;
    font-size: 13.5px;
    color: var(--ref-muted);
}

.aovivo-resumo b {
    font-weight: 600;
    color: var(--ref-navy-700);
}

.aovivo-resumo--vazio {
    padding: 26px 20px;
    background: var(--ref-white);
    border: 1px dashed var(--ref-line);
    border-radius: var(--ref-radius);
    text-align: center;
    font-size: 15px;
}

/* ── A grade de máscara ──────────────────────────────────────────────────── */
/* SÓ no formato de máscara, e o PHP diz qual é pela classe `--mascara` no
   contêiner. Os outros seis formatos do "Tipo de lista" já se desenham sozinhos
   dentro de `.listagem-trechos` (bloco "LISTAGEM EM TRECHOS" do view.css), e
   impor esta grade a eles desmontaria os seis.

   O grid mora no `.listagem-trechos`, e não em cada `.display-itens`: o
   "carregar mais" acrescenta uma NOVA `<div class='display-itens …'>` por leva,
   e se cada uma fosse o próprio grid a segunda leva começaria uma grade
   independente — a última linha da primeira ficaria pela metade e a seguinte
   recomeçaria do zero, com uma costura visível no meio da lista. Com o grid no
   pai e as levas em `display: contents`, os cartões de todas elas entram na
   MESMA grade. */
.aovivo-lista--mascara .listagem-trechos {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 22px;
}

.aovivo-lista--mascara .listagem-trechos>.display-itens {
    display: contents;
}

/* A folga entre trechos deixa de existir junto com os trechos. */
.aovivo-lista--mascara .listagem-trechos>div+div {
    margin-top: 0;
}

/* ── Os cartões ──────────────────────────────────────────────────────────── */
/* Todos do mesmo tamanho: o `lado-mascara` promove o primeiro item a manchete
   de largura total (`grid-column: 1 / -1`, 16/8), e aqui isso seria errado por
   duas razões que se somam.

   A primeira é editorial: um acervo de transmissões é cronológico. Não existe
   "a mais importante" — existe a mais recente, e a ordem já diz isso. Quando há
   algo acontecendo AGORA, ele está no topo da página, dentro da faixa escura.

   A segunda é material, e é a que fecha a questão: a miniatura que o YouTube
   nos dá é a `hqdefault`, de 480px de largura. Numa manchete de 1180px ela
   seria ampliada duas vezes e meia — uma imagem visivelmente borrada abrindo a
   grade. Nos cartões de ~280px ela tem sobra.

   A especificidade precisa vencer `.bloco-lado-mascara
   article.FirstArticles.lado-a-lado` (0,3,1), daí o `main.canal.aovivo` na
   frente. */
main.canal.aovivo .aovivo-lista .bloco-lado-mascara article.lado-a-lado,
main.canal.aovivo .aovivo-lista .bloco-lado-mascara article.FirstArticles.lado-a-lado {
    grid-column: auto;
    /* 16/9 e não 4/3: são quadros de vídeo, e o formato genérico cortava as
       laterais de todas as miniaturas. */
    aspect-ratio: 16 / 9;
    border-radius: 12px;
}

/* O `view.css` normaliza os formatos clássicos dentro de `.listagem-trechos`
   para o desenho de lista (foto em cima, texto embaixo). O `lado-mascara` é o
   oposto disso — texto SOBRE a foto — e três daquelas regras o desmontavam: a
   margem no `.conteudo` deslocava a caixa posicionada, e o `<a>` e a `.img-capa`
   voltavam ao fluxo. */
.aovivo-lista--mascara .listagem-trechos article.lado-a-lado>a {
    display: block;
    position: absolute;
    inset: 0;
    z-index: 3;
}

.aovivo-lista--mascara .listagem-trechos article.lado-a-lado .img-capa {
    position: absolute;
    inset: 0;
    width: auto;
    aspect-ratio: auto;
    border-radius: 0;
}

.aovivo-lista--mascara .listagem-trechos article.lado-a-lado .conteudo {
    margin-top: 0;
}

/* Título claro: `.listagem-trechos .chamada { color: #4f5b6b }` e a tipografia
   de lista foram escritas para texto sobre fundo branco, e aqui o fundo é a
   foto. Duas linhas de teto — o título de uma transmissão costuma ser longo
   ("Missa Domingo 26/04/26 19h - 4º Domingo da Páscoa"). */
main.canal.aovivo .aovivo-lista .bloco-lado-mascara article.lado-a-lado .conteudo .titulo,
main.canal.aovivo .aovivo-lista .bloco-lado-mascara article.FirstArticles.lado-a-lado .conteudo .titulo {
    font-size: 15.5px;
    font-weight: 600;
    -webkit-line-clamp: 2;
}

main.canal.aovivo .aovivo-lista .bloco-lado-mascara article.lado-a-lado .conteudo {
    padding: 14px 15px 13px;
}

/* ── O selo de data ──────────────────────────────────────────────────────── */
/* A data no canto de cima, e não junto do título.

   Não é preferência de composição: num cartão 16/9 de ~280px sobram 158px de
   altura, e o play fica no centro geométrico, a 79px. Título em duas linhas
   mais uma linha de data ocupam os 88px de baixo — a data encostaria no play. É
   a mesma colisão que a grade de homilias resolveu escondendo a chamada.

   Só que aqui a data não podia sumir junto: metade das transmissões tem título
   quase idêntico ("Missa de Domingo"), e é a data que as distingue. Levada para
   o canto de cima, ela sai da pilha de baixo e o problema deixa de existir.

   ── z-index 4, e o motivo não é óbvio ────────────────────────────────────
   O primeiro palpite foi 2: acima da foto (0) e do play (1), abaixo do `<a>`
   (3), para não engolir o clique. O selo sumiu — desenhado, medido no lugar
   certo, com fundo opaco, e invisível.

   A causa está na FORMA do cartão, que vem de `artigo_item_html()`: a
   miniatura e o texto NÃO são irmãos do `<a>`, estão DENTRO dele. O `<a>` tem
   `z-index: 3` e por isso abre um contexto de empilhamento próprio; tudo o que
   mora lá dentro — inclusive a `.img-capa` de z-index 0 — é pintado acima de
   qualquer irmão do `<a>` com z-index menor que 3. O selo, sendo irmão, tinha
   de vencer o 3 inteiro, não o 0 da imagem.

   Passar por cima do link seria um problema se o selo interceptasse o ponteiro
   — um retângulo morto no canto de todo cartão. O `pointer-events: none` no fim
   desta regra é o que torna o 4 seguro: o clique atravessa e chega no `<a>`. */
.aovivo-quando {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 4;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(4, 10, 20, .62);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    font-size: 11.5px;
    line-height: 1.4;
    font-weight: 500;
    letter-spacing: .2px;
    color: rgba(255, 255, 255, .94);
    text-shadow: 0 1px 2px rgba(0, 0, 0, .5);
    pointer-events: none;
}

/* Nos outros seis formatos o cartão não é uma máscara e o selo não é emitido —
   ali a data vai na chamada, que é o lugar dela. Esta regra existe para o caso
   de o selo passar a ser emitido fora da máscara um dia: sem um cartão
   posicionado em volta, `position: absolute` o jogaria para o canto da página. */
.aovivo-lista:not(.aovivo-lista--mascara) .aovivo-quando {
    position: static;
    display: inline-block;
    background: var(--ref-soft);
    color: var(--ref-muted);
    text-shadow: none;
    margin-bottom: 6px;
}

/* ── O botão de carregar mais ────────────────────────────────────────────── */
/* A aparência vem do `view.css`, compartilhada com as demais listagens. Aqui só
   o respiro, que ali é medido para outro espaçamento de lista. */
.aovivo-lista .listagem-mais-caixa {
    margin-top: 34px;
}

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

    main.canal.aovivo .head {
        min-height: 210px;
        padding: 74px 0 30px;
    }

    main.canal.aovivo .head-canal .embed-prep {
        margin-top: 16px;
    }

    main.canal.aovivo .titulo-video-watch {
        font-size: 19px;
    }

    /* Margem lateral no celular. Abaixo deste ponto o `.texto` das páginas de
       canal perde o contêiner centralizado e passa a ocupar a tela inteira: os
       cartões e a barra de filtro encostavam nas duas bordas, e um cartão de
       cantos arredondados colado na borda se lê como corte, não como cartão. Os
       15px são os mesmos que /noticias usa nesta largura. */
    main.canal.aovivo section .texto {
        padding-left: 15px;
        padding-right: 15px;
    }

    /* Mesma especificidade da regra de cima (0,3,1). Só `.aovivo-titulo` seria
       0,1,0 e perderia dela, apesar de estar dentro da media query e mais
       abaixo no arquivo — media query não acrescenta peso nenhum. */
    main.canal.aovivo .aovivo-titulo {
        font-size: 19px;
    }

    .aovivo-lista--mascara .listagem-trechos {
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
        gap: 16px;
    }

    main.canal.aovivo .aovivo-lista .bloco-lado-mascara article.lado-a-lado .icon_play_over i {
        font-size: 42px;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Widget "Hero capa"

   A faixa de abertura. UM widget desenha de um a seis heros; com mais de um, a
   marcação sai em Swiper e esta folha só precisa não atrapalhar — as classes
   `.swiper`, `.swiper-wrapper` e `.swiper-slide` continuam fazendo o trabalho
   delas.

   O que o painel controla chega por variável, não por classe: altura, véu e cor
   do texto são números que o gestor escolhe, e uma classe por valor possível
   daria dezenas de regras para dizer a mesma coisa.

   O widget mora dentro de uma `<section class="hero_capa blococapa_N">`, que já
   tem o recuo do bloco. Por isso o hero sangra para os lados com `width:100%` e
   é o `__interno` — e só ele — que se prende ao container de 1180px.
   ═══════════════════════════════════════════════════════════════════════════ */

/* A SEÇÃO que hospeda o hero deixa de ser tabela.

   `site-setorescapa.css` faz `section { display: table }` — toda seção do site
   é uma tabela CSS. Ali `width` é um MÍNIMO: a tabela cresce para caber o
   conteúdo. Com um Swiper dentro, que mede o container para calcular a largura
   dos slides, isso vira dependência circular: o Chrome resolve no máximo que
   conhece (2^25 px) e a faixa some da tela. Antes o `max-width: 1070px` que o
   tema dá ao carrossel de logos escondia o problema — e cortava o hero em
   1070px no meio de uma tela de 1440.

   `flow-root`, e não `block`: a tabela também servia de contenção de floats, e
   uma seção `inline` pode hospedar outros widgets ao lado do hero. `flow-root`
   dá a mesma contenção sem o algoritmo de largura da tabela.

   A largura NÃO é declarada aqui de propósito: quem manda nela continua sendo
   `.blococapa_N` (faixa de tela cheia ou de container) e `.setor_side_A/B` (as
   colunas 70/30). Uma largura própria venceria as duas e quebraria o hero posto
   numa coluna.

   `.hero_capa` é a classe do próprio widget: o CapaRenderer a põe na seção
   tanto no bloco `inline` quanto na `<section>` de coluna. */
section.hero_capa {
    display: flow-root;
}

.capa-hero {
    /* Respiro vertical do slide. Variável porque o valor muda no celular e
       porque a reserva do cabeçalho abaixo precisa somar-se a ele. */
    --hero-respiro: 46px;

    /* Altura reservada no ALTO para o cabeçalho flutuante. Zero por padrão: só
       o hero que abre a capa passa por baixo dele (ver a regra mais abaixo). */
    --hero-topo: 0px;

    position: relative;
    /* `auto`, e não `100%`. O `site-setorescapa.css` faz `section { display:
       table }` — TODA seção do site é uma tabela CSS —, e ali `width` é um
       MÍNIMO: a tabela cresce para caber o conteúdo. Uma porcentagem aqui
       dentro pede a largura do pai enquanto o pai espera a do filho, e o
       Chrome resolve a circularidade no máximo que conhece (2^25 px). Era o
       `max-width: 1070px` do carrossel de logos que vinha escondendo isso.

       Com `auto` o hero preenche a célula, e quem manda na largura volta a ser
       a seção — `.blococapa_1 { width: 100% }` para a faixa de tela cheia,
       `blococapa_3` e irmãs para as de container. */
    width: auto;
    clear: both;
}

/* ── Neutralização do tema ───────────────────────────────────────────────
   O `site.css` estiliza `.swiper` e `.swiper-slide` para o carrossel de logos
   que já existia no site: teto de 1070px, conteúdo centralizado, recuo de 5px e
   `img { max-width: 140px }`. O hero usa as MESMAS classes — o Swiper as exige —
   e por isso herdava tudo: faixa que não chegava à borda, texto centralizado
   mesmo com "à esquerda" escolhido no painel e foto do cartão encolhida a 140px.

   As regras abaixo desfazem só isso, e são prefixadas com `.capa-hero` de
   propósito: empatar em especificidade e vencer pela ordem de carregamento
   funcionaria hoje e quebraria no dia em que alguém reordenasse o <head>. */
.capa-hero.swiper {
    /* `width` além de `max-width`: o `resp.css` dá ao carrossel de logos uma
       largura FIXA por breakpoint — 700px em telas médias, 350px no celular — e
       um hero com dois ou mais slides herda a classe `.swiper` por exigência da
       biblioteca. Sem esta linha, o hero de um site aberto no celular sairia
       com 350px de largura dentro de uma tela de 390. */
    width: auto;
    max-width: none;
    margin-bottom: 0;
}

.capa-hero .capa-hero__slide {
    justify-content: flex-start;
    text-align: left;
    padding-left: 0;
    padding-right: 0;
}

.capa-hero .capa-hero__card img {
    max-width: none;
}

/* O realce de passar o mouse é do carrossel de logos, onde cada slide é um
   link. Aqui a foto é ilustração: não responde ao mouse porque não é clicável. */
.capa-hero .capa-hero__slide:hover img {
    box-shadow: none;
    background: transparent;
    border-radius: 0;
}

/* Sem carrossel (um hero só): o slide precisa da largura toda, que num Swiper
   viria do wrapper. */
.capa-hero__pista {
    display: block;
    width: 100%;
}

.capa-hero__pista>.swiper-slide {
    width: 100%;
}

/* Antes de o Swiper montar — ou se o JS não carregar — os slides seguintes
   ficariam empilhados um sob o outro e o visitante veria os seis. O Swiper
   marca `swiper-initialized` no container ao terminar; até lá, só o primeiro. */
.capa-hero--slider:not(.swiper-initialized) .swiper-slide:not(:first-child) {
    display: none;
}

.capa-hero__slide {
    position: relative;
    display: flex;
    /* O padrão fica aqui; as três variantes de `capa-hero--v-*` logo abaixo o
       substituem. O `align-items` é o que posiciona o conteúdo na vertical
       porque o slide é o flex container e o `__interno` é o único item dele. */
    align-items: center;
    min-height: var(--hero-altura, 420px);
    /* O respiro de cima carrega a reserva do cabeçalho; o de baixo, não. */
    padding: calc(var(--hero-respiro) + var(--hero-topo)) 0 var(--hero-respiro);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    box-sizing: border-box;
}

/* ── O hero que abre a capa passa POR BAIXO do cabeçalho ─────────────────
   Na capa o `.topo` é transparente e flutua sobre a primeira faixa — é o efeito
   de vidro do topo desta folha, e é de propósito: a foto do hero corre por trás
   do logo e do menu. O que faltava era o hero saber disso. Sem a reserva, o
   título nascia nos 46px de respiro e ficava debaixo dos 70px da barra —
   ilegível no celular, onde o conteúdo estoura a faixa e o alinhamento vertical
   não tem folga para empurrá-lo para baixo. Medido: 36px de sobreposição num
   iPhone de 390px.

   A reserva é PADDING do slide, e não do `<section>`: no section, a cor de
   fundo da faixa apareceria como uma tira acima da foto e o efeito de vidro
   perderia justamente aquilo sobre o que ele desfoca.

   Só a PRIMEIRA seção da capa recebe: um hero no meio da página não tem
   cabeçalho nenhum por cima.

   O valor é o que o cabeçalho PINTA, não a altura da caixa dele. A caixa mede
   70px em toda largura, mas em dois trechos o conteúdo transborda — e é o
   conteúdo que o visitante vê:

     • até 389px   o nome da paróquia e a lupa quebram para baixo da barra e
                   chegam a 133px;
     • de 1200px   o brasão (`.float-logo`) pende até 180px, sobre o canto
                   superior esquerdo da faixa.

   Entre 390 e 1199px nada sai da barra, e 70px bastam. Os números vieram de
   medição no navegador, não de estimativa. */
body.capa>ul.panel>section:first-child .capa-hero {
    --hero-topo: 70px;
}

/* Telas estreitas: a barra vira dois andares. Um só degrau, e generoso, em vez
   de acompanhar o ponto exato da quebra — ele depende do comprimento do nome
   do site, que muda de instalação para instalação. */
@media (max-width: 389px) {
    body.capa>ul.panel>section:first-child .capa-hero {
        --hero-topo: 140px;
    }
}

/* O brasão que pende no desktop só atrapalha quem pediu o texto NO ALTO: é o
   único caso em que o título nasce na quina de cima, que é onde ele está. Com
   "No meio" ou "Embaixo" o texto já passa longe, e engordar a reserva ali
   empurraria o conteúdo para baixo sem motivo — deslocando o centro de um hero
   que hoje está certo. */
@media (min-width: 1200px) {
    body.capa>ul.panel>section:first-child .capa-hero--v-topo {
        --hero-topo: 190px;
    }
}

/* Onde o texto encosta quando o hero é mais alto que ele. Prefixadas com
   `.capa-hero` para vencer o `align-items: center` da regra acima sem depender
   da ordem em que as duas aparecem nesta folha. */
.capa-hero.capa-hero--v-topo .capa-hero__slide {
    align-items: flex-start;
}

.capa-hero.capa-hero--v-meio .capa-hero__slide {
    align-items: center;
}

.capa-hero.capa-hero--v-baixo .capa-hero__slide {
    align-items: flex-end;
}

/* Sobre foto o padrão é branco: é a única cor que funciona em qualquer imagem
   que o gestor venha a subir. Sem foto de fundo, o hero herda o texto da
   página — inclusive quando há um cartão ao lado, que não escurece nada.

   `--fundo` vem por último de propósito: as classes se acumulam, e um hero com
   fundo E cartão é um hero sobre foto. */
.capa-hero__slide--liso,
.capa-hero__slide--card {
    color: var(--hero-cor, inherit);
}

.capa-hero__slide--fundo {
    color: var(--hero-cor, #fff);
}

/* O véu é um elemento, e não um `linear-gradient` somado ao `background-image`:
   como gradiente ele entraria na mesma propriedade da foto, e a opacidade
   escolhida no painel teria de ser reescrita dentro da declaração da imagem a
   cada mudança. Separado, é uma variável só. */
.capa-hero__veu {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, var(--hero-veu, .35));
    pointer-events: none;
}

.capa-hero__interno {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 15px;
    box-sizing: border-box;
    display: grid;
    grid-template-columns: 1fr;
    gap: 34px;
    align-items: center;
}

/* Com cartão, duas colunas. A do texto fica com o espaço que sobra; a da imagem
   tem teto para a foto não dominar a faixa numa tela larga. */
.capa-hero__slide--card .capa-hero__interno {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
}

/* "Imagem à esquerda" troca a ORDEM, não a marcação: o texto continua vindo
   primeiro no HTML, que é a ordem em que ele deve ser lido em voz alta e no
   celular, onde as duas colunas viram uma. */
.capa-hero--img-esquerda .capa-hero__slide--card .capa-hero__texto {
    order: 2;
}

.capa-hero--img-esquerda .capa-hero__slide--card .capa-hero__card {
    order: 1;
}

/* Largura do bloco de texto, escolhida no painel (100% / 70% / 50%). */
.capa-hero__texto {
    min-width: 0;
    width: var(--hero-texto-larg, 70%);
}

/* …exceto onde há cartão. Ali a foto ao lado JÁ é o que limita a linha, e a
   largura escolhida encolheria o texto uma segunda vez — 50% de uma coluna que
   já era metade da faixa deixa o texto num quarto dela, com uma calha enorme
   entre ele e a imagem que ele explica.

   A decisão é por SLIDE, não pelo widget: num carrossel um hero pode ter cartão
   e o seguinte não, e cada um recebe o tratamento que lhe cabe. A largura vem
   de uma variável no container justamente para poder ser sobrescrita aqui. */
.capa-hero .capa-hero__slide--card .capa-hero__texto {
    width: 100%;
}

/* Centralizado. O `:not(--card)` é o que impede o texto de ser centralizado
   quando há um cartão ao lado: ali ele divide a linha com a foto, e centralizar
   metade de uma linha afasta o texto da imagem que ele explica.

   A largura vem do mesmo `--hero-texto-larg` das demais: antes havia um teto
   fixo de 760px aqui, que ignorava a escolha do painel. */
.capa-hero.capa-hero--centro .capa-hero__slide:not(.capa-hero__slide--card) .capa-hero__texto {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.capa-hero--centro .capa-hero__acoes {
    justify-content: center;
}

.capa-hero__titulo {
    margin: 0 0 14px;
    font-size: clamp(26px, 4vw, 44px);
    line-height: 1.12;
    font-weight: 700;
    color: inherit;
}

.capa-hero__chamada {
    margin: 0;
    /* Sem teto próprio: quem decide a medida da linha agora é a largura do
       bloco de texto, escolhida no painel. Os 640px que havia aqui venciam a
       escolha do gestor — "100%" e "70%" desenhavam a mesma chamada. */
    font-size: clamp(15px, 1.5vw, 18px);
    line-height: 1.55;
    font-weight: 300;
    color: inherit;
}

/* Sobre foto o texto claro some nos trechos claros da imagem mesmo com véu. A
   sombra é discreta e só existe onde há foto atrás. */
.capa-hero__slide--fundo .capa-hero__titulo,
.capa-hero__slide--fundo .capa-hero__chamada {
    text-shadow: 0 1px 14px rgba(0, 0, 0, .35);
}


/* ── Botões ──────────────────────────────────────────────────────────────── */
.capa-hero__acoes {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 24px;
}

.capa-hero__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 24px;
    border-radius: 30px;
    border: 1px solid transparent;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .2s ease, border-color .2s ease, color .2s ease, transform .15s ease;
}

.capa-hero__btn:hover,
.capa-hero__btn:focus {
    text-decoration: none;
    transform: translateY(-1px);
}

/* O cheio usa a cor de destaque do tema quando ela existe. `--ref-navy-800` é a
   mesma referência que o widget de categorias usa — um hero não deveria trazer
   uma paleta própria para o site. */
.capa-hero__btn--primario {
    background: var(--ref-destaque, var(--ref-navy-800, #0d2339));
    color: #fff;
}

.capa-hero__btn--primario:hover,
.capa-hero__btn--primario:focus {
    color: #fff;
    filter: brightness(1.12);
}

.capa-hero__btn--secundario {
    background: #fff;
    color: var(--ref-navy-800, #0d2339);
}

.capa-hero__btn--secundario:hover,
.capa-hero__btn--secundario:focus {
    color: var(--ref-navy-800, #0d2339);
    background: #f4f6f9;
}

/* Só o contorno: herda a cor do texto do slide, que já é branca sobre foto e
   escura sobre fundo liso — assim o mesmo estilo serve aos dois casos. */
.capa-hero__btn--linha {
    background: transparent;
    border-color: currentColor;
    color: inherit;
}

.capa-hero__btn--linha:hover,
.capa-hero__btn--linha:focus {
    color: inherit;
    background: color-mix(in srgb, currentColor 12%, transparent);
}

/* ── Cartão de imagem ────────────────────────────────────────────────────── */
.capa-hero__card {
    margin: 0;
    min-width: 0;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 18px 40px rgba(13, 35, 57, .16);
    line-height: 0;
}

.capa-hero__card img {
    display: block;
    width: 100%;
    height: 100%;
    /* 100px, e nao 60: a altura escolhida no painel e a da FAIXA, e o slide
       gasta 46px de respiro em cima e outros 46 embaixo. Com um teto de 60 o
       cartao ficava mais alto que a caixa de conteudo e empurrava a faixa para
       alem da altura pedida — um hero de 460px desenhava 492. */
    max-height: calc(var(--hero-altura, 420px) - 100px);
    object-fit: cover;
}

/* ── Controles do slider ─────────────────────────────────────────────────── */
/* Nomes próprios, e não `.swiper-button-next` / `.swiper-pagination`: o site.js
   inicializa o carrossel de artigos com esses seletores em escopo de documento,
   e um hero na mesma página passaria a comandar a listagem de artigos. */
.capa-hero__seta {
    position: absolute;
    top: 50%;
    z-index: 3;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .85);
    color: #0d2339;
    font-size: 15px;
    cursor: pointer;
    transition: background-color .2s ease, opacity .2s ease;
}

.capa-hero__seta:hover {
    background: #fff;
}

.capa-hero__seta--prev {
    left: 16px;
}

.capa-hero__seta--next {
    right: 16px;
}

/* Classe que o próprio Swiper põe quando não há para onde ir. */
.capa-hero__seta.swiper-button-disabled {
    opacity: .35;
    cursor: default;
}

/* Três classes de propósito. O `swiper-bundle.min.css` carrega DEPOIS desta
   folha (ver o <head> em ui-master/site/header.php) e traz
   `.swiper-pagination-bullets.swiper-pagination-horizontal { bottom: 10px }`,
   que tem duas classes: empatar em especificidade aqui seria perder por ordem
   de carregamento, e o `bottom` daqui não valeria nada. */
.capa-hero.capa-hero--slider .capa-hero__pontos {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 18px;
    z-index: 3;
    display: flex;
    justify-content: center;
    gap: 8px;
    width: auto;
}

/* `.swiper-pagination-bullet` é a classe que o Swiper cria para cada pontinho:
   o container é nosso, os pontos são dele. */
.capa-hero__pontos .swiper-pagination-bullet {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .55);
    opacity: 1;
    cursor: pointer;
    transition: width .2s ease, background-color .2s ease;
}

.capa-hero__pontos .swiper-pagination-bullet-active {
    width: 26px;
    border-radius: 6px;
    background: #fff;
}

/* Sem foto no primeiro slide, o branco sumiria contra a cor da seção. Quem sabe
   disso é o PHP — `capa-hero--claro` — porque o CSS não alcança a informação:
   os pontinhos são irmãos do `.swiper-wrapper`, não dos slides, e com `loop` o
   Swiper ainda clona slides e muda quem é o primeiro. */
.capa-hero--claro .capa-hero__pontos .swiper-pagination-bullet {
    background: rgba(13, 35, 57, .25);
}

.capa-hero--claro .capa-hero__pontos .swiper-pagination-bullet-active {
    background: var(--ref-navy-800, #0d2339);
}

/* A seta clara sobre uma seção clara também precisa de contorno para existir. */
.capa-hero--claro .capa-hero__seta {
    background: #fff;
    box-shadow: 0 2px 10px rgba(13, 35, 57, .14);
}

/* ── Telas menores ───────────────────────────────────────────────────────── */
@media (max-width: 991px) {

    /* Duas colunas em 900px dariam ~380px para cada: título quebrando a cada
       duas palavras de um lado, foto pequena do outro. */
    .capa-hero__slide--card .capa-hero__interno {
        grid-template-columns: 1fr;
    }

    /* Em coluna única o texto vem primeiro e o cartão embaixo, sempre — a
       inversão do "imagem à esquerda" só faz sentido quando há duas colunas.
       Lado a lado, o cartão é o par do texto; empilhado, é o que o ilustra, e
       ilustração vem depois do que ela explica. */
    .capa-hero--img-esquerda .capa-hero__slide--card .capa-hero__texto {
        order: 1;
    }

    .capa-hero--img-esquerda .capa-hero__slide--card .capa-hero__card {
        order: 2;
    }

    /* ── O cartão empilhado ───────────────────────────────────────────────
       Aqui ele deixa de ter uma coluna que lhe dê largura e passa a ter a
       faixa inteira: sem teto, uma foto em pé viraria um retângulo de 500px de
       altura embaixo do texto, e o hero deixaria de ser uma abertura para
       virar uma página. O teto é de ALTURA porque o `object-fit: cover` já
       recorta o que sobra — a foto continua preenchendo a largura toda.

       A altura da FAIXA não entra na conta em coluna única: ela é a medida de
       um arranjo lado a lado, e aplicá-la aqui somaria texto + cartão dentro
       de um limite pensado para um só deles. */
    .capa-hero__slide--card .capa-hero__card img {
        max-height: 280px;
    }
}

@media (max-width: 767px) {
    .capa-hero {
        --hero-respiro: 30px;
    }

    .capa-hero__slide {
        /* A altura escolhida no painel é pensada para o desktop; no celular ela
           deixaria uma faixa vazia embaixo do texto. Aqui manda o conteúdo, com
           um teto para o hero não empurrar a página inteira para baixo.

           O teto subiu de 340 para 400 quando a reserva do cabeçalho entrou:
           dos 400px, 70 são da barra, e sobram para o conteúdo os mesmos ~330
           de antes. Sem subir, o hero mínimo teria encolhido sem ninguém pedir. */
        min-height: min(var(--hero-altura, 420px), 400px);
    }

    .capa-hero__interno {
        gap: 20px;
    }

    /* 50% de uma tela de 390px são 180px: duas ou três palavras por linha. A
       escolha de largura é uma decisão de desenho para o desktop; aqui o texto
       usa o que tem. */
    .capa-hero__texto {
        width: 100%;
    }

    /* Entrelinha um pouco mais fechada: no celular o título quebra em três ou
       quatro linhas, e o 1.12 do desktop as afasta demais entre si. */
    .capa-hero__titulo {
        line-height: 1.08;
        margin-bottom: 10px;
    }

    .capa-hero__acoes {
        margin-top: 18px;
    }

    .capa-hero__btn {
        padding: 11px 20px;
        font-size: 13.5px;
    }

    /* As setas cobririam o texto numa tela estreita; os pontinhos bastam. */
    .capa-hero__seta {
        display: none;
    }

    /* No celular o cartão divide uma tela de 740px de altura com o cabeçalho,
       o texto e o começo da seção seguinte. 200px é o que ele pode ocupar sem
       empurrar para fora da primeira tela o botão que está logo acima dele. */
    .capa-hero__slide--card .capa-hero__card img {
        max-height: 200px;
    }

    /* Cantos e sombra mais contidos: a sombra de 40px do desktop, numa faixa
       estreita, vaza para as bordas da tela e suja o fundo. */
    .capa-hero__card {
        border-radius: 12px;
        box-shadow: 0 10px 24px rgba(13, 35, 57, .22);
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   A GAVETA DO CELULAR — céu noturno

   A gaveta passou a carregar a navegação inteira do site (ver
   MenuService::gaveta()): quatro ramos e mais de trinta subpáginas. Nesse
   tamanho ela deixou de ser uma listinha auxiliar e virou A navegação de quem
   entra pelo telefone — então ganha tratamento de superfície própria, não de
   sobra cinza do desktop.

   O fundo é o azul da barra fixa levado ao escuro, com estrelas. Não é adorno
   solto: a paróquia é da NATIVIDADE, e um céu estrelado tem leitura aqui.
   Sobre ele passam linhas muito tênues, devagar, como corrente de ar.

   TUDO EM `background-image`, sem pseudo-elemento: `.menu-mobile-body` é
   `display: table` (site.css), e caixa de tabela trata `::before` de um jeito
   que varia entre navegadores. Camadas de fundo não têm esse problema.
   ═════════════════════════════════════════════════════════════════════════ */

.menu-mobile-body {
    background-color: var(--ref-navy-950);

    /* Ordem: a primeira camada fica por CIMA. Estrelas, depois o vento, depois
       o céu. Tamanhos de tile propositalmente não-harmônicos (317, 463) para o
       olho não encontrar a grade da repetição. */
    background-image:
        radial-gradient(1.7px 1.7px at 41px 33px, rgba(243, 229, 195, .95), transparent 100%),
        radial-gradient(1.1px 1.1px at 173px 92px, rgba(255, 255, 255, .75), transparent 100%),
        radial-gradient(1.4px 1.4px at 96px 214px, rgba(223, 184, 106, .80), transparent 100%),
        radial-gradient(1px 1px at 268px 168px, rgba(255, 255, 255, .55), transparent 100%),
        radial-gradient(1.2px 1.2px at 210px 281px, rgba(255, 255, 255, .60), transparent 100%),
        radial-gradient(1px 1px at 58px 137px, rgba(201, 162, 75, .65), transparent 100%),
        radial-gradient(1.5px 1.5px at 349px 61px, rgba(255, 255, 255, .70), transparent 100%),
        radial-gradient(1px 1px at 128px 402px, rgba(243, 229, 195, .55), transparent 100%),
        radial-gradient(1.3px 1.3px at 402px 316px, rgba(255, 255, 255, .50), transparent 100%),
        repeating-linear-gradient(101deg,
            transparent 0 46px,
            rgba(201, 162, 75, .055) 46px 47px,
            transparent 47px 118px),
        linear-gradient(184deg,
            var(--ref-navy-950) 0%,
            var(--ref-navy-900) 44%,
            var(--ref-navy-800) 100%);

    background-repeat: repeat;
    background-size:
        317px 317px, 317px 317px, 317px 317px, 317px 317px, 317px 317px, 317px 317px,
        463px 463px, 463px 463px, 463px 463px,
        100% 100%,
        100% 100%;
    background-position: 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0;

    box-shadow: 0 2px 24px 0 rgba(0, 0, 0, .55);
    border-right: 1px solid rgba(201, 162, 75, .22);

    /* 270px era estreito para uma navegação de dois níveis: "Movimento
       Familiar Cristão" quebrava em duas linhas. Cresce até 344px, mas nunca
       além de 88% da tela — num aparelho de 360px a gaveta precisa deixar
       faixa suficiente do conteúdo à mostra para o toque de fechar. */
    width: min(88vw, 344px);
}

/* O site.css fecha a gaveta com `translateX(-270px)`, um número casado com a
   largura antiga: com 344px ela ficaria 74px para dentro da tela, visível.
   Em porcentagem o fechamento acompanha qualquer largura. O `:not()` é o que
   mantém `.menu-open-mb` (que vem antes, no site.css) ganhando quando abre. */
.menu-mobile-body:not(.menu-open-mb) {
    transform: translateX(-100%);
}

/* ── O brasão ──────────────────────────────────────────────────────────── */

/* Vinha 100x50 numa arte que é mais alta que larga — espremida. `height` fixa
   com `width: auto` devolve a proporção, e o bloco centraliza. */
.menu-mobile-body .bloco-menu .logo {
    display: flex;
    justify-content: center;
    padding: 6px 16px 18px;
    width: auto;
}

/* Três regras disputavam este brasão: `.menu-mobile-body .logo .img-menu-call`
   fixa a largura em 100px, `.logo img` corta a altura em 50px, e a arte é
   140x196 — retrato. O resultado era 84x50, achatado. Aqui a seletividade
   precisa passar das duas (quatro classes), e o `max-height` precisa ser
   desfeito por nome: `height` sozinho não vence um teto. */
.menu-mobile-body .bloco-menu .logo .img-menu-call {
    width: auto;
    height: 84px;
    max-height: none;
    /* NÃO usar porcentagem aqui: entre o `.logo` e a imagem existe um `<a>`,
       que vira item flex do tamanho da arte (60px). Uma `max-width: 70%` se
       mede contra ESSE `<a>`, não contra a gaveta, e espremia o brasão para
       42px. A altura fixa já limita o conjunto. */
    max-width: 100%;
    margin: 0;
    object-fit: contain;
}

/* A corrente de ar: só a camada do vento anda, e devagar — 72s por ciclo. As
   outras posições ficam paradas nos dois quadros da animação, senão as
   estrelas deslizariam junto e o céu viraria protetor de tela. */
@media (prefers-reduced-motion: no-preference) {
    .menu-mobile-body {
        animation: mn-gav-vento 72s linear infinite;
    }
}

@keyframes mn-gav-vento {
    from {
        background-position: 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0;
    }

    to {
        background-position: 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 236px 0, 0 0;
    }
}

/* ── Itens ─────────────────────────────────────────────────────────────── */

.menu-mobile-body .bloco-menu {
    border-bottom: 1px solid rgba(201, 162, 75, .16);
}

/* A escala da gaveta é declarada aqui, inteira, em vez de herdada: o nível 1
   vinha com 12px de uma regra antiga e a sublista com 13px, ou seja, o filho
   saía MAIOR que o pai. Com a gaveta mais larga cabe respirar um pouco. */
.menu-mobile-ol li a {
    color: rgba(255, 255, 255, .92);
    background: transparent;
    border-bottom: 1px solid rgba(255, 255, 255, .05);
    font-size: 14.5px;
    font-weight: 400;
    letter-spacing: .2px;
    padding: 13px 16px 13px 22px;
    transition: background-color .18s ease, color .18s ease, padding-left .18s ease;
}

/* O site.css engordava o item no hover (padding 10px → 20px). Numa lista de
   47 linhas isso faz a lista inteira pular sob o dedo; aqui o realce é cor e
   um recuo pequeno, sem mexer na altura. */
.menu-mobile-ol li a:hover,
.menu-mobile-ol li a:focus-visible {
    background-color: rgba(201, 162, 75, .16);
    color: var(--ref-gold-soft);
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 26px;
}

/* ── O agrupador (hoje "Ações Evangelizadoras") ────────────────────────── */

/* O agrupador é um item como os outros: mesma fonte, mesmo peso, mesma caixa,
   mesmo recuo. Antes ele vinha em versalete dourado e criava um degrau de
   hierarquia que não existe — "Ações Evangelizadoras" está no mesmo nível de
   "Agenda". O que o distingue é a seta, e só ela. */
.menu-mobile-ol .mn-gav__grupo {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 13px 16px 13px 22px;
    border: 0;
    background: transparent;
    color: rgba(255, 255, 255, .92);
    font-family: inherit;
    font-size: 14.5px;
    font-weight: 400;
    letter-spacing: .2px;
    text-align: left;
    cursor: pointer;
    transition: background-color .18s ease, color .18s ease;
}

.menu-mobile-ol .mn-gav__grupo:hover,
.menu-mobile-ol .mn-gav__grupo:focus-visible {
    background-color: rgba(201, 162, 75, .12);
    color: var(--ref-gold-soft);
}

.mn-gav__rotulo {
    flex: 1 1 auto;
}

/* ── A linha "link + alavanca" (Comunidades, Pastorais…) ───────────────── */

/* O rótulo LEVA à página; quem abre o ramo é o botão ao lado. São duas ações
   diferentes, então são dois alvos diferentes — fundir tudo num toque só
   obrigaria o visitante a escolher entre ver a página e ver a lista. */
.menu-mobile-ol .mn-gav__linha {
    display: flex;
    align-items: stretch;
}

.menu-mobile-ol .mn-gav__linha>a {
    flex: 1 1 auto;
    width: auto;
    border-bottom: 0;
}

.menu-mobile-ol .mn-gav__alavanca {
    flex: 0 0 auto;
    width: 46px;
    border: 0;
    background: transparent;
    color: var(--ref-gold-strong);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.menu-mobile-ol .mn-gav__alavanca:hover,
.menu-mobile-ol .mn-gav__alavanca:focus-visible {
    background-color: rgba(201, 162, 75, .18);
    color: var(--ref-gold-soft);
}

.menu-mobile-ol .mn-gav>.mn-gav__linha,
.menu-mobile-ol .mn-gav--grupo {
    border-bottom: 1px solid rgba(255, 255, 255, .06);
}

.mn-gav__seta {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    transition: transform .25s ease;
}

[aria-expanded="true"] .mn-gav__seta {
    transform: rotate(180deg);
}

/* Rótulo só para leitor de tela. O `.sr-so-leitor` do site é escopado em
   `.ag-site`, então a gaveta precisa do seu. */
.mn-gav__sr {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* ── A revelação ───────────────────────────────────────────────────────── */

/* `grid-template-rows: 0fr → 1fr` anima até a altura REAL do conteúdo, coisa
   que `max-height` não faz: com max-height você chuta um teto, e o chute erra
   para mais (abre devagar e termina com solavanco) ou para menos (a lista
   corta). O filho precisa de `min-height: 0` para poder encolher abaixo do
   próprio conteúdo dentro do grid. */
.mn-gav__caixa {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows .3s ease;
}

.mn-gav--aberto>.mn-gav__caixa {
    grid-template-rows: 1fr;
}

.mn-gav__caixa>.mn-subgaveta {
    overflow: hidden;
    min-height: 0;
    /* Fechada, a lista sai da ordem de foco e do leitor de tela. O atraso
       deixa a animação terminar antes de ela sumir. */
    visibility: hidden;
    transition: visibility 0s linear .3s;
}

.mn-gav--aberto>.mn-gav__caixa>.mn-subgaveta {
    visibility: visible;
    transition-delay: 0s;
}

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

    .mn-gav__caixa,
    .mn-gav__caixa>.mn-subgaveta,
    .mn-gav__seta {
        transition: none;
    }
}

/* ── A sublista ────────────────────────────────────────────────────────── */

/* O recuo é o mínimo para o olho entender o aninhamento: um filete e uma
   respiração. O que separa pai de filho é o TAMANHO da fonte, não a distância
   — empurrar a sublista para longe só encurta a linha de leitura numa coluna
   que já é estreita. O filete começa alinhado ao texto do pai (22px). */
.menu-mobile-ol .mn-subgaveta {
    border-left: 1px solid rgba(201, 162, 75, .28);
    margin: 2px 0 6px 22px;
    padding-left: 0;
}

.menu-mobile-ol .mn-subgaveta li a {
    color: rgba(255, 255, 255, .66);
    font-size: 12.5px;
    letter-spacing: .1px;
    padding: 8px 14px 8px 14px;
    border-bottom: 0;
}

.menu-mobile-ol .mn-subgaveta li a:hover,
.menu-mobile-ol .mn-subgaveta li a:focus-visible {
    background-color: rgba(201, 162, 75, .14);
    color: var(--ref-gold-soft);
    padding-left: 18px;
}

/* ── Busca e tags dentro da gaveta ─────────────────────────────────────── */

/* ── A busca ───────────────────────────────────────────────────────────── */

/* Um campo só, em linha: lupa dentro à esquerda, seta dourada à direita. A
   marcação antiga (`.search-bt` + dois `float:left`) não cabia na coluna e
   quebrava em três faixas — ver MenuRenderer::wBusca(). */
.mn-busca {
    padding: 14px 16px 16px;
}

.mn-busca__forma {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 42px;
    padding: 0 6px 0 14px;
    border: 1px solid rgba(201, 162, 75, .3);
    border-radius: 999px;
    background-color: rgba(255, 255, 255, .05);
    transition: border-color .2s ease, background-color .2s ease;
}

.mn-busca__forma:focus-within {
    border-color: rgba(201, 162, 75, .75);
    background-color: rgba(255, 255, 255, .09);
}

/* Duas classes no seletor porque `.menu-mobile-body svg {opacity:0}` do
   site.css tem especificidade (0,1,1) e apagaria a lupa. A seta do botão
   escapa por empate (`.mn-busca__ok svg`), esta aqui não escaparia. */
.menu-mobile-body .mn-busca__lupa {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
    opacity: 1;
    color: rgba(255, 255, 255, .5);
}

.mn-busca__campo {
    flex: 1 1 auto;
    min-width: 0;
    border: 0;
    background: transparent;
    color: var(--ref-white);
    font-family: inherit;
    font-size: 14px;
    line-height: 1;
}

.mn-busca__campo::placeholder {
    color: rgba(255, 255, 255, .42);
}

.mn-busca__campo:focus {
    outline: 0;
}

/* `type=search` traz um X de limpar que o Chrome desenha escuro — invisível
   sobre este fundo e desalinhado do resto. */
.mn-busca__campo::-webkit-search-cancel-button {
    display: none;
}

.mn-busca__ok {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 50%;
    background-color: var(--ref-gold);
    color: var(--ref-navy-950);
    cursor: pointer;
    transition: background-color .2s ease, transform .2s ease;
}

.mn-busca__ok svg {
    width: 16px;
    height: 16px;
    opacity: 1;
}

.mn-busca__ok:hover,
.mn-busca__ok:focus-visible {
    background-color: var(--ref-gold-strong);
    transform: translateX(2px);
}

.tags-menu-mobile a {
    background-color: transparent;
    border: 1px solid rgba(201, 162, 75, .38);
    border-radius: 999px;
    color: rgba(255, 255, 255, .8);
    display: inline-block;
    margin: 3px 4px;
    padding: 4px 12px;
}

/* O site.css saltava a fonte para 30px no hover da tag — dentro de uma pílula
   de 270px de largura isso rebentava o layout. */
.tags-menu-mobile a:hover {
    background-color: var(--ref-gold);
    border-color: var(--ref-gold);
    color: var(--ref-navy-950);
    font-size: 10px;
    letter-spacing: 0;
}

/* O site.css apaga todo SVG dentro da gaveta (`.menu-mobile-body svg
   {opacity:0}`, linha 1313) — regra herdada de quando o único SVG ali era o
   brasão, escondido de propósito. A seta do acordeão precisa escapar dela. */
.menu-mobile-body .mn-gav__seta {
    opacity: 1;
}

/* O botão da busca vem com `.btn-primary` do Bootstrap: um azul que não
   pertence a esta paleta e grita sobre o azul-noite. */
.menu-mobile-ol .search .btn,
.menu-mobile-ol .search .btn-primary {
    background-color: var(--ref-gold);
    border-color: var(--ref-gold);
    color: var(--ref-navy-950);
}

.menu-mobile-ol .search .btn:hover,
.menu-mobile-ol .search .btn-primary:hover {
    background-color: var(--ref-gold-strong);
    border-color: var(--ref-gold-strong);
    color: var(--ref-navy-950);
}

/* Foco de teclado na gaveta: o anel padrão do navegador é azul-sistema e some
   sobre o azul-noite. Ouro, por dentro da borda para não vazar da coluna. */
.menu-mobile-ol .mn-gav__alavanca:focus-visible,
.menu-mobile-ol .mn-gav__grupo:focus-visible,
.menu-mobile-ol .mn-subgaveta li a:focus-visible,
.menu-mobile-ol li a:focus-visible,
.mn-busca__ok:focus-visible {
    outline: 2px solid rgba(223, 184, 106, .8);
    outline-offset: -2px;
}

/* ---------------------------------------------------------------------------
   Bloco de capa com largura `container`: a sangria dos 15px

   `site.css` faz `section > ul.panel { display: table }`. Numa tabela CSS o
   `box-sizing: border-box` NÃO vale para o `max-width`: o navegador aplica o
   teto à caixa de CONTEÚDO e soma o padding por fora. O `.container` do
   bootstrap tem `max-width: 1180px` (resp.css) e `padding: 0 15px`, então o
   bloco media 1210px de borda a borda — 15px a mais de cada lado do que as
   SEÇÕES `.container`, que são bloco normal e respeitam o border-box.

   Medido a 1440px de tela: uma seção `.container` põe o conteúdo em 145→1295;
   o bloco `container` punha em 130→1310. Num bloco de DUAS colunas cada coluna
   tem recuo próprio e a diferença passa despercebida; num bloco de UMA coluna
   o widget ocupa a caixa inteira e a sobra vira sangria contra o resto da capa.

   `flow-root`, e não `block`: os widgets da capa são irmãos flutuados
   (`.panel > section > .panel > section { float: left }`) e a tabela também
   servia para contê-los. `flow-root` dá a mesma contenção sem o algoritmo de
   largura da tabela — o mesmo remédio já usado em `section.hero_capa`.

   Só quem tem `container` (e `thin`, que o acompanha): um `ul.panel` de tela
   cheia não tem teto de largura e portanto nada a corrigir.

   E só na CAPA. As páginas por template dão `display: flex` ao mesmo `<ul>`
   (`section.secao-diagramada > ul.panel`, mais acima neste arquivo) para montar
   as colunas — e aquele seletor tem especificidade (0,2,2), a MESMA que
   `section > ul.panel.container`. No empate vence quem vem por último, e esta
   regra está no fim do arquivo: sem o `:not` ela virava o flex das páginas em
   `flow-root` e as colunas de /noticias desabavam. O `:not` tira a disputa do
   caminho em vez de a vencer por specificity.
   --------------------------------------------------------------------------- */
section:not(.secao-diagramada)>ul.panel.container {
    display: flow-root;
}

/* A outra metade do mesmo problema: a largura FIXA do widget

   `resp.css` dá `.blococapa_2..5 { width: 1180px }` acima de 1200px — o número
   cru do container, não uma proporção. Num bloco de DUAS colunas isso não
   aparece porque `.setor_side_A/B` (70%/30%) vence e o widget acompanha a
   coluna. Num bloco de UMA coluna o CapaRenderer não tem lado para dar: a
   classe sai como `setor_side_` (sem letra), nenhuma proporção casa, e sobra a
   largura fixa. Ela batia com o container inflado por acidente — corrigido o
   `<ul>` acima, os 1180px passariam a vazar 30px da coluna de 1150px.

   Dentro de um bloco, quem manda na largura é a coluna. `width: 100%` também
   deixa o widget seguir os degraus de breakpoint do container em vez de ficar
   preso a um número de desktop. Restrito ao bloco `container`: num bloco de
   tela cheia o widget continua com os 1180px centralizados de hoje.

   Restrita à capa pelo mesmo motivo da regra acima: numa página por template as
   colunas vêm embrulhadas em `.capa-coluna` (CapaRenderer::agrupaColunas), então
   este seletor não casaria lá de qualquer forma — mas deixá-lo explícito impede
   que uma mudança no renderer o faça alcançar as páginas sem ninguém notar. */
section:not(.secao-diagramada)>ul.panel.container[data-colunas="1"]>section {
    width: 100%;
}

/* ── Compartilhamento ────────────────────────────────────────────────────────
   Duas apresentações, um componente: a caixa horizontal do pé da página
   (`.sharecomp`, montada pelo `redes_share.php`) e a calha vertical do bloco
   (`.fx-share`, montada pelo `compartilhar_coluna()`). As duas leem a mesma
   lista de redes — ver `ui-app/compartilhar.php`.

   Monocromático: os ícones usam o cinza do próprio site em repouso e escurecem
   para o azul da marca no hover. Nada de vermelho do YouTube e verde do
   WhatsApp lado a lado — seis cores berrantes numa calha de 100px viram ruído,
   e a calha existe para acompanhar o texto, não para disputar com ele.
   ───────────────────────────────────────────────────────────────────────── */

/* Os SVG (X e Threads) e os glifos do FontAwesome precisam medir o mesmo, senão
   a coluna fica com dois ícones visivelmente maiores que os outros quatro. */
.fx-rede .rede-svg,
.share-col a .rede-svg {
    width: 16px;
    height: 16px;
    display: block;
}

/* Eram três botões e agora são seis: medido na coluna de 30% do /noticias
   (336px), os 6×48 mais as calhas davam 338px e VAZAVAM para fora da caixa.

   `flex-wrap` sozinho não resolvia. A regra original dá `flex: 0 0 auto` à
   fileira: sem encolher, ela cresce até caber os seis e transborda o pai em vez
   de quebrar — a quebra só acontece quando a largura da própria fileira é
   limitada. O `1` no meio (encolher, sim) mais `min-width: 0` são o que a
   obrigam a caber e, aí sim, dobrar a linha. */
.sharecomp .share-acoes {
    flex: 0 1 auto;
    min-width: 0;
    flex-wrap: wrap;
    /* A quebra é o desenho, não um remendo. Na coluna de 30% do /noticias
       sobram 296px por dentro do recheio, e os seis botões pedem 6×48 + calhas
       = 328. Caberiam encolhendo o botão para 40px — mas 40 fica abaixo dos
       44px de alvo de toque confortável, e um botão pequeno demais é pior que
       uma segunda linha. Fica o botão grande; quem cede é a linha.

       As calhas ficam em 8px para a segunda linha não ficar folgada demais. */
    gap: 8px;
    row-gap: 10px;
    justify-content: flex-start;
}

/* ── A calha do bloco ───────────────────────────────────────────────────── */

/* Base = celular, e também o que a CAPA usa.
   Na capa o bloco é `display: table` com os widgets flutuados
   (site-setorescapa.css), não uma linha flex — a calha em pé ali exigiria uma
   segunda mecânica inteira. Fica o cartão, que é correto em ambos. */
.fx-share {
    margin: 0;
    min-width: 0;
}

.fx-share__caixa {
    display: flex;
    /* Rótulo em cima, ícones embaixo. Lado a lado, o rótulo consumia ~130px
       dos 360 do celular e os seis ícones quebravam em 4+2; empilhado, os seis
       cabem numa linha só (6×38 + 5×8 = 268px). */
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    background: var(--ref-soft);
    border: 1px solid var(--ref-line);
    border-radius: var(--ref-radius);
}

.fx-share__rotulo {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--ref-muted);
    white-space: nowrap;
}

.fx-share__lista {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.fx-share__lista > li {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* `:empty` e não uma classe: o aviso do "copiar link" nasce vazio e o JS só
   escreve nele depois do clique. Sem isto, a caixa reservaria a altura de uma
   linha de texto que nunca chega a aparecer em quem nunca clica. */
.fx-share__aviso:empty,
.share-aviso:empty {
    display: none;
}

.fx-share__aviso,
.share-aviso {
    display: block;
    margin-top: 8px;
    font-size: 11px;
    line-height: 1.3;
    color: var(--ref-navy-700);
    text-align: center;
}

.fx-rede {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--ref-white);
    border: 1px solid var(--ref-line);
    color: var(--ref-muted);
    font-size: 15px;
    text-decoration: none;
    transition: color .2s ease, border-color .2s ease, transform .2s ease;
}

.fx-rede:hover {
    color: var(--ref-navy-700);
    border-color: var(--ref-navy-700);
    transform: translateY(-2px);
    text-decoration: none;
}

/* São links de ação: precisam ser alcançáveis e visíveis pelo teclado. */
.fx-rede:focus-visible {
    outline: 2px solid var(--ref-gold);
    outline-offset: 2px;
    color: var(--ref-navy-700);
}

/* ── Em pé, ao lado do bloco (páginas por template, daí para cima) ───────── */

/* O mesmo breakpoint em que `section.secao-diagramada > ul.panel` vira
   `flex-direction: row`. Abaixo dele o `<ul>` empilha, e a calha desce sozinha
   para baixo do bloco — sem media query própria, porque ela é um item da
   mesma linha. */
@media (min-width: 767px) {

    section.secao-diagramada > ul.panel > .fx-share {
        /* Largura FIXA: a calha não divide o bloco, acompanha o bloco. As
           colunas usam `flex-basis: 0` e repartem o que sobra, então 70/30
           continua exatamente 70/30 — com ou sem a calha ao lado. */
        flex: 0 0 100px;

        /* `flex-start` é o que faz o `sticky` ter curso: esticada (o padrão da
           linha seria `stretch`, mas aqui a linha já é `flex-start`) a calha
           teria a altura do bloco inteiro e não sobraria distância para
           percorrer. O bloco de referência do grude é o `<ul>`, tão alto
           quanto a coluna mais longa. */
        align-self: flex-start;
        position: sticky;

        /* O respiro sob o cabeçalho quando a calha gruda.

           A conta não é contra os 69px do `.topo`. Dentro dele mora o
           `.roadmap-logo` — a faixa com o nome da página —, em `position:
           absolute`, e ela TRANSBORDA a barra: medido em /comunidades/vila-nova,
           /comunidades/cristo-rei e /pastorais/pastoral-da-catequese, o `.topo`
           acaba em 69px e o roadmap em 89px, sempre.

           Era isso que o valor antigo não via. Com `top: 88px` a calha parava
           UM PIXEL ACIMA do roadmap — encavalada nele, e não apenas colada.

           89 + 31 de folga = 120. Onde não houver roadmap sobram 51px do
           cabeçalho, o que é generoso mas não atrapalha.

           É o `top`, e não uma `margin-top`: o `top` só age quando o elemento
           gruda. Uma margem empurraria a calha para baixo também no fluxo
           normal, desalinhando-a do topo do bloco a que pertence. */
        top: 120px;
    }

    /* No HTML a calha vem DEPOIS do conteúdo, sempre — quem lê por teclado ou
       leitor de tela não atravessa seis links a cada bloco para chegar ao
       texto. Quem a leva para a esquerda é só a ordem visual. */
    section.secao-diagramada > ul.panel > .fx-share--esquerda {
        order: -1;
    }

    section.secao-diagramada > ul.panel > .fx-share .fx-share__caixa {
        /* Rótulo de um lado, ícones do outro: em coluna, o texto empurraria os
           seis ícones para baixo e a calha ficaria mais alta que o conteúdo. */
        flex-direction: row;
        justify-content: center;
        gap: 8px;
        padding: 16px 8px;
    }

    section.secao-diagramada > ul.panel > .fx-share .fx-share__rotulo {
        /* `vertical-rl` + `rotate(180deg)` = texto subindo, que é como se lê
           uma calha lateral. Só `vertical-rl` deixaria de cabeça para baixo. */
        writing-mode: vertical-rl;
        transform: rotate(180deg);
        letter-spacing: .16em;
        font-size: 10px;
    }

    section.secao-diagramada > ul.panel > .fx-share .fx-share__lista {
        flex-direction: column;
        flex-wrap: nowrap;
        gap: 10px;
    }
}

/* ═════════════════════════════════════════════════════════════════════════
   BOTÃO DA GAVETA E ALINHAMENTO DOS SUBITENS (mobile)

   Três coisas nascem aqui, no fim do arquivo de propósito: as regras que
   substituem vêm de `site.css` e de `resp.css`, ambos carregados ANTES deste,
   e o desempate é por posição.

   1. O BOTÃO. Era o `.menu-input` legado — pastilha branca de 33x46 com borda
      cinza e sombra interna, e um ícone de 15px dentro. Estreito demais para o
      polegar (o mínimo confortável é 44px) e, sobre o herói escuro da capa,
      lido como um retângulo branco vazio. O `site-refinado` já o corrigia,
      mas só em `body.artigo` e `body.canal` — a capa, que é a porta de
      entrada, ficou de fora.

   2. O ESTADO ABERTO. As barras não viravam nada: a gaveta abria e o botão
      continuava convidando a abrir. E a posição dele vinha de `left: 180px`,
      `207px`, `210px`, `212px` espalhados por quatro blocos de `resp.css`,
      todos casados com a gaveta de 270px. Com a gaveta em 344px, ele pousava
      DENTRO dela, em cima do brasão.

   3. O RECUO DAS SUBLISTAS. `.menu-mobile-ol li a` é `display: table` com
      `width: 100%` (site.css): a largura era recalculada contra a caixa da
      sublista, que por sua vez era recuada por `margin-left`. Resultado — cada
      nível ficava mais estreito que o anterior e as setinhas de abrir
      desenhavam uma escada na borda direita, em vez de uma coluna.
   ═════════════════════════════════════════════════════════════════════════ */

/* ── O botão ──────────────────────────────────────────────────────────────
   Sem `display` aqui: quem decide se ele aparece é o `resp.css`, e escrever
   `display` neste bloco o traria de volta no desktop. O alinhamento das barras
   é absoluto, que funciona sob qualquer `display`. */
.menu-mobile.menu-input {
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid rgba(201, 162, 75, .38);
    border-radius: 13px;
    background-color: rgba(6, 15, 29, .92);
    box-shadow: 0 6px 18px rgba(6, 15, 29, .38);
    transition: background-color .2s ease, border-color .2s ease, box-shadow .2s ease;
    -webkit-tap-highlight-color: transparent;
}

.menu-mobile.menu-input:hover,
.menu-mobile.menu-input:focus-visible {
    background-color: var(--ref-navy-700);
    border-color: rgba(223, 184, 106, .75);
}

.menu-mobile.menu-input:focus-visible {
    outline: 2px solid var(--ref-gold-strong);
    outline-offset: 3px;
}

/* `span.mn-hb` e não só `.mn-hb`: o `site.css` esconde TODO span dentro do
   botão (`.menu-mobile span {display:none !important}`) e um empate de
   especificidade seria decidido pela ordem — que aqui até nos favorece, mas
   depender disso é frágil. Uma classe de elemento a mais resolve sem dúvida. */
.menu-mobile span.mn-hb {
    display: block !important;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 14px;
    transform: translate(-50%, -50%);
}

.menu-mobile span.mn-hb b {
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    border-radius: 2px;
    background-color: var(--ref-white);
    /* Duas transições distintas: ao ABRIR, a barra desliza para o meio e só
       então gira; ao FECHAR, a ordem se inverte. Sem o atraso cruzado as duas
       coisas acontecem juntas e o X parece "engasgar" no meio do caminho. */
    transition: transform .26s ease, opacity .16s ease .1s;
}

.menu-mobile span.mn-hb b:nth-child(1) { top: 0; }
.menu-mobile span.mn-hb b:nth-child(2) { top: 6px; }
.menu-mobile span.mn-hb b:nth-child(3) { top: 12px; }

/* Reserva para a página que ainda vier do cache.
   As páginas do site ficam gravadas em `www/cache/*.html` com o TOPO INTEIRO
   dentro, marcação do botão incluída. Entre publicar isto e o cache virar,
   existe a página antiga — a que ainda traz o `bars.svg` — sendo servida com o
   CSS novo: sem esta regra, ela mostraria a pastilha azul VAZIA, porque o
   `span.mn-hb` que desenha as barras só existe na marcação nova.
   Some sozinha quando o cache regenerar; pode sair daqui na próxima limpeza. */
.menu-mobile .img-icon-menu {
    width: 20px;
    height: 20px;
    filter: none;
    fill: var(--ref-white);
}

/* ── O botão com a gaveta aberta ──────────────────────────────────────────
   Vira um X, ganha a borda dourada da gaveta e vai para o canto superior
   direito DELA — calculado a partir da mesma expressão que dá a largura da
   gaveta (`min(88vw, 344px)`), para os dois nunca mais saírem de sincronia.
   O `!important` existe porque `resp.css` chega a usá-lo em `.interno`. */
.menu-mobile.menu-mobile-fliped {
    left: calc(min(88vw, 344px) - 56px) !important;
    top: 12px !important;
    background-color: rgba(6, 15, 29, .55);
    border-color: rgba(201, 162, 75, .55);
    box-shadow: none;
}

.menu-mobile.menu-mobile-fliped span.mn-hb b:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
}

.menu-mobile.menu-mobile-fliped span.mn-hb b:nth-child(2) {
    opacity: 0;
    transition-delay: 0s;
}

.menu-mobile.menu-mobile-fliped span.mn-hb b:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
}

/* ── A linha da gaveta ────────────────────────────────────────────────────
   `display: table` + `width: 100%` (site.css) é o que fazia cada nível medir
   contra a própria caixa. Em bloco, a linha ocupa a largura da gaveta em
   qualquer profundidade — e é isso que põe todas as setinhas na mesma coluna. */
.menu-mobile-ol li a {
    display: block;
    width: auto;
}

/* ── A sublista ───────────────────────────────────────────────────────────
   O recuo sai da CAIXA e vai para o TEXTO. O filete que marca o aninhamento
   continua, mas desenhado como camada de fundo: fundo não ocupa largura, então
   a linha continua sangrando de ponta a ponta e a seta fica onde estava.

   22px é o recuo do texto de nível 1; o filete cai exatamente sobre ele, e o
   texto do filho começa 15px depois. Não é decoração: é o degrau que diz "isto
   pertence àquilo" sem gastar a largura de leitura, que numa coluna de 344px
   é o recurso escasso. */
.menu-mobile-ol .mn-subgaveta {
    margin: 2px 0 6px;
    padding-left: 0;
    border-left: 0;
    background-image: linear-gradient(rgba(201, 162, 75, .28), rgba(201, 162, 75, .28));
    background-size: 1px 100%;
    background-position: 22px 0;
    background-repeat: no-repeat;
}

/* `.menu-mobile-body ul li {padding: 5px}` (site.css) só alcança os itens de
   SUBLISTA — os de nível 1 são filhos de um <div>, não de um <ul>. Eram esses
   5px de cada lado que ainda estreitavam a linha a cada nível e deixavam a
   seta do filho 5px à esquerda da do pai. O seletor precisa de três classes
   para passar da regra original, que tem duas. */
.menu-mobile-body ul.mn-subgaveta li {
    padding: 0;
}

.menu-mobile-ol .mn-subgaveta li a,
.menu-mobile-ol .mn-subgaveta .mn-gav__grupo {
    padding-left: 37px;
}

.menu-mobile-ol .mn-subgaveta li a:hover,
.menu-mobile-ol .mn-subgaveta li a:focus-visible {
    padding-left: 41px;
}

/* Terceiro nível (Comunidades → Rio Galo): mesmo degrau outra vez. */
.menu-mobile-ol .mn-subgaveta .mn-subgaveta {
    background-position: 37px 0;
}

.menu-mobile-ol .mn-subgaveta .mn-subgaveta li a {
    padding-left: 52px;
}

.menu-mobile-ol .mn-subgaveta .mn-subgaveta li a:hover,
.menu-mobile-ol .mn-subgaveta .mn-subgaveta li a:focus-visible {
    padding-left: 56px;
}

/* A alavanca da sublista acompanha a fonte menor do nível — 46px de alvo era a
   medida do nível 1 e, ao lado de uma linha de 35px de altura, virava um botão
   mais alto que a própria linha. */
.menu-mobile-ol .mn-subgaveta .mn-gav__alavanca {
    width: 40px;
}

.menu-mobile-ol .mn-subgaveta .mn-gav__seta {
    width: 15px;
    height: 15px;
}

/* O filete do ramo aberto acende junto com ele: sem isto, com quatro ramos na
   tela, nada dizia qual estava aberto além da seta virada. */
.menu-mobile-ol .mn-gav--aberto > .mn-gav__caixa > .mn-subgaveta {
    background-image: linear-gradient(var(--ref-gold-strong), rgba(201, 162, 75, .18));
}

/* A alavanca é um <button> de verdade e, sem estilo próprio de foco, o
   Chromium desenha o anel padrão dele — um retângulo claro que, sobre o
   azul-noite da gaveta, aparece como uma caixa cinza no meio da lista. Trocado
   por um realce da própria casa: um filete dourado e o mesmo fundo do hover.

   `:focus-visible` e não `:focus`: assim o realce aparece para quem navega por
   teclado e não fica preso na tela depois de um toque com o dedo. */
.menu-mobile-ol .mn-gav__alavanca:focus,
.menu-mobile-ol .mn-gav__grupo:focus,
.menu-mobile-ol li a:focus {
    outline: 0;
}

.menu-mobile-ol .mn-gav__alavanca:focus-visible,
.menu-mobile-ol .mn-gav__grupo:focus-visible,
.menu-mobile-ol li a:focus-visible {
    outline: 2px solid var(--ref-gold-strong);
    outline-offset: -2px;
    border-radius: 6px;
}

/* Toque no celular não deve deixar rastro cinza — a lista tem realce próprio. */
.menu-mobile-ol .mn-gav__alavanca,
.menu-mobile-ol .mn-gav__grupo,
.menu-mobile-ol li a {
    -webkit-tap-highlight-color: transparent;
}

/* ── Aparelho sem ponteiro ────────────────────────────────────────────────
   No celular o `:hover` GRUDA depois do toque em boa parte dos navegadores: a
   linha tocada continuava realçada, com o recuo maior, como se estivesse
   selecionada — e a alavanca ficava com um retângulo aceso no meio da lista.

   Aqui o realce de hover é desfeito e quem dá o retorno do toque passa a ser o
   `:active`, que dura o tempo do dedo na tela e não sobra depois. Os valores
   repetem os da regra base de propósito: é uma DESFEITA, e ela precisa saber
   ao que voltar. */
@media (hover: none) {

    .menu-mobile-ol li a:hover {
        background-color: transparent;
        color: rgba(255, 255, 255, .92);
        padding: 13px 16px 13px 22px;
    }

    .menu-mobile-ol .mn-subgaveta li a:hover {
        color: rgba(255, 255, 255, .66);
        padding: 8px 14px 8px 37px;
    }

    .menu-mobile-ol .mn-subgaveta .mn-subgaveta li a:hover {
        padding-left: 52px;
    }

    .menu-mobile-ol .mn-gav__grupo:hover {
        background-color: transparent;
        color: rgba(255, 255, 255, .92);
    }

    .menu-mobile-ol .mn-gav__alavanca:hover {
        background-color: transparent;
        color: var(--ref-gold-strong);
    }

    .menu-mobile.menu-input:hover {
        background-color: rgba(6, 15, 29, .92);
        border-color: rgba(201, 162, 75, .38);
    }

    .menu-mobile.menu-mobile-fliped:hover {
        background-color: rgba(6, 15, 29, .55);
        border-color: rgba(201, 162, 75, .55);
    }

    /* O retorno do toque, este sim momentâneo. */
    .menu-mobile-ol li a:active,
    .menu-mobile-ol .mn-gav__grupo:active,
    .menu-mobile-ol .mn-gav__alavanca:active {
        background-color: rgba(201, 162, 75, .18);
    }

    .menu-mobile.menu-input:active {
        background-color: var(--ref-navy-700);
    }
}

/* ═════════════════════════════════════════════════════════════════════════
   A FAIXA "ESTAMOS AO VIVO" NO CELULAR

   `.isLiveTopo` é criada pelo `site.js` e enfiada no começo do `.topo` quando a
   transmissão está no ar (e removida quando sai). As medidas do `site.css`
   foram desenhadas para o desktop: `height: 13px` com `margin-top: -11px`.

   No celular esse recuo negativo é maior que a própria faixa — ela nasce em
   `y: -6px`, ou seja, quase metade dela fica ACIMA da janela, cortada. Some
   ainda um `line-height: 14px` dentro de uma caixa de 13px, e o texto encosta
   nas duas bordas ao mesmo tempo.

   Aqui a faixa cabe inteira e o texto respira. 766px é o mesmo ponto de corte
   que faz o botão da gaveta aparecer — é o que este site chama de celular.
   ═════════════════════════════════════════════════════════════════════════ */
@media screen and (max-width: 766px) {

    .isLiveTopo {
        height: 20px;
        margin-top: -4px;
        line-height: 19px;
    }
}

/* ═════════════════════════════════════════════════════════════════════════
   O CORPO DO ARTIGO NÃO PODE SER MAIS LARGO QUE A COLUNA

   Sintoma: no celular a galeria de fotos passava da tela — em 390px ela abria
   com 432px de largura, 57px caindo fora da direita (o contador "7 / 7" e a
   seta do lado ficavam cortados).

   A galeria era a VÍTIMA, não a causa. A largura vinha de cima:

     ul.panel.container  390  (padding 15+15)
       div.capa-coluna   360
         section.pagina_conteudo   432   ← estoura aqui
           div.art-blocos          432
             div.art-bloco--galeria  432  → iframe width=100%  → 432

   A `<section>` do conteúdo é `display: table` (`site-setorescapa.css`, e a
   regra desta casa logo acima dá a ela `width: 100%`). Só que, para uma caixa
   de tabela, largura declarada é PISO, não teto: ela nunca encolhe abaixo da
   própria largura mínima de conteúdo. E a mínima era 432px por causa de UMA
   linha do texto — o endereço da fonte, colado inteiro:

     "Fonte: Diocese de Criciúma – https://www.diocesecriciuma.com.br/noticias/
      diocese-de-criciuma-celebra-a-instituicao-do-ministerio-de-catequista-…"

   Sem ponto de quebra, esse endereço é UMA palavra. A tabela cresceu para
   caber a palavra e arrastou tudo o que estava dentro dela — texto, foto e
   galeria — para fora da tela.

   ── As duas regras ──────────────────────────────────────────────────────
   `overflow-wrap: anywhere` deixa a palavra quebrar, e é `anywhere` e não
   `break-word` de propósito: as duas quebram a palavra na hora de desenhar,
   mas só `anywhere` também reduz a LARGURA MÍNIMA da caixa — que é justamente
   o número que a tabela estava seguindo. Com `break-word` o texto quebraria e
   a tabela continuaria com 432px.

   `max-width: 100%` é a trava estrutural: tabela respeita max-width. Se um dia
   entrar outra palavra impossível de quebrar (um código, uma tabela larga), o
   conteúdo transborda DENTRO da coluna em vez de empurrar a coluna para fora
   da tela.

   Medido antes e depois em 360/390/430/768/1280px: a coluna passa a acompanhar
   a tela (330/360/400/404), e o desktop de 1280 em diante não muda nada — lá a
   coluna já era 693px, bem acima da mínima.
   ═════════════════════════════════════════════════════════════════════════ */
.art-blocos {
    overflow-wrap: anywhere;
}

section.secao-diagramada .capa-coluna > section {
    max-width: 100%;
}