/* BiEx · Lector y Analizador — negro, marfil y oro, en armonía con el sitio oficial de Biblia Exacta */
/* Fuentes de los modos de lectura (licencia OFL; ver fuentes/LEEME.txt). Solo se descargan si se eligen. */
@font-face { font-family: "BiEx Dislexia"; src: url("fuentes/opendyslexic-regular.woff2") format("woff2"); font-weight: 100 550; font-display: swap; }
@font-face { font-family: "BiEx Dislexia"; src: url("fuentes/opendyslexic-bold.woff2") format("woff2"); font-weight: 551 900; font-display: swap; }
@font-face { font-family: "BiEx Clara"; src: url("fuentes/atkinson-next.woff2") format("woff2"); font-weight: 200 800; font-display: swap; }
@font-face { font-family: "BiEx Respaldo"; src: url("fuentes/biex-respaldo.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
/* 𝔓 y ℵ (siglas de los manuscritos): dos signos de Noto Sans Math, SIL Open Font License 1.1, incrustados */
@font-face { font-family: "BiEx Signos"; src: url(data:font/woff2;base64,d09GMgABAAAAAANUAA4AAAAABgAAAAMAAAMAAAAAAAAAAAAAAAAAAAAAAAAAAAAAGhYbIBw8BmAAbBEICoJcgkEBNgIkAwwLCAAEIAWDQAcgG+wECI7DuOErDZMpBg8cxcP3+7HOvf8hGl0y3lS7W6I0QqdBKESGUrfubNpS+fk866UZCH9dWAMho3QBOjhcV1dh/q+ph+eN2W5R9AkOKCnacECp3xYpsucTGbDOduaMeo0yyUmmxxhUoBmQQt8NNOpRAFtdD1ZClAK//wFw/Dy98G3oauq4AeDfjevqB/3cNmEIeUF62+qnQclL2BoIJ984tcDO3ixOecLOGJL6hI/dOCjxwJ1hqv//i+hfHUDzYPQ3BGQH5xmAARwUVBgBClbhAiNwjVgVZgAoiqA5OnJ/XwLGY7gJQEBFXifFn1QGhPDK/x2JoAK1qPAKvAOAAkixkF7Yto/BsGcxy4QZNaM2wJx0FT43ZtkbmEO7sh4x2FyWjV1exdakH4E5oq1naTp7606YQ1XeSIuZO7p6B4Vqlh8WHGexufsKdjHiU+dyqEpO1efgPYYpp6jKGJatucXwK2i66jbLYrF7KMp6lzal3jsWOziZNSYtc9JP88zUsLCYC6uIgwTXI5WqXbHqlfYqvYRb5BLz5iTvr+6frLttT0zC557K9WRaK6scCb7DdTYXrk+OOlqaK4kf+Dn9PTyOs51bL834fPfhyPK0tPxw55TUfizErYGYzsrmWb2LSEuN4ipessVpWn5f3F7v9f6psBrXHrRXDUqJrG5usXrEdMvkN59LBuIBBCrOv85ZWxKNX6MS8Q8A/EvhmwH4/7Oq5+/ib3GJe+IQgFoJgp/wco9C/zYGq2mOV1mrJY9DQbYZdQ1SV2wH3IBwAQBiWJ1DuCjRwAdAJIY2B8TU6ntecrHWiCdii1Vf7ms1G1JwIIVMNQ6hR68JEDmp94RFPEh3jwFdkGDdQQxx6ipmk7TpJDGkU12MNAH5bRXaDBkPKdJmgl4IVwWfIKRESJchiBtpyARIEKFDlyHjdUFkxGR4xOwILlMgFQg9hpDGK9elx0QD2ozTJlZEGGtEJoRUgxtnPCKdFTzKc+qQ8fQkgOwE3bIckJ8SI43TAwd+y3gYAAAA) format("woff2"); unicode-range: U+2135, U+1D513; font-display: swap; }
:root {
  --bg: #09090a; --bg-2: #0e0e10; --hoja: #131315; --hoja-2: #1a1a1d; --hoja-3: #242428;
  --tinta: #ece5d6; --tinta-2: #d6cebd; --tenue: #9d968a; --sobre-oro: #0b0a08;
  --oro: #c9a865; --oro-vivo: #e8cf94; --oro-2: #8c7140; --oro-suave: rgba(201, 168, 101, .12);
  --linea: rgba(201, 168, 101, .26); --linea-2: rgba(236, 229, 214, .09);
  --e-base: #34332f; --e-borrador: #6a5735; --e-revision: #9b7c45; --e-casi: #c9a865; --e-exacto: #efd9a0;
  --et-base: #bdb6a8; --et-borrador: #f1e6cf; --et-revision: #0b0a08; --et-casi: #0b0a08; --et-exacto: #0b0a08;
  --c-V: #d4b06a; --c-N: #8fb3d9; --c-A: #93c4a2; --c-T: #b3a7bd; --c-PR: #df9b8c; --c-PREP: #cbb98d; --c-CONJ: #94a7d8;
  --c-PRT: #cf9ec4; --c-ADV: #a9c98b; --c-INJ: #e9a766; --c-HEB: #d9cd8d; --c-X: #8f8a84;
  --f-display: "Cormorant Garamond", "Cormorant", Georgia, serif;
  --f-texto: "Gentium Book Plus", "Gentium Plus", "Noto Serif", Georgia, "BiEx Signos", "Cambria Math", "STIX Two Math", serif;
  --f-ui: "Jost", "Segoe UI", system-ui, "BiEx Signos", "Cambria Math", "STIX Two Math", sans-serif;
  --f-griego: "Gentium Book Plus", "Gentium Plus", "Noto Serif", Georgia, "BiEx Signos", "Cambria Math", "STIX Two Math", serif;
  /* Tamaño base fluido (de 15 px en teléfonos a 17,5 px en pantallas grandes) × tamaño elegido por el lector */
  --raiz: clamp(15px, calc(13.6px + .36vw), 17.5px);
  --k: 1; --kl: 1; --lh: 1;
  --alto: 62px;
  --sombra: 0 30px 80px rgba(0, 0, 0, .65);
  --radio: 14px;
  --gutter: max(16px, env(safe-area-inset-left, 0px));
  --gutter-d: max(16px, env(safe-area-inset-right, 0px));
  color-scheme: dark;
}
/* El tema por defecto es el oscuro de la marca; el claro (pergamino) se elige con el botón de tema */
:root[data-theme="light"] {
  --bg: #f5f0e6; --bg-2: #efe8da; --hoja: #fffdf8; --hoja-2: #f4eee2; --hoja-3: #e9e0cf;
  --tinta: #1d1a15; --tinta-2: #3a352c; --tenue: #6f665a; --sobre-oro: #fffdf8;
  --oro: #8a6a2b; --oro-vivo: #6e521b; --oro-2: #b08d4a; --oro-suave: rgba(138, 106, 43, .1);
  --linea: rgba(138, 106, 43, .3); --linea-2: rgba(29, 26, 21, .1);
  --e-base: #ddd5c7; --e-borrador: #cdb283; --e-revision: #a8833f; --e-casi: #8a6a2b; --e-exacto: #5a4214;
  --et-base: #6f665a; --et-borrador: #2b2416; --et-revision: #fffdf8; --et-casi: #fffdf8; --et-exacto: #fffdf8;
  --c-V: #8a6418; --c-N: #2d6aa6; --c-A: #2c7d55; --c-T: #75627f; --c-PR: #b04a3a; --c-PREP: #806b33; --c-CONJ: #3d57a0;
  --c-PRT: #9a3f86; --c-ADV: #4d7d2c; --c-INJ: #b3601c; --c-HEB: #7d6e16; --c-X: #6d6473;
  --sombra: 0 30px 80px rgba(60, 45, 20, .22);
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; font-size: calc(var(--raiz) * var(--k) * var(--kl)); }
/* --k: nueve tamaños, lo fija app.js (K_TAM) */
html[data-inter="amplio"] { --lh: 1.16; }
/* Lectura clara (Atkinson Hyperlegible) y lectura para dislexia (OpenDyslexic): el griego conserva siempre su tipografía */
html[data-letra="clara"] { --f-texto: "BiEx Clara", "BiEx Respaldo", var(--f-griego); --f-display: var(--f-texto); --f-ui: var(--f-texto); }
html[data-letra="dislexia"] { --f-texto: "BiEx Dislexia", "BiEx Respaldo", var(--f-griego); --f-display: var(--f-texto); --f-ui: var(--f-texto); --kl: .9; }
html[data-letra="dislexia"] body { word-spacing: .12em; }
html[data-letra="dislexia"] :is(em, i, .il .t, .fp-tl, .pal .tl, .lema-l small, .res-lema .g small, .panel h1 small) { font-style: normal; }
html[data-letra="dislexia"] .continuo p { text-align: left; hyphens: manual; -webkit-hyphens: manual; }
/* OpenDyslexic ya trae su propio espaciado: se anula el espaciado extra de los rótulos */
html[data-letra="dislexia"] body * { letter-spacing: .01em !important; }
/* El griego (Gentium) se iguala en altura de letra a la tipografía elegida */
html[data-letra="dislexia"] [lang="grc"] { font-size-adjust: .53; }
html[data-letra="clara"] [lang="grc"] { font-size-adjust: .5; }
html[data-letra="clara"] :is(.hero-tit h1, .seccion-cab h2, .panel h1.texto, .cifras b) { font-weight: 400; }
[lang="grc"] { font-family: var(--f-griego); }
html[data-mov="no"] *, html[data-mov="no"] *::before, html[data-mov="no"] *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
html.con-modal { overflow: hidden; }
body { margin: 0; background: var(--bg) !important; color: var(--tinta); font-family: var(--f-texto); font-size: 1.0625rem; line-height: calc(1.6 * var(--lh)); -webkit-font-smoothing: antialiased; font-variant-numeric: lining-nums; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: var(--oro); text-underline-offset: 3px; }
:focus-visible { outline: 2px solid var(--oro); outline-offset: 2px; border-radius: 4px; }
.ui { font-family: var(--f-ui); }
[hidden] { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.mayus { font-family: var(--f-display); text-transform: uppercase; letter-spacing: .22em; font-weight: 500; }
.eyebrow { font-family: var(--f-ui); font-size: .72rem; letter-spacing: .24em; text-transform: uppercase; color: var(--oro); font-weight: 500; }
.gr { color: var(--oro); }
.in { max-width: 1320px; margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter-d); }

/* ---------- barra superior */
.barra { position: sticky; top: 0; z-index: 30; background: color-mix(in srgb, var(--bg) 86%, transparent); backdrop-filter: saturate(1.2) blur(12px); -webkit-backdrop-filter: saturate(1.2) blur(12px); border-bottom: 1px solid var(--linea-2); padding-top: env(safe-area-inset-top, 0px); }
.barra .in { display: flex; align-items: center; gap: 18px; min-height: var(--alto); }
.marca { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--tinta); min-width: 0; }
.sello { width: 38px; height: 38px; border: 1px solid var(--oro); border-radius: 50%; display: grid; place-items: center; font-family: "Cormorant Garamond", Georgia, serif; font-weight: 600; font-size: 15px; color: var(--oro); letter-spacing: .02em; flex: none; }
.marca .nombre { display: grid; line-height: 1.05; min-width: 0; }
.marca .nombre b { font-family: "Cormorant Garamond", Georgia, serif; font-weight: 400; font-size: 19px; letter-spacing: .3em !important; text-transform: uppercase; white-space: nowrap; }
.marca .nombre small { font-family: "Jost", system-ui, sans-serif; font-size: 10.5px; letter-spacing: .2em !important; text-transform: uppercase; color: var(--tenue); margin-top: 3px; white-space: nowrap; }
.nav { display: flex; gap: 26px; margin-left: auto; }
.nav a { font-family: var(--f-display); font-size: .95rem; letter-spacing: .2em; text-transform: uppercase; color: var(--tinta-2); text-decoration: none; padding: 6px 0; border-bottom: 1px solid transparent; }
.nav a:hover, .nav a[aria-current="page"] { color: var(--oro); border-bottom-color: var(--oro); }
.acc { display: flex; gap: 8px; align-items: center; margin-left: 8px; }
.btn-icono { flex: none; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--linea); background: transparent; display: grid; place-items: center; color: var(--tinta); }
.btn-icono:hover { border-color: var(--oro); color: var(--oro); }
.btn-icono svg { width: 18px; height: 18px; }
.btn-aa { display: flex; flex-wrap: wrap; align-content: center; align-items: baseline; justify-content: center; gap: 1px; padding: 0 0 2px; font-family: "Cormorant Garamond", Georgia, serif; font-size: 19px; font-weight: 500; line-height: 1; }
.btn-aa small { font-size: 14px; }
.btn-buscar { display: inline-flex; align-items: center; gap: 10px; height: 40px; padding: 0 16px 0 13px; border-radius: 999px; border: 1px solid var(--linea); background: var(--hoja); color: var(--tenue); font-family: var(--f-ui); font-size: .88rem; }
.btn-buscar svg { width: 16px; height: 16px; }
.btn-buscar:hover { border-color: var(--oro); color: var(--tinta); }
@media (max-width: 940px) { .nav { display: none; } .acc { margin-left: auto; } }
@media (max-width: 640px) { .btn-buscar span { display: none; } .btn-buscar { width: 40px; padding: 0; justify-content: center; } .marca .nombre b { font-size: 16px; letter-spacing: .24em !important; } }
@media (max-width: 380px) { .marca .nombre small { display: none; } }

.pagina { min-height: 60vh; }
.cargando, .vacio, .error { color: var(--tenue); padding: 60px 16px; text-align: center; font-family: var(--f-ui); }
.cargando::before { content: ""; display: block; width: 34px; height: 34px; margin: 0 auto 14px; border-radius: 50%; border: 1px solid var(--linea); border-top-color: var(--oro); animation: giro 1s linear infinite; }
@keyframes giro { to { transform: rotate(360deg); } }

/* ---------- botones */
.btn { border: 1px solid var(--linea); background: transparent; border-radius: 999px; padding: 10px 20px; font-family: var(--f-ui); font-size: .82rem; letter-spacing: .14em; text-transform: uppercase; text-decoration: none; color: var(--tinta); display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-weight: 500; }
.btn:hover { border-color: var(--oro); color: var(--oro); }
.btn.oro { background: var(--oro); color: var(--sobre-oro); border-color: var(--oro); }
.btn.oro:hover { background: var(--oro-vivo); border-color: var(--oro-vivo); color: var(--sobre-oro); }
.btn svg { width: 15px; height: 15px; }
.btn.chico { padding: 7px 14px; font-size: .74rem; }
.seg { display: inline-flex; border: 1px solid var(--linea); border-radius: 999px; padding: 3px; background: var(--hoja); flex: none; }
.seg button { border: 0; background: none; border-radius: 999px; padding: 6px 15px; font-family: var(--f-ui); font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--tenue); white-space: nowrap; }
.seg button[aria-pressed="true"] { background: var(--oro); color: var(--sobre-oro); font-weight: 500; }
.seg button:not([aria-pressed="true"]):hover { color: var(--tinta); }
.seg .gk { font-family: var(--f-texto); letter-spacing: .04em; text-transform: none; font-size: .95rem; }

/* ---------- portada */
.hero { position: relative; overflow: hidden; border-bottom: 1px solid var(--linea-2); }
.hero::before { content: ""; position: absolute; inset: -20% -10% auto; height: 120%; background: radial-gradient(ellipse 60% 50% at 50% 30%, var(--oro-suave), transparent 70%); pointer-events: none; }
.hero .in { position: relative; padding-top: clamp(36px, 7vw, 92px); padding-bottom: clamp(36px, 6vw, 80px); display: grid; gap: clamp(28px, 5vw, 56px); }
.hero-tit { text-align: center; display: grid; gap: 14px; justify-items: center; }
.hero-tit h1 { margin: 0; font-family: var(--f-display); font-weight: 300; font-size: clamp(2.2rem, 6vw, 4.6rem); line-height: 1.02; letter-spacing: -.005em; max-width: 18ch; text-wrap: balance; }
.hero-tit h1 em { color: var(--oro); font-style: italic; }
.hero-tit p { margin: 0; color: var(--tenue); max-width: 60ch; font-size: clamp(1rem, 1.6vw, 1.12rem); }
.acciones { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 6px; }

.codice { position: relative; background: linear-gradient(180deg, var(--hoja), var(--bg-2)); border: 1px solid var(--linea); border-radius: 4px; padding: clamp(22px, 4vw, 48px) clamp(16px, 4vw, 52px) clamp(18px, 3vw, 34px); box-shadow: var(--sombra); }
.codice::before, .codice::after { content: ""; position: absolute; width: 34px; height: 34px; border: 2px solid var(--oro); pointer-events: none; }
.codice::before { top: -1px; left: -1px; border-right: 0; border-bottom: 0; border-top-left-radius: 4px; }
.codice::after { bottom: -1px; right: -1px; border-left: 0; border-top: 0; border-bottom-right-radius: 4px; }
.codice-cab { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: clamp(14px, 3vw, 26px); }
.codice-cab .ref { font-family: var(--f-display); font-size: 1.05rem; letter-spacing: .18em; text-transform: uppercase; color: var(--tinta-2); }
.codice-cab .ref b { color: var(--oro); font-weight: 500; }
.interlineal { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(10px, 2vw, 22px) clamp(8px, 1.6vw, 18px); }
.il { background: none; border: 0; padding: 8px 8px 10px; border-radius: 10px; display: grid; gap: 6px; justify-items: center; align-content: start; text-align: center; color: inherit; }
.il .g { font-size: clamp(1.9rem, 5vw, 3.6rem); line-height: 1.04; color: var(--oro); }
.il.may .g { letter-spacing: .08em; }
.il .t { font-size: clamp(.8rem, 1.3vw, .95rem); line-height: 1.32; color: var(--tinta-2); font-style: italic; max-width: 17ch; }
/* En la portada y en la muestra, las alternativas entre corchetes van en segundo plano y en dos líneas como máximo */
.t .alt { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; font-size: .86em; color: var(--tenue); }
.il:hover, .il:focus-visible { background: var(--oro-suave); }
.il:hover .g { color: var(--oro-vivo); }
.pista { text-align: center; margin: clamp(14px, 3vw, 24px) 0 0; font-family: var(--f-ui); font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; color: var(--tenue); }

.cifras { border-bottom: 1px solid var(--linea-2); background: var(--bg-2); }
.cifras .in { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cifras .c { padding: clamp(20px, 3.4vw, 38px) 12px; text-align: center; display: grid; gap: 6px; border-left: 1px solid var(--linea-2); }
.cifras .c:first-child { border-left: 0; }
.cifras b { font-family: var(--f-display); font-weight: 300; font-size: clamp(2rem, 4.6vw, 3.4rem); line-height: 1; color: var(--oro); }
.cifras span { font-family: var(--f-ui); font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--tenue); line-height: 1.5; }
@media (max-width: 760px) { .cifras .in { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cifras .c:nth-child(3) { border-left: 0; } .cifras .c:nth-child(n+3) { border-top: 1px solid var(--linea-2); } }

.seccion { padding: clamp(40px, 7vw, 88px) 0 0; }
.seccion-cab { display: grid; gap: 10px; justify-items: center; text-align: center; margin-bottom: clamp(22px, 4vw, 38px); }
.seccion-cab h2 { margin: 0; font-family: var(--f-display); font-weight: 300; font-size: clamp(1.9rem, 4.4vw, 3rem); line-height: 1.08; }
.seccion-cab p { margin: 0; max-width: 62ch; color: var(--tenue); }
.filete { width: 64px; height: 1px; background: var(--oro); margin: 2px auto 0; position: relative; }
.filete::after { content: ""; position: absolute; left: 50%; top: 50%; width: 7px; height: 7px; border: 1px solid var(--oro); background: var(--bg); transform: translate(-50%, -50%) rotate(45deg); }

.panorama { display: flex; height: 54px; border: 1px solid var(--linea); border-radius: 4px; overflow: hidden; background: var(--hoja); margin-bottom: 8px; }
.panorama a { position: relative; display: block; border-left: 1px solid var(--bg); min-width: 4px; }
.panorama a:first-child { border-left: 0; }
.panorama a i { position: absolute; left: 0; right: 0; bottom: 0; background: linear-gradient(180deg, var(--oro-vivo), var(--oro-2)); opacity: .85; }
.panorama a b { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: var(--e-exacto); }
.panorama a:hover i { opacity: 1; }
.panorama a:hover { outline: 1px solid var(--oro-vivo); z-index: 1; }
.panorama-pie { display: flex; justify-content: space-between; gap: 12px; font-family: var(--f-ui); font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: var(--tenue); margin-bottom: 34px; flex-wrap: wrap; }

.grupo-libros { margin-bottom: 34px; }
.grupo-libros > h3 { margin: 0 0 14px; font-family: var(--f-ui); font-size: .74rem; letter-spacing: .24em; text-transform: uppercase; color: var(--oro); font-weight: 500; display: flex; align-items: center; gap: 14px; }
.grupo-libros > h3::after { content: ""; flex: 1; height: 1px; background: var(--linea-2); }
.tarjetas { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(250px, 100%), 1fr)); gap: 12px; }
.tlibro { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 14px; padding: 16px 18px 15px; border: 1px solid var(--linea-2); border-radius: var(--radio); background: var(--hoja); text-decoration: none; color: var(--tinta); transition: border-color .2s, transform .2s, background-color .2s; }
.tlibro:hover { border-color: var(--oro); transform: translateY(-2px); background: var(--hoja-2); }
.tlibro .num { grid-row: span 2; font-family: var(--f-display); font-size: 1.6rem; font-weight: 300; color: var(--oro); line-height: 1; padding-top: 2px; font-variant-numeric: lining-nums; min-width: 1.6ch; }
.tlibro .tit { font-size: 1.22rem; line-height: 1.2; overflow-wrap: anywhere; }
.tlibro .es { font-family: var(--f-display); font-size: .82rem; letter-spacing: .22em; text-transform: uppercase; color: var(--tenue); }
.tlibro .medidor { grid-column: 1 / -1; margin-top: 10px; }
.medidor { height: 3px; border-radius: 3px; background: var(--hoja-3); position: relative; overflow: hidden; }
.medidor i { position: absolute; left: 0; top: 0; bottom: 0; background: linear-gradient(90deg, var(--oro-2), var(--oro)); }
.medidor b { position: absolute; left: 0; top: 0; bottom: 0; background: var(--e-exacto); }
.tlibro .dato { grid-column: 1 / -1; display: flex; justify-content: space-between; gap: 8px; font-family: var(--f-ui); font-size: .74rem; color: var(--tenue); margin-top: 6px; letter-spacing: .04em; }
.tlibro .dato strong { color: var(--tinta); font-weight: 500; }

.herramientas { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 1px; background: var(--linea-2); border: 1px solid var(--linea-2); border-radius: var(--radio); overflow: hidden; }
.herr { background: var(--hoja); padding: 26px 24px 24px; display: grid; gap: 10px; align-content: start; text-decoration: none; color: var(--tinta); transition: background-color .2s; }
.herr:hover { background: var(--hoja-2); }
.herr svg { width: 30px; height: 30px; color: var(--oro); }
.herr h3 { margin: 0; font-family: var(--f-display); font-weight: 400; font-size: 1.45rem; }
.herr p { margin: 0; color: var(--tenue); font-size: .95rem; }
.herr span { font-family: var(--f-ui); font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; color: var(--oro); margin-top: 4px; }

.leyenda { display: flex; flex-wrap: wrap; gap: 6px 16px; font-family: var(--f-ui); font-size: .76rem; color: var(--tenue); }
.leyenda i { display: inline-block; width: 11px; height: 11px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.n-base { --e: var(--e-base); --et: var(--et-base); } .n-borrador { --e: var(--e-borrador); --et: var(--et-borrador); } .n-revision { --e: var(--e-revision); --et: var(--et-revision); }
.n-casi { --e: var(--e-casi); --et: var(--et-casi); } .n-exacto { --e: var(--e-exacto); --et: var(--et-exacto); }
.leyenda i, .chip-estado i { background: var(--e); }

/* ---------- libro */
.banda { border-bottom: 1px solid var(--linea-2); background: radial-gradient(ellipse 50% 120% at 0% 0%, var(--oro-suave), transparent 70%), var(--bg-2); }
.banda .in { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 18px 32px; padding-top: clamp(22px, 4vw, 44px); padding-bottom: clamp(18px, 3vw, 30px); }
.banda-tit { display: grid; gap: 8px; min-width: 0; }
.banda-tit h1 { margin: 0; }
.banda-lib { display: grid; gap: 4px; color: inherit; text-decoration: none; border-radius: 10px; }
.banda-lib .es::after { content: " ↩"; letter-spacing: 0; opacity: 0; transition: opacity .2s; }
.banda-lib:hover .es::after, .banda-lib:focus-visible .es::after { opacity: .8; }
.banda-lib:focus-visible { outline: 2px solid var(--oro); outline-offset: 4px; }
.banda-tit .tr { font-family: var(--f-texto); font-weight: 400; font-size: clamp(2rem, 5vw, 3.4rem); line-height: 1.05; overflow-wrap: anywhere; }
.banda-tit .es { font-family: var(--f-display); font-weight: 400; font-size: clamp(.95rem, 2vw, 1.2rem); letter-spacing: .3em; text-transform: uppercase; color: var(--oro); }
.banda-cifras { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; }
.anillo { display: flex; align-items: center; gap: 12px; }
.anillo svg { width: 74px; height: 74px; flex: none; }
.anillo .num { font-size: 18px; fill: var(--tinta); font-family: var(--f-display); }
.anillo p { margin: 0; font-family: var(--f-ui); font-size: .76rem; letter-spacing: .06em; color: var(--tenue); max-width: 15ch; line-height: 1.4; }
.mini-cifras { display: flex; gap: 22px; }
.mini-cifras div { display: grid; font-family: var(--f-ui); font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--tenue); }
.mini-cifras b { font-family: var(--f-display); font-weight: 400; font-size: 1.7rem; letter-spacing: 0; color: var(--tinta); text-transform: none; line-height: 1.1; }
@media (max-width: 560px) { .anillo svg { width: 58px; height: 58px; } .mini-cifras { gap: 16px; } .mini-cifras b { font-size: 1.35rem; } }

