/* ═══════════════════════════════════════════════════════════════
   MOTOR VISUAL · «Mira al cielo, mira a Jesús»
   Paleta MEDIDA del libro (kit gráfico + cubierta), no elegida a ojo:
   azul del título #7092AE · azul sobre claro #41657F · crema #F9EEDB
   rosa #F2C9BE · papel #F6E4C4 · tinta cálida #806651 · dorado #C9A961
   ═══════════════════════════════════════════════════════════════ */
:root{
  --azul:#7092AE; --azul-o:#41657F; --crema:#F9EEDB; --rosa:#F2C9BE;
  --papel:#F6E4C4; --tinta:#806651; --oro:#C9A961;
  --ui:"Poppins",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --ti:"Lobster","Poppins",cursive;
  --pad:max(16px, env(safe-area-inset-left));
  --sombra-texto:0 2px 5px rgba(70,45,20,.55), 0 0 18px rgba(70,45,20,.28);
}
/* ⚠️ `-webkit-touch-callout:none` NO es lo mismo que `user-select:none`.
   Sin ella, en el iPhone cualquier toque LARGO levanta la imagen que haya
   debajo y abre «Copiar / Compartir / Guardar» — y el abrazo del reto 2 es
   justo un toque largo, así que en vez del corazón salía la escena del libro
   como si se fuera a guardar. (iPhone 15 Pro Max, 1-sep-2026.) */
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;
  -webkit-touch-callout:none}
html,body{height:100%}
body{
  margin:0;font-family:var(--ui);color:var(--tinta);
  background:var(--papel) url("../kit/papel.webp") repeat;
  background-size:420px;
  -webkit-user-select:none;user-select:none;overflow:hidden;
}
.app{position:relative;height:100dvh;overflow:hidden}

/* las pantallas NO usan visibility: se congela con la pestaña oculta
   y deja el hit-testing en un estado que no corresponde a lo que se ve */
.screen{
  position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;
  opacity:0;pointer-events:none;transition:opacity .5s ease
}
.screen.on{opacity:1;pointer-events:auto}

/* la ilustración manda: a sangre, sin marco ni sombra */
.sangre{position:absolute;inset:0;overflow:hidden;z-index:0}
.sangre img{width:100%;height:100%;object-fit:cover;display:block;
  /* decorativa: el dedo no debe alcanzarla nunca. Es la que iOS levantaba */
  pointer-events:none;-webkit-user-drag:none;user-select:none}
.capa{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;
  width:100%;height:100%;padding:calc(12px + env(safe-area-inset-top)) var(--pad) 16px}

/* narración: como en el libro, blanca y directa sobre el arte */
.narra{
  pointer-events:none;
  font-weight:800;font-size:clamp(15px,4.4vw,19px);line-height:1.32;color:#fff;
  text-shadow:var(--sombra-texto);text-align:center;margin:0;max-width:22em
}
.narra.oscura{color:var(--azul-o);text-shadow:0 1px 3px rgba(255,255,255,.9)}
.narra.chica{font-size:clamp(13px,3.8vw,16px)}

/* la cinta del libro, con el número ya dibujado en el arte */
.cinta{display:block;flex:none;width:min(78%,320px);height:auto;
  filter:drop-shadow(0 3px 5px rgba(70,45,20,.28))}

/* título curvo con contorno: la firma del libro */
.curvo{width:min(112%,660px);overflow:visible;
  /* flota: sube nueve píxeles y su sombra se aleja y se ablanda a la vez.
     Sin mover la sombra el título solo sube y baja, plano; con ella se lee
     como que se despega del papel. */
  animation:flotaTitulo 6.2s ease-in-out infinite; will-change:transform}
.curvo text{
  font-family:var(--ti);fill:var(--azul);stroke:#fff;stroke-width:9px;
  paint-order:stroke fill;stroke-linejoin:round;font-size:58px
}
@keyframes flotaTitulo{
  0%,100%{transform:translateY(0) rotate(-.4deg);
          filter:drop-shadow(0 5px 6px rgba(70,45,20,.45))}
  50%    {transform:translateY(-9px) rotate(.4deg);
          filter:drop-shadow(0 14px 13px rgba(70,45,20,.28))}
}

.btn{
  pointer-events:auto;
  font:inherit;font-weight:800;font-size:clamp(15px,4.3vw,17px);color:var(--tinta);
  border:0;cursor:pointer;background:url("../kit/papel-cinta.webp") center/100% 100% no-repeat;
  padding:24px 34px 20px;min-width:190px;transition:transform .12s;
  filter:drop-shadow(0 8px 14px rgba(70,45,20,.35))
}
.btn:active{transform:scale(.96) rotate(-.6deg)}
.btn.mini{font-size:13px;padding:18px 22px 15px;min-width:0;opacity:.9}

.pasos{display:flex;gap:9px;align-items:center;flex:none}
.pasos i{width:19px;height:19px;background:url("../kit/adorno-hoja.webp") center/contain no-repeat;
  opacity:.32;transition:opacity .5s,transform .5s}
.pasos i.done{opacity:1;transform:scale(1.16) rotate(-8deg)}
.barra{pointer-events:auto;width:100%;max-width:560px;display:flex;align-items:center;gap:10px;
  justify-content:center;position:relative;flex:none;margin-bottom:2px}
.snd{position:absolute;right:0;width:36px;height:36px;border:0;border-radius:50%;cursor:pointer;
  background:rgba(255,253,247,.82);font-size:16px;color:var(--tinta)}
.snd.off{opacity:.45}

/* ═════════ mecánica: OBJETIVOS (tocar puntos en la escena) ═════════ */
.tira{position:relative;width:calc(100% + 2 * var(--pad));margin:0 calc(-1 * var(--pad));
  overflow:hidden;touch-action:none;flex:none;
  box-shadow:0 12px 26px -18px rgba(70,45,20,.6)}
/* `transform-origin:0 0` para que el zoom del cine se calcule con aritmética
   simple (esquina superior izquierda). No cambia nada del arrastre de siempre:
   un `translate` no depende del origen. */
.lienzo{position:absolute;top:0;left:0;height:100%;will-change:transform;
  transform-origin:0 0}
.lienzo img{display:block;height:100%;width:auto;max-width:none;pointer-events:none}
.hit{position:absolute;transform:translate(-50%,-50%);border-radius:50%;pointer-events:none;
  display:grid;place-items:center}
/* ── al acertar: la persona SE ILUMINA y se queda así ──
   Regla de José (3-sep): fuera la estrella. Y el foco no es un destello: es
   la MARCA de que esa persona ya está tocada. Lo que brilla ya está hecho,
   lo apagado falta. Por eso `found` no se quita nunca.
   `backdrop-filter` aclara lo que hay DEBAJO (la persona de la ilustración),
   así que no hace falta tenerla recortada en su propia capa.
   La máscara radial difumina el borde: sin ella se ve un disco recortado
   en vez de luz. */
/* la estrella sigue viva en los retos de «busca y encuentra» (cap 1): ahí es
   el premio de haber encontrado algo. Solo desaparece donde hay foco. */
