/* ═══════════════════════════════════════════════════════════════════════════
   Devocionales (índice /devocionales y las páginas /devocional/*) en el
   lenguaje de la portada v4 («Noche plata»). Va la ÚLTIMA hoja, tras el
   <style> propio de cada página, marca.css y devocional.css.
   Titulares y citas en Instrument Serif; el cuerpo, para leer largo, en Inter.
   ═══════════════════════════════════════════════════════════════════════════ */

:root{
  --v4-bg:#06080F; --v4-bg-2:#0C1020; --v4-ink:#ECEEF3; --v4-muted:#868B99;
  --v4-line:rgba(236,238,243,.10); --v4-line-2:rgba(236,238,243,.18);
  --v4-gold:#C9A84C; --v4-gold-soft:#E6D3A0;
  --v4-serif:"Instrument Serif", Georgia, serif; --v4-ui:"Inter", system-ui, sans-serif; --v4-mono:"Geist Mono", ui-monospace, monospace;
  --dv-g:clamp(20px,5vw,72px);
}
html body{ background:var(--v4-bg) !important; color:var(--v4-ink) !important; font-family:var(--v4-ui) !important; -webkit-font-smoothing:antialiased; overflow-x:clip; }

/* ── Menú ── */
html body > nav:first-of-type{
  position:sticky; top:0; z-index:50; height:64px; padding:0 var(--dv-g) !important; display:flex; align-items:center; justify-content:space-between; gap:20px;
  background:color-mix(in srgb, var(--v4-bg) 82%, transparent) !important; backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--v4-line) !important; box-shadow:none !important;
}
html body > nav .nav-logo{ display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--v4-ink) !important; background:none !important; -webkit-text-fill-color:currentColor !important; }
html body > nav .nav-logo .logo-mark{ font-size:0 !important; width:7px; height:7px; border-radius:50%; background:var(--v4-gold); box-shadow:0 0 12px var(--v4-gold); }
html body > nav .nav-logo .logo-text{ font:600 12px/1 var(--v4-ui) !important; letter-spacing:.3em !important; text-transform:uppercase; color:var(--v4-ink) !important; -webkit-text-fill-color:currentColor !important; background:none !important; }
html body > nav .nav-links{ display:flex; gap:28px; list-style:none; margin:0; padding:0; }
html body > nav .nav-links a, html body > nav .nav-back{
  font:400 14px/1 var(--v4-ui) !important; color:var(--v4-muted) !important; text-decoration:none; letter-spacing:0 !important; text-transform:none !important;
  display:inline-flex; align-items:center; gap:8px; background:none !important; border:0 !important; padding:0 !important;
}
html body > nav .nav-links a::after{ display:none !important; }
html body > nav .nav-back{ height:38px; padding:0 16px 0 13px !important; border:1px solid var(--v4-line-2) !important; border-radius:40px; color:var(--v4-ink) !important; transition:border-color .18s, color .18s; }
html body > nav .nav-back:hover{ border-color:var(--v4-gold) !important; color:var(--v4-gold) !important; }
html body > nav .nav-links a:hover, html body > nav .nav-links a.active, html body > nav .nav-back:hover{ color:var(--v4-ink) !important; }
@media (max-width:520px){ html body > nav .nav-logo .logo-text{ font-size:10.5px !important; letter-spacing:.22em !important; } html body > nav .nav-links{ gap:18px; } }