.libro-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; padding-top: 22px; padding-bottom: 40px; }
@media (min-width: 1024px) { .libro-grid { grid-template-columns: 272px minmax(0, 1fr); } }
.riel { display: none; }
@media (min-width: 1024px) { .riel { display: grid; gap: 20px; align-content: start; position: sticky; top: calc(var(--alto) + 18px + env(safe-area-inset-top, 0px)); max-height: calc(100vh - var(--alto) - 34px); overflow: auto; padding: 2px 6px 10px 2px; scrollbar-width: thin; } }
.rotulo { font-family: var(--f-ui); font-size: .7rem; letter-spacing: .2em; text-transform: uppercase; color: var(--tenue); margin: 0 0 10px; }
.caps { display: grid; grid-template-columns: repeat(auto-fill, minmax(40px, 1fr)); gap: 5px; }
.cap { position: relative; display: grid; place-items: center; height: 38px; border: 1px solid var(--linea-2); background: var(--hoja); border-radius: 8px; font-family: var(--f-display); font-size: 1.05rem; text-decoration: none; color: var(--tinta-2); overflow: hidden; }
.cap i { position: absolute; left: 0; bottom: 0; height: 2px; background: var(--oro); }
.cap:hover { border-color: var(--linea); color: var(--oro); }
.cap[aria-current="true"] { border-color: var(--oro); color: var(--sobre-oro); background: var(--oro); }
.cap[aria-current="true"] i { background: var(--sobre-oro); opacity: .5; }
.teselas { display: grid; grid-template-columns: repeat(auto-fill, minmax(34px, 1fr)); gap: 4px; }
.tesela { height: 32px; border: 0; border-radius: 6px; padding: 0; background: var(--e); color: var(--et); font-family: var(--f-ui); font-size: .76rem; font-weight: 500; font-variant-numeric: tabular-nums; display: grid; place-items: center; transition: transform .12s, box-shadow .12s; }
.tesela:hover { transform: translateY(-1px); box-shadow: 0 0 0 1px var(--oro-vivo); }
.tesela[aria-current="true"] { box-shadow: 0 0 0 2px var(--tinta); }

.hoja { min-width: 0; background: var(--hoja); border: 1px solid var(--linea-2); border-radius: var(--radio); }
/* con un filtro activo la hoja ocupa al menos la pantalla: la barra del capítulo puede quedarse fija donde estaba */
.hoja.con-filtro { min-height: calc(100vh - var(--alto)); min-height: calc(100dvh - var(--alto)); }
.barra-hoja { position: sticky; top: calc(var(--alto) + env(safe-area-inset-top, 0px)); z-index: 6; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 10px clamp(12px, 2.6vw, 24px); background: color-mix(in srgb, var(--hoja) 92%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--linea-2); border-radius: var(--radio) var(--radio) 0 0; }
.navcap { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; }
.navcap .btn-icono { width: 36px; height: 36px; }
.navcap .btn-icono:disabled { opacity: .3; cursor: default; border-color: var(--linea-2); color: var(--tenue); }
.btn-cap { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--linea); border-radius: 999px; background: none; padding: 6px 14px; font-family: var(--f-ui); font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; color: var(--tinta); white-space: nowrap; }
.btn-cap svg { width: 14px; height: 14px; color: var(--oro); }
.btn-cap:hover { border-color: var(--oro); }
.navcap .lbl { font-family: var(--f-ui); font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--tenue); padding: 0 6px; white-space: nowrap; }
.seg button svg { width: 15px; height: 15px; vertical-align: -3px; }
.seg-ico button { display: inline-flex; align-items: center; gap: 7px; }
@media (min-width: 1024px) { .btn-cap.movil, .cap-grupo.movil { display: none; } }
.cap-grupo { display: inline-flex; align-items: center; gap: 4px; }
.cap-grupo .btn-icono { width: 32px; height: 32px; }
.cap-grupo .btn-icono svg { width: 15px; height: 15px; }
.cap-grupo .btn-icono:disabled { opacity: .3; cursor: default; }
/* paso de capítulo con gesto: la página nueva entra desde el lado del dedo */
html[data-paso="sig"] #vista .hoja > :not(.barra-hoja) { animation: entraDer .32s cubic-bezier(.2, .7, .2, 1); }
html[data-paso="ant"] #vista .hoja > :not(.barra-hoja) { animation: entraIzq .32s cubic-bezier(.2, .7, .2, 1); }
@keyframes entraDer { from { opacity: 0; transform: translateX(28px); } to { opacity: 1; transform: none; } }
@keyframes entraIzq { from { opacity: 0; transform: translateX(-28px); } to { opacity: 1; transform: none; } }
@media (max-width: 1023px) { .navcap { display: none; } }

.encab { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 26px clamp(10px, 2.4vw, 26px) 8px; }
.encab-c { text-align: center; display: grid; gap: 4px; min-width: 0; }
.encab .btn-icono { text-decoration: none; }
.encab .btn-icono[aria-disabled="true"] { opacity: .25; pointer-events: none; }
@media (min-width: 1024px) { .encab { grid-template-columns: minmax(0, 1fr); } .encab > .btn-icono { display: none; } }
.fin-cap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; padding: 18px clamp(12px, 2.6vw, 24px) 26px; border-top: 1px solid var(--linea-2); }
.fin-cap .btn { max-width: 100%; }
.fin-cap .btn.sig { margin-left: auto; }
.fin-cap .btn { height: auto; min-height: 44px; }
.fin-cap .btn > span { white-space: normal; overflow-wrap: anywhere; text-align: center; line-height: 1.35; }
.encab .h { font-family: var(--f-display); font-size: clamp(1.4rem, 3vw, 1.9rem); font-weight: 400; color: var(--oro); line-height: 1.2; }
.encab .h [lang="he"] { font-family: var(--f-texto); }
.encab .s { font-family: var(--f-ui); font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; color: var(--tenue); }
.nota-base { margin: 6px clamp(14px, 3vw, 38px) 4px; padding: 12px 16px; border-left: 2px solid var(--oro-2); background: var(--hoja-2); border-radius: 0 10px 10px 0; font-family: var(--f-ui); font-size: .84rem; color: var(--tenue); line-height: 1.5; }

/* lectura */
.lectura { padding: 14px clamp(14px, 3.4vw, 46px) 40px; max-width: 900px; margin: 0 auto; }
.vl { display: grid; grid-template-columns: 2.8rem minmax(0, 1fr); gap: 0 14px; padding: 9px 10px 9px 0; border-radius: 10px; cursor: pointer; scroll-margin-top: 140px; transition: background-color .15s; }
.vl:hover { background: var(--oro-suave); }
.vl .vn { font-family: var(--f-display); font-size: 1.25rem; line-height: 1.55; text-align: right; color: var(--oro); font-variant-numeric: lining-nums; position: relative; }
.vl .vn::after { content: ""; position: absolute; right: -9px; top: .55em; width: 3px; height: 1.05em; border-radius: 2px; background: var(--e); }
.vl .vt { font-size: 1.14rem; line-height: calc(1.75 * var(--lh)); overflow-wrap: anywhere; }
.vl.p { margin-top: 18px; }
.vl.p:first-child { margin-top: 0; }
.vl .vn .par-v { color: var(--oro); opacity: .78; font-size: .74em; margin-right: .14em; letter-spacing: 0; }
.vl.n-base .vt { color: var(--tinta-2); }
.vl.marcado { background: var(--oro-suave); box-shadow: inset 2px 0 0 var(--oro); }
.continuo { padding: 18px clamp(14px, 3.4vw, 46px) 40px; max-width: 860px; margin: 0 auto; }
.continuo .par { font-family: var(--f-display); color: var(--oro); font-size: 1.15em; font-weight: 500; margin-right: .3em; }
.continuo p + p { margin-top: 1.5em; }
.continuo p { margin: 0 0 1.1em; font-size: 1.16rem; line-height: calc(1.9 * var(--lh)); text-align: justify; hyphens: auto; -webkit-hyphens: auto; }
.vs { cursor: pointer; border-radius: 6px; transition: background-color .15s; scroll-margin-top: 140px; }
.vs:hover { background: var(--oro-suave); }
.vs sup { font-family: var(--f-display); font-size: .78em; font-weight: 600; color: var(--oro); margin: 0 .25em 0 .1em; font-variant-numeric: lining-nums; }
.vs.n-base { color: var(--tinta-2); }
.vs.marcado { background: var(--oro-suave); }

/* análisis */
.lentes { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 12px clamp(12px, 2.6vw, 24px); border-bottom: 1px solid var(--linea-2); font-family: var(--f-ui); font-size: .8rem; color: var(--tenue); }
.lente { border: 1px solid var(--linea-2); background: var(--hoja-2); border-radius: 999px; padding: 6px 12px; font-family: var(--f-ui); font-size: .76rem; letter-spacing: .06em; color: var(--tenue); }
.lente[aria-pressed="true"] { border-color: var(--oro); color: var(--oro); background: var(--oro-suave); }
.lentes label { display: inline-flex; align-items: center; gap: 6px; }
.lentes select, .lentes .mm-btn { background: var(--hoja-2); border: 1px solid var(--linea-2); border-radius: 999px; padding: 6px 10px; font-family: var(--f-ui); font-size: .78rem; color: var(--tinta); max-width: 100%; }
.claves { display: flex; flex-wrap: wrap; gap: 4px 14px; padding: 10px clamp(12px, 2.6vw, 24px) 0; font-family: var(--f-ui); font-size: .74rem; color: var(--tenue); }
.claves span::before { content: ""; display: inline-block; width: 12px; height: 3px; border-radius: 2px; background: var(--k); margin-right: 6px; vertical-align: middle; }
.analisis { padding: 4px clamp(10px, 2.4vw, 26px) 36px; }
.av { padding: 20px 0 12px; border-top: 1px solid var(--linea-2); scroll-margin-top: 140px; }
/* cada verso del análisis se dibuja cuando se acerca a la pantalla: la página abre mucho antes */
.av { content-visibility: auto; contain-intrinsic-block-size: auto 640px; }
.av.cv-vis { content-visibility: visible; }
@media print { .av { content-visibility: visible; } }
.av:first-child { border-top: 0; }
.av-cab { display: grid; grid-template-columns: 2.6rem minmax(0, 1fr); gap: 12px; align-items: baseline; margin-bottom: 12px; }
.av-cab b { font-family: var(--f-display); color: var(--oro); font-size: 1.5rem; text-align: right; font-weight: 400; line-height: 1; }
.av-cab p { margin: 0; font-size: .98rem; line-height: calc(1.6 * var(--lh)); color: var(--tinta-2); max-width: 82ch; }
.av.marcado .av-cab b { color: var(--oro-vivo); }
.palabras { display: flex; flex-wrap: wrap; gap: 7px; padding-left: 3.25rem; }
@media (max-width: 600px) { .palabras { padding-left: 0; } .av-cab { grid-template-columns: 2rem minmax(0, 1fr); } }
.pal { border: 1px solid var(--linea-2); background: var(--hoja-2); border-radius: 12px; padding: 8px 11px 9px; display: grid; gap: 2px; justify-items: start; text-align: left; min-width: 3.4rem; max-width: 16rem; position: relative; color: inherit; transition: border-color .15s, background-color .15s, transform .15s; }
.pal::before { content: ""; position: absolute; left: 11px; right: 11px; top: -1px; height: 2px; border-radius: 2px; background: var(--k, transparent); }
.pal:hover { border-color: var(--linea); transform: translateY(-1px); }
.pal[aria-pressed="true"] { border-color: var(--oro); background: var(--hoja-3); }
.pal .g { font-size: 1.38rem; line-height: 1.2; }
.pal.may .g { letter-spacing: .06em; font-size: 1.24rem; }
.pal .g sup { color: var(--tenue); font-size: .62em; margin-left: 1px; }
.pal .tl { font-size: .84rem; color: var(--tenue); font-style: italic; line-height: 1.25; }
.pal .tr { font-size: .92rem; line-height: 1.32; overflow-wrap: anywhere; }
.pal .tr.sin { color: var(--tenue); }
.pal .mo { font-family: var(--f-ui); font-size: .68rem; letter-spacing: .03em; color: var(--tenue); line-height: 1.3; }
.pal.apagada { opacity: .28; }
.pal.var::after { content: ""; position: absolute; top: 7px; right: 7px; width: 6px; height: 6px; border-radius: 50%; background: var(--c-PR); }
.sin-tl .pal .tl, .sin-tr .pal .tr, .sin-mo .pal .mo { display: none; }

