/* ============================================================
   Vivência do Espiritismo Religioso — Aliança Espírita Evangélica
   Folha de estilo principal
   ============================================================ */

/* ---- Fontes ------------------------------------------------ */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Spectral:ital,wght@0,400;0,500;0,600;1,400&display=swap");

@font-face {
    font-family: "Tempting";
    src: url("../font/tempting/Tempting.ttf") format("truetype");
    font-display: swap;
}

/* ---- Tokens de design -------------------------------------- */
:root {
    --azul-profundo: #2E7A9B;
    --azul-logo:     #5FAEC6;
    --azul-claro:    #EAF4F9;
    --azul-bruma:    #F4FAFD;
    --azul-borda:    #D4E7F0;
    --branco:        #FFFFFF;
    --tinta:         #1F3A47;
    --tinta-suave:   #5A7682;
    --realce:        #FFE9A8;
    --realce-borda:  #F0CE72;
    --sombra-sutil:  0 1px 2px rgba(31, 58, 71, .06), 0 6px 18px rgba(31, 58, 71, .06);
    --sombra-flut:   0 6px 20px rgba(31, 58, 71, .18);
    --raio:          14px;
    --raio-peq:      10px;
    --altura-topo:   72px;
    --leitura-fs:    1.075rem; /* ajustável pelos botões A- / A+ */
    --transicao:     .25s cubic-bezier(.4, 0, .2, 1);
}

* { box-sizing: border-box; }

html, body {
    height: 100%;
    margin: 0;
    overflow-x: hidden; /* nada torna a página mais larga que a tela,
                           mantendo o topo fixo (lupa/microfone) visível */
}

body {
    font-family: "Inter", system-ui, sans-serif;
    color: var(--tinta);
    background: var(--azul-bruma);
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
}

/* ============================================================
   CABEÇALHO
   ============================================================ */
.topo {
    position: fixed;
    top: 0; left: 0; right: 0;
    height: var(--altura-topo);
    z-index: 1030;
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0 1.25rem;
    background: var(--branco);
    border-bottom: 1px solid var(--azul-borda);
    box-shadow: var(--sombra-sutil);
}

.topo-marca {
    display: flex;
    align-items: center;
    gap: .7rem;
    text-decoration: none;
    color: inherit;
    flex-shrink: 0;
}
.topo-marca img {
    width: 46px; height: 46px;
    border-radius: 50%;
    border: 1px solid var(--azul-borda);
}
.topo-marca .marca-texto { line-height: 1.1; }
.topo-marca .marca-nome {
    font-weight: 700;
    font-size: .98rem;
    color: var(--azul-profundo);
}
.topo-marca .marca-sub {
    font-size: .74rem;
    color: var(--tinta-suave);
    letter-spacing: .02em;
}

/* Botão hamburger (mobile) */
.btn-menu-mobile {
    display: none;
    border: 1px solid var(--azul-borda);
    background: var(--azul-claro);
    color: var(--azul-profundo);
    width: 42px; height: 42px;
    border-radius: var(--raio-peq);
    font-size: 1.2rem;
    cursor: pointer;
    flex-shrink: 0;
}

/* Busca */
.topo-busca {
    flex: 1;
    max-width: 640px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: .4rem;
    background: var(--azul-claro);
    border: 1px solid var(--azul-borda);
    border-radius: 999px;
    padding: .25rem .35rem .25rem 1rem;
    transition: border-color var(--transicao), box-shadow var(--transicao);
}
.topo-busca:focus-within {
    border-color: var(--azul-logo);
    box-shadow: 0 0 0 3px rgba(95, 174, 198, .2);
    background: var(--branco);
}
.topo-busca input {
    flex: 1;
    border: none;
    background: transparent;
    outline: none;
    font-size: .95rem;
    color: var(--tinta);
    min-width: 0;
}
.topo-busca input::placeholder { color: var(--tinta-suave); }

