/* ═══════════ LA VOZ · una luz de candil que lee contigo ═══════════
   Nada de cajas ni subrayados de reproductor. La palabra que suena se enciende en oro sobre
   el pergamino; debajo, una llama tenue aclara el papel, lo calienta alrededor y deja un filo
   de luz con un destello que lo recorre. Al pasar, la tinta queda caliente y se enfría despacio. */

.w{transition:color 1.2s ease,text-shadow 1.6s ease}

/* mientras suena, el resto de la hoja se recoge */
.papel.escuchando .bloque{opacity:.5}
.papel.escuchando .bloque.sonando{opacity:1}

/* la tinta por la que ya ha pasado la luz: cálida, con el brillo apagándose */
.bloque.sonando .w.dicha{color:#5A3B16;
  text-shadow:0 0 1px rgba(255,246,214,0),0 0 .3em rgba(242,192,92,0),0 0 .8em rgba(242,192,92,0),0 0 1.5em rgba(242,192,92,0)}
.bloque.sonando .versal .w.dicha{color:#48300F}

/* la palabra que suena: oro vivo y su resplandor */
.bloque.sonando .w.viva,.bloque.sonando .versal .w.viva{
  color:#8C5714;
  text-shadow:0 0 1px rgba(255,246,214,.95),0 0 .3em rgba(242,192,92,.85),0 0 .8em rgba(242,192,92,.45),0 0 1.5em rgba(242,192,92,.22);
  transition:color .1s ease-out,text-shadow .1s ease-out}
.bloque.sonando .w.viva .pendiente{color:inherit}
.bloque.sonando .w.viva b.bi{color:#734510}

/* ── el candil: se desliza de palabra en palabra ── */
.candil{position:absolute;z-index:0;left:0;top:0;width:0;height:0;pointer-events:none;opacity:0;
  transform:translate3d(var(--x,0px),var(--y,0px),0);
  transition:transform .5s cubic-bezier(.22,.9,.28,1),width .5s cubic-bezier(.22,.9,.28,1),height .3s ease,opacity 1.2s ease}
.papel.escuchando .candil.encendido{opacity:1}
.candil.salta{transition:width .22s ease,height .22s ease,opacity 1.2s ease}
.candil b,.candil i{position:absolute;display:block}

/* el calor: luz ámbar derramada sobre el pergamino */
.candil .halo{left:50%;top:55%;width:calc(100% + 4.4em);height:3.8em;transform:translate(-50%,-50%);
  background:radial-gradient(closest-side,rgba(250,196,104,.52) 0%,rgba(246,188,92,.3) 38%,rgba(246,188,92,.1) 68%,rgba(246,188,92,0) 100%);
  mix-blend-mode:multiply;animation:candil-llama 3.4s ease-in-out infinite}
/* el brillo: el papel se aclara donde da la llama */
.candil .luz{left:50%;top:52%;width:calc(100% + 2.4em);height:2.5em;transform:translate(-50%,-50%);
  background:radial-gradient(closest-side,rgba(255,252,238,.95) 0%,rgba(255,246,216,.55) 45%,rgba(255,246,216,0) 100%);
  mix-blend-mode:screen;animation:candil-llama 2.7s ease-in-out infinite reverse}
@keyframes candil-llama{
  0%,100%{opacity:.9;transform:translate(-50%,-50%) scale(1,1)}
  23%{opacity:1;transform:translate(-50%,-51%) scale(1.07,1.04)}
  51%{opacity:.78;transform:translate(-50%,-49%) scale(.96,1)}
  77%{opacity:.96;transform:translate(-50%,-50%) scale(1.03,1.06)}}
.candil.salta .halo,.candil.salta .luz{animation:candil-llama 3.4s ease-in-out infinite,candil-prende .6s ease-out}
@keyframes candil-prende{from{opacity:0}to{opacity:1}}

/* el filo: una vara de luz bajo la palabra, desvanecida por los dos lados, y su destello */
.candil .filo{left:-.5em;right:-.5em;bottom:-.16em;height:1.4px;
  background:linear-gradient(90deg,transparent,rgba(150,108,40,.7) 20%,rgba(214,166,78,.95) 50%,rgba(150,108,40,.7) 80%,transparent)}
.candil .filo::after{content:"";position:absolute;left:0;right:0;top:-1px;bottom:-1px;
  background:linear-gradient(90deg,transparent 0%,transparent 40%,rgba(255,246,214,1) 50%,transparent 60%,transparent 100%);
  background-size:260% 100%;animation:filo-destello 2.3s ease-in-out infinite}
@keyframes filo-destello{from{background-position:100% 0}to{background-position:0 0}}

/* motas de polvo de oro que suben al encenderse algunas palabras */
.candil .mota{bottom:.25em;left:var(--mx,50%);width:3px;height:3px;opacity:0;
  background:#E8C874;transform:rotate(45deg);box-shadow:0 0 5px rgba(232,200,116,.9)}
.candil .mota:nth-of-type(1){--mx:16%;--dx:-8px;--dy:-2.3em}
.candil .mota:nth-of-type(2){--mx:44%;--dx:3px;--dy:-2.9em}
.candil .mota:nth-of-type(3){--mx:70%;--dx:9px;--dy:-2.1em}
.candil .mota:nth-of-type(4){--mx:90%;--dx:-2px;--dy:-2.6em}
.candil.chispa .mota{animation:mota 1.6s cubic-bezier(.2,.6,.3,1) both}
.candil.chispa .mota:nth-of-type(2){animation-delay:.08s}
.candil.chispa .mota:nth-of-type(3){animation-delay:.2s}
.candil.chispa .mota:nth-of-type(4){animation-delay:.32s}
@keyframes mota{
  0%{opacity:0;transform:translate(0,0) rotate(45deg) scale(.5)}
  18%{opacity:1}
  100%{opacity:0;transform:translate(var(--dx),var(--dy)) rotate(45deg) scale(.15)}}

html[data-animaciones="0"] .candil .halo,html[data-animaciones="0"] .candil .luz,
html[data-animaciones="0"] .candil .filo::after{animation:none}
html[data-animaciones="0"] .candil .mota{display:none}

/* ═══════════ LAS FRASES CON ALMA · animaciones de palabra ═══════════ */
.fx{display:inline-block;position:relative;text-indent:0}
.fx .l{display:inline-block;white-space:pre}

/* destello · rayo, relámpago: la luz cruza la palabra letra a letra */
.fx-destello.activo .l{animation:fx-destello 1.3s ease-out both;animation-delay:calc(var(--i) * 34ms)}
@keyframes fx-destello{
  0%{color:inherit;text-shadow:none}
  14%{color:#FFF6D6;text-shadow:0 0 .2em #FFF1C0,0 0 .7em rgba(255,222,140,.95),0 0 1.4em rgba(255,210,120,.5)}
  38%{color:#B7822C;text-shadow:0 0 .4em rgba(236,188,92,.5)}
  100%{color:inherit;text-shadow:none}}

/* late · sangre, corazón: dos latidos y la tinta se enrojece */
.fx-late.activo{animation:fx-late 1.9s cubic-bezier(.3,0,.3,1) both}
@keyframes fx-late{
  0%,100%{transform:scale(1);color:inherit;text-shadow:none}
  10%{transform:scale(1.1);color:#6E1C11;text-shadow:0 0 .5em rgba(140,28,18,.35)}
  22%{transform:scale(.99)}
  34%{transform:scale(1.06);color:#6E1C11}
  60%{transform:scale(1);color:#5E2014;text-shadow:0 0 .3em rgba(140,28,18,.15)}}

/* tiembla · temblor, escalofrío: cada letra por su cuenta */
.fx-tiembla.activo .l{animation:fx-tiembla 1s linear both;animation-delay:calc(var(--i) * 16ms)}
@keyframes fx-tiembla{
  0%,100%{transform:none}
  10%{transform:translate(.6px,-.6px) rotate(-2deg)}
  20%{transform:translate(-.7px,.5px) rotate(1.6deg)}
  30%{transform:translate(.5px,.7px) rotate(-1deg)}
  40%{transform:translate(-.6px,-.4px) rotate(2deg)}
  50%{transform:translate(.4px,.3px) rotate(-1.4deg)}
  60%{transform:translate(-.3px,-.5px) rotate(.8deg)}
  75%{transform:translate(.2px,.2px)}}

/* susurro · silencio: las letras se apagan y vuelven, como un aliento */
.fx-susurro.activo .l{animation:fx-susurro 2.6s ease-in-out both;animation-delay:calc(var(--i) * 60ms)}
@keyframes fx-susurro{
  0%,100%{opacity:1;filter:blur(0);transform:none}
  45%{opacity:.16;filter:blur(1.3px);transform:translateY(-.1em)}}

/* brasa · fuego, llamas: la tinta se pone al rojo y parpadea */
.fx-brasa.activo .l{animation:fx-brasa 2.3s ease-in-out both;animation-delay:calc(var(--i) * 48ms)}
@keyframes fx-brasa{
  0%,100%{color:inherit;text-shadow:none}
  22%{color:#963B12;text-shadow:0 0 .3em rgba(230,120,40,.55)}
  40%{color:#C8742A;text-shadow:0 0 .6em rgba(244,154,62,.75),0 -.1em .9em rgba(244,154,62,.3)}
  58%{color:#8C3913;text-shadow:0 0 .25em rgba(220,110,40,.4)}
  74%{color:#B4602A;text-shadow:0 0 .45em rgba(236,140,60,.5)}}

/* sombra · oscuridad: la palabra se hunde en negro y la tinta se corre */
.fx-sombra.activo{animation:fx-sombra 2.8s ease-in-out both}
@keyframes fx-sombra{
  0%,100%{color:inherit;text-shadow:none}
  42%{color:#120A04;text-shadow:0 0 .35em rgba(18,10,2,.6),0 0 1.1em rgba(18,10,2,.35)}}

/* eco · grito: un fantasma de la palabra se expande y se pierde */
.fx-eco::after{content:attr(data-t);position:absolute;left:0;top:0;white-space:nowrap;opacity:0;pointer-events:none;
  transform-origin:30% 60%}
.fx-eco.activo::after{animation:fx-eco 1.7s ease-out both}
.fx-eco.activo{animation:fx-eco-base 1.7s ease-out both}
@keyframes fx-eco{0%{opacity:.6;transform:scale(1)}100%{opacity:0;transform:scale(1.9);filter:blur(1.5px)}}
@keyframes fx-eco-base{0%{transform:scale(1)}8%{transform:scale(1.07)}30%{transform:scale(1)}}

/* cae · cayó, se desplomó: las letras se vencen y se recomponen */
.fx-cae.activo .l{animation:fx-cae 1.4s cubic-bezier(.3,.6,.2,1) both;animation-delay:calc(var(--i) * 55ms)}
@keyframes fx-cae{0%,100%{transform:none;opacity:1}38%{transform:translateY(.26em) rotate(5deg);opacity:.55}}

/* tinta · pluma: la tinta se derrama un instante y se asienta */
.fx-tinta.activo .l{animation:fx-tinta 1.9s ease-out both;animation-delay:calc(var(--i) * 42ms)}
@keyframes fx-tinta{0%{filter:blur(0)}28%{filter:blur(.9px);color:#1B1108;text-shadow:0 0 .25em rgba(27,17,8,.5)}100%{filter:blur(0)}}

/* reloj · tictac: las letras marcan el compás */
.fx-reloj.activo .l:nth-child(odd){animation:fx-tic 1.6s steps(1) both}
.fx-reloj.activo .l:nth-child(even){animation:fx-tac 1.6s steps(1) both}
@keyframes fx-tic{0%,50%{transform:translateY(-.07em)}25%,75%,100%{transform:none}}
@keyframes fx-tac{25%,75%{transform:translateY(-.07em)}0%,50%,100%{transform:none}}

/* lluvia · gotas: las letras gotean una a una */
.fx-lluvia.activo .l{animation:fx-lluvia 1.7s ease-in both;animation-delay:calc(var(--i) * 85ms)}
@keyframes fx-lluvia{0%,100%{transform:none}30%{transform:translateY(.14em);color:#4B4A48;opacity:.7}}

html[data-animaciones="0"] .fx,html[data-animaciones="0"] .fx *,html[data-animaciones="0"] .fx::after{animation:none!important}

/* ═══════════ EL REPRODUCTOR ═══════════ */
#reproductor{position:fixed;left:0;right:0;margin-inline:auto;bottom:calc(12px + env(safe-area-inset-bottom));z-index:50;
  width:min(640px,calc(100% - 16px));display:grid;grid-template-columns:auto auto auto minmax(0,1fr) auto auto;
  align-items:center;gap:6px;padding:9px 12px 9px 8px;
  background:linear-gradient(180deg,rgba(22,17,13,.96),rgba(9,8,7,.98));
  box-shadow:0 0 0 1px rgba(201,163,95,.26),0 0 44px rgba(201,163,95,.07);animation:velo-sube .55s var(--curva) both}
#reproductor::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(232,200,116,.55) 30%,rgba(232,200,116,.55) 70%,transparent)}
.rombo{position:relative;width:50px;height:50px;display:grid;place-items:center;background:none;border:0;cursor:pointer;
  color:#1A1108;margin:0 4px}
.rombo::before{content:"";position:absolute;inset:9px;transform:rotate(45deg);
  background:linear-gradient(160deg,#F4E0A4 0%,#C9A35F 52%,#8C6736 100%);box-shadow:0 0 18px rgba(232,200,116,.32);
  transition:box-shadow .5s}
.rombo:hover::before{box-shadow:0 0 30px rgba(232,200,116,.62)}
.rombo svg{position:relative;width:13px;height:13px}
.rombo.sonando::after{content:"";position:absolute;inset:6px;transform:rotate(45deg);border:1px solid rgba(232,200,116,.55);
  animation:rombo-pulso 2.6s ease-out infinite}
@keyframes rombo-pulso{from{opacity:.9;transform:rotate(45deg) scale(.82)}to{opacity:0;transform:rotate(45deg) scale(1.34)}}
.salto{width:36px;height:36px;display:grid;place-items:center;background:none;border:0;color:var(--gold);cursor:pointer;
  transition:color .3s}
.salto:hover{color:var(--gold-hi)}
.salto svg{width:16px;height:16px}
.rep-donde{min-width:0;padding:0 6px}
.rep-donde .rotulo{font-size:8.5px;letter-spacing:.24em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rep-donde .tit{font-family:var(--f-susurro);font-style:italic;color:var(--ivory);font-size:15px;margin:3px 0 0;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rep-donde .avance{margin-top:6px}
.rep-donde .avance i{transition:width .5s linear}
@media (max-width:480px){#reproductor{grid-template-columns:auto auto auto minmax(0,1fr) auto}#reproductor .quita{display:none}}
@media (prefers-reduced-motion:reduce){.rombo.sonando::after{animation:none}}