/* ══════════════════════ ÍNDICE /devocionales ══════════════════════ */
html body .hero{
  background:none !important; text-align:left !important; padding:72px var(--dv-g) 40px !important; max-width:1240px; margin:0 auto;
  display:grid; grid-template-columns:minmax(0,1fr); gap:0 40px; align-items:center; min-height:0 !important; position:relative;
}
html body .hero::before, html body .hero::after{ display:none !important; }
html body .hero > *:not(canvas){ grid-column:1; }
html body .hero .cielo-mini{ grid-column:2; grid-row:1 / span 3; width:280px; height:280px; justify-self:end; }
/* En pantalla ancha la esfera del índice se queda fija mientras bajas: al pasar por un devocional viaja a su libro */
@media (min-width:761px){
  html body .hero .cielo-mini{ position:fixed; z-index:-1; top:55%; right:max(-100px, calc((100vw - 1180px) / 2 - 420px)); transform:translateY(-50%);
    width:min(42vw,500px); height:min(42vw,500px); pointer-events:none; }
}
@media (min-width:761px) and (max-width:1400px){ html body .hero .cielo-mini{ right:-110px; opacity:.6; } }
html body .hero-greeting{
  display:flex !important; align-items:center; gap:12px; margin:0 0 26px !important; padding:0 !important; background:none !important; border:0 !important;
  font:500 10.5px/1.4 var(--v4-mono) !important; letter-spacing:.16em !important; text-transform:uppercase; color:var(--v4-muted) !important;
}
html body .hero-greeting::before{ content:''; width:28px; height:1px; background:var(--v4-gold); }
html body .hero h1{
  font:400 clamp(46px,7vw,96px)/.95 var(--v4-serif) !important; letter-spacing:-.02em !important; margin:0 0 22px !important; text-align:left !important;
  color:var(--v4-ink) !important; background:none !important; -webkit-text-fill-color:currentColor !important;
}
html body .hero h1 span{ font-style:italic; color:var(--v4-gold) !important; background:none !important; -webkit-text-fill-color:currentColor !important; }
html body .hero > p:not(.hero-greeting){ max-width:540px; margin:0 !important; font:400 16px/1.6 var(--v4-ui) !important; color:var(--v4-muted) !important; text-align:left !important; }

html body .filter-bar{
  max-width:1240px; margin:0 auto !important; padding:10px var(--dv-g) 0 !important; display:flex; gap:24px !important; justify-content:flex-start !important;
  flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; background:none !important; border:0 !important;
}
html body .filter-btn{
  flex:none; background:none !important; border:0 !important; border-radius:0 !important; box-shadow:none !important; padding:8px 0 !important; position:relative;
  font:500 10.5px/1 var(--v4-mono) !important; letter-spacing:.16em !important; text-transform:uppercase; color:var(--v4-muted) !important;
}
html body .filter-btn:hover, html body .filter-btn.active{ color:var(--v4-ink) !important; }
html body .filter-btn.active::after{ content:''; position:absolute; left:0; right:0; bottom:0; height:1px; background:var(--v4-gold); }

html body .section{ max-width:1240px; margin:0 auto; padding:44px var(--dv-g) 100px !important; background:none !important; }
html body .section-head{ display:flex; align-items:baseline; justify-content:space-between; gap:16px; padding:0 0 14px !important; margin:0 !important; border-bottom:1px solid var(--v4-line) !important; }
html body .section-head h2{ text-transform:none !important; letter-spacing:-.01em !important; font:400 34px/1 var(--v4-serif) !important; color:var(--v4-ink) !important; background:none !important; -webkit-text-fill-color:currentColor !important; margin:0 !important; }
html body .grid-count{ font:500 10.5px/1 var(--v4-mono) !important; letter-spacing:.14em; text-transform:uppercase; color:var(--v4-muted) !important; background:none !important; border:0 !important; padding:0 !important; }

