/*
  La wiki, con la estética del sitio.

  El sitio público usa la receta de las portadas de juegos pixel: fondos planos
  que cambian por sección, sombras DURAS sin desenfoque, marcos gruesos, cosas
  que flotan y se hunden al apretarlas. Nada de degradés suaves ni vidrio. Esta
  wiki empezó siendo una referencia gris de documentación y no se parecía en
  nada al juego que documenta.

  La decisión que lo cambia todo es el papel: **el contenido va sobre pergamino
  con marco**, como los paneles del juego —la ficha de una salida, el
  inventario, la forja— y no sobre el fondo oscuro. La madera y la noche quedan
  para el marco de alrededor: la barra de arriba y la de la izquierda, que son
  el HUD. Adentro del papel se lee; afuera se navega.
*/

:root {
  /* La paleta del sitio, sin cambiar un dígito. */
  --night: #14120f;
  --night-2: #1c1916;
  --line: #322c25;
  --frame: #4a3d2b;
  --ink: #e8e2d6;
  --dim: #9a9084;
  --dim-2: #6f675c;
  --gold: #c8a24a;
  --gold-hi: #e5c86f;
  --paper: #e6d7b3;
  --paper-2: #dccaa2;
  --paper-3: #d1bd8f;
  --paper-ink: #2b2118;
  --paper-dim: #6b5a3e;
  --forest: #1f3a22;
  --forest-hi: #2f5a33;
  --ox: #5a231c;
  --ox-hi: #7a3428;
  --up: #6fae5a;
  --down: #c05a4a;
  --shadow: #0a0806;
  --display: "Jacquard 24", Georgia, serif;
  --pixel: "Silkscreen", "IBM Plex Mono", monospace;
  --sans: "IBM Plex Sans", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;
  /*
    La barra de la izquierda mide lo que mide su renglón más largo y ni un
    píxel más. Estaba en 244 y el texto ocupaba 150: los noventa que sobraban
    eran un pasillo vacío entre la palabra y el galón, y hacían que la columna
    del medio —la que se viene a leer— arrancara más adentro de lo necesario.
  */
  --nav: 196px;
  /*
    El índice mide lo MISMO que el menú, y no es un capricho de simetría: la
    columna del medio es la que se lee, y con las de los costados distintas
    queda corrida —178 de un lado y 200 del otro son veintidós píxeles de
    desvío— y el ojo lo nota aunque no sepa por qué. Una sola medida para los
    dos lados es una sola cosa que ajustar.
  */
  --toc: var(--nav);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 96px; }
body {
  margin: 0; background: var(--night); color: var(--ink);
  font-family: var(--sans); font-size: 15px; line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
[hidden] { display: none !important; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* El grano de papel de todo el sitio, para que los planos no parezcan pantalla. */
body::after {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 80; opacity: 0.05;
  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='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
}

.saltar {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--gold); color: var(--night); padding: 8px 14px;
}
.saltar:focus { left: 8px; top: 8px; }

/* ── cabecera: madera con borde duro ──────────────────────────────────────── */

.top {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: 18px;
  padding: 10px 20px; background: var(--night-2);
  border-bottom: 3px solid var(--shadow);
  box-shadow: 0 4px 0 rgba(10, 8, 6, 0.5);
}
.marca { display: flex; align-items: baseline; gap: 8px; flex: 0 0 auto; }
.marca-n {
  font-family: var(--display); font-size: 30px; color: var(--gold); line-height: 1;
  text-shadow: 3px 3px 0 var(--shadow);
}
.marca-w {
  font-family: var(--pixel); font-size: 10px; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--paper); text-shadow: 2px 2px 0 var(--shadow);
}

.buscador { position: relative; flex: 1 1 auto; max-width: 520px; }
.buscador input {
  width: 100%; padding: 9px 34px 9px 12px;
  background: var(--paper); border: 2px solid var(--shadow);
  box-shadow: 3px 3px 0 var(--shadow);
  color: var(--paper-ink); font-family: var(--sans); font-size: 14px;
}
.buscador input::placeholder { color: var(--paper-dim); }
.buscador input:focus { outline: none; border-color: var(--gold); }
.buscador kbd {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  font-family: var(--mono); font-size: 10px; color: var(--paper-dim);
  border: 1px solid var(--paper-dim); padding: 0 4px;
}

.qr {
  position: absolute; left: 0; right: 0; top: calc(100% + 8px); z-index: 50;
  max-height: 60vh; overflow: auto;
  background: var(--paper); border: 3px solid var(--shadow);
  box-shadow: 8px 8px 0 var(--shadow);
}
.qr a {
  display: flex; align-items: center; gap: 10px; padding: 8px 12px;
  border-bottom: 1px solid var(--paper-3); color: var(--paper-ink);
}
.qr a:last-child { border-bottom: 0; }
.qr a.on, .qr a:hover { background: var(--gold); }
.qr svg { color: var(--paper-dim); }
.qr a.on svg, .qr a:hover svg { color: var(--paper-ink); }
.qr .s {
  margin-left: auto; font-family: var(--pixel); font-size: 9px;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--paper-dim);
}
.qr .vacio { padding: 12px; color: var(--paper-dim); }

.fuera { display: flex; align-items: center; gap: 18px; }
.fuera a {
  font-family: var(--pixel); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink); text-shadow: 2px 2px 0 var(--shadow);
  padding: 6px 0; border-bottom: 2px solid transparent;
}
.fuera a:hover { color: var(--gold-hi); border-bottom-color: var(--gold); }
/* El botón de jugar es el mismo del sitio: cara de oro y sombra dura. */
.fuera .jugar {
  color: var(--night); background: var(--gold); padding: 9px 16px;
  border: 2px solid var(--shadow); box-shadow: 4px 4px 0 var(--shadow);
  text-shadow: none;
  transition: transform 0.12s steps(3), box-shadow 0.12s steps(3), background 0.15s;
}
.fuera .jugar:hover {
  background: var(--gold-hi); transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0 var(--shadow); border-bottom-color: var(--shadow);
}
.fuera .jugar:active { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--shadow); }