.btn-voz, .btn-buscar {
    border: none;
    cursor: pointer;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    transition: background var(--transicao), color var(--transicao), transform var(--transicao);
}
.btn-voz {
    width: 38px; height: 38px;
    border-radius: 50%;
    background: transparent;
    color: var(--azul-profundo);
    font-size: 1.1rem;
}
.btn-voz:hover { background: rgba(95, 174, 198, .18); }
.btn-voz.gravando {
    background: #e64545;
    color: #fff;
    animation: pulso 1.1s infinite;
}
@keyframes pulso {
    0%, 100% { box-shadow: 0 0 0 0 rgba(230, 69, 69, .45); }
    50%      { box-shadow: 0 0 0 8px rgba(230, 69, 69, 0); }
}
.btn-buscar {
    width: 40px; height: 40px;
    border-radius: 50%;
    background: var(--azul-profundo);
    color: #fff;
    font-size: 1.05rem;
}
.btn-buscar:hover { background: var(--azul-logo); transform: scale(1.05); }

/* Controles de fonte (A- / A+) */
.topo-fonte {
    display: flex;
    align-items: center;
    gap: .25rem;
    flex-shrink: 0;
}
.topo-fonte button {
    border: 1px solid var(--azul-borda);
    background: var(--branco);
    color: var(--azul-profundo);
    border-radius: 8px;
    cursor: pointer;
    font-weight: 600;
    line-height: 1;
    padding: .45rem .55rem;
    transition: background var(--transicao);
}
.topo-fonte button:hover { background: var(--azul-claro); }
.topo-fonte .fonte-a-menos { font-size: .8rem; }
.topo-fonte .fonte-a-mais  { font-size: 1.05rem; }

/* ============================================================
   LAYOUT PRINCIPAL
   ============================================================ */
.app {
    display: grid;
    grid-template-columns: 290px 1fr;
    gap: 1rem;
    padding: 1rem;
    margin-top: var(--altura-topo);
    height: calc(100vh - var(--altura-topo));
}

/* ---- Menu lateral ------------------------------------------ */
.sidebar {
    background: var(--branco);
    border: 1px solid var(--azul-borda);
    border-radius: var(--raio);
    box-shadow: var(--sombra-sutil);
    overflow-y: auto;
    overflow-x: hidden;
    padding: .5rem;
}
.sidebar-header {
    display: flex;
    align-items: center;
    gap: .55rem;
    padding: .85rem 1rem .65rem;
    color: var(--azul-profundo);
    border-bottom: 1px solid var(--azul-borda);
    margin-bottom: .4rem;
}
.sidebar-header .bi { font-size: 1.15rem; }
.sidebar-titulo {
    margin: 0;
    font-size: .82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .12em;
}
.menu-lista, .submenu {
    list-style: none;
    margin: 0;
    padding: 0;
}
.menu-link, .menu-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    width: 100%;
    text-align: left;
    text-decoration: none;
    color: var(--tinta);
    background: transparent;
    border: none;
    border-radius: var(--raio-peq);
    padding: .6rem .8rem;
    font-size: .92rem;
    font-weight: 500;
    cursor: pointer;
    transition: background var(--transicao), color var(--transicao);
}
.menu-link:hover, .menu-toggle:hover {
    background: var(--azul-claro);
    color: var(--azul-profundo);
}
.menu-link.active {
    background: var(--azul-profundo);
    color: #fff;
    box-shadow: var(--sombra-sutil);
}
.menu-toggle .caret { transition: transform var(--transicao); font-size: .8rem; opacity: .7; }
.menu-toggle[aria-expanded="true"] { color: var(--azul-profundo); font-weight: 600; }
.menu-toggle[aria-expanded="true"] .caret { transform: rotate(180deg); }

/* Submenu animado */
.submenu {
    overflow: hidden;
    max-height: 0;
    padding-left: .6rem;
    transition: max-height var(--transicao);
}
.submenu.aberto { max-height: 1500px; }
.submenu .menu-link { font-size: .87rem; padding: .5rem .75rem; }
.submenu .submenu { padding-left: .8rem; }
.has-submenu { border-left: 2px solid transparent; }
.has-submenu:has(.menu-toggle[aria-expanded="true"]) { border-left-color: var(--azul-borda); }

/* ============================================================
   PAINEL DE CONTEÚDO
   ============================================================ */