.hit .est{width:64%;height:64%;background:url("../kit/estrella.webp") center/contain no-repeat;
  opacity:0;transform:scale(.2) rotate(-40deg);
  transition:opacity .3s,transform .5s cubic-bezier(.2,1.6,.4,1);
  filter:drop-shadow(0 2px 6px rgba(70,45,20,.5))}
.hit.found .est{opacity:1;transform:none}
/* ⚠️ El foco NO va dentro del .hit: el punto de toque está en la CARA (para
   que el dedo acierte) y la luz tiene que cubrir el CUERPO ENTERO. Regla de
   José, 3-sep: «que se ilumine su cuerpo, no la cabeza». Por eso es un
   elemento propio del lienzo, con su elipse medida sobre la figura. */
.foco{position:absolute;transform:translate(-50%,-50%);border-radius:50%;
  pointer-events:none;z-index:2;
  -webkit-backdrop-filter:brightness(1.15) saturate(1.3) contrast(1.05);
  backdrop-filter:brightness(1.15) saturate(1.3) contrast(1.05);
  -webkit-mask-image:radial-gradient(circle,#000 40%,rgba(0,0,0,.55) 62%,transparent 76%);
  mask-image:radial-gradient(circle,#000 40%,rgba(0,0,0,.55) 62%,transparent 76%);
  opacity:0;transform:translate(-50%,-50%) scale(.82);
  transition:opacity .35s,transform .5s cubic-bezier(.2,1.5,.4,1)}
.foco.on{opacity:1;transform:translate(-50%,-50%) scale(1)}
/* el pulso del instante en que se acierta, para que se note el toque */
.hit.found .halo{opacity:1;animation:pulsoFoco .55s ease-out}
.hit.found:has(.est) .halo{animation:none}
@keyframes pulsoFoco{0%{transform:scale(.8);opacity:.95}100%{transform:scale(1.35);opacity:0}}
.hit .halo{position:absolute;inset:0;border-radius:50%;
  background:radial-gradient(rgba(255,247,220,.85),rgba(255,247,220,0) 66%);
  opacity:0}
/* ── (B) el resto de la escena se atenúa en cuanto hay un acierto ──
   Así el foco se lee aunque la pared del hospital sea casi blanca. */
.lienzo img{transition:filter .6s}
.lienzo.atenuado img{filter:brightness(.8) saturate(.88)}
/* ── la puerta: al tocarla, la luz se abre ── */
.hit.luz.found::after{content:"";position:absolute;left:50%;top:50%;width:340%;height:340%;
  transform:translate(-50%,-50%);border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(255,244,214,.9),rgba(255,240,200,.35) 42%,transparent 70%);
  mix-blend-mode:screen;animation:abrePuerta 2.6s ease-out forwards}
@keyframes abrePuerta{
  0%  {opacity:0;transform:translate(-50%,-50%) scale(.35)}
  35% {opacity:1}
  100%{opacity:.42;transform:translate(-50%,-50%) scale(1)}}
/* ══════════ EL CINE: la narración se cuenta sola ══════════
   Capítulo 2, tras tocar a los cinco. Decisión de Gadiel (8-sep-2026): ya no se
   busca a Jesús tocando tres sitios; la narradora lo cuenta y la escena se mueve.
   ⚠️ Esta sala es CASI BLANCA (paredes, sábanas, luz de día): un halo cálido
   encima no se ve. La luz se hace BAJANDO EL RESTO, como en el teatro. Medido
   sobre el arte real, es el mismo motivo por el que existe `.atenuado`. */
.lienzo.cine{transition:transform 1.25s cubic-bezier(.33,.7,.3,1)}
.lienzo.cine img{filter:brightness(.56) saturate(.94) contrast(1.03)}
/* ⭐ La luz sobre Layla NO es un velo blanco encima: es el MISMO recurso que ya
   usa `.foco` cuando se toca a alguien —bajar la sala y devolverle a ella su
   brillo con `backdrop-filter`— pero calibrado para el cine: la sala cae a .5,
   así que hay que multiplicar por ~2 para dejarla en su color natural. Pintarle
   blanco encima le borraba la cara; medido en pantalla el 8-sep. */
.foco.cine{-webkit-backdrop-filter:brightness(1.85) saturate(1.16) contrast(1.02);
  backdrop-filter:brightness(1.85) saturate(1.16) contrast(1.02);
  /* ⚠️ degradado LARGO y foco MÁS GRANDE QUE EL ENCUADRE: con la elipse ceñida
     a la figura se veía el borde y quedaba un huevo recortado en la pantalla.
     Los bordes tienen que caer fuera de cuadro para que se lea como penumbra. */
  -webkit-mask-image:radial-gradient(ellipse,#000 8%,rgba(0,0,0,.62) 34%,rgba(0,0,0,.22) 58%,transparent 76%);
  mask-image:radial-gradient(ellipse,#000 8%,rgba(0,0,0,.62) 34%,rgba(0,0,0,.22) 58%,transparent 76%);
  transition:opacity .9s ease,transform .9s cubic-bezier(.2,1.3,.4,1)}
/* el cono que baja. ⚠️ Dos cosas lo separan de un triángulo de cartón:
   la MÁSCARA (sin ella los lados del clip-path son líneas rectas nítidas y
   parece un foco de teatro recortado) y la OPACIDAD BAJA (a .6 el blanco se
   comía la cara de Layla en vez de iluminarla). Medido en pantalla el 8-sep. */
.cenital{position:absolute;pointer-events:none;z-index:3;
  transform:translateX(-50%) scaleY(.05);transform-origin:50% 0;opacity:0;
  background:linear-gradient(to bottom,
    rgba(255,249,236,0) 0%, rgba(255,247,228,.10) 28%,
    rgba(255,245,220,.26) 72%, rgba(255,243,214,.32) 100%);
  clip-path:polygon(36% 0, 64% 0, 104% 100%, -4% 100%);
  -webkit-mask-image:radial-gradient(ellipse 74% 118% at 50% -8%,
     #000 18%, rgba(0,0,0,.55) 54%, transparent 90%);
  mask-image:radial-gradient(ellipse 74% 118% at 50% -8%,
     #000 18%, rgba(0,0,0,.55) 54%, transparent 90%);
  mix-blend-mode:screen;
  transition:transform 1.15s cubic-bezier(.3,.75,.35,1), opacity .8s ease}
.lienzo.cine .cenital{transform:translateX(-50%) scaleY(1);opacity:1}
/* el charco a sus pies: sin él el haz se corta en seco contra el suelo */
.cenital::after{content:"";position:absolute;left:50%;bottom:-9%;width:104%;height:30%;
  transform:translateX(-50%);border-radius:50%;
  background:radial-gradient(ellipse,rgba(255,250,238,.42),rgba(255,246,224,.15) 48%,transparent 72%)}
@media (prefers-reduced-motion:reduce){
  .lienzo.cine{transition:transform .01s}
  .cenital{transition:opacity .5s}
  .lienzo.cine .cenital{transform:translateX(-50%) scaleY(1)}
}

/* ⚠️ El halo crema SOLO se ve sobre fondo oscuro. Medido sobre el arte real:
   contra el pelo o la ropa da 5-8:1 de contraste, pero contra la pared del
   hospital 1,11:1 y contra el cielo del cap 1 1,03:1 — invisible (lo legible
   empieza en 3:1). Por eso «no se entendía que había que tocar la puerta».
   El aro de DOS colores se ve sobre cualquier fondo: el blanco destaca contra
   lo oscuro y el azul del libro contra lo claro. */
.hit.pista .halo{opacity:.75;animation:latirPista 2.3s ease-in-out infinite;
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.8),
             inset 0 0 0 4px rgba(65,101,127,.62)}
.hit.pista.fuerte .halo{opacity:1;animation:latirPista 1.5s ease-in-out infinite;
  box-shadow:inset 0 0 0 3px rgba(255,255,255,.96),
             inset 0 0 0 6px rgba(65,101,127,.9),
             0 2px 9px rgba(40,30,20,.3)}
@keyframes latirPista{
  0%,100%{transform:scale(1);opacity:.88}
  50%    {transform:scale(1.13);opacity:1}}
@keyframes latir{0%,100%{transform:scale(1);opacity:.35}50%{transform:scale(1.18);opacity:.7}}
/* el «desliza» compite con la ilustración: sin una píldora detrás se pierde
   sobre los fondos claros del libro, que son casi todos */
.desliza{position:absolute;right:8px;bottom:8px;display:flex;align-items:center;gap:7px;
  padding:7px 13px 7px 10px;border-radius:999px;
  background:rgba(65,101,127,.82);backdrop-filter:blur(3px);
  box-shadow:0 2px 8px rgba(0,0,0,.22);
  font-size:15px;font-weight:800;color:#fff;letter-spacing:.01em;
  pointer-events:none;animation:nudge 1.9s ease-in-out infinite}
.desliza svg{width:30px;height:18px;flex:none;display:block}
@keyframes nudge{0%,100%{transform:translateX(0)}50%{transform:translateX(-10px)}}
.desliza.hide{display:none}
.miradas{position:absolute;inset:0;pointer-events:none;overflow:visible}
.miradas line{stroke:#fff3d0;stroke-width:1.4;stroke-linecap:round;opacity:0;
  filter:drop-shadow(0 0 3px rgba(255,240,190,.75));
  stroke-dasharray:var(--l);stroke-dashoffset:var(--l);
  transition:opacity .3s,stroke-dashoffset 1s ease}
.miradas.on line{opacity:.5;stroke-dashoffset:0}

.fichas{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:14px;max-width:560px}
.fichas div{
  background:#fdf6e4 url("../kit/papel.webp") center/180px repeat;
  padding:10px 14px;font-size:12.5px;font-weight:800;color:var(--tinta);
  border-radius:3px;box-shadow:0 3px 7px rgba(70,45,20,.2);
  transition:.35s;position:relative
}
.fichas div:nth-child(odd){transform:rotate(-1.4deg)}
.fichas div:nth-child(even){transform:rotate(1.1deg)}
.fichas div.ok{opacity:.42;text-decoration:line-through;text-decoration-thickness:2px}
/* la ficha del paso en curso: guía sin circular nada sobre la escena */
.fichas div.ahora{box-shadow:0 0 0 2.5px #41657f,0 3px 9px rgba(70,45,20,.28);
  animation:latirFicha 1.8s ease-in-out infinite}
@keyframes latirFicha{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-3px) rotate(0)}}

/* ═════════ mecánica: SECUENCIA (tocar en orden) ═════════ */
.flotal{position:absolute;inset:0;pointer-events:none;z-index:4}
.flota{pointer-events:auto;position:absolute;width:clamp(78px,23vw,110px);aspect-ratio:1/1;
  transform:translate(-50%,-50%);cursor:pointer;display:grid;place-items:center;z-index:3;
  filter:drop-shadow(0 7px 11px rgba(50,40,15,.4));animation:flotar 4.6s ease-in-out infinite}
.flota img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;pointer-events:none}
.flota span{position:relative;font-weight:800;font-size:clamp(12.5px,3.6vw,15px);color:#fffdf5;
  text-shadow:0 1px 3px rgba(25,45,15,.95);pointer-events:none;text-align:center}
.flota.ida{opacity:0;transform:translate(-50%,-280%) rotate(42deg) scale(.55);transition:.8s ease-in}
.flota.mal{animation:tiembla .42s}
@keyframes flotar{0%,100%{translate:0 0;rotate:-3deg}50%{translate:0 -12px;rotate:3deg}}
@keyframes tiembla{0%,100%{margin-left:0}25%{margin-left:-10px}75%{margin-left:10px}}
.dicho{pointer-events:none;width:min(90%,440px);flex:none;
  opacity:0;transform:translateY(10px);transition:opacity .6s ease,transform .7s ease}
.dicho.on{opacity:1;transform:none}
.dicho p{margin:0;font-size:clamp(17px,5.2vw,23px);font-weight:800;color:#fff;
  text-shadow:var(--sombra-texto);text-align:center;line-height:1.28}
.palabras{display:flex;gap:7px;flex-wrap:wrap;justify-content:center;min-height:30px;flex:none}
.palabras b{font-size:clamp(15px,4.4vw,19px);font-weight:800;color:#fff;text-shadow:var(--sombra-texto);
  animation:pop .4s cubic-bezier(.2,1.6,.4,1)}
@keyframes pop{from{opacity:0;transform:scale(.5) translateY(9px)}to{opacity:1;transform:none}}

/* ═════════ mecánica: FROTAR (descubrir bajo la niebla) ═════════ */
.velo{position:absolute;inset:0;overflow:hidden;z-index:1}
.velo>img.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  pointer-events:none;-webkit-user-drag:none}
/* el versículo va ARRIBA, en el cielo abierto: centrado verticalmente caía
   justo sobre la cara de Layla, que mira hacia arriba desde la izquierda */
