/* ═════════════════════════════════════════════════════════════════
   Páginas de lectura /biblia/* (las genera tools/capitulos.js).
   Va la ÚLTIMA hoja, tras devocional-v4.css: reutiliza su lenguaje
   («Noche plata») y solo añade lo que un devocional no tiene: el texto
   del capítulo con sus números, el estudio, la rejilla de capítulos y
   la lista de libros.
   ═════════════════════════════════════════════════════════════════ */

/* ── Texto del capítulo ── */
html body .cap-intro{ font:400 15px/1.7 var(--v4-ui) !important; color:var(--v4-muted) !important; margin:0 0 36px !important; }
html body .cap-versos{ list-style:none; margin:0 0 48px; padding:0; counter-reset:none; }
html body .cap-versos li{
  font:400 clamp(19px,2.2vw,22px)/1.75 var(--v4-serif); color:var(--v4-ink);
  margin:0 0 14px; padding:4px 0 4px 44px; position:relative; scroll-margin-top:84px; border-radius:6px;
}
html body .cap-versos li .n{
  position:absolute; left:0; top:12px; width:32px; text-align:right;
  font:500 11px/1 var(--v4-mono); letter-spacing:.06em; color:var(--v4-muted); text-decoration:none;
}
html body .cap-versos li .n:hover{ color:var(--v4-gold); }
html body .cap-versos li.clave{ color:var(--v4-gold-soft); }
html body .cap-versos li.clave .n{ color:var(--v4-gold); }
html body .cap-versos li:target{ background:color-mix(in srgb, var(--v4-gold) 9%, transparent); }

/* ── Botón principal fuera del hero (mismo que .audio-cta) ── */
html body .cap-escuchar{ margin:0 0 56px; display:flex; gap:12px; flex-wrap:wrap; align-items:center; }
html body .cap-escuchar small{ font:400 13px/1.5 var(--v4-ui); color:var(--v4-muted); }

