/*
 * estante.css — A ESTANTE EEMC (eemcgo/estante.html).
 *
 * Carrega DEPOIS de go.css: as cores, a fonte, o cabeçalho, os botões e o
 * modal (.det-*) vêm de lá, intactos. Aqui mora só o que é da estante:
 *
 *   1. O MÓVEL. Uma estante inteira em 3D (`perspective` na biblioteca,
 *      `preserve-3d` no móvel): laterais de madeira, fundo, e cada tábua com
 *      a face da frente e o tampo deitado para dentro. A câmera (o
 *      `perspective-origin`) acompanha a rolagem e o mouse (estante.js), e
 *      é isso que faz o móvel parecer um objeto, e não uma pintura.
 *
 *   2. O LIVRO. Uma CAIXA de seis faces — capa, contracapa, lombada, corte
 *      das páginas, topo e base. Em repouso ele fica DE LADO, com a lombada
 *      para quem olha, como numa biblioteca de verdade (correção do dono,
 *      21/09/2026: "eles estão de lado, mostrando só a lombada, assim cabe
 *      muito mais livros"). A lombada é mais grossa que a de um livro comum,
 *      para o nome ler bem. No hover o livro sai da prateleira, vira de
 *      frente e mostra a capa.
 *
 *   3. O LIVRO NO MODAL. O topo 16:9 do modal do GO recebe a própria capa
 *      desfocada como fundo e a capa em pé por cima. Livro é retrato, curso
 *      é paisagem — é a única adaptação que o modal precisou.
 *
 * As medidas de cada livro (--h altura, --e espessura, --inc inclinação,
 * --cor da lombada) vêm inline, do JavaScript, a partir dos dados: assim a
 * estante tem a variação de uma estante de verdade sem uma regra por livro.
 */

