:root{
  --paper:      #FAFAF8;
  --paper-warm: #F0F1EC;
  --paper-edge: #E2E4DD;
  --ink:        #12161A;
  --ink-2:      #4E565F;
  --ink-3:      #79828C;
  --ribbon:     #14653F;
  --ribbon-bg:  #E6F0EA;
  --rule:       #DFE2DB;
  --mark:       #FBEBA6;

  --fs-read: 19px;
  --lh-read: 1.72;
  --col: min(74ch, 100%);
  --rail-w: 4.75rem;

  --ui: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Roboto Mono", ui-monospace, monospace;

  --sidebar-w: 17.5rem;
  --topbar-h: 4rem;
}
html[data-theme="dark"]{
  --paper:      #101316;
  --paper-warm: #191D22;
  --paper-edge: #262B31;
  --ink:        #EDECE6;
  --ink-2:      #A7AEB6;
  --ink-3:      #767E87;
  --ribbon:     #4FB088;
  --ribbon-bg:  #16241D;
  --rule:       #262B31;
  --mark:       #4E4519;
}

*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--ui); font-size:16px;
  -webkit-font-smoothing:antialiased;
}
button, input{ font:inherit; color:inherit; }
button{ background:none; border:0; cursor:pointer; }
::selection{ background:var(--ribbon); color:#fff; }

/* ---------- barra superior ---------- */
.top{
  position:fixed; inset:0 0 auto 0; height:var(--topbar-h); z-index:40;
  display:flex; align-items:center; gap:.5rem; padding:0 1rem;
  background:color-mix(in srgb, var(--paper) 92%, transparent);
  backdrop-filter:blur(16px);
  border-bottom:1px solid var(--rule);
}
.icon-btn{
  width:2.75rem; height:2.75rem; display:grid; place-items:center;
  border-radius:999px; color:var(--ink-2); flex:0 0 auto;
}
.icon-btn:hover{ background:var(--paper-warm); color:var(--ink); }
.icon-btn:disabled{ opacity:.3; cursor:default; }
.icon-btn:disabled:hover{ background:none; color:var(--ink-2); }
.menu-btn{ display:none; }
.brand{ font-size:1.0625rem; font-weight:600; letter-spacing:-.015em; white-space:nowrap;
  color:inherit; text-decoration:none; }
.brand:hover span{ opacity:.7; }
body.home .railwrap{ display:none; }
.brand span{ color:var(--ribbon); }
.top-spacer{ flex:1 1 auto; }

.search-wrap{ position:relative; flex:0 1 auto; }
.search{
  width:min(16rem, 34vw); height:2.75rem; padding:0 1rem 0 2.6rem;
  border:1px solid transparent; border-radius:999px;
  background:var(--paper-warm); font-size:.9375rem; outline:none;
}
.search::placeholder{ color:var(--ink-3); }
.search:focus{ border-color:var(--ribbon); background:var(--paper); }
.search-ico{ position:absolute; left:.95rem; top:50%; transform:translateY(-50%);
  color:var(--ink-3); pointer-events:none; display:flex; }

.seg{ display:flex; background:var(--paper-warm); border-radius:999px; padding:.2rem; flex:0 0 auto; }
.seg button{ padding:.45rem .9rem; border-radius:999px;
  font-size:.8125rem; font-weight:500; color:var(--ink-3); white-space:nowrap; }
.seg button[aria-pressed="true"]{ background:var(--ribbon); color:#fff; }

/* apoio */
.apoio-wrap{ position:relative; flex:0 0 auto; }
.apoio{
  display:flex; align-items:center; gap:.4rem; height:2.75rem; padding:0 1rem;
  border:1px solid var(--rule); border-radius:999px;
  font-size:.875rem; font-weight:500; color:var(--ink-2);
}
.apoio:hover,
.apoio[aria-expanded="true"]{ border-color:var(--ribbon); color:var(--ribbon); background:var(--ribbon-bg); }
.pop{
  position:absolute; top:calc(100% + .6rem); right:0; width:min(21rem, calc(100vw - 2rem));
  background:var(--paper); border:1px solid var(--rule); border-radius:1rem;
  padding:1.25rem; z-index:60;
  box-shadow:0 12px 32px -8px rgba(10,14,18,.22), 0 2px 6px rgba(10,14,18,.06);
}
html[data-theme="dark"] .pop{ box-shadow:0 12px 32px -8px rgba(0,0,0,.6); }
.pop-t{ font-size:.8125rem; font-weight:600; color:var(--ribbon); margin-bottom:.5rem; }
.pop-p{ font-size:.875rem; line-height:1.6; color:var(--ink-2); margin:0 0 1rem; }
.pix-key{ display:flex; align-items:center; gap:.7rem; width:100%;
  padding:.8rem .9rem; border-radius:.75rem; background:var(--paper-warm);
  border:1px solid var(--rule); text-align:left; }
.pix-key:hover{ border-color:var(--ribbon); }
.pix-lbl{ font-size:.625rem; font-weight:600; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-3); }
.pix-val{ font-family:var(--mono); font-size:.875rem; color:var(--ink); flex:1; }
.pix-cp{ font-size:.8125rem; font-weight:600; color:var(--ribbon); }

/* apoio no rodapé (celular) e na capa (sempre) */
.apoio-rodape{ display:none; text-align:right; margin:2.25rem 0 0; }
.apoio-capa{ margin:2.5rem 0 0; }
.apoio-sum{
  display:inline-flex; align-items:center; gap:.4rem; cursor:pointer; list-style:none;
  padding:.6rem 1rem; border:1px solid var(--rule); border-radius:999px;
  font-size:.875rem; font-weight:500; color:var(--ink-2);
}
.apoio-sum::-webkit-details-marker{ display:none; }
.apoio-sum:hover{ border-color:var(--ribbon); color:var(--ribbon); background:var(--ribbon-bg); }
details[open] .apoio-sum{ border-color:var(--ribbon); color:var(--ribbon); background:var(--ribbon-bg); }
.apoio-box{
  text-align:left; margin-top:.9rem; padding:1.25rem;
  background:var(--ribbon-bg); border-radius:1rem;
}
.apoio-box .pix-p{ font-size:.875rem; line-height:1.6; color:var(--ink-2); margin:0 0 1rem; }

/* ---------- lateral ---------- */
.side{
  position:fixed; top:var(--topbar-h); bottom:0; left:0; width:var(--sidebar-w);
  overflow-y:auto; overscroll-behavior:contain; z-index:30;
  border-right:1px solid var(--rule); background:var(--paper);
  padding:1rem .625rem 4rem;
}
.side-label{ font-size:.6875rem; font-weight:600; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-3); padding:1.5rem 1rem .5rem; }
.side-label:first-child{ padding-top:.5rem; }
.book{ display:block; width:100%; text-align:left;
  padding:.6rem 1rem; border-radius:999px;
  font-size:1rem; color:var(--ink-2); line-height:1.35; }