/* Igual que en el juego, el market y el sitio: bandera y sigla. */
/* El selector de idioma, al final de la fila: es lo último que se toca y lo
   que uno busca en la esquina de cualquier sitio. */
.lang { display: flex; gap: 4px; margin-left: auto; }
.lang a {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 8px;
  font-family: var(--pixel); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--dim); background: var(--night); border: 2px solid transparent;
}
.lang a:hover { color: var(--ink); }
.lang a.on { color: var(--gold); border-color: var(--gold); box-shadow: 3px 3px 0 var(--shadow); }
.lang .flag { flex: 0 0 auto; display: block; }
.menu {
  display: none; background: var(--night); border: 2px solid var(--shadow); color: var(--ink);
  box-shadow: 3px 3px 0 var(--shadow); font-size: 18px; line-height: 1; padding: 5px 11px; cursor: pointer;
}

/*
  La banda de tramado entre la madera y el papel.

  Es el recurso del sitio para pasar de un plano de color a otro sin degradé:
  tres franjas de puntos y damero que hacen de dientes. Acá separa el HUD del
  contenido, que es justo lo que hay que separar.
*/
.dither { display: grid; grid-template-rows: 10px 12px 10px; background: var(--b); }
.dither i { display: block; }
.dither i:nth-child(1) { background: var(--a); background-image: radial-gradient(var(--b) 2.5px, transparent 2.6px); background-size: 12px 12px; }
.dither i:nth-child(2) { background: repeating-conic-gradient(var(--a) 0 25%, var(--b) 0 50%) 0 0 / 14px 14px; }
.dither i:nth-child(3) { background: var(--b); background-image: radial-gradient(var(--a) 2.5px, transparent 2.6px); background-size: 12px 12px; }

/* ── columnas ─────────────────────────────────────────────────────────────── */

.cols {
  display: grid; grid-template-columns: var(--nav) minmax(0, 1fr) var(--toc);
  gap: 0; align-items: start;
  /*
    El tope está para que la columna del medio no se vuelva una banda de dos mil
    píxeles, no para dejar franjas negras a los costados. Estaba en 1600 y en
    una pantalla de 1920 sobraban ciento sesenta píxeles de cada lado: el menú
    quedaba flotando lejos del borde, como si la página estuviera corrida. Con
    1840 el menú arranca donde arranca la barra de arriba, y los párrafos
    siguen capados en 66 caracteres, que es lo que los mantiene legibles.
  */
  max-width: 1840px; margin: 0 auto;
}
.cols.sin-toc { grid-template-columns: var(--nav) minmax(0, 1fr); }
.cols.sin-toc .toc { display: none; }

.nav {
  position: sticky; top: 62px; align-self: start; height: calc(100vh - 62px);
  overflow: auto; padding: 22px 10px 40px;
  /*
    La barra de desplazamiento del menú, escondida.

    Era lo más ancho y lo más claro de todo ese costado: una franja gris de
    quince píxeles, siempre visible, entre el menú y la página. Separaba las dos
    cosas como si fueran dos ventanas distintas, y encima se comía ancho del
    renglón. El menú sigue desplazándose con la rueda y con el teclado; lo que
    no hace es dibujar la barra.
  */
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.nav::-webkit-scrollbar { width: 0; height: 0; }
.nav-g { margin-bottom: 22px; }
.nav-gt {
  display: block; font-family: var(--pixel); font-size: 9px; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--gold); padding: 0 8px 8px;
  text-shadow: 2px 2px 0 var(--shadow);
}
.nav ul { list-style: none; margin: 0; padding: 0; }
.nav li a {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 10px; font-size: 14px; color: var(--ink);
  border: 2px solid transparent;
}
/* Cada sección con su color, no trece manchas grises iguales. */
.nav-i { display: inline-flex; flex: 0 0 18px; color: var(--c, var(--dim)); }
.nav-i svg { display: block; }
.nav li a:hover { background: var(--night-2); border-color: var(--frame); }
/* La página en la que estás: cartel de oro con sombra dura, como los botones. */
.nav li a.on {
  color: var(--night); background: var(--gold); border-color: var(--shadow);
  box-shadow: 4px 4px 0 var(--shadow);
}
.nav li a.on .nav-i { color: var(--night); }

/*
  Las secciones de la página en la que estás, colgando de su entrada.

  El índice de la derecha ya las lista, pero ese índice aparece recién cuando
  entraste: desde el menú, «Oficios» era una sola palabra y no se veía que
  adentro hay cinco oficios. Colgadas del menú se ven antes de entrar, y una vez
  adentro sirven de dónde estoy. Solo se abren en la página activa: las trece
  entradas abiertas a la vez serían una lista de sesenta renglones.
*/
/*
  El galón, a la derecha del todo, y nada más que el galón.

  Sin marco y sin fondo: es un signo, no un botón con aspecto de botón. El área
  de clic sigue siendo de veintiséis píxeles —lo que pide un dedo— pero no se
  dibuja. Gira noventa grados al abrir, que es la única forma de que un signo
  diga en qué estado está sin escribirlo.

  Va afuera del enlace: adentro, cada intento de abrir la sección te llevaría a
  la página.
*/
.nav-rama { position: relative; }
.nav-galon {
  position: absolute; top: 5px; right: 2px;
  width: 24px; height: 26px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  background: none; border: 0; color: var(--dim-2); cursor: pointer;
}
.nav-galon:hover { color: var(--gold-hi); }
.nav-galon svg { display: block; transition: transform 130ms ease; }
.nav-rama.abierta > .nav-galon svg { transform: rotate(90deg); }
.nav-rama.abierta > .nav-galon { color: var(--gold); }
/* La entrada activa tiene fondo de oro: el galón tiene que leerse encima. */
.nav-rama > a.on ~ .nav-galon { color: var(--night); }
/* Cerrada es cerrada: sin `display:none` las secciones seguirían tabulables. */
.nav-rama:not(.abierta) > .sub { display: none; }
/* Sitio para el galón, así el título no le pasa por debajo. */
.nav-rama > a { padding-right: 26px; }

