/* ============================================================
   Guía de Solarpunk — la piel propia
   ------------------------------------------------------------
   Aquí va lo que NO puede vivir en guias/comun/: las tipografías
   del propio juego, su logo y los iconos de tecla, que son
   archivos de esta guía y de ninguna otra.

   El color y las tres familias se declaran en el tema de
   datos.js; esto solo carga los archivos y pone las piezas que
   el motor no sabe dibujar.
   ============================================================ */

/* --- Las dos tipografías del juego -------------------------------------
   NEXT ART es la del logo y de los rótulos de Solarpunk: geométrica, ancha
   y con las cajas muy abiertas. Va de titular. Nexa Heavy es la de los
   sobretítulos en versalitas, que es para lo único que sirve un peso tan
   gordo. El cuerpo de texto NO usa ninguna de las dos: a 13px las dos se
   empastan, y ahí manda Karla. */
@font-face{
  font-family:'NEXT ART';
  src:url('fuentes/NEXT_ART_SemiBold.otf') format('opentype');
  font-weight:400;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'NEXT ART';
  src:url('fuentes/NEXT_ART_Bold.otf') format('opentype');
  font-weight:700;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Nexa';
  src:url('fuentes/Nexa-Heavy.ttf') format('truetype');
  font-weight:800;font-style:normal;font-display:swap;
}

/* NEXT ART ya viene ancha de fábrica: el apretón de -.04em que guia.css le
   pone a una serif de titular aquí le come las cajas. */
h1,h2,h3,.stats b{letter-spacing:-.018em}
.hero h1{letter-spacing:-.025em;line-height:.98}

/* Los sobretítulos, en la Nexa del juego. */
.kicker,.eyebrow,.stats,.tag{font-family:'Nexa','Karla',system-ui,sans-serif;font-weight:800}
.kicker{letter-spacing:.16em}

/* El sello del héroe lleva el dirigible del juego en vez de un punto: el glifo
   pegado a la frase rompía la búsqueda en el diccionario del inglés, y de paso
   el sello dice de qué juego es sin tener que escribirlo. */
.eyebrow::before{
  content:"";width:15px;height:15px;flex:0 0 auto;
  background:url('marca/dirigible.png') center/contain no-repeat;
  opacity:.9;
}

/* --- El logo del juego en el héroe ------------------------------------
   El titular sigue siendo el <h1>: el logo es la marca del juego, no el
   titulo de la guia, y por eso va encima y pequeño. */
.logotipo{
  display:block;width:clamp(190px,24vw,286px);height:auto;
  margin:0 0 20px;
  filter:drop-shadow(0 6px 18px rgba(0,0,0,.55));
}

/* --- Las teclas del juego ---------------------------------------------
   Los PNG vienen en blanco sobre transparente, así que se tiñen con la
   tinta del tema en vez de pintarse encima. */
.tecla{
  width:22px;height:22px;flex:0 0 auto;object-fit:contain;
  opacity:.62;vertical-align:-5px;
}
.pistas{
  display:flex;flex-wrap:wrap;gap:7px 16px;align-items:center;
  font-size:12px;color:var(--muted);line-height:1.4;
}
.pistas>span{display:inline-flex;align-items:center;gap:6px}
.pistas .tecla{opacity:.72}

/* En la leyenda del mapa, sobre foto, las teclas necesitan más cuerpo. */
.legend .pistas{gap:6px 13px;font-size:11px}
.legend .tecla{width:19px;height:19px;opacity:.85}