/* ── Estudio ── */
html body .cap-estudio{ border-top:1px solid var(--v4-line); padding-top:44px; margin:0 0 48px; }
html body .cap-eyebrow{
  display:flex; align-items:center; gap:12px; margin:0 0 14px;
  font:500 10.5px/1.4 var(--v4-mono); letter-spacing:.16em; text-transform:uppercase; color:var(--v4-muted);
}
html body .cap-eyebrow::before{ content:''; width:28px; height:1px; background:var(--v4-gold); }
html body .cap-estudio h2{
  font:400 clamp(30px,4vw,42px)/1.08 var(--v4-serif) !important; letter-spacing:-.01em; margin:0 0 22px !important;
  color:var(--v4-ink) !important; background:none !important; -webkit-text-fill-color:currentColor !important; border:0 !important; padding:0 !important;
}
html body .cap-estudio h3{
  font:500 11px/1.4 var(--v4-mono) !important; letter-spacing:.16em; text-transform:uppercase; color:var(--v4-gold) !important;
  margin:34px 0 14px !important; background:none !important; -webkit-text-fill-color:currentColor !important;
}
html body .cap-estudio p{ font:400 17px/1.8 var(--v4-ui); color:#C5C8D2; margin:0 0 18px; }
html body .cap-idea{ font:400 italic clamp(22px,2.6vw,27px)/1.45 var(--v4-serif) !important; color:var(--v4-ink) !important; margin:0 0 26px !important; }
html body .cap-ficha{ display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:1px; margin:0 0 8px; background:var(--v4-line); border:1px solid var(--v4-line); border-radius:12px; overflow:hidden; }
html body .cap-ficha div{ background:var(--v4-bg); padding:14px 16px; }
html body .cap-ficha dt{ font:500 10px/1.3 var(--v4-mono); letter-spacing:.14em; text-transform:uppercase; color:var(--v4-muted); margin:0 0 6px; }
html body .cap-ficha dd{ font:400 14.5px/1.5 var(--v4-ui); color:var(--v4-ink); margin:0; }
html body .cap-palabras{ list-style:none; margin:0; padding:0; display:grid; gap:12px; }
html body .cap-palabras li{ border:1px solid var(--v4-line); border-radius:12px; padding:16px 18px; background:var(--v4-bg-2); }
html body .cap-palabras .es{ font:400 22px/1.2 var(--v4-serif); color:var(--v4-ink); }
html body .cap-palabras .or{ font:500 12px/1.4 var(--v4-mono); color:var(--v4-gold); margin-left:10px; letter-spacing:.04em; }
html body .cap-palabras p{ font-size:15px !important; line-height:1.7 !important; margin:8px 0 0 !important; }
html body .cap-voz{ border-left:2px solid var(--v4-gold); padding:4px 0 4px 20px; margin:0 0 18px; }
html body .cap-voz p{ font:400 italic 20px/1.55 var(--v4-serif) !important; color:var(--v4-ink) !important; margin:0 0 6px !important; }
html body .cap-voz cite{ font:500 10.5px/1.4 var(--v4-mono); letter-spacing:.12em; text-transform:uppercase; color:var(--v4-muted); font-style:normal; }
html body .cap-preguntas{ margin:0; padding:0 0 0 20px; }
html body .cap-preguntas li{ font:400 16px/1.7 var(--v4-ui); color:#C5C8D2; margin:0 0 10px; }
html body .cap-preguntas li::marker{ color:var(--v4-gold); }

/* ── Devocionales del capítulo ── */
html body .cap-devos{ display:grid; gap:12px; margin:0 0 48px; }
html body .cap-devo{
  display:block; text-decoration:none; border:1px solid var(--v4-line-2); border-radius:14px; padding:18px 20px;
  transition:border-color .18s;
}
html body .cap-devo:hover{ border-color:var(--v4-gold); }
html body .cap-devo span{ display:block; font:500 10.5px/1.4 var(--v4-mono); letter-spacing:.16em; text-transform:uppercase; color:var(--v4-gold); margin:0 0 8px; }
html body .cap-devo strong{ font:400 22px/1.25 var(--v4-serif); color:var(--v4-ink); }

/* ── Rejilla de capítulos (en el capítulo y en la página del libro) ── */
html body .cap-rejilla{ list-style:none; margin:0 0 48px; padding:0; display:grid; grid-template-columns:repeat(auto-fill,minmax(52px,1fr)); gap:8px; }
html body .cap-rejilla a{
  display:flex; align-items:center; justify-content:center; height:48px; border-radius:10px; text-decoration:none;
  border:1px solid var(--v4-line); color:var(--v4-ink); font:500 13px/1 var(--v4-mono); transition:border-color .18s, color .18s;
}
html body .cap-rejilla a:hover{ border-color:var(--v4-gold); color:var(--v4-gold); }
html body .cap-rejilla a[aria-current="page"]{ border-color:var(--v4-gold); color:var(--v4-bg); background:var(--v4-gold); }

/* ── Índice de libros /biblia ── */
html body .cap-libros{ list-style:none; margin:0 0 56px; padding:0; display:grid; grid-template-columns:repeat(auto-fill,minmax(170px,1fr)); gap:8px; }
html body .cap-libros a{
  display:flex; justify-content:space-between; align-items:baseline; gap:10px; padding:14px 16px; border-radius:12px; text-decoration:none;
  border:1px solid var(--v4-line); transition:border-color .18s;
}
html body .cap-libros a:hover{ border-color:var(--v4-gold); }
html body .cap-libros strong{ font:400 21px/1.15 var(--v4-serif); color:var(--v4-ink); }
html body .cap-libros span{ font:500 10.5px/1 var(--v4-mono); color:var(--v4-muted); letter-spacing:.06em; }

html body .cap-seccion{
  font:400 clamp(28px,3.4vw,38px)/1.1 var(--v4-serif) !important; margin:0 0 20px !important;
  color:var(--v4-ink) !important; background:none !important; -webkit-text-fill-color:currentColor !important; border:0 !important; padding:0 !important;
}

@media (max-width:600px){
  html body .cap-versos li{ padding-left:36px; }
  html body .cap-versos li .n{ width:26px; }
  html body .cap-rejilla{ grid-template-columns:repeat(auto-fill,minmax(46px,1fr)); }
  html body .cap-libros{ grid-template-columns:1fr 1fr; }
}

/* ── Páginas /estudio y /tema (las genera tools/estudios-paginas.js) ── */
html body .cap-estudio--pagina{ border-top:0; padding-top:0; }
html body .cap-estudio a{ color:var(--v4-gold-soft); text-decoration:underline; text-decoration-color:color-mix(in srgb, var(--v4-gold) 40%, transparent); text-underline-offset:3px; }
html body .cap-estudio a:hover{ color:var(--v4-gold); }
html body .cap-mas{
  display:inline-flex; align-items:center; gap:8px; padding:12px 18px; border-radius:999px; text-decoration:none !important;
  border:1px solid var(--v4-line-2); color:var(--v4-ink) !important; font:500 14px/1.2 var(--v4-ui); transition:border-color .18s, color .18s;
}
html body .cap-mas:hover{ border-color:var(--v4-gold); color:var(--v4-gold) !important; }
html body .cap-estudio .cap-mas{ margin-top:6px; }
html body .cap-mini{
  display:inline-block; margin:8px 0 0; font:500 10.5px/1.4 var(--v4-mono); letter-spacing:.12em; text-transform:uppercase;
  color:var(--v4-gold) !important; text-decoration:none !important;
}
html body .cap-mini:hover{ color:var(--v4-gold-soft) !important; }
html body .cap-temas{ grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); }
html body .cap-temas .cap-devo strong{ font-size:20px; }
html body .cap-intro a{ color:var(--v4-gold-soft); }

/* Preguntas frecuentes con <details> (sin JS) */
html body details.faq-item > summary{ list-style:none; cursor:pointer; }
html body details.faq-item > summary::-webkit-details-marker{ display:none; }
html body details.faq-item[open] .faq-answer{ display:block; }
html body details.faq-item[open] .faq-arrow{ transform:rotate(45deg); }