/* ═══════════ LEER A MANO · elegir un párrafo, lo ya leído, el paso del ratón ═══════════
   Tocar un párrafo lo elige: queda marcado con una hebra de oro en el margen, la posición se guarda y se
   ofrece escucharlo desde ahí. Lo que queda por detrás del punto al que se ha llegado se vuelve sepia
   clarito, como tinta que el papel se ha ido bebiendo: ya consumido. (.b-vision usa ::before; aquí, ::after.) */
.papel .bloque{transition:opacity .7s ease,color .9s ease,background-color .35s ease}
.papel .bloque:has(.w){cursor:pointer}

/* lo ya leído */
.papel .bloque.leido,.papel .bloque.leido :is(.w,.versal,b,em,i,cite,p,span){color:#A38E6D}
.papel .bloque.leido::first-letter{color:#B79F74}

/* el paso del ratón: el párrafo se enciende un poco, como cuando se está leyendo en voz alta */
@media (hover:hover) and (pointer:fine){
  .papel .bloque:has(.w):hover{
    background:radial-gradient(ellipse 74% 90% at 50% 50%,rgba(201,163,95,.18) 0%,rgba(201,163,95,.07) 50%,transparent 76%)}
  .papel .bloque.leido:hover,.papel .bloque.leido:hover :is(.w,.versal,b,em,i,cite,p,span){color:#7A6346}
  html[data-foco="1"] .papel .bloque:has(.w):hover{opacity:.8}
  .papel.escuchando .bloque:has(.w):hover{opacity:.85}
}

/* el párrafo elegido: una hebra de oro en el margen, desvanecida en los extremos */
.papel .bloque.elegido::after{content:"";position:absolute;left:calc(-1 * clamp(12px,2.4vw,28px));top:.2em;bottom:.2em;width:1px;
  pointer-events:none;background:linear-gradient(to bottom,transparent,var(--leaf) 18%,var(--leaf) 82%,transparent)}

/* «escuchar desde aquí», en su línea, justo debajo del párrafo elegido */
.desde-fila{position:relative;z-index:2;max-width:var(--medida);margin:-.2em auto 1.2em;display:flex;justify-content:flex-start}
.desde-aqui{position:relative;display:inline-flex;align-items:center;gap:8px;margin:0;
  padding:7px 13px 7px 11px;font-family:var(--f-rotulo);font-weight:500;font-size:10px;line-height:1;letter-spacing:.2em;
  text-transform:uppercase;text-indent:0;color:#7A5418;background:#F1E7CF;border:1px solid rgba(166,124,52,.5);cursor:pointer;
  box-shadow:0 0 0 6px rgba(241,231,207,.65);animation:desde-entra .35s var(--curva) both}
.desde-aqui svg{width:9px;height:9px;flex:none}
.desde-aqui:hover{color:#5A3B10;border-color:var(--leaf)}
.desde-aqui:focus-visible{outline:1px solid var(--cyan);outline-offset:3px}
@keyframes desde-entra{from{opacity:0;transform:translateY(4px)}}

/* entre hoja y hoja, sin pausa: el capítulo sigue de corrido y solo se detiene al final.
   Entre pliegos de la misma escena, una vara leve; entre escenas, la vara grande y su rótulo. */
.entre-pliegos{position:relative;z-index:2;display:flex;justify-content:center;padding:clamp(16px,3vh,30px) 0}
.entre-pliegos .vara{width:min(150px,38vw);opacity:.5}
.entre-escenas{position:relative;z-index:2;text-align:center;padding:clamp(40px,8vh,84px) 20px}
.entre-escenas .vara{display:block;width:min(300px,62vw);margin:0 auto clamp(12px,2vh,18px);opacity:.85}
.entre-escenas .rotulo{color:var(--gold)}

/* ═══════════ MARCAS Y NOTAS · lo que el lector quiere volver a encontrar ═══════════
   La marca es una señal de oro en el margen; la nota, su letra debajo del párrafo. Se quedan en su aparato. */
.papel .bloque.marcado::before{content:"";position:absolute;left:calc(-1 * clamp(20px,3.4vw,38px));top:.3em;width:10px;height:15px;
  background:linear-gradient(180deg,var(--leaf),#7A5418);clip-path:polygon(0 0,100% 0,100% 100%,50% 74%,0 100%);pointer-events:none}
.marcar,.notar{display:inline-flex;align-items:center;gap:8px;margin:0;padding:7px 13px 7px 11px;cursor:pointer;
  font-family:var(--f-rotulo);font-weight:500;font-size:10px;line-height:1;letter-spacing:.2em;text-transform:uppercase;
  color:#7A5418;background:rgba(241,231,207,.55);border:1px solid rgba(166,124,52,.42)}
.marcar svg,.notar svg{width:10px;height:12px;flex:none}
.marcar:hover,.notar:hover{color:#5A3B10;border-color:var(--leaf)}
.marcar[aria-pressed="true"]{color:#5A3B10;border-color:var(--leaf);background:rgba(201,163,95,.2)}
.marcar:focus-visible,.notar:focus-visible{outline:1px solid var(--cyan);outline-offset:3px}
.nota-fila{position:relative;z-index:2;max-width:var(--medida);margin:0 auto 1.2em}
.nota-fila textarea{display:block;width:100%;min-height:68px;padding:10px 12px;resize:vertical;
  font-family:var(--f-lectura);font-size:16px;line-height:1.5;color:var(--ink);background:rgba(255,253,246,.72);
  border:1px solid rgba(166,124,52,.45);border-radius:0;outline:none}
.nota-fila textarea:focus{border-color:var(--leaf);box-shadow:0 0 0 1px rgba(166,124,52,.25)}
.nota-fila .botones{display:flex;gap:8px;margin-top:8px}
/* la nota ya escrita, bajo su párrafo */
.nota-puesta{position:relative;z-index:1;max-width:var(--medida);margin:-.3em auto 1.3em;padding-left:14px;
  border-left:1px solid rgba(166,124,52,.5);font-family:var(--f-susurro);font-style:italic;font-size:16px;
  line-height:1.5;color:var(--ink-soft)}
/* cómo quedó: suya, esperando al autor, o publicada. Una línea pequeña, sin ruido. */
.nota-puesta .estado{display:block;margin-top:3px;font-family:var(--f-rotulo);font-style:normal;font-size:9.5px;
  letter-spacing:.22em;text-transform:uppercase;color:rgba(90,59,16,.55)}
/* quién la ve: lo elige el lector antes de guardar */
.nota-fila .opciones{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.nota-fila .opciones button{font-family:var(--f-rotulo);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;
  padding:7px 13px;cursor:pointer;color:var(--ink-soft);background:rgba(255,253,246,.5);
  border:1px solid rgba(166,124,52,.35)}
.nota-fila .opciones button[aria-pressed="true"]{color:#5A3B10;border-color:var(--leaf);background:rgba(201,163,95,.2)}
.nota-fila .opciones button[disabled]{opacity:.4;cursor:default}
.nota-fila .aviso-nota{margin:8px 0 0;font-family:var(--f-susurro);font-style:italic;font-size:14px;color:var(--ink-soft)}

/* al margen: lo que han escrito otros lectores y el autor ha publicado. Pegado al párrafo, no debajo de
   la página; cada voz con su nombre. Ninguna línea llega sólida de borde a borde: se apaga arriba y abajo. */
.notas-margen{position:relative;z-index:1;max-width:var(--medida);margin:-.1em auto 1.5em;padding:2px 0 2px 16px}
.notas-margen::before{content:"";position:absolute;left:0;top:0;bottom:0;width:1px;
  background:linear-gradient(180deg,transparent,rgba(166,124,52,.45) 14%,rgba(166,124,52,.45) 86%,transparent)}
.notas-margen .rotulo{margin:0 0 7px;font-family:var(--f-rotulo);font-size:9.5px;letter-spacing:.24em;
  text-transform:uppercase;color:rgba(90,59,16,.6)}
.notas-margen blockquote{margin:0 0 9px;padding:0}
.notas-margen blockquote:last-child{margin-bottom:0}
.notas-margen blockquote p{margin:0;font-family:var(--f-susurro);font-style:italic;font-size:16px;line-height:1.5;
  color:var(--ink-soft)}
.notas-margen cite{display:block;margin-top:2px;font-family:var(--f-rotulo);font-style:normal;font-size:9.5px;
  letter-spacing:.2em;text-transform:uppercase;color:rgba(90,59,16,.5)}

/* las marcas de una obra, en su página */
.marcas-obra{position:relative;z-index:2;max-width:1180px;margin:0 auto;padding:0 clamp(20px,5vw,56px) clamp(40px,8vh,80px)}
.marcas-obra > header{text-align:center;margin-bottom:clamp(20px,3.4vh,34px)}
.marcas-obra h2{font-family:var(--f-rotulo);font-weight:600;font-size:clamp(20px,2.6vw,30px);letter-spacing:.1em;margin:0 0 14px}
.marcas-obra > header .vara{display:block;width:min(300px,62vw);margin:0 auto;opacity:.8}
.marcas-obra .vacio{text-align:center;font-family:var(--f-susurro);font-style:italic;color:var(--ivory-dim);margin:0}
.marca-ficha{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:14px;padding:14px 4px;
  border-bottom:1px solid rgba(201,163,95,.16)}
.marca-ficha .donde{font-family:var(--f-rotulo);font-size:9.5px;letter-spacing:.28em;text-transform:uppercase;color:var(--gold);margin:0 0 6px}
.marca-ficha .cita{display:block;font-family:var(--f-susurro);font-style:italic;color:var(--ivory);margin:0;text-decoration:none}
.marca-ficha a.cita:hover{color:var(--gold-hi)}
.marca-ficha .suya{margin:8px 0 0;font-size:15px;color:var(--ivory-dim);padding-left:12px;border-left:1px solid rgba(201,163,95,.35)}
.marca-ficha .quita{background:none;border:0;cursor:pointer;color:var(--gold-idle);padding:8px;transition:color .3s}
.marca-ficha .quita:hover{color:var(--gold-hi)}
.marca-ficha .quita svg{width:14px;height:14px}

/* el final del capítulo se descubre solo cuando llegas: el rótulo, luego la vara, luego los botones */
.paso-escena.fin :is(.rotulo,.cual,.vara,.acciones){opacity:0;transition:opacity 1s ease,transform 1s var(--curva)}
.paso-escena.fin .acciones{transform:translateY(16px)}
.paso-escena.fin.vista .rotulo{opacity:1;transition-delay:.1s}
.paso-escena.fin.vista .cual{opacity:1;transition-delay:.25s}
.paso-escena.fin.vista .vara{opacity:.72;transition-delay:.4s}
.paso-escena.fin.vista .acciones{opacity:1;transform:none;transition-delay:.75s}

@media (prefers-reduced-motion:reduce){
  .desde-aqui{animation:none}
  .papel .bloque{transition:none}
  .paso-escena.fin :is(.rotulo,.cual,.acciones){opacity:1;transform:none;transition:none}
  .paso-escena.fin .vara{opacity:.72;transition:none}
}