/* ==========================================================================
   Legis Libro — efectos "de libro de verdad" (se carga junto con libro.css)
   ========================================================================== */

/* la mesa: madera clara con veta sutil; en pantalla completa queda el fondo oscuro */
.lc-libro-escena.lc-libro-mesa {
  background-color: #e6d6bd;
  background-image:
    radial-gradient(ellipse at center, rgba(255, 255, 255, .35), rgba(255, 255, 255, 0) 70%),
    repeating-linear-gradient(90deg, rgba(120, 80, 40, .07) 0 2px, rgba(0, 0, 0, 0) 2px 11px),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .10) 0 1px, rgba(0, 0, 0, 0) 1px 29px),
    linear-gradient(180deg, rgba(0, 0, 0, .02), rgba(0, 0, 0, .10));
}
.lc-libro-marco.lc-libro-fijo .lc-libro-escena.lc-libro-mesa,
.lc-libro-marco:fullscreen .lc-libro-escena.lc-libro-mesa,
.lc-libro-marco.lc-libro-completo .lc-libro-escena.lc-libro-mesa {
  background-color: #1f2437;
  background-image:
    radial-gradient(ellipse at center, rgba(255, 255, 255, .09), rgba(255, 255, 255, 0) 70%),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .025) 0 2px, rgba(0, 0, 0, 0) 2px 11px);
}

/* el libro se apoya sobre la mesa al aparecer */
.lc-libro-libro { transform-origin: 50% 60%; will-change: transform; }
.lc-libro-libro.lc-libro-entrando { animation: lc-libro-aparecer .95s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes lc-libro-aparecer {
  0% { opacity: 0; transform: perspective(1600px) rotateX(18deg) rotateY(-16deg) scale(.9) translateY(28px); }
  60% { opacity: 1; }
  100% { opacity: 1; transform: perspective(1600px) rotateX(0) rotateY(0) scale(1) translateY(0); }
}

/* sombra sobre la mesa */
.lc-libro-sombra {
  position: absolute; left: 3%; right: 3%; bottom: -14px; height: 30px; z-index: 0; pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, .40), rgba(0, 0, 0, 0) 68%);
  filter: blur(5px);
}

/* cantos: las hojas que faltan leer (derecha) y las leídas (izquierda) */
.lc-libro-canto {
  position: absolute; top: 3px; bottom: 3px; width: 0; z-index: 0; pointer-events: none;
  background: repeating-linear-gradient(to right, #fbfbfb 0 1px, #d2d2d2 1px 2px);
  box-shadow: inset 0 0 5px rgba(0, 0, 0, .18);
  transition: width .45s ease, left .45s ease, right .45s ease, opacity .3s ease;
}
.lc-libro-canto-izq { border-radius: 3px 0 0 3px; transform-origin: right center; transform: skewY(-2deg); }
.lc-libro-canto-der { border-radius: 0 3px 3px 0; transform-origin: left center; transform: skewY(2deg); }

/* lomo: sombra en el medio del libro abierto */
.lc-libro-lomo {
  position: absolute; top: 0; bottom: 0; left: 46%; width: 8%; z-index: 40; pointer-events: none;
  background: linear-gradient(to right, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, .07) 42%, rgba(0, 0, 0, .16) 50%, rgba(0, 0, 0, .07) 58%, rgba(0, 0, 0, 0) 100%);
  transition: opacity .2s ease;
}

/* señalador: cinta colgando de la página */
.lc-libro-cinta {
  position: absolute; top: 0; right: 11%; width: 22px; height: 66px; z-index: 5; pointer-events: none;
  background: linear-gradient(90deg, #c33c46, #DA4A54 45%, #e8707a);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 80%, 0 100%);
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .35));
  animation: lc-libro-cinta-caer .5s cubic-bezier(.2, .9, .3, 1.2) both;
}
@keyframes lc-libro-cinta-caer { from { transform: translateY(-70px); } to { transform: translateY(0); } }

