/* =============================================================================
   RIOMAFRA MIX — LAYOUT 2026
   Folha de fundacao. Carregada DEPOIS de style2023.css (ver links.php).

   Enquanto a conversao das paginas nao termina, as duas folhas convivem: todo
   markup novo usa o prefixo .rmx-, que o CSS legado nao alcanca, e nenhuma
   regra daqui redefine classe do layout antigo. style2023.css so sai do
   links.php quando a ultima pagina estiver convertida.

   Tokens tirados de templates/lovable/style_lovable.css. Cada cor vai duas
   vezes: hex primeiro (navegador antigo) e oklch depois (o valor de origem,
   que o navegador moderno usa). Nao mexa em uma sem mexer na outra.
   ========================================================================== */

/* -----------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */
:root {
    /* marca */
    --rmx-laranja: #ff7527;
    --rmx-laranja: oklch(0.72 0.19 45);
    --rmx-rosa: #ff0059;
    --rmx-rosa: oklch(0.65 0.26 15);
    --rmx-magenta: #e30091;
    --rmx-magenta: oklch(0.58 0.28 350);

    --rmx-gradiente: linear-gradient(135deg, #ff7527 0%, #ff0059 45%, #e30091 100%);
    --rmx-gradiente: linear-gradient(135deg, oklch(0.72 0.19 45) 0%, oklch(0.65 0.26 15) 45%, oklch(0.58 0.28 350) 100%);
    --rmx-gradiente-suave: linear-gradient(135deg, rgba(255, 117, 39, 0.08) 0%, rgba(227, 0, 145, 0.08) 100%);

    /* superficie e texto */
    --rmx-fundo: #fdfbfa;
    --rmx-fundo: oklch(0.99 0.003 60);
    --rmx-superficie: #f8f4f2;
    --rmx-superficie: oklch(0.97 0.005 60);
    --rmx-cartao: #ffffff;
    --rmx-texto: #10111a;
    --rmx-texto: oklch(0.18 0.02 280);
    --rmx-tinta: #090a13;
    --rmx-tinta: oklch(0.15 0.02 280);
    --rmx-tinta-suave: #454753;
    --rmx-tinta-suave: oklch(0.4 0.02 280);
    --rmx-apagado: #61626f;
    --rmx-apagado: oklch(0.5 0.02 280);

    /* apoio */
    --rmx-primaria: #ff0059;
    --rmx-primaria: oklch(0.65 0.26 15);
    --rmx-mudo: #f7f0eb;
    --rmx-mudo: oklch(0.96 0.01 60);
    --rmx-acento: #ffe4df;
    --rmx-acento: oklch(0.94 0.03 30);
    --rmx-borda: #e9e3df;
    --rmx-borda: oklch(0.92 0.008 60);
    --rmx-perigo: #e7000b;
    --rmx-perigo: oklch(0.577 0.245 27.325);

    /* sombra */
    --rmx-sombra-cartao: 0 1px 3px rgba(0, 0, 0, 0.06), 0 8px 24px -12px rgba(0, 0, 0, 0.08);
    --rmx-sombra-marca: 0 10px 40px -12px rgba(255, 0, 89, 0.35);

    /* raio — a Lovable parte de 0.5rem */
    --rmx-raio-sm: 4px;
    --rmx-raio: 8px;
    --rmx-raio-lg: 12px;
    --rmx-raio-xl: 16px;
    --rmx-raio-2xl: 20px;
    --rmx-pilula: 999px;

    /* tipografia */
    --rmx-fonte-titulo: "Barlow Condensed", "Arial Narrow", system-ui, sans-serif;
    --rmx-fonte-texto: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
    --rmx-fonte-materia: "Playfair Display", Georgia, serif;

    /* medidas */
    /**
     * A LARGURA DO SITE E A LARGURA DO BANNER (04/09/2026).
     *
     * 1172 = 1140 de conteudo + 16 de respiro de cada lado. Os 1140 nao sao
     * numero escolhido: e a largura em que TODO banner do site ja foi enviado,
     * herdada do boxed do layout anterior. Com os 1280 daqui (1248 uteis), a
     * pagina era 108px mais larga que o banner, e o banner nascia recuado 54px
     * de cada lado em relacao aos cards logo abaixo — desalinhamento visivel na
     * home, onde banner e grade se encostam.
     *
     * A alternativa era reenviar/reconfigurar todos os banners: nao vale o
     * preco, e o desenho e responsivo, entao o conteudo so encolhe junto.
     *
     * MEXER AQUI MEXE NO SITE INTEIRO — e de proposito: a largura e uma so, e
     * este e o unico lugar onde ela existe. Se algum dia os banners mudarem de
     * medida, muda esta linha e mais nada.
     */
    --rmx-largura: 1172px;
    --rmx-respiro: 16px;
    --rmx-topo-altura: 0px; /* a fase 1 sobrescreve com a altura real do cabecalho */

    /**
     * ESCALA DE ESPACAMENTO VERTICAL — TRES degraus, e so tres.
     *
     *   secao   48px  entre blocos de assunto diferente (uma banda e a
     *                 proxima, o ultimo banner e o rodape);
     *   bloco   32px  dentro de um mesmo assunto (a grade e o botao que a
     *                 fecha, o cabecalho e o conteudo);
     *   item    24px  entre irmaos de uma lista ou grade.
     *
     * Foram medidos 8, 24, 30, 32, 40, 50, 56 e 64px espalhados pela home, e
     * varios deles somando entre si: o ultimo banner ficava a 152px do rodape e
     * a 40px do botao logo acima, e o "ver todas" nascia colado na grade. Vao
     * que muda sem motivo faz o olho procurar o motivo.
     *
     * O DEGRAU DE CIMA DESCEU DE 64 PARA 48 em 28/08/2026, a pedido ("ajustar
     * espacamentos"). O ajuste e no TOKEN e nao nas dezenas de regras que o
     * leem: a escala continua sendo tres degraus, so que menos aberta, e a
     * proporcao entre eles (2:1,33:1) se mantem. Mexer regra a regra e como o
     * conjunto de 8/24/30/32/40/50/56/64 nasceu da primeira vez.
     *
     * Numero solto so entra aqui com razao escrita ao lado. Se um vao novo
     * parecer necessario, quase sempre o que falta e zerar o de alguem.
     */
    --rmx-vao-secao: 48px;
    --rmx-vao-bloco: 32px;
    --rmx-vao-item: 24px;

    /**
     * ALTURA DE CAMPO — UMA para o site inteiro.
     *
     * Campo de formulario, campo de busca e caixa de filtro mediam 40, 44, 46 e
     * 50px conforme a tela, e o desencontro aparecia PIOR quando dois campos
     * ficavam LADO A LADO: no filtro da publicidade legal o campo de data saia
     * mais alto que os tres selects ao lado dele.
     *
     * A causa do caso da data e o `min-height` com `height: auto`: quem manda
     * ali e a altura do CONTEUDO, e o miolo de um `input[type=date]` (o editor
     * de dia/mes/ano do navegador) e mais alto que o de um `<select>`. Duas
     * caixas com a mesma regra escrita davam alturas diferentes na tela.
     *
     * Por isso aqui e `height` fixo e nao `min-height`: com altura declarada o
     * conteudo deixa de opinar, e todo campo do site mede o mesmo. A <textarea>
     * e a unica excecao (volta a `height: auto`, secao 9) — ela cresce por
     * natureza.
     */
    --rmx-campo-altura: 44px;

    /**
     * VAO ENTRE CAMPOS — UMA para o site inteiro, mesma ideia do
     * `--rmx-campo-altura` logo acima.
     *
     * O `.form-group` empilhado (login, "Meus dados", os quatro formularios de
     * lead) sempre usou 16px de `margin-bottom`. O problema apareceu nas telas
     * em GRADE: o `.rmx-lead-form` tinha `gap: 0 20px` — 16 vertical (o
     * margin-bottom) contra 20 horizontal (o gap) NO MESMO FORMULARIO — e o
     * `.rmx-conta-form-grade` do "Meus dados" tinha `gap: 4px 16px`, que SOMAVA
     * com o margin-bottom do form-group: 4 + 16 = 20 vertical contra 16
     * horizontal, o contrario do desencontro do lead. Duas telas, dois
     * desencontros diferentes, nenhuma batendo com a outra nem consigo mesma.
     *
     * A correcao nao e so trocar os numeros por 16 — e fazer as grades pararem
     * de SOMAR gap com margin-bottom: o row-gap de ambas vira 0 e quem abre o
     * espaco vertical passa a ser sempre o `margin-bottom` do form-group, a
     * mesma regra que ja regia os formularios empilhados. O gap so sobra para o
     * eixo horizontal, onde nao ha outra regra concorrendo.
     */
    --rmx-vao-campo: 16px;

    /**
     * ENTRELETRA DOS TITULOS (02/09/2026, a pedido).
     *
     * Sao DOIS valores, e a diferenca entre eles nao e gosto: caixa alta pede
     * mais respiro entre letras que caixa mista — as maiusculas tem todas a
     * mesma altura e encostam umas nas outras sem os ganchos e as barrigas que
     * separam as minusculas. Numa condensada como a Barlow os dois casos
     * pediam ajuda, so que em doses diferentes.
     *
     * `--rmx-tracking-alta` vai nos cabecalhos de secao (26/21px, maiusculas);
     * `--rmx-tracking-chamada` nas chamadas de materia dos cartoes (18-30px,
     * caixa mista), onde 0.5px ja abriria demais.
     *
     * O TITULO DA MATERIA ABERTA (`.rmx-materia-titulo`, 30/48px) FICA DE FORA
     * de proposito: entreletra anda ao contrario do corpo — quanto maior o
     * tipo, menos ela precisa —, e e por isso que ali continua valendo o
     * -0.01em da regra de h1..h5 da secao 2.
     */
    --rmx-tracking-alta: 0.5px;
    --rmx-tracking-chamada: 0.3px;

    /**
     * VERDE DE CONFIRMACAO — as duas UNICAS cores do site fora da familia
     * laranja/rosa/magenta, e existem por um motivo so: a marca inteira e
     * vermelho-rosa, entao um aviso de ERRO pintado com ela nao se distinguiria
     * de um aviso de SUCESSO pintado com ela. O erro fica na cor da marca (que
     * e o que ela ja significa no site: atencao aqui), e a confirmacao precisou
     * de um tom proprio. Ver a secao 25.
     */
    --rmx-ok: #12805c;
    --rmx-ok-fundo: #e6f4ee;
}

/* -----------------------------------------------------------------------------
   2. BASE
   Escopo: so o que carrega a classe .rmx-pg (posta no <body> pelo index.php a
   partir da fase 1). Sem isso, uma pagina ainda nao convertida continuaria
   com a tipografia e o fundo do layout antigo.
   -------------------------------------------------------------------------- */
.rmx-pg {
    color: var(--rmx-texto);
    background: var(--rmx-fundo);
    font-family: var(--rmx-fonte-texto);
    font-size: 16px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.rmx-pg h1,
.rmx-pg h2,
.rmx-pg h3,
.rmx-pg h4,
.rmx-pg h5 {
    font-family: var(--rmx-fonte-titulo);
    letter-spacing: -0.01em;
    line-height: 1.1;
}

/**
 * ENTRELETRA POSITIVA NOS TITULOS DE LEITURA (02/09/2026, a pedido) — os
 * cabecalhos de secao e as chamadas de materia dentro dos cartoes. O porque de
 * serem dois valores esta escrito no `--rmx-tracking-alta` da secao 1.
 *
 * O `.rmx-pg` NA FRENTE E OBRIGATORIO, e nao enfeite: a regra de h1..h5 logo
 * acima vale (0,1,1) e vence QUALQUER `.uma-classe` sozinha, que vale (0,1,0)
 * — ordem no arquivo nao desempata especificidade. Era exatamente o que
 * acontecia com o `.rmx-secao-titulo`, que declarava `letter-spacing: -0.01em`
 * havia meses sem nunca ter efeito: o valor que chegava na tela era o da regra
 * de h1..h5, por acaso identico. Aquela linha saiu de la; quem manda agora e
 * esta, que empata em elementos e ganha em classes.
 *
 * NAO ENTRAM AQUI: `.rmx-materia-titulo` (titulo da materia aberta — grande
 * demais, ver a secao 1), `.rmx-maislidas-titulo` e `.rmx-vizinha-titulo` (nao
 * sao cartao; sao lista numerada e navegacao de rodape de materia).
 */
.rmx-pg .rmx-secao-titulo {
    letter-spacing: var(--rmx-tracking-alta);
}

.rmx-pg .rmx-hero-titulo,
.rmx-pg .rmx-cartao-titulo,
.rmx-pg .rmx-item-titulo,
.rmx-pg .rmx-mini-titulo {
    letter-spacing: var(--rmx-tracking-chamada);
}

/* O reset do bootstrap 3 deixa a11y de lado no :focus. Devolve um anel visivel
   que segue a cor da marca, sem interferir no clique com o mouse. */
.rmx-pg :focus-visible {
    outline: 2px solid var(--rmx-primaria);
    outline-offset: 2px;
}

/* -----------------------------------------------------------------------------
   3. LAYOUT
   .rmx-container substitui o .container do bootstrap no markup novo. Nasceu com
   max-w-7xl (1280px) da Lovable e hoje mede 1172 — 1140 uteis, a largura dos
   banners; ver a nota no token --rmx-largura. Nao mexo no .container do
   bootstrap (1170) justamente para nao mover as paginas ainda nao convertidas,
   e de quebra as duas medidas agora praticamente empatam.
   -------------------------------------------------------------------------- */
.rmx-container {
    width: 100%;
    max-width: var(--rmx-largura);
    margin: 0 auto;
    padding-left: var(--rmx-respiro);
    padding-right: var(--rmx-respiro);
}

/**
 * =============================================================================
 * O VAO DE BORDA DA PAGINA MORA AQUI, E SO AQUI (26/08/2026)
 * =============================================================================
 *
 * `<content>` e o involucro que o index.php poe em volta da pagina inteira,
 * entre o cabecalho e o rodape.
 *
 * `display: block` NAO E ENFEITE: `content` e um elemento que o HTML nao
 * conhece mais (era do Shadow DOM v0), e elemento desconhecido nasce
 * `display: inline`. Enquanto ele foi inline, ele nao continha os filhos como
 * bloco e nao dava para resolver o pe de nenhuma pagina por ele — dai o vao de
 * borda ter acabado espalhado por cinco classes diferentes, cada uma com um
 * numero.
 *
 * O QUE ISTO SUBSTITUI, e o que cada um media antes:
 *
 *   .rmx-home-topo               32 em cima
 *   .rmx-listagem                32 em cima, 64 embaixo
 *   .rmx-conta                   64 em cima e embaixo
 *   .box-toda-noticia-detalhe    50 em cima, 20 embaixo (style2023.css)
 *
 * Ou seja: quatro topos diferentes (32, 50, 64 — e 112 nas paginas que ainda
 * ganhavam banner de topo, que vinha cru com 50 inline + 30) e um pe que sempre
 * SOMAVA com o `margin-top: 64` do rodape, dando 128. Uma pagina abria com 32 e
 * fechava com 128.
 *
 * Agora sao 32 dos dois lados, num lugar so. Mexer no vao de borda do site
 * inteiro e mexer nestas duas linhas.
 */
content {
    display: block;
    padding-top: var(--rmx-vao-bloco);
    padding-bottom: var(--rmx-vao-bloco);
}

/* Houve aqui um .rmx-container-estreito (896px) e um .rmx-container-medio
   (1152px). Sairam em 24/08/2026: usados na pagina de noticia junto com o
   .rmx-container, davam TRES larguras a uma pagina so, e o conteudo abria e
   fechava conforme se rolava. O layout antigo nunca fez isso — tinha um
   .container unico e resolvia a proporcao em colunas dentro dele, que e o que
   o .rmx-materia-corpo faz agora. Largura nova comeca por ai: uma so por
   pagina, e a variacao por coluna. */

/* Grades que o grid do bootstrap 3 nao expressa (coluna fixa ao lado de coluna
   fluida). Todas caem para uma coluna so abaixo de 992px. */
.rmx-grid {
    display: grid;
    gap: 24px;
}

.rmx-grid-3 {
    grid-template-columns: 1fr;
}

/* O vao entre a coluna de conteudo e a barra lateral e de BLOCO: sao duas
   coisas do mesmo assunto lado a lado. Eram 40px, fora da escala. */
.rmx-grid-conteudo-lateral {
    grid-template-columns: 1fr;
    gap: var(--rmx-vao-bloco);
}

/* Os pontos de quebra sao os do desenho de origem (Tailwind: sm 640, md 768,
   lg 1024), e NAO os do bootstrap (576/768/992) que o resto do site usa. Foi
   por misturar os dois que apareceu uma faixa de larguras em que o cartao
   trocava de forma na hora errada. */
@media (min-width: 1024px) {
    .rmx-grid-3 {
        grid-template-columns: repeat(3, 1fr);
    }
    .rmx-grid-conteudo-lateral {
        grid-template-columns: minmax(0, 1fr) 320px;
    }
}

/**
 * GRADE DE QUATRO — uma ESCADA de 1 → 2 → 3 → 4 colunas, e nao um salto de 4
 * direto para 2. Usada nas bandas de cidade, no "Leia tambem" da home e nas
 * listagens de noticia.
 *
 * A conta que define os degraus e a LARGURA DE CADA CARD, e nao o nome do
 * breakpoint. Com o container descontando 32px de respiro e 24px por vao:
 *
 *   4 colunas a 768px  →  172px por card   estreito demais: mais magro que a
 *                                          foto do .rmx-item-mini, e titulo de
 *                                          tres linhas vira cinco;
 *   4 colunas a 992px  →  222px por card   ainda apertado — foi o que apareceu
 *                                          na conferencia;
 *   4 colunas a 1200px →  270px por card   e a medida em que o card respira.
 *
 * Dai os degraus abaixo. O ponto de 900px e o meio do caminho para 3 colunas
 * (~285px cada), e o de 600px para 2. Sao medidas proprias desta grade, e nao
 * os breakpoints do desenho (640/768/1024) — aqui o que manda e a aritmetica do
 * card, nao a convencao.
 */
@media (min-width: 600px) {
    .rmx-grid-md-4 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 900px) {
    .rmx-grid-md-4 {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (min-width: 1200px) {
    .rmx-grid-md-4 {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (min-width: 768px) {
    .rmx-grid-md-3 {
        grid-template-columns: repeat(3, 1fr);
    }
    .rmx-grid-md-2 {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* -----------------------------------------------------------------------------
   4. TAG DE CATEGORIA
   A pilula de gradiente e a marca registrada do desenho. Hoje ela existe como
   style="" repetido em dezenas de lugares (home.php, listagens, ajax); aqui
   vira classe, e o style inline sai junto com cada pagina convertida.
   -------------------------------------------------------------------------- */
.rmx-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: var(--rmx-pilula);
    background: var(--rmx-gradiente);
    box-shadow: var(--rmx-sombra-marca);
    color: #fff;
    font-family: var(--rmx-fonte-texto);
    font-size: 10px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
}

a.rmx-tag:hover,
a.rmx-tag:focus {
    color: #fff;
    text-decoration: none;
}

.rmx-tag-neutra {
    background: var(--rmx-cartao);
    border: 1px solid var(--rmx-borda);
    box-shadow: none;
    color: var(--rmx-tinta-suave);
    font-size: 12px;
    letter-spacing: 0;
    text-transform: none;
    padding: 4px 12px;
    transition: border-color 0.2s ease, color 0.2s ease;
}

a.rmx-tag-neutra:hover,
a.rmx-tag-neutra:focus {
    border-color: var(--rmx-primaria);
    color: var(--rmx-primaria);
}

/* -----------------------------------------------------------------------------
   5. BOTOES
   -------------------------------------------------------------------------- */
.rmx-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: auto;
    min-height: 40px;
    padding: 8px 20px;
    border: 1px solid transparent;
    border-radius: var(--rmx-pilula);
    background: var(--rmx-mudo);
    color: var(--rmx-texto);
    font-family: var(--rmx-fonte-texto);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
    text-align: center;
    text-decoration: none;
    text-shadow: none;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.rmx-btn:hover,
.rmx-btn:focus {
    color: var(--rmx-texto);
    text-decoration: none;
}

.rmx-btn-marca {
    background: var(--rmx-gradiente);
    box-shadow: var(--rmx-sombra-marca);
    color: #fff;
}

.rmx-btn-marca:hover,
.rmx-btn-marca:focus {
    color: #fff;
    transform: translateY(-1px);
}

.rmx-btn-contorno {
    background: transparent;
    border-color: var(--rmx-borda);
    color: var(--rmx-texto);
}

.rmx-btn-contorno:hover,
.rmx-btn-contorno:focus {
    background: var(--rmx-mudo);
}

/* Link de texto no tom da marca — o "Ver todas" do fim de cada secao. */
.rmx-link {
    color: var(--rmx-primaria);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

.rmx-link:hover,
.rmx-link:focus {
    color: var(--rmx-primaria);
    text-decoration: underline;
}

/* -----------------------------------------------------------------------------
   6. CABECALHO DE SECAO
   Barrinha de gradiente + titulo condensado + "ver todas" a direita.
   -------------------------------------------------------------------------- */
.rmx-secao {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: var(--rmx-vao-item);
    padding-bottom: 12px;
    border-bottom: 1px solid var(--rmx-borda);
}

/* A entreletra deste titulo NAO mora aqui: mora na regra `.rmx-pg
   .rmx-secao-titulo` da secao 2, que e a unica com especificidade para vencer
   o h1..h5. O `letter-spacing: -0.01em` que ficava nesta lista era letra
   morta. */
.rmx-secao-titulo {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
    font-family: var(--rmx-fonte-titulo);
    font-size: 26px;
    font-weight: 900;
    text-transform: uppercase;
}

.rmx-secao-titulo::before {
    content: "";
    flex: 0 0 auto;
    width: 6px;
    height: 24px;
    border-radius: var(--rmx-pilula);
    background: var(--rmx-gradiente);
}

/* HAVIA aqui uma regra `.rmx-secao-titulo span` que montava titulo de DUAS
   linhas — uma primeira menor ("Noticias por" / "As mais lidas") sobre a
   segunda cheia ("CIDADES" / "da semana"). Saiu em 25/08/2026 junto com os dois
   unicos usos dela.

   Motivo: eram os dois unicos cabecalhos de secao do site com essa forma. Ao
   lado de "Ultimas notícias", "Leia também" e dos nomes de categoria — todos
   uma linha so —, eles destoavam, e a primeira linha lia como rotulo de outra
   coisa colado por cima do titulo. Os textos viraram "Notícias por cidades" e
   "As mais lidas da semana", numa linha.

   Se um titulo de duas linhas voltar a fazer falta, ele precisa valer para
   TODOS os cabecalhos, e nao para dois. */

/* Cabecalho de secao que vem depois de outro bloco dentro da MESMA faixa (o
   "As mais lidas da semana", logo abaixo do "Leia tambem"). Era um
   style="margin-top: 48px" solto no markup. */
.rmx-secao-afastada {
    margin-top: var(--rmx-vao-secao);
}

/**
 * CABECALHO DE BLOCO DENTRO DE UMA PAGINA QUE JA TEM TITULO — `.rmx-secao-sub`.
 *
 * As vitrines (`noticia/categoria`, `noticia/cidade`, `noticia/colunista`) tem
 * DOIS niveis de titulo na mesma tela: o da pagina ("Noticias por categoria") e
 * o de cada banda ("Policia", "Esporte"...). Os dois usavam o mesmo
 * `.rmx-secao-titulo`, e o resultado era que o titulo da pagina nao lia como
 * titulo de pagina — parecia so mais uma categoria, a primeira da lista.
 *
 * O DESEMPATE JA EXISTIA NA HOME e e ele que esta repetido aqui: la o
 * "Noticias por cidades" e o cabecalho grande e cada cidade e o
 * `.rmx-cidade-nome` — menor, sem a barrinha de gradiente, com um filete de 2px
 * embaixo. Mesma relacao, mesma pintura.
 *
 * O nivel de baixo e que muda, e nao o de cima: o titulo de pagina continua
 * sendo o `.rmx-secao-titulo` de sempre, o mesmo do resto do site (busca,
 * obituario, "Ultimas noticias" da home), entao nada mais precisa acompanhar.
 *
 * E POR ISSO QUE ISTO NAO VALE NA HOME. La cada categoria e uma secao de
 * primeiro nivel da pagina — nao ha titulo acima dela para disputar —, e
 * rebaixa-la deixaria a home inteira sem hierarquia nenhuma.
 */
.rmx-secao-sub {
    padding-bottom: 8px;
    border-bottom-width: 2px;
}

.rmx-secao-sub .rmx-secao-titulo {
    gap: 0;
    font-size: 17px;
    font-weight: 700;
}

/* Sem a barrinha de gradiente: ela e a marca do titulo de primeiro nivel, e e o
   que mais confundia os dois niveis quando os dois a tinham. */
.rmx-secao-sub .rmx-secao-titulo::before {
    display: none;
}

.rmx-secao-sub .rmx-link {
    font-size: 13px;
}

@media (max-width: 767px) {
    .rmx-secao-sub .rmx-secao-titulo {
        font-size: 16px;
    }
}

@media (max-width: 767px) {
    .rmx-secao-titulo {
        font-size: 21px;
    }

    /**
     * TITULO E BOTAO NO CELULAR (02/09/2026, a pedido).
     *
     * O par so aparece na conversa das duas telas de detalhe ("N Comentarios"
     * e "Mensagens de apoio", cada um com um "Fazer login" ao lado) — em todo
     * o resto do site quem ocupa a vaga da direita e o `.rmx-link` "Ver
     * todas", que e texto.
     *
     * DUAS COISAS DESENCONTRAVAM ESSE PAR:
     *
     * 1. TAMANHO. O `.rmx-btn` cheio mede 40px de altura com 14px de texto.
     *    Ao lado de um titulo de 21px condensado, a pilula colorida pesava
     *    mais que o titulo e virava o assunto do cabecalho — o contrario da
     *    hierarquia. Compacto (32px, 13px) ele volta a ter com o titulo mais
     *    ou menos a relacao que o "Ver todas" tem em todas as outras secoes.
     *
     * 2. ALINHAMENTO. O `.rmx-secao` alinha pelo PE (`flex-end`), e isso so
     *    faz sentido entre dois TEXTOS, que compartilham linha de base. Uma
     *    pilula nao tem linha de base: encostada no pe do titulo ela desce o
     *    proprio miolo junto, e e dai que vinha a impressao de titulo alto
     *    demais. Centralizados, os dois leem como um par.
     *
     * O `align-items` vale para o `.rmx-secao` inteiro, e nao so para o que
     * tem botao: entre um titulo de 21px e um link de 14px a diferenca entre
     * centro e pe e de uns 4px, e centro tambem e o melhor dos dois ali.
     */
    .rmx-secao {
        align-items: center;
    }

    .rmx-secao .rmx-btn {
        min-height: 32px;
        padding: 5px 14px;
        font-size: 13px;
    }
}

/* -----------------------------------------------------------------------------
   7. CARTAO
   -------------------------------------------------------------------------- */
/**
 * CARTAO — TODOS DA MESMA ALTURA numa mesma fileira.
 *
 * Como item de grade o cartao ja esticava ate a altura da fileira (o `stretch`
 * e o padrao), mas o CONTEUDO nao acompanhava: um titulo de uma linha ao lado
 * de um de tres, e a linha de apoio que so existe em alguns, deixavam a data em
 * altura diferente em cada card e sobrava fundo branco embaixo de uns e nao de
 * outros. Era uma fileira de caixas iguais com o miolo desalinhado.
 *
 * Tres coisas, juntas, resolvem:
 *   1. `flex-direction: column` no cartao e o corpo com `flex: 1` — o corpo
 *      ocupa o que sobra em vez de parar na altura do texto;
 *   2. `min-height` de tres linhas no titulo (o .rmx-linhas-3 corta o que passa
 *      disso; o min-height reserva o espaco de quem nao chega la);
 *   3. a data encostada no pe por `margin-top: auto`.
 */
.rmx-cartao {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: var(--rmx-raio-xl);
    background: var(--rmx-cartao);
    box-shadow: var(--rmx-sombra-cartao);
    color: inherit;
    text-decoration: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.rmx-cartao:hover,
.rmx-cartao:focus {
    color: inherit;
    text-decoration: none;
    transform: translateY(-4px);
}

.rmx-cartao-corpo {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    align-items: flex-start;
    padding: 20px;
}

/* 3 x 1.25 (o line-height logo abaixo) = a altura exata de tres linhas. Em `em`
   e nao em px: o titulo muda de corpo em algumas variantes do cartao, e a
   reserva tem de acompanhar. */
.rmx-cartao-titulo {
    margin: 8px 0 0;
    min-height: 3.50em;
    font-family: var(--rmx-fonte-titulo);
    font-size: 19px;
    font-weight: 700;
    line-height: 1.25;
    transition: color 0.2s ease;
}

/* A data fecha o cartao encostada no pe. `:last-child` sobe a especificidade
   acima da regra `.rmx-cartao-titulo + .rmx-meta` (secao 8), que da 12px de
   respiro no topo — aqui esse respiro vira o vao inteiro que sobrar, e o
   padding-top devolve o minimo para a data nao encostar no titulo. */
.rmx-cartao > .rmx-cartao-corpo > .rmx-meta:last-child {
    margin-top: auto;
    padding-top: 12px;
}

.rmx-cartao:hover .rmx-cartao-titulo {
    color: var(--rmx-primaria);
}

/* Moldura de imagem em proporcao fixa. Evita o pulo de layout enquanto a foto
   carrega — hoje o card cresce quando a imagem chega. */
/* `display: block` e `width: 100%` sao explicitos de proposito: a figura
   aparece dentro de cartao block, de item de grid e de item de flex, e em
   contexto flex ela nao estica sozinha na direcao principal. Sem isso a foto
   fica com a largura natural da imagem e sobra fundo do lado. */
.rmx-figura {
    position: relative;
    display: block;
    width: 100%;
    overflow: hidden;
    background: var(--rmx-mudo);
}

.rmx-figura-4x3 {
    aspect-ratio: 4 / 3;
}

.rmx-figura-16x9 {
    aspect-ratio: 16 / 9;
}

.rmx-figura img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.rmx-cartao:hover .rmx-figura img {
    transform: scale(1.05);
}

/* Tag de categoria sobreposta ao canto da foto (cards das bandas). Fica dentro
   da .rmx-figura, que e position: relative.

   O card sem foto valida nao imprime a figura — e a tag iria junto. Por isso o
   markup mantem a tag no corpo quando nao ha foto: sao dois lugares possiveis
   para o mesmo elemento, nao dois elementos. */
.rmx-figura-tag {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 1;
}

/* Veu escuro por cima da foto, para texto sobreposto (hero da home). E
   gradiente e nao cor chapada: o topo da foto continua visivel. */
.rmx-veu {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.3) 45%, rgba(0, 0, 0, 0) 100%);
}

/* -----------------------------------------------------------------------------
   8. LINHA DE META (relogio + data + tempo de leitura)
   -------------------------------------------------------------------------- */
.rmx-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    color: var(--rmx-apagado);
    font-size: 12px;
}

/**
 * RESPIRO ANTES DA DATA — 16px, e nao os 12 de antes.
 *
 * A data e o titulo sao textos de linha apertada (line-height 1.15/1.25), e
 * doze pixels entre duas coisas assim leem como zero: na conferencia a data
 * parecia colada na ultima linha do titulo. Vale para todas as tres origens
 * possiveis — titulo, chamada ou tag —, porque o card nem sempre tem as tres.
 */
.rmx-cartao-titulo + .rmx-meta,
.rmx-item-titulo + .rmx-meta,
.rmx-item-apoio + .rmx-meta {
    margin-top: 16px;
}

.rmx-meta .fa {
    font-size: 12px;
}

.rmx-meta-claro {
    color: rgba(255, 255, 255, 0.7);
}

/* -----------------------------------------------------------------------------
   9. FORMULARIOS
   Escopado em .rmx-form para nao disputar com o .bx-form do css/forms/forms.css,
   que declara altura e fundo com especificidade (0,2,1) e ganharia de um
   seletor de classe unica.
   -------------------------------------------------------------------------- */
.rmx-form .form-group {
    margin-bottom: var(--rmx-vao-campo);
}

.rmx-form label {
    display: block;
    margin-bottom: 6px;
    color: var(--rmx-tinta-suave);
    font-size: 13px;
    font-weight: 600;
}

.rmx-form input[type="text"],
.rmx-form input[type="email"],
.rmx-form input[type="tel"],
.rmx-form input[type="url"],
.rmx-form input[type="number"],
.rmx-form input[type="date"],
.rmx-form input[type="password"],
.rmx-form input[type="search"],
.rmx-form input[type="file"],
.rmx-form select,
.rmx-form textarea {
    width: 100%;
    /**
     * ALTURA DECLARADA, e nao `min-height` com `height: auto`.
     *
     * O `height: auto` de antes existia para desfazer o `height: 50px` que o
     * `.bx-form` do css/forms/forms.css crava nas quatro telas de lead (as
     * unicas que carregam as duas classes juntas): os dois seletores empatam em
     * especificidade (0,2,1) e esta folha vem depois, entao vence a altura
     * daqui — mas so a que estiver DECLARADA, e `min-height` nao substitui
     * `height`. O campo do "Fale conosco" media 50px contra os 44 do resto.
     *
     * Um `height` de verdade resolve as DUAS coisas de uma vez: desfaz o 50px
     * do `.bx-form` pela mesma via e tira do conteudo o poder de decidir a
     * altura — que era a causa do `input[type=date]` sair mais alto que o
     * `<select>` ao lado dele no filtro da publicidade legal. Ver o
     * `--rmx-campo-altura` na secao 1.
     *
     * A <textarea> entra nesta lista pela pintura (borda, raio, fundo) e sai da
     * altura logo abaixo.
     */
    height: var(--rmx-campo-altura);
    padding: 10px 14px;
    border: 1px solid var(--rmx-borda);
    border-radius: var(--rmx-raio);
    background: var(--rmx-cartao);
    box-shadow: none;
    color: var(--rmx-texto);
    font-family: var(--rmx-fonte-texto);
    font-size: 14px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.rmx-form textarea {
    /* A UNICA excecao a altura de campo: a caixa de texto cresce com o que se
       escreve nela, e o `height` fixo da regra acima a deixaria de 44px. */
    height: auto;
    min-height: 120px;
    /**
     * SEM ALCA DE REDIMENSIONAR — pedido de 28/08/2026, e o mesmo que o
     * `.bx-form textarea` do css/forms/forms.css sempre fez (`resize: none
     * !important`). Aqui houve uma passagem por `resize: vertical`; ela sai.
     *
     * O que substitui a alca ja esta declarado: `height: auto` + `min-height`,
     * e o teto de 50vh no `.rmx-lead-form textarea`. A caixa nasce com espaco
     * para umas cinco linhas e rola por dentro a partir dai.
     *
     * O `!important` continua sendo necessario: nao ha como vencer o
     * `!important` do forms.css sem outro, e sem ele a caixa das quatro telas
     * de lead ficaria com alca enquanto o resto do site nao.
     */
    resize: none !important;
}

.rmx-form input:focus,
.rmx-form select:focus,
.rmx-form textarea:focus {
    outline: none;
    border-color: var(--rmx-primaria);
    box-shadow: 0 0 0 3px rgba(255, 0, 89, 0.15);
}

.rmx-form ::-webkit-input-placeholder { color: var(--rmx-apagado); }
.rmx-form ::-moz-placeholder { color: var(--rmx-apagado); opacity: 1; }
.rmx-form :-ms-input-placeholder { color: var(--rmx-apagado); }
.rmx-form ::placeholder { color: var(--rmx-apagado); }

/* -----------------------------------------------------------------------------
   9.1 ROTULO FLUTUANTE — `.input-block` + `<span class="placeholder">`

   O padrao de campo do site inteiro: o rotulo nasce DENTRO do campo e sobe para
   cima da borda quando ha foco ou conteudo. O markup e antigo (vem do
   css/forms/forms.css e do style2023.css) e nao muda; o que muda e quem o veste
   dentro de um `.rmx-form`.

   DOIS DEFEITOS DA VERSAO ANTIGA, e os dois eram visiveis:

   1. O ROTULO SUBIA POR `:valid`, e nao por "tem conteudo". Campo com texto
      INVALIDO — um e-mail pela metade, o caso de todo mundo que digita — nao e
      `:valid`, entao ao sair do campo o rotulo DESCIA DE VOLTA POR CIMA DO QUE
      A PESSOA ESCREVEU. Era o defeito relatado na tela de recuperar senha, e
      valia para todo campo `type="email"` do site. Pior: um campo OPCIONAL
      vazio e `:valid`, entao o rotulo dele nascia flutuando sobre nada (a
      "Nova senha" do perfil).

      Agora o teste e `:not(:placeholder-shown)` — "o campo tem algo digitado",
      que e literalmente a pergunta certa. Isso EXIGE um atributo `placeholder`
      no campo, e e por isso que todo `<input>`/`<textarea>` dentro de um
      `.input-block` leva `placeholder=" "` (um espaco) no markup: sem ele
      `:placeholder-shown` nunca casa e o rotulo fica flutuando para sempre.

   2. A GEOMETRIA ERA DE OUTRO CAMPO. O `margin: 15px` + `translateY(-17px)` do
      style2023.css foi medido para o campo de 50px do `.bx-form`; sobre o campo
      de 44px daqui o rotulo flutuado parava a ~1px do topo e encostava no texto
      digitado logo abaixo — o "placeholder colado na escrita".

      Aqui o rotulo flutuado sobe para uma FAIXA PROPRIA acima do campo (o
      `padding-top` do `.input-block`), e nao para cima da borda. Assim ele nunca
      cruza o texto, e nao precisa de retangulo de fundo para "furar" a borda —
      o retangulo so funcionaria enquanto o fundo atras do campo fosse
      exatamente o mesmo da folha, o que deixa de valer dentro do cartao da
      conta e sobre a faixa com imagem da area de abrangencia.

   As duas regras de estado vem com especificidade alta de proposito: as regras
   `div.input-block input:valid + span.placeholder` do style2023.css valem (0,3,3)
   e continuam no ar para as telas nao convertidas.
   -------------------------------------------------------------------------- */
.rmx-form .input-block {
    position: relative;
    /* A faixa onde o rotulo flutuado pousa. Sem ela ele sairia do campo por
       cima e cairia sobre o campo anterior. */
    padding-top: 18px;
}

.rmx-form .input-block > .placeholder {
    position: absolute;
    /* 18 do padding acima + metade da altura do campo: o rotulo em repouso fica
       centrado no campo de uma linha. Escrito como conta, e nao como os 40px de
       antes, porque o segundo termo E a altura de campo do site — mudar o
       `--rmx-campo-altura` sem mudar isto tiraria o rotulo do centro em TODA
       tela de lead de uma vez, e o desalinho de poucos pixels e do tipo que
       passa em revisao. */
    top: calc(18px + var(--rmx-campo-altura) / 2);
    left: 11px;
    margin: 0;
    padding: 0 4px;
    display: block;
    max-width: calc(100% - 22px);
    overflow: hidden;
    color: var(--rmx-apagado);
    font-family: var(--rmx-fonte-texto);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.2;
    white-space: nowrap;
    text-overflow: ellipsis;
    background: none;
    pointer-events: none;
    transform: translateY(-50%);
    transform-origin: 0 50%;
    transition: top 0.18s ease, transform 0.18s ease, color 0.18s ease;
}

/* Vale para `<input>` E para `<textarea>`, e o mesmo 40px serve para os dois
   por coincidencia util: no input de uma linha o texto e centrado na caixa de
   44px (18 + 22); na textarea ele comeca no padding de cima e o centro da
   PRIMEIRA LINHA cai em 18 + 1 de borda + 10 de padding + meia linha ~ 40. Por
   isso a textarea nao precisa de regra propria, e por isso tambem a de 200px da
   caixa de comentario da noticia acerta sem ajuste: numa textarea a altura da
   caixa nao muda onde a primeira linha comeca. */

/* ESTADO EM REPOUSO, dito de novo e com especificidade maior — e esta regra que
   desfaz o `:valid` do style2023.css num campo opcional vazio. */
.rmx-form .input-block > input:placeholder-shown:not(:focus) ~ .placeholder,
.rmx-form .input-block > textarea:placeholder-shown:not(:focus) ~ .placeholder {
    transform: translateY(-50%) scale(1);
    color: var(--rmx-apagado);
}

/* ESTADO FLUTUADO — foco ou conteudo. */
.rmx-form .input-block > input:focus ~ .placeholder,
.rmx-form .input-block > input:not(:placeholder-shown) ~ .placeholder,
.rmx-form .input-block > textarea:focus ~ .placeholder,
.rmx-form .input-block > textarea:not(:placeholder-shown) ~ .placeholder {
    top: 8px;
    left: 2px;
    color: var(--rmx-tinta-suave);
    font-weight: 600;
    transform: translateY(-50%) scale(0.92);
}

.rmx-form .input-block > input:focus ~ .placeholder,
.rmx-form .input-block > textarea:focus ~ .placeholder {
    color: var(--rmx-primaria);
}

/* O `placeholder=" "` que o rotulo flutuante exige e um espaco EM BRANCO, e o
   navegador o desenha dentro do campo. Invisivel ele ja e; o que sobra e a
   largura de um espaco, que nao atrapalha. Mas num campo com `text-indent` ou
   mascara isso confunde — some com ele de vez. */
.rmx-form .input-block > input::-webkit-input-placeholder,
.rmx-form .input-block > textarea::-webkit-input-placeholder { color: transparent; }
.rmx-form .input-block > input::-moz-placeholder,
.rmx-form .input-block > textarea::-moz-placeholder { color: transparent; opacity: 1; }
.rmx-form .input-block > input::placeholder,
.rmx-form .input-block > textarea::placeholder { color: transparent; }

/* Campo redondo com icone dentro (a busca do cabecalho). */
.rmx-campo-busca {
    position: relative;
}

.rmx-campo-busca .fa {
    position: absolute;
    top: 50%;
    left: 14px;
    transform: translateY(-50%);
    color: var(--rmx-apagado);
    font-size: 14px;
    pointer-events: none;
}

.rmx-campo-busca input {
    width: 100%;
    /* A MESMA altura dos campos de formulario e de filtro. Media 40px, e a
       diferenca aparecia no obituario e nas telas de local, onde este campo e o
       botao "Pesquisar" ficam na mesma linha. */
    height: var(--rmx-campo-altura);
    padding: 0 16px 0 36px;
    border: 1px solid var(--rmx-borda);
    border-radius: var(--rmx-pilula);
    background: var(--rmx-mudo);
    color: var(--rmx-texto);
    font-size: 14px;
    transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.rmx-campo-busca input:focus {
    outline: none;
    border-color: var(--rmx-primaria);
    background: var(--rmx-cartao);
    box-shadow: 0 0 0 3px rgba(255, 0, 89, 0.15);
}

/* Campo de busca SEM lupa dentro — a janela `.box-busca` do celular, onde o
   ícone foi retirado (ver o comentário no index.php). O recuo de 36px existe
   para dar lugar ao ícone; sem ele, sobra um buraco no começo da linha e a
   chamada perde 36px justamente na tela mais estreita.

   Vem DEPOIS da regra acima de propósito: as duas têm a mesma especificidade
   (0,1,1) e no empate quem vence é a última. */
.rmx-campo-busca-simples input {
    padding-left: 16px;
}

/* -----------------------------------------------------------------------------
   10. UTILITARIOS
   -------------------------------------------------------------------------- */

/* Corte por numero de linhas. Substitui o plugin dotdotdot, que faz o mesmo em
   JS depois que a pagina ja pintou (e por isso pisca). */
.rmx-linhas-2,
.rmx-linhas-3,
.rmx-linhas-4 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.rmx-linhas-2 { -webkit-line-clamp: 2; line-clamp: 2; }
.rmx-linhas-3 { -webkit-line-clamp: 3; line-clamp: 3; }
.rmx-linhas-4 { -webkit-line-clamp: 4; line-clamp: 4; }

.rmx-gradiente-texto {
    background-image: var(--rmx-gradiente);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.rmx-fundo-marca { background-image: var(--rmx-gradiente); }
.rmx-fundo-superficie { background: var(--rmx-superficie); }
.rmx-sombra-cartao { box-shadow: var(--rmx-sombra-cartao); }
.rmx-sombra-marca { box-shadow: var(--rmx-sombra-marca); }

.rmx-apagado { color: var(--rmx-apagado); }
.rmx-suave { color: var(--rmx-tinta-suave); }

/* Visivel so para leitor de tela. */
.rmx-so-leitor {
    position: absolute !important;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Faixa de rolagem horizontal sem barra visivel (as pilulas de categoria no
   celular). O overflow continua rolavel por toque e por teclado. */
.rmx-rolagem-x {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.rmx-rolagem-x::-webkit-scrollbar {
    display: none;
}

/* -----------------------------------------------------------------------------
   11. CABECALHO

   IMPORTANTE — o .body do style2023.css tem overflow: hidden, e overflow
   diferente de visible em QUALQUER ancestral cancela o position: sticky do
   cabecalho (o elemento simplesmente rola junto, sem erro nenhum). A troca
   abaixo e por overflow-x: clip, que corta o transbordo horizontal do mesmo
   jeito mas NAO cria contexto de rolagem, entao o sticky continua valendo.
   -------------------------------------------------------------------------- */
.rmx-pg .body {
    overflow: visible;
    overflow-x: clip;
}

/* O <header> gruda no topo em qualquer largura, e ele contem APENAS a barra
   principal e as pilulas de categoria — o banner de publicidade e a tira de
   utilidades ficam fora dele no index.php, e rolam embora. Antes as quatro
   coisas grudavam juntas e passavam de 200px de tela ocupada.

   As pilulas so sao impressas na home e nas telas de noticia; onde nao existem,
   o que gruda e so a barra, sem regra nenhuma a mais.

   Nao envolva isto num wrapper: sticky se desloca apenas dentro do retangulo do
   proprio pai, e o pai aqui precisa ser alto (o .body). Um wrapper da altura do
   cabecalho faz o sticky soltar no instante em que comeca. */
.rmx-topo {
    position: sticky;
    top: 0;
    z-index: 40;
    border-bottom: 1px solid var(--rmx-borda);
    /* Fundo SOLIDO, e nao o translucido-com-blur do desenho original: as setas
       das pilulas mascaram com um degrade opaco a editoria que passa por baixo
       delas, e sobre um cabecalho translucido essas mascaras apareceriam como
       dois retangulos de tom diferente. Legibilidade da faixa ganha do efeito. */
    background: var(--rmx-fundo);
}

/* 11.1 — tira de gradiente ------------------------------------------------- */
.rmx-topo-tira {
    background-image: var(--rmx-gradiente);
    color: #fff;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.04em;
}

.rmx-topo-tira .rmx-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding-top: 6px;
    padding-bottom: 6px;
}

.rmx-topo-data {
    text-transform: capitalize;
    white-space: nowrap;
}

.rmx-topo-tira-links {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-left: auto;
}

.rmx-topo-tira a {
    color: #fff;
    text-decoration: none;
    white-space: nowrap;
}

/**
 * O `.rmx-ativo` ANDA JUNTO DO :hover, e nunca em regra separada (04/09/2026).
 *
 * Ele e a marca de "voce esta nesta pagina", e o pedido era exatamente que ela
 * fosse o mesmo desenho que o mouse ja mostra — assim ninguem precisa aprender
 * um sinal novo. Separar as duas regras e como elas passam a divergir: mexer no
 * hover e esquecer o ativo (ou o contrario) nao quebra nada e nao aparece em
 * revisao, so fica estranho meses depois.
 *
 * Quem imprime a classe e o rmxLinkAtivo() (admin/funcoes/sql.php).
 */
.rmx-topo-tira a:hover,
.rmx-topo-tira a:focus,
.rmx-topo-tira a.rmx-ativo {
    color: #fff;
    text-decoration: underline;
}

/* No item ativo o sublinhado nao e enfeite de passagem: e o estado da pagina.
   `font-weight` para ele nao depender so do sublinhado, que a faixa colorida
   ja usa em varios lugares. */
.rmx-topo-tira a.rmx-ativo {
    font-weight: 700;
}

@media (max-width: 575px) {
    .rmx-topo-data {
        display: none;
    }
    .rmx-topo-tira-links {
        justify-content: center;
        width: 100%;
        margin-left: 0;
    }
}

/* 11.2 — barra principal --------------------------------------------------- */
.rmx-topo-barra {
    background: var(--rmx-fundo);
}

/* Nao ha mais sticky proprio aqui: quem gruda e o <header> inteiro (secao 11),
   e sticky dentro de sticky nao daria nada de util — a barra ja esta parada em
   relacao ao pai que grudou. */

/**
 * O CABECALHO ENCOLHEU ~12% em 26/08/2026 — ele fica grudado no topo, e cada
 * pixel dele e um pixel a menos de noticia em toda rolagem da tela inteira.
 *
 * A reducao esta repartida em TRES lugares, e os tres andam juntos: o respiro
 * desta barra (16 -> 12), a altura da logo (46 -> 40, ver `.rmx-logo img`) e o
 * respiro da faixa de pilulas (8 -> 6, ver `.rmx-pilulas-moldura`). Mexer em um
 * so tiraria a proporcao entre as duas faixas — a conta fecha em ~128px -> 112.
 *
 * O QUE NAO ENCOLHEU sao os botoes redondos (☰, lupa, entrar), que continuam
 * com 42px: e o alvo de toque no celular, e abaixo disso o cabecalho fica menor
 * as custas de quem usa o site com o polegar. Como sao eles os mais altos da
 * barra, a logo em 40px nao muda a altura dela — e ajuste de proporcao, para a
 * marca nao ficar sobrando dentro de uma faixa mais baixa.
 */
.rmx-topo-barra .rmx-container {
    display: flex;
    align-items: center;
    gap: 16px;
    padding-top: 12px;
    padding-bottom: 12px;
}

.rmx-topo-esq,
.rmx-topo-dir {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 0 0 auto;
}

.rmx-topo-dir {
    margin-left: auto;
}

/**
 * NO CELULAR A LOGO VAI PARA O MEIO DA BARRA.
 *
 * Nao da para fazer isso com a logo dentro do .rmx-topo-esq: ali ela so pode
 * centrar no espaco que sobra DEPOIS do botao ☰, e o meio daquele espaco nao e
 * o meio da tela. Tambem nao resolve `position: absolute` — a logo sairia do
 * fluxo e a altura da barra passaria a ser a dos botoes (42px), encolhendo o
 * cabecalho.
 *
 * Entao a barra vira uma grade de tres colunas com as laterais IGUAIS
 * (`1fr auto 1fr`): o que estiver na primeira e na terceira ocupa a mesma
 * largura, e a coluna do meio cai exatamente no centro, independentemente de o
 * botao ☰ (42px) e o par lupa+entrar (94px) terem tamanhos diferentes.
 *
 * A logo e IRMA do .rmx-topo-esq no index.php justamente por isto — dentro dele
 * seria uma celula so.
 *
 * O .rmx-topo-busca fica de fora da conta porque ele e `display: none` abaixo
 * de 768px, e elemento com display:none nao ocupa celula de grade.
 */
@media (max-width: 767px) {
    .rmx-topo-barra .rmx-container {
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        align-items: center;
    }

    .rmx-topo-esq {
        grid-column: 1;
        justify-self: start;
    }

    .rmx-topo-barra .rmx-logo {
        grid-column: 2;
        justify-self: center;
    }

    .rmx-topo-dir {
        grid-column: 3;
        justify-self: end;
        margin-left: 0; /* o `auto` do flex nao serve de nada na grade */
    }
}

/* Botao do menu completo. Fica visivel em TODOS os tamanhos: e ele que da
   acesso a arvore inteira do site (servicos, obituario, principios
   editoriais...), que as pilulas de categoria nao cobrem. */
.rmx-btn-menu {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    flex: 0 0 auto;
    border-radius: var(--rmx-pilula);
    background: var(--rmx-gradiente);
    box-shadow: var(--rmx-sombra-marca);
    color: #fff;
    font-size: 18px;
    text-decoration: none;
    transition: transform 0.2s ease;
}

.rmx-btn-menu:hover,
.rmx-btn-menu:focus,
.rmx-btn-menu:active {
    color: #fff;
    text-decoration: none;
    transform: translateY(-1px);
}

.rmx-logo {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
}

/**
 * 44px (02/09/2026, a pedido). Vinha de 46 -> 40 na reducao do cabecalho de
 * 26/08; volta um degrau, sem desfazer a reducao.
 *
 * ESTE E O UNICO DOS TRES NUMEROS DAQUELA REDUCAO QUE MUDOU — o respiro da
 * barra (12) e o da faixa de pilulas (6) ficam como estao; ver o comentario em
 * `.rmx-topo-barra .rmx-container`.
 *
 * A CONTA MUDOU EM 2px: em 40 a logo cabia dentro dos 42px dos botoes redondos,
 * que eram os mais altos da barra; em 44 ela passa a ser o elemento mais alto e
 * a barra cresce esses 2px. E o preco da mudanca, e ele esta escrito aqui para
 * a proxima pessoa que for medir o cabecalho e nao achar os 112px de antes.
 */
.rmx-logo img {
    display: block;
    width: auto;
    max-width: 100%;
    height: 44px;
}

/* Campo de busca do meio da barra. Some abaixo de 992px, onde a lupa do lado
   direito abre o overlay .box-busca de sempre. */
.rmx-topo-busca {
    display: none;
    flex: 1 1 auto;
    justify-content: center;
    min-width: 0;
}

.rmx-topo-busca form {
    width: 100%;
    max-width: 448px; /* max-w-md do desenho */
    margin: 0;
}

/* `hidden md:flex` no desenho — md e 768px no tailwind. O 992px que estava
   aqui era breakpoint do bootstrap e nao existe no layout. */
@media (min-width: 768px) {
    .rmx-topo-busca {
        display: flex;
    }
}

/* Botao redondo neutro (lupa no celular, login). */
.rmx-topo-acao {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    flex: 0 0 auto;
    border: 1px solid var(--rmx-borda);
    border-radius: var(--rmx-pilula);
    background: var(--rmx-cartao);
    color: var(--rmx-texto);
    font-size: 16px;
    text-decoration: none;
    cursor: pointer;
    transition: border-color 0.2s ease, color 0.2s ease;
}

.rmx-topo-acao:hover,
.rmx-topo-acao:focus {
    border-color: var(--rmx-primaria);
    color: var(--rmx-primaria);
    text-decoration: none;
}

/* "Entrar" tem duas formas: pilula com texto a partir de 768px e so o icone
   abaixo disso. Sao dois elementos trocados por media query — um botao que
   perde o rotulo no meio do caminho precisaria de :before/content, que leitor
   de tela nao le. */
.rmx-topo-entrar {
    display: none;
}

@media (min-width: 768px) {
    .rmx-topo-entrar {
        display: inline-flex;
    }
    .rmx-topo-entrar-ico {
        display: none;
    }
}

/* A lupa acompanha o campo de busca da barra, que aparece em 992px. */
@media (min-width: 992px) {
    .rmx-topo-lupa {
        display: none;
    }
}

/* Modulo promocional do topo — a logo do parceiro, que substitui o seletor de
   cidade quando esta ligado. Altura travada para nao esticar a barra. */
.rmx-topo-promo img {
    width: auto;
    max-width: 120px;
    height: 42px;
    object-fit: contain;
}

/* 11.3 — pilulas de categoria ---------------------------------------------- */
.rmx-topo-nav {
    border-top: 1px solid var(--rmx-borda);
    background: var(--rmx-fundo);
}

/* TRES elementos, nao um, e cada um existe por um motivo:

     .rmx-pilulas-moldura   carrega o .rmx-container (max-width + respiro) e
                            poe lado a lado a pilula fixa e o resto;
     .rmx-pilulas-rolagem   e a caixa de referencia das setas — elas sao
                            absolutas e precisam de um pai que comece DEPOIS
                            do "Ultimas", senao a da esquerda cairia por cima
                            dele;
     .rmx-pilulas           e o unico que tem overflow. Setas presas aqui
                            dentro rolariam junto com o que devem controlar.

   O respiro vertical mora na moldura (e nao na faixa) porque a pilula fixa
   esta fora da faixa e as duas tem de nascer na mesma linha. */
/* O vao entre o "Ultimas" e a faixa e MAIOR que o de 4px entre as pilulas
   (que continua valendo dentro da faixa). Sao duas coisas de naturezas
   diferentes — uma parada e uma que rola —, e o vao e o que diz isso sem
   precisar de linha divisoria; ele tambem sobra para a seta da esquerda, que
   acende exatamente ali e, encostada, pareceria colada no "Ultimas". */
/* O respiro de 8px virou 6 — parte da reducao do cabecalho, ver o comentario em
   `.rmx-topo-barra .rmx-container`. A pilula em si nao mudou: ela ja e o menor
   elemento da faixa, e apertar o texto dentro dela e o que se ve primeiro. */
.rmx-pilulas-moldura {
    display: flex;
    align-items: center;
    gap: 20px;
    padding-top: 6px;
    padding-bottom: 6px;
}

/* O "Ultimas". Fora da faixa que rola: e o caminho de volta para a listagem
   geral e nao pode sair de vista quando alguem procura uma editoria. */
.rmx-pilula-fixa {
    flex: 0 0 auto;
}

.rmx-pilulas-rolagem {
    position: relative;
    flex: 1 1 auto;
    min-width: 0; /* sem isso o flex item nao encolhe e o overflow nunca acontece */
    display: flex;
    align-items: center;
}

.rmx-pilulas {
    display: flex;
    align-items: center;
    gap: 4px;
    width: 100%;
    scroll-behavior: smooth;
}

/* Setas de rolagem. Ficam sobre a faixa, com um degrade do fundo atras, para
   que a pilula cortada passe por baixo em vez de esbarrar num quadrado opaco.
   O [hidden] e escrito pelo starterTopoPilulas.js e precisa de display:none
   explicito — o display:grid daqui ganharia dele. */
.rmx-pilulas-seta {
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 52px;
    padding: 0;
    border: 0;
    color: var(--rmx-texto);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
}

.rmx-pilulas-seta[hidden] {
    display: none;
}

.rmx-pilulas-seta:hover,
.rmx-pilulas-seta:focus {
    color: var(--rmx-primaria);
}

.rmx-pilulas-seta-esq {
    left: 0;
    justify-content: start;
    background: linear-gradient(to right, var(--rmx-fundo) 55%, rgba(253, 251, 250, 0));
}

.rmx-pilulas-seta-dir {
    right: 0;
    justify-content: end;
    background: linear-gradient(to left, var(--rmx-fundo) 55%, rgba(253, 251, 250, 0));
}

/* Sem afastamento condicional embaixo da seta: padding no proprio elemento que
   rola vale so enquanto scrollLeft e 0 — depois ele sai de vista junto com o
   resto. Quem cuida disso e o degrade das setas, por baixo do qual a pilula
   some aos poucos em vez de encostar num quadrado. */

.rmx-pilula {
    flex: 0 0 auto;
    padding: 6px 12px; /* px-3 py-1.5 do desenho */
    border-radius: var(--rmx-pilula);
    color: var(--rmx-tinta-suave);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.2s ease, color 0.2s ease;
}

.rmx-pilula:hover,
.rmx-pilula:focus {
    background: var(--rmx-mudo);
    color: var(--rmx-texto);
    text-decoration: none;
}

.rmx-pilula-ativa,
.rmx-pilula-ativa:hover,
.rmx-pilula-ativa:focus {
    background-image: var(--rmx-gradiente);
    box-shadow: var(--rmx-sombra-marca);
    color: #fff;
}

/* 11.3b — CABECALHO EM MODO FLUTUANTE (rolagem) -----------------------------

   A classe `.rmx-topo-compacto` e posta no proprio <header> pelo
   `plugins/main/starterTopoCompacto.js` assim que a pagina sai do topo, e
   retirada quando ela volta. Sao DUAS mudancas, e a primeira e a que importa:

   1) A FAIXA DE PILULAS SOME. Ela e navegacao de CHEGADA — serve para escolher
      uma editoria quando se esta no comeco da pagina. Depois que a leitura
      comecou, o que precisa continuar ao alcance e a barra (menu completo,
      busca, entrar); as editorias viram 34px de tela ocupados em toda rolagem
      por uma lista que ninguem consulta no meio de uma materia. Quem quiser
      chegar nelas rola de volta ao topo, ou usa o ☰, que continua na barra.

      Ela so e impressa na home e nas telas de noticia (ver index.php), entao
      nas outras paginas esta regra nao tem o que fazer — e nao precisa de
      condicao: o seletor simplesmente nao casa com nada.

   2) A BARRA ENCOLHE ~10%. Mesmo par de alavancas da reducao de 26/08/2026
      (respiro da barra e altura da logo), pela mesma razao: os botoes redondos
      continuam com 42px, que e o alvo de toque no celular, e sao eles que
      ditam a altura. 42 + 2x12 = 66px passa a 42 + 2x9 = 60px.

   A transicao e do padding e da altura da logo — nao de `height`, que aqui nem
   e declarada. Uma mudanca de altura de elemento EM FLUXO desloca o conteudo
   abaixo dele, e e por isso que o JS so troca a classe bem depois do topo (ver
   o limiar la, com a folga entre acender e apagar). */
.rmx-topo-barra .rmx-container,
.rmx-logo img {
    transition: padding 0.18s ease, height 0.18s ease;
}

.rmx-topo-compacto .rmx-topo-nav {
    display: none;
}

.rmx-topo-compacto .rmx-topo-barra .rmx-container {
    padding-top: 9px;
    padding-bottom: 9px;
}

/* Acompanha os 44 da logo normal, mantendo os mesmos 4px de diferenca entre a
   barra solta e a compacta que existiam com 40/36. */
.rmx-topo-compacto .rmx-logo img {
    height: 40px;
}

/* Quem prefere o site sem animacao nao ganha a barra se mexendo a cada
   rolagem — a mudanca continua acontecendo, so que de uma vez. */
@media (prefers-reduced-motion: reduce) {
    .rmx-topo-barra .rmx-container,
    .rmx-logo img {
        transition: none;
    }
}

/* 11.4 — seletor de cidade -------------------------------------------------
   As classes .select-city / .open-close-select / .select / .bdr-8 sao lidas
   pelo starterMenuSubmenu.js (toggleClass + fadeToggle). Nao renomeie nenhuma
   delas — aqui muda so a aparencia.
   -------------------------------------------------------------------------- */
.rmx-cidade {
    position: relative;
    flex: 0 0 auto;
}

.rmx-cidade .open-close-select {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 42px;
    padding: 0 14px;
    border: 1px solid var(--rmx-borda);
    border-radius: var(--rmx-pilula);
    background: var(--rmx-cartao);
    color: var(--rmx-texto);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.15;
    white-space: nowrap;
    cursor: pointer;
    transition: border-color 0.2s ease, color 0.2s ease;
}

.rmx-cidade .open-close-select:hover {
    border-color: var(--rmx-primaria);
    color: var(--rmx-primaria);
}

.rmx-cidade .select {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 50;
    min-width: 200px;
    max-height: 320px;
    overflow-y: auto;
    padding: 6px;
    border: 1px solid var(--rmx-borda);
    border-radius: var(--rmx-raio-lg);
    background: var(--rmx-cartao);
    box-shadow: var(--rmx-sombra-cartao);
}

.rmx-cidade .select ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.rmx-cidade .select a {
    display: block;
    padding: 8px 12px;
    border-radius: var(--rmx-raio);
    color: var(--rmx-texto);
    font-size: 14px;
    text-decoration: none;
}

.rmx-cidade .select a:hover,
.rmx-cidade .select a:focus {
    background: var(--rmx-mudo);
    color: var(--rmx-primaria);
    text-decoration: none;
}

/* 11.5 — redes sociais no chrome claro --------------------------------------
   O plugin plugins/rsociais/rsociais.php imprime um <style> POR ICONE, com a
   cor vinda do banco (redesocial.cor / .cor_rodape). Essas cores foram
   escolhidas para o fundo gradiente que o cabecalho e o rodape tinham antes;
   sobre o fundo claro de agora, um icone branco desaparece.

   No cabecalho a regra do plugin usa !important, entao so !important a alcanca.
   No rodape nao usa, e a especificidade ja resolve.
   -------------------------------------------------------------------------- */
.rmx-topo-dir .social {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: var(--rmx-pilula);
    color: var(--rmx-tinta-suave) !important;
    font-size: 17px;
    text-decoration: none;
    transition: background 0.2s ease, color 0.2s ease;
}

.rmx-topo-dir .social:hover,
.rmx-topo-dir .social:focus {
    background: var(--rmx-mudo);
    color: var(--rmx-primaria) !important;
}

.rmx-rodape-sociais .ul-rsocial {
    display: flex;
    align-items: center;
    gap: 8px;
    float: none;
    max-width: none;
    margin: 0;
    padding: 0;
    list-style: none;
}

.rmx-rodape-sociais .ul-rsocial li {
    margin: 0;
}

.rmx-rodape-sociais .ul-rsocial a {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border: 1px solid var(--rmx-borda);
    border-radius: var(--rmx-pilula);
    background: var(--rmx-cartao);
    color: var(--rmx-tinta-suave);
    font-size: 17px;
    text-decoration: none;
    transition: border-color 0.2s ease, color 0.2s ease;
}

.rmx-rodape-sociais .ul-rsocial a:hover,
.rmx-rodape-sociais .ul-rsocial a:focus {
    border-color: var(--rmx-primaria);
    color: var(--rmx-primaria);
}

/* O plugin ainda define font-size: 24px por icone no rodape; aqui o tamanho e
   dado pelo <a>, entao o <i> herda. */
.rmx-rodape-sociais .ul-rsocial a i,
.rmx-rodape-sociais .ul-rsocial a .pull-left {
    float: none !important;
    font-size: inherit;
    color: inherit;
}

/* -----------------------------------------------------------------------------
   12. MENU LATERAL (mmenu-light)

   O drawer ja abre pela ESQUERDA — .mm-ocd--left e o padrao do plugin, e o
   starterMenuSubmenu.js chama offcanvas() sem posicao. Nada aqui muda esse
   comportamento; muda so a pintura. O conteudo do <nav id="menu"> continua
   exatamente o mesmo de antes.
   -------------------------------------------------------------------------- */
:root {
    --mm-ocd-max-width: 380px;
    --mm-spn-item-height: 52px;
    --mm-spn-item-indent: 22px;
    --mm-spn-line-height: 22px;
}

.mm-ocd__content {
    background: var(--rmx-cartao);
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.18);
}

/* Alguns itens do <nav id="menu"> carregam hidden-md/hidden-lg do bootstrap
   (Login, Meu Perfil, home). Isso vinha de quando o drawer so existia no
   celular; agora o botao ☰ aparece em qualquer largura, e no desktop esses
   itens sumiriam do menu — inclusive o "home". O conteudo do menu nao mudou,
   so deixa de ser escondido dentro do drawer. */
.mm-ocd .hidden-xs,
.mm-ocd .hidden-sm,
.mm-ocd .hidden-md,
.mm-ocd .hidden-lg {
    display: block !important;
}

/* A dupla classe NAO e enfeite: o proprio plugin escreve
   .mm-spn.mm-spn--light { color:#444; background:#f3f3f3 } (0,2,0), e um
   .mm-spn solto (0,1,0) perde dela em silencio. Tudo o mais no drawer herda
   daqui — o plugin poe background:inherit no ul, no li e no a, e color:inherit
   no a —, entao esta e a unica regra que precisa fixar cor e fundo. */
.mm-spn,
.mm-spn.mm-spn--light {
    color: var(--rmx-texto);
    background: var(--rmx-cartao);
    font-family: var(--rmx-fonte-texto);
    font-size: 15px;
}

/* Item e grupo se apresentam igual. Os <span> sao os que abrem submenu
   (notícias, opinião, Serviços, Obituário, Contato, princípios editoriais) e
   ja se distinguem pela seta que o plugin desenha ao lado — dar a eles outra
   fonte, outro peso e caixa alta fazia a lista parecer de duas origens. */
.mm-spn a,
.mm-spn span {
    font-weight: 500;
    text-transform: none;
}

/* O texto vem do banco e do markup com caixa irregular ("home",
   "publicidade Legal", "Edição Impressa", "política de correções"). O
   text-transform antigo resolvia isso jogando tudo para lowercase; capitalize
   no lugar dele produziria "Política De Correções". ::first-letter sobe so a
   primeira letra — e funciona porque o plugin faz do <a> e do <span> blocos. */
.mm-spn a::first-letter,
.mm-spn span::first-letter {
    text-transform: uppercase;
}

/* `--rmx-superficie` e nao `--rmx-mudo`: o item ATUAL usa o `--rmx-mudo` (ver
   o `.a-m-active` abaixo), e com os dois no mesmo tom passar o dedo pela lista
   fazia cada item parecer, por um instante, a pagina em que se esta. */
.mm-spn a:hover,
.mm-spn a:focus,
.mm-spn span:hover,
.mm-spn span:focus {
    background: var(--rmx-superficie);
    color: var(--rmx-primaria);
    text-decoration: none;
}

/* NAO mexa no z-index do li:before daqui.
   O plugin desenha a seta em TODO li e decide por COBERTURA quem a mostra: no
   item simples o <a> e :last-child, ocupa 100% com background:inherit (opaco)
   em z-index 1 e tapa a seta; no item com submenu ele encolhe o <a> para
   100%-52px (ou o <span> fica transparente) e a seta aparece. Subir a seta
   para z-index 2 acende as setas de todos os itens E as faz vazar por cima do
   painel do submenu, que tambem esta em z-index 2 — no empate ganha quem vem
   depois no DOM. Ja aconteceu; foi assim que "setas avulsas" apareceram no pe
   da lista.

   O que precisava de conserto era o realce de hover: o <span> ocupa a linha
   inteira (o plugin so encolhe o <a>), entao o fundo do hover cobria a area da
   seta. A saida e encolher o <span> na mesma medida do a:not(:last-child) — a
   area da seta vira alvo do proprio <li>, que e exatamente como o plugin ja
   trata os links com submenu (o _initAnchors abre o painel tanto pelo clique
   no <span> quanto pelo clique no <li>). */
.mm-spn span {
    width: calc(100% - var(--mm-spn-item-height));
}

/**
 * A BOLINHA ANTES DE CADA OPCAO (02/09/2026, a pedido).
 *
 * E `a::before`/`span::before`, e NAO `li::before`: o `li::before` e a SETA do
 * plugin (ver o bloco logo acima, que explica por que ela nao pode ser tocada)
 * e o `li::after` e o filete que separa um item do outro. Os dois pseudos do
 * `<li>` ja tem dono; os do `<a>` e do `<span>` estavam livres.
 *
 * O `padding-left` cresce de 22 para 46px porque o plugin escreve o recuo dos
 * dois lados de uma vez (`padding: X var(--mm-spn-item-indent)`). A bolinha
 * fica no recuo antigo, o texto comeca depois dela, e o filete do `li::after`
 * — que continua com `margin-left: 22px` — passa a nascer alinhado com a
 * bolinha, e nao com o texto: e ele que da a coluna da esquerda da lista.
 */
.mm-spn a,
.mm-spn span {
    padding-left: 46px;
}

.mm-spn a::before,
.mm-spn span::before {
    content: "";
    position: absolute;
    top: 50%;
    left: var(--mm-spn-item-indent);
    width: 6px;
    height: 6px;
    margin-top: -3px;
    border-radius: var(--rmx-pilula);
    background: var(--rmx-primaria);
}

/**
 * ITEM DA PAGINA EM QUE SE ESTA — a classe vem do proprio index.php, e vale
 * tambem para as paginas DE DENTRO da opcao: o `$_GET['pg']` nao muda quando se
 * abre um documento ou uma nota (o que muda e `pg2`/`pg3`), entao "Publicidade
 * Legal" segue marcado dentro de um edital.
 *
 * PERDE A BOLINHA E GANHA A BARRINHA. As duas coisas sao o mesmo lugar da
 * linha: a bolinha diz "isto e um item", e a barra colada na borda diz "voce
 * esta aqui". Deixar as duas empilharia dois marcadores na mesma coluna.
 *
 * O TEXTO VOLTOU AO PRETO. Era rosa, na mesma cor do hover — e com o hover e o
 * ativo pintando fundo e texto igual, passar o dedo por qualquer item fazia
 * TODOS parecerem a pagina atual. Agora sao tres degraus distintos: branco
 * (parado), `--rmx-superficie` (hover), `--rmx-mudo` + barra (atual).
 */
.mm-spn a.a-m-active {
    background: var(--rmx-mudo);
    color: var(--rmx-texto);
    font-weight: 700;
}

.mm-spn a.a-m-active::before {
    content: none;
}

/**
 * O `right: auto` e o `border-right: 0` NAO SAO SOBRA. O plugin ja usa este
 * mesmo pseudo em `.mm-spn a:not(:last-child)::after` para desenhar a divisoria
 * vertical antes da seta, com `right: 0` — e as duas regras EMPATAM em
 * especificidade. Hoje nenhum `<a>` do menu cai naquele seletor (os itens com
 * submenu usam `<span>`), mas no dia em que um cair, sem estas duas linhas a
 * barrinha herdaria o `right: 0` e se esticaria pela linha inteira.
 */
.mm-spn a.a-m-active::after {
    content: "";
    position: absolute;
    top: 0;
    right: auto;
    bottom: 0;
    left: 0;
    width: 4px;
    border-right: 0;
    border-radius: 0 var(--rmx-pilula) var(--rmx-pilula) 0;
    background: var(--rmx-gradiente);
    opacity: 1;
}

/**
 * O GRUPO QUE CONTEM A PAGINA ATUAL (02/09/2026, a pedido).
 *
 * Voltando do painel de "Obituario" para a lista principal, nada dizia que a
 * pagina aberta estava la dentro — o marcador de "voce esta aqui" so existia no
 * item final, que naquele momento nem esta na tela.
 *
 * POR QUE `:has()` E NAO PHP. A informacao ja existe no HTML: ha um `<a>` com
 * `a-m-active` em algum lugar da arvore. Fazer isso no index.php exigiria que
 * CADA um dos sete grupos soubesse, por conta propria, se a pagina atual esta
 * dentro dele — e varios sao montados em laco a partir do banco (as categorias
 * de noticia e de opiniao), o que espalharia a mesma pergunta por meia duzia de
 * lugares. `:has()` le a resposta de onde ela ja esta.
 *
 * POR QUE NAO DA PARA USAR AS CLASSES DO PLUGIN. O `--open`/`--parent` que o
 * mmenu-light escreve nos `<ul>` conta em que painel a pessoa esta NAVEGANDO
 * agora, e nao onde a pagina mora: ao voltar para a lista principal ele apaga as
 * duas dos `<ul>` de dentro. Era exatamente esse o caso relatado.
 *
 * O `> span` acerta so o rotulo do grupo. O `<li>` do item final tambem casa com
 * o `:has()`, mas ele nao tem `<span>` — o filho dele e um `<a>`, que ja tem o
 * seu proprio realce logo acima.
 *
 * A DIFERENCA ENTRE O GRUPO E A PAGINA e o FUNDO, e nao a barra: barra = "seu
 * caminho passa por aqui", barra mais fundo = "e exatamente aqui". Na pratica os
 * dois quase nunca aparecem juntos na tela, porque estao em paineis diferentes —
 * e por isso vale mais a linguagem ser a mesma do que serem distinguiveis.
 *
 * Navegador sem `:has()` (anterior a 2023) simplesmente ignora as tres regras e
 * fica com a lista de antes. Nada quebra.
 */
.mm-spn li:has(a.a-m-active) > span {
    font-weight: 700;
}

.mm-spn li:has(a.a-m-active) > span::before {
    content: none;
}

.mm-spn li:has(a.a-m-active) > span::after {
    content: "";
    position: absolute;
    top: 0;
    right: auto;
    bottom: 0;
    left: 0;
    width: 4px;
    border-radius: 0 var(--rmx-pilula) var(--rmx-pilula) 0;
    background: var(--rmx-gradiente);
    opacity: 1;
}

/* -----------------------------------------------------------------------------
   12.1 ENTRAR / MEU PERFIL — o botao no alto do drawer
   -------------------------------------------------------------------------- */
/**
 * O `<li>` continua sendo `<li>` do mesmo `<ul>` (ver o comentario no
 * index.php); o que o tira da aparencia de item de lista e apagar os DOIS
 * pseudos que o plugin desenha em todo `<li>` — a seta (`::before`) e o filete
 * (`::after`).
 *
 * O `.mm-spn` na frente e obrigatorio: `.mm-spn li::before` vale (0,1,2) e
 * venceria um `.rmx-menu-destaque::before` sozinho (0,1,1). Com ele a conta
 * fica (0,2,1), que ganha por ter mais classes.
 */
.mm-spn .rmx-menu-destaque {
    padding: 20px 16px 4px;
    cursor: default;
}

.mm-spn .rmx-menu-destaque::before,
.mm-spn .rmx-menu-destaque::after {
    content: none;
    display: none;
}

.mm-spn .rmx-menu-entrar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 13px 20px;
    border-radius: var(--rmx-pilula);
    background: var(--rmx-gradiente);
    box-shadow: var(--rmx-sombra-marca);
    color: #fff;
    font-size: 15px;
    font-weight: 700;
}

/* Sem bolinha: ele nao e um item da navegacao, e o proprio botao ja se anuncia
   sozinho. */
.mm-spn .rmx-menu-entrar::before {
    content: none;
}

/* `.mm-spn a:hover` vale (0,2,1) e venceria `.mm-spn .rmx-menu-entrar` (0,2,0)
   — sem esta regra, passar o dedo no botao o deixaria bege com texto rosa. */
.mm-spn .rmx-menu-entrar:hover,
.mm-spn .rmx-menu-entrar:focus {
    background: var(--rmx-gradiente);
    color: #fff;
}

/* Na pagina de login ou de perfil o botao NAO vira "voce esta aqui": ele ja e a
   peca mais destacada do painel, e ganhar barra e fundo bege por cima do
   gradiente so o sujaria. A classe fica no markup porque e por ela que o plugin
   escolhe em que painel abrir o menu. */
.mm-spn .rmx-menu-entrar.a-m-active {
    background: var(--rmx-gradiente);
    color: #fff;
}

.mm-spn .rmx-menu-entrar.a-m-active::after {
    content: none;
}

/* -----------------------------------------------------------------------------
   12.2 "NAVEGACAO" — o rotulo que separa o botao da lista
   -------------------------------------------------------------------------- */
/* Mesmo tratamento de rotulo do rodape (`.rmx-rodape-titulo`): pequeno, em
   caixa alta, apagado. Nao e item nem grupo — dai nao ter seta, filete nem
   cursor de clique. */
.mm-spn .rmx-menu-rotulo {
    cursor: default;
}

.mm-spn .rmx-menu-rotulo::before,
.mm-spn .rmx-menu-rotulo::after {
    content: none;
    display: none;
}

.mm-spn .rmx-menu-rotulo > div {
    padding: 18px var(--mm-spn-item-indent) 8px;
    color: var(--rmx-apagado);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* Titulo da faixa de voltar. E cabecalho de painel, nao item de lista — por
   isso continua com peso maior —, mas sem caixa alta, pelo mesmo motivo dos
   grupos. capitalize e nao ::first-letter porque o texto vem de um
   content: attr(data-mm-spn-title), onde ::first-letter nao pega. O opacity
   desfaz o .4 do plugin, que deixava o titulo lavado. */
.mm-spn.mm-spn--navbar:after {
    color: var(--rmx-texto);
    font-size: 16px;
    font-weight: 600;
    opacity: 1;
    text-transform: capitalize;
}

/* -----------------------------------------------------------------------------
   13. RODAPE
   -------------------------------------------------------------------------- */
/**
 * O `margin-top: 64` SAIU daqui em 26/08/2026, e era ele o vao duplicado do pe
 * de toda pagina do site.
 *
 * O rodape ja se separa do conteudo por conta propria: tem borda em cima, fundo
 * proprio e 64px de padding interno no `.rmx-rodape-grid`. O margin externo era
 * um QUARTO vao no mesmo lugar — ele somava com o `padding-bottom` do involucro
 * da pagina (padding nao colapsa com margin), dando 128px de fundo de pagina ali
 * e 192px ate o logo do rodape, contra 32px no topo.
 *
 * Havia um desfazer para isso, `.rmx-home-pub + .rmx-rodape { margin-top: 0 }`,
 * mas ele so casava quando existia banner final — e paginas como `termos`,
 * `edicao-impressa` e `publicidade-legal` nao tem banner, entao nelas o vao
 * dobrado continuava. Sem o margin, o desfazer deixou de ser necessario e saiu
 * junto.
 */
.rmx-rodape {
    border-top: 1px solid var(--rmx-borda);
    background: var(--rmx-superficie);
}

/* Os 48/48 e o gap de 40 estavam fora da escala. O rodape e uma regiao inteira
   da pagina, entao o respiro dele e de SECAO; as quatro colunas dentro dele sao
   do mesmo assunto, entao o vao entre elas e de BLOCO. */
.rmx-rodape-grid {
    display: grid;
    gap: var(--rmx-vao-bloco);
    padding-top: var(--rmx-vao-secao);
    padding-bottom: var(--rmx-vao-secao);
}

@media (min-width: 768px) {
    .rmx-rodape-grid {
        grid-template-columns: 1.4fr 1fr 1fr 1fr;
        gap: var(--rmx-vao-bloco);
    }
}

.rmx-rodape-logo img {
    width: auto;
    max-width: 100%;
    height: 52px;
}

.rmx-rodape-texto {
    margin-top: 14px;
    color: var(--rmx-apagado);
    font-size: 14px;
}

.rmx-rodape-texto p:last-child {
    margin-bottom: 0;
}

.rmx-rodape-titulo {
    margin: 0 0 12px;
    font-family: var(--rmx-fonte-titulo);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.rmx-rodape-lista {
    margin: 0;
    padding: 0;
    list-style: none;
}

.rmx-rodape-lista li + li {
    margin-top: 8px;
}

.rmx-rodape-lista a {
    color: var(--rmx-apagado);
    font-size: 14px;
    text-decoration: none;
}

/* Mesma regra do topo: o ativo usa o desenho do hover. Ver a nota na secao
   11.1 (.rmx-topo-tira a.rmx-ativo). */
.rmx-rodape-lista a:hover,
.rmx-rodape-lista a:focus,
.rmx-rodape-lista a.rmx-ativo {
    color: var(--rmx-primaria);
    text-decoration: none;
}

.rmx-rodape-lista a.rmx-ativo {
    font-weight: 700;
}

.rmx-rodape-sociais {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 16px;
}

.rmx-rodape-fim {
    border-top: 1px solid var(--rmx-borda);
}

.rmx-rodape-fim .rmx-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    padding-top: 18px;
    padding-bottom: 18px;
    color: var(--rmx-apagado);
    font-size: 12px;
}

.rmx-rodape-fim a {
    color: var(--rmx-apagado);
    text-decoration: underline;
}

.rmx-rodape-fim a:hover,
.rmx-rodape-fim a:focus {
    color: var(--rmx-primaria);
}

@media (max-width: 575px) {
    .rmx-rodape-fim .rmx-container {
        justify-content: center;
        text-align: center;
    }
}

/* -----------------------------------------------------------------------------
   14. OVERLAY DE BUSCA (.box-busca)

   Continua sendo o mesmo bloco de sempre, aberto pelo .a-search. Os nomes
   antigos de classe ficam porque o starterMenuSubmenu.js depende deles:
   `.box-busca` e quem recebe fadeIn/fadeOut, e o fechar-clicando-fora compara
   `e.target == div[0]` — ou seja, o cartao TEM de ser filho direto do overlay,
   senao o clique dentro do cartao fecharia a janela.

   O `.rmx-busca-*` e so a pintura nova.
   -------------------------------------------------------------------------- */
.rmx-pg .box-busca {
    z-index: 9998;
    /* `padding`, e nao margem no cartao: o overlay e o alvo do fechar-clicando-
       fora, e o respiro precisa continuar sendo area DELE. Os 20px que o
       style2023.css punha aqui so abaixo de 767px valem agora em toda largura,
       porque em telas curtas (celular deitado) o cartao tambem encostava. */
    padding: 20px;
    background: rgba(9, 10, 19, 0.7);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}

/* O cartao. Era `max-width: 800px` com tres paddings aninhados por dentro
   (20 do overlay + 20 daqui + 20 do .box-form-busca + a gutter de 15 do .row),
   e no celular sobrava pouco mais de metade da largura para o campo. */
.rmx-pg .box-form-busca2 {
    position: relative;
    width: 100%;
    max-width: 560px;
    /* `auto` nao centra na vertical dentro de um flex-column: quem faz isso e o
       justify-content do overlay, que ja vem do style2023.css. O auto aqui
       centrava na horizontal e, de quebra, empurrava o cartao para baixo em
       tela curta. */
    margin: 0 auto;
    padding: 28px;
    border-radius: var(--rmx-raio-2xl);
    background: var(--rmx-cartao);
    box-shadow: var(--rmx-sombra-cartao);
    /* A janela nao pode passar da tela: em celular deitado ela ficava mais alta
       que a viewport e o botao "Buscar" ia parar fora, sem rolagem nenhuma
       (o overlay e fixed com height 100%). */
    max-height: calc(100vh - 40px);
    overflow-y: auto;
}

.rmx-pg .box-busca .rmx-busca-cabecalho {
    /* O `text-center` saiu do markup: com o botao de fechar no canto, o titulo
       centrado ficava visualmente deslocado para a esquerda. Alinhado a
       esquerda ele acompanha o campo logo abaixo. */
    margin-bottom: 20px;
    padding-right: 44px; /* o espaco do botao de fechar, que e absoluto */
}

.rmx-pg .box-busca .rmx-busca-modal-titulo {
    margin: 0;
    color: var(--rmx-texto);
    font-family: var(--rmx-fonte-titulo);
    font-size: 28px;
    font-weight: 900;
    text-transform: uppercase;
}

.rmx-pg .box-busca .rmx-busca-modal-apoio {
    margin: 6px 0 0;
    color: var(--rmx-apagado);
    font-size: 13px;
    line-height: 1.4;
}

/* FECHAR — DENTRO do cartao, e nao pendurado na quina.
   O style2023.css punha `top: -16px; right: -15px`, um circulo branco meio para
   fora da caixa. No desktop passava; no celular, com o cartao ja encostado nas
   bordas, ele saia por cima do scrim e chegava a ser cortado pela tela. */
.rmx-pg .box-busca .box-close {
    top: 12px;
    right: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    margin: 0;
    padding: 0;
    border-radius: var(--rmx-pilula);
    background: var(--rmx-mudo);
    color: var(--rmx-texto);
    font-size: 16px;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
}

.rmx-pg .box-busca .box-close:hover,
.rmx-pg .box-busca .box-close:focus {
    background: var(--rmx-acento);
    color: var(--rmx-primaria);
}

/* Campo e botao empilhados, com vao de verdade entre eles. Era um `.row` com
   duas colunas do bootstrap: no celular elas empilham SEM vao nenhum, e o
   "Buscar" nascia colado no campo — o `margin-top: 5px` que o style2023.css
   dava ao `.wd-100` abaixo de 767px nao chegava a ser respiro. */
.rmx-pg .rmx-busca-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 0;
}

/* A altura NAO e mais propria daqui: eram 46px contra os 40 do cabecalho e os
   44 dos formularios, tres medidas para a mesma coisa. O que continua sendo
   proprio desta tela e o corpo do texto. */
.rmx-pg .rmx-busca-form .rmx-campo-busca input {
    font-size: 16px; /* abaixo de 16px o iOS da zoom no foco e desalinha a pagina */
}

/* O botao acompanha o campo ao lado dele — aqui os dois dividem a mesma linha a
   partir de 576px, e alturas diferentes deixam a costura visivel. */
.rmx-pg .rmx-busca-form .rmx-busca-enviar {
    width: 100%;
    min-height: var(--rmx-campo-altura);
}

@media (min-width: 576px) {
    /* A partir do tablet cabem lado a lado. Abaixo disso o botao inteiro e mais
       facil de acertar do que um botao curto ao lado de um campo espremido. */
    .rmx-pg .rmx-busca-form {
        flex-direction: row;
        align-items: center;
    }
    .rmx-pg .rmx-busca-form .rmx-campo-busca {
        flex: 1 1 auto;
        min-width: 0;
    }
    .rmx-pg .rmx-busca-form .rmx-busca-enviar {
        width: auto;
        flex: 0 0 auto;
    }
}

@media (max-width: 575px) {
    .rmx-pg .box-form-busca2 {
        padding: 20px;
    }
    .rmx-pg .box-busca .rmx-busca-modal-titulo {
        font-size: 22px;
    }
}

/* -----------------------------------------------------------------------------
   15. MOVIMENTO
   Respeita quem pediu menos animacao no sistema. Vale para tudo o que este
   arquivo anima (cards, botoes, tags, imagens).
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .rmx-pg *,
    .rmx-pg *::before,
    .rmx-pg *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* =============================================================================
   14. HOME (fase 2)
   Desenho de referencia: templates/lovable/routes/index.tsx.
   ========================================================================== */

/* 14.1 — hero --------------------------------------------------------------- */
/* O `padding-top` que ficava aqui saiu em 26/08/2026 — o vao entre o cabecalho
   e o primeiro bloco da home e o mesmo de toda pagina do site, e mora no
   `content` (secao 3). A classe fica como ancora do bloco de destaques. */

.rmx-home-secao {
    padding-top: var(--rmx-vao-secao);
}

/**
 * BLOCO DE DESTAQUES — manchete a esquerda, duas ao lado (o arranjo do G1).
 *
 * ALTURA FIXA, e e o ponto principal desta secao. Antes o hero tinha
 * `grid-row: span 2` e acompanhava a soma dos dois secundarios, que eram
 * cartoes claros de texto-em-cima-foto-embaixo (176px de foto + corpo): os dois
 * somados passavam de 600px e o topo da home ficava comprido demais.
 *
 * QUATRO CARTOES EM 2x2, decisao de 26/08/2026 — eram DOIS, deitados, de
 * 570x208 com a foto sangrada e o texto por cima. A proporcao daquela faixa era
 * 2,7:1 e a capa que o painel grava e 5:3 (1,67:1): o `object-fit: cover`
 * jogava fora ~40% da altura de toda foto, e num site de noticia a capa cortada
 * ao meio e conteudo perdido, nao enquadramento.
 *
 * Em 2x2 cada cartao fica com ~273px de largura, e a foto passa a ser impressa
 * na PROPORCAO EM QUE FOI GRAVADA, com o titulo abaixo dela em vez de por cima
 * (ver `.rmx-mini`, secao 14.2). Nada e cortado.
 *
 * A ALTURA DEIXOU DE SER DECLARADA. Os 440px de antes eram a soma de duas
 * faixas de 208 e so faziam sentido enquanto o cartao tinha altura arbitraria.
 * Agora quem manda e a coluna da direita: a foto tem proporcao fixa, o texto
 * tem corte de linhas, e o hero — que e o outro item da mesma linha da grade —
 * se estica ate a altura dela sozinho, por ser esse o comportamento padrao de
 * um item de grid. Uma altura em pixels aqui voltaria a brigar com a proporcao
 * da foto assim que a tela mudasse de largura.
 */
/**
 * O MESMO ARRANJO SERVE A DUAS TELAS, e por isso as regras abaixo carregam dois
 * nomes cada:
 *
 *   .rmx-home-hero / -lado        o bloco de destaques da home;
 *   .rmx-banda-destaque / -lado   cada banda da vitrine de cidades
 *                                 (`noticia/cidade` e o gemeo de ajax dela).
 *
 * A vitrine de cidades era "1 grande + 5 cards deitados numa coluna" e passou a
 * seguir este arranjo em 28/08/2026, a pedido. Nao ha uma segunda copia das
 * medidas: sao os mesmos seletores, agrupados — mudar a grade da home muda a
 * das cidades junto, que e o ponto.
 *
 * O QUE MUDA ENTRE AS DUAS e so a peca da esquerda: na home e o `.rmx-hero`
 * (foto sangrada, texto sobreposto) e na banda e o `.rmx-cartao` comum de
 * sempre, que ja se estica ate a altura da coluna da direita por ser item de
 * grid. A contagem de 4 ladrilhos, essa sim, tem de casar com a consulta — ver
 * o `$limitPubCat` do meta_noticia.php e do noticiaPagCidAjax.php.
 */
.rmx-home-hero,
.rmx-banda-destaque {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
}

.rmx-home-hero-lado,
.rmx-banda-destaque-lado {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
    min-width: 0;
}

/* Dois por linha ja no celular grande: quatro cartoes empilhados dariam uma
   coluna de mais de mil pixels antes da primeira secao da home. */
@media (min-width: 480px) {
    .rmx-home-hero-lado,
    .rmx-banda-destaque-lado {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1024px) {
    /* 1.15fr / 1fr, e nao os 2/3 de antes: a manchete precisa ser
       visivelmente maior, mas os cartoes ao lado tem foto e titulo e numa
       terca parte da tela eles ficavam magros. */
    .rmx-home-hero,
    .rmx-banda-destaque {
        grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    }

    /* As duas fileiras com a MESMA altura, ditada pela mais alta. Sem isto um
       titulo de duas linhas na fileira de cima empurra a de baixo e as quatro
       fotos deixam de se alinhar entre as colunas. */
    .rmx-home-hero-lado,
    .rmx-banda-destaque-lado {
        grid-auto-rows: 1fr;
    }
}

.rmx-hero {
    position: relative;
    display: block;
    overflow: hidden;
    /* Vale so abaixo de 1024px, onde a altura nao e travada: sem ele o hero
       colapsaria na altura do texto. */
    min-height: 300px;
    /* O MESMO raio dos cards (`.rmx-cartao`), a pedido de 21/09/2026. Era 24px
       (o rounded-3xl do desenho), um degrau acima — e como o hero encosta nos
       quatro destaques da direita, a diferenca de curva entre as duas pecas
       lado a lado lia como descuido, nao como hierarquia. */
    border-radius: var(--rmx-raio-xl);
    box-shadow: var(--rmx-sombra-cartao);
    text-decoration: none;
}

/**
 * COM CAPA e SEM CAPA sao duas pecas diferentes, nao a mesma com a foto
 * faltando (ver home.php):
 *
 *   com capa  foto sangrada + veu + texto branco sobreposto no pe;
 *   sem capa  cartao claro, texto no fluxo e centrado, titulo na cor da marca.
 *
 * O fundo de gradiente que ficava aqui para todo mundo era o que fazia a
 * materia sem foto virar um retangulo colorido com texto espremido embaixo e
 * dois tercos de vazio em cima.
 */
.rmx-hero-capa {
    background: var(--rmx-texto);
    color: #fff;
}

.rmx-hero-capa:hover,
.rmx-hero-capa:focus {
    color: #fff;
    text-decoration: none;
}

.rmx-hero-sem-capa {
    display: flex;
    align-items: center;
    border: 1px solid var(--rmx-borda);
    background: var(--rmx-cartao);
    color: var(--rmx-texto);
}

.rmx-hero-sem-capa:hover,
.rmx-hero-sem-capa:focus {
    color: var(--rmx-texto);
    text-decoration: none;
}

.rmx-hero img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.7s ease;
}

.rmx-hero:hover img {
    transform: scale(1.05);
}

/* Sobreposto quando ha capa; no fluxo (e centrado pelo flex do pai) quando nao
   ha. `position: static` desfaz o absolute na variante sem capa. */
.rmx-hero-texto {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 24px;
}

.rmx-hero-sem-capa .rmx-hero-texto {
    position: static;
    width: 100%;
}

@media (min-width: 768px) {
    .rmx-hero-texto {
        padding: 40px;
    }
}

.rmx-hero-titulo {
    margin: 12px 0 0;
    font-family: var(--rmx-fonte-titulo);
    font-size: 30px;
    font-weight: 900;
    line-height: 1.05;
}

.rmx-hero-capa .rmx-hero-titulo {
    color: #fff;
}

/* O vermelho da marca na manchete sem foto — e a unica cor forte do cartao
   claro, e e o que faz ele pesar tanto quanto o hero com foto ao lado. */
.rmx-hero-sem-capa .rmx-hero-titulo {
    color: var(--rmx-primaria);
}

@media (min-width: 768px) {
    .rmx-hero-titulo {
        font-size: 42px;
    }
}

.rmx-hero-apoio {
    max-width: 640px;
    margin: 12px 0 0;
    font-size: 15px;
}

.rmx-hero-capa .rmx-hero-apoio {
    color: rgba(255, 255, 255, 0.85);
}

.rmx-hero-sem-capa .rmx-hero-apoio {
    color: var(--rmx-tinta-suave);
}

/**
 * SECUNDARIOS — cartao de foto sangrada com o texto sobreposto, igual ao hero
 * em miniatura.
 *
 * Eram cartoes claros com o texto em cima e a foto embaixo. Duas razoes para a
 * troca: eles cresciam com o titulo e mandavam na altura do bloco inteiro, e
 * lado a lado com um hero de foto sangrada os tres nao liam como um conjunto.
 *
 * O gradiente de fundo continua aqui (e nao no hero) de proposito: sao cartoes
 * pequenos, e o de uma materia sem foto valida fica melhor como retangulo de
 * marca do que como caixa branca de 208px.
 */
.rmx-mini {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--rmx-borda);
    border-radius: var(--rmx-raio-xl);
    background: var(--rmx-cartao);
    box-shadow: var(--rmx-sombra-cartao);
    color: var(--rmx-texto);
    text-decoration: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.rmx-mini:hover,
.rmx-mini:focus {
    border-color: var(--rmx-primaria);
    box-shadow: var(--rmx-sombra-marca);
    color: var(--rmx-texto);
    text-decoration: none;
    transform: translateY(-2px);
}

/**
 * A FIGURA TEM A PROPORCAO EM QUE O PAINEL GRAVA A CAPA — 5:3.
 *
 * E o ponto inteiro desta peca. O `fileUpThumb` do noticia_control.php grava
 * `thumb-destaque` e `thumb-destaqueNova` em 500x300; declarar aqui a MESMA
 * proporcao deixa o `object-fit: cover` sem nada para cortar.
 *
 * `aspect-ratio` e nao altura em pixels: a coluna muda de largura entre 1024px
 * e 1280px de tela, e altura fixa voltaria a cortar em uma das duas pontas.
 */
.rmx-mini-figura {
    position: relative;
    overflow: hidden;
    aspect-ratio: 5 / 3;
    background: var(--rmx-mudo);
}

/* Materia sem capa valida: o retangulo de marca no lugar da foto, para o card
   ocupar a mesma celula da grade que os outros tres. Sem isso a fileira de
   baixo sobe e a grade 2x2 fica desalinhada. */
.rmx-mini-figura-vazia {
    background: var(--rmx-texto);
    background-image: var(--rmx-gradiente);
}

.rmx-mini img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.rmx-mini:hover img {
    transform: scale(1.05);
}

.rmx-mini-texto {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    align-items: flex-start;
    padding: 14px 16px 16px;
}

/* A MESMA TIPOGRAFIA DO `.rmx-cartao-titulo` (19px / 700 / 1.25), desde
   21/09/2026. Era 18px (19 a partir de 1200), peso 800 e entrelinha 1.15 — e a
   Barlow Condensed, que ja e estreita, com peso a mais e linhas coladas
   embolava as letras: os quatro destaques ao lado da manchete liam pior que os
   cards logo abaixo, e pareciam de outra fonte. O corte continua em DUAS linhas
   (`rmx-linhas-2`, na montaCartaoNoticia): e ele que mantem as quatro fotos do
   2x2 e da vitrine de cidades alinhadas entre as colunas. */
.rmx-mini-titulo {
    margin: 10px 0 0;
    color: var(--rmx-texto);
    font-family: var(--rmx-fonte-titulo);
    font-size: 19px;
    font-weight: 700;
    line-height: 1.25;
}

/**
 * A CHAMADA TAMBEM NO LADRILHO — os quatro ao lado da manchete da home e os
 * quatro de cada banda da vitrine de cidades.
 *
 * Esta regra existia desde a fase 4 e nao era impressa por ninguem: o markup do
 * mini estava escrito a mao no home.php e nunca teve a linha de apoio. Passou a
 * sair de verdade em 28/08/2026, quando o ladrilho virou uma forma da
 * `montaCartaoNoticia()`.
 *
 * 12px entre titulo e chamada, e nao os 8 de antes: e a mesma medida do
 * `.rmx-item-apoio`, e os 8 vinham do `.rmx-item-mini`, que e o card DEITADO da
 * lista de apoio — outro formato, outra densidade. Doze pixels entre dois
 * textos de linha apertada e o minimo que le como separacao.
 */
.rmx-mini-apoio {
    margin: 12px 0 0;
    color: var(--rmx-tinta-suave);
    font-size: 13px;
    line-height: 1.35;
}

/* Destaques que sobraram das duas vagas ao lado do hero. */
.rmx-home-resto {
    margin-top: var(--rmx-vao-item);
}

.rmx-cartao-linha {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 120px;
    align-items: center;
    gap: 12px;
    padding: 12px;
}

.rmx-cartao-linha-foto {
    height: 90px;
    border-radius: var(--rmx-raio-lg);
}

.rmx-cartao-linha .rmx-cartao-corpo {
    padding: 4px;
}

/* O .rmx-home-governo saiu em 25/08/2026: o banner de governo mudou de lugar,
   do bloco de destaques para a sidebar de "Ultimas noticias" (.rmx-lateral-gov,
   secao 14.3). Ele e gravado em 300x250 pelo painel e nao tinha o que fazer
   numa faixa da largura da pagina. */

/**
 * RESPIRO DOS BANNERS — e o desfazer do respiro que eles ja trazem.
 *
 * A nota antiga aqui dizia que "os partials de publicidade nao trazem margem
 * propria". Trazem, e de tres lugares ao mesmo tempo:
 *
 *   .box-pub-top-fixo  margin-bottom: 30px          (style2023.css)
 *   home2, topo_fixo   style="margin-top: 50px"     (inline no partial)
 *   final_pagina       style="padding-bottom: 50px" (inline no partial)
 *
 * Somando com os 40/8 que estavam aqui, o banner de home2 nascia com 90px em
 * cima e 38 embaixo, e o final_pagina com 40 em cima e 88 embaixo — mais os
 * 64 do rodape, 152px de vazio antes dele. Era isso que fazia o ultimo banner
 * parecer solto no fim da pagina e colado no botao logo acima.
 *
 * Agora o vao e simetrico e mora SO no involucro. O !important e o unico jeito
 * de alcancar style="" inline; onde nao ha inline (o margin-bottom do
 * style2023) a especificidade ja bastaria, mas as duas regras andam juntas
 * porque desfazem a mesma coisa.
 *
 * -----------------------------------------------------------------------------
 * SAO TRES POSICOES, e o vao de cada uma depende do que ela separa
 * -----------------------------------------------------------------------------
 *
 *   .rmx-home-pub   banner ENTRE duas secoes de conteudo (o home1, no meio da
 *                   home). Vao de BLOCO, 32 dos dois lados — ver a nota logo
 *                   abaixo da regra.
 *   .rmx-pub-topo   banner logo abaixo do cabecalho, primeiro elemento da
 *                   pagina. O vao de cima ja vem do `content` (secao 3), entao
 *                   aqui so o de baixo — e de BLOCO, porque o banner e a
 *                   pagina sao a mesma regiao.
 *   .rmx-pub-fim    banner no pe, entre o conteudo e o rodape. Mesma logica ao
 *                   contrario: o de cima vem do `padding-bottom` do `content`.
 *
 * As duas ultimas eram UMA SO ate 26/08/2026 — o banner final usava
 * `.rmx-home-pub` (64/64, somando com o involucro da pagina) e o de topo nao
 * usava involucro NENHUM: saia cru do index.php com os 50px inline mais os 30
 * do `.box-pub-top-fixo`, o que fazia a pagina COM banner de topo abrir 112px
 * abaixo do cabecalho e a pagina sem ele abrir com 32.
 */
/**
 * VAO DE BLOCO (32), E NAO DE SECAO (64) — mudanca de 28/08/2026.
 *
 * O banner do meio da home nascia com 64 em cima e 64 embaixo, contra os 32 do
 * banner de topo (`.rmx-pub-topo`, logo abaixo). Na tela isso lia como dois
 * tratamentos diferentes para a mesma peca: o primeiro banner da pagina
 * acompanhava o conteudo e todos os seguintes ficavam boiando num vao do
 * dobro do tamanho. O padrao passa a ser UM SO, o de cima.
 *
 * O banner nao separa dois assuntos — ele se INTERCALA neles. Quem separa as
 * secoes de conteudo continua sendo o `padding-top` de `.rmx-home-secao`, e e
 * ele que o `.rmx-home-pub + .rmx-home-secao` logo abaixo zera para os dois
 * nao somarem.
 */
.rmx-home-pub {
    margin-top: var(--rmx-vao-bloco);
    margin-bottom: var(--rmx-vao-bloco);
}

/**
 * O VAO DE BAIXO NAO SOMA COM O DA SECAO SEGUINTE.
 *
 * `margin-bottom` de banner e `padding-top` de secao nao se fundem — padding
 * nunca colapsa com margem —, entao o que se via era 64px ACIMA do banner (a
 * secao de cima nao tem `padding-bottom`, so o `margin-top` dele conta) contra
 * 128 ABAIXO. Simetrico no CSS, torto na tela.
 *
 * Quem cede e a secao, e nao o banner: assim os 64/64 do `.rmx-home-pub`
 * continuam valendo em qualquer lugar onde ele NAO for seguido por uma secao da
 * home (a publicidade do fim da materia, por exemplo, usa a mesma classe).
 */
.rmx-home-pub + .rmx-home-secao {
    padding-top: 0;
}

.rmx-pub-topo {
    margin-bottom: var(--rmx-vao-bloco);
}

.rmx-pub-fim {
    margin-bottom: var(--rmx-vao-bloco);
}

/* O desfazer do respiro que os partials trazem de si. Vale para as TRES
   posicoes — o banner e o mesmo partial em qualquer uma delas, e e dele que
   vem o `style=""` inline. */
.rmx-home-pub .box-pub-fixo,
.rmx-pub-topo .box-pub-fixo,
.rmx-pub-fim .box-pub-fixo {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

.rmx-home-pub .box-pub-top-fixo,
.rmx-pub-topo .box-pub-top-fixo,
.rmx-pub-fim .box-pub-top-fixo {
    margin-bottom: 0;
}

/* HAVIA AQUI um `.rmx-home-pub + .rmx-rodape { margin-top: 0 }`. Ele desfazia o
   `margin-top` do rodape depois de um banner — mas so DEPOIS DE UM BANNER, e as
   paginas sem banner final (termos, edicao-impressa, publicidade-legal) ficavam
   com o vao dobrado. O `margin-top` do rodape saiu de vez (secao 13) e o
   desfazer deixou de ter o que fazer. */

/**
 * LARGURA DOS BANNERS DO CORPO — os quatro partials que vivem ENTRE cabecalho
 * e rodape (`topo_fixo`, `home1`, `home2`, `final_pagina`) foram convertidos
 * de `container-fluid > row > container > row > col-xs-12...` (bootstrap 3,
 * 1170px) para o `.rmx-container` de sempre — o markup em si, e nao um ajuste
 * de CSS por cima da grade antiga. Eram o unico bootstrap sobrevivendo nas
 * paginas ja convertidas para o layout 2026.
 *
 * Desde 04/09/2026 as duas medidas praticamente empatam: o `.rmx-container`
 * mede 1140 uteis, que e a largura em que os banners ja vinham sendo enviados
 * (o `.container` do bootstrap tambem da 1140 uteis). Foi por isso que a
 * largura do site desceu — ver o token --rmx-largura.
 *
 * OS DOIS BANNERS DE FAIXA INTEIRA CONTINUAM SEM `.rmx-container` —
 * `publicidade_topo_cabecalho.php` (acima do <header>) e
 * `publicidade_final_rodape.php` (abaixo do <footer>). Os dois sempre foram
 * de borda a borda da janela, e continuam assim de proposito: sao a moldura
 * da pagina, nao o conteudo.
 *
 * A MEDIDA UTIL E 1140px, e nao 1172: o `.rmx-container` tem 1172 de caixa
 * menos os 16 de respiro de cada lado. Uma capa maior nao fica errada — o
 * `.img-responsive` a encolhe —, mas quem quiser pixel exato envia 1140 (ou
 * 2280 para tela retina). Era 1248 ate 04/09/2026, quando a largura do site
 * passou a acompanhar a dos banners.
 *
 * A MEDIDA EM QUE O PAINEL GRAVA a imagem continua sendo 1140x340 (o `else` do
 * admin/control/publicidade_control.php), entao o banner ja no ar passa a ser
 * ampliado ~9% em vez de exibido em tamanho natural. Subir a medida gravada e
 * trabalho a parte, com as dez posicoes de uma vez, e so vale para banner
 * novo — os antigos continuam em 1140 ate serem reenviados um a um.
 */

/**
 * NO CELULAR O RESPIRO ERA CONTADO DUAS VEZES.
 *
 * O style2023.css da 15px de padding lateral ao proprio owl abaixo de 767px
 * (`#owl-pub-top-fixo, .pub-final-pagina`, linha ~3691). Aquilo existia porque
 * na grade antiga o `.xs-mob` zerava o padding da coluna e sobrava 1px — os
 * 15 do owl eram o respiro inteiro do banner no celular.
 *
 * Com o `.rmx-container` no lugar da grade, o respiro ja vem dele (16px), e os
 * 15 do owl passaram a SOMAR: 31px de recuo, o dobro do resto da pagina. Some
 * com eles nos dois banners que foram convertidos.
 *
 * O `#owl-pub-not-det` fica de fora de proposito: ele e o anuncio do meio da
 * materia, mora dentro da coluna de texto e nunca teve `.rmx-container` — os
 * 15px dele continuam sendo o respiro que sempre foram.
 */
@media (max-width: 767px) {
    .rmx-pg .rmx-container > .box-pub-top-fixo > #owl-pub-top-fixo,
    .rmx-pg .rmx-container > .pub-final-pagina {
        padding-left: 0;
        padding-right: 0;
    }
}

/**
 * CANTO ARREDONDADO NO BANNER (04/09/2026).
 *
 * O layout 2026 arredonda tudo que e bloco — cartao de noticia, foto, caixa
 * lateral, botao. O banner era a unica peca retangular da tela, e num site
 * inteiro de cantos redondos isso nao le como "publicidade", le como algo que
 * ficou de fora da conversao.
 *
 * `--rmx-raio-xl` (16px) e nao um numero solto: e o mesmo raio do `.rmx-cartao`,
 * que e a peca vizinha na home e nas listagens — banner e card se encostam ali,
 * e dois raios diferentes lado a lado sao mais visiveis do que qualquer um dos
 * dois sozinho.
 *
 * O RAIO VAI NA `<img>`, e nao no involucro. Os involucros sao do carrossel
 * (owl) e o owl reescreve estilo dos filhos ao montar; alem disso varios deles
 * (`.box-pub-fixo`, `.box-pub-top-fixo`) so tem padding e nao tem fundo, entao
 * arredonda-los nao pintaria nada. Na imagem o corte e do proprio pixel e
 * independe de o carrossel ter rodado ou nao.
 *
 * Sao cinco seletores porque os dez partials de publicidade nao tem uma classe
 * em comum — cada um herdou o involucro da posicao em que nasceu. A lista:
 *
 *   .box-pub-fixo         topo_fixo, home1, home2, final_pagina
 *   .box-pub-top-fixo     governo (quando fora da lateral)
 *   .rmx-lateral-pub      governo na home e o anuncio da banda de categoria
 *   .owl-pub-not-det      os dois da pagina de noticia (meio do texto e fim)
 *   .box-infos            o do obituario
 *
 * Fora dali ficam o popup e o rodape flutuante: os dois tem moldura propria e o
 * flutuante e tratado logo abaixo.
 *
 * E FICA DE FORA, DE PROPOSITO, A `.owl-pub-top-cabecalho` (topo_cabecalho, a
 * faixa de 1920 acima da tira de gradiente, e final_rodape, que usa o mesmo
 * involucro). Estava na lista ate 21/09/2026 e saiu a pedido: essas duas sao
 * faixas de BORDA A BORDA da janela (`container-fluid`, sem o `.rmx-container`),
 * e canto redondo encostado na borda da tela abre quatro furos contra o fundo —
 * a mesma razao de o flutuante arredondar so os cantos de cima. O raio e para
 * banner que vive DENTRO da largura do site, ao lado de cartoes.
 */
.rmx-pg .box-pub-fixo img,
.rmx-pg .box-pub-top-fixo img,
.rmx-pg .rmx-lateral-pub img,
.rmx-pg .owl-pub-not-det img,
.rmx-pg .box-infos img {
    border-radius: var(--rmx-raio-xl);
}

/* O rodape flutuante e `position: fixed; bottom: 0`: ele encosta na borda de
   baixo da janela, e arredondar os quatro cantos deixaria dois furos entre o
   banner e o fim da tela. So os de cima, que sao os que aparecem. */
.rmx-pg .publicidade-rodape-flutuante img {
    border-top-left-radius: var(--rmx-raio-xl);
    border-top-right-radius: var(--rmx-raio-xl);
}

/* A aba "fechar" fica pendurada acima do canto superior direito do banner. O
   style2023.css a encosta na quina (`right: 25px` anulado por
   `margin-right: -25.21px`), e com o canto agora arredondado ela passou a
   flutuar sobre a CURVA, com um vao transparente entre a aba e a arte.
   Recuada exatamente o raio, ela assenta na parte reta da borda de cima — em
   qualquer largura, por isso sem media query (o `right: 8%` do celular no
   style2023.css perde para esta regra, que e mais especifica). */
.rmx-pg .close-pub-rod-flu {
    right: var(--rmx-raio-xl);
    margin-right: 0;
}

/* 14.2 — lista de ultimas --------------------------------------------------- */
.rmx-lista {
    display: flex;
    flex-direction: column;
    gap: var(--rmx-vao-item);
    min-width: 0;
}

.rmx-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 140px;
    gap: 20px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--rmx-borda);
    color: inherit;
    text-decoration: none;
}

.rmx-item:last-of-type {
    border-bottom: 0;
    padding-bottom: 0;
}

.rmx-item:hover,
.rmx-item:focus {
    color: inherit;
    text-decoration: none;
}

@media (min-width: 640px) {
    .rmx-item {
        grid-template-columns: minmax(0, 1fr) 240px;
    }
}

/**
 * ULTIMAS NOTICIAS — FOTO A ESQUERDA, TEXTO A DIREITA.
 *
 * A troca e so visual: no markup o titulo continua vindo primeiro, e quem
 * inverte e o `order` (mesmo recurso que os secundarios do hero usavam). E de
 * proposito — leitor de tela e Tab seguem a ordem do markup, e ali o titulo e
 * o que identifica o link.
 *
 * Escopado em .rmx-lista porque as medidas das colunas sao proprias desta lista
 * (140/240px). O `.rmx-item-mini` das bandas tem as suas, e desde 04/09/2026
 * aponta para o MESMO lado — ver a nota dele mais abaixo.
 */
/* As DUAS medidas precisam ser reescritas, e nao so a de 640px: a coluna
   estreita muda de lado junto com a foto. Inverter so o `order` deixaria a
   foto na coluna larga e o texto espremido nos 140px. */
.rmx-lista .rmx-item {
    grid-template-columns: 140px minmax(0, 1fr);
}

.rmx-lista .rmx-item .rmx-item-texto {
    order: 2;
}

.rmx-lista .rmx-item .rmx-item-foto {
    order: 1;
}

@media (min-width: 640px) {
    .rmx-lista .rmx-item {
        grid-template-columns: 240px minmax(0, 1fr);
    }
}

/* Sem foto valida a figura nao e impressa, e a coluna dela ficaria reservada e
   vazia — o texto comecava 240px a direita, desalinhado dos outros itens. */
.rmx-lista .rmx-item-sem-foto {
    grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 640px) {
    .rmx-lista .rmx-item-sem-foto {
        grid-template-columns: minmax(0, 1fr);
    }
}

.rmx-item-texto {
    min-width: 0;
}

.rmx-item-titulo {
    margin: 8px 0 0;
    font-family: var(--rmx-fonte-titulo);
    font-size: 21px;
    font-weight: 700;
    line-height: 1.15;
    transition: color 0.2s ease;
}

@media (min-width: 640px) {
    .rmx-item-titulo {
        font-size: 25px;
    }
}

.rmx-item:hover .rmx-item-titulo {
    color: var(--rmx-primaria);
}

/* A chamada da materia, logo abaixo do titulo. Vale em card em pe e em card
   deitado — e a mesma peca nos dois, e a montaCartaoNoticia() imprime esta
   classe nas duas formas.

   12px do titulo (eram 8): titulo e chamada sao blocos diferentes de texto, e
   com 8 eles liam como um paragrafo so de duas fontes. */
.rmx-item-apoio {
    margin: 12px 0 0;
    color: var(--rmx-apagado);
    font-size: 14px;
    line-height: 1.4;
}

.rmx-item-foto {
    height: 96px;
    border-radius: var(--rmx-raio-lg);
}

@media (min-width: 640px) {
    .rmx-item-foto {
        height: 160px;
    }
}

/**
 * Versao curta, usada nas bandas de categoria, de cidade e de colunista.
 *
 * FOTO A ESQUERDA desde 04/09/2026, como na lista de "Ultimas noticias". Ate
 * entao era o mesmo componente com a foto do outro lado — e a nota da
 * `.rmx-lista .rmx-item` logo acima dizia que o escopo existia justamente para
 * NAO alcancar este aqui. Deixou de fazer sentido: as duas listas aparecem na
 * mesma tela (a home tem as duas) e apontavam para lados diferentes.
 *
 * A troca e so visual: no markup o titulo continua vindo primeiro (a
 * montaCartaoNoticia imprime o texto antes da figura), e quem inverte e o
 * `order`. Leitor de tela e Tab seguem o markup, e ali o titulo e o que
 * identifica o link.
 *
 * As DUAS coisas precisam mudar juntas — a ordem das colunas e o `order`.
 * Trocar so o `order` deixaria a foto ocupando a coluna larga e o titulo
 * espremido nos 96px.
 */
.rmx-item-mini {
    grid-template-columns: 96px minmax(0, 1fr);
    gap: 12px;
    padding-bottom: 16px;
}

.rmx-item-mini .rmx-item-texto {
    order: 2;
}

.rmx-item-mini .rmx-item-foto {
    order: 1;
}

/* Sem foto valida a figura nao e impressa; sem isto a coluna dela ficaria
   reservada e vazia e o titulo comecaria 96px a direita, desalinhado dos
   irmaos. Mesma rede de seguranca da `.rmx-lista .rmx-item-sem-foto`. */
.rmx-item-mini.rmx-item-sem-foto {
    grid-template-columns: minmax(0, 1fr);
}

/**
 * O ITEM DA LISTA LATERAL ENCOLHE — titulo em DUAS linhas e chamada em UMA, e
 * nao nas tres/duas que o markup pede.
 *
 * Ele ganhou a chamada e a data junto com todos os outros cards, e com titulo
 * de tres linhas passou a medir ~146px: quatro deles ja ultrapassavam a altura
 * do card grande ao lado, e a coluna da direita descia muito abaixo da
 * esquerda. Aqui ele volta para ~110px, e a banda fecha alinhada.
 *
 * Sobrescrever `-webkit-line-clamp` e seguro. O que NAO se pode sobrescrever e
 * o `display: -webkit-box` que a .rmx-linhas-* declara la no comeco da folha —
 * qualquer `display` numa regra posterior vence e MATA o corte de linhas.
 */
.rmx-item-mini .rmx-item-titulo {
    margin-top: 0;
    font-size: 17px;
    -webkit-line-clamp: 2;
    line-clamp: 2;
}

.rmx-item-mini .rmx-item-apoio {
    margin-top: 8px;
    font-size: 13px;
    -webkit-line-clamp: 1;
    line-clamp: 1;
}

.rmx-item-mini .rmx-item-apoio + .rmx-meta,
.rmx-item-mini .rmx-item-titulo + .rmx-meta {
    margin-top: 10px;
}

.rmx-item-mini .rmx-item-foto {
    height: 72px;
}

@media (min-width: 640px) {
    .rmx-item-mini {
        grid-template-columns: 96px minmax(0, 1fr);
    }
    .rmx-item-mini.rmx-item-sem-foto {
        grid-template-columns: minmax(0, 1fr);
    }
    .rmx-item-mini .rmx-item-foto {
        height: 72px;
    }
}

/* Vao de BLOCO, e nao os 8px de antes: o botao fecha a secao acima dele, e
   colado na ultima fileira de cards ele parecia mais um card torto do que um
   botao. */
.rmx-home-verdetodas {
    padding-top: var(--rmx-vao-bloco);
    text-align: center;
}

/* 14.3 — sidebar ------------------------------------------------------------ */
.rmx-lateral {
    display: flex;
    flex-direction: column;
    gap: var(--rmx-vao-bloco);
    min-width: 0;
}

.rmx-caixa {
    padding: 20px;
    border: 1px solid var(--rmx-borda);
    border-radius: var(--rmx-raio-xl);
    background: var(--rmx-cartao);
    box-shadow: var(--rmx-sombra-cartao);
}

.rmx-caixa-titulo {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 16px;
    font-family: var(--rmx-fonte-titulo);
    font-size: 19px;
    font-weight: 900;
    text-transform: uppercase;
}

.rmx-caixa-titulo .fa {
    color: var(--rmx-primaria);
}

.rmx-maislidas {
    margin: 0;
    padding: 0;
    list-style: none;
}

.rmx-maislidas li + li {
    margin-top: 16px;
}

.rmx-maislidas a {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 12px;
    align-items: start;
    color: inherit;
    text-decoration: none;
}

.rmx-maislidas a:hover,
.rmx-maislidas a:focus {
    color: inherit;
    text-decoration: none;
}

/* O numero em gradiente: background-clip no texto. O -webkit- nao e legado
   aqui — e o que o Safari e o Chrome ainda exigem. */
.rmx-maislidas-num {
    background-image: var(--rmx-gradiente);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-family: var(--rmx-fonte-titulo);
    font-size: 30px;
    font-weight: 900;
    line-height: 1;
}

.rmx-maislidas-titulo {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
    transition: color 0.2s ease;
}

.rmx-maislidas a:hover .rmx-maislidas-titulo {
    color: var(--rmx-primaria);
}

.rmx-lateral-pub {
    min-width: 0;
}

/**
 * BANNER DE GOVERNO NA SIDEBAR (era uma faixa no bloco de destaques).
 *
 * O painel grava o id_local 11 em 300x250 — ver a escada de medidas em
 * admin/control/publicidade_control.php. Ele cabe na coluna de 320px sem
 * ampliar, que e o motivo da mudanca de lugar.
 *
 * O centro e para o caso de o banner no ar ainda ser mais estreito que a
 * coluna: encostado a esquerda ele pareceria desalinhado da caixa de mais
 * lidas logo acima.
 *
 * A quantidade de itens daquela caixa depende DESTE bloco: com banner ela volta
 * ao top 5, sem banner vai a 8 (ver meta_home.php). E o que faz as duas colunas
 * da secao terminarem mais ou menos juntas.
 */
.rmx-lateral-gov {
    text-align: center;
}

.rmx-lateral-gov img {
    display: inline-block;
    width: auto;
    max-width: 100%;
    height: auto;
    border-radius: var(--rmx-raio-lg);
}

/* 14.4 — bandas de cidade e categoria ---------------------------------------
   A banda de CIDADES voltou a quatro colunas numa linha so (.rmx-grid-md-4) em
   25/08/2026, e a consulta subiu junto — LIMIT 4 no meta_home.php. As duas
   medidas tem de casar: com LIMIT 3 sobra uma coluna vazia, com LIMIT 5 o
   quinto card cai sozinho numa segunda fileira.

   A banda de CATEGORIA continua com o .rmx-grid-md-2 (card grande + lista). */

.rmx-cidade-bloco {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
}

/**
 * O CARTAO PREENCHE O BLOCO — sem isto ele para na altura do proprio conteudo.
 *
 * Aqui o item da grade e o `.rmx-cidade-bloco` (nome da cidade + cartao), e nao
 * o cartao: o `stretch` da grade estica o BLOCO ate a altura da fileira, mas
 * dentro dele o cartao e item de um flex em coluna, e no eixo principal item de
 * flex nao estica sozinho.
 *
 * Quem denunciava era a cidade cuja materia do topo nao tem capa: sem a moldura
 * 4x3 aquele cartao ficava bem mais baixo que os vizinhos, com o resto do bloco
 * em branco embaixo. Esticando, ele volta a medir o mesmo que os outros e a
 * data desce para o pe sozinha — o `margin-top: auto` da secao 7 ja faz isso,
 * so faltava haver altura sobrando para ele distribuir.
 */
.rmx-cidade-bloco .rmx-cartao {
    flex: 1 1 auto;
}

.rmx-cidade-nome {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--rmx-borda);
    color: var(--rmx-texto);
    font-family: var(--rmx-fonte-titulo);
    font-size: 17px;
    font-weight: 700;
    text-decoration: none;
    text-transform: uppercase;
    transition: color 0.2s ease, border-color 0.2s ease;
}

.rmx-cidade-nome:hover,
.rmx-cidade-nome:focus {
    border-color: var(--rmx-primaria);
    color: var(--rmx-primaria);
    text-decoration: none;
}

.rmx-cidade-nome .fa {
    font-size: 13px;
}

/* A banda de categoria: card grande a esquerda, lista curta a direita. Cai
   para uma coluna abaixo de 768px pelo .rmx-grid-md-2. */
.rmx-cat-grade {
    min-width: 0;
}

.rmx-cat-grande {
    min-width: 0;
}

.rmx-cat-lista {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}

/* =============================================================================
   14.5 LISTAGENS (fase 4)

   Cinco telas — noticia-listar, noticia-categoria, noticia-cidade,
   noticia-colunista (vitrine e detalhe de cada uma) — e todas montadas com as
   pecas que ja existiam: .rmx-secao no cabecalho, .rmx-grid-md-4 nas grades,
   .rmx-cat-grade nas bandas de vitrine, .rmx-cartao e .rmx-item nos cards.

   O que e proprio da fase esta abaixo: a moldura da pagina, a banda e o
   paginador de servidor.
   ========================================================================== */
/* HAVIA AQUI um `.rmx-listagem { padding-top: 32; padding-bottom: 64 }`.
   Saiu em 26/08/2026: o vao de borda da pagina passou a morar no `content`
   (secao 3), igual em cima e embaixo e igual em toda pagina do site. Aqueles 64
   ainda SOMAVAM com o `margin-top` do rodape, dando 128 embaixo contra 32 em
   cima. A classe continua no markup como ancora do `.rmx-listagem-minima` e das
   bandas de vitrine. */

/* Uma banda de vitrine: o cabecalho da categoria/cidade mais a grade dela.
   Entre duas bandas vai vao de SECAO — sao assuntos diferentes. */
.rmx-banda + .rmx-banda {
    margin-top: var(--rmx-vao-secao);
}

/* O destino do scroll infinito. Ele e IRMAO da grade impressa pelo servidor e
   carrega a mesma classe de grade, para os cards do ajax cairem nas mesmas
   colunas — mas so ganha respiro depois de ter recebido alguma coisa, senao a
   pagina termina com um vao vazio.

   `:not(:empty)` e o que faz isso: enquanto o div esta vazio ele nao existe
   visualmente. */
.rmx-listagem-mais:not(:empty) {
    margin-top: var(--rmx-vao-item);
}

/**
 * PAGINADOR DE SERVIDOR — a vitrine de categoria e as duas de colunista.
 *
 * Nao e o mesmo que o .rmx-vizinhas da pagina de noticia: la sao duas materias
 * vizinhas, aqui e "pagina 2 de 7". A conta no meio e o que diz isso.
 *
 * O `.disabled` vem do $dis/$dis2 do meta_noticia.php, ja pronto — nao invente
 * outro nome de classe para ele.
 */
.rmx-paginador {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: var(--rmx-vao-secao);
}

.rmx-paginador-conta {
    color: var(--rmx-apagado);
    font-size: 13px;
    white-space: nowrap;
}

.rmx-paginador-conta strong {
    color: var(--rmx-texto);
}

/* Ponta da lista: o botao continua no lugar (para o paginador nao mudar de
   forma entre uma pagina e outra) mas nao clica. */
.rmx-paginador .disabled {
    opacity: 0.4;
    pointer-events: none;
}

/**
 * Pagina de listagem que PODE VIR VAZIA (busca sem resultado, obituario sem
 * registro no periodo). Sem isso o rodape sobe ate quase o cabecalho e a tela
 * parece quebrada.
 *
 * Os 450px vem do `.min-height-busca` do style2023.css, que fazia exatamente
 * este trabalho na tela antiga.
 */
.rmx-listagem-minima {
    min-height: 450px;
}

/**
 * Estado vazio. Era um <style> dentro do proprio busca.php (`.box-busca-aviso`)
 * porque o style2023.css nao tinha classe para isto.
 */
.rmx-vazio {
    margin: 0;
    padding: var(--rmx-vao-bloco) 0;
    color: var(--rmx-apagado);
    font-size: 16px;
}

/* -----------------------------------------------------------------------------
   14.6 BUSCA (fase 5)
   -------------------------------------------------------------------------- */

/* O titulo da busca tem duas partes ("Buscando por" + o termo) e o termo vem do
   leitor: pode ser uma frase inteira. O `.rmx-secao-titulo` e flex sem quebra,
   entao aqui ele precisa poder quebrar em duas linhas. */
.rmx-busca-titulo {
    flex-wrap: wrap;
}

/**
 * O TERMO NAO VAI EM CAIXA ALTA. O cabecalho de secao e todo maiusculo, mas
 * isso vale para rotulo do site — o termo e texto de quem buscou (muitas vezes
 * um nome proprio), e caixa alta ali le como grito e esconde como a pessoa
 * escreveu.
 */
.rmx-busca-termo {
    color: var(--rmx-primaria);
    text-transform: none;
}

.rmx-busca-conta {
    flex: 0 0 auto;
    color: var(--rmx-apagado);
    font-size: 13px;
    white-space: nowrap;
}

.rmx-busca-conta strong {
    color: var(--rmx-texto);
}

/* =============================================================================
   15. NOTÍCIA — DETALHE (fase 3)
   Desenho de referencia: templates/lovable/routes/noticia.$slug.tsx.
   ========================================================================== */

/* 15.1 — avisos de estado (rascunho / revisao) ------------------------------
   Eram <div style=""> inline no noticia-detalhe.php. So o vermelho de alerta
   sai da paleta da marca: e um aviso de sistema, nao conteudo. */
.rmx-aviso-estado {
    padding: 12px 0;
    color: #fff;
    font-size: 14px;
}

.rmx-aviso-estado a {
    color: #fff;
    text-decoration: underline;
}

.rmx-aviso-estado .rmx-container {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.rmx-aviso-rascunho {
    background-image: var(--rmx-gradiente);
}

.rmx-aviso-revisao {
    background: #31708f;
}

.rmx-aviso-noar {
    background: #5a5a5a;
}

/* 15.2 — cabecalho ----------------------------------------------------------
   SEM FOTO, de proposito. A tela antiga nunca imprimiu a capa da materia — a
   primeira imagem da pagina era a da galeria, la embaixo — e a relayout
   converte o que existe em vez de estrear recurso. Um hero com a capa chegou a
   existir aqui e saiu em 24/08/2026.

   O que sobra e a ordem de sempre (voltar, tag da categoria, titulo, linha de
   apoio) vestida com a tipografia nova, na largura da coluna de leitura.
   -------------------------------------------------------------------------- */
/**
 * O INVOLUCRO DA MATERIA PERDEU O PADDING VERTICAL (26/08/2026).
 *
 * O `.box-toda-noticia-detalhe` vem do style2023.css com `padding-top: 50px` e
 * `padding-bottom: 20px`, e os dois estavam fora da escala e fora do padrao do
 * resto do site:
 *
 *   os 50 em cima  faziam a materia abrir 50px abaixo do cabecalho enquanto
 *                  todas as outras paginas abriam com 32;
 *   os 20 embaixo  somavam com o `padding-top: 64` da faixa `.rmx-materia-fim`
 *                  logo em seguida, dando 84px entre o fim do texto e o "Leia
 *                  tambem" — um numero que nao existe em lugar nenhum.
 *
 * Hoje o de cima e do `content` (secao 3, 32px como em toda pagina) e o de
 * baixo e da propria faixa (64, vao de secao — ali muda o assunto).
 *
 * Os dois seletores empatam em especificidade (0,1,0) e esta folha vem depois,
 * entao o zero daqui vence.
 */
.box-toda-noticia-detalhe {
    padding-top: 0;
    padding-bottom: 0;
}

/* Sem padding proprio: quem da o respiro acima do "Voltar" e o involucro da
   pagina, e o de baixo e a barra de meta logo em seguida. */
.rmx-materia-cabecalho {
    padding: 0;
}

/* `flex` e nao `inline-flex`: a tag da categoria vem logo depois no markup e,
   inline, as duas dividiriam a mesma linha — o "Voltar" e um caminho de saida,
   nao um irmao da categoria. */
.rmx-materia-voltar {
    display: flex;
    align-items: center;
    gap: 6px;
    width: fit-content;
    margin-bottom: 16px;
    color: var(--rmx-apagado);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-decoration: none;
    text-transform: uppercase;
}

.rmx-materia-voltar:hover,
.rmx-materia-voltar:focus {
    color: var(--rmx-primaria);
    text-decoration: none;
}

.rmx-materia-titulo {
    margin: 16px 0 0;
    color: var(--rmx-texto);
    font-family: var(--rmx-fonte-titulo);
    font-size: 30px;
    font-weight: 900;
    line-height: 1.05;
}

/* text-3xl / md:text-5xl do layout de referencia. */
@media (min-width: 768px) {
    .rmx-materia-titulo {
        font-size: 48px;
    }
}

.rmx-materia-apoio {
    max-width: 768px; /* max-w-3xl do desenho */
    margin: 16px 0 0;
    color: var(--rmx-tinta-suave);
    font-size: 18px;
    line-height: 1.5;
}

/* 15.3 — barra de meta (autor + data + compartilhar) ------------------------
   Era uma faixa sangrada, de borda a borda da tela, com fundo proprio. Hoje e um
   bloco dentro do .rmx-materia-topo, na largura do container: faixa sangrada
   obrigaria a pagina a mudar de largura no meio, que e o que se queria tirar. */
.rmx-materia-meta {
    margin-top: var(--rmx-vao-item);
    border-top: 1px solid var(--rmx-borda);
    border-bottom: 1px solid var(--rmx-borda);
}

.rmx-materia-meta-linha {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: center;
    gap: 16px;
    padding: 16px 0;
}

@media (min-width: 768px) {
    .rmx-materia-meta-linha {
        grid-template-columns: minmax(0, 1fr) auto;
    }
}

/* Autor e data EMPILHADOS, como no layout de referencia: foto redonda de 40px
   a esquerda, "Por Fulano" na primeira linha e relogio + data + tempo de
   leitura na segunda. Eram duas coisas lado a lado na mesma fileira, e o bloco
   nao lia como credito de materia. */
/* 12px entre a fileira de autores e a linha de datas — eram 2px, e as duas
   nasciam praticamente encostadas. Sao informacoes de naturezas diferentes
   (quem escreveu / quando saiu), e sem vao entre elas o bloco de credito lia
   como um paragrafo unico apertado. */
.rmx-autores {
    display: grid;
    gap: 12px;
    min-width: 0;
}

/* Uma materia pode ter varios autores (noticia.colunistas) — o desenho de
   origem so previa um. Eles ficam lado a lado nesta fileira, e a data continua
   sendo UMA so, embaixo: ela e da materia, nao de cada assinatura. */
.rmx-autores-linha {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
    min-width: 0;
}

/**
 * BLOCO DE AUTOR — foto numa coluna, nome e e-mail empilhados na outra.
 *
 * A foto, o nome e o e-mail sao TRES elementos irmaos, e nao um <a> em volta de
 * tudo: o e-mail e um mailto e o nome leva a pagina do redator — <a> aninhado
 * nao existe em HTML (ver .claude/docs/front-end.md).
 *
 * Era um `margin-left: 52px` no e-mail para empurra-lo ate debaixo do nome (40
 * da foto + 12 do vao). Funcionava por coincidencia de numeros: bastava a foto
 * mudar de medida para o e-mail sair do lugar, e abaixo de 768px a conta era
 * desfeita a mao, o que jogava o e-mail para debaixo da foto. Com a grade de
 * duas colunas o alinhamento e estrutural e vale em qualquer largura.
 */
.rmx-autor-bloco {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    min-width: 0;
}

.rmx-autor-retrato {
    display: block;
    flex: 0 0 auto;
    line-height: 0;
}

.rmx-autor-retrato:hover,
.rmx-autor-retrato:focus {
    text-decoration: none;
}

/* Foto do colunista, ou as iniciais em gradiente quando nao ha foto — o
   desenho de origem so tem as iniciais, mas aqui existe foto de verdade e
   seria desperdicio troca-la por duas letras. */
.rmx-autor-foto {
    width: 40px;
    height: 40px;
    flex: 0 0 auto;
    border-radius: 50%;
    object-fit: cover;
    background: var(--rmx-mudo);
}

.rmx-autor-iniciais {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    flex: 0 0 auto;
    border-radius: 50%;
    background-image: var(--rmx-gradiente);
    color: #fff;
    font-family: var(--rmx-fonte-titulo);
    font-size: 14px;
    font-weight: 900;
    text-transform: uppercase;
}

/* A coluna da direita: selo do quadro, nome e e-mail, um sob o outro.
   `align-items: flex-start` faz cada linha terminar no fim do proprio texto —
   sem ele os links esticariam na largura da coluna e o espaco em branco a
   direita ficaria clicavel (ver .claude/docs/front-end.md). */
.rmx-autor-dados {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    min-width: 0;
    max-width: 100%;
    line-height: 1.25;
}

.rmx-autor-nome {
    max-width: 100%;
    overflow: hidden;
    color: var(--rmx-texto);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: color 0.2s ease;
}

.rmx-autor-nome:hover,
.rmx-autor-nome:focus {
    color: var(--rmx-primaria);
    text-decoration: none;
}

/* O e-mail nasce debaixo do nome pela propria coluna — nao ha mais margem
   calculada a mao. Ele corta com reticencias em vez de quebrar: endereco longo
   numa barra de meta estreita virava duas linhas e empurrava a data. */
.rmx-autor-email {
    max-width: 100%;
    overflow: hidden;
    color: var(--rmx-apagado);
    font-size: 12px;
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rmx-autor-email:hover,
.rmx-autor-email:focus {
    color: var(--rmx-primaria);
    text-decoration: underline;
}

/**
 * "+N" — o botao que abre o modal com TODOS os autores.
 *
 * A barra mostra dois; uma materia com quatro assinaturas virava tres linhas de
 * credito mais altas que o proprio titulo. O botao tem a mesma medida do
 * retrato (40px) e nasce na mesma linha, entao ele le como "mais um autor
 * aqui", que e exatamente o que e.
 */
.rmx-autores-mais {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    flex: 0 0 auto;
    padding: 0;
    border: 1px dashed var(--rmx-borda);
    border-radius: 50%;
    background: var(--rmx-mudo);
    color: var(--rmx-tinta-suave);
    font-family: var(--rmx-fonte-texto);
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}

.rmx-autores-mais:hover,
.rmx-autores-mais:focus {
    border-color: var(--rmx-primaria);
    border-style: solid;
    background: var(--rmx-acento);
    color: var(--rmx-primaria);
}

/* Dentro do modal os autores viram uma lista de uma coluna, com respiro entre
   eles — ali nao ha aperto de barra que justifique corte de linha. */
.rmx-modal-autores {
    display: grid;
    gap: 16px;
}

.rmx-modal-autores .rmx-autor-bloco {
    padding-bottom: 16px;
    border-bottom: 1px solid var(--rmx-borda);
}

.rmx-modal-autores .rmx-autor-bloco:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

/* Selo do quadro do colunista — a cor vem do banco, por style inline. */
.rmx-autor-quadro {
    display: inline-block;
    margin-bottom: 4px;
    padding: 2px 10px;
    border-radius: var(--rmx-pilula);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.rmx-materia-datas {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    color: var(--rmx-apagado);
    font-size: 12px;
}

/**
 * COMPARTILHAR — UM BOTAO SO, e as redes num modal (secao 15.3b).
 *
 * Era uma fileira de bolinhas, uma por rede cadastrada em
 * `noticia_compartilhamento`. A fileira crescia com o banco: cada rede nova
 * espremia a barra de meta, e abaixo de 768px ela quebrava em duas linhas por
 * cima do nome do autor. Um botao rotulado ocupa medida fixa e diz o que faz.
 *
 * O .rmx-compartilhar-divisor saiu junto: nao ha mais o que dividir.
 */
.rmx-compartilhar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
}

.rmx-compartilhar-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 38px;
    padding: 0 16px;
    border: 1px solid var(--rmx-borda);
    border-radius: var(--rmx-pilula);
    background: var(--rmx-cartao);
    color: var(--rmx-tinta-suave);
    font-family: var(--rmx-fonte-texto);
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    transition: border-color 0.2s ease, color 0.2s ease;
}

.rmx-compartilhar-btn:hover,
.rmx-compartilhar-btn:focus {
    border-color: var(--rmx-primaria);
    color: var(--rmx-primaria);
}

/* 15.3b — MODAL, a peca base ------------------------------------------------
   `position: fixed` em relacao a JANELA, e por isso o markup dele mora fora do
   <article> (ver noticia-detalhe.php): qualquer ancestral com transform, filter
   ou contain viraria o bloco de contencao e o modal deixaria de cobrir a tela.

   O [hidden] precisa de display:none explicito em toda regra que declare
   display — senao o `display: flex` daqui ganha do atributo e o modal nasce
   aberto. Mesma armadilha ja documentada para as setas das pilulas.

   -----------------------------------------------------------------------------
   ESTA E A UNICA DECLARACAO DE `.rmx-modal` E `.rmx-modal-caixa`. MANTENHA ASSIM
   -----------------------------------------------------------------------------

   Sao QUATRO telas usando esta peca, e so uma delas tem classe propria:

     .rmx-modal                    compartilhar   (noticia-detalhe.php)
     .rmx-modal                    "+N autores"   (noticia-detalhe.php)
     .rmx-modal .rmx-modal-vela    acender vela   (obituario.php)
     .rmx-modal .modal-vaga        vaga           (emprego-listar.php)

   Em 26/08/2026 a secao 21 (vagas, fase 6) declarou `.rmx-modal` e
   `.rmx-modal-caixa` DE NOVO, mais abaixo neste mesmo arquivo. Empate de
   especificidade, e quem vem depois vence: as quatro telas passaram a usar o
   desenho da janela de vaga. A de compartilhar deixou de ficar no meio da tela
   (`align-items: flex-start`) e a caixa perdeu o `padding: 24px` daqui, com o
   conteudo encostando na borda.

   Nao deu erro nenhum e nao apareceu na tela que a mudanca estava tratando —
   foi preciso alguem abrir o compartilhar de uma materia para notar. Precisando
   de um desenho diferente de janela, escopar na classe DAQUELA tela, como a
   `.modal-vaga` e a `.rmx-modal-vela` fazem. Nunca redeclarar `.rmx-modal`. */
.rmx-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.rmx-modal[hidden] {
    display: none;
}

/* Trava a rolagem do fundo enquanto o modal esta aberto. */
.rmx-modal-aberto {
    overflow: hidden;
}

.rmx-modal-fundo {
    position: absolute;
    inset: 0;
    background: rgba(9, 10, 19, 0.7);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}

.rmx-modal-caixa {
    position: relative;
    width: 100%;
    max-width: 440px;
    max-height: calc(100vh - 32px);
    overflow-y: auto;
    padding: 24px;
    border-radius: var(--rmx-raio-2xl);
    background: var(--rmx-cartao);
    box-shadow: 0 24px 60px -12px rgba(0, 0, 0, 0.4);
}

.rmx-modal-topo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 20px;
}

.rmx-modal-titulo {
    margin: 0;
    font-family: var(--rmx-fonte-titulo);
    font-size: 21px;
    font-weight: 900;
    text-transform: uppercase;
}

.rmx-modal-fechar {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    flex: 0 0 auto;
    padding: 0;
    border: 0;
    border-radius: var(--rmx-pilula);
    background: var(--rmx-mudo);
    color: var(--rmx-tinta-suave);
    font-size: 15px;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
}

.rmx-modal-fechar:hover,
.rmx-modal-fechar:focus {
    background: var(--rmx-acento);
    color: var(--rmx-primaria);
}

/* Duas colunas de redes. Cada linha traz o icone na cor da rede (vinda do
   banco) e o NOME ao lado — era so a bolinha antes, e sem rotulo o leitor
   precisava reconhecer o glifo. */
.rmx-modal-redes {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.rmx-modal-rede {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    padding: 10px 12px;
    border: 1px solid var(--rmx-borda);
    border-radius: var(--rmx-raio-lg);
    color: var(--rmx-texto);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    transition: border-color 0.2s ease, color 0.2s ease;
}

.rmx-modal-rede:hover,
.rmx-modal-rede:focus {
    text-decoration: none;
}

.rmx-modal-rede span:last-child {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* A bolinha colorida. O fundo vem do <style> por rede gerado no PHP; aqui so a
   forma e o branco do glifo, que precisa valer sobre qualquer cor do banco. */
.rmx-modal-rede-ico {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: var(--rmx-apagado);
    color: #fff;
    font-size: 14px;
}

.rmx-modal-rede-ico i {
    color: #fff;
}

.rmx-modal-link {
    display: flex;
    gap: 8px;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--rmx-borda);
}

.rmx-modal-link input {
    min-width: 0;
    flex: 1 1 auto;
    height: 40px;
    padding: 0 12px;
    border: 1px solid var(--rmx-borda);
    border-radius: var(--rmx-raio);
    background: var(--rmx-mudo);
    color: var(--rmx-tinta-suave);
    font-family: var(--rmx-fonte-texto);
    font-size: 13px;
    text-overflow: ellipsis;
}

.rmx-modal-link .rmx-btn {
    flex: 0 0 auto;
    min-height: 40px;
}

.rmx-modal-nativo {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    margin-top: 12px;
    padding: 10px;
    border: 1px solid var(--rmx-borda);
    border-radius: var(--rmx-raio-lg);
    background: transparent;
    color: var(--rmx-tinta-suave);
    font-family: var(--rmx-fonte-texto);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 0.2s ease, color 0.2s ease;
}

.rmx-modal-nativo[hidden] {
    display: none;
}

.rmx-modal-nativo:hover,
.rmx-modal-nativo:focus {
    border-color: var(--rmx-primaria);
    color: var(--rmx-primaria);
}

.rmx-modal-nativo img {
    width: 15px;
    height: 15px;
}

@media (max-width: 419px) {
    .rmx-modal-redes {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* 15.4 — corpo --------------------------------------------------------------
   A pagina tem TRES faixas, todas no mesmo .rmx-container — uma borda
   esquerda so, do topo ao fim:

     .rmx-materia-topo      titulo, autores e datas   largura inteira
     .rmx-materia-corpo     materia | compartilhar    duas colunas
     .rmx-materia-conversa  comentarios               largura inteira

   Só o texto se divide. A proporcao das duas colunas e a do layout antigo —
   col-8 + col-4 (noticia-detalhe-bkp.php) —, aqui como 2fr/1fr, o que da ~800px
   de coluna de leitura contra os ~730px que a tela antiga tinha.

   Coluna fixa em px foi o que criou o problema anterior: com 240px de trilho o
   texto ficava com o que sobrasse, e a largura do texto passava a depender da
   largura da tela em vez de acompanhar a pagina. */
/**
 * A LARGURA DA MATERIA — 800px, e a mesma nas TRES faixas.
 *
 * Confere com a proporcao do layout antigo: o `.container` do bootstrap 3 para
 * em 1170px e desconta 15px de cada lado, sobrando 1140 de conteudo; o col-8 da
 * materia levava 8/12 disso (760px) e descontava mais 15 de cada lado — ~730px
 * de texto (confira o noticia-detalhe-bkp.php).
 *
 * Aqui os 800px sao a caixa; o .rmx-container desconta 16px de cada lado e
 * sobram 768px de texto. E ~5% mais largo que os 730 de antes, e e proposital:
 * o corpo passou de 15px para 18px, e uma linha maior pede medida maior para
 * cair na mesma contagem de caracteres.
 *
 * O que NAO pode voltar e a largura variavel: a pagina inteira, do "Voltar" ao
 * ultimo comentario, mede o mesmo. Foi o "efeito sanfona" — 896/1152/1280 na
 * mesma tela — que derrubou os containers estreito e medio da secao 3.
 *
 * As tres faixas continuam sendo tres so pelo que carregam:
 *   .rmx-materia-topo      titulo, autores, datas, compartilhar
 *   .rmx-materia-corpo     o texto
 *   .rmx-materia-conversa  comentarios e Google Noticias
 *
 * A publicidade do fim da materia fica FORA das tres, no .rmx-container cheio:
 * e a unica peca da tela que usa a largura inteira.
 */
.rmx-materia-topo,
.rmx-materia-corpo,
.rmx-materia-conversa {
    max-width: 800px;
    margin: 0 auto;
}

.rmx-materia-topo {
    padding-bottom: var(--rmx-vao-bloco);
}

.rmx-materia-corpo {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--rmx-vao-secao);
    padding-bottom: var(--rmx-vao-secao);
}

/* Sem padding proprio: os 64px de baixo do corpo, logo acima, ja sao o vao
   entre o fim do texto e os comentarios. Os 8px que estavam aqui so somavam um
   numero fora da escala. */
.rmx-materia-conversa {
    padding-top: 0;
}

.rmx-materia-texto {
    min-width: 0;
    color: var(--rmx-tinta);
    font-family: var(--rmx-fonte-texto);
    font-size: 18px;
    line-height: 1.75;
}

.rmx-materia-texto p {
    margin: 0 0 24px;
}

.rmx-materia-texto img {
    max-width: 100%;
    height: auto;
}

.rmx-materia-texto a {
    color: var(--rmx-primaria);
}

/* Capitular do primeiro paragrafo, em gradiente. `float: left` e o que faz o
   texto correr ao lado dela. */
.rmx-materia-texto > p:first-of-type::first-letter {
    float: left;
    margin-right: 8px;
    background-image: var(--rmx-gradiente);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-family: var(--rmx-fonte-titulo);
    font-size: 60px;
    font-weight: 900;
    line-height: 0.85;
}

.rmx-materia-texto blockquote {
    margin: 40px 0;
    padding: 24px;
    border: 0;
    border-left: 4px solid var(--rmx-primaria);
    border-radius: var(--rmx-raio-xl);
    background: rgba(255, 228, 223, 0.4);
    font-family: var(--rmx-fonte-titulo);
    font-size: 21px;
    font-weight: 700;
    line-height: 1.3;
}

.rmx-materia-texto mark {
    padding: 0 4px;
    background: var(--rmx-acento);
    color: inherit;
}

/**
 * IFRAME DO TEXTO (embeds de Instagram/TikTok).
 *
 * O style2023.css grampeia `height: 185px !important` em todo iframe do texto
 * da matéria abaixo de 400px, e `max-height: 400px` até 767px. Era isso que
 * cortava o embed no iPhone e jogava fora a altura medida pelo próprio
 * plugin. Como a folha antiga continua carregada, o desfazer precisa de
 * !important — e a altura boa é a que vem no style="" do iframe.
 */
.rmx-materia-texto iframe {
    max-width: 100%;
    max-height: none !important;
}

/**
 * O ANUNCIO DO MEIO DA MATERIA VAI ENTRE DUAS LINHAS.
 *
 * So havia a de cima (a do `.rmx-materia-pub-aviso`, logo abaixo). Uma linha so
 * separa o texto do anuncio, mas nao devolve o texto depois dele: o paragrafo
 * seguinte comecava direto embaixo do banner e parecia continuar a peca de
 * publicidade. A de baixo fecha o intervalo — e o mesmo par de linhas que
 * jornal impresso usa em volta de um anuncio no meio da coluna.
 *
 * O `padding-bottom` e o que separa o banner da linha; sem ele a imagem
 * encostaria nela.
 */
.rmx-materia-pub {
    margin: var(--rmx-vao-bloco) 0;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--rmx-borda);
}

.rmx-materia-pub-aviso {
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--rmx-borda);
    color: var(--rmx-apagado);
    font-family: var(--rmx-fonte-texto);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-align: center;
    text-transform: uppercase;
}

/* 15.5 — barra lateral (compartilhar + banner) ------------------------------
   `hidden lg:block` no original, e `hidden-xs` no col-4 antigo: some abaixo de
   1024px, onde a barra de meta la em cima ja tem o compartilhar e o banner do
   fim da materia ja aparece no fluxo. */
.rmx-materia-trilho {
    display: none;
}

@media (min-width: 1024px) {
    .rmx-materia-trilho {
        display: block;
    }
}

.rmx-materia-trilho-fixo {
    position: sticky;
    /* O cabecalho gruda no topo; 128px deixa a barra abaixo dele. */
    top: 128px;
    /* A coluna e 1/3 da pagina (~400px), larga demais para botao de icone+nome.
       O conteudo para em 320px, a mesma medida da barra lateral da home. */
    max-width: 320px;
}

.rmx-materia-lateral-pub {
    margin-top: 32px;
}

.rmx-materia-trilho-titulo {
    margin: 0 0 8px;
    color: var(--rmx-apagado);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.rmx-materia-trilho a,
.rmx-materia-trilho button {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    margin-bottom: 8px;
    padding: 8px 12px;
    border: 1px solid var(--rmx-borda);
    border-radius: var(--rmx-raio-lg);
    background: var(--rmx-cartao);
    color: var(--rmx-texto);
    font-family: var(--rmx-fonte-texto);
    font-size: 14px;
    font-weight: 600;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    transition: border-color 0.2s ease, color 0.2s ease;
}

.rmx-materia-trilho a:hover,
.rmx-materia-trilho a:focus,
.rmx-materia-trilho button:hover,
.rmx-materia-trilho button:focus {
    border-color: var(--rmx-primaria);
    color: var(--rmx-primaria);
    text-decoration: none;
}

/* 15.6 — galeria ------------------------------------------------------------ */
.rmx-galeria {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin: var(--rmx-vao-bloco) 0;
}

@media (min-width: 640px) {
    .rmx-galeria {
        grid-template-columns: repeat(4, 1fr);
    }
}

.rmx-galeria a {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: var(--rmx-raio-lg);
    aspect-ratio: 1 / 1;
}

.rmx-galeria img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.rmx-galeria a:hover img {
    transform: scale(1.06);
}

/* A lupa so aparece no hover, sobre um veu. */
.rmx-galeria-lupa {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    background: rgba(0, 0, 0, 0.45);
    color: #fff;
    font-size: 20px;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.rmx-galeria a:hover .rmx-galeria-lupa,
.rmx-galeria a:focus .rmx-galeria-lupa {
    opacity: 1;
}

/* 15.7 — tags --------------------------------------------------------------- */
.rmx-materia-tags {
    margin-top: var(--rmx-vao-bloco);
    padding-top: 24px;
    border-top: 1px solid var(--rmx-borda);
}

.rmx-materia-tags-titulo {
    margin: 0 0 12px;
    color: var(--rmx-apagado);
    font-family: var(--rmx-fonte-texto);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.rmx-materia-tags-lista {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* 15.7b — a CONVERSA (comentarios) e o Google Noticias -----------------------
   Fica na LARGURA INTEIRA, fora da grade da materia: nao e leitura, e a
   conversa em volta dela.

   TUDO O QUE DESENHA A CONVERSA MORA NA SECAO 23, no fim deste arquivo, e vale
   para as DUAS telas (noticia e obituario). O que sobrou aqui e o que so a
   materia tem. */

/* Era `width: 96.5%` com `margin: 0 auto` — sobra do .row do bootstrap, que
   deixava a caixa desalinhada com o bloco de comentarios logo acima dela. */
.rmx-materia-conversa .box-google-noticia {
    width: 100%;
    /* O style2023.css so lhe da `margin-bottom: 30px` — em cima ela vinha com
       zero e encostava no que estivesse acima: o botao "Ver mais comentarios"
       quando ele existe, o ultimo comentario quando nao. O vao e de BLOCO
       porque ali muda o assunto (a conversa acaba, comeca a chamada do Google
       Notícias). */
    margin-top: var(--rmx-vao-bloco);
}

/* "Ver mais comentarios". Os do sexto em diante JA ESTAO no HTML, dentro do
   #comentarios-resto com [hidden] — o botao so tira o atributo. Nao ha ajax
   aqui de proposito: a consulta ja trouxe todos numa vez, e ir ao banco de novo
   para mostrar texto que ja estava na pagina seria trabalho por nada.

   O [hidden] precisa de display:none explicito porque a regra logo abaixo
   declara display; sem ele o bloco nasceria aberto.

   E FLEX-COLUNA COM GAP, e nao `block`: desde 02/09/2026 os comentarios sao
   cartoes espacados pelo `gap` da `.rmx-coment-lista`, e nao mais itens com
   margem propria. Como bloco, os cartoes do sexto em diante sairiam colados uns
   nos outros — e so DEPOIS de alguem clicar em "ver mais", que e onde ninguem
   confere. O gap e o mesmo da lista, para a junta entre o quinto e o sexto ficar
   igual a todas as outras. */
.rmx-comentarios-resto {
    display: flex;
    flex-direction: column;
    gap: var(--rmx-vao-item);
}

.rmx-comentarios-resto[hidden] {
    display: none;
}

/**
 * SEM `margin-top` (02/09/2026) — quem da o vao aqui e o `gap` da lista.
 *
 * O botao e um item da `.rmx-coment-lista`, que ja e flex-coluna com 24px de
 * `gap`. Os 32px que moravam aqui SOMAVAM com ele: 56px entre o ultimo
 * comentario e o botao, mais do que entre dois comentarios quaisquer — o botao
 * parecia pertencer ao que vem depois da conversa, e nao a ela.
 *
 * Este numero e da epoca em que os comentarios eram itens separados por filete,
 * sem `gap` nenhum; quando a lista virou uma pilha de cartoes com `gap`, ele
 * passou a ser somado em vez de substituido. E a armadilha de sempre: margem
 * propria dentro de container com `gap`.
 *
 * O vao DEPOIS do botao continua nao morando aqui — e a caixa "Siga no Google"
 * que pede `margin-top` (secao 15.7), porque sem o botao ela encostaria do
 * mesmo jeito no ultimo comentario.
 */
.rmx-comentarios-mais {
    text-align: center;
}

/* 15.8 — fim da materia ----------------------------------------------------- */
.rmx-materia-fim {
    padding-top: var(--rmx-vao-secao);
    padding-bottom: var(--rmx-vao-secao);
    border-top: 1px solid var(--rmx-borda);
    background: var(--rmx-superficie);
}

.rmx-materia-fim .rmx-secao {
    border-bottom-color: rgba(0, 0, 0, 0.08);
}

/**
 * AS MAIS LIDAS DA SEMANA — A FAIXA QUE NAO E PINTADA (04/09/2026).
 *
 * Ela saiu de dentro da `.rmx-materia-fim` (ver o markup do noticia-detalhe).
 * O problema era o pe da pagina: a faixa cinzenta acabava logo abaixo do
 * ultimo titulo e, entre ela e o rodape, ficavam os 32px de `padding-bottom`
 * do `content` — no fundo claro da pagina. Uma tira clara de altura sem motivo,
 * larga o bastante para parecer bloco vazio e nao respiro.
 *
 * A correcao NAO e mexer no vao: e nao pintar esta faixa. Sem `background`
 * proprio ela herda o fundo da pagina, e a tira do `content` passa a ser a
 * continuacao dela — deixa de existir como tira.
 *
 * `padding-bottom: 0` pelo mesmo motivo: quem fecha a pagina daqui para baixo
 * e o `content`, e somar os dois traria de volta um vao de 80px que nenhuma
 * outra pagina tem.
 *
 * `padding-top` e nao `margin-top`: o vao e DA FAIXA, como o das outras. Cada
 * uma abre e fecha com o proprio respiro (48, o vao de secao), e a troca de cor
 * no meio e o que separa um do outro — nao e vao somado, e a borda entre duas
 * regioes, com metade de cada lado. Isto substitui o `.rmx-secao-afastada` que
 * o titulo usava quando ele morava dentro da faixa cinzenta.
 */
.rmx-materia-lidas {
    padding-top: var(--rmx-vao-secao);
    padding-bottom: 0;
}

/* Anterior / proxima */
/* Paginador anterior/proxima. As duas metades sao ESPELHADAS: a seta fica
   sempre na borda de fora e o texto encosta nela. Sem isso o par vira duas
   fileiras iguais e nada indica para que lado cada uma leva. */
/**
 * O VAO MUDOU DE LADO junto com o bloco (26/08/2026).
 *
 * Ele morava na faixa `.rmx-materia-fim`, ABERTO por ela e seguido do "Leia
 * tambem" — dai o `margin-bottom` de secao e nenhum em cima. Agora fecha a
 * coluna de leitura: em cima precisa se descolar da caixa do Google Noticias
 * (vao de BLOCO, o mesmo que aquela caixa usa para se descolar dos
 * comentarios), e embaixo nao precisa de nada — o `margin-top` do banner que
 * vem a seguir ja e o vao de secao, e somar os dois daria 128.
 */
.rmx-vizinhas {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
    margin-top: var(--rmx-vao-bloco);
}

@media (min-width: 768px) {
    .rmx-vizinhas {
        grid-template-columns: repeat(2, 1fr);
    }
    /* Sem anterior, a proxima ainda tem de nascer na celula da direita —
       senao ela escorrega para a esquerda e o paginador aponta para o lado
       errado. */
    .rmx-vizinha-prox {
        grid-column: 2;
    }
}

.rmx-vizinha {
    display: flex;
    align-items: center;
    gap: 16px;
    min-width: 0;
    padding: 12px 16px;
    border: 1px solid var(--rmx-borda);
    border-radius: var(--rmx-raio-xl);
    background: var(--rmx-cartao);
    color: inherit;
    text-decoration: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.rmx-vizinha:hover,
.rmx-vizinha:focus {
    border-color: var(--rmx-primaria);
    box-shadow: var(--rmx-sombra-cartao);
    color: inherit;
    text-decoration: none;
}

/**
 * O `text-align: right` sozinho NAO alinhava nada: o .rmx-vizinha e flex, e
 * text-align so move o texto DENTRO da caixa dele — a caixa continuava do
 * tamanho do conteudo, encostada a esquerda, com o vao sobrando a direita. Era
 * por isso que a "proxima" parecia alinhada ao lado errado.
 *
 * Quem alinha e o `flex: 1` no bloco de texto: ele estica e empurra a foto e a
 * seta para a borda de fora, e ai o text-align tem o que alinhar. Vale nos
 * DOIS lados — no "anterior" o texto encosta na foto pela esquerda, no
 * "proxima" pela direita —, que e o que faz o par ler como espelhado.
 */
/* `flex: 1 1 auto` e nao `text-align`: `text-align` nao move item de flex, so o
   texto DENTRO dele — era por isso que o "proxima" nao encostava na direita.
   O `min-width: 0` deixa o titulo cortar em vez de esticar a celula. As duas
   linhas estavam em regras separadas, 44 linhas uma da outra. */
.rmx-vizinha-texto {
    flex: 1 1 auto;
    min-width: 0;
}

.rmx-vizinha-prox {
    text-align: right;
}

.rmx-vizinha-seta {
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--rmx-mudo);
    color: var(--rmx-apagado);
    font-size: 14px;
    transition: background 0.2s ease, color 0.2s ease;
}

.rmx-vizinha:hover .rmx-vizinha-seta,
.rmx-vizinha:focus .rmx-vizinha-seta {
    background: var(--rmx-gradiente);
    color: #fff;
}

.rmx-vizinha-foto {
    display: block;
    flex: 0 0 auto;
    width: 56px;
    height: 56px;
    overflow: hidden;
    border-radius: var(--rmx-raio-lg);
    background: var(--rmx-mudo);
}

.rmx-vizinha-foto img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.rmx-vizinha-rotulo {
    display: block;
    margin-bottom: 4px;
    color: var(--rmx-apagado);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

/* Sem `display` aqui de proposito: o .rmx-linhas-2 que acompanha este elemento
   precisa do `display: -webkit-box` dele para cortar as linhas, e como ele e
   declarado antes na folha, um `display: block` aqui venceria e mataria o
   corte. */
.rmx-vizinha-titulo {
    font-family: var(--rmx-fonte-titulo);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.25;
    transition: color 0.2s ease;
}

.rmx-vizinha:hover .rmx-vizinha-titulo,
.rmx-vizinha:focus .rmx-vizinha-titulo {
    color: var(--rmx-primaria);
}

/**
 * PE DE UMA LISTAGEM QUE CARREGA MAIS — aviso de carregando e o botao.
 *
 * UMA PECA PARA AS QUATRO listagens que rolam sozinhas por um numero de vezes e
 * depois pedem clique: o "Leia tambem" da pagina de noticia, o obituario e as
 * duas telas de documento em PDF. Nasceu como `.rmx-leia-mais`, so do Leia
 * tambem, e foi generalizada em 26/08/2026 quando as outras tres ganharam o
 * mesmo comportamento — o nome antigo criaria quatro copias do mesmo bloco, que
 * e a duplicacao que este projeto ja pagou caro (ver relayout-2026.md).
 *
 * Os dois filhos nascem com [hidden] e quem os acende e o `loadMore*` da tela:
 * o aviso durante a chamada, o botao quando as cargas automaticas acabam. Sem
 * JS a listagem continua sendo o que o PHP imprimiu — nada depende do script
 * para existir.
 *
 * O VAO DE BLOCO NAO E ENFEITE: colado na ultima fileira o botao le como mais
 * um card torto e nao como o fecho da secao. E a mesma razao do
 * `.rmx-home-verdetodas`.
 *
 * A altura minima evita o pulo: o aviso e o botao se revezam no mesmo lugar, e
 * sem medida reservada a pagina saltava a cada troca, bem no momento em que
 * alguem esta rolando.
 */
.rmx-mais-acoes {
    display: flex;
    align-items: center;
    justify-content: center;
    /* Reserva a altura do botao para a linha nao pular quando ele vira
       "carregando" e volta. So vale enquanto HA o que mostrar — ver a regra
       logo abaixo. */
    min-height: 52px;
    margin-top: var(--rmx-vao-bloco);
}

.rmx-mais-acoes [hidden] {
    display: none;
}

/**
 * FAIXA VAZIA NAO OCUPA ALTURA.
 *
 * Os dois filhos nascem com `hidden` e voltam a ficar assim no fim da lista
 * (`reachedMax`), que sao justamente os dois momentos mais longos da vida da
 * tela: a pagina recem-aberta e a lista esgotada. Nos dois, a faixa continuava
 * medindo 52px de altura mais 32 de margem — 84px de nada entre a ultima
 * fileira de cards e o que viesse depois, e so nas listagens que rolam. Era o
 * mesmo vao parecendo maior aqui do que nas outras telas.
 *
 * Vale para as QUATRO que usam a peca: "Leia tambem" da noticia, obituario e as
 * duas de documento em PDF.
 *
 * REGRA SEPARADA de proposito: num navegador sem `:has()` o seletor inteiro e
 * descartado, e o que se perde e so a correcao — a faixa volta a reservar os
 * 52px, que e o comportamento de antes. Mesma convencao das regras de `:has()`
 * do style2023.css.
 */
.rmx-mais-acoes:not(:has(> :not([hidden]))) {
    min-height: 0;
    margin-top: 0;
}

.rmx-mais-carregando {
    color: var(--rmx-apagado);
    font-size: 13px;
    font-weight: 600;
}

.rmx-mais-carregando .fa {
    margin-right: 6px;
    color: var(--rmx-primaria);
}

/* "As mais lidas" no fim da materia usa a largura toda, e nao os 320px da
   sidebar da home — por isso a lista quebra em colunas em vez de empilhar
   cinco itens numa coluna magra no meio da tela. */
@media (min-width: 768px) {
    .rmx-maislidas-larga {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 16px 32px;
    }
    .rmx-maislidas-larga li + li {
        margin-top: 0;
    }
}

@media (min-width: 1024px) {
    .rmx-maislidas-larga {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* O video da materia (noticia_video_link traz o <iframe> pronto do YouTube).
   O style2023.css grampeia altura em iframe do texto; aqui o invólucro impõe a
   proporcao e o iframe preenche. */
.rmx-materia-texto .box-not-video {
    position: relative;
    margin-bottom: 32px;
    aspect-ratio: 16 / 9;
}

.rmx-materia-texto .box-not-video iframe {
    width: 100% !important;
    height: 100% !important;
    max-height: none !important;
    border: 0;
}

/* =============================================================================
   16. OBITUÁRIO (fase 5)

   Quatro telas, e as tres ultimas eram O MESMO ARQUIVO TRES VEZES:
   `capela.php`, `cemiterio.php` e `funeraria.php` tinham markup e <style>
   copiados, so mudando o prefixo da variavel e os rotulos. Agora as tres
   incluem `integracao/obituario/local_tela.php` e o CSS delas e este aqui, uma
   vez so.

   Da mesma forma, o <style> de 450 linhas que morava dentro do `obituario.php`
   (vela, janela da vela, busca, ficha, paginacao) foi todo para ca.
   ========================================================================== */

/* 16.1 — busca em linha ------------------------------------------------------
   Campo + botao, usada pelas quatro telas do modulo. O campo e o
   `.rmx-campo-busca` do cabecalho; o que esta aqui e so o arranjo em linha. */
.rmx-busca-linha {
    display: flex;
    gap: 8px;
    margin-bottom: var(--rmx-vao-bloco);
}

.rmx-busca-linha .rmx-campo-busca {
    flex: 1 1 auto;
    min-width: 0;
}

/* Mesma altura do campo ao lado. O `.rmx-btn` do site tem 40px de piso e o
   campo tem 44: lado a lado na mesma linha, os 4px de diferenca leem como
   desalinho. */
.rmx-busca-linha .rmx-btn {
    flex: 0 0 auto;
    min-height: var(--rmx-campo-altura);
}

/* 16.2 — ficha do falecido ---------------------------------------------------
   A MESMA peca serve a listagem e a pagina de detalhe; o que muda e o que vai
   dentro dela (enlutados, observacoes e comentarios so na completa) e o link do
   pe. Ver montaFichaObituario() no obituario.php. */
.rmx-obt {
    display: grid;
    gap: var(--rmx-vao-bloco);
    padding: 24px;
    border: 1px solid var(--rmx-borda);
    border-radius: var(--rmx-raio-xl);
    background: var(--rmx-cartao);
}

.rmx-obt + .rmx-obt {
    margin-top: var(--rmx-vao-bloco);
}

/**
 * "ESTA FICHA TEM BANNER" — a classe que o PHP poe no <article>.
 *
 * A CLASSE VEM DO PHP (`integracao/obituario/ficha.php`) e nao de um `:has()`:
 * um seletor que o navegador nao entendesse deixaria toda ficha SEM banner com
 * o conteudo colado na borda. As fichas que chegam pelo scroll infinito nao a
 * levam porque nao levam banner (decisao documentada em
 * .claude/docs/relayout-2026.md: copiar o bloco de publicidade para o ajax
 * contaria uma visualizacao a cada rolagem). A nota completa tambem nao a leva:
 * desde 02/09/2026 ela nao tem publicidade nenhuma.
 *
 * A folha a usa para DUAS coisas, uma em cada lado do breakpoint de 900px —
 * zerar o respiro de baixo aqui, e esticar a coluna da direita por duas linhas
 * la embaixo, na secao da `.rmx-obt-pub`.
 *
 * ATE 899px O CARTAO PERDE O RESPIRO DE BAIXO. A faixa e o rodape do cartao e
 * vai encostada na borda de baixo dele; os 24px de `padding` a deixariam
 * boiando num vao branco, que e o oposto de uma faixa. De 900px para cima o
 * anuncio deixa de ser faixa e volta para dentro da coluna de dados — ali o
 * cartao precisa do respiro de sempre, senao a arte encosta na borda.
 */
@media (max-width: 899px) {
    .rmx-obt-com-pub {
        padding-bottom: 0;
    }
}

/**
 * O destino do scroll infinito. O `.rmx-obt + .rmx-obt` acima resolve o vao
 * entre fichas irmas, mas NAO a junta entre a ultima ficha impressa pelo
 * servidor e a primeira que chega pelo ajax — essa nasce dentro de outro
 * elemento e nao tem irma anterior. Sem esta regra as duas ficam encostadas, e
 * so depois da primeira rolagem, que e onde ninguem repara.
 *
 * O vao de BLOCO (e nao o de item do `.rmx-listagem-mais` generico) para casar
 * exatamente com o das fichas de cima.
 */
.rmx-obt-mais:not(:empty) {
    margin-top: var(--rmx-vao-bloco);
}

@media (min-width: 900px) {
    .rmx-obt {
        grid-template-columns: minmax(0, 1fr) 280px;
    }
}

.rmx-obt-nome {
    margin: 0 0 20px;
    font-family: var(--rmx-fonte-titulo);
    font-size: 28px;
    font-weight: 900;
    line-height: 1.1;
    letter-spacing: -0.01em;
    color: var(--rmx-tinta);
}

/* Um grupo de informacoes (o cabecalho sem titulo, SEPULTAMENTO, FUNERARIA...).
   O respiro entre grupos e de BLOCO, e nao de secao: sao partes do mesmo
   assunto. */
.rmx-obt-grupo + .rmx-obt-grupo {
    margin-top: var(--rmx-vao-bloco);
}

.rmx-obt-grupo-titulo {
    margin: 0 0 10px;
    font-family: var(--rmx-fonte-titulo);
    font-size: 15px;
    font-weight: 900;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--rmx-primaria);
}

/**
 * Os dados sao uma <dl> de verdade e nao uma pilha de <p><b>rotulo</b> valor.
 * Rotulo e valor sao par, e num obituario isso e o conteudo inteiro da pagina —
 * marcar o par e o que faz um leitor de tela anunciar "Idade: 72" em vez de uma
 * frase corrida.
 *
 * `max-content` na primeira coluna deixa os rotulos alinhados entre si sem
 * medida fixa: o mais longo do bloco manda.
 */
.rmx-obt-lista {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    gap: 6px 16px;
    margin: 0;
}

.rmx-obt-lista dt {
    color: var(--rmx-apagado);
    font-size: 14px;
    font-weight: 600;
}

.rmx-obt-lista dd {
    margin: 0;
    color: var(--rmx-texto);
    font-size: 15px;
    line-height: 1.5;
}

/* Abaixo de 600px os pares empilham: com nome de cemiterio comprido a coluna do
   valor virava uma tira de duas letras. */
@media (max-width: 599px) {
    .rmx-obt-lista {
        grid-template-columns: minmax(0, 1fr);
        gap: 2px;
    }

    .rmx-obt-lista dd {
        margin-bottom: 8px;
    }
}

/* Local do velorio / do sepultamento: o link abre o mapa mas fica na cor do
   texto ao redor — e informacao primeiro e link depois. O laranja so no hover,
   que e o que avisa que ali se clica. */
.rmx-obt-lista dd a,
.rmx-obt-lista dd a:focus {
    color: var(--rmx-texto);
    text-decoration: underline;
    text-decoration-color: var(--rmx-borda);
    text-underline-offset: 3px;
}

.rmx-obt-lista dd a:hover {
    color: var(--rmx-primaria);
    text-decoration-color: currentColor;
}

/* Texto corrido (enlutados, observacoes) — nao e par rotulo/valor. */
.rmx-obt-texto {
    margin: 0;
    color: var(--rmx-texto);
    font-size: 15px;
    line-height: 1.6;
}

/* A coluna da direita: foto, compartilhar, vela e o link do pe. */
.rmx-obt-lado {
    display: flex;
    flex-direction: column;
    gap: 20px;
    min-width: 0;
}

/**
 * A foto vai em PRETO E BRANCO, como na tela antiga. Nao e efeito: e o unico
 * lugar do site onde a foto e de uma pessoa que morreu, e a cor a puxaria para
 * o mesmo peso visual dos cards de noticia logo acima.
 */
.rmx-obt-foto {
    overflow: hidden;
    border-radius: var(--rmx-raio-lg);
    background: var(--rmx-superficie);
}

.rmx-obt-foto img {
    display: block;
    width: 100%;
    height: auto;
    filter: grayscale(100%);
}

.rmx-obt-lado-titulo {
    margin: 0 0 10px;
    font-family: var(--rmx-fonte-titulo);
    font-size: 13px;
    font-weight: 900;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-align: center;
    color: var(--rmx-apagado);
}

.rmx-obt-redes {
    display: flex;
    justify-content: center;
    gap: 8px;
}

/**
 * As bolinhas de compartilhar. As cores das redes sao as das marcas e nao saem
 * da paleta do portal de proposito — e assim que se reconhece o botao sem ler.
 */
.rmx-obt-rede {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    padding: 0;
    border: 0;
    border-radius: var(--rmx-raio);
    color: #fff;
    font-size: 16px;
    text-decoration: none;
    cursor: pointer;
    transition: filter 0.2s ease, transform 0.2s ease;
}

.rmx-obt-rede:hover,
.rmx-obt-rede:focus {
    color: #fff;
    text-decoration: none;
    filter: brightness(115%);
    transform: translateY(-1px);
}

.rmx-obt-rede-whats { background: #25d366; }
.rmx-obt-rede-face { background: #3b5998; }
.rmx-obt-rede-site { background: var(--rmx-tinta-suave); }

.rmx-obt-rede-geral {
    background: var(--rmx-gradiente);
}

.rmx-obt-rede-geral img {
    max-width: 14px;
    filter: brightness(0) invert(1);
}

/**
 * O compartilhar do aparelho so existe onde ha navigator.share — nasce
 * escondido e o JS o revela. Mesma regra do botao da pagina de noticia.
 *
 * QUEM REVELA E UMA MARCA NO <html> (`.tem-share-nativo`, posta uma vez pelo
 * script do obituario.php) e nao o JS tirando o `hidden` botao a botao. Com o
 * scroll infinito da listagem chegam fichas DEPOIS do carregamento, e um laco
 * rodado uma vez deixaria os botoes delas escondidos para sempre. O atributo
 * `hidden` continua no markup como estado de partida.
 */
.rmx-obt-rede[hidden] {
    display: none;
}

.tem-share-nativo .rmx-obt-rede-geral[hidden] {
    display: grid;
}

/* Link do pe da ficha na listagem: e o unico caminho do card para a nota
   completa, ja que o nome nao e link. */
.rmx-obt-pe {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin-top: auto;
}

.rmx-obt-pe .rmx-btn {
    width: 100%;
    max-width: 260px;
}

/**
 * O banner atravessa as DUAS colunas, no pe da ficha. `1 / -1` e nao `span 2`
 * porque abaixo de 900px a ficha tem uma coluna so — `span 2` criaria uma
 * segunda coluna fantasma so para o banner.
 *
 * VIROU UM `<fieldset>` COM `<legend>` em 28/08/2026, a pedido.
 *
 * Antes era uma `<div>` sem filete, encostada a direita: a intencao era que o
 * anuncio nao tivesse o mesmo peso da nota de falecimento logo acima. Na tela
 * isso virou o contrario do pretendido — sem nenhuma marca de fronteira, o
 * banner lia como o fecho da propria nota, colado no "Ver nota completa". Numa
 * nota de falecimento essa e a fronteira que mais importa.
 *
 * A moldura recortada do fieldset resolve as duas coisas de uma vez: fecha a
 * ficha e nomeia o que esta dentro, sem precisar do filete que atravessava a
 * ficha inteira. O conteudo volta ao CENTRO — encostar na direita fazia sentido
 * enquanto nao havia caixa; dentro de uma, o banner deslocado le como erro.
 *
 * O RESET E OBRIGATORIO: o bootstrap zera `fieldset` (padding/margin/border) e
 * pinta `legend` como um titulo de bloco, com 100% de largura, 21px e um
 * `border-bottom` cinza atravessando a caixa. Sem redeclarar os dois, o
 * elemento sai como uma `<div>` com um cabecalho grande em cima.
 */
/**
 * A FAIXA DE PUBLICIDADE — o rodape do cartao da ficha, ATE 899px.
 *
 * De 900px para cima este mesmo elemento vira arte solta dentro da coluna de
 * dados, sem rotulo e sem pintura nenhuma: ver o bloco `@media (min-width:
 * 900px)` logo abaixo, que e onde tudo o que esta aqui e desfeito. O que segue
 * descreve a forma de faixa.
 *
 * Ela atravessa as DUAS colunas e vai de borda a borda: os `-24px` laterais
 * desfazem o `padding` do `.rmx-obt`, e o cartao zera o respiro de baixo
 * (`.rmx-obt-com-pub`, tambem so ate 899px) para que a faixa encoste na borda.
 * O raio de 15px e o do cartao menos a borda de 1px — com os 16px cheios
 * sobraria uma meia-lua branca em cada canto de baixo.
 *
 * QUEM SEPARA O PAGO DO EDITORIAL E A TARJA, e nao a geometria. Antes disto o
 * banner saiu do cartao pela metade, dentro de um `<fieldset>` elevado: a
 * separacao era maxima, mas numa nota de falecimento aquilo somava ornamento a
 * uma peca que e sobria por natureza, e a conta dependia de a arte ter 100px de
 * altura fixos — mudou a medida vendida, quebrou o encaixe. Aqui nada
 * atravessa borda, os cantos continuam sendo os do cartao, e a faixa FECHA a
 * ficha em vez de fura-la.
 *
 * O RESPIRO E SIMETRICO — mesmo valor acima e abaixo da arte —, e por isso o
 * rotulo fica na MESMA LINHA dela, e nao acima. Foi tambem o que tirou o
 * `<fieldset>`: um `<legend>` e sempre desenhado no entalhe da borda de cima,
 * nunca centrado ao lado do conteudo, e empilhado ali ele comeria altura so no
 * topo da faixa. O `<span>` vazio da direita e o contrapeso do rotulo: sem ele
 * a arte centraria no espaco que SOBRA depois do rotulo, e nao na faixa.
 */
.rmx-obt-pub {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    min-width: 0;
    margin: var(--rmx-vao-item) -24px 0;
    padding: 20px 24px;
    border-top: 1px solid var(--rmx-borda);
    border-radius: 0 0 15px 15px;
    background: var(--rmx-superficie);
}

/* Rotulo pequeno e apagado: ele diz o que a faixa e, nao chama para ela. */
.rmx-obt-pub-rotulo,
.rmx-obt-pub-contrapeso {
    flex: 0 0 auto;
    width: 92px;
    color: var(--rmx-apagado);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.1em;
    line-height: 1.2;
    text-transform: uppercase;
}

/**
 * A `<div>` que o partial imprime por banner (o `require` sem `_once` dentro do
 * laco das fichas e para isso).
 *
 * `flex: 1 1 auto` e o que centra a arte NA FAIXA e nao no espaco que sobra: o
 * miolo cresce e fica simetrico entre o rotulo e o contrapeso, os dois de 92px.
 * Havendo mais de um banner, eles dividem esse miolo lado a lado.
 */
.rmx-obt-pub .box-infos {
    flex: 1 1 auto;
    min-width: 0;
    text-align: center;
}

.rmx-obt-pub img {
    display: inline-block;
    max-width: 100%;
    height: auto;
}

/* No celular o rotulo sai da linha da arte: com 92px de cada lado, uma tela de
   360 deixaria 176px para um banner de 400. Empilhado, o respiro simetrico
   passa a ser o da faixa inteira (o rotulo entra no de cima). */
@media (max-width: 575px) {
    .rmx-obt-pub {
        flex-direction: column;
        gap: 12px;
    }

    .rmx-obt-pub-rotulo {
        width: auto;
        text-align: center;
    }

    .rmx-obt-pub-contrapeso {
        display: none;
    }
}

/**
 * DE 900px PARA CIMA A FAIXA VIRA ARTE SOLTA NA COLUNA DE DADOS (02/09/2026).
 *
 * Mesmo elemento, mesma `<div class="rmx-obt-pub">` do markup — o que muda e
 * onde ela cai na grade do cartao e como ela e pintada. Imprimir dois blocos e
 * esconder um por breakpoint poria a mesma arte duas vezes no HTML de cada uma
 * das oito fichas da pagina; aqui nao ha markup repetido nenhum.
 *
 * POR QUE SAIR DO PE: a coluna da direita (foto de 280 mais compartilhar, vela
 * e botoes) e quase sempre a mais alta da ficha, e a esquerda acabava antes,
 * deixando um retangulo branco de ~150px. A faixa custava ~140px de altura NOVA
 * em toda ficha com banner; na coluna o anuncio nao custa nenhuma, porque ocupa
 * altura que a coluna da foto ja tinha pago. E a arte nao encolhe: sao ~770px
 * uteis contra os ~736 que sobravam na faixa entre o rotulo e o contrapeso.
 *
 * ABAIXO DE 900 NADA DISTO VALE, e e de proposito: la o cartao e de uma coluna
 * so, nao existe vao ao lado da foto, e a faixa de borda a borda volta a ser o
 * melhor lugar — com fundo, filete e rotulo, como sempre foi.
 *
 * A CONTA DA GRADE. O cartao tem tres filhos: dados, lado e pub. Sem
 * intervencao a colocacao automatica poe dados em (1,1), lado em (1,2) e a pub
 * na linha 2 — e e por isso que a faixa so precisava do `grid-column: 1 / -1`.
 * Aqui a pub e presa a (2,1) e a coluna da direita passa a ocupar as DUAS
 * linhas, o que a mantem inteira ao lado das duas.
 *
 * O `span 2` mora sob `.rmx-obt-com-pub` e nao solto: sem banner nao existe
 * terceiro filho, e esticar a coluna da direita criaria uma linha 2 vazia — mas
 * o `gap` de 32px entre linhas SAI ASSIM MESMO, e toda ficha sem banner ganharia
 * um vao morto no pe. Nao daria erro nenhum, so ficaria errado.
 *
 * O respiro entre a nota e a arte e esse mesmo `gap` de 32px da grade; nao ha
 * margem nem padding proprios a acertar.
 *
 * `align-self: start` porque as duas linhas sao de altura automatica e o
 * `align-content` do grid distribui a sobra da coluna da direita entre elas: sem
 * isto a pub estica junto e vira uma area invisivel de altura variavel — que
 * hoje nao aparece, por nao haver fundo, e apareceria no dia em que houver.
 */
@media (min-width: 900px) {
    /* A coluna e escrita junto com a linha de proposito. Item com linha
       definida e coluna automatica cai numa etapa propria da colocacao do grid,
       e depender dela para acertar a coluna 2 e apostar num detalhe do
       algoritmo — com as duas escritas nao ha o que interpretar. */
    .rmx-obt-com-pub .rmx-obt-lado {
        grid-column: 2;
        grid-row: 1 / span 2;
    }

    .rmx-obt-pub {
        grid-column: 1;
        grid-row: 2;
        display: block;
        align-self: start;
        margin: 0;
        padding: 0;
        border-top: 0;
        border-radius: 0;
        background: none;
        margin-top: auto;
    }

    /* Sem rotulo e sem contrapeso: os dois sao da faixa, onde ha simetria a
       manter entre eles. Ficam no HTML e sao escondidos aqui porque quem decide
       entre as duas formas e a largura da tela, que o PHP nao conhece. */
    .rmx-obt-pub-rotulo,
    .rmx-obt-pub-contrapeso {
        display: none;
    }

    /* A arte comeca na borda esquerda da coluna, na mesma margem de "Idade" e
       "Data do falecimento" — e o alinhamento de tudo o que esta acima dela.
       Centrar so faz sentido na faixa, entre o rotulo e o contrapeso. */
    .rmx-obt-pub .box-infos {
        text-align: left;
    }
}

/**
 * O ICONE DE "ABRE FORA DAQUI" no fim do nome da capela e do cemiterio.
 *
 * O link do local fica na cor do texto ao redor de proposito (ver a regra do
 * `.rmx-obt-lista dd a` mais acima): e informacao primeiro, link depois. So que
 * o unico sinal de que ali se clica era o filete cinza do sublinhado, que numa
 * lista de dados passa por enfeite — e o laranja do hover nao existe no
 * celular, onde a ficha e mais lida.
 *
 * Fica apagado e um degrau menor que o texto: o nome do lugar continua sendo o
 * que se le, e o icone e a nota de rodape dele.
 */
.rmx-obt-link-fora {
    margin-left: 6px;
    color: var(--rmx-apagado);
    font-size: 0.8em;
    vertical-align: baseline;
}

.rmx-obt-lista dd a:hover .rmx-obt-link-fora {
    color: inherit;
}

/**
 * As mensagens de homenagem, no pe da nota completa.
 *
 * Largura INTEIRA, e nao os 800px do `.rmx-materia-conversa` da pagina de
 * noticia: la a coluna estreita existe porque acima dela ha um texto longo de
 * leitura na mesma medida. Aqui o que esta acima e a ficha, que ocupa a largura inteira —
 * estreitar so a conversa daria o efeito sanfona que a regra "uma largura por
 * pagina" existe para evitar (ver .claude/docs/relayout-2026.md).
 */
.rmx-obt-conversa {
    margin-top: var(--rmx-vao-secao);
}

/* A linha de apoio da conversa virou a `.rmx-conversa-apoio` da secao 23 quando
   a notica passou a usar o mesmo cabecalho (02/09/2026): as duas telas pediam a
   mesma frase apagada abaixo do titulo, e duas classes identicas em secoes
   diferentes e como as duas declaracoes de `montaBoxComentario()` que existiam
   antes — mudam em uma e ninguem lembra da outra. */

/* Linha do botao de enviar (com o gif de carregando ao lado). Era um
   `style="position: absolute; top: 9px; right: 30px"` no proprio <img>, que
   dependia de um `.row` com position relative que nao existe mais. */
.rmx-form-acoes {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* 16.3 — acender vela --------------------------------------------------------
   Os dois botoes empilhados e da mesma largura: a vela em cima, a coroa de
   flores logo abaixo. */
.rmx-obt-vela {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.rmx-obt-vela .rmx-btn {
    width: 100%;
    max-width: 260px;
}

/* =============================================================================
   17. PAGINAS DE TEXTO (fase 6)

   As 22 telas de conteudo estatico — politicas, servicos, equipe, expediente,
   termos... Eram 19 arquivos BYTE A BYTE IGUAIS mais tres divergindo por
   detalhe; hoje sao chamadores de `integracao/texto/tela.php`.

   O CSS delas e curto de proposito: a moldura (`.rmx-listagem`), o cabecalho
   (`.rmx-secao`) e a altura minima (`.rmx-listagem-minima`) ja existiam. O que
   e proprio daqui e a TIPOGRAFIA DO CORPO, que e a mesma da materia porque e o
   mesmo tipo de conteudo — HTML escrito no CKEditor.
   ========================================================================== */
.rmx-texto {
    /* Quando ha imagem de fundo (`$textoFundo`, so a area-abrangencia): a
       imagem cobre a faixa e o corpo do texto ganha um cartao por cima, senao
       o texto preto cai direto sobre a foto e nao se le.

       O `background-attachment: fixed` do markup antigo saiu: o Safari do iOS
       o ignora e estica a imagem, e no Android antigo ele trava a rolagem. */
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

/* -----------------------------------------------------------------------------
   17.1 CORPO DO TEXTO
   Mesmo desenho do `.rmx-materia-texto` (secao 15.4): 18px, entrelinha 1.75,
   medida de ~768px. A diferenca e que aqui NAO ha capitular nem coluna
   lateral — e documento, nao materia.
   -------------------------------------------------------------------------- */
/**
 * LARGURA CHEIA, e nao a medida de 800px da materia.
 *
 * A pagina de texto saiu da fase 6 com os mesmos 800px do corpo da noticia, o
 * que na largura do site deixava a pagina inteira ocupando pouco mais da
 * metade da tela — destoando de todo o resto do site, que ocupa a faixa toda.
 * Decisao de 26/08/2026: aqui a pagina e o documento, nao uma coluna dentro de
 * uma pagina, e o vazio ao lado nao estava a servico de nada.
 *
 * PRIMEIRO SO O BLOCO, DEPOIS TUDO. Numa primeira passada o `max-width` saiu
 * daqui mas ficou no paragrafo (`78ch`, ~730px), o que na pratica manteve o
 * sintoma: o leitor nao ve "o bloco" — ve o texto, e o texto continuava parando
 * na metade da tela. O limite do paragrafo saiu tambem, mais abaixo, e la esta
 * escrito o que se ganhou e o que se perdeu com isso.
 */
.rmx-texto-corpo {
    max-width: none;
    color: var(--rmx-texto);
    font-family: var(--rmx-fonte-texto);
    font-size: 18px;
    line-height: 1.75;
}

/* Fundo so quando ha imagem atras. Sem imagem o cartao branco sobre o fundo
   quase branco do site so acrescentaria uma borda sem funcao. */
.rmx-texto[style*="background-image"] .rmx-texto-corpo {
    max-width: none;
    padding: 28px;
    border-radius: var(--rmx-raio-xl);
    background: var(--rmx-cartao);
    box-shadow: var(--rmx-sombra-cartao);
}

.rmx-texto-corpo > *:first-child {
    margin-top: 0;
}

.rmx-texto-corpo > *:last-child {
    margin-bottom: 0;
}

/**
 * NAO HA MAIS MEDIDA DE LEITURA AQUI — pedido de 26/08/2026.
 *
 * Havia um `max-width: 78ch` em paragrafo, lista e citacao. A intencao era boa
 * (78 caracteres por linha e a medida em que o olho acha a volta), mas o efeito
 * na tela era o oposto do que a pagina precisava: o bloco ja estava com
 * `max-width: none` logo acima, e mesmo assim o TEXTO parava em ~730px de um
 * container inteiro — quem abria `coleta-de-lixo` ou `horarios-de-onibus` via a
 * pagina ocupando pouco mais da metade da largura, com a direita vazia.
 *
 * O CUSTO E CONHECIDO E FOI ACEITO: na largura cheia, a 18px, a linha passa de 130
 * caracteres, e isso pesa nas paginas de prosa longa (as politicas, os termos).
 * Se um dia voltar, o lugar e este, e a decisao tem de ser por PAGINA e nao pelo
 * template — estas 22 telas vao de tabela de horario a texto juridico, e o que
 * serve a uma atrapalha a outra.
 *
 * A tabela nunca teve limite (`.rmx-texto-corpo table`, mais abaixo) e continua
 * sem — era ela que fazia falta primeiro.
 */
.rmx-texto-corpo p {
    margin: 0 0 22px;
}

.rmx-texto-corpo h2,
.rmx-texto-corpo h3,
.rmx-texto-corpo h4 {
    margin: var(--rmx-vao-bloco) 0 12px;
    font-family: var(--rmx-fonte-titulo);
    font-weight: 800;
    letter-spacing: -0.01em;
    text-transform: uppercase;
}

.rmx-texto-corpo h2 { font-size: 26px; }
.rmx-texto-corpo h3 { font-size: 21px; }
.rmx-texto-corpo h4 { font-size: 18px; }

.rmx-texto-corpo a {
    color: var(--rmx-primaria);
    text-decoration: underline;
}

.rmx-texto-corpo ul,
.rmx-texto-corpo ol {
    margin: 0 0 22px;
    padding-left: 24px;
}

.rmx-texto-corpo li {
    margin-bottom: 8px;
}

.rmx-texto-corpo img {
    max-width: 100%;
    height: auto;
    border-radius: var(--rmx-raio-lg);
}

.rmx-texto-corpo blockquote {
    margin: var(--rmx-vao-bloco) 0;
    padding: 4px 0 4px 20px;
    border: 0;
    border-left: 3px solid var(--rmx-primaria);
    color: var(--rmx-tinta-suave);
    font-size: 17px;
    font-style: italic;
}

/**
 * TABELA — a de "horarios de onibus" e a de "telefones uteis" sao largas e o
 * redator as monta no CKEditor sem pensar em celular. O `overflow-x: auto` no
 * proprio elemento nao funciona (tabela nao e bloco de rolagem), entao o
 * `display: block` e o que a transforma em um. E a regra do
 * .claude/docs/front-end.md: conteudo largo rola dentro da propria caixa, o
 * corpo da pagina nunca rola na horizontal.
 */
.rmx-texto-corpo table {
    display: block;
    width: 100%;
    max-width: 100%;
    margin: 0 0 22px;
    overflow-x: auto;
    border-collapse: collapse;
    font-size: 15px;
}

.rmx-texto-corpo th,
.rmx-texto-corpo td {
    padding: 10px 12px;
    border: 1px solid var(--rmx-borda);
    text-align: left;
    vertical-align: top;
}

.rmx-texto-corpo th {
    background: var(--rmx-mudo);
    font-family: var(--rmx-fonte-texto);
    font-weight: 700;
}

/* O CKEditor grava iframe de video colado no texto sem medida nenhuma. */
.rmx-texto-corpo iframe {
    max-width: 100%;
}

@media (max-width: 767px) {
    .rmx-texto-corpo {
        font-size: 17px;
    }

    .rmx-texto[style*="background-image"] .rmx-texto-corpo {
        padding: 20px;
    }
}

/* -----------------------------------------------------------------------------
   17.2 GALERIA DA PAGINA DE TEXTO
   Mesma peca da galeria da materia (secao 15.6) — os cards sao quadrados, com
   a lupa aparecendo no hover. Nao reaproveitei a classe `.rmx-galeria` porque
   la a grade e de 4 colunas fixas a partir de 640px, e aqui a quantidade de
   fotos e imprevisivel: `auto-fill` evita a fileira de um card so.
   -------------------------------------------------------------------------- */
.rmx-texto-galeria {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 12px;
    margin-top: var(--rmx-vao-secao);
}

.rmx-texto-foto {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: var(--rmx-raio-lg);
    aspect-ratio: 1 / 1;
}

.rmx-texto-foto img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.rmx-texto-foto:hover img {
    transform: scale(1.06);
}

/* -----------------------------------------------------------------------------
   17.3 TOUR VIRTUAL (so a `sobre-nos`)
   O pannellum precisa de ALTURA DECLARADA no elemento: ele mede o container na
   inicializacao e, num div de altura zero, desenha um canvas de altura zero —
   a tela fica em branco sem erro nenhum no console.
   -------------------------------------------------------------------------- */
.rmx-tour {
    width: 100%;
    height: 520px;
    border-radius: var(--rmx-raio-xl);
    overflow: hidden;
}

@media (max-width: 767px) {
    .rmx-tour {
        height: 360px;
    }
}

/* =============================================================================
   18. CAIXAS DE LEAD (fase 6)

   As quatro telas de formulario — contato, trabalhe-conosco, envie-sua-noticia
   e anuncie-conosco. Eram quatro arquivos com o mesmo markup; hoje sao
   chamadores de `integracao/lead/tela.php`.

   O `.bx-form` do css/forms/forms.css continua valendo por baixo (e ele que faz
   o rotulo flutuante do `.input-block`), e o `.rmx-form` da secao 9 veste os
   campos. O que esta aqui e so o arranjo da tela.
   ========================================================================== */
/**
 * A TELA OCUPA A FAIXA INTEIRA — texto da pagina a esquerda, formulario a
 * direita.
 *
 * Ela tinha `max-width: 640px` no container inteiro e o formulario nascia
 * numa coluna estreita com metade da tela vazia ao lado, enquanto o resto do
 * site ocupa a largura toda.
 *
 * A largura nao foi resolvida esticando o campo: um `<input>` da largura cheia e pior
 * de preencher que um de 400 — o olho perde a linha entre o rotulo, na
 * esquerda, e o cursor, na direita. Quem enche a faixa e o ARRANJO: o
 * formulario numa coluna e o texto cadastrado no painel (que ate a fase 6 nao
 * era impresso em tela nenhuma) na outra, com os campos curtos em duas ou tres
 * colunas dentro do formulario.
 */
.rmx-lead-corpo {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--rmx-vao-bloco);
    align-items: start;
}

/* A partir do notebook o texto vira coluna. `minmax(0, ...)` nas duas: sem
   isso uma tabela ou uma imagem larga dentro do texto do CKEditor estoura a
   celula em vez de rolar dentro dela. */
@media (min-width: 992px) {
    /**
     * O FORMULARIO FICA A ESQUERDA — pedido de 28/08/2026 para as telas de
     * contato. Era o contrario (texto a esquerda, formulario a direita).
     *
     * A coluna LARGA acompanha o formulario e nao o lado: ela existe para caber
     * duas ou tres colunas de campo, e deixa-la a direita faria o formulario
     * mudar de lugar e de largura ao mesmo tempo, com os campos passando a
     * caber dois em vez de tres.
     */
    .rmx-lead-corpo {
        grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
        gap: var(--rmx-vao-secao);
    }

    /**
     * A TROCA E DE ORDEM VISUAL, e mora aqui dentro da media query.
     *
     * No markup o texto continua vindo primeiro — e o que apresenta a pagina, e
     * e nessa ordem que leitor de tela e navegacao por Tab passam por ela. No
     * celular a grade tem uma coluna so e a ordem do markup vale como esta: o
     * texto do "Anuncie conosco" termina em "...formulario abaixo:", e inverter
     * ali deixaria a frase apontando para tras.
     */
    .rmx-lead-corpo > .rmx-lead-form {
        order: -1;
    }

    /**
     * SEM TEXTO CADASTRADO, o formulario toma a faixa inteira.
     *
     * O `$leadTexto` e impresso so quando ha conteudo no painel; sem ele o
     * formulario fica sozinho na grade — e desde a troca acima ele cai na
     * coluna de 1.15fr, ou seja, 57% da tela, com o resto em branco a direita.
     * As quatro telas tem texto hoje, entao isto nao se ve; e uma caixinha do
     * painel de distancia de se ver, e o sintoma (formulario estreito encostado
     * a esquerda) nao aponta para a causa.
     */
    .rmx-lead-corpo > .rmx-lead-form:only-child {
        grid-column: 1 / -1;
    }
}

/* Reaproveita a tipografia das paginas de texto (secao 17.1) — e o mesmo tipo
   de conteudo, HTML escrito no mesmo editor. So a medida muda: aqui o texto ja
   esta numa coluna, entao o `max-width` daquela regra nao tem o que fazer. */
.rmx-lead-texto {
    max-width: none;
    font-size: 16px;
}

/**
 * CAMPOS EM COLUNAS. `auto-fit` com piso de 240px resolve as quatro telas de
 * uma vez sem media query e sem classe por campo: tres colunas na largura
 * cheia, duas no tablet, uma no celular. Cada tela tem um numero diferente de
 * campos (o "Fale conosco" tem quatro, o "Envie sua noticia" cinco) e a grade
 * se acomoda sozinha.
 */
/**
 * O FORMULARIO E UM CARTAO, e nao campos soltos sobre o fundo da pagina.
 *
 * As quatro telas de lead saiam com o titulo, o texto a esquerda e, a direita,
 * uma coluna de campos sem nada em volta — nada dizia onde comecava e onde
 * acabava o formulario, e ele lia como continuacao do texto em vez de como a
 * acao da tela.
 *
 * A pintura e a MESMA do `.rmx-conta-cartao` (secao 19), de proposito: aquele e
 * o outro formulario que o visitante preenche no site (login e criar conta), e
 * os dois passam a ser reconheciveis como a mesma peca. Nao inventei um terceiro
 * tratamento de caixa — o site ja tem dois (cartao com sombra, caixa com borda),
 * e formulario e cartao com sombra.
 *
 * 28px e nao os 32 do `.rmx-conta-cartao`: aqui a caixa vive dentro de uma
 * coluna de grade que ja e estreita no notebook, e 32 de cada lado comiam a
 * largura de dois campos lado a lado.
 */
/* Vertical vem do `margin-bottom` do `.form-group` (secao 9), nao do gap —
   mesma logica do `.rmx-conta-form-grade`. Era `gap: 0 20px`: o vertical ja
   saia certo (16, so o margin-bottom), mas o horizontal destoava por nao usar
   o mesmo token. Ver `--rmx-vao-campo` na secao 1. */
.rmx-lead-form {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 0 var(--rmx-vao-campo);
    align-content: start;
    padding: 28px;
    border-radius: var(--rmx-raio-xl);
    background: var(--rmx-cartao);
    box-shadow: var(--rmx-sombra-cartao);
}

@media (max-width: 575px) {
    /* No celular a caixa ocupa a largura toda e 28px de cada lado sobram: o
       campo perde 56px de uma tela que ja tem 320. */
    .rmx-lead-form {
        padding: 20px;
    }
}

/* Mensagem, anexo e envio atravessam a grade inteira: sao os tres itens que
   nao sao "mais um campo curto". O `1 / -1` vale para qualquer numero de
   colunas que o auto-fit tenha resolvido. */
.rmx-lead-form .rmx-lead-mensagem,
.rmx-lead-form .rmx-lead-arquivo,
.rmx-lead-form .rmx-lead-envio {
    grid-column: 1 / -1;
}

.rmx-lead-apoio {
    margin: 0 0 var(--rmx-vao-bloco);
    color: var(--rmx-apagado);
    font-size: 15px;
}

/* Mesma razao do `.rmx-doc-apoio`: o elemento e um `<div>` porque pode receber
   HTML do editor, e o ultimo paragrafo de dentro perde a margem para nao somar
   com a daqui. */
.rmx-lead-apoio > *:last-child,
.rmx-lead-texto > *:last-child {
    margin-bottom: 0;
}

/**
 * A `<textarea>` tinha `style="height: 200px"` INLINE nas quatro telas, e era
 * altura travada: no celular ela comia a tela toda e o botao "Enviar" nascia
 * abaixo da dobra, de modo que o visitante escrevia a mensagem e nao via onde
 * enviar. Agora e altura minima mais um teto proporcional a janela — a alca de
 * redimensionar saiu do site inteiro em 28/08/2026 (ver `.rmx-form textarea`,
 * secao 9), entao e este par de medidas que decide o tamanho da caixa.
 */
.rmx-lead-form textarea {
    min-height: 160px;
    max-height: 50vh;
}

/* Campo de arquivo: rotulo de verdade, e nao o placeholder flutuante — ele
   ficaria por cima do "Escolher arquivo" que o proprio navegador desenha. */
.rmx-lead-arquivo label {
    display: block;
    margin-bottom: 6px;
    color: var(--rmx-tinta-suave);
    font-size: 13px;
    font-weight: 600;
}

.rmx-lead-arquivo input[type="file"] {
    padding: 9px 12px;
    font-size: 14px;
}

/**
 * ENVIO — botao e "carregando" na mesma linha.
 *
 * O `<img id="loading">` era `position: absolute` com `top: 9px; right: 30px`
 * inline, ancorado no primeiro ancestral posicionado, que era o formulario
 * inteiro: o indicador aparecia no CANTO SUPERIOR DIREITO da tela, longe do
 * botao que o visitante acabou de clicar. Aqui ele fica ao lado do botao.
 *
 * Nasce escondido — o starterFormsAjax.js chama `$('#loading').show()` no
 * clique e `.hide()` na resposta.
 */
.rmx-lead-envio {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: var(--rmx-vao-bloco);
}

.rmx-lead-botao {
    min-width: 160px;
}

.rmx-lead-loading {
    display: none;
}

@media (max-width: 575px) {
    /* O botao ocupa a linha: no celular ele e a unica acao da tela. */
    .rmx-lead-envio {
        flex-wrap: wrap;
    }

    .rmx-lead-botao {
        flex: 1 1 100%;
    }
}

/* =============================================================================
   19. CONTA DO USUARIO (fase 6)

   `login-usuario` (login + criar conta), `perfil` (meus dados),
   `alterar-senha` e `recuperar-senha` (as duas no `integracao/conta/senha.php`
   compartilhado). QUATRO telas, um cartao centralizado so — o padrao que a
   `.bg-ac-conta`/`.box-area-form` do style2023.css ja tentava ser, so que
   espalhado em bootstrap `container > row > col-*-offset`.

   Dois sistemas de login convivem no site (`login_site` aqui, `new_admin` no
   painel) — ver .claude/docs/logins.md. Nada da LOGICA de sessao, POST ou
   seguranca mudou nesta fase: so o markup.
   ========================================================================== */
.rmx-conta {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    gap: var(--rmx-vao-bloco);
    /* So o respiro lateral. O vertical era 64 em cima e embaixo — o dobro do de
       qualquer outra pagina no topo, e somando com o rodape embaixo. Hoje ele e
       do `content` (secao 3). */
    padding: 0 var(--rmx-respiro);
}

.rmx-conta-cartao {
    width: 100%;
    max-width: 480px;
    padding: 32px;
    border-radius: var(--rmx-raio-xl);
    background: var(--rmx-cartao);
    box-shadow: var(--rmx-sombra-cartao);
}

/**
 * O cartao largo — hoje SO o "Meus dados" (`perfil.php`, quatro campos).
 * Empilhados numa coluna estreita eles davam uma tira comprida com a pagina
 * vazia dos dois lados; em dois por linha (`.rmx-conta-form-grade`, logo
 * abaixo) o cartao ocupa a faixa util da tela.
 *
 * O "Criar conta" USAVA este par e saiu dele em 26/08/2026. O motivo nao vale
 * la: aquele cartao divide o lugar com o de login (um escondido, o outro
 * visivel), e a caixa quase dobrava de largura ao trocar de um para o outro.
 * Uma tela que e so ela mesma pode ser larga; uma que alterna com outra tem de
 * medir o que a outra mede. Ver o comentario no login-usuario.php.
 */
.rmx-conta-cartao-lg {
    max-width: 860px;
}

.rmx-conta-titulo {
    margin: 0 0 24px;
    text-align: center;
    font-family: var(--rmx-fonte-titulo);
    font-size: 26px;
    font-weight: 900;
    text-transform: uppercase;
}

/* O titulo do cartao de "criar conta", menor porque e uma frase e nao um
   rotulo de tela — "Preencha o formulario abaixo..." nao le bem em caixa alta
   nem no tamanho do titulo principal. */
.rmx-conta-titulo-sm {
    font-size: 16px;
    font-weight: 700;
    text-transform: none;
}

/* Era `.rmx-conta-form .form-group { margin-bottom: 16px }` — igual, byte a
   byte, ao `.rmx-form .form-group` da secao 9. O elemento carrega as duas
   classes juntas (`class="rmx-form rmx-conta-form ..."`), entao a regra base ja
   bastava; esta so repetia o mesmo numero por outro seletor. */

/* "Meus dados": dois campos por linha a partir de 560px. Abaixo disso os
   quatro empilham — a mesma regra de toda grade do site. Anda sempre junto com
   o `.rmx-conta-cartao-lg` acima: a grade de duas colunas dentro do cartao de
   480px daria campos de ~200px.

   `gap: 0 var(--rmx-vao-campo)` e nao um valor no eixo vertical: o vao entre
   LINHAS da grade ja vem do `margin-bottom` do `.form-group` (a regra base da
   secao 9) — um row-gap aqui SOMARIA com ele. Era exatamente esse o defeito:
   valia 4px de gap mais 16 de margem, 20px verticais contra 16 horizontais no
   mesmo formulario. Ver o `--rmx-vao-campo` na secao 1. */
.rmx-conta-form-grade {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0 var(--rmx-vao-campo);
}

@media (min-width: 560px) {
    .rmx-conta-form-grade {
        grid-template-columns: 1fr 1fr;
    }
}

/**
 * O QUE ATRAVESSA A GRADE. Título, aviso de resposta e a fileira de botões não
 * são "mais um campo": dentro da grade de duas colunas eles caíam numa célula
 * só, com o título ocupando metade da linha e o botão nascendo do lado
 * esquerdo, alinhado com um campo em vez de com o cartão.
 *
 * `1 / -1` e não `1 / 3` para não depender do número de colunas — abaixo de
 * 560px a grade tem uma só.
 */
.rmx-conta-form-largo,
.rmx-conta-form .rmx-conta-form-acoes {
    grid-column: 1 / -1;
}

.rmx-conta-form-acoes {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 8px;
}

.rmx-conta-form-acoes .rmx-conta-botao {
    flex: 1 1 auto;
}

.rmx-conta-botao {
    width: 100%;
}

/* Vazia por padrao, sem altura reservada: o `:empty` evita um espaco em
   branco acima do botao antes de qualquer resposta chegar. */
.rmx-conta-msg:empty {
    display: none;
}

/* O DESENHO do aviso (fundo, borda, icone) mora na secao 25, junto com o de
   todas as outras mensagens do site, e o respiro de 16px acima dele esta na
   25.1 — precisa vir DEPOIS do `.rmx-pg .alert { margin: 0 }` de la, que tem a
   mesma especificidade e desempataria pela ordem. Este bloco ficou vazio de
   proposito para nao parecer que o estilo do aviso comeca aqui. */

/* A `.rmx-conta-voltar` saiu em 02/09/2026: era o `<a>` que envolvia a pergunta
   inteira mais o `<strong>Clique aqui</strong>`, de modo que a area clicavel — e
   com ela o realce do hover — pegava as duas linhas, inclusive a que e so
   pergunta. Os tres cartoes do fluxo de conta (login, recuperar senha, e o
   "Ja tenho conta" do cadastro, que ja era assim) usam agora a
   `.rmx-conta-acao` da secao 24: pergunta em texto, acao num `.rmx-btn`. */

/* Aviso pequeno abaixo de um campo — "preencha so se quiser trocar a senha"
   no perfil, e o `#returnConfirm` (hoje inerte) do cadastro. */
.rmx-conta-aviso-campo {
    display: block;
    margin-top: 4px;
    color: var(--rmx-apagado);
    font-size: 12px;
}

/* Estado "voce ja esta logado" — sem formulario, so o aviso e o botao de
   sair, os dois centralizados. */
.rmx-conta-logado {
    text-align: center;
}

.rmx-conta-logado .rmx-conta-botao {
    width: auto;
    margin-top: 16px;
}

/* =============================================================================
   20. LINKTREE (fase 6)

   Pagina avulsa: o index.php a serve SEM cabecalho nem rodape, so o <head> de
   sempre por cima. Fundo escuro e imagem propria — nao usa nenhum token de
   fundo claro do resto do site.
   ========================================================================== */
.rmx-linktree {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 32px;
    min-height: 100vh;
    padding: 48px 20px;
    background: #221a1a url('images/bg-linktree.jpg') center center / cover no-repeat fixed;
}

.rmx-linktree-logo img {
    display: block;
    max-width: 220px;
    height: auto;
}

.rmx-linktree-links {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
    max-width: 300px;
}

.rmx-linktree-btn {
    width: 100%;
}

/* O contorno claro do "Site" precisa de cor propria: `.rmx-btn-contorno` usa
   `var(--rmx-borda)` e `var(--rmx-texto)`, pensados para fundo claro — aqui
   ficariam quase invisiveis sobre o fundo escuro. */
.rmx-linktree-btn-site {
    border-color: rgba(255, 255, 255, 0.4);
    color: #fff;
}

.rmx-linktree-btn-site:hover,
.rmx-linktree-btn-site:focus {
    border-color: #fff;
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}

@media (max-width: 575px) {
    .rmx-linktree {
        /* `background-attachment: fixed` trava no iOS e faz a imagem esticar —
           mesma armadilha ja documentada para o fundo da area-abrangencia. */
        background-attachment: scroll;
    }
}

/* =============================================================================
   21. VAGAS DE EMPREGO + MODAL GENERICO (fase 6)

   O card (.a-vaga) e as cores do modal (.modal-vaga) ja tinham CSS proprio no
   style2023.css e NAO sao redeclarados aqui. O que faltava por completo era a
   CAIXA do modal em si: o Bootstrap 3 e usado so pelo JS (bootstrap.min.js,
   que mostra/esconde via display:block/none) — o CSS dele nunca carrega no
   site publico, entao `.modal-dialog`/`.modal-content`/`.modal-header` nunca
   tiveram posicionamento, fundo ou padding nenhum. O `.modal-vaga` abria como
   um <div> cru despejado no topo da pagina, sobre o overlay escuro que o
   `.modal{background}` do style2023 desenha.

   -----------------------------------------------------------------------------
   ESTE BLOCO E ESCOPADO EM `.modal-vaga`, E NAO PODE DEIXAR DE SER
   -----------------------------------------------------------------------------

   A nota antiga aqui dizia que "`.rmx-modal*` e generico de proposito — outro
   modal Bootstrap-so-no-JS que apareca no site pode reusar as mesmas classes".
   A intencao era boa, mas o que foi escrito nao era uma peca generica: era uma
   SEGUNDA declaracao de `.rmx-modal` e `.rmx-modal-caixa` no MESMO arquivo,
   varios milhares de linhas abaixo da primeira (secao 15.3b). Como ela vem
   depois e empata em especificidade, ela vencia — em TODAS as telas, inclusive
   nas tres que nao tem nada a ver com vaga de emprego:

     compartilhar e "+N autores"  (noticia-detalhe.php)
     acender uma vela             (obituario.php, .rmx-modal-vela)
     vaga                         (emprego-listar.php, .modal-vaga)

   O estrago era visivel e ninguem ligou uma coisa na outra:

     align-items: flex-start   a janela de compartilhar deixou de ficar no meio
                               da tela e passou a nascer grudada no topo;
     .rmx-modal-caixa          perdeu o `padding: 24px` da secao 15.3b, entao o
                               conteudo encostava na borda da caixa — inclusive
                               na janela da vela, que e escura e onde isso le
                               como defeito de renderizacao;
     max-width 440 -> 560      caixa mais larga do que o desenho pedia;
     max-height                sumiu, junto com o `overflow-y: auto` que fazia
                               uma janela alta rolar por dentro;
     abaixo de 575px           `align-items: stretch` + `min-height: 100%`
                               transformavam o compartilhar numa folha de tela
                               cheia sem ninguem ter pedido.

   O `position: fixed`, o `inset: 0` e o `z-index` NAO eram redeclarados aqui —
   e por isso a janela continuava cobrindo a tela e o defeito parecia "so" um
   problema de alinhamento, em vez de duas pecas brigando.

   O modal de vaga JA TINHA classe propria (`.modal-vaga`, ver o markup do
   emprego-listar.php). Escopar nela e o que separa as duas pecas. Se um
   terceiro modal precisar deste desenho, ele ganha a classe dele nesta lista —
   redeclarar `.rmx-modal` pelado traz o problema inteiro de volta.
   ========================================================================== */
.modal-vaga.rmx-modal {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 40px 16px;
    overflow-y: auto;
}

.modal-vaga .rmx-modal-caixa {
    width: 100%;
    max-width: 560px;
    margin: 0;
    border-radius: var(--rmx-raio-xl);
    background: var(--rmx-cartao);
    box-shadow: var(--rmx-sombra-cartao);
    overflow: hidden;
}

.rmx-modal-cabecalho {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 24px;
    border-bottom: 1px solid var(--rmx-borda);
}

.rmx-modal-cabecalho .modal-title {
    margin: 0;
}

/* O "×" do Bootstrap nao tem CSS nenhum sem o resto do framework — vira botao
   redondo neutro, no mesmo desenho do `.box-close` do overlay de busca. */
.rmx-modal-cabecalho .close {
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: var(--rmx-pilula);
    background: var(--rmx-mudo);
    color: var(--rmx-texto);
    font-size: 20px;
    line-height: 1;
    opacity: 1;
    cursor: pointer;
}

.rmx-modal-corpo {
    padding: 24px;
    max-height: 65vh;
    overflow-y: auto;
}

.rmx-modal-rodape {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 24px;
    border-top: 1px solid var(--rmx-borda);
}

.rmx-modal-rodape-acoes {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

/* Escopado em `.modal-vaga` pelo mesmo motivo do bloco acima: sem isso, abaixo
   de 575px a janela de compartilhar e a de acender vela viravam folha de tela
   cheia, sem raio e coladas na borda. */
@media (max-width: 575px) {
    .modal-vaga.rmx-modal {
        padding: 0;
        align-items: stretch;
    }

    .modal-vaga .rmx-modal-caixa {
        max-width: none;
        min-height: 100%;
        border-radius: 0;
    }

    .rmx-modal-rodape {
        flex-direction: column;
        align-items: stretch;
    }

    .rmx-modal-rodape-acoes {
        flex-direction: column;
    }
}

/* 21.1 — pagina de detalhe da vaga -------------------------------------------
   `.rmx-emprego-detalhe`/`.rmx-emprego-botoes` levam a classe `.modal-vaga`
   JUNTO (ver emprego-detalhe.php): as cores (titulo, "DADOS DA EMPRESA",
   botao whats) continuam vindo daquele seletor antigo, que ja funciona. Aqui
   so entra o que faltava: caixa, espacamento, e os botoes que usavam
   `.btn.btn-padrao2` (nenhuma das duas com CSS no site publico — eram texto
   cru). */
.rmx-emprego-detalhe {
    max-width: 800px;
    padding: 24px;
    margin-bottom: var(--rmx-vao-bloco);
    border-radius: var(--rmx-raio-xl);
    background: var(--rmx-cartao);
    box-shadow: var(--rmx-sombra-cartao);
}

.rmx-emprego-acoes {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.rmx-emprego-compartilhar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.rmx-emprego-botoes {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

@media (max-width: 575px) {
    .rmx-emprego-detalhe {
        padding: 20px;
    }

    .rmx-emprego-acoes {
        flex-direction: column;
        align-items: stretch;
    }

    .rmx-emprego-botoes {
        flex-direction: column;
    }
}

/* =============================================================================
   22. PACOTE DE CONTEUDO / MIDIA KIT (fase 6)
   O leitor de pdf.js em si (canvas, botoes) ja tinha CSS proprio
   (.btn-pdf-next/.btn-pdf-prev, .a-baixar-pdf) — so a moldura em volta e nova.
   ========================================================================== */
.rmx-pacote-pdf {
    width: 100%;
    margin: var(--rmx-vao-bloco) 0;
    text-align: center;
}

.rmx-pacote-pdf canvas {
    max-width: 100%;
    height: auto;
    border: 1px solid var(--rmx-borda);
    border-radius: var(--rmx-raio);
}

.rmx-pacote-pdf-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    margin-top: 15px;
}

.rmx-pacote-pdf-nav #page-info {
    font-size: 16px;
    color: var(--rmx-tinta-suave);
}

.rmx-pacote-baixar {
    margin-top: var(--rmx-vao-bloco);
    margin-bottom: var(--rmx-vao-bloco);
    text-align: center;
}

/* Sem vela hoje o selo fica apagado, mas CONTINUA impresso: e ele que o ajax
   acende quando a primeira vela do dia e acesa, sem F5. Envolver o selo num
   `if` deixaria o primeiro acendedor sem contador ate recarregar. */
.rmx-vela-contador {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    color: var(--rmx-apagado);
    font-size: 14px;
}

.rmx-vela-contador.tem-vela {
    color: var(--rmx-texto);
}

.rmx-vela-contador .vela-qtd {
    font-weight: 800;
}

/* Nao existe icone de vela no Font Awesome 4.6.3, que e a versao presa aqui
   (ver .claude/docs/front-end.md) — o `fa-candle` so chegou no FA5. Dai o SVG
   na mao: nao puxa arquivo novo e herda a cor pelo currentColor. */
.rmx-vela-icone {
    flex: none;
    width: 15px;
    height: 20px;
    margin-right: 4px;
}

.rmx-vela-icone .vela-corpo,
.rmx-vela-icone .vela-base {
    fill: currentColor;
}

.rmx-vela-icone .vela-chama {
    fill: var(--rmx-borda);
}

.tem-vela .rmx-vela-icone .vela-chama {
    fill: #f5a623;
}

/* Ja acendeu nesta sessao: continua legivel (e um recado, nao um botao
   quebrado), mas sem cursor de clique e sem o hover que convida a tentar. */
.rmx-btn.vela-ja-acesa,
.rmx-btn.vela-ja-acesa:hover,
.rmx-btn.vela-ja-acesa:focus,
.rmx-btn[disabled],
.rmx-btn[disabled]:hover {
    background: var(--rmx-mudo);
    box-shadow: none;
    color: var(--rmx-apagado);
    cursor: default;
    transform: none;
    opacity: 1;
}

/* Isca de robo: fora da tela e fora da navegacao por teclado, mas NAO
   `display: none`, que boa parte dos preenchedores automaticos ja ignora. */
.rmx-vela-isca {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    opacity: 0;
}

/* 16.4 — janela de acender vela ---------------------------------------------
   Usa o `.rmx-modal` da fase 3 (o mesmo do compartilhar e do "+N autores"), e
   nao mais o modal do Bootstrap. O que sobra aqui e a pintura ESCURA: e o unico
   ponto do obituario em que se pede algo a pessoa, e o fundo preto separa esse
   momento do resto da pagina. Tudo tom sobre tom; a unica cor viva e a da marca
   no botao. */
.rmx-modal-vela .rmx-modal-caixa {
    max-width: 380px;
    background: #141414;
}

.rmx-modal-vela .rmx-modal-titulo {
    color: #fff;
}

.rmx-modal-vela .rmx-modal-fechar {
    border-color: #2b2b2b;
    color: #cfcfcf;
}

.rmx-modal-vela .rmx-modal-fechar:hover,
.rmx-modal-vela .rmx-modal-fechar:focus {
    background: #262626;
    color: #fff;
}

.rmx-modal-vela-para {
    margin: 4px 0 0;
    color: #8a8a8a;
    font-size: 14px;
}

.rmx-modal-vela-para strong {
    color: #cfcfcf;
}

/* O campo e um degrau acima do fundo, sem borda clara nem branco em lugar
   nenhum. O foco nao muda a cor, so clareia um passo — uma borda de destaque
   aqui puxaria a atencao para o formulario, que nao e o assunto da tela.

   O seletor precisa do `input.form-control` (e nao so da classe do modal):
   o `css/forms/forms.css` pinta `.bx-form input[type="text"]` de cinza claro
   com especificidade (0,2,1), e um seletor mais curto empata e perde. Foi assim
   que os campos ficaram brancos dentro da janela preta uma vez. */
.rmx-modal-vela .rmx-form input.form-control {
    background: #1f1f1f;
    border-color: #2b2b2b;
    color: #f0f0f0;
    box-shadow: none;
}

.rmx-modal-vela .rmx-form input.form-control:focus {
    background: #262626;
    border-color: #3a3a3a;
    color: #fff;
    box-shadow: none;
}

/* O placeholder precisa de uma regra POR PREFIXO: agrupa-los faz o navegador
   descartar o seletor inteiro ao nao entender um dos irmaos. */
.rmx-modal-vela .rmx-form ::-webkit-input-placeholder { color: #767676; }
.rmx-modal-vela .rmx-form ::-moz-placeholder { color: #767676; opacity: 1; }
.rmx-modal-vela .rmx-form :-ms-input-placeholder { color: #767676; }
.rmx-modal-vela .rmx-form ::placeholder { color: #767676; }

.rmx-modal-vela-campos {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 10px;
}

.rmx-modal-vela-campos > :first-child {
    grid-column: 1 / -1;
}

.rmx-modal-vela-pe {
    margin-top: 20px;
    text-align: center;
}

.rmx-modal-vela-pe .rmx-btn {
    width: 100%;
}

/* Sem altura reservada: vazio, o aviso nao ocupa nada. Reservar espaco evitaria
   o pulinho quando a mensagem aparece, mas deixava um vao morto embaixo dos
   campos em toda abertura da janela — que e o estado comum. */
.rmx-vela-aviso {
    font-size: 14px;
    text-align: center;
}

.rmx-vela-aviso-erro,
.rmx-vela-aviso-ok {
    margin-top: 10px;
}

/* Cores pensadas para o fundo escuro: o vermelho e o verde de formulario
   (--rmx-perigo / #2e7d32) ficam ilegiveis sobre preto. */
.rmx-vela-aviso-erro { color: #ff8a7a; }
.rmx-vela-aviso-ok { color: #9ed6a6; }

/* 16.5 — capelas, cemiterios e funerarias -----------------------------------
   Grade de cards de MESMA ALTURA, com o rodape de acoes sempre colado embaixo
   (`margin-top: auto`), senao cards de textos diferentes terminam desalinhados
   na mesma fileira. */

/* Publicidade da LISTAGEM das tres telas (18/09/2026, merge com a producao).
   No detalhe o banner usa a faixa da ficha (`.rmx-obt-pub`); aqui nao ha cartao
   para fechar, entao e arte solta e centrada entre a grade e o paginador, no vao
   de bloco. Mais de um banner fica lado a lado e quebra linha no celular. */
.rmx-local-pub {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--rmx-vao-campo);
    margin-top: var(--rmx-vao-bloco);
}

.rmx-local-pub .box-infos {
    min-width: 0;
    text-align: center;
}

.rmx-local-pub img {
    display: inline-block;
    max-width: 100%;
    height: auto;
    border-radius: var(--rmx-raio-xl);
}

.rmx-local {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 16px;
    border: 1px solid var(--rmx-borda);
    border-radius: var(--rmx-raio-xl);
    background: var(--rmx-cartao);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.rmx-local:hover {
    border-color: var(--rmx-primaria);
    box-shadow: var(--rmx-sombra-cartao);
}

.rmx-local-topo {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.rmx-local-foto {
    display: grid;
    place-items: center;
    flex: 0 0 76px;
    width: 76px;
    height: 76px;
    overflow: hidden;
    border-radius: var(--rmx-raio-lg);
    background: var(--rmx-superficie);
    color: var(--rmx-borda);
    font-size: 22px;
}

.rmx-local-foto img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.rmx-local-dados {
    flex: 1 1 auto;
    min-width: 0;
}

.rmx-local-nome {
    margin: 0 0 8px;
    font-family: var(--rmx-fonte-titulo);
    font-size: 19px;
    font-weight: 900;
    line-height: 1.15;
}

/**
 * O nome e LINK para a pagina do local. Na tela antiga ele nao era, e o unico
 * caminho que saia do card era o botao do Maps — que leva para FORA do site: a
 * pagina de detalhe existia sem nenhum link apontando para ela.
 *
 * O <a> e so em volta do nome e nao do card inteiro porque o rodape do card ja
 * tem tres links de rede e o do Maps, e <a> dentro de <a> nao existe.
 */
.rmx-local-nome a,
.rmx-local-nome a:focus {
    color: var(--rmx-tinta);
    text-decoration: none;
}

.rmx-local-nome a:hover {
    color: var(--rmx-primaria);
    text-decoration: none;
}

.rmx-local-linha {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 0 0 4px;
    color: var(--rmx-tinta-suave);
    font-size: 13px;
    line-height: 1.45;
}

.rmx-local-linha .fa {
    flex: 0 0 14px;
    margin-top: 3px;
    color: var(--rmx-primaria);
}

.rmx-local-linha-vazia {
    color: var(--rmx-apagado);
    font-style: italic;
}

.rmx-local-acoes {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: auto;
    padding-top: 16px;
    border-top: 1px solid var(--rmx-borda);
}

/* O bloco de acoes nasce com respiro de bloco quando existe conteudo acima
   dele; o `margin-top: auto` acima ja o empurra para o pe. */
.rmx-local-acoes .rmx-obt-redes {
    justify-content: flex-start;
}

.rmx-local-acoes .rmx-btn {
    min-height: 34px;
    padding: 6px 16px;
    font-size: 13px;
}

/* =============================================================================
   17. DOCUMENTOS EM PDF (fase 5)
   Edicao impressa e publicidade legal — outra dupla de gemeas: ~500 linhas cada
   e ~330 identicas (o CSS do leitor, o script do pdf.js e a impressao), com
   diferenca so no prefixo das classes. Agora as duas incluem
   `integracao/pdf/documento.php` e `integracao/pdf/lista.php`.
   ========================================================================== */

/* 17.1 — filtro em grade -----------------------------------------------------
   Os campos se acomodam sozinhos: quatro na publicidade legal, dois na edicao
   impressa, e no celular um por linha — sem media query e sem classe de coluna
   do bootstrap para cada largura. */
.rmx-filtro {
    padding: 20px;
    border: 1px solid var(--rmx-borda);
    border-radius: var(--rmx-raio-xl);
    background: var(--rmx-superficie);
    margin-bottom: var(--rmx-vao-bloco);
}

.rmx-filtro-campos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--rmx-vao-campo);
}

/* O .form-group traz 16px de margem de baixo do bloco de formularios; dentro da
   grade quem da o respiro e o `gap`, e os dois somados abriam o dobro. */
.rmx-filtro .form-group {
    margin-bottom: 0;
}

.rmx-filtro-acoes {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 16px;
}

/* 17.2 — mosaico de capas ----------------------------------------------------
   Nao usa `.rmx-grid-md-*`: a capa e um retrato alto (proporcao de jornal), e
   as quatro colunas das grades de noticia dariam capas altas demais. A coluna
   aqui e medida em pixels e a quantidade se ajusta a largura que houver. */
.rmx-capas {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
    gap: var(--rmx-vao-item);
}

.rmx-capa {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--rmx-borda);
    border-radius: var(--rmx-raio-lg);
    background: var(--rmx-cartao);
    color: inherit;
    text-decoration: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.rmx-capa:hover,
.rmx-capa:focus {
    border-color: var(--rmx-primaria);
    box-shadow: var(--rmx-sombra-cartao);
    color: inherit;
    text-decoration: none;
    transform: translateY(-2px);
}

/* `contain` e nao `cover`: e a capa de um documento — cortar as bordas corta
   manchete e cabecalho, que e justamente o que a pessoa usa para reconhecer a
   edicao. O fundo cinza preenche o que sobra. */
.rmx-capa-figura {
    display: grid;
    place-items: center;
    overflow: hidden;
    background: var(--rmx-superficie);
}

.rmx-capa-figura img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.rmx-capa-corpo {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 8px;
    padding: 12px 14px 14px;
}

.rmx-capa-nome {
    font-family: var(--rmx-fonte-titulo);
    font-size: 16px;
    font-weight: 500;
    line-height: 1.2;
    color: var(--rmx-tinta);
}

/* A data desce para o pe do card para que capas de nomes de tamanhos diferentes
   terminem alinhadas na mesma fileira. */
.rmx-capa-corpo .rmx-meta {
    margin-top: auto;
}

/* 17.3 — pagina do documento -------------------------------------------------
   Coluna de leitura estreita, como a materia: o `descricao` aqui e texto
   corrido de edital, e na largura cheia a linha passaria de 200 caracteres.

   Diferente da pagina de noticia, a largura vale para a SECAO INTEIRA — nao ha
   um segundo bloco largo embaixo, entao nao ha efeito sanfona. */
.rmx-doc {
    max-width: 900px;
}

.rmx-doc-data {
    margin: -8px 0 var(--rmx-vao-bloco);
    color: var(--rmx-apagado);
    font-size: 14px;
}

/**
 * Linha de apoio abaixo do titulo — e HTML do CKEditor, e por isso o elemento
 * no markup e um `<div>` e nao um `<p>` (ver o comentario na edicao-impressa.php:
 * `<p>` dentro de `<p>` e fechado pelo navegador e a margem daqui acabava num
 * paragrafo vazio, deixando o texto colado no filtro).
 *
 * Como o conteudo traz os proprios `<p>`, o ultimo deles precisa perder a
 * margem de baixo, senao os 10px do bootstrap somam com os 32 daqui.
 */
.rmx-doc-apoio > *:last-child {
    margin-bottom: 0;
}

.rmx-doc-apoio {
    margin: 0 0 var(--rmx-vao-bloco);
    color: var(--rmx-tinta-suave);
    font-size: 16px;
    line-height: 1.6;
}

.rmx-doc-capa {
    margin-bottom: var(--rmx-vao-bloco);
    text-align: center;
}

.rmx-doc-capa img {
    max-width: 100%;
    height: auto;
    border-radius: var(--rmx-raio-lg);
}

.rmx-doc-texto {
    color: var(--rmx-tinta);
    font-size: 17px;
    line-height: 1.7;
}

.rmx-doc-texto img {
    max-width: 100%;
    height: auto;
}

.rmx-doc-texto table {
    width: 100%;
    border-collapse: collapse;
}

.rmx-doc-acoes {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: var(--rmx-vao-bloco);
}

/* Abaixo de 768px os quatro botoes nao cabem numa linha. Dois por linha, todos
   da mesma largura — era o que o `@media` do <style> antigo fazia a mao. */
@media (max-width: 767px) {
    .rmx-doc-acoes .rmx-btn {
        flex: 1 1 calc(50% - 5px);
    }
}

/* 17.4 — leitor de PDF -------------------------------------------------------
   Renderiza em <canvas> via pdf.js e NAO em <iframe>/<embed>, que o Chrome no
   Android e o Safari no iOS nao exibem inline (ver .claude/docs/front-end.md).

   O [hidden] precisa de display:none explicito porque a regra declara display —
   sem ele o visor nasceria aberto. Mesma armadilha dos modais. */
.rmx-pdf {
    display: block;
    overflow: hidden;
    margin-top: var(--rmx-vao-bloco);
    border: 1px solid var(--rmx-borda);
    border-radius: var(--rmx-raio-xl);
    background: var(--rmx-superficie);
}

.rmx-pdf[hidden] {
    display: none;
}

.rmx-pdf-topo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--rmx-borda);
}

.rmx-pdf-info {
    color: var(--rmx-tinta-suave);
    font-size: 14px;
}

/* O canvas e redesenhado na largura do palco, entao a rolagem aqui e so
   vertical. */
.rmx-pdf-palco {
    max-height: 75vh;
    overflow: auto;
    padding: 16px;
    text-align: center;
}

.rmx-pdf-canvas {
    max-width: 100%;
    background: #fff;
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.25);
}

.rmx-pdf-nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 16px;
    border-top: 1px solid var(--rmx-borda);
}

.rmx-pdf-pagina {
    color: var(--rmx-tinta-suave);
    font-size: 14px;
    white-space: nowrap;
}

.rmx-pdf button[disabled] {
    cursor: default;
    opacity: 0.45;
}

/* No celular o contador sobe para uma linha so dele e os dois botoes ficam lado
   a lado abaixo — os tres juntos nao cabem. */
@media (max-width: 767px) {
    .rmx-pdf-nav .rmx-pdf-pagina {
        order: -1;
        flex: 0 0 100%;
        text-align: center;
    }

    .rmx-pdf-nav .rmx-btn {
        flex: 1 1 calc(50% - 6px);
    }

    .rmx-pdf-palco {
        padding: 10px;
    }
}



/* -----------------------------------------------------------------------------
   23. A CONVERSA — comentarios da noticia E mensagens do obituario (fase 7)
   --------------------------------------------------------------------------
   UMA peca para as DUAS telas, como a `montaBoxComentario()` que imprime o
   markup: o que muda de uma para a outra sao os TEXTOS (o titulo, a linha de
   apoio, o convite do vazio, o placeholder do campo), escritos em cada arquivo.
   Desenho nenhum mora nos dois lugares.

   Substituiu o bloco de comentarios do style2023.css (`.box-titulo-comentario`,
   `.box-comentario`, `.box-acoes-comentario`, `.lista-respostas-comentario`),
   que era a ultima peca das duas telas sem passar pela relayout: filete
   VERMELHO no topo, titulo de 28px sem a barrinha de gradiente, os cinzas
   #989898 e #e1dee4 fora dos tokens e o laranja #ff8000 no curtido, que nao e o
   --rmx-primaria. Aquelas regras continuam no style2023.css e nao alcancam mais
   nada aqui — o markup delas deixou de ser impresso.
   -------------------------------------------------------------------------- */

/* A frase apagada abaixo do titulo. Irma do `.rmx-doc-apoio` e do
   `.rmx-lead-apoio`; esta e compartilhada porque as duas telas da conversa
   pedem exatamente a mesma coisa. */
.rmx-conversa-apoio {
    margin: 0 0 var(--rmx-vao-bloco);
    color: var(--rmx-apagado);
    font-size: 15px;
    line-height: 1.6;
}

/* -- escrever ---------------------------------------------------------------
   Avatar a esquerda, campo e botao empilhados a direita — o mesmo arranjo do
   comentario logo abaixo, que e o que faz a caixa de escrever ler como "o seu
   comentario entra aqui" e nao como um formulario avulso. */
.rmx-conversa-form {
    display: flex;
    gap: 16px;
    margin-bottom: var(--rmx-vao-bloco);
}

.rmx-conversa-form-corpo {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* A `<textarea>` nao ganha regra nenhuma aqui: o `.rmx-form textarea` da secao
   9 ja da borda, raio, fundo e os 120px de min-height que valem para o site
   inteiro. Um numero proprio so para esta caixa seria mais um 96 ou 200 solto,
   que e o que a secao 1 existe para impedir — e era justamente o `height: 200px`
   inline da noticia que saiu nesta mesma leva. */

.rmx-conversa-form-pe {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
}

/* "Respondendo a Fulano". Era `.respondendo-comentario`, cinza #f1f1f1 com
   raio de 4px; passou ao --rmx-acento, que e o mesmo tom do botao de curtir
   quando esta curtido — nas duas pecas ele quer dizer "isto aqui esta ativo". */
.rmx-conversa-respondendo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 14px;
    border-radius: var(--rmx-raio);
    background: var(--rmx-acento);
    color: var(--rmx-texto);
    font-size: 13px;
}

.rmx-conversa-respondendo a {
    color: var(--rmx-primaria);
    font-weight: 600;
    white-space: nowrap;
}

/* -- a lista ---------------------------------------------------------------- */
.rmx-coment-lista {
    display: flex;
    flex-direction: column;
    gap: var(--rmx-vao-item);
}

/**
 * O COMENTARIO E UM CARTAO, e nao mais um item de lista separado por filete.
 *
 * A caixa e a da ficha do obituario (`.rmx-obt`): fundo branco, filete
 * --rmx-borda, raio --rmx-raio-xl. NAO e o `.rmx-cartao`, que tem sombra e
 * sobe 4px no hover — aquele e o vocabulario de "isto e clicavel", e um
 * comentario nao leva a lugar nenhum.
 */
.rmx-coment {
    display: flex;
    gap: 16px;
    padding: 24px;
    border: 1px solid var(--rmx-borda);
    border-radius: var(--rmx-raio-xl);
    background: var(--rmx-cartao);
}

/* A coluna do avatar. E flex-coluna por causa da linha de thread, que precisa
   ocupar a altura que sobra abaixo do avatar. */
.rmx-coment-lado {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

/* `usuario_site` nao tem foto — sao as iniciais do nome, montadas pela
   `iniciaisNome()` em admin/funcoes/sql.php. Barlow Condensed porque duas
   letras maiusculas em caixa alta e exatamente o que a fonte de titulo faz
   melhor que a de texto. */
.rmx-coment-avatar {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1px solid var(--rmx-borda);
    border-radius: var(--rmx-pilula);
    background: var(--rmx-mudo);
    color: var(--rmx-tinta-suave);
    font-family: var(--rmx-fonte-titulo);
    font-size: 17px;
    font-weight: 700;
    line-height: 1;
    user-select: none;
}

/**
 * A LINHA DE THREAD — do comentario ate a resposta, no vao da esquerda.
 *
 * So e impressa em comentario QUE TEM resposta (ver o `$linhaThread` na
 * `montaBoxComentario()`): impressa sempre, viraria um risco solto embaixo do
 * avatar de todo comentario sem filha.
 *
 * 180deg E NAO OS 135deg DO `--rmx-gradiente`. Numa tira de 2px de largura o
 * gradiente diagonal atravessa a ESPESSURA em vez do comprimento e sai como uma
 * cor chapada; o degrade so aparece descendo. E o contrario da barrinha do
 * `.rmx-secao-titulo`, que mede 6x24 e por isso funciona com os 135.
 *
 * As tres cores sao as do token, escritas na mao pela mesma razao — nao ha como
 * girar o angulo de um `linear-gradient` ja montado dentro de uma variavel.
 */
.rmx-coment-linha {
    flex: 1 1 auto;
    width: 2px;
    min-height: 32px;
    border-radius: var(--rmx-pilula);
    background: linear-gradient(180deg, oklch(0.72 0.19 45) 0%, oklch(0.65 0.26 15) 45%, oklch(0.58 0.28 350) 100%);
}

.rmx-coment-corpo {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Nome e tempo na MESMA linha. O tempo vivia no rodape das acoes, empurrado
   para a direita por um `margin-left: auto` — longe do nome, que e a unica
   coisa que ele qualifica. */
.rmx-coment-topo {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 10px;
}

.rmx-coment-nome {
    color: var(--rmx-texto);
    font-size: 15px;
    font-weight: 600;
}

.rmx-coment-tempo {
    color: var(--rmx-apagado);
    font-size: 13px;
}

.rmx-coment-texto {
    color: var(--rmx-texto);
    font-size: 15px;
    line-height: 1.65;
    overflow-wrap: anywhere;
    text-wrap: pretty;
}

.rmx-coment-acoes {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 4px;
}

/**
 * CURTIR E RESPONDER SAO PILULAS, e nao mais links cinza de 14px.
 *
 * Sao <a> no markup (e o que a `montaBoxComentario()` sempre imprimiu, e o que
 * o JS das duas telas procura), vestidos de botao. O ganho nao e so de padrao:
 * como link de texto, o alvo de toque tinha a altura da linha — no celular, que
 * e onde a maior parte dos comentarios e lida, acertar "Responder" era sorte.
 */
.rmx-coment-acao,
.rmx-coment-acao:focus {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 32px;
    padding: 0 14px;
    border: 1px solid var(--rmx-borda);
    border-radius: var(--rmx-pilula);
    background: var(--rmx-cartao);
    color: var(--rmx-tinta-suave);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.rmx-coment-acao i {
    font-size: 14px;
}

.rmx-coment-acao:hover {
    background: var(--rmx-mudo);
    color: var(--rmx-texto);
    text-decoration: none;
}

/* `curtido` e posta e tirada pelo JS (`classList.toggle('curtido', ...)`), o
   mesmo nome de sempre. O --rmx-acento e o mesmo tom do "respondendo a": nas
   duas pecas ele diz "isto esta ativo". */
.rmx-coment-acao.curtido,
.rmx-coment-acao.curtido:hover,
.rmx-coment-acao.curtido:focus {
    border-color: var(--rmx-acento);
    background: var(--rmx-acento);
    color: var(--rmx-primaria);
}

/**
 * AS RESPOSTAS — cada uma na sua caixa, dentro do cartao do pai.
 *
 * Comecou como `padding-left: 30px` com um filete de 2px a esquerda; dentro de
 * um cartao aquele filete viraria uma borda brigando com outra a poucos pixels
 * dela. Virou entao UMA bandeja com fundo --rmx-superficie segurando todas as
 * respostas, e agora sao CAIXAS SEPARADAS (02/09/2026, a pedido): com duas ou
 * tres respostas seguidas, a bandeja unica nao dizia onde uma acabava e a outra
 * comecava — era o mesmo problema da lista separada por linhas que fez os
 * comentarios virarem cartoes.
 *
 * O container nao pinta mais nada: e so o empilhamento e o vao. Quem carrega o
 * fundo agora e cada `.rmx-coment-resposta`.
 */
.rmx-coment-respostas {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 20px;
}

/**
 * A resposta e um cartao MENOR e mais claro que o pai: fundo --rmx-superficie
 * contra o branco dele, raio um degrau abaixo (12 contra 16) e sem filete.
 *
 * Sem borda de proposito — dentro de um cartao que ja tem uma, uma segunda a
 * poucos pixels dela vira ruido; aqui e o fundo que separa. O `padding` e 16 e
 * nao os 24 do pai pela mesma razao de o avatar ser 32 e nao 40: tudo na
 * resposta e um degrau menor.
 */
.rmx-coment-resposta {
    gap: 12px;
    padding: 16px;
    border: 0;
    border-radius: var(--rmx-raio-lg);
    background: var(--rmx-superficie);
}

/* Branco e nao --rmx-mudo: sobre o bege da caixa da resposta os dois tons quase
   empatam e o avatar sumia dentro dela. */
.rmx-coment-resposta .rmx-coment-avatar {
    width: 32px;
    height: 32px;
    background: var(--rmx-cartao);
    font-size: 14px;
}

.rmx-coment-resposta .rmx-coment-corpo {
    gap: 6px;
}

.rmx-coment-resposta .rmx-coment-nome {
    font-size: 14px;
}

.rmx-coment-resposta .rmx-coment-tempo {
    font-size: 12px;
}

.rmx-coment-resposta .rmx-coment-texto {
    font-size: 14px;
}

.rmx-coment-resposta .rmx-coment-acao {
    height: 28px;
    padding: 0 12px;
    font-size: 12px;
}

/* -- ninguem comentou ainda ------------------------------------------------- */
.rmx-conversa-vazio {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding: 40px 32px;
    border: 1px dashed var(--rmx-borda);
    border-radius: var(--rmx-raio-xl);
    background: var(--rmx-superficie);
    text-align: center;
}

.rmx-conversa-vazio-titulo {
    color: var(--rmx-texto);
    font-family: var(--rmx-fonte-titulo);
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.01em;
    text-transform: uppercase;
}

.rmx-conversa-vazio p {
    max-width: 420px;
    margin: 0;
    color: var(--rmx-apagado);
    font-size: 14px;
    line-height: 1.6;
}

.rmx-conversa-vazio .fa {
    color: var(--rmx-apagado);
    font-size: 30px;
}

/* -- celular ---------------------------------------------------------------- */
@media (max-width: 575px) {
    /* O cartao perde respiro lateral antes de perder o vertical: numa tela de
       360 os 24px de cada lado somam 48 tirados da linha de texto, que e o que
       mais importa aqui. */
    .rmx-coment {
        gap: 12px;
        padding: 16px;
    }

    /* O `padding` mudou de dono junto com o fundo: desde que cada resposta e
       uma caixa, e ela quem tem respiro interno — no container ele so afastaria
       as caixas das bordas do cartao. */
    .rmx-coment-respostas {
        margin-top: 16px;
    }

    .rmx-coment-resposta {
        padding: 12px;
    }

    /* O avatar encolhe junto — em 40px ele come um oitavo da largura da tela. */
    .rmx-coment-avatar {
        width: 34px;
        height: 34px;
        font-size: 15px;
    }

    .rmx-coment-resposta .rmx-coment-avatar {
        width: 28px;
        height: 28px;
        font-size: 13px;
    }

    /* O botao de enviar ocupa a linha: no fim de uma caixa de texto de largura
       inteira, um botao pequeno encostado a direita fica orfao. */
    .rmx-conversa-form-pe .rmx-btn {
        flex: 1 1 auto;
    }
}

/* -----------------------------------------------------------------------------
   24. AJUSTES DE PADRAO (fase 7)
   Peças pequenas que faltavam entrar no padrao do layout 2026. Cada uma tem o
   seu porque escrito ao lado.
   -------------------------------------------------------------------------- */

/* 24.1 — MIGALHA DE PAO ------------------------------------------------------
   Acima do titulo das telas de DETALHE de categoria e de cidade. Duas telas de
   nivel 2 cujo titulo e so o nome do lugar ("Esporte", "Rio Negro") — sem nada
   acima dele, nao ha na pagina o que diga de onde ele veio.

   Sao DOIS niveis e nao tres ("Noticias / Esporte", nao "Noticias / Categorias
   / Esporte"): a pagina intermediaria ja e o link "Todas as categorias" do
   outro lado do mesmo cabecalho, e um terceiro degrau so alongaria a linha no
   celular para repetir um caminho que ja esta ali ao lado.

   O ultimo item NAO e link: e a pagina em que se esta. */
/* O VAO DE BAIXO E MAIOR QUE O DE CIMA, de proposito. O ultimo item da migalha
   repete o titulo palavra por palavra ("Notícias / Esporte" logo acima de
   "ESPORTE"), e colados eles leem como uma coisa so, com o titulo duplicado.
   Com o vao de item embaixo e so o respiro da pagina em cima, a migalha
   pertence ao topo da tela — que e de onde ela fala — e o titulo volta a ser um
   bloco por conta propria. */
.rmx-migalha {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: var(--rmx-vao-item);
    color: var(--rmx-apagado);
    font-size: 13px;
    font-weight: 500;
}

.rmx-migalha a,
.rmx-migalha a:focus {
    color: var(--rmx-apagado);
    text-decoration: none;
}

.rmx-migalha a:hover,
.rmx-migalha a:focus {
    color: var(--rmx-primaria);
    text-decoration: underline;
}

/* Mais claro que o texto: o separador organiza, nao informa. */
.rmx-migalha-sep {
    color: var(--rmx-borda);
}

.rmx-migalha-atual {
    color: var(--rmx-tinta-suave);
    font-weight: 600;
}

/* 24.2 — PERGUNTA + BOTAO no pe do cartao de login ---------------------------
   Era um `<a class="rmx-conta-voltar">` envolvendo a pergunta E a chamada
   ("Ainda nao tem uma conta?" + <strong>Clique aqui</strong>), de modo que a
   area clicavel — e o realce do hover — pegava a frase inteira, inclusive a
   parte que e so pergunta.

   Agora a pergunta e texto e a acao e um `.rmx-btn`, que e o que o proprio
   cartao de CRIAR CONTA ja fazia no botao "Ja tenho conta". Duas metades do
   mesmo fluxo usando dois tratamentos diferentes era o desencontro. */
.rmx-conta-acao {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    margin-top: 20px;
    text-align: center;
}

.rmx-conta-acao + .rmx-conta-acao {
    margin-top: 16px;
}

.rmx-conta-acao p {
    margin: 0;
    color: var(--rmx-apagado);
    font-size: 13px;
}

/* Largura inteira como o "Entrar" logo acima: tres botoes empilhados de larguras
   diferentes no mesmo cartao de 480px leem como tres coisas sem relacao. */
.rmx-conta-acao .rmx-btn {
    width: 100%;
}

/* 24.3 — ITEM DE LISTA EMPILHADO NO CELULAR ----------------------------------
   Ate 575px a foto sobe para CIMA do texto e as duas ocupam a largura inteira.
   Em coluna de 140px numa tela de 360 sobravam ~190px para o titulo, que e o
   que se le — a foto custava metade da linha para servir de miniatura.

   `order` e nao mudanca de markup: no HTML o titulo continua vindo primeiro,
   que e o que leitor de tela e Tab seguem (mesma decisao ja documentada na
   secao 14 para a foto a esquerda no desktop).

   So o `.rmx-lista .rmx-item` — a lista grande de "Ultimas noticias". O
   `.rmx-item-mini` das bandas de categoria e da coluna lateral fica como esta:
   sao ate seis por bloco, e empilhados virariam uma tira de rolagem enorme para
   o que e, ali, uma lista de apoio. */
@media (max-width: 575px) {
    .rmx-lista .rmx-item {
        grid-template-columns: minmax(0, 1fr);
        gap: 12px;
    }

    /**
     * A FOTO VAI INTEIRA, SEM RECORTE — e a capa da noticia, nao uma miniatura.
     *
     * Passou por `height: 190px` com o `object-fit: cover` que o `.rmx-figura`
     * da a toda imagem: numa faixa de largura inteira aquilo recortava a foto
     * numa tira. Aqui a altura e do CONTEUDO, e a imagem so encolhe ate a
     * largura da coluna.
     *
     * As tres declaracoes desfazem, juntas, o enquadramento do `.rmx-figura`:
     * sem o `height: auto` na imagem ela continua esticando ate a altura do
     * pai, e sem trocar o `object-fit` ela continua recortando dentro dela.
     *
     * O `<picture>` do home.php e a outra metade disto: ele troca a fonte pela
     * `thumb` comum ate 575px, porque a `thumb-squad` que serve a coluna do
     * desktop e um recorte QUADRADO — mostrada inteira, daria um quadrado de
     * largura de tela.
     */
    .rmx-lista .rmx-item .rmx-item-foto {
        height: auto;
    }

    .rmx-lista .rmx-item .rmx-item-foto img {
        height: auto;
        object-fit: fill;
    }
}

/* 24.4 — FILTRO RETRATIL -----------------------------------------------------
   Publicidade legal (quatro campos) e edicao impressa (dois). Fechado, o bloco
   deixa de empurrar a primeira capa para fora da tela no celular.

   `<details>` e NAO um botao com JS: abrir e fechar e exatamente o que o
   elemento faz nativamente, e sem script nenhum ele continua funcionando —
   um filtro que depende de JS para ABRIR e um filtro que some quando o script
   falha. O `open` inicial vem de dois lugares: o servidor abre a caixa quando
   ha filtro aplicado (senao ninguem ve por que a listagem esta curta), e o
   `integracao/pdf/filtro_aberto.php` a abre no desktop, onde nao ha aperto de
   espaco que justifique esconder o filtro. No celular ela continua nascendo
   fechada, que e a razao de ela ser retratil.

   NADA DISSO SE PINTA POR CSS. O estado e o atributo `open`, e media query nao
   muda atributo — colapsar por CSS um `<details>` que o DOM tem por aberto
   deixaria o primeiro clique no `<summary>` sem efeito visivel, porque estaria
   FECHANDO o que ja parece fechado.

   O EFEITO E DE ABERTURA e nao de altura: animar a altura de um `<details>`
   exige saber quanto ele mede fechado, e fechado ele nao mede nada. Uma
   `animation` no conteudo roda quando ele entra e nao precisa de medida
   nenhuma — fechar continua instantaneo, que e o que se quer de um filtro. */
.rmx-filtro {
    padding: 0;
    overflow: hidden;
}

.rmx-filtro-abre {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 20px;
    color: var(--rmx-texto);
    font-family: var(--rmx-fonte-texto);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    list-style: none;
    user-select: none;
}

/* O triangulinho padrao do <summary>. Some nos dois motores; quem indica o
   estado e a seta da direita, que gira. */
.rmx-filtro-abre::-webkit-details-marker,
.rmx-filtro-abre::marker {
    display: none;
    content: "";
}

.rmx-filtro-abre:hover {
    color: var(--rmx-primaria);
}

.rmx-filtro-abre-rotulo {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.rmx-filtro-seta {
    color: var(--rmx-apagado);
    font-size: 18px;
    transition: transform 0.24s ease;
}

.rmx-filtro[open] .rmx-filtro-seta {
    transform: rotate(180deg);
}

/**
 * O EFEITO DE ABRIR — a altura CRESCE, e nao so aparece.
 *
 * A MEDIDA VEM DA GRADE. O corpo e uma grade de uma linha so, e o que se move e
 * `grid-template-rows` de `0fr` a `1fr` — `1fr` ali vale exatamente a altura
 * natural do conteudo. Um `max-height` fixo teria de cobrir os dois filtros
 * (dois campos na edicao impressa, quatro na publicidade legal) e ainda o
 * celular, onde eles empilham: ou corta o conteudo, ou anima no vazio.
 *
 * O `overflow: hidden` mora no FILHO e nao aqui: quem e recortado durante o
 * crescimento e o conteudo, e a linha da grade e que encolhe. O `min-height: 0`
 * ao lado dele e obrigatorio — sem ele o item de grade se recusa a ficar menor
 * que o proprio conteudo e nada se move. O PADDING tambem e do filho: ficando
 * aqui, ele nao entra na conta da linha, e a caixa comecaria com 20px de altura
 * e daria um salto antes de crescer.
 *
 * -----------------------------------------------------------------------------
 * POR QUE E `transition` LIGADA POR CLASSE, E NAO UMA `animation`
 * -----------------------------------------------------------------------------
 *
 * A primeira versao era uma `@keyframes` no corpo, disparada pela abertura do
 * `<details>`. NAO RODA: fechado, o conteudo vive numa subarvore que o navegador
 * nao renderiza (hoje o `::details-content`, com `content-visibility: hidden`),
 * e animacao declarada la dentro nao chega a comecar — quando a subarvore passa
 * a ser renderizada ela ja nasce no ultimo quadro. O que se via era a caixa
 * estalando no tamanho final.
 *
 * Quem resolve e o `plugins/main/starterFiltro.js`: ele assume o `open` para
 * poder por o conteudo na pagina ANTES de mover a altura. Aqui em baixo so ficam
 * os dois estados.
 *
 * A `.rmx-filtro-js` E POSTA PELO SCRIPT, e e o que liga a transicao. Sem ela o
 * corpo nunca fica em `0fr` — porque um navegador que nao rode aquele arquivo
 * ficaria com o filtro recolhido e sem nada para reabri-lo, e filtro invisivel e
 * pior do que filtro sem animacao.
 */
.rmx-filtro-corpo {
    display: grid;
    grid-template-rows: 1fr;
}

.rmx-filtro-interno {
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    padding: 0 20px 20px;
}

.rmx-filtro-js .rmx-filtro-corpo {
    transition: grid-template-rows 0.3s ease, opacity 0.3s ease;
}

.rmx-filtro-js .rmx-filtro-corpo.rmx-filtro-recolhido {
    grid-template-rows: 0fr;
    opacity: 0;
}

/* Quem pediu menos animacao abre e fecha de uma vez. O script continua no
   comando (e continua tirando o `open` no fim), so que sem movimento — a rede de
   protecao dele por `setTimeout` existe justamente para o caso em que o
   `transitionend` nao dispara, que e este. */
@media (prefers-reduced-motion: reduce) {
    .rmx-filtro-js .rmx-filtro-corpo {
        transition: none;
    }

    .rmx-filtro-seta {
        transition: none;
    }
}

/* 24.5 — RODAPE CENTRALIZADO NO CELULAR --------------------------------------
   Ate 767px o `.rmx-rodape-grid` e de uma coluna so: as quatro colunas viram
   quatro blocos empilhados, e alinhados a esquerda numa faixa de largura
   inteira eles ficam com o texto grudado numa borda e a tira final — que ja
   centrava desde sempre — destoando de tudo o que esta acima dela.

   Os 767 sao o mesmo ponto em que a grade de quatro colunas nasce (`min-width:
   768px` logo acima): centrado enquanto e pilha, alinhado assim que vira
   coluna. */
@media (max-width: 767px) {
    .rmx-rodape-grid {
        text-align: center;
    }

    /* Os social sao flex, e `text-align` nao alcanca item de flex. */
    .rmx-rodape-sociais,
    .rmx-rodape-sociais .ul-rsocial {
        justify-content: center;
    }

    /* A logo e `inline`/`block` conforme o caso; a margem automatica centra as
       duas formas sem depender de qual delas e. */
    .rmx-rodape-logo img {
        margin-left: auto;
        margin-right: auto;
    }
}

/* 24.6 — VOLTAR AO TOPO ------------------------------------------------------
   O `.cd-top` vem do `css/totop/totop.css`, importado pelo style2023.css: um
   quadrado cinza de 40px com uma seta branca em `background-image`. Era a
   ultima peca fixa na tela ainda com a cara antiga — e a mais visivel delas,
   porque acompanha a rolagem de todas as paginas.

   AS REGRAS FICAM AQUI e o arquivo antigo nao e tocado: ele e um plugin de
   terceiro dentro de `css/`, e o style2026.css vem depois na ordem dos `<link>`
   (ver links.php), entao vence no empate de especificidade. Mesmo criterio do
   resto da relayout.

   A SETA BRANCA CONTINUA sendo a mesma imagem — sobre o gradiente da marca ela
   funciona; e ela que decidiu o fundo ser o gradiente e nao o branco com filete
   dos botoes de contorno. As duas camadas de `background` vao na mesma
   declaracao: a imagem primeiro (fica por cima), o gradiente por baixo. */
.cd-top {
    height: 48px;
    width: 48px;
    right: var(--rmx-respiro);
    bottom: var(--rmx-respiro);
    border-radius: var(--rmx-pilula);
    background: url(images/cd-top-arrow.svg) no-repeat center / 14px auto,
                var(--rmx-gradiente);
    box-shadow: var(--rmx-sombra-marca);
    transition: transform 0.2s ease, opacity 0.3s ease, visibility 0s 0.3s;
}

.cd-top.cd-fade-out {
    opacity: 1;
}

/* O mesmo levantar de 1px do `.rmx-btn-marca`. O `.no-touch` do plugin fica na
   frente por especificidade, entao ele entra junto. */
.cd-top:hover,
.no-touch .cd-top:hover {
    background: url(images/cd-top-arrow.svg) no-repeat center / 14px auto,
                var(--rmx-gradiente);
    opacity: 1;
    transform: translateY(-2px);
}

/* As duas medidas do plugin (768 e 1024) viram uma so: o botao nao precisa de
   tres tamanhos, e 60px no desktop tapava conteudo. */
@media only screen and (min-width: 768px) {
    .cd-top {
        right: 24px;
        bottom: 24px;
    }
}

@media only screen and (min-width: 1024px) {
    .cd-top {
        height: 48px;
        width: 48px;
        right: 28px;
        bottom: 28px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .cd-top,
    .cd-top:hover {
        transition: opacity 0.3s ease, visibility 0s 0.3s;
        transform: none;
    }
}


/* =============================================================================
   25. AVISO — as mensagens de erro e de confirmacao (02/09/2026, a pedido)
   =============================================================================

   O PONTO DE PARTIDA: "erro de senha no login esta feio". Estava — e a razao
   nao era falta de estilo, era estilo de OUTRO projeto. O style2023.css
   importa o `bootstrap.min.css` inteiro na primeira linha, entao todo
   `<div class="alert alert-danger">` do site vinha vestido pelo Bootstrap 3:
   caixa vermelho-tijolo, canto de 4px, texto #a94442, 20px de margem embaixo.
   Nada daquilo pertence a este site, e por vir de dentro do bootstrap ninguem
   tinha escrito uma linha para causar aquilo.

   POR QUE NAO SWEETALERT (ou qualquer modal). Um modal INTERROMPE: ele cobre a
   tela, exige um clique para sair e leva o olho para longe do formulario.
   "E-mail ou senha invalidos" e o oposto disso — a pessoa precisa continuar
   exatamente onde esta, com o campo a um toque de distancia. O aviso certo e
   inline, ao lado do que causou o erro. Alem disso seriam ~70KB de biblioteca
   e um segundo sistema de aparencia convivendo com o do site.

   POR QUE A CLASSE E `.alert`, E NAO UMA `.rmx-` NOVA. As mensagens nascem
   como STRING DE HTML em cinco lugares diferentes (login-conta.php,
   registro-conta.php, perfil.php, integracao/conta/senha.php e o
   alerts/alerts.php), algumas montadas em JavaScript. Renomear a classe
   obrigaria a mexer em todas e deixaria qualquer string esquecida sem estilo
   nenhum. Vestindo `.alert` aqui, TODA mensagem do site — inclusive as que
   ainda nao existem — ja nasce certa.

   O `.rmx-pg` na frente e o que ganha do bootstrap: `.alert` vale (0,1,0),
   `.rmx-pg .alert` vale (0,2,0). Sem ele, importado antes ou depois, o
   bootstrap empataria e venceria pela ordem em telas onde ele vem por ultimo.

   NAO SE DECLARA `display` EM NENHUMA REGRA DESTA SECAO. As caixas do
   alerts/alerts.php sao TOAST: nascem `display: none` (css/forms/forms.css) e
   e o JavaScript que as mostra. Um `display: flex` aqui, ainda que so para
   arrumar o icone, colocaria as seis mensagens permanentemente na tela de
   todas as paginas do site. E por isso que o icone e um `::before`
   posicionado, e nao um item de flex.
   -------------------------------------------------------------------------- */
.rmx-pg .alert {
    position: relative;
    margin: 0;
    padding: 14px 16px 14px 46px;
    border: 1px solid var(--rmx-borda);
    border-radius: var(--rmx-raio-lg);
    background: var(--rmx-cartao);
    color: var(--rmx-texto);
    font-family: var(--rmx-fonte-texto);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.45;
    /* Contra o `.text-center` que sobrou no markup da recuperacao de senha: com
       o icone ancorado a esquerda, texto centralizado abre um vao entre os
       dois e a segunda linha nasce debaixo do icone. */
    text-align: left;
    text-shadow: none;
}

/* O icone vem do CSS, e nao do markup, PORQUE o markup e string de PHP e de
   JavaScript espalhada — ver o cabecalho da secao. FontAwesome 4.6.3 (a que o
   site tem), familia `FontAwesome`, unicode direto. */
.rmx-pg .alert::before {
    content: "\f05a";
    position: absolute;
    top: 14px;
    left: 16px;
    width: 18px;
    color: var(--rmx-apagado);
    font: normal normal normal 17px/1.25 FontAwesome;
    text-align: center;
    -webkit-font-smoothing: antialiased;
}

/* O bootstrap da 10px de margem a todo <p>; dentro da caixa isso vira um vao
   embaixo do texto que ninguem pediu. */
.rmx-pg .alert p {
    margin: 0;
}

.rmx-pg .alert p + p {
    margin-top: 6px;
}

.rmx-pg .alert a {
    color: inherit;
    font-weight: 600;
    text-decoration: underline;
}

/**
 * ERRO — na cor da MARCA, e nao num vermelho novo.
 *
 * O site inteiro e vermelho-rosa: um vermelho de erro escolhido a parte ficaria
 * ou perto demais da marca (lendo como enfeite) ou brigando com ela. O
 * `--rmx-acento` ja e o fundo que o site usa para "repare nisto" — no
 * comentario curtido, por exemplo — e o icone na `--rmx-primaria` e o que da o
 * tom de alerta.
 *
 * O TEXTO FICA NO PRETO DE SEMPRE. Texto colorido sobre fundo colorido e o que
 * mais atrapalha a leitura de um aviso, e um aviso de erro e justamente o texto
 * que a pessoa MAIS precisa ler. Quem carrega a cor sao a caixa e o icone.
 */
.rmx-pg .alert-danger {
    border-color: rgba(255, 0, 89, 0.22);
    background: var(--rmx-acento);
    color: var(--rmx-texto);
}

.rmx-pg .alert-danger::before {
    content: "\f06a";
    color: var(--rmx-primaria);
}

.rmx-pg .alert-success {
    border-color: rgba(18, 128, 92, 0.22);
    background: var(--rmx-ok-fundo);
    color: var(--rmx-texto);
}

.rmx-pg .alert-success::before {
    content: "\f058";
    color: var(--rmx-ok);
}

.rmx-pg .alert-warning {
    border-color: rgba(255, 117, 39, 0.28);
    background: var(--rmx-mudo);
    color: var(--rmx-texto);
}

.rmx-pg .alert-warning::before {
    content: "\f071";
    color: var(--rmx-laranja);
}

.rmx-pg .alert-info {
    border-color: var(--rmx-borda);
    background: var(--rmx-superficie);
    color: var(--rmx-texto);
}

/* -----------------------------------------------------------------------------
   25.1 O AVISO DENTRO DO CARTAO DE CONTA
   -------------------------------------------------------------------------- */
/**
 * O aviso do login CHEGA COM A PAGINA, e nao durante ela: o `login-conta.php`
 * guarda a frase em `$_SESSION['msg_login']` e manda o navegador de volta para
 * a `login-usuario`. Ou seja, quando a pessoa erra a senha a tela toda pisca e
 * o formulario reaparece — sem nada que diga o que mudou nele.
 *
 * A entrada de 0.25s e o que costura esse corte: o aviso desliza para o lugar
 * um instante depois do resto assentar, e o olho volta para ele. E a mesma
 * razao de sempre para animar — mostrar de ONDE a coisa veio —, so que aqui o
 * "de onde" e um recarregamento inteiro.
 */
.rmx-conta-msg .alert {
    margin-top: 16px;
    animation: rmx-aviso-entra 0.25s ease-out both;
}

@keyframes rmx-aviso-entra {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .rmx-conta-msg .alert {
        animation: none;
    }
}

/* -----------------------------------------------------------------------------
   25.2 O TOAST (alerts/alerts.php)
   -------------------------------------------------------------------------- */
/* Mesma caixa, so que flutuando no canto — dai a sombra, que uma caixa dentro
   do fluxo nao precisa. A largura, a posicao e o `display: none` continuam
   sendo do css/forms/forms.css; aqui so entra a pintura. */
.rmx-pg .bx-alert.alert {
    box-shadow: var(--rmx-sombra-cartao);
}

/* =============================================================================
   26. COMPLIANCE — canal de denuncias (21/09/2026, merge com a producao)
   =============================================================================

   Tela que so existia no projeto de producao (nasceu em 16/09/2026, depois da
   copia que virou o layout 2026) e foi vestida aqui pelas receitas do
   MERGE-VISUAL §9.2: nenhum tratamento de caixa novo — o cartao e o mesmo do
   `.rmx-conta-cartao`/`.rmx-lead-form` (fundo branco, raio xl, sombra de
   cartao), os campos sao os do `.rmx-form` (secao 9) e os avisos, a `.alert`
   da secao 25.

   O QUE E DIFERENTE DAS TELAS DE LEAD, E POR QUE:
   - O questionario e LONGO (oito secoes), entao ele nao cabe como coluna ao
     lado do texto: o texto do painel e o cartao de apoio vem em cima, e as
     secoes descem cada uma no seu cartao.
   - O rotulo e FIXO, acima do campo, e nao o flutuante do `.input-block`: a
     pergunta e uma frase inteira e as vezes traz ajuda embaixo.
   - Os campos curtos (texto, e-mail, telefone) dividem a linha pelo mesmo
     `auto-fit` de piso 240px das telas de lead — tres colunas na largura
     cheia, uma no celular, sem media query. Opcoes, texto longo, anexo e
     declaracao atravessam o cartao (`.rmx-compliance-pergunta-larga`).

   AS CLASSES `compliance-*` do markup sao do JavaScript
   (plugins/main/starterCompliance.js), e so as de ESTADO sao usadas aqui:
   `.compliance-escondida` e `.compliance-com-erro`. Ver o cabecalho do
   compliance.php.
   -------------------------------------------------------------------------- */

/* 26.1 — topo: texto do painel + cartao de apoio ----------------------------- */
.rmx-compliance-topo {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--rmx-vao-bloco);
    align-items: start;
    margin-bottom: var(--rmx-vao-bloco);
}

@media (min-width: 992px) {
    .rmx-compliance-topo {
        grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
        gap: var(--rmx-vao-secao);
    }
}

.rmx-pg .rmx-compliance-subtitulo {
    margin: 0 0 12px;
    font-family: var(--rmx-fonte-titulo);
    font-size: 26px;
    font-weight: 800;
    letter-spacing: var(--rmx-tracking-chamada);
    line-height: 1.15;
    text-transform: uppercase;
}

/* Tipografia de pagina de texto (secao 17.1), um degrau abaixo: aqui o texto
   apresenta o formulario, nao e o conteudo principal. */
.rmx-compliance-descricao {
    font-size: 16px;
    line-height: 1.7;
}

.rmx-compliance-descricao > *:last-child {
    margin-bottom: 0;
}

/* O cartao de apoio leva o gradiente SUAVE de fundo — e o unico ponto da tela
   com cor de fundo, e e o que separa "como funciona" do texto corrido. */
.rmx-compliance-apoio {
    padding: 28px;
    border-radius: var(--rmx-raio-xl);
    background: var(--rmx-cartao);
    background-image: var(--rmx-gradiente-suave);
    box-shadow: var(--rmx-sombra-cartao);
}

.rmx-pg .rmx-compliance-chamada {
    margin: 0 0 16px;
    font-family: var(--rmx-fonte-titulo);
    font-size: 22px;
    font-weight: 800;
    letter-spacing: var(--rmx-tracking-chamada);
    line-height: 1.15;
    text-transform: uppercase;
}

.rmx-compliance-garantias {
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 14px;
    line-height: 1.5;
}

.rmx-compliance-garantias li {
    position: relative;
    padding-left: 28px;
}

.rmx-compliance-garantias li + li {
    margin-top: 10px;
}

.rmx-compliance-garantias .fa {
    position: absolute;
    top: 2px;
    left: 0;
    width: 18px;
    color: var(--rmx-primaria);
    text-align: center;
}

.rmx-compliance-apoio-pe {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--rmx-borda);
}

.rmx-compliance-apoio-pe p {
    margin: 0 0 8px;
    color: var(--rmx-apagado);
    font-size: 13px;
}

.rmx-compliance-apoio-pe .rmx-btn {
    width: 100%;
    background: var(--rmx-cartao);
}

/* 26.2 — secoes do questionario --------------------------------------------- */
.rmx-compliance-form {
    display: flex;
    flex-direction: column;
    gap: var(--rmx-vao-item);
}

/**
 * `<fieldset>` porque cada secao E um grupo de perguntas (leitor de tela anuncia
 * o titulo ao entrar), mas o navegador desenha o `<legend>` no entalhe da borda
 * de cima. O `float` + `width: 100%` e o jeito padrao de tira-lo de la e deixa-lo
 * no fluxo como um titulo comum; o `clear` do bloco seguinte fecha o float.
 */
.rmx-compliance-secao {
    min-width: 0;
    margin: 0;
    padding: 28px;
    border: 0;
    border-radius: var(--rmx-raio-xl);
    background: var(--rmx-cartao);
    box-shadow: var(--rmx-sombra-cartao);
}

.rmx-compliance-secao-cabeca {
    float: left;
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    margin: 0 0 20px;
    padding: 0 0 16px;
    border: 0;
    border-bottom: 1px solid var(--rmx-borda);
}

.rmx-compliance-secao-cabeca + * {
    clear: both;
}

.rmx-compliance-secao-numero {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--rmx-gradiente);
    color: #fff;
    font-family: var(--rmx-fonte-titulo);
    font-size: 18px;
    font-weight: 800;
    line-height: 1;
}

.rmx-compliance-secao-titulo {
    color: var(--rmx-tinta);
    font-family: var(--rmx-fonte-titulo);
    font-size: 21px;
    font-weight: 800;
    letter-spacing: var(--rmx-tracking-alta);
    line-height: 1.15;
    text-transform: uppercase;
}

.rmx-compliance-secao-descricao {
    margin-bottom: 20px;
    color: var(--rmx-tinta-suave);
    font-size: 15px;
    line-height: 1.7;
}

.rmx-compliance-secao-descricao > *:last-child {
    margin-bottom: 0;
}

/* Rodape da secao: a faixa da marca so na borda esquerda, como o
   `.aviso-legado` do painel — a cor diz "atencao" sem pintar o bloco inteiro. */
.rmx-compliance-secao-rodape {
    margin-top: 4px;
    padding: 12px 16px;
    border-left: 3px solid var(--rmx-primaria);
    border-radius: 0 var(--rmx-raio) var(--rmx-raio) 0;
    background: var(--rmx-superficie);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.5;
    white-space: pre-line;
}

/* Vao vertical do `margin-bottom` da pergunta e horizontal do gap, pela mesma
   razao do `.rmx-lead-form`: somar os dois dava vaos diferentes nos dois eixos. */
.rmx-compliance-perguntas {
    display: grid;
    /* Piso de 300 e nao os 240 das telas de lead: aqui a faixa e a do
       container inteiro, e 240 abria QUATRO colunas — com duas perguntas
       curtas na secao, cada campo ficava com um quarto da linha. Em tres, ele
       fica perto dos ~350px de um campo confortavel. */
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 0 var(--rmx-vao-campo);
}

.rmx-compliance-pergunta {
    min-width: 0;
    margin-bottom: 20px;
}

.rmx-compliance-pergunta-larga {
    grid-column: 1 / -1;
}

/* A pergunta condicional fora de vista (o JS alterna a classe). */
.rmx-compliance .compliance-escondida {
    display: none;
}

.rmx-compliance .rmx-compliance-rotulo {
    display: block;
    margin-bottom: 6px;
    color: var(--rmx-texto);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.4;
}

.rmx-compliance-obrigatorio {
    color: var(--rmx-primaria);
    font-weight: 700;
}

.rmx-compliance-ajuda {
    display: block;
    margin-bottom: 8px;
    color: var(--rmx-apagado);
    font-size: 13px;
    line-height: 1.45;
}

.rmx-compliance-ajuda-pe {
    margin: 6px 0 0;
}

.rmx-compliance-form textarea {
    min-height: 140px;
    max-height: 50vh;
}

.rmx-compliance-form input[type="file"] {
    height: auto;
    padding: 9px 12px;
}

/* O botao nativo do seletor de arquivo vestido como um `.rmx-btn` pequeno —
   sem isto ele sai no cinza do sistema operacional, o unico elemento da tela
   fora do desenho. */
.rmx-compliance-form input[type="file"]::file-selector-button {
    margin-right: 12px;
    padding: 6px 14px;
    border: 1px solid var(--rmx-borda);
    border-radius: var(--rmx-pilula);
    background: var(--rmx-mudo);
    color: var(--rmx-texto);
    font-family: var(--rmx-fonte-texto);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.rmx-compliance-arquivos {
    margin: 8px 0 0;
    padding: 0;
    list-style: none;
    color: var(--rmx-tinta-suave);
    font-size: 13px;
}

.rmx-compliance-arquivos li::before {
    content: "\f0c6";
    margin-right: 6px;
    color: var(--rmx-primaria);
    font-family: FontAwesome;
}

/* 26.3 — opcoes (radio, checkbox e a declaracao) -----------------------------
   O input real fica invisivel e continua focavel; quem desenha a bolinha/o
   quadrado e o `::before` do `<span>`. Selecionado = borda na cor da marca e o
   fundo `--rmx-acento`, o mesmo "repare nisto" do resto do site. */
.rmx-compliance-opcoes {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.rmx-compliance .rmx-compliance-opcao {
    position: relative;
    margin: 0;
    font-weight: 400;
    cursor: pointer;
}

.rmx-compliance-opcao input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.rmx-compliance-opcao span {
    position: relative;
    display: inline-block;
    padding: 10px 16px 10px 40px;
    border: 1px solid var(--rmx-borda);
    border-radius: var(--rmx-raio);
    background: var(--rmx-cartao);
    color: var(--rmx-texto);
    font-size: 14px;
    line-height: 1.4;
    transition: border-color 0.2s ease, background 0.2s ease;
}

.rmx-compliance-opcao span::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 14px;
    width: 16px;
    height: 16px;
    margin-top: -8px;
    border: 2px solid var(--rmx-borda);
    background: var(--rmx-cartao);
    transition: border-color 0.2s ease, background 0.2s ease;
}

.rmx-compliance-opcao input[type="radio"] + span::before {
    border-radius: 50%;
}

.rmx-compliance-opcao input[type="checkbox"] + span::before {
    border-radius: 4px;
}

.rmx-compliance-opcao:hover span {
    border-color: var(--rmx-primaria);
}

.rmx-compliance-opcao input:checked + span {
    border-color: var(--rmx-primaria);
    background: var(--rmx-acento);
}

.rmx-compliance-opcao input:checked + span::before {
    border-color: var(--rmx-primaria);
    background: var(--rmx-primaria);
    box-shadow: inset 0 0 0 3px var(--rmx-cartao);
}

.rmx-compliance-opcao input:focus-visible + span {
    outline: 2px solid var(--rmx-primaria);
    outline-offset: 2px;
}

/* A declaracao e uma frase longa: bloco inteiro, e o marcador alinhado com a
   PRIMEIRA linha e nao com o meio de um paragrafo de tres. */
.rmx-compliance .rmx-compliance-declaracao {
    display: block;
}

.rmx-compliance-declaracao span {
    display: block;
    padding-top: 14px;
    padding-bottom: 14px;
    background: var(--rmx-superficie);
}

.rmx-compliance-declaracao span::before {
    top: 16px;
    margin-top: 0;
}

/* 26.4 — erro por pergunta ---------------------------------------------------
   `--rmx-perigo` na frase e na borda: aqui o erro e de UM campo, ao lado dele,
   e precisa ser lido na hora — nao e a caixa de aviso da secao 25. */
.rmx-compliance-erro {
    display: none;
    margin-top: 6px;
    color: var(--rmx-perigo);
    font-size: 13px;
    font-weight: 500;
}

.rmx-compliance .compliance-com-erro .rmx-compliance-erro {
    display: block;
}

.rmx-compliance .compliance-com-erro .form-control,
.rmx-compliance .compliance-com-erro .rmx-compliance-opcao span {
    border-color: var(--rmx-perigo);
}

/* O aviso geral (falha de rede, erro sem pergunta). Nasce escondido e o JS o
   mostra com `.show()`. A secao 25 proibe `display` na `.alert` porque as
   caixas do alerts.php sao toast; aqui a regra e da CLASSE PROPRIA desta
   caixa, e e ela que esconde. */
.rmx-pg .rmx-compliance-aviso {
    display: none;
    margin-bottom: var(--rmx-vao-item);
}

/* 26.5 — envio ---------------------------------------------------------------- */
.rmx-compliance-envio {
    padding: var(--rmx-vao-item) 0 0;
    text-align: center;
}

.rmx-compliance-envio p {
    max-width: 640px;
    margin: 0 auto 20px;
    color: var(--rmx-apagado);
    font-size: 14px;
    line-height: 1.6;
}

.rmx-compliance-envio-acoes {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.rmx-compliance-botao {
    min-width: 240px;
    min-height: 48px;
    font-size: 15px;
}

@media (max-width: 575px) {
    .rmx-compliance-apoio,
    .rmx-compliance-secao {
        padding: 20px;
    }

    .rmx-compliance .rmx-compliance-opcao,
    .rmx-compliance-opcao span {
        display: block;
        width: 100%;
    }

    .rmx-compliance-envio-acoes {
        flex-wrap: wrap;
    }

    .rmx-compliance-botao {
        flex: 1 1 100%;
        min-width: 0;
    }

    .rmx-compliance-sucesso {
        padding: 28px 20px;
    }
}

/* 26.6 — sucesso (protocolo + codigo) ----------------------------------------
   Nasce escondida e o JS a mostra com `.show()` no lugar do formulario. */
.rmx-compliance-sucesso {
    display: none;
    max-width: 720px;
    margin: 0 auto;
    padding: 36px 32px;
    border-radius: var(--rmx-raio-xl);
    background: var(--rmx-cartao);
    box-shadow: var(--rmx-sombra-cartao);
    text-align: center;
}

.rmx-compliance-sucesso:focus {
    outline: none;
}

.rmx-compliance-sucesso-icone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    margin-bottom: 12px;
    border-radius: 50%;
    background: var(--rmx-ok-fundo);
    color: var(--rmx-ok);
    font-size: 24px;
}

.rmx-pg .rmx-compliance-sucesso-titulo {
    margin: 0 0 8px;
    font-size: 30px;
    font-weight: 800;
    text-transform: uppercase;
}

.rmx-compliance-credenciais {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--rmx-vao-campo);
    margin: 24px 0;
}

.rmx-compliance-credenciais div {
    padding: 16px 20px;
    border: 1px dashed var(--rmx-primaria);
    border-radius: var(--rmx-raio-lg);
    background: var(--rmx-acento);
}

.rmx-compliance-credenciais small {
    display: block;
    margin-bottom: 4px;
    color: var(--rmx-tinta-suave);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.rmx-compliance-codigo {
    display: block;
    font-family: Consolas, "Courier New", monospace;
    font-size: 24px;
    font-weight: 700;
    letter-spacing: 2px;
    word-break: break-all;
}

.rmx-pg .rmx-compliance-sucesso-aviso {
    margin-bottom: 24px;
}

.rmx-compliance-sucesso-acoes {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
}

/* 26.7 — consulta -------------------------------------------------------------
   Os cartoes sao os `.rmx-conta-cartao` da secao 19; aqui so o que e desta tela. */
.rmx-compliance-consulta-apoio {
    margin: -12px 0 24px;
    color: var(--rmx-apagado);
    font-size: 14px;
    line-height: 1.55;
    text-align: center;
}

.rmx-compliance-maiusculo {
    text-transform: uppercase;
}

.rmx-pg .rmx-compliance-resultado-titulo {
    margin: 0 0 16px;
    font-size: 22px;
    font-weight: 800;
    text-transform: uppercase;
}

.rmx-compliance-ficha {
    margin: 0;
}

.rmx-compliance-ficha dt {
    margin-top: 14px;
    color: var(--rmx-apagado);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.rmx-compliance-ficha dt:first-child {
    margin-top: 0;
}

.rmx-compliance-ficha dd {
    margin: 2px 0 0;
    font-size: 15px;
    line-height: 1.5;
    word-break: break-word;
}

.rmx-compliance-ficha .rmx-compliance-codigo {
    font-size: 18px;
}

.rmx-compliance-situacao {
    display: inline-block;
    padding: 4px 12px;
    border-radius: var(--rmx-pilula);
    background: var(--rmx-acento);
    color: var(--rmx-primaria);
    font-size: 13px;
    font-weight: 700;
}

.rmx-compliance-retorno {
    white-space: pre-line;
}


/* =============================================================================
   27. POPUP DE PUBLICIDADE E AVISO DE COOKIES (21/09/2026, "fase 7")
   =============================================================================

   As duas pecas que aparecem por cima de TODA pagina e eram as ultimas do site
   no desenho antigo: o modal do bootstrap com o "X" quadrado de 28px, e a faixa
   preta do LGPD com link verde.
   -------------------------------------------------------------------------- */

/* 27.1 — popup (integracao/publicidade/publicidade_popup.php) ----------------
   O posicionamento (centro da tela, 500px) continua sendo do style2023.css;
   aqui so a pintura. A arte ganha o raio dos cards e a sombra de janela do
   `.rmx-modal-caixa` (secao 15.3b) — e a mesma familia de peca: algo que abre
   por cima da pagina. */
/**
 * A JANELA ABRACA A ARTE. O style2023.css fixa a janela em 500px (550 a partir
 * do tablet) e encolhe a imagem pela altura com `max-height: 90vh` +
 * `object-fit: contain` — numa arte em pe, a imagem VISIVEL fica mais estreita
 * que a caixa e sobra uma faixa transparente dos lados. O raio e o X seguem a
 * CAIXA, entao os cantos saiam retos e o X flutuava fora da arte.
 *
 * Aqui a janela passa a ter a largura da imagem (`width: auto` num elemento
 * absoluto = encolhe ao conteudo) e a imagem deixa de ser `contain`: ela e que
 * se limita, por largura e por altura, mantendo a proporcao. Tudo o que e
 * desenhado em cima dela — raio, sombra, X — cai no lugar certo.
 */
.rmx-pg .modal-popup .modal-dialog {
    width: auto;
    max-width: calc(100vw - 2 * var(--rmx-respiro));
    border-radius: var(--rmx-raio-xl);
}

.rmx-pg .modal-popup .modal-dialog a {
    display: block;
}

.rmx-pg .modal-popup .modal-dialog img {
    width: auto;
    max-width: min(500px, calc(100vw - 2 * var(--rmx-respiro)));
    max-height: calc(100vh - 2 * var(--rmx-vao-item));
    object-fit: initial;
    border-radius: var(--rmx-raio-xl);
    box-shadow: 0 24px 60px -12px rgba(0, 0, 0, 0.45);
}

/* Fundo escurecido no tom de texto do site, e nao o preto puro do bootstrap. */
.rmx-pg .modal-backdrop {
    background: var(--rmx-tinta);
}

.rmx-pg .modal-backdrop.in {
    opacity: 0.6;
}

/**
 * O X REDONDO. Botao de 40px (o alvo de toque minimo do site — os redondos do
 * cabecalho tem 42), branco, com sombra, DENTRO do canto da arte.
 *
 * Os `!important` nao sao preguica: o style2023.css pinta este botao com
 * `background: #fff !important` e o hover com `background: #e31e24
 * !important`, e so outro `!important` passa por cima. O resto (posicao,
 * tamanho, raio) vence por especificidade, sem ele.
 */
.rmx-pg .close-modal-popup {
    top: 12px;
    right: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--rmx-cartao) !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
    color: var(--rmx-tinta);
    font-size: 18px;
    line-height: 1;
    opacity: 1;
    text-shadow: none;
    transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.rmx-pg .close-modal-popup:hover,
.rmx-pg .close-modal-popup:focus {
    background: var(--rmx-gradiente) !important;
    color: #fff;
    opacity: 1;
    transform: scale(1.06);
}

/* 27.2 — aviso de cookies (plugins/lgpd/lgpd.php) ----------------------------
   Um CARTAO no canto de baixo, e nao mais uma faixa preta de 80% da tela a 15%
   da borda: o aviso tem de ser visto, mas nao pode cobrir a leitura. A pintura
   e a do `.rmx-conta-cartao` — nenhum tratamento de caixa novo.

   NAO SE DECLARA `display: none`: o aviso so e impresso quando deve aparecer
   (o PHP decide pelo cookie), e quem o tira da tela e o `fadeOut()` do
   lgpd.js — que depende de o elemento estar visivel quando o clique chega. */
.rmx-pg .rmx-lgpd {
    position: fixed;
    left: var(--rmx-vao-item);
    bottom: var(--rmx-vao-item);
    z-index: 9999;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 12px 16px;
    width: calc(100% - 2 * var(--rmx-vao-item));
    max-width: 520px;
    padding: 24px;
    border: 1px solid var(--rmx-borda);
    border-radius: var(--rmx-raio-xl);
    background: var(--rmx-cartao);
    box-shadow: 0 24px 60px -12px rgba(0, 0, 0, 0.3);
    color: var(--rmx-texto);
    font-size: 14px;
    line-height: 1.5;
}

.rmx-lgpd-icone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--rmx-acento);
    color: var(--rmx-primaria);
    font-size: 18px;
}

.rmx-lgpd-texto p {
    margin: 0;
    color: var(--rmx-tinta-suave);
}

.rmx-lgpd-texto p + p {
    margin-top: 8px;
}

.rmx-pg .rmx-lgpd-texto .rmx-lgpd-titulo {
    margin-bottom: 4px;
    color: var(--rmx-tinta);
    font-family: var(--rmx-fonte-titulo);
    font-size: 19px;
    font-weight: 700;
    letter-spacing: var(--rmx-tracking-chamada);
    line-height: 1.2;
    text-transform: uppercase;
}

.rmx-lgpd-link,
.rmx-lgpd-link:focus {
    color: var(--rmx-primaria);
    font-weight: 600;
    text-decoration: underline;
}

.rmx-lgpd-link:hover {
    color: var(--rmx-magenta);
}

/* O botao atravessa as duas colunas e alinha pela direita — a acao fecha o
   cartao, como o "Enviar" fecha um formulario. */
.rmx-lgpd-acoes {
    grid-column: 1 / -1;
    display: flex;
    justify-content: flex-end;
    margin: 0;
}

.rmx-lgpd-acoes .rmx-btn {
    min-width: 180px;
}

@media (max-width: 575px) {
    .rmx-pg .rmx-lgpd {
        left: var(--rmx-respiro);
        bottom: var(--rmx-respiro);
        width: calc(100% - 2 * var(--rmx-respiro));
        padding: 20px;
    }

    .rmx-lgpd-acoes .rmx-btn {
        flex: 1 1 100%;
    }
}