* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  min-height: 100vh; color: #F3EEE3; font-family: "Arimo", system-ui, sans-serif;
  background: radial-gradient(120% 80% at 50% 0%, #1b5b50 0%, #0B302A 55%, #061a17 100%);
}
body::after {
  content: ""; position: fixed; inset: 0; pointer-events: none; opacity: .09; mix-blend-mode: overlay;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.b-topo { display: flex; align-items: center; justify-content: space-between; padding: 22px clamp(18px, 5vw, 64px); }
.b-topo img { height: 34px; }
.b-topo span { font: 600 11px "Titillium Web", sans-serif; letter-spacing: .3em; text-transform: uppercase; opacity: .7; }
.b-hero { text-align: center; padding: clamp(28px, 6vh, 64px) 20px 10px; }
.kicker { font: 700 12px "Titillium Web", sans-serif; letter-spacing: .36em; text-transform: uppercase; color: #DFA74E; }
.b-hero h1 { font: 700 clamp(38px, 6vw, 68px)/1 "Titillium Web", sans-serif; letter-spacing: -.02em; margin: 12px 0 14px; }
.b-hero .lead { max-width: 520px; margin: 0 auto; font-size: 16px; line-height: 1.6; opacity: .8; }

.estante { display: flex; justify-content: center; flex-wrap: wrap; gap: clamp(30px, 5vw, 70px); padding: clamp(40px, 8vh, 80px) 20px 70px; perspective: 1600px; }
.livro3d { width: 230px; text-decoration: none; color: inherit; opacity: 0; transform: translateY(30px);
  animation: entra .9s cubic-bezier(.2,.8,.2,1) forwards; animation-delay: calc(.15s + var(--i) * .15s); }
@keyframes entra { to { opacity: 1; transform: none; } }
.obj { position: relative; width: 230px; height: 326px; transform-style: preserve-3d; transform: rotateY(-26deg) rotateX(4deg);
  transition: transform .7s cubic-bezier(.2,.8,.2,1); }
.livro3d:hover .obj, .livro3d:focus-visible .obj { transform: rotateY(-8deg) rotateX(2deg) translateY(-10px); }
.frente { position: absolute; inset: 0; transform: translateZ(14px); border-radius: 2px 6px 6px 2px; overflow: hidden;
  box-shadow: inset 6px 0 10px -4px rgba(0,0,0,.45), 0 30px 50px rgba(0,0,0,.45); }
.frente::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, rgba(255,255,255,0) 40%, rgba(255,255,255,.14) 55%, rgba(255,255,255,0) 70%);
  transform: translateX(-60%); transition: transform 1s ease; }
.livro3d:hover .frente::after { transform: translateX(60%); }
.frente img { width: 100%; height: 100%; object-fit: cover; display: block; }
.miolo { position: absolute; top: 4px; bottom: 4px; right: 0; width: 28px; transform-origin: right; transform: rotateY(90deg) translateZ(0) translateX(14px);
  background: repeating-linear-gradient(90deg, #f3efe6 0 2px, #ddd6c7 2px 3px); }
.costas { position: absolute; inset: 0; transform: translateZ(-14px); background: var(--lombada); border-radius: 2px 6px 6px 2px; box-shadow: 0 20px 40px rgba(0,0,0,.5); }
.legenda { margin-top: 30px; display: grid; gap: 6px; }
.legenda small { font: 700 11px "Titillium Web", sans-serif; letter-spacing: .3em; color: #DFA74E; }
.legenda b { font: 700 21px/1.1 "Titillium Web", sans-serif; }
.legenda span { font-size: 13.5px; line-height: 1.5; opacity: .72; }
.legenda em { font: 600 13px "Titillium Web", sans-serif; font-style: normal; letter-spacing: .08em; color: #DFA74E; margin-top: 4px; transition: transform .3s ease; }
.livro3d:hover .legenda em { transform: translateX(4px); }
.b-pe { text-align: center; padding: 0 20px 34px; font: 600 11px "Titillium Web", sans-serif; letter-spacing: .26em; text-transform: uppercase; opacity: .55; }
@media (prefers-reduced-motion: reduce) { .livro3d { animation: none; opacity: 1; transform: none; } .obj { transition: none; } }
@media (max-width: 640px) { .b-topo span { display: none; } .b-topo img { height: 30px; } }