/* Portada del archivo, índice, biblioteca, guía, Horizonte de Hombres y autora — en negro y oro */

/* ───────── Portada: Noctia | Muro de Caronte | Luzaria ───────── */
.codex { position: relative; isolation: isolate; overflow: hidden; border-bottom: 1px solid var(--line-soft); background: #000; }
.spread {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(78px, 7.4vw, 118px) minmax(0, 1fr);
  grid-template-rows: auto minmax(180px, 1fr) auto auto;
  min-height: calc(100svh - 67px);
}
.bgN, .bgL, .muro { grid-row: 1 / -1; }
.bgN { grid-column: 1; position: relative; overflow: hidden; background: radial-gradient(120% 90% at 100% 45%, #1f1640, #0b0818 55%, #030207); }
.bgL { grid-column: 3; position: relative; overflow: hidden; background: radial-gradient(130% 110% at 0% 42%, #fff4da 0%, #f1dca8 30%, #d6b26a 62%, #8c6a33 88%, #4a3517 100%); }
.bgN svg.sky, .bgL svg.sun { position: absolute; inset: 0; width: 100%; height: 100%; }
.bgN .wash, .bgL .wash { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.bgN .wash { opacity: .55; mix-blend-mode: screen; -webkit-mask-image: linear-gradient(100deg, transparent 5%, #000 45%, #000 80%, transparent); mask-image: linear-gradient(100deg, transparent 5%, #000 45%, #000 80%, transparent); }
.bgL .wash { opacity: .16; filter: grayscale(1) sepia(.7) contrast(1.1); mix-blend-mode: multiply; -webkit-mask-image: linear-gradient(270deg, transparent, #000 30%, #000 70%, transparent); mask-image: linear-gradient(270deg, transparent, #000 30%, #000 70%, transparent); }

.muro { grid-column: 2; position: relative; z-index: 2; background: #17130f; box-shadow: -18px 0 40px -6px rgba(0,0,0,.9), 18px 0 40px -10px rgba(120,80,20,.45); }
.muro svg.stones { position: absolute; inset: 0; width: 100%; height: 100%; }
.muro__plaque {
  position: absolute; left: 50%; top: 23%; transform: translate(-50%, -50%);
  writing-mode: vertical-rl; text-orientation: mixed;
  font-family: var(--f-sc); font-size: clamp(.9rem, .78rem + .35vw, 1.08rem); letter-spacing: .1em;
  color: var(--gold-hi); background: #050407; padding: 1.2em .6em; border: 1px solid var(--gold-leaf);
  box-shadow: inset 0 0 0 3px #050407, inset 0 0 0 4px var(--gold-lo), 0 6px 18px rgba(0,0,0,.6);
  white-space: nowrap;
}
.muro__gate { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); width: 82%; height: auto; }

.realm { padding: clamp(1.6rem, 3.5vw, 3rem) clamp(1.4rem, 3.5vw, 3.4rem) 0; position: relative; z-index: 1; grid-row: 1; }
.realm h2 { font-family: var(--f-sc); font-size: clamp(1rem, .9rem + .4vw, 1.2rem); letter-spacing: .12em; }
.realm--N { grid-column: 1; color: var(--gold-hi); text-align: right; }
.realm--L { grid-column: 3; color: #3b2a10; }
.realm small { display: block; font-family: var(--f-text); font-style: italic; font-size: .95rem; margin-top: .35rem; letter-spacing: 0; }
.realm--N small { color: #c9c2dc; }
.realm--L small { color: #4a3615; }

.word { grid-row: 2; align-self: center; position: relative; z-index: 1; font-family: var(--f-display); font-size: clamp(4.2rem, 1rem + 7.8vw, 9rem); line-height: .88; letter-spacing: -.03em; padding-inline: clamp(.9rem, 2.2vw, 2.4rem); }
.word--N { grid-column: 1; text-align: right; color: var(--gold-hi); text-shadow: 0 2px 0 #6b531f, 0 18px 50px rgba(0,0,0,.6); }
.word--L { grid-column: 3; text-align: left; color: #1a1208; text-shadow: 0 1px 0 rgba(255,244,218,.7); }

.reg { grid-row: 4; position: relative; z-index: 1; padding: 0 clamp(1.4rem, 3.5vw, 3.4rem) clamp(1.6rem, 3vw, 2.6rem); font-size: .98rem; line-height: 1.5; }
.reg p { max-width: 46ch; font-style: italic; margin-bottom: 1.1rem; }
.reg--N { grid-column: 1; color: #ddd8ea; }
.reg--N p { margin-left: auto; text-align: right; color: #cfc8e2; }
.reg--L { grid-column: 3; color: #2a1d0a; }
.reg ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .3rem; }
.reg--N ul { justify-items: end; text-align: right; }
.reg li { display: flex; gap: .7rem; align-items: baseline; flex-wrap: wrap; }
.reg--N li { justify-content: flex-end; }
.reg b { font-family: var(--f-sc); font-weight: 500; letter-spacing: .05em; font-size: 1rem; }
.reg--N b { color: var(--gold-hi); }
.reg--L b { color: #5b360a; }
.reg--N a { color: #efeaf8; text-decoration-color: rgba(214,178,106,.55); }
.reg--N a:hover { color: var(--gold-hi); }
.reg--L span { color: #2a1d0a; font-style: italic; }

.cart {
  grid-column: 1 / -1; grid-row: 3; justify-self: center; z-index: 3; position: relative;
  margin: 0 0 clamp(1.4rem, 3vw, 2.4rem); width: min(700px, calc(100% - 32px));
  background: rgba(4, 3, 6, .9); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  border: 1px solid var(--gold-leaf); padding: 1.5rem clamp(1rem, 3vw, 2.4rem) 1.6rem; text-align: center;
  box-shadow: inset 0 0 0 4px rgba(4,3,6,.9), inset 0 0 0 5px var(--line), 0 30px 60px -20px rgba(0,0,0,.9);
}
.cart__line { text-wrap: balance; font-family: var(--f-display); font-size: clamp(1.4rem, 1.05rem + 1.1vw, 2rem); line-height: 1.15; margin: 0 0 .4rem; color: var(--ink); }
.cart__sub { font-family: var(--f-sc); letter-spacing: .08em; font-size: .92rem; color: var(--gold-leaf); margin: 0 0 1.1rem; }
.cart__cta { display: flex; justify-content: center; flex-wrap: wrap; gap: .7rem; }

/* Tapa: piel negra con hierros dorados */
.cover {
  position: absolute; inset: 0; z-index: 10; border: 0; padding: 0; margin: 0; width: 100%;
  transform-origin: left center; transform: perspective(2600px) rotateY(0deg);
  background:
    radial-gradient(60% 50% at 55% 42%, rgba(214,178,106,.12), transparent 70%),
    radial-gradient(90% 70% at 55% 42%, #1d1812 0%, #0d0a07 50%, #030202 100%);
  color: var(--gold-hi); cursor: pointer; overflow: hidden;
  box-shadow: inset 30px 0 40px -20px rgba(0,0,0,.8);
}
.cover::before { content: ""; position: absolute; inset: 0; background-image: var(--paper-grain); opacity: 1; }
.cover__spine { position: absolute; left: 0; top: 0; bottom: 0; width: clamp(18px, 2.4vw, 34px); background: linear-gradient(90deg, #000, #15110c 60%, #000); }
.cover__spine::before, .cover__spine::after { content: ""; position: absolute; left: 0; right: 0; height: 6px; border-top: 1px solid var(--gold-leaf); border-bottom: 1px solid var(--gold-leaf); }
.cover__spine::before { top: 22%; } .cover__spine::after { bottom: 22%; }
.cover__tool { position: absolute; inset: clamp(18px, 3vw, 40px); left: calc(clamp(18px, 2.4vw, 34px) + clamp(14px, 2.4vw, 34px)); width: auto; height: auto; color: var(--gold-leaf); }
.cover__tool svg { width: 100%; height: 100%; }
.cover__in { position: relative; height: 100%; display: grid; place-content: center; justify-items: center; text-align: center; gap: .7rem; padding: 2rem 2rem 2rem 4rem; }
.cover__in img { width: clamp(76px, 9vw, 124px); filter: drop-shadow(0 4px 18px rgba(214,178,106,.35)); }
.cover__title { font-family: var(--f-display); font-size: clamp(3.2rem, 1.5rem + 5.6vw, 6.8rem); line-height: .92; letter-spacing: -.02em; color: var(--gold-hi); text-shadow: 0 2px 0 #6b531f, 0 6px 30px rgba(0,0,0,.7); }
.cover__sub { font-family: var(--f-sc); letter-spacing: .12em; color: var(--gold-leaf); font-size: clamp(.9rem, .85rem + .3vw, 1.1rem); }
.cover__by { font-family: var(--f-display); color: #e9dcc2; font-size: 1.15rem; margin-top: 1.4rem; }
.cover__hint { position: absolute; bottom: clamp(30px, 6vh, 64px); left: 0; right: 0; text-align: center; font-family: var(--f-sc); letter-spacing: .1em; font-size: .9rem; color: var(--gold-leaf); }
.cover.is-opening { transition: transform 1.55s var(--ease-book), box-shadow 1.55s, opacity .5s 1.15s; transform: perspective(2600px) rotateY(-104deg); opacity: 0; box-shadow: inset 30px 0 40px -20px rgba(0,0,0,.6), 40px 0 80px rgba(0,0,0,.8); }
.cover[hidden] { display: none; }

/* Entrada orquestada: las dos mitades del título se separan del muro */
.js .codex.is-closed .word--N { transform: translateX(6%); opacity: 0; }
.js .codex.is-closed .word--L { transform: translateX(-6%); opacity: 0; }
.js .codex.is-closed .cart { transform: translateY(14px); opacity: 0; }
.codex .word, .codex .cart { transition: transform 1.3s var(--ease-out), opacity 1.1s var(--ease-out); }
.codex.is-open .word { transition-delay: .55s; }
.codex.is-open .cart { transition-delay: .95s; }

@media (max-width: 820px) {
  .spread { grid-template-columns: 1fr; grid-template-rows: none; min-height: 0; }
  .bgN { grid-column: 1; grid-row: 1 / 3; }
  .realm--N { grid-row: 1; grid-column: 1; text-align: center; padding-top: 2rem; }
  .word--N { grid-row: 2; grid-column: 1; text-align: center; padding-bottom: 1.6rem; }
  .muro { grid-column: 1; grid-row: 3; height: 76px; box-shadow: 0 -14px 26px -8px rgba(0,0,0,.9), 0 14px 26px -10px rgba(120,80,20,.4); }
  .muro__plaque { writing-mode: horizontal-tb; padding: .5em 1.1em; font-size: .95rem; }
  .muro__gate { display: none; }
  .bgL { grid-column: 1; grid-row: 4 / 6; background: radial-gradient(120% 120% at 50% 0%, #fff4da 0%, #f1dca8 35%, #d6b26a 75%, #a67f3d 100%); }
  .word--L { grid-row: 4; grid-column: 1; text-align: center; padding-top: 1.6rem; }
  .realm--L { grid-row: 5; grid-column: 1; text-align: center; padding: .6rem 1rem 2.2rem; }
  .cart { grid-row: 6; grid-column: 1; margin-top: -1rem; }
  .reg--N { grid-row: 7; grid-column: 1; background: radial-gradient(120% 80% at 50% 0%, #1a1336, #05040b); padding-top: 2.2rem; }
  .reg--N p, .reg--N ul { text-align: left; justify-items: start; margin-left: 0; }
  .reg--N li { justify-content: flex-start; }
  .reg--L { grid-row: 8; grid-column: 1; padding-top: 2.2rem; background: radial-gradient(120% 120% at 50% 0%, #fbeccb, #e6c98a 70%, #c49b52); }
  .word { font-size: clamp(3.8rem, 20vw, 6.4rem); }
  .cover__in { padding-left: 3rem; }
}

/* ───────── Índice del archivo ───────── */
.toc-wrap { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(2.5rem, 6vw, 6rem); align-items: start; }
.toc h2 { font-size: clamp(2.4rem, 1.6rem + 3vw, 4.2rem); letter-spacing: -.02em; margin-bottom: .4rem; }
.toc > p { color: var(--ink-2); font-style: italic; max-width: 50ch; }
.toc ol { list-style: none; margin: 2rem 0 0; padding: 0; }
.toc li a { display: grid; grid-template-columns: 3.2rem minmax(0, 1fr); column-gap: .2rem; padding: 1rem 0; border-top: 1px solid var(--vellum-3); text-decoration: none; color: var(--ink); transition: background-color .25s; }
.toc li:last-child a { border-bottom: 1px solid var(--vellum-3); }
.toc li a:hover { background: linear-gradient(90deg, rgba(214,178,106,.13), transparent 80%); }
.toc .n { font-family: var(--f-sc); color: var(--gold-leaf); font-size: 1rem; letter-spacing: .04em; padding-top: .45rem; }
.toc .t { display: flex; align-items: baseline; gap: .6rem; font-family: var(--f-display); font-size: clamp(1.5rem, 1.2rem + 1.1vw, 2.2rem); line-height: 1.1; }
.toc .t::after { content: ""; flex: 1; border-bottom: 2px dotted var(--vellum-3); transform: translateY(-.25em); min-width: 1.5rem; }
.toc .d { grid-column: 2; color: var(--ink-2); font-size: .95rem; margin-top: .3rem; max-width: 56ch; }
.toc li a:hover .t { color: var(--rubric); }
.frontis { position: sticky; top: 100px; margin: 0 10px; }
.frontis img { aspect-ratio: 1200 / 849; }
@media (max-width: 900px) { .toc-wrap { grid-template-columns: minmax(0, 1fr); } .frontis { position: relative; top: 0; } }

/* ───────── Biblioteca (catálogo) ───────── */
.lib { background: radial-gradient(60% 40% at 50% 0%, rgba(155,130,224,.10), transparent 70%), linear-gradient(180deg, transparent, #07060b 10%, #07060b 90%, transparent); }
.lib__tools { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.6rem; justify-content: space-between; margin-bottom: 2.4rem; padding-bottom: 1.2rem; border-bottom: 1px solid var(--line); box-shadow: 0 3px 0 -2px var(--vellum-2), 0 4px 0 -2px var(--gold-leaf); }
.lib__count { font-style: italic; color: var(--ink-3); font-size: .92rem; width: 100%; margin: 0; }
.shelf-group + .shelf-group { margin-top: 3.6rem; }
.shelf-group h3 { font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.3rem); display: flex; align-items: baseline; gap: .8rem; flex-wrap: wrap; margin-bottom: 1.6rem; }
.shelf-group h3 small { font-family: var(--f-sc); font-size: .95rem; letter-spacing: .06em; color: var(--gold-leaf); }
.shelf { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 2.4rem 1.6rem; }
.shelf--small { grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 2rem 1.3rem; }
.vol { background: none; border: 0; padding: 0; text-align: left; display: flex; flex-direction: column; gap: .7rem; }
.vol__cover { position: relative; aspect-ratio: 2 / 3; box-shadow: 1px 1px 0 rgba(0,0,0,.25), 4px 8px 16px -6px rgba(0,0,0,.5); transition: transform .45s var(--ease-out), box-shadow .45s var(--ease-out); background: var(--vellum-3); }
.vol__cover::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 7%; background: linear-gradient(90deg, rgba(255,255,255,.14), rgba(0,0,0,.25) 60%, transparent); z-index: 1; }
.vol__cover { outline: 1px solid var(--line-soft); outline-offset: -1px; }
.vol__cover img { width: 100%; height: 100%; object-fit: cover; }
.vol:hover .vol__cover, .vol:focus-visible .vol__cover { transform: translateY(-6px) rotate(-.6deg); box-shadow: 1px 1px 0 rgba(0,0,0,.25), 10px 22px 30px -12px rgba(0,0,0,.55); }
.vol__n { font-family: var(--f-sc); letter-spacing: .06em; color: var(--gold-leaf); font-size: .88rem; }
.vol__t { font-family: var(--f-display); font-size: 1.32rem; line-height: 1.1; color: var(--ink); }
.vol__l { font-size: .84rem; color: var(--ink-3); font-style: italic; line-height: 1.3; }
.vol--soon .vol__cover img { filter: grayscale(.45) brightness(.72); }
.vol__ribbon { position: absolute; right: -6px; top: 14px; z-index: 3; background: var(--gold-leaf); color: #0b0805; font-family: var(--f-sc); letter-spacing: .05em; font-size: .76rem; padding: .22rem .6rem; box-shadow: 0 2px 4px rgba(0,0,0,.3); }
.vol__ribbon::after { content: ""; position: absolute; right: 0; bottom: -5px; border: 3px solid transparent; border-left-color: var(--gold-lo); border-top-color: var(--gold-lo); }
.empty { text-align: center; padding: 3rem 1rem; font-style: italic; color: var(--ink-2); }
.empty button { margin-top: 1rem; }
@media (max-width: 560px) { .shelf { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem 1.1rem; } .shelf--small { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.4rem .9rem; } .shelf--small .vol__t { font-size: 1rem; } }

/* ───────── Orden de lectura ───────── */
.guide { position: relative; max-width: 1060px; margin-inline: auto; }
.guide ol { list-style: none; margin: 0; padding: 0; position: relative; }
.guide ol::before { content: ""; position: absolute; left: 1.45rem; top: .6rem; bottom: .6rem; width: 1px; background: linear-gradient(var(--gold-leaf), var(--gold-leaf)) left / 1px 100% no-repeat; }
.arc { display: grid; grid-template-columns: 3rem minmax(0, 15rem) minmax(0, 1fr); gap: 0 1.6rem; padding: 1.4rem 0; border-bottom: 1px solid var(--vellum-3); align-items: center; }
.arc__n { width: 2.9rem; height: 2.9rem; border-radius: 50%; display: grid; place-items: center; background: #0b0910; border: 1px solid var(--gold-leaf); box-shadow: 0 0 0 3px var(--vellum), 0 0 0 4px var(--gold-lo); font-family: var(--f-sc); font-size: .95rem; color: var(--gold-hi); position: relative; z-index: 1; }
.arc__name { font-family: var(--f-display); font-size: 1.45rem; line-height: 1.12; }
.arc__sub { display: block; font-family: var(--f-text); font-style: italic; color: var(--ink-3); font-size: .9rem; margin-top: .2rem; }
.arc__books { display: flex; flex-wrap: wrap; gap: .8rem; }
.arc__book { display: flex; align-items: center; gap: .65rem; background: none; border: 0; padding: .25rem .4rem .25rem .25rem; text-align: left; border-radius: 2px; transition: background-color .2s; }
.arc__book:hover { background: rgba(214,178,106,.16); }
.arc__book img { width: 44px; height: 66px; object-fit: cover; box-shadow: 2px 4px 8px -3px rgba(0,0,0,.55); }
.arc__book span { font-family: var(--f-display); font-size: 1.15rem; line-height: 1.1; }
.arc__book em { display: block; font-family: var(--f-text); font-weight: 400; font-size: .78rem; color: var(--ink-3); }
@media (max-width: 720px) {
  .arc { grid-template-columns: 3rem minmax(0, 1fr); row-gap: .9rem; }
  .arc__books { grid-column: 2; }
}

/* ───────── Antesala de lectura (lámina nocturna) ───────── */
.antesala { background: #000; color: var(--ink); position: relative; overflow: hidden; isolation: isolate; border-block: 1px solid var(--line-soft); }
.antesala::before { content: ""; position: absolute; inset: 0; z-index: -1; background: url("../../assets/bg/fondo.jpg") 70% 50% / cover no-repeat; opacity: .55; }
.antesala::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(0,0,0,.2), rgba(0,0,0,.55) 55%, rgba(0,0,0,.85)); }
.antesala__in { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.antesala figure { margin: 0 10px; }

.antesala h2 { font-size: clamp(2.2rem, 1.5rem + 3vw, 4rem); color: var(--gold-hi); letter-spacing: -.02em; }
.antesala h2 i { font-weight: 400; }
.antesala blockquote { margin: 1.4rem 0 1.8rem; font-size: 1.12rem; line-height: 1.65; color: #e6dcc6; max-width: 46ch; }
.antesala blockquote::first-letter { font-family: var(--f-display); font-size: 3.4em; float: left; line-height: .8; margin: .06em .1em 0 0; color: var(--gold-hi); }
.antesala p.src { font-style: italic; color: var(--ink-3); font-size: .92rem; }
@media (max-width: 820px) { .antesala__in { grid-template-columns: 1fr; } }

/* ───────── Horizonte de Hombres ───────── */
.hdh__intro { max-width: 68ch; margin: 0 auto 1rem; text-align: center; color: var(--ink-2); }
.hdh__q { text-align: center; font-family: var(--f-display); font-size: clamp(1.6rem, 1.2rem + 1.5vw, 2.5rem); color: var(--gold-hi); margin: 2rem auto 3.2rem; max-width: 28ch; line-height: 1.2; }
.hdh__cols { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 5rem); position: relative; }
.hdh__cols::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: linear-gradient(transparent, var(--line), transparent); }
.novel__head { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 1.4rem; align-items: center; margin-bottom: 1.8rem; }
.novel__head img { width: 120px; aspect-ratio: 2 / 3; object-fit: cover; box-shadow: var(--shadow-2); }
.novel h3 { font-size: clamp(1.8rem, 1.3rem + 1.6vw, 2.6rem); }
.novel .num { font-family: var(--f-sc); letter-spacing: .05em; color: var(--ink-3); font-size: .9rem; margin-top: .35rem; }
.novel .tag { font-family: var(--f-display); color: var(--gold-hi); font-size: 1.3rem; margin: .5rem 0 .4rem; }
.novel .poem { font-style: italic; color: var(--ink-2); font-size: .95rem; line-height: 1.5; margin: 0 0 1.6rem; padding-left: 1rem; border-left: 1px solid var(--gold-leaf); }
.cast { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.6rem 1.2rem; }
.actor { background: none; border: 0; padding: 0; text-align: left; display: grid; gap: .6rem; }
.actor__img { aspect-ratio: 4 / 5; overflow: hidden; border-radius: 999px 999px 2px 2px; border: 1px solid var(--line); box-shadow: 0 0 0 3px var(--vellum), 0 0 0 4px var(--gold-lo), var(--shadow-1); background: var(--vellum-2); }
.actor__img img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0%; transform-origin: 50% 0; transform: scale(1.05); transition: transform .8s var(--ease-out); }
.actor:hover .actor__img img { transform: scale(1.09); }
.actor__name { font-family: var(--f-display); font-size: 1.3rem; line-height: 1.1; }
.actor__role { font-size: .84rem; color: var(--ink-3); font-style: italic; line-height: 1.35; }
.actor__q { font-size: .9rem; color: var(--gold-hi); font-style: italic; line-height: 1.4; }
.nexus { text-align: center; max-width: 54ch; margin: 3.2rem auto 0; font-style: italic; color: var(--ink-2); }
.nexus svg { width: 90px; height: 26px; color: var(--gold); display: block; margin: 0 auto .6rem; }
@media (max-width: 820px) { .hdh__cols { grid-template-columns: 1fr; } .hdh__cols::before { display: none; } }

/* ───────── Autora ───────── */
.author { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(2rem, 6vw, 6rem); align-items: start; }
.author__aside { text-align: center; position: sticky; top: 110px; }
.author__aside img { width: 120px; margin: 0 auto 1.2rem; }
.author__aside h2 { font-size: clamp(2.2rem, 1.6rem + 2.4vw, 3.6rem); }
.author__aside p { font-style: italic; color: var(--ink-3); margin-top: .5rem; }
.author__body { max-width: var(--measure); }
.author__body blockquote { font-family: var(--f-display); font-size: clamp(1.35rem, 1.1rem + .9vw, 1.85rem); line-height: 1.3; color: var(--gold-hi); margin: 2rem 0; padding: 1.4rem 0; border-block: 1px solid var(--line); }
.social { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 2rem; }
.social a { display: inline-flex; align-items: center; gap: .5rem; padding: .5rem .95rem; border: 1px solid var(--line); border-radius: 999px; color: var(--ink); text-decoration: none; font-size: .92rem; min-height: 44px; transition: all .2s; }
.social a:hover { background: rgba(214,178,106,.12); border-color: var(--gold-hi); color: var(--gold-hi); }
.social .icon { width: 1.15em; height: 1.15em; }
@media (max-width: 820px) { .author { grid-template-columns: 1fr; } .author__aside { position: static; } }
html:not(.js) .cover { display: none; }
.others { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); gap: 2.6rem 2.4rem; }
.coll { border-top: 1px solid var(--line); padding-top: 1rem; }
.coll h4 { font-family: var(--f-display); font-size: 1.4rem; margin-bottom: 1rem; display: flex; flex-direction: column; gap: .15rem; }
.coll h4 small { font-family: var(--f-sc); letter-spacing: .05em; color: var(--ink-3); font-size: .86rem; }
.coll__row { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 1.1rem .9rem; }
.coll .vol { gap: .45rem; }
.coll .vol__t { font-size: .95rem; line-height: 1.15; }
.coll .vol__ribbon { font-size: .64rem; right: -4px; top: 8px; padding: .15rem .4rem; }
.vol__meta { display: flex; flex-direction: column; gap: .15rem; }
.vol__n, .vol__t, .vol__l { display: block; }
#hdh { background: linear-gradient(180deg, #050407 0%, rgba(5,4,7,.78) 10%, rgba(5,4,7,.82) 90%, #050407 100%), url("../../assets/hdh/roma-limpia-desk.jpg") 50% 30% / cover no-repeat, #050407; }
.hdh-genre { margin: .1rem 0 .5rem; }
.hdh-genre .ae-tag, .sheet .ae-tag { font-family: "Cinzel", var(--f-sc); font-weight: 600; font-size: .7rem; letter-spacing: .18em; text-transform: uppercase; color: #fff4ea; padding: .3em .8em; border: 1px solid rgba(196,58,75,.9); background: rgba(143,29,44,.55); display: inline-block; }

/* ═════ Fase 2: entrada de Trece Tronos sobre el paisaje de los dos mundos ═════ */
.spread { background: url("../../assets/tt/mundos-desk.jpg") 50% 50% / cover no-repeat, #05040a; }
.bgN, .bgL { background: none; }
.bgN .wash, .bgL .wash, .bgL svg.sun { display: none; }
.bgN svg.sky { opacity: .45; }
.bgN::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(4,3,10,.55) 0%, rgba(4,3,10,.38) 55%, rgba(4,3,10,.15) 100%), linear-gradient(180deg, rgba(4,3,10,.35), transparent 30%, transparent 55%, rgba(4,3,10,.75) 100%); }
.bgL::after { content: ""; position: absolute; inset: 0; background: linear-gradient(270deg, rgba(255,246,224,.6) 0%, rgba(255,246,224,.42) 55%, rgba(255,246,224,.2) 100%), linear-gradient(180deg, rgba(255,246,224,.45), transparent 32%, transparent 52%, rgba(255,246,224,.78) 100%); }
.muro { background: linear-gradient(90deg, rgba(5,3,6,.0), rgba(5,3,6,.45) 50%, rgba(5,3,6,0)); box-shadow: none; }
.muro svg.stones { opacity: .18; }
.muro__gate { opacity: .7; }
.word--N { text-shadow: 0 2px 0 #6b531f, 0 10px 40px rgba(0,0,0,.85); }
.word--L { text-shadow: 0 1px 0 rgba(255,246,224,.8), 0 0 30px rgba(255,246,224,.8); }
.realm--N small, .reg--N p { text-shadow: 0 1px 6px rgba(0,0,0,.9); }
.reg--N b, .realm--N h2 { text-shadow: 0 1px 8px rgba(0,0,0,.9); }
.reg--L, .realm--L { text-shadow: 0 0 12px rgba(255,246,224,.9); }
@media (max-width: 820px) {
  .spread { background: #05040a; }
  .bgN { background: url("../../assets/tt/mundos-mob.jpg") 50% 0 / 100% auto no-repeat, #05040a; }
  .bgL { background: url("../../assets/tt/mundos-mob.jpg") 50% 100% / 100% auto no-repeat, #e9d6a4; }
  .bgN::after { background: linear-gradient(180deg, rgba(4,3,10,.55), rgba(4,3,10,.3) 40%, rgba(4,3,10,.6)); }
  .bgL::after { background: linear-gradient(180deg, rgba(255,246,224,.55), rgba(255,246,224,.35) 50%, rgba(255,246,224,.6)); }
  .muro { background: linear-gradient(180deg, rgba(5,3,6,.0), rgba(5,3,6,.7) 50%, rgba(5,3,6,0)), url("../../assets/tt/mundos-mob.jpg") 50% 52% / 100% auto no-repeat; }
  .muro svg.stones { opacity: 0; }
}
@media (max-width: 820px) {
  .bgN, .bgL { background: none; }
  .bgN::before, .bgL::before { content: ""; position: absolute; left: 0; right: 0; background: url("../../assets/tt/mundos-mob.jpg") 50% 0 / cover no-repeat; }
  .bgN::before { top: 0; bottom: -100%; background-position: 50% 0; }
  .bgL::before { top: -100%; bottom: 0; background-position: 50% 100%; }
  .bgN { grid-row: 1 / 4; }
  .realm--N { grid-row: 1; }
  .word--N { grid-row: 2; padding-bottom: .6rem; }
  .reg--N { grid-row: 3; grid-column: 1; background: none; padding-top: 12rem; }
  .bgN::after { background: linear-gradient(180deg, rgba(4,3,10,.6) 0%, rgba(4,3,10,.25) 22%, rgba(4,3,10,.1) 38%, rgba(4,3,10,.7) 60%, rgba(4,3,10,.88) 100%); }
  .muro { grid-row: 4; }
  .bgL { grid-row: 5 / 8; }
  .word--L { grid-row: 5; }
  .realm--L { grid-row: 6; padding-bottom: 12rem; }
  .reg--L { grid-row: 7; grid-column: 1; background: none; padding-top: 1rem; }
  .bgL::after { background: linear-gradient(180deg, rgba(255,246,224,.6) 0%, rgba(255,246,224,.15) 25%, rgba(255,246,224,.1) 45%, rgba(255,246,224,.82) 62%, rgba(255,246,224,.9) 100%); }
  .cart { grid-row: 8; margin-top: 1.6rem; }
}
/* Horizonte de Hombres: un panel por civilización */
.novel { padding: clamp(1.2rem, 3vw, 2.2rem); border: 1px solid var(--line); }
.novel--roma { background: linear-gradient(180deg, rgba(40,10,14,.82), rgba(18,8,8,.9)), url("../../assets/hdh/roma-limpia-desk.jpg") 50% 40% / cover no-repeat; }
.novel--hellas { --ink: #14283c; --ink-2: #263a50; --ink-3: #3d5168; --gold-hi: #1b5a86; --gold-leaf: #6e5310; --gold-lo: #b9a06a;
  background: linear-gradient(180deg, rgba(248,243,232,.78), rgba(244,238,224,.93) 45%), url("../../assets/hdh/hellas-desk.jpg") 50% 20% / cover no-repeat; color: var(--ink); border-color: #b9a06a; }
.novel--hellas h3, .novel--hellas .actor__name { color: var(--ink); }
.novel--hellas .tag { color: #1b5a86; }
.novel--hellas .poem { color: var(--ink-2); border-left-color: #b28a2e; }
.novel--hellas .actor__q { color: #1b5a86; }
.novel--hellas .ae-tag { background: #1b5a86 !important; border-color: #0f3a5c !important; }
.novel--hellas .actor__img { box-shadow: 0 0 0 3px #f4eee0, 0 0 0 4px #1b5a86, 0 10px 24px -10px rgba(15,42,68,.5); }
.novel--hellas .seal { color: #6e5310; border-color: #b9a06a; }
.actor__img { border-radius: 50%; aspect-ratio: 4 / 5; border: 2px solid #f0d695; }
.novel--roma .actor__img { box-shadow: 0 0 0 3px #1a0808, 0 0 0 5px #c43a4b, var(--shadow-1); }
.hdh__cols::before { display: none; }

/* ═════ m66: índice a 2 columnas, otras obras en filas, contacto ═════ */
.toc-wrap { grid-template-columns: minmax(0, 1fr); }
.toc { max-width: none; }
.toc > h2, .toc > p { text-align: center; margin-inline: auto; }
.toc ol { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(1.6rem, 4vw, 4rem); }
.toc li:last-child a { border-bottom: 0; }
@media (max-width: 760px) { .toc ol { grid-template-columns: 1fr; } }
.otras__rows { display: grid; gap: 0; }
.orow { display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); gap: 1.6rem; align-items: center; padding: 1.4rem 0; border-top: 1px solid var(--line-soft); }
.orow:last-child { border-bottom: 1px solid var(--line-soft); }
.orow__name h3 { font-size: clamp(1.4rem, 1.1rem + 1vw, 1.9rem); }
.orow__name p { margin: .3rem 0 0; font-family: var(--f-sc); letter-spacing: .05em; color: var(--gold-leaf); font-size: .9rem; }
.orow__books { display: flex; gap: 1rem; overflow-x: auto; padding: .4rem .2rem 1rem; scroll-snap-type: x proximity; scrollbar-width: thin; }
.orow__books:focus-visible { outline: 2px solid var(--gold-hi); outline-offset: 2px; }
.orow__books .vol { flex: none; width: 128px; scroll-snap-align: start; }
.orow__books .vol__t { font-size: 1rem; }
.orow__books .vol__ribbon { font-size: .64rem; right: -4px; top: 8px; padding: .15rem .4rem; }
@media (max-width: 720px) { .orow { grid-template-columns: 1fr; gap: .8rem; } .orow__books .vol { width: 112px; } }
.contacto { border-top: 1px solid var(--line-soft); background: radial-gradient(60% 80% at 50% 0%, rgba(214,178,106,.08), transparent 70%); }
.contacto__in { text-align: center; }
.contacto__mail { margin: 0 0 1.4rem; }
.contacto__nets { justify-content: center; }
.contacto__legal { margin-top: 1.6rem; color: var(--ink-3); font-size: .92rem; }
/* m68: Lapso / Hellas en negro y dorado */
.novel--hellas { --ink: #efe5d0; --ink-2: #d2c6ab; --ink-3: #a99c82; --gold-hi: #f0d695; --gold-leaf: #d6b26a; --gold-lo: #7d6334;
  background: linear-gradient(180deg, rgba(8,9,12,.84), rgba(8,9,12,.93) 45%), url("../../assets/hdh/hellas-desk.jpg") 50% 20% / cover no-repeat; color: var(--ink); border-color: rgba(214,178,106,.4); }
.novel--roma { border-color: rgba(214,178,106,.4); }
.novel--hellas .tag, .novel--hellas .actor__q { color: var(--gold-hi); }
.novel--hellas .poem { color: var(--ink-2); border-left-color: #4f8fbf; }
.novel--hellas .actor__img { box-shadow: 0 0 0 3px #08090c, 0 0 0 5px #4f8fbf, var(--shadow-1); }
.novel--hellas .seal { color: var(--gold-leaf); border-color: var(--gold-lo); }
.novel--hellas .num { color: #a9c9e2; }
.hdh__q { color: var(--gold-hi); }
.novel--roma { background: linear-gradient(180deg, rgba(8,7,8,.84), rgba(8,7,8,.93) 45%), url("../../assets/hdh/roma-limpia-desk.jpg") 50% 20% / cover no-repeat; }
.novel--roma .actor__img { box-shadow: 0 0 0 3px #080708, 0 0 0 5px var(--gold-lo), var(--shadow-1); }
/* m316: recuadro de Bandcamp (la música del universo) */
.bc { padding-block: clamp(2rem, 5vw, 3.5rem); }
.bc__card { display: flex; align-items: center; gap: clamp(1.2rem, 4vw, 3rem); padding: clamp(1.4rem, 4vw, 2.6rem); border: 1px solid var(--line); border-radius: 14px; color: inherit; text-decoration: none;
  background: radial-gradient(120% 160% at 0% 50%, rgba(155,106,214,.18), transparent 55%), radial-gradient(90% 140% at 100% 0%, rgba(214,178,106,.14), transparent 60%), #08060c; transition: border-color .3s, transform .3s; }
.bc__card:hover, .bc__card:focus-visible { border-color: var(--gold-hi); transform: translateY(-2px); text-decoration: none; }
.bc__disc { flex: none; width: clamp(84px, 16vw, 132px); height: auto; animation: bc-gira 14s linear infinite; }
.bc__d1 { fill: #0d0a12; stroke: var(--gold-hi); stroke-opacity: .55; } .bc__d2 { fill: none; stroke: #ffffff; stroke-opacity: .07; }
.bc__d3 { fill: var(--gold-hi); fill-opacity: .9; } .bc__d4 { fill: #08060c; }
@keyframes bc-gira { to { transform: rotate(360deg); } }
.bc__kick { margin: 0; font-size: .78rem; letter-spacing: .22em; text-transform: uppercase; color: var(--gold-hi); }
.bc__t { margin: .3rem 0 .4rem; font-size: clamp(1.45rem, 1.1rem + 1.6vw, 2.2rem); line-height: 1.15; color: var(--ink); }
.bc__lede { margin: 0 0 1.1rem; color: var(--ink-2); }
.bc__btn { pointer-events: none; }
@media (max-width: 560px) { .bc__card { flex-direction: column; text-align: center; } }
@media (prefers-reduced-motion: reduce) { .bc__disc { animation: none; } .bc__card { transition: none; } }
/* m336: el recuadro de la música, al final de «Aeterna en imágenes», con el rojo romano */
.bc--ae { padding-block: clamp(2rem, 5vw, 3.5rem) 0; }
.bc--ae .bc__card { background: radial-gradient(120% 160% at 0% 50%, rgba(143,29,44,.32), transparent 55%), radial-gradient(90% 140% at 100% 0%, rgba(214,178,106,.14), transparent 60%), rgba(8,5,6,.88); }
/* m390: sin Bandcamp; el recuadro avisa de que la música llegará a la web */
.bc__card--pronto:hover { transform: none; }
.bc__pronto { margin: .9rem 0 0; font-family: var(--f-sc); letter-spacing: .06em; color: var(--gold-hi); font-size: clamp(.95rem, .9rem + .3vw, 1.1rem); }