/* La Abadía del Crimen 2600 · estilo "Códice iluminado" */
/* Papiro Abadía: las letras del pergamino del juego (repo abadia-2600-font) */
@font-face{font-family:"Papiro Abadia";src:url(../fonts/papiro.woff2?v=2) format("woff2");font-display:swap}
:root{
  --parchment:#efe4c8; --parchment-2:#e4d4ad; --ink:#2b1d12; --ink-soft:#5a4532;
  --vermilion:#a8321f; --gold:#b08a3e; --rule:#c9b48a;
  --f-gothic:"Papiro Abadia",serif;
  --f-body:"Cormorant Garamond",Georgia,serif;
  --f-sc:"IM Fell English SC",Georgia,serif;
}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth}
/* Cifras de caja alta: con las de estilo antiguo de Cormorant, el 0 parece una o */
body{background:var(--parchment);color:var(--ink);font:400 1.2rem/1.65 var(--f-body);font-variant-numeric:lining-nums;
  background-image:radial-gradient(ellipse at 20% 0%,rgba(255,255,255,.35),transparent 60%),radial-gradient(ellipse at 100% 100%,rgba(120,80,30,.18),transparent 55%);
  background-attachment:fixed;min-height:100vh}
a{color:var(--vermilion)}
abbr[title]{text-decoration:underline dotted var(--gold);text-decoration-thickness:1px;text-underline-offset:3px;cursor:help}
img{max-width:100%;height:auto;display:block}

/* Cabecera */
/* Cabecera fija en dos filas, igual en todos los idiomas: logotipo e idioma arriba, menú debajo */
.site-header{max-width:1100px;margin:auto;padding:28px 16px 10px;display:grid;grid-template-columns:1fr auto;grid-template-areas:"logo idiomas" "nav nav";align-items:baseline;column-gap:16px;row-gap:12px;border-bottom:1px solid var(--rule)}
.site-header .logo{grid-area:logo}
.site-header .site-nav{grid-area:nav}
.site-header .idiomas{grid-area:idiomas}
.logo{font:1.6rem var(--f-gothic);color:var(--vermilion);text-decoration:none}
.site-nav{display:flex;gap:22px;flex-wrap:wrap;font:1rem var(--f-sc);letter-spacing:.06em}
.site-nav a{color:var(--ink-soft);text-decoration:none;border-bottom:1px solid transparent}
.site-nav a:hover{color:var(--vermilion)}
.site-nav a[aria-current="page"]{color:var(--vermilion);border-color:var(--vermilion)}

/* Selector de idioma */
.idiomas{font:1rem var(--f-sc);letter-spacing:.06em;color:var(--gold);white-space:nowrap}
.idiomas a{color:var(--ink-soft);text-decoration:none;border-bottom:1px solid transparent}
.idiomas a:hover{color:var(--vermilion);border-color:var(--vermilion)}
.idiomas [aria-current]{color:var(--vermilion)}

/* Folio: columna central con márgenes anotados */
.folio{max-width:1100px;margin:auto;padding:56px 16px;display:grid;grid-template-columns:1fr 2.2fr 1fr;gap:40px}
.folio > .main{grid-column:2}
.folio > *{min-width:0;overflow-wrap:break-word}
.margin{font-style:italic;color:var(--ink-soft);font-size:1rem}
.margin .note{border-top:1px solid var(--rule);padding-top:12px;margin-bottom:28px}
.margin b,.note b{font:1rem var(--f-sc);font-style:normal;color:var(--vermilion);display:block}