/* La sangría es la que hace que se lea como una rama, y ni un píxel más: cada
   uno que se le da se lo saca al renglón, y «Cuerpo a cuerpo» se parte en dos. */
.nav .sub { margin: 2px 0 6px 10px; border-left: 2px solid var(--frame); }

/* El índice de la derecha lleva los mismos íconos que la barra de la izquierda:
   son las mismas secciones y tienen que reconocerse igual en los dos lados. */
.toc li a { display: flex; align-items: center; gap: 7px; }
.toc .nav-i { flex: 0 0 13px; }
.nav .sub li a {
  padding: 4px 6px; font-size: 12px; color: var(--dim);
  font-family: var(--sans); border-width: 0 0 0 2px; border-color: transparent;
  margin-left: -2px;
}
.nav .sub li a:hover { background: none; color: var(--gold-hi); border-left-color: var(--gold); }

/*
  El contenido: una hoja de pergamino con marco, flotando sobre la noche. Es el
  mismo material que los paneles del juego, y hace que una tabla de números se
  lea como una página de manual y no como una consola.
*/
main {
  background: var(--paper); color: var(--paper-ink);
  border: 3px solid var(--shadow); box-shadow: 12px 12px 0 var(--shadow);
  margin: 22px 14px 60px; padding: 28px 32px 40px; min-width: 0;
}
main h1 {
  font-family: var(--display); font-size: clamp(44px, 5.4vw, 68px); font-weight: 400;
  line-height: 0.98; margin: 0 0 12px; color: var(--paper-ink);
  text-shadow: 3px 3px 0 var(--paper-3);
}
.entrada { color: var(--paper-dim); font-size: 16.5px; max-width: 66ch; margin: 0 0 28px; }
.tagline {
  font-family: var(--display); font-size: 36px; line-height: 1.12; color: var(--ox);
  margin: 0 0 28px; max-width: 40ch;
}

.toc {
  position: sticky; top: 62px; align-self: start; height: calc(100vh - 62px);
  overflow: auto; padding: 34px 16px;
}
.toc-t {
  display: block; font-family: var(--pixel); font-size: 9px; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--gold); margin-bottom: 10px;
  text-shadow: 2px 2px 0 var(--shadow);
}
.toc ul { list-style: none; margin: 0 0 16px; padding: 0; }
.toc li a {
  display: block; padding: 4px 0 4px 10px; font-size: 13px; color: var(--dim);
  border-left: 3px solid transparent;
}
.toc li a:hover, .toc li a.on { color: var(--gold-hi); border-left-color: var(--gold); }
.toc-top {
  font-family: var(--pixel); font-size: 9px; letter-spacing: 0.14em; color: var(--dim-2);
}
.toc-top:hover { color: var(--gold); }

/* ── secciones: cartel de madera sobre el papel ───────────────────────────── */

.sec { margin: 0 0 46px; }
/*
  El cartel de sección, al doble.

  Estaba en treinta píxeles con el mismo relleno que un botón, y eso es
  exactamente lo que parecía: un botón. Un título tiene que ganarle al texto por
  TAMAÑO, no por caja; el cartel de madera se queda —es la estética del sitio—
  pero ahora el que manda es la letra, y el relleno se achicó para que el marco
  acompañe en vez de encerrar.
*/
.sec > h2 {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--display); font-weight: 400; font-size: 52px; line-height: 1;
  /*
    El margen negativo alinea la LETRA con el texto de abajo, no la caja.

    El cartel tiene veinte píxeles de relleno, así que sin esto el título
    arrancaba veinte a la derecha de donde arranca el párrafo, y una columna de
    texto en la que el título está corrido se lee torcida. Se corre la caja
    hacia afuera exactamente lo que mide su relleno.
  */
  margin: 0 0 20px -20px; padding: 4px 20px 8px;
  color: var(--gold-hi); background: var(--night);
  border: 2px solid var(--shadow); box-shadow: 5px 5px 0 var(--shadow);
}
.sec > h2 .icon { width: 30px; height: 30px; }
.intro { color: var(--paper-dim); max-width: 66ch; margin: 0 0 18px; }
/*
  El rótulo de un bloque adentro de una sección.

  No es un título —no merece su cartel de madera ni entra en el índice— pero
  tampoco es texto: es la etiqueta de lo que viene abajo. En la misma letra que
  las cabeceras de tabla, para que se lea como lo que es.
*/
.sub-t {
  font-family: var(--pixel); font-size: 10px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--ox);
  margin: 22px 0 8px; padding-bottom: 5px;
  border-bottom: 1px solid var(--paper-3);
}

/*
  La ficha de una entidad: el nombre en grande con un filete de color debajo.
  El filete es lo que la separa de la de al lado sin gastar una caja entera.
*/
.ficha {
  display: flex; align-items: baseline; gap: 12px;
  font-family: var(--sans); font-weight: 500; font-size: 21px; color: var(--paper-ink);
  margin: 30px 0 12px; padding-bottom: 8px;
  border-bottom: 3px solid var(--c, var(--ox));
}
.ficha-s {
  font-family: var(--pixel); font-size: 9px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--paper-dim);
}
.ancla {
  color: var(--paper-3); opacity: 0; font-family: var(--mono); font-size: 15px;
  margin-left: -18px; width: 18px;
}
h2:hover .ancla, .ficha:hover .ancla { opacity: 1; }
.ancla:hover { color: var(--ox); }