/* ---------- ventana (diálogo) */
.modal { border: 1px solid var(--linea); padding: 0; background: var(--hoja); color: var(--tinta); border-radius: 18px; width: min(1060px, calc(100vw - 32px)); max-width: none; max-height: min(88vh, 940px); box-shadow: var(--sombra); overflow: hidden; }
.modal[open] { display: flex; flex-direction: column; }
.modal::backdrop { background: rgba(4, 3, 2, .72); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
@media (max-width: 760px) {
  .modal { width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; border-radius: 0; border: 0; }
}
.m-caja { display: flex; flex-direction: column; min-height: 0; flex: 1; }
.m-cab { display: flex; align-items: center; gap: 10px; padding: 12px 14px 12px 18px; padding-top: max(12px, env(safe-area-inset-top, 0px)); border-bottom: 1px solid var(--linea-2); background: var(--hoja); flex: none; }
.m-cab .m-tit { min-width: 0; flex: 1; display: grid; line-height: 1.2; }
.m-cab .m-tit b { font-family: var(--f-display); font-size: 1.12rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; white-space: normal; overflow-wrap: anywhere; line-height: 1.25; }
.m-cab .m-tit small { font-family: var(--f-ui); font-size: .72rem; letter-spacing: .1em; color: var(--tenue); white-space: normal; overflow-wrap: anywhere; line-height: 1.35; margin-top: 2px; }
.m-cab .btn-icono { width: 38px; height: 38px; }
.m-cab .btn-icono:disabled { opacity: .3; cursor: default; }
.m-cuerpo { overflow: auto; overscroll-behavior: contain; padding: clamp(18px, 3vw, 30px) clamp(16px, 3.4vw, 34px) calc(28px + env(safe-area-inset-bottom, 0px)); flex: 1; min-height: 0; }
.m-pie { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; padding: 12px 18px calc(12px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--linea-2); flex: none; }

.fp { display: grid; gap: 26px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .fp { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 34px; } }
.fp-pal { display: grid; gap: 10px; align-content: start; }
.fp-g { font-size: clamp(2.4rem, 2rem + 2.4vw, 3.8rem); line-height: 1.05; color: var(--oro); overflow-wrap: anywhere; }
.fp-g.may { letter-spacing: .08em; }
.fp-tl { font-style: italic; color: var(--tenue); font-size: 1.15rem; }
.fp-tr { margin-top: 6px; padding: 14px 16px; border: 1px solid var(--linea); border-radius: 12px; background: var(--oro-suave); font-size: 1.2rem; line-height: 1.45; overflow-wrap: anywhere; }
.fp-tr small { display: block; font-family: var(--f-ui); font-size: .66rem; letter-spacing: .2em; text-transform: uppercase; color: var(--oro); margin-bottom: 4px; }
.fp-tr.sin { color: var(--tenue); font-size: 1rem; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { border: 1px solid var(--linea-2); border-radius: 999px; padding: 4px 11px; font-family: var(--f-ui); font-size: .76rem; color: var(--tinta-2); background: var(--hoja-2); }
.chip.k { border-color: var(--k); color: var(--k); }
.chip-estado { display: inline-flex; align-items: center; gap: 7px; font-family: var(--f-ui); font-size: .74rem; color: var(--tenue); }
.chip-estado i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.bloque { display: grid; gap: 10px; border-top: 1px solid var(--linea-2); padding-top: 16px; align-content: start; }
.bloque:first-child { border-top: 0; padding-top: 0; }
.bloque h4 { margin: 0; font-family: var(--f-ui); font-size: .7rem; letter-spacing: .2em; text-transform: uppercase; color: var(--oro); font-weight: 500; }
.dl { margin: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 18px; font-family: var(--f-ui); font-size: .86rem; }
.dl dt { color: var(--tenue); }
.dl dd { margin: 0; }
.contexto { font-size: 1.12rem; line-height: calc(1.75 * var(--lh)); }
.contexto button { border: 0; background: none; padding: 0 1px; border-radius: 4px; color: var(--tinta-2); }
.contexto button:hover { color: var(--oro); }
.contexto button[aria-current="true"] { color: var(--sobre-oro); background: var(--oro); padding: 0 4px; }
.contexto-es { color: var(--tenue); font-size: .98rem; line-height: calc(1.6 * var(--lh)); }
.lema-l { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.lema-l .g { font-size: 1.9rem; color: var(--oro); line-height: 1.1; }
.lema-l small { font-style: italic; color: var(--tenue); font-size: 1rem; }
.nota-ui { font-family: var(--f-ui); font-size: .84rem; color: var(--tenue); margin: 0; }
.paradigma { width: 100%; border-collapse: collapse; font-size: .95rem; }
.paradigma td { padding: 6px 8px 6px 0; border-top: 1px solid var(--linea-2); vertical-align: top; }
.paradigma td.n { text-align: right; font-family: var(--f-ui); color: var(--tenue); font-variant-numeric: tabular-nums; font-size: .8rem; }
.paradigma td.m { font-family: var(--f-ui); font-size: .74rem; color: var(--tenue); }
.paradigma tr.esta td { color: var(--oro); }
.paradigma tr.esta td.m, .paradigma tr.esta td.n { color: var(--oro); }
.barras { display: grid; gap: 6px; font-family: var(--f-ui); font-size: .78rem; }
.barras div { display: grid; grid-template-columns: 8rem minmax(0, 1fr) 2.8rem; gap: 10px; align-items: center; }
.barras span:first-child, .barras a:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--f-texto); font-size: .9rem; color: var(--tinta-2); text-decoration: none; }
.barras i { display: block; height: 6px; border-radius: 4px; background: linear-gradient(90deg, var(--oro-2), var(--oro)); min-width: 2px; }
.barras em { font-style: normal; color: var(--tenue); text-align: right; font-variant-numeric: tabular-nums; }

/* verso en la ventana */
.fv { display: grid; gap: 20px; }
.fv-es { font-size: 1.18rem; line-height: calc(1.7 * var(--lh)); margin: 0; padding: 18px 20px; border-left: 2px solid var(--oro); background: var(--hoja-2); border-radius: 0 12px 12px 0; overflow-wrap: anywhere; }
.fv .palabras { padding-left: 0; }

/* búsqueda en la ventana */
.bq { display: grid; gap: 18px; }
.bq-campo { display: flex; align-items: center; gap: 12px; border-bottom: 1px solid var(--oro); padding: 6px 2px 12px; }
.bq-campo svg { width: 22px; height: 22px; color: var(--oro); flex: none; }
.bq-campo input { flex: 1; min-width: 0; border: 0; background: none; font-family: var(--f-texto); font-size: clamp(1.3rem, 3.4vw, 1.9rem); outline: none; color: var(--tinta); }
.bq-campo input::placeholder { color: var(--tenue); opacity: .7; }
.bq-ej { display: flex; flex-wrap: wrap; gap: 8px; }
.bq-ej a { border: 1px solid var(--linea-2); border-radius: 999px; padding: 6px 14px; text-decoration: none; color: var(--tinta-2); font-size: 1rem; background: var(--hoja-2); }
.bq-ej a:hover { border-color: var(--oro); color: var(--oro); }

/* ---------- lema y búsqueda */
.panel { padding: clamp(26px, 5vw, 56px) 0 50px; display: grid; gap: 22px; }
.panel-cab { display: grid; gap: 8px; }
.panel h1 { margin: 0; font-weight: 400; line-height: 1.05; font-size: clamp(2.4rem, 7vw, 4.4rem); color: var(--oro); }
.panel h1.texto { font-family: var(--f-display); font-weight: 300; color: var(--tinta); font-size: clamp(2rem, 5vw, 3.2rem); }
.panel h1 small { font-size: .42em; color: var(--tenue); font-style: italic; margin-left: 12px; }
.columnas { display: grid; gap: 18px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .columnas { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.tarjeta { background: var(--hoja); border: 1px solid var(--linea-2); border-radius: var(--radio); padding: 20px 22px; display: grid; gap: 12px; align-content: start; min-width: 0; }
.tarjeta h2 { margin: 0; font-family: var(--f-ui); font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; color: var(--oro); font-weight: 500; }
.citas { list-style: none; margin: 0; padding: 0; display: grid; }
.citas li { border-top: 1px solid var(--linea-2); }
.citas li:first-child { border-top: 0; }
.cita { display: grid; gap: 3px; width: 100%; text-align: left; border: 0; background: none; padding: 12px 8px; border-radius: 10px; color: inherit; }
.cita:hover { background: var(--oro-suave); }
.cita .ref { font-family: var(--f-ui); font-size: .76rem; letter-spacing: .06em; color: var(--oro); }
.cita .gtx { font-size: 1.08rem; line-height: calc(1.55 * var(--lh)); overflow-wrap: anywhere; }
.cita .gtx mark { background: var(--oro-suave); color: var(--oro); border-radius: 4px; padding: 0 3px; box-shadow: inset 0 -1px 0 var(--oro); }
.cita .stx { color: var(--tenue); font-size: .93rem; overflow-wrap: anywhere; }
.progreso { height: 3px; border-radius: 3px; background: var(--hoja-3); overflow: hidden; }
.progreso i { display: block; height: 100%; background: var(--oro); width: 0; transition: width .2s; }
.resultados { display: grid; gap: 8px; }
.res-lema { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; padding: 12px 14px; border-radius: 12px; background: var(--hoja-2); border: 1px solid transparent; text-decoration: none; color: var(--tinta); }
.res-lema:hover { border-color: var(--oro); }
.res-lema .g { font-size: 1.35rem; }
.res-lema .g small { font-style: italic; color: var(--tenue); font-size: .88rem; margin-left: 8px; }
.res-lema .x { font-family: var(--f-ui); font-size: .78rem; color: var(--tenue); text-align: right; }
.buscador-pag { display: flex; align-items: center; gap: 10px; border: 1px solid var(--linea); border-radius: 999px; padding: 6px 8px 6px 16px; background: var(--hoja); max-width: 640px; }
.buscador-pag svg { width: 18px; height: 18px; color: var(--oro); flex: none; }
.buscador-pag input { flex: 1; min-width: 0; border: 0; background: none; outline: none; font-size: 1.1rem; padding: 6px 0; }
.filtros-m { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(150px, 100%), 1fr)); gap: 12px; font-family: var(--f-ui); font-size: .8rem; }
.filtros-m label { display: grid; gap: 5px; color: var(--tenue); letter-spacing: .04em; }
.filtros-m select, .filtros-m input, .filtros-m .mm-btn { width: 100%; min-width: 0; background: var(--hoja-2); border: 1px solid var(--linea-2); border-radius: 10px; padding: 8px 10px; color: var(--tinta); }

/* ---------- pie */
.pie { margin-top: 30px; border-top: 1px solid var(--linea-2); background: var(--bg-2); }
/* final de página sin hueco antes del pie (BiEx, 31-oct-2026): el último panel no suma su margen inferior */
.pagina > .in > .panel:last-child { padding-bottom: 12px; }
.pie .in { padding-top: 34px; padding-bottom: calc(40px + env(safe-area-inset-bottom, 0px)); display: grid; gap: 10px; font-family: var(--f-ui); font-size: .8rem; color: var(--tenue); line-height: 1.6; }
.pie .marca-pie { font-family: var(--f-display); font-size: 1.1rem; letter-spacing: .3em; text-transform: uppercase; color: var(--tinta); margin-bottom: 6px; }
.pie p { margin: 0; max-width: 92ch; }
.pie .autoria { display: grid; gap: 3px; justify-items: center; text-align: center; margin-top: 14px; }
.pie .autoria strong { font-family: var(--f-display); font-weight: 500; font-size: 1.05rem; letter-spacing: .12em; color: var(--tinta); }
.pie .creditos { font-size: .4rem; line-height: 1.6; text-align: right; max-width: none; margin-top: 18px; color: var(--tenue); }

/* ---------- movimiento */
@media (prefers-reduced-motion: no-preference) {
  .il { animation: tinta 1s cubic-bezier(.2, .7, .2, 1) both; animation-delay: calc(var(--i) * 60ms + 150ms); }
  @keyframes tinta { from { opacity: 0; transform: translateY(8px); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }
  .modal[open] { animation: entra .28s cubic-bezier(.2, .8, .2, 1); }
  @keyframes entra { from { opacity: 0; transform: translateY(14px) scale(.985); } to { opacity: 1; transform: none; } }
  .modal[open]::backdrop { animation: velo .28s ease; }
  @keyframes velo { from { opacity: 0; } to { opacity: 1; } }
  /* salida de la ventana real (navegadores con «overlay»): se desvanece con su cristal y su velo, sin copias */
  @supports (overlay: auto) {
    .modal { transition: opacity .2s ease, transform .2s cubic-bezier(.4, 0, .2, 1), overlay .2s allow-discrete, display .2s allow-discrete; }
    .modal:not([open]) { opacity: 0; transform: translateY(10px) scale(.985); pointer-events: none; }
    .modal::backdrop { transition: opacity .22s ease, overlay .22s allow-discrete, display .22s allow-discrete; }
    .modal:not([open])::backdrop { opacity: 0; }
  }
  .hero-tit, .codice { animation: sube .9s cubic-bezier(.2, .7, .2, 1) both; }
  .codice { animation-delay: .08s; }
  @keyframes sube { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* ---------- ajustes para teléfonos: la hoja ocupa todo el ancho y los márgenes internos se reducen */
@media (max-width: 600px) {
  :root { --alto: 56px; }
  .barra .in { gap: 12px; }
  .acc { gap: 6px; }
  .btn-icono, .btn-buscar { width: 38px; height: 38px; }
  .sello { width: 36px; height: 36px; font-size: .86rem; }
  .libro-grid { padding-left: 0; padding-right: 0; padding-top: 0; padding-bottom: 24px; gap: 0; }
  .hoja { border-left: 0; border-right: 0; border-top: 0; border-radius: 0; }
  .barra-hoja { gap: 8px; padding: 8px 12px; border-radius: 0; justify-content: space-between; }
  .barra-hoja .seg button { padding: 6px 11px; letter-spacing: .08em; font-size: .72rem; }
  .barra-hoja .seg-ico button { padding: 6px 10px; }
  .barra-hoja .seg-ico .txt { display: none; }
  .btn-cap { padding: 6px 11px; font-size: .74rem; letter-spacing: .06em; }
  .encab { padding: 20px 8px 4px; gap: 6px; }
  .encab .btn-icono { width: 34px; height: 34px; }
  .nota-base { margin: 4px 14px 6px; padding: 10px 12px; font-size: .8rem; }
  .lectura { padding: 4px 14px 22px 8px; }
  .vl { grid-template-columns: 1.9rem minmax(0, 1fr); gap: 0 12px; padding: 7px 4px 7px 0; }
  .vl .vn { font-size: 1.05rem; line-height: 1.75; }
  .vl .vn::after { right: -8px; }
  .continuo { padding: 12px 16px 22px; }
  .analisis { padding: 2px 12px 24px; }
  .lentes { padding: 10px 12px; }
  .banda .in { padding-top: 18px; padding-bottom: 16px; gap: 12px 22px; }
  .fin-cap { padding: 16px 12px 22px; }
  .fin-cap .btn { flex: 1 1 0; min-width: 0; padding: 10px 12px; font-size: .74rem; letter-spacing: .08em; }
  .lentes, .claves { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .lentes::-webkit-scrollbar, .claves::-webkit-scrollbar { display: none; }
  .lentes > *, .claves > * { flex: none; }
  .lentes, .claves { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 30px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 30px), transparent); padding-right: 30px; }
  .claves { padding-bottom: 4px; }
  .m-pie .btn { flex: 1 1 auto; }
}
/* dentro del sitio oficial (ventana a pantalla completa) */
@media (max-width: 520px) { .incrustado .marca .nombre { display: none; } }
#libros, .seccion { scroll-margin-top: calc(var(--alto) + 10px); }
.vl, .vs, .av, .aviso-anadido { scroll-margin-top: calc(var(--alto) + var(--alto-hoja, 76px) + 14px + env(safe-area-inset-top, 0px)); }

/* ---------- lectura y apariencia (ventana del botón Aa) */
.ap { display: grid; gap: 22px; max-width: 760px; margin: 0 auto; }
.ap-muestra { border: 1px solid var(--linea); border-radius: 14px; background: var(--hoja-2); padding: 18px 20px; display: grid; gap: 8px; }
.ap-il { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 18px; }
.ap-il > span { display: grid; justify-items: center; gap: 4px; text-align: center; }
.ap-il .g { font-size: 1.7rem; line-height: 1.1; color: var(--oro); }
.ap-il .t { font-size: .95rem; line-height: 1.3; font-style: italic; color: var(--tinta-2); max-width: 13ch; }
.ap-muestra .e { font-size: 1.06rem; line-height: calc(1.6 * var(--lh)); margin: 4px 0 0; color: var(--tenue); text-align: center; }
.ap-fila { display: grid; gap: 10px; }
.ap-fila > h4 { margin: 0; font-family: var(--f-ui); font-size: .7rem; letter-spacing: .2em; text-transform: uppercase; color: var(--oro); font-weight: 500; display: flex; justify-content: space-between; gap: 10px; }
.ap-fila > h4 span { color: var(--tenue); letter-spacing: .06em; text-transform: none; font-size: .78rem; font-weight: 400; }
.ap-tams { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 5px; }
.ap-tams button, .ap-ops button { border: 1px solid var(--linea-2); background: var(--hoja-2); color: var(--tinta); border-radius: 12px; }
.ap-tams button { height: 52px; min-width: 0; display: grid; place-items: center; font-family: var(--f-griego); line-height: 1; padding: 0; }
.ap-ops { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(170px, 100%), 1fr)); gap: 8px; }
.ap-letras { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 700px) { .ap-letras { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ap-ops button { text-align: left; padding: 12px 14px; display: grid; gap: 4px; }
.ap-ops button b { font-weight: 500; font-size: 1.02rem; }
.ap-ops button small { color: var(--tenue); font-size: .8rem; line-height: 1.35; font-family: var(--f-ui); }
.ap-tams button[aria-pressed="true"], .ap-ops button[aria-pressed="true"] { border-color: var(--oro); background: var(--oro-suave); color: var(--oro-vivo); box-shadow: inset 0 0 0 1px var(--oro); }
:root[data-theme="light"] .ap-tams button[aria-pressed="true"], :root[data-theme="light"] .ap-ops button[aria-pressed="true"] { color: var(--oro); }
.ap-ops button:hover, .ap-tams button:hover { border-color: var(--linea); }
.f-clasica b { font-family: "Gentium Book Plus", Georgia, serif; } .f-clara b { font-family: "BiEx Clara", "BiEx Respaldo", sans-serif; } .f-dislexia b { font-family: "BiEx Dislexia", "BiEx Respaldo", sans-serif; }

/* aviso breve (enlace copiado, etc.) */
.aviso-flot { position: fixed; left: 0; right: 0; margin: 0 auto; width: max-content; max-width: calc(100vw - 32px); bottom: calc(22px + env(safe-area-inset-bottom, 0px)); z-index: 80; background: var(--tinta); color: var(--bg); font-family: var(--f-ui); font-size: .86rem; padding: 10px 18px; border-radius: 999px; box-shadow: var(--sombra); pointer-events: none; opacity: 0; transition: opacity .2s; }
.aviso-flot.si { opacity: 1; }
.aviso-version { position: fixed; left: 0; right: 0; margin: 0 auto; width: max-content; max-width: calc(100vw - 24px); bottom: calc(18px + env(safe-area-inset-bottom, 0px)); z-index: 79; display: flex; align-items: center; gap: 10px; padding: 5px 5px 5px 16px; border-radius: 999px; font-family: var(--f-ui); font-size: .86rem; color: var(--tinta); background: color-mix(in srgb, var(--hoja-2) 80%, transparent); -webkit-backdrop-filter: blur(18px) saturate(1.5); backdrop-filter: blur(18px) saturate(1.5); border: 1px solid color-mix(in srgb, var(--oro) 34%, transparent); box-shadow: var(--sombra); opacity: 0; transform: translateY(10px); transition: opacity .25s, transform .25s; }
.aviso-version.si { opacity: 1; transform: none; }
.aviso-version .av-si { font: inherit; font-weight: 500; color: var(--sobre-oro); background: var(--oro); border: 0; border-radius: 999px; padding: 7px 15px; min-height: 34px; cursor: pointer; }
.aviso-version .av-no { display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--tenue); cursor: pointer; }
.aviso-version .av-no svg { width: 16px; height: 16px; }
.aviso-version button:focus-visible { outline: 2px solid var(--oro-vivo); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .aviso-version { transition: opacity .2s; transform: none; } }

/* ===================================================================== edición BiEx: colores del texto (ver INFO del sitio oficial) */
:root { --ed-azul: #b6c8ee; --ed-naranja: #f0a35e; --ed-gris: #a8a8a8; } /* gris de las ampliaciones: 20 % más claro (BiEx, 1-nov-2026) */
:root[data-theme="light"] { --ed-azul: #1c3770; --ed-naranja: #b5530d; --ed-gris: #6a6a6a; }
.it { font-style: italic; } .ng { font-weight: 700; }
bdi.he { unicode-bidi: isolate; font-family: "Noto Serif Hebrew", "SBL Hebrew", "Ezra SIL", "Times New Roman", var(--f-texto); }
html[data-letra="dislexia"] .it { font-style: normal; text-decoration: underline dotted; text-underline-offset: 3px; }
html.ed :is(.vt, .continuo .vs, .fv-es, .contexto-es, .stx, .av-cab p, .op-muestra, .rv-tx, .tl-cita p, .res-cita-tx p) { color: var(--ed-azul); }
html.ed .tm { color: var(--ed-naranja); }
html.ed .tc { text-transform: uppercase; letter-spacing: .02em; }
html.ed .tc .gr, html.ed .tc [lang="grc"] { text-transform: none; letter-spacing: 0; }
html.ed .tk, html.ed .tk .tm { color: var(--ed-gris); }
html.ed :is(.vl.n-base .vt, .continuo .vs.n-base) { color: var(--ed-azul); opacity: .86; }
.ley-ed { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 10px; font-size: .95rem; }
.ley-ed > span { padding: 4px 10px; border: 1px solid var(--linea-2); border-radius: 8px; background: var(--hoja-2); }
html:not(.ed) .ley-ed { opacity: .45; }
.ley-mini { display: block; margin-top: 6px; color: var(--tenue); }
.ley-mini .tm, .ley-mini .tc, .ley-mini .tk { font-family: var(--f-texto); font-size: .95em; }
.op-muestra { margin: 6px 0 0; font-size: 1.12rem; line-height: 1.75; }
.ap-pie { display: flex; flex-wrap: wrap; gap: 10px; }
.enlace { border: 0; background: none; padding: 0; color: var(--oro); text-decoration: underline; text-underline-offset: 3px; font: inherit; cursor: pointer; }
.cargando-mini { color: var(--tenue); font-family: var(--f-ui); font-size: .8rem; letter-spacing: .06em; }

/* ===================================================================== biblioteca: franja deslizable y orden */
.franja { position: relative; padding-top: 74px; margin-top: -60px; pointer-events: none; }
.franja .panorama { pointer-events: auto; }
.franja-visor { pointer-events: none; }
.franja .panorama { height: 62px; touch-action: pan-y; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; cursor: pointer; }
.franja .panorama a { -webkit-user-drag: none; transition: background-color .12s, transform .12s; }
.franja .panorama a.activo { background: var(--oro-suave); outline: 2px solid var(--oro-vivo); outline-offset: -2px; z-index: 2; }
.franja .panorama a.activo i { opacity: 1; filter: brightness(1.15); }
.franja-visor { position: absolute; top: 0; left: 0; z-index: 5; display: flex; align-items: center; gap: 12px; width: max-content; max-width: min(340px, 100%); padding: 9px 14px; border: 1px solid var(--oro); border-radius: 12px; background: var(--hoja); box-shadow: 0 12px 30px rgba(0, 0, 0, .35); opacity: 0; transform: translateY(6px); transition: opacity .15s, transform .15s; pointer-events: none; }
.franja-visor::after { content: ""; position: absolute; left: var(--flecha, 50%); bottom: -7px; width: 12px; height: 12px; margin-left: -6px; background: var(--hoja); border-right: 1px solid var(--oro); border-bottom: 1px solid var(--oro); transform: rotate(45deg); }
.franja.con-visor .franja-visor { opacity: 1; transform: none; }
.franja.cancelar .franja-visor { opacity: .35; }
.fv-n { font-family: var(--f-display); font-size: 1.6rem; color: var(--oro); line-height: 1; }
.fv-t { display: grid; line-height: 1.2; min-width: 0; }
.fv-t b { font-size: 1.15rem; font-weight: 400; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fv-t small { font-family: var(--f-ui); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--tenue); white-space: nowrap; }
.fv-p { font-family: var(--f-ui); font-size: .78rem; color: var(--oro); margin-left: auto; }
.orden-libros { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 0 0 18px; }
.orden-libros .rotulo { margin: 0; }
.orden-nota { flex: 1 1 260px; margin: 0; }
.seg-orden button:disabled { opacity: .4; cursor: default; }
.grupo-libros > h3 small { font-family: var(--f-ui); letter-spacing: .08em; text-transform: none; color: var(--tenue); font-size: .78rem; font-weight: 400; }
.tlibro .fecha { grid-column: 1 / -1; display: flex; align-items: center; gap: 6px; font-family: var(--f-ui); font-size: .74rem; color: var(--tinta-2); margin-top: 6px; letter-spacing: .02em; }
.tlibro .fecha svg { width: 15px; height: 15px; color: var(--oro); flex: none; }
.tira-tiempo { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 16px; padding: 18px 20px; margin: 4px 0 34px; border: 1px solid var(--linea); border-radius: var(--radio); background: linear-gradient(90deg, var(--oro-suave), transparent 70%), var(--hoja); text-decoration: none; color: var(--tinta); }
.tira-tiempo:hover { border-color: var(--oro); }
.tt-ico svg { width: 34px; height: 34px; color: var(--oro); }
.tt-tx { display: grid; gap: 3px; }
.tt-tx b { font-family: var(--f-display); font-size: 1.35rem; font-weight: 500; letter-spacing: .06em; }
.tt-tx span { font-size: .95rem; color: var(--tinta-2); }
.tt-ir { font-family: var(--f-ui); font-size: .74rem; letter-spacing: .2em; text-transform: uppercase; color: var(--oro); }
.banda-fecha { display: inline-flex; align-items: center; gap: 7px; margin-top: 10px; font-family: var(--f-ui); font-size: .8rem; color: var(--tinta-2); text-decoration: none; letter-spacing: .03em; }
.banda-fecha svg { width: 16px; height: 16px; color: var(--oro); }
.banda-fecha:hover { color: var(--oro); }

/* ===================================================================== lectura: filtro de niveles, opciones */
.filtro-niv { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--linea); border-radius: 999px; padding: 0 6px 0 10px; height: 36px; background: var(--hoja); color: var(--tenue); max-width: 100%; }
.filtro-niv.activo { border-color: var(--oro); color: var(--oro); }
.filtro-niv svg { width: 16px; height: 16px; flex: none; }
.filtro-niv select, .filtro-niv .mm-btn { border: 0; background: transparent; font-family: var(--f-ui); font-size: .78rem; color: var(--tinta-2); max-width: 220px; padding: 4px 2px; }
.filtro-niv { min-width: 0; }
.filtro-niv .mm-btn { min-width: 0; display: inline-flex; align-items: center; }
.filtro-niv .mm-btn .mm-tx { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.filtro-niv .mm-btn svg { flex: none; }
.filtro-niv select option { background: var(--hoja); color: var(--tinta); }
.nota-filtro { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 6px clamp(14px, 3vw, 38px) 0; padding: 10px 14px; border: 1px dashed var(--oro-2); border-radius: 10px; font-family: var(--f-ui); font-size: .84rem; color: var(--tinta-2); }
.nota-filtro svg { width: 16px; height: 16px; color: var(--oro); }
.salto { display: block; width: 100%; margin: 6px 0; padding: 6px 10px; border: 0; border-radius: 8px; background: none; text-align: center; font-family: var(--f-ui); font-size: .78rem; letter-spacing: .08em; color: var(--tenue); }
.salto:hover { background: var(--oro-suave); color: var(--oro); }
.tesela.fuera { opacity: .28; }
.chip-volver { display: inline-flex; align-items: center; gap: 8px; margin: 12px clamp(14px, 3vw, 38px) 0; padding: 7px 14px; border: 1px solid var(--oro); border-radius: 999px; background: var(--oro-suave); color: var(--oro); font-family: var(--f-ui); font-size: .8rem; max-width: calc(100% - 28px); }
.chip-volver svg { width: 16px; height: 16px; flex: none; }
.chip-volver span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.barra-volver { margin-bottom: -6px; }
.barra-volver svg, .m-pie .btn svg { width: 16px; height: 16px; }

/* ===================================================================== buscador */
.bq-campo { position: sticky; top: -1px; z-index: 2; background: var(--hoja); }
.bq-borrar { width: 34px; height: 34px; flex: none; }
.bq-estado { margin: -8px 0 0; font-family: var(--f-ui); font-size: .84rem; color: var(--tenue); min-height: 1.2em; }
.bq-res { display: grid; gap: 22px; transition: opacity .2s; }
.bq-res.esperando { opacity: .5; }
.bq-g { display: grid; gap: 10px; }
.bq-g > h3 { margin: 0; font-family: var(--f-ui); font-size: .72rem; letter-spacing: .22em; text-transform: uppercase; color: var(--oro); font-weight: 500; display: flex; align-items: center; gap: 12px; }
.bq-g > h3::after { content: ""; flex: 1; height: 1px; background: var(--linea-2); }
.res-ayuda { padding: 14px 16px; border: 1px solid var(--linea); border-radius: 12px; background: var(--hoja-2); display: grid; gap: 8px; justify-items: start; }
.res-ayuda h4 { margin: 0; font-size: 1.08rem; font-weight: 500; }
.res-ayuda p { margin: 0; color: var(--tinta-2); line-height: 1.55; }
.res-cita { padding: 14px 16px; border: 1px solid var(--oro); border-radius: 12px; background: var(--oro-suave); display: grid; gap: 10px; }
.rc-cab { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.rc-cab b { font-family: var(--f-display); font-size: 1.3rem; font-weight: 500; letter-spacing: .04em; }
.rc-acc { display: flex; gap: 8px; flex-wrap: wrap; }
.res-cita-tx p { margin: 0 0 6px; line-height: 1.65; }
.res-cita-tx sup { color: var(--oro); font-family: var(--f-display); }
.res-libros { display: flex; flex-wrap: wrap; gap: 8px; }
.res-libro { display: grid; padding: 10px 14px; border: 1px solid var(--linea-2); border-radius: 12px; background: var(--hoja-2); text-decoration: none; color: var(--tinta); min-width: 150px; }
.res-libro:hover { border-color: var(--oro); }
.res-libro b { font-weight: 400; font-size: 1.12rem; }
.res-libro span { font-family: var(--f-ui); font-size: .74rem; color: var(--tenue); }
.res-escenas { display: grid; gap: 8px; }
.res-escena { padding: 11px 14px; border-radius: 12px; background: var(--hoja-2); border: 1px solid transparent; display: grid; gap: 6px; }
.res-escena:hover { border-color: var(--linea); }
.re-t { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; text-decoration: none; color: var(--tinta); }
.re-t b { font-weight: 500; font-size: 1.06rem; }
.re-t small { font-family: var(--f-ui); font-size: .72rem; color: var(--tenue); letter-spacing: .06em; }
.re-refs { display: flex; flex-wrap: wrap; gap: 6px; }
.re-refs a { font-family: var(--f-ui); font-size: .76rem; padding: 3px 10px; border: 1px solid var(--linea); border-radius: 999px; text-decoration: none; }
.re-refs a:hover { background: var(--oro); color: var(--sobre-oro); }
.res-versos { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.res-verso { display: grid; gap: 3px; padding: 10px 12px; border-radius: 10px; text-decoration: none; color: var(--tinta); }
.res-verso:hover { background: var(--oro-suave); }
.rv-ref { font-family: var(--f-ui); font-size: .76rem; letter-spacing: .1em; text-transform: uppercase; color: var(--oro); }
.rv-tx { line-height: 1.6; overflow-wrap: anywhere; }
.rv-tx .vt { font-size: 1.02rem; }
mark { background: var(--oro-suave); color: inherit; border-bottom: 1.5px solid var(--oro); padding: 0 1px; border-radius: 2px; }
.bq-avisos { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.bq-inicio { display: grid; gap: 16px; }
.bq-grupo-ej h4 { margin: 0 0 8px; font-family: var(--f-ui); font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; color: var(--tenue); font-weight: 500; }
.bq-ej button { border: 1px solid var(--linea-2); border-radius: 999px; padding: 6px 14px; color: var(--tinta-2); font-size: 1rem; background: var(--hoja-2); }
.bq-ej button:hover { border-color: var(--oro); color: var(--oro); }
.m-pie-bq { justify-content: space-between; }

/* ===================================================================== manuscritos */
.ms-res { display: grid; gap: 8px; justify-items: start; }
.ms-res p { margin: 0; }
.ms-sig { font-family: var(--f-griego); color: var(--oro); letter-spacing: .04em; }
.ms-barra { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 12px; margin-bottom: 14px; }
.ms-elegir { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; }
.ms-elegir > svg { width: 18px; height: 18px; color: var(--oro); flex: none; }
.ms-elegir .mm-btn { height: 34px; padding: 0 12px; border: 1px solid var(--linea); border-radius: 999px; background: color-mix(in srgb, var(--hoja-2) 80%, transparent); font-family: var(--f-ui); font-size: .8rem; color: var(--tinta); max-width: 100%; }
.ms-elegir .mm-btn.ms-sel-lib { max-width: min(100%, 17rem); }
.ms-elegir .mm-btn:hover { border-color: var(--oro); }
.ms { display: grid; gap: 18px; }
.ms-intro { margin: 0; color: var(--tinta-2); }
.ms-eje { position: relative; height: 66px; margin: 4px 14px 0; border-bottom: 1px solid var(--linea); }
.ms-marca { position: absolute; bottom: -20px; transform: translateX(-50%); font-family: var(--f-ui); font-size: .7rem; color: var(--tenue); white-space: nowrap; }
.ms-marca::before { content: ""; position: absolute; left: 50%; top: -6px; width: 1px; height: 6px; background: var(--linea); }
.ms-punto { position: absolute; bottom: 6px; transform: translateX(-50%); padding: 3px 7px; border-radius: 999px; background: var(--oro); color: var(--sobre-oro); font-family: var(--f-griego); font-size: .82rem; line-height: 1.1; white-space: nowrap; }
.ms-punto:nth-child(even) { bottom: 34px; }
.ms-punto.sin { background: var(--hoja-3); color: var(--tenue); text-decoration: line-through; }
.ms-texto { font-size: 1.25rem; line-height: 2.1; }
.ms-w { border-radius: 4px; padding: 0 2px; }
button.ms-w { border: 0; background: none; font: inherit; color: inherit; cursor: pointer; padding: 0 2px; }
.ms-w.v-om { text-decoration: line-through; text-decoration-color: #d9715f; text-decoration-thickness: 2px; background: rgba(217, 113, 95, .12); }
.ms-w.v-sust { border-bottom: 2px solid #d9a441; background: rgba(217, 164, 65, .12); }
.ms-w.v-orden { border-bottom: 2px dotted #7fb0d9; }
.ms-w.fuera-na { opacity: .5; }
.ms-add { border: 0; background: none; color: #79b98a; font-size: 1.1rem; padding: 0 2px; cursor: pointer; font-weight: 700; line-height: 1; }
.sgn { display: inline-block; width: .72em; height: .72em; vertical-align: .42em; margin: 0 .08em; color: var(--oro); }
.sgn svg { display: block; width: 100%; height: 100%; overflow: visible; }
.ms-add .sgn { color: inherit; width: .8em; height: .8em; vertical-align: .3em; }
.mv-ap { line-height: 1.7; }
.mv-ap .ms-sig { font-size: .92em; }
.sgn-ley { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 10px; }
.sgn-ley span { white-space: nowrap; }
.ms-ley { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; }
.ms-ley .ms-w { font-family: var(--f-ui); font-size: .78rem; }
.ms-vars { display: grid; gap: 8px; }
.ms-var { display: grid; gap: 6px; padding: 11px 14px; border-radius: 12px; background: var(--hoja-2); border: 1px solid transparent; border-left: 3px solid var(--linea); }
.ms-var.v-om { border-left-color: #d9715f; } .ms-var.v-sust { border-left-color: #d9a441; } .ms-var.v-add { border-left-color: #79b98a; } .ms-var.v-orden { border-left-color: #7fb0d9; } .ms-var.v-ausente { border-left-color: var(--tenue); }
.ms-var.sel { border-color: var(--oro); box-shadow: 0 0 0 1px var(--oro) inset; }
.mv-tipo { font-family: var(--f-ui); font-size: .68rem; letter-spacing: .2em; text-transform: uppercase; color: var(--tenue); }
.mv-fr { margin: 0; line-height: 1.55; }
.mv-ap { font-family: var(--f-griego); font-size: 1.05rem; }
.mv-tes { display: flex; flex-wrap: wrap; gap: 6px; }
.mv-tes .chip { font-family: var(--f-griego); }
.gk-ms { font-family: var(--f-griego); color: var(--oro-vivo); }
.ms-testigos { display: grid; gap: 6px; }
.ms-t { border: 1px solid var(--linea-2); border-radius: 12px; background: var(--hoja-2); overflow: hidden; }
.ms-t summary { display: grid; grid-template-columns: 3.4rem minmax(0, 1fr) 92px; align-items: center; gap: 12px; padding: 10px 14px; cursor: pointer; list-style: none; }
.ms-t summary::-webkit-details-marker { display: none; }
.ms-t[open] summary { border-bottom: 1px solid var(--linea-2); }
.mt-s { font-family: var(--f-griego); font-size: 1.35rem; color: var(--oro); text-align: center; }
.mt-n { display: grid; min-width: 0; }
.mt-n b { font-weight: 500; }
.mt-n small { font-family: var(--f-ui); font-size: .72rem; color: var(--tenue); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mt-c { position: relative; height: 18px; border-radius: 999px; background: var(--hoja-3); overflow: hidden; }
.mt-c i { position: absolute; left: 0; top: 0; bottom: 0; background: linear-gradient(90deg, var(--oro-2), var(--oro)); }
.mt-c em { position: relative; display: block; text-align: center; font-family: var(--f-ui); font-style: normal; font-size: .7rem; line-height: 18px; color: var(--tinta); }
.mt-cuerpo { padding: 12px 14px 16px; display: grid; gap: 10px; }
.mt-cuerpo .nota-ui { margin: 0; }
.mt-img { display: flex; flex-wrap: wrap; gap: 8px; }
.dipl { font-family: var(--f-griego); font-size: 1.2rem; letter-spacing: .08em; line-height: 1.75; padding: 14px 16px; border-radius: 10px; background: #efe4c8; color: #2b2116; box-shadow: inset 0 0 0 1px rgba(43, 33, 22, .12); overflow-x: auto; }
.dlin { white-space: nowrap; }
.dlin.col { margin-top: 10px; padding-top: 8px; border-top: 1px dashed rgba(43, 33, 22, .3); }
.dpal.ns, .dpal .ov { text-decoration: overline; text-decoration-thickness: 1.5px; }
.dpal .ov { text-decoration-line: overline; }
.dpal.supl { color: rgba(43, 33, 22, .45); }
.dpal .lag { color: rgba(43, 33, 22, .45); letter-spacing: 0; }
.dpal .abr { text-decoration: underline dotted; }
.corr sup { color: #1f6e6a; font-family: var(--f-ui); font-size: .7rem; }
.dpal.cw { color: #1f6e6a; font-size: .8em; vertical-align: super; }
.cw { color: #1f6e6a; }
.ms-eds { margin: 0; padding-left: 18px; display: grid; gap: 4px; color: var(--tinta-2); font-size: .95rem; }
.ms-eds span { font-family: var(--f-griego); color: var(--oro-vivo); }
.creditos-ms { margin: 22px 0 0; font-family: var(--f-ui); font-size: .4rem; line-height: 1.6; color: var(--tenue); text-align: right; }
.ms-pal p { margin: 0 0 6px; }
.ms-pal-v { line-height: 1.6; }

/* ===================================================================== línea del tiempo */
.tl-intro { max-width: 760px; font-size: .95rem; line-height: 1.6; }
.tl-conj { display: grid; gap: 10px; padding: 18px 20px 16px; border: 1px solid var(--linea-2); border-radius: var(--radio); background: var(--hoja); }
.tl-mapa { overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scrollbar-width: thin; margin: 0 -6px; padding: 0 6px; -webkit-overflow-scrolling: touch; }
.tl-lienzo { position: relative; min-width: 640px; height: 120px; margin: 0 22px 0 16px; }
.te-eje { position: absolute; left: 0; right: 0; height: 1px; background: var(--linea); }
.te-m { position: absolute; pointer-events: none; top: 7px; transform: translateX(-50%); font-family: var(--f-ui); font-size: .7rem; font-variant-numeric: tabular-nums; color: var(--tenue); white-space: nowrap; }
.te-m::before { content: ""; position: absolute; left: 50%; top: -11px; width: 1px; height: 7px; background: var(--linea); }
.te-p { position: absolute; width: 22px; height: 22px; margin: -11px 0 0 -11px; padding: 0; border: 0; border-radius: 50%; background: transparent; cursor: pointer; touch-action: manipulation; }
.te-p::after { content: ""; position: absolute; inset: 6px; border-radius: 50%; background: var(--oro); box-shadow: 0 0 0 2px var(--hoja); transition: transform .18s ease, box-shadow .18s ease; }
.te-p.es::after { background: var(--c-N); }
.te-p.clave::after { inset: 2px; background: #d9715f; box-shadow: 0 0 0 4px rgba(217, 113, 95, .22); }
.te-p:hover::after, .te-p:focus-visible::after { transform: scale(1.35); }
.te-p.sel::after { transform: scale(1.45); box-shadow: 0 0 0 2px var(--hoja), 0 0 0 4px var(--tinta); }
.te-p:focus-visible { outline: none; }
.tl-info { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; min-height: 2.6em; padding: 10px 14px; border-radius: 12px; background: var(--hoja-2); }
.ti-nav { display: inline-flex; gap: 4px; }
.ti-nav button { width: 30px; height: 30px; font-size: 1.1rem; line-height: 1; }
.ti-nav button:disabled { opacity: .35; }
.tl-info .ti-f { font-family: var(--f-ui); font-size: .74rem; letter-spacing: .08em; color: var(--oro); white-space: nowrap; }
.tl-info b { flex: 1 1 14rem; font-weight: 500; line-height: 1.4; }
.tl-info .btn { margin-left: auto; }
.tl-ley .nota-era { flex-basis: 100%; }
.tl-ley .nota-era::before { display: none !important; }
.destello .tl-c { animation: destello 1.6s ease; }
@keyframes destello { 0%, 40% { box-shadow: 0 0 0 3px var(--oro); } 100% { box-shadow: 0 0 0 0 transparent; } }
.trad { color: var(--tenue); font-weight: inherit; }
.btn-herr svg { width: 20px; height: 20px; }
.herramientas.en-modal { grid-template-columns: minmax(0, 1fr); border-radius: 14px; }
@media (min-width: 640px) { .herramientas.en-modal { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.herramientas.en-modal .herr { padding: 18px 18px 16px; gap: 6px; }
.herramientas.en-modal .herr h3 { font-size: 1.22rem; }
.herramientas.en-modal .herr p { font-size: .9rem; line-height: 1.5; }
.herr-ir { font-family: var(--f-ui); font-size: .7rem; letter-spacing: .18em; text-transform: uppercase; color: var(--oro); }
.tl-ley { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 4px; font-family: var(--f-ui); font-size: .74rem; color: var(--tenue); }
.tl-ley span::before { content: ""; display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 6px; vertical-align: 0; }
.tl-ley .ev::before { background: var(--oro); } .tl-ley .es::before { background: var(--c-N); } .tl-ley .clave::before { background: #d9715f; }
.tl-ctl { display: flex; justify-content: flex-start; overflow-x: auto; }
ol.tl { list-style: none; margin: 0; padding: 0 0 0 4px; position: relative; display: grid; gap: 12px; }
ol.tl::before { content: ""; position: absolute; left: 7.4rem; top: 4px; bottom: 4px; width: 2px; background: linear-gradient(var(--linea), var(--oro-2), var(--linea)); }
.tl-dec { padding: 14px 0 2px 8.6rem; font-family: var(--f-ui); font-size: .7rem; letter-spacing: .24em; text-transform: uppercase; color: var(--oro); }
.tl-it { display: grid; grid-template-columns: 6.6rem minmax(0, 1fr); gap: 0 2rem; align-items: start; position: relative; }
.tl-it::before { content: ""; position: absolute; left: calc(7.4rem - 5px); top: 9px; width: 12px; height: 12px; border-radius: 50%; background: var(--oro); box-shadow: 0 0 0 4px var(--bg); }
.tl-es::before { background: var(--c-N); }
.tl-f { font-family: var(--f-ui); font-size: .78rem; color: var(--tinta-2); text-align: right; padding-top: 5px; line-height: 1.35; }
.tl-c { display: grid; gap: 6px; justify-items: start; padding: 10px 14px; border-radius: 12px; background: var(--hoja); border: 1px solid var(--linea-2); text-decoration: none; color: var(--tinta); }
.tl-c b { font-weight: 500; font-size: 1.06rem; line-height: 1.35; }
.tl-c p { margin: 0; color: var(--tinta-2); line-height: 1.55; font-size: .95rem; }
.tl-es .tl-c { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; background: transparent; border-style: dashed; }
.tl-es .tl-c:hover { border-color: var(--c-N); }
.tl-k { font-family: var(--f-ui); font-size: .68rem; letter-spacing: .18em; text-transform: uppercase; color: var(--c-N); }
.tl-es .tl-c small { font-family: var(--f-ui); font-size: .74rem; color: var(--tenue); }
.tl-refs { display: flex; flex-wrap: wrap; gap: 6px; }
.tl-refs a { font-family: var(--f-ui); font-size: .74rem; padding: 3px 10px; border: 1px solid var(--linea); border-radius: 999px; text-decoration: none; }
.tl-refs a:hover { background: var(--oro); color: var(--sobre-oro); }
.tl-h { font-size: .85rem !important; color: var(--tenue) !important; }
.tl-clave::before { width: 22px; height: 22px; left: calc(7.4rem - 10px); top: 6px; background: #d9715f; box-shadow: 0 0 0 6px rgba(217, 113, 95, .22); }
.tl-clave .tl-c { border-color: #d9715f; background: linear-gradient(180deg, rgba(217, 113, 95, .1), transparent 60%), var(--hoja); padding: 16px 18px; }
.tl-clave .tl-c > b { font-family: var(--f-display); font-size: 1.6rem; font-weight: 500; letter-spacing: .02em; }
.tl-textos { display: grid; gap: 12px; width: 100%; }
.tl-cita { display: grid; gap: 4px; padding-left: 12px; border-left: 2px solid var(--oro-2); }
.tl-ref { font-family: var(--f-ui); font-size: .76rem; letter-spacing: .1em; text-transform: uppercase; text-decoration: none; }
.tl-cita p { margin: 0; line-height: 1.6; }
.tl-cita sup { color: var(--oro); }
.tl-fuentes ul { margin: 0; padding-left: 18px; display: grid; gap: 4px; color: var(--tinta-2); font-size: .92rem; }
@media (max-width: 600px) {
  ol.tl::before { left: 9px; }
  .tl-dec { padding-left: 30px; }
  .tl-it { grid-template-columns: minmax(0, 1fr); padding-left: 30px; gap: 4px; }
  .tl-it::before { left: 4px; }
  .tl-clave::before { left: -1px; }
  .tl-f { text-align: left; padding-top: 0; }
  .tl-conj { padding: 14px 12px; }
  .te-m { font-size: .64rem; }
}

/* ===================================================================== explorar por nivel */
.niv-tarjetas { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr)); gap: 10px; }
.niv-t { display: grid; gap: 4px; padding: 14px 16px; border: 1px solid var(--linea-2); border-radius: var(--radio); background: var(--hoja); text-decoration: none; color: var(--tinta); }
.niv-t:hover, .niv-t.sel { border-color: var(--oro); }
.niv-t.sel { box-shadow: 0 0 0 1px var(--oro) inset; }
.niv-k { font-family: var(--f-ui); font-size: .74rem; letter-spacing: .1em; color: var(--tinta-2); display: flex; align-items: center; gap: 8px; }
.niv-k i { width: 11px; height: 11px; border-radius: 3px; background: var(--e); display: inline-block; }
.niv-t b { font-family: var(--f-display); font-size: 1.8rem; font-weight: 400; line-height: 1; }
.niv-t small { font-family: var(--f-ui); font-size: .72rem; color: var(--tenue); }
.niv-t p { margin: 4px 0 0; font-size: .86rem; color: var(--tinta-2); line-height: 1.45; }
.niv-libros { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 4px; }
.niv-libros a { font-family: var(--f-ui); font-size: .78rem; padding: 6px 12px; border: 1px solid var(--linea); border-radius: 999px; text-decoration: none; }
.niv-libros a[aria-current="true"] { background: var(--oro); color: var(--sobre-oro); border-color: var(--oro); }
.niv-cap { display: flex; align-items: baseline; gap: 12px; margin: 22px 0 4px; font-family: var(--f-display); font-weight: 500; font-size: 1.3rem; letter-spacing: .06em; }
.niv-cap a { text-decoration: none; }
.niv-cap small { font-family: var(--f-ui); font-size: .74rem; color: var(--tenue); letter-spacing: .04em; }
.niv-vs { padding: 0; max-width: none; }
.niv-vs .vl { text-decoration: none; color: inherit; }

/* ===================================================================== guía animada */
.btn-guia svg { width: 21px; height: 21px; }
.guia { display: grid; gap: 14px; outline: none; }
.g-marco { position: relative; height: clamp(190px, 36vh, 300px); border-radius: 16px; border: 1px solid var(--linea); background: radial-gradient(120% 90% at 50% 0%, var(--oro-suave), transparent 70%), var(--bg-2); overflow: hidden; }
.g-escena { position: absolute; inset: 0; display: grid; place-items: center; padding: 18px; }
.g-texto { display: grid; gap: 4px; min-height: 6.2em; }
.g-num { font-family: var(--f-ui); font-size: .7rem; letter-spacing: .22em; text-transform: uppercase; color: var(--tenue); }
.g-tit { margin: 0; font-family: var(--f-display); font-weight: 500; font-size: clamp(1.4rem, 3.6vw, 1.9rem); letter-spacing: .04em; color: var(--oro); }
.g-desc { margin: 0; font-size: 1.12rem; line-height: 1.55; max-width: 60ch; }
.g-prog { height: 3px; border-radius: 3px; background: var(--hoja-3); overflow: hidden; }
.g-prog i { display: block; height: 100%; width: 0; background: var(--oro); }
.g-puntos { display: flex; flex-wrap: wrap; gap: 6px; }
.g-puntos button { width: 26px; height: 8px; border-radius: 999px; border: 0; background: var(--hoja-3); padding: 0; }
.g-puntos button[aria-selected="true"] { background: var(--oro); width: 40px; }
.g-ctl { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.g-ctl .btn.oro { margin-left: auto; }
.g-dedo { position: absolute; width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--oro-vivo); background: rgba(232, 207, 148, .25); transform: translate(-50%, -50%); transition: opacity .3s, transform .15s; pointer-events: none; z-index: 3; }
.g-dedo.toca { transform: translate(-50%, -50%) scale(.82); background: rgba(232, 207, 148, .5); }
/* biblioteca */
.gf { position: relative; width: min(520px, 100%); padding-top: 64px; }
.gf-barras { display: flex; height: 54px; border: 1px solid var(--linea); border-radius: 4px; overflow: hidden; background: var(--hoja); }
.gf-barras i { position: relative; border-left: 1px solid var(--bg-2); }
.gf-barras i::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: var(--h); background: linear-gradient(180deg, var(--oro-vivo), var(--oro-2)); opacity: .75; }
.gf-barras i.on { outline: 2px solid var(--oro-vivo); outline-offset: -2px; z-index: 1; }
.gf-barras i.on::after { opacity: 1; }
.gf .g-dedo { top: calc(64px + 40px); }
.gf-burbuja { position: absolute; top: 0; transform: translateX(-50%); display: grid; text-align: center; padding: 7px 12px; border: 1px solid var(--oro); border-radius: 10px; background: var(--hoja); white-space: nowrap; }
.gf-burbuja b { font-weight: 400; font-size: 1.05rem; }
.gf-burbuja small { font-family: var(--f-ui); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--tenue); }
.g-franja.abre .gf { animation: g-abre .6s ease forwards; }
@keyframes g-abre { to { transform: scale(1.06); opacity: .2; } }
/* orden */
.go { display: grid; gap: 14px; width: min(460px, 100%); }
.go-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.go-chips span { font-family: var(--f-ui); font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--linea); color: var(--tenue); transition: all .3s; }
.go-chips span.on { background: var(--oro); color: var(--sobre-oro); border-color: var(--oro); }
.go-lista { display: grid; gap: 6px; }
.go-lista > span { display: grid; grid-template-columns: 2.2rem minmax(0, 1fr) auto; align-items: baseline; gap: 10px; padding: 7px 12px; border-radius: 10px; background: var(--hoja); border: 1px solid var(--linea-2); animation: g-sube .5s calc(var(--i) * 70ms) both; }
.go-lista em { font-style: normal; font-family: var(--f-display); color: var(--oro); }
.go-lista b { font-weight: 400; }
.go-lista small { font-family: var(--f-ui); font-size: .72rem; color: var(--tenue); }
@keyframes g-sube { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
/* verso */
.gv { position: relative; width: min(480px, 100%); height: 100%; display: grid; align-content: center; }
.gv-lineas { display: grid; gap: 10px; }
.gv-l { display: grid; grid-template-columns: 1.6rem minmax(0, 1fr); gap: 10px; align-items: center; padding: 8px 10px; border-radius: 10px; transition: background .3s; }
.gv-l em { font-style: normal; font-family: var(--f-display); color: var(--oro); }
.gv-l span { display: flex; gap: 8px; }
.gv-l i { height: 9px; border-radius: 5px; background: var(--ed-azul); opacity: .55; flex: 1; }
.gv-l i:nth-child(2) { background: var(--ed-naranja); flex: .7; } .gv-l i:nth-child(3) { flex: .5; background: var(--ed-gris); }
.gv-l.on { background: var(--oro-suave); box-shadow: inset 2px 0 0 var(--oro); }
.gv .g-dedo { left: 60%; top: 50%; }
.gv-hoja { position: absolute; left: 0; right: 0; bottom: -10px; display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; padding: 14px; border-radius: 14px 14px 0 0; border: 1px solid var(--oro); background: var(--hoja); transform: translateY(110%); transition: transform .5s cubic-bezier(.2, .8, .2, 1); }
.gv-hoja.on { transform: none; }
.gv-w { display: grid; text-align: center; padding: 6px 10px; border-radius: 8px; background: var(--hoja-2); }
.gv-w b { font-weight: 400; font-size: 1.15rem; }
.gv-w small { font-size: .8rem; color: var(--tinta-2); }
/* palabra */
.gp { perspective: 900px; }
.gp-carta { position: relative; width: 240px; height: 150px; transition: transform .8s cubic-bezier(.2, .8, .2, 1); transform-style: preserve-3d; }
.gp-carta.vuelta { transform: rotateY(180deg); }
.gp-cara, .gp-dorso { position: absolute; inset: 0; display: grid; place-content: center; gap: 6px; text-align: center; border-radius: 14px; border: 1px solid var(--oro); background: var(--hoja); backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.gp-cara b { font-size: 2.2rem; font-weight: 400; }
.gp-cara small { color: var(--tinta-2); }
.gp-dorso { transform: rotateY(180deg); display: flex; flex-wrap: wrap; align-content: center; justify-content: center; gap: 6px; padding: 12px; }
.gp-dorso span { font-family: var(--f-ui); font-size: .74rem; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--linea); color: var(--tinta-2); }
/* corchetes */
.gc { display: grid; gap: 10px; width: min(520px, 100%); }
.gc-modo { justify-self: start; font-family: var(--f-ui); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; padding: 5px 12px; border-radius: 999px; background: var(--oro); color: var(--sobre-oro); }
.gc-tx { margin: 0; font-size: 1.08rem; line-height: 1.7; }
.gc-tx.cambia { animation: g-fundido .5s ease; }
@keyframes g-fundido { from { opacity: .2; } to { opacity: 1; } }
/* buscar */
.gb { display: grid; gap: 14px; width: min(480px, 100%); }
.gb-campo { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--oro); font-size: 1.25rem; }
.gb-campo svg { width: 20px; height: 20px; color: var(--oro); flex: none; }
.gb-cursor { width: 2px; height: 1.2em; background: var(--oro); animation: g-cursor 1s steps(1) infinite; }
@keyframes g-cursor { 50% { opacity: 0; } }
.gb-res { display: grid; gap: 8px; opacity: 0; transform: translateY(8px); transition: all .4s; }
.gb-res.on { opacity: 1; transform: none; }
.gb-r { display: grid; padding: 9px 14px; border-radius: 10px; background: var(--hoja-2); }
.gb-r small { font-family: var(--f-ui); font-size: .68rem; letter-spacing: .18em; text-transform: uppercase; color: var(--oro); }
/* manuscritos */
.gm { display: grid; gap: 16px; width: min(500px, 100%); }
.gm-eje { position: relative; height: 70px; border-bottom: 1px solid var(--linea); }
.gm-eje span { position: absolute; bottom: 8px; transform: translateX(-50%) scale(.6); opacity: 0; padding: 3px 8px; border-radius: 999px; background: var(--oro); color: var(--sobre-oro); font-family: var(--f-griego); transition: all .5s calc(var(--i) * 160ms); }
.gm-eje span:nth-child(even) { bottom: 36px; }
.gm-eje em { position: absolute; bottom: -20px; transform: translateX(-50%); font-style: normal; font-family: var(--f-ui); font-size: .68rem; color: var(--tenue); }
.g-ms.p1 .gm-eje span { opacity: 1; transform: translateX(-50%); }
.gm-l { font-size: 1.3rem; text-align: center; }
.gm-v { transition: all .5s; border-radius: 4px; padding: 0 3px; }
.g-ms.p2 .gm-v { text-decoration: line-through; text-decoration-color: #d9715f; text-decoration-thickness: 2px; background: rgba(217, 113, 95, .14); }
.gm-n { margin: 0; text-align: center; font-family: var(--f-ui); font-size: .8rem; color: var(--tenue); opacity: 0; transition: opacity .5s; }
.g-ms.p2 .gm-n { opacity: 1; }
/* tiempo */
.gt { display: grid; gap: 22px; width: min(520px, 100%); }
.gt-eje { position: relative; height: 40px; border-bottom: 2px solid var(--linea); }
.gt-eje span { position: absolute; bottom: -24px; transform: translateX(-50%); font-family: var(--f-ui); font-size: .72rem; color: var(--tenue); white-space: nowrap; }
.gt-eje span::before { content: ""; position: absolute; left: 50%; top: -14px; width: 8px; height: 8px; margin-left: -4px; border-radius: 50%; background: var(--oro); }
.gt-eje span.clave::before { background: #d9715f; width: 14px; height: 14px; margin-left: -7px; top: -17px; }
.gt-cursor { position: absolute; bottom: 4px; width: 0; height: 0; border-left: 8px solid transparent; border-right: 8px solid transparent; border-top: 12px solid var(--oro-vivo); transform: translateX(-50%); }
.gt-n { margin: 0; text-align: center; font-family: var(--f-display); font-size: 1.3rem; opacity: 0; transition: opacity .6s; }
.g-tiempo.llega .gt-n { opacity: 1; color: #d9715f; }
/* apariencia */
.ga { display: grid; gap: 16px; justify-items: center; padding: 18px; border-radius: 14px; transition: background .4s, color .4s; width: min(460px, 100%); }
.ga-btn { display: flex; flex-wrap: wrap; align-items: baseline; align-content: center; justify-content: center; gap: 1px; padding: 0 0 3px; box-sizing: border-box; width: 52px; height: 52px; border-radius: 50%; border: 1px solid var(--linea); font-family: "Cormorant Garamond", Georgia, serif; font-size: 25px; font-weight: 500; line-height: 1; color: var(--tinta); transition: transform .2s, background-color .2s, border-color .2s, color .2s; }
.ga-btn small { font-size: 18px; }
.ga-btn.on { transform: scale(.9); background: var(--oro-suave); border-color: var(--oro); color: var(--oro-vivo); }
.ga-tx { margin: 0; text-align: center; font-size: 1.15rem; transition: font-size .4s, letter-spacing .4s; }
.g-aa[data-e="grande"] .ga-tx { font-size: 1.6rem; }
.g-aa[data-e="dislexia"] .ga-tx { font-family: "BiEx Dislexia", var(--f-texto); letter-spacing: .04em; word-spacing: .14em; }
.g-aa[data-e="claro"] .ga { background: #f5f0e6; color: #1d1a15; }
.ga-fila { display: flex; align-items: center; gap: 12px; min-height: 52px; }
.ga-et { font-family: var(--f-ui); font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--oro); min-width: 12em; transition: opacity .3s; }
.ga-tx { line-height: 1.45; transition: font-size .45s, letter-spacing .45s, line-height .45s, word-spacing .45s; }
.g-aa[data-e="amplio"] .ga-tx { line-height: 2.1; }
.g-aa[data-e="oscuro"] .ga { background: #0e0e10; color: var(--tinta); box-shadow: inset 0 0 0 1px var(--linea-2); }
.g-aa[data-e="quieto"] .ga-btn, .g-aa[data-e="quieto"] .ga-tx { transition: none; }
.g-aa[data-e="boton"] .ga-btn { box-shadow: 0 0 0 6px color-mix(in srgb, var(--oro) 22%, transparent); }
.g-aa[data-e="claro"] .ga-btn { border-color: #b9ab8c; color: #1d1a15; }
@media (prefers-reduced-motion: reduce) { .g-marco *, .g-marco *::before, .g-marco *::after { animation: none !important; transition: none !important; } }
html[data-mov="no"] .g-marco * { animation: none !important; transition: none !important; }
@media (max-width: 600px) {
  .ms-t summary { grid-template-columns: 2.6rem minmax(0, 1fr) 64px; gap: 8px; padding: 9px 10px; }
  .dipl { font-size: 1.02rem; padding: 12px; }
  .ms-texto { font-size: 1.1rem; }
  .franja .panorama { height: 70px; }
  .tira-tiempo { grid-template-columns: auto minmax(0, 1fr); }
  .tt-ir { display: none; }
  .g-desc { font-size: 1.02rem; }
  .filtro-niv select, .filtro-niv .mm-btn { max-width: 132px; }
}
.np { text-transform: none !important; }
:is(.mayus, .eyebrow, .rotulo, .m-cab .m-tit b, .btn, .tl-ref, .rv-ref, .codice-cab .ref, .panorama-pie, .grupo-libros > h3, .tarjeta h2, .bloque h4, .encab .s, .navcap .lbl, .fp-tr small, .mv-tipo, .tl-k, .seg button, .nav a, .herr span, .herr-ir, .g-num, .tt-ir, .cifras span, .mini-cifras div, .tlibro .es, .banda-tit .es, .pista, .btn-cap, .ap-fila > h4, .bq-g > h3, .bq-grupo-ej h4, .fv-t small, .tl-dec, .gf-burbuja small, .go-chips span, .gc-modo, .gb-r small) .np { letter-spacing: .03em; font-family: var(--f-texto); font-size: 1.12em; }
html.ed .tm .gr, html.ed .tm [lang="grc"].gr { color: var(--oro-vivo); text-decoration: underline dotted rgba(232, 207, 148, .55); text-underline-offset: 3px; }
html[data-theme="light"].ed .tm .gr { color: var(--oro); }
.nav a { white-space: nowrap; }
.btn-buscar span, .btn-buscar small { white-space: nowrap; }
.btn-buscar .bb-pista { color: var(--tenue); opacity: .8; font-size: .8rem; }
@media (max-width: 1180px) { .btn-buscar .bb-pista { display: none; } }
html.barra-sin-pista .btn-buscar .bb-pista { display: none; }
html.barra-sin-nav .barra .nav { display: none; }
html.barra-sin-nav .barra .acc { margin-left: auto; }
.marca { flex-shrink: 0; }
@media (max-width: 440px) { .marca { flex-shrink: 1; } }
@media (max-width: 640px) { .btn-buscar small { display: none; } }
.bq > *, .bq-res > *, .bq-g > * { min-width: 0; }
.bq-campo input { width: 100%; }
input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; appearance: none; display: none; }
/* ---------- concordancia: índice de lemas */
.cc-buscar { position: relative; margin: 6px 0 16px; }
.cc-buscar svg { position: absolute; left: 16px; top: 50%; width: 20px; height: 20px; transform: translateY(-50%); color: var(--tenue); pointer-events: none; }
.cc-q { width: 100%; box-sizing: border-box; padding: 14px 18px 14px 48px; border: 1px solid var(--linea); border-radius: 999px; background: var(--hoja); color: var(--tinta); font-family: var(--f-griego); font-size: 1.1rem; }
.cc-q:focus { outline: none; border-color: var(--oro); box-shadow: 0 0 0 3px var(--oro-suave); }
.cc-vistos { display: grid; gap: 8px; margin-bottom: 16px; }
.cc-lista { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); gap: 6px; }
.cc-it { display: grid; grid-template-columns: minmax(0, auto) minmax(0, 1fr) auto; grid-template-areas: "g t n" "s s s"; align-items: baseline; gap: 2px 10px; padding: 10px 14px; border: 1px solid var(--linea-2); border-radius: 12px; text-decoration: none; color: var(--tinta); background: var(--hoja); transition: border-color .2s, background-color .2s; }
.cc-it:hover, .cc-it:focus-visible { border-color: var(--oro); background: var(--hoja-2); outline: none; }
.cc-it b { grid-area: g; font-family: var(--f-griego); font-weight: 400; font-size: 1.2rem; }
.cc-tr { grid-area: t; font-family: var(--f-griego); font-size: .9rem; color: var(--tenue); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cc-it em { grid-area: n; font-style: normal; font-family: var(--f-ui); font-size: .74rem; color: var(--oro); font-variant-numeric: tabular-nums; }
.cc-gl { grid-area: s; font-size: .88rem; color: var(--tinta-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.barra-volver { display: flex; flex-wrap: wrap; gap: 8px; }
.g-voces { max-width: 13rem; height: 34px; padding: 0 10px; border: 1px solid var(--linea); border-radius: 999px; background: var(--hoja); color: var(--tinta); font-family: var(--f-ui); font-size: .76rem; text-overflow: ellipsis; }
.g-voces[hidden] { display: none; }
html.restaurando, html.restaurando body { overflow-anchor: none; }
/* ---------- ajuste a pantallas estrechas y letra grande: nada se sale de la página */
.seg { max-width: 100%; flex-wrap: wrap; row-gap: 3px; }
.seg:has(> button:nth-child(3)) { border-radius: 22px; }
@media (max-width: 520px) {
  .seg-orden { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(7.2rem, 100%), 1fr)); width: 100%; box-sizing: border-box; border-radius: 18px; }
  .seg-orden button { padding: 8px 8px; letter-spacing: .06em; white-space: normal; line-height: 1.2; }
}
.tarjeta:has(> .paradigma) { overflow-x: auto; }
.paradigma { max-width: 100%; }
.paradigma td { overflow-wrap: anywhere; }
/* barra superior en teléfonos: el sello basta; el nombre completo no debe montarse sobre los botones */
.marca { overflow: hidden; }
@media (max-width: 440px) { .marca .nombre { display: none; } .barra .in { justify-content: space-between; } }
/* tabla de formas del lema en pantallas estrechas: cada forma como ficha */
@media (max-width: 520px) {
  .paradigma, .paradigma tbody { display: block; }
  .paradigma tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; padding: 10px 0; border-bottom: 1px solid var(--linea-2); }
  .paradigma td { display: block; padding: 0 !important; border: 0 !important; }
  .paradigma td:nth-child(1) { font-size: 1.15rem; }
  .paradigma td:nth-child(2) { grid-column: 1 / -1; grid-row: 2; font-size: .8rem; color: var(--tenue); }
  .paradigma td:nth-child(3) { grid-column: 1 / -1; grid-row: 3; }
  .paradigma td:nth-child(4) { grid-column: 2; grid-row: 1; align-self: center; color: var(--oro); }
}
/* ---------- guía animada: pulido (17-oct-2026) */
.guia { gap: 16px; }
.g-marco { height: clamp(240px, 40vh, 360px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04), 0 18px 40px -24px rgba(0, 0, 0, .6); }
.g-marco::after { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; background: radial-gradient(140% 100% at 50% 110%, rgba(0, 0, 0, .28), transparent 55%); }
/* transición de cine entre pasos: fundido cruzado con desenfoque (la escena que sale se copia encima y se disuelve) */
.g-escena > * { animation: g-entra .62s cubic-bezier(.22, .8, .2, 1) both; }
@keyframes g-entra { from { opacity: 0; filter: blur(10px); transform: scale(1.035); } 60% { filter: blur(1px); } to { opacity: 1; filter: none; transform: none; } }
.g-escena.g-sale { pointer-events: none; z-index: 2; animation: g-sale .58s cubic-bezier(.4, 0, .6, 1) both; }
.g-escena.g-sale > * { animation: none; }
@keyframes g-sale { from { opacity: 1; filter: none; transform: none; } to { opacity: 0; filter: blur(12px); transform: scale(.97); } }
.g-texto.g-cambia > * { animation: g-texto .6s cubic-bezier(.22, .8, .2, 1) both; }
.g-texto.g-cambia > :nth-child(2) { animation-delay: .06s; } .g-texto.g-cambia > :nth-child(3) { animation-delay: .12s; }
@keyframes g-texto { from { opacity: 0; filter: blur(6px); transform: translateY(6px); } to { opacity: 1; filter: none; transform: none; } }
.g-texto { min-height: 0; }
.g-tit { letter-spacing: .02em; }
.g-ctl { row-gap: 10px; }
.g-ctl .btn-icono { width: 42px; height: 42px; }
/* en teléfonos la guía ocupa toda la ventana: la escena crece y no queda espacio vacío abajo */
@media (max-width: 760px) {
  .m-cuerpo:has(> .guia) { display: flex; flex-direction: column; }
  .guia { flex: 1 0 auto; display: flex; flex-direction: column; gap: 14px; }
  .g-marco { flex: 1 1 auto; height: auto; min-height: clamp(230px, 38vh, 320px); max-height: 54vh; }
  .g-ctl .btn.oro { margin-left: 0; flex: 1 1 100%; justify-content: center; }
}
/* orden */
.go-chips { flex-wrap: nowrap; }
.go-chips span { font-size: .66rem; padding: 5px 10px; white-space: nowrap; }
.go-lista b { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 8px; min-width: 0; }
.go-lista b .np { font-size: 1em; font-family: inherit; letter-spacing: 0; }
.go-lista b i { font-style: normal; font-family: var(--f-ui); font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; color: var(--tenue); }
/* verso: hoja inferior con asa, como en la lectura real */
.gv-l i { height: 8px; opacity: .5; background: linear-gradient(90deg, var(--ed-azul), color-mix(in srgb, var(--ed-azul) 60%, transparent)); }
.gv-l.on i { opacity: .9; }
.gv-hoja { bottom: 0; flex-direction: column; align-items: stretch; gap: 10px; padding: 8px 14px 16px; border-color: color-mix(in srgb, var(--oro) 70%, transparent); border-bottom: 0; box-shadow: 0 -14px 30px -12px rgba(0, 0, 0, .55); }
.gv-asa { display: block; width: 38px; height: 4px; border-radius: 4px; background: var(--linea); margin: 0 auto 2px; }
.gv-ws { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.gv-w { border: 1px solid var(--linea-2); min-width: 3.4rem; }
/* palabra */
.gp-carta { width: 260px; height: 164px; }
.gp-cara, .gp-dorso { box-shadow: 0 16px 34px -18px rgba(0, 0, 0, .7); background: linear-gradient(180deg, var(--hoja-2), var(--hoja)); }
/* corchetes: control segmentado */
.gc-seg { justify-self: start; display: inline-flex; padding: 3px; border-radius: 999px; border: 1px solid var(--linea); background: var(--hoja); }
.gc-seg span { font-family: var(--f-ui); font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; padding: 5px 11px; border-radius: 999px; color: var(--tenue); transition: background .35s, color .35s; white-space: nowrap; }
.gc-seg span.on { background: var(--oro); color: var(--sobre-oro); }
/* manuscritos */
.gm-eje span { box-shadow: 0 6px 14px -8px rgba(0, 0, 0, .7); }
/* tiempo */
.gt-n { font-size: 1.35rem; letter-spacing: .02em; }

/* ===================================================================== menús desplegables (cristal esmerilado) */
select.mm-nativo { position: fixed !important; left: 0 !important; top: 0 !important; width: 1px !important; height: 1px !important; opacity: 0 !important; pointer-events: none !important; overflow: hidden; clip-path: inset(50%); }
.mm-btn { display: inline-flex; align-items: center; justify-content: space-between; gap: 6px; min-width: 0; cursor: pointer; text-align: left; line-height: 1.2; }
.mm-btn .mm-tx { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mm-btn svg { width: 14px; height: 14px; flex: none; color: var(--oro); transition: transform .2s; }
.mm-btn[aria-expanded="true"] svg { transform: rotate(180deg); }
.mm-btn[hidden] { display: none; }
.mm-btn:focus-visible { outline: 2px solid var(--oro); outline-offset: 2px; }
.mm-pop { position: fixed; z-index: 2000; overflow: auto; overscroll-behavior: contain; padding: 6px; display: grid; gap: 2px; border-radius: 16px;
  background: color-mix(in srgb, var(--hoja) 70%, transparent); -webkit-backdrop-filter: blur(22px) saturate(1.5); backdrop-filter: blur(22px) saturate(1.5);
  border: 1px solid color-mix(in srgb, var(--oro) 30%, transparent); box-shadow: 0 24px 60px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .06);
  transform-origin: top center; animation: mmEntra .16s cubic-bezier(.2, .8, .2, 1); scrollbar-width: thin; }
:root[data-theme="light"] .mm-pop { background: color-mix(in srgb, #fffdf8 72%, transparent); box-shadow: 0 24px 60px rgba(60, 45, 20, .22), inset 0 1px 0 rgba(255, 255, 255, .7); }
.mm-pop.arriba { transform-origin: bottom center; }
.mm-pop.sale { animation: mmSale .14s ease forwards; }
.mm-op { display: flex; align-items: center; justify-content: space-between; gap: 14px; width: 100%; min-height: 40px; padding: 8px 12px; border: 0; border-radius: 11px; background: transparent; color: var(--tinta); font-family: var(--f-ui); font-size: .86rem; text-align: left; cursor: pointer; }
.mm-op svg { width: 16px; height: 16px; flex: none; color: var(--oro-vivo); opacity: 0; }
.mm-op[aria-selected="true"] { background: var(--oro-suave); color: var(--oro-vivo); }
:root[data-theme="light"] .mm-op[aria-selected="true"] { color: var(--oro); }
.mm-op[aria-selected="true"] svg { opacity: 1; }
.mm-op:hover, .mm-op:focus-visible { background: color-mix(in srgb, var(--oro) 14%, transparent); outline: none; }
.mm-op:disabled { opacity: .4; cursor: default; }
@keyframes mmEntra { from { opacity: 0; transform: translateY(-4px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes mmSale { to { opacity: 0; transform: translateY(-3px) scale(.98); } }

/* ===================================================================== cristal: barras, ventanas, avisos y tarjetas */
.barra { background: color-mix(in srgb, var(--bg) 90%, transparent); -webkit-backdrop-filter: saturate(1.6) blur(20px); backdrop-filter: saturate(1.6) blur(20px); box-shadow: inset 0 -1px 0 color-mix(in srgb, var(--oro) 12%, transparent); }
.barra-hoja { background: color-mix(in srgb, var(--hoja) 92%, transparent); -webkit-backdrop-filter: saturate(1.5) blur(18px); backdrop-filter: saturate(1.5) blur(18px); }
.modal::backdrop { background: rgba(4, 3, 2, .5); -webkit-backdrop-filter: blur(10px) saturate(1.2); backdrop-filter: blur(10px) saturate(1.2); }
:root[data-theme="light"] .modal::backdrop { background: rgba(40, 30, 15, .28); }
.modal { background: color-mix(in srgb, var(--hoja) 90%, transparent); -webkit-backdrop-filter: blur(28px) saturate(1.4); backdrop-filter: blur(28px) saturate(1.4); box-shadow: var(--sombra), inset 0 1px 0 rgba(255, 255, 255, .05); border-color: color-mix(in srgb, var(--oro) 22%, var(--linea)); }
.aviso-flot { background: color-mix(in srgb, var(--hoja-2) 72%, transparent); color: var(--tinta); -webkit-backdrop-filter: blur(18px) saturate(1.5); backdrop-filter: blur(18px) saturate(1.5); border: 1px solid color-mix(in srgb, var(--oro) 30%, transparent); }
.herr { position: relative; isolation: isolate; }
.herr::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity .3s; background: radial-gradient(120% 80% at 0% 0%, color-mix(in srgb, var(--oro) 14%, transparent), transparent 60%); }
.herr:hover::before, .herr:focus-visible::before { opacity: 1; }
@media (prefers-reduced-transparency: reduce) {
  .barra, .barra-hoja, .modal, .aviso-flot, .aviso-version, .mm-pop { -webkit-backdrop-filter: none; backdrop-filter: none; }
  .aviso-version { background: var(--hoja-2); }
  .barra { background: var(--bg); } .barra-hoja { background: var(--hoja); } .modal { background: var(--hoja); } .mm-pop { background: var(--hoja); }
}

/* ejemplos que rotan */
.rota { transition: opacity .34s ease; will-change: opacity; backface-visibility: hidden; }
.rota-sale { opacity: 0; }
.herr-ir .herr-tx { text-transform: inherit; letter-spacing: inherit; }
.herr .herr-ir span { margin-top: 0; }
.herr .herr-ir { display: flex; align-items: center; gap: 8px; line-height: 1.5; }
.herr .herr-ir .herr-tx { flex: 0 1 auto; min-width: 0; }
.herr .herr-ir > svg { width: 15px; height: 15px; flex: none; }
/* lectura inmersiva: la barra superior se retira al leer hacia abajo y vuelve al subir */
.barra { transition: transform .42s cubic-bezier(.2, .7, .2, 1), background-color .3s; will-change: transform; }
/* la barra del capítulo se mueve con transform (en el compositor, sincronizada con la barra superior): animar «top» obligaba
   a recomponer la página en cada cuadro. Solo cuando está pegada arriba (.bh-pegada); suelta, no se mueve. */
.barra-hoja { transition: transform .42s cubic-bezier(.2, .7, .2, 1); }
.bh-centinela { display: block; height: 0; }
html.inmersivo .barra { transform: translateY(-105%); }
html.inmersivo .barra-hoja.bh-pegada { transform: translate3d(0, calc(-1 * (var(--alto) + var(--bh-sube, 0px))), 0); }
html.con-modal .barra { transform: none; }

/* barra del capítulo en teléfonos: arriba la disposición, el filtro y las opciones; abajo el modo y el capítulo con sus
   flechas, la fila que queda siempre a la vista al leer */
.bh-salto { display: none; }
@media (max-width: 1023px) {
  .barra-hoja > .seg-ico, .barra-hoja > .filtro-niv, .barra-hoja > .btn-opc { order: 1; }
  .barra-hoja > .bh-salto { display: block; order: 2; flex-basis: 100%; height: 0; }
  .barra-hoja > .seg-modo, .barra-hoja > .cap-grupo { order: 3; }
  .barra-hoja > .cap-grupo { margin-left: auto; }
  .barra-hoja > .btn-opc { margin-left: auto; }
}

.btn.oro .trad { color: inherit; opacity: .72; }
@media (max-width: 1023px) {
  .barra-hoja > .filtro-niv { flex: 1 1 auto; min-width: 0; max-width: 100%; }
  .barra-hoja .filtro-niv .mm-btn { flex: 1 1 auto; min-width: 0; max-width: none; }
  .barra-hoja .seg-modo button { padding: 6px 10px; font-size: min(.72rem, 12px); letter-spacing: .06em; }
  .cap-grupo .btn-cap { padding: 6px 10px; font-size: min(.74rem, 12.5px); letter-spacing: .05em; gap: 5px; }
}
@media (max-width: 360px) {
  .cap-grupo .btn-cap svg { display: none; }
  .barra-hoja .seg-modo button { padding: 6px 8px; letter-spacing: .03em; }
  .cap-grupo { gap: 2px; } .cap-grupo .btn-icono { width: 30px; height: 30px; }
  .barra-hoja { gap: 8px 6px; }
}
.ms-desc { color: var(--tenue); font-family: var(--f-griego); opacity: .85; }
.gc.gc-sin .gc-tx, .gc.gc-sin .gc-tx * { color: var(--tinta) !important; text-transform: none !important; letter-spacing: normal !important; }
.gc .gc-tx, .gc .gc-tx * { transition: color .45s ease; }

/* ---------- La fuente Q (#/fuente-q) ---------- */
.q-pag .panel-cab { gap: 14px; }
.q-lead { font-family: var(--f-texto); font-size: 1.08rem; line-height: 1.7; color: var(--tinta-2); margin: 0; max-width: 46rem; }
.q-aviso { margin: 4px 0 0; padding: 14px 16px; border-left: 3px solid var(--oro); background: var(--oro-suave); border-radius: 0 10px 10px 0; font-size: .95rem; line-height: 1.6; max-width: 46rem; color: var(--tinta); }
.q-indice { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.q-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.q-chip { border: 1px solid var(--linea); background: var(--hoja); color: var(--tinta-2); border-radius: 999px; padding: 7px 14px; font: 500 .8rem/1.25 var(--f-ui); cursor: pointer; text-align: left; }
.q-chip:hover { border-color: var(--oro); color: var(--tinta); }
.q-chip[aria-pressed="true"] { background: var(--oro); color: var(--sobre-oro); border-color: var(--oro); }
.q-sec { margin-top: 44px; display: grid; gap: 14px; min-width: 0; scroll-margin-top: calc(var(--alto) + 14px); }
.q-h2 { margin: 0; font-family: var(--f-display); font-weight: 500; font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.1rem); line-height: 1.15; color: var(--tinta); }
.q-p { margin: 0; line-height: 1.7; max-width: 46rem; color: var(--tinta-2); }
.q-puntos { margin: 0; padding-left: 1.2em; display: grid; gap: 6px; max-width: 46rem; line-height: 1.6; color: var(--tinta-2); }
.q-barras { display: grid; gap: 18px; }
.q-barra-cab { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 6px; }
.q-barra-cab b { font-family: var(--f-display); font-size: 1.3rem; font-weight: 500; }
.q-barra-cab span { color: var(--tenue); font-size: .82rem; }
.q-pista { display: flex; height: 30px; border-radius: 8px; overflow: hidden; border: 1px solid var(--linea-2); }
.q-tramo { display: flex; align-items: center; justify-content: center; min-width: 0; flex-grow: 0; flex-shrink: 0; }
.q-tramo i { font: 500 .74rem var(--f-ui); color: #0b0a08; font-style: normal; }
.q-tr { background: #8c7140; } .q-tramo.q-tr i { color: #fffdf8; }
.q-dt { background: #e8cf94; } .q-mm { background: #8fb3d9; } .q-ml { background: #93c4a2; } .q-pr { background: var(--hoja-3); }
.q-tramo.q-pr i { color: var(--tinta-2); }
.q-barra-ley { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: .8rem; color: var(--tenue); }
.q-barra-ley i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.q-barra-ley b { color: var(--tinta-2); font-weight: 500; }
.q-sin-ctl { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; }
.q-sin-zona { display: grid; grid-template-columns: minmax(230px, 300px) minmax(0, 1fr); gap: 18px; align-items: start; }
.q-lista { list-style: none; margin: 0; padding: 4px; display: grid; gap: 2px; max-height: 34rem; overflow: auto; border: 1px solid var(--linea-2); border-radius: var(--radio); background: var(--hoja); position: sticky; top: calc(var(--alto) + 12px); overscroll-behavior: contain; }
.q-it { width: 100%; display: grid; grid-template-columns: 1fr auto; grid-template-areas: "t n" "r r" "b b"; gap: 3px 10px; text-align: left; border: 0; background: none; color: var(--tinta-2); padding: 9px 10px; border-radius: 10px; cursor: pointer; font: inherit; }
.q-it:hover { background: var(--hoja-2); }
.q-it[aria-pressed="true"] { background: var(--oro-suave); color: var(--tinta); box-shadow: inset 0 0 0 1px var(--linea); }
.q-it-t { grid-area: t; font-size: .9rem; line-height: 1.3; }
.q-it-r { grid-area: r; font-size: .72rem; color: var(--tenue); letter-spacing: .04em; }
.q-it-n { grid-area: n; font: 500 .78rem var(--f-ui); color: var(--oro); }
.q-it-b { grid-area: b; height: 3px; background: var(--linea-2); border-radius: 2px; overflow: hidden; }
.q-it-b i { display: block; height: 100%; background: var(--oro); }
.q-visor { min-width: 0; display: grid; gap: 12px; scroll-margin-top: calc(var(--alto) + 16px); }
.q-visor-cab h3 { margin: 0; font-family: var(--f-display); font-size: 1.6rem; font-weight: 500; line-height: 1.2; }
.q-visor-r { margin: 4px 0 0; font-size: .86rem; color: var(--tenue); }
.q-lit { margin: 6px 0 0; color: var(--tinta-2); font-size: .9rem; }
.q-lit b { font: 500 1.4rem var(--f-display); color: var(--oro-vivo); margin-right: 4px; }
.q-lit-n { color: var(--tenue); font-size: .8rem; }
.q-sup { margin: 6px 0 0; }
.q-visor-ctl { display: flex; flex-wrap: wrap; gap: 10px 20px; align-items: center; justify-content: space-between; }
.q-ley { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: .78rem; color: var(--tenue); }
.q-ley-i { display: inline-flex; align-items: center; gap: 6px; }
.q-ley-m { font-family: var(--f-griego); font-size: .95rem; padding: 0 3px; flex: none; }
.q-tg { display: inline-flex; gap: 8px; align-items: center; font-size: .82rem; color: var(--tinta-2); cursor: pointer; }
.q-tg input { accent-color: var(--oro); width: 16px; height: 16px; margin: 0; }
.q-sin, .q-tri { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.q-tri { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.q-col { background: var(--hoja); border: 1px solid var(--linea-2); border-radius: var(--radio); padding: 14px 16px; min-width: 0; display: grid; gap: 12px; align-content: start; }
.q-col-t { margin: 0; font: 500 .74rem var(--f-ui); letter-spacing: .2em; text-transform: uppercase; color: var(--oro); }
.q-v { display: grid; gap: 4px; min-width: 0; }
.q-ref { font: 500 .72rem var(--f-ui); color: var(--tenue); text-decoration: none; justify-self: start; }
.q-ref:hover { color: var(--oro); }
.q-g { margin: 0; font-family: var(--f-griego); font-size: 1.12rem; line-height: 1.8; overflow-wrap: anywhere; color: var(--tinta-2); }
.q-bx { margin: 0; font-size: .9rem; line-height: 1.55; color: var(--tenue); }
.q2 { color: var(--oro-vivo); background: var(--oro-suave); border-radius: 3px; box-shadow: 0 1.5px 0 var(--oro); }
.q1 { color: var(--tinta); border-bottom: 1px dotted var(--oro-2); }
.q0 { color: var(--tinta-2); }
.q3 { color: #0b0a08; background: #9fd0f0; border-radius: 3px; padding: 0 2px; }
:root[data-theme="light"] .q3 { background: #bfe0f7; }
.q-visor-pie { display: flex; justify-content: space-between; gap: 10px; }
.q-nota-bx { margin: 0; }
.q-orden { background: var(--hoja); border: 1px solid var(--linea-2); border-radius: var(--radio); padding: 12px 8px 10px; display: grid; gap: 4px; }
.q-orden-et { padding: 0 12px; font: 500 .7rem var(--f-ui); letter-spacing: .16em; text-transform: uppercase; color: var(--oro); }
.q-orden-mapa { overflow-x: auto; overscroll-behavior-x: contain; }
.q-orden-mapa svg { display: block; width: 100%; min-width: 640px; height: auto; }
.q-ejes line { stroke: var(--tenue); stroke-width: 1.5; }
.q-ejes .q-tk { stroke-width: 1; }
.q-tn { fill: var(--tenue); font: 500 13px var(--f-ui); text-anchor: middle; }
.q-mk line { stroke: var(--tenue); stroke-width: 1; opacity: .4; }
.q-qq line { stroke: var(--oro-vivo); stroke-width: 2.2; opacity: .85; cursor: pointer; }
.q-qq line:hover { stroke-width: 5; opacity: 1; }
.ver-mk .q-qq, .ver-q .q-mk { display: none; }
.q-orden-info { min-height: 1.5em; margin: 0; }
.q-args { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 14px; }
.q-arg h3 { margin: 0; font-family: var(--f-display); font-size: 1.3rem; font-weight: 500; color: var(--tinta); line-height: 1.2; }
.q-arg > p { margin: 0; line-height: 1.65; color: var(--tinta-2); }
.q-arg.ancho { grid-column: 1 / -1; }
.favor .q-arg { border-top: 3px solid var(--oro); }
.contra .q-arg { border-top: 3px solid #8fb3d9; }
.q-top { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; }
.q-link { display: flex; justify-content: space-between; gap: 10px; width: 100%; border: 0; background: var(--hoja-2); color: var(--tinta-2); padding: 7px 10px; border-radius: 8px; cursor: pointer; font: inherit; font-size: .88rem; text-align: left; }
.q-link b { color: var(--oro); font-weight: 500; white-space: nowrap; }
.q-link:hover { color: var(--tinta); }
.q-sel { display: grid; gap: 12px; min-width: 0; }
.q-dob { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.q-dob-g { display: grid; gap: 10px; align-content: start; background: var(--hoja-2); border-radius: 12px; padding: 12px 14px; min-width: 0; }
.q-dob-g.dt { box-shadow: inset 0 0 0 1px var(--linea); }
.q-dob-g h4 { margin: 0; font: 500 .72rem var(--f-ui); letter-spacing: .16em; text-transform: uppercase; color: var(--oro); }
.q-corto { display: grid; gap: 4px; }
.q-corto-r { font-size: .8rem; color: var(--tenue); }
.q-hip-caja { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 20px; align-items: center; background: var(--hoja); border: 1px solid var(--linea-2); border-radius: var(--radio); padding: 18px; }
.q-hip-d svg { width: 100%; height: auto; display: block; color: var(--oro); }
.q-fl line { stroke: var(--oro); stroke-width: 3; }
.q-n circle { fill: var(--hoja-2); stroke: var(--oro); stroke-width: 2; }
.q-n.hip circle { stroke-dasharray: 7 6; fill: transparent; }
.q-n text { fill: var(--tinta); font: 500 26px var(--f-display); text-anchor: middle; }
.q-hip-t h3 { margin: 0; font-family: var(--f-display); font-size: 1.5rem; font-weight: 500; display: grid; gap: 2px; }
.q-hip-t h3 small { font: 500 .72rem var(--f-ui); letter-spacing: .16em; text-transform: uppercase; color: var(--oro); }
.q-hip-t p { margin: 8px 0 0; line-height: 1.6; }
.q-hip-t dl { margin: 12px 0 0; display: grid; gap: 4px; }
.q-hip-t dt { font: 500 .72rem var(--f-ui); letter-spacing: .14em; text-transform: uppercase; color: var(--oro); margin-top: 6px; }
.q-hip-t dd { margin: 0; line-height: 1.55; color: var(--tinta-2); }
.q-hist { list-style: none; padding: 0; display: grid; border-left: 1px solid var(--linea); margin: 0 0 0 6px; }
.q-hist li { display: grid; grid-template-columns: 9.5rem minmax(0, 1fr); gap: 14px; padding: 10px 0 10px 18px; position: relative; }
.q-hist li::before { content: ""; position: absolute; left: -5px; top: 17px; width: 9px; height: 9px; border-radius: 50%; background: var(--oro); }
.q-hist-f { font: 500 .78rem var(--f-ui); color: var(--oro); letter-spacing: .06em; padding-top: 3px; }
.q-hist p { margin: 0; line-height: 1.6; color: var(--tinta-2); }
.q-cita { margin: 8px 0 0; padding: 10px 14px; border-left: 2px solid var(--oro-2); font-family: var(--f-griego); font-size: 1.05rem; line-height: 1.7; color: var(--tinta); background: var(--hoja); border-radius: 0 8px 8px 0; }
.q-cierre { padding: 22px; border: 1px solid var(--linea); border-radius: var(--radio); background: var(--oro-suave); }
.q-todos .q-chip { font-size: .76rem; }
.q-en-verso .btn { justify-self: start; }
@media (max-width: 860px) { .q-sin-zona { grid-template-columns: 1fr; } .q-lista { max-height: 15.5rem; position: static; } }
@media (max-width: 760px) { .q-hip-caja { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .q-sin, .q-tri, .q-dob { grid-template-columns: minmax(0, 1fr); } .q-hist li { grid-template-columns: minmax(0, 1fr); gap: 2px; } }

/* franja fina al pie de la barra del capítulo: el libro y el capítulo, centrados (toca para elegir capítulo y verso);
   en escritorio lleva a los lados las flechas del capítulo */
.bh-franja { order: 9; flex: 1 0 100%; min-width: 0; display: flex; align-items: center; justify-content: center; gap: 10px; margin: 0 calc(-1 * clamp(12px, 2.6vw, 24px)) -10px; padding: 4px 12px 5px; position: relative; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--oro) 7%, transparent) 28%, color-mix(in srgb, var(--oro) 7%, transparent) 72%, transparent); }
.bh-franja::before { content: ""; position: absolute; left: 6%; right: 6%; top: 0; height: 1px; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--oro) 40%, transparent), transparent); pointer-events: none; }
.bh-franja .bh-fl { display: none; }
.bh-tit { flex: 0 1 auto; min-width: 0; display: flex; align-items: baseline; justify-content: center; gap: .55em; padding: 3px 10px; border: 0; border-radius: 999px; background: none; color: inherit; cursor: pointer; text-align: center; line-height: 1.2; white-space: nowrap; -webkit-tap-highlight-color: transparent; transition: background-color .2s; }
.bh-tit:hover { background: color-mix(in srgb, var(--oro) 9%, transparent); }
.bh-tit .bh-lib { display: inline-flex; align-items: baseline; gap: .55em; min-width: 0; }
.bh-tit .tr { font-family: var(--f-display); font-size: .98rem; font-weight: 500; color: var(--oro); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; transition: color .25s; }
.bh-tit .es { font-family: var(--f-ui); font-size: .58rem; letter-spacing: .22em; text-transform: uppercase; color: var(--tenue); white-space: nowrap; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.bh-tit .bh-cap { display: inline-flex; align-items: baseline; gap: .45em; color: var(--tinta-2); white-space: nowrap; flex: none; }
.bh-tit .bh-cap::before { content: "·"; color: var(--oro-2); }
.bh-tit .bh-cap [lang="he"] { font-family: var(--f-texto); font-size: .82rem; }
.bh-tit .rom { font-family: var(--f-display); font-size: .78rem; letter-spacing: .12em; }
.bh-tit:hover .tr, .bh-tit:focus-visible .tr { color: var(--oro-vivo); }
.bh-tit:focus-visible { outline: 2px solid var(--oro); outline-offset: -2px; }
@media (min-width: 1024px) {
  /* escritorio: en una fila el modo, la disposición, el filtro y las opciones; debajo, la franja con el libro y las flechas */
  .barra-hoja > .seg-modo { order: 0; } .barra-hoja > .seg-ico { order: 1; } .barra-hoja > .filtro-niv { order: 2; } .barra-hoja > .btn-opc { order: 3; }
  .barra-hoja > .bh-salto { display: none; }
  .bh-franja { justify-content: space-between; padding: 4px 14px 5px; }
  .bh-franja .bh-fl { display: inline-flex; width: 30px; height: 30px; flex: none; }
  .bh-franja .bh-fl svg { width: 14px; height: 14px; }
  .bh-franja .bh-fl:disabled { opacity: .3; cursor: default; }
}

/* ---------------------------------------------------------------- estudio: marcadores y notas */
:root { --mk-oro: #e0bb6c; --mk-azul: #74a5ea; --mk-verde: #6fc08f; --mk-rojo: #e8806f; --mk-violeta: #b892ea; --mk-gris: #a8a196; }
:root[data-theme="light"] { --mk-oro: #9a7426; --mk-azul: #2c61b8; --mk-verde: #2a7c4d; --mk-rojo: #b5392b; --mk-violeta: #6d47b3; --mk-gris: #6f665a; }
.mk-oro { --mkc: var(--mk-oro); } .mk-azul { --mkc: var(--mk-azul); } .mk-verde { --mkc: var(--mk-verde); }
.mk-rojo { --mkc: var(--mk-rojo); } .mk-violeta { --mkc: var(--mk-violeta); } .mk-gris { --mkc: var(--mk-gris); }
.vl.mk { background: linear-gradient(90deg, color-mix(in srgb, var(--mkc) 15%, transparent), color-mix(in srgb, var(--mkc) 4%, transparent) 55%, transparent); box-shadow: inset 3px 0 0 var(--mkc); }
.vl.mk .vn { color: var(--mkc); }
.vl.mk.marcado { box-shadow: inset 3px 0 0 var(--mkc), 0 0 0 1px color-mix(in srgb, var(--mkc) 35%, transparent); }
.vs.mk { background: color-mix(in srgb, var(--mkc) 13%, transparent); box-shadow: 0 1px 0 color-mix(in srgb, var(--mkc) 70%, transparent); }
.vs.mk sup { color: var(--mkc); }
.mk-con-nota > .vt::after, .vs.mk-con-nota::after { content: ""; display: inline-block; width: .82em; height: .82em; margin-left: .4em; vertical-align: -.06em; background: var(--mkc, var(--tenue));
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 4.5h14v10.5l-4.5 4.5H5z M14.5 19.5V15H19M8 8.5h8M8 11.5h5'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 4.5h14v10.5l-4.5 4.5H5z M14.5 19.5V15H19M8 8.5h8M8 11.5h5'/%3E%3C/svg%3E") center / contain no-repeat; opacity: .8; }
.tesela { position: relative; }
.tesela.mk::after { content: ""; position: absolute; top: 3px; right: 3px; width: 7px; height: 7px; border-radius: 50%; background: var(--mkc); box-shadow: 0 0 0 1.5px var(--hoja); }
.tesela.mk-con-nota:not(.mk)::after { content: ""; position: absolute; top: 3px; right: 3px; width: 6px; height: 6px; border-radius: 50%; border: 1.5px solid var(--et); opacity: .8; }
/* en la ventana del verso */
.mk-bloque h4 { display: flex; align-items: center; gap: 8px; }
.mk-bloque h4 svg { width: 15px; height: 15px; }
.mk-bloque .mk-ir { margin-left: auto; font: 500 .72rem/1 var(--f-ui); letter-spacing: .08em; text-transform: none; color: var(--tenue); text-decoration: none; border-bottom: 1px dotted currentColor; }
.mk-bloque .mk-ir:hover { color: var(--oro-vivo); }
.mk-temas { display: flex; flex-wrap: wrap; gap: 7px; }
.mk-tema { display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--linea); background: var(--hoja); color: var(--tinta-2); border-radius: 999px; padding: 6px 12px 6px 9px; font: 500 .78rem/1.2 var(--f-ui); cursor: pointer; transition: border-color .2s, background-color .2s, color .2s; }
.mk-tema i, .mk-punto, .mk-tema-ed i { width: 11px; height: 11px; border-radius: 50%; background: var(--mkc); box-shadow: 0 0 0 3px color-mix(in srgb, var(--mkc) 22%, transparent); flex: none; display: inline-block; }
.mk-tema:hover { border-color: var(--mkc); color: var(--tinta); }
.mk-tema[aria-checked="true"] { border-color: var(--mkc); background: color-mix(in srgb, var(--mkc) 18%, var(--hoja)); color: var(--tinta); }
.mk-nota { width: 100%; min-height: 4.6em; resize: vertical; border: 1px solid var(--linea); border-radius: 12px; background: var(--bg); color: var(--tinta); padding: 10px 12px; font: 1rem/1.5 var(--f-texto); }
.mk-nota:focus { outline: none; border-color: var(--oro); box-shadow: 0 0 0 3px var(--oro-suave); }
/* página «Mis marcadores» */
.mk-ctl { display: grid; gap: 12px; }
.mk-buscar { width: 100%; max-width: 520px; border: 1px solid var(--linea); border-radius: 999px; background: var(--hoja); color: var(--tinta); padding: 10px 18px; font: 1rem/1.3 var(--f-ui); }
.mk-buscar:focus { outline: none; border-color: var(--oro); box-shadow: 0 0 0 3px var(--oro-suave); }
.mk-filtros .q-chip { display: inline-flex; align-items: center; gap: 7px; }
.mk-filtros .mk-punto { width: 9px; height: 9px; box-shadow: none; }
.mk-lista { display: grid; gap: 26px; }
.mk-grupo { display: grid; gap: 10px; }
.mk-grupo h3 { margin: 0; font: 400 1.35rem/1.2 var(--f-display); color: var(--oro); }
.mk-grupo h3 small { font: 500 .72rem/1 var(--f-ui); letter-spacing: .12em; color: var(--tenue); }
.mk-card { position: relative; display: grid; gap: 6px; padding: 14px 52px 14px 18px; border: 1px solid var(--linea-2); border-radius: 14px; background: var(--hoja); box-shadow: inset 3px 0 0 var(--mkc, var(--linea)); }
.mk-card.mk { background: linear-gradient(90deg, color-mix(in srgb, var(--mkc) 10%, var(--hoja)), var(--hoja) 60%); }
.mk-ref { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--mkc, var(--oro)); font: 400 1.2rem/1.2 var(--f-display); width: max-content; max-width: 100%; }
.mk-ref small { font: 500 .66rem/1 var(--f-ui); letter-spacing: .16em; text-transform: uppercase; color: var(--tenue); }
.mk-ref svg { width: 14px; height: 14px; opacity: .6; transition: transform .2s; }
.mk-ref:hover svg { transform: translateX(3px); opacity: 1; }
.mk-tx { margin: 0; font: 1.02rem/1.6 var(--f-texto); color: var(--tinta-2); }
.mk-n { margin: 2px 0 0; display: flex; gap: 8px; align-items: flex-start; font: .95rem/1.5 var(--f-texto); color: var(--tinta); white-space: pre-wrap; }
.mk-n svg { width: 15px; height: 15px; flex: none; margin-top: .2em; color: var(--mkc, var(--tenue)); }
.mk-quitar { position: absolute; top: 10px; right: 10px; width: 34px; height: 34px; opacity: .55; }
.mk-quitar:hover { opacity: 1; color: var(--mk-rojo); }
.mk-acciones { display: flex; flex-wrap: wrap; gap: 8px; }
.mk-acciones svg { width: 15px; height: 15px; }
.mk-borrar:hover { border-color: var(--mk-rojo); color: var(--mk-rojo); }
.mk-vacio { display: grid; justify-items: center; gap: 6px; text-align: center; padding: 34px 16px; border: 1px dashed var(--linea); border-radius: 18px; }
.mk-vacio svg { width: 34px; height: 34px; color: var(--oro); opacity: .8; }
.mk-vacio p { margin: 0; max-width: 46ch; }
.mk-temas-ed { display: grid; gap: 10px; }
.mk-tema-ed { display: flex; align-items: center; gap: 12px; }
.mk-tema-ed input { flex: 1; border: 1px solid var(--linea); border-radius: 10px; background: var(--bg); color: var(--tinta); padding: 9px 12px; font: 1rem/1.3 var(--f-ui); }

/* ---------------------------------------------------------------- saltos rápidos (inicio, mitad, final) */
.saltos-rap { position: fixed; z-index: 60; right: max(12px, env(safe-area-inset-right, 0px)); bottom: calc(18px + env(safe-area-inset-bottom, 0px)); display: grid; gap: 8px; opacity: 0; transform: translateX(14px); pointer-events: none; transition: opacity .35s ease, transform .35s cubic-bezier(.2, .7, .2, 1); }
.saltos-rap.vis, .saltos-rap:focus-within { opacity: 1; transform: none; pointer-events: auto; }
.sr-btn { position: relative; width: 42px; height: 42px; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--oro) 45%, transparent); background: color-mix(in srgb, var(--hoja) 78%, transparent); -webkit-backdrop-filter: blur(12px) saturate(1.4); backdrop-filter: blur(12px) saturate(1.4); color: var(--oro-vivo); display: grid; place-items: center; cursor: pointer; box-shadow: 0 6px 22px rgba(0, 0, 0, .35); transition: border-color .2s, background-color .2s, transform .15s, opacity .25s; -webkit-tap-highlight-color: transparent; }
.sr-btn svg { width: 19px; height: 19px; }
.sr-btn:hover { border-color: var(--oro); background: color-mix(in srgb, var(--oro) 16%, var(--hoja)); }
.sr-btn:active { transform: scale(.94); }
.sr-btn:focus-visible { outline: 2px solid var(--oro); outline-offset: 2px; }
.sr-med { border-color: transparent; }
.sr-aro { position: absolute; inset: -1px; width: calc(100% + 2px) !important; height: calc(100% + 2px) !important; pointer-events: none; }
.sr-aro circle { fill: none; stroke-width: 1.5; }
.sr-aro .sr-fondo { stroke: color-mix(in srgb, var(--oro) 28%, transparent); }
.sr-aro .sr-av { stroke: var(--oro); stroke-linecap: round; transition: stroke-dasharray .12s linear; }
.saltos-rap.en-ini .sr-ini, .saltos-rap.en-fin .sr-fin { opacity: .38; }
:root[data-theme="light"] .sr-btn { box-shadow: 0 6px 18px rgba(60, 45, 20, .16); }
html.con-modal .saltos-rap { display: none; }
@media print { .saltos-rap { display: none; } }

/* ---------------------------------------------------------------- fondo vivo: luces tenues y motas de luz */
.fondo-vivo { position: fixed; inset: 0; z-index: -3; overflow: hidden; pointer-events: none; contain: strict; }
.fondo-vivo > i { position: absolute; width: 120vmax; height: 120vmax; border-radius: 50%; will-change: transform; }
.vivo-a { left: -60vmax; top: -62vmax; background: radial-gradient(closest-side, rgba(214, 178, 104, .13), rgba(214, 178, 104, .045) 45%, transparent 72%); animation: vivoA 74s ease-in-out infinite alternate; }
.vivo-b { right: -64vmax; bottom: -66vmax; background: radial-gradient(closest-side, rgba(86, 112, 190, .12), rgba(86, 112, 190, .04) 48%, transparent 72%); animation: vivoB 96s ease-in-out infinite alternate; }
.vivo-c { left: -10vmax; top: 18vh; width: 90vmax !important; height: 90vmax !important; background: radial-gradient(closest-side, rgba(150, 102, 170, .07), transparent 70%); animation: vivoC 118s ease-in-out infinite alternate; }
@keyframes vivoA { 0% { transform: translate3d(0, 0, 0); } 50% { transform: translate3d(22vw, 14vh, 0); } 100% { transform: translate3d(8vw, 34vh, 0); } }
@keyframes vivoB { 0% { transform: translate3d(0, 0, 0); } 50% { transform: translate3d(-26vw, -10vh, 0); } 100% { transform: translate3d(-10vw, -30vh, 0); } }
@keyframes vivoC { 0% { transform: translate3d(0, 0, 0); opacity: .6; } 50% { transform: translate3d(30vw, -12vh, 0); opacity: 1; } 100% { transform: translate3d(-12vw, 20vh, 0); opacity: .7; } }
.vivo-motas i { position: absolute; left: var(--x); bottom: -12px; width: var(--s); height: var(--s); border-radius: 50%; background: #f0d9a2; box-shadow: 0 0 6px 1px rgba(232, 207, 148, .55); opacity: 0; animation: mota var(--d) linear var(--r) infinite; will-change: transform, opacity; }
@keyframes mota { 0% { transform: translate3d(0, 0, 0); opacity: 0; } 12% { opacity: .55; } 55% { opacity: .35; } 88% { opacity: .5; } 100% { transform: translate3d(var(--w), -112vh, 0); opacity: 0; } }
:root[data-theme="light"] .vivo-a { background: radial-gradient(closest-side, rgba(176, 130, 48, .12), rgba(176, 130, 48, .04) 45%, transparent 72%); }
:root[data-theme="light"] .vivo-b { background: radial-gradient(closest-side, rgba(70, 100, 170, .08), transparent 70%); }
:root[data-theme="light"] .vivo-c { background: radial-gradient(closest-side, rgba(150, 100, 150, .05), transparent 70%); }
:root[data-theme="light"] .vivo-motas i { background: #b8913f; box-shadow: 0 0 5px rgba(176, 130, 48, .45); }
/* las hojas dejan ver apenas el fondo vivo */
.hoja { background: color-mix(in srgb, var(--hoja) 88%, transparent); }
.banda { background: radial-gradient(ellipse 50% 120% at 0% 0%, var(--oro-suave), transparent 70%), color-mix(in srgb, var(--bg-2) 82%, transparent); position: relative; overflow: hidden; }
.banda::before { content: ""; position: absolute; inset: -40% -10%; background: radial-gradient(ellipse 40% 60% at 20% 30%, rgba(214, 178, 104, .10), transparent 70%); animation: bandaRespira 14s ease-in-out infinite alternate; pointer-events: none; }
.banda > .in { position: relative; }
@keyframes bandaRespira { from { opacity: .35; transform: translate3d(-3%, 0, 0); } to { opacity: 1; transform: translate3d(5%, 4%, 0); } }
/* el aro de avance se dibuja al abrir el libro; el capítulo en hebreo recibe un brillo lento */
.anillo svg circle + circle { animation: aroLlena 1.6s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes aroLlena { from { stroke-dasharray: 0 999; } }
.encab .h [lang="he"] { background: linear-gradient(100deg, var(--oro) 0%, var(--oro) 40%, var(--oro-vivo) 50%, var(--oro) 60%, var(--oro) 100%); background-size: 260% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: brilloHe 11s ease-in-out infinite; }
@keyframes brilloHe { 0%, 55% { background-position: 100% 0; } 85%, 100% { background-position: 0% 0; } }
@media (prefers-reduced-motion: reduce) {
  .fondo-vivo > i, .vivo-motas i, .banda::before, .anillo svg circle + circle, .banda-ani svg circle + circle, .encab .h [lang="he"] { animation: none !important; }
  .vivo-motas { display: none; }
}
html[data-mov="no"] .vivo-motas { display: none; }
@media print { .fondo-vivo { display: none; } }

/* grano de pergamino en el fondo de la página (fijo, se pinta una sola vez) */
body { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E") 0 0 / 220px 220px, var(--bg) !important; }
:root[data-theme="light"] body { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E") 0 0 / 220px 220px, var(--bg) !important; }

/* ---------------------------------------------------------------- instalar y leer sin conexión */
.app-card { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 18px; padding: clamp(18px, 3vw, 28px); border: 1px solid var(--linea-2); border-radius: 20px; background: color-mix(in srgb, var(--hoja) 90%, transparent); }
.app-ico { width: 52px; height: 52px; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--oro) 55%, transparent); display: grid; place-items: center; color: var(--oro-vivo); background: radial-gradient(circle at 50% 35%, var(--oro-suave), transparent 70%); }
.app-ico svg { width: 24px; height: 24px; }
.app-cuerpo { display: grid; gap: 12px; align-content: start; min-width: 0; }
.app-cuerpo h2 { margin: 0; font: 400 1.5rem/1.2 var(--f-display); color: var(--tinta); }
.app-cuerpo > p { margin: 0; color: var(--tinta-2); line-height: 1.6; max-width: 60ch; }
.app-cuerpo .btn { width: max-content; max-width: 100%; }
.app-cuerpo .btn svg { width: 16px; height: 16px; }
.app-cuerpo .btn:disabled { opacity: .45; cursor: default; }
.app-pasos { margin: 0; padding-left: 1.3em; display: grid; gap: 6px; color: var(--tinta-2); }
.app-desc { display: grid; gap: 10px; }
.app-barra { height: 8px; border-radius: 999px; background: var(--hoja-3); overflow: hidden; }
.app-barra i { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, var(--oro-2), var(--oro), var(--oro-vivo)); transition: width .25s ease; }
.app-tx { margin: 0; font: 500 .82rem/1.4 var(--f-ui); letter-spacing: .04em; color: var(--tenue); font-variant-numeric: tabular-nums; }
.app-botones { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.app-datos { margin: 0; padding-left: 1.1em; display: grid; gap: 6px; font: .88rem/1.5 var(--f-ui); color: var(--tenue); }
.app-aviso { color: var(--oro-vivo); }
@media (max-width: 560px) { .app-card { grid-template-columns: minmax(0, 1fr); } .app-ico { width: 46px; height: 46px; } }

/* modo «Organizada»: rótulo corto en teléfonos; nota de la lectura organizada */
.seg-modo .corto { display: none; }
@media (max-width: 1023px) {
  .seg-modo .m-o .largo { display: none; }
  .seg-modo .m-o .corto { display: inline; }
}
@media (max-width: 400px) {
  .barra-hoja .seg-modo button { padding: 6px 7px; letter-spacing: .02em; font-size: min(.68rem, 11.5px); }
}
.nota-org b { color: var(--oro); font-weight: 500; }
@media (max-width: 360px) {
  .barra-hoja .seg-modo button { padding: 6px 5px; font-size: min(.66rem, 11px); }
  .barra-hoja .seg-modo { padding: 2px; }
}
@media (max-width: 1023px) {
  .bh-franja { margin-bottom: -8px; margin-left: -12px; margin-right: -12px; }
}
/* modos: rótulos con su ícono; en teléfonos estrechos, el modo activo con su nombre y los otros solo con el ícono */
.seg-modo button svg { display: none; }
@media (max-width: 400px) {
  .barra-hoja .seg-modo button { padding: 6px 9px; font-size: min(.68rem, 11.5px); letter-spacing: .03em; display: inline-flex; align-items: center; }
  .barra-hoja .seg-modo button:not([aria-pressed="true"]) .lbl { display: none; }
  .barra-hoja .seg-modo button:not([aria-pressed="true"]) svg { display: block; width: 17px; height: 17px; }
  .barra-hoja .seg-modo { padding: 3px; }
}

/* ficha del libro: cifras · anillo · libro, simétrica y proporcional al tamaño de letra elegido */
.banda .in.banda-g { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); grid-template-areas: "cif ani tit"; align-items: center; gap: 1.1rem clamp(1rem, 3.5vw, 3rem); }
.banda-g .banda-tit { grid-area: tit; justify-items: end; text-align: right; }
.banda-g .banda-tit .eyebrow { max-width: 34ch; }
.banda-g .banda-lib { justify-items: end; }
.banda-g .banda-fecha { justify-self: end; margin-top: .2rem; }
.banda-ani { grid-area: ani; display: grid; justify-items: center; gap: .55rem; text-align: center; }
.banda-ani svg { width: 6.4rem; height: 6.4rem; display: block; }
.banda-ani .num { font-size: 18px; fill: var(--tinta); font-family: var(--f-display); }
.banda-ani svg circle + circle { animation: aroLlena 1.6s cubic-bezier(.2, .7, .2, 1) both; }
.banda-ani p { margin: 0; max-width: 19ch; font-family: var(--f-ui); font-size: .72rem; letter-spacing: .05em; line-height: 1.45; color: var(--tenue); }
.banda-g .mini-cifras { grid-area: cif; display: grid; grid-template-columns: repeat(2, max-content); gap: 1rem 2.2rem; justify-content: start; align-content: center; }
.banda-g .bc { display: grid; gap: .1rem; font-family: var(--f-ui); font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--tenue); min-width: 0; }
.banda-g .bc b { font-family: var(--f-display); font-weight: 400; font-size: 1.85rem; letter-spacing: 0; color: var(--tinta); text-transform: none; line-height: 1.05; }
.banda-g .bc span { max-width: 14ch; line-height: 1.35; }
@media (max-width: 760px) {
  /* teléfonos: el libro arriba, centrado; debajo, dos cifras a cada lado del anillo */
  .banda .in.banda-g { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); grid-template-areas: "tit tit tit" "c1 ani c3" "c2 ani c4"; gap: .9rem 1.1rem; }
  .banda-g .banda-tit { justify-items: center; text-align: center; }
  .banda-g .banda-lib { justify-items: center; }
  .banda-g .banda-fecha { justify-self: center; }
  .banda-g .mini-cifras { display: contents; }
  .banda-g .c1 { grid-area: c1; } .banda-g .c2 { grid-area: c2; } .banda-g .c3 { grid-area: c3; } .banda-g .c4 { grid-area: c4; }
  .banda-g .c1, .banda-g .c2 { justify-self: end; text-align: right; justify-items: end; }
  .banda-g .c3, .banda-g .c4 { justify-self: start; text-align: left; justify-items: start; }
  .banda-g .c1, .banda-g .c3 { align-self: end; } .banda-g .c2, .banda-g .c4 { align-self: start; }
  .banda-g .bc b { font-size: 1.5rem; }
  .banda-g .bc { font-size: .62rem; letter-spacing: .12em; }
  .banda-ani svg { width: 5.6rem; height: 5.6rem; }
  .banda-ani p { font-size: .66rem; max-width: 17ch; }
}
@media (min-width: 1024px) {
  /* escritorio: la disposición solo con su ícono (con su nombre al pasar el puntero) y el capítulo abreviado, para que todo quepa en una fila */
  .barra-hoja .seg-ico .txt { display: none; }
  .barra-hoja .seg-ico button { padding: 6px 11px; }
}
/* el nombre en español del libro, centrado de verdad (la flecha de volver no ocupa espacio) */
.banda-lib .es { position: relative; }
.banda-lib .es::after { position: absolute; left: 100%; top: 0; white-space: nowrap; }
.banda-g .banda-tit .eyebrow { text-wrap: balance; }
@media (min-width: 761px) { .banda-g .banda-tit .eyebrow { max-width: 48ch; } }
@media (max-width: 760px) { .banda-g .banda-tit .eyebrow { letter-spacing: .2em; max-width: 30ch; justify-self: center; } }
@media (min-width: 1024px) and (max-width: 1365px) {
  .barra-hoja .seg-modo button { padding-left: 11px; padding-right: 11px; letter-spacing: .1em; }
  .barra-hoja > .filtro-niv { flex: 1 1 9.5rem; max-width: 15rem; }
  .barra-hoja .filtro-niv .mm-btn { max-width: none; flex: 1 1 auto; }
  .barra-hoja { column-gap: 10px; }
}
/* al final de un capítulo: el pie llega enseguida, sin una franja vacía */
.pagina:has(.libro-grid) { min-height: 0; }
.pagina:has(.libro-grid) .libro-grid { padding-bottom: 10px; }
.pagina:has(.libro-grid) + .pie { margin-top: 14px; }
/* pellizco: un paso por gesto, con un sello discreto junto a los dedos */
.sello-tam { position: fixed; z-index: 200; transform: translate(-50%, -140%); padding: 7px 14px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--oro) 55%, transparent); background: color-mix(in srgb, var(--hoja) 72%, transparent); -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4); color: var(--oro); font: 600 .82rem/1 var(--f-ui); letter-spacing: .08em; white-space: pre; pointer-events: none; box-shadow: 0 10px 30px rgba(0, 0, 0, .35); animation: selloTam .9s ease forwards; }
.sello-tam.tope { color: var(--tenue); }
@keyframes selloTam { 0% { opacity: 0; transform: translate(-50%, -110%) scale(.92); } 18% { opacity: 1; transform: translate(-50%, -140%) scale(1); } 70% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -165%); } }
html[data-mov="no"] .sello-tam { animation: none; opacity: 1; }
/* al volver atrás, la vista se muestra cuando ya está en su sitio exacto (unos pocos fotogramas) */
html.volviendo #vista { opacity: 0; transition: none; }
#vista { transition: opacity .18s ease-out; } /* al volver, la vista aparece con un fundido breve en lugar de un golpe */
html.volviendo .barra, html.volviendo .barra-hoja { transition: none !important; }
/* la palabra a la que se llega desde «Ver en el análisis»: un halo dorado y siete estrellitas que se encienden y se apagan */
.pal { position: relative; }
.pal.destello { animation: palHalo 2.4s ease-out; z-index: 3; }
@keyframes palHalo { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--oro) 0%, transparent); } 14% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--oro) 85%, transparent), 0 0 34px 6px color-mix(in srgb, var(--oro) 45%, transparent); } 70% { box-shadow: 0 0 0 2px color-mix(in srgb, var(--oro) 55%, transparent), 0 0 22px 2px color-mix(in srgb, var(--oro) 22%, transparent); } 100% { box-shadow: 0 0 0 0 transparent; } }
.chispas { position: absolute; inset: -10px; pointer-events: none; z-index: 4; }
.chispas i { position: absolute; width: 11px; height: 11px; opacity: 0; background: var(--oro-vivo, #e9c779); clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%); filter: drop-shadow(0 0 4px color-mix(in srgb, var(--oro) 80%, transparent)); animation: chispa 1.5s cubic-bezier(.2, .7, .2, 1) calc(var(--k) * .12s) 2 both; }
.chispas i:nth-child(1) { left: 2%; top: 8%; } .chispas i:nth-child(2) { right: 4%; top: -2%; width: 8px; height: 8px; }
.chispas i:nth-child(3) { right: -2%; top: 46%; } .chispas i:nth-child(4) { right: 12%; bottom: 0; width: 7px; height: 7px; }
.chispas i:nth-child(5) { left: 30%; bottom: -4%; } .chispas i:nth-child(6) { left: -3%; top: 52%; width: 8px; height: 8px; }
.chispas i:nth-child(7) { left: 55%; top: -6%; width: 9px; height: 9px; }
@keyframes chispa { 0% { opacity: 0; transform: scale(.2) rotate(0deg); } 35% { opacity: 1; transform: scale(1.15) rotate(45deg); } 100% { opacity: 0; transform: scale(.4) rotate(110deg); } }
html[data-mov="no"] .chispas, html[data-mov="no"] .pal.destello { animation: none; }
html[data-mov="no"] .pal.destello { outline: 2px solid var(--oro); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .chispas { display: none; } .pal.destello { animation: none; outline: 2px solid var(--oro); outline-offset: 2px; } }
/* manuscritos: el texto base interlineal (griego y su traducción), un latido al tocar y la luz sobre las diferencias */
.ms-texto { display: flex; flex-wrap: wrap; align-items: flex-start; gap: .55rem .45rem; font-size: 1.25rem; line-height: 1.3; }
.ms-u { display: inline-grid; justify-items: center; gap: .15rem; padding: .25rem .35rem .3rem; border-radius: 8px; text-align: center; transition: background-color .25s, box-shadow .25s; }
.ms-u .ms-g { font-family: var(--f-griego); line-height: 1.25; }
.ms-u .ms-tr { font-family: var(--f-ui); font-size: .62rem; line-height: 1.25; letter-spacing: .02em; color: var(--tenue); max-width: 9rem; }
.ms-u .ms-tr.sin { opacity: .5; }
.ms-w.ms-u.v-om { text-decoration: none; } .ms-w.ms-u.v-om .ms-g { text-decoration: line-through; text-decoration-color: #d9715f; text-decoration-thickness: 2px; }
.ms-w.ms-u.v-sust, .ms-w.ms-u.v-orden { border-bottom: 0; } .ms-w.ms-u.v-sust .ms-g { border-bottom: 2px solid #d9a441; } .ms-w.ms-u.v-orden .ms-g { border-bottom: 2px dotted #7fb0d9; }
button.ms-u { cursor: pointer; }
button.ms-u:hover { box-shadow: 0 0 0 1px color-mix(in srgb, var(--oro) 45%, transparent) inset; }
.ms-u.activa { box-shadow: 0 0 0 1.5px var(--oro) inset; background: color-mix(in srgb, var(--oro) 14%, transparent); }
.ms-u.toca { animation: msLate .65s cubic-bezier(.2, .7, .2, 1); }
@keyframes msLate { 0% { transform: scale(1); } 30% { transform: scale(1.09); box-shadow: 0 0 0 2px var(--oro) inset, 0 0 22px color-mix(in srgb, var(--oro) 50%, transparent); } 100% { transform: scale(1); } }
.ms-texto .ms-add { align-self: center; }
.ms-var { position: relative; overflow: hidden; }
.ms-var.pulso::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 20%, color-mix(in srgb, var(--oro) 26%, transparent) 50%, transparent 80%); transform: translateX(-100%); animation: msBarrido .9s ease-out forwards; pointer-events: none; }
@keyframes msBarrido { to { transform: translateX(100%); } }
.ms-trf { font-family: var(--f-ui); color: var(--tenue); font-size: .92em; }
.ms-ctl { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; margin: 2px 0 12px; }
.seg-ms button { font-size: .72rem; }
.dipl.entra { animation: diplEntra .35s ease; }
@keyframes diplEntra { from { opacity: .25; } to { opacity: 1; } }
html[data-mov="no"] .ms-u.toca, html[data-mov="no"] .ms-var.pulso::after, html[data-mov="no"] .dipl.entra { animation: none; }
@media (prefers-reduced-motion: reduce) { .ms-u.toca, .ms-var.pulso::after, .dipl.entra { animation: none; } }
@media (max-width: 560px) { .ms-texto { font-size: 1.1rem; gap: .45rem .3rem; } .ms-u .ms-tr { font-size: .6rem; max-width: 7rem; } }
/* concordancia: apariciones plegadas por libro */
.apl-cab { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 14px; }
.apl-cab h2 { margin: 0; }
.ap-libros { display: grid; gap: 8px; margin-top: 12px; }
.ap-libro { border: 1px solid var(--linea-2); border-radius: 14px; background: var(--hoja-2); overflow: hidden; transition: border-color .2s; }
.ap-libro[open] { border-color: color-mix(in srgb, var(--oro) 45%, var(--linea-2)); }
.ap-libro > summary { list-style: none; display: flex; align-items: center; gap: 12px; padding: 12px 14px; cursor: pointer; }
.ap-libro > summary::-webkit-details-marker { display: none; }
.ap-libro > summary:hover { background: color-mix(in srgb, var(--oro) 6%, transparent); }
.ap-libro > summary:focus-visible { outline: 2px solid var(--oro); outline-offset: -2px; }
.apl-t { display: grid; min-width: 0; flex: 1 1 auto; }
.apl-t b { font-family: var(--f-display); font-weight: 500; font-size: 1.08rem; color: var(--oro); }
.apl-t small { font-family: var(--f-ui); font-size: .66rem; letter-spacing: .16em; text-transform: uppercase; color: var(--tenue); }
.apl-n { flex: none; font-family: var(--f-ui); font-size: .78rem; color: var(--tinta-2); padding: 4px 10px; border-radius: 999px; border: 1px solid var(--linea); }
.ap-libro > summary svg { flex: none; width: 16px; height: 16px; color: var(--oro); transition: transform .25s; }
.ap-libro[open] > summary svg { transform: rotate(180deg); }
.apl-cuerpo { padding: 2px 14px 14px; display: grid; gap: 10px; }
.apl-cuerpo .citas { margin: 0; }

/* ===================================================================== cristal premium y fondo vivo ligero (30-oct-2026) */
:root { --vidrio-luz: rgba(255, 255, 255, .065); --vidrio-filo: rgba(255, 255, 255, .11); --vidrio-sombra: rgba(0, 0, 0, .72); }
:root[data-theme="light"] { --vidrio-luz: rgba(255, 255, 255, .6); --vidrio-filo: rgba(255, 255, 255, .85); --vidrio-sombra: rgba(70, 50, 20, .22); }
/* barra superior: cristal de verdad (se ve pasar el texto, desenfocado), brillo arriba, filo dorado abajo */
.barra { background: linear-gradient(180deg, var(--vidrio-luz), transparent 72%), color-mix(in srgb, var(--bg) 56%, transparent); -webkit-backdrop-filter: blur(16px) saturate(1.9) brightness(1.03); backdrop-filter: blur(16px) saturate(1.9) brightness(1.03); border-bottom-color: transparent; box-shadow: inset 0 1px 0 var(--vidrio-filo), 0 16px 36px -22px var(--vidrio-sombra); }
.barra::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; pointer-events: none; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--oro) 45%, transparent) 22%, color-mix(in srgb, var(--oro-vivo) 75%, transparent) 50%, color-mix(in srgb, var(--oro) 45%, transparent) 78%, transparent); }
.barra .btn-icono, .barra .btn-buscar { background: linear-gradient(180deg, var(--vidrio-luz), transparent 80%), color-mix(in srgb, var(--hoja) 38%, transparent); border-color: color-mix(in srgb, var(--oro) 26%, var(--linea)); box-shadow: inset 0 1px 0 var(--vidrio-filo), 0 6px 16px -10px var(--vidrio-sombra); transition: border-color .2s, box-shadow .25s, background-color .2s, transform .2s; }
.barra .btn-icono:hover, .barra .btn-buscar:hover { border-color: var(--oro); box-shadow: inset 0 1px 0 var(--vidrio-filo), 0 0 0 3px color-mix(in srgb, var(--oro) 13%, transparent), 0 8px 20px -10px var(--vidrio-sombra); }
.barra .btn-icono:active, .barra .btn-buscar:active { transform: scale(.96); }
.barra .sello { background: radial-gradient(circle at 35% 28%, color-mix(in srgb, var(--oro-vivo) 24%, transparent), transparent 62%), color-mix(in srgb, var(--hoja) 40%, transparent); box-shadow: inset 0 1px 0 var(--vidrio-filo), inset 0 0 10px color-mix(in srgb, var(--oro) 18%, transparent); }
/* barra del capítulo: el mismo cristal, un poco más denso */
.barra-hoja { background: linear-gradient(180deg, var(--vidrio-luz), transparent 65%), color-mix(in srgb, var(--hoja) 70%, transparent); -webkit-backdrop-filter: blur(14px) saturate(1.7); backdrop-filter: blur(14px) saturate(1.7); box-shadow: inset 0 1px 0 var(--vidrio-filo), 0 14px 30px -24px var(--vidrio-sombra); }
.barra-hoja .seg, .barra-hoja .filtro-niv, .barra-hoja .btn-icono, .cap-grupo .btn-cap { background: color-mix(in srgb, var(--hoja-2) 55%, transparent); box-shadow: inset 0 1px 0 var(--vidrio-filo); }
/* ventanas y menús: filo de luz y sombra más profunda */
.modal { box-shadow: var(--sombra), inset 0 1px 0 var(--vidrio-filo), 0 0 0 1px color-mix(in srgb, var(--oro) 10%, transparent); }
.m-cab { background: linear-gradient(180deg, var(--vidrio-luz), transparent 80%), color-mix(in srgb, var(--hoja) 82%, transparent); }
.saltos-rap .sr-btn { box-shadow: inset 0 1px 0 var(--vidrio-filo), 0 10px 24px -12px var(--vidrio-sombra); }
@media (prefers-reduced-transparency: reduce) {
  .barra { background: var(--bg); } .barra-hoja { background: var(--hoja); }
  .barra .btn-icono, .barra .btn-buscar, .barra .sello { background: var(--hoja); }
}
/* la hoja de lectura deja pasar, muy tenue, lo que vive detrás (luces y motas de luz) */
.hoja { background: color-mix(in srgb, var(--hoja) 82%, transparent); }
:root[data-theme="light"] .hoja { background: color-mix(in srgb, var(--hoja) 86%, transparent); }

/* mientras se desplaza la página, lo que vive detrás se queda quieto: el desplazamiento va a todo su ritmo */
html.desplazando .fondo-vivo > i, html.desplazando .vivo-motas i, html.desplazando .banda::before { animation-play-state: paused; }
/* Con una ventana abierta, el fondo queda quieto: su cristal (desenfoque) no tiene que recalcularse en cada cuadro y la
   ventana se desplaza con fluidez (Herramientas, búsqueda…); los meteoros en vuelo se ocultan con un fundido */
html.con-modal .fondo-vivo > i, html.con-modal .vivo-motas i, html.con-modal .banda::before, html.con-modal .anillo svg circle + circle, html.con-modal .encab .h [lang="he"] { animation-play-state: paused; }
.meteoros { transition: opacity .3s ease; }
html.con-modal .meteoros { opacity: 0; }
/* estudios: «Lo que pocos saben», «Por qué estas fechas» y «Falacias lógicas» */
.estudio .panel-cab h1 { margin-bottom: 4px; }
.est-sub { margin: 0; color: var(--tenue); font-family: var(--f-ui); font-size: .92rem; }
.est-nav { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.est-nav .chip { display: inline-flex; align-items: center; gap: 7px; text-decoration: none; padding: 7px 13px; }
.est-nav .chip svg { width: 15px; height: 15px; color: var(--oro); }
.est-nav .chip.activo { border-color: var(--oro); color: var(--oro-vivo); background: var(--oro-suave); }
.est-intro { font-family: var(--f-texto); font-size: 1.12rem; line-height: 1.65; color: var(--tinta-2); max-width: 62ch; margin: 18px 0 26px; }
.est-lista, .est-fal { display: grid; gap: 14px; }
.est-item { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 18px; padding: 20px 22px; border: 1px solid var(--linea-2); border-radius: 18px; background: linear-gradient(180deg, var(--vidrio-luz, transparent), transparent 40%), var(--hoja-2); position: relative; overflow: hidden; }
.est-item::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: linear-gradient(180deg, var(--oro-vivo), color-mix(in srgb, var(--oro) 20%, transparent)); }
.est-n { font-family: var(--f-display); font-size: 2.2rem; line-height: 1; color: color-mix(in srgb, var(--oro) 70%, transparent); padding-top: 4px; }
.est-c h2, .est-sec h2, .est-etica h2, .est-falacia h2, .est-fechas h2 { margin: 0 0 8px; font-family: var(--f-display); font-weight: 500; font-size: 1.42rem; line-height: 1.2; color: var(--tinta); }
.est-c p, .est-sec p, .est-etica p, .est-falacia p { margin: 0 0 10px; font-family: var(--f-texto); font-size: 1.04rem; line-height: 1.62; color: var(--tinta-2); }
.est-refs { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; font-family: var(--f-ui); font-size: .84rem !important; color: var(--tenue) !important; }
.est-refs svg { width: 15px; height: 15px; color: var(--oro); margin-right: 4px; }
.est-refs a { color: var(--oro-vivo); text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--oro) 40%, transparent); }
.est-refs a:hover { border-bottom-color: var(--oro); }
.est-fuentes { margin-top: 4px; font-family: var(--f-ui); font-size: .8rem; color: var(--tenue); }
.est-fuentes summary { cursor: pointer; color: var(--oro); letter-spacing: .12em; text-transform: uppercase; font-size: .7rem; width: max-content; }
.est-fuentes ul { margin: 8px 0 0; padding-left: 1.1em; display: grid; gap: 5px; line-height: 1.45; }
.est-secs { display: grid; gap: 22px; }
.est-sec { padding-left: 18px; border-left: 2px solid color-mix(in srgb, var(--oro) 45%, transparent); }
.est-fechas { padding: 20px 22px; border-radius: 18px; border: 1px solid var(--linea-2); background: var(--hoja-2); }
.est-tabla { list-style: none; margin: 10px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); gap: 6px 18px; counter-reset: est; }
.est-tabla li { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 7px 0; border-bottom: 1px dashed var(--linea-2); counter-increment: est; }
.est-tabla li::before { content: counter(est, decimal-leading-zero); font-family: var(--f-ui); font-size: .7rem; color: var(--tenue); margin-right: 8px; }
.est-tabla a { flex: 1 1 auto; min-width: 0; display: grid; text-decoration: none; color: var(--oro-vivo); font-family: var(--f-display); font-size: 1.04rem; }
.est-tabla a small { font-family: var(--f-ui); font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; color: var(--tenue); }
.est-tabla span { flex: none; font-family: var(--f-ui); font-size: .82rem; color: var(--tinta-2); font-variant-numeric: tabular-nums; }
.est-etica { padding: 20px 22px; border-radius: 18px; border: 1px solid color-mix(in srgb, var(--oro) 40%, var(--linea-2)); background: radial-gradient(120% 90% at 0% 0%, color-mix(in srgb, var(--oro) 12%, transparent), transparent 60%), var(--hoja-2); margin-bottom: 18px; }
.est-falacia { padding: 18px 20px; border-radius: 16px; border: 1px solid var(--linea-2); background: var(--hoja-2); }
.est-falacia h2 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.est-falacia h2 small { font-family: var(--f-texto); font-style: italic; font-size: .9rem; color: var(--tenue); font-weight: 400; }
.est-def { color: var(--tinta) !important; }
.est-ej { padding: 10px 14px; border-radius: 12px; background: color-mix(in srgb, var(--hoja-3) 60%, transparent); font-style: italic; }
.est-ej b, .est-resp b { font-style: normal; font-family: var(--f-ui); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--oro); font-weight: 500; }
@media (min-width: 900px) { .est-fal { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .est-item { grid-template-columns: minmax(0, 1fr); padding: 18px 16px; } .est-n { font-size: 1.6rem; } }

/* ===================== 31-oct-2026 ===================== */
/* Textos añadidos después (Marcos 16:8 final breve, 16:9-20, Juan 7:53-8:11, Romanos 16:24): nunca con el formato ni el
   color base de BiEx. Violeta y cursiva, entre ⟦ ⟧ y con un aviso; también por encima de los colores de la edición. */
:root { --anadido: #bca8ea; --anadido-gr: #d6c9f4; --anadido-fondo: rgba(188, 168, 234, .075); --anadido-filo: rgba(188, 168, 234, .38); }
:root[data-theme="light"] { --anadido: #6a4ca6; --anadido-gr: #7d62b8; --anadido-fondo: rgba(106, 76, 166, .07); --anadido-filo: rgba(106, 76, 166, .34); }
:root .ta, :root.ed .ta, :root.ed .ta.tm, :root.ed .ta .tm, :root.ed .ta.tc { color: var(--anadido); font-style: italic; }
:root .ta .gr, :root.ed .ta .gr, :root.ed .ta .tm .gr { color: var(--anadido-gr); text-decoration: none; }
:root .ta .tk, :root .ta.tk, :root.ed .ta .tk, :root.ed .ta.tk { color: var(--anadido); opacity: .74; }
.vl.anadido .vn, .vs.anadido > sup, .av.anadido .av-cab b { color: var(--anadido); }
.vl.anadido, .vl.an-parcial { box-shadow: inset 2px 0 0 var(--anadido-filo); }
.av.anadido, .av.an-parcial { border-left: 2px solid var(--anadido-filo); padding-left: 12px; }
.an-cor { color: var(--anadido); font-style: normal; font-weight: 500; }
.pal.an { outline: 1px dashed var(--anadido-filo); outline-offset: -1px; }
.pal.an .tr { color: var(--anadido); font-style: italic; }
.fv-es.an-ventana { color: var(--anadido); }
.aviso-anadido { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: start; margin: 14px 0 10px; padding: 12px 14px; border-radius: 12px;
  background: var(--anadido-fondo); border: 1px solid var(--anadido-filo); border-left-width: 3px; font-family: var(--f-ui); font-size: .84rem; line-height: 1.5; color: var(--tinta); }
.aviso-anadido .aa-sig { font-family: var(--f-griego); font-size: 1.25rem; line-height: 1.1; color: var(--anadido); letter-spacing: .08em; }
.aviso-anadido b { font-weight: 500; color: var(--anadido); }
.aviso-anadido p { margin: 3px 0 6px; color: var(--tenue); }
.aviso-anadido .enlace { font-size: .8rem; }
.continuo .aviso-anadido { margin: 18px 0 12px; }
.fv .aviso-anadido { margin: 0 0 4px; }

/* Herramientas: canales de Biblia Exacta */
.herr-redes { margin-top: 20px; display: grid; gap: 0; }
.herramientas.en-modal.redes { grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr)); }
.herr-ext h3 { font-size: 1.3rem; }

/* Navegador del libro: los demás libros al pie */
.nav-libros .libs { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(132px, 46%), 1fr)); gap: 6px; }
.lib-chip { display: grid; gap: 1px; justify-items: start; text-align: left; min-height: 44px; padding: 7px 11px; border: 1px solid var(--linea-2); border-radius: 10px;
  background: var(--hoja); color: var(--tinta); font: inherit; cursor: pointer; transition: background-color .22s ease, border-color .22s ease, transform .22s cubic-bezier(.2, .7, .2, 1); }
.lib-chip .lt { font-family: var(--f-display); font-size: 1.02rem; line-height: 1.15; }
.lib-chip .ln { font-family: var(--f-ui); font-size: .68rem; color: var(--tenue); letter-spacing: .02em; }
.lib-chip:hover { background: var(--hoja-2); border-color: color-mix(in srgb, var(--oro) 40%, var(--linea-2)); }
.lib-chip:active { transform: scale(.98); }
.lib-chip[aria-current="true"] { border-color: var(--oro); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--oro) 45%, transparent); cursor: default; }
.lib-chip[aria-current="true"] .lt { color: var(--oro); }
.lib-chip:focus-visible { outline: 2px solid var(--oro-vivo); outline-offset: 2px; }

/* Adelante (como el botón del navegador): solo cuando hay un paso adelante */
.adelante { position: fixed; z-index: 61; left: max(12px, env(safe-area-inset-left, 0px)); bottom: calc(18px + env(safe-area-inset-bottom, 0px)); display: inline-flex; align-items: center; gap: 6px;
  min-height: 40px; padding: 0 12px 0 16px; border-radius: 999px; border: 1px solid var(--vidrio-filo, var(--linea-2)); color: var(--tinta); font-family: var(--f-ui); font-size: .8rem; letter-spacing: .04em;
  background: color-mix(in srgb, var(--hoja) 78%, transparent); -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px); box-shadow: var(--vidrio-sombra, 0 8px 24px rgba(0, 0, 0, .35));
  cursor: pointer; opacity: 0; transform: translate3d(0, 10px, 0) scale(.96); pointer-events: none; transition: opacity .32s cubic-bezier(.2, .7, .2, 1), transform .42s cubic-bezier(.2, .7, .2, 1); }
.adelante svg { width: 16px; height: 16px; color: var(--oro); }
.adelante.vis { opacity: 1; transform: none; pointer-events: auto; }
html.inmersivo .adelante.vis, html.con-modal .adelante.vis { opacity: 0; transform: translate3d(0, 10px, 0) scale(.96); pointer-events: none; }
.adelante:hover { border-color: color-mix(in srgb, var(--oro) 50%, transparent); }
.adelante:focus-visible { outline: 2px solid var(--oro-vivo); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .adelante { transition: opacity .2s; transform: none; } }

/* Capas del fondo: luces y motas (-3) < fondo de los contenedores (-2) < letras meteoro (-1) < texto y controles.
   Los contenedores no forman contexto de apilamiento: su fondo pasa a una capa propia (::after) para que las letras crucen
   por delante del contenedor y por detrás del texto (31-oct-2026, indicación de BiEx). */
.meteoros { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; contain: strict; }
.met { position: absolute; left: 0; top: 0; width: 0; height: 0; will-change: transform, opacity; }
.met-rumbo { position: absolute; left: 0; top: 0; width: 0; height: 0; transform: rotate(var(--ang)); opacity: var(--op); }
.met-cola { position: absolute; right: 0; top: calc(var(--s) * -.1); width: var(--L); height: calc(var(--s) * .2); clip-path: polygon(0 50%, 100% 0, 100% 100%);
  background: linear-gradient(90deg, rgba(236, 206, 140, 0), rgba(236, 206, 140, .42) 62%, rgba(255, 244, 214, .72)); }
.met-cola::after { content: ""; position: absolute; right: 0; top: calc(50% - .6px); width: 58%; height: 1.2px; background: linear-gradient(90deg, rgba(255, 246, 222, 0), rgba(255, 246, 222, .85)); }
.met-halo { position: absolute; left: calc(var(--s) * -.95); top: calc(var(--s) * -.95); width: calc(var(--s) * 1.9); height: calc(var(--s) * 1.9); border-radius: 50%;
  background: radial-gradient(closest-side, rgba(236, 206, 140, .42), rgba(236, 206, 140, .12) 55%, rgba(236, 206, 140, 0)); }
.met-letra { position: absolute; left: calc(var(--s) * -.6); top: calc(var(--s) * -.62); width: calc(var(--s) * 1.2); height: calc(var(--s) * 1.24); display: grid; place-items: center;
  font: 400 var(--s)/1 var(--f-griego); font-style: normal; opacity: calc(var(--op) * 1.55);
  background: linear-gradient(135deg, #fff1cf 0%, #ecce8c 48%, #c6984c 100%); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.met-letra.he { font-family: "Frank Ruhl Libre", "Noto Serif Hebrew", "SBL Hebrew", "Times New Roman", serif; font-weight: 500; }
:root[data-theme="light"] .met-cola { background: linear-gradient(90deg, rgba(150, 104, 30, 0), rgba(150, 104, 30, .34) 62%, rgba(120, 82, 20, .55)); }
:root[data-theme="light"] .met-cola::after { background: linear-gradient(90deg, rgba(120, 82, 20, 0), rgba(120, 82, 20, .6)); }
:root[data-theme="light"] .met-halo { background: radial-gradient(closest-side, rgba(176, 130, 48, .26), rgba(176, 130, 48, .08) 55%, rgba(176, 130, 48, 0)); }
:root[data-theme="light"] .met-letra { background: linear-gradient(135deg, #b88a3a 0%, #8c6420 52%, #6b4a14 100%); -webkit-background-clip: text; background-clip: text; opacity: calc(var(--op) * 1.3); }
html[data-mov="no"] .meteoros { display: none; }
@media (prefers-reduced-motion: reduce) { .meteoros { display: none; } }
@media print { .meteoros { display: none; } }
:is(.hoja, .banda, .tarjeta, .tlibro, .tl-conj, .tl-c, .tira-tiempo, .est-item, .cifras) { position: relative; background: none !important; }
:is(.hoja, .banda, .tarjeta, .tlibro, .tl-conj, .tl-c, .tira-tiempo, .est-item, .cifras)::after { content: ""; position: absolute; inset: 0; z-index: -2; border-radius: inherit; background: var(--fondo-c); pointer-events: none; transition: background-color .2s; }
.hoja { --fondo-c: color-mix(in srgb, var(--hoja) 82%, transparent); }
:root[data-theme="light"] .hoja { --fondo-c: color-mix(in srgb, var(--hoja) 86%, transparent); }
.banda { --fondo-c: radial-gradient(ellipse 50% 120% at 0% 0%, var(--oro-suave), transparent 70%), color-mix(in srgb, var(--bg-2) 82%, transparent); }
.tarjeta, .tl-conj, .tl-c, .tlibro { --fondo-c: var(--hoja); }
.tlibro:hover { --fondo-c: var(--hoja-2); }
.cifras { --fondo-c: var(--bg-2); }
.est-item { --fondo-c: linear-gradient(180deg, var(--vidrio-luz, transparent), transparent 40%), var(--hoja-2); }
.tira-tiempo { --fondo-c: linear-gradient(90deg, var(--oro-suave), transparent 70%), var(--hoja); }
@media (prefers-reduced-transparency: reduce) { .hoja { --fondo-c: var(--hoja); } }

/* Cierre de las ventanas: una copia quieta se desvanece y baja apenas mientras la ventana real ya se cerró */
.modal-sale { position: fixed; z-index: 2147483000; pointer-events: none; display: flex; flex-direction: column; overflow: hidden; margin: 0; animation: modalSale .22s cubic-bezier(.4, 0, .2, 1) forwards; }
.modal-sale > .m-caja { flex: 1 1 auto; min-height: 0; }
.modal-velo-sale { position: fixed; inset: 0; z-index: 2147482999; pointer-events: none; background: rgba(4, 3, 2, .5); -webkit-backdrop-filter: blur(10px) saturate(1.2); backdrop-filter: blur(10px) saturate(1.2); animation: veloSale .24s ease forwards; }
:root[data-theme="light"] .modal-velo-sale { background: rgba(40, 30, 15, .28); }
@keyframes modalSale { to { opacity: 0; transform: translate3d(0, 12px, 0) scale(.985); } }
@keyframes veloSale { to { opacity: 0; } }

/* Exportar a Obsidian */
.md-exp { display: grid; gap: 12px; }
.md-fila { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px 16px; align-items: center; padding: 14px 16px; border: 1px solid var(--linea-2); border-radius: 14px; background: var(--hoja-2); }
.md-fila b { font-family: var(--f-display); font-weight: 500; font-size: 1.12rem; color: var(--tinta); }
.md-fila p { margin: 3px 0 0; font-family: var(--f-ui); font-size: .8rem; color: var(--tenue); line-height: 1.45; }
.md-acc { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.md-op { display: flex; align-items: center; gap: 10px; margin: -4px 4px 4px; font-family: var(--f-ui); font-size: .84rem; color: var(--tinta-2); cursor: pointer; }
.md-op input { width: 18px; height: 18px; accent-color: var(--oro); }
@media (max-width: 560px) { .md-fila { grid-template-columns: minmax(0, 1fr); } .md-acc { justify-content: flex-start; } }
.ap-exp { display: flex; justify-content: center; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--linea-2); }
.est-exp { margin-top: 14px; justify-self: start; }

/* Planes de lectura */
.pl-lista { display: grid; gap: 12px; margin-top: 22px; }
.pl-tarjeta { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 18px 20px; border: 1px solid var(--linea-2); border-radius: 18px; color: var(--tinta); text-decoration: none;
  background: linear-gradient(180deg, var(--vidrio-luz, transparent), transparent 40%), var(--hoja-2); transition: border-color .25s ease, transform .3s cubic-bezier(.2, .7, .2, 1); }
.pl-tarjeta:hover { border-color: color-mix(in srgb, var(--oro) 55%, var(--linea-2)); transform: translateY(-1px); }
.pl-tarjeta.act { border-color: var(--oro); }
.pl-tarjeta h2 { margin: 0 0 4px; font-family: var(--f-display); font-weight: 500; font-size: 1.32rem; line-height: 1.2; }
.pl-tarjeta p { margin: 0 0 6px; color: var(--tinta-2); font-size: .98rem; line-height: 1.5; }
.pl-tarjeta > svg { width: 20px; height: 20px; color: var(--oro); }
.pl-meta { font-family: var(--f-ui); font-size: .74rem; letter-spacing: .06em; color: var(--tenue); }
.pl-anillo { position: relative; display: grid; place-items: center; width: 52px; height: 52px; color: var(--oro); flex: none; }
.pl-anillo svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.pl-anillo b { font-family: var(--f-ui); font-size: .72rem; font-weight: 500; color: var(--tinta); }
.pl-cab { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-top: 16px; font-family: var(--f-ui); font-size: .86rem; color: var(--tinta-2); }
.pl-sig { display: grid; gap: 6px; margin: 22px 0 18px; padding: 18px 20px; border: 1px solid color-mix(in srgb, var(--oro) 45%, var(--linea-2)); border-radius: 16px; background: var(--oro-suave); }
.pl-sig b { font-family: var(--f-display); font-weight: 500; font-size: 1.3rem; }
.pl-acc { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.pl-dias { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.pl-dias li { display: grid; grid-template-columns: auto 4.6rem minmax(0, 1fr); gap: 12px; align-items: center; padding: 8px 10px; border-radius: 12px; transition: background-color .2s; }
.pl-dias li:hover { background: var(--hoja-2); }
.pl-dias li.sig { background: color-mix(in srgb, var(--oro) 9%, transparent); }
.pl-dias li.hecho a { color: var(--tenue); }
.pl-dias a { color: var(--tinta); text-decoration: none; font-family: var(--f-texto); font-size: 1.02rem; }
.pl-dias a:hover { color: var(--oro); }
.pl-n { font-family: var(--f-ui); font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; color: var(--tenue); }
.pl-marca { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; border: 1.5px solid color-mix(in srgb, var(--oro) 55%, transparent); background: transparent; color: transparent; cursor: pointer; transition: background-color .2s, color .2s, transform .2s cubic-bezier(.2, .7, .2, 1); }
.pl-marca svg { width: 16px; height: 16px; }
.pl-marca[aria-pressed="true"] { background: var(--oro); color: var(--sobre-oro, #111); border-color: var(--oro); }
.pl-marca:active { transform: scale(.92); }
.pl-marca:focus-visible { outline: 2px solid var(--oro-vivo); outline-offset: 2px; }
.pl-hoy { display: grid; gap: 8px; margin-top: 18px; margin-bottom: 4px; padding: 16px 18px; border: 1px solid color-mix(in srgb, var(--oro) 40%, var(--linea-2)); border-radius: 16px; background: var(--oro-suave); }
.pl-hoy-cab { display: flex; align-items: center; gap: 14px; }
.pl-hoy-cab b { display: block; font-family: var(--f-display); font-weight: 500; font-size: 1.2rem; }
.pl-hoy p { margin: 0; font-family: var(--f-texto); font-size: 1.04rem; }
.pl-dn { font-family: var(--f-ui); font-size: .8rem; color: var(--tenue); }
.fin-plan { display: grid; justify-items: center; gap: 8px; margin: 26px auto 0; text-align: center; }
.pl-ok { display: inline-flex; align-items: center; gap: 8px; font-family: var(--f-ui); font-size: .86rem; color: var(--oro); }
.pl-ok svg { width: 16px; height: 16px; }

/* «Adelante» dentro de una ventana (1-nov-2026) */
.m-cab .m-adelante { color: var(--oro); }
/* La palabra que se analiza, marcada en su verso (ventana de la palabra), con su halo de estrellitas (1-nov-2026) */
.pal-sel { position: relative; border-radius: 4px; background: color-mix(in srgb, var(--oro) 20%, transparent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--oro) 42%, transparent); color: var(--tinta); }
.pal-sel::after { content: ""; position: absolute; inset: -3px -2px; border-radius: 6px; box-shadow: 0 0 0 2px var(--oro), 0 0 16px color-mix(in srgb, var(--oro) 55%, transparent); opacity: 0; pointer-events: none; }
.pal-sel.destello::after { animation: selHalo 2.4s ease-out; }
@keyframes selHalo { 0%, 30% { opacity: 1; } 100% { opacity: 0; } }
html[data-mov="no"] .pal-sel.destello::after { animation: none; }
/* Versos leídos: un punto de oro junto al número (por versos) o el número subrayado (continuo) */
.vl.leido .vn::before { content: ""; position: absolute; left: 3px; top: .74em; width: 5px; height: 5px; border-radius: 50%; background: var(--oro); opacity: .85; }
.vs.leido > sup { text-decoration: underline 1.5px color-mix(in srgb, var(--oro) 70%, transparent); text-underline-offset: 3px; }
.btn-leido.si { border-color: var(--oro); color: var(--oro); }
.btn-leido svg, .fin-leido svg { width: 16px; height: 16px; }
.fin-leido { display: flex; justify-content: center; margin: 16px 0 0; }
.fin-leido.hecho { gap: 6px; align-items: center; color: var(--oro); font-size: .92rem; }
/* Tu lectura (planes): cifras y gráfico vectorial de los últimos 30 días */
.pl-stats { margin: 4px 0 22px; padding: 16px 18px 14px; border: 1px solid var(--linea); border-radius: 16px; background: var(--hoja-2); }
.pls-cab { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.pls-pct { font-family: var(--f-display); color: var(--oro); font-size: 1.05rem; }
.pls-barra { height: 4px; border-radius: 4px; background: var(--hoja-3); margin: 8px 0 14px; overflow: hidden; }
.pls-barra i { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, var(--oro), var(--oro-vivo, #e9c779)); }
.pls-cifras { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.pls-c { display: grid; gap: 2px; text-align: center; }
.pls-c b { font-family: var(--f-display); font-size: 1.6rem; font-weight: 500; color: var(--tinta); line-height: 1.1; font-variant-numeric: lining-nums; }
.pls-c span { font-size: .74rem; color: var(--tenue); }
.pls-graf { margin: 14px 0 0; }
.pls-graf svg { display: block; width: 100%; height: auto; }
.pls-graf .b-si { fill: var(--oro); opacity: .82; }
.pls-graf .b-no { fill: var(--linea); }
.pls-graf .b-hoy { opacity: 1; stroke: var(--oro-vivo, #e9c779); stroke-width: .8; }
.pls-graf .b-meta { fill: var(--oro-vivo, #e9c779); }
.pls-graf figcaption { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin-top: 6px; font-size: .76rem; color: var(--tenue); }
.pls-ley i { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--oro-vivo, #e9c779); vertical-align: middle; }
@media (max-width: 520px) { .pls-cifras { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 14px; } }
/* Historial: las últimas 24 citas */
.hist { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.hist a { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--linea-2); background: var(--hoja-2); color: var(--tinta); text-decoration: none; }
.hist a:hover, .hist a:focus-visible { border-color: var(--oro); }
.hist-ref { font-family: var(--f-display); font-size: 1.12rem; min-width: 0; overflow-wrap: anywhere; }
.hist-ref .trad { color: var(--tenue); font-size: .9em; }
.hist-m { font-size: .78rem; color: var(--tenue); white-space: nowrap; }
.hist a > svg { width: 16px; height: 16px; color: var(--oro); }
@media (max-width: 480px) { .hist a { grid-template-columns: minmax(0, 1fr) auto; row-gap: 2px; } .hist-m { grid-column: 1; } .hist a > svg { grid-row: 1 / span 2; grid-column: 2; } }
/* Deslizar entre versos dentro de una ventana: el contenido entra desde el lado del gesto */
@media (prefers-reduced-motion: no-preference) {
  .modal[data-paso="sig"] .m-cuerpo { animation: entraDer .3s cubic-bezier(.2, .7, .2, 1); }
  .modal[data-paso="ant"] .m-cuerpo { animation: entraIzq .3s cubic-bezier(.2, .7, .2, 1); }
}
/* Buscador: secciones de los textos de BiEx (estudios y línea del tiempo) */
.res-secc { display: grid; gap: 8px; }
.res-sec { display: grid; gap: 3px; padding: 11px 13px; border: 1px solid var(--linea-2); border-radius: 12px; background: var(--hoja-2); color: var(--tinta); text-decoration: none; }
.res-sec:hover, .res-sec:focus-visible { border-color: var(--oro); }
.rs-s { font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--oro); }
.res-sec b { font-family: var(--f-display); font-weight: 500; font-size: 1.08rem; }
.rs-tx { font-size: .9rem; color: var(--tinta-2); line-height: 1.45; }
.sec-foco { position: relative; }
.sec-halo { position: absolute; inset: -8px; border-radius: 14px; box-shadow: 0 0 0 2px var(--oro), 0 0 22px color-mix(in srgb, var(--oro) 40%, transparent); pointer-events: none; animation: secHalo 2.6s ease-out forwards; }
@keyframes secHalo { 0%, 40% { opacity: 1; } 100% { opacity: 0; } }
html[data-mov="no"] .sec-halo { animation: none; opacity: 0; }

/* Lector dentro del sitio oficial en un teléfono estrecho (7 botones en la barra): la guía se oculta aquí y sigue en Herramientas */
@media (max-width: 400px) { html.incrustado .barra .btn-guia { display: none; } }
/* Lupa en la computadora (pellizco del panel o Ctrl + rueda): la página ampliada se recorre a lo ancho y a lo alto; la barra
   superior queda fija y a su tamaño, y la barra del capítulo deja de ir pegada (su ampliación la llevaría más abajo) */
html.lupa .barra { position: fixed; top: 0; left: 0; right: 0; }
html.lupa body { padding-top: calc(var(--alto) + env(safe-area-inset-top, 0px)); }
html.lupa .barra-hoja { position: relative; top: auto; }
html.lupa-ajuste, html.lupa-ajuste body { scroll-behavior: auto !important; overflow-anchor: none !important; }