/* Tarjetas → filas de índice (como la lista de la portada) */
html body .grid{ display:block !important; }
html body .card{
  display:grid !important; grid-template-columns:200px minmax(0,1fr) 24px; gap:6px 28px; align-items:baseline;
  background:none !important; border:0 !important; border-bottom:1px solid var(--v4-line) !important; border-radius:0 !important;
  box-shadow:none !important; padding:24px 0 !important; margin:0 !important; transform:none !important; text-decoration:none; position:relative;
}
html body .card::after{ content:'→'; grid-column:3; grid-row:1; color:var(--v4-muted); font:400 18px/1 var(--v4-ui); transition:transform .3s, color .18s; }
html body .card:hover::after{ transform:translateX(4px); color:var(--v4-ink); }
html body .card-top, html body .card-body{ display:contents !important; }
html body .card-ref{ grid-column:1; grid-row:1; font:500 11px/1.4 var(--v4-mono) !important; letter-spacing:.14em; text-transform:uppercase; color:var(--v4-gold) !important; background:none !important; padding:0 !important; }
html body .card-verse{ display:none !important; }
html body .card-title{ grid-column:2; grid-row:1; font:400 clamp(22px,2.2vw,27px)/1.2 var(--v4-serif) !important; color:var(--v4-ink) !important; transition:color .18s; margin:0 !important; }
html body .card-excerpt{ grid-column:2; grid-row:2; font:400 14.5px/1.55 var(--v4-ui) !important; color:var(--v4-muted) !important; margin:0 !important; max-width:720px; }
html body .card-footer{ grid-column:2; grid-row:3; display:flex !important; gap:14px; margin:6px 0 0 !important; padding:0 !important; border:0 !important; }
html body .card-tag{ background:none !important; border:0 !important; padding:0 !important; font:500 9.5px/1 var(--v4-mono) !important; letter-spacing:.14em; text-transform:uppercase; color:var(--v4-muted) !important; }
html body .card-link{ display:none !important; }
html body .card:hover .card-title{ color:var(--v4-gold) !important; font-style:italic; }
/* Destacado: el versículo en grande */
html body .card--featured{ grid-template-columns:200px minmax(0,1fr) 24px; padding:30px 0 34px !important; border-top:1px solid var(--v4-gold) !important; margin-top:-1px !important; }
html body .card--featured .card-verse{ display:block !important; grid-column:2; grid-row:1; font:italic 400 clamp(26px,3vw,38px)/1.25 var(--v4-serif) !important; color:var(--v4-ink) !important; margin:0 0 10px !important; }
html body .card--featured .card-title{ grid-row:2; font-size:20px !important; color:var(--v4-gold-soft) !important; }
html body .card--featured .card-excerpt{ grid-row:3; }
html body .card--featured .card-footer{ grid-row:4; }
html body .featured-badge{
  grid-column:1; grid-row:2; align-self:start; justify-self:start; position:static !important; background:none !important; border:1px solid color-mix(in srgb, var(--v4-gold) 45%, transparent) !important;
  border-radius:40px !important; padding:5px 10px !important; font:500 9.5px/1 var(--v4-mono) !important; letter-spacing:.14em; text-transform:uppercase; color:var(--v4-gold) !important; box-shadow:none !important;
}

/* Bloque final de llamada (si lo hay) */
html body .cta-inner{ background:none !important; border:0 !important; border-top:1px solid var(--v4-line) !important; border-radius:0 !important; box-shadow:none !important; text-align:left !important; padding:40px 0 !important; }
html body .cta-inner h2, html body .cta-inner h3{ font:400 clamp(32px,4vw,48px)/1.05 var(--v4-serif) !important; color:var(--v4-ink) !important; background:none !important; -webkit-text-fill-color:currentColor !important; }
html body .cta-inner p{ color:var(--v4-muted) !important; font-family:var(--v4-ui) !important; }
html body .btn-gold, html body .audio-cta{
  display:inline-flex !important; align-items:center; gap:12px; height:50px; padding:0 24px 0 8px !important; border-radius:40px !important; border:0 !important;
  background:var(--v4-ink) !important; color:var(--v4-bg) !important; box-shadow:none !important; transform:none !important;
  font:500 14.5px/1 var(--v4-ui) !important; letter-spacing:0 !important; text-transform:none !important; text-decoration:none; transition:background .18s;
}
html body .btn-gold{ padding:0 24px !important; }
html body .btn-gold:hover, html body .audio-cta:hover{ background:var(--v4-gold) !important; }
html body .audio-cta svg{ width:34px !important; height:34px !important; padding:9px; border-radius:50%; background:var(--v4-bg); color:var(--v4-ink); flex:none; }