body.pagina-estante { background: radial-gradient(1200px 600px at 50% -10%, #17212d 0%, var(--fundo) 60%); }

/* ── Topo ─────────────────────────────────────────────────────────────────── */

.estante { max-width: 1440px; margin: 0 auto; padding: 96px 28px 60px; }
.estante-topo { text-align: center; margin-bottom: 26px; }
.estante-selo {
  margin: 0 0 8px; color: var(--marca);
  font: 800 12px/1 'Inter', sans-serif; letter-spacing: .18em; text-transform: uppercase;
}
.estante-topo h1 {
  margin: 0; font: 700 clamp(40px, 6vw, 68px)/1 'Cormorant Garamond', Georgia, serif;
  letter-spacing: -.01em;
}
.estante-frase { margin: 12px 0 0; color: var(--texto-2); font-size: clamp(16px, 1.6vw, 19px); }

/* ── Controles: busca, categorias, idade ──────────────────────────────────── */

.estante-controles { display: grid; gap: 14px; margin: 0 auto 34px; max-width: 1180px; }
.busca { position: relative; display: block; margin: 0 auto; width: min(560px, 100%); }
.busca-icone {
  position: absolute; left: 18px; top: 50%; width: 18px; height: 18px; transform: translateY(-50%);
  background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%237d8899'%3E%3Cpath d='M15.5 14h-.8l-.3-.3a6.5 6.5 0 1 0-.7.7l.3.3v.8l5 5 1.5-1.5-5-5zm-6 0A4.5 4.5 0 1 1 14 9.5 4.5 4.5 0 0 1 9.5 14z'/%3E%3C/svg%3E");
  pointer-events: none;
}
.busca input {
  width: 100%; padding: 14px 18px 14px 48px;
  border: 1px solid var(--borda); border-radius: 999px;
  background: #ffffff0f; color: #fff; font: 600 16px 'Inter', sans-serif;
  outline: none; transition: border-color .15s, background .15s;
}
.busca input::placeholder { color: var(--texto-3); font-weight: 500; }
.busca input:focus-visible { border-color: var(--marca); background: #ffffff16; }

.filtros { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 18px; }
.chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.filtros-dir { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; }
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px; border: 1px solid var(--borda); border-radius: 999px;
  background: #ffffff0a; color: var(--texto-2);
  font: 700 13.5px 'Inter', sans-serif; cursor: pointer;
  transition: background .15s, color .15s, border-color .15s, transform .12s;
}
.chip:hover { background: #ffffff18; color: #fff; }
.chip:active { transform: scale(.97); }
.chip[aria-pressed="true"] { background: var(--marca); border-color: var(--marca); color: #001e3e; }
.chip:focus-visible { outline: 3px solid var(--marca); outline-offset: 2px; }
.chip .chip-cor { width: 9px; height: 9px; border-radius: 50%; background: var(--c, #fff); }
.chip[aria-pressed="true"] .chip-cor { background: #001e3e66; }
.seletor {
  padding: 8px 34px 8px 14px; border: 1px solid var(--borda); border-radius: 999px;
  background: #ffffff0a url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23b3bcc9'%3E%3Cpath d='M7.4 8.6 12 13.2l4.6-4.6L18 10l-6 6-6-6z'/%3E%3C/svg%3E") no-repeat right 10px center / 18px;
  color: var(--texto-2); font: 700 13.5px 'Inter', sans-serif; cursor: pointer;
  appearance: none; -webkit-appearance: none;
}
.seletor:focus-visible { outline: 3px solid var(--marca); }
.seletor.ativo { background-color: var(--marca); color: #001e3e; border-color: var(--marca); }

/* ── A biblioteca: a câmera ───────────────────────────────────────────────── */

.biblioteca {
  /* A câmera. O ponto de fuga (--px, --py) acompanha a rolagem e o mouse
     pelo estante.js: olhando uma prateleira de cima, vê-se o tampo dela;
     olhando de baixo, o forro. É o que faz o móvel ter volume. */
  --px: 50%; --py: 50%;
  --fundo-prof: 150px;          /* a profundidade do móvel */
  perspective: 1300px; perspective-origin: var(--px) var(--py);
  padding: 4px 0 30px;
}

/* O móvel: um só, com todas as prateleiras dentro. */
.movel {
  position: relative;
  transform-style: preserve-3d;
  padding: 26px 0 0;
  margin: 0 14px;
}
/* As laterais de madeira, viradas para dentro. */
.movel::before, .movel::after {
  content: ''; position: absolute; top: 0; bottom: 0; width: var(--fundo-prof);
  background: linear-gradient(90deg, #2d1c11 0%, #4a3120 45%, #3a2517 100%);
  box-shadow: inset 0 0 40px #0008;
}
.movel::before { left: 0; transform-origin: left center; transform: rotateY(90deg); }
.movel::after  { right: 0; transform-origin: right center; transform: rotateY(-90deg); }
/* O fundo do móvel, lá atrás. */
.movel-fundo {
  position: absolute; inset: 0; z-index: -1;
  transform: translateZ(calc(var(--fundo-prof) * -1));
  background:
    radial-gradient(80% 60% at 50% 0%, #00caff12 0%, #0000 60%),
    linear-gradient(180deg, #14100c 0%, #0d0a07 100%);
  box-shadow: inset 0 0 120px #000;
}
/* O topo do móvel: a tábua de cima, fechando o armário. */
.movel-topo {
  position: absolute; left: 0; right: 0; top: 0; height: var(--fundo-prof);
  transform-origin: top center; transform: rotateX(-90deg);
  background: linear-gradient(180deg, #1d130c 0%, #2a1b11 100%);
}

/* ── A prateleira ─────────────────────────────────────────────────────────── */

.prateleira {
  --tabua: 18px;                /* a espessura da tábua */
  --h-max: 200px;
  position: relative;
  transform-style: preserve-3d;
  padding: 0 22px;
  opacity: 0; transition: opacity .5s ease;
}
.prateleira.visivel { opacity: 1; }

/* A etiqueta da prateleira, na parede do fundo, acima dos livros. */
.prateleira-topo {
  position: relative;
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  margin: 0 0 10px; padding: 26px 8px 0;
  transform: translateZ(calc(var(--fundo-prof) * -1 + 2px));
}
.prateleira-topo h2 {
  margin: 0; font: 800 17px/1.2 'Inter', sans-serif; letter-spacing: .01em; color: #f3ead9;
  text-shadow: 0 2px 10px #000;
}
.prateleira-topo h2 .icone-cat { margin-right: 8px; font-size: 16px; }
.prateleira-topo small { color: #b8a992; font-size: 12.5px; font-weight: 600; }

/* A luz embutida no alto de cada vão, no ciano da marca bem diluído. */
.prateleira::before {
  content: ''; position: absolute; left: 6%; right: 6%; top: 0; height: 120px; pointer-events: none;
  transform: translateZ(calc(var(--fundo-prof) * -1 + 1px));
  background: radial-gradient(60% 100% at 50% 0%, #00caff2a 0%, #0000 70%);
}
.prateleira.destaque::before { background: radial-gradient(60% 100% at 50% 0%, #00caff55 0%, #0000 70%); }

.livros {
  position: relative; z-index: 1;
  display: flex; align-items: flex-end; gap: 3px;
  padding: 0 6px;
  min-height: calc(var(--h-max) + 8px);
  transform-style: preserve-3d;
  /* SEM overflow no computador, de propósito: um contêiner de rolagem aqui
     engolia a roda do mouse e deslocava os livros para cima da tábua. Quantos
     livros cabem por prateleira quem decide é o estante.js, pela largura. */
  overflow: visible;
}

/* A tábua: a face da frente e o tampo deitado para dentro. */
.tabua {
  position: relative; height: var(--tabua); margin: 0 -22px;
  transform-style: preserve-3d;
  background: linear-gradient(180deg, #7a583a 0%, #55391f 30%, #3a2517 100%);
  box-shadow: 0 8px 18px #000a;
}
.tabua::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: var(--fundo-prof);
  /* -90 e não 90: com origem no alto, é o sinal negativo que manda a borda
     de baixo para DENTRO do móvel (para longe de quem olha). */
  transform-origin: top center; transform: rotateX(-90deg);
  background:
    repeating-linear-gradient(90deg, #0000 0 60px, #00000010 60px 62px),
    linear-gradient(180deg, #a07a55 0%, #7d5a3b 40%, #5a3d27 100%);
}
/* A sombra que os livros deixam no tampo. */
.tabua::after {
  content: ''; position: absolute; left: 3%; right: 3%; top: 0; height: 60px; pointer-events: none;
  transform-origin: top center; transform: rotateX(-90deg) translateZ(1px);
  background: linear-gradient(180deg, #0000 0%, #00000066 100%);
}
/* A plaquinha com o nome da prateleira, na face da frente da tábua. */
.tabua-plaqueta {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) translateZ(1px);
  padding: 2px 10px; border-radius: 3px;
  background: linear-gradient(180deg, #e8d9b8, #c9b48c); color: #3a2517;
  font: 800 9.5px/1.5 'Inter', sans-serif; letter-spacing: .12em; text-transform: uppercase;
  box-shadow: 0 1px 3px #0008, inset 0 1px 0 #fff8; white-space: nowrap;
}

/* ── O livro ──────────────────────────────────────────────────────────────── */

.livro {
  /* Medidas de cada exemplar; o JavaScript escreve as quatro inline. */
  --h: 180px; --e: 44px; --inc: 0deg; --cor: #3a6ea5;
  --w: calc(var(--h) * .68);
  position: relative; flex: 0 0 auto;
  /* De lado, o livro ocupa na fileira só a própria espessura. */
  width: var(--e);
  height: var(--h);
  border: 0; padding: 0; margin: 0; background: none; color: #fff;
  cursor: pointer;
  transform-style: preserve-3d;
  -webkit-tap-highlight-color: transparent;
}
.livro:focus-visible { outline: none; }
.livro:focus-visible .face-lombada { outline: 3px solid var(--marca); outline-offset: 3px; }

.livro-3d {
  position: absolute; left: calc(50% - var(--w) / 2); bottom: 0;
  width: var(--w); height: var(--h);
  transform-style: preserve-3d;
  transform-origin: 50% 100%;
  /* Empurrado para dentro do vão e virado de lado: a lombada fica a 8px do
     bordo da tábua, como quem alinhou os livros com a mão. */
  transform: translateZ(calc(var(--w) / -2 - 8px)) rotateY(90deg) rotateZ(var(--inc));
  transition: transform .6s cubic-bezier(.2, .8, .2, 1);
  will-change: transform;
}
.livro-face {
  position: absolute; left: 0; top: 0; width: 100%; height: 100%;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  border-radius: 2px;
}
.face-capa {
  transform: translateZ(calc(var(--e) / 2));
  background: linear-gradient(160deg, color-mix(in srgb, var(--cor) 80%, #fff 20%), var(--cor) 55%, color-mix(in srgb, var(--cor) 70%, #000 30%));
  border-radius: 2px 5px 5px 2px; overflow: hidden;
  box-shadow: inset 6px 0 10px -6px #0008, 0 0 0 1px #00000033;
}
/* `cover` só até a largura acompanhar a imagem; depois disso nada é cortado. */
.face-capa img { width: 100%; height: 100%; object-fit: cover; display: block; }
.face-capa img.erro, .face-capa img[hidden] { display: none; }
/* A capa reserva, para livro sem imagem: o título tipografado sobre a cor. */
.capa-reserva {
  position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end;
  padding: 10px; text-align: left;
  background: linear-gradient(180deg, #ffffff10 0%, #0000 40%, #00000055 100%);
}
.capa-reserva b { font: 800 clamp(11px, calc(var(--h) * .075), 16px)/1.15 'Inter', sans-serif; letter-spacing: -.01em;
  text-shadow: 0 1px 6px #0009; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.capa-reserva small { margin-top: 4px; font-size: 10px; color: #ffffffc8; font-weight: 600; }
.capa-reserva .selo-eemc { position: absolute; top: 8px; left: 10px; font: 800 8.5px/1 'Inter', sans-serif; letter-spacing: .14em; color: #ffffffb0; }

.face-tras {
  transform: rotateY(180deg) translateZ(calc(var(--e) / 2));
  background: color-mix(in srgb, var(--cor) 60%, #000 40%);
}
/* A LOMBADA: o que se vê em repouso. Título de cima para baixo, autor
   miúdo, uma faixa em cada ponta, e a luz vindo de cima à esquerda. */
.face-lombada {
  width: var(--e); left: calc(50% - var(--e) / 2);
  transform: rotateY(-90deg) translateZ(calc(var(--w) / 2));
  background:
    linear-gradient(90deg, #00000040 0%, #0000 18%, #ffffff14 50%, #0000 82%, #00000055 100%),
    var(--cor);
  border-radius: 3px 0 0 3px;
  box-shadow: inset 0 0 0 1px #0003;
  display: flex; flex-direction: column; align-items: center; justify-content: space-between;
  padding: 7px 0;
}
.face-lombada::before, .face-lombada::after {
  content: ''; flex: 0 0 auto; width: calc(100% - 10px); height: 3px; border-radius: 2px;
  background: #ffffff55; box-shadow: 0 5px 0 #ffffff33;
}
.face-lombada .lombada-texto {
  flex: 1 1 auto; min-height: 0; display: flex; align-items: center; justify-content: center; gap: 2px;
  writing-mode: vertical-rl;
  max-height: calc(var(--h) - 34px); overflow: hidden;
}
.face-lombada b {
  display: block; max-height: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: #fff; font: 800 clamp(10.5px, calc(var(--e) * .27), 14px) 'Inter', sans-serif; letter-spacing: 0;
  text-shadow: 0 1px 2px #0009;
}
.face-lombada small {
  display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: #ffffffb8; font: 600 clamp(8.5px, calc(var(--e) * .19), 10.5px) 'Inter', sans-serif;
}
.face-borda {
  width: var(--e); left: calc(50% - var(--e) / 2);
  transform: rotateY(90deg) translateZ(calc(var(--w) / 2));
  background: repeating-linear-gradient(180deg, #f1e9d6 0 1px, #d9cfb8 1px 2px);
  border-radius: 0 2px 2px 0;
}
.face-topo {
  height: var(--e); top: calc(50% - var(--e) / 2);
  transform: rotateX(90deg) translateZ(calc(var(--h) / 2));
  background: repeating-linear-gradient(90deg, #efe6d2 0 1px, #d7cdb6 1px 2px);
}
.face-base {
  height: var(--e); top: calc(50% - var(--e) / 2);
  transform: rotateX(-90deg) translateZ(calc(var(--h) / 2));
  background: #c9bfa8;
}

/* O selo de "Escolha da EEMC" na capa, discreto. */
.livro-selo {
  position: absolute; top: 8px; left: 8px; z-index: 2;
  padding: 4px 7px; border-radius: 4px;
  background: var(--marca); color: #001e3e; font: 800 9px/1 'Inter', sans-serif; letter-spacing: .08em; text-transform: uppercase;
  transform: translateZ(calc(var(--e) / 2 + 1px));
}
.livro-selo.novo { background: var(--aviso); color: #062d15; }
/* Na lombada, o mesmo selo vira um pontinho de luz no alto. */
.lombada-selo {
  position: absolute; top: 5px; left: 50%; transform: translateX(-50%);
  width: 7px; height: 7px; border-radius: 50%; background: var(--marca);
  box-shadow: 0 0 8px var(--marca);
}
.lombada-selo.novo { background: var(--aviso); box-shadow: 0 0 8px var(--aviso); }

/* HOVER: o livro sai da prateleira, vira de frente e sobe; os vizinhos
   afastam-se um pouco, como quando se tira um livro da estante. */
@media (hover: hover) and (pointer: fine) {
  .livro:hover, .livro:focus-visible { z-index: 5; }
  .livro:hover .livro-3d, .livro:focus-visible .livro-3d {
    transform: translateZ(70px) translateY(-18px) rotateY(0deg) rotateZ(0deg);
  }
  .livro:hover + .livro .livro-3d { transform: translateZ(calc(var(--w) / -2 - 8px)) translateX(14px) rotateY(90deg) rotateZ(var(--inc)); }
  .livro:has(+ .livro:hover) .livro-3d { transform: translateZ(calc(var(--w) / -2 - 8px)) translateX(-14px) rotateY(90deg) rotateZ(var(--inc)); }
}
/* No toque não há hover: o livro sai por um instante e abre (ver estante.js). */
.livro.tocado { z-index: 5; }
.livro.tocado .livro-3d { transform: translateZ(50px) translateY(-12px) rotateY(0deg) rotateZ(0deg); }

/* O nome que aparece embaixo do livro em hover, para a mãe ler sem clicar. */
.livro-nome {
  position: absolute; left: 50%; top: calc(100% + 30px); transform: translateX(-50%) translateY(-6px) translateZ(80px);
  min-width: 140px; max-width: 220px; padding: 7px 10px; border-radius: 6px;
  background: #1c2430; color: #fff; font: 700 12.5px/1.3 'Inter', sans-serif; text-align: center;
  box-shadow: 0 8px 22px #000a; opacity: 0; pointer-events: none;
  transition: opacity .2s ease .15s, transform .25s ease .15s; z-index: 6;
}
.livro-nome small { display: block; color: var(--texto-3); font-weight: 600; font-size: 11px; }
@media (hover: hover) and (pointer: fine) {
  .livro:hover .livro-nome, .livro:focus-visible .livro-nome { opacity: 1; transform: translateX(-50%) translateZ(80px); }
}
@media (hover: none) { .livro-nome { display: none; } }

/* A faixa e o selo da prévia: só o dono os vê, porque só ele recebe rascunho. */
.estante-previa-aviso {
  position: sticky; top: 64px; z-index: 20;
  margin: -20px auto 24px; max-width: 760px; padding: 10px 16px; border-radius: 999px;
  background: #ffb02e; color: #2a1a00; font: 700 13px/1.4 'Inter', sans-serif; text-align: center;
  box-shadow: 0 8px 24px #0008;
}
.livro-selo.previa { background: #ffb02e; color: #2a1a00; }
.det-selo.previa { color: #ffb02e; }

/* ── Estados ──────────────────────────────────────────────────────────────── */

.estante-carregando, .estante-vazia {
  display: grid; place-items: center; gap: 14px;
  padding: 70px 20px; text-align: center; color: var(--texto-2);
}
.estante-vazia h2 { margin: 0; font: 700 30px/1.15 'Cormorant Garamond', Georgia, serif; color: #fff; }
.estante-vazia p { margin: 0; max-width: 440px; }
.estante-vazia .btn { margin-top: 6px; }
.estante-livro-vazio {
  width: 54px; height: 76px; border-radius: 2px 5px 5px 2px;
  background: linear-gradient(160deg, #2b3a4d, #172433);
  box-shadow: inset 6px 0 10px -6px #0008, 0 14px 24px #0008;
  animation: livro-respira 1.6s ease-in-out infinite;
}
@keyframes livro-respira { 50% { transform: translateY(-8px) rotateY(18deg); } }
.estante-erro { color: var(--texto-2); }

.estante-transparencia {
  max-width: 720px; margin: 54px auto 0; text-align: center;
  color: var(--texto-3); font-size: 12.5px; line-height: 1.5;
}

/* ── O livro dentro do modal do GO ────────────────────────────────────────── */

/* Com o modal aberto, os livros ficam chapados. Não é enfeite: em 3D com
   translateZ, o Chrome compõe os livros por profundidade e eles atravessavam o
   modal fixo, mesmo com z-index maior (visto em 21/09/2026). */
/* Achatar não bastou: as faces giradas do móvel continuavam aparecendo por
   cima. Com o modal aberto a estante some de vez (o véu escuro do modal já
   cobre a página), e o navegador ainda descansa da cena 3D enquanto a pessoa lê. */
body.det-trava .biblioteca { visibility: hidden; }

.det-livro .det-topo { background: #0a0e14; }
.det-livro .det-arte { filter: blur(30px) saturate(1.25) brightness(.55); transform: scale(1.25); }
.det-livro .det-topo-conteudo {
  left: 48px; right: 48px; bottom: 40px;
  /* max-content, e não auto: com auto a largura em % da capa virava zero
     (percentual cíclico na medição da coluna) e o título atravessava a capa. */
  display: grid; grid-template-columns: max-content minmax(0, 1fr); align-items: end; gap: 30px;
}
.det-livro-capa {
  /* Altura fixa e largura livre: a capa aparece inteira, na proporção dela
     (quadrada, alta, o que for). Sem imagem, vale a proporção 2:3. */
  height: clamp(180px, 33vw, 285px); width: auto; max-width: 285px;
  border-radius: 3px 8px 8px 3px; overflow: hidden;
  background: linear-gradient(160deg, #143c55, #0a2548);
  box-shadow: 0 24px 50px #000c, inset 6px 0 10px -6px #0008;
  transform: rotateY(-10deg); transform-origin: right center;
  animation: livro-entra .5s cubic-bezier(.2, .7, .2, 1);
}
@keyframes livro-entra { from { opacity: 0; transform: rotateY(-40deg) translateX(-20px); } }
.det-livro-capa img { width: auto; height: 100%; max-width: 100%; object-fit: contain; display: block; }
.det-livro-capa.sem-capa { aspect-ratio: 2 / 3; }
.det-livro-capa .capa-reserva b { font-size: 16px; }
.det-livro .det-nome { margin-bottom: 6px; font-size: clamp(24px, 3.4vw, 38px); }
.det-livro-autor { margin: 0 0 16px; color: #e8edf3; font-size: 16px; font-weight: 600; text-shadow: 0 2px 12px #000c; }
.det-livro .det-botoes .btn-primario svg { margin-left: -4px; }
.det-livro .btn[aria-disabled="true"] { opacity: .55; cursor: default; }

.det-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.det-tag { padding: 4px 10px; border-radius: 999px; background: #ffffff14; color: #e8edf3; font: 600 13px 'Inter', sans-serif; }
.det-tag.cat::before { content: ''; display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; background: var(--c, #fff); vertical-align: 1px; }

.det-recomendacao {
  position: relative; margin: 0; padding: 22px 26px 22px 60px;
  border-radius: 10px;
  background: #ffffff0a; color: #e8edf3; font-size: 16px; line-height: 1.6;
}
.det-recomendacao::before {
  content: '“'; position: absolute; left: 18px; top: 8px;
  font: 700 54px/1 'Cormorant Garamond', Georgia, serif; color: var(--marca);
}
.det-recomendacao footer { margin-top: 10px; color: var(--texto-3); font-size: 13px; font-weight: 700; }

.det-aprende { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }
.det-aprende li {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 12px 14px; border-radius: 8px; background: #262d37; color: #e8edf3; font-size: 14.5px; line-height: 1.4;
}
.det-aprende li svg { flex: 0 0 auto; margin-top: 1px; color: var(--aviso); }

.det-outro-livro .det-outro-img { aspect-ratio: auto; height: 190px; overflow: hidden; display: grid; place-items: center; padding: 16px; background: #1c2430; }
.det-outro-livro .det-outro-img img { width: auto; max-width: 100%; height: 158px; object-fit: contain; border-radius: 2px 5px 5px 2px; box-shadow: 0 12px 24px #000a; }
.det-outro-livro .det-outro-img .capa-reserva { position: relative; width: 105px; height: 158px; border-radius: 2px 5px 5px 2px; background: var(--cor, #3a6ea5); }

.det-livro .det-rodape-compra { margin-top: 28px; display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }

@media (max-width: 700px) {
  .estante { padding: 84px 10px 40px; }
  .biblioteca { perspective: 1000px; --fundo-prof: 80px; }
  .det-livro .det-botoes .btn-primario small { display: none; }
  .movel { margin: 0 6px; }
  .prateleira { padding: 0 10px; }
  .prateleira-topo { padding-top: 18px; }
  .prateleira-topo h2 { font-size: 15px; }
  .tabua { margin: 0 -10px; }
  /* No celular a prateleira rola de lado, como um dedo passando pelas lombadas. */
  .livros { gap: 2px; padding: 0 4px; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; scroll-snap-type: x proximity; }
  .livros::-webkit-scrollbar { display: none; }
  .livro { scroll-snap-align: start; }
  .det-livro .det-topo { aspect-ratio: 4 / 3; }
  .det-livro .det-topo-conteudo { left: 18px; right: 18px; bottom: 20px; grid-template-columns: max-content minmax(0, 1fr); gap: 16px; }
  .det-livro-capa { height: 156px; }
  .det-livro .det-nome { font-size: 20px; }
  .det-livro-autor { font-size: 14px; margin-bottom: 12px; }
  .det-livro .det-botoes { flex-wrap: wrap; }
  .det-livro .det-botoes .btn { padding: 10px 18px; font-size: 14.5px; }
  .det-recomendacao { padding: 18px 16px 18px 44px; font-size: 15px; }
  .det-recomendacao::before { left: 10px; font-size: 44px; }
}

/* Movimento reduzido: sem giro nem avanço. O livro só ganha luz. */
@media (prefers-reduced-motion: reduce) {
  .prateleira { opacity: 1; transition: none; }
  .livro-3d, .livro-nome, .det-livro-capa { transition: none; animation: none; }
  .livro:hover .livro-3d, .livro:focus-visible .livro-3d, .livro.tocado .livro-3d,
  .livro:hover + .livro .livro-3d, .livro:has(+ .livro:hover) .livro-3d {
    transform: translateZ(calc(var(--w) / -2 - 8px)) rotateY(90deg) rotateZ(var(--inc));
  }
  .livro:hover .face-lombada, .livro:focus-visible .face-lombada { filter: brightness(1.25); }
  .estante-livro-vazio { animation: none; }
}