/*
 * La biblioteca oculta (page-el-archivo.php, coc-biblioteca.js). Books as objects: a pure-CSS 3D book (cover, spine
 * made of the cover's own left edge, page block, back) on a lit shelf, then one section per book. They turn in as you
 * scroll (native scroll-driven animation), lean towards the pointer and open their cover a little on hover.
 * Two rooms, one set of tokens: light is a reading room by day (paper, ink, an oak shelf under warm lamplight),
 * body.dark-mode is the candlelit library at night.
 */
.coc-lib {
    --lib-ink: #141417;
    --lib-text: rgba(20, 20, 23, .86);
    --lib-muted: rgba(20, 20, 23, .62);
    --lib-desc: var(--lib-text);
    --lib-line: rgba(20, 20, 23, .12);
    --lib-amber: #8f5410; /* amber as text: 6:1 on white */
    --lib-underline: #d08a1e;
    --lib-focus: #141417;
    --lib-btn-line: rgba(20, 20, 23, .5); /* 3.5:1 on white */
    --lib-btn-bg: #141417;
    --lib-btn-fg: #fff;
    --lib-btn-hover: #8f5410;
    /* Oak board lit from above and the shadow it casts on the wall, lamplight on the paper behind the shelf and under
       the big books, and a warm contact shadow where a dark pool would only look like dirt on white. */
    --lib-board: linear-gradient(180deg, #e3cfac, #c4a275 70%, #a9875a);
    --lib-board-shadow: 0 1px 0 rgba(255, 255, 255, .6) inset, 0 -1px 0 rgba(84, 56, 22, .22) inset, 0 16px 26px -14px rgba(84, 56, 22, .4);
    --lib-glow: radial-gradient(60% 100% at 50% 100%, rgba(242, 180, 90, .2), rgba(246, 244, 239, .5) 45%, transparent 72%);
    --lib-contact: radial-gradient(closest-side, rgba(70, 44, 14, .42), rgba(70, 44, 14, .1) 70%, transparent);
    --lib-pool: radial-gradient(closest-side, rgba(242, 180, 90, .22), rgba(242, 180, 90, .07) 62%, transparent);
    --lib-tip-bg: #fff;
    --lib-tip-shadow: 0 0 0 1px rgba(20, 20, 23, .12), 0 12px 26px -14px rgba(70, 44, 14, .45);
    color: var(--lib-text);
    padding-bottom: clamp(3rem, 8vw, 6rem);
}
body.dark-mode .coc-lib {
    --lib-ink: #fff;
    --lib-text: rgba(255, 255, 255, .8);
    --lib-muted: rgba(255, 255, 255, .66);
    --lib-desc: var(--lib-muted);
    --lib-line: rgba(255, 255, 255, .1);
    --lib-amber: #f2b45a;
    --lib-underline: rgba(242, 180, 90, .6);
    --lib-focus: #fff;
    --lib-btn-line: rgba(255, 255, 255, .45);
    --lib-btn-bg: #fff;
    --lib-btn-fg: #111;
    --lib-btn-hover: #fff;
    --lib-board: linear-gradient(180deg, #2a2520, #15120f);
    --lib-board-shadow: 0 -1px 0 rgba(255, 255, 255, .08) inset, 0 30px 60px -20px rgba(242, 180, 90, .25);
    --lib-glow: radial-gradient(60% 100% at 50% 100%, rgba(242, 180, 90, .14), transparent 70%);
    --lib-contact: radial-gradient(closest-side, rgba(0, 0, 0, .65), transparent);
    --lib-pool: none;
    --lib-tip-bg: rgba(16, 16, 20, .92);
    --lib-tip-shadow: none;
    color: #ececec;
}

/* ---------------------------------------------------------------- The 3D book */
.coc-book {
    --w: 280px;
    --t: 30px;
    position: relative;
    display: block;
    width: var(--w);
    aspect-ratio: 2 / 3;
    perspective: 1800px;
}
.coc-book--mini { --w: 128px; --t: 16px; }
.coc-book__float, .coc-book__obj { position: absolute; inset: 0; transform-style: preserve-3d; }
.coc-book__obj { transform: rotateY(var(--ry, -26deg)) rotateX(var(--rx, 3deg)); transition: transform .9s cubic-bezier(.2, .7, .2, 1); }
.coc-book__front, .coc-book__back, .coc-book__page { position: absolute; inset: 0; }
.coc-book__front {
    transform: translateZ(calc(var(--t) / 2));
    transform-origin: left center;
    overflow: hidden;
    border-radius: 2px 5px 5px 2px;
    background: #1c1a17;
    box-shadow: inset 6px 0 8px -4px rgba(0, 0, 0, .55);
    transition: transform .8s cubic-bezier(.2, .7, .2, 1);
}
.coc-book__front img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Light catching the laminated cover, and the hinge groove. */
.coc-book__front::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, rgba(0, 0, 0, .28) 0 3%, rgba(255, 255, 255, .08) 5%, transparent 22%, rgba(255, 255, 255, .1) 60%, transparent 75%); pointer-events: none; }
.coc-book__page { inset: 3px 3px 3px 0; transform: translateZ(calc(var(--t) / 2 - 1px)); border-radius: 0 3px 3px 0; background: linear-gradient(90deg, #d9d2c1, #f3eee3 12%); }
.coc-book__back { transform: rotateY(180deg) translateZ(calc(var(--t) / 2)); border-radius: 5px 2px 2px 5px; background: #191714; }
.coc-book__spine {
    position: absolute;
    top: 0;
    bottom: 0;
    left: calc(50% - var(--t) / 2);
    width: var(--t);
    transform: rotateY(-90deg) translateZ(calc(var(--w) / 2));
    background: var(--cover) left center / auto 100% #2a2622;
    filter: brightness(.62) saturate(.9);
}
.coc-book__edge {
    position: absolute;
    top: 3px;
    bottom: 3px;
    left: calc(50% - var(--t) / 2 + 1px);
    width: calc(var(--t) - 2px);
    transform: rotateY(90deg) translateZ(calc(var(--w) / 2 - 3px));
    background: repeating-linear-gradient(90deg, #efe9dc 0 1.5px, #d6cdbb 1.5px 3px);
}
/* Where the book meets the shelf: a dark pool at night, a soft warm contact shadow by day. */
.coc-book::after { content: ""; position: absolute; left: 8%; right: -6%; bottom: -14px; height: 26px; border-radius: 50%; background: var(--lib-contact); filter: blur(4px); transform: translateZ(-1px); }

/* ---------------------------------------------------------------- Shelf */
.coc-lib__shelf { padding-top: .6rem; }
.coc-lib__shelf-row { position: relative; display: flex; justify-content: center; align-items: flex-end; gap: clamp(1.4rem, 5vw, 4rem); margin: 0; padding: 0 0 22px; list-style: none; }
/* The shelf board: a lit edge with the amber glow of the site's candles (by day, oak under a reading lamp). */
.coc-lib__shelf-row::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 10px; border-radius: 3px; background: var(--lib-board); box-shadow: var(--lib-board-shadow); }
.coc-lib__shelf-row::before { content: ""; position: absolute; left: 10%; right: 10%; bottom: 10px; height: 140px; background: var(--lib-glow); pointer-events: none; }
.coc-lib__shelf-book { position: relative; display: grid; justify-items: center; gap: .8rem; color: var(--lib-ink); text-decoration: none; transition: transform .5s cubic-bezier(.2, .7, .2, 1); }
.coc-lib__shelf-book .coc-book { --ry: -18deg; }
.coc-lib__shelf-book:focus-visible { transform: translateY(-14px); }
.coc-lib__shelf-book:focus-visible .coc-book__obj { --ry: -4deg; }
/* Hover only where it exists: on touch screens :hover sticks after a tap. */
@media (hover: hover) {
    .coc-lib__shelf-book:hover { transform: translateY(-14px); }
    .coc-lib__shelf-book:hover .coc-book__obj { --ry: -4deg; }
    .coc-lib__shelf-book:hover .coc-lib__shelf-t { opacity: 1; transform: none; }
}
.coc-lib__shelf-t { position: absolute; bottom: calc(100% + .8rem); width: max-content; max-width: 220px; padding: .4rem .7rem; border-radius: 10px; background: var(--lib-tip-bg); box-shadow: var(--lib-tip-shadow); font: 500 .8rem/1.3 var(--coc-sans); text-align: center; opacity: 0; transform: translateY(6px); transition: opacity .25s ease, transform .25s ease; pointer-events: none; }
.coc-lib__shelf-book:focus-visible .coc-lib__shelf-t { opacity: 1; transform: none; }
.coc-lib__shelf-book:focus-visible { outline: 2px solid var(--lib-focus); outline-offset: 8px; border-radius: 6px; }

/* ---------------------------------------------------------------- One section per book */
.coc-lib__book {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    align-items: center;
    gap: clamp(2rem, 6vw, 6rem);
    padding: clamp(3rem, 8vw, 6.5rem) 0;
    border-bottom: 1px solid var(--lib-line);
    scroll-margin-top: calc(var(--coc-nav-live, var(--coc-nav-h)) + 1rem);
}
.coc-lib__book:first-of-type { margin-top: clamp(2rem, 5vw, 4rem); border-top: 1px solid var(--lib-line); }
.coc-lib__book.is-flip { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.coc-lib__book.is-flip .coc-lib__visual { order: 2; }
.coc-lib__visual { display: grid; place-items: center; min-height: 460px; }
/* By day the big book stands in a pool of lamplight on the table (none at night: there the dark does it). */
.coc-lib__visual .coc-book::before { content: ""; position: absolute; left: -34%; right: -34%; bottom: -46px; height: 104px; border-radius: 50%; background: var(--lib-pool); pointer-events: none; }
.coc-lib__book .coc-book { --ry: -28deg; }
.coc-lib__book.is-flip .coc-book { --ry: 28deg; }
.coc-lib__book.is-flip .coc-book::after { left: -6%; right: 8%; }
/* Hover or keyboard focus inside the section: the cover opens a little, the book turns to face you. */
.coc-lib__book:is(.is-hover, :focus-within) .coc-book__obj { transform: rotateY(calc(var(--ry, -26deg) * .45 + var(--py, 0deg))) rotateX(calc(var(--px, 0deg) + 2deg)); }
.coc-lib__book:is(.is-hover, :focus-within) .coc-book__front { transform: translateZ(calc(var(--t) / 2)) rotateY(-24deg); }
.coc-lib__book.is-flip:is(.is-hover, :focus-within) .coc-book__front { transform: translateZ(calc(var(--t) / 2)) rotateY(-12deg); }

.coc-lib__by { margin: -.4rem 0 1.1rem; font-family: var(--coc-serif); font-style: italic; font-size: 1.15rem; color: var(--lib-text); }
.coc-lib__num { margin: 0 0 1rem; font: 500 .9rem/1 var(--coc-sans); font-variant-numeric: tabular-nums; color: var(--lib-amber); letter-spacing: .08em; }
.coc-lib__num span { color: var(--lib-muted); }
.coc-lib__text .coc-kicker { color: var(--lib-ink); }
.coc-lib__title { margin: 0 0 1.1rem; font-family: var(--coc-serif); font-size: clamp(2rem, 3.6vw, 3.1rem); font-weight: 500; line-height: 1.04; letter-spacing: -.02em; color: var(--lib-ink); text-wrap: balance; }
.coc-lib__desc { max-width: 58ch; margin: 0 0 1.8rem; color: var(--lib-desc); font-size: 1.05rem; line-height: 1.7; text-wrap: pretty; }
.coc-lib__buy { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.coc-lib__buy-l { margin-right: .4rem; font-size: .7rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--lib-muted); }
.coc-lib__store {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    min-height: 46px;
    padding: 0 1.15rem;
    border: 1px solid var(--lib-btn-line);
    border-radius: 999px;
    color: var(--lib-ink);
    font: 600 .9rem/1 var(--coc-sans);
    text-decoration: none;
    transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
/* The first store is the primary: white at night, ink by day (!important: the theme paints every dark-mode link white). */
.coc-lib__store:first-of-type, .coc-lib__store:hover { background: var(--lib-btn-bg); border-color: var(--lib-btn-bg); color: var(--lib-btn-fg) !important; }
.coc-lib__store:first-of-type:hover { background: var(--lib-btn-hover); border-color: var(--lib-btn-hover); }
.coc-lib__rel { display: flex; flex-wrap: wrap; align-items: baseline; gap: .4rem 1rem; margin: 1.6rem 0 0; padding-top: 1.2rem; border-top: 1px solid var(--lib-line); }
.coc-lib__rel span { font-size: .7rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--lib-muted); }
.coc-lib__rel a { color: var(--lib-ink); font-family: var(--coc-serif); font-size: 1.08rem; text-decoration: underline; text-decoration-color: var(--lib-underline); text-underline-offset: .2em; }
.coc-lib :is(a, button):focus-visible { outline: 2px solid var(--lib-focus); outline-offset: 3px; }

/* ---------------------------------------------------------------- Motion */
@media (prefers-reduced-motion: no-preference) {
    /* The books turn in as their section enters (transforms only: opacity would flatten the 3D). */
    @supports (animation-timeline: view()) {
        .coc-lib__book .coc-book__float { animation: cocBookIn linear both; animation-timeline: view(); animation-range: entry 0% cover 40%; }
        @keyframes cocBookIn { from { translate: 0 80px; rotate: y 40deg; } }
        .coc-lib__book.is-flip .coc-book__float { animation-name: cocBookInFlip; }
        @keyframes cocBookInFlip { from { translate: 0 80px; rotate: y -40deg; } }
        .coc-lib__text { animation: cocLibText linear both; animation-timeline: view(); animation-range: entry 5% cover 35%; }
        @keyframes cocLibText { from { opacity: 0; translate: 0 30px; } }
    }
    /* Books on the shelf arrive one after another. */
    .coc-lib__shelf-row li { animation: cocShelfIn .7s cubic-bezier(.2, .7, .2, 1) both; }
    .coc-lib__shelf-row li:nth-child(2) { animation-delay: .08s; }
    .coc-lib__shelf-row li:nth-child(3) { animation-delay: .16s; }
    .coc-lib__shelf-row li:nth-child(4) { animation-delay: .24s; }
    @keyframes cocShelfIn { from { translate: 0 24px; } }
}
@media (prefers-reduced-motion: reduce) {
    .coc-book__obj, .coc-book__front, .coc-lib__shelf-book, .coc-lib__shelf-t { transition: none !important; }
}

/* ---------------------------------------------------------------- Smaller screens */
@media (max-width: 991.98px) {
    .coc-lib__book, .coc-lib__book.is-flip { grid-template-columns: minmax(0, 1fr); gap: 2.4rem; }
    .coc-lib__book.is-flip .coc-lib__visual { order: 0; }
    .coc-lib__visual { min-height: 0; padding-top: 1rem; }
    .coc-book { --w: 220px; --t: 24px; }
    .coc-book--mini { --w: 88px; --t: 12px; }
}
@media (max-width: 575.98px) {
    .coc-lib__shelf-row { gap: 1.1rem; }
    .coc-book--mini { --w: 84px; }
    /* Visually hidden but still the link's name (the book itself is decorative). */
    .coc-lib__shelf-t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
@media (forced-colors: active) { .coc-book { display: none; } }