/* ══════════════════════ PÁGINA DE UN DEVOCIONAL ══════════════════════ */
html body .hero-verse{
  background:none !important; border:0 !important; text-align:left !important; position:relative;
  max-width:1000px; margin:0 auto; padding:72px var(--dv-g) 48px !important;
}
html body .hero-verse::before, html body .hero-verse::after{ display:none !important; }
html body .hero-verse .tag{
  display:flex !important; align-items:center; gap:12px; margin:0 0 22px !important; padding:0 !important; background:none !important; border:0 !important; border-radius:0 !important;
  font:500 10.5px/1.4 var(--v4-mono) !important; letter-spacing:.16em !important; text-transform:uppercase; color:var(--v4-muted) !important;
}
html body .hero-verse .tag::before{ content:''; width:28px; height:1px; background:var(--v4-gold); }
html body .hero-verse .verse-ref{ font:500 12px/1 var(--v4-mono) !important; letter-spacing:.16em !important; text-transform:uppercase; color:var(--v4-gold) !important; margin:0 0 18px !important; }
html body .hero-verse .verse-text{
  font:italic 400 clamp(34px,5vw,64px)/1.08 var(--v4-serif) !important; letter-spacing:-.015em; color:var(--v4-ink) !important;
  max-width:none !important; margin:0 0 34px !important; text-align:left !important;
}
html body .hero-verse .verse-text::before{ content:'«' !important; color:var(--v4-gold) !important; }
html body .hero-verse .verse-text::after{ content:'»' !important; color:var(--v4-gold) !important; }
/* La esfera acompaña toda la lectura: fija a la derecha, por detrás del texto (en pantallas anchas cae en el margen) */
html body .hero-verse .cielo-mini{ position:fixed; z-index:-1; top:50%; right:max(-120px, calc((100vw - 1000px) / 2 - 470px)); transform:translateY(-50%);
  width:min(46vw,520px); height:min(46vw,520px); opacity:1; pointer-events:none; }
@media (max-width:1400px){ html body .hero-verse .cielo-mini{ right:-110px; opacity:.6; } }

html body .breadcrumb{
  max-width:1000px; margin:0 auto; padding:0 var(--dv-g) !important; background:none !important; backdrop-filter:none !important; border:0 !important;
  font:500 10.5px/1.4 var(--v4-mono) !important; letter-spacing:.14em; text-transform:uppercase; color:var(--v4-muted) !important;
}
html body .breadcrumb > *{ vertical-align:baseline; }
html body .breadcrumb a{ color:var(--v4-muted) !important; } html body .breadcrumb a:hover{ color:var(--v4-ink) !important; }
html body .breadcrumb span{ margin:0 10px !important; }

html body .content-wrap{ max-width:1000px !important; padding:40px var(--dv-g) 100px !important; }
html body .content-wrap > *{ max-width:720px; }
html body .content-wrap > .nav-posts{ max-width:none; }
html body .devocional-title{
  font:400 clamp(34px,4.4vw,54px)/1.05 var(--v4-serif) !important; letter-spacing:-.015em !important; color:var(--v4-ink) !important;
  background:none !important; -webkit-text-fill-color:currentColor !important; margin:0 0 18px !important; text-wrap:balance;
}
html body .meta-info{ gap:8px 16px !important; font:500 10.5px/1.4 var(--v4-mono) !important; letter-spacing:.14em; text-transform:uppercase; color:var(--v4-muted) !important; }
html body .meta-tag{ background:none !important; border:0 !important; padding:0 !important; color:var(--v4-muted) !important; font:inherit !important; }
html body .meta-tag::before{ content:'· '; }
html body .divider{ width:100% !important; max-width:720px; height:1px !important; background:var(--v4-line) !important; border-radius:0 !important; margin:26px 0 36px !important; }