.bloque { margin-bottom: 36px; }
/* Una salida es una tarjeta: es la unidad que se mira entera. */
.tarjeta {
  background: var(--paper-2); border: 2px solid var(--shadow);
  box-shadow: 6px 6px 0 var(--shadow);
  padding: 4px 22px 20px; margin-bottom: 22px;
}
.tarjeta .ficha { margin-top: 18px; }
.desc { color: var(--paper-dim); max-width: 66ch; margin: 0 0 16px; }

/* ── datos y píldoras ─────────────────────────────────────────────────────── */

.datos { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 18px; }
.dato {
  display: flex; flex-direction: column; min-width: 88px;
  background: var(--night); color: var(--ink);
  border: 2px solid var(--shadow); box-shadow: 3px 3px 0 var(--shadow);
  padding: 8px 12px;
}
.dato-k {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--pixel); font-size: 9px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--gold);
}
.dato-v { font-family: var(--mono); font-size: 20px; color: var(--paper); }
.dato small { color: var(--dim); font-size: 11px; }

/*
  Las etiquetas de "de dónde sale", llenas y con color propio por origen. En
  gris eran todas la misma cosa; con color, una fila se lee sin leerla: rojo
  ladrillo es forja, oro es cofre, verde es salida.
*/
/*
  La columna de "de dónde sale" mezcla píldoras de texto con ranuras de cofre,
  y hay que alinearlas por el medio: sin esto la píldora se cuelga de la línea
  base y queda escalonada al lado de la ranura, que es alta.
*/
.origenes { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 5px; }
.origenes .pildora { margin: 0; }
/*
  La columna de "de dónde sale" se queda en UN renglón.

  Con las etiquetas partidas en dos líneas la tabla se ve rota: la fila crece
  al doble, las etiquetas quedan escalonadas y BOTÍN cuelga solo abajo. `width:
  1%` más `nowrap` es la receta de siempre para una columna que tiene que medir
  exactamente lo que ocupa su contenido: el navegador le da lo mínimo que le
  permite el `nowrap`, que es todo el renglón, y el resto del ancho se lo
  reparten las otras columnas.
*/
td.origen { width: 1%; white-space: nowrap; }
td.origen .origenes { flex-wrap: nowrap; }

.pildora {
  display: inline-block; font-family: var(--pixel); font-size: 9px;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--paper); background: var(--c, var(--frame));
  border: 2px solid var(--shadow); box-shadow: 2px 2px 0 var(--shadow);
  padding: 3px 7px; margin: 2px 5px 2px 0;
}
/* Una etiqueta que además es enlace —el cofre— se levanta al pasar por encima,
   como todo lo que se puede apretar en el sitio. Subrayarla la ensuciaría. */
a.pildora { text-decoration: none; }
a.pildora:hover { border-color: var(--gold-hi); box-shadow: 3px 3px 0 var(--shadow); }
.vacio { color: var(--paper-dim); }
.sep, .x { color: var(--paper-dim); margin: 0 3px; font-size: 12px; }
/*
  Un ingrediente es su ranura, su nombre y su cantidad, en un renglón.

  La cantidad venía suelta después del enlace, y como el enlace es un
  `inline-flex` que ocupa la altura de la ranura, el «×8» se caía al renglón de
  abajo y quedaba flotando debajo del dibujo. Envuelto, los tres van juntos y la
  cantidad se alinea con el nombre, que es lo que modifica.
*/
.ingrediente { display: inline-flex; align-items: center; margin-right: 14px; }
.ingrediente .x { margin: 0 0 0 5px; font-family: var(--mono); }
.mini { color: var(--ox); font-size: 13px; }
.mini:hover { color: var(--ox-hi); }

.premios { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; }
.premio {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--mono); font-size: 14px; color: var(--paper);
  background: var(--forest); border: 2px solid var(--shadow);
  box-shadow: 3px 3px 0 var(--shadow); padding: 5px 10px;
}
.premio .ref { color: var(--paper); }
.premio .ref-i { color: var(--gold-hi); }

/* ── enlaces a entidades ──────────────────────────────────────────────────── */

.ref { display: inline-flex; align-items: center; gap: 6px; color: var(--paper-ink); }
.ref:hover .ref-n {
  color: var(--ox); text-decoration: underline; text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
.ref-i { display: inline-flex; color: var(--c, var(--paper-dim)); flex: 0 0 auto; }
.ref-i svg { display: block; }
.attr {
  display: inline-flex; align-items: center; gap: 4px;
  font-family: var(--mono); font-size: 12px; color: var(--paper-ink);
}
.attr:hover { color: var(--ox); }
.attr small { color: var(--paper-dim); font-size: 9px; }

/* La ficha al pasar el puntero: madera, para que se despegue del papel. */
.tip {
  position: fixed; z-index: 90; pointer-events: none; max-width: 320px;
  background: var(--night-2); color: var(--ink);
  border: 3px solid var(--shadow); box-shadow: 7px 7px 0 var(--shadow);
  padding: 11px 13px;
}
.tip-h { display: flex; align-items: center; gap: 9px; margin-bottom: 8px; }
.tip-h b { font-size: 15px; color: var(--gold-hi); }
.tip-h .i { color: var(--gold); display: inline-flex; }
.tip-m { display: grid; grid-template-columns: auto 1fr; gap: 3px 14px; font-size: 12px; margin: 0; }
.tip-m dt {
  font-family: var(--pixel); font-size: 9px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--dim);
}
.tip-m dd { margin: 0; font-family: var(--mono); color: var(--paper); }

/* ── tablas: encabezado de madera, filas de papel ─────────────────────────── */