.oculto{position:absolute;right:4.5%;top:19%;width:min(60%,330px);z-index:2}
.oculto p{margin:0;font-size:clamp(13.5px,3.9vw,16px);line-height:1.4;font-weight:700;
  color:var(--azul-o);text-shadow:0 1px 3px rgba(255,255,255,.95),0 0 12px rgba(255,255,255,.8)}
.oculto cite{display:block;margin-top:8px;font-style:normal;font-size:12px;font-weight:800;color:var(--tinta)}
canvas.niebla{position:absolute;inset:0;z-index:3;touch-action:none;cursor:grab}
canvas.niebla.listo{opacity:0;transition:opacity .9s;pointer-events:none}
.dedo{position:absolute;left:52%;top:29%;font-size:36px;z-index:4;pointer-events:none;
  filter:drop-shadow(0 3px 6px rgba(60,45,20,.45));animation:frota 2.2s ease-in-out infinite}
.dedo.off{opacity:0;transition:opacity .3s}
@keyframes frota{0%,100%{transform:translate(-12px,0) rotate(-7deg)}50%{transform:translate(46px,15px) rotate(7deg)}}

/* ═════════ mecánica: ACUMULAR (tocar y que crezca) ═════════ */
.crece{position:relative;flex:none;display:grid;place-items:center;pointer-events:auto;
  cursor:pointer;width:min(70%,300px);aspect-ratio:1/1;transition:transform .55s cubic-bezier(.2,1.5,.4,1)}