html body .devocional-body p{ font:400 17.5px/1.8 var(--v4-ui) !important; color:color-mix(in srgb, var(--v4-ink) 80%, transparent) !important; margin:0 0 1.4em !important; }
html body .devocional-body strong{ color:var(--v4-ink) !important; font-weight:500 !important; }
html body .devocional-body em{ color:var(--v4-gold-soft) !important; }
html body h2.section-title{
  font:400 clamp(28px,3vw,36px)/1.1 var(--v4-serif) !important; color:var(--v4-ink) !important; background:none !important; -webkit-text-fill-color:currentColor !important;
  border:0 !important; padding:0 !important; margin:56px 0 18px !important; letter-spacing:-.01em !important;
}
html body .verse-block{
  background:none !important; border:0 !important; border-left:1px solid var(--v4-gold) !important; border-radius:0 !important; box-shadow:none !important;
  padding:4px 0 4px 26px !important; margin:40px 0 !important;
}
html body .verse-block p{ font:italic 400 clamp(23px,2.6vw,29px)/1.35 var(--v4-serif) !important; color:var(--v4-ink) !important; margin:0 !important; }
html body .verse-block cite{ display:block; margin-top:14px !important; font:500 10.5px/1.4 var(--v4-mono) !important; letter-spacing:.14em; text-transform:uppercase; color:var(--v4-gold) !important; font-style:normal !important; }
html body .insight-box{
  background:none !important; border:0 !important; border-top:1px solid var(--v4-line-2) !important; border-bottom:1px solid var(--v4-line-2) !important;
  border-radius:0 !important; box-shadow:none !important; padding:26px 0 !important; margin:44px 0 !important;
}
html body .insight-label{ font:500 10.5px/1.4 var(--v4-mono) !important; letter-spacing:.16em !important; color:var(--v4-gold) !important; margin-bottom:12px !important; }
html body .insight-box p{ font:400 20px/1.5 var(--v4-serif) !important; color:var(--v4-ink) !important; }
html body .insight-box strong{ color:var(--v4-gold-soft) !important; font-weight:400 !important; font-style:italic; }

html body .prayer-section{
  background:none !important; border:0 !important; border-radius:0 !important; box-shadow:none !important; backdrop-filter:none !important;
  padding:0 !important; margin:56px 0 !important; text-align:left;
}
html body .prayer-section h3{ font:500 10.5px/1.4 var(--v4-mono) !important; letter-spacing:.16em !important; color:var(--v4-muted) !important; margin:0 0 14px !important; text-transform:uppercase; }
html body .prayer-section p{ font:italic 400 clamp(22px,2.4vw,27px)/1.45 var(--v4-serif) !important; color:var(--v4-ink) !important; }

html body .listen-section{
  background:none !important; border:1px solid var(--v4-line) !important; border-radius:4px !important; box-shadow:none !important;
  padding:34px 30px !important; margin:56px 0 !important; text-align:left !important; position:relative; overflow:hidden;
}
html body .listen-section h3{ font:400 clamp(26px,3vw,34px)/1.1 var(--v4-serif) !important; color:var(--v4-ink) !important; margin:0 0 10px !important; background:none !important; -webkit-text-fill-color:currentColor !important; }
html body .listen-section p{ font:500 10.5px/1.5 var(--v4-mono) !important; letter-spacing:.14em; text-transform:uppercase; color:var(--v4-muted) !important; margin:0 0 24px !important; }

html body .faq-section{ margin:64px 0 !important; }
html body .faq-section h2{ font:400 clamp(28px,3vw,36px)/1.1 var(--v4-serif) !important; color:var(--v4-ink) !important; background:none !important; -webkit-text-fill-color:currentColor !important; margin:0 0 10px !important; padding-bottom:14px; border-bottom:1px solid var(--v4-line); }
html body .faq-item{ background:none !important; border:0 !important; border-bottom:1px solid var(--v4-line) !important; border-radius:0 !important; box-shadow:none !important; margin:0 !important; }
html body .faq-question{ padding:20px 0 !important; font:400 20px/1.3 var(--v4-serif) !important; color:var(--v4-ink) !important; background:none !important; }
html body .faq-question:hover{ background:none !important; color:var(--v4-gold-soft) !important; }
html body .faq-arrow{ color:var(--v4-gold) !important; font:300 22px/1 var(--v4-ui) !important; }
html body .faq-answer{ padding:0 0 20px !important; }
html body .faq-answer p{ font:400 16px/1.7 var(--v4-ui) !important; color:var(--v4-muted) !important; }

html body .share-section{ margin:56px 0 !important; }
html body .share-section h4{ font:500 10.5px/1.4 var(--v4-mono) !important; letter-spacing:.16em !important; color:var(--v4-muted) !important; margin:0 0 14px !important; }
html body .share-buttons{ gap:10px !important; }
html body .share-btn{
  height:42px; padding:0 18px !important; border-radius:40px !important; background:none !important; border:1px solid var(--v4-line-2) !important; box-shadow:none !important;
  color:var(--v4-ink) !important; font:500 13px/1 var(--v4-ui) !important; transform:none !important; transition:border-color .18s, color .18s;
}
html body .share-btn:hover{ border-color:var(--v4-gold) !important; color:var(--v4-gold) !important; }
html body .share-btn svg{ color:currentColor !important; }

