/* Devocional Yaflox · layout aprovado pelo Mamu em 18/10/2026 (estudo "Home simplificada").
   Claro: fundo gelo, letras e ícones pretos, botão Ouvir azul. Escuro: fundo azul, tudo branco. */
:root {
  --chao: #f5f2ea; --tinta: #141414; --texto: #141414; --apoio: #4D4D4D;
  --cheio: #1257E8; --sobre-cheio: #FFFFFF; --suave: rgba(20, 20, 20, .06); --marca: rgba(18, 87, 232, .12);
  --falta: #5C5C5C;
  --serifa: 'Newsreader', Georgia, serif; /* Newsreader (aprovada pelo Mamu em 19/10) no lugar da Young Serif */
  --sans: 'Figtree', 'DM Sans', system-ui, sans-serif;
  --leitura: 18px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    --chao: #0e1116; --tinta: #FFFFFF; --texto: #FFFFFF; --apoio: #D6E2FF;
    --cheio: #FFFFFF; --sobre-cheio: #0B1F3F; --suave: rgba(255, 255, 255, .12); --marca: rgba(255, 255, 255, .16); --falta: #8FA6D1;
    color-scheme: dark;
  }
}
:root[data-tema="escuro"] {
  --chao: #0e1116; --tinta: #FFFFFF; --texto: #FFFFFF; --apoio: #D6E2FF;
  --cheio: #FFFFFF; --sobre-cheio: #0B1F3F; --suave: rgba(255, 255, 255, .12); --marca: rgba(255, 255, 255, .16); --falta: #8FA6D1;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--chao); color: var(--texto); font-family: var(--sans); font-size: 16px; line-height: 1.5; }
::selection { background: var(--tinta); color: var(--chao); }
.defs { position: absolute; width: 0; height: 0; }
.tapa { fill: var(--chao); }
.cheio { fill: currentColor; }
.pular { position: absolute; left: 12px; top: -60px; padding: 10px 14px; background: var(--tinta); color: var(--chao); z-index: 9; }
.pular:focus { top: 12px; }
a, button { font: inherit; color: inherit; -webkit-tap-highlight-color: transparent; }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 2px solid var(--tinta); outline-offset: 3px; }
main:focus { outline: none; }
h1, h2, h3, p, blockquote, figure { margin: 0; }
.carregando { padding: 40px 20px; color: var(--apoio); }

/* Ícones e emblemas */
.icone { width: 21px; height: 21px; flex: none; fill: none; stroke: currentColor; stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round; }
.emblema { width: 84px; height: 84px; flex: none; fill: none; stroke: currentColor; stroke-width: 2.8; stroke-linecap: round; stroke-linejoin: round; color: var(--tinta); }
.emblema.pequeno { width: 64px; height: 64px; stroke-width: 3.2; }

/* Botões */
.botao { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding: 0 14px; border: 2px solid var(--tinta); border-radius: 2px; background: transparent; color: var(--tinta); font-weight: 600; font-size: 16px; text-decoration: none; cursor: pointer; transition: background-color .18s ease, transform .12s ease; }
.botao:hover { background: var(--suave); }
.botao:active { transform: translateY(1px); }
.botao:disabled { cursor: default; color: var(--apoio); border-color: var(--apoio); transform: none; } /* sem opacity: o texto fica com contraste de 4,5:1 */
.botao:disabled:hover { background: transparent; }
.botao.cheio { background: var(--cheio); border-color: var(--cheio); color: var(--sobre-cheio); }
.botao.cheio:hover { box-shadow: 0 6px 16px -8px rgba(8, 40, 120, .45); }
.botao.cheio:disabled { background: transparent; border-color: var(--apoio); color: var(--apoio); box-shadow: none; }
.botao[aria-pressed="true"]:not(.cheio) { background: var(--tinta); color: var(--chao); }
.redondo { width: 44px; min-height: 44px; padding: 0; }
.redondo.letra { font-size: 15px; }
.redondo.letra.maior { font-size: 19px; }
.par { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.par > :only-child { grid-column: 1 / -1; } /* dia sem áudio: o Ler ocupa a largura toda */
.voltar { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 600; font-size: 16px; text-decoration: none; color: var(--tinta); }
.ler { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 600; font-size: 16px; color: var(--tinta); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 2px; }

/* Estrutura das páginas */
.pagina { max-width: 1180px; margin: 0 auto; padding: 14px 20px 32px; display: flex; flex-direction: column; gap: 22px; min-height: 100dvh; }
.topo { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; } /* celular estreito: os botões descem para a linha de baixo */
.topo .acoes { display: flex; gap: 8px; }
.marca-site { display: flex; flex-direction: column; gap: 3px; }
.marca-site a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; color: var(--tinta); font-family: var(--serifa); font-size: 21px; line-height: 1.1; }
.data { font-size: 15px; font-weight: 600; color: var(--apoio); }
.rodape-texto { margin-top: auto; overflow-wrap: anywhere; font-size: calc(var(--leitura) - 4px); line-height: 1.5; color: var(--apoio); }

