/* ============================================================
   Livro Rotativo 3D — estilos do componente
   Tudo escopado em .livro-rotativo para não colidir com seu site.
   Personalize por CSS variables (veja abaixo).
   ============================================================ */

.livro-rotativo{
  /* --- dimensões do livro --- */
  --lr-w: 200px;   /* largura da capa  */
  --lr-h: 300px;   /* altura da capa   */
  --lr-d: 16px;    /* espessura (lombada) */
  --lr-tilt: 16deg;/* inclinação da "bandeja" 3D (também no JS via data-tilt) */
  --lr-perspective: 1200px;

  /* --- imagens das faces --- */
  --lr-front: url(images/frente.jpg);
  --lr-back:  url(images/fundo.jpg);
  --lr-spine: url(images/lateral.jpg);
  --lr-pages: #faf7f0;  /* corte/topo/base das páginas (cor ou url(...)) */

  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  perspective: var(--lr-perspective);
}

/* a "bandeja" onde as faces ficam no espaço 3D (origem = centro) */
.livro-rotativo .lr-holder{
  position: relative;
  width: 0;
  height: 0;
  transform-style: preserve-3d;
  transform: rotateX(var(--lr-tilt));  /* o JS assume daqui em diante */
  will-change: transform;
}

.livro-rotativo .lr-face{
  position: absolute;
  top: 0;
  left: 0;
  backface-visibility: hidden;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

/* --- faces com imagem --- */
.livro-rotativo .lr-front{
  width: var(--lr-w);
  height: var(--lr-h);
  background-image: var(--lr-front);
  transform: translate3d(calc(var(--lr-w) * -0.5), calc(var(--lr-h) * -0.5), 0)
             rotateY(0deg);
}
.livro-rotativo .lr-back{
  width: var(--lr-w);
  height: var(--lr-h);
  background-image: var(--lr-back);
  transform: translate3d(calc(var(--lr-w) * -0.5), calc(var(--lr-h) * -0.5), 0)
             translate3d(0, 0, calc(var(--lr-d) * -1))
             rotateY(180deg);
}
.livro-rotativo .lr-spine{ /* lombada (lateral esquerda) */
  width: var(--lr-d);
  height: var(--lr-h);
  background-image: var(--lr-spine);
  transform: translate3d(calc(var(--lr-w) * -0.5), calc(var(--lr-h) * -0.5), 0)
             translate3d(calc(var(--lr-d) * -0.5), 0, calc(var(--lr-d) * -0.5))
             rotateY(-90deg);
}

/* --- faces "páginas" (cor sólida ou imagem via --lr-pages) --- */
.livro-rotativo .lr-edge{
  background: var(--lr-pages);
}
.livro-rotativo .lr-edge-right{ /* corte das páginas (lateral direita) */
  width: var(--lr-d);
  height: var(--lr-h);
  transform: translate3d(calc(var(--lr-w) * -0.5), calc(var(--lr-h) * -0.5), 0)
             translate3d(calc(var(--lr-w) - var(--lr-d) * 0.5), 0, calc(var(--lr-d) * -0.5))
             rotateY(90deg);
}
.livro-rotativo .lr-top{
  width: var(--lr-w);
  height: var(--lr-d);
  transform: translate3d(calc(var(--lr-w) * -0.5), calc(var(--lr-h) * -0.5), 0)
             translate3d(0, calc(var(--lr-d) * -0.5), calc(var(--lr-d) * 0.5))
             rotateX(90deg);
}
.livro-rotativo .lr-bottom{
  width: var(--lr-w);
  height: var(--lr-d);
  transform: translate3d(calc(var(--lr-w) * -0.5), calc(var(--lr-h) * -0.5), 0)
             translate3d(0, calc(var(--lr-h) - var(--lr-d) * 0.5), calc(var(--lr-d) * -0.5))
             rotateX(-90deg);
}