/* sello de capítulo leído */
.lc-libro-sello {
  position: absolute; inset: 0; z-index: 35; pointer-events: none;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  animation: lc-libro-sello-fundido .35s ease both;
}
.lc-libro-sello.lc-libro-sello-se-va { animation: lc-libro-sello-salir .6s ease both; }
.lc-libro-sello-circulo {
  width: 150px; height: 150px; border-radius: 50%; border: 6px double #DA4A54; color: #DA4A54;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, .92); box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
  transform: rotate(-12deg); animation: lc-libro-sellar .55s cubic-bezier(.2, 1.2, .3, 1) both;
}
.lc-libro-sello-circulo span { font-size: 44px; line-height: 1; color: #FFC507; text-shadow: 0 2px 0 rgba(0, 0, 0, .15); }
.lc-libro-sello-circulo b { font-family: var(--lcl-titulos, 'Nunito', sans-serif); font-weight: 900; font-size: 20px; letter-spacing: 2px; margin-top: 4px; }
.lc-libro-sello p { margin: 0; background: rgba(31, 36, 55, .92); color: #fff; padding: 8px 16px; border-radius: 20px; font-weight: 700; font-size: 15px; max-width: 80%; text-align: center; }
@keyframes lc-libro-sellar { 0% { transform: rotate(-30deg) scale(2.2); opacity: 0; } 60% { opacity: 1; } 100% { transform: rotate(-12deg) scale(1); opacity: 1; } }
@keyframes lc-libro-sello-fundido { from { opacity: 0; } to { opacity: 1; } }
@keyframes lc-libro-sello-salir { to { opacity: 0; transform: translateY(-20px); } }

/* confeti */
.lc-libro-confeti { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 45; pointer-events: none; }

/* pingüino escondido: asoma por abajo de la página */
.lc-libro-pinguino {
  position: absolute; left: 7%; bottom: -4px; width: 74px; height: 116px; z-index: 6;
  background: transparent !important; border: 0 !important; padding: 0 !important; box-shadow: none !important; min-height: 0 !important;
  cursor: pointer; transform: translateY(78%);
  animation: lc-libro-pinguino-asomar 7s ease-in-out infinite;
  transition: transform .4s ease;
}
.lc-libro-pinguino svg { width: 100%; height: 100%; display: block; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .3)); }
.lc-libro-pinguino:focus-visible { outline: 3px solid #4290FF; border-radius: 30px; }
@keyframes lc-libro-pinguino-asomar { 0%, 70%, 100% { transform: translateY(78%); } 78%, 92% { transform: translateY(34%); } }
.lc-libro-pinguino.lc-libro-pinguino-feliz { animation: none; transform: translateY(10%); }
.lc-libro-pinguino.lc-libro-pinguino-feliz .lc-ala-der { transform-origin: 50px 52px; animation: lc-libro-saludar .5s ease-in-out 3 alternate; }
/* cara con movimiento: sonríe, parpadea, se le colorean los cachetes y se le mueve el pompón */
.lc-libro-pinguino .lc-sonrisa { transform-origin: 30px 40px; animation: lc-libro-sonreir 2.6s ease-in-out infinite; }
.lc-libro-pinguino .lc-ojos { transform-origin: 30px 31px; animation: lc-libro-parpadear 4.2s ease-in-out infinite; }
.lc-libro-pinguino .lc-cachete { animation: lc-libro-cachetes 2.6s ease-in-out infinite; }
.lc-libro-pinguino .lc-pompon { transform-origin: 30px 14px; animation: lc-libro-pompon 2.6s ease-in-out infinite; }
@keyframes lc-libro-sonreir { 0%, 100% { transform: scale(1, 1); } 50% { transform: scale(1.22, 1.55); } }
@keyframes lc-libro-parpadear { 0%, 90%, 100% { transform: scaleY(1); } 94% { transform: scaleY(.12); } }
@keyframes lc-libro-cachetes { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
@keyframes lc-libro-pompon { 0%, 100% { transform: rotate(-8deg); } 50% { transform: rotate(8deg); } }
.lc-libro-pinguino.lc-libro-pinguino-salta { animation: lc-libro-saltar .9s ease-out; }
@keyframes lc-libro-saludar { from { transform: rotate(0); } to { transform: rotate(-70deg); } }
@keyframes lc-libro-saltar { 0% { transform: translateY(10%); } 35% { transform: translateY(-40%) rotate(-8deg); } 70% { transform: translateY(10%); } 85% { transform: translateY(-10%); } 100% { transform: translateY(10%); } }

/* enlaces del PDF (índice clickeable, direcciones) */
.lc-libro-enlace {
  position: absolute; z-index: 4; display: block; border-radius: 4px;
  background: rgba(66, 144, 255, 0); transition: background .15s ease; cursor: pointer;
}
.lc-libro-enlace:hover, .lc-libro-enlace:focus-visible { background: rgba(66, 144, 255, .18); outline: 2px solid rgba(66, 144, 255, .5); }

/* karaoke: capa de texto invisible + marcas de frase y palabra */
.lc-libro-karaoke { position: absolute; inset: 0; z-index: 3; pointer-events: none; overflow: hidden; }
.lc-libro-karaoke .textLayer { position: absolute; inset: 0; overflow: hidden; line-height: 1; opacity: 0; transform-origin: 0 0; }
.lc-libro-karaoke .textLayer { --min-font-size: 1; --text-scale-factor: calc(var(--total-scale-factor) * var(--min-font-size)); --min-font-size-inv: calc(1 / var(--min-font-size)); }
.lc-libro-karaoke .textLayer span, .lc-libro-karaoke .textLayer br { color: transparent; position: absolute; white-space: pre; transform-origin: 0 0; }
.lc-libro-karaoke .textLayer span { --font-height: 0; --scale-x: 1; --rotate: 0deg; font-size: calc(var(--text-scale-factor) * var(--font-height)); transform: rotate(var(--rotate)) scaleX(var(--scale-x)) scale(var(--min-font-size-inv)); }
.lc-libro-karaoke-marcas { position: absolute; inset: 0; }
.lc-libro-marca { position: absolute; border-radius: 3px; mix-blend-mode: multiply; }
.lc-libro-marca-frase { background: rgba(255, 230, 90, .45); }
.lc-libro-marca-palabra { background: rgba(255, 150, 40, .6); transition: left .08s linear, width .08s linear; }

/* celular */
@media (max-width: 700px) {
  .lc-libro-sello-circulo { width: 120px; height: 120px; }
  .lc-libro-cinta { width: 16px; height: 50px; }
  .lc-libro-pinguino { width: 56px; height: 88px; }
}