.book:hover{ background:var(--paper-warm); color:var(--ink); }
.book[aria-current="true"]{ background:var(--ribbon-bg); color:var(--ribbon); font-weight:600; }
.scrim{ position:fixed; inset:0; background:rgba(8,10,12,.45); z-index:25;
  opacity:0; pointer-events:none; transition:opacity .2s; }

/* ---------- área principal ---------- */
.main{ margin-left:var(--sidebar-w); margin-right:6rem; padding-top:var(--topbar-h); }
.stage{ max-width:min(72rem, 100%); margin:0 auto; padding:0 clamp(1.25rem,4vw,3.5rem) 7rem; }

.railwrap{
  position:fixed; right:1.25rem; top:50%; transform:translateY(-50%); z-index:35;
  display:flex; align-items:center; gap:.6rem;
}
.pod{
  display:flex; flex-direction:column; flex:0 0 auto; width:4.5rem;
  border-radius:1.25rem; overflow:hidden;
  background:color-mix(in srgb, var(--paper) 90%, transparent);
  backdrop-filter:blur(14px) saturate(1.3);
  border:1px solid var(--rule);
  box-shadow:0 10px 26px -10px rgba(10,14,18,.26), 0 1px 4px rgba(10,14,18,.06);
}
html[data-theme="dark"] .pod{ box-shadow:0 10px 26px -10px rgba(0,0,0,.7); }
.pod-arrow{
  height:2.25rem; display:grid; place-items:center; color:var(--ink-3);
}
.pod-arrow:hover{ background:var(--ribbon-bg); color:var(--ribbon); }
.pod-arrow:disabled{ opacity:.28; }
.pod-arrow:disabled:hover{ background:none; color:var(--ink-3); }
.rail-toggle{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  height:3.5rem; color:var(--ink);
  border-top:1px solid var(--rule); border-bottom:1px solid var(--rule);
}
.rail-toggle:hover,
.rail-toggle[aria-expanded="true"]{ background:var(--ribbon-bg); color:var(--ribbon); }
.rt-num{ font-size:1.375rem; font-weight:700; line-height:1; letter-spacing:-.02em; }
.rt-lbl{ font-size:.625rem; font-weight:600; color:var(--ink-3); margin-top:.15rem; }
.rail-toggle:hover .rt-lbl,
.rail-toggle[aria-expanded="true"] .rt-lbl{ color:var(--ribbon); }