.crece .aura{position:absolute;inset:0;border-radius:50%;
  background:radial-gradient(rgba(255,247,220,.85),rgba(255,247,220,0) 66%);opacity:.55}
.crece .fig{position:relative;width:46%;height:46%;
  background:url("../kit/nube.webp") center/contain no-repeat;
  filter:drop-shadow(0 6px 14px rgba(70,45,20,.4))}
.crece .toca{position:absolute;bottom:6%;font-size:12px;font-weight:800;color:#fff;
  text-shadow:var(--sombra-texto);animation:latir2 2s ease-in-out infinite}
@keyframes latir2{0%,100%{opacity:.6}50%{opacity:1}}
.frases{display:flex;flex-direction:column;gap:8px;align-items:center;flex:none;min-height:76px;
  justify-content:center;width:100%;max-width:24em}
.frases b{font-size:clamp(14px,4.2vw,18px);font-weight:800;color:#fff;
  text-shadow:var(--sombra-texto);text-align:center;animation:pop .45s cubic-bezier(.2,1.6,.4,1)}


/* ═════════ mecánica: ABRAZO (mantener el dedo apretado) ═════════ */
.abrazo{position:relative;flex:none;display:grid;place-items:center;pointer-events:auto;
  cursor:pointer;width:min(66%,280px);aspect-ratio:1/1;touch-action:none;
  -webkit-touch-callout:none;-webkit-user-select:none;user-select:none;
  transition:transform .3s cubic-bezier(.2,1.5,.4,1)}
.abrazo.apretado{transform:scale(1.06)}
.abrazo .aro{position:absolute;inset:0;transform:rotate(-90deg)}
.abrazo .aro circle{fill:none;stroke-linecap:round}
.abrazo .pista{stroke:rgba(255,255,255,.35);stroke-width:7}
.abrazo .lleno{stroke:#F2C9BE;stroke-width:7;filter:drop-shadow(0 0 8px rgba(242,201,190,.9));
  transition:stroke-dashoffset .12s linear}
.abrazo .cora{position:relative;width:46%;height:46%;
  filter:drop-shadow(0 5px 12px rgba(70,45,20,.45));transition:transform .4s}
.abrazo.late .cora{animation:latido 1.15s ease-in-out infinite}
@keyframes latido{0%,100%{transform:scale(1)}22%{transform:scale(1.13)}44%{transform:scale(1)}}
.abrazo .toca{position:absolute;bottom:-2%;font-size:12.5px;font-weight:800;color:#fff;
  text-shadow:var(--sombra-texto);animation:latir2 2s ease-in-out infinite;pointer-events:none}
.abrazo.lleno-total .aro .lleno{stroke:#fff3d0}

/* ═════════ mecánica: KARAOKE (el versículo se enciende) ═════════ */
.karaoke{width:min(92%,470px);flex:none;text-align:center}
.karaoke p{margin:0;font-size:clamp(16px,4.8vw,21px);line-height:1.42;font-weight:800}
.karaoke w{display:inline-block;color:rgba(255,255,255,.34);transition:color .35s,text-shadow .35s;
  margin:0 .12em}
.karaoke w.on{color:#fff;text-shadow:var(--sombra-texto)}
.karaoke cite{display:block;margin-top:12px;font-style:normal;font-size:12.5px;font-weight:800;
  color:#fff;opacity:.9;text-shadow:var(--sombra-texto)}

/* ═════════ cierre ═════════ */
.cierre{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:15px;width:100%;max-width:520px;text-align:center;overflow-y:auto;padding:8px 0}
.nubecita{width:110px;aspect-ratio:420/300;background:url("../kit/nube.webp") center/contain no-repeat;
  animation:flotar 3.6s ease-in-out infinite;flex:none}
.aprendio{width:min(100%,440px);aspect-ratio:700/520;
  background:url("../kit/tarjeta-cinta.webp") center/100% 100% no-repeat;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:13% 15% 11%;flex:none;filter:drop-shadow(0 12px 20px rgba(70,45,20,.3))}
.aprendio .k{font-size:10.5px;letter-spacing:.17em;text-transform:uppercase;color:var(--oro);font-weight:800}
.aprendio .b{font-family:var(--ti);font-size:clamp(19px,5.4vw,25px);color:var(--azul);margin:7px 0 0;
  line-height:1.14;font-weight:400}
.oracion{font-size:13.5px;line-height:1.55;font-weight:600;color:var(--tinta);max-width:19em}
.oracion b{color:var(--azul-o)}
.pie{font-size:11px;color:rgba(128,102,77,.75);line-height:1.6;font-weight:600}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition-duration:.01ms!important}}

/* ═════════ la instrucción: entra grande y se deposita ═════════
   Mientras la narradora habla, el texto se lee sobre una capa de papel del
   libro. En cuanto ella calla, la capa se va y las letras VIAJAN hasta su
   sitio: se animan el ancho y el cuerpo, nunca la opacidad, porque con un
   fundido se veía el cambiazo entre el texto grande y el ya montado. */
/* ⚠️ z-index ALTO: esta capa es la que hace legible el texto grande de la
   entrada, y tiene que cubrir la mecánica que haya debajo. Con z-index 8 el
   rompecabezas del capítulo 3 (piezas en 10, guía en 40) la tapaba, y las letras
   blancas quedaban sobre la imagen clara, ilegibles (José, 9-sep). */
.instru-capa{position:absolute;inset:0;z-index:60;pointer-events:none;
  background:radial-gradient(120% 90% at 50% 45%,rgba(249,238,219,.93),rgba(246,228,196,.86));
  backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px)}
.instru-grande{position:fixed;z-index:61;margin:0;box-sizing:border-box;
  text-align:center;pointer-events:none;transform-origin:center center;
  font-weight:800;letter-spacing:-.015em;color:var(--azul-o);
  text-shadow:0 1px 2px rgba(255,255,255,.85)}

/* ═════════ el corazón de Layla (reto del hospital) ═════════
   Se encoge con cada mirada que va a parar al bebé y vuelve a llenarse con
   cada momento en que Jesús sí la vio. Es el hilo que enlaza este reto con el
   abrazo del siguiente. */
.corazon{position:absolute;left:10px;top:10px;z-index:4;pointer-events:none;
  display:flex;align-items:center;gap:9px;
  padding:7px 14px 7px 9px;border-radius:999px;
  background:rgba(255,255,255,.82);backdrop-filter:blur(3px);
  box-shadow:0 2px 10px rgba(80,60,40,.2)}
.cor-caja{position:relative;display:block;width:46px;height:42px;flex:none}
.cor-caja svg{position:absolute;inset:0;width:100%;height:100%;display:block}
/* el hueco marca el tamaño que TENÍA: sin esta referencia no se ve contra qué
   se encoge el corazón, y no se entendía qué estaba pasando */
