/* Versículos hermanos — referencias cruzadas bajo cada versículo (js/hermanos.js). Noche plata; oro solo en lo elegido. */
#listen .hv-btn{ display:inline-flex; align-items:center; gap:5px; margin-left:8px; padding:4px 8px; min-height:28px; vertical-align:3px; border:1px solid transparent; border-radius:99px; background:none; color:#868B99; font:500 10.5px/1 "Geist Mono",ui-monospace,monospace; letter-spacing:.08em; cursor:pointer; opacity:.55; transition:opacity .15s,color .15s,border-color .15s; }
#listen .hv-btn svg{ width:13px; height:13px; fill:currentColor; stroke:currentColor; stroke-width:1.1; }
#listen .hv-btn:hover, #listen .hv-btn:focus-visible{ opacity:1; color:#ECEEF3; border-color:rgba(236,238,243,.14); outline:none; }
#listen .hv-btn.on{ opacity:1; color:#C9A84C; border-color:rgba(201,168,76,.45); }

#listen .hv-panel{ margin:6px 0 18px; padding:14px 0 6px 16px; border-left:1px solid rgba(201,168,76,.45); animation:hvEntra .18s ease-out; }
#listen .hv-head{ display:flex; justify-content:space-between; gap:12px; margin:0 0 6px; font:500 10.5px/1 "Geist Mono",ui-monospace,monospace; letter-spacing:.16em; text-transform:uppercase; color:#868B99; }
#listen .hv-panel ol{ list-style:none; margin:0; padding:0; }
#listen .hv-item{ display:block; width:100%; padding:10px 10px 10px 0; border:0; border-bottom:1px solid rgba(236,238,243,.08); background:none; text-align:left; color:inherit; cursor:pointer; }
#listen .hv-panel li:last-child .hv-item{ border-bottom:0; }
#listen .hv-ref{ display:block; margin-bottom:4px; font:500 10.5px/1.2 "Geist Mono",ui-monospace,monospace; letter-spacing:.14em; text-transform:uppercase; color:#ECEEF3; }
#listen .hv-txt{ display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; font:400 18px/1.45 "Instrument Serif",Georgia,serif; color:rgba(236,238,243,.62); transition:color .15s; }
#listen .hv-item:hover .hv-txt, #listen .hv-item:focus-visible .hv-txt{ color:#ECEEF3; }
#listen .hv-item:hover .hv-ref, #listen .hv-item:focus-visible .hv-ref{ color:#C9A84C; }
#listen .hv-item:focus-visible{ outline:none; }
#listen .hv-credito{ margin:8px 0 0; font:400 11px/1.4 Inter,system-ui,sans-serif; color:#5d6270; }
#listen .hv-credito a{ color:inherit; text-decoration:underline; text-underline-offset:2px; }

/* el versículo al que se llega: un destello de oro que se apaga */
#listen .verse-line.hv-destino{ animation:hvDestino 2.4s ease-out; border-radius:6px; }
@keyframes hvDestino{ 0%,25%{ background:rgba(201,168,76,.14); box-shadow:0 0 0 6px rgba(201,168,76,.14); } 100%{ background:transparent; box-shadow:0 0 0 6px transparent; } }
@keyframes hvEntra{ from{ opacity:0; transform:translateY(-4px); } to{ opacity:1; transform:none; } }

.hv-volver{ position:fixed; left:50%; bottom:calc(24px + env(safe-area-inset-bottom)); z-index:1001; transform:translateX(-50%); display:inline-flex; align-items:center; gap:8px; padding:11px 18px; border:1px solid rgba(201,168,76,.45); border-radius:99px; background:rgba(12,16,32,.88); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); color:#ECEEF3; font:500 11px/1 "Geist Mono",ui-monospace,monospace; letter-spacing:.12em; text-transform:uppercase; white-space:nowrap; cursor:pointer; box-shadow:0 10px 30px rgba(0,0,0,.45); animation:hvPildora .18s ease-out; }
@keyframes hvPildora{ from{ opacity:0; transform:translate(-50%,6px); } to{ opacity:1; transform:translate(-50%,0); } }
.hv-volver[hidden]{ display:none; }
.hv-volver:hover{ border-color:#C9A84C; }

@media (max-width:640px){ #listen .hv-txt{ font-size:17px; } }
@media (prefers-reduced-motion:reduce){ #listen .hv-panel, .hv-volver{ animation:none; } #listen .verse-line.hv-destino{ animation-duration:.01s; } }