.hint{
  position:absolute; right:0; top:calc(100% + .6rem);
  white-space:nowrap; padding:.55rem .85rem; border-radius:.75rem;
  background:var(--ink); color:var(--paper);
  font-size:.8125rem; font-weight:500; pointer-events:none;
  box-shadow:0 8px 22px -8px rgba(10,14,18,.4);
  animation:hintIn .35s ease both, hintOut .6s ease 4.5s forwards;
}
.hint::after{
  content:""; position:absolute; bottom:100%; right:1.75rem;
  border:5px solid transparent; border-bottom-color:var(--ink);
}
.hint.out{ animation:none !important; opacity:0; visibility:hidden;
           transition:opacity .3s ease; }
@keyframes hintOut{ to{ opacity:0; visibility:hidden; } }
@keyframes hintIn{ from{ opacity:0; transform:translateY(-.4rem); }
                   to{ opacity:1; transform:translateY(0); } }
@media (prefers-reduced-motion:reduce){
  .hint{ animation:hintOut .1s linear 4.5s forwards; }
}

.rail{
  width:min(21rem, calc(100vw - 7rem));
  max-height:min(60vh, calc(100vh - 8rem), 32rem);
  background:color-mix(in srgb, var(--paper) 92%, transparent);
  backdrop-filter:blur(16px) saturate(1.3);
  border:1px solid var(--rule); border-radius:1.125rem;
  box-shadow:0 18px 44px -16px rgba(10,14,18,.3), 0 2px 8px rgba(10,14,18,.07);
  overflow-y:auto; overflow-x:hidden; overscroll-behavior:contain;
  padding:.9rem 1rem 1rem;
  transition:opacity .16s ease, transform .16s ease;
}
html[data-theme="dark"] .rail{ box-shadow:0 18px 44px -16px rgba(0,0,0,.75); }
.rail[hidden]{ display:none; }
.rail-label{
  position:sticky; top:-.9rem; background:inherit; z-index:1;
  font-size:.625rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink-3); padding:.15rem 0 .6rem;
}
.chaps{ display:grid; grid-template-columns:repeat(auto-fill, minmax(2.4rem, 1fr)); gap:.3rem; }
.chap{ height:2.4rem; display:grid; place-items:center; border-radius:.6rem;
  font-size:.875rem; font-weight:500; color:var(--ink-2); }
.chap:hover{ background:var(--paper-warm); color:var(--ink); }
.chap[aria-current="true"]{ background:var(--ink); color:var(--paper); font-weight:600; }

.reader{ position:relative; padding-left:2.5rem; margin-top:3rem; }
.track{ position:absolute; left:.5rem; top:.5rem; bottom:0; width:4px;
  background:var(--paper-edge); border-radius:4px; }
.fill{ position:absolute; left:0; top:0; width:100%; height:0;
  background:var(--ribbon); border-radius:4px 4px 0 0;
  clip-path:polygon(0 0,100% 0,100% calc(100% - 8px),50% 100%,0 calc(100% - 8px));
  transition:height .12s linear; }
@media (prefers-reduced-motion:reduce){ .fill{ transition:none; } }

.bookname{ font-size:clamp(2rem,5vw,2.75rem); font-weight:700;
  letter-spacing:-.03em; line-height:1.1; margin:0; }