.painel {
    position: relative;
    background: var(--branco);
    border: 1px solid var(--azul-borda);
    border-radius: var(--raio);
    box-shadow: var(--sombra-sutil);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* Barra de progresso de leitura (assinatura) */
.progresso {
    height: 4px;
    background: var(--azul-claro);
    flex-shrink: 0;
}
.progresso-barra {
    height: 100%;
    width: 0;
    background: linear-gradient(90deg, var(--azul-logo), var(--azul-profundo));
    transition: width .1s linear;
}

.conteudo-scroll {
    overflow-y: auto;
    overflow-x: hidden;
    flex: 1;
    scroll-behavior: smooth;
}
.conteudo-interno {
    max-width: 820px;
    margin: 0 auto;
    padding: 2.5rem 2rem 4rem;
}

/* ---- HOME (hero) ------------------------------------------- */
.home {
    text-align: center;
    padding: 3rem 1rem 2rem;
}
.home-titulo {
    font-family: "Tempting", "Spectral", cursive;
    color: var(--azul-profundo);
    line-height: 1.05;
    margin: 0;
}
.home-titulo .linha1 { display: block; font-size: clamp(2.8rem, 7vw, 5rem); }
.home-titulo .linha2 { display: block; font-size: clamp(2rem, 5vw, 3.5rem); }
.home-trevo {
    width: 110px; height: auto;
    margin: 1.5rem auto .5rem;
    display: block;
    filter: drop-shadow(0 6px 12px rgba(31, 58, 71, .15));
}
.home-frase {
    color: var(--tinta-suave);
    font-family: "Spectral", serif;
    font-style: italic;
    font-size: 1.05rem;
    max-width: 460px;
    margin: 1rem auto 0;
}

/* ---- ARTIGO ------------------------------------------------ */
.artigo { display: none; }
.artigo.visivel { display: block; }

.artigo-caminho {
    font-size: .8rem;
    color: var(--tinta-suave);
    margin-bottom: .9rem;
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    align-items: center;
}
.artigo-caminho .sep { opacity: .5; }
.artigo-caminho .atual { color: var(--azul-profundo); font-weight: 600; }

.artigo-titulo {
    font-family: "Spectral", serif;
    color: var(--azul-profundo);
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    font-weight: 600;
    line-height: 1.2;
    margin: 0 0 .35rem;
}
.artigo-titulo::after {
    content: "";
    display: block;
    width: 56px; height: 3px;
    margin-top: .8rem;
    border-radius: 3px;
    background: var(--azul-logo);
}

/* Corpo do texto — escala de fonte controlável */
.artigo-corpo {
    font-family: "Spectral", serif;
    font-size: var(--leitura-fs);
    line-height: 1.85;
    color: #2b3f49;
    margin-top: 1.6rem;
}
.artigo-corpo p { margin: 0 0 1.15rem; }
.artigo-corpo h1, .artigo-corpo h2, .artigo-corpo h3 {
    font-family: "Spectral", serif;
    color: var(--azul-profundo);
    line-height: 1.3;
    margin: 2rem 0 .8rem;
}
.artigo-corpo strong { color: var(--tinta); }
.artigo-corpo a { color: var(--azul-profundo); }
.artigo-corpo img { max-width: 100%; height: auto; border-radius: var(--raio-peq); }

/* ---- Blindagem do conteúdo -----------------------------------
   Impede que HTML colado de outros sites (com position/float/larguras
   ou tabelas embutidas) escape da coluna de leitura e sobreponha o
   rodapé. Vale mesmo para conteúdos gravados antes da limpeza. */
.artigo-corpo { overflow-wrap: break-word; word-break: break-word; }
.artigo-corpo * { position: static !important; float: none !important; }
.artigo-corpo img { max-width: 100%; height: auto; }

/* Tabelas: rolam na horizontal dentro da própria caixa, sem quebrar
   a página. No celular ganham largura mínima para não espremer. */
.artigo-corpo .tabela-scroll {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 1.5rem 0;
    border: 1px solid var(--azul-borda);
    border-radius: var(--raio-peq);
}
.artigo-corpo table {
    border-collapse: collapse;
    width: 100%;
    font-size: .95em;
}
.artigo-corpo th, .artigo-corpo td {
    border: 1px solid var(--azul-borda);
    padding: .55rem .8rem;
    text-align: left;
    vertical-align: top;
}
.artigo-corpo thead th, .artigo-corpo th {
    background: var(--azul-claro);
    color: var(--tinta);
    font-weight: 600;
}
.artigo-corpo pre { white-space: pre-wrap; }

@media (max-width: 880px) {
    /* largura mínima legível → a caixa rola em vez de cortar colunas */
    .artigo-corpo table { min-width: 560px; }
}
.artigo-corpo blockquote {
    margin: 1.5rem 0;
    padding: .6rem 1.2rem;
    border-left: 4px solid var(--azul-logo);
    background: var(--azul-bruma);
    color: var(--tinta-suave);
    font-style: italic;
    border-radius: 0 var(--raio-peq) var(--raio-peq) 0;
}
/* trecho realçado vindo da busca */
.artigo-corpo mark, mark {
    background: var(--realce);
    color: inherit;
    border-radius: 3px;
    padding: 0 .12em;
    box-shadow: inset 0 -2px 0 var(--realce-borda);
}
/* destaque temporário ao chegar de uma busca */
.flash-destaque { animation: flash 1.8s ease-out; }
@keyframes flash {
    0%   { background: rgba(255, 233, 168, .9); }
    100% { background: transparent; }
}

/* Frase do leitor sendo lida (TTS) */
.tts-lendo { background: rgba(95, 174, 198, .18); border-radius: 4px; }

/* ---- Veja também ------------------------------------------- */
.veja-tambem { margin-top: 3rem; }
.veja-tambem.oculto { display: none; }
.veja-titulo {
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--tinta-suave);
    margin: 0 0 1rem;
    display: flex; align-items: center; gap: .5rem;
}
.veja-titulo::before { content: "\F4D5"; font-family: "bootstrap-icons"; color: var(--azul-logo); }
.veja-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: .8rem;
}
.veja-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    padding: .9rem 1.1rem;
    background: var(--azul-bruma);
    border: 1px solid var(--azul-borda);
    border-radius: var(--raio-peq);
    color: var(--tinta);
    text-decoration: none;
    font-weight: 500;
    font-size: .92rem;
    cursor: pointer;
    transition: all var(--transicao);
}
.veja-card:hover {
    background: var(--branco);
    border-color: var(--azul-logo);
    transform: translateY(-2px);
    box-shadow: var(--sombra-sutil);
    color: var(--azul-profundo);
}
.veja-card .bi { color: var(--azul-logo); }