/* Início: no celular cabe numa tela só */
.inicio { justify-content: space-between; gap: 16px; padding-bottom: 18px; }
.blocos { display: contents; }
.bloco { display: flex; flex-direction: column; gap: 14px; }
.cabeca { display: flex; align-items: center; gap: 14px; }
.cabeca-texto { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
.cabeca h2, .titulo-bloco { font-family: var(--serifa); font-weight: 400; font-size: 24px; line-height: 1.15; color: var(--tinta); white-space: nowrap; }
.cabeca p, .sub { font-size: 15px; font-weight: 600; color: var(--apoio); }
.entrada { display: flex; align-items: center; gap: 14px; text-decoration: none; color: var(--tinta); }
.contatos { display: flex; flex-direction: column; gap: 0; font-size: 14px; line-height: 1.2; color: var(--apoio); }
.contatos .linha { margin: calc(-10px + 1.2em) 0 -10px; } /* meio espaço de linha a mais entre Deus te abençoe e os contatos */ /* as áreas de toque de 44 px continuam, sem espaço visível extra */
.contatos .ler { font-size: 12px; font-weight: 300; }
.contatos .linha { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.contato { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; text-decoration: none; font-weight: 600; color: var(--tinta); }
.contato .icone { width: 22px; height: 22px; stroke-width: 2; }
.contato:hover { text-decoration: underline; text-underline-offset: 4px; }
.contato > span { font-weight: 300; } /* e-mail e @ em Figtree Light */
.so-leitor { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* Controles do áudio (19/10): voltar 10 s, barra de arrastar e relógio na mesma linha; velocidade embaixo */
.so-ouvindo { display: flex; flex-direction: column; gap: 2px; }
.so-ouvindo[hidden] { display: none; } /* o display:flex acima venceria o hidden */
.controles { display: flex; align-items: center; gap: 12px; }
.controles .redondo { border-color: transparent; flex: none; }
.controles .redondo:hover { background: var(--suave); }
.controles .redondo .icone { width: 26px; height: 26px; }
.relogio { flex: none; font-size: calc(var(--leitura) - 4px); font-weight: 600; color: var(--apoio); font-variant-numeric: tabular-nums; }
.tempo { flex: 1; min-width: 0; height: 44px; margin: 0; background: transparent; accent-color: var(--cheio); cursor: pointer; }
.tempo:focus-visible { outline: 2px solid var(--tinta); outline-offset: 2px; }

/* Velocidade do áudio (início): botão discreto, do tamanho do texto, abaixo de Ouvir e Ler */
/* Velocidades à vista: sem contorno, a escolhida fica cheia */
.velocidades { display: flex; align-items: center; gap: 4px; color: var(--apoio); }
.velocidades .icone { width: 19px; height: 19px; margin-right: 6px; }
.vel { min-width: 52px; min-height: 44px; padding: 0 8px; border: 0; border-radius: 2px; background: transparent; color: var(--tinta); font-weight: 600; font-size: 15px; font-variant-numeric: tabular-nums; cursor: pointer; }
.vel:hover { background: var(--suave); }
.vel[aria-pressed="true"] { background: var(--suave); font-weight: 800; text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 2px; }
/* Tocador fixo embaixo da tela */
.mini { position: fixed; left: 0; right: 0; bottom: 0; z-index: 9; padding: 8px max(16px, env(safe-area-inset-left)) calc(8px + env(safe-area-inset-bottom)); background: var(--chao); border-top: 1px solid var(--falta); }
.mini-miolo { display: flex; align-items: center; gap: 8px; max-width: 760px; margin: 0 auto; }
.mini[hidden] { display: none; }
.mini .redondo { border-color: transparent; flex: none; }
.mini .redondo .icone { width: 24px; height: 24px; }
.mini-titulo { flex: 1; min-width: 0; min-height: 44px; line-height: 44px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--serifa); font-size: 17px; color: var(--tinta); text-decoration: none; }
body.com-mini { padding-bottom: 72px; }
body.com-mini .aviso { bottom: 84px; }

/* Letra acompanhando o áudio (início): a frase dita no centro, as palavras acendem na cor do botão Ouvir */
div.letra { position: relative; height: 5.2em; /* 3 linhas da frase em destaque (pedido do Mamu, 21/10) */ overflow: hidden; font-family: var(--serifa); font-size: calc(var(--leitura) + 1px); line-height: 1.38; color: var(--falta);
  -webkit-mask-image: linear-gradient(transparent, #000 24%, #000 76%, transparent); mask-image: linear-gradient(transparent, #000 24%, #000 76%, transparent); }
div.letra .trilho { display: flex; flex-direction: column; gap: .7em; transition: transform .6s cubic-bezier(.22, .8, .3, 1); }
div.letra p { font-size: .8em; text-wrap: pretty; }
div.letra p.agora { font-size: 1.32em; line-height: 1.25; color: var(--tinta); }
div.letra p.agora span { color: var(--falta); transition: color .25s ease; }
div.letra p.agora span.acesa { color: var(--cheio); }

/* Títulos em Newsreader: peso 500 e letras um pouco mais juntas; textos longos ficam no 400 */
:is(.marca-site a, .hoje h2, .passagem-convite h2, .leitura h1, .passagem h1, .cartao-passagem h2, .biblia h1, .cabeca h2, .titulo-bloco, .secao .pergunta, .levar blockquote) { font-weight: 500; letter-spacing: -.015em; }
div.letra p.agora { font-weight: 500; }

/* Início como convite do dia (aprovada 19/10, versão limpa): só o título de hoje tem peso; o resto respira.
   Sem emblemas na Início (ficam nas páginas internas); separação por espaço, não por linhas. */
.convite { justify-content: flex-start; gap: 36px; }
.marca-site h1 { margin: 0; font: inherit; }
.topo .redondo, .topo .redondo:disabled { border-color: transparent; } /* ícones e A−/A+ sem quadrado em todas as páginas (pedido do Mamu, 19/10) */
.topo .redondo:hover:not(:disabled) { background: var(--suave); }
.convite-grade { display: flex; flex-direction: column; gap: 56px; }
.principal { display: flex; flex-direction: column; gap: 22px; }
.hoje { display: flex; flex-direction: column; gap: 6px; }
.hoje h2 { font-family: var(--serifa); font-weight: 400; font-size: calc(var(--leitura) * 2 - 1pt); line-height: 1.04; letter-spacing: -.01em; color: var(--tinta); text-wrap: wrap; }
.hoje h2 a { color: inherit; text-decoration: none; }
.hoje h2 a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }
.gancho { font-size: calc(var(--leitura) - 6px); font-style: normal; font-weight: 300; line-height: 1.35; color: var(--apoio); max-width: none; text-wrap: wrap; } /* o texto ocupa a largura toda (pedido do Mamu, 22/10) */
.meta { font-size: calc(var(--leitura) - 6px); font-style: italic; font-weight: 600; line-height: 1.3; color: var(--apoio); font-variant-numeric: tabular-nums; }
.hoje .par { margin-top: 6px; }
.anteriores h2 { font-size: calc(var(--leitura) - 4px); font-weight: 600; color: var(--apoio); }
.anteriores ul { list-style: none; margin: 0 0 -20px; padding: 0; } /* a área de toque de 44 px não ocupa espaço visível */
.anteriores a { display: flex; align-items: baseline; gap: 14px; min-height: 44px; padding: 4px 0; line-height: 1.25; text-decoration: none; color: var(--tinta); }
.anteriores a:hover .qual { text-decoration: underline; text-underline-offset: 4px; }
.quando { flex: none; width: 3.4em; font-size: calc(var(--leitura) - 4px); font-weight: 600; color: var(--apoio); font-variant-numeric: tabular-nums; }
.qual { font-size: calc(var(--leitura) - 4px); font-weight: 600; line-height: 1.3; }
.anteriores .qual { font-weight: 300; } /* o devocional de ontem em Figtree Light */
.passagem-convite { display: flex; flex-direction: column; gap: 8px; }
.passagem-convite h2 { font-family: var(--serifa); font-weight: 400; font-size: calc(var(--leitura) * 2 - 1pt); line-height: 1.1; color: var(--tinta); }
.passagem-convite p { font-size: calc(var(--leitura) - 3px); color: var(--apoio); }
.passagem-convite .botao { margin-top: 10px; }
.passagem-convite .ler { margin-top: -10px; } /* Ler a Bíblia mais perto do botão; a área de toque continua de 44 px */
/* Ouvir, Ler e Abra uma passagem com a mesma altura (pedido do Mamu, 21/10) */
.hoje .par .botao, .passagem-convite .botao { height: 52px; }
.tem-audio { display: inline-flex; margin-left: auto; color: var(--apoio); }
.legenda { display: flex; align-items: center; gap: 8px; margin-top: 6px; font-size: calc(var(--leitura) - 4px); color: var(--apoio); }
.legenda .icone { width: 16px; height: 16px; flex: none; }
.ler.fim { align-self: center; }
.tem-audio .icone { width: 16px; height: 16px; }
.anteriores .todos { margin-top: 0; font-size: 16px; align-items: center; } /* a seta na mesma altura do Ler a Bíblia (pedido do Mamu, 23/10) */
.ler.sem-linha { text-decoration: none; }
.ler .icone { transform: translateY(.1em); } /* a seta fica na altura do texto do link (pedido do Mamu, 23/10) */
/* Todos os devocionais */
.todos-dias h1 { font-family: var(--serifa); font-weight: 500; font-size: 40px; line-height: 1.05; letter-spacing: -.015em; color: var(--tinta); }
.meses { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.meses .mes { min-height: 44px; padding: 0; border: 0; background: none; color: var(--tinta); font-size: 15px; font-weight: 600; text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
.mes-bloco { scroll-margin-top: 16px; }
.mes-bloco h2 { font-size: 15px; }

/* Leitura do devocional: a parte que está sendo lida fica marcada (19/10) */
.leitura [data-p] { border-radius: 2px; transition: background-color .4s ease, box-shadow .4s ease; }
.leitura .lendo { background: var(--marca); box-shadow: 0 0 0 10px var(--marca); }
.leitura.ouvindo [data-p]:not(.lendo), .leitura.ouvindo [data-p]:not(.lendo) * { color: var(--apoio); } /* o que não está sendo lido fica em segundo plano */

/* Leitura do devocional */
.leitura { max-width: 720px; }
.leitura > h1 { margin-top: -14px; } /* meio espaço de linha entre o cabeçalho e o título (pedido do Mamu, 21/10) */ /* sobe o título para perto da linha de data (pedido do Mamu, 21/10) */
.leitura > h1 { font-family: var(--serifa); font-weight: 400; font-size: calc(var(--leitura) * 2 - 1pt); line-height: 1.06; letter-spacing: -.01em; color: var(--tinta); text-wrap: wrap; /* sem equilibrar as linhas: o título ocupa a largura toda */ }
.abertura { width: 100%; font-size: calc(var(--leitura) - 6px); line-height: 1.35; color: var(--apoio); overflow: hidden; max-height: calc(3 * 1.35em); } /* mesmo tamanho da data; no máximo 3 linhas (pedido do Mamu, 21/10) */
.escritura { display: flex; flex-direction: column; gap: 12px; padding: 20px 0; border-top: 2px solid var(--tinta); border-bottom: 2px solid var(--tinta); }
.escritura .ref { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 4px 12px; font-size: calc(var(--leitura) - 3px); font-weight: 700; color: var(--tinta); }
.escritura .ref span + span { font-weight: 600; color: var(--apoio); }
.escritura blockquote { font-family: var(--serifa); font-size: calc(var(--leitura) + 3px); line-height: 1.45; color: var(--tinta); text-wrap: pretty; }
.prosa { display: flex; flex-direction: column; gap: 18px; font-size: var(--leitura); line-height: 1.65; max-width: 68ch; }
.secao { display: flex; flex-direction: column; gap: 10px; }
.secao h2 { font-size: var(--leitura); font-weight: 700; color: var(--tinta); }
.secao p { font-size: var(--leitura); line-height: 1.65; }
.secao .pergunta { font-family: var(--serifa); font-size: calc(var(--leitura) + 6px); line-height: 1.3; color: var(--tinta); }
.levar { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 24px 8px; text-align: center; color: var(--tinta); }
.levar svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; }
.levar figcaption { font-size: calc(var(--leitura) - 3px); font-weight: 700; color: var(--apoio); }
.levar blockquote { font-family: var(--serifa); font-size: calc(var(--leitura) + 9px); line-height: 1.25; text-wrap: balance; }

/* Passagem */
.passagem h1 { font-family: var(--serifa); font-weight: 400; font-size: calc(var(--leitura) * 2 - 1pt); line-height: 1.12; color: var(--tinta); }
/* Abra uma passagem: o versículo fica no meio da altura da tela, e se reorganiza quando a janela muda (pedido do Mamu, 23/10) */
.passagem .cartao-passagem { margin-top: auto; }
.passagem > .coluna { margin-bottom: auto; }
.passagem .intro { font-size: calc(var(--leitura) - 1px); line-height: 1.5; color: var(--apoio); }
.cartao-passagem { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px; padding: 20px 0; border-top: 2px solid var(--tinta); border-bottom: 2px solid var(--tinta); }
.cartao-passagem h2 { font-family: var(--serifa); font-weight: 400; font-size: calc(var(--leitura) * 2 - 1pt); line-height: 1.1; color: var(--tinta); }
.cartao-passagem blockquote { font-family: var(--serifa); font-size: calc(var(--leitura) + 9px); line-height: 1.45; max-width: 26em; color: var(--tinta); text-wrap: pretty; }
.cartao-passagem .contexto { font-size: 16px; line-height: 1.55; color: var(--apoio); }
.cartao-passagem h3 { margin-top: 6px; font-size: 18px; font-weight: 700; color: var(--tinta); }
.cartao-passagem .reflexao { font-size: 17px; line-height: 1.55; }
.coluna { display: flex; flex-direction: column; gap: 10px; }

/* Bíblia */
.biblia h1 { font-family: var(--serifa); font-weight: 400; font-size: 40px; line-height: 1.05; color: var(--tinta); }
.origem { padding: 12px 14px; background: var(--marca); font-size: 15px; line-height: 1.5; font-weight: 600; color: var(--tinta); }
.acoes-passagem { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px 24px; }
.acoes-passagem button.ler { padding: 0; border: 0; background: none; cursor: pointer; }
.marca-site .ler.indice { font-family: var(--sans); font-size: 15px; font-weight: 600; letter-spacing: 0; align-self: flex-start; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 2px; }
.testamento { display: flex; flex-direction: column; gap: 8px; }
.testamento h2 { font-size: 15px; font-weight: 700; color: var(--apoio); }
.livros { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 0 16px; }
.livros a { display: flex; align-items: center; min-height: 44px; font-family: var(--serifa); font-size: 19px; color: var(--tinta); text-decoration: none; }
.livros a:hover { text-decoration: underline; text-underline-offset: 4px; }
.intro-capitulos { color: var(--apoio); }
.capitulos li a { scroll-margin-top: 16px; }
.capitulos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(52px, 1fr)); gap: 8px; }
.capitulos a { display: flex; align-items: center; justify-content: center; min-height: 52px; border: 1.5px solid var(--falta); border-radius: 2px; color: var(--tinta); text-decoration: none; font-weight: 600; font-variant-numeric: tabular-nums; }
.capitulos a:hover { background: var(--suave); border-color: var(--tinta); }
.versos { display: flex; flex-direction: column; gap: 4px; margin: 0 -10px; font-family: var(--serifa); font-size: calc(var(--leitura) + 1px); line-height: 1.6; }
.verso { margin: 0; padding: 6px 10px; border-radius: 2px; }
.verso.destaque { background: var(--marca); }
.num { font-family: var(--sans); font-size: max(12px, .62em); font-weight: 700; vertical-align: .45em; margin-right: 6px; color: var(--apoio); }
.destaque .num { color: var(--tinta); }

.aviso-erro { font-family: var(--serifa); font-weight: 500; font-size: 32px; line-height: 1.1; color: var(--tinta); }
.aviso { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); max-width: calc(100% - 32px); padding: 12px 16px; background: var(--tinta); color: var(--chao); font-weight: 600; font-size: 15px; z-index: 10; }

/* Computador */
@media (max-width: 359px) { .cabeca h2, .titulo-bloco { font-size: 20px; white-space: normal; } } /* celular de 320 px: o título cabe sem passar da tela */
@media (min-width: 900px) {
  .pagina { padding: 32px clamp(20px, 6vw, 88px) 32px; gap: 32px; }
  .marca-site a { font-size: 26px; }
  .inicio { justify-content: flex-start; gap: 56px; }
  .blocos { display: flex; flex-direction: row; gap: 96px; align-items: flex-start; }
  .blocos .bloco { flex: 1 1 0; gap: 24px; }
  .emblema { width: 116px; height: 116px; stroke-width: 2.4; }
  .emblema.pequeno { width: 72px; height: 72px; }
  .cabeca h2, .titulo-bloco { font-size: 32px; }
  .inicio .rodape { margin-top: auto; }
  .contatos { flex-direction: row; align-items: center; justify-content: space-between; gap: 32px; font-size: 15px; }
  .contatos .linha { gap: 32px; }
  .leitura, .passagem, .biblia { max-width: 1180px; }
  .leitura > h1 { margin-top: 24px; } .leitura > .abertura { margin-top: -26px; } /* título e subtítulo nas mesmas alturas da Início (pedido do Mamu, 23/10) */ .prosa { max-width: none; } /* mesma largura do conteúdo da Início (1026 px no computador, pedido do Mamu, 23/10) */ /* computador: as páginas internas têm a mesma largura da Início (pedido do Mamu, 23/10) */
  .convite { gap: 56px; }
  .convite-grade { display: flex; flex-direction: column; gap: 56px; } /* computador: a coluna vai até a margem da página (pedido do Mamu, 23/10) */ /* computador: Palavra para agora embaixo do devocional, numa coluna (pedido do Mamu, 23/10) */
  .hoje h2 { font-size: max(clamp(48px, 5vw, 76px), calc(var(--leitura) * 2.6)); }
  .gancho { font-size: calc(var(--leitura) - 1px); }
  .abertura { font-size: calc(var(--leitura) - 1px); }
  .hoje .par { max-width: none; } /* computador: Ouvir e Ler na mesma largura do Abra uma passagem (pedido do Mamu, 23/10) */
  .passagem-convite { padding-top: 10px; }
  div.letra { font-size: calc(var(--leitura) + 4px); height: 5.2em; }
  .leitura > h1 { font-size: calc(var(--leitura) * 2.55 - 1pt); }
  .passagem-convite h2 { font-size: calc(var(--leitura) * 2.55 - 1pt); }

  .hoje h2 { font-size: calc(var(--leitura) * 2.55 - 1pt); }
  .cartao-passagem h2 { font-size: calc(var(--leitura) * 2.55 - 1pt); }
}
@media (prefers-reduced-motion: reduce) {
  .botao, div.letra .trilho, div.letra span, .anteriores a, .leitura [data-p] { transition: none; }
}
@media print {
  .topo .acoes, .botao, .aviso, audio, div.letra, .mini, .so-ouvindo { display: none !important; }
  body { background: #fff; color: #000; }
  /* Impressão sempre clara, mesmo com o tema escuro escolhido */
  html:root:not([data-impressao]) { --chao: #fff; --tinta: #000; --texto: #000; --apoio: #333; --falta: #333; --marca: transparent; --suave: transparent; }
}


/* Créditos da música de fundo: lista de faixas, sem cor escrita direto (tokens do kit) */
.faixas { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0 16px; }
.faixas a { display: flex; align-items: center; min-height: 44px; font-family: var(--serifa); font-size: calc(var(--leitura) - 2px); color: var(--tinta); }
.faixas a:hover { text-decoration: underline; text-underline-offset: 4px; }

/* Cabeçalho da Início: nome e data mais juntos; a área de toque de 44 px continua, só não ocupa espaço visível */
.topo .marca-site h1 a { margin-bottom: -12px; } /* nome e data com o mesmo espaço na Início e nas internas (pedido do Mamu, 23/10) */

/* Encerramento de bênção, depois da oração (pedido do Mamu, 22/10) */
.encerramento { font-family: var(--serifa); font-size: var(--leitura); line-height: 1.55; color: var(--tinta); text-wrap: pretty; }

/* Páginas internas: A− e A+ logo abaixo do cabeçalho, para o topo ficar igual ao da Início (pedido do Mamu, 23/10) */
.ajuste-texto { display: flex; justify-content: flex-end; gap: 4px; margin-top: -8px; }

/* Nome do site no topo igual em todas as páginas, como na Início (a regra do título da página não pega mais) (pedido do Mamu, 23/10) */
.topo .marca-site h1 { font: inherit; }

/* Botão Instalar app no topo (pedido do Mamu, 23/10) */
.instalar-app { min-height: 44px; padding: 0 14px; font-size: 15px; }

/* Guia para instalar no iPhone (pedido do Mamu, 23/10) */
.guia-iphone { position: fixed; inset: 0; z-index: 20; background: var(--chao); overflow-y: auto; display: flex; align-items: center; padding: 24px 20px calc(24px + env(safe-area-inset-bottom)); }
.guia-caixa { max-width: 560px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; color: var(--tinta); }
.guia-caixa ol { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 6px; }

/* Celular: o nome do site numa linha só, no topo (pedido do Mamu, 23/10) */
@media (max-width: 899px) { .topo .marca-site h1 a { font-size: 18px; white-space: nowrap; } .topo { flex-wrap: nowrap; } .topo .marca-site { min-width: 0; } .topo .acoes { gap: 4px; flex: none; } .topo .acoes .redondo { width: 40px; height: 40px; min-height: 40px; } }

/* ═══ Home e Anteriores no layout novo (pacote design-devocional, pedido do Mamu, 23/10) ═══
   Tokens próprios em .home-nova e .dias-nova: as variáveis do site não mudam.
   Escuro: cores do desenho (#0e1116, ouro #d4a356). Claro: cores atuais do site (#F0F0EC, azul #1257E8),
   porque o tema claro do desenho ainda não foi aprovado. Sem sombras, texto de apoio nunca abaixo de 12px. */
.home-nova, .dias-nova, .ouvir-nova, .mini, .aviso {
  --hn-fundo: #0e1116; --hn-superficie: #1a2028; --hn-linha: #242b34; --hn-tinta: #f5f2ea; --hn-media: #b9c0c9; --hn-fraca: #98a0ac;
  --hn-ouro: #d4a356; --hn-ouro-claro: #efcd8e; --hn-cheio: #f5f2ea; --hn-sobre-cheio: #0e1116;
}
:root[data-tema="claro"] .home-nova, :root[data-tema="claro"] .dias-nova, :root[data-tema="claro"] .ouvir-nova, :root[data-tema="claro"] .mini, :root[data-tema="claro"] .aviso {
  --hn-fundo: #f5f2ea; --hn-superficie: #ebe6d9; --hn-linha: #d8d1c0; --hn-tinta: #0e1116; --hn-media: #3a424d; --hn-fraca: #5b6470;
  --hn-ouro: #8a6420; --hn-ouro-claro: #6b4c14; --hn-cheio: #0e1116; --hn-sobre-cheio: #f5f2ea;
}
@media (prefers-color-scheme: light) {
  :root:not([data-tema="escuro"]) .home-nova, :root:not([data-tema="escuro"]) .dias-nova, :root:not([data-tema="escuro"]) .ouvir-nova, :root:not([data-tema="escuro"]) .mini, :root:not([data-tema="escuro"]) .aviso {
    --hn-fundo: #f5f2ea; --hn-superficie: #ebe6d9; --hn-linha: #d8d1c0; --hn-tinta: #0e1116; --hn-media: #3a424d; --hn-fraca: #5b6470;
    --hn-ouro: #8a6420; --hn-ouro-claro: #6b4c14; --hn-cheio: #0e1116; --hn-sobre-cheio: #f5f2ea;
  }
}
.home-nova {
  box-sizing: border-box; min-height: 100dvh; display: flex; flex-direction: column; justify-content: space-between; gap: 24px;
  padding: 20px 24px 16px; background: var(--hn-fundo); color: var(--hn-tinta); font-family: Manrope, system-ui, sans-serif;
}
.dias-nova { box-sizing: border-box; min-height: 100dvh; padding: 20px 24px 16px; background: var(--hn-fundo); color: var(--hn-tinta); font-family: Manrope, system-ui, sans-serif; }
.home-nova a:focus-visible, .dias-nova a:focus-visible, .home-nova button:focus-visible, .dias-nova button:focus-visible { outline: 2px solid var(--hn-ouro); outline-offset: 2px; }

/* topo */
.hn-topo { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; width: 100%; }
.hn-marca h1 { margin: 0; font-family: 'Cormorant Garamond', Georgia, serif; font-size: 24px; line-height: 28px; font-weight: 600; }
.hn-marca a { color: var(--hn-tinta); text-decoration: none; }
.hn-data { display: block; margin-top: 6px; font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 12px; line-height: 16px; letter-spacing: .1em; text-transform: uppercase; color: var(--hn-fraca); }
.hn-acoes { display: flex; gap: 8px; }
.hn-topo .botao.redondo { width: 44px; height: 44px; min-height: 44px; padding: 0; border: 1px solid var(--hn-linha); border-radius: 8px; background: transparent; color: var(--hn-tinta); }
.hn-topo .botao.redondo:hover { border-color: var(--hn-ouro); background: transparent; }

/* hoje */
.hn-principal { display: flex; flex-direction: column; gap: 24px; width: 100%; max-width: 560px; margin: 0 auto; }
.hn-etiqueta { display: flex; align-items: center; gap: 12px; margin: 0 0 12px; }
.hn-etiqueta::before { content: ""; display: block; width: 32px; height: 1px; background: var(--hn-ouro); }
.hn-etiqueta span { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 13px; line-height: 16px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--hn-ouro); }
.hn-hoje h2 { margin: 0; font-family: 'Cormorant Garamond', Georgia, serif; font-size: 42px; line-height: 44px; font-weight: 600; }
.hn-hoje h2 a { color: var(--hn-tinta); text-decoration: none; }
.hn-hoje h2 a:hover { color: var(--hn-ouro-claro); }
.hn-gancho { margin: 14px 0 0; font-size: 16px; line-height: 26px; color: var(--hn-media); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.hn-par { margin-top: 24px; }
.home-nova .hn-par .botao.cheio { width: 100%; height: 56px; gap: 10px; background: var(--hn-cheio); color: var(--hn-sobre-cheio); border: 0; border-radius: 8px; font-size: 16px; font-weight: 700; }
.home-nova .hn-par .botao.cheio:hover { opacity: .9; background: var(--hn-cheio); }
.home-nova .hn-par .botao.cheio:disabled { background: transparent; color: var(--hn-fraca); border: 1px solid var(--hn-linha); }
.hn-links { display: flex; justify-content: space-between; align-items: center; margin-top: 4px; }
.hn-link { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-size: 14px; font-weight: 600; color: var(--hn-media); text-decoration: none; }
.hn-link.ouro { color: var(--hn-ouro); }
.hn-link:hover { color: var(--hn-ouro-claro); }

/* palavra para agora */
.hn-cartao { display: flex; flex-direction: column; padding: 20px; background: var(--hn-superficie); border: 1px solid var(--hn-linha); border-radius: 12px; }
.hn-cartao h2 { margin: 0; font-family: 'Cormorant Garamond', Georgia, serif; font-size: 26px; line-height: 30px; font-weight: 600; }
.home-nova .hn-outra { width: 100%; height: 52px; margin-top: 14px; gap: 10px; background: transparent; color: var(--hn-tinta); border: 1px solid var(--hn-ouro); border-radius: 8px; font-size: 15px; font-weight: 600; }
.home-nova .hn-outra:hover { background: color-mix(in srgb, var(--hn-ouro) 12%, transparent); }
.hn-cartao .hn-link { margin-top: 4px; }

/* rodapé */
.hn-rodape { display: flex; flex-direction: column; gap: 12px; width: 100%; max-width: 560px; margin: 0 auto; }
.hn-linha { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.hn-amem { margin: 0; font-family: 'Cormorant Garamond', Georgia, serif; font-size: 20px; line-height: 28px; font-weight: 500; font-style: italic; color: var(--hn-ouro); }
.hn-creditos { display: inline-flex; align-items: center; min-height: 44px; font-size: 12px; line-height: 16px; color: var(--hn-fraca); text-decoration: underline; }
.hn-contatos { display: flex; }
.home-nova .hn-contatos .contato { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; color: var(--hn-media); }
.home-nova .slot-instalar .instalar-app { min-height: 44px; padding: 0; border: 0; background: none; color: var(--hn-tinta); font-size: 14px; font-weight: 600; }

/* anteriores */
.dias-nova h1 { margin: 28px 0 0; font-family: 'Cormorant Garamond', Georgia, serif; font-size: 42px; line-height: 44px; font-weight: 600; }
.dias-nova .meses { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.dias-nova .mes { min-height: 44px; padding: 0 14px; border: 1px solid var(--hn-linha); border-radius: 8px; background: transparent; color: var(--hn-media); font-size: 14px; font-weight: 600; }
.dias-nova .mes:hover { border-color: var(--hn-ouro); }
.dias-nova .anteriores h2 { margin: 28px 0 0; font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--hn-fraca); }
.dias-nova .anteriores ul { margin: 12px 0 0; padding: 0; list-style: none; }
.dias-nova .anteriores li { border-bottom: 1px solid var(--hn-linha); }
.dias-nova .anteriores a { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-height: 64px; padding: 12px 0; color: var(--hn-tinta); text-decoration: none; }
.dias-nova .anteriores a:hover .qual { color: var(--hn-ouro-claro); }
.dias-nova .quando { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 12px; line-height: 16px; letter-spacing: .1em; text-transform: uppercase; color: var(--hn-fraca); }
.dias-nova .qual { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 22px; line-height: 26px; font-weight: 600; }
.dias-nova .legenda { margin-top: 28px; font-size: 12px; line-height: 18px; color: var(--hn-fraca); }

@media (min-width: 900px) {
  .home-nova { padding: 32px 24px 24px; gap: 40px; }
  .hn-topo { max-width: 560px; margin: 0 auto; }
  .hn-hoje h2 { font-size: 56px; line-height: 58px; }
  .hn-gancho { font-size: 18px; line-height: 29px; -webkit-line-clamp: 3; }
  .home-nova .hn-par .botao.cheio { height: 60px; }
  .dias-nova { padding: 32px 24px 24px; }
  .dias-nova .leitura, .dias-nova.leitura { max-width: 560px; margin: 0 auto; }
}
@media (max-height: 760px) { .hn-hoje h2 { font-size: 36px; line-height: 38px; } }
@media (prefers-reduced-motion: reduce) { .home-nova *, .dias-nova * { transition: none !important; animation: none !important; } }

/* ═══ Player, mini barra e ajustes da home e de Anteriores (pedido do Mamu, 23/10) ═══ */
.ouvir-nova { box-sizing: border-box; min-height: 100dvh; display: flex; flex-direction: column; gap: 20px; padding: 20px 24px 16px; background: var(--hn-fundo); color: var(--hn-tinta); font-family: Manrope, system-ui, sans-serif; }
.ouvir-nova .ouvir-aviso { margin: 40px 0 0; font-size: 16px; line-height: 26px; color: var(--hn-media); }
.ouvir-topo { display: flex; justify-content: space-between; align-items: center; gap: 12px; width: 100%; max-width: 560px; margin: 0 auto; }
.ouvir-topo .botao.redondo { width: 44px; height: 44px; min-height: 44px; padding: 0; border: 1px solid var(--hn-linha); border-radius: 8px; background: transparent; color: var(--hn-tinta); }
.ouvir-topo .botao.redondo:hover { border-color: var(--hn-ouro); background: transparent; }
.ouvir-titulo { min-width: 0; text-align: center; }
.ouvir-ref { margin: 0; font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--hn-ouro); }
.ouvir-nome { margin: 2px 0 0; max-width: 220px; font-family: 'Cormorant Garamond', Georgia, serif; font-size: 18px; line-height: 22px; font-weight: 600; color: var(--hn-tinta); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ouvir-meio { flex: 1 1 auto; display: flex; align-items: center; min-height: 0; }
.ouvir-nova div.letra { width: 100%; height: 46vh; max-height: 460px; font-family: 'Cormorant Garamond', Georgia, serif; font-size: 26px; line-height: 32px; color: var(--hn-fraca); }
.ouvir-nova div.letra .trilho { gap: 16px; }
.ouvir-nova div.letra p { font-size: 26px; line-height: 32px; font-weight: 500; color: var(--hn-fraca); }
.ouvir-nova div.letra p.dita { color: var(--hn-tinta); }
.ouvir-nova div.letra p.agora { font-size: 36px; line-height: 42px; font-weight: 600; color: var(--hn-tinta); }
.ouvir-nova div.letra p.agora span { color: var(--hn-fraca); }
.ouvir-nova div.letra p.agora span.acesa { color: var(--hn-tinta); }
.ouvir-rodape { display: flex; flex-direction: column; gap: 16px; width: 100%; max-width: 560px; margin: 0 auto; }
.ouvir-play { width: 72px; height: 72px; margin: 0 auto; padding: 0; border: 0; border-radius: 50%; background: var(--hn-cheio); color: var(--hn-sobre-cheio); display: flex; align-items: center; justify-content: center; }
.ouvir-play .icone { width: 30px; height: 30px; }
.ouvir-nova .controles .botao.redondo { border: 1px solid var(--hn-linha); background: transparent; color: var(--hn-tinta); }
.ouvir-nova .velocidades .vel { color: var(--hn-media); }
.ouvir-nova .velocidades .vel[aria-pressed="true"] { background: var(--hn-cheio); color: var(--hn-sobre-cheio); }

/* mini barra embaixo, quando se sai do Player com o áudio tocando */
.mini { background: var(--hn-superficie); border-top: 1px solid var(--hn-ouro); }
.mini-titulo { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 18px; font-weight: 600; color: var(--hn-tinta); }
.mini .botao.redondo { color: var(--hn-tinta); background: transparent; }

/* instalar app: dourado, com o ícone de baixar */
.home-nova .slot-instalar .instalar-app { color: var(--hn-ouro); }
.home-nova .slot-instalar .instalar-app .icone { width: 18px; height: 18px; }

/* Anteriores: título sem sublinhado; ícone dos fones centralizado na vertical de cada linha */
.dias-nova .anteriores a, .dias-nova .anteriores a * { text-decoration: none; }
.dias-nova .anteriores a { display: grid; grid-template-columns: 1fr auto; column-gap: 12px; align-items: center; }
.dias-nova .quando { grid-column: 1; grid-row: 1; }
.dias-nova .qual { grid-column: 1; grid-row: 2; }
.dias-nova .tem-audio { grid-column: 2; grid-row: 1 / span 2; display: flex; align-items: center; color: var(--hn-media); }

/* ═══ Ajustes do Player (pedido do Mamu, 23/10) ═══ */
/* 1 px de rolagem: o aviso para leitores de tela ficava no fim da página */
#anuncio { position: fixed; }
/* aviso de erro no visual novo, em cima, sem cobrir os controles */
.aviso { top: 12px; bottom: auto; border: 1px solid var(--hn-linha); border-radius: 12px; background: var(--hn-superficie); color: var(--hn-tinta); font-family: Manrope, system-ui, sans-serif; }
body.com-mini .aviso { bottom: auto; }
/* título do cabeçalho com reticências */
.ouvir-nome { font-family: Manrope, system-ui, sans-serif; font-size: 14px; line-height: 20px; font-weight: 600; max-width: 240px; text-overflow: ellipsis; }
/* letra: trechos ditos menores e em tinta fraca; só a linha atual é grande */
.ouvir-nova div.letra p { font-size: 22px; line-height: 28px; font-weight: 500; color: var(--hn-fraca); }
.ouvir-nova div.letra p.dita { color: var(--hn-fraca); }
.ouvir-nova div.letra p.agora { font-size: 36px; line-height: 42px; font-weight: 600; }
/* controles: barra fina com bolinha dourada, tempo embaixo, uma linha de botões */
.ouvir-tempo { display: flex; flex-direction: column; gap: 8px; width: 100%; }
.ouvir-nova input.tempo { width: 100%; height: 24px; margin: 0; accent-color: var(--hn-ouro); background: transparent; }
.ouvir-nova .relogio { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 12px; line-height: 16px; color: var(--hn-fraca); }
.ouvir-linha { display: flex; align-items: center; justify-content: space-between; gap: 4px; width: 100%; }
.ouvir-ghost { min-width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; padding: 0 6px; border: 0; border-radius: 8px; background: transparent; color: var(--hn-tinta); font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 13px; font-weight: 500; text-decoration: none; }
.ouvir-ghost:hover { color: var(--hn-ouro); }
.ouvir-ghost .icone { width: 26px; height: 26px; }
.ouvir-nova .ouvir-play { width: 72px; height: 72px; flex: none; }

/* ═══ Esqueleto da home enquanto o devocional carrega (pedido do Mamu, 23/10): tela Carregando ═══ */
.esqueleto .sk { display: block; background: var(--hn-superficie); border-radius: 8px; animation: hn-pulso 1.4s ease-in-out infinite; }
.esqueleto .esq-marca { width: 180px; height: 28px; }
.esqueleto .esq-data { width: 140px; height: 12px; margin-top: 10px; }
.esqueleto .esq-botao { width: 44px; height: 44px; border-radius: 8px; }
.esqueleto .esq-etiqueta { width: 110px; height: 14px; }
.esqueleto .esq-titulo { width: 90%; height: 44px; margin-top: 16px; }
.esqueleto .esq-titulo.curto { width: 70%; margin-top: 8px; }
.esqueleto .esq-gancho { width: 100%; height: 52px; margin-top: 14px; }
.esqueleto .esq-botao-grande { width: 100%; height: 56px; margin-top: 24px; }
.esq-legenda { margin: 20px 0 0; text-align: center; font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 12px; line-height: 16px; letter-spacing: .1em; text-transform: uppercase; color: var(--hn-fraca); }
@keyframes hn-pulso { 50% { opacity: .45; } }
@media (prefers-reduced-motion: reduce) { .esqueleto .sk { animation: none; } }

/* Player no computador: o texto fica numa coluna de 560 px, como os controles (pedido do Mamu, 23/10) */
.ouvir-nova div.letra { max-width: 560px; margin: 0 auto; }

/* ═══ Ler o texto, Passagem, Bíblia e Créditos no layout novo (pedido do Mamu, 23/10) ═══
   Os tokens --hn-* valem para o site inteiro (escuro padrão do desenho; claro com a proposta do protótipo). */
:root {
  --hn-fundo: #0e1116; --hn-superficie: #1a2028; --hn-linha: #242b34; --hn-tinta: #f5f2ea; --hn-media: #b9c0c9; --hn-fraca: #98a0ac;
  --hn-ouro: #d4a356; --hn-ouro-claro: #efcd8e; --hn-cheio: #f5f2ea; --hn-sobre-cheio: #0e1116;
}
:root[data-tema="claro"] {
  --hn-fundo: #f5f2ea; --hn-superficie: #ebe6d9; --hn-linha: #d8d1c0; --hn-tinta: #0e1116; --hn-media: #3a424d; --hn-fraca: #5b6470;
  --hn-ouro: #8a6420; --hn-ouro-claro: #6b4c14; --hn-cheio: #0e1116; --hn-sobre-cheio: #f5f2ea;
}
@media (prefers-color-scheme: light) {
  :root:not([data-tema="escuro"]) {
    --hn-fundo: #f5f2ea; --hn-superficie: #ebe6d9; --hn-linha: #d8d1c0; --hn-tinta: #0e1116; --hn-media: #3a424d; --hn-fraca: #5b6470;
    --hn-ouro: #8a6420; --hn-ouro-claro: #6b4c14; --hn-cheio: #0e1116; --hn-sobre-cheio: #f5f2ea;
  }
}
.dev-nova, .pass-nova, .bib-nova, .creditos { box-sizing: border-box; max-width: 560px; margin: 0 auto; padding: 20px 24px 16px; min-height: 100dvh; background: var(--hn-fundo); color: var(--hn-tinta); font-family: Manrope, system-ui, sans-serif; }
.dev-nova h1, .bib-nova h1, .creditos h1 { margin: 20px 0 0; font-family: 'Cormorant Garamond', Georgia, serif; font-size: 42px; line-height: 44px; font-weight: 600; color: var(--hn-tinta); }
.dev-nova .hn-etiqueta, .pass-nova .hn-etiqueta { margin-top: 28px; }
.dev-data { margin: 12px 0 0; font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 12px; line-height: 16px; letter-spacing: .1em; text-transform: uppercase; color: var(--hn-fraca); }
.dev-nova .abertura { margin: 24px 0 0; font-size: 18px; line-height: 30px; color: var(--hn-media); }
.dev-ouvir { margin-top: 24px; }
.dev-ouvir .botao.cheio { width: 100%; height: 56px; gap: 10px; background: var(--hn-cheio); color: var(--hn-sobre-cheio); border: 0; border-radius: 8px; font-size: 16px; font-weight: 700; }
.dev-ouvir .botao.cheio:disabled { background: transparent; color: var(--hn-fraca); border: 1px solid var(--hn-linha); }
.dev-nova .escritura { margin-top: 32px; }
.dev-nova .escritura blockquote { margin: 0; font-family: 'Cormorant Garamond', Georgia, serif; font-size: 24px; line-height: 32px; font-weight: 500; font-style: italic; color: var(--hn-ouro); }
.dev-nova .escritura .ler { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-top: 8px; font-size: 14px; font-weight: 600; color: var(--hn-ouro); }
.dev-nova .prosa { display: flex; flex-direction: column; gap: 22px; margin-top: 28px; }
.dev-nova .prosa p { margin: 0; font-size: 18px; line-height: 30px; color: var(--hn-media); }
.dev-nova .secao { margin-top: 36px; }
.dev-nova .secao h2 { margin: 0; font-family: 'Cormorant Garamond', Georgia, serif; font-size: 26px; line-height: 30px; font-weight: 600; color: var(--hn-tinta); }
.dev-nova .secao p { margin: 10px 0 0; font-size: 17px; line-height: 28px; color: var(--hn-media); }
.dev-nova .levar { margin: 36px 0 0; padding: 20px; background: var(--hn-superficie); border: 1px solid var(--hn-linha); border-radius: 12px; }
.dev-nova .levar figcaption { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--hn-ouro); }
.dev-nova .levar blockquote { margin: 10px 0 0; font-family: 'Cormorant Garamond', Georgia, serif; font-size: 24px; line-height: 32px; font-weight: 600; color: var(--hn-tinta); }
.dev-nova .encerramento { margin: 36px 0 0; font-family: 'Cormorant Garamond', Georgia, serif; font-size: 20px; line-height: 28px; font-weight: 500; font-style: italic; color: var(--hn-ouro); }
.dev-nova .rodape-texto, .pass-nova .rodape-texto, .bib-nova .rodape-texto, .creditos .rodape-texto { margin-top: 28px; font-size: 12px; line-height: 18px; color: var(--hn-fraca); }
.dev-nova .rodape-texto .ler, .dev-nova .rodape-texto a { color: var(--hn-ouro); }

/* Passagem */
.pass-nova .hn-etiqueta { margin-top: 28px; }
.pass-nova .pcard-nova { margin-top: 20px; padding: 28px 24px; background: var(--hn-superficie); border: 1px solid var(--hn-linha); border-radius: 16px; }
.pass-nova .pcard-nova .hn-etiqueta { margin: 0 0 20px; }
.pass-nova .pcard-nova blockquote { margin: 0; font-family: 'Cormorant Garamond', Georgia, serif; font-size: 36px; line-height: 44px; font-weight: 600; color: var(--hn-tinta); }
.pass-nova .pcard-nova .ler { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-top: 20px; font-size: 14px; font-weight: 600; color: var(--hn-tinta); }
.pass-nova .pass-rodape { margin-top: 24px; }
.pass-nova .pass-rodape .botao.cheio { width: 100%; height: 56px; gap: 10px; background: var(--hn-cheio); color: var(--hn-sobre-cheio); border: 0; border-radius: 8px; font-size: 16px; font-weight: 700; }
.pass-nova .so-leitor, .pcard-nova h2.so-leitor { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* Bíblia e Créditos */
.bib-cabeca { margin-top: 8px; }
.bib-cabeca .hn-link, .bib-nova .hn-link { margin-top: 8px; }
.bib-nova .testamento { margin-top: 32px; }
.bib-nova .testamento h2 { margin: 0; font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 12px; line-height: 16px; letter-spacing: .2em; text-transform: uppercase; font-weight: 500; color: var(--hn-ouro); }
.bib-nova .livros { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 16px; margin: 12px 0 0; padding: 0; list-style: none; }
.bib-nova .livros a, .bib-nova .livros li a { display: flex; align-items: center; min-height: 44px; font-family: 'Cormorant Garamond', Georgia, serif; font-size: 22px; line-height: 26px; font-weight: 600; color: var(--hn-tinta); text-decoration: none; }
.bib-nova .livros a:hover { color: var(--hn-ouro-claro); }
.bib-nova .intro-capitulos { margin: 20px 0 0; font-size: 16px; color: var(--hn-media); }
.bib-nova .faixas-cap { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.bib-nova .faixas-cap .botao { min-height: 44px; padding: 0 14px; border: 1px solid var(--hn-linha); border-radius: 8px; background: transparent; color: var(--hn-media); font-size: 14px; font-weight: 600; }
.bib-nova .capitulos { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; margin: 16px 0 0; padding: 0; list-style: none; }
.bib-nova .capitulos .cap { display: flex; align-items: center; justify-content: center; height: 48px; border: 1px solid var(--hn-linha); border-radius: 8px; font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 14px; color: var(--hn-tinta); text-decoration: none; }
.bib-nova .capitulos .cap:hover { border-color: var(--hn-ouro); color: var(--hn-ouro-claro); }
.bib-nova .origem { margin: 20px 0 0; padding: 14px 16px; background: var(--hn-superficie); border-radius: 8px; font-size: 15px; color: var(--hn-media); }
.bib-nova .par { display: flex; gap: 8px; margin-top: 20px; }
.bib-nova .par .botao { flex: 1; min-height: 52px; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 0 12px; border: 1px solid var(--hn-linha); border-radius: 8px; background: transparent; color: var(--hn-tinta); font-size: 15px; font-weight: 600; text-decoration: none; }
.bib-nova .par .botao:hover { border-color: var(--hn-ouro); }
.bib-nova .versos { margin-top: 24px; }
.bib-nova .verso { margin: 0 0 18px; font-family: 'Cormorant Garamond', Georgia, serif; font-size: 22px; line-height: 34px; font-weight: 500; color: var(--hn-tinta); }
.bib-nova .verso .num { margin-right: 6px; font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 11px; color: var(--hn-ouro); vertical-align: super; }
.bib-nova .verso.destaque { background: var(--hn-superficie); border-left: 2px solid var(--hn-ouro); padding-left: 10px; }
.creditos .cred-texto { margin: 24px 0 0; font-size: 17px; line-height: 28px; color: var(--hn-media); }
.creditos .faixas-nova { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 16px; margin: 20px 0 0; padding: 0; list-style: none; }
.creditos .faixas-nova a { display: flex; align-items: center; min-height: 44px; font-family: 'Cormorant Garamond', Georgia, serif; font-size: 18px; line-height: 22px; color: var(--hn-tinta); }
.creditos .faixas-nova a:hover { color: var(--hn-ouro-claro); }

@media (min-width: 900px) {
  .dev-nova h1, .bib-nova h1, .creditos h1 { font-size: 56px; line-height: 58px; }
  .dev-nova .abertura { font-size: 18px; }
}
/* Ler o texto: a introdução inteira, sem corte de duas linhas (o corte é só da home) */
.dev-nova .abertura { display: block; overflow: visible; -webkit-line-clamp: unset; }

/* ═══ Folhas de Compartilhar e Instalar app, e o guia do iPhone (pedido do Mamu, 23/10) ═══ */
.folha-nova { position: fixed; inset: 0; z-index: 40; display: flex; align-items: flex-end; background: color-mix(in srgb, var(--hn-fundo) 78%, transparent); }
.folha-caixa { box-sizing: border-box; width: 100%; max-width: 560px; max-height: 92%; overflow: auto; margin: 0 auto; padding: 12px 24px 28px; background: var(--hn-superficie); border-top: 1px solid var(--hn-linha); border-radius: 16px 16px 0 0; color: var(--hn-tinta); font-family: Manrope, system-ui, sans-serif; animation: folha-sobe .28s ease-out; }
@keyframes folha-sobe { from { transform: translateY(40px); opacity: 0; } }
.folha-alca { width: 36px; height: 4px; margin: 0 auto 20px; border-radius: 2px; background: var(--hn-fraca); }
.folha-topo { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.folha-topo h2, .folha-grande { margin: 0; font-family: 'Cormorant Garamond', Georgia, serif; font-size: 32px; line-height: 36px; font-weight: 600; color: var(--hn-tinta); }
.folha-topo .botao.redondo { width: 44px; height: 44px; min-height: 44px; padding: 0; border: 1px solid var(--hn-linha); border-radius: 8px; background: transparent; color: var(--hn-tinta); }
.folha-etiqueta { display: flex; align-items: center; gap: 12px; margin: 0 0 14px; }
.folha-etiqueta::before { content: ""; display: block; width: 32px; height: 1px; background: var(--hn-ouro); }
.folha-etiqueta span { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--hn-ouro); }
.folha-previa { margin: 16px 0 20px; padding: 16px; background: var(--hn-fundo); border: 1px solid var(--hn-linha); border-radius: 12px; }
.folha-previa .folha-etiqueta { margin-bottom: 8px; }
.folha-titulo { margin: 0; font-family: 'Cormorant Garamond', Georgia, serif; font-size: 26px; line-height: 30px; font-weight: 600; color: var(--hn-tinta); }
.folha-endereco { margin: 8px 0 0; font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 12px; line-height: 16px; color: var(--hn-fraca); }
.folha-texto { margin: 12px 0 0; font-size: 15px; line-height: 24px; color: var(--hn-media); }
.folha-caixa .botao.cheio { width: 100%; height: 56px; gap: 10px; background: var(--hn-cheio); color: var(--hn-sobre-cheio); border: 0; border-radius: 8px; font-size: 16px; font-weight: 700; }
.folha-caixa .botao.cheio .icone { width: 20px; height: 20px; }
.folha-linha { display: flex; gap: 10px; margin-top: 10px; }
.folha-linha .botao { flex: 1; height: 52px; border: 1px solid var(--hn-linha); border-radius: 8px; background: transparent; color: var(--hn-tinta); font-size: 15px; font-weight: 600; }
.folha-linha .botao:hover { border-color: var(--hn-ouro); }
.folha-agora { width: 100%; min-height: 48px; margin-top: 4px; border: 0; background: transparent; color: var(--hn-media); font-size: 14px; font-weight: 600; }
/* guia do iPhone: passos com números dourados */
.guia-iphone .guia-caixa { box-sizing: border-box; padding: 24px; background: var(--hn-superficie); border: 1px solid var(--hn-linha); border-radius: 16px; color: var(--hn-tinta); font-family: Manrope, system-ui, sans-serif; }
.guia-iphone .guia-caixa ol { list-style: none; counter-reset: passo; margin: 16px 0 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.guia-iphone .guia-caixa ol li { counter-increment: passo; display: flex; align-items: center; gap: 14px; font-size: 15px; line-height: 22px; color: var(--hn-media); }
.guia-iphone .guia-caixa ol li::before { content: counter(passo); flex: none; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--hn-ouro); border-radius: 16px; font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 13px; color: var(--hn-ouro); }

/* ═══ Rodapé único em todas as páginas (pedido do Marcos, 24/10): mesmas margens e mesma ordem da home ═══ */
.hn-rodape { box-sizing: border-box; width: 100%; max-width: 560px; margin: 32px auto 0; padding: 0 24px 24px; color: var(--hn-tinta); font-family: Manrope, system-ui, sans-serif; }
.home-nova .hn-rodape { margin-top: 0; padding: 0; }
.hn-rodape .hn-contatos .contato { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; color: var(--hn-media); }
.hn-rodape .slot-instalar .instalar-app { min-height: 44px; padding: 0; border: 0; background: none; color: var(--hn-ouro); font-size: 14px; font-weight: 600; }
.hn-rodape .slot-instalar .instalar-app .icone { width: 18px; height: 18px; }