/* Páginas de contenido estático (Biblia, versículos por emoción y estudios).
   Reutilizan landing.css; aquí solo lo propio de una página de lectura.
   Misma regla que la app (D99): títulos en la fuente del sistema, serif solo para el texto bíblico. */
.page { padding-block: 48px 104px; }
.page-narrow { max-width: 720px; margin-inline: auto; }
.breadcrumbs ol { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 32px; padding: 0; list-style: none; font-size: 13px; color: var(--muted); }
.breadcrumbs li + li::before { content: '›'; margin-right: 6px; }
.breadcrumbs a:hover { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
.page .label { margin-bottom: 4px; }
.page h1 { font: 700 clamp(36px, 5vw, 56px)/1.07 var(--display); letter-spacing: -.03em; margin: 4px 0 20px; }
.page h2 { font: 700 clamp(24px, 2.8vw, 32px)/1.15 var(--display); letter-spacing: -.02em; margin: 56px 0 14px; }
.page h2.verse-ref { font: 600 15px/20px var(--ui); letter-spacing: -.01em; color: var(--text); margin: 0; }
.page h3 { font: 600 19px/1.3 var(--ui); letter-spacing: -.015em; margin: 0; }
.page p { margin: 0 0 16px; }
.page .lead { margin-bottom: 28px; }
/* Texto bíblico en serif, sin caja */
.verse-list { margin: 32px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.verse-list > li { padding: 28px 0; border-bottom: 1px solid var(--line); }
.verse-list blockquote, .passage-text { margin: 12px 0 4px; font: 400 21px/1.55 var(--serif); letter-spacing: 0; }
.passage-text sup { font: 600 12px/1 var(--ui); color: var(--muted); margin-right: 4px; }
.passage-text p { margin-bottom: 10px; }
.passage-text p:target { background: var(--accent-soft); border-radius: 8px; box-shadow: 0 0 0 6px var(--accent-soft); }
/* Listas de enlaces: grupo blanco con filas y separadores interiores, como en la app */
.card-list { margin: 32px 0 0; padding: 0 24px; list-style: none; display: grid; gap: 0; border-radius: 20px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.card-list > li { padding: 20px 0; }
.card-list > li + li { border-top: 1px solid var(--line); }
.card-list a { display: block; }
.card-list a:hover h3 { color: var(--accent); }
.card-list p { margin: 6px 0 0; }
.book-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); column-gap: 24px; }
.book-grid > li + li { border-top: 0; }
.book-grid > li { border-bottom: 1px solid var(--line); }
.book-grid h3 { font-size: 17px; }
.note { margin-top: 40px; padding: 18px 20px; border-radius: 16px; background: var(--panel); color: var(--muted); font-size: 15px; line-height: 22px; }
.draft-note { background: var(--accent-soft); color: var(--text); margin: 0 0 28px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 0; padding: 0; list-style: none; }
.page-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 40px; }
.sources { padding-left: 20px; }
.sources li { margin-bottom: 8px; }
.sources a { color: var(--accent); }
.sources a:hover { text-decoration: underline; text-underline-offset: 3px; }
/* Pie de las páginas: misma estructura que la portada */
.page-footer-links { display: flex; flex-wrap: wrap; gap: 0 4px; }
@media (max-width: 734px) {
  .page { padding-block: 32px 72px; }
  .verse-list blockquote, .passage-text { font-size: 19px; }
  .page-actions .button { flex: 1 1 100%; }
  .card-list { padding: 0 20px; }
}