.chapline{ font-size:1.0625rem; font-weight:500; color:var(--ribbon); margin:.55rem 0 0;
  letter-spacing:-.01em; }
.sec{
  display:flex; align-items:center; gap:.75rem;
  font-size:.875rem; font-weight:600; letter-spacing:.02em; color:var(--ink-2);
  margin:2.25rem 0 1.1rem;
}
.sec:first-child{ margin-top:0; }
.sec::after{ content:""; flex:1; height:1px; background:var(--rule); }

.verses{ max-width:var(--col); margin:2.5rem 0 0; }
.v{ font-size:var(--fs-read); line-height:var(--lh-read); font-weight:400;
  margin:0 0 1.15rem; text-wrap:pretty; scroll-margin-top:9rem; letter-spacing:-.005em; }
.vn{ font-family:var(--mono); font-size:.72em; font-weight:500; color:var(--ribbon);
  vertical-align:.25em; margin-right:.45rem; cursor:pointer;
  padding:.1rem .25rem; border-radius:.3rem; line-height:1; }
.vn:hover{ color:#fff; background:var(--ribbon); }
.v.lit{ background:var(--mark); border-radius:.4rem; box-shadow:0 0 0 .5rem var(--mark); }

.pager{ display:flex; justify-content:space-between; gap:1rem;
  max-width:var(--col); margin:3.5rem 0 0; padding-top:1.5rem; border-top:1px solid var(--rule); }
.pg{ font-size:1rem; font-weight:500; color:var(--ink-2);
  padding:.7rem 1.15rem; border-radius:999px; }
.pg:hover{ background:var(--ribbon-bg); color:var(--ribbon); }
.pg[hidden]{ visibility:hidden; }

.hits{ max-width:var(--col); margin:3rem 0 0; }
.hits-head{ font-size:.875rem; font-weight:600; color:var(--ink-3);
  padding-bottom:1rem; border-bottom:1px solid var(--rule); }
.hit{ display:block; width:100%; text-align:left; padding:1.25rem .75rem;
  border-radius:.75rem; border-bottom:1px solid var(--rule); }
.hit:hover{ background:var(--paper-warm); }
.hit-ref{ font-family:var(--mono); font-size:.8125rem; font-weight:500; color:var(--ribbon); }
.hit-txt{ font-size:1.0625rem; line-height:1.6; margin:.45rem 0 0; color:var(--ink-2); }
.hit-txt mark{ background:var(--mark); color:var(--ink); border-radius:.2rem; padding:0 .12em; }

.note{ max-width:var(--col); font-size:1rem; line-height:1.65; color:var(--ink-2); }
.loading{ display:flex; align-items:center; gap:.6rem; margin-top:5rem;
  font-size:.9375rem; color:var(--ink-3); }
.dot{ width:.5rem; height:.5rem; border-radius:50%; background:var(--ribbon);
  animation:p 1.1s ease-in-out infinite; }
@keyframes p{ 0%,100%{opacity:.25} 50%{opacity:1} }
@media (prefers-reduced-motion:reduce){ .dot{ animation:none; opacity:.7; } }

/* ---------- rodapé ---------- */
.colophon{ margin:6rem 0 0; padding-top:2.5rem; border-top:1px solid var(--rule);
  max-width:var(--col); font-size:.9375rem; line-height:1.7; color:var(--ink-2); }
.colophon p{ margin:0 0 1rem; }
.colophon b{ color:var(--ink); font-weight:600; }
.col-h{ font-size:.75rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-3); margin:2rem 0 .7rem; }
.livre{ font-size:1.1875rem; line-height:1.5; color:var(--ink); font-weight:400;
  letter-spacing:-.015em; border-left:3px solid var(--ribbon); padding-left:1.1rem; }
.col-end{ font-size:.8125rem; color:var(--ink-3); margin:2rem 0 0 !important;
  padding-top:1.25rem; border-top:1px solid var(--rule); }

:focus-visible{ outline:3px solid var(--ribbon); outline-offset:2px; border-radius:.4rem; }