.tabla-scroll { overflow-x: auto; margin: 0 0 20px; border: 2px solid var(--shadow); }
table { width: 100%; border-collapse: collapse; font-size: 14px; background: var(--paper); }
thead th {
  background: var(--night); text-align: left; white-space: nowrap;
  font-family: var(--pixel); font-size: 9px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--gold);
  padding: 10px; border-bottom: 3px solid var(--shadow);
}
@media (min-width: 1181px) {
  .tabla-scroll { overflow: visible; }
  thead th { position: sticky; top: 62px; z-index: 10; box-shadow: 0 3px 0 var(--shadow); }
}
tbody td {
  padding: 7px 10px; border-bottom: 1px solid var(--paper-3);
  vertical-align: middle; color: var(--paper-ink);
}
/* Filas alternadas: con siete columnas de números el ojo se pierde de renglón. */
tbody tr:nth-child(even) { background: var(--paper-2); }
tbody tr:hover { background: var(--gold); }
tbody tr:hover td, tbody tr:hover .ref { color: var(--paper-ink); }
/* La fila a la que se llegó por enlace se marca: deep-linkear a una entre
   ciento veinticinco y no señalarla es dejar a alguien mirando una tabla. */
tbody tr:target { background: var(--gold-hi); box-shadow: inset 5px 0 0 var(--ox); }
td.num, th.num { text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; }
td.centro, th.centro { text-align: center; }
/* Ver `tabla()`: con tres columnas o menos, la tabla mide lo que ocupa, y el
   marco de alrededor se achica con ella. */
table.angosta { width: auto; max-width: 100%; min-width: min(100%, 340px); }
.tabla-scroll.angosta { width: fit-content; max-width: 100%; }
table.densa { font-size: 13px; }
table.densa tbody td { padding: 5px 8px; }
/*
  El nombre, en negrita. Solo el nombre.

  Toda la tabla en el mismo peso se lee como una planilla: hay que recorrerla
  con el dedo para no perder el renglón. La primera columna es SIEMPRE de qué se
  trata la fila —el item, el material, el grado, la rareza— y es lo que el ojo
  busca al saltar de fila en fila; el resto son datos de eso. Con la primera en
  600 la tabla se escanea sola.

  600 y no 700: la IBM Plex Sans se carga en 400, 500 y 600, y pedir un peso que
  no está hace que el navegador lo invente engordando los trazos, que en pixel
  art y tipografía fina se nota enseguida.
*/
tbody td:first-child, tbody td:first-child .ref-n { font-weight: 600; }
/*
  Y el nombre no se parte por la mitad. Al angostar esta columna para que la de
  "de dónde sale" entre en un renglón, «Botas de Arcano I» quedaba cortado en
  dos líneas: un nombre partido deja de leerse como un nombre. La tabla ya sabe
  desbordar de costado (`.tabla-scroll`) si de verdad no entra.
*/
tbody td:first-child .ref { white-space: nowrap; }
.desc-td { color: var(--paper-dim); font-size: 12px; max-width: 42ch; }
.reparto { display: flex; flex-wrap: wrap; gap: 8px; }
.tier {
  display: inline-block; min-width: 28px; text-align: center; font-family: var(--mono);
  background: var(--paper-3); border: 1px solid var(--paper-dim); margin-right: 4px; font-size: 12px;
}

/* ── filtros: los controles del sitio ─────────────────────────────────────── */

.filtros {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 16px;
  background: var(--paper-2); border: 2px solid var(--shadow);
  box-shadow: 4px 4px 0 var(--shadow); padding: 12px 14px;
}
.filtros input, .filtros select {
  background: var(--paper); border: 2px solid var(--shadow); color: var(--paper-ink);
  font-family: var(--sans); font-size: 13px; padding: 7px 10px;
}
.filtros input:focus, .filtros select:focus { outline: none; border-color: var(--ox); }
.cuenta {
  font-family: var(--pixel); font-size: 10px; letter-spacing: 0.1em;
  color: var(--paper-dim); margin-left: auto;
}

/* ── cruces ───────────────────────────────────────────────────────────────── */

.cruces {
  display: grid; grid-template-columns: 132px 1fr; gap: 8px 16px;
  border-top: 2px dashed var(--paper-3); padding-top: 14px; margin-top: 16px;
}
.cruce { display: contents; }
.cruce-k {
  font-family: var(--pixel); font-size: 9px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ox); padding-top: 4px;
}
.cruce-v { display: flex; flex-wrap: wrap; gap: 6px 16px; }

.cadena { display: flex; flex-direction: column; gap: 12px; margin-bottom: 22px; }
.rama {
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
  background: var(--paper-2); border: 2px solid var(--shadow);
  box-shadow: 4px 4px 0 var(--shadow); padding: 12px 16px;
}
.flecha { color: var(--ox); font-weight: 700; }

.nota {
  border: 2px solid var(--shadow); border-left-width: 8px; border-left-color: var(--ox);
  box-shadow: 4px 4px 0 var(--shadow);
  padding: 10px 16px; color: var(--paper-ink); background: var(--paper-2);
  margin: 0 0 20px; font-size: 14px;
}
.nota.hueco { border-left-color: var(--down); }
.lista { list-style: none; padding: 0; margin: 0 0 20px; }
.lista li { padding: 7px 0; border-bottom: 1px solid var(--paper-3); }

/* ── portada ──────────────────────────────────────────────────────────────── */

/* Los números del juego, en tiras de color como las tarjetas del sitio. */
.cifras {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(122px, 1fr));
  gap: 10px; margin-bottom: 36px;
}
.cifra {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  background: var(--night); color: var(--paper); padding: 18px 10px;
  border: 2px solid var(--shadow); box-shadow: 5px 5px 0 var(--shadow);
}
.cifra:nth-child(3n+2) { background: var(--forest); }
.cifra:nth-child(3n+3) { background: var(--ox); }
.cifra-i { color: var(--gold-hi); }
.cifra b {
  font-family: var(--mono); font-size: 28px; line-height: 1.1; color: var(--gold-hi);
}
.cifra span:last-child {
  font-family: var(--pixel); font-size: 9px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--paper); text-align: center; opacity: 0.85;
}

