/* ============================================================
   A Bíblia Sagrada da Página Seguinte — estilos
   Paleta: azul profundo, dourado suave, verde-petróleo, marfim, coral
   ============================================================ */
:root{
  --azul:#14233f;
  --azul-2:#1d3357;
  --dourado:#c9a227;
  --dourado-suave:#b98a3e;
  --verde:#2f7d76;
  --verde-escuro:#245f5a;
  --marfim:#f7f3e9;
  --coral:#c56b5c;

  --bg:#f4f1ea;
  --surface:#ffffff;
  --text:#1e2733;
  --text-soft:#54606f;
  --line:#e4ddcd;
  --shadow:0 6px 24px rgba(20,35,63,.08);
  --shadow-lg:0 18px 50px rgba(20,35,63,.16);
  --radius:16px;
  --radius-sm:10px;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,"Times New Roman",serif;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --read-bg:var(--marfim);
  --read-text:#232b2b;
  --maxw:1120px;
  --fs:1.16rem; /* fonte de leitura */
}
body[data-theme="sepia"]{ --bg:#efe6d3; --surface:#f6efe0; --read-bg:#f3ead6; --read-text:#4a3b27; --text:#4a3b27; --text-soft:#7a6a52; --line:#e0d3b8; }
body[data-theme="escuro"]{ --bg:#0f1522; --surface:#182136; --read-bg:#141b2b; --read-text:#e7e3d6; --text:#e7e3d6; --text-soft:#a2acbd; --line:#2a3550; --shadow:0 6px 24px rgba(0,0,0,.4); --shadow-lg:0 18px 50px rgba(0,0,0,.5); }
body[data-fontsize="p"]{ --fs:1.02rem; }
body[data-fontsize="m"]{ --fs:1.16rem; }
body[data-fontsize="g"]{ --fs:1.34rem; }
body[data-fontsize="xg"]{ --fs:1.55rem; }
body[data-spacing="amplo"] .reader-text p{ line-height:2.15; }

*{box-sizing:border-box}
/* garante que o atributo `hidden` sempre esconda o elemento,
   mesmo quando a classe define display:flex (ex.: cookie-banner, header-search) */
[hidden]{display:none !important}
html{scroll-behavior:smooth}
body{
  margin:0; font-family:var(--sans); color:var(--text);
  background:var(--bg); line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} *{animation-duration:.001ms!important; transition-duration:.001ms!important} }
a{color:var(--verde-escuro); text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%; display:block}
h1,h2,h3{line-height:1.2; margin:0 0 .5em}
.skip-link{position:absolute; left:-999px; top:0; background:var(--azul); color:#fff; padding:10px 16px; z-index:200; border-radius:0 0 8px 0}
.skip-link:focus{left:0}
:focus-visible{outline:3px solid var(--verde); outline-offset:2px; border-radius:4px}

/* ---------- Botões ---------- */
.btn{display:inline-flex; align-items:center; gap:.5em; border:0; cursor:pointer; font:inherit; font-weight:600;
  padding:.72em 1.25em; border-radius:999px; transition:transform .12s ease, background .2s; text-decoration:none}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--verde); color:#fff}
.btn-primary:hover{background:var(--verde-escuro); text-decoration:none}
.btn-gold{background:var(--dourado-suave); color:#fff}
.btn-gold:hover{background:#a2762f; text-decoration:none}
.btn-ghost{background:transparent; color:var(--text); border:1.5px solid var(--line)}
.btn-ghost:hover{border-color:var(--verde); text-decoration:none}
.btn-block{width:100%; justify-content:center}
.icon-btn{background:transparent; border:0; color:inherit; font-size:1.15rem; cursor:pointer; padding:.4em .5em; border-radius:10px; line-height:1}
.icon-btn:hover{background:rgba(127,127,127,.12)}

/* ---------- Header ---------- */
.site-header{position:sticky; top:0; z-index:100; background:var(--azul); color:#fff; box-shadow:0 2px 12px rgba(0,0,0,.14)}
.header-inner{max-width:var(--maxw); margin:0 auto; display:flex; align-items:center; gap:.5rem; padding:.6rem 1rem}
.brand{display:flex; align-items:center; gap:.5rem; color:#fff; font-weight:700; font-size:1.12rem; letter-spacing:.2px}
.brand:hover{text-decoration:none}
.brand-mark{color:var(--dourado); font-size:1.25em}
.main-nav{display:flex; gap:.2rem; margin-left:1rem; flex:1}
.main-nav a{color:#e7ecf5; padding:.5rem .8rem; border-radius:8px; font-weight:500; font-size:.98rem}
.main-nav a:hover{background:rgba(255,255,255,.1); text-decoration:none}
.header-actions{display:flex; align-items:center; gap:.1rem; margin-left:auto}
.header-actions .icon-btn{color:#fff}
.menu-toggle{display:none; color:#fff}
.header-search{max-width:var(--maxw); margin:0 auto; display:flex; gap:.5rem; padding:0 1rem .7rem}
.header-search input{flex:1; padding:.7rem 1rem; border-radius:999px; border:0; font:inherit}

@media (max-width:860px){
  .menu-toggle{display:inline-block}
  .main-nav{position:absolute; top:100%; left:0; right:0; flex-direction:column; background:var(--azul-2); padding:.5rem; gap:.1rem; display:none; box-shadow:var(--shadow-lg)}
  .main-nav.open{display:flex}
  .brand-text{font-size:.98rem}
}

/* ---------- Layout base ---------- */
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 1rem}
.section{padding:2.4rem 0}
.section h2{font-size:1.5rem; color:var(--azul)}
body[data-theme="escuro"] .section h2, body[data-theme="escuro"] .brand-hero{color:#fff}
.eyebrow{text-transform:uppercase; letter-spacing:.12em; font-size:.75rem; font-weight:700; color:var(--dourado-suave); margin-bottom:.4rem}

/* ---------- Hero ---------- */
.hero{background:radial-gradient(120% 120% at 50% -20%, var(--azul-2), var(--azul) 70%); color:#fff; padding:3.2rem 1rem 3.6rem; text-align:center}
.hero .brand-hero{font-family:var(--serif); font-size:clamp(1.9rem,4.6vw,3rem); margin:.2rem auto .3rem; max-width:15ch}
.hero .slogan{color:#cdd6e6; font-size:1.05rem; margin:0 auto 1.6rem; max-width:40ch}
.searchbox{max-width:640px; margin:0 auto; background:#fff; border-radius:var(--radius); box-shadow:var(--shadow-lg); padding:1.1rem; text-align:left}
.searchbox label{display:block; font-weight:700; color:var(--azul); margin-bottom:.5rem; font-size:1.05rem}
.searchbox .search-row{display:flex; gap:.5rem}
.searchbox input{flex:1; padding:.85rem 1rem; border:1.5px solid var(--line); border-radius:999px; font:inherit; color:var(--text)}
.search-suggest{display:flex; flex-wrap:wrap; gap:.4rem; margin-top:.8rem}
.chip{background:var(--marfim); color:var(--azul); border:1px solid var(--line); border-radius:999px; padding:.35rem .8rem; font-size:.85rem; cursor:pointer}
.chip:hover{background:#fff; border-color:var(--verde)}

/* ---------- Cards ---------- */
.grid{display:grid; gap:1rem}
.grid-verse{grid-template-columns:1fr}
.card{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); padding:1.2rem}
.section-head{display:flex; align-items:baseline; justify-content:space-between; gap:1rem; margin-bottom:1.1rem}
.section-head a{font-weight:600; font-size:.92rem; white-space:nowrap}

/* Versículo do dia */
.vod{display:grid; grid-template-columns:1fr; gap:1rem; background:linear-gradient(135deg,var(--azul),var(--azul-2)); color:#fff; border:0}
.vod .vod-ref{color:var(--dourado); font-weight:700; letter-spacing:.03em}
.vod blockquote{font-family:var(--serif); font-size:clamp(1.3rem,3vw,1.8rem); line-height:1.4; margin:.2rem 0 .4rem}
.vod .vod-note{color:#cdd6e6; font-size:.95rem}
.vod .vod-actions{display:flex; flex-wrap:wrap; gap:.5rem; margin-top:.6rem}

/* Temas emocionais */
.themes-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.theme-card{display:flex; flex-direction:column; gap:.3rem; text-align:left; border-left:5px solid var(--accent,var(--verde)); text-decoration:none; color:var(--text)}
.theme-card:hover{transform:translateY(-2px); text-decoration:none; box-shadow:var(--shadow-lg)}
.theme-card .emoji{font-size:1.6rem}
.theme-card strong{color:var(--azul); font-size:1.05rem}
body[data-theme="escuro"] .theme-card strong{color:#fff}
.theme-card span{color:var(--text-soft); font-size:.85rem}

/* Livros */
.book-group{margin-bottom:1.6rem}
.book-group h3{color:var(--dourado-suave); font-size:1rem; text-transform:uppercase; letter-spacing:.08em; border-bottom:1px solid var(--line); padding-bottom:.4rem}
.books-grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}
.book-tile{display:flex; flex-direction:column; gap:.15rem; padding:.85rem 1rem; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-sm); color:var(--text)}
.book-tile:hover{border-color:var(--verde); text-decoration:none; box-shadow:var(--shadow)}
.book-tile b{color:var(--azul); font-size:1rem}
body[data-theme="escuro"] .book-tile b{color:#fff}
.book-tile small{color:var(--text-soft)}

/* Continue lendo */
.continue{display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; background:var(--verde); color:#fff; border:0}
.continue .btn-ghost{border-color:rgba(255,255,255,.6); color:#fff}

/* ---------- Leitor ---------- */
.reader{max-width:760px; margin:0 auto; padding:1.5rem 1rem 3rem}
.reader-head{text-align:center; margin-bottom:1.2rem}
.reader-head .book-name{font-family:var(--serif); font-size:clamp(1.6rem,4vw,2.2rem); color:var(--azul); margin:0}
body[data-theme="escuro"] .reader-head .book-name{color:#fff}
.reader-head .chap-num{color:var(--dourado-suave); font-weight:700; letter-spacing:.1em; text-transform:uppercase; font-size:.85rem}
.reader-intro{background:var(--surface); border:1px solid var(--line); border-left:4px solid var(--dourado-suave); border-radius:var(--radius-sm); padding:.9rem 1.1rem; color:var(--text-soft); font-size:.96rem; margin-bottom:1.4rem}
.chap-select{display:flex; gap:.5rem; justify-content:center; align-items:center; margin-bottom:1rem; flex-wrap:wrap}
.chap-select select{padding:.5rem .7rem; border-radius:8px; border:1.5px solid var(--line); font:inherit; background:var(--surface); color:var(--text)}
.progress{height:4px; background:var(--line); border-radius:2px; overflow:hidden; margin:0 auto 1.4rem; max-width:760px}
.progress > i{display:block; height:100%; background:var(--verde)}

.reader-text{background:var(--read-bg); color:var(--read-text); border-radius:var(--radius); padding:clamp(1.1rem,4vw,2.2rem); box-shadow:var(--shadow); font-family:var(--serif); font-size:var(--fs)}
.reader-text p{margin:0 0 1.1rem; line-height:1.9; text-align:justify; hyphens:auto}
.v{cursor:pointer; border-radius:4px; transition:background .15s; padding:0 1px}
.v:hover{background:rgba(47,125,118,.14)}
.v.sel{background:rgba(201,162,39,.28)}
.v.target{background:rgba(197,107,92,.25); box-shadow:0 0 0 2px rgba(197,107,92,.35)}
.v .vn{font-family:var(--sans); font-size:.62em; color:var(--dourado-suave); font-weight:700; vertical-align:super; margin-right:2px; user-select:none}
.v.hl{background:rgba(201,162,39,.22)}

.reader-nav{display:flex; justify-content:space-between; gap:.5rem; margin-top:1.6rem}
.reader-nav .btn{flex:1; justify-content:center}
.reader-refs{margin-top:2rem}
.reader-refs h3{color:var(--azul); font-size:1.1rem}
body[data-theme="escuro"] .reader-refs h3{color:#fff}

/* Painel de seleção de versículo */
.verse-panel{position:fixed; left:50%; bottom:1rem; transform:translateX(-50%) translateY(150%); z-index:120;
  background:var(--surface); border:1px solid var(--line); border-radius:16px; box-shadow:var(--shadow-lg);
  padding:.6rem; display:flex; gap:.3rem; flex-wrap:wrap; justify-content:center; transition:transform .22s ease; max-width:calc(100% - 1.5rem)}
.verse-panel.show{transform:translateX(-50%) translateY(0)}
.verse-panel button{display:flex; flex-direction:column; align-items:center; gap:.15rem; background:transparent; border:0; cursor:pointer; color:var(--text); font-size:.72rem; padding:.4rem .55rem; border-radius:10px}
.verse-panel button:hover{background:var(--marfim)}
.verse-panel .vp-emoji{font-size:1.15rem}

/* ---------- Página temática / artigo ---------- */
.article-head{background:linear-gradient(135deg,var(--azul),var(--azul-2)); color:#fff; padding:2.6rem 1rem}
.article-head .wrap{max-width:800px}
.article-head h1{font-family:var(--serif); font-size:clamp(1.8rem,4.5vw,2.6rem)}
.article-head .lead{color:#cdd6e6; font-size:1.1rem; max-width:60ch}
.prose{max-width:760px; margin:0 auto; padding:1.6rem 1rem 3rem}
.prose p{margin:0 0 1.1rem; font-size:1.06rem}
.prose h2{color:var(--azul); margin-top:1.6rem}
body[data-theme="escuro"] .prose h2{color:#fff}
.prose h3{color:var(--verde-escuro)}
.passage{background:var(--surface); border:1px solid var(--line); border-left:4px solid var(--accent,var(--verde)); border-radius:var(--radius-sm); padding:1rem 1.2rem; margin:0 0 1rem}
.passage .p-ref{font-weight:700; color:var(--verde-escuro); font-size:.9rem}
.passage blockquote{font-family:var(--serif); font-size:1.15rem; margin:.3rem 0 .5rem; line-height:1.6; color:var(--read-text)}
.passage .p-actions{display:flex; gap:.4rem; flex-wrap:wrap}
.passage .p-actions button{font-size:.8rem; padding:.3rem .7rem}
.breadcrumb{font-size:.85rem; color:var(--text-soft); margin-bottom:1rem}
.breadcrumb a{color:var(--text-soft)}
.faq details{border:1px solid var(--line); border-radius:var(--radius-sm); padding:.4rem 1rem; margin-bottom:.6rem; background:var(--surface)}
.faq summary{cursor:pointer; font-weight:600; padding:.5rem 0; color:var(--azul)}
body[data-theme="escuro"] .faq summary{color:#fff}
.callout{background:rgba(197,107,92,.1); border:1px solid var(--coral); border-radius:var(--radius-sm); padding:1rem 1.2rem; margin:1.2rem 0; font-size:.95rem}

/* ---------- Busca ---------- */
.search-results .result{display:block; padding:1rem 1.1rem; border:1px solid var(--line); border-radius:var(--radius-sm); margin-bottom:.7rem; background:var(--surface); color:var(--text)}
.search-results .result:hover{border-color:var(--verde); text-decoration:none; box-shadow:var(--shadow)}
.search-results .result .r-ref{color:var(--verde-escuro); font-weight:700; font-size:.9rem}
.search-results .result .r-text{font-family:var(--serif)}
.search-results mark{background:rgba(201,162,39,.4); color:inherit; border-radius:3px}
.search-tabs{display:flex; gap:.4rem; margin-bottom:1.2rem; flex-wrap:wrap}

/* ---------- Anúncios ---------- */
.ad-slot{margin:1.6rem auto; text-align:center; min-height:90px; max-width:760px}
.ad-slot::before{content:"Publicidade"; display:block; font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; color:var(--text-soft); margin-bottom:.3rem}

/* ---------- Sheets / diálogos ---------- */
.sheet{position:fixed; inset:0; z-index:150; background:rgba(10,16,28,.5); display:flex; align-items:flex-end; justify-content:center}
.sheet[hidden]{display:none}
.sheet-panel{background:var(--surface); width:100%; max-width:480px; border-radius:20px 20px 0 0; padding:1.2rem 1.3rem 2rem; box-shadow:var(--shadow-lg)}
@media (min-width:600px){ .sheet{align-items:center} .sheet-panel{border-radius:20px} }
.sheet-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:1rem}
.sheet-head h2{margin:0; font-size:1.2rem; color:var(--azul)}
body[data-theme="escuro"] .sheet-head h2{color:#fff}
.a11y-group{display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:1.1rem}
.a11y-group > span{color:var(--text-soft); font-size:.95rem}
.seg{display:inline-flex; border:1.5px solid var(--line); border-radius:10px; overflow:hidden}
.seg button{background:var(--surface); border:0; padding:.5rem .8rem; cursor:pointer; color:var(--text); font:inherit; border-right:1px solid var(--line)}
.seg button:last-child{border-right:0}
.seg button.active{background:var(--verde); color:#fff}
.seg [data-fontsize="p"]{font-size:.8rem}.seg [data-fontsize="m"]{font-size:1rem}.seg [data-fontsize="g"]{font-size:1.2rem}.seg [data-fontsize="xg"]{font-size:1.4rem}

/* Cookies */
.cookie-banner{position:fixed; left:1rem; right:1rem; bottom:1rem; z-index:160; background:var(--azul); color:#fff; border-radius:var(--radius); padding:1rem 1.2rem; box-shadow:var(--shadow-lg); display:flex; gap:1rem; align-items:center; flex-wrap:wrap; max-width:720px; margin:0 auto}
.cookie-banner p{margin:0; flex:1; min-width:230px; font-size:.9rem; color:#e7ecf5}
.cookie-banner a{color:var(--dourado)}
.cookie-banner .btn-ghost{color:#fff; border-color:rgba(255,255,255,.55)}
.cookie-banner .btn-ghost:hover{border-color:#fff; background:rgba(255,255,255,.1)}
.cookie-actions{display:flex; gap:.5rem}

/* Toast */
.toast{position:fixed; left:50%; bottom:1.4rem; transform:translateX(-50%); background:var(--azul); color:#fff; padding:.7rem 1.2rem; border-radius:999px; z-index:200; box-shadow:var(--shadow-lg); font-size:.92rem}
.toast[hidden]{display:none}

/* Gerador de imagem */
.share-studio{display:grid; grid-template-columns:1fr; gap:1.2rem}
@media(min-width:820px){ .share-studio{grid-template-columns:minmax(0,1fr) 300px} }
.share-preview{display:flex; justify-content:center; align-items:flex-start}
.share-preview canvas{width:100%; max-width:420px; height:auto; border-radius:12px; box-shadow:var(--shadow-lg)}
.share-controls{display:flex; flex-direction:column; gap:1rem}
.share-controls .field label{display:block; font-weight:600; margin-bottom:.4rem; color:var(--azul); font-size:.92rem}
body[data-theme="escuro"] .share-controls .field label{color:#fff}
.swatches{display:flex; gap:.4rem; flex-wrap:wrap}
.swatch{width:34px; height:34px; border-radius:8px; border:2px solid transparent; cursor:pointer}
.swatch.active{border-color:var(--verde); box-shadow:0 0 0 2px #fff inset}
.share-social{display:flex; gap:.5rem; flex-wrap:wrap; margin-top:.4rem}

/* Loading / erros */
.loading{text-align:center; padding:3rem 1rem; color:var(--text-soft)}
.spinner{width:34px; height:34px; border:3px solid var(--line); border-top-color:var(--verde); border-radius:50%; margin:0 auto 1rem; animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.empty{text-align:center; padding:2.4rem 1rem; color:var(--text-soft)}

/* ---------- Footer ---------- */
.site-footer{background:var(--azul); color:#dfe6f2; margin-top:2rem}
.footer-inner{max-width:var(--maxw); margin:0 auto; padding:2.4rem 1rem 1.4rem; display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:1.6rem}
.footer-col h3{color:#fff; font-size:.9rem; text-transform:uppercase; letter-spacing:.08em; margin-bottom:.8rem}
.footer-col a{display:block; color:#c3cde0; padding:.2rem 0; font-size:.92rem}
.footer-col a:hover{color:#fff}
.footer-brand{color:#fff; font-weight:700}
.footer-tag{color:#a9b6d0; font-style:italic; margin-top:.4rem}
.footer-legal{border-top:1px solid rgba(255,255,255,.12); text-align:center; padding:1rem; font-size:.8rem; color:#93a1bf}
@media(max-width:700px){ .footer-inner{grid-template-columns:1fr 1fr} .footer-col:first-child{grid-column:1/-1} }

.interp-answer{background:var(--surface); border:1px solid var(--line); border-left:4px solid var(--verde); border-radius:var(--radius-sm); padding:1rem 1.2rem; margin-top:1rem; white-space:pre-wrap}
.interp-answer h4{color:var(--azul); margin:.2rem 0 .6rem}
body[data-theme="escuro"] .interp-answer h4{color:#fff}