@media (max-width: 960px){
  .menu-btn{ display:grid; }
  .side{ transform:translateX(-100%); transition:transform .22s ease; }
  body.nav-open .side{ transform:none; }
  body.nav-open .scrim{ opacity:1; pointer-events:auto; }
  .main{ margin-left:0; }
}
@media (max-width: 820px){
  .main{ margin-right:0; }
  body.rail-open .scrim{ opacity:1; pointer-events:auto; }
  .rail{ z-index:36; }
  .railwrap{ right:.6rem; left:auto; top:auto;
             bottom:calc(15% + env(safe-area-inset-bottom, 0px)); transform:none; }
  .pod{ width:3.5rem; }
  .rail-toggle{ height:2.9rem; }
  .pod-arrow{ height:2.1rem; }
  .rt-num{ font-size:1.125rem; }
  .rt-lbl{ font-size:.5625rem; }
  .stage{ padding-bottom:9rem; }
  .hint{ top:auto; bottom:calc(100% + .6rem); }
  .hint::after{ bottom:auto; top:100%; border-bottom-color:transparent;
                border-top-color:var(--ink); }
  .hint{ font-size:.75rem; padding:.45rem .7rem; }
  .rail{ position:fixed; inset:auto 1rem auto 1rem; top:50%;
         transform:translateY(-50%);
         width:auto; max-width:24rem; margin:0 auto;
         max-height:min(70vh, calc(100vh - 7rem));
         padding:1rem 1.1rem 1.2rem; }
  body.rail-open .rail{ transform:translateY(-50%); }
}
@media (max-width: 680px){
  :root{ --fs-read:1.25rem; }
  .brand{ display:none; }
  .search-wrap{ flex:1 1 auto; }
  .search{ width:100%; font-size:1rem; height:2.6rem; padding-left:2.5rem; }

  /* ao buscar, a caixa toma a barra inteira */
  body.searching .brand,
  body.searching .seg,
  body.searching .menu-btn,
  body.searching #fsUp,
  body.searching #fsDown,
  body.searching #theme,
  body.searching .apoio-wrap{ display:none; }
  body.searching .search{ background:var(--paper); border-color:var(--ribbon); }
  .search-close{ display:none; }
  body.searching .search-close{ display:grid; }
  .top{ gap:.2rem; padding:0 .5rem; }
  .icon-btn{ width:2.5rem; height:2.5rem; }
  .apoio-wrap{ display:none; }
  .apoio-rodape{ display:block; }
  .stage{ padding:0 1.25rem 9rem; }
  .reader{ padding-left:1.9rem; }
  .track{ left:.25rem; }
}
@media (prefers-reduced-motion:reduce){ .side{ transition:none; } }

.grade{ display:grid; gap:.4rem; margin:2.5rem 0 0;
  grid-template-columns:repeat(auto-fill,minmax(min(16rem,100%),1fr)); }
.ch{ display:flex; align-items:baseline; gap:.6rem; padding:.6rem .8rem;
  border-radius:.6rem; text-decoration:none; color:var(--ink-2); border:1px solid transparent; }
.ch:hover{ background:var(--paper-warm); border-color:var(--rule); color:var(--ink); }
.ch b{ font-family:var(--mono); font-size:.8125rem; color:var(--ribbon); min-width:1.9rem; }
.ch span{ font-size:.9375rem; line-height:1.35; }
.capa{ max-width:var(--col); margin-top:2.5rem; font-size:1rem; line-height:1.75; color:var(--ink-2); }
.capa p{ margin:0 0 1.1rem; }
.capa b{ color:var(--ink); font-weight:600; }
.capa code{ font-family:var(--mono); font-size:.9em; color:var(--ink); }
.capa .livre{ font-size:1.1875rem; line-height:1.55; color:var(--ink); font-weight:400;
  letter-spacing:-.015em; border-left:3px solid var(--ribbon); padding-left:1.1rem; }
.indice-wrap{ max-width:var(--col); margin-top:2.5rem; }
.indice{ font-size:1rem; line-height:2.1; color:var(--ink-2); margin:0 0 1.5rem; }
.indice a{ color:var(--ink); text-decoration:none; border-bottom:1px solid var(--rule); }
.indice a:hover{ color:var(--ribbon); border-color:var(--ribbon); }
a.pg{ text-decoration:none; display:inline-block; }

body.home .colophon{ display:none; }