html body .nav-posts{ display:grid !important; grid-template-columns:1fr 1fr !important; gap:14px !important; margin-top:64px !important; padding:0 !important; background:none !important; border:0 !important; box-shadow:none !important; }
html body .nav-post{
  background:color-mix(in srgb, var(--v4-bg-2) 70%, transparent) !important; border:1px solid var(--v4-line-2) !important; border-radius:6px !important; box-shadow:none !important; backdrop-filter:none !important; transform:none !important;
  padding:24px 26px !important; text-decoration:none; transition:border-color .18s;
}
html body .nav-post:hover{ border-color:var(--v4-gold) !important; }
html body .nav-post.next{ text-align:right; }
html body .nav-post .direction{ font:500 10.5px/1.4 var(--v4-mono) !important; letter-spacing:.16em !important; color:var(--v4-gold) !important; margin-bottom:10px !important; }
html body .nav-post .post-title{ font:400 22px/1.25 var(--v4-serif) !important; color:var(--v4-ink) !important; transition:color .18s; }
html body .nav-post:hover .post-title{ color:var(--v4-gold) !important; font-style:italic; }

/* ── Pie ── */
html body footer, html body .dv-foot{
  background:var(--v4-bg) !important; border-top:1px solid var(--v4-line) !important; box-shadow:none !important;
  padding:48px var(--dv-g) 56px !important; text-align:left !important; color:var(--v4-muted) !important; font:400 13.5px/1.6 var(--v4-ui) !important;
}
html body footer > *{ max-width:1240px; margin-left:auto !important; margin-right:auto !important; }
html body footer a{ color:var(--v4-muted) !important; text-decoration:none; transition:color .18s; }
html body footer a:hover{ color:var(--v4-ink) !important; }
html body .dv-foot-links, html body .foot-links{ display:flex !important; flex-wrap:wrap; gap:10px 26px !important; justify-content:flex-start !important; margin-bottom:22px !important; }
html body .foot-quote{ font:italic 400 21px/1.4 var(--v4-serif) !important; color:var(--v4-ink) !important; }
html body .foot-ref{ font:500 10.5px/1.4 var(--v4-mono) !important; letter-spacing:.16em; text-transform:uppercase; color:var(--v4-gold) !important; }
html body .footer-credit{ margin-top:6px !important; color:var(--v4-muted) !important; }
html body .footer-credit a{ color:var(--v4-gold) !important; font-weight:600; }

/* ── Móvil ── */
@media (max-width:760px){
  html body .hero{ grid-template-columns:1fr; padding-top:40px !important; }
  html body .hero .cielo-mini{ position:absolute; top:10px; right:-50px; width:200px; height:200px; opacity:.7; pointer-events:none; }
  html body .hero > *:not(canvas){ position:relative; z-index:1; }
  html body .hero h1{ font-size:clamp(44px,13vw,60px) !important; padding-right:20px; }
  html body .card, html body .card--featured{ grid-template-columns:minmax(0,1fr) 20px; gap:6px 12px; padding:20px 0 !important; }
  html body .card-ref{ grid-column:1; grid-row:1; }
  html body .card::after{ grid-row:2; }
  html body .card-title{ grid-column:1; grid-row:2; font-size:22px !important; }
  html body .card-excerpt{ grid-column:1; grid-row:3; font-size:14px !important; }
  html body .card-footer{ grid-column:1; grid-row:4; }
  html body .card--featured .card-verse{ grid-column:1; grid-row:2; font-size:26px !important; }
  html body .card--featured .card-title{ grid-row:3; }
  html body .card--featured .card-excerpt{ grid-row:4; }
  html body .card--featured .card-footer{ grid-row:5; }
  html body .featured-badge{ grid-column:1; grid-row:1; justify-self:end; }
  html body .hero-verse{ padding-top:40px !important; }
  html body .hero-verse .verse-text{ font-size:clamp(32px,9vw,44px) !important; }
  html body .hero-verse .cielo-mini{ right:-35vw; width:90vw; height:90vw; opacity:.45; }
  html body .audio-cta{ width:100%; justify-content:flex-start; }
  html body .listen-section{ padding:26px 20px !important; }
  html body .nav-posts{ grid-template-columns:1fr !important; }
  html body .nav-post.next{ text-align:left; }
}