.puertas { display: grid; grid-template-columns: repeat(auto-fill, minmax(268px, 1fr)); gap: 16px; }
.puerta {
  display: block; background: var(--night-2); color: var(--ink);
  border: 2px solid var(--shadow);
  box-shadow: 6px 6px 0 var(--shadow), inset 0 0 0 1px var(--frame);
  padding: 18px 20px;
  transition: transform 0.15s steps(3), box-shadow 0.15s steps(3);
}
.puerta:hover {
  transform: translate(-3px, -3px);
  box-shadow: 9px 9px 0 var(--shadow), inset 0 0 0 1px var(--gold);
}
.puerta b {
  display: block; font-family: var(--display); font-size: 26px; font-weight: 400;
  color: var(--gold-hi); line-height: 1.1;
}
.puerta span { display: block; color: var(--dim); font-size: 13.5px; margin-top: 6px; }

.pie {
  margin-top: 60px; padding-top: 20px; border-top: 2px dashed var(--paper-3);
  color: var(--paper-dim); font-size: 12px;
}
.pie a { color: var(--ox); }
.pie a:hover { color: var(--ox-hi); text-decoration: underline; }

/* ── angosto ──────────────────────────────────────────────────────────────── */

@media (max-width: 1180px) {
  .cols { grid-template-columns: var(--nav) minmax(0, 1fr); }
  .toc { display: none; }
}
@media (max-width: 880px) {
  .cols { grid-template-columns: minmax(0, 1fr); }
  .nav {
    display: none; position: fixed; inset: 62px 0 0 0; height: auto; z-index: 35;
    background: var(--night);
  }
  body.nav-abierta .nav { display: block; }
  .menu { display: block; }
  .fuera { display: none; }
  main { margin: 14px 8px 40px; padding: 20px 16px 30px; box-shadow: 7px 7px 0 var(--shadow); }
  main h1 { font-size: 34px; }
  .cruces { grid-template-columns: 1fr; }
  .cruce-k { padding-top: 10px; }
  .sec > h2 { font-size: 34px; padding: 4px 14px 7px; margin-left: -14px; }
  .sec > h2 .icon { width: 22px; height: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}

/*
  La escalera de mods de una pieza: uno por renglón.

  El punto de color adelante es la rareza que lo destraba —gris el primero, rojo
  el quinto— así que la columna cuenta el sistema sin una palabra: subir de
  rareza es bajar un renglón más. Los tres valores van a la derecha, en
  monoespaciada, para que las tres columnas de números se alineen entre filas.
*/
.escalera { list-style: none; margin: 0; padding: 0; }
.escalera li {
  display: flex; align-items: baseline; gap: 7px;
  padding: 1px 0; line-height: 1.35;
  /* Un renglón es un renglón: «Res. elemental» partido en dos deja de ser una
     fila de la escalera y pasa a ser dos. La tabla ya desborda de costado. */
  white-space: nowrap;
}
.escalera .punto {
  flex: 0 0 7px; width: 7px; height: 7px; margin-top: 1px;
  border: 1px solid var(--paper-ink); align-self: center;
}
/* El nombre no se parte: «Res. elemental» en dos renglones deja de ser una
   fila de la escalera y pasa a ser dos. La tabla ya sabe desbordar de costado. */
.escalera .esc-n { flex: 1 1 auto; padding-right: 10px; }
/* El `nowrap` va en el texto y no en el envoltorio: el enlace es un `inline-flex`
   y el que decide dónde cortar es el `<span>` de adentro. */
.escalera .esc-n .ref, .escalera .esc-n .ref-n { white-space: nowrap; }
/*
  Los tres tiers, en tres columnas de ancho fijo.

  Separados por puntos quedaban a distintas alturas en cada renglón y había que
  leer cada uno para saber cuál era el mejor. En tres celdas del mismo ancho,
  alineadas a la derecha, la columna de la izquierda es SIEMPRE el peor tier y
  la de la derecha SIEMPRE el mejor — en todos los items de la tabla, no solo
  dentro de una fila. Eso convierte doscientos números en tres columnas.
*/
.esc-v {
  flex: 0 0 auto; display: grid; grid-template-columns: repeat(3, 44px);
  font-family: var(--mono); font-size: 11px;
  color: var(--paper-dim); font-variant-numeric: tabular-nums;
}
.esc-v b { font-weight: 400; text-align: right; padding-left: 6px; }
/* El mejor de los tres, marcado: es el que se busca. */
.esc-v b:last-child { color: var(--paper-ink); }

/* ── el dibujo de un item: la ranura del inventario ───────────────────────── */

/*
  Un item no se muestra como una imagen suelta al lado de un texto: se muestra
  en SU RANURA, la misma del arcón del juego. Los valores son literalmente los
  del cliente (`.inv-panel.paper .inv-cell`): marco de dos píxeles, pergamino
  adentro, bisel oscuro arriba a la izquierda y claro abajo a la derecha. El que
  abre la wiki ya vio esa ranura mil veces jugando, y reconocerla acá es
  reconocer el item antes de leer el nombre.

  El dibujo va SIEMPRE a 32, que es el tamaño real del PNG. Antes salía a 18 y a
  28 según el lugar: achicar pixel art a un factor que no es entero no lo
  achica, lo licúa —cada píxel del dibujo cae entre dos de la pantalla— y por
  eso los items se veían sucios al lado de los íconos vectoriales, que sí
  escalan. A tamaño real o no va.
*/
.ranura {
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
  width: 42px; height: 42px; box-sizing: border-box;
  border: 2px solid #6d5230; border-radius: 0; background: #d3bf8e;
  box-shadow: inset 2px 2px 0 #b39a68, inset -2px -2px 0 #efe0bd;
  image-rendering: pixelated;
}
.px { image-rendering: pixelated; image-rendering: crisp-edges; display: block; }
/* Igual que en el juego: la ranura se marca cuando el puntero está encima. */
.ref:hover .ranura, tbody tr:hover .ranura { border-color: #3a2a14; }

/*
  El arte que todavía no existe: la MISMA ranura, con el vectorial adentro y
  apagada. Antes era un recuadro punteado de otro tamaño, y una tabla mitad
  dibujos y mitad recuadros se leía como un error de carga. Así se lee como lo
  que es —una ranura sin dibujo todavía— y de paso queda a la vista cuánto
  falta, que es la mejor forma de que se termine.
*/
.ranura.vacia {
  background: #dccaa0; border-color: #a88c5c;
  box-shadow: inset 2px 2px 0 #c5ad7c, inset -2px -2px 0 #efe0bd;
  color: var(--paper-dim); opacity: 0.9;
}
.ranura.vacia svg { display: block; opacity: 0.75; }
/*
  Ni dibujo ni vectorial: una ranura pelada. Se cruza con dos líneas para que
  se lea como un lugar reservado y no como algo que no cargó. Si aparece en
  pantalla es que falta un ícono, y así se ve enseguida cuál.
*/
.ranura.sin-nada {
  background-image:
    linear-gradient(135deg, transparent 46%, #a88c5c 46%, #a88c5c 54%, transparent 54%),
    linear-gradient(45deg, transparent 46%, #a88c5c 46%, #a88c5c 54%, transparent 54%);
  opacity: 0.5;
}
.ref:hover .ranura.vacia, tbody tr:hover .ranura.vacia { opacity: 1; }

/*
  Una fórmula se lee como fórmula: monoespaciada y sobre un fondo propio.

  En la misma tipografía que el texto, «golpe × 50 ÷ (50 + armadura)» se lee
  como una frase con símbolos raros. En monoespaciada se lee como lo que es, y
  los números se alinean con el resto de las columnas numéricas de la wiki.
*/
.formula {
  font-family: var(--mono); font-size: 12px; white-space: nowrap;
  background: var(--paper-3); border: 1px solid var(--paper-dim);
  padding: 2px 6px; color: var(--paper-ink);
}

/* ── las caras de una raza ────────────────────────────────────────────────── */

/*
  Una cara, recortada de la hoja del creador.

  Cada hoja tiene cuatro cuadros de 23×30, uno por dirección; se muestra el
  primero, que es el que mira de frente. Al doble exacto: a tamaño real una cara
  son treinta píxeles de alto y no se le ve la expresión, y duplicar por un
  entero la agranda sin empastarla.
*/
.caras { display: flex; flex-direction: column; gap: 8px; margin: 14px 0 6px; }
.caras-fila { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.caras-k {
  flex: 0 0 84px; font-family: var(--pixel); font-size: 9px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--paper-dim);
}
.caras-v { display: flex; flex-wrap: wrap; gap: 6px; }
.cara {
  width: var(--w); height: var(--h); flex: 0 0 auto;
  /* La hoja son cuatro cuadros en fila: se agranda al cuádruple y se muestra el
     primero. `background-size` con `auto` en el alto la escala proporcional. */
  background-size: calc(var(--w) * 4) var(--h);
  background-position: 0 0; background-repeat: no-repeat;
  image-rendering: pixelated;
  background-color: #1a1712;
  border: 2px solid var(--shadow); box-shadow: inset 0 0 0 2px #262019;
}
/* La jaula de una ficha flotante: a tamaño real y quieta, para que entre al
   lado del texto sin taparlo. */
.jaula-ficha { width: 64px; height: 92px; }

.pie-caras {
  font-family: var(--pixel); font-size: 9px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--paper-dim); margin: 0 0 4px;
}
/* Sube en verde, baja en rojo: un modificador de raza se lee sin leerlo. */
.reparto .sube { color: #2f5a33; }
.reparto .baja { color: #7a3428; }

/* ── los bichos ───────────────────────────────────────────────────────────── */

/*
  Un bicho, sacado de su hoja de dibujos con CSS y nada más.

  La hoja es una grilla: filas por dirección, columnas por cuadro de caminata.
  Poniéndola de fondo agrandada a `columnas × filas` veces la casilla, y
  corriendo el fondo, se ve UN cuadro. Correrlo de a saltos con `steps()` es la
  caminata. Sin una línea de JavaScript, sin un GIF por bicho, y siempre en
  sincronía con lo que dibuja el juego, porque es el MISMO PNG.

  La jaula es del alto del bicho más alto y el dibujo apoya abajo: si cada
  casilla midiera lo suyo, la fila del murciélago y la del espectro tendrían
  alturas distintas y la tabla quedaría escalonada.
*/
.jaula {
  display: flex; align-items: flex-end; justify-content: center;
  width: 200px; height: 184px; box-sizing: border-box; padding-bottom: 8px;
  background: #1a1712; border: 2px solid var(--shadow);
  box-shadow: inset 0 0 0 2px #262019;
}
.bicho {
  width: var(--w); height: var(--h); flex: 0 0 auto;
  /*
    Se repite de costado para poder caminar MÁS DE UNA VUELTA.

    Con `no-repeat`, correr el fondo más allá del ancho de la hoja deja el
    cuadro vacío: la caminata era una sola pasada y se terminaba enseguida.
    Repitiendo, correrlo tres anchos son tres vueltas seguidas, que es lo que
    hace que se lea como "está caminando" y no como "parpadeó".
  */
  background-repeat: repeat-x;
  background-size: calc(var(--w) * var(--cols)) calc(var(--h) * var(--rows));
  background-position-x: 0;
  background-position-y: calc(var(--h) * var(--row) * -1);
  image-rendering: pixelated;
}

/*
  Quieto, camina, camina, camina, quieto.

  El primer tramo se queda en el cuadro cero —`steps(1)` no avanza hasta el
  final— y el segundo recorre la hoja tres veces seguidas. La gracia es que el
  `steps()` va DENTRO del keyframe: cada tramo elige cómo avanza, y por eso uno
  puede estar quieto mientras el otro salta.

  Tres vueltas y no una: con una sola, la caminata duraba medio segundo y el
  bicho parecía dar un respingo. Caminando tres veces se ve andar, que es de lo
  que se trata. La parte quieta se queda en un tercio del ciclo.

  Hay un keyframe por cantidad de cuadros y no uno solo con `steps(var(--cols))`
  porque una variable adentro de `steps()` no es confiable en todos los
  navegadores. Son cuatro; el generador corta la compilación si aparece un bicho
  con una cantidad que no está acá.
*/
@keyframes bicho-3 {
  0% { background-position-x: 0; animation-timing-function: steps(1); }
  33% { background-position-x: 0; animation-timing-function: steps(9); }
  100% { background-position-x: calc(var(--w) * var(--cols) * -3); }
}
@keyframes bicho-4 {
  0% { background-position-x: 0; animation-timing-function: steps(1); }
  33% { background-position-x: 0; animation-timing-function: steps(12); }
  100% { background-position-x: calc(var(--w) * var(--cols) * -3); }
}
@keyframes bicho-6 {
  0% { background-position-x: 0; animation-timing-function: steps(1); }
  33% { background-position-x: 0; animation-timing-function: steps(18); }
  100% { background-position-x: calc(var(--w) * var(--cols) * -3); }
}
@keyframes bicho-8 {
  0% { background-position-x: 0; animation-timing-function: steps(1); }
  33% { background-position-x: 0; animation-timing-function: steps(24); }
  100% { background-position-x: calc(var(--w) * var(--cols) * -3); }
}
/* Quien pidió menos movimiento no quiere ocho bichos caminando en una tabla. */
@media (prefers-reduced-motion: reduce) {
  .bicho { animation: none !important; }
}

/* ── el plano de un mapa ──────────────────────────────────────────────────── */

/*
  No es el mapa renderizado: es su PLANO, dibujado con la máscara de colisión
  que el mapa ya trae. Las manzanas macizas, las calles vacías entre ellas.
  Pesa unos kilobytes y contesta lo único que un mapa tiene que contestar, que
  es dónde está cada cosa.
*/
.plano {
  background: var(--paper-2); border: 2px solid var(--shadow);
  box-shadow: 5px 5px 0 var(--shadow); padding: 10px; margin: 0 0 12px;
}
.plano svg { display: block; width: 100%; height: auto; max-height: 62vh; }
.plano .suelo { fill: #cdb98c; }
.plano .macizo rect { fill: #6b5a3e; }
.plano .punto { stroke: #2b2118; stroke-width: 0.6; }
.plano .zona { stroke: #2b2118; stroke-width: 0.5; opacity: 0.8; }
.plano .marca { cursor: pointer; }
.plano .marca:hover .punto { stroke-width: 1.2; stroke: var(--paper); }
.plano .marca:hover .zona { opacity: 1; }

/*
  El rótulo aparece al pasar por encima. Todos a la vez serían ilegibles —una
  docena de nombres pisándose en el centro del pueblo— y ninguno dejaría el mapa
  mudo. Se muestra el que se está mirando, que es el que interesa.
*/
.plano .rotulo {
  fill: #f4ecd8; stroke: #14120f; stroke-width: 0.7; paint-order: stroke;
  font-family: var(--pixel); text-anchor: middle; pointer-events: none;
  opacity: 0; transition: opacity 90ms linear;
}
.plano .marca:hover .rotulo, .plano .marca:focus .rotulo { opacity: 1; }
/* Encima de los demás puntos: si no, un vecino le pisa el nombre. */
.plano .marca:hover, .plano .marca:focus { outline: none; }

/*
  Con la imagen del juego de fondo no hace falta el papel: el mapa YA tiene
  color. El marco se queda —es el mismo panel del resto del sitio— y los puntos
  se refuerzan, porque un punto que sobre pergamino se veía solo tiene que
  competir con pasto, agua y techos.
*/
.plano.con-imagen { background: var(--night-2); }
.plano.con-imagen svg { max-height: 64vh; }
.plano.con-imagen .punto { stroke: #14120f; stroke-width: 0.9; }
.plano.con-imagen .zona { stroke: #14120f; stroke-width: 0.7; opacity: 0.55; }
.plano.con-imagen .marca:hover .punto { stroke: #f4ecd8; stroke-width: 1.4; }

.leyenda { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0 0 18px; }
.leyenda-i {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--pixel); font-size: 9px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--paper-dim);
}
.leyenda-i i {
  width: 10px; height: 10px; border: 1px solid var(--paper-ink); flex: 0 0 auto;
}

/* ── fichas de equipo y material ─────────────────────────────────────────────
   El dibujo grande a la izquierda y los datos al lado, como la tarjeta del
   juego: primero se reconoce la cosa, después se leen sus números. */
.ficha-item { display: flex; align-items: center; gap: 16px; margin: 0 0 18px; flex-wrap: wrap; }
.ficha-item .datos { margin: 0; }
.ficha-icono { flex: 0 0 auto; }
.ficha-icono .hueco, .ficha-icono .ref-i { transform: scale(2); transform-origin: left center; margin-right: 34px; display: inline-block; }
.ficha-icono .ref { text-decoration: none; }
.sec .origen { display: flex; flex-wrap: wrap; gap: 8px; }
.mercado { margin: 22px 0 8px; }
.mercado .boton {
  display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px;
  font-family: var(--pixel, inherit); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase;
  color: #14120f; background: #c8a24a; text-decoration: none;
  box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.45);
}
.mercado .boton:hover { background: #e5c86f; }
.mercado .boton:active { transform: translate(2px, 2px); box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.45); }

/* El precio de ahora: un recuadro con los mismos datos oscuros de la ficha. */
.precio { margin: 26px 0 0; }
.precio-t {
  display: block; margin-bottom: 8px; font-family: var(--pixel, inherit); font-size: 11px;
  letter-spacing: 0.1em; text-transform: uppercase; color: #6b5a3e;
}
.precio-v { color: #4a3420; }
.precio-v .datos { margin: 0; }