/* Libro con pasta de color y título (inspirado en el componente «Book»). Lo usan el sitio de material y el panel.
   Tamaño: ocupa el ancho de su contenedor; el texto escala con él (unidades cqw). */
.libro { position: relative; display: block; width: 100%; container-type: inline-size; perspective: 900px; }
.libro-3d { position: relative; display: block; aspect-ratio: 49 / 60; transform-style: preserve-3d; transition: transform .28s ease; --g: 9cqw; }
.libro-frente {
  position: absolute; inset: 0; display: flex; flex-direction: column; overflow: hidden;
  border-radius: 1.6cqw 1cqw 1cqw 1.6cqw;
  background: var(--pasta, #274b3f); color: var(--tinta, #fff);
  box-shadow: 0 1px 1px rgba(0, 0, 0, .04), 0 6px 10px -6px rgba(0, 0, 0, .35), 0 22px 28px -14px rgba(0, 0, 0, .35), inset 0 1px 2px rgba(255, 255, 255, .3);
  transform: translateZ(0);
}
.libro-lomo {
  position: absolute; inset: 0 auto 0 0; width: 8.2%; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,0) 12%, rgba(255,255,255,.25) 29.25%, rgba(255,255,255,0) 50.5%, rgba(255,255,255,0) 75.25%, rgba(255,255,255,.25) 91%, rgba(255,255,255,0)),
    linear-gradient(90deg, rgba(0,0,0,.03), rgba(0,0,0,.1) 12%, rgba(0,0,0,0) 30%, rgba(0,0,0,.02) 50%, rgba(0,0,0,.2) 73.5%, rgba(0,0,0,.5) 75.25%, rgba(0,0,0,.15) 85.25%, rgba(0,0,0,0));
}
.libro-textura {
  position: absolute; inset: 0; pointer-events: none; opacity: .32; mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    linear-gradient(160deg, rgba(255,255,255,.18), rgba(255,255,255,0) 40%, rgba(0,0,0,.12));
}
.libro-texto { position: relative; display: flex; flex-direction: column; gap: 4cqw; padding: 10cqw 8cqw 0 15cqw; min-height: 0; }
.libro-titulo {
  font-weight: 800; font-size: 11cqw; line-height: 1.08; letter-spacing: -.02em; text-wrap: balance; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 6; line-clamp: 6; overflow: hidden;
}
.libro-sub { font-size: 6.4cqw; line-height: 1.25; opacity: .82; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
.libro-marca { position: relative; margin-top: auto; padding: 0 8cqw 8cqw 15cqw; font-weight: 800; font-size: 7.5cqw; letter-spacing: -.02em; line-height: 1; opacity: .9; }
.libro-marca i { font-style: normal; font-weight: 400; vertical-align: .55em; font-size: .8em; margin-left: .05em; }
.libro-paginas {
  position: absolute; left: 0; top: 1.4cqw; height: calc(100% - 2.8cqw); width: var(--g);
  background: linear-gradient(90deg, #e9e5dc, rgba(255,255,255,0) 70%), repeating-linear-gradient(0deg, #fff 0 1px, #f1eee7 1px 2px);
  transform: translateX(calc(100cqw - var(--g) / 2 - 1cqw)) rotateY(90deg) translateX(calc(var(--g) / 2));
}
.libro-trasera { position: absolute; inset: 0; border-radius: 1.6cqw 1cqw 1cqw 1.6cqw; background: var(--pasta, #274b3f); filter: brightness(.7); transform: translateZ(calc(-1 * var(--g))); }
a:hover .libro-3d, a:focus-visible .libro-3d { transform: rotateY(-22deg) translateX(-2cqw); }
@media (prefers-reduced-motion: reduce) { .libro-3d { transition: none; } a:hover .libro-3d, a:focus-visible .libro-3d { transform: none; } }

.pasta-274b3f { --pasta: #274b3f; --tinta: #eef3ef; }
.pasta-9d2127 { --pasta: #9d2127; --tinta: #f5e6dc; }
.pasta-5e2f1c { --pasta: #5e2f1c; --tinta: #f8eedd; }
.pasta-2f3f6e { --pasta: #2f3f6e; --tinta: #e7ecf7; }
.pasta-1c1d1b { --pasta: #1c1d1b; --tinta: #f3f3f0; }
.pasta-7dc1c1 { --pasta: #7dc1c1; --tinta: #10302f; }
.pasta-fed954 { --pasta: #fed954; --tinta: #5a2a04; }
.pasta-e9c3a0 { --pasta: #e9c3a0; --tinta: #3b2114; }
.pasta-c9d8d0 { --pasta: #c9d8d0; --tinta: #1b372e; }