/* Lector online */
@font-face { font-family: "Atkinson Hyperlegible"; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/atkinson-hyperlegible-latin-400-normal.woff2) format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+FEFF,U+FFFD; }
@font-face { font-family: "Atkinson Hyperlegible"; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/atkinson-hyperlegible-latin-ext-400-normal.woff2) format("woff2"); unicode-range: U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Atkinson Hyperlegible"; font-style: italic; font-weight: 400; font-display: swap; src: url(../fonts/atkinson-hyperlegible-latin-400-italic.woff2) format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+20AC,U+FEFF,U+FFFD; }
@font-face { font-family: "Atkinson Hyperlegible"; font-style: normal; font-weight: 700; font-display: swap; src: url(../fonts/atkinson-hyperlegible-latin-700-normal.woff2) format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+20AC,U+FEFF,U+FFFD; }

.reader {
  --r-paper: var(--paper); --r-ink: var(--ink); --r-soft: var(--ink-2); --r-line: var(--line);
  --reader-scale: 1;
  --r-font: var(--serif);
  --r-leading: 1.7;
  background: var(--r-paper); color: var(--r-ink); min-height: 100vh;
}
.reader[data-paper="sepia"] { --r-paper: #f6efe1; --r-ink: #3b2f22; --r-soft: #7a6a55; --r-line: #e2d6bf; }
.reader[data-paper="noche"] { --r-paper: #1b1b1a; --r-ink: #d9d6cf; --r-soft: #8e8a82; --r-line: #33322f; }
.reader[data-font="legible"] { --r-font: "Atkinson Hyperlegible", system-ui, sans-serif; }
.reader[data-leading="amplio"] { --r-leading: 2; }
body.is-reader { background: var(--paper); }
body.is-reader:has(.reader[data-paper="sepia"]) { background: #f6efe1; }
body.is-reader:has(.reader[data-paper="noche"]) { background: #1b1b1a; }

.reader__progress { position: fixed; inset: 0 0 auto 0; height: 3px; z-index: 30; }
.reader__progress span { display: block; height: 100%; background: var(--r-ink); transform-origin: 0 50%; transform: scaleX(0); }

.reader__bar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 1rem; padding: .7rem clamp(16px, 3vw, 32px); background: var(--r-paper); border-bottom: 1px solid var(--r-line); }
.reader__back { font-size: 1rem; color: var(--r-ink); white-space: nowrap; }
.reader__title { margin: 0 auto; font-size: 1rem; text-align: center; line-height: 1.25; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.reader__title span { color: var(--r-soft); margin-left: .5rem; }
.reader__tools { display: flex; gap: .4rem; }
.reader__btn { background: none; border: 1px solid var(--r-line); color: var(--r-ink); border-radius: 2px; padding: .35rem .8rem; cursor: pointer; font-size: 1rem; }
.reader__btn[aria-expanded="true"] { border-color: var(--r-ink); }
@media (max-width: 640px) { .reader__title span { display: none; } }

.reader__panel { position: fixed; top: 56px; right: clamp(8px, 3vw, 32px); z-index: 25; width: min(92vw, 22rem); max-height: 75vh; overflow: auto; background: var(--r-paper); color: var(--r-ink); border: 1px solid var(--r-line); box-shadow: 0 18px 40px -20px rgba(0,0,0,.45); padding: 1.1rem 1.2rem; }
.reader__panel fieldset { border: 0; margin: 0 0 1rem; padding: 0; }
.reader__panel legend { font-size: .95rem; color: var(--r-soft); margin-bottom: .4rem; }
.seg { display: flex; gap: .4rem; align-items: center; }
.seg button { flex: 1; background: none; border: 1px solid var(--r-line); color: var(--r-ink); padding: .45rem .5rem; cursor: pointer; font-size: 1rem; border-radius: 2px; }
.seg button[aria-pressed="true"] { border-color: var(--r-ink); background: var(--r-ink); color: var(--r-paper); }
.seg output { min-width: 4.5rem; text-align: center; font-variant-numeric: tabular-nums; }
.reader__toc { margin: 0; padding-left: 1.4rem; }
.reader__toc li { padding: .25rem 0; }
.reader__toc a { color: var(--r-ink); text-decoration: none; }
.reader__toc a:hover { text-decoration: underline; }

.reader__page { max-width: calc(34em * var(--reader-scale)); margin: 0 auto; padding: clamp(2.5rem, 6vw, 5rem) clamp(18px, 5vw, 32px) 6rem; font-family: var(--r-font); font-size: calc(1.25rem * var(--reader-scale)); line-height: var(--r-leading); }
.reader__opening { text-align: center; margin-bottom: 4rem; }
.reader__opening h1 { font-family: var(--serif); font-size: calc(2.6rem * var(--reader-scale)); font-weight: 400; letter-spacing: -0.02em; }
.reader__opening p { color: var(--r-soft); margin-top: .6rem; }
.reader__text p { margin: 0; text-indent: 1.4em; hyphens: auto; }
.reader__text h2 + p, .reader__text h3 + p, .reader__text p:first-child { text-indent: 0; }
.reader__text h2 { font-family: var(--serif); text-align: center; font-size: 1.35em; font-weight: 500; margin: 3.2em 0 1.4em; scroll-margin-top: 80px; }
.reader__text h3 { text-align: center; font-size: 1.1em; font-weight: 600; margin: 2em 0 1em; }
.reader__text blockquote { margin: 1em 1.5em; }
.reader__text hr { border: 0; text-align: center; margin: 2em 0; }
.reader__text hr::after { content: "* * *"; color: var(--r-soft); }
.reader__end { text-align: center; margin-top: 4rem; color: var(--r-soft); }
.reader__end p { font-size: 1.4em; color: var(--r-ink); }
.reader a { color: var(--r-ink); }

.reader__resume { position: fixed; left: 50%; bottom: 1.2rem; transform: translateX(-50%); z-index: 30; display: flex; align-items: center; gap: .9rem; background: var(--r-ink); color: var(--r-paper); padding: .7rem .8rem .7rem 1.2rem; border-radius: 2px; font-size: 1rem; box-shadow: 0 12px 30px -12px rgba(0,0,0,.5); max-width: calc(100vw - 2rem); }
.reader__resume button { background: none; border: 1px solid currentColor; color: inherit; padding: .3rem .8rem; cursor: pointer; border-radius: 2px; font-size: 1rem; }
.reader__resume [data-resume-close] { border: 0; font-size: 1.3rem; padding: 0 .4rem; }