.kicker{font:1rem var(--f-sc);letter-spacing:.2em;color:var(--gold);text-align:center}
h1{font:clamp(3rem,8vw,6rem)/1 var(--f-gothic);text-align:center;margin:12px 0 4px}
h1 span{color:var(--vermilion)}
/* «2600» con una geométrica cercana al logotipo de la consola y el degradado arcoíris de Atari */
.n2600{font-family:"Urbanist",sans-serif;font-weight:900;letter-spacing:.02em}
h1 .n2600{color:var(--ink);font-size:.82em;display:inline-block;margin-top:.12em}
.logo .n2600{font-size:.82em;color:var(--vermilion)}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .n2600{color:transparent !important;-webkit-background-clip:text;background-clip:text;
    background-image:linear-gradient(180deg,#e4262b 8%,#f26b21 24%,#fbb517 38%,#9cc63b 52%,#1fa39a 66%,#2a5caa 80%,#6b3a96 94%)}
}

/* Consola en la portada */
.consola{max-width:400px;margin:14px auto 10px}
.consola img{width:100%;height:auto;filter:drop-shadow(0 10px 14px rgba(60,35,10,.28))}

.page-title{font-size:clamp(2.6rem,6vw,4.4rem)}
.sub{text-align:center;font-style:italic;font-size:1.4rem;color:var(--ink-soft);margin-bottom:36px}
h2{font:2.2rem/1.1 var(--f-gothic);color:var(--vermilion);margin:56px 0 18px}
h2 .num{color:var(--gold);margin-right:.3em}
h3{font:1.3rem var(--f-sc);margin:28px 0 8px;letter-spacing:.03em}

.text p{margin-bottom:1em;text-align:justify;hyphens:auto}
.text ul{margin:0 0 1em 1.2em}
.capital::first-letter{float:left;font:5.2rem/.8 var(--f-gothic);color:var(--vermilion);padding:8px 10px 0 0}

blockquote{margin:28px 0;padding:6px 0 6px 22px;border-left:3px double var(--vermilion);font-style:italic;font-size:1.35rem;color:var(--ink-soft)}
blockquote cite{display:block;font:1rem var(--f-sc);font-style:normal;color:var(--gold);margin-top:6px}

.forty{display:flex;align-items:center;gap:16px;justify-content:center;margin:40px 0;color:var(--gold);font:1rem var(--f-sc);letter-spacing:.15em}
.forty::before,.forty::after{content:"";flex:1;height:1px;background:var(--rule)}
.forty strong{font:3rem var(--f-gothic);color:var(--vermilion);letter-spacing:0}

/* Láminas (figuras) */
.plate{border:1px solid var(--rule);padding:10px;background:var(--parchment-2);margin:30px 0}
.plate img{width:100%;image-rendering:pixelated}
.plate .ph{aspect-ratio:4/3;background:repeating-linear-gradient(45deg,#d9c79c 0 10px,#d2bf92 10px 20px);display:grid;place-items:center;color:var(--ink-soft);font-style:italic;text-align:center;padding:16px}
.plate figcaption{font-size:.95rem;font-style:italic;text-align:center;padding-top:8px}
.plate .credit{font-size:.8rem;font-style:normal;color:var(--ink-soft)}
.plate .credit a{color:inherit}
.portraits .plate .ph{aspect-ratio:527/388}
.plate figcaption b{font:.95rem var(--f-sc);font-style:normal;color:var(--vermilion)}
.plates{display:grid;grid-template-columns:1fr 1fr;gap:18px}
/* Bodegón: imagen con fondo transparente, sin el marco de lámina (la maqueta de la caja) */
.bodegon{margin:30px 0}
.bodegon img{width:100%;height:auto}
.bodegon figcaption{font-size:.95rem;font-style:italic;text-align:center;padding-top:4px}
.bodegon figcaption b{font:.95rem var(--f-sc);font-style:normal;color:var(--vermilion)}
.bodegon .credit{font-size:.8rem;font-style:normal;color:var(--ink-soft)}
.plates .plate{margin:0}
/* A dos columnas; si la última lámina queda sola, centrada */
.plates>.plate:last-child:nth-child(odd){grid-column:1/-1;justify-self:center;width:calc(50% - 9px)}
@media (max-width:520px){.plates{grid-template-columns:1fr}.plates>.plate:last-child:nth-child(odd){width:auto;justify-self:stretch}}

/* Camino: secuencia de láminas */
.camino{list-style:none;padding:0;margin:24px 0}
.camino li{position:relative}
.camino li+li{padding-top:34px}
.camino li+li::before{content:"✠";position:absolute;top:0;left:50%;transform:translateX(-50%);color:var(--vermilion);font-size:1.4rem;line-height:1}
.camino .plate{margin:0}

/* Galería: comparador con cortinilla */
.comparador{margin:30px 0;border:1px solid var(--rule);background:var(--parchment-2);padding:12px}
.comp-selects{display:flex;gap:16px;flex-wrap:wrap;margin-bottom:10px;font:1rem var(--f-sc)}
.comp-selects label{display:flex;gap:8px;align-items:center;flex:1 1 220px}
.comp-selects select{flex:1;font:1rem var(--f-body);font-variant-numeric:lining-nums;background:var(--parchment);color:var(--ink);border:1px solid var(--rule);padding:4px 6px}
.comp-vista,.comp-marco{position:relative;aspect-ratio:4/3;background:#000;overflow:hidden}
.comp-vista img,.comp-marco img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;image-rendering:pixelated}
.comp-a{position:absolute;inset:0}
.comp-vista canvas{position:absolute;inset:0;width:100%;height:100%}
.comp-linea{position:absolute;top:0;bottom:0;width:2px;background:var(--parchment);box-shadow:0 0 0 1px var(--vermilion);transform:translateX(-1px);pointer-events:none}
#comp-rango{width:100%;margin:12px 0 4px;accent-color:var(--vermilion)}
.comp-pie{text-align:center;font-style:italic;font-size:1rem;color:var(--ink-soft)}

/* Vídeo incrustado (16:9) */
.video-marco{position:relative;aspect-ratio:16/9;background:#000}
.video-marco iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* Portadas de libros: lámina estrecha centrada */
.plate.libro{max-width:240px;margin-left:auto;margin-right:auto}

/* Retratos */
.portraits{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:30px 0}

/* Cronología */
.timeline{list-style:none;padding:0;margin:24px 0;border-left:1px solid var(--rule)}
.timeline li{position:relative;padding:0 0 18px 22px}
.timeline li::before{content:"";position:absolute;left:-5px;top:.55em;width:9px;height:9px;background:var(--vermilion);transform:rotate(45deg)}
.timeline .y{font:1.05rem var(--f-sc);color:var(--vermilion);margin-right:.4em}

/* Fichas */
/* En filas que se centran: si la última queda incompleta, sus fichas van en el centro.
   Columnas como antes (fichas de 220 px como mínimo): 4, 3, 2 o 1 según el ancho. */
.cards{display:flex;flex-wrap:wrap;justify-content:center;gap:24px}
.card{border-top:3px double var(--vermilion);padding-top:14px;text-decoration:none;color:inherit;display:block;flex:0 0 100%;min-width:0}
@media(min-width:496px){.card{flex-basis:calc((100% - 24px)/2)}}
@media(min-width:740px){.card{flex-basis:calc((100% - 48px)/3)}}
@media(min-width:984px){.card{flex-basis:calc((100% - 72px)/4)}}
.card .n{font:2rem var(--f-gothic);color:var(--vermilion)}
/* Títulos: la primera letra con la capitular del pergamino; el resto de mayúsculas en versalitas */
.page-title,h2,.card .n,.forty strong{font-feature-settings:"c2sc"}
.page-title::first-letter,h2::first-letter,.forty strong::first-letter{font-feature-settings:normal}
.card h3{margin:4px 0 6px}
.card p{font-size:1.05rem;color:var(--ink-soft)}
a.card:hover h3{color:var(--vermilion)}
.chapters{max-width:1100px;margin:auto;padding:0 16px 80px}

.btn{display:inline-block;font:1rem var(--f-sc);letter-spacing:.08em;color:var(--parchment);background:var(--vermilion);padding:10px 18px;text-decoration:none;margin:8px 0}
.btn:hover{background:var(--ink)}

/* Tablas */
.tabla{width:100%;border-collapse:collapse;margin:16px 0 26px;font-size:1.05rem}
.tabla th{font:1rem var(--f-sc);letter-spacing:.04em;color:var(--vermilion);text-align:left;border-bottom:3px double var(--vermilion);padding:6px 8px}
.tabla td{border-bottom:1px solid var(--rule);padding:6px 8px;vertical-align:top}
.tabla td:first-child{white-space:nowrap;font-style:italic;color:var(--ink-soft)}
.tabla.datos td:first-child{white-space:normal;width:24%}
.tabla.datos td:last-child{width:22%}
@media(max-width:520px){.tabla td:first-child{white-space:normal}}

.pending{border:1px dashed var(--gold);padding:14px 18px;color:var(--ink-soft);font-style:italic;margin:20px 0}

.compartir{max-width:1100px;margin:40px auto 0;padding:16px 16px 6px;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px 18px;border-top:1px solid var(--rule)}
.compartir .rotulo{font:italic .95rem var(--f-sc);letter-spacing:.04em;color:var(--ink-soft)}
.compartir a,.compartir button{display:inline-flex;color:var(--vermilion);background:none;border:0;padding:4px;cursor:pointer;transition:color .15s,transform .15s}
.compartir a:hover,.compartir button:hover,.compartir a:focus-visible,.compartir button:focus-visible{color:var(--ink);transform:translateY(-1px)}
.compartir svg{width:22px;height:22px}
.compartir [hidden]{display:none}
.compartir~.site-footer{border-top:0}
.site-footer{text-align:center;padding:30px 16px;border-top:1px solid var(--rule);font-style:italic;color:var(--ink-soft);font-size:1rem}
.site-footer p+p{margin-top:6px;font-size:.9rem}

@media(max-width:820px){
  .folio{grid-template-columns:1fr;padding-top:36px}
  .folio > .main{grid-column:1}
  .margin{order:3}
  .portraits{grid-template-columns:1fr}
}

/* Descarga de la ROM */
.descarga{display:flex;flex-wrap:wrap;gap:10px;margin:18px 0 6px}
.descarga .btn{margin:0}
.btn-sec{color:var(--vermilion);background:transparent;border:1px solid var(--vermilion)}
.btn-sec:hover{color:var(--parchment);background:var(--vermilion)}
.rom-version{font-size:.95rem;font-style:italic;color:var(--ink-soft);margin:6px 0 18px;overflow-wrap:anywhere}
.rom-version code{font-style:normal;font-size:.85em}
.text code{font-size:.8em;word-break:break-word}

/* Invitación a jugar en la portada, tras las láminas */
.invitacion{text-align:center;margin:8px 0 40px;padding-top:34px;position:relative}
.invitacion::before{content:"✠";position:absolute;top:0;left:50%;transform:translateX(-50%);color:var(--vermilion);font-size:1.4rem;line-height:1}
.invitacion p{font-style:italic;font-size:1.25rem;color:var(--ink-soft);max-width:34em;margin:0 auto 14px}
.invitacion .btn{margin:6px 4px}
.invitacion .btn:first-of-type{font-size:1.15rem;padding:12px 26px}

/* Visor de láminas (js/lamina.js) */
figure.plate img[data-visor]{cursor:zoom-in}
figure.plate img[data-visor]:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.visor{border:0;padding:0;margin:auto;background:transparent;max-width:100vw;max-height:100vh;width:100vw;height:100vh;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;overflow:hidden;padding-top:max(66px,9vh)}
.visor:not([open]){display:none}
.visor::backdrop{background:rgba(20,13,7,.88)}
.visor-marco{flex:1 1 auto;min-height:0;width:100vw;overflow:auto;touch-action:none;scrollbar-width:none;overscroll-behavior:contain}
.visor-marco::-webkit-scrollbar{display:none}
.visor-img{display:block;max-width:none;max-height:none;box-shadow:0 10px 40px rgba(0,0,0,.6);background:#000;cursor:zoom-in;user-select:none;-webkit-user-select:none}
.visor-zoom .visor-img{cursor:grab}
.visor-arrastre .visor-img{cursor:grabbing}
.visor-zoom .visor-pie{display:none}
.visor.visor-zoom{padding-top:0}
.visor-pie{flex:0 0 auto;padding:0 0 max(14px,2vh)}
.visor-pie{max-width:min(800px,92vw);margin:0;text-align:center;font:italic 1.05rem/1.4 var(--f-body);color:var(--parchment);font-variant-numeric:lining-nums}
.visor-pie b{font:1rem var(--f-sc);font-style:normal;color:var(--gold)}
.visor-pie .credit{font-size:.85rem;color:rgba(239,228,200,.75)}
.visor-pie a{color:inherit}
.visor-botones{position:fixed;top:max(14px,2vh);right:max(14px,2vw);display:flex;gap:10px;z-index:1}
.visor-boton{width:44px;height:44px;display:flex;align-items:center;justify-content:center;
  font:1.4rem/1 var(--f-body);color:var(--parchment);background:rgba(43,29,18,.6);border:2px solid rgba(239,228,200,.6);border-radius:50%;cursor:pointer;padding:0}
.visor-boton:hover,.visor-boton:focus-visible{background:var(--vermilion);border-color:var(--parchment);outline:none}
html.visor-abierto{overflow:hidden}
/* Navegación entre libros, al pie */
.libros{max-width:760px;margin:0 auto;padding:22px 16px 30px;display:flex;justify-content:space-between;gap:24px;border-top:1px solid var(--rule)}
.libros a{text-decoration:none;color:var(--ink);font:1.1rem var(--f-sc);letter-spacing:.04em;line-height:1.3}
.libros a:hover span{color:var(--vermilion)}
.libros small{display:block;font:.85rem var(--f-sc);letter-spacing:.18em;color:var(--gold)}
.libros .sig{margin-left:auto;text-align:right}
/* Capítulos técnicos: muestras de color de la leyenda e índice del margen */
.mc{display:inline-block;width:.8em;height:.8em;border:1px solid #0006;vertical-align:-.05em;margin:0 .2em 0 .1em}
.capitula li{margin-bottom:6px}
.capitula b{font-weight:600;color:var(--vermilion)}
.volver{margin-top:10px;font:1rem var(--f-sc)}
.capitulos-demake{margin:24px 0 8px}
/* Música: osciloscopio bajo cada audio (js/ondas.js) */
.ondas{display:block;width:100%;height:96px;margin-top:8px;border-radius:3px}
/* Plano de la planta baja (Personajes), el del manual: rótulos sobre la imagen, en las coordenadas de los guiones */
.plate.plano .plano-mapa{position:relative;background:#faf4e4}
.plate.plano img{image-rendering:auto}
.plate.plano .plano-mapa span{position:absolute;transform:translate(-50%,-50%);font:clamp(.55rem,1.5vw,.8rem)/1 var(--f-sc);letter-spacing:.04em;color:var(--ink);background:rgba(250,244,228,.9);padding:2px 4px;border:1px solid var(--rule);white-space:nowrap}