/* ═══════════ LA LIBRARY EN BANDAS · los mundos · las obras por abrir · los temas ═══════════
   Una sola banda para todas las obras, vestida con el arte y la paleta de cada una.
   El marco (barra, filos, rótulos) sigue siendo de la casa; un tema redefine sus tokens dentro de
   su banda o de su subpágina (body[data-tema]). */

/* Perandory: la letra de los títulos de ALMESC (la dio el autor), en sus tres anchos */
@font-face{font-family:'Perandory';src:url('../fuentes/perandory-regular.woff2') format('woff2');font-stretch:100%;font-display:swap}
@font-face{font-family:'Perandory';src:url('../fuentes/perandory-semicondensada.woff2') format('woff2');font-stretch:87.5%;font-display:swap}
@font-face{font-family:'Perandory';src:url('../fuentes/perandory-condensada.woff2') format('woff2');font-stretch:75%;font-display:swap}

:root{--t-fondo:#07070A;--t-panel:#0D0B09;--t-linea:rgba(201,163,95,.3);--t-suelo:rgba(201,163,95,.1);
  --t-titulo:var(--f-rotulo);--t-peso:600}
[data-tema="sinead"]{--gold-idle:#9C7330;--gold:#D9A441;--gold-hi:#F2C45A;--ivory:#F1E4D6;--ivory-dim:#B99A8C;
  --t-fondo:#0E0707;--t-panel:#151714;--t-linea:rgba(217,164,65,.36);--t-suelo:rgba(142,31,27,.42)}
[data-tema="almesc"]{--gold-idle:#8D8794;--gold:#D9D3DE;--gold-hi:#FFFFFF;--ivory:#ECE8EF;--ivory-dim:#A49EAB;
  --t-fondo:#131217;--t-panel:#24222B;--t-linea:rgba(230,225,234,.28);--t-suelo:rgba(196,73,79,.3);
  --t-titulo:'Perandory','Cinzel',serif;--t-peso:400}
[data-tema="peregrino"]{--gold-idle:#A47A3C;--gold:#E7B45C;--gold-hi:#F7D08A;--ivory:#F8E8F3;--ivory-dim:#CDA6C8;
  --t-fondo:#140A18;--t-panel:#1F0F26;--t-linea:rgba(231,180,92,.36);--t-suelo:rgba(157,63,168,.4);
  --t-titulo:'Poiret One','Cinzel',serif;--t-peso:400}
[data-tema="gaia"]{--gold-idle:#6B78E0;--gold:#DCE0FF;--gold-hi:#FFFFFF;--ivory:#EEF0FF;--ivory-dim:#9FA7DA;
  --t-fondo:#04051A;--t-panel:#0A0D2C;--t-linea:rgba(126,142,255,.34);--t-suelo:rgba(255,58,140,.3);
  --t-titulo:'Barlow','Cinzel',serif;--t-peso:300}
:is([data-tema="almesc"],[data-tema="gaia"]) :is(.vara,.rotulo-oro){filter:grayscale(1) brightness(1.7)}
/* los títulos de ALMESC, todos en Perandory: el libro, su lomo (condensada) y, cuando abra, sus capítulos */
[data-tema="almesc"] :is(.libro3d .pagina .tit,.libro3d .lomo span,h1.titulo,a.tit[href^="#/leer/"],.portada-libro h1.subtitulo){
  font-family:var(--t-titulo);font-weight:var(--t-peso);letter-spacing:.04em}
body[data-tema="almesc"] .portada-libro h1.subtitulo{font-size:clamp(30px,3.6vw,52px);line-height:1}
[data-tema="almesc"] .libro3d .lomo span{font-stretch:75%}

/* dentro de los capítulos de ALMESC: el cuerpo y los formatos especiales en Pathway Gothic One (la dio el autor);
   el título, la cifra y la letra capital, en Perandory. Es muy estrecha: sube de tamaño para leerse igual.
   Sin cursiva propia: la cursiva de epígrafes, visiones y documentos la inclina el navegador. */
@font-face{font-family:'Pathway Gothic One';src:url('../fuentes/pathway-gothic-one.ttf') format('truetype');font-display:swap}
body[data-tema="almesc"]{--f-almesc:'Pathway Gothic One','Arial Narrow',sans-serif}
html:not([data-dislexia="1"]) body[data-tema="almesc"] :is(.b-cuerpo,.b-apertura){font-family:var(--f-almesc);
  font-size:calc(clamp(20px,1.6vw,23px) * var(--letra));line-height:1.54;letter-spacing:.012em}
body[data-tema="almesc"] .b-apertura:not(.raya)::first-letter{font-family:'Perandory','Cinzel',serif;font-weight:400;font-size:3.6em;line-height:.8}
body[data-tema="almesc"] .portada.capitulo .cifra{font-family:var(--t-titulo);font-weight:400}
body[data-tema="almesc"] :is(.b-epigrafe,.b-epigrafe cite,.b-vision p,.b-verso,.b-documento,.b-documento cite,.b-nota p,
  .b-banda figcaption,.escena-rotulo,.pendiente,.entre-escenas .rotulo){font-family:var(--f-almesc)}
body[data-tema="almesc"] .b-nota p:not(.nota-rot){font-size:calc(clamp(20px,1.65vw,23px) * var(--letra));line-height:1.45}
body[data-tema="almesc"] .b-epigrafe{font-size:calc(clamp(20px,1.75vw,24px) * var(--letra));line-height:1.45}
body[data-tema="almesc"] :is(.b-vision p,.b-verso){font-size:calc(clamp(20px,1.7vw,23px) * var(--letra));line-height:1.55}
body[data-tema="almesc"] .b-documento{font-size:calc(clamp(19px,1.5vw,21.5px) * var(--letra));line-height:1.5}
body[data-tema="almesc"] :is(.b-documento cite,.b-epigrafe cite,.b-nota .nota-rot,.escena-rotulo){font-size:12.5px;letter-spacing:.26em}
body[data-tema="almesc"] .entre-escenas .rotulo{font-size:13px;letter-spacing:.28em}
body[data-tema="almesc"] .b-banda figcaption{font-size:16.5px}
body[data-tema="almesc"] .pendiente{font-size:.9em}
/* el papel de ALMESC: blanco papel, no el pergamino de Evernoth; tinta neutra y lo ya leído en gris cálido */
body[data-tema="almesc"]{--vellum:#EEEEEF;--vellum-lit:#FAFAFA;--vellum-deep:#E2E2E3;--ink:#2A2622;--ink-soft:#5C5650;--ink-faint:#8B847B}
/* la hoja, por capas y en este orden: el papel liso, el toque de color bajo el filo de arriba (::before),
   el grano en su propia capa (::after) y, por encima de todo, el texto (.bloque, z-index 1). */
body[data-tema="almesc"] .papel{background:linear-gradient(172deg,#FBFBFA 0%,var(--vellum) 56%,var(--vellum-deep) 100%)}
/* un toque de color bajo el filo de arriba de cada hoja: el azul de la cubierta por la izquierda y, por la derecha,
   el color de su ilustración (--toque cambia de hoja en hoja; la forja lo saca de la lámina o de la cubierta) */
body[data-tema="almesc"] .papel::before{content:"";position:absolute;left:0;right:0;top:0;height:min(230px,24%);z-index:0;
  pointer-events:none;mix-blend-mode:multiply;background:
    radial-gradient(58% 100% at 15% 0%,color-mix(in srgb,var(--azul,#5470D6) 20%,transparent),transparent 74%),
    radial-gradient(50% 100% at 88% 0%,color-mix(in srgb,var(--toque,var(--azul,#5470D6)) 20%,transparent),transparent 76%)}
/* el grano del papel: su capa, bajo el texto */
body[data-tema="almesc"] .papel::after{opacity:.5;mix-blend-mode:multiply;
  background-image:url('../arte/almesc/almesc-papel.webp');background-size:512px 512px;background-repeat:repeat}
body[data-tema="almesc"] .papel .versal{color:var(--ink)}
/* al leer ALMESC, el fondo alrededor de la hoja es papel crema con los mismos degradados que el tema (rosado arriba,
   más hondo abajo); la textura blanca, multiplicada sobre el crema. Lo que estaba pensado para el negro pasa a tinta. */
body[data-tema="almesc"][data-nivel="capitulo"]{
  background:radial-gradient(120% 70% at 50% 0%,rgba(214,150,140,.30),transparent 64%) fixed,
    linear-gradient(to bottom,transparent 35%,rgba(150,118,78,.20)) fixed,
    url('../arte/almesc/almesc-papel.webp') 0 0/512px 512px repeat,#F0E6D4;
  background-blend-mode:normal,normal,multiply,normal}
body[data-tema="almesc"][data-nivel="capitulo"] .hoja::before{background:none;box-shadow:0 26px 62px 14px rgba(120,92,56,.3)}
/* la portada oscura del capítulo se funde en el crema, sin corte */
body[data-tema="almesc"][data-nivel="capitulo"] .umbral-cap{-webkit-mask-image:linear-gradient(#000 78%,transparent);mask-image:linear-gradient(#000 78%,transparent)}
body[data-tema="almesc"][data-nivel="capitulo"] :is(.entre-pliegos,.entre-escenas,.paso-escena) .vara{filter:grayscale(1) brightness(.55)}
body[data-tema="almesc"][data-nivel="capitulo"] :is(.entre-escenas,.paso-escena) .rotulo{color:#4A3B2A}
body[data-tema="almesc"][data-nivel="capitulo"] .paso-escena.fin .rotulo{font-family:var(--t-titulo);font-weight:400;
  font-size:clamp(20px,2.4vw,28px);letter-spacing:.2em}
body[data-tema="almesc"][data-nivel="capitulo"] .paso-escena .cual{color:#6B5E50}
/* los botones del final, con contraste sobre el crema: el principal en tinta llena; los otros, borde y letra de tinta */
body[data-tema="almesc"][data-nivel="capitulo"] .paso-escena.fin .boton{opacity:1;font-family:var(--t-titulo);font-weight:400;
  font-size:13.5px;letter-spacing:.3em;padding:16px 30px;color:#2A2622;background:rgba(255,255,255,.7);
  border:1px solid rgba(42,38,34,.72);box-shadow:inset 0 0 0 3px rgba(255,255,255,.8),inset 0 0 0 4px rgba(42,38,34,.18);
  -webkit-backdrop-filter:none;backdrop-filter:none;
  transition:color .35s,background .35s,border-color .35s,box-shadow .35s}
/* sobre el papel no hay cristal: estos son de tinta, con su marco entero (él: «necesitan contraste») */
body[data-tema="almesc"][data-nivel="capitulo"] .paso-escena.fin .boton::before,
body[data-tema="almesc"][data-nivel="capitulo"] .paso-escena.fin .boton::after{display:none}
body[data-tema="almesc"][data-nivel="capitulo"] .paso-escena.fin .boton.mayor{color:#F7F2E9;background:#2A2622;border-color:#2A2622;
  box-shadow:inset 0 0 0 3px #2A2622,inset 0 0 0 4px rgba(247,242,233,.34)}
body[data-tema="almesc"][data-nivel="capitulo"] .paso-escena.fin .boton:hover{color:#F7F2E9;background:#3B342E;border-color:#3B342E;
  box-shadow:inset 0 0 0 3px #3B342E,inset 0 0 0 4px rgba(247,242,233,.34)}
body[data-tema="almesc"][data-nivel="capitulo"] .paso-escena.fin .boton.mayor:hover{background:#15110E;border-color:#15110E;
  box-shadow:inset 0 0 0 3px #15110E,inset 0 0 0 4px rgba(247,242,233,.44)}
/* en el móvil, los tres del mismo ancho: uno debajo de otro, no tres anchos distintos */
@media (max-width:620px){
  body[data-tema="almesc"][data-nivel="capitulo"] .paso-escena.fin .acciones{display:grid;gap:12px;width:min(320px,80vw);margin-inline:auto}
}
body[data-tema="almesc"] .papel .bloque.leido,body[data-tema="almesc"] .papel .bloque.leido :is(.w,.versal,b,em,i,cite,p,span),
body[data-tema="almesc"] .papel .bloque.leido::first-letter{color:#A6A098}
/* las targetes y visiones de ALMESC son frases cortas: un halo estrecho, no una franja de lado a lado */
body[data-tema="almesc"] .b-vision{margin-block:clamp(20px,3.4vh,34px);padding:clamp(12px,2.2vh,22px) 0}
body[data-tema="almesc"] .b-vision::before{inset:-10% 16%}
/* en el móvil, la letra estrecha justificada abre calles entre las palabras: a la izquierda */
@media (max-width:700px){html:not([data-dislexia="1"]) body[data-tema="almesc"] :is(.b-cuerpo,.b-apertura){text-align:left}}

/* una subpágina con tema: su suelo de color; el reloj astral y las plumas son de Evernoth */
body:is([data-tema="sinead"],[data-tema="almesc"],[data-tema="peregrino"],[data-tema="gaia"]){
  background:radial-gradient(120% 70% at 50% 0%,var(--t-suelo),transparent 64%) fixed,var(--t-fondo)}
body :is(#cielo,#plumas){transition:opacity .8s ease}
body:is([data-tema="sinead"],[data-tema="almesc"],[data-tema="peregrino"],[data-tema="gaia"]) :is(#cielo,#plumas){opacity:0}
[data-tema] .portada .marco{border-color:var(--t-linea)}
.libro[data-tema] .pie .tit{font-family:var(--t-titulo);font-weight:var(--t-peso)}

/* ═══ la banda ═══ */
.bandas{display:grid;gap:clamp(26px,4.4vh,46px)}
.banda{--alto:clamp(236px,26vw,330px);--pad:clamp(14px,1.6vw,22px);position:relative;display:grid;
  grid-template-columns:auto minmax(0,1fr) minmax(260px,38%);align-items:center;height:var(--alto);
  container-type:size;isolation:isolate;text-decoration:none;color:inherit;
  background:radial-gradient(60% 110% at 81% 50%,var(--t-suelo),transparent 72%),var(--t-panel)}
/* los filos, arriba y abajo, desvanecidos en los extremos: ninguna línea llega de borde a borde */
.banda::before,.banda::after{content:"";position:absolute;left:0;right:0;height:1px;z-index:4;pointer-events:none;
  background:linear-gradient(90deg,transparent,var(--t-linea) 16%,var(--t-linea) 84%,transparent)}
.banda::before{top:0}
.banda::after{bottom:0}
a.banda:focus-visible{outline:1px solid var(--cyan);outline-offset:6px}
.banda.cerrada{opacity:.6}

/* la ilustración: entra por la izquierda y se funde en el color de la obra */
.banda .arte{position:absolute;top:0;bottom:0;left:0;width:70%;overflow:hidden;z-index:0;
  -webkit-mask-image:linear-gradient(90deg,#000 0%,#000 46%,transparent 100%);mask-image:linear-gradient(90deg,#000 0%,#000 46%,transparent 100%)}
.banda .arte img{width:100%;height:100%;object-fit:cover;filter:saturate(.86) brightness(.66);transform:scale(1.02);
  transition:filter .8s ease,transform 1.8s var(--curva)}
a.banda:hover .arte img{filter:saturate(1) brightness(.84);transform:scale(1.06)}
.banda .arte::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,color-mix(in srgb,var(--t-panel) 80%,transparent) 0%,color-mix(in srgb,var(--t-panel) 20%,transparent) 34%,transparent 60%)}

/* el nicho: la tapa en su marco; de aquí sale el libro */
.banda .nicho{position:relative;z-index:2;margin-left:clamp(18px,3.6vw,56px);height:calc(100cqh - 2 * var(--pad));
  width:calc((100cqh - 2 * var(--pad)) * .7);background:var(--t-fondo)}
.banda .nicho .plana{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.banda .nicho::after{content:"";position:absolute;inset:0;pointer-events:none;border:1px solid var(--t-linea);
  box-shadow:inset 0 0 0 4px rgba(7,7,10,.42),inset 0 0 0 5px color-mix(in srgb,var(--gold) 16%,transparent);transition:border-color .45s}
a.banda:hover .nicho::after{border-color:color-mix(in srgb,var(--gold-hi) 60%,transparent)}
.banda .monograma{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--t-titulo);font-weight:var(--t-peso);
  font-size:36cqh;line-height:1;color:color-mix(in srgb,var(--gold) 22%,transparent)}

/* el nombre */
.banda .nombre{grid-column:3;position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:var(--pad) clamp(18px,3vw,44px)}
.banda .logo{width:min(90%,330px);max-height:40cqh;object-fit:contain}
.banda .tit{font-family:var(--t-titulo);font-weight:var(--t-peso);font-size:clamp(28px,15cqh,58px);letter-spacing:.08em;line-height:1;
  margin:0;text-wrap:balance;background:linear-gradient(178deg,var(--gold-hi) 0%,var(--gold) 58%,var(--gold-idle) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 2px 14px rgba(0,0,0,.6))}
.banda .vara{display:block;width:min(66%,230px);margin:clamp(10px,4.6cqh,18px) auto;opacity:.8}
.banda .sub{font-family:var(--f-susurro);font-style:italic;font-size:clamp(15px,6cqh,22px);line-height:1.25;color:var(--ivory);margin:0}
.banda .estado{display:inline-flex;align-items:center;gap:12px;margin:clamp(10px,5.4cqh,22px) 0 0;font-family:var(--f-rotulo);
  font-size:9.5px;letter-spacing:.3em;text-transform:uppercase;color:var(--gold);transition:color .45s}
.banda .estado i{display:block;width:24px;height:1px;background:linear-gradient(90deg,currentColor,transparent);transition:width .5s var(--curva)}
a.banda:hover .estado{color:var(--gold-hi)}
a.banda:hover .estado i{width:44px}

/* por dónde va la obra, dicho en claro: el tanto por ciento y los minutos que quedan */
.cuenta-obra{margin:14px 0 0;font-family:var(--f-rotulo);font-size:9.5px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--gold-idle)}

/* la estantería de un mundo, colgada de su banda: sus libros aquí mismo, sin bajar a su página */
.conjunto .estante-mundo{margin:clamp(16px,2.6vh,28px) 0 0;padding:0 clamp(10px,2.4vw,40px)}
.estante-mundo .fila{display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(20px,2.8vw,34px) clamp(14px,2vw,28px)}
.estante-mundo .fila > *{flex:0 1 clamp(116px,14vw,178px)}

/* las obras que aún no tienen arte: fichas pequeñas en una fila, no bandas vacías */
.fichas{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:clamp(16px,2.4vw,26px);
  margin-top:clamp(26px,4.4vh,46px)}
.fichas:empty{display:none}
.banda.cerrada{--alto:clamp(120px,11vw,146px);grid-template-columns:auto minmax(0,1fr);opacity:.72}
.banda.cerrada .nicho{margin-left:var(--pad)}
.banda.cerrada .nombre{grid-column:2;padding:var(--pad) 12px}
.banda.cerrada .tit{font-size:clamp(17px,16cqh,24px)}
.banda.cerrada .vara{width:min(70%,120px);margin:8px auto}
.banda.cerrada .estado{margin-top:4px;letter-spacing:.22em}

@media (max-width:700px){
  .banda{--alto:clamp(206px,60vw,250px);grid-template-columns:auto minmax(0,1fr)}
  .banda .nombre{grid-column:2;padding:var(--pad) 14px var(--pad) 8px}
  .banda .nicho{margin-left:var(--pad)}
  .banda .arte{width:100%;-webkit-mask-image:none;mask-image:none}
  .banda .arte::after{background:linear-gradient(90deg,color-mix(in srgb,var(--t-panel) 50%,transparent) 0%,color-mix(in srgb,var(--t-panel) 88%,transparent) 55%)}
  .banda .logo{max-height:34cqh}
  .banda .estado{letter-spacing:.22em}
  .banda.cerrada{--alto:120px}
}

/* ═══ un mundo: su portada y su estantería ═══ */
.portada-mundo{min-height:86svh}
.estante-mundo{position:relative;z-index:2;max-width:1180px;margin:0 auto;padding:clamp(40px,8vh,84px) clamp(20px,5vw,56px) 16vh}
.estante-mundo > header{text-align:center;margin-bottom:clamp(30px,5vh,56px)}
.estante-mundo h2{font-family:var(--f-rotulo);font-weight:600;font-size:clamp(24px,3.4vw,40px);letter-spacing:.1em;margin:0 0 18px}

/* ═══ una obra por abrir: su arte, su libro y su nombre, en su tema ═══ */
.por-abrir .portada-libro .lienzo{filter:blur(6px) brightness(.58) saturate(.95)}
.por-abrir .portada-libro .velo{background:
  linear-gradient(90deg,color-mix(in srgb,var(--t-fondo) 30%,transparent) 0%,color-mix(in srgb,var(--t-fondo) 84%,transparent) 64%),
  linear-gradient(to top,var(--t-fondo) 0%,transparent 44%)}
.por-abrir .logo-obra{display:block;width:min(300px,64vw);margin:0 auto}
.por-abrir .titulo-obra{font-family:var(--t-titulo);font-weight:var(--t-peso);font-size:clamp(38px,6vw,84px);letter-spacing:.08em;line-height:1;
  margin:0;text-wrap:balance;background:linear-gradient(178deg,var(--gold-hi) 0%,var(--gold) 58%,var(--gold-idle) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 2px 18px rgba(0,0,0,.7))}
.por-abrir .subtitulo-obra{font-family:var(--f-susurro);font-style:italic;font-size:clamp(18px,2.3vw,27px);color:var(--ivory);
  margin:clamp(10px,1.6vh,16px) 0 0;text-shadow:0 1px 12px rgba(0,0,0,.85)}
.por-abrir .sello-abrir{display:inline-block;margin:clamp(22px,3.6vh,36px) 0 0;padding:10px 20px;border:1px solid var(--t-linea);
  font-family:var(--f-rotulo);font-size:10px;letter-spacing:.34em;text-transform:uppercase;color:var(--gold)}
@media (max-width:760px){
  .por-abrir .portada-libro .velo{background:linear-gradient(to top,var(--t-fondo) 10%,color-mix(in srgb,var(--t-fondo) 62%,transparent) 58%,color-mix(in srgb,var(--t-fondo) 30%,transparent))}
}