/* ---- Rodapé de navegação ----------------------------------- */
.rodape-nav {
    display: none;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 3rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--azul-borda);
}
.rodape-nav.visivel { display: flex; }
.btn-nav {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    max-width: 48%;
    padding: .7rem 1.1rem;
    border: 1px solid var(--azul-borda);
    border-radius: var(--raio-peq);
    background: var(--branco);
    color: var(--azul-profundo);
    font-weight: 600;
    font-size: .9rem;
    text-decoration: none;
    cursor: pointer;
    transition: all var(--transicao);
}
.btn-nav:hover:not([disabled]) {
    background: var(--azul-profundo);
    color: #fff;
    border-color: var(--azul-profundo);
}
.btn-nav[disabled] { opacity: .4; cursor: default; pointer-events: none; }
.btn-nav .rotulo { display: flex; flex-direction: column; line-height: 1.1; }
.btn-nav .rotulo small { font-weight: 400; font-size: .7rem; opacity: .7; }
.btn-nav.proximo { text-align: right; }
.btn-nav.proximo .rotulo { align-items: flex-end; }

/* ============================================================
   FERRAMENTAS FLUTUANTES (ler em voz alta / topo)
   ============================================================ */
.ferramentas {
    position: absolute;
    right: 1.5rem;
    bottom: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: .6rem;
    z-index: 20;
}
.fab {
    width: 50px; height: 50px;
    border-radius: 50%;
    border: none;
    background: var(--azul-profundo);
    color: #fff;
    font-size: 1.2rem;
    cursor: pointer;
    display: grid;
    place-items: center;
    box-shadow: var(--sombra-flut);
    transition: transform var(--transicao), background var(--transicao), opacity var(--transicao);
}
.fab:hover { background: var(--azul-logo); transform: translateY(-2px); }
.fab.lendo { background: #e64545; }
.fab-topo { opacity: 0; pointer-events: none; }
.fab-topo.visivel { opacity: 1; pointer-events: auto; }

/* ============================================================
   RESULTADOS DA BUSCA
   ============================================================ */
.busca-resultados {
    margin-top: var(--altura-topo);
    min-height: calc(100vh - var(--altura-topo));
    padding: 2rem 1rem 4rem;
    overflow-x: hidden;             /* resultados nunca alargam a página */
}
.busca-interno { max-width: 820px; margin: 0 auto; }
.busca-cabecalho h2, .resultado-titulo,
.resultado-trecho, .resultado-caminho {
    overflow-wrap: break-word;
    word-break: break-word;         /* palavras/URLs longas quebram, sem vazar */
}
.resultado-item { max-width: 100%; }
.busca-cabecalho {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
}
.busca-cabecalho h2 {
    font-family: "Spectral", serif;
    color: var(--azul-profundo);
    margin: 0;
    font-size: 1.5rem;
}
.busca-cabecalho .total { color: var(--tinta-suave); font-size: .9rem; }
.btn-voltar {
    display: inline-flex; align-items: center; gap: .4rem;
    border: 1px solid var(--azul-borda);
    background: var(--branco);
    color: var(--azul-profundo);
    border-radius: var(--raio-peq);
    padding: .5rem .9rem;
    cursor: pointer;
    font-weight: 600;
    font-size: .85rem;
    text-decoration: none;
}
.btn-voltar:hover { background: var(--azul-claro); }

.resultado-item {
    background: var(--branco);
    border: 1px solid var(--azul-borda);
    border-radius: var(--raio);
    padding: 1.2rem 1.4rem;
    margin-bottom: 1rem;
    cursor: pointer;
    transition: all var(--transicao);
}
.resultado-item:hover {
    border-color: var(--azul-logo);
    box-shadow: var(--sombra-sutil);
    transform: translateY(-1px);
}
.resultado-caminho {
    font-size: .76rem;
    color: var(--tinta-suave);
    margin-bottom: .25rem;
}
.resultado-titulo {
    color: var(--azul-profundo);
    font-family: "Spectral", serif;
    font-size: 1.2rem;
    font-weight: 600;
    margin: 0 0 .5rem;
}
.resultado-trecho {
    font-family: "Spectral", serif;
    color: #3a4f59;
    font-size: .96rem;
    line-height: 1.7;
    margin: .25rem 0;
}
.busca-vazia {
    text-align: center;
    color: var(--tinta-suave);
    padding: 3rem 1rem;
    font-family: "Spectral", serif;
    font-size: 1.05rem;
}
.busca-vazia .bi { display: block; font-size: 2.5rem; color: var(--azul-borda); margin-bottom: .8rem; }

/* ============================================================
   RODAPÉ INSTITUCIONAL
   ============================================================ */
.rodape-site {
    text-align: center;
    padding: 1.1rem;
    font-size: .82rem;
    color: var(--tinta-suave);
    background: var(--branco);
    border-top: 1px solid var(--azul-borda);
}

/* Spinner */
.carregando {
    display: grid; place-items: center;
    padding: 4rem 1rem; color: var(--tinta-suave);
}
.spinner {
    width: 34px; height: 34px;
    border: 3px solid var(--azul-claro);
    border-top-color: var(--azul-profundo);
    border-radius: 50%;
    animation: girar .8s linear infinite;
    margin-bottom: .8rem;
}
@keyframes girar { to { transform: rotate(360deg); } }

/* Overlay do menu mobile */
.overlay-menu {
    display: none;
    position: fixed;
    inset: var(--altura-topo) 0 0 0;
    background: rgba(31, 58, 71, .4);
    z-index: 1019;
}
.overlay-menu.ativo { display: block; }

/* ============================================================
   RESPONSIVO
   ============================================================ */
@media (max-width: 880px) {
    .topo-marca .marca-texto { display: none; }
    .btn-menu-mobile { display: grid; place-items: center; }
    .topo-fonte { display: none; }

    .app {
        grid-template-columns: 1fr;
        padding: .75rem;
        gap: 0;
    }
    .sidebar {
        position: fixed;
        top: var(--altura-topo);
        left: 0;
        bottom: 0;
        width: 280px;
        border-radius: 0;
        transform: translateX(-100%);
        transition: transform var(--transicao);
        z-index: 1020;
    }
    .sidebar.aberto { transform: translateX(0); }
    .conteudo-interno { padding: 1.5rem 1.1rem 3rem; }
    /* No celular os botões flutuam fixos na tela (não presos ao painel),
       evitando ficarem cobertos pela barra do navegador. O safe-area
       afasta do "home bar" dos celulares mais novos. */
    .ferramentas {
        position: fixed;
        right: 1rem;
        bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
    }

    /* Topo mais compacto no celular para caber busca + lupa */
    .topo { gap: .5rem; padding: 0 .6rem; }
    .topo-busca {
        padding: .2rem .25rem .2rem .75rem;
        gap: .15rem;
        min-width: 0;            /* deixa a barra encolher de verdade */
    }
    /* input encolhe até o mínimo, garantindo espaço para os botões */
    .topo-busca input {
        width: 0;
        min-width: 0;
        flex: 1 1 0;
    }
    /* botões um pouco menores, mas sempre visíveis (não encolhem) */
    .btn-voz   { width: 34px; height: 34px; font-size: 1rem; }
    .btn-buscar { width: 36px; height: 36px; font-size: 1rem; }
    .btn-voz, .btn-buscar { flex-shrink: 0; }
}

/* Acessibilidade: respeita preferência por menos movimento */
@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* Foco visível para teclado */
a:focus-visible, button:focus-visible, input:focus-visible {
    outline: 3px solid var(--azul-logo);
    outline-offset: 2px;
}

/* ============================================================
   IMPRESSÃO — imprime apenas o conteúdo do artigo, em papel
   limpo (sem menu, busca, barra de progresso ou botões).
   Vale tanto para o botão imprimir quanto para Ctrl+P.
   ============================================================ */
@media print {
    /* Esconde toda a interface */
    .topo, .sidebar, .progresso, .ferramentas, .busca-resultados,
    .overlay-menu, .rodape-site, .rodape-nav, .veja-tambem,
    .btn-menu-mobile {
        display: none !important;
    }

    html, body {
        height: auto !important;
        background: #fff !important;
        color: #000 !important;
    }

    .app {
        display: block !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .painel {
        overflow: visible !important;
        height: auto !important;
        border: none !important;
        box-shadow: none !important;
        background: #fff !important;
    }

    .conteudo-scroll {
        overflow: visible !important;
        height: auto !important;
        position: static !important;
    }

    .conteudo-interno {
        padding: 0 !important;
        max-width: 100% !important;
    }

    /* Caminho (trilha) discreto acima do título */
    .artigo-caminho {
        color: #555 !important;
        font-size: .8rem !important;
        margin-bottom: .4rem !important;
    }
    .artigo-caminho .sep { color: #999 !important; }

    .artigo-titulo { color: #000 !important; }
    .artigo-titulo::after { background: #000 !important; }

    .artigo-corpo {
        color: #000 !important;
        font-size: 12pt !important;
        line-height: 1.5 !important;
    }
    .artigo-corpo img { max-width: 100% !important; }

    /* Realce de busca: sem fundo, para economizar tinta */
    mark {
        background: transparent !important;
        color: #000 !important;
        font-weight: 700 !important;
        text-decoration: underline;
    }

    /* Links em preto, sem sublinhado de tela */
    a { color: #000 !important; text-decoration: none !important; }

    /* Evita cortes ruins entre páginas */
    h1, h2, h3, blockquote { page-break-after: avoid; }
    p, blockquote, li, img { page-break-inside: avoid; }

    /* Mostra o nome do livro no topo da impressão */
    .conteudo-interno::before {
        content: "Vivência do Espiritismo Religioso — Aliança Espírita Evangélica";
        display: block;
        font-size: .75rem;
        color: #777;
        border-bottom: 1px solid #ccc;
        padding-bottom: .4rem;
        margin-bottom: 1rem;
    }
}