/* Bíblia de Aparecida — tipografia, cores e componentes do sistema do A12.
   Cores extraídas do layout aprovado (07 – Santuário Nacional).

   Tudo é escopado em .a12-biblia porque isto vira um shortcode dentro do
   Elementor: o cabeçalho, o rodapé e a moldura do portal são do tema, e nada
   daqui pode vazar para a página que hospeda o leitor. */

.a12-biblia{
  /* Barra de rolagem, campo de texto e demais controles nativos são desenhados
     pelo navegador, e ele só sabe qual tema usar se lhe dissermos. Sem isto, o
     tema escuro fica com barra de rolagem clara — a "borda" que parecia nossa e
     não era. */
  color-scheme:light dark;

  /* Paleta Azul Manto, do sistema de paletas do portal — Confiança / acolhimento.
     As três primeiras são as cores do cliente, escritas exatamente como ele as
     definiu. As demais foram derivadas mantendo o L* da paleta anterior e
     trocando só o matiz: com a luminosidade igual, nenhuma razão de contraste da
     interface muda, e o AAA conquistado medindo continua valendo por construção. */
  --marca:#005199;          /* Marca — barra, pílulas, botões circulares */
  --marca-escura:#003361;   /* Marca Escura — títulos e texto forte */
  --marca-media:#1E70B8;    /* Marca Média — 5,17:1: só gráfico, NUNCA texto */
  --superficie:#E3EEF7;     /* Superfície — seção com presença de cor */
  --superficie-sutil:#F4F8FB; /* Superfície Sutil — fundo de leitura longa */
  --card:#D5E6F3;           /* corpo dos cards, derivado */
  /* A Bíblia é o piloto AAA, e AAA exige 7:1 para texto. Isso comprime a escala
     tonal: no fundo mais claro do sistema (--card #D5E6F3) o tom mais claro que
     ainda cruza 7:1 é #3A4A5D. Os três degraus existem, mas próximos — a
     hierarquia passa a se apoiar em tamanho, peso e espacejamento, não em tom. */
  --rotulo:#3A4A5D;         /* rótulos de seção */
  --branco:#FFFFFF;

  /* superfícies e texto */
  --ground:var(--superficie-sutil); --surface:#FFFFFF; --surface-2:var(--superficie);
  /* A tinta de leitura não é a Marca Escura. O plugin de paletas define aquela
     como cor de cabeçalho e rodapé, e ela tem croma 31,9 — quase o dobro do
     marrom que estava aqui (17,9). Texto corrido em azul saturado cansa: esta é
     a mesma luminosidade, no mesmo matiz da paleta, com o croma de volta ao que
     era. Fica 12,43:1 no branco, contra 12,37:1 de antes. */
  --ink:#1C364F; --ink-2:#31465D; --ink-3:#3A4A5D;
  /* A marca já vale 7,96:1 como texto no branco, mas cai a 6,77:1 sobre a
     Superfície. Esta é a mesma cor um passo mais escura, que cruza 7:1 nas duas. */
  --marca-texto:#044784;
  --linha:#C8DBEA; --foco:#005199;
  /* A rubrica. Vermelho é a intuição certa — rubrica quer dizer vermelho —,
     mas como texto em AAA ele já virou vinho: o mais vermelho que cruza 7:1
     é #A61B1B. Então ele vai onde ainda pode ser vermelho, no filete, que é
     marca gráfica e pede 3:1 — e é o que a rubrica era antes de virar cor de
     letra: um traço na margem. 5,09:1 sobre o fundo da gaveta. */
  --rubrica:#C0392B;

  /* Movimento. Duas curvas, porque entrar e sair não são a mesma coisa: o que
     chega desacelera e assenta; o que sai acelera e some, sem se fazer de rogado.
     Curto para o que abre perto do dedo (popover, sugestão), normal para painel
     e gaveta. Números pequenos de propósito — animação em ferramenta de leitura
     serve para o olho acompanhar de onde a coisa veio, não para ser notada. */
  --mov-curto:150ms;
  --mov:230ms;
  --entra:cubic-bezier(.2,0,0,1);
  --sai:cubic-bezier(.4,0,1,1);
  --veu:rgba(0,29,58,.45);
  /* Destaques. O texto continua sendo --ink (#4B2D22) por cima, e as três
     cores foram escolhidas medindo: 9,02:1, 7,76:1 e 7,37:1. AAA pede 7. */
  --dst-amarelo:#F2DC7E; --dst-verde:#AFD8A4; --dst-azul:#AECBE8;
  --dst-tinta:var(--ink);
  --leitura:1.15rem; --entrelinha:1.78; --coluna:64ch; --colunas:1;
  --sombra:0 1px 2px rgba(75,45,34,.06), 0 6px 20px rgba(75,45,34,.07);
}
@media (prefers-color-scheme: dark){
  .a12-biblia:not([data-tema="light"]){
    color-scheme:dark;
    /* clareado de #C79068: como fundo de pill dava 6,07:1 com a letra, abaixo do
     7:1 que o AAA pede — e é fundo e texto ao mesmo tempo no tema escuro */
    --marca:#8DB3DE; --marca-escura:#D7E4EF; --marca-media:#5B93C9;
    --superficie:#19242C; --superficie-sutil:#0F181F; --card:#1C2932; --rotulo:#A4B6C5;
    --ground:#0F181F; --surface:#141F26; --surface-2:#1C2932;
    --ink:#D7E4EF; --ink-2:#BAC9D5; --ink-3:#A4B6C5; --marca-texto:#95B8E0;
    --linha:#25343F; --foco:#7EB6EE;
    --rubrica:#E8867A;
    --veu:rgba(0,0,0,.62);
    /* no escuro o destaque é fundo profundo com a mesma tinta clara do texto:
       7,09:1, 7,95:1 e 8,62:1 */
    --dst-amarelo:#57460F; --dst-verde:#26482A; --dst-azul:#223D5A;
    --dst-tinta:var(--ink);
    --sombra:0 1px 2px rgba(0,0,0,.4), 0 6px 20px rgba(0,0,0,.35);
  }
}
.a12-biblia[data-tema="dark"]{
  color-scheme:dark;
  /* clareado de #C79068: como fundo de pill dava 6,07:1 com a letra, abaixo do
     7:1 que o AAA pede — e é fundo e texto ao mesmo tempo no tema escuro */
  --marca:#8DB3DE; --marca-escura:#D7E4EF; --marca-media:#5B93C9;
  --superficie:#19242C; --superficie-sutil:#0F181F; --card:#1C2932; --rotulo:#A4B6C5;
  --ground:#0F181F; --surface:#141F26; --surface-2:#1C2932;
  --ink:#D7E4EF; --ink-2:#BAC9D5; --ink-3:#A4B6C5; --marca-texto:#95B8E0;
  --linha:#25343F; --foco:#7EB6EE;
  --rubrica:#E8867A;
  --veu:rgba(0,0,0,.62);
  --dst-amarelo:#57460F; --dst-verde:#26482A; --dst-azul:#223D5A;
  --dst-tinta:var(--ink);
  --sombra:0 1px 2px rgba(0,0,0,.4), 0 6px 20px rgba(0,0,0,.35);
}

/* Sem isto, min-height:44px vale para a caixa de conteúdo e o alvo sai com 62px:
   os 44px do alvo ampliado do AAA são um piso, não um pedido de linha alta. */
.a12-biblia,.a12-biblia *,.a12-biblia *::before,.a12-biblia *::after{box-sizing:border-box}

.a12-biblia{background:var(--ground);color:var(--ink);
  font-family:"Nunito Sans",system-ui,-apple-system,sans-serif;-webkit-font-smoothing:antialiased}