.cor-hueco path{fill:none;stroke:#E0C3B8;stroke-width:1.7;stroke-dasharray:3.5 2.6;opacity:.85}
.cor-vivo{transform:scale(var(--v,1));transform-origin:center;
  transition:transform .7s cubic-bezier(.3,1.5,.4,1)}
.cor-vivo path{fill:var(--rosa);stroke:#D98C7A;stroke-width:1.4;transition:fill .7s ease}
.corazon.chico .cor-vivo path{fill:#E9D9D2;stroke:#D9BDB2}
.corazon.pulso{animation:latidoCor .55s ease}
@keyframes latidoCor{0%,100%{transform:scale(1)}38%{transform:scale(1.07)}}
.cor-txt{font-size:11.5px;font-weight:800;color:var(--tinta);
  letter-spacing:.01em;white-space:nowrap}
/* al pasar a la segunda tanda, las miradas de todos se apagan: ahora importa
   quién la mira a ELLA */
.miradas.apagadas line{opacity:.16;transition:opacity .8s ease}

/* ═════════ menú del cierre: orar o escuchar ═════════
   La oración ya no se lee sola en pantalla: la dice la narradora y el texto
   se enciende a su ritmo, como el versículo del karaoke. */
.menu2{display:flex;flex-direction:column;gap:10px;width:min(100%,360px);flex:none;
  transition:opacity .4s ease,transform .4s ease}
.menu2.lejos{opacity:0;pointer-events:none;transform:scale(.96)}

/* el hueco que deja el menú se llena con el emoji de lo que se está diciendo */
.emoji{flex:none;height:clamp(58px,17vw,86px);display:grid;place-items:center;
  font-size:clamp(46px,14vw,72px);line-height:1;opacity:0;pointer-events:none;
  filter:drop-shadow(0 4px 10px rgba(70,45,20,.22))}
/* la entrada es más corta que antes: ahora los emojis se relevan cada ~1 s y
   con la animación larga se quedaban a medio aparecer */
.emoji.pop{animation:emojiPop .7s cubic-bezier(.2,.9,.3,1.4) forwards}
/* el de cierre entra y se queda quieto: con la animación puesta temblaba */
.emoji.fijo{opacity:1;transform:none;animation:none;transition:opacity .4s ease}
@keyframes emojiPop{
  0%{opacity:0;transform:scale(.55) rotate(-10deg)}
  45%{opacity:1;transform:scale(1.12) rotate(3deg)}
  70%{transform:scale(.98) rotate(0)}
  100%{opacity:1;transform:scale(1)}}
/* sobre el papel del libro, una tarjeta de papel se funde con el fondo: la
   opción necesita su propio tono y un borde para leerse como algo pulsable */
.opcion{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;
  gap:1px 13px;align-items:center;text-align:left;
  padding:14px 18px;cursor:pointer;font:inherit;border-radius:16px;
  background:rgba(255,253,248,.94);border:1.5px solid rgba(201,169,97,.5);
  box-shadow:0 3px 10px rgba(80,60,40,.16);
  transition:transform .18s cubic-bezier(.2,1.5,.4,1),box-shadow .18s ease}
.opcion:active{transform:scale(.97)}
.opcion .ic{grid-row:1/3;font-size:26px;line-height:1}
.opcion b{font-size:clamp(15px,4.2vw,17px);font-weight:800;color:var(--azul-o);line-height:1.2}
.opcion i{font-style:normal;font-size:11.5px;font-weight:700;color:var(--tinta);opacity:.78}

/* la oración encendiéndose */
.ora{width:min(100%,430px);flex:none;max-height:0;opacity:0;overflow:hidden;
  transition:max-height .5s ease,opacity .45s ease}
.ora.on{max-height:340px;opacity:1}
.ora p{margin:0;font-size:clamp(16px,4.6vw,20px);line-height:1.5;font-weight:800;text-align:center}
.ora w{display:inline-block;color:rgba(128,102,81,.3);margin:0 .1em;
  transition:color .3s ease,transform .3s cubic-bezier(.2,1.6,.4,1)}
.ora w.on{color:var(--azul-o);transform:translateY(-1px)}

/* la canción sonando */
.tocando{display:none;align-items:center;gap:11px;flex:none;
  padding:10px 14px;border-radius:999px;background:rgba(255,255,255,.8);
  box-shadow:0 2px 9px rgba(80,60,40,.18)}
.tocando.on{display:flex}
.tocando b{font-size:13.5px;font-weight:800;color:var(--azul-o)}
.tocando .parar{border:0;background:var(--azul-o);color:#fff;font:inherit;font-weight:800;
  font-size:11.5px;padding:5px 12px;border-radius:999px;cursor:pointer}
.onda{display:flex;align-items:flex-end;gap:2.5px;height:16px}
.onda i{width:3px;background:var(--azul);border-radius:2px;animation:onda .9s ease-in-out infinite}
.onda i:nth-child(2){animation-delay:.15s}.onda i:nth-child(3){animation-delay:.3s}
.onda i:nth-child(4){animation-delay:.45s}
@keyframes onda{0%,100%{height:5px}50%{height:16px}}

/* ═════════ la letra de la canción ═════════
   Mientras suena, la tarjeta se aparta y la letra ocupa la pantalla: se
   enciende con los tiempos REALES de la grabación, no repartidos a ojo. */
.aprendio{transition:opacity .45s ease,transform .45s ease}
.aprendio.lejos{opacity:0;transform:scale(.95);pointer-events:none;
  position:absolute;left:-9999px}
.kar{width:min(100%,440px);flex:none;max-height:0;opacity:0;overflow-y:auto;
  transition:max-height .5s ease,opacity .45s ease;-webkit-overflow-scrolling:touch}
.kar.on{max-height:46dvh;opacity:1}
.kar p{margin:0;text-align:center;font-weight:800;
  font-size:clamp(17px,5vw,22px);line-height:1.62}
.kar w{display:inline-block;margin:0 .13em;color:rgba(128,102,81,.26);
  transition:color .25s ease,transform .35s cubic-bezier(.2,1.6,.4,1)}
.kar w.on{color:var(--azul-o);transform:translateY(-1.5px)}

/* ── la portada, viva ─────────────────────────────────────────────────────
   `.cover` reproduce lo que hace `object-fit:cover` pero como caja real, para
   que el aire de encima (luces, nubes) pueda situarse en % DE LA IMAGEN. El
   Ken Burns se aplica aquí, así que la luz se mueve pegada a la ilustración
   en vez de deslizarse por encima. */
.sangre .cover{
  position:absolute; left:50%; top:50%;
  width:100%; height:100%;          /* lo pisa el cálculo en JS de sangreViva */
  transform:translate(-50%,-50%);
  /* el acercamiento se ancla cerca del piso: centrado se comía los pies de
     Layla y de Papá, que es justo donde termina la composición. Lo que sobra
     y se puede recortar es la pared (o el cielo) de arriba. */
  transform-origin:50% 88%;
  animation:respira 30s ease-in-out infinite alternate;
  will-change:transform;
}
.sangre .cover > img{width:100%;height:100%;object-fit:cover;
  pointer-events:none;-webkit-user-drag:none}
@keyframes respira{
  from{transform:translate(-50%,-50%) scale(1)}
  to  {transform:translate(-50%,-50%) scale(1.05)}
}
.aire{position:absolute;inset:0;pointer-events:none;overflow:hidden}
/* el resplandor cálido de una puerta entreabierta: no parpadea, respira */
.aire .luz{
  position:absolute; aspect-ratio:1/1; transform:translate(-50%,-50%);
  background:radial-gradient(circle closest-side,
    var(--tono, rgba(255,206,132,.95)), rgba(255,206,132,0) 72%);
  mix-blend-mode:screen; opacity:var(--op);
  animation:palpita var(--d) ease-in-out infinite;
}
@keyframes palpita{
  0%,100%{opacity:calc(var(--op) * .62); transform:translate(-50%,-50%) scale(.94)}
  50%    {opacity:var(--op);              transform:translate(-50%,-50%) scale(1.06)}
}
/* nubes del kit del libro cruzando el cielo. Muy lentas y muy tenues: si se
   ven pasar, distraen del título; si no se ven, la escena está muerta */
.aire .nb{
  /* la nube del kit es CUADRADA (420x420): con un aspect-ratio apaisado,
     `contain` la encogía a la mitad del ancho de la caja y no se veía */
  position:absolute; left:0; aspect-ratio:1/1;
  background:url("../kit/nube.webp") center/contain no-repeat;
  opacity:0; animation:cruza var(--d) linear infinite;
}
@keyframes cruza{
  0%  {transform:translateX(-42%); opacity:0}
  10% {opacity:var(--op)}
  90% {opacity:var(--op)}
  100%{transform:translateX(calc(100vw + 12%)); opacity:0}
}
/* quien pidió menos movimiento en su teléfono, no lo recibe */
@media (prefers-reduced-motion: reduce){
  .sangre .cover{animation:none}
  .aire .luz{animation:none}
  .aire .nb{display:none}
}

/* el video de portada: entra cuando ya está entero, corre una vez y se va */
.cover .pelicula{
  position:absolute; left:0; top:0; width:100%; height:100%;
  object-fit:cover; opacity:0; transition:opacity .8s ease; z-index:1;
  pointer-events:none;
}
.cover .pelicula.on{opacity:1}
/* mientras se ve el video, las nubes y las luces de CSS se apartan: el clip
   ya trae las suyas y se verían dobles */
.cover.filmando .aire{opacity:0}
.aire{transition:opacity .8s ease}
@media (prefers-reduced-motion: reduce){ .cover .pelicula{display:none} }

/* ── el dedo en el iPhone ─────────────────────────────────────────────────
   Todo lo que se toca, se aprieta o se arrastra queda fuera del alcance del
   menú de iOS. La regla `*` de arriba ya lo cubre; esto es el cinturón sobre
   los tirantes, y deja explícito CUÁLES son los elementos que reciben dedo. */
.abrazo,.abrazo *,.crece,.crece *,.flota,.flota *,.hit,.hit *,
.btn,.opcion,.tira,.lienzo,.lienzo img,canvas.niebla,.corazon,.corazon *{
  -webkit-touch-callout:none;-webkit-user-select:none;user-select:none;
  -webkit-user-drag:none;
}
/* los SVG del corazón y de las miradas son adorno: el dedo va al contenedor */
.abrazo .cora,.abrazo .aro,.cor-caja svg,.miradas{pointer-events:none}


/* ══════════ ROMPECABEZAS · piezas con volumen, fuera del tablero ══════════
   ⚠️ CERO filtros de CSS aquí. Antes cada pieza era la imagen recortada con
   `clip-path` y la sombra puesta con `drop-shadow`, y ese filtro se recalculaba
   EN CADA CUADRO mientras el dedo arrastraba: eso era lo que se sentía pastoso
   (José, 9-sep). Ahora el contorno, el canto y la sombra vienen HORNEADOS en la
   imagen de cada pieza, y el navegador solo mueve un `transform`. */
.puzzle{position:relative;margin:0 auto;touch-action:none;
  -webkit-user-select:none;user-select:none}
.pz-tablero{position:absolute;top:0;border-radius:14px;
  background:rgba(249,238,219,.75);
  box-shadow:inset 0 0 0 2px rgba(128,102,81,.22)}
/* los huecos: su imagen ya trae la luz INVERTIDA (sombra arriba, luz abajo),
   que es lo que hace que se lean como agujeros y no como piezas apagadas */
.pz-hueco{position:absolute;background-size:100% 100%;background-repeat:no-repeat;
  transition:opacity .3s}
.pz-hueco.lleno{opacity:0}
.pz-hueco.cerca{animation:huecoCerca .6s ease-in-out infinite alternate}
@keyframes huecoCerca{from{opacity:1}to{opacity:.45}}
.pz-hueco.pista{animation:huecoCerca 1.5s ease-in-out infinite alternate}
/* las piezas: una imagen y su sombra.
   ⚠️ La sombra proyectada VUELVE al CSS (9-sep-2026). Horneada en el PNG se
   pintaba encima de la lengüeta de la vecina y el rompecabezas armado salía con
   manchones. Aquí solo la llevan las piezas SUELTAS: la que ya está en su hueco
   (`ok`) y las del «mira bien» quedan al ras, como en un rompecabezas de
   verdad. El canto y el abombado siguen horneados, que es de donde sale el
   volumen; esto es solo el despegue del tablero. */
.pz{position:absolute;background-size:100% 100%;background-repeat:no-repeat;
  will-change:transform;
  filter:drop-shadow(0 3px 4px rgba(70,45,20,.38));
  transition:transform .3s cubic-bezier(.3,1.1,.4,1)}
/* ⚠️ MIENTRAS EL DEDO LA LLEVA, NI UN FILTRO. La sombra es barata cuando la
   pieza está quieta, pero el arrastre es justo lo que José pidió que estuviera
   bien hecho, y aquí no se puede medir los cuadros por segundo con el panel
   oculto: ante la duda, el camino del arrastre queda EXACTAMENTE igual de
   pelado que la versión que ya iba fluida. El «la tienes tú» lo dice el
   crecimiento de la pieza, que es transform y va gratis en la GPU. */
.pz.viva{transition:none;filter:none}     /* pegada al dedo, sin retraso */
.pz.ok,.puzzle.mirando .pz{filter:none}
.pz.ok{pointer-events:none}
.pz.cae{transition:transform .4s cubic-bezier(.2,1.3,.35,1)}
/* ⚠️ la pista de la PIEZA no puede animar `transform`: le pisaría su posición.
   Va por opacidad, y el que late de verdad es su hueco. */
.pz.pista{animation:pulsoPz 1.6s ease-in-out infinite}
@keyframes pulsoPz{0%,100%{opacity:1}50%{opacity:.72}}
/* la guía, mientras se mira la imagen entera. Entra con un acercamiento
   lentísimo, que es el mismo recurso de la portada viva del libro: una imagen
   quieta se lee como una foto pegada. */
.pz-guia{position:absolute;inset:0;background-size:100% 100%;background-repeat:no-repeat;
  border-radius:14px;opacity:0;pointer-events:none;z-index:40;
  transform:scale(1);transition:opacity .45s}
/* ⚠️ El «mira bien» enseña la imagen YA ARMADA CON SUS PIEZAS, no una foto
   plana: se ven los cantos, las juntas y las sombras, y así el niño entiende de
   un vistazo que eso es un rompecabezas, antes de que nadie se lo diga (José,
   9-sep: «cuando aparece la imagen del rompecabezas al principio se ve como una
   imagen ahí sin chiste»). La guía lisa se reserva para el ojito, que es cuando
   de verdad hace falta verla sin costuras. */
@keyframes respiraGuia{from{transform:scale(1)}to{transform:scale(1.05)}}
.puzzle.guiando .pz-guia{opacity:1;animation:respiraGuia 7s ease-out forwards}
/* ⚠️ AL COMPLETARLO, las piezas se funden en la imagen LIMPIA. Armado, cada
   pieza sigue enseñando su canto y su abombado —que es lo que la hace parecer
   un juguete—, pero eso mismo deja el dibujo con relieve por todas partes, y el
   premio de terminar es ver la ilustración entera, sin junturas. La guía ya está
   cargada desde el principio, así que este remate no cuesta un solo byte. */
.puzzle.resuelto .pz-guia{opacity:1}
.puzzle.resuelto .pz{opacity:0}
.puzzle.mirando .pz,.puzzle.desarmando .pz{opacity:1}
.pz{opacity:1;transition:transform .3s cubic-bezier(.3,1.1,.4,1), opacity .5s}
.pz.viva{transition:none}
.pz-pie{display:flex;align-items:center;justify-content:center;gap:10px;
  font:700 12px/1.4 Poppins,system-ui,sans-serif;letter-spacing:.06em;
  text-transform:uppercase;color:rgba(128,102,81,.8)}
.ojito{font:inherit;line-height:1.4;color:inherit;background:rgba(249,238,219,.92);border:0;
  padding:7px 14px;border-radius:999px;cursor:pointer;
  display:inline-flex;align-items:center;gap:6px;
  box-shadow:0 1px 4px rgba(70,45,20,.2)}
.ojito:active{transform:scale(.95)}
@media (prefers-reduced-motion:reduce){
  .pz{transition:none}
  .pz-hueco.cerca,.pz-hueco.pista{animation:none;opacity:.7}
}

/* ── el diálogo, debajo de la escena ──
   Texto sencillo con la raya de diálogo, en la tipografía del libro. Nada de
   globitos aquí: un globito bajo la imagen no apunta a nadie (José, 9-sep). */
.pz-dialogo{display:flex;flex-direction:column;align-items:center;gap:3px;width:100%}
.pz-dialogo.on{margin-top:10px}
.dlg-linea{margin:0;opacity:0;transform:translateY(6px);
  animation:entraDlg .5s ease-out forwards;
  font:700 17px/1.35 Poppins,system-ui,sans-serif;color:#41657f;
  text-shadow:0 1px 0 rgba(255,255,255,.55)}
.dlg-linea:nth-child(2){color:#806651}
@keyframes entraDlg{to{opacity:1;transform:translateY(0)}}
@media (prefers-reduced-motion:reduce){ .dlg-linea{animation:none;opacity:1;transform:none} }

/* ══════════ COLOREAR · la tarjeta del perdón (capítulo 4) ══════════
   ⚠️ El trazo del dibujo lleva `pointer-events:none` dentro del propio SVG:
   así el dedo siempre acierta a la ZONA y nunca a la raya, que es lo que
   convierte esto en algo que un niño de cuatro años no puede fallar. */
.color-hoja{width:min(100%,420px);margin:0 auto;border-radius:14px;overflow:hidden;
  background:#fffdf6;box-shadow:0 8px 22px rgba(70,45,20,.18);
  transform:rotate(-.6deg);transition:transform .8s cubic-bezier(.4,.1,.2,1),opacity .8s ease}
.color-hoja svg{display:block;width:100%;height:auto}
.color-hoja [data-zona]{transition:fill .26s ease;cursor:pointer}
/* al terminar, la tarjeta se inclina y se va: Layla se la lleva a su amigo */
.color-hoja.entregada{transform:rotate(-7deg) translate(26%,-14%) scale(.72);opacity:0}

.paleta{display:flex;justify-content:center;align-items:flex-end;gap:7px;flex-wrap:nowrap;
  padding:4px 0 2px;transition:opacity .5s ease}
.paleta.guardada{opacity:0;pointer-events:none}
/* ⚠️ 38 px con 9 de hueco suman 367 y a 375 de pantalla la fila se partía en
   dos, con un crayón solo abajo. 34 y 7 caben con margen hasta en 320. */
.crayon{width:34px;height:34px;border-radius:50%;border:0;padding:0;cursor:pointer;
  box-shadow:0 3px 0 rgba(70,45,20,.22), inset 0 -6px 10px rgba(0,0,0,.14),
             inset 0 6px 10px rgba(255,255,255,.35);
  transition:transform .18s cubic-bezier(.3,1.4,.5,1), box-shadow .18s ease}
.crayon.on{transform:translateY(-7px) scale(1.14);
  box-shadow:0 8px 12px rgba(70,45,20,.28), inset 0 -6px 10px rgba(0,0,0,.14),
             inset 0 6px 10px rgba(255,255,255,.45)}

.color-pie{min-height:44px;display:grid;place-items:center}
.color-listo{font:800 14px/1 Poppins,system-ui,sans-serif;letter-spacing:.04em;
  color:#5b4636;background:rgba(249,238,219,.96);border:0;border-radius:999px;
  padding:12px 26px;cursor:pointer;box-shadow:0 4px 14px rgba(70,45,20,.2);
  opacity:0;transform:translateY(8px);transition:opacity .4s ease,transform .4s ease}
.color-listo.dentro{opacity:1;transform:none}

/* ══════════ LA MIRADA · capítulo 4 ══════════
   Dos fotogramas de la misma escena, uno encima del otro. Solo se anima
   OPACIDAD, que va en la GPU: nada de filtros mientras el dedo arrastra. */
.mirada{touch-action:none;-webkit-user-select:none;user-select:none}
.mirada>img.bg.alta{opacity:0}
/* la pesadumbre: la escena empieza apagada y fría, y se calienta al levantar
   la mirada. Sobre arte claro no se pinta luz encima, se BAJA todo lo demás. */
.mirada-peso{position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(180deg,rgba(38,30,52,.34),rgba(38,30,52,.5));
  mix-blend-mode:multiply}
.mirada-tira{position:absolute;left:50%;top:60%;z-index:3;width:74px;height:74px;
  margin:-37px 0 0 0;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle at 50% 45%,rgba(255,252,240,.92),rgba(255,246,222,.16) 70%);
  box-shadow:0 0 0 3px rgba(255,255,255,.5);
  animation:tiraSube 1.9s ease-in-out infinite}
.mirada.agarrada .mirada-tira{animation:none}
@keyframes tiraSube{0%,100%{transform:translate3d(-50%,0,0)}50%{transform:translate3d(-50%,-13px,0)}}
.mirada.llegada .mirada-tira{opacity:0}
/* ⚠️ una cinta de luz arriba: la frase va sobre la ilustración a sangre y, con
   la escena apagada por el peso, se perdía. Va DESPUÉS del peso en el orden de
   pintado, así que aclara lo que el peso oscurece, solo donde está el texto. */
/* y la frase, con el resplandor que el álbum ya usa para el texto sobre arte
   (`.oculto`): sobre el pelo oscuro de Papá el azul solo no aguanta */
.mirada + .capa .narra,.conversa + .capa .narra{
  text-shadow:0 1px 3px rgba(255,255,255,.95), 0 0 14px rgba(255,248,232,.92)}
.mirada::after,.conversa::after{content:"";position:absolute;inset:0 0 auto 0;height:32%;z-index:2;
  pointer-events:none;
  background:linear-gradient(180deg,rgba(255,248,232,.86),rgba(255,248,232,.46) 46%,rgba(255,248,232,0))}

/* ══════════ SOSTENER · capítulo 5 ══════════
   El cuarto empieza frío y se calienta mientras el dedo se queda. Solo se anima
   OPACIDAD y el trazo del aro: nada que obligue a recalcular la página. */
.sostener{touch-action:none;-webkit-user-select:none;user-select:none}
.sost-peso{position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(180deg,rgba(20,26,54,.52),rgba(14,18,44,.66));
  mix-blend-mode:multiply}
.sost-aro{position:absolute;left:50%;top:70%;z-index:3;width:96px;height:96px;
  transform:translate(-50%,-50%);pointer-events:none;
  transition:transform .3s cubic-bezier(.3,1.3,.5,1)}
.sost-aro svg{width:100%;height:100%;transform:rotate(-90deg);overflow:visible}
.sost-aro circle{fill:none;stroke-width:6;stroke-linecap:round}
.sost-aro .pista{stroke:rgba(255,252,240,.30)}
.sost-aro .llena{stroke:rgba(255,246,214,.95);
  filter:drop-shadow(0 0 6px rgba(255,240,190,.85))}
.sostener.sosteniendo .sost-aro{transform:translate(-50%,-50%) scale(1.1)}
/* el aro respira para pedir el dedo; al agarrarlo deja de pedirlo */
.sost-aro::after{content:"";position:absolute;inset:-10px;border-radius:50%;
  box-shadow:0 0 0 0 rgba(255,246,214,.5);animation:aroLlama 2.1s ease-out infinite}
.sostener.sosteniendo .sost-aro::after,.sostener.llegada .sost-aro::after{animation:none}
@keyframes aroLlama{0%{box-shadow:0 0 0 0 rgba(255,246,214,.45)}
  70%{box-shadow:0 0 0 22px rgba(255,246,214,0)}100%{box-shadow:0 0 0 0 rgba(255,246,214,0)}}
.sostener.llegada .sost-aro{opacity:0;transition:opacity .6s ease}
.sostener + .capa .narra,.cielo + .capa .narra{
  text-shadow:0 1px 3px rgba(10,14,34,.9), 0 0 16px rgba(10,14,34,.8);
  color:#fdf6e6}
.sostener::after,.cielo::after{content:"";position:absolute;inset:0 0 auto 0;height:30%;z-index:2;
  pointer-events:none;
  background:linear-gradient(180deg,rgba(12,16,38,.62),rgba(12,16,38,.28) 50%,rgba(12,16,38,0))}

/* ══════════ LAS ESTRELLAS · capítulo 5 ══════════ */
.cielo{touch-action:manipulation;-webkit-user-select:none;user-select:none}
.estrella{position:absolute;z-index:3;width:46px;height:46px;margin:-23px 0 0 -23px;
  cursor:pointer;
  background:radial-gradient(circle at 50% 50%,rgba(255,252,235,.98),rgba(255,244,200,.55) 38%,rgba(255,238,170,0) 72%);
  animation:titila 2.6s ease-in-out infinite}
@keyframes titila{0%,100%{transform:scale(.82);opacity:.72}50%{transform:scale(1.06);opacity:1}}
.estrella.viva{animation:none;transform:scale(1.5);opacity:1;
  background:radial-gradient(circle at 50% 50%,rgba(255,255,250,1),rgba(255,246,205,.8) 34%,rgba(255,238,170,0) 74%);
  transition:transform .5s cubic-bezier(.2,1.4,.4,1),background .5s ease}

/* la mirada, mientras Papá habla: el asidero no existe todavía */
.mirada.espera .mirada-tira{opacity:0;animation:none;transition:opacity .4s ease}

/* ══════════ LA CONVERSACIÓN · capítulo 4 ══════════
   El blanco del toque es Layla entera, no un botón: a los cuatro años se toca a
   la persona. Un globito de diálogo encima dice «tiene algo que decir». */
.conversa{touch-action:manipulation;-webkit-user-select:none;user-select:none}
.conv-toque{position:absolute;z-index:3;transform:translate(-50%,-50%);border-radius:50%;
  cursor:pointer;transition:opacity .4s ease}
.conv-toque.espera{opacity:0;pointer-events:none}
/* ⚠️ el globito va junto a la cabeza de LAYLA, arriba a la derecha: centrado en
   el blanco caía en los dedos de Papá, que le acaricia el cabello, y parecía que
   el que iba a hablar era él (visto en pantalla el 10-sep). */
.conv-toque::before{content:"💬";position:absolute;left:84%;top:2%;font-size:36px;line-height:1;
  transform:translateX(-50%);filter:drop-shadow(0 3px 6px rgba(40,30,20,.3));
  animation:convBota 1.7s ease-in-out infinite}
@keyframes convBota{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,-9px)}}
.conv-toque.llama{animation:convLlama 1.8s ease-out infinite}
@keyframes convLlama{0%{box-shadow:0 0 0 0 rgba(255,246,214,.55)}
  70%{box-shadow:0 0 0 28px rgba(255,246,214,0)}100%{box-shadow:0 0 0 0 rgba(255,246,214,0)}}

/* ══════════ LA FOTO del final de colorear ══════════ */
.color-foto,.libro-foto{width:min(84%,330px);margin:0 auto;background:#fffdf6;padding:10px 10px 30px;
  border-radius:6px;box-shadow:0 12px 30px rgba(70,45,20,.28);
  transform:rotate(2.5deg) translateY(-22px) scale(.88);opacity:0;
  transition:transform .75s cubic-bezier(.2,1.25,.4,1),opacity .5s ease}
.color-foto.dentro,.libro-foto.dentro{transform:rotate(2.5deg);opacity:1}
.color-foto img,.libro-foto img{display:block;width:100%;height:auto;border-radius:3px}

/* ══════════ LA FOTO DEL LIBRO en cualquier pantalla ══════════
   Se aparta todo menos la barra, la frase y la foto; y sobre el fondo a sangre,
   un velo de papel para que la foto y la frase se lean sin pelear con el dibujo. */
.capa.con-foto > :not(.barra):not(.narra):not(.libro-foto){display:none !important}
/* con la foto a la vista NO hay letras: solo la voz (José, 10-sep: «cuando
   aparece la foto quítale las letras, solo narradora»). La barra se queda
   arriba, como en todas las pantallas, y la foto va sola al centro. */
.capa.con-foto > .narra{display:none !important}
.capa.con-foto > .libro-foto{margin-top:auto;margin-bottom:auto}
/* la escena del cap. 4 («Oraron juntos»): la imagen es toda la pantalla. La
   barra arriba, como en todas, y la imagen al centro sobre papel liso: nada
   detrás, que José pidió «solo la imagen» */
.screen.escena{background:#F9EEDB}
.escena .libro-foto{width:min(88%,360px);margin-top:auto;margin-bottom:auto}
.libro-velo{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:rgba(249,238,219,0);transition:background .6s ease}
.libro-velo.dentro{background:rgba(249,238,219,.8)}