/* ── Índice: filtro y páginas ── */
html body .card.is-off{ display:none !important; }
html body .pager{ display:flex; justify-content:center; flex-wrap:wrap; gap:8px; margin:44px auto 0; }
html body .pager button{
  min-width:42px; height:42px; padding:0 12px; border-radius:40px; border:1px solid var(--v4-line-2); background:none; cursor:pointer;
  font:500 13px/1 var(--v4-mono); color:var(--v4-muted); transition:border-color .18s, color .18s, background .18s;
}
html body .pager button:hover:not(:disabled){ border-color:var(--v4-gold); color:var(--v4-ink); }
html body .pager .pg-num.is-on{ background:var(--v4-gold); border-color:var(--v4-gold); color:var(--v4-bg); }
html body .pager button:disabled{ opacity:.3; cursor:default; }
html body .section-head{ scroll-margin-top:90px; }
/* Sin desenfoque heredado en tarjetas y anterior/siguiente: borraba los puntos de la esfera de detrás */
html body .card, html body .nav-posts{ backdrop-filter:none !important; -webkit-backdrop-filter:none !important; }

/* ── Pasajes conectados (referencias cruzadas; las escribe tools/devocional-pasajes.js) ── */
html body .pasajes-section{ margin:64px 0 !important; }
html body .pasajes-section h2{ font:400 clamp(28px,3vw,36px)/1.1 var(--v4-serif) !important; color:var(--v4-ink) !important; background:none !important; -webkit-text-fill-color:currentColor !important; margin:0 0 10px !important; }
html body .pasajes-intro{ font:400 15px/1.6 var(--v4-ui) !important; color:var(--v4-muted) !important; margin:0 0 18px !important; max-width:56ch; }
html body .pasajes-lista{ list-style:none; margin:0; padding:0; border-top:1px solid var(--v4-line); counter-reset:pasaje; }
html body .pasajes-lista li{ border-bottom:1px solid var(--v4-line); counter-increment:pasaje; }
html body .pasajes-lista a{ display:grid; grid-template-columns:34px 1fr; column-gap:14px; padding:20px 4px; text-decoration:none; color:inherit; transition:background .2s; }
html body .pasajes-lista a::before{ content:counter(pasaje, decimal-leading-zero); grid-row:1 / span 3; font:500 10.5px/1.6 var(--v4-mono); letter-spacing:.1em; color:var(--v4-muted); padding-top:2px; }
html body .pasajes-ref{ font:500 10.5px/1.6 var(--v4-mono); letter-spacing:.14em; text-transform:uppercase; color:var(--v4-ink); }
html body .pasajes-txt{ font:400 clamp(20px,2.2vw,24px)/1.4 var(--v4-serif); color:rgba(236,238,243,.78); margin:6px 0 10px; transition:color .2s; }
html body .pasajes-ir{ font:500 10.5px/1.4 var(--v4-mono); letter-spacing:.14em; text-transform:uppercase; color:var(--v4-gold); opacity:.75; transition:opacity .2s; }
html body .pasajes-lista a:hover, html body .pasajes-lista a:focus-visible{ background:rgba(236,238,243,.03); outline:none; }
html body .pasajes-lista a:hover .pasajes-txt, html body .pasajes-lista a:focus-visible .pasajes-txt{ color:var(--v4-ink); }
html body .pasajes-lista a:hover .pasajes-ir, html body .pasajes-lista a:focus-visible .pasajes-ir{ opacity:1; }
html body .pasajes-credito{ font:400 12px/1.5 var(--v4-ui) !important; color:#5d6270 !important; margin:14px 0 0 !important; }
html body .pasajes-credito a{ color:inherit !important; text-decoration:underline; text-underline-offset:2px; }
@media (max-width:640px){ html body .pasajes-lista a{ grid-template-columns:26px 1fr; column-gap:10px; } }