.a12-biblia h1,.a12-biblia h2,.a12-biblia h3{font-family:Bitter,Georgia,serif;color:var(--marca-escura)}
.a12-biblia :focus-visible{outline:3px solid var(--foco);outline-offset:2px;border-radius:3px}
html{scroll-behavior:smooth}
/* Quando o documento é nosso, a raiz também é. Sem isto sobravam duas coisas no
   tema escuro: os 8px de margem que o navegador dá ao body, que viravam uma
   moldura clara em volta de tudo, e a tela de fundo do documento, que ficava
   branca porque o color-scheme estava no .a12-biblia e não na raiz — e é a raiz
   que o navegador consulta para pintar canvas e barra de rolagem. */
html.a12-biblia-doc{color-scheme:light dark}
html.a12-biblia-doc>body{margin:0;min-height:100vh}
html.a12-biblia-doc .a12-biblia{min-height:100vh}

/* Barras finas, no tom da interface, que ganham corpo quando o ponteiro entra na
   região. Não somem de todo: barra invisível esconde que aquilo rola, e a gaveta
   com 73 livros rola muito — some a pista de que há mais abaixo. Quem usa
   ponteiro grosso, ou toque, continua vendo onde está.
   `scrollbar-width`/`scrollbar-color` são o padrão; onde ele não existe (Safari
   antigo), o bloco -webkit- faz o mesmo. Onde existe, o navegador ignora o
   legado, então os dois convivem sem brigar. */
/* A raiz fica acima de onde os tokens são declarados (eles moram em
   .a12-biblia, e propriedade personalizada só desce), então aqui os dois valores
   vão literais — são os mesmos de --linha e sua versão escura. */
