/* ═══════════ LA PÁGINA ES PAPEL · el pergamino y sus formatos ═══════════ */
.lectura{position:relative;z-index:2;padding:calc(var(--barra) + clamp(18px,4vh,46px)) clamp(8px,4vw,48px) 12vh;
  scroll-margin-top:0}
body.con-reproductor .lectura{padding-bottom:calc(12vh + 90px)}
.hoja{position:relative;max-width:960px;margin:0 auto;animation:hoja-abre .9s var(--curva) both}
/* el capítulo entero está en la página, pero el navegador solo pinta la hoja que se ve y las de al lado:
   con cuatro pliegos de treinta párrafos, abrir deja de arrastrarse en un móvil viejo. El alto de cada
   hoja va estimado por sus palabras (--alto, lo pone el lector), así que el scroll no pega saltos. */
body[data-nivel="capitulo"] .hoja{content-visibility:auto;contain-intrinsic-size:auto var(--alto,1800px)}
@keyframes hoja-abre{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.hoja::before{content:"";position:absolute;inset:14px 6px;z-index:-1;background:rgba(20,12,4,.72);filter:blur(34px)}

.papel{position:relative;isolation:isolate;color:var(--ink);
  /* el papel roto: los cantos (lados) ∩ (filo de arriba ∪ cuerpo ∪ filo de abajo) */
  -webkit-mask-image:var(--mascara-lados),var(--mascara-arriba),linear-gradient(#000,#000),var(--mascara-abajo);
  mask-image:var(--mascara-lados),var(--mascara-arriba),linear-gradient(#000,#000),var(--mascara-abajo);
  -webkit-mask-size:100% 100%,100% 72px,100% calc(100% - 120px),100% 72px;
  mask-size:100% 100%,100% 72px,100% calc(100% - 120px),100% 72px;
  -webkit-mask-position:center,top,center,bottom;mask-position:center,top,center,bottom;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-composite:source-in,source-over,source-over,source-over;
  mask-composite:intersect,add,add,add;
  background:
    radial-gradient(ellipse 120% 78% at 50% 24%,var(--vellum-lit) 0%,transparent 62%),
    radial-gradient(ellipse 90% 60% at 10% 92%,rgba(150,120,74,.2) 0%,transparent 70%),
    linear-gradient(172deg,var(--vellum) 0%,var(--vellum) 58%,var(--vellum-deep) 100%);
  padding:clamp(46px,7vw,96px) clamp(20px,5vw,74px) clamp(56px,8vw,104px)}
.papel::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.46;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4'/><feColorMatrix type='saturate' values='0'/></filter><rect width='240' height='240' filter='url(%23g)' opacity='0.4'/></svg>")}

/* la sombra del pergamino: va en la hoja y no en el papel, porque el papel lleva las máscaras del canto roto y se
   comería cualquier sombra suya. Un halo alrededor, sin oscurecer lo de detrás. */
body[data-nivel="capitulo"] .hoja::before{inset:20px 12px;background:none;filter:none;
  box-shadow:0 26px 62px 14px rgba(0,0,0,.5)}

/* lo que queda del capítulo, en el descanso entre pliegos: discreto, y se apaga mientras lees */
.rotulo.queda{margin:10px 0 0;text-align:center;font-family:var(--f-rotulo);font-size:9px;letter-spacing:.26em;
  text-transform:uppercase;color:var(--gold-idle);opacity:.72;transition:opacity .6s}
body.leyendo .rotulo.queda{opacity:.2}

.escena-rotulo{position:relative;z-index:1;text-align:center;font-family:var(--f-rotulo);font-size:9.5px;
  letter-spacing:.34em;text-transform:uppercase;color:var(--ink-faint);margin:0 0 clamp(26px,4vh,40px)}

.bloque{position:relative;z-index:1;max-width:var(--medida);margin-inline:auto;transition:opacity .7s ease}
.b-cuerpo,.b-apertura{font-family:var(--f-lectura);font-size:calc(clamp(17px,1.35vw,19.5px) * var(--letra));
  line-height:1.66;text-align:justify;hyphens:auto;-webkit-hyphens:auto;margin-block:0 1.05em;text-indent:1.6em}
.b-apertura{text-indent:0}
.b-apertura:not(.raya)::first-letter{float:left;font-family:var(--f-rotulo);font-weight:600;font-size:3.34em;
  line-height:.84;padding:.07em .12em 0 0;margin-top:.04em;color:var(--leaf);text-shadow:0 1px 0 rgba(255,248,226,.7)}
.versal{font-variant-caps:small-caps;letter-spacing:.09em;color:#2F2113}
.b-epigrafe{font-family:var(--f-susurro);font-style:italic;font-size:calc(clamp(17px,1.5vw,21px) * var(--letra));
  line-height:1.58;color:var(--ink-soft);max-width:46ch;margin-block:0 clamp(20px,3vh,34px);text-align:center;
  text-wrap:pretty}
.corte,.b-corte{position:relative;z-index:1;display:block;margin:clamp(30px,4.5vh,50px) auto;
  width:clamp(200px,28%,320px);opacity:.88;mix-blend-mode:multiply}
.b-vision{max-width:none;margin-block:clamp(30px,5vh,56px);padding:clamp(28px,4vh,48px) 0;text-align:center}
.b-vision::before{content:"";position:absolute;inset:-8% -14%;pointer-events:none;z-index:-1;
  background:radial-gradient(ellipse at 50% 50%,rgba(255,252,242,.86) 0%,rgba(255,252,242,.44) 42%,transparent 74%)}
.b-vision p{position:relative;max-width:40ch;margin:0 auto;color:var(--ink-faint);font-family:var(--f-susurro);
  font-style:italic;font-size:calc(clamp(17px,1.45vw,20px) * var(--letra));line-height:1.72}
.b-verso{text-align:center;font-family:var(--f-susurro);font-style:italic;max-width:40ch;
  font-size:calc(clamp(17px,1.5vw,20px) * var(--letra));line-height:1.75;color:var(--ink-soft);
  margin-block:clamp(24px,4vh,40px);letter-spacing:.02em}
.b-documento{max-width:52ch;margin-block:clamp(24px,4vh,40px);padding:clamp(18px,3vw,28px) clamp(18px,3vw,32px);
  background:rgba(120,90,50,.08);font-style:italic;font-size:calc(clamp(16px,1.3vw,18.5px) * var(--letra));
  line-height:1.62;color:#4A3620;
  box-shadow:inset 0 0 0 1px rgba(120,90,50,.22),inset 0 0 0 5px rgba(240,230,206,.5),inset 0 0 0 6px rgba(120,90,50,.12)}
.b-documento p{margin:0}
.b-documento cite{display:block;text-align:right;margin-top:10px;font-family:var(--f-rotulo);font-style:normal;
  font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--ink-faint)}
.b-epigrafe cite{display:block;margin-top:.8em;font-family:var(--f-rotulo);font-style:normal;font-size:10px;
  letter-spacing:.22em;text-transform:uppercase;color:var(--ink-faint)}
/* la nota (> **Nota de sortida** en el md): una etiqueta de perfume entre dos filos que se desvanecen en los extremos */
.b-nota{max-width:40ch;margin-block:clamp(26px,4vh,44px);padding:clamp(14px,2.2vh,22px) 0;text-align:center;
  border-style:solid;border-width:1px 0;border-image:linear-gradient(90deg,transparent,rgba(120,90,50,.45) 24%,rgba(120,90,50,.45) 76%,transparent) 1}
.b-nota .nota-rot{margin:0;font-family:var(--f-rotulo);font-size:10.5px;letter-spacing:.3em;text-transform:uppercase;color:var(--leaf)}
.b-nota p:not(.nota-rot){margin:.55em 0 0;font-family:var(--f-susurro);font-style:italic;color:var(--ink-soft);
  font-size:calc(clamp(17px,1.45vw,20px) * var(--letra));line-height:1.55;text-wrap:pretty}
.b-banda{max-width:none;margin:clamp(26px,5vh,54px) calc(-1 * clamp(20px,5vw,74px))}
.b-banda img{width:100%;max-height:70vh;object-fit:cover;
  -webkit-mask-image:linear-gradient(transparent,#000 9%,#000 91%,transparent);mask-image:linear-gradient(transparent,#000 9%,#000 91%,transparent)}
.b-banda figcaption{text-align:center;font-family:var(--f-susurro);font-style:italic;color:var(--ink-faint);font-size:14px;margin-top:10px}
.pendiente{font-family:var(--f-rotulo);font-size:.72em;letter-spacing:.12em;color:var(--leaf);opacity:.75}

html[data-dislexia="1"] .b-cuerpo,html[data-dislexia="1"] .b-apertura{line-height:1.82;text-align:left;hyphens:manual;
  font-size:calc(clamp(15.5px,1.2vw,17.5px) * var(--letra))}

/* lectura biónica: la primera mitad de cada palabra, en tinta firme */
.w b.bi{font-weight:600;color:#24170A}

/* foco de párrafo: el que lees, entero; los demás, velados */
html[data-foco="1"] .papel .bloque{opacity:.36}
html[data-foco="1"] .papel .bloque.en-foco,html[data-foco="1"] .papel .bloque.sonando{opacity:1}