html.a12-biblia-doc{scrollbar-width:thin;scrollbar-color:#C8DBEA transparent}
@media (prefers-color-scheme:dark){
  html.a12-biblia-doc{scrollbar-color:#25343F transparent}
}
.a12-biblia *{scrollbar-width:thin;scrollbar-color:var(--linha) transparent}
.a12-biblia *:hover,.a12-biblia *:focus-within{scrollbar-color:var(--ink-3) transparent}
.a12-biblia ::-webkit-scrollbar{width:11px;height:11px}
.a12-biblia ::-webkit-scrollbar-track{background:transparent}
.a12-biblia ::-webkit-scrollbar-thumb{background:var(--linha);border-radius:99px;
  border:3px solid transparent;background-clip:content-box}
.a12-biblia :hover::-webkit-scrollbar-thumb{background:var(--ink-3);background-clip:content-box}
@media (prefers-reduced-motion:no-preference){
  .a12-biblia ::-webkit-scrollbar-thumb{transition:background-color .15s ease}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* :where() não soma especificidade: sem isto, esta regra vence a cor dos
   componentes que são âncoras — foi assim que o selo ficou marrom sobre marrom. */
.a12-biblia :where(a){color:var(--marca-texto)}

/* ==================================================== barra de leitura */
.barra{position:sticky;top:0;z-index:5;background:var(--surface);border-bottom:1px solid var(--linha);
  display:flex;align-items:center;gap:10px;padding:9px 22px;min-height:62px;box-shadow:var(--sombra)}
/* O logotipo da edição, no lugar do ícone provisório. Entra como máscara: o
   arquivo do cliente fica intocado e a cor vem do tema — a marca no claro, a
   marca clara no escuro. O alvo de toque continua 44px; o que encolhe é o
   desenho. Abaixo de 32px o "de Aparecida" não resolve, e vira textura: é o
   preço de caber numa barra, e é como a capa se lê de longe. */
.selo{display:inline-grid;place-items:center;min-width:44px;min-height:44px;
  padding:0 6px;border-radius:14px;color:var(--marca);flex-shrink:0}
.selo:hover{background:var(--superficie)}
.selo-marca{display:block;height:30px;aspect-ratio:3112/925;background-color:currentColor;
  -webkit-mask:url("biblia.biblia-titulo.3ec0935d.svg") no-repeat center/contain;
          mask:url("biblia.biblia-titulo.3ec0935d.svg") no-repeat center/contain}
/* em alto contraste a máscara sumiria: cor de sistema no lugar */
@media (forced-colors:active){.selo-marca{background-color:LinkText}}
@media (max-width:520px){.selo-marca{height:26px}}
.btn-icone{min-width:44px;min-height:44px;border:1px solid transparent;background:none;border-radius:24px;
  color:var(--marca-texto);cursor:pointer;display:grid;place-items:center;font-size:1rem;font-family:inherit}
.btn-icone svg{width:21px;height:21px}
.btn-icone:hover{background:var(--superficie)}
/* O hambúrguer fica de fora: na lateral a gaveta vive aberta, e um botão sempre
   preenchido leria como pressionado. A própria gaveta já mostra o estado. */
.btn-icone[aria-expanded="true"]:not(#btn-gaveta){background:var(--marca);color:var(--surface)}
.lupa{color:var(--ink-3)}

.ref-btn{display:flex;align-items:center;gap:9px;background:var(--superficie);border:1px solid var(--linha);
  border-radius:24px;padding:8px 16px;min-height:44px;cursor:pointer;color:var(--marca-escura);
  font-family:Bitter,Georgia,serif;font-size:1rem;font-weight:700;white-space:nowrap;
  text-decoration:none}
.ref-btn--fixo{cursor:default}
.ref-btn:hover{border-color:var(--marca)}
.ref-btn small{font-family:"Nunito Sans",sans-serif;font-size:.66rem;font-weight:700;color:var(--marca-texto)}

.campo{flex:1;max-width:440px;position:relative;margin-left:auto}
.campo-caixa{display:flex;align-items:center;gap:8px;background:var(--superficie);border:1px solid var(--linha);
  border-radius:24px;padding:0 6px 0 14px;min-height:44px}
.campo-caixa:focus-within{border-color:var(--marca);box-shadow:0 0 0 3px var(--card)}
.campo input{flex:1;border:0;background:none;color:var(--ink);font:inherit;font-size:.9rem;padding:11px 0;min-width:0}
.campo input:focus{outline:none}
/* O navegador desenha o próprio "limpar" em input[type=search]. Ele fica: temos
   um botão nosso, alinhado ao resto da barra e com rótulo acessível. */
.campo input::-webkit-search-cancel-button,
.campo input::-webkit-search-decoration{-webkit-appearance:none;appearance:none;display:none}
.campo input::-ms-clear{display:none;width:0;height:0}
.limpar{border:0;background:none;color:var(--ink-3);cursor:pointer;font:inherit;
  width:34px;height:34px;border-radius:50%;flex-shrink:0}
.limpar:hover{background:var(--card);color:var(--marca-escura)}
.limpar[hidden]{display:none}
.modo{font-size:.64rem;letter-spacing:.06em;text-transform:uppercase;font-weight:700;background:var(--marca);
  /* --surface, não branco: a marca é clara no tema escuro, e ali branco sobre
     ela dava 2,18:1. Com o token, 7,96 no claro e 7,69 no escuro. */
  color:var(--surface);padding:5px 10px;border-radius:20px;white-space:nowrap}
.modo[hidden]{display:none}
.sugestao{position:absolute;top:calc(100% + 6px);left:0;right:0;background:var(--surface);
  border:1px solid var(--linha);border-radius:16px;box-shadow:var(--sombra);padding:6px;display:none;
  max-height:min(58vh,420px);overflow-y:auto;z-index:40}
.sugestao.aberta{display:block}
.sugestao{opacity:0;transform:translateY(-6px);
  transition:opacity var(--mov-curto) var(--sai),transform var(--mov-curto) var(--sai),
             display var(--mov-curto) allow-discrete;
  transition-behavior:allow-discrete}
.sugestao.aberta{opacity:1;transform:none;
  transition:opacity var(--mov-curto) var(--entra),transform var(--mov-curto) var(--entra),
             display var(--mov-curto) allow-discrete}
@starting-style{.sugestao.aberta{opacity:0;transform:translateY(-6px);}}

.sug-nota{padding:9px 12px;font-size:.75rem;color:var(--ink-3);border-bottom:1px solid var(--linha);margin:0 0 4px}
.sug-item{display:flex;gap:10px;align-items:baseline;width:100%;text-align:left;border:0;background:none;
  color:inherit;font:inherit;padding:11px 12px;border-radius:12px;cursor:pointer;min-height:44px}
/* a opção ativa é a do teclado; o foco fica no campo, como manda o combobox */
.sug-item:hover,.sug-item:focus-visible,.sug-item.ativo{background:var(--superficie)}
.sug-item.ativo{outline:2px solid var(--foco);outline-offset:-2px}
.sug-ref{font-weight:700;font-size:.81rem;color:var(--marca-texto);white-space:nowrap;font-variant-numeric:tabular-nums}
.sug-ctx{font-size:.79rem;color:var(--ink-2);font-family:Literata,serif;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.sug-ctx mark{background:var(--card);color:inherit;border-radius:3px;padding:0 2px}
.sug-todos{justify-content:center;font-size:.79rem;font-weight:700;color:var(--marca);
  border-top:1px solid var(--linha);border-radius:0 0 12px 12px;margin-top:4px}

#btn-busca,#fechar-busca{display:none}
@media (max-width:640px){
  .barra{gap:6px;padding:9px 12px}
  .ref-btn{flex:1;min-width:0;overflow:hidden;justify-content:space-between}
  .ref-btn #ref-texto{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .campo{display:none}
  #btn-busca{display:grid}
  .barra.buscando .selo,.barra.buscando .ref-btn,.barra.buscando #btn-busca,
  .barra.buscando #btn-gaveta,.barra.buscando #btn-painel{display:none}
  .barra.buscando .campo{display:block;flex:1;max-width:none;margin:0}
  /* Sair da busca é voltar, não limpar: seta na borda inicial, como no Material,
     para não ficar dois "x" seguidos querendo dizer coisas diferentes. */
  .barra.buscando #fechar-busca{display:grid;order:-1}
  .painel{top:auto;bottom:0;left:0;right:0;width:auto;max-height:80vh;border-radius:20px 20px 0 0}
  .leitura{padding:0 16px 30vh}
}

/* ============================================================= hero */
.hero{background:var(--superficie);position:relative;overflow:hidden;padding:52px 22px 46px}
/* A onda era um data URI com a cor cravada dentro, e por isso não seguia a
   paleta nem o tema. Como máscara, o traço vira alfa e a cor vem do token —
   a Marca Média, que é onde ela pode ir sem tocar em texto. */
.hero::before,.hero::after{content:"";position:absolute;left:0;right:0;height:56px;opacity:.5;
  background-color:var(--marca-media);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='56' viewBox='0 0 420 56'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.4' opacity='.42'%3E%3Cpath d='M0 20c52 0 52 16 105 16s53-16 105-16 52 16 105 16 53-16 105-16'/%3E%3Cpath d='M0 32c52 0 52 16 105 16s53-16 105-16 52 16 105 16 53-16 105-16'/%3E%3C/g%3E%3C/svg%3E") repeat-x center/420px 56px;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='56' viewBox='0 0 420 56'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.4' opacity='.42'%3E%3Cpath d='M0 20c52 0 52 16 105 16s53-16 105-16 52 16 105 16 53-16 105-16'/%3E%3Cpath d='M0 32c52 0 52 16 105 16s53-16 105-16 52 16 105 16 53-16 105-16'/%3E%3C/g%3E%3C/svg%3E") repeat-x center/420px 56px}
.hero::before{top:0}
.hero::after{bottom:0}
.hero-conteudo{max-width:1180px;margin:0 auto;position:relative;z-index:1}
.sobrancelha{font-size:.86rem;letter-spacing:.19em;text-transform:uppercase;color:var(--marca-texto);
  font-weight:600;margin:0 0 10px}
.titulo-hero{font-family:Bitter,Georgia,serif;font-size:clamp(2.6rem,6vw,4.3rem);font-weight:700;
  line-height:1.02;margin:0 0 16px;letter-spacing:-.02em;text-wrap:balance;color:var(--marca-escura)}
.linha-hero{font-size:1.05rem;color:var(--ink-2);margin:0;max-width:52ch}

/* Na raiz o título é o logotipo, e a ilustração da capa entra ao lado. Nos
   testamentos o título segue sendo texto: "Antigo Testamento" não é logotipo,
   e transformar texto em imagem só se justifica onde a forma é a identidade. */
.hero--marca .hero-conteudo{display:grid;grid-template-columns:minmax(0,1fr) auto;
  gap:clamp(24px,6vw,72px);align-items:center}
.titulo-hero--marca{margin:0 0 18px}
.titulo-marca{display:block;width:clamp(240px,40vw,540px);aspect-ratio:3112/925;
  background-color:var(--marca);
  -webkit-mask:url("biblia.biblia-titulo.3ec0935d.svg") no-repeat left center/contain;
          mask:url("biblia.biblia-titulo.3ec0935d.svg") no-repeat left center/contain}
/* a ilustração recua um tom para não disputar com o logotipo */
.hero-arte{width:clamp(150px,22vw,290px);aspect-ratio:2422/2144;
  background-color:var(--marca-media);opacity:.9;
  -webkit-mask:url("biblia.biblia-ilustracao.932c0dbf.svg") no-repeat center/contain;
          mask:url("biblia.biblia-ilustracao.932c0dbf.svg") no-repeat center/contain}
@media (forced-colors:active){.titulo-marca,.hero-arte{background-color:CanvasText}}
/* Empilha só quando as duas colunas de fato não cabem: até aí, logotipo e
   ilustração lado a lado é a composição da capa. */
@media (max-width:640px){
  .hero--marca .hero-conteudo{grid-template-columns:1fr;justify-items:start;gap:22px}
  .hero-arte{width:clamp(120px,30vw,170px)}
}

/* ==================================================== seções e cards */
.secao{background:var(--surface);padding:46px 22px}
.secao-cabeca{max-width:900px;margin:0 auto 30px;text-align:center}
/* decorativo e aria-hidden: é onde a Marca Média cabe sem tocar em texto */
.ornamento{color:var(--marca-media);font-size:1.05rem;letter-spacing:.4em;margin:0 0 10px;opacity:.85}
.secao-cabeca h2{font-size:1.75rem;font-weight:700;margin:0 0 8px;letter-spacing:-.01em}
.secao-cabeca p{margin:0;color:var(--ink-2);font-size:1rem}
.cartoes{max-width:1180px;margin:0 auto;display:grid;
  grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:20px;list-style:none;padding:0}
.cartao{display:flex;flex-direction:column;background:var(--card);border-radius:14px;overflow:hidden;
  text-decoration:none;min-height:132px;transition:transform .16s}
.cartao:hover{transform:translateY(-3px)}
.cartao-corpo{display:flex;align-items:center;gap:12px;padding:18px 18px;flex:1}
.cartao-txt{flex:1;min-width:0}
.cartao-txt b{display:block;font-family:Bitter,serif;font-size:1.02rem;font-weight:700;
  color:var(--marca-escura);margin-bottom:3px}
.cartao-txt span{font-size:.86rem;color:var(--ink-2)}
.cartao-seta{width:40px;height:40px;border-radius:50%;background:var(--marca-escura);color:var(--superficie);
  display:grid;place-items:center;flex-shrink:0;font-size:1rem}

/* ==================================================== corpo da leitura */
.corpo{display:grid;grid-template-columns:250px 1fr;align-items:start;background:var(--surface);
  transition:grid-template-columns var(--mov) var(--entra)}
/* Em modo modal a gaveta é fixa e sai do fluxo, então a grade tem uma coluna só —
   senão a leitura cairia na coluna reservada para a lateral. */
@media (max-width:900px){.corpo{grid-template-columns:1fr}}
.a12-biblia.gaveta-oculta .corpo{grid-template-columns:1fr}

/* Véu da gaveta modal: só existe quando ela cobre o conteúdo. */
/* o véu ainda era o marrom da paleta anterior, e não mudava de tema */
.fundo{position:fixed;inset:0;background:var(--veu);z-index:50;display:none;opacity:0;
  transition:opacity var(--mov) var(--sai),display var(--mov) allow-discrete;
  transition-behavior:allow-discrete}
.fundo.aberto{opacity:1;transition:opacity var(--mov) var(--entra),display var(--mov) allow-discrete}
@starting-style{.fundo.aberto{opacity:0}}
.fundo.aberto{display:block}

/* ================================================== gaveta de navegação */
/* Um componente em dois modos, como manda o Material: lateral fixa nas páginas
   de leitura em tela larga, e modal por cima em tela estreita e nas demais
   páginas. O padrão é o modal; a lateral é a exceção declarada no PHP. */
.gaveta{position:fixed;top:0;bottom:0;left:0;z-index:51;width:min(330px,86vw);
  display:flex;flex-direction:column;background:var(--superficie-sutil);
  border-right:1px solid var(--linha);box-shadow:var(--sombra);
  transform:translateX(-100%);visibility:hidden;
  /* A visibilidade some só depois do deslize, mas volta na hora: se ela ainda
     computa hidden no instante em que abrimos, o foco não entra na gaveta. */
  transition:transform var(--mov) var(--sai),visibility 0s linear var(--mov)}
.gaveta.aberta{transform:none;visibility:visible;
  transition:transform var(--mov) var(--entra),visibility 0s}
.gaveta-topo{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-shrink:0;
  min-height:62px;padding:9px 8px 9px 16px;border-bottom:1px solid var(--linha)}
.gaveta-titulo{font-family:Bitter,Georgia,serif;font-size:.95rem;font-weight:700;
  color:var(--marca-escura);text-decoration:none}
.gaveta-lista{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:14px 8px 40px}
.gaveta-lista h2{font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;color:var(--marca-texto);
  margin:16px 0 6px 12px;font-weight:700;font-family:"Nunito Sans",sans-serif}
.gaveta-lista h2:first-child{margin-top:0}
.gaveta-secao{font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;color:var(--rotulo);
  margin:14px 0 3px 12px;font-weight:700}

/* O alvo continua com 44px, que é o que o AAA pede, mas o que se pinta é menor:
   a faixa é desenhada num ::before recuado, então o toque não encolhe junto. */
.gaveta-lista a{display:flex;justify-content:space-between;align-items:center;gap:8px;
  padding:9px 12px;color:var(--ink-2);text-decoration:none;
  font-size:.87rem;min-height:44px;position:relative;z-index:0}
.gaveta-lista a::before{content:"";position:absolute;inset:5px 0;border-radius:16px;z-index:-1}
.gaveta-lista a:hover{color:var(--marca-escura)}
.gaveta-lista a:hover::before{background:var(--card)}
.gaveta-lista a[aria-current="page"]{color:var(--surface);font-weight:700}
.gaveta-lista a[aria-current="page"]::before{background:var(--marca)}
/* opacity aqui derrubava o contraste para 2,86:1 */
.gaveta-lista a[aria-current="page"] i{color:var(--surface)}
.gaveta-lista a[aria-current="page"] i b{font-weight:800}
.gaveta-lista a i{font-style:normal;font-size:.71rem;color:var(--ink-3);font-variant-numeric:tabular-nums}

/* A seção que a edição marca como centro — hoje os Evangelhos, por pedido do
   padre. O realce não é só cor: é filete, faixa e peso. Cor sozinha não
   distingue para quem não a enxerga (WCAG 1.4.1), e aqui ela nem poderia
   carregar o texto sem virar vinho. O filete corre ao lado do grupo inteiro,
   como a rubrica na margem do missal. */
.gaveta-secao[data-realce]{color:var(--marca-texto);font-weight:800;
  display:flex;align-items:center;gap:7px}
.gaveta-secao[data-realce]::before{content:"";width:3px;height:11px;border-radius:2px;
  background:var(--rubrica);flex-shrink:0}
.gaveta-grupo[data-realce]{position:relative;padding-left:11px;margin:2px 0 4px}
.gaveta-grupo[data-realce]::before{content:"";position:absolute;left:2px;top:4px;bottom:4px;
  width:3px;border-radius:2px;background:var(--rubrica)}
.gaveta-grupo[data-realce] a{font-weight:600}
.gaveta-grupo[data-realce] a::before{background:var(--superficie)}
.gaveta-grupo[data-realce] a:hover::before{background:var(--card)}
.gaveta-grupo[data-realce] a[aria-current="page"]::before{background:var(--marca)}
@media (forced-colors:active){
  .gaveta-grupo[data-realce]::before,.gaveta-secao[data-realce]::before{background:LinkText}
}

.leitura{padding:0 24px 30vh;min-width:0;background:var(--surface)}
.fluxo{max-width:var(--coluna);margin:0 auto}
/* O Chrome compensa sozinho quando entra conteúdo acima da janela (scroll
   anchoring); o Safari não faz isso. Confiar nele daria comportamento diferente
   por navegador, e somado à nossa compensação vira compensação dobrada — o
   leitor salta um capítulo inteiro. Desligado aqui: quem ajusta é o nosso
   código, igual em todo lugar. */
#fluxo{overflow-anchor:none}
.cap{padding-top:14px;scroll-margin-top:74px}
/* A ilustração da capa fecha o capítulo, encostada à direita — é a marca do
   impressor, que no livro encerra a unidade. Flui depois do último versículo em
   vez de ficar por baixo dele: assim não cruza texto em largura nenhuma, e o
   fecho é escolha, não acaso.

   Como ela não fica sob o texto, o teto de contraste não a limita — a opacidade
   é escolha de discrição, não de norma. Fica registrado o número para quem um
   dia quiser pô-la de fundo: aí o limite existe e é apertado no tema escuro,
   0,07 mantém 7,32:1 contra o tom de texto mais claro da página, e 0,12 já cai
   para 6,77. */
.cap::after{content:"";display:block;margin:clamp(28px,4vw,52px) 0 0 auto;
  width:clamp(110px,15vw,200px);aspect-ratio:2422/2144;opacity:.18;
  background-color:var(--marca-media);
  -webkit-mask:url("biblia.biblia-ilustracao.932c0dbf.svg") no-repeat center/contain;
          mask:url("biblia.biblia-ilustracao.932c0dbf.svg") no-repeat center/contain}
@media (prefers-color-scheme:dark){
  .a12-biblia:not([data-tema="light"]) .cap::after{opacity:.15}
}
.a12-biblia[data-tema="dark"] .cap::after{opacity:.15}
/* no modo oração some — ali a tela é só o texto — e em alto contraste também,
   onde o navegador ignora nossas cores e a marca viraria um borrão sólido */
.a12-biblia.oracao .cap::after{display:none}
@media (forced-colors:active){.cap::after{display:none}}
.cap-cabeca{display:flex;align-items:baseline;gap:14px;margin:30px 0 20px;padding-bottom:12px;
  border-bottom:2px solid var(--card)}
.cap-num{font-family:Bitter,serif;font-size:2.6rem;font-weight:700;line-height:1;color:var(--marca);
  font-variant-numeric:tabular-nums}
.cap-meta h1{margin:0;font-size:1.1rem;font-weight:700}
.cap-meta small{display:block;font-size:.75rem;color:var(--ink-3);margin-top:3px}
.cap-titulo{font-family:Bitter,Georgia,serif;font-size:1.15rem;font-weight:700;margin:0 0 18px;
  color:var(--marca-texto);text-wrap:balance}

/* Sobrescrito e letra do acróstico: texto da edição que não é versículo. */
.sobrescrito{font-family:Literata,Georgia,serif;font-style:italic;font-size:.94rem;
  color:var(--ink-2);margin:0 0 16px}
.v--sobrescrito{font-style:italic;color:var(--ink-2)}
.letra-acrostico{font-family:Bitter,Georgia,serif;font-size:.72rem;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--marca);margin:22px 0 8px}
.a12-biblia.sem-titulos .letra-acrostico{display:none}

.colunavel{column-count:var(--colunas);column-gap:2.6rem}
@media (max-width:1100px){.colunavel{column-count:1}}

h3.pericope{font-family:Bitter,Georgia,serif;font-size:1.02rem;font-weight:700;color:var(--marca-texto);
  margin:28px 0 10px;line-height:1.35;text-wrap:balance;break-after:avoid}
h3.pericope::before{content:"";display:block;width:28px;height:3px;background:var(--marca);
  margin-bottom:9px;border-radius:2px}
.a12-biblia.sem-titulos h3.pericope{display:none}

.bloco{margin:0 0 13px}
.v{font-family:Literata,Georgia,serif;font-size:var(--leitura);line-height:var(--entrelinha);
  color:var(--ink);border-radius:4px;scroll-margin-top:78px}
.bloco--prosa .v{display:block;margin-bottom:7px;padding:1px 3px}
.a12-biblia.modo-paragrafo .bloco--prosa .v{display:inline;margin:0}
.v--verso{display:block;margin:0 0 9px;padding:1px 3px}
.v__n{font-family:"Nunito Sans",sans-serif;font-size:.6em;font-weight:800;color:var(--marca-texto);
  vertical-align:.44em;margin-right:.32em;font-variant-numeric:tabular-nums;user-select:none}
.a12-biblia.sem-numeros .v__n{display:none}
.v__l{display:block;padding-left:1.5em;text-indent:-1.5em}
.v__l + .v__l{padding-left:2.5em;text-indent:0}
.v:target,.v.destacado{background:var(--card)}
.omitido{font-size:.76rem;color:var(--ink-3);font-style:italic;border-left:3px solid var(--card);
  padding:5px 0 5px 12px;margin:12px 0}

.paginacao{max-width:var(--coluna);margin:40px auto 0;display:flex;justify-content:space-between;gap:12px;
  border-top:1px solid var(--linha);padding-top:18px}
.paginacao a{display:flex;flex-direction:column;gap:2px;text-decoration:none;color:var(--marca-escura);
  background:var(--superficie);border-radius:16px;padding:12px 20px;min-height:44px;justify-content:center}
.paginacao a:hover{background:var(--card)}
.paginacao a[rel="next"]{text-align:right;margin-left:auto}
.paginacao small{font-size:.66rem;color:var(--marca-texto);letter-spacing:.07em;text-transform:uppercase;font-weight:700}
.paginacao b{font-weight:600;font-size:.92rem}
.creditos{max-width:var(--coluna);margin:28px auto 0;padding-top:16px;border-top:1px solid var(--linha);
  font-size:.73rem;color:var(--ink-3);text-align:center}

/* destaque de quem chegou pela busca */
.v mark{background:var(--card);color:inherit;border-radius:3px;padding:0 1px}

/* ------------------------------------------------------ busca: resultados */
.resultados{max-width:820px;margin:0 auto;padding:30px 0 10vh}
.res-cabeca{display:flex;justify-content:space-between;align-items:baseline;gap:16px;
  flex-wrap:wrap;border-bottom:1px solid var(--linha);padding-bottom:14px;margin-bottom:8px}
.res-cabeca h1{font-size:1.3rem;font-weight:700;margin:0}
.res-cabeca h1 span{color:var(--marca)}
.res-ordem{display:flex;gap:14px;font-size:.79rem}
/* O critério fica ao lado do total porque o mesmo campo faz coisas diferentes:
   sem isto a pessoa não sabe se os 55 ou os 720 são o que ela pediu. */
.res-criterio{display:flex;gap:6px;font-size:.79rem;background:var(--superficie);
  padding:4px;border-radius:22px}
.res-criterio a,.res-criterio b{display:flex;align-items:center;gap:6px;min-height:36px;
  padding:0 14px;border-radius:18px;text-decoration:none;color:var(--ink-2);font-weight:400}
.res-criterio a:hover{background:var(--card);color:var(--ink)}
.res-criterio b{background:var(--marca);color:var(--surface);font-weight:700}
/* opacity aqui derruba o contraste abaixo dos 7:1 do AAA — foi o que o axe
   pegou, e é o mesmo erro que já tinha aparecido no número da gaveta. */
.res-criterio i{font-style:normal;font-size:.72rem;font-variant-numeric:tabular-nums;
  color:var(--ink-3)}
.res-criterio b i{color:var(--surface)}
.res-sub{display:flex;justify-content:space-between;align-items:baseline;gap:16px;
  flex-wrap:wrap;margin-top:8px}
.res-ordem b{color:var(--marca-escura)}
.res-livro{font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--marca-texto);
  font-weight:700;font-family:"Nunito Sans",sans-serif;margin:26px 0 6px}
.res-lista{list-style:none;padding:0;margin:0}
.res-lista a{display:block;text-decoration:none;color:inherit;padding:12px 14px;
  border-radius:14px;min-height:44px}
.res-lista a:hover{background:var(--superficie)}
.res-ref{display:inline-block;font-size:.76rem;font-weight:700;color:var(--marca-texto);
  font-variant-numeric:tabular-nums;margin-right:10px}
.res-trecho{font-family:Literata,Georgia,serif;font-size:.97rem;line-height:1.62;color:var(--ink)}
.res-trecho mark{background:var(--card);color:inherit;border-radius:3px;padding:0 2px}
.res-ctx{display:block;font-size:.73rem;color:var(--ink-3);margin-top:3px}
.res-faixa{font-size:.76rem;color:var(--ink-3);margin:0}
.res-vazio,.res-ajuda{padding:24px 0;color:var(--ink-2)}
.res-vazio h1,.res-ajuda h1{font-size:1.25rem;margin:0 0 10px}
.res-vazio p{font-size:.95rem;line-height:1.6;max-width:52ch;margin:0}
.res-ajuda p{font-size:.95rem;line-height:1.65;max-width:60ch;margin:0 0 16px}
.res-ajuda ul{margin:0;padding-left:1.1rem;font-size:.95rem;line-height:1.9}
.res-ajuda b{color:var(--marca-escura)}
.res-paginas{display:flex;justify-content:space-between;align-items:center;gap:12px;
  border-top:1px solid var(--linha);margin-top:26px;padding-top:16px}
.res-paginas a{display:flex;align-items:center;min-height:44px;padding:0 18px;
  background:var(--superficie);border-radius:16px;text-decoration:none;
  color:var(--marca-escura);font-size:.85rem;font-weight:600}
.res-paginas a:hover{background:var(--card)}
.res-pagina-n{font-size:.78rem;color:var(--ink-3);font-variant-numeric:tabular-nums}

/* -------------------------------------------- páginas de livro e índice */
.pagina-livro{max-width:1180px;margin:0 auto;padding:34px 0}
.rotulo-grade{font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--marca-texto);
  font-weight:700;margin:30px 0 12px;font-family:"Nunito Sans",sans-serif}
/* Sumário: escolhe-se capítulo pelo assunto, não pela contagem. A grade de
   números virava calendário — matriz rígida de quadrados iguais. */
/* columns fica só na página, nunca na base: multicol com altura limitada
   transborda para o lado em vez de rolar, e foi assim que a popover apareceu
   cortada na horizontal. */
.sumario{list-style:none;margin:0;padding:0}
.sumario--pagina{columns:2;column-gap:36px}
.sumario--pagina li{break-inside:avoid}
.sumario a{display:flex;align-items:baseline;gap:12px;min-height:44px;padding:5px 10px;
  text-decoration:none;color:var(--ink-2);position:relative;z-index:0}
.sumario a::before{content:"";position:absolute;inset:2px 0;border-radius:12px;z-index:-1}
.sumario a:hover::before{background:var(--superficie)}
.sumario a:hover{color:var(--ink)}
.sumario-n{min-width:26px;text-align:right;flex-shrink:0;font-weight:800;font-size:.82rem;
  color:var(--marca-texto);font-variant-numeric:tabular-nums}
.sumario-t{font-family:Literata,Georgia,serif;font-size:.92rem;line-height:1.4;color:var(--ink)}
/* Abertura: primeiras palavras do capítulo, onde a edição não deu título. Itálico
   e um tom acima do texto para nunca ser lida como título da Editora — a
   reticência final vem do dado, porque a frase é cortada. Na linha ativa a regra
   de .sumario--pop vence por especificidade e ela fica branca junto com o resto. */
.sumario-t--abertura{font-style:italic;color:var(--ink-2)}
@media (max-width:760px){.sumario--pagina{columns:1}}

.grade-caps{list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(56px,1fr));
  gap:7px;padding:0;margin:0}
.grade-caps a{display:grid;place-items:center;min-height:56px;background:var(--superficie);border-radius:12px;
  text-decoration:none;color:var(--marca-escura);font-size:.92rem;font-weight:600;
  font-variant-numeric:tabular-nums}
.grade-caps a:hover{background:var(--marca);color:var(--surface)}
.grade-caps a[aria-current="page"]{background:var(--marca);color:var(--surface);font-weight:700}
/* Na popover o sumário é uma coluna só, e rola. O alvo continua com 44px. */
.sumario--pop{overflow-y:auto;max-height:min(52vh,430px);padding:2px}
.sumario--pop a[aria-current="page"]{color:var(--surface)}
.sumario--pop a[aria-current="page"]::before{background:var(--marca)}
.sumario--pop a[aria-current="page"] .sumario-n,
.sumario--pop a[aria-current="page"] .sumario-t{color:var(--surface)}

/* Recuo: números correndo como num índice impresso, sem caixa nem matriz —
   é o que aparece enquanto o sumário não chegou, e se ele não chegar. */
.indice-corrido{display:flex;flex-wrap:wrap;gap:2px 4px;overflow-y:auto;
  max-height:min(52vh,430px);padding:6px 2px}
.indice-corrido a{display:inline-grid;place-items:center;min-width:44px;min-height:44px;
  text-decoration:none;color:var(--ink-2);font-size:.92rem;font-variant-numeric:tabular-nums;
  position:relative;z-index:0}
.indice-corrido a::before{content:"";position:absolute;inset:6px 3px;border-radius:10px;z-index:-1}
.indice-corrido a:hover::before{background:var(--superficie)}
.indice-corrido a[aria-current="page"]{color:var(--surface);font-weight:800}
.indice-corrido a[aria-current="page"]::before{background:var(--marca)}

/* ------------------------------------------- capítulos do livro (popover) */
/* Não é modal: sem véu e sem prisão de foco. Escolher um número não interrompe
   a leitura, e o texto continua visível atrás — a escolha é relativa a ele.
   Mesma dobra do painel Aa: ancorada no desktop, folha inferior no celular. */
.caps-pop{position:fixed;top:70px;left:16px;z-index:45;width:min(400px,calc(100vw - 24px));
  background:var(--surface);border:1px solid var(--linha);border-radius:20px;
  box-shadow:var(--sombra);padding:14px;display:none}
.caps-pop.aberto{display:block}
.caps-pop{opacity:0;transform:translateY(-8px) scale(.985);
  transition:opacity var(--mov-curto) var(--sai),transform var(--mov-curto) var(--sai),
             display var(--mov-curto) allow-discrete;
  transition-behavior:allow-discrete}
.caps-pop.aberto{opacity:1;transform:none;
  transition:opacity var(--mov-curto) var(--entra),transform var(--mov-curto) var(--entra),
             display var(--mov-curto) allow-discrete}
@starting-style{.caps-pop.aberto{opacity:0;transform:translateY(-8px) scale(.985);}}

.caps-pop-topo{display:flex;justify-content:space-between;align-items:baseline;gap:10px;
  padding:0 4px 10px;margin-bottom:8px;border-bottom:1px solid var(--linha)}
.caps-pop-topo b{font-family:Bitter,Georgia,serif;font-size:.95rem;color:var(--marca-escura)}
.caps-pop-topo small{font-size:.7rem;color:var(--ink-2)}
@media (max-width:640px){
  .caps-pop{top:auto;bottom:0;left:0;right:0;width:auto;border-radius:20px 20px 0 0;
    border-left:0;border-right:0;border-bottom:0;padding:14px 14px 22px}
  .grade-caps--pop{max-height:56vh}
}

/* ------------------------------------------------ painel de ajustes */
.painel{position:fixed;top:70px;right:16px;z-index:45;width:min(324px,calc(100vw - 28px));
  background:var(--surface);border-radius:20px;box-shadow:var(--sombra);padding:17px;display:none;
  max-height:calc(100vh - 90px);overflow-y:auto;border:1px solid var(--linha)}
.painel.aberto{display:block}
.painel{opacity:0;transform:translateY(-8px) scale(.985);
  transition:opacity var(--mov-curto) var(--sai),transform var(--mov-curto) var(--sai),
             display var(--mov-curto) allow-discrete;
  transition-behavior:allow-discrete}
.painel.aberto{opacity:1;transform:none;
  transition:opacity var(--mov-curto) var(--entra),transform var(--mov-curto) var(--entra),
             display var(--mov-curto) allow-discrete}
@starting-style{.painel.aberto{opacity:0;transform:translateY(-8px) scale(.985);}}

.painel h2{margin:0 0 9px;font-size:.63rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--marca-texto);font-weight:700;font-family:"Nunito Sans",sans-serif}
.grupo{padding-bottom:15px;margin-bottom:15px;border-bottom:1px solid var(--linha)}
.grupo:last-child{border-bottom:0;margin-bottom:0;padding-bottom:0}
.ctrl{margin-bottom:13px}
.ctrl:last-child{margin-bottom:0}
.ctrl>label{display:block;font-size:.79rem;color:var(--ink-2);margin-bottom:7px}
.ctrl input[type=range]{width:100%;accent-color:var(--marca);height:24px}
.seg{display:flex;gap:4px;background:var(--superficie);padding:4px;border-radius:22px}
.seg button{flex:1;border:0;background:none;color:var(--ink-2);font:inherit;font-size:.78rem;
  padding:9px 4px;border-radius:18px;cursor:pointer;min-height:38px}
.seg button[aria-pressed="true"]{background:var(--marca);color:var(--surface);font-weight:700}
.chave-linha{display:flex;justify-content:space-between;align-items:center;gap:10px;min-height:44px}
.chave-linha span{font-size:.82rem;color:var(--ink-2)}
.chave-linha small{color:var(--ink-3);font-size:.7rem}
.chave{width:48px;height:28px;border-radius:15px;border:0;background:var(--card);position:relative;
  cursor:pointer;flex-shrink:0}
.chave::after{content:"";position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;
  background:var(--surface);transition:transform .18s;box-shadow:0 1px 2px rgba(0,0,0,.28)}
.chave[aria-pressed="true"]{background:var(--marca)}
.chave[aria-pressed="true"]::after{transform:translateX(20px)}
.padrao{display:block;width:100%;min-height:44px;margin-top:14px;padding-top:14px;
  border:0;border-top:1px solid var(--linha);background:none;cursor:pointer;font:inherit;
  font-size:.78rem;color:var(--ink-3);text-align:center}
.padrao:hover{color:var(--marca-escura)}
.padrao[hidden]{display:none}

/* --------------------------------------------- ações do versículo */
.folha{position:fixed;left:50%;transform:translate(-50%,150%);bottom:16px;z-index:46;
  width:min(540px,calc(100vw - 24px));background:var(--surface);border:1px solid var(--linha);
  border-radius:20px;box-shadow:var(--sombra);padding:14px;
  transition:transform var(--mov) var(--sai),opacity var(--mov-curto) var(--sai)}
.folha{opacity:0}
.folha.aberta{transform:translate(-50%,0);opacity:1;
  transition:transform var(--mov) var(--entra),opacity var(--mov-curto) var(--entra)}
/* Referência e cores dividem a primeira linha: a cor é escolha rápida e
   frequente, e economiza uma faixa inteira estando aqui em cima. */
.folha-topo{display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:0 2px 2px}
.folha-topo b{font-size:.86rem;font-weight:800;color:var(--marca-texto);
  font-variant-numeric:tabular-nums;letter-spacing:.01em}
/* O trecho em linha própria e em duas linhas: é o que confirma o que se pegou,
   e cortá-lo em 44 caracteres numa linha só escondia justamente isso. */
.folha-trecho{margin:0 2px 10px;font-family:Literata,Georgia,serif;font-size:.86rem;
  line-height:1.45;color:var(--ink-2);display:-webkit-box;-webkit-line-clamp:2;
  -webkit-box-orient:vertical;overflow:hidden}

.folha-acoes{display:flex;flex-wrap:wrap;gap:8px}
.acao{flex:1 1 auto;display:flex;gap:8px;align-items:center;justify-content:center;
  background:var(--superficie);border:1px solid transparent;
  border-radius:14px;padding:0 14px;min-height:44px;cursor:pointer;color:var(--marca-escura);
  font:inherit;font-size:.82rem;font-weight:600;white-space:nowrap}
.acao:hover{background:var(--card)}
.acao i{font-style:normal;font-size:.95rem;flex-shrink:0;color:var(--marca-texto)}
/* tirar o destaque é o único que desfaz: fica ao lado, mas não se veste igual */
.acao--tirar{background:transparent;border-color:var(--linha);color:var(--ink-2);flex:0 1 auto}
.acao--tirar:hover{background:var(--superficie);color:var(--ink)}

/* ------------------------------------------------------ modo oração */
.a12-biblia.oracao .barra,.a12-biblia.oracao .gaveta,.a12-biblia.oracao .cap-cabeca,.a12-biblia.oracao .paginacao,
.a12-biblia.oracao .creditos,.a12-biblia.oracao .omitido{display:none}
.a12-biblia.oracao .v__n{display:none}
/* A gaveta é a primeira coluna da grade: escondê-la sem desfazer a grade
   deixava a leitura espremida nos 250px reservados a ela. */
.a12-biblia.oracao .corpo{grid-template-columns:1fr}
.a12-biblia.oracao .leitura{padding:64px 24px 30vh}
/* Sem cabeçalho e sem lateral, a coluna precisa se centrar sozinha e respirar. */
.a12-biblia.oracao .fluxo{margin:0 auto}
.a12-biblia.oracao .cap{padding-top:0}
.a12-biblia.oracao .cap-titulo{text-align:center;margin:0 0 30px;color:var(--ink-2);
  font-weight:600;font-size:1.05rem}
.a12-biblia.oracao h3.pericope{text-align:center;color:var(--ink-3);font-weight:600;
  margin:34px 0 14px}
.a12-biblia.oracao h3.pericope::before{margin:0 auto 10px}
.a12-biblia.oracao .sobrescrito{text-align:center}
@media (max-width:640px){.a12-biblia.oracao .leitura{padding:56px 20px 30vh}}
.a12-biblia.oracao .sair{display:flex}
.sair{display:none;position:fixed;top:14px;right:14px;z-index:48;align-items:center;gap:8px;
  background:var(--marca);color:var(--surface);border:0;border-radius:24px;padding:10px 18px;
  min-height:44px;cursor:pointer;font:inherit;font-size:.8rem;font-weight:600}

/* -------------------------------------------------- gaveta em modo lateral */
@media (min-width:901px){
  .gaveta--lateral{position:sticky;top:62px;height:calc(100vh - 62px);width:auto;z-index:1;
    transform:none;visibility:visible;box-shadow:none;
    /* recolher com `display:none` fazia a coluna do texto saltar de uma vez. A
       coluna da grade encolhe até zero e a lista é aparada por overflow; a
       largura interna fica fixa para o texto não re-quebrar durante o gesto.
       `visibility` só no fim, para o que está recolhido sair da ordem de foco —
       sem isso o Tab visitaria 73 links invisíveis. */
    overflow:hidden;transition:visibility 0s}
  .gaveta--lateral .gaveta-lista{width:250px;box-sizing:border-box}
  .gaveta--lateral .gaveta-topo{display:none}
  .a12-biblia.gaveta-oculta .corpo{grid-template-columns:0 1fr}
  .a12-biblia.gaveta-oculta .gaveta--lateral{visibility:hidden;
    transition:visibility 0s linear var(--mov)}
}

/* ------------------------------------------------------ esqueleto de carga */
/* Só onde uma interação de fato espera por dado: a lista de capítulos. O texto
   bíblico nunca passa por aqui — ele já vem pronto do servidor. */
.esq{display:block;border-radius:6px;background:var(--card);position:relative;overflow:hidden}
.esq--titulo{width:38%;height:.95rem}
.esq--linha{height:1rem;margin:12px 10px}
@media (prefers-reduced-motion:no-preference){
  .esq::after{content:"";position:absolute;inset:0;transform:translateX(-100%);
    background:linear-gradient(90deg,transparent,var(--superficie),transparent);
    animation:a12-brilho 1.15s infinite}
  @keyframes a12-brilho{100%{transform:translateX(100%)}}
}

/* O aviso de carga só existe quando a rede não deu conta de chegar antes do
   leitor. Ocupa a altura de uma linha, para o fim do texto não pular. */
.carregando{max-width:var(--coluna);margin:26px auto 40px;padding:0 2px}
.carregando .esq--linha{margin:0;height:1.1rem;width:44%}

/* ============================================================== anotações */
/* O destaque é fundo, não sublinhado: sublinhado disputa com o link e some no
   verso. A tinta é fixada, porque <mark> nativo traz cor própria e ela não
   passa em 7:1 no nosso fundo. */
.a12-biblia mark.anot{background:var(--dst-amarelo);color:var(--dst-tinta);
  padding:.08em 0;border-radius:0;cursor:pointer;box-decoration-break:clone;
  -webkit-box-decoration-break:clone}
/* a cor precisa da mesma especificidade da regra base, senão o amarelo vence */
.a12-biblia mark.anot--verde{background:var(--dst-verde)}
.a12-biblia mark.anot--azul{background:var(--dst-azul)}
/* a marca pode ser cortada em várias por causa das quebras de verso: só as
   pontas verdadeiras arredondam */
.anot--abre{border-top-left-radius:4px;border-bottom-left-radius:4px;padding-left:.12em}
.anot--fecha{border-top-right-radius:4px;border-bottom-right-radius:4px;padding-right:.12em}
/* quem tem nota ganha um traço embaixo, para se distinguir do destaque simples */
.anot--nota.anot--fecha{box-shadow:inset 0 -2px 0 var(--marca-texto)}
.a12-biblia.sem-anots mark.anot{background:transparent;color:inherit;box-shadow:none;
  padding:0;cursor:auto}

/* piscada de quem chegou por link de anotação */
@keyframes a12-piscar{0%,100%{background:transparent}30%{background:var(--superficie)}}
.piscando{animation:a12-piscar 1.6s ease}
@media (prefers-reduced-motion:reduce){.piscando{animation:none;outline:2px solid var(--foco);outline-offset:3px}}

/* --- as três cores na folha de seleção */
/* O disco encolhe para 22px, o alvo de toque continua 44: o que muda é o que se
   pinta, não o que se acerta com o dedo. Mesmo recurso da gaveta. */
.folha-cores{display:flex;align-items:center;gap:2px;margin-right:-8px}
.folha-cores .cor{width:44px;height:44px;border:0;background:none;cursor:pointer;
  padding:0;position:relative;border-radius:50%}
.folha-cores .cor::before{content:"";position:absolute;left:50%;top:50%;width:22px;height:22px;
  margin:-11px 0 0 -11px;border-radius:50%;border:1px solid var(--linha)}
.cor--amarelo::before{background:var(--dst-amarelo)}
.cor--verde::before{background:var(--dst-verde)}
.cor--azul::before{background:var(--dst-azul)}
/* selecionado é anel, não sinal de conferido: a marca de ✓ some em 22px */
.folha-cores .cor[aria-pressed="true"]::after{content:"";position:absolute;left:50%;top:50%;
  width:32px;height:32px;margin:-16px 0 0 -16px;border-radius:50%;border:2px solid var(--ink)}
.folha-cores .cor:focus-visible{outline:2px solid var(--foco);outline-offset:-6px}

/* --- o campo da nota */
/* Sempre aberto: escrever é o que se faz com um trecho que se guarda, e não
   deve custar um clique. Não recebe foco sozinho — no celular isso abriria o
   teclado a cada seleção. */
.folha-nota{position:relative;margin-bottom:10px}
.folha-nota textarea{width:100%;display:block;font:inherit;font-size:.92rem;line-height:1.5;
  color:var(--ink);background:var(--ground);border:1px solid var(--linha);
  border-radius:14px;padding:10px 12px;resize:vertical;min-height:62px}
.folha-nota textarea::placeholder{color:var(--ink-3)}
.folha-nota textarea:focus-visible{outline:2px solid var(--foco);outline-offset:1px}
/* "Guardado" aparece onde a pessoa está olhando, e sai sozinho */
/* afastado da alça de redimensionar, que mora no canto inferior direito */
.nota-estado{position:absolute;right:26px;bottom:7px;font-size:.7rem;font-weight:700;
  color:var(--marca-texto);background:var(--ground);padding:0 4px;
  opacity:0;transition:opacity .2s ease;pointer-events:none}
.nota-estado.visivel{opacity:1}
.nota-pe{display:flex;justify-content:flex-end;gap:8px}
.btn-fraco,.btn-forte{min-height:44px;padding:0 16px;border-radius:999px;cursor:pointer;
  font:inherit;font-weight:700;font-size:.85rem}
.btn-fraco{background:transparent;border:1px solid var(--linha);color:var(--ink-2)}
.btn-fraco:hover{background:var(--superficie);color:var(--ink)}
.btn-forte{background:var(--marca);border:1px solid var(--marca);color:var(--surface)}

/* --- contador no botão da barra */
#btn-anots{position:relative}
.conta-anots{position:absolute;top:2px;right:0;min-width:18px;height:18px;padding:0 4px;
  border-radius:9px;background:var(--marca);color:var(--surface);
  font-size:.66rem;font-weight:800;line-height:18px;text-align:center}

/* --- painel de anotações */
/* display de classe vence o atributo hidden, que tem a mesma especificidade e
   vem antes: sem esta linha o painel nasce aberto e vazio */
.a12-biblia [hidden]{display:none}
/* acima do fundo escurecido (50), como a gaveta: abaixo dele o painel aparecia
   na tela e não recebia clique nenhum */
.a12-biblia .anots:not([hidden]){display:flex;transform:none;opacity:1;
  transition:transform var(--mov) var(--entra),opacity var(--mov-curto) var(--entra),
             display var(--mov) allow-discrete}
@starting-style{.a12-biblia .anots:not([hidden]){transform:translateX(100%);opacity:0}}
.anots{transform:translateX(100%);opacity:0;
  transition:transform var(--mov) var(--sai),opacity var(--mov-curto) var(--sai),
             display var(--mov) allow-discrete;
  transition-behavior:allow-discrete;
  position:fixed;z-index:51;right:0;top:0;bottom:0;width:min(420px,100%);
  background:var(--surface);border-left:1px solid var(--linha);
  display:flex;flex-direction:column;box-shadow:var(--sombra)}
.anots-topo{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:14px 10px 14px 20px;border-bottom:1px solid var(--linha)}
.anots-topo h2{margin:0;font-family:Bitter,Georgia,serif;font-size:1.05rem;color:var(--ink)}
.anots-abas{display:flex;gap:4px;padding:10px 14px 0}
.anots-abas button{min-height:44px;padding:0 14px;border:0;background:transparent;
  border-radius:12px 12px 0 0;cursor:pointer;font:inherit;font-size:.85rem;font-weight:700;
  color:var(--ink-2)}
.anots-abas button[aria-selected="true"]{color:var(--ink);background:var(--superficie);
  box-shadow:inset 0 -3px 0 var(--marca)}
.anots-lista{flex:1;overflow-y:auto;padding:12px 14px}
.anots-lista ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.anot-item{display:flex;align-items:flex-start;gap:6px;border:1px solid var(--linha);
  border-radius:14px;background:var(--surface);overflow:hidden}
.anot-item{border-left:5px solid var(--dst-amarelo)}
.anot-item--verde{border-left-color:var(--dst-verde)}
.anot-item--azul{border-left-color:var(--dst-azul)}
.anot-ir{flex:1;display:grid;gap:3px;padding:10px 4px 10px 12px;text-decoration:none;min-height:44px}
.anot-ir b{font-size:.78rem;font-weight:800;color:var(--marca-texto);letter-spacing:.02em}
.anot-ir i{font-style:normal;font-size:.72rem;color:var(--ink-3)}
.anot-ir q{font-family:Literata,Georgia,serif;font-size:.9rem;line-height:1.45;color:var(--ink)}
.anot-nota{font-size:.82rem;line-height:1.45;color:var(--ink-2);
  border-left:2px solid var(--linha);padding-left:8px;margin-top:2px}
.anot-tirar{width:44px;min-height:44px;border:0;background:transparent;cursor:pointer;
  color:var(--ink-3);font-size:.9rem;border-radius:12px;flex-shrink:0}
.anot-tirar:hover{background:var(--superficie);color:var(--ink)}
.anots-vazio{margin:18px 4px;font-size:.9rem;line-height:1.6;color:var(--ink-2)}
.anots-pe{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:12px 14px;border-top:1px solid var(--linha)}
.chave-anots{display:flex;align-items:center;gap:8px;min-height:44px;cursor:pointer;
  font-size:.82rem;color:var(--ink-2)}
.chave-anots input{width:18px;height:18px;accent-color:var(--marca)}
.anots-aviso{margin:0;padding:0 14px 14px;font-size:.76rem;line-height:1.5;color:var(--ink-3)}
@media (max-width:520px){
  /* vira folha inferior: então entra e sai por baixo, não pelo lado */
  .anots{width:100%;top:auto;height:min(86vh,760px);border-left:0;
    border-top:1px solid var(--linha);border-radius:20px 20px 0 0;
    transform:translateY(100%)}
  @starting-style{.a12-biblia .anots:not([hidden]){transform:translateY(100%)}}
}